/* ========================================================================== ThinkStartup – Wiederverwendbare Komponenten (Header/Footer/Buttons/ Typografie/Formulare/Badges/...). 1:1 aus dem geprueften Prototyp (C:\laragon\www\thinkstartup\src\assets\styles\main.css) uebernommen, Farb-/Spacing-/Radius-/Motion-Werte auf die WordPress-Theme.json- Tokens umgestellt (--wp--preset--..., --wp--custom--...) statt eigener Variablen. ========================================================================== */ /* --------------------------------- Reset ---------------------------------- Fehlte bisher komplett und verursachte u. a. Textueberlauf bei langen Woertern (kein overflow-wrap) sowie Standard-Browser-Abstaende auf Ueberschriften/Listen. Aus main.css uebernommen (Farben via theme.json bereits durch styles.color/typography abgedeckt, hier nur der Rest). */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-size: 16px; line-height: 1.6; overflow-x: hidden; overflow-wrap: break-word; } .ts-jobs-hidden [data-ts-jobs-feature] { display: none !important; } .ts-jobs-enabled [data-ts-jobs-off] { display: none !important; } .ts-companies-hidden [data-ts-companies-feature] { display: none !important; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; } button { font: inherit; } h1, h2, h3, h4, p, figure { margin: 0; } /* WordPress' flow layout gives the first block inside
a default gap. The static reference starts the hero directly below the header, so contain that editor default at the theme boundary instead of compensating in every page template. */ .wp-site-blocks > main.wp-block-group { margin-block-start: 0; } .wp-site-blocks > main.wp-block-group > :first-child { margin-block-start: 0; } /* Die statische Vorlage steuert ihren vertikalen Rhythmus innerhalb der jeweiligen Abschnitte. Gutenberg darf zwischen den Template-Bloecken kein zusaetzliches 24px-"block gap" einschieben. */ .page .wp-site-blocks > main.wp-block-group > * { margin-block-start: 0; } /* The post-content wrapper is an additional Gutenberg flow context. Its default block gap has no equivalent in the static DOM and used to create an arbitrary 24px seam between otherwise adjacent sections. */ .page .entry-content.wp-block-post-content:not(.ts-prose) > * { margin-block-start: 0; } /* Generic text pages (templates/page.html: Impressum, Datenschutz, …) are plain prose: they keep the .ts-prose rhythm of articles (paragraph gap, heading margins). */ .ts-generic-page > .wp-block-post-content { margin-block-start: var(--wp--preset--spacing--lg); } .ts-generic-page > .ts-prose > :first-child { margin-top: 0; } /* Headings sit closer to their own text than to the previous section. */ .ts-generic-page > .ts-prose > :is(h2, h3, h4) + :not(h2, h3, h4) { margin-top: var(--wp--preset--spacing--xs); } /* Gutenberg's constrained layout is the prose width (720px). The static ThinkStartup components deliberately own a wider 1220px page container. Only an explicitly named .container may leave Gutenberg's prose measure; anonymous groups keep their native WordPress behaviour. */ .wp-block-group.is-layout-constrained > .container { width: 100% !important; max-width: var(--wp--style--global--wide-size, 1220px) !important; margin-inline: auto !important; } /* If a serialized group is itself the standard container, its direct card grids fill that container. They do not receive a second container or a second horizontal gutter. */ .wp-block-group.container.is-layout-constrained > :is(.kit-grid-2, .kit-grid-3, .ts-mosaic, .ts-trustblock, .ts-contact-info) { width: 100%; max-width: none !important; margin-inline: 0 !important; } /* Block-Template-Gruppen verlieren im Frontend vereinzelt ihre spacing-Styles. Die Artikelansicht braucht den gleichen 2XL-Einstieg wie die Referenz. */ .wp-site-blocks > main.wp-block-group > article.container { padding-block: var(--wp--preset--spacing--2-xl); } /* Query Loop emits an extra list wrapper. It must not become a visual card or add browser list spacing between the real ThinkStartup cards. */ .wp-block-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; } :focus-visible { outline: 2.5px solid var(--wp--preset--color--turquoise-600); outline-offset: 3px; border-radius: 4px; } .container { width: 100%; max-width: var(--wp--style--global--wide-size, 1220px); margin-inline: auto; padding-inline: var(--wp--custom--layout--container-pad, clamp(1.25rem, 4vw, 2.5rem)); } /* One source of truth for horizontal page geometry. The aliases make the intended variants inspectable without introducing editor-controlled width sliders. "Narrow" is reserved for deliberately compact components such as forms; all standard editorial and card content uses .container. */ :root { --ts-layout-standard: var(--wp--style--global--wide-size, 1220px); --ts-layout-narrow: 760px; --ts-layout-gutter: var(--wp--custom--layout--container-pad, clamp(1.25rem, 4vw, 2.5rem)); --ts-sticky-header-offset: calc(4.95rem + 1rem); } main :where([id]) { scroll-margin-top: var(--ts-sticky-header-offset); } /* ------------------------ Interne Komponentenübersicht ---------------------- */ /* Diese Seite ist kein Landingpage-Layout, sondern eine bewusst gerahmte Arbeitsbibliothek. Die einzelnen Blöcke behalten ihre echten Frontend-Regeln, bekommen aber einen konsistenten Katalog-Rahmen und verlässliche Abstände. */ .ts-page-komponentenuebersicht .wp-block-post-content { padding-bottom: var(--wp--preset--spacing--3-xl); } .ts-component-catalog__intro, .ts-component-catalog__section-head, .ts-component-catalog__item-head { width: 100%; max-width: var(--ts-layout-standard); margin-inline: auto; } .ts-component-catalog__intro > *, .ts-component-catalog__section-head > *, .ts-component-catalog__item-head > * { max-width: 72ch; } .ts-component-catalog__intro, .ts-component-catalog__section-head, .ts-component-catalog__item-head { padding-inline: var(--ts-layout-gutter); } .ts-component-catalog__intro { padding-block: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl); } .ts-component-catalog__intro p { max-width: 72ch; margin-top: var(--wp--preset--spacing--sm); } .ts-component-catalog__section { padding-top: var(--wp--preset--spacing--2-xl); } .ts-component-catalog__section-head { padding-bottom: var(--wp--preset--spacing--lg); border-bottom: 1px solid var(--wp--preset--color--border-200); } .ts-component-catalog__section-head p { max-width: 72ch; margin-top: var(--wp--preset--spacing--xs); color: var(--wp--preset--color--text-600); } .ts-component-catalog__item { padding-block: var(--wp--preset--spacing--xl); } .ts-component-catalog__item-head { margin-bottom: var(--wp--preset--spacing--lg); } .ts-component-catalog__item-head h3 { font-size: var(--wp--preset--font-size--medium); } .ts-component-catalog__item-head p { max-width: 72ch; margin-top: var(--wp--preset--spacing--3-xs); color: var(--wp--preset--color--text-600); } .ts-component-catalog__item-meta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: var(--wp--preset--spacing--2xs); padding: 0.22rem 0.55rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--sky-100); color: var(--wp--preset--color--petrol-600); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } /* The catalog assigns the rendering context deliberately per example. It never clips a full-width component and it never adds another container to a component that already owns one. */ .ts-component-catalog__preview--standard { width: 100%; max-width: var(--ts-layout-standard); margin-inline: auto; padding-inline: var(--ts-layout-gutter); } .ts-component-catalog__preview--narrow { width: 100%; max-width: var(--ts-layout-narrow); margin-inline: auto; padding-inline: var(--ts-layout-gutter); } .ts-component-catalog__preview--full { width: 100%; } @media (max-width: 640px) { .ts-component-catalog__intro, .ts-component-catalog__section { padding-top: var(--wp--preset--spacing--xl); } .ts-component-catalog__item { padding-block: var(--wp--preset--spacing--lg); } } /* Der Gutenberg-Flow begrenzt direkte Kinder eines "constrained" Groups auf die Textbreite. Fuer Magazinraster ist das falsch: Die .container-Klasse ist dort bewusst der breite Inhaltsrahmen des Prototyps. */ .ts-query-section { width: 100% !important; max-width: none !important; } .ts-query-section > .wp-block-query.container, .ts-query-section .wp-block-query.container > .kit-cardgrid-3 { width: 100% !important; max-width: var(--wp--style--global--wide-size, 1220px) !important; margin-inline: auto !important; } .kit-row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); align-items: center; } .ts-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--petrol-600); background-image: linear-gradient(var(--wp--preset--color--turquoise-500), var(--wp--preset--color--turquoise-500)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-link:hover { background-size: 100% 2px; color: var(--wp--preset--color--ink-900); } /* ------------------------------- Buttons -------------------------------- */ .ts-btn { --btn-h: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: var(--btn-h); padding: 0 1.5rem; border-radius: var(--wp--custom--radius--pill); font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.95rem; border: 2px solid var(--wp--preset--color--ink-900); cursor: pointer; white-space: nowrap; box-shadow: var(--wp--preset--shadow--hard-sm); transition: transform 120ms var(--wp--custom--motion--ease-out), box-shadow 120ms var(--wp--custom--motion--ease-out), background var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out), border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--wp--preset--color--ink-900); } .ts-btn:active { transform: translate(3px, 3px); box-shadow: none; } .ts-btn--primary { background: var(--wp--preset--color--petrol-600); color: #fff; } .ts-btn--primary:hover { background: var(--wp--preset--color--ink-800); } .ts-btn--accent { background: var(--wp--preset--color--mustard-500); color: var(--wp--preset--color--ink-900); } .ts-btn--accent:hover { background: var(--wp--preset--color--mustard-600); } .ts-btn--secondary { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink-900); } .ts-btn--secondary:hover { color: var(--wp--preset--color--petrol-600); } .ts-btn--ghost-onDark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.6); box-shadow: 3px 3px 0 rgba(255,255,255,0.35); } .ts-btn--ghost-onDark:hover { background: rgba(255,255,255,0.16); box-shadow: 2px 2px 0 rgba(255,255,255,0.35); } .ts-btn--disabled, .ts-btn:disabled { background: var(--wp--preset--color--border-100); color: var(--wp--preset--color--text-400); cursor: not-allowed; box-shadow: none; border-color: var(--wp--preset--color--border-200); } .ts-btn--disabled:hover, .ts-btn:disabled:hover { transform: none; } .ts-btn--sm { --btn-h: 2.375rem; padding: 0 1.125rem; font-size: 0.85rem; } /* -------------------------------- Header -------------------------------- */ .wp-block-template-part:has(> .ts-header) { position: sticky; top: 0; z-index: 80; } .ts-header { position: relative; z-index: 1; background: var(--wp--preset--color--ink-900); border-bottom: none; } .ts-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--md); min-height: 4.95rem; padding-block: 1.1rem; } .ts-logo { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 1.2rem; color: #fff; text-decoration: none; } .ts-logo__mark { display: inline-block; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-right: 15px solid var(--wp--preset--color--mustard-500); } .ts-nav__list { display: flex; gap: var(--wp--preset--spacing--lg); list-style: none; margin: 0; padding: 0; } .ts-nav__list a { font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,0.82); position: relative; padding: 0.4rem 0; text-decoration: none; } .ts-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--wp--preset--color--turquoise-500); transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-nav__list a:hover { color: #fff; } .ts-nav__list a:hover::after, .ts-nav__list a.is-active::after { transform: scaleX(1); } .ts-header__actions { display: flex; align-items: center; gap: 0.6rem; } .ts-header__search { width: 220px; } .ts-header__search input[type="search"] { min-height: 2.375rem; font-size: 0.82rem; } .ts-header .ts-search input[type="search"] { background: rgba(255,255,255,0.1); border-color: transparent; color: #fff; } .ts-header .ts-search input[type="search"]::placeholder { color: rgba(255,255,255,0.55); } .ts-header .ts-search input[type="search"]:focus { border-color: rgba(255,255,255,0.4); box-shadow: none; background: rgba(255,255,255,0.16); } .ts-header .ts-search svg { color: rgba(255,255,255,0.55); } .ts-mobile-toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; color: #fff; } .ts-mobile-toggle__bar { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-mobile-toggle[aria-expanded="true"] .ts-mobile-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ts-mobile-toggle[aria-expanded="true"] .ts-mobile-toggle__bar:nth-child(2) { opacity: 0; } .ts-mobile-toggle[aria-expanded="true"] .ts-mobile-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .ts-mobile-toggle__bar { transition: none; } } @media (max-width: 1180px) { .ts-nav, .ts-header .ts-header__search, .ts-header__actions > .ts-btn { display: none !important; } .ts-mobile-toggle { display: inline-flex; } } /* ---------------------------- Mobile-Panel ------------------------------ */ .ts-mobile-panel { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: rgba(10,43,61,0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), visibility 0s var(--wp--custom--motion--duration-base); } .ts-mobile-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), visibility 0s; } .ts-mobile-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--wp--preset--color--paper); padding: var(--wp--preset--spacing--lg); box-shadow: var(--wp--preset--shadow--lg); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--lg); transform: translateX(100%); opacity: 0; transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), opacity var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-mobile-panel.is-open .ts-mobile-panel__sheet { transform: translateX(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .ts-mobile-panel, .ts-mobile-panel__sheet { transition: none; } } .ts-mobile-panel__head { display: flex; align-items: center; justify-content: space-between; } .ts-mobile-panel__head .ts-logo { color: var(--wp--preset--color--ink-900); } .ts-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; background: transparent; color: var(--wp--preset--color--ink-900); cursor: pointer; } .ts-mobile-panel__list { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; margin: 0; padding: 0; } .ts-mobile-panel__list a { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.5rem; border-radius: var(--wp--custom--radius--md); font-weight: 600; color: var(--wp--preset--color--text-900); text-decoration: none; } .ts-mobile-panel__list a svg { width: 17px; height: 17px; flex: none; color: var(--wp--preset--color--text-400); transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out), color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-mobile-panel__list a:hover, .ts-mobile-panel__list a:focus-visible { background: var(--wp--preset--color--turquoise-100); color: var(--wp--preset--color--petrol-600); } .ts-mobile-panel__list a:hover svg, .ts-mobile-panel__list a:focus-visible svg { transform: translateX(3px); color: var(--wp--preset--color--petrol-600); } .ts-mobile-panel__list a.is-active { color: var(--wp--preset--color--petrol-600); } .ts-mobile-panel__list a.is-active svg { color: var(--wp--preset--color--turquoise-500); } .ts-mobile-panel__sheet > a.ts-btn { justify-content: center; } /* -------------------------------- Footer --------------------------------- */ .ts-footer { background: var(--wp--preset--color--ink-900); color: rgba(255,255,255,0.78); padding: var(--wp--preset--spacing--2-xl) 0 var(--wp--preset--spacing--lg); } .ts-footer a { text-decoration: none; } .ts-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--wp--preset--spacing--xl); padding-bottom: var(--wp--preset--spacing--xl); border-bottom: 1px solid rgba(255,255,255,0.12); } .ts-footer__brand .ts-logo { color: #fff; } .ts-footer__tag { margin-top: var(--wp--preset--spacing--sm); max-width: 32ch; color: rgba(255,255,255,0.62); font-size: 0.92rem; } .ts-footer__social { display: flex; gap: 0.6rem; margin-top: var(--wp--preset--spacing--md); } .ts-footer__social a { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: all var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); color: #fff; } .ts-footer__social a:hover { background: var(--wp--preset--color--turquoise-500); border-color: var(--wp--preset--color--turquoise-500); color: var(--wp--preset--color--ink-900); } .ts-footer__social svg { width: 16px; height: 16px; } .ts-footer__col h5 { font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 var(--wp--preset--spacing--sm); } .ts-footer__col ul { display: flex; flex-direction: column; gap: 0.65rem; list-style: none; margin: 0; padding: 0; } .ts-footer__col a { font-size: 0.95rem; color: rgba(255,255,255,0.82); transition: color var(--wp--custom--motion--duration-fast); } .ts-footer__col a:hover { color: var(--wp--preset--color--turquoise-300); } .ts-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--wp--preset--spacing--lg); font-size: 0.85rem; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); } .ts-footer__bottom a { color: rgba(255,255,255,0.6); } .ts-footer__bottom a:hover { color: #fff; } .ts-footer__bottom .kit-row { display: flex; gap: var(--wp--preset--spacing--sm); } @media (max-width: 880px) { .ts-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .ts-footer__grid { grid-template-columns: 1fr; } } /* ------------------------------ Typografie -------------------------------- */ .ts-display { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.01; letter-spacing: -0.025em; color: var(--wp--preset--color--ink-900); } .ts-h1 { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: clamp(2.25rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--wp--preset--color--ink-900); } .ts-h2 { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.16; letter-spacing: -0.01em; color: var(--wp--preset--color--ink-900); } .ts-h3 { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.375rem; line-height: 1.3; color: var(--wp--preset--color--ink-900); } .ts-h4 { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: var(--wp--preset--color--ink-900); } .ts-lead { font-family: var(--wp--preset--font-family--body); font-weight: 400; font-size: 1.25rem; line-height: 1.55; color: var(--wp--preset--color--text-600); } .ts-body { font-family: var(--wp--preset--font-family--body); font-size: 1.125rem; line-height: 1.7; color: var(--wp--preset--color--text-900); } .ts-body-sm { font-family: var(--wp--preset--font-family--body); font-size: 0.9375rem; line-height: 1.6; color: var(--wp--preset--color--text-600); } .ts-meta { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.8125rem; color: var(--wp--preset--color--text-400); letter-spacing: 0.01em; } .ts-label { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--petrol-600); } /* -------------------------------- Layout-Raster ---------------------------- */ .kit-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--md); } .kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); } @media (max-width: 980px) { .kit-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 780px) { .kit-grid-2 { grid-template-columns: 1fr; } .kit-grid-2 > * { min-width: 0; } } @media (max-width: 640px) { .kit-grid-3 { grid-template-columns: 1fr; } .kit-grid-3 > * { min-width: 0; } } /* Weniger als drei Karten (z. B. ausgeblendeter Phase-2-Bereich): zentriert statt Lücke. */ .kit-grid-3--count-1 { grid-template-columns: minmax(0, 24rem); justify-content: center; } @media (min-width: 641px) { .kit-grid-3--count-2 { grid-template-columns: repeat(2, minmax(0, 24rem)); justify-content: center; } } /* -------------------------------- Badges ----------------------------------- */ .ts-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: 3px; font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; border: 2px solid var(--wp--preset--color--ink-900); box-shadow: var(--wp--preset--shadow--hard-sm); } .ts-badge--turquoise { background: var(--wp--preset--color--turquoise-100); color: var(--wp--preset--color--petrol-600); } .ts-badge--mustard { background: var(--wp--preset--color--mustard-100); color: var(--wp--preset--color--mustard-600); } .ts-badge--coral { background: var(--wp--preset--color--coral-100); color: var(--wp--preset--color--coral-600); } .ts-badge--sage { background: var(--wp--preset--color--sage-100); color: var(--wp--preset--color--sage-600); } .ts-badge--berry { background: var(--wp--preset--color--berry-100); color: var(--wp--preset--color--berry-600); } /* core/post-terms-Block als Badge (echte Kategorien statt fester Farbklasse) */ .wp-block-post-terms.ts-badge { text-decoration: none; } .wp-block-post-terms.ts-badge a { color: inherit; text-decoration: none; } /* ------------------------------ Formularfelder ------------------------------ */ .ts-field { display: flex; flex-direction: column; gap: 0.4rem; } .ts-field__label { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 0.85rem; color: var(--wp--preset--color--ink-900); } .ts-field__input { width: 100%; height: 3rem; border-radius: var(--wp--custom--radius--md); border: 1.5px solid var(--wp--preset--color--border-200); background: var(--wp--preset--color--paper); padding: 0 1rem; font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; color: var(--wp--preset--color--ink-900); transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out), box-shadow var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } textarea.ts-field__input { height: auto; padding: 0.8rem 1rem; resize: vertical; min-height: 6rem; line-height: 1.5; } select.ts-field__input { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385969c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.75rem; } .ts-field__input::placeholder { color: var(--wp--preset--color--text-400); } .ts-field__input:focus { border-color: var(--wp--preset--color--turquoise-500); box-shadow: 0 0 0 4px var(--wp--preset--color--turquoise-100); outline: none; } .ts-form-panel { background: var(--wp--preset--color--sky-50); border-radius: var(--wp--custom--radius--xl); padding: var(--wp--preset--spacing--xl); } .ts-contact-form__honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ts-contact-form__response { display: none; margin-top: var(--wp--preset--spacing--lg); padding: var(--wp--preset--spacing--lg); border: 1.5px solid var(--wp--preset--color--turquoise-500); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink-900); } .ts-contact-form__response.is-visible { display: grid; gap: 0.4rem; animation: ts-form-response-in 220ms var(--wp--custom--motion--ease-out) both; } .ts-contact-form__response strong { font-size: 1.1rem; } .ts-contact-form__response span { color: var(--wp--preset--color--text-600); line-height: 1.55; } .ts-contact-form__response.is-error { border-color: var(--wp--preset--color--coral-500); background: var(--wp--preset--color--coral-100); } .ts-contact-form__response.is-error { color: var(--wp--preset--color--ink-900); } @keyframes ts-form-response-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------ Trust-/Info-Karten -------------------------- */ .ts-trustitem { padding: var(--wp--preset--spacing--md); } .ts-trustitem__icon { width: 3rem; height: 3rem; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--sky-100); color: var(--wp--preset--color--petrol-600); display: flex; align-items: center; justify-content: center; margin-bottom: var(--wp--preset--spacing--sm); } .ts-trustitem__icon svg { width: 22px; height: 22px; } /* -------------------------------- Minimal-Hero ------------------------------ */ .ts-lp-hero--split { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--wp--preset--spacing--xl); align-items: center; background: linear-gradient(175deg, var(--wp--preset--color--sky-100), var(--wp--preset--color--sky-50)); color: var(--wp--preset--color--ink-900); border-radius: var(--wp--custom--radius--xl); padding: var(--wp--preset--spacing--xl); } .ts-lp-hero--split .ts-display { color: var(--wp--preset--color--ink-900); font-size: clamp(2rem, 3.6vw, 2.9rem); } .ts-lp-hero--split p { color: var(--wp--preset--color--text-600); } .ts-lp-hero__media { border-radius: var(--wp--custom--radius--lg); overflow: hidden; aspect-ratio: 4/3.2; box-shadow: var(--wp--preset--shadow--lg); transform: rotate(1.2deg); } .ts-lp-hero__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px) { .ts-lp-hero--split { grid-template-columns: 1fr; } } .ts-lp-hero--minimal { position: relative; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--border-100); color: var(--wp--preset--color--ink-900); text-align: center; padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl); } .ts-lp-hero--minimal .ts-display { color: var(--wp--preset--color--ink-900); } .ts-lp-hero--minimal p { color: var(--wp--preset--color--text-600); margin-inline: auto; } /* ------------------------------ Section-Intro/Breadcrumbs ------------------- */ .ts-section-intro { max-width: 56ch; } .ts-section-intro.center { max-width: 60ch; margin-inline: auto; text-align: center; } /* Die statische Vorlage platziert linke Abschnittsüberschriften innerhalb des breiten Inhaltsrasters. Gutenberg begrenzt direkte Kinder von Flow-Gruppen sonst auf die schmale Textspalte und verschiebt sie optisch von den Karten. */ .wp-block-group.is-layout-flow > .wp-block-thinkstartup-section-intro.container:not(.center), .wp-block-group.is-layout-constrained > .wp-block-thinkstartup-section-intro.container:not(.center) { width: 100% !important; max-width: var(--wp--style--global--wide-size, 1220px) !important; margin-inline: auto !important; } /* If the parent already is the static .container, the custom section intro must fill that parent's content box. Gutenberg otherwise constrains it to the 720px prose measure and centres a left-aligned section heading. */ .wp-block-group.container.is-layout-constrained > .wp-block-thinkstartup-section-intro:not(.center) { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } .ts-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; color: var(--wp--preset--color--text-400); margin-bottom: var(--wp--preset--spacing--sm); } .ts-breadcrumbs a { color: var(--wp--preset--color--text-600); font-weight: 600; } .ts-breadcrumbs a:hover { color: var(--wp--preset--color--petrol-600); } .ts-breadcrumbs .sep { color: var(--wp--preset--color--border-200); } .ts-breadcrumbs .current { color: var(--wp--preset--color--ink-900); font-weight: 700; } /* -------------------------------- Chips (Kategorien) ------------------------- */ .ts-chipbar { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 0; padding: 0; } /* Hoehere Spezifitaet als .container/.ts-chipbar allein, damit die Reihenfolge im Stylesheet nicht entscheidet, wenn beide Klassen kombiniert werden (z. B. auf dem core/categories-Block, der kein verschachteltes .container-Div erlaubt). */ .ts-chipbar.container { max-width: var(--wp--style--global--wide-size, 1220px); margin-inline: auto; padding-inline: var(--wp--custom--layout--container-pad, clamp(1.25rem, 4vw, 2.5rem)); } .ts-chipbar a, .ts-chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.5rem; padding: 0 1.1rem; border-radius: var(--wp--custom--radius--pill); border: 1.5px solid var(--wp--preset--color--border-200); background: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.88rem; color: var(--wp--preset--color--text-600); cursor: pointer; transition: all var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-chipbar a:hover, .ts-chip:hover { border-color: var(--wp--preset--color--petrol-600); color: var(--wp--preset--color--ink-900); } .ts-chip[aria-pressed="true"] { border-color: var(--wp--preset--color--petrol-600); background: var(--wp--preset--color--turquoise-100); color: var(--wp--preset--color--petrol-600); font-weight: 700; } .ts-filter-reset { margin-top: var(--wp--preset--spacing--sm); border: 0; background: transparent; cursor: pointer; } /* Karten-Links tragen display:block inline; ausgefilterte Karten müssen trotzdem verschwinden. */ [data-company-card][hidden], [data-job-card][hidden] { display: none !important; } /* ----------------------------------- Suche --------------------------------- */ .ts-search { position: relative; display: flex; align-items: center; max-width: 42rem; } .ts-search svg { position: absolute; left: 1rem; width: 1.15rem; height: 1.15rem; color: var(--wp--preset--color--text-400); pointer-events: none; } .ts-search input[type="search"] { width: 100%; min-height: 3.2rem; padding: 0.75rem 1rem 0.75rem 3rem; border: 1.5px solid var(--wp--preset--color--border-200); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink-900); font: inherit; } .ts-search input[type="search"]:focus { border-color: var(--wp--preset--color--turquoise-500); box-shadow: 0 0 0 4px var(--wp--preset--color--turquoise-100); outline: none; } .ts-search-empty { max-width: 42rem; padding: var(--wp--preset--spacing--xl); border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--sky-50); } /* -------------------------------- Artikel-Karten ----------------------------- */ .kit-cardgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); } @media (max-width: 980px) { .kit-cardgrid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kit-cardgrid-3 { grid-template-columns: 1fr; } } .ts-illu-frame { position: relative; overflow: hidden; background: var(--wp--preset--color--sky-100); } .ts-illu-frame img { width: 100%; height: 100%; display: block; object-fit: cover; } .ts-card { display: flex; flex-direction: column; background: var(--wp--preset--color--paper); border-radius: var(--wp--custom--radius--lg); overflow: hidden; border: 1px solid var(--wp--preset--color--border-100); box-shadow: var(--wp--preset--shadow--sm); height: 100%; transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), border-color var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--md); border-color: var(--wp--preset--color--border-200); } .ts-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--wp--preset--color--sky-100); margin: 0; } .ts-card__media img { width: 100%; height: 100%; object-fit: cover; } .ts-card__media .ts-badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 1; } .ts-badge--category-onImage { transform: rotate(-2deg); } .ts-card__body { padding: var(--wp--preset--spacing--md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .ts-card__title { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--wp--preset--color--ink-900); } .ts-card:hover .ts-card__title { color: var(--wp--preset--color--petrol-600); } .ts-card__teaser { font-size: 0.94rem; color: var(--wp--preset--color--text-600); line-height: 1.6; } .ts-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; font-size: 0.82rem; color: var(--wp--preset--color--text-400); } .ts-card__meta img.avatar { width: 22px; height: 22px; border-radius: 50%; } .ts-card--compact { flex-direction: row; align-items: stretch; } .ts-card--compact .ts-card__media { flex: 0 0 132px; aspect-ratio: 1; } .ts-card--compact .ts-card__body { padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); gap: 0.35rem; } .ts-card--compact .ts-card__title { font-size: 0.98rem; } @media (max-width: 640px) { .ts-card--compact { flex-direction: column; } .ts-card--compact .ts-card__media { flex-basis: auto; aspect-ratio: 16 / 9; } } /* --------------------------- Unternehmensprofile ------------------------- */ .ts-card__media--compact { flex: 0 0 190px; aspect-ratio: 1.3 / 1; } .ts-card__teaser--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ts-company-card .ts-card__body { min-width: 0; } .ts-company-card .ts-spotlight__stats { margin-top: auto; } .ts-card__meta--jobs { color: var(--wp--preset--color--text-600); } .ts-card__meta--highlight { color: var(--wp--preset--color--petrol-600); font-weight: 700; } .ts-spotlight { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--wp--preset--spacing--xl); align-items: stretch; padding: var(--wp--preset--spacing--xl); border-radius: var(--wp--custom--radius--xl); background: var(--wp--preset--color--sky-50); } .ts-spotlight__head { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.9rem; } .ts-spotlight__logo { flex: none; width: 3rem; height: 3rem; border-radius: var(--wp--custom--radius--md); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.9rem; } .ts-spotlight__meta { color: var(--wp--preset--color--text-600); font-size: 0.86rem; line-height: 1.4; } .ts-spotlight__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--wp--preset--spacing--md); } .ts-spotlight__stats { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--lg); margin-top: var(--wp--preset--spacing--lg); padding-top: var(--wp--preset--spacing--md); border-top: 1px solid var(--wp--preset--color--border-200); } .ts-spotlight__stat { display: flex; flex-direction: column; gap: 0.1rem; } .ts-spotlight__stat b { color: var(--wp--preset--color--ink-900); font-size: 0.95rem; line-height: 1.2; } .ts-spotlight__stat span { color: var(--wp--preset--color--text-600); font-size: 0.78rem; line-height: 1.3; } .ts-spotlight__media { min-height: 290px; border-radius: var(--wp--custom--radius--lg); overflow: hidden; } .ts-spotlight__media img { width: 100%; height: 100%; object-fit: cover; } .ts-spotlight--no-media { grid-template-columns: 1fr; } .ts-company-home { padding-block: var(--wp--preset--spacing--2-xl); } .ts-context-company { height: 100%; padding: var(--wp--preset--spacing--md); border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--sm); } .ts-context-column { display: flex; flex-direction: column; } .ts-context-column > .ts-label { display: block; margin-bottom: 0.5rem; } .ts-context-column > a, .ts-context-column > div:last-child { display: flex; } .ts-context-column .ts-context-company, .ts-context-column .ts-jobcard { flex: 1; } .ts-context-company .ts-spotlight__stats { margin-top: var(--wp--preset--spacing--md); } @media (max-width: 780px) { .ts-spotlight { grid-template-columns: 1fr; padding: var(--wp--preset--spacing--lg); } .ts-spotlight__media { min-height: 220px; } .ts-card__media--compact { flex-basis: 150px; } } @media (max-width: 560px) { .ts-company-card { flex-direction: column; } .ts-card__media--compact { flex-basis: auto; aspect-ratio: 16 / 9; } .ts-spotlight__stats { gap: var(--wp--preset--spacing--md); } } /* --------------------------------- Jobbörse --------------------------------- */ .ts-jobcard { position: relative; display: flex; align-items: center; gap: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--md); padding-left: calc(var(--wp--preset--spacing--md) + 5px); border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--sm); transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out), box-shadow var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-jobcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--wp--custom--radius--lg) 0 0 var(--wp--custom--radius--lg); background: var(--accent, var(--wp--preset--color--turquoise-500)); } .ts-jobcard:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--md); } .ts-jobcard__logo { flex: none; width: 56px; height: 56px; border-radius: var(--wp--custom--radius--md); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--body); font-weight: 800; color: #fff; font-size: 1.1rem; box-shadow: var(--wp--preset--shadow--sm); } .ts-jobcard__main { flex: 1; min-width: 0; } .ts-jobcard__title { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--ink-900); } .ts-jobcard__company { font-size: 0.9rem; color: var(--wp--preset--color--text-600); margin-top: 0.15rem; } .ts-jobcard__tags { display: flex; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; } .ts-jobcard__side { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .ts-jobcard__salary { font-family: var(--wp--preset--font-family--body); font-weight: 700; color: var(--wp--preset--color--ink-900); font-size: 0.98rem; } .ts-jobcard__posted { font-size: 0.8rem; color: var(--wp--preset--color--text-400); } .ts-joblist { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--sm); } @media (max-width: 700px) { .ts-jobcard { flex-wrap: wrap; } .ts-jobcard__side { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } } /* --------------------------------- Artikel ---------------------------------- Struktur/Klassen 1:1 aus src/_layouts/post.njk. Scrollspy (Hervorheben des aktiven TOC-Links beim Scrollen) bewusst NICHT uebernommen: im Prototyp beobachtet data-toc-target das .ts-toc-Element selbst statt der einzelnen Artikel-Ueberschriften - die Verdrahtung dort erreicht sichtbar nicht ihren eigentlichen Zweck. Die TOC-Links funktionieren als normale Anker trotzdem. */ .ts-article-hero { padding: 0; max-width: 60rem; } .ts-article-hero__title { margin-top: var(--wp--preset--spacing--md); max-width: 24ch; } .ts-article-hero__meta { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--wp--preset--spacing--lg); flex-wrap: wrap; } .ts-article-hero__meta .who { display: flex; align-items: center; gap: 0.6rem; } .ts-article-hero__meta img { width: 34px; height: 34px; border-radius: 50%; } .ts-article-hero__meta .name { font-weight: 700; font-size: 0.9rem; color: var(--wp--preset--color--ink-900); } .ts-article-hero__meta .when { font-size: 0.85rem; color: var(--wp--preset--color--text-400); } .ts-article-hero__media-wrap { position: relative; margin-top: var(--wp--preset--spacing--xl); } .ts-article-hero__media { border-radius: var(--wp--custom--radius--xl); overflow: hidden; aspect-ratio: 21/9; box-shadow: var(--wp--preset--shadow--lg); } .ts-article-hero__lead { margin-top: var(--wp--preset--spacing--xl); max-width: 60ch; } .ts-sticky { --r: -4deg; position: absolute; width: 122px; padding: 0.65rem 0.7rem; background: var(--wp--preset--color--mustard-500); color: var(--wp--preset--color--ink-900); font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.82rem; line-height: 1.28; text-align: left; border: 2px solid var(--wp--preset--color--ink-900); border-radius: 4px; box-shadow: var(--wp--preset--shadow--hard); transform: rotate(var(--r)); z-index: 3; } .ts-sticky--turquoise { background: var(--wp--preset--color--turquoise-100); } .ts-sticky--paper { background: var(--wp--preset--color--paper); } .ts-toc { border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--lg); background: var(--wp--preset--color--sky-50); } .ts-toc__title { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--text-400); margin-bottom: var(--wp--preset--spacing--sm); } .ts-toc__list { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; margin: 0; padding: 0; } .ts-toc__list a { display: block; padding: 0.4rem 0; margin-left: 0.8rem; border-left: 3px solid transparent; font-size: 0.9rem; color: var(--wp--preset--color--text-600); font-weight: 500; transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out), border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--ease-out); } .ts-toc__list a:hover { color: var(--wp--preset--color--ink-900); } .ts-toc__list li.sub a { margin-left: 1.6rem; font-weight: 500; font-size: 0.86rem; } .ts-toc-mobile { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--sm); padding: 0.9rem 1.1rem; border-radius: var(--wp--custom--radius--md); border: 1px solid var(--wp--preset--color--border-200); background: var(--wp--preset--color--sky-50); cursor: pointer; } .ts-toc-mobile__label { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--wp--preset--color--ink-900); font-size: 0.92rem; } .ts-toc-mobile__label svg { width: 18px; height: 18px; color: var(--wp--preset--color--petrol-600); } .ts-toc-mobile__panel { margin-top: 0.6rem; border-radius: var(--wp--custom--radius--md); border: 1px solid var(--wp--preset--color--border-200); background: var(--wp--preset--color--paper); padding: 0.4rem; display: none; } .ts-toc-mobile__panel.is-open { display: block; } .ts-toc-mobile__panel a { display: block; padding: 0.7rem 0.8rem; border-radius: var(--wp--custom--radius--sm); font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--text-600); } .ts-toc-mobile__panel a:hover { background: var(--wp--preset--color--sky-100); color: var(--wp--preset--color--ink-900); } /* Muss nach .ts-toc-mobile stehen: gleiche Spezifitaet (eine Klasse), die spaeter stehende Regel gewinnt sonst faelschlich das display:flex zurueck. */ .ts-article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); margin-top: var(--wp--preset--spacing--2-xl); align-items: start; } .ts-article-layout__toc { position: sticky; top: 100px; } .ts-article-layout__toc .ts-toc { width: 100%; } .ts-article-layout__toc-mobile { display: none; } @media (max-width: 900px) { .ts-article-layout { grid-template-columns: 1fr; } .ts-article-layout__toc { display: none; } .ts-article-layout__toc-mobile { display: block; margin-top: var(--wp--preset--spacing--lg); } } .ts-prose { max-width: 68ch; font-size: 1.125rem; line-height: 1.75; color: var(--wp--preset--color--text-900); } .ts-prose > * + * { margin-top: var(--wp--preset--spacing--md); } .ts-prose h2 { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.025em; color: var(--wp--preset--color--ink-900); margin-top: var(--wp--preset--spacing--xl); } .ts-prose h3 { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--wp--preset--color--ink-900); margin-top: var(--wp--preset--spacing--lg); } .ts-prose ul, .ts-prose ol { padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; } .ts-prose li::marker { color: var(--wp--preset--color--turquoise-600); font-weight: 700; } .ts-prose strong { color: var(--wp--preset--color--ink-900); } .ts-prose a { color: var(--wp--preset--color--petrol-600); font-weight: 700; text-decoration: underline; text-decoration-color: var(--wp--preset--color--turquoise-300); text-underline-offset: 3px; } /* Hervorgehobene Box: Stil „Hervorgehobene Box“ des Core-Blocks „Gruppe“ – Optik der Karten (Akzentkante oben, Rundung, Rand), heller Hintergrund. Ersetzt die früheren Kadence-Kästen. */ .wp-block-group.is-style-ts-box { position: relative; overflow: hidden; padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); padding-top: calc(var(--wp--preset--spacing--md) + 5px); border-radius: var(--wp--custom--radius--lg); border: 1px solid var(--wp--preset--color--border-100); background: var(--wp--preset--color--sky-50); } .wp-block-group.is-style-ts-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--wp--preset--color--turquoise-500); } .ts-prose .wp-block-group.is-style-ts-box { margin-block: var(--wp--preset--spacing--lg); } .wp-block-group.is-style-ts-box > * { margin-block: 0; } .wp-block-group.is-style-ts-box > * + * { margin-top: var(--wp--preset--spacing--sm); } .wp-block-group.is-style-ts-box > .wp-block-heading { font-size: 1.15rem; } /* Quellenangabe unter Grafiken/Zahlen (Absatz mit Klasse ts-source-note). */ .ts-prose .ts-source-note, .ts-source-note { font-size: 0.85rem; line-height: 1.5; color: var(--wp--preset--color--text-600); } .ts-prose .ts-source-note a { font-weight: 600; } /* ThinkStartup-Listen: Core-Liste mit Stilvarianten (Editor: Block „Liste“ → Stile). Ersetzt die früheren Kadence-Icon-Listen. Icon-Kachel wie bei den Benefit-Karten: Pastellfläche, Strich-Icon in der kräftigen Variante derselben Farbe. Einzelne Einträge können per CSS-Klasse is-ts-item-check / is-ts-item-cross ein eigenes Icon bekommen. */ ul.wp-block-list[class*="is-style-ts-"] { list-style: none; padding-left: 0; margin-left: 0; display: flex; flex-direction: column; gap: 0.65rem; --ts-li-bg: var(--wp--preset--color--turquoise-100); --ts-li-fg: var(--wp--preset--color--turquoise-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } ul.wp-block-list[class*="is-style-ts-"] > li { position: relative; padding-left: 2.35rem; margin: 0; } ul.wp-block-list[class*="is-style-ts-"] > li::marker { content: none; } ul.wp-block-list[class*="is-style-ts-"] > li::before { content: ""; position: absolute; left: 0; top: 0.2rem; top: calc(0.5lh - 0.78rem); width: 1.56rem; height: 1.56rem; border-radius: var(--wp--custom--radius--sm, 0.5rem); background: var(--ts-li-bg); } ul.wp-block-list[class*="is-style-ts-"] > li::after { content: ""; position: absolute; left: 0.28rem; top: 0.48rem; top: calc(0.5lh - 0.5rem); width: 1rem; height: 1rem; background: var(--ts-li-fg); -webkit-mask: var(--ts-li-icon) center / contain no-repeat; mask: var(--ts-li-icon) center / contain no-repeat; } ul.wp-block-list.is-style-ts-plus { --ts-li-bg: var(--wp--preset--color--sage-100); --ts-li-fg: var(--wp--preset--color--sage-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } ul.wp-block-list.is-style-ts-minus { --ts-li-bg: var(--wp--preset--color--coral-100); --ts-li-fg: var(--wp--preset--color--coral-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); } ul.wp-block-list.is-style-ts-check { --ts-li-bg: var(--wp--preset--color--turquoise-100); --ts-li-fg: var(--wp--preset--color--turquoise-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } ul.wp-block-list.is-style-ts-flag-warn { --ts-li-bg: var(--wp--preset--color--coral-100); --ts-li-fg: var(--wp--preset--color--coral-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21v-6m0 0V4s1.5-1 4-1 4 2 6.5 2S19 4 19 4v11s-1.5 1-4 1-4-2-6.5-2S5 15 5 15'/%3E%3C/svg%3E"); } ul.wp-block-list.is-style-ts-flag-good { --ts-li-bg: var(--wp--preset--color--sage-100); --ts-li-fg: var(--wp--preset--color--sage-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21v-6m0 0V4s1.5-1 4-1 4 2 6.5 2S19 4 19 4v11s-1.5 1-4 1-4-2-6.5-2S5 15 5 15'/%3E%3C/svg%3E"); } /* Pfeil: schlichte Aufzählung ohne Kachel. */ ul.wp-block-list.is-style-ts-arrow { --ts-li-bg: transparent; --ts-li-fg: var(--wp--preset--color--turquoise-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); gap: 0.5rem; } ul.wp-block-list.is-style-ts-arrow > li { padding-left: 1.6rem; } ul.wp-block-list.is-style-ts-arrow > li::after { left: 0; width: 1.05rem; height: 1.05rem; top: calc(0.5lh - 0.525rem); } ul.wp-block-list[class*="is-style-ts-"] > li.is-ts-item-check { --ts-li-bg: var(--wp--preset--color--turquoise-100); --ts-li-fg: var(--wp--preset--color--turquoise-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } ul.wp-block-list[class*="is-style-ts-"] > li.is-ts-item-cross { --ts-li-bg: var(--wp--preset--color--coral-100); --ts-li-fg: var(--wp--preset--color--coral-600); --ts-li-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); } ul.wp-block-list.is-style-ts-arrow > li:is(.is-ts-item-check, .is-ts-item-cross) { padding-left: 2.35rem; } ul.wp-block-list.is-style-ts-arrow > li:is(.is-ts-item-check, .is-ts-item-cross)::after { left: 0.28rem; width: 1rem; height: 1rem; top: calc(0.5lh - 0.5rem); } .ts-article-layout__content { min-width: 0; } /* UI-Kit-Tabelle (Prototyp main.css .ts-table / .ts-table-wrap). Core-Tabellen in Artikeln (figure.wp-block-table) erhalten dieselbe Optik, ohne dass Artikelinhalte umgeschrieben werden. */ .ts-table-wrap, .ts-prose .wp-block-table { overflow-x: auto; border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); } .ts-prose .wp-block-table { width: 100%; max-width: 100%; margin: var(--wp--preset--spacing--md) 0 0; } .ts-table-wrap:focus-visible { outline: 2px solid var(--wp--preset--color--turquoise-500); outline-offset: 2px; } .ts-table, .ts-prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 480px; } .ts-prose .wp-block-table thead, .ts-prose .wp-block-table tfoot { border: 0; } .ts-table th, .ts-table td, .ts-prose .wp-block-table th, .ts-prose .wp-block-table td { padding: 0.85rem 1.1rem; text-align: left; border: 0; border-bottom: 1px solid var(--wp--preset--color--border-100); } .ts-table th, .ts-prose .wp-block-table th { font-family: var(--wp--preset--font-family--body); font-weight: 700; color: var(--wp--preset--color--ink-900); background: var(--wp--preset--color--sky-50); font-size: 0.85rem; } .ts-table td, .ts-prose .wp-block-table td { color: var(--wp--preset--color--text-600); } .ts-table tr:last-child td, .ts-prose .wp-block-table tr:last-child td { border-bottom: none; } /* Zweispaltige Tabellen (meist Schlüssel/Wert) dürfen umbrechen statt zu scrollen. */ .ts-table:not(:has(tr > :nth-child(3))), .ts-prose .wp-block-table table:not(:has(tr > :nth-child(3))) { min-width: 0; } .ts-table:not(:has(tr > :nth-child(3))) :is(th, td), .ts-prose .wp-block-table table:not(:has(tr > :nth-child(3))) :is(th, td) { overflow-wrap: break-word; hyphens: auto; } /* Startup-Liste: Suche, eingeklappte Tabelle, auf Mobil Blockansicht pro Zeile. */ .ts-startup-list { scroll-margin-top: var(--ts-sticky-header-offset, 6rem); } .ts-startup-list__tools { margin-bottom: var(--wp--preset--spacing--md); } .ts-startup-list__status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--text-600); } .ts-startup-list__status:empty { display: none; } .ts-startup-list tr[hidden] { display: none; } .ts-startup-list tr.is-last-visible td { border-bottom: none; } .ts-startup-list__empty[data-startup-empty] { margin-top: var(--wp--preset--spacing--md); } .ts-startup-list__toggle { margin-top: var(--wp--preset--spacing--md); } .ts-startup-list__toggle[hidden] { display: none; } @media (max-width: 640px) { .ts-startup-list .ts-table { min-width: 0; } .ts-startup-list .ts-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ts-startup-list .ts-table tbody, .ts-startup-list .ts-table td { display: block; } .ts-startup-list .ts-table tr { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--wp--preset--color--border-100); } .ts-startup-list .ts-table tr:last-child, .ts-startup-list .ts-table tr.is-last-visible { border-bottom: none; } .ts-startup-list .ts-table td { padding: 0; border: 0; } .ts-startup-list .ts-table tr[hidden] { display: none; } .ts-startup-list .ts-table .ts-startup-list__name { order: 1; font-weight: 700; color: var(--wp--preset--color--ink-900); } .ts-startup-list__industry { order: 2; } .ts-startup-list__description { order: 3; } /* entspricht .ts-badge.ts-badge--turquoise, nur in der Blockansicht */ .ts-startup-list__industry span { display: inline-flex; padding: 0.3rem 0.65rem; border: 2px solid var(--wp--preset--color--ink-900); border-radius: 3px; box-shadow: var(--wp--preset--shadow--hard-sm); background: var(--wp--preset--color--turquoise-100); color: var(--wp--preset--color--petrol-600); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } } .ts-startup-list__empty { margin: 0; padding: 0.85rem 1.1rem; border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--sky-50); color: var(--wp--preset--color--text-600); font-size: 0.94rem; } .ts-prose .wp-block-quote { margin: var(--wp--preset--spacing--lg) 0; padding: 1rem 1.25rem; border-left: 4px solid var(--wp--preset--color--turquoise-500); background: var(--wp--preset--color--sky-50); color: var(--wp--preset--color--ink-900); font-weight: 600; } .ts-prose .wp-block-video { margin: var(--wp--preset--spacing--lg) 0; } .ts-prose .wp-block-video video { display: block; width: 100%; border-radius: var(--wp--custom--radius--lg); } .ts-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); } .ts-related-section { margin-top: var(--wp--preset--spacing--2-xl); } .ts-related-section > .ts-h3 { margin-bottom: var(--wp--preset--spacing--md); } @media (max-width: 780px) { .ts-related { grid-template-columns: 1fr; } } .ts-author { display: flex; gap: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--lg); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--sky-50); border: 1px solid var(--wp--preset--color--border-100); align-items: flex-start; } .ts-author img { width: 64px; height: 64px; border-radius: 50%; flex: none; } .ts-author__name { font-family: var(--wp--preset--font-family--body); font-weight: 700; color: var(--wp--preset--color--ink-900); } .ts-author__role { font-size: 0.85rem; color: var(--wp--preset--color--petrol-600); font-weight: 600; margin-top: 0.1rem; } .ts-author__bio { margin-top: 0.5rem; font-size: 0.94rem; color: var(--wp--preset--color--text-600); line-height: 1.6; } .ts-newsletter-inline { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--lg); padding: var(--wp--preset--spacing--lg); border-radius: var(--wp--custom--radius--xl); background: linear-gradient(120deg, var(--wp--preset--color--ink-900), var(--wp--preset--color--petrol-600)); color: #fff; box-shadow: var(--wp--preset--shadow--lg); } .ts-newsletter-inline__text h4 { color: #fff; font-size: 1.35rem; font-weight: 800; } .ts-newsletter-inline__text p { margin-top: 0.35rem; color: rgba(255,255,255,0.75); font-size: 0.94rem; max-width: 40ch; } .ts-newsletter-inline__form { display: flex; gap: 0.6rem; flex: none; } .ts-newsletter-inline__form input { height: 3rem; width: 240px; border-radius: var(--wp--custom--radius--pill); border: none; padding: 0 1.1rem; font-family: var(--wp--preset--font-family--body); font-size: 0.92rem; } @media (max-width: 780px) { .ts-newsletter-inline { flex-direction: column; align-items: stretch; text-align: left; } .ts-newsletter-inline__form { flex-direction: column; } .ts-newsletter-inline__form input { width: 100%; } } /* -------------------------- Benefit-Kacheln/Schritte/CTA-Banner ------------- */ .ts-benefit { position: relative; padding: var(--wp--preset--spacing--lg); padding-top: calc(var(--wp--preset--spacing--lg) + 6px); border-radius: var(--wp--custom--radius--xl); border: 1px solid var(--wp--preset--color--border-100); background: var(--wp--preset--color--paper); box-shadow: var(--wp--preset--shadow--sm); overflow: hidden; transition: all var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-benefit::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent, var(--wp--preset--color--turquoise-500)); } .ts-benefit:hover { box-shadow: var(--wp--preset--shadow--lg); transform: translateY(-4px); border-color: transparent; } .ts-benefit__icon { width: 3.25rem; height: 3.25rem; border-radius: var(--wp--custom--radius--md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--wp--preset--spacing--sm); transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-benefit:hover .ts-benefit__icon { transform: rotate(-6deg) scale(1.06); } .ts-benefit__icon svg { width: 24px; height: 24px; } .ts-benefit__title { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 1.15rem; color: var(--wp--preset--color--ink-900); margin-bottom: 0.4rem; } .ts-benefit__desc { font-size: 0.94rem; color: var(--wp--preset--color--text-600); line-height: 1.6; } .ts-topic-grid > a { display: flex !important; } .ts-topic-grid > a > .ts-benefit { flex: 1; } .kit-grid-3 .ts-benefit:nth-of-type(1) { --accent: var(--wp--preset--color--sage-500); } .kit-grid-3 .ts-benefit:nth-of-type(2) { --accent: var(--wp--preset--color--coral-500); } .kit-grid-3 .ts-benefit:nth-of-type(3) { --accent: var(--wp--preset--color--berry-500); } .ts-steps { list-style: none; counter-reset: ts-step; display: flex; flex-direction: column; gap: 0.85rem; margin: 0; padding: 0; } .ts-steps li { counter-increment: ts-step; display: flex; gap: 0.9rem; padding: 0; border: none; border-radius: 0; } .ts-steps li::before { content: counter(ts-step); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 6px; margin-top: 0.15rem; background: var(--wp--preset--color--sky-100); color: var(--wp--preset--color--petrol-600); font-family: var(--wp--preset--font-family--body); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; } .ts-steps .step-body strong { display: inline; color: var(--wp--preset--color--ink-900); font-family: var(--wp--preset--font-family--body); font-weight: 700; } .ts-steps .step-body span { color: var(--wp--preset--color--text-600); } .ts-steps .step-body span::before { content: " — "; } .ts-cta-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--lg); padding: var(--wp--preset--spacing--xl); border-radius: var(--wp--custom--radius--xl); background: linear-gradient(120deg, var(--wp--preset--color--turquoise-500), var(--wp--preset--color--petrol-600) 70%); color: #fff; flex-wrap: wrap; box-shadow: var(--wp--preset--shadow--lg); } .ts-cta-banner > * { min-width: 0; } .ts-cta-banner .ts-display { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); max-width: 20ch; } .ts-cta-banner p { color: rgba(255,255,255,0.85); margin-top: 0.5rem; font-size: 1.05rem; } /* --------------------------------- LP-Hero ----------------------------------- */ .ts-lp-hero__actions { display: flex; gap: 0.8rem; margin-top: var(--wp--preset--spacing--lg); flex-wrap: wrap; } /* ------------------------------ Startseiten-Hero ------------------------------ */ .kit-hero { position: relative; overflow: hidden; padding: var(--wp--preset--spacing--3-xl) 0 0; background: linear-gradient(155deg, var(--wp--preset--color--ink-900) 0%, var(--wp--preset--color--petrol-600) 140%); color: #fff; } .kit-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--wp--preset--spacing--2-xl); align-items: center; } .kit-hero__copy .ts-display { color: #fff; } .kit-hero__media-wrap { position: relative; transform: rotate(-2.2deg); } .kit-hero__media { position: relative; aspect-ratio: 4 / 3.35; border-radius: var(--wp--custom--radius--lg); overflow: hidden; border: 3px solid var(--wp--preset--color--ink-900); box-shadow: 10px 10px 0 var(--wp--preset--color--mustard-500); } .kit-hero__media img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 880px) { .kit-hero__grid { grid-template-columns: 1fr; } .kit-hero__media-wrap { order: -1; } .kit-hero__media { aspect-ratio: 16/10; } } .kit-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--turquoise-300); margin-bottom: var(--wp--preset--spacing--sm); } .kit-hero__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--wp--preset--color--turquoise-300); display: inline-block; } .kit-hero__lead { margin-top: var(--wp--preset--spacing--md); max-width: 46ch; color: rgba(255,255,255,0.76); } .kit-hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--lg); margin-top: var(--wp--preset--spacing--2-xl); padding-block: var(--wp--preset--spacing--lg); border-top: 1px solid rgba(255,255,255,0.14); } .kit-fact { display: flex; align-items: center; gap: 0.75rem; } .kit-fact__label { color: rgba(255,255,255,0.82); font-size: 0.88rem; font-weight: 600; line-height: 1.3; } .kit-fact__num { flex: none; font-family: var(--wp--preset--font-family--body); font-weight: 900; font-size: 2.1rem; color: #fff; line-height: 1; letter-spacing: -0.02em; } .kit-hero__facts--three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .kit-hero__facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kit-hero__facts { grid-template-columns: 1fr !important; } } .kit-fullbleed { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; } .kit-chapter { position: relative; overflow: hidden; padding: var(--wp--preset--spacing--2-xl) 0; } .kit-chapter .kit-section__head { max-width: 62ch; margin-bottom: 0; position: relative; z-index: 2; } .kit-chapter .kit-section__head .ts-h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); } .kit-section__kicker { display: block; margin-bottom: var(--wp--preset--spacing--3-xs); } .kit-section__desc { margin-top: var(--wp--preset--spacing--sm); } .kit-chapter--petrol { background: linear-gradient(155deg, var(--wp--preset--color--ink-900) 0%, var(--wp--preset--color--petrol-600) 130%); } .kit-chapter--petrol .kit-section__head .ts-h1, .kit-chapter--petrol .kit-section__head .ts-label { color: #fff; } .kit-chapter--petrol .kit-section__head .ts-body { color: rgba(255,255,255,0.72); } .kit-chapter--mint { background: linear-gradient(175deg, var(--wp--preset--color--sky-100) 0%, var(--wp--preset--color--sky-50) 100%); } .kit-chapter--warm { background: linear-gradient(175deg, var(--wp--preset--color--mustard-100) 0%, var(--wp--preset--color--paper) 88%); } /* ------------------------------ Magazin-Mosaik ----------------------------- */ .ts-mosaic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: minmax(0, auto); gap: var(--wp--preset--spacing--md); } .ts-mosaic__link { display: contents; } .ts-mosaic__feature { grid-column: 1; grid-row: 1 / span 2; } .ts-mosaic__feature .ts-card__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 220px; } .ts-mosaic__feature .ts-card__body { flex: 0 0 auto; } .ts-mosaic__feature .ts-card__title { font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: -0.01em; } .ts-mosaic__photo { grid-column: 2; grid-row: 1; } .ts-mosaic .ts-quote-tile { grid-column: 3; grid-row: 1; } .ts-mosaic__text { grid-column: 2; grid-row: 2; border-radius: var(--wp--custom--radius--md); } .ts-mosaic__text .ts-card__body { padding: var(--wp--preset--spacing--md); gap: 0.5rem; } .ts-mosaic__text .ts-card__title { font-size: 1.05rem; } .ts-mosaic__insight { grid-column: 3; grid-row: 2; background: var(--wp--preset--color--sage-600); border: 2px solid var(--wp--preset--color--ink-900); box-shadow: var(--wp--preset--shadow--hard); color: #fff; } .ts-mosaic__insight .ts-card__body { padding: var(--wp--preset--spacing--lg); gap: var(--wp--preset--spacing--sm); } .ts-insight__num { font-family: var(--wp--preset--font-family--body); font-weight: 900; font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em; } .ts-insight__desc { font-size: 0.94rem; line-height: 1.6; color: rgba(255,255,255,0.88); } .ts-insight__bars { display: flex; align-items: flex-end; gap: 7px; height: 38px; margin-top: auto; padding-top: 0.4rem; } .ts-insight__bars span { flex: 1; display: block; border-radius: 4px 4px 1px 1px; background: rgba(255,255,255,0.5); } .ts-insight__bars span:nth-child(1) { height: 40%; } .ts-insight__bars span:nth-child(2) { height: 62%; } .ts-insight__bars span:nth-child(3) { height: 52%; } .ts-insight__bars span:nth-child(4) { height: 100%; background: var(--wp--preset--color--mustard-500); } .ts-mosaic__wide { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: stretch; } .ts-mosaic__wide .ts-card__media { flex: 0 0 132px; aspect-ratio: 1; } .ts-mosaic__wide .ts-card__body { padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); gap: 0.35rem; } .ts-mosaic__wide .ts-card__title { font-size: 0.98rem; } @media (min-width: 981px) { .ts-mosaic { grid-template-rows: 387.5px 278.25px 134px; } } .ts-quote-tile { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--wp--preset--spacing--sm); padding: var(--wp--preset--spacing--lg); border: 2px solid var(--wp--preset--color--ink-900); border-radius: var(--wp--custom--radius--lg); background: linear-gradient(155deg, var(--wp--preset--color--ink-900) 0%, var(--wp--preset--color--petrol-600) 150%); box-shadow: var(--wp--preset--shadow--hard); color: #fff; } .ts-quote-tile__mark { display: block; color: var(--wp--preset--color--mustard-500); font-family: var(--wp--preset--font-family--body); font-size: 2.5rem; font-weight: 800; line-height: 0.5; } .ts-quote-tile__text { font-family: var(--wp--preset--font-family--body); font-size: 1.05rem; font-weight: 700; line-height: 1.42; } .ts-quote-tile__cite { display: block; color: rgba(255,255,255,0.72); font-size: 0.82rem; font-style: normal; font-weight: 600; } .ts-quote-tile__cite strong { display: block; color: #fff; font-size: 0.9rem; margin-bottom: 0.15rem; } .ts-mosaic .ts-badge { align-self: flex-start; } .ts-section-intro--with-action { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--wp--preset--spacing--md); flex-wrap:wrap; max-width:none; } @media (max-width: 980px) { .ts-mosaic { grid-template-columns: 1fr 1fr; } .ts-mosaic__feature { grid-column: 1 / -1; grid-row: auto; } .ts-mosaic__feature .ts-card__media { aspect-ratio: 16 / 9; flex: none; min-height: 0; } .ts-mosaic__photo, .ts-mosaic .ts-quote-tile, .ts-mosaic__text, .ts-mosaic__insight { grid-column: auto; grid-row: auto; } .ts-mosaic__wide { grid-row: auto; } } @media (max-width: 640px) { .ts-mosaic { grid-template-columns: 1fr; } .ts-mosaic__wide { flex-direction: column; } .ts-mosaic__wide .ts-card__media { flex-basis: auto; aspect-ratio: 16 / 9; } } .ts-quote { position: relative; padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl); border-left: 4px solid var(--wp--preset--color--turquoise-500); background: var(--wp--preset--color--sky-50); border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0; } .ts-quote__mark { display: block; margin-bottom: 0.6rem; color: var(--wp--preset--color--turquoise-500); font-family: var(--wp--preset--font-family--body); font-size: 3rem; font-weight: 700; line-height: 0.5; } .ts-quote p { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 1.3rem; line-height: 1.45; color: var(--wp--preset--color--ink-900); } .ts-quote cite { display: block; margin-top: var(--wp--preset--spacing--sm); font-style: normal; font-size: 0.9rem; color: var(--wp--preset--color--text-600); font-weight: 600; } .ts-trustblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--lg); } /* Orientierungskarten sollen die verfügbare Containerbreite nutzen, nicht die Gutenberg-Standardbreite für Fließtext. */ .wp-block-group.container.is-layout-constrained > .ts-trustblock { width: 100%; max-width: none !important; } @media (max-width: 780px) { .ts-trustblock { grid-template-columns: 1fr; } } .ts-highlight { --hl: var(--wp--preset--color--mustard-500); background-image: linear-gradient(104deg, transparent 0%, transparent 2%, var(--hl) 2%, var(--hl) 98%, transparent 98%); background-repeat: no-repeat; background-size: 100% 0.52em; background-position: 0 82%; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ts-highlight--berry { --hl: var(--wp--preset--color--berry-600); } .ts-highlight--solid { background: var(--hl); color: var(--wp--preset--color--ink-900) !important; border-radius: 0.2em; line-height: 1.35; padding: 0.02em 0.28em 0.08em; } .ts-newsletter-signup { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--xl); align-items: center; padding: var(--wp--preset--spacing--xl); border-radius: var(--wp--custom--radius--xl); background: var(--wp--preset--color--ink-900); color: #fff; position: relative; overflow: visible; box-shadow: var(--wp--preset--shadow--lg); } .ts-newsletter-signup h2 { font-weight: 800; } .ts-newsletter-signup__form { margin-top: var(--wp--preset--spacing--md); } .ts-newsletter-signup__form .mc4wp-form-fields { display: flex; gap: 0.6rem; flex-wrap: wrap; transition: opacity 220ms ease, transform 220ms ease, max-height 220ms ease, margin 220ms ease; } .ts-newsletter-signup__form .mc4wp-form-fields.is-complete { max-height: 0; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-0.45rem); } .ts-newsletter-signup__form input[type="email"] { flex: 1; min-width: 200px; height: 3.25rem; border-radius: var(--wp--custom--radius--pill); border: none; padding: 0 1.25rem; font-family: var(--wp--preset--font-family--body); } .ts-newsletter-signup__form .ts-btn { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; } .ts-newsletter-signup__form .ts-btn[disabled] { cursor: wait; opacity: 0.76; } .ts-newsletter-signup__form .ts-newsletter-signup__consent { display: flex; align-items: flex-start; gap: 0.55rem; width: 100%; margin: 0.45rem 0 0.35rem; color: rgba(255,255,255,0.72); font-size: 0.78rem; line-height: 1.45; cursor: pointer; } .ts-newsletter-signup__form .ts-newsletter-signup__consent input { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0.14rem 0 0; accent-color: var(--wp--preset--color--turquoise-500); } .ts-newsletter-signup__form .ts-newsletter-signup__consent a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; } .ts-newsletter-signup__form .mc4wp-response:not(:empty) { display: grid; gap: 0.3rem; margin-top: 1.1rem; padding: 1.1rem 1.2rem; border: 1px solid rgba(153, 227, 211, 0.72); border-radius: var(--wp--custom--radius--md); background: rgba(47, 170, 145, 0.2); color: #fff; font-size: 0.96rem; line-height: 1.5; animation: ts-newsletter-response-in 280ms ease both; } .ts-newsletter-signup__form .mc4wp-response strong { font-size: 1.08rem; } .ts-newsletter-signup__form .mc4wp-response.is-error { border-color: rgba(255, 194, 125, 0.8); background: rgba(220, 123, 51, 0.2); } @keyframes ts-newsletter-response-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } } .ts-newsletter-signup__form .mc4wp-alert { margin: 0; } .ts-newsletter-signup__setup-notice { margin-top: var(--wp--preset--spacing--md); color: rgba(255,255,255,0.8); } .ts-newsletter-signup__setup-notice a { color: #fff; text-decoration: underline; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (min-width: 821px) { .ts-newsletter-signup__form input[type="email"] { min-width: 0; } .ts-newsletter-signup__form .ts-newsletter-signup__consent, .ts-newsletter-signup__form .mc4wp-response { flex-basis: 100%; } } .ts-newsletter-signup__visual { border-radius: var(--wp--custom--radius--lg); overflow: hidden; aspect-ratio: 4/3.4; } @media (max-width: 820px) { .ts-newsletter-signup { grid-template-columns: 1fr !important; } .ts-newsletter-signup__visual { order: -1; } } .ts-newsletter-signup__fine { margin-top: 0.6rem; font-size: 0.78rem; color: rgba(255,255,255,0.55); } /* Über-uns-Hero: die kompakte Editorial-Illustration der statischen Vorlage. */ .kit-chapter__deco { position: absolute; z-index: 1; opacity: 0.94; } .kit-chapter__deco .ts-illu { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--preset--shadow--lg); } .ueber-uns-hero-deco { right: 7%; top: 14px; width: 190px; height: 143px; } @media (max-width: 1080px) { .ueber-uns-hero-deco { width: 128px; height: 96px; top: 6px; } .ueber-uns-hero .kit-section__head { max-width: 46ch; } } @media (max-width: 780px) { .ueber-uns-hero-deco { display: none; } } /* Gutenberg verliert die deklarativen Padding-Werte mancher Template-Gruppen. Diese Abschnittsklassen stellen den Rhythmus der Referenz wieder her. */ .ts-about-intro-section { padding-block: var(--wp--preset--spacing--2-xl); } .ts-about-orientation-section { padding-block: var(--wp--preset--spacing--2-xl); } .ts-about-principles-section { padding-block: var(--wp--preset--spacing--xl); } .ts-about-team-section { padding-block: var(--wp--preset--spacing--2-xl); } .ts-about-cta-section { padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-home-entry-section { padding-block: var(--wp--preset--spacing--2-xl); } .ts-home-mosaic-section { padding-block: var(--wp--preset--spacing--2-xl); } .ts-home-newsletter-section { padding-top: calc(var(--wp--preset--spacing--2-xl) + var(--wp--preset--spacing--lg)); padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-home-cta-section { padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-magazine-mosaic-section { padding-top: var(--wp--preset--spacing--xl); padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-magazine-orientation-section, .ts-magazine-evergreen-section { padding-bottom: var(--wp--preset--spacing--2-xl); } /* Die statische Magazinvorlage führt Themenkarten und Evergreen-Artikel im 1220-px-Inhaltsraster. Die festen Seiteninhalte enthalten aus Gutenberg- Kompatibilitätsgründen eine innere constrained-Gruppe; ohne diese gezielte Ausnahme würde sie auf die 720-px-Prosa-Spalte fallen. */ .ts-page-magazin .ts-magazine-orientation-section > .wp-block-group.is-layout-constrained, .ts-page-magazin .ts-magazine-evergreen-section > .wp-block-group.is-layout-constrained { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } .ts-page-magazin .ts-magazine-orientation-section .kit-grid-3, .ts-page-magazin .ts-magazine-evergreen-section .kit-grid-2 { width: 100%; max-width: none !important; margin-inline: 0 !important; } /* Ein Grid-Element streckt seine direkte Link-Hülle, nicht automatisch deren Karteninhalt. Flex macht die drei Orientierungskarten deshalb gleich hoch. */ .ts-page-magazin .ts-magazine-orientation-section .kit-grid-3 > a { display: flex !important; } .ts-page-magazin .ts-magazine-orientation-section .kit-grid-3 > a > .ts-benefit { flex: 1 1 auto; } .ts-magazine-directory-cta { width: 100% !important; max-width: none !important; padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-magazine-directory-cta__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--lg); padding: var(--wp--preset--spacing--lg); border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--xl); background: var(--wp--preset--color--sky-50); } .ts-magazine-directory-cta__inner p { max-width: 58ch; } .ts-article-directory-hero { width: 100% !important; max-width: none !important; padding-block: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl); background: var(--wp--preset--color--sky-50); } .ts-article-directory-hero .wp-block-post-title { margin-top: 0.5rem; } .ts-article-directory-hero .ts-body { max-width: 64ch; margin-top: 0.75rem; } .ts-article-directory-section { width: 100% !important; max-width: none !important; padding-bottom: var(--wp--preset--spacing--3-xl); } .ts-article-directory-section > .wp-block-query.container { width: 100% !important; max-width: var(--wp--style--global--wide-size, 1220px) !important; margin-inline: auto !important; } .ts-article-directory-section .wp-block-query-pagination { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-top: var(--wp--preset--spacing--xl); font-weight: 700; } .ts-article-directory-section .wp-block-query-pagination a, .ts-article-directory-section .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding-inline: 0.55rem; border: 1px solid var(--wp--preset--color--border-200); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--petrol-600); } .ts-article-directory-section .wp-block-query-pagination .current { border-color: var(--wp--preset--color--petrol-600); background: var(--wp--preset--color--turquoise-100); color: var(--wp--preset--color--ink-900); } @media (max-width: 640px) { .ts-magazine-directory-cta__inner { align-items: stretch; flex-direction: column; } .ts-magazine-directory-cta__inner .ts-btn { width: 100%; } } /* Fixed pages retain their static section rhythm even when a WordPress core group drops its serialized spacing declaration. The slug classes are stable theme semantics, rather than database-specific page IDs. */ .ts-page-newsletter .entry-content > .wp-block-group:nth-child(1) { padding-block: var(--wp--preset--spacing--2-xl); } .ts-page-newsletter .entry-content > .wp-block-group:nth-child(3) { padding-top: var(--wp--preset--spacing--2-xl); } .ts-page-fuer-unternehmen .entry-content > .wp-block-group { padding-bottom: var(--wp--preset--spacing--2-xl); } .ts-page-fuer-unternehmen .entry-content > .wp-block-group:first-child { padding-top: var(--wp--preset--spacing--2-xl); } .ts-page-kontakt .entry-content > .wp-block-group:first-child { padding-block: var(--wp--preset--spacing--2-xl); } .ts-business-page > .wp-block-group { padding-bottom: var(--wp--preset--spacing--2-xl) !important; } .ts-contact-page .ts-lp-hero--minimal .ts-display { font-size: clamp(2.25rem, 4.2vw, 4rem); } .ts-contact-page .ts-lp-hero--minimal p { margin-top: var(--wp--preset--spacing--md); font-size: 1.125rem; } /* -------------------------------- Callouts ------------------------------- */ .ts-callout { padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); border-radius: var(--wp--custom--radius--lg); } .ts-callout__title { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; } .ts-callout__body { font-size: 0.96rem; line-height: 1.6; } .ts-callout--info { background: var(--wp--preset--color--turquoise-600); } .ts-callout--info .ts-callout__title { color: var(--wp--preset--color--turquoise-100); } .ts-callout--info .ts-callout__body { color: #fff; } .ts-callout--tip { background: var(--wp--preset--color--sage-600); } .ts-callout--tip .ts-callout__title { color: var(--wp--preset--color--sage-100); } .ts-callout--tip .ts-callout__body { color: #fff; } .ts-callout--warn { background: var(--wp--preset--color--mustard-500); } .ts-callout--warn .ts-callout__title, .ts-callout--warn .ts-callout__body { color: var(--wp--preset--color--ink-900); } .ts-callout--example { background: var(--wp--preset--color--ink-900); } .ts-callout--example .ts-callout__title { color: var(--wp--preset--color--turquoise-300); } .ts-callout--example .ts-callout__body { color: rgba(255,255,255,0.85); } .ts-callout--hard { border: 2px solid var(--wp--preset--color--ink-900); box-shadow: var(--wp--preset--shadow--hard); } .ts-callout--pastel .ts-callout__body { color: var(--wp--preset--color--ink-900); } .ts-callout--pastel.ts-callout--info { background: var(--wp--preset--color--turquoise-100); } .ts-callout--pastel.ts-callout--info .ts-callout__title { color: var(--wp--preset--color--petrol-600); } .ts-callout--pastel.ts-callout--tip { background: var(--wp--preset--color--sage-100); } .ts-callout--pastel.ts-callout--tip .ts-callout__title { color: var(--wp--preset--color--sage-600); } .ts-callout--pastel.ts-callout--warn { background: var(--wp--preset--color--mustard-100); } .ts-callout--pastel.ts-callout--warn .ts-callout__title { color: var(--wp--preset--color--mustard-600); } .ts-callout--pastel.ts-callout--example { background: var(--wp--preset--color--berry-100); } .ts-callout--pastel.ts-callout--example .ts-callout__title { color: var(--wp--preset--color--berry-600); } .ts-prose .wp-block-thinkstartup-article-callout, .ts-prose .wp-block-thinkstartup-article-quote { margin: var(--wp--preset--spacing--lg) 0; } /* Article callouts: a measured reading cue, not a promotional card. */ .wp-block-thinkstartup-article-callout.ts-callout { --ts-callout-accent: var(--wp--preset--color--turquoise-500); --ts-callout-surface: var(--wp--preset--color--sky-100); background: var(--ts-callout-surface); border-left: 5px solid var(--ts-callout-accent); border-radius: var(--wp--custom--radius--lg); padding: calc(var(--wp--preset--spacing--md) + 0.125rem) var(--wp--preset--spacing--lg); box-shadow: none; color: var(--wp--preset--color--ink-900); } .wp-block-thinkstartup-article-callout.ts-callout--merke, .wp-block-thinkstartup-article-callout.ts-callout--example { --ts-callout-accent: var(--wp--preset--color--berry-500); --ts-callout-surface: var(--wp--preset--color--berry-100); } .wp-block-thinkstartup-article-callout.ts-callout--definition, .wp-block-thinkstartup-article-callout.ts-callout--info { --ts-callout-accent: var(--wp--preset--color--turquoise-500); --ts-callout-surface: var(--wp--preset--color--sky-100); } .wp-block-thinkstartup-article-callout.ts-callout--tipp, .wp-block-thinkstartup-article-callout.ts-callout--tip { --ts-callout-accent: var(--wp--preset--color--sage-500); --ts-callout-surface: var(--wp--preset--color--sage-100); } .wp-block-thinkstartup-article-callout.ts-callout--achtung, .wp-block-thinkstartup-article-callout.ts-callout--warn { --ts-callout-accent: var(--wp--preset--color--coral-500); --ts-callout-surface: var(--wp--preset--color--coral-100); } .wp-block-thinkstartup-article-callout .ts-callout__heading { margin-bottom: 0.65rem; } .wp-block-thinkstartup-article-callout .ts-callout__title { margin: 0; color: var(--wp--preset--color--ink-900); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.085em; line-height: 1.35; } .wp-block-thinkstartup-article-callout .ts-callout__body { color: var(--wp--preset--color--text-600); font-size: 0.98rem; line-height: 1.65; } .wp-block-thinkstartup-article-callout .ts-callout__body > :first-child { margin-top: 0; } .wp-block-thinkstartup-article-callout .ts-callout__body > :last-child { margin-bottom: 0; } .wp-block-thinkstartup-article-callout .ts-callout__body > * + * { margin-top: 0.7rem; } .ts-component-catalog__callout-variants { display: grid; gap: var(--wp--preset--spacing--sm); } @media (max-width: 640px) { .wp-block-thinkstartup-article-callout.ts-callout { padding: var(--wp--preset--spacing--md); } } /* ---------------------------------- TL;DR --------------------------------- */ .ts-tldr { border: 1.5px solid var(--wp--preset--color--ink-900); border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--lg); background: repeating-linear-gradient(135deg, var(--wp--preset--color--sky-50), var(--wp--preset--color--sky-50) 10px, var(--wp--preset--color--paper) 10px, var(--wp--preset--color--paper) 20px); } .ts-tldr__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--wp--preset--spacing--sm); } .ts-tldr__head svg { width: 22px; height: 22px; color: var(--wp--preset--color--turquoise-600); } .ts-tldr__head span { font-family: var(--wp--preset--font-family--body); font-weight: 700; color: var(--wp--preset--color--ink-900); } .ts-tldr ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; } .ts-tldr li { display: flex; gap: 0.6rem; font-size: 0.98rem; color: var(--wp--preset--color--text-900); } .ts-tldr li svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; color: var(--wp--preset--color--sage-600); } /* ---------------------------------- FAQ ------------------------------------ */ .ts-faq { display: flex; flex-direction: column; gap: 0.6rem; max-width: 74ch; } /* Newsletter: FAQ linksbündig unter „Kurz beantwortet.“ (Vorlage), Abstand zum Abschluss-Banner. */ .ts-page-newsletter .is-layout-constrained > .wp-block-group:has(> .ts-faq) { max-width: none; margin-left: 0 !important; margin-right: 0 !important; } .ts-page-newsletter .wp-block-group:has(> .ts-faq) > .ts-faq { max-width: 74ch; margin-left: 0 !important; margin-right: auto !important; } .ts-page-newsletter .wp-block-group.container:has(.ts-faq) { padding-bottom: var(--wp--preset--spacing--2-xl); } /* Newsletter-Vorschau: Artikelkarte und Jobspalte enden unten bündig, das Bild füllt die Höhe. */ .ts-newsletter-preview__col { display: flex; flex-direction: column; min-width: 0; } .ts-newsletter-preview__col > a { flex: 1; display: flex !important; flex-direction: column; } .ts-newsletter-preview__col > a > .ts-card { flex: 1; display: flex; flex-direction: column; } .ts-newsletter-preview__col > a > .ts-card > .ts-card__media { flex: 1; aspect-ratio: auto; min-height: 14rem; } .ts-newsletter-preview__col > a > .ts-card > .ts-card__body { flex: none; } .ts-newsletter-preview__note { margin: calc(0.5rem - var(--wp--preset--spacing--md)) 0 0; color: var(--wp--preset--color--text-600); } @media (min-width: 781px) { .ts-newsletter-preview__note { grid-column: 2; } } .ts-faq-item { border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--md); overflow: hidden; background: var(--wp--preset--color--paper); } .ts-faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--md); padding: var(--wp--preset--spacing--md); background: none; border: none; cursor: pointer; text-align: left; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--ink-900); } .ts-faq-item__q svg { flex: none; width: 20px; height: 20px; color: var(--wp--preset--color--petrol-600); transition: transform var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-out); } .ts-faq-item[open] .ts-faq-item__q svg { transform: rotate(45deg); } .ts-faq-item__a { padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md); font-size: 0.96rem; color: var(--wp--preset--color--text-600); line-height: 1.65; } .ts-faq-item summary::-webkit-details-marker { display: none; } .ts-faq-item summary { list-style: none; } /* ---------------------------- YouTube two-click --------------------------- */ .ts-youtube-consent .wp-block-embed__wrapper { margin: 0; } .ts-youtube-consent__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; min-height: 16rem; padding: var(--wp--preset--spacing--xl); background: var(--wp--preset--color--sky-100); border: 1px solid var(--wp--preset--color--border-100); border-radius: var(--wp--custom--radius--lg); text-align: center; } .ts-youtube-consent__eyebrow { margin: 0; color: var(--wp--preset--color--petrol-600); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .ts-youtube-consent__text { margin: 0; color: var(--wp--preset--color--ink-900); font-weight: 700; } .ts-youtube-consent__button { min-height: 2.625rem; padding: 0 1.125rem; border: 1.5px solid var(--wp--preset--color--ink-900); border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--petrol-600); box-shadow: 3px 3px 0 var(--wp--preset--color--ink-900); color: #fff; cursor: pointer; font-family: var(--wp--preset--font-family--body); font-size: 0.9rem; font-weight: 700; } .ts-youtube-consent__button:hover { background: var(--wp--preset--color--ink-900); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--wp--preset--color--ink-900); } .ts-youtube-consent__button:focus-visible { outline: 3px solid var(--wp--preset--color--turquoise-500); outline-offset: 3px; } .ts-youtube-consent__notice { max-width: 48ch; margin: 0; color: var(--wp--preset--color--text-600); font-size: 0.82rem; line-height: 1.5; } .ts-youtube-consent__notice a { color: inherit; text-decoration: underline; text-underline-offset: 0.14em; } .ts-youtube-consent iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--wp--custom--radius--lg); } @media (max-width: 640px) { .ts-youtube-consent__placeholder { min-height: 13rem; padding: var(--wp--preset--spacing--lg); } }