einen Clearfix: * article::before, article::after { content: " "; display: table } * (twentynineteen-artig, `main.css`). In einem Grid-Container sind * Pseudo-Elemente vollwertige Grid-Items — die beiden Phantomzellen belegen * (1,1) und (2,2), das Bild rutscht nach (1,2) und der Text nach (2,1). Die * Zeile sieht dann gestapelt aus, obwohl das Grid sauber zwei Spalten hat. * Ohne diese Zeile ist das Zeilen-Layout hier nicht zu retten. */ .tory-seo-product__adv::before, .tory-seo-product__adv::after { display: none; } @media (min-width: 820px) { .tory-seo-product__adv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; } /* * Explizite Platzierung statt `order`: die Zellen sind damit unabhaengig * davon festgelegt, ob noch irgendein Pseudo-Element in die * Auto-Platzierung hineinredet. */ .tory-seo-product__adv-fig { grid-area: 1 / 1; } .tory-seo-product__adv-body { grid-area: 1 / 2; } /* Jede zweite Zeile spiegeln — Bild rechts, Text links. */ .tory-seo-product__adv:nth-child(even) .tory-seo-product__adv-fig { grid-area: 1 / 2; } .tory-seo-product__adv:nth-child(even) .tory-seo-product__adv-body { grid-area: 1 / 1; } } .tory-seo-product__adv-fig { margin: 0; border-radius: 16px; overflow: hidden; background: var(--tsp-mist, #fafafa); aspect-ratio: 16 / 9; } .tory-seo-product__adv-fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .tory-seo-product__adv-body { min-width: 0; } .tory-seo-product__adv-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: rgba(0, 185, 188, .12); color: var(--tsp-teal-dark, #005a61); font-family: var(--tsp-font-display, inherit); font-size: 14px; font-weight: 700; } .tory-seo-product__adv-title { margin: 0 0 10px; font-family: var(--tsp-font-display, inherit); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; } .tory-seo-product__adv-text { margin: 0; color: var(--tsp-slate, #4a4a4a); line-height: 1.65; } /* ── FAQ ──────────────────────────────────────────────────────────────────── * * `partners.css` zentriert die FAQ in einer 900px-Spalte. Auf einer Landing * mit lauter zentrierten Abschnitten passt das; hier stehen alle anderen * Überschriften linksbündig über der vollen Breite, und die schmale, mittige * FAQ-Säule bricht die Kante der Seite. Deshalb auf Containerbreite. */ .tory-seo-product .tsp-faq { max-width: none; } .tory-seo-product__faq .tsp-faq__a { color: var(--tsp-slate, #4a4a4a); line-height: 1.7; } .tory-seo-product__faq .tsp-faq__a ul { padding-left: 22px; margin: 10px 0; } /* ── CTA ──────────────────────────────────────────────────────────────────── * * Kontrast. Die Akzentkarte aus `partners.css` ist ein Verlauf von Teal nach * Cyan. Gemessen gegen die beiden Enden: * weisser Text auf #07777F (Teal) → 5,31 * weisser Text auf #00B9BC (Cyan) → 2,42 * Ein Element mit weisser Schrift ist auf dieser Flaeche also je nach Position * lesbar oder nicht — und der Primaerknopf `.tsp-btn` ist selbst cyan, liegt * am Cyan-Ende des Verlaufs damit praktisch unsichtbar auf. * * Deshalb hier eine deckende dunkle Flaeche statt des Verlaufs: weiss auf * #005a61 sind 7,3 — unabhaengig davon, wo etwas sitzt. */ .tory-seo-product__cta-card { background: var(--tsp-teal-dark, #005a61); text-align: center; } .tory-seo-product__cta-card .tsp-h2 { color: #fff; } .tory-seo-product__cta-card p { margin: 8px auto 0; max-width: 60ch; color: rgba(255, 255, 255, .92); } .tory-seo-product__cta-card .tory-seo-product__cta { justify-content: center; } /* Primaer: deckend weiss mit dunklem Text (7,3). */ .tory-seo-product__cta-card .tsp-btn { background: #fff !important; color: var(--tsp-teal-dark, #005a61) !important; border-color: #fff !important; } .tory-seo-product__cta-card .tsp-btn:hover, .tory-seo-product__cta-card .tsp-btn:focus-visible { background: rgba(255, 255, 255, .88) !important; border-color: rgba(255, 255, 255, .88) !important; } /* * Sekundaer: weisse Kontur auf der dunklen Flaeche. * * `!important`, weil `partners.css` die Ghost-Farben selbst mit !important * setzt (dort noetig gegen die `a`-Regeln des Themes) — Spezifitaet schlaegt * kein !important. */ .tory-seo-product__cta-card .tsp-btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; } .tory-seo-product__cta-card .tsp-btn--ghost:hover, .tory-seo-product__cta-card .tsp-btn--ghost:focus-visible { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border-color: #fff !important; } /* ── Verwandte Produkte ─────────────────────────────────────────────────── */ .tory-seo-product__related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; } .tory-seo-product__related { display: flex; flex-direction: column; min-width: 0; padding: 20px; text-decoration: none; color: inherit; } .tory-seo-product__related-fig { aspect-ratio: 4 / 3; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; background: var(--tsp-mist, #fafafa); border-radius: 12px; overflow: hidden; } .tory-seo-product__related-fig img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; } .tory-seo-product__related-title { margin: 0 0 6px; font-family: var(--tsp-font-display, inherit); font-size: 17px; color: var(--tsp-ink, #1a1a1a); } .tory-seo-product__related-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tsp-slate-2, #6a6a6a); } /* ── Partner-Finder ───────────────────────────────────────────────────────── * * Hier entscheidet sich, bei wem der Kunde kauft — der Abschnitt darf deshalb * mehr Gewicht tragen als der Rest der Seite, ohne sie zu dominieren. * * Aufbau: oben eine Karte, links die OSM-Weltkarte (Länder mit Partnern), * rechts Suche, Länder-Chips und der Direktweg zu uns. Darunter die * Partnerliste als Karten — auch OHNE Suche gefüllt. * * Formensprache bewusst von der Partner-Detailseite übernommen: Eyebrow, * Initialen-Kachel, Stufen-Pill, Chip-Reihen. Beide Seiten sollen erkennbar * zum selben Programm gehören. */ .tory-seo-product__finder-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; margin-bottom: 34px; } @media (min-width: 900px) { .tory-seo-product__finder-top { /* Die Karte führt, die Bedienung steht daneben — nicht umgekehrt: die * Karte ist das Signal, das den Abschnitt überhaupt bemerkbar macht. */ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .tory-seo-product__finder-karte { position: relative; min-width: 0; border-bottom: 1px solid var(--tsp-line, #e5e5e5); } @media (min-width: 900px) { .tory-seo-product__finder-karte { border-bottom: 0; border-right: 1px solid var(--tsp-line, #e5e5e5); } } /* * Feste Höhe statt Seitenverhältnis: Leaflet misst seinen Container beim * Aufbau, und ein Container ohne auflösbare Höhe bleibt leer. */ .tory-seo-product__finder-map { height: 340px; width: 100%; background: #dbeafe; } @media (max-width: 600px) { .tory-seo-product__finder-map { height: 260px; } } .tory-seo-product__finder-maphint { position: absolute; left: 12px; bottom: 12px; z-index: 400; /* über den Kacheln, unter Leaflets Bedienelementen */ margin: 0; padding: 6px 12px; border-radius: 9999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-size: 12px; color: var(--tsp-slate, #4a4a4a); pointer-events: none; } /* * Eigener Marker statt des Leaflet-Standardpins: der lädt zwei PNGs von unpkg * nach und sagt nichts über die Zahl der Partner aus. * * Der Selektor führt `.leaflet-marker-icon` mit, obwohl `.tsp-finder-pin` * allein den Marker eindeutig trifft. Grund: Leaflets Stylesheet wird zur * Laufzeit nachgeladen und steht damit NACH dieser Datei. Bei gleicher * Spezifität gewinnt es — `.leaflet-marker-icon { display: block }` hat das * Zentrieren ausgehebelt, die Zahl saß 8,6px links und 3,5px über der Mitte. */ .leaflet-marker-icon.tsp-finder-pin { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tsp-teal, #07777f); color: #fff; font-family: var(--tsp-font-display, inherit); font-size: 13px; font-weight: 700; /* Ohne festes line-height erbt die Zahl die 1.6 der Seite und sitzt * dadurch trotz Zentrierung zu tief. */ line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); cursor: pointer; } .leaflet-marker-icon.tsp-finder-pin span { display: block; } .leaflet-marker-icon.tsp-finder-pin:hover { background: var(--tsp-cyan, #00b9bc); } .tory-seo-product__finder-steuer { display: flex; flex-direction: column; gap: 20px; padding: 26px 28px; min-width: 0; } .tory-seo-product__finder-label { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tsp-teal-dark, #005a61); } /* * Das Feld sitzt in einer Flex-Zeile, statt seine Breite ueber `width: 100%` * zu setzen. Gemessen kam dabei 320px heraus statt der 467px der Elemente * darunter — irgendeine spaetere Regel gewinnt gegen die Prozentbreite. Als * Flex-Kind mit `flex: 1` fuellt es die Zeile unabhaengig davon, und die * Kante schliesst mit den Chips und den Knoepfen darunter ab. */ .tory-seo-product__finder-feld { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--tsp-line, #e5e5e5); border-radius: 10px; background: #fff; } .tory-seo-product__finder-feld svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--tsp-slate-2, #6a6a6a); } .tory-seo-product__finder-feld:focus-within { border-color: var(--tsp-cyan, #00b9bc); box-shadow: 0 0 0 3px rgba(0, 185, 188, .16); } .tory-seo-product__finder-feld:focus-within svg { color: var(--tsp-teal, #07777f); } .tory-seo-product__finder-search input { flex: 1 1 auto; min-width: 0; /* Eine fremde Regel deckelt Eingabefelder auf `max-width: 320px` — damit * blieb das Feld 320px breit, waehrend Chips und Knoepfe darunter 467px * einnahmen. Gemessen, nicht vermutet. */ max-width: none; padding: 12px 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; color: var(--tsp-ink, #1a1a1a); } .tory-seo-product__finder-search input:focus { outline: none; } .tory-seo-product__finder-chips { display: flex; flex-wrap: wrap; gap: 7px; } .tory-seo-product__finder-chip { padding: 6px 12px; border: 1px solid var(--tsp-line, #e5e5e5); border-radius: 9999px; background: #fff; font-family: inherit; font-size: 13px; color: var(--tsp-slate, #4a4a4a); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; } .tory-seo-product__finder-chip b { margin-left: 4px; color: var(--tsp-slate-2, #6a6a6a); font-weight: 600; } .tory-seo-product__finder-chip:hover { border-color: var(--tsp-cyan, #00b9bc); } .tory-seo-product__finder-chip.is-active { background: var(--tsp-teal-dark, #005a61); border-color: var(--tsp-teal-dark, #005a61); color: #fff; } .tory-seo-product__finder-chip.is-active b { color: rgba(255, 255, 255, .7); } .tory-seo-product__finder-chip:focus-visible { outline: 2px solid var(--tsp-cyan, #00b9bc); outline-offset: 2px; } /* * Abstaende ueber `gap`, nicht ueber Margins an den Kindern: das Theme setzt * `p`-Margins mit hoeherer Spezifitaet zurueck — gemessen standen Text und * Knoepfe dadurch auf 0px Abstand aneinander. */ .tory-seo-product__finder-direkt { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--tsp-line, #e5e5e5); } .tory-seo-product__finder-direkt-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tsp-slate, #4a4a4a); } .tory-seo-product__finder-direkt .tory-seo-product__finder-label { margin-bottom: 0; } /* Knoepfe bekommen etwas mehr Luft als die Zeilen darueber. */ .tory-seo-product__finder-direkt .tory-seo-product__cta { margin-top: 6px; } /* ── Trefferliste ───────────────────────────────────────────────────────── */ .tory-seo-product__finder-status { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tsp-slate-2, #6a6a6a); } .tory-seo-product__finder-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .tory-seo-product__partner { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; } .tory-seo-product__partner-kopf { display: flex; align-items: center; gap: 14px; min-width: 0; } /* * Initialen-Kachel wie auf der Partner-Detailseite — die meisten Partner haben * noch kein Logo, und ein leerer Kasten sähe nach Fehler aus. */ .tory-seo-product__partner-logo { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(0, 185, 188, .12); color: var(--tsp-teal-dark, #005a61); font-family: var(--tsp-font-display, inherit); font-size: 18px; font-weight: 700; overflow: hidden; } .tory-seo-product__partner-logo img { width: 100%; height: 100%; object-fit: contain; } .tory-seo-product__partner-titel { min-width: 0; } .tory-seo-product__partner-titel h3 { margin: 0; font-family: var(--tsp-font-display, inherit); font-size: 17px; line-height: 1.3; color: var(--tsp-ink, #1a1a1a); overflow-wrap: anywhere; } .tory-seo-product__partner-ort { margin: 2px 0 0; font-size: 13px; color: var(--tsp-slate-2, #6a6a6a); } .tory-seo-product__partner-marken { display: flex; flex-wrap: wrap; gap: 6px; } .tory-seo-product__finder-tier { padding: 3px 10px; border-radius: 9999px; background: var(--tsp-ink, #1a1a1a); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* * Nur „exclusive" trägt die dunkle Marke. Trüge jede Karte sie, sagte die * Auszeichnung nichts mehr aus. */ .tory-seo-product__finder-tier--premium { background: rgba(0, 185, 188, .16); color: var(--tsp-teal-dark, #005a61); } .tory-seo-product__finder-tier--authorized { background: var(--tsp-fog, #f8f8f8); color: var(--tsp-slate, #4a4a4a); border: 1px solid var(--tsp-line, #e5e5e5); } .tory-seo-product__finder-rolle { padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--tsp-line, #e5e5e5); font-size: 11px; color: var(--tsp-slate, #4a4a4a); } .tory-seo-product__partner-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tsp-slate, #4a4a4a); /* Drei Zeilen: die Beschreibungen sind sehr unterschiedlich lang, sonst * stehen die Karten einer Reihe komplett unterschiedlich hoch. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tory-seo-product__partner-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 4px; } .tsp-btn--sm { padding: 9px 16px !important; font-size: 14px !important; } .tory-seo-product__partner-link { font-size: 13px; font-weight: 600; color: var(--tsp-teal-dark, #005a61); text-decoration: none; } .tory-seo-product__partner-link:hover { text-decoration: underline; } .tory-seo-product__finder-foot { margin: 26px 0 0; padding: 16px 20px; border: 1px solid var(--tsp-line, #e5e5e5); border-radius: 14px; background: var(--tsp-mist, #fafafa); font-size: 14px; color: var(--tsp-slate, #4a4a4a); } .tory-seo-product__finder-foot a { color: var(--tsp-teal-dark, #005a61); font-weight: 600; text-decoration: none; } .tory-seo-product__finder-foot a:hover { text-decoration: underline; } /* * Blätterleiste der Trefferliste. Erscheint erst ab zwei Seiten — bei einer * Seite wäre sie eine leere Behauptung. */ .tory-seo-product__finder-blaettern { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; } .tory-seo-product__finder-blaettern button { padding: 9px 16px; border: 1px solid var(--tsp-line, #e5e5e5); border-radius: 9999px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tsp-teal-dark, #005a61); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .tory-seo-product__finder-blaettern button:hover:not(:disabled) { border-color: var(--tsp-cyan, #00b9bc); background: var(--tsp-mist, #fafafa); } .tory-seo-product__finder-blaettern button:disabled { color: var(--tsp-slate-2, #6a6a6a); opacity: .45; cursor: default; } .tory-seo-product__finder-blaettern button:focus-visible { outline: 2px solid var(--tsp-cyan, #00b9bc); outline-offset: 2px; } .tory-seo-product__finder-blaettern span { font-family: var(--tsp-font-display, inherit); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--tsp-slate, #4a4a4a); } /* ── Serienseiten ─────────────────────────────────────────────────────────── * * Die Elementor-Originale waren echte Landingpages mit eigenem Bildthema: ein * dunkles Banner hinter der H1, ein Keyvisual neben dem langen Fließtext, * darunter Produktraster und FAQ. Genau das bildet dieser Block ab. */ /* * Der Seitenkopf bleibt hell und schlicht — bewusst identisch zu den * Produktseiten. Zwischenzeitlich stand hier ein dunkles Bild-Banner mit dem * Serienmotiv; es liess den Kopf aus der Reihe fallen. Das Serienmotiv traegt * jetzt allein das Keyvisual neben dem Fliesstext. */ .tory-seo-series .tory-seo-series__hero { padding: 24px 0 0; } .tory-seo-series__crumbs { margin-bottom: 18px; } .tory-seo-series__title { margin: 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.08; } /* ── Anspruch ───────────────────────────────────────────────────────────── */ /* * Der Selektor fuehrt `.tsp-section + .tsp-section` mit, weil die * Rhythmus-Regel weiter oben (`.tory-seo-product .tsp-section + .tsp-section`) * das obere Polster auf 0 setzt und bei geringerer Spezifitaet gewinnt. * Gemessen stand der Textblock dadurch auf 0px Abstand zum Kopf. */ .tory-seo-series .tsp-section + .tory-seo-series__text { padding-top: 72px; } /* Anspruch, Subline und Fliesstext teilen sich die Spalte neben dem Bild. */ .tory-seo-series__spalte { min-width: 0; } /* * Der Anspruch ist die Verkaufsaussage der Serienseite und stand bisher auf * `.tsp-h2` — also auf derselben Stufe wie „Produkte der Serie". Hier bekommt * er eine eigene Groesse zwischen H2 (max. 44px) und der Seiten-H1 (max. 54px), * damit die Rangfolge H1 > Anspruch > Abschnittsueberschrift stimmt. */ /* ── Bannerbild unter der H1 ─────────────────────────────────────────────── */ /* * Sitzt im Satzspiegel, nicht randlos: das frueher vollbreite dunkle Band war * ausdruecklich unerwuenscht. Der obere Abstand ist klein, weil der Banner * optisch zur Ueberschrift gehoert und nicht als eigener Abschnitt liest. */ /* * Der Nachbar-Selektor ist Pflicht, nicht Geschmack: die Rhythmusregel * .tory-seo-product .tsp-section + .tsp-section { padding-top: 0 } * hat drei Klassen und schlaegt eine zweiklassige Regel. Gemessen stand der * Banner dadurch mit 0px Abstand direkt unter der H1. Dasselbe Muster wie * weiter unten bei `+ .tory-seo-series__text`. */ .tory-seo-series .tsp-section + .tory-seo-series__banner { padding-top: 44px; } .tory-seo-series .tory-seo-series__banner { padding-bottom: 0; } /* * Ausschnitt statt Vollbild. Gemessen sitzt das Geraeteband im Motiv * (2373x434) zwischen y=54 und y=197, seine Mitte also bei 28,9 % der * Bildhoehe — 91 px oberhalb der Bildmitte. Ungeschnitten stehen die Geraete * dadurch im oberen Drittel und fuellen nur 33 % der Hoehe. * * Ein Fenster von 270 px (Seitenverhaeltnis 2373/270) mit `object-position: * top` bringt die Bandmitte auf 10 px an die Fenstermitte heran und laesst die * Geraete 53 % der Hoehe fuellen. Die Reflexion darunter wird angeschnitten, * die Teal-Flaeche oben rechts bleibt vollstaendig. */ .tory-seo-series__banner-fig { margin: 0; border-radius: 20px; overflow: hidden; background: var(--tsp-mist, #f4f6f7); line-height: 0; /* sonst setzt die Zeilenhoehe einen Streifen unter das Bild */ aspect-ratio: 2373 / 270; } .tory-seo-series__banner-fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* * Zwischenbreiten: 2373/270 ergaebe bei 757 px Containerbreite nur 86 px Band — * zu duenn. Hier ein flacherer Ausschnitt; die Geraetemitte liegt dann rund * 12 px ueber der Fenstermitte statt genau darin, was bei dieser Bandhoehe * nicht auffaellt. */ @media (min-width: 641px) and (max-width: 1099px) { .tory-seo-series__banner-fig { aspect-ratio: 2373 / 340; } } @media (max-width: 640px) { /* * Das Motiv ist rund 5,5:1 breit — auf dem Handy bliebe davon ein * fingerbreiter Streifen. Deshalb hier ein festes, hoeheres Fenster und * ein Ausschnitt aus der rechten Bildhaelfte, wo die Geraete stehen. */ /* * Mobil hilft `object-position` senkrecht nicht: bei einem Fenster, das * breiter als hoch beschnitten wird, skaliert `cover` ueber die Hoehe und * zeigt das Motiv immer in voller Hoehe — die Geraete stuenden wieder im * oberen Drittel. Deshalb hier zusaetzlich vergroessern, damit senkrecht * ueberhaupt etwas ueberlaeuft. * * 434 / 270 = 1,61 blendet dieselben 270 px aus, die der Desktop zeigt. * Der Ursprung liegt waagerecht bei den gemessenen 60 %. */ .tory-seo-series__banner-fig { border-radius: 14px; aspect-ratio: auto; height: 130px; } .tory-seo-series__banner-fig img { height: 100%; object-fit: cover; object-position: 60% top; /* * Weniger Zoom als der Desktop-Ausschnitt (1,61): bei 1,3 bleiben rund * 38 % der Bildbreite sichtbar statt 30 %, also mehr als nur zwei * Geraete. Der Rest ist Abwaegung — auf 349 px Breite laesst sich ein * 5,5:1-Motiv nicht gleichzeitig ganz zeigen und senkrecht zentrieren. */ transform: scale(1.3); transform-origin: 60% top; } } /* ── Erklaerender Fliesstext unter dem Produktraster ─────────────────────── */ /* * Zweispaltig ab 1000px. Bei einer Spalte mit 74ch blieb rechts die halbe * Seitenbreite leer — der Text stand linksbuendig in einem Container, der * fuer Karten-Raster ausgelegt ist. * * `break-after: avoid` auf den Zwischenueberschriften ist hier Pflicht: sonst * landet eine H3 als letzte Zeile der linken Spalte und ihr Absatz beginnt * rechts. */ .tory-seo-series__erklaerung .tory-seo-series__fliesstext { max-width: 1120px; margin: 0 auto; } @media (min-width: 1000px) { .tory-seo-series__erklaerung .tory-seo-series__fliesstext { columns: 2; column-gap: 60px; } } .tory-seo-series__erklaerung .tory-seo-series__fliesstext h3 { margin: 30px 0 10px; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3; break-after: avoid; break-inside: avoid; } .tory-seo-series__erklaerung .tory-seo-series__fliesstext > :first-child { margin-top: 0; } .tory-seo-series__erklaerung .tory-seo-series__fliesstext ul { margin: 0 0 16px; padding-left: 1.25em; break-inside: avoid; /* die Verfahrensliste gehoert zusammen */ } .tory-seo-series__erklaerung .tory-seo-series__fliesstext li { margin-bottom: 8px; line-height: 1.7; } /* * Zwei Klassen, nicht eine: die Serienseite traegt `tory-seo-product` mit im * Wrapper, und weiter oben in dieser Datei steht * .tory-seo-product .tsp-h2 { font-size: clamp(24px, 2.4vw, 32px) } * Eine einklassige Regel verliert dagegen (0,1,0 gegen 0,2,0) — gemessen kam * der Anspruch dadurch mit 32px heraus statt mit 50. */ .tory-seo-series .tory-seo-series__claim-titel { margin: 0; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; } .tory-seo-series__claim-sub { margin: 16px 0 0; font-size: 20px; line-height: 1.45; font-weight: 600; color: var(--tsp-teal-dark, #005a61); } .tory-seo-series__spalte .tory-seo-series__fliesstext { margin-top: 22px; } /* * Ohne Bild steht die Spalte allein — dann zentriert und in Lesebreite, * sonst laeuft die Ueberschrift ueber den vollen Satzspiegel ins Leere. */ .tory-seo-series__text-grid--einspaltig .tory-seo-series__spalte { max-width: 78ch; margin: 0 auto; text-align: center; } /* ── Keyvisual + Fließtext ──────────────────────────────────────────────── */ .tory-seo-series__text-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; } @media (min-width: 900px) { .tory-seo-series__text-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; } } .tory-seo-series__text-grid--einspaltig { grid-template-columns: minmax(0, 1fr); } .tory-seo-series__keyvisual { margin: 0; border-radius: 16px; overflow: hidden; } .tory-seo-series__keyvisual img { display: block; width: 100%; height: auto; } .tory-seo-series__fliesstext { min-width: 0; color: var(--tsp-slate, #4a4a4a); font-size: 16px; line-height: 1.75; } .tory-seo-series__fliesstext > :first-child { margin-top: 0; } .tory-seo-series__fliesstext > :last-child { margin-bottom: 0; } .tory-seo-series__fliesstext p { margin: 0 0 16px; } .tory-seo-series__fliesstext strong { color: var(--tsp-ink, #1a1a1a); } /* ── Produktraster ──────────────────────────────────────────────────────── */ /* Badge über dem Produktbild, wie im Karussell des Originals. */ .tory-seo-product__related-fig { position: relative; } .tory-seo-series__badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 9999px; background: var(--tsp-teal, #07777f); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .tory-seo-series__mehr { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--tsp-teal-dark, #005a61); } /* ── Video ──────────────────────────────────────────────────────────────── */ /* * Posterfläche im 16:9-Format. Feste Proportion, damit beim Tausch gegen den * iframe nichts springt. */ .tory-seo-lite-yt { position: relative; display: block; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0d1b26; cursor: pointer; } .tory-seo-lite-yt__poster { width: 100%; height: 100%; object-fit: cover; display: block; } .tory-seo-lite-yt iframe { width: 100%; height: 100%; border: 0; display: block; } /* Abspielknopf: eigenes Dreieck statt YouTubes rotem Balken — die Fläche ist * unsere, und der Player wird erst nach dem Klick geladen. */ .tory-seo-lite-yt__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: rgba(7, 119, 127, .92); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .15s ease, background .15s ease; } .tory-seo-lite-yt__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; transform: translateX(3px); } .tory-seo-lite-yt:hover .tory-seo-lite-yt__play { background: var(--tsp-cyan, #00b9bc); transform: scale(1.06); } .tory-seo-lite-yt:focus-visible { outline: 3px solid var(--tsp-cyan, #00b9bc); outline-offset: 3px; } .tory-seo-lite-yt--active { cursor: default; } .tory-seo-lite-yt--active .tory-seo-lite-yt__play { display: none; } @media (prefers-reduced-motion: reduce) { .tory-seo-lite-yt__play { transition: none; } .tory-seo-lite-yt:hover .tory-seo-lite-yt__play { transform: none; } }