/* 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{
  /* Erscheinungsbild "Tausendundeine Nacht" (2c, 06.11.2026): Sand und Gold bei Tag, tiefe Nacht und leuchtendes Gold im Dunkelmodus */
  --grund:#F7F0E2;
  --flaechenton:#EEE2CB;
  --kopffarbe:#1B1535;
  --textfarbe:#3D3356;
  --mut:#6E6484;
  --band:#120D26;
  --bandtext:#FFF3DA;
  --akzent:#E8A23A;
  --akzent-tief:#C98A2A;
  --kickerfarbe:#9A6A14;
  --aufakzent:#2A1A0E;
  --verweis:#1B1535;
  --linie:rgba(27,21,53,.14);
  --karte:#FFFBF3;
  --erfolg:#2E8C5A;
  --gold-hell:#FFE59A;
  --karmesin:#B8232D;
  --schatten:0 18px 40px -18px rgba(27,21,53,.28);
  --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='%232A1A0E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#120D26;
    --flaechenton:#1B1535;
    --kopffarbe:#FFF3DA;
    --textfarbe:#DDD3C2;
    --mut:#A79C8A;
    --bandtext:#FFF3DA;
    --akzent:#F2B84B;
    --akzent-tief:#E8A23A;
    --kickerfarbe:#F2B84B;
    --verweis:#FFF3DA;
    --linie:rgba(242,184,75,.22);
    --karte:#221A42;
    --erfolg:#5BB07A;
    --karmesin:#F0606A;
    --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}
}

/* ===================================================================
   INFO- UND WARENKORB-KNÖPFE, OVERLAYS, KASSE — ergänzt 06.11.2026
   (Anordnung des Inhabers: zwei Symbolknöpfe an jedem Angebot, Info-Fenster,
   mehrstufige Kasse mit Cookie; js/warenkorb.js)
   =================================================================== */

/* hidden gilt auch gegen .btn{display:inline-block} und .wk-kopf{display:inline-flex} (gemessen 06.11.2026:
   Knöpfe blieben trotz hidden sichtbar, weil die Klassenregel das Attribut überstimmt) */
.wk-fenster [hidden],.wk-kopf[hidden]{display:none!important}

/* Die zwei Symbolknöpfe */
.wk-icons{display:inline-flex;gap:6px;flex:none;margin-left:auto}
.wk-icons button{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;
  border:1.5px solid var(--linie);background:var(--karte);color:var(--kopffarbe);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s}
.wk-icons button svg{width:21px;height:21px}
.wk-icons button:hover{border-color:var(--akzent);color:var(--akzent-tief);transform:translateY(-1px)}
.wk-icons button:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.wk-icons .wk-korb.wk-drin{background:var(--akzent);border-color:var(--akzent);color:var(--aufakzent)}
.wk-icons-klein{margin-left:auto;align-self:center}
.wk-icons-klein button{width:32px;height:32px}
.wk-icons-klein button svg{width:17px;height:17px}
.paket-dunkel .wk-icons button{background:rgba(251,248,242,.08);border-color:rgba(251,248,242,.3);color:var(--bandtext)}
.paket-dunkel .wk-icons button:hover{border-color:var(--akzent);color:var(--akzent)}
.paket-dunkel .wk-icons .wk-korb.wk-drin{background:var(--akzent);border-color:var(--akzent);color:var(--aufakzent)}
.paketliste li:has(.wk-icons-klein){align-items:flex-start}
.paketliste li .wk-icons-klein{margin-top:-4px}

/* Kurzer Hinweis nach dem Klick auf den Warenkorb-Knopf */
.wk-icons{position:relative}
.wk-hinweis{position:absolute;right:0;top:calc(100% + 6px);white-space:nowrap;z-index:3;background:var(--kopffarbe);color:var(--grund);
  font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;box-shadow:var(--schatten);animation:wk-ein .2s ease-out}
.paket-dunkel .wk-hinweis{background:var(--akzent);color:var(--aufakzent)}
@keyframes wk-ein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wk-hinweis{animation:none}}

/* Warenkorb in der Kopfzeile */
.wk-kopf{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:2px solid var(--akzent);
  background:transparent;color:var(--kopffarbe);font:inherit;font-weight:700;cursor:pointer}
.wk-kopf svg{width:22px;height:22px}
.wk-kopf .wk-zahl{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--akzent);color:var(--aufakzent);font-size:13px}
.wk-kopf:hover{background:var(--akzent);color:var(--aufakzent)}
.wk-kopf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.wk-kopf-text{font-size:15px}
@media (max-width:640px){ .wk-kopf-text{display:none} .wk-kopf{padding:8px 10px} }

/* Die Fenster */
dialog.wk-fenster{border:0;border-radius:20px;padding:0;max-width:min(680px,calc(100vw - 32px));width:100%;
  background:var(--grund);color:var(--textfarbe);box-shadow:0 30px 80px -20px rgba(11,21,48,.5);
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
dialog.wk-fenster::backdrop{background:rgba(11,21,48,.55);backdrop-filter:blur(3px)}
dialog.wk-fenster[open]{display:flex;flex-direction:column}
.wk-kopfzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 0}
.wk-kopfzeile h2{font-size:24px;margin:0}
.wk-kopfzeile .kicker{margin:0 0 4px}
.wk-schliessen{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--linie);background:var(--karte);
  color:var(--kopffarbe);font-size:22px;line-height:1;cursor:pointer}
.wk-schliessen:hover{border-color:var(--akzent);color:var(--akzent-tief)}
.wk-inhalt{overflow:auto;padding:12px 24px 24px}
.wk-inhalt .b-reihe{margin-top:4px}
.wk-inhalt .b-feld textarea{min-height:5rem}
.wk-inhalt .b-haken{margin-top:14px}
.wk-stand{display:block;font-size:.92rem;color:var(--mut);min-height:1.4em;margin-top:10px}
.wk-stand.b-fehler{color:var(--akzent-tief);font-weight:600}
.wk-fenster .b-schutz{margin-top:1rem}
.wk-fenster .err{border-color:var(--akzent-tief)!important}
html.wk-offen{overflow:hidden}
@media (max-width:560px){
  dialog.wk-fenster{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
  .wk-kopfzeile{padding:16px 16px 0}
  .wk-inhalt{padding:10px 16px 16px}
}

/* Schrittanzeige der Kasse */
.wk-stufen{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:14px 0 18px;padding:0;counter-reset:stufe}
.wk-stufen li{counter-increment:stufe;font-size:13px;font-weight:600;color:var(--mut);padding-top:8px;border-top:3px solid var(--linie)}
.wk-stufen li::before{content:counter(stufe) " · ";color:var(--mut)}
.wk-stufen li.wk-aktiv{color:var(--kopffarbe);border-top-color:var(--akzent)}
.wk-stufen li.wk-erledigt{color:var(--erfolg);border-top-color:var(--erfolg)}
@media (max-width:480px){ .wk-stufen li{font-size:0} .wk-stufen li::before{font-size:13px;content:counter(stufe)} }
.wk-schritt{border:0;padding:0;margin:0;min-width:0}
.wk-schritt > legend{font-size:0;height:0}
.wk-schritt h3{font-size:1.12rem;margin:0 0 .25rem}
.wk-schritt .b-hinweis{color:var(--mut);font-size:.92rem;margin:0 0 1rem}

/* Artikelliste */
.wk-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wk-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--karte);
  border:1px solid var(--linie);border-radius:14px;padding:12px 14px}
.wk-liste strong{display:block}
.wk-preis{display:block;color:var(--mut);font-size:.88rem}
.wk-entfernen{flex:none;background:transparent;border:1.5px solid var(--linie);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:.85rem;color:var(--mut);cursor:pointer}
.wk-entfernen:hover{border-color:var(--akzent-tief);color:var(--akzent-tief)}
.wk-leer{background:var(--flaechenton);border-radius:14px;padding:16px;color:var(--mut)}
.wk-leer a{color:var(--verweis)}

/* Zusammenfassung */
.wk-pruefung{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px;font-size:.95rem}
.wk-pruefung dt{color:var(--mut);font-weight:600}
.wk-pruefung dd{margin:0}
.wk-aendern{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 14px;font-size:.88rem}
.wk-aendern button{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--verweis);text-decoration:underline;cursor:pointer}

/* Knopfzeile der Kasse */
.wk-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.wk-knoepfe .btn{cursor:pointer;font:inherit;font-weight:700}
.wk-knoepfe .wk-rechts{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}
.wk-knoepfe button:disabled{opacity:.5;cursor:default}
.wk-nur-anfrage{color:var(--mut);font-size:.85rem;margin:10px 0 0}

/* ---------- Ergaenzungen fuer das kiKonsulat (06.11.2026, Entwurf 1) ---------- */
/* Marke: Siegelring im Kopfzeichen */
.s-akzent-dick{stroke:var(--akzent);stroke-width:7}
/* Genie-Figur im Held */
.s-band{stroke:var(--band);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.funke{animation:funkeln 2.4s ease-in-out infinite;transform-origin:center}
.f2{animation-delay:.6s}
.f3{animation-delay:1.3s}
@keyframes funkeln{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.funke{animation:none;opacity:.8}}
/* Angebotskarten: vier nebeneinander ab 1000 px, Knopf unten */
.karten-vier{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.karte.angebot{display:flex;flex-direction:column}
.karte.angebot p{flex:1}
.karte.angebot .btn{align-self:flex-start;margin-top:8px}
/* Ablauf als Liste mit Nummernkreisen (Klasse .schritte aus der Vorlage) */
.schritte li strong{color:var(--kopffarbe)}
/* Rechtstexte als Bildreihe: je Breite eine Fassung (Werte wie confidelius.at) */
.recht h1{font-size:clamp(28px,4vw,40px);margin-bottom:28px}
.fassung{display:none;max-width:1280px;margin:0 auto}
.fassung img{display:block;width:100%;height:auto}
.f400{display:block}
@media (min-width:640px){.f400{display:none}.f800{display:block}}
@media (min-width:1024px){.f400{display:none}.f800{display:none}.f1280{display:block}}
/* Gegenueberstellung Bisher / Ab jetzt, je Thema ein Paar */
.wandel-paar{margin-top:32px}
.wandel-paar h3{margin-bottom:4px}
.wandel-paar .duo{margin:12px 0 0}

/* ===================================================================
   ERSCHEINUNGSBILD "TAUSENDUNDEINE NACHT" (2c) — 06.11.2026
   Serifen-Titel (Georgia, vom Geraet), goldene Pillen-Knoepfe, Kopfbild
   als Bilddatei je Schema (img/held-tag.svg / img/held-nacht.svg; durch
   PNG/WebP gleichen Namens ersetzbar, Markup bleibt).
   =================================================================== */
h1,h2{font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;font-weight:700;letter-spacing:0}
h1{font-size:clamp(34px,6vw,58px);line-height:1.06}
h2{font-size:clamp(28px,4vw,40px);line-height:1.1}
.marke{font-family:Georgia,'Iowan Old Style',serif;font-weight:700;font-size:24px;letter-spacing:.01em;gap:12px}
.marke-zeichen{width:36px;height:36px}
.marke-text{display:flex;flex-direction:column;line-height:1}
.marke-unter{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-top:3px;line-height:1}
.kicker,.szenetitel{color:var(--kickerfarbe)}
.btn,.wahl-btn,.wk-kopf{border-radius:999px}
.btn-haupt{background:linear-gradient(135deg,var(--gold-hell),var(--akzent));color:#2A1A0E;border-color:transparent;box-shadow:0 10px 26px -10px var(--akzent)}
.btn-haupt:hover{background:linear-gradient(135deg,#FFF0B0,var(--akzent-tief));color:#2A1A0E;transform:translateY(-1px)}
.btn-geist{border-width:1.5px}
.karte,.weg,.szene,.schritt,.paket,.abspieler,.bestellung{border-radius:22px}
details{border-radius:16px}
.symbolkreis{background:transparent;box-shadow:inset 0 0 0 2px var(--akzent);color:var(--akzent-tief)}
@media (prefers-color-scheme:dark){.symbolkreis{color:var(--akzent)}}
.symbol-mut{box-shadow:inset 0 0 0 2px var(--mut);color:var(--mut)}
.schritte li::before,.schritt-nr{background:linear-gradient(135deg,var(--gold-hell),var(--akzent));color:#2A1A0E;font-family:Georgia,serif}
.vergleich-neu{border-color:var(--akzent)}
.held-bild{border-radius:24px;overflow:hidden;box-shadow:var(--schatten)}
.held-bild img{display:block;width:100%;height:auto}
.band .kicker{color:var(--akzent)}
.band .btn-geist{border-color:var(--akzent)}
.wk-icons .wk-korb.wk-drin{color:#2A1A0E}
.wk-kopf .wk-zahl{color:#2A1A0E}
.b-pflicht,.b-stand.b-fehler,.wk-stand.b-fehler{color:var(--karmesin)}
/* Knoepfe oben: nebeneinander, solange Platz ist */
.knopfzeile .btn{white-space:nowrap}
/* Karten-Kopfreihe: Info-Knopf bleibt rechts neben der Ueberschrift */
.karte .wk-kopfreihe{flex-wrap:nowrap;align-items:flex-start}
.karte .wk-kopfreihe h3{flex:1 1 auto;min-width:0}
.karte .wk-kopfreihe .wk-icons{flex:none}

/* Markenname nie in Versalien: Inhaber 06.11.2026, woertlich: "ki immer und überall klein , Konsulat bzw Genie erster
   Buchstabe größer". Kicker und Marken-Unterzeile setzen sonst text-transform:uppercase. */
.markenname{text-transform:none}