/* ==========================================================================
   telefonansagen-ki.de — Markenschicht
   Zusammenfuehrung 12.09.2026: Struktur und Gestaltung kommen aus der
   Designkopie (root-design), die Farbwelt und der Preis-Sticker aus der
   Art Direction. Entscheidung Andreas: "sieht hochwertiger aus, aber
   deine Farben sind besser".

   Wird NACH design.css geladen und enthaelt nur:
     1. den gelben Preis-Sticker als Markenelement (AD Kap. 5)
     2. Anhebung der Schriftgroessen unter 13 px (AD Kap. 4)
     3. Korrekturen, die sich aus dem Farbtausch ergeben
   ========================================================================== */

:root{
  --yellow:#FFD84D;      /* Signal: schnell / guenstig / sofort verfuegbar */
  --ink-deep:#101828;
}

/* ==========================================================================
   1  DER PREIS-STICKER (AD Kap. 5)
   Der Preis ist Teil der Marke und darf nicht als graue Textzeile
   erscheinen. Gelbe Flaeche, leicht gedreht, Ink darauf: 12,83:1.
   ========================================================================== */

.hero-price{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  background:var(--yellow);color:var(--ink-deep);
  padding:11px 16px 10px;
  border-radius:10px;
  transform:rotate(-1.6deg);
  font-size:13px;line-height:1;white-space:nowrap;
}
.hero-price strong{
  display:block;
  font-size:30px;font-weight:800;letter-spacing:-.035em;margin-right:0;
  font-variant-numeric:tabular-nums;
}
.hero-price > span{
  display:block;margin-top:5px;
  color:var(--ink-deep);opacity:.72;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
/* "netto" stand direkt hinter der Zahl und stoerte die Ziffernwirkung */
.hero-price{gap:0}

/* Derselbe Sticker im Abschluss-Aufruf */
.closing-price{
  display:inline-flex;flex-direction:column;align-items:center;
  background:var(--yellow);color:var(--ink-deep);
  padding:14px 22px 12px;border-radius:10px;
  transform:rotate(-1.2deg);line-height:1;
}
.closing-price b{
  display:block;font-size:34px;font-weight:800;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.closing-price span{
  display:block;margin-top:6px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  opacity:.72;
}

/* ==========================================================================
   2  SCHRIFTGROESSEN (AD Kap. 4)
   Die 98 Regeln unter 12,4 px (bis 7 px) sind direkt in design.css
   angehoben - in der Quelle, nicht als !important-Schicht darueber.
   Staffelung: 7-9 -> 12,5 · 9-10 -> 13 · 10-11 -> 13,5 · 11-12 -> 14 ·
   12-12,4 -> 14,5 px. Damit bleibt die Hierarchie erhalten.
   ========================================================================== */

/* ==========================================================================
   3  Folgen des Farbtauschs
   ========================================================================== */

/* Auf dunklem Grund war #e0e5ff die Textfarbe; nach dem Tausch auf
   #D4DFFB gegen --ink gemessen 13,31:1 - ausreichend. Hier nur die
   Faelle, in denen die Farbe jetzt auf HELLEM Grund steht. */
.availability-note{color:var(--text)}

/* Der blaue Akzent der H1 ist jetzt Electric Blue: gegen Warm White
   5,10:1 - ausreichend fuer die Grossschrift. */
.sound-hero h1 span{color:var(--brand)}

/* Die Logo-Mark der Designkopie bleibt, nur der Farbwert kommt aus der AD */
.hd .brand-mark,.hd svg rect,.hd svg path{}

/* ==========================================================================
   4  Generator-Stelle: meine ruhige Flaeche statt des Editors
   Entscheidung Andreas: "Nein, meine Flaeche behalten".
   ========================================================================== */

.genpanel{
  max-width:1100px;margin:0 auto;
  background:var(--white);
  border:1px solid #D4DFFB;border-radius:22px;
  box-shadow:0 1px 2px rgba(16,24,40,.03),0 32px 64px -28px rgba(16,24,40,.18);
  overflow:hidden;
}
.genoffer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:56px;align-items:center;padding:56px;
}
.genoffer h3{
  font-size:clamp(23px,2.2vw,30px);line-height:1.15;letter-spacing:-.03em;
  color:var(--ink);font-weight:800;margin:0;
}
.genoffer p{margin-top:20px;font-size:17px;line-height:1.6;max-width:40em}
.genoffer-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:36px}
.genoffer-side{
  background:#EEF3FF;border:1px solid #D4DFFB;
  border-radius:18px;padding:28px;
}
.genoffer-lbl{
  display:block;margin-bottom:14px;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.genoffer-list{list-style:none;padding:0;margin:0}
.genoffer-list li{
  display:flex;gap:10px;align-items:flex-start;
  padding-block:11px;font-size:15.5px;margin:0;
}
.genoffer-list li + li{border-top:1px solid #D4DFFB}
.genoffer-list svg{color:var(--brand);flex:none;margin-top:3px}
.genoffer-side .hero-price{margin-top:20px}

@media (max-width:900px){
  .genoffer{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px 24px}
  .genoffer-cta{flex-direction:column;align-items:stretch}
  .genoffer-cta .btn{width:100%;justify-content:center}
}

@media (max-width:720px){
  .hero-price{transform:none}
  .hero-price strong{font-size:27px}
  .closing-price strong,.closing-price b{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  .hero-price,.closing-price{transform:none}
}

/* ==========================================================================
   5  Sektionsflaechen aus der AD-Palette
   Der Farbtausch hatte #eeefe9 (warmes Grau) auf --line #E2E0D9 gezogen -
   das ist die Linienfarbe, nicht fuer Flaechen gedacht (gemessen als
   Sektionsgrund der Vorlagen). Richtige Flaechen sind Soft Blue und das
   warme Neutral aus der Art Direction.
   ========================================================================== */

/* Vorlagen: warmes Neutral, damit sie sich von Hero und FAQ abheben */
.template-section{background:#F5EFE4}

/* Schluss-Aufruf: dunkel, wie in der AD (Kap. 18) - der Abschluss ist der
   starke Moment der Seite, nicht eine weitere helle Flaeche. */
.closing-section{background:var(--ink)}
.closing-section h2,.closing-section h3{color:#fff}
.closing-section .eyebrow{color:#9AA5B8}
.closing-section p,.closing-section li{color:#D9DFEA}
.closing-section .btn{background:#fff;color:var(--ink)}
.closing-section .btn:hover{background:#EEF3FF;color:#1435A8}
/* Nur die Deko-Streifen abmildern, NICHT jedes aria-hidden-Element:
   der Pfeil im CTA stand dadurch auf 16 % Deckkraft (gemessen). */
.closing-section .closing-wave{opacity:.16}

/* ==========================================================================
   6  Footer: Member-Badge und Rechtszeile
   Muster von telefonansagen.com uebernommen (Wortlaut und Flammen-Icon).
   ========================================================================== */

.ft-base{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 32px;
}
.ft-base > p{margin:0}

.footer-member{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  color:var(--ink);font-size:14.5px;font-weight:700;
  text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap;
}
.footer-member:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.footer-member .member-icon{flex:none;color:var(--brand)}
.footer-member:hover .member-icon{color:var(--brand-hover)}

.footer-legal{
  flex:1 1 100%;
  margin:0;padding-top:12px;
  border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--muted);
}

@media (max-width:720px){
  .ft-base{gap:14px 20px}
  .footer-member{white-space:normal}
}

/* ==========================================================================
   7  Rechtsseiten mit Verweis (Muster telefonansagen.com)
   ========================================================================== */

.legal-ref{max-width:var(--measure, 850px)}
.legal-ref > p{font-size:19px;line-height:1.55;color:var(--text)}
.legal-ref .legal-lead{
  color:var(--ink);font-size:21px;font-weight:700;letter-spacing:-.02em;
}
.legal-ref .btn{margin-top:28px}
.legal-box{
  margin-top:40px;padding:28px;
  background:#EEF3FF;border:1px solid #D4DFFB;border-radius:18px;
}
.legal-box h2{font-size:19px;margin:0 0 12px}
.legal-box p{font-size:16px;line-height:1.6;margin:0}
.legal-box p + p{margin-top:12px}
.legal-box dl{margin:0;font-size:16px;line-height:1.7}
.legal-box dt{font-weight:700;color:var(--ink);margin-top:14px}
.legal-box dt:first-child{margin-top:0}
.legal-box dd{margin:2px 0 0}