/* BOSSMA-Empfehlungsseite „Über diese Website“: Effekte + Seitenstil (allgemein, ohne Kundendaten) */
/* BOSSMA Design-System: Grundlagen und Effekte v1.0
 * Alles hängt an .bx-scope. Kundenfarben und Schriften nur in den Tokens ändern.
 * Effekte laufen mit CSS-Scroll-Animationen (Chrome, Edge, Safari 26+); ältere Browser
 * bekommen dieselben Effekte über bx-effekte.js. Bei "Bewegung reduzieren" ist alles statisch.
 */

/* ---------------------------------------------------------------- Tokens */
.bx-scope {
  --bx-text: #15252E;
  --bx-text-2: #4A5B64;
  --bx-akzent: #0E8F8A;
  --bx-akzent-tief: #0A6E6A;
  --bx-akzent-2: #E0982E;
  --bx-grund: #F7F9F8;
  --bx-flaeche: #FFFFFF;
  --bx-linie: #E1EAE9;
  --bx-font-titel: 'Bricolage Grotesque', system-ui, sans-serif;
  --bx-font-text: 'Hanken Grotesk', system-ui, sans-serif;
  --bx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --bx-radius: 22px;
  --bx-radius-klein: 12px;
  --bx-schatten: 0 1px 2px rgba(21, 37, 46, .05), 0 18px 40px -18px rgba(21, 37, 46, .22);
  --bx-ease: cubic-bezier(.2, .8, .2, 1);
  --bx-feder: cubic-bezier(.34, 1.56, .64, 1);
  --bx-breite: 1200px;
  --bx-rand: clamp(20px, 5vw, 64px);

  color: var(--bx-text);
  font-family: var(--bx-font-text);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1; /* über der Partikel-Szene */
}
.bx-scope *, .bx-scope *::before, .bx-scope *::after { box-sizing: border-box; }
.bx-scope :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.bx-scope :where(h1, h2, h3) { font-family: var(--bx-font-titel); color: var(--bx-text); text-wrap: balance; hyphens: none; }
.bx-scope :where(p, li) { text-wrap: pretty; -webkit-hyphens: none; hyphens: none; }
.bx-scope img { max-width: 100%; height: auto; display: block; }
.bx-scope :where(a:not(.wp-element-button):not(.bx-knopf)) { color: var(--bx-akzent-tief); text-underline-offset: .2em; }
.bx-scope :focus-visible { outline: 3px solid var(--bx-akzent); outline-offset: 3px; border-radius: 6px; }
.bx-nb { white-space: nowrap; }

/* ---------------------------------------------------------------- Typo */
.bx-kicker { font-family: var(--bx-font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bx-akzent-tief); }
.bx-display { font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.bx-h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.bx-h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
.bx-lead { font-size: clamp(1.125rem, 1rem + .6vw, 1.45rem); line-height: 1.5; color: var(--bx-text-2); max-width: 38em; }
.bx-akzent { color: var(--bx-akzent); }

/* ---------------------------------------------------------------- Layout */
.bx-innen { width: min(100% - 2 * var(--bx-rand), var(--bx-breite)); margin-inline: auto; }
.bx-kapitel { min-height: 100svh; display: grid; align-items: center; padding-block: clamp(80px, 12vh, 140px); }
.bx-teilung { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bx-teilung > * { min-width: 0; }
.bx-stapel > * + * { margin-top: var(--bx-abstand, 1.25rem); }

/* Ruhige Fläche für Text über der Partikel-Szene */
.bx-flaeche {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--bx-linie);
  border-radius: var(--bx-radius);
  box-shadow: var(--bx-schatten);
  padding: clamp(24px, 3.5vw, 44px);
}


/* ---------------------------------------------------------------- Knöpfe */
.bx-knopf {
  --k-grund: var(--bx-akzent-tief); /* dunkler Akzent: Kontrast zu Weiß ≥ 4,5 : 1 */
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--k-grund); color: #fff; font: 600 1rem/1 var(--bx-font-text); text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px var(--k-grund);
  transition: transform .35s var(--bx-feder), box-shadow .3s var(--bx-ease), background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.bx-knopf:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px -12px var(--k-grund); }
/* Knopf taucht beim Klicken spürbar ein */
.bx-knopf:active { transform: translateY(1px) scale(.95); transition-duration: .08s; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .22); }
.bx-knopf--zart { --k-grund: var(--bx-flaeche); color: var(--bx-text) !important; border: 1px solid var(--bx-linie); box-shadow: none; }
.bx-knopf--zart:hover { box-shadow: 0 10px 24px -14px rgba(21, 37, 46, .35); }
.bx-knopf--zart:active { box-shadow: inset 0 2px 6px rgba(21, 37, 46, .16); }

/* ---------------------------------------------------------------- Tags */
.bx-tag { display: inline-flex; align-items: center; gap: .45em; padding: 6px 12px; border-radius: 999px; background: rgba(14, 143, 138, .08); color: var(--bx-akzent-tief); font: 500 .8rem/1 var(--bx-font-mono); letter-spacing: .04em; }
.bx-tag svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Liste mit Haken */
.bx-haken { list-style: none; padding: 0; }
.bx-haken li { position: relative; padding-left: 1.9em; }
.bx-haken li + li { margin-top: .6em; }
.bx-haken li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(14, 143, 138, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230A6E6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }

/* ---------------------------------------------------------------- Unterstrich, der sich zieht */
.bx-strich { position: relative; display: inline-block; padding-bottom: .18em; }
.bx-strich::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--bx-akzent), var(--bx-akzent-2)); transform-origin: left; }

/* ================================================================ Scroll-Effekte */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bx-zeigen { animation: bx-rein linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .bx-zeigen-spaet { animation: bx-rein linear both; animation-timeline: view(); animation-range: entry 20% entry 85%; }
    .bx-wachsen { animation: bx-wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .bx-strich::after { animation: bx-strich linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
    .bx-folge > * { animation: bx-rein linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .bx-folge > :nth-child(2) { animation-range: entry 8% entry 78%; }
    .bx-folge > :nth-child(3) { animation-range: entry 16% entry 86%; }
    .bx-folge > :nth-child(4) { animation-range: entry 24% entry 94%; }
  }
  /* Fallback (gesetzt von bx-effekte.js, wenn CSS-Scroll-Animationen fehlen) */
  .bx-js-fallback :is(.bx-zeigen, .bx-zeigen-spaet, .bx-folge > *) { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--bx-ease), transform .9s var(--bx-ease); }
  .bx-js-fallback .bx-wachsen { transform: scale(.88); transition: transform 1.2s var(--bx-ease); }
  .bx-js-fallback .bx-strich::after { transform: scaleX(0); transition: transform 1s var(--bx-ease) .2s; }
  .bx-js-fallback .ist-da:is(.bx-zeigen, .bx-zeigen-spaet), .bx-js-fallback .ist-da.bx-folge > * { opacity: 1; transform: none; }
  .bx-js-fallback .ist-da.bx-folge > :nth-child(2) { transition-delay: .08s; }
  .bx-js-fallback .ist-da.bx-folge > :nth-child(3) { transition-delay: .16s; }
  .bx-js-fallback .ist-da.bx-folge > :nth-child(4) { transition-delay: .24s; }
  .bx-js-fallback .ist-da.bx-wachsen { transform: none; }
  .bx-js-fallback .ist-da.bx-strich::after { transform: none; }

  /* Text der Display-Überschrift baut sich Zeile für Zeile auf (Hero, beim Laden) */
  .bx-aufbau > span { display: block; animation: bx-aufbau .95s var(--bx-ease) both; }
  .bx-aufbau > span:nth-child(2) { animation-delay: .09s; }
  .bx-aufbau > span:nth-child(3) { animation-delay: .18s; }
  .bx-aufbau > span:nth-child(4) { animation-delay: .27s; }
}

@keyframes bx-rein { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* Hero-Überschrift: nie ganz unsichtbar, damit sie sofort als größter Inhalt (LCP) zählt */
@keyframes bx-aufbau { from { opacity: .4; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bx-wachsen { from { transform: scale(.86); border-radius: 36px; } to { transform: scale(1); } }
@keyframes bx-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ================================================================ Mobil */
@media (max-width: 860px) {
  .bx-teilung { grid-template-columns: 1fr; }
  .bx-kapitel { min-height: 0; padding-block: 72px; }
  .bx-knopf { width: 100%; }
}
@media (max-width: 480px) {
  .bx-display { max-width: calc(100vw - 40px); }
}


@font-face { font-family: 'Bricolage Grotesque'; src: url('schriften/bricolage.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('schriften/hanken.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('schriften/jetbrains.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
html { background: #0b1416; overflow-x: hidden; max-width: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; max-width: 100%; }
.bx-partikel { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Dunkle Variante der BOSSMA-Tokens */
.bx-scope.ub { --bx-text: #eef4f3; --bx-text-2: #a9bdbb; --bx-akzent: #19b3ac; --bx-akzent-tief: #0E8F8A; --bx-akzent-2: #E0982E; --bx-grund: #0b1416; --bx-flaeche: #11201f; --bx-linie: rgba(255,255,255,.1); color: var(--bx-text); }
.ub :where(p, li, span, a, h1, h2, h3) { hyphens: none; overflow-wrap: normal; }
.ub .bx-kicker { color: #19b3ac; }
.ub .bx-lead { color: #b9cbc9; }
.ub a:not(.bx-knopf):not(.v-text) { color: #5fd6cf; }
.ub .bx-knopf { --k-grund: #0E8F8A; }
.ub .bx-knopf--zart { --k-grund: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.18); }
.ub .bx-flaeche { background: rgba(17,32,31,.78); border-color: rgba(255,255,255,.1); }
@media (hover: none) and (pointer: coarse) { .ub .bx-flaeche { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(17,32,31,.95); } }
.ub .mono { font-family: var(--bx-font-mono); }
.ub .amber { color: #E0982E; }

/* Hinweis oben */
.ub-hinweis { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px var(--bx-rand); font: 500 .78rem/1.3 var(--bx-font-mono); color: #8fa6a4; border-bottom: 1px solid rgba(255,255,255,.08); }
.ub-hinweis a { color: #5fd6cf; }

/* Hero */
.ub-hero { min-height: 92svh; display: grid; align-items: center; padding-block: 60px; }
.ub-hero h1 { margin-top: 18px; }
.ub-hero .bx-lead { margin-top: 22px; }
.ub .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.live { display: inline-flex; align-items: center; gap: 18px; margin-top: 36px; padding: 18px 22px; border-radius: 18px; background: rgba(17,32,31,.85); border: 1px solid rgba(25,179,172,.35); }
.live-zahl { flex-shrink: 0; white-space: nowrap; font: 700 clamp(2.6rem, 1.6rem + 3vw, 4rem)/1 var(--bx-font-mono); color: #3ce0c7; text-shadow: 0 0 24px rgba(60,224,199,.35); }
.live-text { max-width: 16em; font-size: .92rem; color: #b9cbc9; }
.live-text b { color: #fff; display: block; }
.puls { width: 10px; height: 10px; border-radius: 50%; background: #3ce0c7; box-shadow: 0 0 0 0 rgba(60,224,199,.6); animation: puls 1.8s infinite; flex: none; align-self: flex-start; margin-top: 8px; }
@keyframes puls { 70% { box-shadow: 0 0 0 12px rgba(60,224,199,0); } 100% { box-shadow: 0 0 0 0 rgba(60,224,199,0); } }

/* Vorher/Nachher */
.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 36px; }
.vergleich > div { min-width: 0; padding: 26px; border-radius: 20px; background: rgba(17,32,31,.82); border: 1px solid rgba(255,255,255,.1); }
.vergleich h3 { font-size: 1.3rem; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vergleich h3 small { font: 500 .72rem/1 var(--bx-font-mono); color: #8fa6a4; letter-spacing: .06em; }
.messer { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.messer figure { margin: 0; text-align: center; }
.messer svg { width: 110px; height: 110px; transform: rotate(-90deg); }
.messer .bahn { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.messer .wert { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 999; transition: stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1); }
.messer .rot { stroke: #ff6b5f; } .messer .gelb { stroke: #E0982E; } .messer .gruen { stroke: #3ce0c7; }
.messer figcaption { margin-top: -78px; height: 78px; font: 700 1.6rem/1 var(--bx-font-mono); }
.messer figcaption small { display: block; margin-top: 30px; font: 500 .72rem/1.3 var(--bx-font-text); color: #a9bdbb; }
.fakt-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed rgba(255,255,255,.12); font-size: .92rem; margin-top: 14px; }
.fakt-zeile b { font-family: var(--bx-font-mono); }
.fakt-zeile .schlecht { color: #ff8a7f; } .fakt-zeile .gut { color: #3ce0c7; }
.nachher-platz { display: grid; place-items: center; min-height: 180px; margin-top: 20px; border-radius: 14px; border: 2px dashed rgba(60,224,199,.35); text-align: center; padding: 16px; color: #b9cbc9; }
.nachher-platz b { display: block; font: 700 1.2rem/1.2 var(--bx-font-titel); color: #fff; }
.quelle { margin-top: 14px; font: 500 .72rem/1.4 var(--bx-font-mono); color: #7f9593; }

/* Werkzeuge */
.gewerke { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.gewerke button { font: 600 .92rem/1 var(--bx-font-text); color: #e6efee; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 12px 16px; min-height: 44px; cursor: pointer; transition: transform .2s, background .2s; }
.gewerke button[aria-pressed="true"] { background: #0E8F8A; border-color: #0E8F8A; color: #fff; }
.gewerke button:active { transform: scale(.95); }
.werkzeuge { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 22px; list-style: none; padding: 0; }
.werkzeuge li { position: relative; min-width: 0; padding: 20px; border-radius: 18px; background: rgba(17,32,31,.82); border: 1px solid rgba(255,255,255,.1); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, border-color .3s; }
.werkzeuge li .bx-tag { background: rgba(25,179,172,.12); color: #5fd6cf; }
.werkzeuge h3 { margin-top: 12px; font-size: 1.15rem; line-height: 1.2; }
.werkzeuge p { margin-top: 8px; font-size: .9rem; color: #b9cbc9; }
.werkzeuge .fuer { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.12); font: 500 .74rem/1.4 var(--bx-font-mono); color: #E0982E; }
/* Letzte Reihe ohne leere Zellen, egal wie viele Werkzeuge */
@media (min-width: 961px) {
  .werkzeuge li:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .werkzeuge li:last-child:nth-child(4n+2), .werkzeuge li:nth-last-child(2):nth-child(4n+1) { grid-column: span 2; }
  .werkzeuge li:last-child:nth-child(4n+3) { grid-column: span 2; }
}
.werkzeuge.filter li { opacity: .3; }
.werkzeuge.filter li.passt { opacity: 1; border-color: #19b3ac; transform: translateY(-6px); box-shadow: 0 20px 40px -24px rgba(25,179,172,.6); }

/* Google und KI */
.ki-liste { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.ki-liste li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ki-liste .mono { display: grid; place-items: center; width: 44px; height: 44px; font-size: .7rem; border-radius: 12px; background: rgba(224,152,46,.14); color: #E0982E; font-weight: 700; }
.ki-liste b { display: block; color: #fff; }
.ki-liste span { font-size: .92rem; color: #b9cbc9; }

/* Wer */
.wer { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(24px,5vw,72px); align-items: center; }
.portrait { position: relative; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; background: radial-gradient(80% 60% at 30% 20%, rgba(25,179,172,.35), transparent 70%), linear-gradient(160deg, #13302e, #0b1416); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; }
.portrait span { font: 700 1.1rem/1.2 var(--bx-font-titel); color: #b9cbc9; text-align: center; }
.portrait span b { display: block; font: 700 4rem/1 var(--bx-font-titel); color: #19b3ac; }
.zahlen3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.zahlen3 div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.zahlen3 b { display: block; font: 700 1.8rem/1 var(--bx-font-mono); color: #3ce0c7; }
.zahlen3 span { display: block; margin-top: 6px; font-size: .82rem; color: #a9bdbb; }
.leist-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.leist-chips span { padding: 8px 12px; border-radius: 999px; background: rgba(25,179,172,.1); color: #9fe6e0; font: 500 .82rem/1 var(--bx-font-mono); }

/* Preise */
.preise4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.preise4 div { min-width: 0; padding: 22px; border-radius: 18px; background: rgba(17,32,31,.82); border: 1px solid rgba(255,255,255,.1); }
.preise4 small { font: 500 .74rem/1 var(--bx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8fa6a4; }
.preise4 b { display: block; margin-top: 10px; font: 700 1.9rem/1 var(--bx-font-titel); color: #fff; }
.preise4 div > span { display: block; margin-top: 8px; font-size: .86rem; color: #b9cbc9; }
.preise4 .hervor { border-color: #19b3ac; background: linear-gradient(160deg, rgba(14,143,138,.35), rgba(17,32,31,.9)); }

/* Abschluss */
.abschluss { text-align: center; }
.abschluss .bx-lead { margin: 18px auto 0; }
.abschluss .knoepfe { justify-content: center; }

/* Fuß */
.ub-fuss { position: relative; z-index: 2; padding: 28px var(--bx-rand) 40px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(5,10,11,.85); font-size: .85rem; color: #8fa6a4; }
.ub-fuss .zeile { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; max-width: 1200px; margin-inline: auto; }
.ub-fuss a { color: #b9cbc9; }
.ub-fuss .zurueck { color: #fff; font-weight: 700; }

/* Tablet und Handy */
@media (max-width: 960px) {
  .werkzeuge { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .werkzeuge li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .preise4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wer { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; aspect-ratio: 1; }
}
@media (max-width: 600px) {
  .ub-hero { min-height: 0; padding-block: 50px 40px; }
  .vergleich { grid-template-columns: 1fr; }
  .werkzeuge { grid-template-columns: 1fr; }
  .werkzeuge li:last-child:nth-child(odd) { grid-column: auto; }
  .preise4 { grid-template-columns: 1fr 1fr; }
  .preise4 div { padding: 16px; }
  .preise4 b { font-size: 1.4rem; }
  .zahlen3 b { font-size: 1.4rem; }
  .live { gap: 12px; padding: 14px 16px; }
  .ub .knoepfe .bx-knopf { width: 100%; }
}
.messer figcaption { height: auto; margin-top: -72px; } .messer figcaption small { margin-top: 44px; }
.messer figcaption { margin: 10px 0 0 !important; height: auto !important; font: 500 .8rem/1.3 var(--bx-font-text) !important; color: #a9bdbb; }
.messer .ring { position: relative; width: 110px; height: 110px; margin-inline: auto; }
.messer .ring svg { position: absolute; inset: 0; }
.messer .zahl { position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.7rem/1 var(--bx-font-mono); color: #fff; }

/* ===== Apple-Effekte ===== */
.spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px 420px at var(--sx, 30%) var(--sy, 40%), rgba(25,179,172,.16), transparent 70%); transition: background .1s; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ub-hero { position: relative; }
.ub-hero .bx-innen { position: relative; z-index: 1; }
.held .z { display: block; }
.held .w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(30px) scale(.96); animation: held-in 1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes held-in { to { opacity: 1; filter: blur(0); transform: none; } }
.verlauf .w { background: linear-gradient(90deg, #19b3ac, #3ce0c7, #E0982E, #19b3ac); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: held-in 1s cubic-bezier(.2,.8,.2,1) forwards, verlauf 6s linear infinite; animation-delay: calc(var(--i) * 90ms + 150ms), 0s; }
@keyframes verlauf { to { background-position: 300% 0; } }
/* Wörter tauchen aus einer Kante auf */
.woerter .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.woerter .wm > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 60ms); }
.woerter.da .wm > span { transform: none; }
/* Statement: Wörter leuchten beim Scrollen auf */
.statement { position: relative; z-index: 1; padding: clamp(80px, 14vh, 160px) var(--bx-rand); }
.st-text { max-width: 980px; margin: 0 auto; font: 600 clamp(1.45rem, .95rem + 2.1vw, 2.6rem)/1.24 var(--bx-font-titel); letter-spacing: -.018em; color: #eef4f3; }
.st-text .sw { color: rgba(238,244,243,.14); transition: color .3s; }
.st-text .sw.an { color: #eef4f3; }
.st-text .sw.an.hl { color: #3ce0c7; }
/* Erster Satz (wie es die meisten machen): leichter, wird beim Scrollen durchgestrichen */
.st-text .ss-alt .sw { font-weight: 400; background: linear-gradient(#ff6b5f, #ff6b5f) no-repeat 0 58% / 0 3px; transition: color .3s, background-size .35s var(--bx-ease); }
.st-text .ss-alt .sw.an { color: rgba(238,244,243,.42); background-size: 100% 3px; }
.st-text .ss-neu { display: block; margin-top: .55em; }
/* Letzter Satz als Unterschrift: eigene Zeile, Mono, mit Strich davor */
.st-text .ss-fazit { display: flex; align-items: baseline; gap: .9em; margin-top: 1.4em; font: 500 clamp(1.05rem, .85rem + .8vw, 1.5rem)/1.4 var(--bx-font-mono); letter-spacing: .01em; }
.st-text .ss-fazit::before { content: ""; flex: 0 0 clamp(28px, 5vw, 64px); height: 2px; background: #3ce0c7; transform: translateY(-.3em); }
/* Laufband */
.laufband { position: relative; z-index: 1; overflow: hidden; padding: 22px 0; border-block: 1px solid rgba(255,255,255,.08); background: rgba(14,143,138,.08); }
.lb-spur { display: flex; gap: 28px; width: max-content; font: 700 clamp(1.6rem, 1rem + 2vw, 2.8rem)/1 var(--bx-font-titel); white-space: nowrap; will-change: transform; }
.lb-spur i { font-style: normal; color: #E0982E; }
.lb-spur span:nth-child(4n+1) { color: transparent; -webkit-text-stroke: 1.5px #19b3ac; }
/* Rennen */
.rennen-sek { position: relative; z-index: 1; padding: clamp(70px, 10vh, 120px) 0 20px; }
.rennen { display: grid; gap: 18px; margin-top: 30px; }
.bahn-r { display: grid; grid-template-columns: 140px minmax(0,1fr) 90px; gap: 16px; align-items: center; }
.bahn-r .name { font: 600 .95rem/1.2 var(--bx-font-text); color: #b9cbc9; }
.spur { height: 22px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.balken { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(calc(var(--ziel) * var(--p, 0))); }
.balken.alt { background: linear-gradient(90deg, #ff6b5f, #ffa08f); }
.balken.neu { background: linear-gradient(90deg, #0E8F8A, #3ce0c7); box-shadow: 0 0 20px rgba(60,224,199,.6); }
.bahn-r .zeit { font: 700 1.5rem/1 var(--bx-font-mono); color: #ff8a7f; text-align: right; }
.bahn-r .zeit.gut { color: #3ce0c7; }
/* Lichtrand auf Karten */
.licht > * { position: relative; isolation: isolate; transform-style: preserve-3d; }
.licht > *::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: radial-gradient(260px 260px at var(--x, -100px) var(--y, -100px), rgba(60,224,199,.9), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.licht > *::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(300px 300px at var(--x, -100px) var(--y, -100px), rgba(25,179,172,.12), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.licht > *:hover::before, .licht > *:hover::after { opacity: 1; }
.licht > * { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, opacity .35s; }
/* Riesensatz */
.riesig { margin: 0 0 40px; font: 800 clamp(3rem, 1rem + 8vw, 9rem)/.92 var(--bx-font-titel); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(238,244,243,.35); background: linear-gradient(90deg, #3ce0c7 0 var(--fuell, 0%), transparent var(--fuell, 0%)); -webkit-background-clip: text; background-clip: text; }
.magnet { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { .held .w { opacity: 1; filter: none; transform: none; animation: none; } .woerter .wm > span { transform: none; } .st-text .sw { color: #eef4f3; transition: none; } .st-text .ss-alt .sw { color: rgba(238,244,243,.42); background-size: 100% 3px; } .balken { transform: scaleX(var(--ziel)); } .riesig { --fuell: 100%; } }
@media (max-width: 600px) { .bahn-r { grid-template-columns: 1fr 70px; } .bahn-r .name { grid-column: 1 / -1; } .riesig { -webkit-text-stroke-width: 1px; } }

/* Geräte im Hero: die echte Startseite läuft durch */
.bx-partikel { display: none; }
.geraete { --rx: 6deg; --ry: -14deg; position: relative; height: 560px; perspective: 1600px; }
.laptop, .handy-g, .g-schild { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.laptop { position: absolute; right: 0; top: 30px; width: 92%; border-radius: 14px; overflow: hidden; background: #0b1416; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 50px 90px -30px rgba(0,0,0,.9), 0 0 80px -20px rgba(25,179,172,.35); transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 60% 50%; }
.lp-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #1a2a29; }
.lp-leiste i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b5f; } .lp-leiste i:nth-child(2) { background: #E0982E; } .lp-leiste i:nth-child(3) { background: #3ce0c7; }
.lp-leiste span { margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font: 500 .72rem/1 var(--bx-font-mono); color: #a9bdbb; }
.lp-bild { height: 360px; overflow: hidden; }
.lp-bild img { width: 100%; height: auto; animation: durchlauf 46s linear infinite alternate; }
.handy-g { position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 9 / 19; padding: 8px; border-radius: 30px; background: #050909; box-shadow: 0 0 0 2px #2b3b3a, 0 40px 70px -20px rgba(0,0,0,.9); transform: rotateX(var(--rx)) rotateY(calc(var(--ry) * 1.15)) rotateZ(-4deg) translateZ(60px); transform-origin: 40% 60%; }
.hg-bild { height: 100%; border-radius: 22px; overflow: hidden; }
.hg-bild img { width: 100%; height: auto; animation: durchlauf-h 60s linear infinite alternate; }
@keyframes durchlauf { from { transform: translateY(0); } to { transform: translateY(calc(-100% + 360px)); } }
@keyframes durchlauf-h { from { transform: translateY(0); } to { transform: translateY(-94%); } }
.g-schild { position: absolute; right: 6%; bottom: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #0E8F8A; color: #fff; font: 600 .85rem/1 var(--bx-font-text); box-shadow: 0 16px 30px -10px rgba(14,143,138,.8); transform: translateZ(90px) rotate(-3deg); }
.g-schild b { font: 700 1.2rem/1 var(--bx-font-mono); }
.g-schild i { width: 8px; height: 8px; border-radius: 50%; background: #3ce0c7; box-shadow: 0 0 0 0 rgba(60,224,199,.6); animation: puls 1.8s infinite; }
@media (prefers-reduced-motion: reduce) { .lp-bild img, .hg-bild img { animation: none; } }
@media (max-width: 960px) { .geraete { height: 460px; margin-top: 30px; } .lp-bild { height: 280px; } @keyframes durchlauf { to { transform: translateY(calc(-100% + 280px)); } } }
@media (max-width: 600px) { .geraete { height: 360px; --ry: -8deg; } .laptop { width: 96%; top: 10px; } .lp-bild { height: 200px; } .handy-g { width: 38%; } .g-schild { bottom: 10px; } }

/* Live-Vorschau statt Bild: echte Seite in echter Breite, verkleinert */
.lp-bild, .hg-bild { position: relative; overflow: hidden; background: #f3efe8; }
.lp-bild iframe, .hg-bild iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.lp-bild img, .hg-bild img { display: none; }
.hg-bild { background: #0e1418; }

/* Such-Vorschau (Sichtbarkeit) */
.such { position: relative; margin: 0; display: grid; gap: 14px; perspective: 1400px; }
.such > div { border-radius: 16px; box-shadow: 0 30px 60px -25px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.such-feld { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px !important; background: #f4f7f6; color: #15252e; font-size: .98rem; transform: rotateY(-8deg) rotateX(4deg); }
.such-feld i { width: 15px; height: 15px; border: 2px solid #4a5b64; border-radius: 50%; position: relative; flex: none; }
.such-feld i::after { content: ""; position: absolute; width: 2px; height: 7px; background: #4a5b64; right: -4px; bottom: -6px; transform: rotate(-45deg); }
.such-tipp { white-space: nowrap; overflow: hidden; }
.such-cursor { width: 2px; height: 1.1em; background: #0E8F8A; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.such-g { background: #fff; color: #15252e; padding: 20px 22px; transform: rotateY(-8deg) rotateX(4deg) translateX(-6%); }
.sg-url { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: #202124; margin: 0; }
.sg-url img { width: 64px; height: auto; }
.sg-url span { color: #5f6368; }
.sg-mob { margin-left: auto; font-style: normal; font-family: var(--bx-font-mono); font-size: .68rem; padding: 3px 8px; border-radius: 999px; background: #e7f4f3; color: #0A6E6A; }
.sg-titel { margin: 8px 0 6px; font-size: 1.12rem; color: #1a0dab; line-height: 1.3; }
.sg-text { margin: 0; font-size: .88rem; color: #4d5156; line-height: 1.55; }
.sg-faq { margin-top: 12px; border-top: 1px solid #e6e8ea; border-radius: 8px; }
.sg-faq p { margin: 0; display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid #e6e8ea; font-size: .86rem; color: #202124; }
.sg-faq p span { color: #5f6368; }
.such-ki { background: linear-gradient(160deg, #15312f, #0d1a1a); padding: 20px 22px; transform: rotateY(-8deg) rotateX(4deg) translateX(8%); border: 1px solid rgba(60,224,199,.25); }
.ki-kopf { margin: 0 0 8px; font-family: var(--bx-font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #3ce0c7; }
.ki-text { margin: 0; font-size: .92rem; color: #dbe7e5; line-height: 1.6; }
.ki-text b { color: #fff; }
.ki-quelle { margin: 12px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .8rem; color: #fff; }
.ki-quelle span, .ki-quelle em { font-family: var(--bx-font-mono); font-style: normal; font-size: .68rem; color: #9fb3b1; }
.such figcaption { font-size: .76rem; color: #8aa09e; text-align: right; }
[data-teil] { border-radius: 6px; transition: background-color .35s, box-shadow .35s, color .35s; }
.such.an-faq [data-teil="faq"], .such.an-txt [data-teil="txt"], .such.an-mob [data-teil="mob"], .such.an-bing [data-teil="bing"] { background-color: rgba(224,152,46,.22); box-shadow: 0 0 0 3px rgba(224,152,46,.55); }
.ki-liste li { cursor: default; transition: background .3s, border-color .3s, transform .3s; }
.ki-liste li.an { background: rgba(224,152,46,.09); border-color: rgba(224,152,46,.5); transform: translateX(6px); }
.ki-liste li.an .mono { background: #E0982E; color: #15252e; }
@media (max-width: 960px) { .such { margin-top: 10px; } .such-feld, .such-g, .such-ki { transform: none; } }

/* Venom-Knopf „bossma.de ansehen“: glänzend schwarz, Fäden packen den Zeiger in der Nähe und ziehen den Knopf mit (ueber.js) */
.ub .venom { --schleim: #020303; --faden-glanz: rgba(60,224,199,.6); position: relative; display: inline-block; vertical-align: middle; }
.ub .venom .v-text { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; color: #fff; font: 700 1rem/1 var(--bx-font-text); text-decoration: none; white-space: nowrap; overflow: hidden; box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 160% at 28% -10%, #3a4446 0%, #111617 38%, #020303 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -10px 18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(60,224,199,.35), 0 14px 30px -12px rgba(0,0,0,.9), 0 0 26px -8px rgba(60,224,199,.55); }
.ub .venom .v-text::before { content: ""; position: absolute; left: 14px; right: 14px; top: 3px; height: 45%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.ub .venom .v-text:focus-visible { outline: 2px solid #3ce0c7; outline-offset: 4px; }
.ub .venom .v-pfeil { width: 18px; height: 18px; flex-shrink: 0; transition: transform .35s var(--bx-feder); }
.ub .venom .v-text:hover .v-pfeil { transform: translate(3px, -3px); }
.ub .v-faeden { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 2; }
.ub .v-faeden path { fill: none; stroke: var(--schleim); stroke-linecap: round; }
.ub .v-faeden .glanz { stroke: var(--faden-glanz); }
.ub .v-faeden circle { fill: var(--schleim); stroke: var(--faden-glanz); stroke-width: .6; }
@media (max-width: 600px) { .ub .knoepfe .venom { display: block; width: 100%; } .ub .venom .v-text { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .ub .v-faeden { display: none; } }