/* sprachagent.at — Stil der Produktseite des Sprachagenten von Confidelius.
   Schrift: Manrope, lokal mitgeliefert (SIL Open Font License 1.1, ../schrift/OFL-Manrope.txt).
   Farbwelt und Raster: entwurf/KONZEPT.md des Projekts. */

@font-face{font-family:'Manrope';src:url(../schrift/manrope.woff2) format('woff2');font-weight:400 800;font-display:swap}

:root{
  --grund:#FBF8F2;
  --flaechenton:#F1ECE0;
  --kopffarbe:#0B1530;
  --textfarbe:#0A1129;
  --mut:#4A5478;
  --band:#15224D;
  --bandtext:#FBF8F2;
  --akzent:#D87267;
  --akzent-tief:#C25A4F;
  --kickerfarbe:#C25A4F;
  --aufakzent:#0B1530;
  --verweis:#15224D;
  --linie:rgba(11,21,48,.15);
  --karte:#FFFFFF;
  --erfolg:#3E8E5B;
  --schatten:0 18px 40px -18px rgba(11,21,48,.28);
  /* Haekchen der eigenen Ankreuzfelder: Tiefmarine auf Koralle, in beiden Schemata */
  --haken-bild:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%230B1530' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#0E1530;
    --flaechenton:#131C3D;
    --kopffarbe:#F0F4FF;
    --textfarbe:#E8ECF4;
    --mut:#9AA5C4;
    --bandtext:#F0F4FF;
    --akzent:#E08276;
    --akzent-tief:#D87267;
    --kickerfarbe:#E08276;
    --verweis:#F0F4FF;
    --linie:rgba(240,244,255,.16);
    --karte:#18224A;
    --erfolg:#5BB07A;
    --schatten:0 18px 40px -18px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}
body{margin:0;background:var(--grund);color:var(--textfarbe);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--verweis)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{color:var(--kopffarbe);line-height:1.15;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(32px,6vw,52px)}
h2{font-size:clamp(26px,4vw,36px)}
h3{font-size:20px;font-weight:700}
h4{font-size:18px;font-weight:700}
p{margin:0 0 1em;max-width:72ch}
ul{max-width:72ch}

.inner{max-width:1100px;margin:0 auto;padding:0 24px}
.abschnitt{padding:clamp(56px,10vw,120px) 0}
.flaeche{background:var(--flaechenton)}

.kicker{color:var(--kickerfarbe);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.anm{color:var(--mut);font-size:14px}
.herkunft{color:var(--mut);font-size:14px;margin-top:28px}
.dudel{color:var(--mut);text-decoration:line-through;opacity:.85}
.lead{font-size:clamp(18px,2.2vw,20px)}
.zusage,.fazit{font-weight:700;color:var(--kopffarbe)}

/* Sprungverweis fuer Tastatur und Vorleser */
.sprung{position:absolute;left:-9999px;top:0;background:var(--akzent);color:var(--aufakzent);padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;z-index:10}
.sprung:focus{left:0}

/* Kopfzeile */
.kopf{background:var(--grund);border-bottom:1px solid var(--linie);padding:14px 0}
.kopf-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.marke{font-weight:800;font-size:20px;color:var(--kopffarbe);text-decoration:none;letter-spacing:.02em}

/* Knoepfe */
.btn{display:inline-block;padding:13px 22px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s,transform .15s}
.btn-haupt{background:var(--akzent);color:var(--aufakzent)}
.btn-haupt:hover{background:var(--akzent-tief);color:var(--aufakzent)}
.btn-geist{border-color:var(--akzent);color:var(--kopffarbe);background:transparent}
.btn-geist:hover{background:var(--akzent);color:var(--aufakzent)}
.btn-klein{padding:8px 16px}
.knopfzeile{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 12px;max-width:none}

/* Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;margin:28px 0}
.karte{background:var(--flaechenton);border:1px solid var(--linie);border-radius:14px;padding:22px}
.flaeche .karte{background:var(--grund)}
.karte p:last-child{margin-bottom:0}
a.karte{display:block;text-decoration:none;color:inherit}
a.karte:hover{transform:translateY(-2px);border-color:var(--akzent)}
.leitsatz{font-weight:700;color:var(--kopffarbe)}

/* Zweier-Gegenueberstellung */
.duo{display:grid;gap:20px;margin:28px 0}
@media (min-width:680px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Szene mit Zitat */
.szene{margin:28px 0;background:var(--flaechenton);border-left:4px solid var(--akzent);border-radius:14px;padding:22px}
.flaeche .szene{background:var(--grund)}
.szenetitel{color:var(--kickerfarbe);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
blockquote{margin:0;font-size:clamp(19px,2.5vw,23px);line-height:1.45;color:var(--kopffarbe);max-width:72ch}
figcaption{color:var(--mut);font-size:14px;margin-top:12px;max-width:72ch}

/* Ablauf-Schritte */
.schritte{list-style:none;margin:28px 0;padding:0;counter-reset:s}
.schritte li{counter-increment:s;position:relative;padding:2px 0 0 64px;margin-bottom:24px;max-width:72ch}
.schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--akzent);color:var(--aufakzent);font-weight:800;font-size:20px;display:grid;place-items:center}

/* Wahl-Mechanik: ohne JavaScript sind beide Wege sichtbar */
.wahlzeile{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 24px}
.wahl-btn{font:inherit;font-weight:700;padding:12px 18px;border-radius:999px;border:2px solid var(--akzent);background:transparent;color:var(--kopffarbe);cursor:pointer}
.wahl-btn[aria-expanded="true"]{background:var(--akzent);color:var(--aufakzent)}
.weg{background:var(--grund);border:1px solid var(--linie);border-radius:14px;padding:22px;margin-bottom:20px;max-width:72ch}
.weg ul{margin:0 0 1em;padding-left:22px}
html.js .weg{display:none}
html.js .weg.aktiv{display:block}

/* Fragen und Antworten */
details{border:1px solid var(--linie);border-radius:12px;background:var(--grund);margin-bottom:12px;max-width:none}
summary{cursor:pointer;padding:16px 44px 16px 20px;font-weight:700;color:var(--kopffarbe);list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:20px;top:14px;color:var(--kickerfarbe);font-size:22px;font-weight:700}
details[open] summary::after{content:'\2013'}
details p{padding:0 20px 16px;margin:0}

/* Dunkles Band: Abschluss und Fusszeile, in beiden Schemata gleich */
.band{background:var(--band);color:var(--bandtext)}
.band h2,.band h3,.band h4{color:var(--bandtext)}
.band .anm{color:rgba(240,244,255,.72)}
.band .karte{background:rgba(251,248,242,.06);border-color:rgba(251,248,242,.18)}
.band .btn-geist{color:var(--bandtext)}
.band a{color:var(--bandtext)}

.fuss{background:var(--band);color:var(--bandtext);padding:40px 0;border-top:1px solid rgba(251,248,242,.18)}
.fuss p{margin-bottom:.6em}
.fuss a{color:var(--bandtext)}
.fussnav{display:flex;gap:18px;flex-wrap:wrap;margin:6px 0 14px}
.fusshinweis{color:rgba(240,244,255,.72);font-size:14px}

/* Telefone hochkant (bis 479 px) */
@media (max-width:479.98px){
  .knopfzeile{display:block}
  .knopfzeile .btn{display:block;width:100%;text-align:center;margin:0 0 12px}
  .schritte li{padding-left:56px}
}

/* ---------- Neuaufbau mit Paketen und Bildern ---------- */

/* SVG-Farben, folgen Hell- und Dunkelmodus */
.f-band{fill:var(--band)}
.f-akzent{fill:var(--akzent)}
.f-grund{fill:var(--grund)}
.f-flaeche{fill:var(--flaechenton)}
.f-karte{fill:var(--karte)}
.f-mut{fill:var(--mut)}
.f-erfolg{fill:var(--erfolg)}
.s-linie{stroke:var(--linie);stroke-width:1.5}
.s-akzent{stroke:var(--akzent);stroke-width:3;stroke-linecap:round}
.c-aufakzent{color:var(--aufakzent)}
.c-bandtext{color:var(--bandtext)}
.c-weiss{color:#fff}
.t-titel{font:800 17px 'Manrope',sans-serif;fill:var(--kopffarbe)}
.t-text{font:600 15px 'Manrope',sans-serif;fill:var(--textfarbe)}
.t-klein{font:600 12px 'Manrope',sans-serif;fill:var(--mut);letter-spacing:.04em}
.t-band{font:700 15px 'Manrope',sans-serif;fill:var(--bandtext)}
.t-initial{font:800 18px 'Manrope',sans-serif;fill:var(--aufakzent)}
.t-marke{font:700 13px 'Manrope',sans-serif;fill:var(--aufakzent)}

/* Kopfzeile mit Navigation */
.kopf{position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.4) blur(8px);background:color-mix(in srgb,var(--grund) 88%,transparent)}
.marke{display:inline-flex;align-items:center;gap:10px}
.marke-zeichen{width:30px;height:30px}
.kopfnav{display:flex;align-items:center;gap:22px}
.kopfnav a:not(.btn){color:var(--kopffarbe);text-decoration:none;font-weight:600}
.kopfnav a:not(.btn):hover{color:var(--akzent-tief)}
.btn-symbol{width:20px;height:20px;vertical-align:-4px;margin-right:8px}
.btn-geist .btn-symbol{color:var(--akzent)}
.btn-geist:hover .btn-symbol{color:inherit}

/* Kopfbereich */
.held{padding-top:clamp(40px,7vw,88px)}
.held-raster{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.held-raster{grid-template-columns:1.05fr 1fr}}
.held-bild{margin:0}
@media (max-width:899.98px){.held-bild{max-width:560px;margin-inline:auto;width:100%}}
.held-bild svg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 30px rgba(11,21,48,.12))}
.welle{animation:klingeln 1.6s ease-in-out infinite}
.w2{animation-delay:.25s}
@keyframes klingeln{0%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.welle{animation:none;opacity:.8}}

.hakenliste{list-style:none;padding:0;margin:20px 0 4px}
.hakenliste li{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;font-weight:600}
.hakenliste svg,.paketliste svg{flex:none;width:22px;height:22px;color:var(--erfolg);margin-top:2px}

/* Symbolkreis */
.symbolkreis{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--akzent) 18%,transparent);color:var(--akzent-tief);display:grid;place-items:center;margin-bottom:14px}
.symbolkreis svg{width:26px;height:26px}
.symbol-mut{background:color-mix(in srgb,var(--mut) 16%,transparent);color:var(--mut)}

/* Vergleich */
.vergleich{padding:28px;box-shadow:var(--schatten)}
.vergleich-alt{opacity:.92}
.vergleich-alt h3{color:var(--mut)}
.vergleich-neu{border:2px solid var(--akzent)}

/* Hörprobe */
.demo-raster{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.demo-raster{grid-template-columns:1fr 1.1fr}}
.abspieler{display:flex;gap:20px;align-items:flex-start;background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:24px;box-shadow:var(--schatten)}
.abspielknopf{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:var(--akzent);color:var(--aufakzent);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 8px color-mix(in srgb,var(--akzent) 20%,transparent)}
.abspielknopf svg{width:28px;height:28px;margin-left:4px}
.abspielknopf:hover{background:var(--akzent-tief)}
.abspieler-text{flex:1;min-width:0}
.abspieler-titel{font-weight:700;color:var(--kopffarbe);margin-bottom:8px}
.wellenform{width:100%;height:44px;display:block;margin-bottom:12px}

/* Schritte */
.schrittraster{display:grid;gap:20px;margin-top:28px}
@media (min-width:900px){.schrittraster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.schritt{background:var(--grund);border:1px solid var(--linie);border-radius:16px;padding:24px;position:relative}
.schritt-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.schritt-nr{width:44px;height:44px;border-radius:50%;background:var(--akzent);color:var(--aufakzent);font-weight:800;font-size:20px;display:grid;place-items:center}
.schritt-kopf svg{width:34px;height:34px;color:var(--mut);opacity:.7}
.schritt p{margin:0}

/* Pakete */
.paketraster{display:grid;gap:24px;margin:32px 0 20px;align-items:stretch}
/* Eine Spalte bis 679 px, zwei ab 680 px (drittes Paket ueber volle Breite), drei ab 1000 px.
   Grundlage: eine Paketkarte braucht 300 px, damit Preis und Preiszusatz nicht zerfallen. */
@media (max-width:679.98px){
  .paket-band-leer{display:none}
  .paket:not(.paket-hervor){padding-top:24px}
}
@media (min-width:680px) and (max-width:999.98px){
  .paketraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paket-dunkel{grid-column:1 / -1;padding-top:26px}
  .paket-dunkel .paket-band-leer{display:none}
  .paket-dunkel .paketliste{columns:2;column-gap:32px}
  .paket-dunkel .paketliste li{break-inside:avoid}
  .paket-dunkel .paket-knopf{align-self:flex-start}
}
@media (min-width:1000px){.paketraster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.paket{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);border-radius:20px;padding:0 26px 26px;box-shadow:var(--schatten)}
.paket-band{margin:0 -26px 22px;padding:8px 26px;border-radius:20px 20px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--akzent);color:var(--aufakzent);max-width:none}
.paket-band-leer{background:transparent}
.paket-hervor{border:2px solid var(--akzent)}
.paket-kopf{display:flex;align-items:center;gap:14px}
.paket-kopf .symbolkreis{margin:0}
.paket-kopf h3{margin:0;font-size:24px}
.preis{margin:20px 0 2px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}
.preis-zahl{font-size:36px;font-weight:800;color:var(--kopffarbe);line-height:1}
.preis-einheit{color:var(--mut);font-weight:600}
.preis-zahl,.preis-einheit{white-space:nowrap}
.preis-zusatz{color:var(--mut);font-size:15px;margin-bottom:18px;text-wrap:pretty}
.paketliste{list-style:none;padding:18px 0 0;margin:0 0 24px;border-top:1px solid var(--linie);flex:1}
.paketliste li{display:flex;gap:10px;margin-bottom:10px}
.paket-knopf{text-align:center}
.paket-dunkel{background:var(--band);color:var(--bandtext);border-color:transparent}
.paket-dunkel h3,.paket-dunkel .preis-zahl{color:var(--bandtext)}
.paket-dunkel .preis-einheit,.paket-dunkel .preis-zusatz{color:rgba(240,244,255,.72)}
.paket-dunkel .paketliste{border-top-color:rgba(251,248,242,.18)}
.paket-dunkel .paketliste svg{color:var(--akzent)}
.paket-dunkel .symbolkreis{background:rgba(251,248,242,.1);color:var(--akzent)}

/* Versprechen */
.karten-drei{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.versprechen{background:var(--grund);padding:26px}

/* Fragen */
.schmal{max-width:820px}

/* Abschluss */
.abschluss{text-align:center}
.abschluss p{margin-left:auto;margin-right:auto}
.abschluss-bild{width:110px;height:110px;color:var(--bandtext);margin-bottom:12px}
.knopfzeile-mitte{justify-content:center}

@media (max-width:640px){
  .kopfnav a:not(.btn){display:none}
  .inner{padding:0 16px}
  .abspieler{flex-direction:column;align-items:center;text-align:center}
  .paket{padding:0 20px 22px}
  .paket-band{margin:0 -20px 20px;padding:8px 20px}
}

/* ===================================================================
   BESTELLFORMULAR — ergaenzt 23.10.2026
   Auftrag des Inhabers: "du musst schon noch das Bestellformular von
   confidelius fuer soforthotline komplett auf diese angebote umbauen
   und integrieren und das zu php machen".
   Benutzt ausschliesslich die Farbtoken der Seite, damit hell und
   dunkel ohne eigene Regeln mitgehen.
   =================================================================== */

.bestellung { max-width: 780px; margin: 0 auto; text-align: left; }

.b-schritt { border-top: 1px solid var(--linie); padding: 1.6rem 0 0; margin: 1.8rem 0 0; }
.b-schritt:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.b-schritt > h3 { font-size: 1.12rem; margin: 0 0 .25rem; }
.b-schritt > .b-hinweis { color: var(--mut); font-size: .92rem; margin: 0 0 1.1rem; }

/* Paketwahl */
.b-wahl { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.b-wahl label {
  display: block; position: relative; cursor: pointer;
  background: var(--karte); border: 2px solid var(--linie); border-radius: 14px;
  padding: 1rem 1.1rem; transition: border-color .15s, box-shadow .15s;
}
.b-wahl input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.b-wahl label:hover { border-color: var(--mut); }
.b-wahl input[type=radio]:checked + .b-wahlinhalt { color: inherit; }
.b-wahl label:has(input:checked) { border-color: var(--akzent); box-shadow: var(--schatten); }
/* Rueckfall ohne :has(): Rahmen und Wahlpunkt haengen am Geschwister des Knopfes.
   ::before legt sich ueber den Rahmen des Labels, ::after ist der sichtbare Wahlpunkt. */
.b-wahlinhalt::before { content: ''; position: absolute; inset: -2px; border: 2px solid transparent; border-radius: 14px; pointer-events: none; transition: border-color .15s; }
.b-wahlinhalt::after { content: ''; position: absolute; top: 1.05rem; right: 1.05rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--mut); background: var(--karte); }
.b-wahl input:checked + .b-wahlinhalt::before { border-color: var(--akzent); }
.b-wahl input:checked + .b-wahlinhalt::after { border: 6px solid var(--akzent); }
.b-wahlname { padding-right: 1.8rem; }
.b-wahl input[type=radio]:focus-visible + .b-wahlinhalt { outline: 3px solid var(--akzent); outline-offset: 4px; }
.b-wahlname { display: block; font-weight: 700; font-size: 1.05rem; }
.b-wahlpreis { display: block; color: var(--akzent-tief); font-weight: 700; margin: .2rem 0 .1rem; }
.b-wahlzusatz { display: block; color: var(--mut); font-size: .86rem; line-height: 1.45; }

/* Felder */
.b-reihe { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.b-feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.b-feld.b-weit { grid-column: 1 / -1; }
.b-feld label { font-size: .9rem; font-weight: 600; }
.b-feld .b-zusatz { color: var(--mut); font-size: .82rem; font-weight: 400; }
.b-feld input, .b-feld textarea, .b-feld select {
  font: inherit; color: var(--textfarbe); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .7rem; width: 100%;
}
.b-feld textarea { min-height: 7rem; resize: vertical; }
.b-feld input:focus-visible, .b-feld textarea:focus-visible, .b-feld select:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: 2px; border-color: var(--akzent);
}
.b-pflicht { color: var(--akzent-tief); }

/* Mehrfachauswahl und Einwilligungen */
.b-haken { display: grid; gap: .55rem; }
.b-haken label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .94rem; line-height: 1.5; }
.b-haken label > span { min-width: 0; }
/* Eigene Ankreuzfelder statt accent-color: das Haekchen ist in beiden Schemata
   Tiefmarine auf Koralle (Kontrast rund 6:1). */
.b-haken input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; cursor: pointer;
  width: 1.3rem; height: 1.3rem; margin: .1rem 0 0;
  border: 2px solid var(--mut); border-radius: 6px;
  background: var(--karte) center / 85% no-repeat;
  transition: background-color .15s, border-color .15s;
}
.b-haken label:hover input[type=checkbox]:not(:checked) { border-color: var(--kopffarbe); }
.b-haken input[type=checkbox]:checked { background-color: var(--akzent); border-color: var(--akzent); background-image: var(--haken-bild); }
.b-haken input[type=checkbox]:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
@media (forced-colors: active) { .b-haken input[type=checkbox] { -webkit-appearance: auto; appearance: auto; } }
.b-haken a { color: var(--verweis); }

/* Teile, die je Paket erscheinen */
.b-nur { display: none; }
.b-nur.b-an { display: block; }

/* Senden und Rückmeldung */
.b-senden { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.b-stand { font-size: .92rem; color: var(--mut); min-height: 1.4em; }
.b-stand.b-fehler { color: var(--akzent-tief); font-weight: 600; }
.b-stand.b-gut { color: var(--erfolg); font-weight: 600; }
.b-schutz { margin: 1.4rem 0 0; color: var(--mut); font-size: .85rem; line-height: 1.55; }
.b-fuss { margin: 1rem 0 0; color: var(--mut); font-size: .82rem; }

/* Auf dem Band steht das Formular auf heller Flaeche, damit Felder lesbar bleiben */
.band .bestellung {
  background: var(--grund); color: var(--textfarbe);
  border-radius: 20px; padding: 2rem 1.6rem; box-shadow: var(--schatten);
}
@media (max-width: 560px) {
  .band .bestellung { padding: 1.4rem 1rem; border-radius: 16px; }
}

/* ===================================================================
   BILDSCHIRMBREITEN — ergaenzt 23.10.2026, siehe UMBRUCHPUNKTE.md
   =================================================================== */

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
section[id],#kontakt{scroll-margin-top:84px}

@media (max-width:479.98px){
  .vergleich{padding:22px}
}

/* Grosse Bildschirme: die Spalte waechst bis 2560 px mit, danach nicht mehr */
@media (min-width:1920px){
  body{font-size:18px}
  .inner{max-width:1240px}
  .schmal{max-width:880px}
}
@media (min-width:2560px){
  body{font-size:19px}
  .inner{max-width:1360px}
  .schmal{max-width:940px}
  h1{font-size:60px}
  h2{font-size:42px}
}