/* Trendtreiber-Wortmarke: Form aus dem Logo-PNG (Maske), Farben aus den Logo-Variablen.
   „TREND“ im Trendtreiber-Cyan, „TREIBER“ in Textfarbe – passt sich hell/dunkel an. */
.tt-logo {
  display: inline-block;
  height: 20px;
  aspect-ratio: 8 / 1;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--logo-a, #2fc1ff) 0 45.5%, var(--logo-text, currentColor) 45.5% 100%);
  -webkit-mask: url('/images/trendtreiber-logo.png') left center / contain no-repeat;
  mask: url('/images/trendtreiber-logo.png') left center / contain no-repeat;
}
footer .tt-logo { height: 22px; }

/* ── Untermenü Werbung: sieben Leistungen zweispaltig ─────────────────────── */
.kopf-gruppe .untermenue.tt-breit { width: min(720px, calc(100vw - 48px)); }
.kopf-gruppe .untermenue.tt-breit > ul { grid-template-columns: 1fr 1fr; }

/* ── Illustrationen Werbung/Webhosting (Linienstil der Seite, Tokens hell/dunkel) ── */
.tt-illu svg { display: block; width: 100%; height: auto; overflow: visible; }
.tt-illu * { transform-box: fill-box; transform-origin: center; }
.tt-illu .tt-flaeche { fill: var(--il-paper); stroke: var(--il-paper-line); stroke-width: 1.5; filter: drop-shadow(0 4px 10px #1f334712); }
.tt-illu .tt-flaeche-innen { fill: var(--il-paper); stroke: var(--il-paper-line); stroke-width: 1.25; }
.tt-illu .tt-raster { fill: var(--il-grid); }
.tt-illu .tt-linie { fill: none; stroke: var(--il-paper-line); stroke-width: 1.5; stroke-linecap: round; }
.tt-illu .tt-gestrichelt { stroke-dasharray: 4 6; }
.tt-illu .tt-achse { fill: none; stroke: var(--il-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tt-illu .tt-strich { fill: none; stroke: var(--il-paper-line); stroke-width: 8; stroke-linecap: round; opacity: .75; }
.tt-illu .tt-strich-dick { stroke-width: 12; }
.tt-illu .tt-strich-fein { fill: none; stroke: var(--il-paper-line); stroke-width: 5; stroke-linecap: round; opacity: .75; }
.tt-illu .tt-strich-marke { stroke: var(--nl-brand); opacity: .55; }
.tt-illu .tt-marke { fill: var(--nl-brand); }
.tt-illu .tt-marke-hell, .tt-illu .tt-f-hell { fill: var(--nl-brand-light); }
.tt-illu .tt-f-weich { fill: var(--nl-brand); fill-opacity: .16; }
.tt-illu .tt-f-grid { fill: var(--il-paper-line); fill-opacity: .7; }
.tt-illu .tt-f-marke { fill: var(--nl-brand); }
.tt-illu .tt-f-tinte { fill: var(--nl-text-strong); }

/* Strategie: Wettbewerb gedrängt, eigene Position pulsiert */
.tt-illu .tt-wettbewerb { fill: var(--il-ink); opacity: .45; }
.tt-illu .tt-weg { fill: none; stroke: var(--nl-brand); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: .8; }
.tt-illu .tt-ring { fill: none; stroke: var(--nl-brand); stroke-width: 2; animation: tt-puls 2.6s var(--nl-ease) infinite; }
.tt-illu .tt-ring-fest { fill: var(--nl-brand-soft); stroke: var(--nl-brand-light); stroke-width: 1.5; }
.tt-illu .tt-fadenkreuz { stroke: var(--nl-brand); stroke-width: 2; stroke-linecap: round; }
@keyframes tt-puls { 0% { transform: scale(.75); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }

/* Markendesign: Farbfelder erscheinen nacheinander */
.tt-illu .tt-swatch { stroke: var(--il-paper); stroke-width: 3; animation: tt-auftauchen 4.2s var(--nl-ease) var(--d, 0s) infinite; }
.tt-illu .tt-buchstabe { fill: none; stroke: var(--nl-brand); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tt-auftauchen { 0%, 6% { transform: scale(.4); opacity: 0; } 18%, 82% { transform: scale(1); opacity: 1; } 94%, 100% { transform: scale(.4); opacity: 0; } }

/* Soziale Netzwerke: Herzen steigen, Balken wachsen */
.tt-illu .tt-herz { fill: var(--nl-brand); opacity: 0; animation: tt-steigen 3.3s ease-out var(--d, 0s) infinite; }
.tt-illu .tt-balken { fill: var(--nl-brand-light); transform-origin: bottom; animation: tt-wachsen 4.4s var(--nl-ease) var(--d, 0s) infinite; }
.tt-illu .tt-balken:last-of-type { fill: var(--nl-brand); }
.tt-illu .tt-trend { fill: none; stroke: var(--nl-brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tt-illu .tt-trend-ruhig { stroke: var(--nl-success, var(--nl-brand)); }
@keyframes tt-steigen { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-70px) scale(1); opacity: 0; } }
@keyframes tt-wachsen { 0% { transform: scaleY(.15); } 30%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }

/* Webseiten: Karten bauen sich auf, Warenkorb wippt */
.tt-illu .tt-karte { animation: tt-auftauchen 4.8s var(--nl-ease) var(--d, 0s) infinite; }
.tt-illu .tt-wagen { animation: tt-wippen 2.4s ease-in-out infinite; }
.tt-illu .tt-wagen-linie { fill: none; stroke: var(--nl-on-action, #0a0e1a); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tt-illu .tt-wagen-rad { fill: var(--nl-on-action, #0a0e1a); }
@keyframes tt-wippen { 0%, 100% { transform: translate(452px, 220px); } 50% { transform: translate(452px, 212px); } }

/* Druck: Folie wird aufgezogen, Plakat färbt sich ein */
.tt-illu .tt-streifen { transform-origin: left; animation: tt-folie 4.6s var(--nl-ease) infinite; }
.tt-illu .tt-plakat-farbe { animation: tt-einfaerben 4.6s var(--nl-ease) infinite; }
.tt-illu .tt-flyer { transform: rotate(-4deg); }
.tt-illu .tt-rad { fill: var(--il-paper); stroke: var(--il-ink); stroke-width: 3; }
@keyframes tt-folie { 0%, 8% { transform: scaleX(0); } 40%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tt-einfaerben { 0%, 30% { opacity: 0; } 55%, 88% { opacity: .85; } 100% { opacity: 0; } }

/* Film: Aufnahme blinkt, Abspielkopf läuft */
.tt-illu .tt-sucher { fill: none; stroke: var(--il-ink); stroke-width: 2.5; stroke-linecap: round; opacity: .7; }
.tt-illu .tt-linse { fill: var(--il-paper); stroke: var(--nl-brand-light); stroke-width: 3; }
.tt-illu .tt-rec { fill: var(--nl-error, #e5484d); animation: tt-blinken 1.4s steps(1) infinite; }
.tt-illu .tt-abspielkopf { animation: tt-abspielen 6s linear infinite; }
.tt-illu .tt-kopf-linie { stroke: var(--nl-brand); stroke-width: 2.5; stroke-linecap: round; }
@keyframes tt-blinken { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
@keyframes tt-abspielen { from { transform: translateX(0); } to { transform: translateX(388px); } }

/* Auftritt: Licht, Sprechwelle */
.tt-illu .tt-licht { fill: var(--nl-brand); opacity: .1; }
.tt-illu .tt-mikro { fill: var(--il-ink); }
.tt-illu .tt-mikro-arm { fill: none; stroke: var(--il-ink); stroke-width: 3; stroke-linecap: round; }
.tt-illu .tt-welle { fill: var(--nl-brand); animation: tt-sprechen 1.1s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes tt-sprechen { from { transform: scaleY(.35); opacity: .6; } to { transform: scaleY(1); opacity: 1; } }

/* Webhosting: Betriebslampen, Schild */
.tt-illu .tt-led { fill: var(--nl-success, #2fbf71); animation: tt-blinken 2.4s steps(1) var(--d, 0s) infinite; }
.tt-illu .tt-led-fest { animation: tt-puls-led 2.6s ease-in-out infinite; }
.tt-illu .tt-schlitz { stroke: var(--il-paper-line); stroke-width: 3; stroke-linecap: round; }
.tt-illu .tt-schild { fill: var(--nl-brand-soft); stroke: var(--nl-brand); stroke-width: 2; stroke-linejoin: round; }
.tt-illu .tt-haken { fill: none; stroke: var(--nl-brand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tt-puls-led { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) { .tt-illu * { animation: none !important; } }

/* ── Fuß: zusätzliche Spalte Werbung ──────────────────────────── */
@media (width >= 1024px) {
  .fuss .fuss-raster.tt-sechs { grid-template-columns: 1.3fr 1fr 1.05fr .8fr .85fr 1.1fr; gap: 32px; }
}

/* ── Standorte Werbung: sieben Leistungskarten als 4 + 3 ───────────── */
@media (width >= 1024px) {
  main .leistungs-karten.tt-sieben { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Online-Marketing: Anzeige oben, Ziel getroffen, neue Nachricht */
.tt-illu .tt-lupe { fill: none; stroke: var(--il-ink); stroke-width: 2.5; stroke-linecap: round; }
.tt-illu .tt-anzeige { animation: tt-hervor 4s var(--nl-ease) infinite; }
.tt-illu .tt-pin-punkt { fill: var(--il-paper); }
.tt-illu .tt-ziel { fill: none; stroke: var(--nl-brand-light); stroke-width: 2; opacity: .7; }
.tt-illu .tt-zeiger { fill: var(--nl-text-strong); stroke: var(--il-paper); stroke-width: 2; stroke-linejoin: round; }
.tt-illu .tt-hinweis { animation: tt-puls-led 1.8s ease-in-out infinite; }
@keyframes tt-hervor { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ── Startseite: Kopfgrafik „Zwei Welten“ ───────────────────────── */
.tt-illu .tt-verbindung { fill: none; stroke: var(--il-paper-line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.tt-illu .tt-funke { fill: var(--nl-brand); offset-rotate: 0deg; animation: tt-fliessen 3.2s var(--nl-ease) var(--d, 0s) infinite; transform-box: view-box; transform-origin: 0 0; }
.tt-illu .tt-funke-d { fill: var(--nl-brand-light); }
.tt-illu .tt-kern-glut { fill: var(--nl-brand); opacity: .12; animation: tt-atmen 3.6s ease-in-out infinite; }
.tt-illu .tt-etikett { fill: var(--il-ink); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tt-illu .tt-haken-hell { fill: none; stroke: var(--nl-on-action, #0a0e1a); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tt-illu .tt-herz-fest { animation: tt-schlagen 1.8s ease-in-out infinite; }
@keyframes tt-fliessen { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tt-atmen { 0%, 100% { transform: scale(.9); opacity: .1; } 50% { transform: scale(1.12); opacity: .22; } }
@keyframes tt-schlagen { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }

/* ── Startseite: Zwei Disziplinen ───────────────────────────────── */
.tt-welten-kopf { max-width: 760px; margin-bottom: 48px; }
.tt-welten-kopf h2 { margin-bottom: 16px; }
.tt-welten-raster { display: grid; gap: 24px; }
@media (width >= 900px) { .tt-welten-raster { grid-template-columns: 1fr 1fr; } }
.tt-welt { overflow: hidden; display: flex; flex-direction: column; }
.tt-welt-bild { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.tt-welt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--nl-ease); }
.tt-welt:hover .tt-welt-bild img { transform: scale(1.04); }
.tt-welt-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--nl-surface-card) 85%, transparent)); }
.tt-welt-d .tt-welt-bild img { filter: saturate(.85); }
.tt-welt-inhalt { padding: 8px 28px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (width >= 768px) { .tt-welt-inhalt { padding: 8px 36px 36px; } }
.tt-welt-marke { color: var(--nl-brand); font-size: .875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.tt-welt h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.02em; }
.tt-welt-inhalt > p:not(.tt-welt-marke) { color: var(--nl-text); }
.tt-welt-liste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 2px; }
@media (width >= 560px) { .tt-welt-liste { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.tt-welt-liste a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--nl-text-strong); font-weight: 540; text-decoration: none; border-bottom: 1px solid var(--nl-line); }
.tt-welt-liste a:hover { color: var(--nl-brand); }
.tt-welt-liste svg { color: var(--nl-brand); flex: none; }
.tt-welt .knopf { align-self: flex-start; margin-top: auto; }

/* ── Startseite: Warum wir das machen ───────────────────────────── */
.tt-herz-raster { display: grid; gap: 40px; align-items: center; }
@media (width >= 900px) { .tt-herz-raster { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.tt-herz-bild { margin: 0; position: relative; border-radius: var(--nl-radius-lg, 20px); overflow: hidden; aspect-ratio: 4 / 3; }
.tt-herz-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-herz-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--nl-brand) 22%, transparent), transparent 55%); mix-blend-mode: soft-light; }
.tt-herz-text h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); letter-spacing: -.03em; line-height: 1.08; margin: 12px 0 20px; }
.tt-herz-text p:not(.kicker) { font-size: 1.1875rem; line-height: 1.65; color: var(--nl-text); max-width: 56ch; }
.tt-herz-text p + p { margin-top: 14px; }
.tt-zahlen { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--nl-line); border: 1px solid var(--nl-line); border-radius: var(--nl-radius-lg, 20px); overflow: hidden; }
@media (width >= 900px) { .tt-zahlen { grid-template-columns: repeat(4, 1fr); } }
.tt-zahlen li { background: var(--nl-surface-card); padding: 28px 24px; display: flex; flex-direction: column; gap: 6px; }
.tt-zahlen strong { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); line-height: 1; letter-spacing: -.03em; color: var(--nl-brand); font-weight: 700; }
.tt-zahlen span { color: var(--nl-text-muted); font-size: .9375rem; }

/* ── Hero-Bühne: Foto + Schleier + farbiger Lichtschein (alle Kopfbereiche) ───────────── */
.tt-mit-foto, .tt-mit-licht { position: relative; overflow: hidden; isolation: isolate; }
.tt-foto, .tt-licht { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tt-foto-bild { position: absolute; inset: -3%; background-size: cover; background-position: center; transform-origin: 70% 50%;
  animation: tt-kenburns 32s ease-in-out infinite alternate; will-change: transform; }
@keyframes tt-kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
/* Schleier in Seitenfarbe: links deckend für den Text, rechts lässt er das Bild durch */
.tt-foto::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--nl-surface-0) 0%, color-mix(in srgb, var(--nl-surface-0) 88%, transparent) 34%, color-mix(in srgb, var(--nl-surface-0) 45%, transparent) 62%, color-mix(in srgb, var(--nl-surface-0) 12%, transparent) 100%),
    linear-gradient(0deg, var(--nl-surface-0) 0%, transparent 28%); }
@media (width < 1024px) {
  .tt-foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--nl-surface-0) 55%, transparent) 0%, color-mix(in srgb, var(--nl-surface-0) 86%, transparent) 45%, var(--nl-surface-0) 100%); }
}
.tt-mit-foto .seitenkopf-raster, .tt-mit-foto .held-raster { opacity: .35; }
.tt-mit-foto h1 { text-shadow: 0 2px 28px color-mix(in srgb, var(--nl-surface-0) 75%, transparent); }

/* Farbiger Lichtschein: drei weiche Lichter in Markencyan, Violett und Glut */
.tt-licht span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .32; will-change: transform; }
.tt-licht span:nth-child(1) { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -8vw; top: -22vw; background: radial-gradient(circle, #2fc1ff 0%, transparent 65%); animation: tt-licht-a 22s ease-in-out infinite alternate; }
.tt-licht span:nth-child(2) { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; right: 18vw; bottom: -24vw; background: radial-gradient(circle, #7c5cff 0%, transparent 65%); animation: tt-licht-b 26s ease-in-out infinite alternate; }
.tt-licht span:nth-child(3) { width: 30vw; height: 30vw; max-width: 480px; max-height: 480px; left: 30vw; top: -16vw; background: radial-gradient(circle, #ff7a45 0%, transparent 65%); opacity: .2; animation: tt-licht-c 30s ease-in-out infinite alternate; }
.tt-mit-foto .tt-licht span { mix-blend-mode: screen; opacity: .26; }
@keyframes tt-licht-a { to { transform: translate(-14vw, 10vw) scale(1.15); } }
@keyframes tt-licht-b { to { transform: translate(12vw, -8vw) scale(.9); } }
@keyframes tt-licht-c { to { transform: translate(-10vw, 12vw) scale(1.2); } }
:root[data-theme="light"] .tt-licht span { opacity: .2; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tt-licht span { opacity: .2; } :root:not([data-theme="dark"]) .tt-mit-foto .tt-licht span { mix-blend-mode: multiply; opacity: .14; } }
:root[data-theme="light"] .tt-mit-foto .tt-licht span { mix-blend-mode: multiply; opacity: .14; }

/* Grafiken über dem Foto: Glasfeld */
.tt-mit-foto .kopf-bild > .illu, .tt-mit-foto .held-bild > .illu {
  background: color-mix(in srgb, var(--nl-surface-card) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid var(--nl-glas-rand, var(--nl-line)); border-radius: 24px; padding: clamp(12px, 2vw, 24px); box-shadow: var(--nl-shadow-hover); }
.tt-mit-foto .kopf-bild.orte-box { background: color-mix(in srgb, var(--nl-surface-card) 72%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

@media (prefers-reduced-motion: reduce) { .tt-foto-bild, .tt-licht span { animation: none !important; } }

/* Startseite: bildschirmfüllende Bühne, Landschaft sichtbar, Grafik schwebt frei */
.held.tt-mit-foto { min-height: min(92vh, 900px); display: flex; align-items: center; }
.held.tt-mit-foto .tt-foto-bild { background-position: 62% 40%; }
.held.tt-mit-foto .held-raster { opacity: .12; }
@media (width >= 1024px) {
  .held.tt-mit-foto .tt-foto::after { background:
    linear-gradient(90deg, var(--nl-surface-0) 0%, color-mix(in srgb, var(--nl-surface-0) 82%, transparent) 30%, color-mix(in srgb, var(--nl-surface-0) 25%, transparent) 55%, transparent 80%),
    linear-gradient(0deg, var(--nl-surface-0) 0%, transparent 22%); }
}
.held.tt-mit-foto .held-bild > .illu { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 0;
  filter: drop-shadow(0 24px 48px rgba(5, 10, 25, .45)); }
.held.tt-mit-foto .tt-etikett { fill: #fff; opacity: .9; }
section.tt-mit-foto > .raster-hintergrund { display: none; }

/* Seiten ohne Foto: kräftigerer Lichtschein */
.tt-mit-licht .tt-licht span:nth-child(1) { opacity: .55; }
.tt-mit-licht .tt-licht span:nth-child(2) { opacity: .5; }
.tt-mit-licht .tt-licht span:nth-child(3) { opacity: .38; }
:root[data-theme="light"] .tt-mit-licht .tt-licht span { opacity: .32; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tt-mit-licht .tt-licht span { opacity: .32; } }
/* Motivausschnitte */
.tt-foto-bild[style*="film.webp"] { background-position: 30% 60%; }
.tt-foto-bild[style*="auftritt.webp"] { background-position: 50% 35%; }

/* ── SEO-Ausbau (Session 3): Preiskarten, Wissensblöcke, Ratgeber, Branchen ── */
.tt-kopf { max-width: 62ch; margin-bottom: 40px; }
.tt-kopf .lead + .lead { margin-top: 12px; }
.tt-preis-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (width >= 900px) { .tt-preis-raster { grid-template-columns: repeat(3, 1fr); } }
.tt-preis { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tt-preis h3 { font-size: 1.125rem; margin: 0; }
.tt-preis-betrag { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 680; letter-spacing: -.03em; color: var(--nl-text-strong); margin: 0; line-height: 1.1; }
.tt-preis-satz { color: var(--nl-text-muted); margin: 0; }
.tt-preis ul { list-style: none; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--nl-line); display: grid; gap: 10px; }
.tt-preis li { display: flex; gap: 10px; align-items: flex-start; color: var(--nl-text); font-size: .9375rem; line-height: 1.45; }
.tt-preis li svg { flex: none; margin-top: 2px; color: var(--nl-brand); }
.tt-preis-hinweis { margin: 24px 0 0; color: var(--nl-text-muted); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.tt-preis-link { display: inline-flex; align-items: center; gap: 6px; color: var(--nl-link); font-weight: 560; }
.tt-preis-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-wissen-raster { display: grid; gap: 28px 48px; margin-top: 32px; }
@media (width >= 900px) { .tt-wissen-raster { grid-template-columns: 1fr 1fr; } }
.tt-wissen-eintrag h3 { font-size: 1.1875rem; margin: 0 0 10px; }
.tt-wissen-eintrag p { margin: 0; color: var(--nl-text); line-height: 1.65; }
.tt-branchen-zeile { margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tt-branchen-zeile > span { color: var(--nl-text-muted); margin-right: 6px; }
.tt-branchen-zeile a.chip:hover { color: var(--nl-link); }
.tt-kurzantwort { padding: 28px 32px; border-left: 4px solid var(--nl-brand); }
.tt-kurzantwort p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--nl-text-strong); }
.tt-kurzantwort .tt-stand { margin-top: 12px; font-size: .875rem; color: var(--nl-text-muted); }
.tt-tabelle-huelle { overflow-x: auto; margin-top: 28px; border: 1px solid var(--nl-line); border-radius: var(--nl-radius-lg); background: var(--nl-surface-card); }
.tt-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.tt-tabelle th, .tt-tabelle td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--nl-line); vertical-align: top; }
.tt-tabelle thead th { background: var(--nl-surface-2); color: var(--nl-text-strong); font-weight: 600; }
.tt-tabelle tbody tr:last-child td { border-bottom: 0; }
.tt-tabelle td:nth-child(2) { white-space: nowrap; font-weight: 600; color: var(--nl-text-strong); font-variant-numeric: tabular-nums; }
.tt-prosa > * { max-width: 72ch; }
.tt-prosa h2 { margin: 56px 0 16px; }
.tt-prosa h2:first-child { margin-top: 0; }
.tt-prosa p { margin: 0 0 16px; line-height: 1.7; color: var(--nl-text); }
.tt-prosa ul { margin: 0 0 16px; padding-left: 1.25em; display: grid; gap: 8px; line-height: 1.6; }
.tt-karten-raster { display: grid; gap: 20px; }
@media (width >= 700px) { .tt-karten-raster { grid-template-columns: repeat(2, 1fr); } }
@media (width >= 1024px) { .tt-karten-raster { grid-template-columns: repeat(3, 1fr); } }
.tt-tabelle-preise th[scope="row"] { font-weight: 600; white-space: nowrap; }
.tt-tabelle-preise th[scope="row"] a { color: var(--nl-link); }
.tt-tabelle-preise td:nth-child(2) { white-space: normal; font-weight: 500; }
@media (width >= 1024px) { main .weiter.tt-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tt-abstand { height: 32px; }

/* ── Leistungsbausteine (Session 4): Überblick-Kacheln, Glossar, Bausteine ── */
.tt-ueberblick-abschnitt { padding-top: 56px; }
.tt-ueberblick { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tt-ue { padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, box-shadow .3s, transform .4s var(--nl-ease); }
.tt-ue:hover { border-color: var(--nl-brand-line); box-shadow: var(--nl-shadow-hover); transform: translateY(-3px); }
.tt-ue-kopf { display: flex; align-items: center; gap: 12px; color: var(--nl-text-strong); text-decoration: none; }
.tt-ue-kopf h3 { margin: 0; font-size: 1.125rem; line-height: 1.25; }
.tt-ue-symbol { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--nl-radius-md); background: var(--nl-brand-soft); color: var(--nl-brand); }
.tt-ue-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; }
.tt-ue-liste li { position: relative; padding-left: 16px; color: var(--nl-text); font-size: .9375rem; line-height: 1.4; }
.tt-ue-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--nl-brand); }
.tt-ue-liste .tt-ue-uvm { color: var(--nl-text-muted); }
.tt-ue-liste .tt-ue-uvm::before { background: var(--nl-line-strong); }
.tt-ue-mehr { display: inline-flex; align-items: center; gap: 6px; color: var(--nl-link); font-weight: 560; font-size: .9375rem; }
.tt-ue-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }
.tt-glossar { margin: 0; display: grid; gap: 16px; }
@media (width >= 900px) { .tt-glossar { grid-template-columns: 1fr 1fr; } }
.tt-glossar-eintrag { padding: 20px 24px; border: 1px solid var(--nl-line); border-radius: var(--nl-radius-lg); background: var(--nl-surface-card); }
.tt-glossar dt { font-weight: 680; color: var(--nl-text-strong); font-size: 1.0625rem; margin-bottom: 6px; }
.tt-glossar dd { margin: 0; color: var(--nl-text); line-height: 1.6; }
.tt-bausteine { margin-top: 40px; }
.tt-bausteine + .werkzeuge { margin-top: 24px; }

/* Über uns: Porträts statt Kürzel */
.person .tt-portraet { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: var(--nl-radius-md); background: var(--nl-surface-2); }
.person .tt-portraet-leer { display: grid; place-items: center; color: var(--nl-text-muted); background: linear-gradient(160deg, var(--nl-surface-2), var(--nl-brand-soft)); }
.person .tt-portraet-leer svg { width: 42%; height: 42%; opacity: .55; }

/* ── Scrollbar in Akzentfarbe (Session 5) ──────────────────────────────────── */
html { scrollbar-color: var(--nl-action, #2fc1ff) var(--nl-surface-1, transparent); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--nl-surface-1, transparent); }
  ::-webkit-scrollbar-thumb { background: var(--nl-action, #2fc1ff); border-radius: 99px; border: 3px solid var(--nl-surface-1, #f6f8fb); }
  ::-webkit-scrollbar-thumb:hover { background: var(--nl-action-hover, #5fd3ff); }
}
.tt-ki-log, .rf-filter { scrollbar-width: thin; }

/* ── Handy-Prüfung (Session 5) ─────────────────────────────────────────────── */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
:root:not([data-theme="dark"]) .wahl label:has(input:checked) { color: var(--nl-text-strong); }
.tt-prosa ul { list-style: disc; padding-left: 1.3em; } .tt-prosa ol { list-style: decimal; padding-left: 1.3em; }
.tt-prosa li { margin: 6px 0; line-height: 1.6; } .tt-prosa li::marker { color: var(--nl-action); }
.tt-preis-link { margin: 6px 12px 6px 0; display: inline-flex; min-height: 44px; align-items: center; }
.mensch-zeile { display: flex; align-items: center; min-height: 44px; width: 100%; }
@media (width < 640px) {
  /* Tabellen als gestapelte Karten */
  .tt-tabelle { min-width: 0; }
  .tt-tabelle thead { display: none; }
  .tt-tabelle tr { display: grid; gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--nl-line); }
  .tt-tabelle tbody tr:last-child { border-bottom: 0; }
  .tt-tabelle th, .tt-tabelle td { display: block; padding: 2px 0; border: 0; white-space: normal !important; }
  .tt-tabelle td[data-label]::before { content: attr(data-label) ": "; color: var(--nl-text-muted); font-weight: 500; }
  .tt-tabelle td:first-child { font-weight: 600; color: var(--nl-text-strong); }
  .tt-tabelle td:first-child::before { content: none; }
  /* Tippflächen */
  .fuss ul a, .krumen a { display: inline-block; padding-block: 10px; }
  .kopf-logo { padding-block: 12px; }
  .link-pfeil, .tt-ue-mehr, .st-textlink { min-height: 44px; display: inline-flex; align-items: center; }
  /* Fußzeile zweispaltig, Platz für den Chat-Knopf */
  footer.fuss .container-x.fuss-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  footer.fuss .container-x.fuss-raster > :first-child, footer.fuss .container-x.fuss-raster > :last-child { grid-column: 1 / -1; }
  footer.fuss .fuss-raster nav ul { gap: 0; }
  .fuss { padding-bottom: 96px; }
  /* Startseite: kleinere Abstände zwischen den Blöcken */
  .st section:not(.st-held) { padding-block: clamp(56px, 9vh, 88px) !important; }
  /* Werbung-Übersicht (Session 6): Kacheln zweispaltig nur mit Titel, Zeilen ohne Stichpunkte (stehen auf den Leistungsseiten) */
  .tt-ueberblick { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .tt-ue { padding: 16px; gap: 0; }
  .tt-ue-kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tt-ue-kopf h3 { font-size: 1rem; hyphens: auto; }
  .tt-ue-liste, .tt-ue-mehr { display: none !important; }
  .zeile ul.punkte { display: none !important; }
  .liste:has(> .zeile) { gap: 64px !important; } .liste > .zeile { gap: 24px !important; }
  /* Wischreihen statt langer Stapel: Glossar, Ratgeber-Karten, Referenzbeispiele */
  .tt-glossar, .rf-raster.rf-drei, main .weiter.tt-drei { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important;
    margin-inline: calc(-1 * var(--tt-rand, 16px)); padding: 4px var(--tt-rand, 16px) 14px; scroll-padding-inline: var(--tt-rand, 16px); scrollbar-width: none; overscroll-behavior-x: contain; }
  .tt-glossar::-webkit-scrollbar, .rf-raster.rf-drei::-webkit-scrollbar, main .weiter.tt-drei::-webkit-scrollbar { display: none; }
  .tt-glossar > *, .rf-raster.rf-drei > *, main .weiter.tt-drei > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
}

/* Blog: Listen im Fließtext (Session 5) */
.fliesstext ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1.2em; } .fliesstext ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 1.2em; }
.fliesstext li { margin: .5em 0; line-height: 1.65; } .fliesstext li::marker { color: var(--nl-action); }