/* =====================================================================
   phonegreetings.ai – classic.css (Design-Korrektur 07.10.2026)
   Fuehrt die Optik auf den Look vor dem Relaunch zurueck (ansagen.ai-Familie).
   Alle Werte gemessen per getComputedStyle an der alten Live-Startseite
   (Stand bis 07.10.2026 mittags): Geist 300/600, Text #506777, Headlines
   #204f6b mit Petrol-Strong #0a577f, Orange-Verlauf #f97a2e->#ee5310,
   Pill-Buttons, Container 1200 px, Radius 12 px, keine Schatten unter Karten.
   Wird NACH site.css geladen; Struktur/Inhalt/SEO bleiben unberuehrt.
   ===================================================================== */
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:300;src:url("../fonts/geist/geist-300.woff2") format("woff2")}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:400;src:url("../fonts/geist/geist-400.woff2") format("woff2")}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:500;src:url("../fonts/geist/geist-500.woff2") format("woff2")}
@font-face{font-family:"Geist";font-display:swap;font-style:normal;font-weight:600;src:url("../fonts/geist/geist-600.woff2") format("woff2")}

:root{
  --font:"Geist",system-ui,sans-serif; --mono:"Geist",system-ui,sans-serif;
  --ink:#173d57; --head:#204f6b; --petrol:#0a577f; --petrol-dark:#0a4d6a; --link:#0a4d7c;
  --navy:#0a4d7c; --text-2:#506777; --text-3:#6b8193; --on-dark-2:#c3d6e2;
  --line:#e5edf2; --line-2:#dce6ed; --field:#c9d8e2;
  --bg-soft:#f5f9fb; --bg-field:#fbfdfe; --grad-soft:linear-gradient(120deg,#f7fbfd,#edf5fa);
  --cta:#ee5310; --cta-hover:#d9470a; --cta-grad:linear-gradient(135deg,#f97a2e 0%,#ee5310 100%);
  --play:#ee5310; --wave:#c4d8e4; --wave-on:#0a577f; --focus:#62bbdb;
  --r-sm:8px; --r-md:10px; --r-lg:12px; --container:1248px; --gutter:24px;
  --shadow-hero:0 22px 48px -28px rgba(10,77,106,.32);
}
body{font-family:var(--font);font-weight:300;color:var(--text-2);line-height:1.7}
strong,b{font-weight:600}
a{color:var(--link)} a:hover{color:var(--petrol-dark)}

/* ---------- Typografie (editorial: duenn + Petrol-Strong) ---------- */
.h1{font-weight:300;color:var(--head);font-size:clamp(36px,4.1vw,56px);line-height:1.1;letter-spacing:-.028em}
.h1 strong,.h2-xl strong,.h2 strong,.h2-sm strong{color:var(--petrol);font-weight:600}
.h2-xl{font-weight:300;color:var(--head);font-size:clamp(32px,3.4vw,46px);line-height:1.15;letter-spacing:-.025em}
.h2{font-weight:300;color:var(--head);font-size:clamp(30px,2.9vw,40px);line-height:1.2;letter-spacing:-.02em}
.h2-sm{font-weight:300;color:var(--head);font-size:clamp(24px,2.2vw,30px);line-height:1.25;letter-spacing:-.015em}
.h3{font-weight:500;color:var(--ink);font-size:19px}
.lead{font-weight:300;color:#4b667a;font-size:clamp(17px,1.4vw,19px);line-height:1.65;max-width:34em}
.body-lg{font-weight:300;color:var(--text-2);font-size:17.5px;line-height:1.75}
.body{font-weight:300;color:var(--text-2)}
.label{font-family:var(--font);font-weight:500;font-size:12.5px;letter-spacing:.09em;color:#526b7d}
.label--accent{color:var(--petrol)}
.label--num{font-family:var(--font);font-weight:600;color:var(--cta);font-size:14px;letter-spacing:.04em}
.eyebrow{font-family:var(--font);font-weight:600;font-size:13.6px;letter-spacing:.02em;text-transform:none;color:#526b7d}

/* ---------- Buttons & Links ---------- */
.btn{border-radius:999px;font:600 14.5px/1.3 var(--font);padding:12px 24px;min-height:44px}
.btn--lg{font-size:15px;padding:14px 26px}
.btn--cta{background:var(--cta-grad);color:#fff;border:0}
.btn--cta:hover{background:var(--cta-grad);filter:brightness(1.05);color:#fff;box-shadow:0 10px 22px -10px rgba(239,78,13,.55)}
.btn--outline{background:#fff;color:#205675;border:1px solid #b7cbd9;font-weight:500}
.btn--outline:hover{border-color:var(--petrol);color:var(--petrol)}
.btn--dark{background:var(--petrol-dark);color:#fff}.btn--dark:hover{background:#083d55;color:#fff}
.link-arrow{color:var(--link);font-weight:500}
.link-arrow--cta{color:var(--link);font-weight:600;font-size:14.5px}
.link-arrow--cta:hover{color:var(--petrol-dark)}
.checks{color:var(--text-2);font-size:15.5px}
.checks svg{color:#19a39b}
.band--dark .checks svg{color:#8fd8e8}

/* ---------- Topbar + Header ---------- */
.topbar{background:#f7fafc;border-bottom:1px solid var(--line);font-size:13px;color:#526b7d}
.topbar__in{display:flex;align-items:center;gap:8px 24px;min-height:44px}
.topbar__usp{flex:1}
.topbar__acc{display:flex;align-items:center;gap:20px}
.topbar__acc a{display:inline-flex;align-items:center;gap:6px;color:#526b7d;text-decoration:none;font-size:13px;min-height:36px}
.topbar__acc a:hover{color:var(--petrol)}
.topbar .cart-link{width:auto;height:auto}
.topbar .cart-link__count{position:static;margin-left:2px}
.site-header{background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.site-header .container{padding-top:0;padding-bottom:0;min-height:88px}
.brand--logo img{display:block;height:38px;width:auto}
.nav{gap:22px;font-size:15.2px;font-weight:400}
.nav a{color:var(--link)}
.nav a[aria-current="page"]{color:var(--petrol);box-shadow:inset 0 -2px 0 var(--petrol)}
.site-footer .brand--logo img{height:32px}
/* Rabattcode-Baustein pg_promo_chip() (08.10.2026): Orange-Abzeichen + Code zum Kopieren */
.pc{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px 10px;color:var(--ink);font-size:15px}
.pc__badge{position:relative;overflow:hidden;flex:none;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--cta-grad);border-radius:999px;padding:5px 11px}
.pc__badge::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:pg-glint 6s ease-in-out 1.2s infinite}
@keyframes pg-glint{0%,70%{left:-60%}100%{left:130%}}
button.pc__code{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;font:700 14px/1 var(--font);letter-spacing:.08em;color:var(--cta-hover);background:#fff;border:1.5px dashed #f2a679;border-radius:8px;padding:8px 12px;cursor:pointer}
button.pc__code:hover{border-style:solid;border-color:var(--cta)}
.pc__copied{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;background:var(--cta-grad);color:#fff;font-size:12.5px;letter-spacing:.02em;opacity:0;transition:opacity .2s ease}
.pc__code.is-copied .pc__copied{opacity:1}
.topbar__promo{flex:1;min-width:0}
.topbar .pc{justify-content:flex-start;font-size:13px}
.qp--strip .qp__promo{display:flex;justify-content:center;margin:4px 0 0}
/* 08.10.2026 (Andreas): im Streifen nur Schrift, keine grafischen Elemente - etwas kraeftiger als die Zeile darunter */
.qp--strip .pc{display:inline;font-size:14.5px;font-weight:500;color:var(--text-2);text-align:center}
.qp--strip .pc__badge{display:inline;background:none;color:inherit;font:inherit;letter-spacing:0;text-transform:none;padding:0;border-radius:0}
.qp--strip .pc__badge::after{content:none}
.qp--strip .pc__text{margin:0 .3em}
.qp--strip button.pc__code{display:inline;background:none;border:0;border-radius:0;padding:0;font:inherit;font-weight:700;letter-spacing:.03em;color:var(--ink);cursor:copy}
.qp--strip button.pc__code:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;transform:none}
.qp--strip .pc__code svg,.qp--strip .pc__copied{display:none}
.qp--strip .pc__code.is-copied::after{content:" · copied";font-weight:400;color:var(--text-3)}
@media (max-width:560px){.topbar .pc__text{display:none}}
@media (max-width:900px){
  .topbar__usp{display:none}
  .topbar__acc{margin-left:auto}
  .site-header .container{min-height:72px}
  .site-header.is-open .nav{padding-bottom:12px}
}

/* ---------- Aktionskasten (alter Banner-Stil) ---------- */
.promo{background:transparent;color:#fff;font-size:16px}
.promo .container{display:block;min-height:0;padding-top:20px;padding-bottom:4px}
.promo__box{position:relative;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px 28px;background:var(--petrol-dark);border:1px solid #175d7e;border-radius:12px;padding:22px 58px 16px 26px}
.promo__copy{display:flex;flex-direction:column;gap:6px;text-align:left}
.promo p{flex:none;text-align:left;margin:0}
.promo__kicker{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:400;color:#dbeaf2}
.promo__new{font-size:10px;font-weight:700;letter-spacing:.08em;background:#ff6500;color:#fff;border-radius:5px;padding:4px 7px}
.promo__title{font-size:21px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3}
.promo__offer{display:flex;flex-direction:column;gap:6px}
.promo__label{font-size:13.5px;color:#dbeaf2}
.promo__code{display:inline-flex;align-items:center;gap:12px;font:700 15px/1.6 var(--font);letter-spacing:.04em;color:#fff;background:#25768a;border:1px solid #a0eff7;border-radius:8px;padding:9px 16px;cursor:pointer;box-shadow:inset 0 0 12px rgba(121,232,249,.1),0 0 10px rgba(86,229,247,.22)}
.promo__code.is-copied{background:#1f8a7f}
.promo__cta{align-self:end}
.promo__fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;font-size:12.5px;color:#c3d6e2}
.promo button.promo__close{position:absolute;top:12px;right:12px;width:36px;height:36px;color:#dbeaf2;background:none;border:0;cursor:pointer}
@media (max-width:860px){
  .promo__box{grid-template-columns:1fr;padding:20px 48px 14px 20px;gap:14px}
  .promo__title{font-size:19px}
  .promo__cta{align-self:start}
}

/* ---------- Baender: weniger Grau, mehr Weiss + sanfte Verlaeufe ---------- */
.band{padding:104px 0}
.band--tight{padding:72px 0}
.band--soft{background:var(--grad-soft);border:0}
.band--dark{background:linear-gradient(135deg,#0a4d6a 0%,#083b52 100%);color:#fff}
.band--dark .h2,.band--dark .h2-xl,.band--dark .h2-sm{color:#fff}
.band--dark .h2 strong,.band--dark .h2-xl strong{color:#9fdcec}
@media (max-width:640px){.band{padding:64px 0}.band--tight{padding:48px 0}}

/* ---------- Karten: flach, 12 px, ohne Schatten ---------- */
.script,.demo-card,.tool-card,.note,.price-card,.studio{border-radius:12px;border-color:var(--line-2);box-shadow:none}
.studio,.tool-card{box-shadow:var(--shadow-hero)}
.script__foot,.demo-card__foot,.studio__foot{background:#fff}
.script__text mark,.body mark,.body-lg mark,.lead mark{background:#e3f1f7;color:var(--ink)}
.cols{gap:40px}
.col{border-top:1px solid var(--line-2);padding-top:22px}
.band--dark .col{border-top-color:rgba(255,255,255,.3)}
.faq{border-top-color:var(--line-2)}
.faq details{border-bottom-color:var(--line-2)}
.faq summary{font-weight:500;color:var(--ink);font-size:18px}
.faq summary::after{border-color:var(--petrol)}
.linklist li{border-top-color:var(--line)}
.linklist a{font-weight:500;color:var(--link)}
.price-card__amount{font-weight:300;color:var(--head)}
.pill[aria-selected="true"]{background:var(--petrol-dark);border-color:var(--petrol-dark)}
.chip{border-color:var(--line-2);font-weight:500;color:var(--head)}

/* Player: Petrol statt Schwarz, Play-Kreis Orange */
.player{background:#0b4561}
.play{background:var(--cta-grad)}

/* Mini-Generator */
.quick{border-radius:12px;border-color:var(--line-2)}
.quick textarea{font:300 16.5px/1.6 var(--font);border-color:var(--field);border-radius:10px;color:var(--ink)}
.field{font-weight:500;color:#526b7d}
.field select{font:400 15px var(--font);border-color:var(--field);border-radius:10px}
.quick__title{font-weight:500;color:var(--ink);font-size:18px}
.quick--flat{background:transparent;border:0;box-shadow:none}
.quick--flat .quick__body{padding:0;gap:12px}
.quick--flat textarea{background:#fff;min-height:104px}
.quick--flat .btn--block{width:auto;align-self:flex-start}
.quick--flat .quick__fine,.quick--flat .quick__price{text-align:left;margin-top:0}

/* Vertrauensmodul: Zeilen mit Icons statt Kaesten (§16) */
.trust__points{gap:18px 32px}
.trust__points li{border:0;background:none;padding:0;font-weight:500;color:var(--ink);gap:14px}
.trust__points .icon{width:22px;height:22px;color:var(--petrol);flex:none}
.trust__points a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--field);text-underline-offset:4px}

/* Use-Case-Raster: editorial, ohne Rahmen (§20) */
.tiles{gap:0 56px;grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{border:0;border-top:1px solid var(--line-2);border-radius:0;background:none;padding:28px 0 36px}
.tile:hover{border-top-color:var(--petrol)}
.tile .icon{color:var(--petrol)}
.tile__title{font-weight:500;color:var(--ink);font-size:19px}
.tile__text{font-weight:300}
.tile__link{color:var(--link);font-weight:500}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}

/* Produktionsweg: grosse ruhige Strecke (§18/§19) */
.process{max-width:1100px;margin:0 auto;width:100%;padding:12px 0}
.process__track{left:10%;right:10%;top:31px;height:1px;background:#9cc3d6}
.process__steps{gap:24px}
.process__steps li{gap:18px}
.process__dot{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:1px solid #9cc3d6;background:#fff;color:#7f9fb2}
.process__dot .icon{width:24px;height:24px}
.process__name{font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7f9fb2;max-width:12em}
.process.is-on .process__dot{background:#fff;border-color:var(--petrol);color:var(--petrol)}
.process.is-on .process__name{color:var(--ink)}
.process__file{display:none}
@media (max-width:760px){
  .process__track{left:31px;top:32px;bottom:32px;width:1px}
  .process__steps li{gap:20px;padding:8px 0}
  .process__dot{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.process .process__dot{background:#fff;border-color:var(--petrol);color:var(--petrol)}}

/* Zwei Produktionswege: Split statt Preiskarten (§23) */
.ways{gap:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.way{border:0;border-radius:0;background:none;padding:0 48px 0 0;gap:18px}
.way + .way{padding:0 0 0 48px;border-left:1px solid var(--line-2)}
.way__media{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#eef5f9}
.way__media img{width:100%;height:100%;object-fit:cover}
.way__media--laptop{display:flex;align-items:flex-end;justify-content:center;padding:18px 18px 0;background:linear-gradient(180deg,#f4fafe,#e9f3fb)}
.way__media--laptop img{width:92%;height:auto;object-fit:contain}
@media (max-width:820px){.ways{grid-template-columns:1fr;gap:48px}.way,.way + .way{padding:0;border:0}}

/* Sprachen: dezent (§26) */
.lang-row .chip{min-height:32px;padding:5px 12px;font-size:13.5px;font-weight:400;color:#526b7d;background:#fff}

/* =====================================================================
   Startseite: Hero wie frueher (Text links, Laptop rechts) — §10–§15
   ===================================================================== */
.hero--classic{position:relative;isolation:isolate;background:#fff;border-bottom:0;overflow:hidden}
.hero--classic::before{content:"";position:absolute;inset:0 30% 0 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 8% 40%,rgba(98,187,219,.14),transparent 64%)}
.hero--classic::after{content:"";position:absolute;inset:auto 0 0 0;height:180px;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),#f4f9fc)}
.hero--classic .container{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);grid-template-areas:"copy visual" "tools visual";gap:0 56px;padding-top:64px;padding-bottom:88px;align-items:start}
.hero__copy--classic{grid-area:copy;display:flex;flex-direction:column;gap:20px}
.hero__visual{grid-area:visual;align-self:start;margin-top:40px}
.hero__tools{grid-area:tools;display:flex;flex-direction:column;gap:44px;margin-top:40px}
.hero__claim{font-weight:300;color:var(--head);font-size:clamp(22px,2.1vw,29px);line-height:1.3;letter-spacing:-.015em;margin-top:-6px}
.hero__claim strong{color:var(--petrol);font-weight:600}
.hero__copy--classic .checks{flex-direction:column;gap:8px;font-size:15.5px}
.hero__copy--classic .btn-row{margin-top:6px}
.hero__trust{font-size:13.9px;color:var(--text-2)}
.laptop{position:relative;width:100%;aspect-ratio:588/425}
.laptop iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.hero__sub{font-weight:300;color:var(--ink);font-size:19px;letter-spacing:-.01em}
.hero__try{border-top:1px solid var(--line-2);padding-top:28px;display:flex;flex-direction:column;gap:16px}
.hero__listen{display:flex;flex-direction:column;gap:14px}
@media (max-width:980px){
  .hero--classic .container{grid-template-columns:1fr;grid-template-areas:"copy" "visual" "tools";padding-top:40px;padding-bottom:56px}
  .hero__visual{margin-top:28px}
  .hero__tools{margin-top:28px}
}

/* Audiozeilen (§14): Play · Titel · Welle · Dauer, ohne Kartenrahmen */
.arows{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.arow{border-bottom:1px solid var(--line-2);padding:10px 0}
.arow__line{display:grid;grid-template-columns:auto minmax(110px,180px) 1fr auto;align-items:center;gap:16px}
.arow .player--mini{display:contents}
.arow .player--mini .play{grid-column:1;width:40px;height:40px;background:#edf5f9;border:1px solid #c2dce9;color:var(--petrol)}
.arow .player--mini .play svg{width:16px;height:16px}
.arow .player--mini .play[aria-pressed="true"]{background:var(--cta-grad);border-color:transparent;color:#fff}
.arow .player--mini .player__main{grid-column:3;grid-row:1}
.arow .wave{height:22px}
.arow .wave span{background:#cfe0ea}.arow .wave span.on{background:var(--petrol)}
.arow__title{grid-column:2;grid-row:1;font-weight:500;color:var(--ink);font-size:15.5px}
.arow__time{grid-column:4;font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.arow__tr summary{cursor:pointer;font-size:13.5px;font-weight:500;color:var(--link);padding-left:56px;min-height:32px;display:flex;align-items:center}
.arow__tr p{padding:4px 0 8px 56px;font-size:14.5px;color:var(--text-2);line-height:1.6}
@media (max-width:560px){
  .arow__line{grid-template-columns:auto 1fr auto;gap:12px}
  .arow .player--mini .player__main{display:none}
  .arow__title{grid-column:2}.arow__time{grid-column:3}
}

/* Studio 50/50 (§16) */
.studio-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.studio-split__media{border-radius:12px;overflow:hidden;aspect-ratio:4/3.4;background:var(--line)}
.studio-split__media img{width:100%;height:100%;object-fit:cover;display:block}
.studio-split .trust--home{gap:28px}
@media (max-width:900px){.studio-split{grid-template-columns:1fr;gap:36px}.studio-split__media{aspect-ratio:4/3}}

/* Schritte typografisch (§22) */
.steps3 .cols{gap:48px}
.steps3 .col{border-top:1px solid var(--petrol);gap:12px;padding-top:24px}
.steps3 .label--num{font-size:15px}
.steps3 .h3{font-size:22px;font-weight:400;color:var(--head);text-transform:uppercase;letter-spacing:.06em}

/* Telefonanlagen kompakt (§24) */
.systems .logos{gap:10px 34px}
.systems .logo-tile{border:0;min-height:0;padding:6px 0;font-weight:500;font-size:16.5px;color:#4b667a}
.systems .logo-tile:hover{color:var(--petrol)}

/* Preis: dunkler Ruhepunkt (§25) */
.price-band .price-big{font-weight:300;font-size:clamp(64px,7vw,96px);letter-spacing:-.04em;color:#fff}
.price-band .price-big small{color:#c3d6e2;font-weight:300}

/* Abschluss-CTA (§28) */
.cta-band .h2{font-weight:300}

/* Korrekturen nach Sichtpruefung 1 */
.promo button.promo__code{width:auto;height:auto;display:inline-flex;align-items:center;gap:12px;font:700 15px/1.6 var(--font);letter-spacing:.04em;color:#fff;background:#25768a;border:1px solid #a0eff7;border-radius:8px;padding:9px 16px;box-shadow:inset 0 0 12px rgba(121,232,249,.1),0 0 10px rgba(86,229,247,.22)}
.promo button.promo__code.is-copied{background:#1f8a7f}
/* Hero: Text + Laptop oben, darunter Mini-Generator und Hoerproben nebeneinander ueber die volle Breite */
.hero--classic .container{grid-template-areas:"copy visual" "tools tools"}
.hero__visual{align-self:center;margin-top:0}
.hero__tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;margin-top:64px;padding-top:40px;border-top:1px solid var(--line-2)}
/* 07.10.2026 Korrektur: Generator + Hoerproben gehoeren zum Hero - keine Trennlinie, kein grosser Abstand */
.hero__tools{margin-top:40px;padding-top:0;border-top:0}
.hero__try{border-top:0;padding-top:0}
@media (max-width:980px){
  .hero--classic .container{grid-template-areas:"copy" "visual" "tools"}
  .hero__tools{grid-template-columns:1fr;margin-top:32px;padding-top:0}
}
.way__media--laptop{padding:22px 22px 0}
.way__media--laptop img{height:100%;width:auto;max-width:100%;object-fit:contain}
.faq{max-width:960px}
.faq .faq__a{max-width:780px}
@media (max-width:760px){.process__track{right:auto;height:auto;left:31px;top:40px;bottom:40px;width:1px}}
/* ── Vorschau-Generator (pg_quick_preview) — Auftrag "Hero finalisieren" 07.10.2026 ─────────────
   Grundform = mobil und /uk: normale Breite, unter dem MacBook bzw. in der Hero-Spalte.
   Ab 1100px sitzt DIESELBE Komponente im MacBook-Bildschirm: Bildschirmflaeche in Prozent der
   Laptopgrafik (gemessen: links 11.45 %, rechts 11.89 %, oben 4.85 %, Hoehe 69.12 %), alle Masse
   innen in em, Schriftgroesse in cqw der Laptopbreite -> skaliert mit, nichts in Pixelkoordinaten. */
.qp{display:flex;flex-direction:column;gap:12px;color:var(--text)}
.qp [hidden]{display:none !important}
.qp__bar{display:none}
.qp__panel{display:flex;flex-direction:column;gap:12px}
.qp__label{display:block;font-weight:300;color:var(--ink);font-size:19px;letter-spacing:-.01em;line-height:1.3}
.qp__hint{font-size:14px;color:var(--text-3);margin-top:-6px}
.qp__text{display:block;width:100%;min-height:168px;resize:vertical;font:inherit;font-size:16px;line-height:1.55;color:var(--ink);background:#fff;border:1px solid #c9d8e2;border-radius:12px;padding:14px 16px}
.qp__text:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
.qp__text[aria-invalid="true"]{border-color:#c2410c}
.qp__row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.qp__fine{font-size:13.5px;color:var(--text-3)}
.qp .qp__go[disabled]{cursor:progress;opacity:.92;transform:none;filter:none}
/* Ladezustand: Spinner im Button (Andreas 07.10.2026) */
.qp .qp__go[aria-busy="true"]::before{content:"";flex:none;width:1em;height:1em;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:qp-spin .75s linear infinite}
@keyframes qp-spin{to{transform:rotate(360deg)}}
.qp[data-state="loading"] .qp__fine{display:none}
.player.qp__player{margin:0;background:transparent;border-radius:0;padding:12px 0;gap:16px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.qp__player .play{width:48px;height:48px;background:var(--petrol);color:#fff}
.qp__player .wave{height:26px}
.qp__player .wave span{background:#cfe0ea}.qp__player .wave span.on{background:var(--petrol)}
.qp__time{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.qp__actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.qp__link{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;font-weight:500;color:var(--link);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qp__msg{font-size:16px;color:var(--ink);line-height:1.5}
.qp__status{font-size:14.5px;color:var(--text-2);line-height:1.5}
.qp__status:empty{display:none}
/* 08.10.2026 nachmittags: Andreas "machs so wie heute morgen der erste Entwurf" -> Streifen-Gestaltung aus bfd77d6
   wiederhergestellt (Orange-Rand/weisse Flaeche verworfen); Rabattcode im Streifen bleibt (pg_promo_chip).
   ── Startseite 08.10.2026 (Andreas): MacBook = animierte Studio-Szene (iframe), darunter ueber die volle
   Inhaltsbreite der Eingabestreifen "Try it now" (ein Text, ein Button) und "Rather hear an example first?".
   Alles im selben hellen Hero-Verlauf: keine Card, kein Schatten, nur duenne Linien als Gliederung. */
.hero-anim-frame{max-width:620px;margin-left:auto}
.hero__tools{display:flex;flex-direction:column;gap:56px;margin-top:56px;padding-top:0;border-top:0}
.hero__try{display:flex;flex-direction:column;align-items:center;gap:16px;border-top:1px solid var(--line-2);padding-top:48px}
.hero__trylabel{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cta)}
.qp--strip{width:100%;max-width:880px;gap:16px}
.qp--strip .qp__panel{gap:16px}
.qp--strip .qp__label{text-align:center;font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.2;letter-spacing:-.02em;color:var(--head);margin-bottom:8px}
.qp--strip .qp__text{min-height:128px;font-size:18px;line-height:1.6;padding:20px 24px;border-radius:16px;border-color:#bfd3df;background:rgba(255,255,255,.92)}
.qp--strip .qp__text:hover{border-color:#9cc3d6}
.qp--strip .qp__row{flex-direction:column;justify-content:center;gap:12px;margin-top:8px}
.qp--strip .qp__go{font-size:17px;padding:16px 40px}
.qp--strip .qp__fine,.qp--strip .qp__status,.qp--strip .qp__msg{text-align:center}
.qp--strip .qp__panel--player,.qp--strip .qp__panel--error{width:100%;max-width:640px;margin:0 auto}
.qp--strip .qp__panel--player .qp__label{font-size:clamp(22px,2.2vw,28px)}
.qp--strip .qp__actions{justify-content:center}
.hero__listen{gap:16px}
@media (max-width:980px){
  .hero__visual{margin-top:32px}
  .hero-anim-frame{margin:0 auto}
  .hero__tools{margin-top:40px;gap:40px}
  .hero__try{padding-top:40px}
}
@media (max-width:560px){
  .qp--strip .qp__text{min-height:168px;font-size:16px;padding:16px}
  .qp--strip .qp__go{width:100%}
}

@media (min-width:1100px){
  /* Hoerproben: drei nebeneinander ueber die volle Breite */
  .hero__listen .arows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;border-top:0}
  .hero__listen .arow{border-top:1px solid var(--line-2);border-bottom:0;padding-top:14px}
  .hero__listen .arow__line{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .hero__listen .arow .player--mini .play{grid-row:1/3}
  .hero__listen .arow .player--mini .player__main{grid-column:2/4;grid-row:2}
}
/* ── Mikro-Animationen (Andreas 07.10.2026: "immer ganz leichte Animation", bei Hover und Klick) ──
   Weiche Uebergaenge statt harter Wechsel; Anheben nur mit Maus (hover:hover), Eindruecken beim Klick
   (auf iOS ueber den touchstart-Listener in site.js); bei reduzierter Bewegung alles aus. */
a,button,summary,.btn,.chip,.pill,.play,.tile,.logo-tile,.arow,.promo__code,.promo__close,textarea,select,input{transition:color .22s cubic-bezier(.2,.7,.2,1),background-color .22s cubic-bezier(.2,.7,.2,1),border-color .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1),filter .22s ease,opacity .22s ease}
.link-arrow{display:inline-block}
@media (hover:hover){
  .btn:hover,.promo button.promo__code:hover{transform:translateY(-1px)}
  .btn--outline:hover{box-shadow:0 8px 18px -12px rgba(10,77,124,.45)}
  .play:hover{transform:scale(1.06)}
  .link-arrow:hover{transform:translateX(3px)}
  .chip:hover,.pill:hover{border-color:#9cc3d6;transform:translateY(-1px)}
  .tile:hover{transform:translateY(-2px)}
  .logo-tile:hover{transform:translateY(-1px)}
  .faq summary:hover,.arow__tr summary:hover{color:var(--petrol)}
}
.btn:active,.promo button.promo__code:active{transform:translateY(0) scale(.97);transition-duration:.08s;filter:brightness(.97)}
.play:active{transform:scale(.92);transition-duration:.08s}
.chip:active,.pill:active,.promo__close:active{transform:scale(.95);transition-duration:.08s}
.link-arrow:active,.nav a:active,.topbar a:active,.footer a:active,summary:active{opacity:.72;transition-duration:.08s}
textarea:focus,select:focus,input:focus{box-shadow:0 0 0 4px rgba(37,118,138,.12)}
@keyframes pg-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
details[open]>:not(summary){animation:pg-rise .3s cubic-bezier(.2,.7,.2,1)}
.qp__panel:not([hidden]),.qp__status:not(:empty){animation:pg-rise .35s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  .btn:hover,.btn:active,.play:hover,.play:active,.link-arrow:hover,.chip:hover,.pill:hover,.tile:hover,.logo-tile:hover{transform:none !important}
}
/* About: freigestelltes Foto (07.10.2026) - ungeschnitten auf hellem Markenverlauf, unten ausgerichtet */
.story__media--cutout{aspect-ratio:529/477;padding:0;align-items:flex-end;background:linear-gradient(120deg,#f7fbfd,#e6f1f7)}
.story__media--cutout img{width:100%;height:auto;object-fit:contain;display:block}
@media (max-width:640px){.story__media--cutout{max-width:none;width:100%}}
/* /uk: Hoerproben unter dem Vorschau-Generator in der Hero-Spalte */
.hero__tool .hero__listen{margin-top:36px;display:flex;flex-direction:column;gap:14px}
/* 08.10.2026 Andreas "alles dieselbe Flucht": Hoerproben-Karten teilen ihre Zeilen (Subgrid),
   Player, "Read the transcript" und Fuss stehen auf einer Linie, egal wie lang die Beschreibung ist. */
@supports (grid-template-rows:subgrid){
  .demo-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .demo-card__foot{margin-top:0;align-self:end}
}
@supports not (grid-template-rows:subgrid){.demo-card__head{flex:1 0 auto}}
/* 08.10.2026 Andreas "vertikal zentrieren": Starthilfe-Leiste ueber dem Generator */
.tool-card__bar,.tool-card__bar .chips{align-items:center}
.gen-start-tour:not([hidden]){display:flex}
/* 08.10.2026 Andreas: Produktionsweg - Strich auf Kreismitte (12px Innenabstand + 32px halber Kreis)
   und Animation etwas staerker: Linie fuellt sich in Petrol, Kreise ploppen nacheinander auf. */
@media (min-width:761px){.process__track{top:44px}}
.process__track::after{content:"";position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--petrol);transform:scaleX(0);transform-origin:left center}
.process.is-on .process__track::after{transform:scaleX(1);transition:transform 4s linear}
.process__dot{transition-property:background-color,border-color,color,box-shadow}
.process.is-on .process__dot{box-shadow:0 0 0 4px rgba(10,87,127,.07);animation:pg-dot-pop .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 1s)}
@keyframes pg-dot-pop{0%{transform:scale(1)}40%{transform:scale(1.14);box-shadow:0 0 0 12px rgba(10,87,127,.12)}100%{transform:scale(1);box-shadow:0 0 0 4px rgba(10,87,127,.07)}}
@media (max-width:760px){
  .process__track::after{left:-.5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:center top}
  .process.is-on .process__track::after{transform:scaleY(1)}
  .process__track{left:27.5px}   /* Kreis 56px -> Mitte 28px */
}
@media (prefers-reduced-motion:reduce){
  .process__track::after,.process.is-on .process__track::after{transform:none;transition:none}
  .process.is-on .process__dot{animation:none}
}
/* 08.10.2026 Hinweiszeile unter dem Generator (Audio-Konverter) */
.tool-aside{margin:24px 0 0;text-align:center;font-size:15px;color:var(--text-2)}
.tool-aside a{color:var(--petrol);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(10,87,127,.3);transition:border-color .2s ease}
.tool-aside a:hover{border-color:var(--petrol)}
/* 08.10.2026 Footer: Flamme der Gruppe vor "BrennerMedien Group" (wie telefonansagen.com) */
.footer-member{display:inline-flex;align-items:center;gap:5px}
.footer-member__flame{width:12px;height:12px;fill:currentColor;flex:none}
/* 08.10.2026 /audio-converter: Konverter im Hero (hero--tool). Reichweite NUR diese Seite:
   Variablen am <ai-generator> innerhalb .tool-convert. Die Ablage (dropzone) liest
   --gray-50/300/400/500, --border-radius, --fliesstext; Buttons --primary / --cta-color. */
.hero--convert .hero__copy{flex:1 1 400px}
.hero--convert .hero__copy .checks{flex-direction:column;gap:8px}
/* 08.10.2026 Andreas "passt nicht von den Proportionen": Ablage oben buendig mit dem Brotkrumenpfad
   und so hoch wie die Textspalte (statt 48px versetzt und halb so hoch). Die Streckung im Shadow DOM
   setzt audio-converter.php (Stylesheet in den Konverter), hier nur die Hoehe von aussen. */
.hero--convert .container{align-items:stretch}
.hero--convert .hero__tool{flex:1 1 520px;display:flex;flex-direction:column}
/* Andreas' Skizze: Oberkante der Ablage auf Hoehe der H1 (nicht der Brotkrumen), Unterkante bleibt
   buendig mit dem letzten Haekchen (stretch minus margin). 93px = Abstand H1 zur Spaltenoberkante,
   gemessen 1025-1920px konstant (Brotkrumen + Label einzeilig). */
@media (min-width:1025px){.hero--convert .hero__tool{margin-top:93px}}
/* SDK setzt .wrapper__konfigurator unter 1024px fest weiss -> Flaeche runden, wirkt dann als Karte */
@media (max-width:1024px){.hero--convert .hero__tool{border-radius:16px}}
/* 08.10.2026 Andreas "sonst denkt man, das ist eine Grafik": animierter Glow-Rahmen um die Ablage,
   solange sie auf eine Datei wartet (.is-waiting setzt audio-converter.php). ::before = umlaufender
   Verlaufsrahmen 2px, ::after = weicher Schein dahinter. Ohne @property-Unterstuetzung steht der
   Verlauf still, der Schein pulsiert trotzdem. Reduzierte Bewegung: statischer Rahmen. */
@property --pg-glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.hero--convert .hero__tool{position:relative;isolation:isolate}
.tool-convert::before,.tool-convert::after{content:"";position:absolute;inset:-2px;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:conic-gradient(from var(--pg-glow-a),#9cc3d6 0deg,#0a577f 90deg,#5fb4d9 160deg,#ee5310 220deg,#9cc3d6 280deg,#0a577f 360deg)}
.tool-convert::before{padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tool-convert::after{z-index:-1;filter:blur(18px)}
.tool-convert.is-waiting::before{opacity:1;animation:pg-glow-spin 5s linear infinite}
.tool-convert.is-waiting::after{opacity:.35;animation:pg-glow-spin 5s linear infinite,pg-glow-pulse 2.6s ease-in-out infinite}
@keyframes pg-glow-spin{to{--pg-glow-a:360deg}}
@keyframes pg-glow-pulse{0%,100%{opacity:.2}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.tool-convert.is-waiting::before,.tool-convert.is-waiting::after{animation:none}}
/* SEO-Ausbau: Vorlagen-Liste als ruhige Chips (keine Schaltflaechen) */
.chips--static .chip{cursor:default;font-weight:400;color:var(--head)}
/* 6 Konvertierungen: 3 + 3 statt 4 + 2 */
@media (min-width:900px){.conversions .cols{grid-template-columns:repeat(3,1fr)}}
.tool-convert ai-generator{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:240px;
  --border-radius:16px;
  --gray-50:#ffffff; --gray-300:#9cc3d6; --gray-400:#0a577f; --gray-500:#5d7689;
  --fliesstext:#173d57; --font-type:Geist;
  --primary:10,87,127; --primary-ink:10,87,127; --secondary:10,87,127; --secondary-ink:10,87,127;
  --cta-color:238,83,16; --cta-color-ink:217,71,10; --on-cta-color:255,255,255;
  --konfigurator-wrapper-hintergrund:transparent; --konfigurator-wrapper-rahmen:transparent; --konfigurator-wrapper-outline:transparent; --konfigurator-wrapper-schatten:rgba(0,0,0,0);
}
.tool-convert .generator-loading{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:96px 24px;border:2px dashed #9cc3d6;border-radius:16px;background:#fff;text-align:center;color:var(--text-2)}