/* MarkiMedia — Seitengestaltung
   ------------------------------------------------------------------
   Hell gehalten (seit 08.09.2026). Vorher war die Seite dunkel, weil im
   Original-Logo das Wort "Marki" weiss ist und auf hellem Grund
   verschwaende. Dafuer gibt es jetzt `markimedia-logo-dunkel.png` —
   dieselbe Datei mit eingefaerbtem Schriftzug, gebaut von
   werkzeug\bilder-holen.mjs. Das dunkle Logo NUR auf hellem Grund
   verwenden und umgekehrt.

   Die Farben stammen aus dem Verlauf des Logos. Cyan ist darin die
   hellste Farbe und taugt auf Weiss nicht fuer Text — dafuer gibt es
   --akzent.                                                          */

:root {
  --violett: #7b1ff0;
  --blau:    #2563eb;
  --cyan:    #22d3ee;
  --akzent:  #1d4ed8;   /* Links und Hinweise auf hellem Grund */

  --grund:     #ffffff;
  --flaeche:   #f4f7fc;
  --karte:     #ffffff;
  --rand:      #dde4f0;
  --randstark: #b6c3dc;
  --text:      #0b1220;
  --leise:     #465066;
  --tint:      11, 18, 32;   /* fuer zarte Fuellungen: rgba(var(--tint), .04) */

  /* Drei Verlaeufe statt einem. Cyan ist auf Weiss zu hell:
     als Schrift blass, als Knopfgrund mit weisser Schrift unlesbar.
     Deshalb gibt es ihn nur noch als Zierde. */
  --verlauf:       linear-gradient(100deg, var(--violett), var(--blau) 55%, var(--cyan));
  --verlauf-text:  linear-gradient(100deg, #6d28d9, #1d4ed8 85%);
  --verlauf-knopf: linear-gradient(100deg, #6d28d9, #1d4ed8);
  --rundung: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.innen { width: min(1120px, 100%); margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }
.innen.schmal { max-width: 720px; text-align: center; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 14px; }
h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.klein { font-size: 13px; color: var(--leise); }
.mitte { text-align: center; }

/* ═══════════ Kopf ═══════════ */

#kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px min(4vw, 40px);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
#kopf .marke img { height: 34px; width: auto; }

#menue { display: flex; gap: 26px; }
.menuepunkt { position: relative; }
#menue a {
  display: inline-block;
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
#menue a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }

/* ═══════════ Klapp-Übersicht im Menü ═══════════

   Beim Überfahren eines Reiters erscheinen die Produkte des Bereichs.
   Der unsichtbare Streifen darüber (::before) überbrückt die Lücke
   zwischen Reiter und Kasten — sonst klappt die Übersicht zu, sobald
   die Maus den Zwischenraum kreuzt. */

.klappe {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content; max-width: min(620px, 88vw);
  padding: 18px; border-radius: 16px;
  background: var(--grund); border: 1px solid var(--rand);
  box-shadow: 0 20px 50px rgba(var(--tint), .16);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 60;
}
.klappe::before {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.menuepunkt:hover .klappe,
.menuepunkt:focus-within .klappe {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.menuepunkt.zu .klappe { opacity: 0 !important; visibility: hidden !important; }

.klappe-kopf { margin-bottom: 12px; }
.klappe-kopf strong { display: block; font-size: 15px; }

.klappe-liste {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.klappe-produkt {
  display: flex; gap: 12px; align-items: center; text-align: left;
  padding: 10px; border: 1px solid transparent; border-radius: 12px;
  background: none; cursor: pointer; font: inherit; color: inherit;
  transition: background .15s, border-color .15s;
}
.klappe-produkt:hover, .klappe-produkt:focus-visible {
  background: var(--flaeche); border-color: var(--rand); outline: none;
}
.klappe-produkt img {
  width: 42px; height: 42px; flex: none; object-fit: contain;
  border-radius: 10px; background: rgba(var(--tint), .045); padding: 5px;
}
.klappe-produkt strong { display: block; font-size: 15px; }
.klappe-produkt em {
  display: block; font-style: normal; font-size: 13px; color: var(--leise);
  line-height: 1.4;
}
.klappe-alle {
  display: inline-block; margin-top: 12px;
  font-size: 14px; color: var(--akzent) !important; font-weight: 600;
  border-bottom: 0 !important;
}

#menueKnopf {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; gap: 5px; flex-direction: column;
}
#menueKnopf span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .2s, opacity .2s;
}

/* ═══════════ Aufmacher ═══════════ */

#oben { position: relative; padding: clamp(70px, 12vw, 140px) 0 clamp(60px, 9vw, 110px); overflow: hidden; }

/* Farbschimmer im Hintergrund - nimmt den Logo-Verlauf auf, ohne
   den Text zu stoeren. */
#oben .schein {
  position: absolute; inset: -30% 0 auto 50%;
  width: min(1100px, 120vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 40%, rgba(123, 31, 240, .16), transparent 55%),
              radial-gradient(circle at 68% 55%, rgba(34, 211, 238, .16), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
}
#oben .innen { position: relative; }

.augenmerk {
  display: inline-block; margin: 0 0 18px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--rand); background: rgba(var(--tint), .035);
  font-size: 13px; color: var(--leise); letter-spacing: .04em;
}

#claim {
  font-size: clamp(38px, 7vw, 74px);
  letter-spacing: -0.035em; font-weight: 700;
  max-width: 16ch;
  background: var(--verlauf-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lead {
  max-width: 60ch; margin: 0 0 32px;
  font-size: clamp(16px, 1.6vw, 19px); color: var(--leise);
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 24px; border-radius: 12px;
  border: 1px solid var(--randstark); background: var(--grund);
  color: var(--text); text-decoration: none; font-size: 15px;
  font-weight: 600; cursor: pointer;
  transition: transform .15s, border-color .18s, background .18s;
}
.knopf:hover { transform: translateY(-2px); border-color: var(--randstark); background: rgba(var(--tint), .07); }
.knopf.haupt { background: var(--verlauf-knopf); border-color: transparent; color: #fff; }
.knopf.haupt:hover { filter: brightness(1.1); }
.knopf:disabled, .knopf.aus {
  opacity: .45; cursor: not-allowed; transform: none;
}

.zahlen {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px);
  list-style: none; margin: 46px 0 0; padding: 0;
}
.zahlen b {
  display: block; font-size: 30px; font-weight: 700;
  background: var(--verlauf-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zahlen span { font-size: 13px; color: var(--leise); }

/* ═══════════ Abschnitte ═══════════ */

section { padding: clamp(60px, 8vw, 100px) 0; }
#produkte { background: var(--flaeche); border-block: 1px solid var(--rand); }

.abschnittstext { color: var(--leise); max-width: 62ch; margin: 0 0 34px; }
.innen.schmal .abschnittstext { margin-inline: auto; }
/* .mitte zentriert nur den Text INNERHALB des Absatzes. Der Absatz
   selbst ist auf 62 Zeichen begrenzt und hing dadurch an der linken
   Kante — der Text sass mittig in einem Block, der selbst nicht mittig
   war. Wo .mitte steht, gehoert auch der Block in die Mitte. */
.abschnittstext.mitte { margin-inline: auto; }

/* ═══════════ Filter ═══════════ */

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter button {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--randstark); background: var(--grund);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.filter button:hover { color: var(--text); border-color: var(--randstark); }
.filter button.aktiv {
  color: #fff; border-color: transparent; background: var(--verlauf-knopf);
}

/* ═══════════ Programmkarten ═══════════ */

.raster {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.karte {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: var(--rundung);
  background: var(--karte); border: 1px solid var(--rand);
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.karte:hover {
  transform: translateY(-4px); border-color: var(--randstark);
  box-shadow: 0 14px 30px rgba(var(--tint), .10);
}
.karte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.karte .bild {
  width: 62px; height: 62px; border-radius: 14px;
  background: rgba(var(--tint), .045);
  display: grid; place-items: center; padding: 7px;
}
.karte .bild img { width: 100%; height: 100%; object-fit: contain; }

.karte h3 { margin: 0; font-size: 19px; }
.karte .kurz { margin: 0; color: var(--leise); font-size: 14px; flex: 1; }

.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marke-chip {
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--rand); color: var(--leise);
}
.marke-chip.fertig { color: #047857; border-color: rgba(4, 120, 87, .32); background: rgba(4, 120, 87, .06); }
.marke-chip.arbeit { color: #b45309; border-color: rgba(180, 83, 9, .32); background: rgba(180, 83, 9, .06); }
.marke-chip.privat { color: #64748b; }

.kartenfuss {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding-top: 10px; margin-top: auto;
  border-top: 1px solid var(--rand);
}
/* Knöpfe untereinander über die volle Breite — wie bei den grossen
   Software-Seiten. Kauf oben, Testen darunter. */
.kartenknoepfe { display: flex; flex-direction: column; gap: 8px; }
.kartenknoepfe .knopf { width: 100%; }
.preis { font-weight: 700; font-size: 17px; white-space: nowrap; }
.karte .infos {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--akzent); font: inherit; font-size: 14px; font-weight: 600;
}
.karte .infos:hover { text-decoration: underline; }
.marke-chip.preis { font-weight: 600; font-size: 12px; color: var(--akzent); border-color: rgba(29, 78, 216, .32); background: rgba(29, 78, 216, .05); }
.knopf.klein { padding: 8px 14px; font-size: 14px; border-radius: 10px; }

/* ═══════════ Schmale Leiste ganz oben ═══════════ */

#oberleiste {
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
  font-size: 13px; color: var(--leise);
}
.oberleiste-innen {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; width: min(1180px, 92vw);
}
.oberleiste-rechts { display: flex; gap: 18px; align-items: center; }
.kontomail { color: var(--text); }
.alslink {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--leise); font: inherit; font-size: 13px;
}
.alslink:hover { color: var(--text); }
.alslink.stark { color: var(--akzent); font-weight: 600; }

/* ═══════════ Kundenkonto ═══════════ */

#kontoSchleier {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: rgba(var(--tint), .42); backdrop-filter: blur(6px);
}
#kontoSchleier[hidden] { display: none; }
#kontoFenster {
  position: relative; width: min(420px, 100%);
  padding: 32px; border-radius: 20px;
  background: var(--karte); border: 1px solid var(--rand);
  box-shadow: 0 24px 60px rgba(var(--tint), .22);
}
#kontoFenster h3 { margin: 0 0 6px; font-size: 22px; }
#kontoZu {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--rand); background: transparent;
  color: var(--leise); font-size: 20px; line-height: 1; cursor: pointer;
}
.kontoreiter { display: flex; gap: 6px; margin: 18px 0 20px; }
.kontoreiter button {
  flex: 1; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--rand); background: transparent;
  color: var(--leise); font: inherit; font-size: 14px;
}
.kontoreiter button.aktiv { color: #fff; border-color: transparent; background: var(--verlauf-knopf); }
#kontoFormular label {
  display: block; margin-bottom: 6px; font-size: 13px; color: var(--leise);
}
#kontoFormular input {
  width: 100%; margin-bottom: 16px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--rand);
  background: var(--grund); color: var(--text); font: inherit;
}
#kontoFormular input:focus { outline: none; border-color: var(--blau); }
#kontoFormular button[type=submit] { width: 100%; margin-top: 6px; }
#kontoRegel { margin: -10px 0 14px; }
.kontofehler {
  margin: 0 0 12px; padding: 10px 13px; border-radius: 10px; font-size: 14px;
  border: 1px solid rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .07); color: #b91c1c;
}

/* ═══════════ Vorgestelltes Produkt ═══════════ */

#vorgestellt { padding: clamp(34px, 5vw, 56px) 0; }
.vorgestellt-karte {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.15fr);
  padding: clamp(24px, 3.5vw, 40px); border-radius: var(--rundung);
  background: var(--karte); border: 1px solid var(--rand);
  position: relative; overflow: hidden;
}
.vorgestellt-karte::before {
  content: ''; position: absolute; inset: -40% 55% 40% -20%;
  background: radial-gradient(circle, rgba(123, 31, 240, .10), transparent 68%);
  pointer-events: none;
}
.vorgestellt-text { position: relative; }
.vorgestellt-text h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; }
.vorgestellt-text > p { color: var(--leise); margin: 0 0 16px; font-size: 17px; }
.etikett {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px;
  border-radius: 999px; background: var(--verlauf-knopf); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.vorgestellt-bild img {
  width: 100%; border-radius: 14px; border: 1px solid var(--rand);
  box-shadow: 0 18px 40px rgba(var(--tint), .16);
}
.modellzeile { margin: 12px 0 0; }
ul.merkmale { margin: 0 0 20px; padding-left: 20px; color: var(--leise); }
ul.merkmale li { margin-bottom: 6px; }

/* ═══════════ Bereiche ═══════════ */

.bereich + .bereich { margin-top: clamp(38px, 5vw, 60px); }
.bereichkopf { margin-bottom: 18px; }
.bereichkopf h3 {
  font-size: 22px; margin: 0 0 4px;
  display: flex; align-items: center; gap: 12px;
}
.bereichkopf h3::after {
  content: ''; flex: 1; height: 1px; background: var(--rand);
}
.bereichkopf p { margin: 0; }

/* ═══════════ Serviceleiste ═══════════ */

#service { padding: clamp(40px, 5vw, 64px) 0; }
.serviceleiste {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.servicepunkt { display: flex; gap: 14px; align-items: flex-start; }
.servicepunkt .zeichen {
  font-size: 22px; line-height: 1.2;
  background: var(--verlauf-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.servicepunkt h4 { margin: 0 0 4px; font-size: 16px; }
.servicepunkt p { margin: 0; }

/* ═══════════ Warum ═══════════ */

.saeulen {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.saeulen article {
  padding: 28px; border-radius: var(--rundung);
  border: 1px solid var(--rand); background: var(--karte);
}
.saeulen .zeichen {
  font-size: 26px; margin-bottom: 10px;
  background: var(--verlauf-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.saeulen h3 { font-size: 18px; }
.saeulen p { margin: 0; color: var(--leise); font-size: 15px; }

/* ═══════════ Kontakt ═══════════ */

#kontakt { background: var(--flaeche); border-block: 1px solid var(--rand); }
.mailzeile { font-size: 18px; }
.mailzeile span {
  background: var(--verlauf-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
}

/* ═══════════ Fuß ═══════════ */

footer { padding: 56px 0 0; background: var(--grund); border-top: 1px solid var(--rand); }
.fussinhalt {
  display: grid; gap: 34px; padding-bottom: 40px;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.fusslogo { height: 28px; width: auto; margin-bottom: 12px; }
.fussspalte { min-width: 150px; }
.fussspalte.breit { grid-column: span 2; min-width: 220px; }

.fussleiste {
  border-top: 1px solid var(--rand); background: #eaeff8;
  padding: 16px 0;
}
.fussleiste-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fussleiste a { color: var(--leise); text-decoration: none; font-size: 14px; }
.fussleiste a:hover { color: var(--text); }
.nachoben {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--rand); font-size: 17px;
}
.nachoben:hover { border-color: var(--randstark); }

.zahlungsarten { display: flex; flex-wrap: wrap; gap: 7px; }
.zahlart {
  padding: 5px 11px; border-radius: 7px; font-size: 12px;
  border: 1px solid var(--rand); color: var(--leise);
  background: rgba(var(--tint), .035);
}
.fussspalte h4 { font-size: 14px; margin-bottom: 8px; }
#impressum { white-space: pre-line; margin: 0; }
.fussliste { list-style: none; margin: 0; padding: 0; }
.fussliste li { margin-bottom: 6px; }
.fussliste a {
  color: var(--leise); text-decoration: none; font-size: 13px;
}
.fussliste a:hover { color: var(--akzent); }
footer .mitte { margin-top: 22px; }

/* ═══════════ Fenster für Einzelheiten ═══════════ */

#schleier {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: rgba(var(--tint), .42); backdrop-filter: blur(6px);
}
#schleier[hidden] { display: none; }

#fenster {
  position: relative; width: min(680px, 100%);
  max-height: 86vh; overflow-y: auto;
  padding: 34px; border-radius: 22px;
  background: var(--karte); border: 1px solid var(--rand);
  box-shadow: 0 24px 60px rgba(var(--tint), .22);
}
#fensterZu {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--rand); background: transparent;
  color: var(--leise); font-size: 22px; line-height: 1; cursor: pointer;
}
#fensterZu:hover { color: var(--text); border-color: var(--randstark); }

#fenster .kopfzeile { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
#fenster .bild {
  width: 66px; height: 66px; flex: none; padding: 8px;
  border-radius: 16px; background: rgba(var(--tint), .045);
}
#fenster h3 { margin: 0; font-size: 24px; }
#fenster ul { margin: 18px 0; padding-left: 20px; color: var(--leise); }
#fenster li { margin-bottom: 7px; }

#fenster { width: min(860px, 100%); }
#fenster .lead-text { font-size: 17px; line-height: 1.6; margin: 0 0 18px; }
#fenster ul.merkmale { margin: 12px 0 0; }

.galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin: 24px 0 8px;
}
.galerie .foto {
  margin: 0; cursor: zoom-in; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--rand); background: rgba(var(--tint), .035);
  transition: border-color .15s, transform .15s;
}
.galerie .foto:hover, .galerie .foto:focus-visible { border-color: var(--randstark); transform: translateY(-2px); outline: none; }
.galerie .foto img { display: block; width: 100%; aspect-ratio: 14 / 9; object-fit: cover; object-position: top; }
.galerie figcaption { padding: 9px 12px; font-size: 13px; color: var(--leise); line-height: 1.4; }

#fenster .abschnitt { margin-top: 22px; padding: 0; }   /* nicht die Abstände der Seitenabschnitte erben */
#fenster .abschnitt h4 { margin: 0 0 6px; font-size: 16px; }
#fenster .abschnitt p { margin: 0; color: var(--leise); line-height: 1.6; }
#fenster ol.schritte { margin: 8px 0 0; padding-left: 22px; color: var(--leise); }
#fenster ol.schritte li { margin-bottom: 7px; }
.frage { border-top: 1px solid var(--rand); padding: 10px 0; }
.frage:last-child { border-bottom: 1px solid var(--rand); }
.frage summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; }
.frage summary::before { content: '+'; color: var(--leise); width: 14px; }
.frage[open] summary::before { content: '–'; }
.frage p { margin: 8px 0 0 24px !important; }

/* Die Grossansicht bleibt dunkel: Bildschirmfotos wirken vor dunklem
   Grund ruhiger, und die Seite dahinter soll verschwinden. Deshalb hier
   eigene helle Farben statt der Seiten-Token. */
#gross {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(8, 11, 20, .93); padding: 20px;
}
#gross[hidden] { display: none; }
#gross figure { margin: 0; max-width: 92vw; text-align: center; }
#gross img { max-width: 92vw; max-height: 82vh; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); }
#gross figcaption { color: #b9c2d6; margin-top: 12px; font-size: 14px; }
.gross-zu, .gross-pfeil {
  position: absolute; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10); color: #f2f5fb;
  cursor: pointer; border-radius: 12px; font-size: 26px; line-height: 1;
}
.gross-zu:hover, .gross-pfeil:hover { background: rgba(255, 255, 255, .18); }
.gross-zu { top: 18px; right: 20px; width: 42px; height: 42px; }
.gross-pfeil { top: 50%; transform: translateY(-50%); width: 46px; height: 64px; font-size: 34px; }
.gross-pfeil.links { left: 16px; }
.gross-pfeil.rechts { right: 16px; }
.gross-pfeil[hidden] { display: none; }

.warnbox {
  margin: 18px 0 0; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(217, 119, 6, .38);
  background: rgba(251, 191, 36, .10);
  color: #92400e; font-size: 14px;
}

/* ═══════════ Handy ═══════════ */

@media (max-width: 780px) {
  #menue {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px 5vw 18px;
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 18px 40px rgba(var(--tint), .12);
    max-height: 80vh; overflow-y: auto;
    display: none;
  }
  #menue.offen { display: flex; }
  #menue a { padding: 12px 0; border-bottom: 1px solid var(--rand); }

  /* Am Handy gibt es kein Ueberfahren. Die Uebersicht steht deshalb
     offen unter ihrem Reiter, eingerueckt und ohne Kasten. */
  .klappe {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; width: auto; max-width: none;
    padding: 4px 0 10px; border: 0; box-shadow: none; background: none;
  }
  .klappe-kopf { display: none; }
  .klappe-liste { grid-template-columns: 1fr; }
  .klappe-produkt { padding: 8px 0; }
  /* Mit `#menue` davor, sonst gewinnt die Regel `#menue a` weiter oben:
     eine Kennung schlaegt jede Klasse, egal wer weiter unten steht. */
  #menue .klappe-alle { display: none; }
  #menueKnopf { display: flex; }
  #kopf { position: relative; }
  #kopf .marke img { height: 28px; }

  .zahlen { gap: 28px; }
  .fussinhalt { flex-direction: column; gap: 24px; }
  #fenster { padding: 26px 20px; }
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ═══════════ Seiten ═══════════
   Jede Adresse hat ihren eigenen Kasten; sichtbar ist immer nur einer.
   Siehe zeigeWeg() in app.js. */

.seite[hidden] { display: none; }
.schmalseite { max-width: 860px; }
.seite h1 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -0.02em; }

.meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 300; max-width: min(560px, 92vw);
  padding: 13px 20px; border-radius: 12px;
  background: var(--text); color: #fff; font-size: 15px;
  box-shadow: 0 16px 40px rgba(var(--tint), .28);
}
.meldung.fehler { background: #b91c1c; }
.meldung[hidden] { display: none; }

/* ═══════════ Produktseite ═══════════ */

.brotkrumen { padding: 22px 0 0; font-size: 13px; color: var(--leise); }
.brotkrumen a { color: var(--leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); }

.produktkopf { padding: 28px 0 40px; }
.produktkopf-innen {
  display: grid; gap: clamp(26px, 4vw, 52px); align-items: center;
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 1fr);
}
.produktkopf-bild img {
  width: 100%; border-radius: 16px; border: 1px solid var(--rand);
  box-shadow: 0 20px 44px rgba(var(--tint), .14);
}
.produktmarke { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.produktmarke img {
  width: 54px; height: 54px; flex: none; object-fit: contain;
  border-radius: 13px; background: rgba(var(--tint), .045); padding: 6px;
}
.produktmarke h1 { margin: 0; }
.produktkopf-text .lead { margin-bottom: 14px; }
.produktpreis { font-size: 26px; font-weight: 700; margin: 16px 0 14px; }
.zusatzreihe { margin-top: 10px; }

.sprungleiste {
  position: sticky; top: 62px; z-index: 40;
  background: var(--flaeche); border-block: 1px solid var(--rand);
}
.sprungleiste .innen { display: flex; gap: 26px; flex-wrap: wrap; padding-block: 13px; }
.sprungleiste a {
  color: var(--leise); text-decoration: none; font-size: 14px; font-weight: 600;
}
.sprungleiste a:hover { color: var(--akzent); }

.produktinhalt { padding: clamp(34px, 5vw, 60px) 0 20px; }
.produkttext { font-size: 18px; line-height: 1.7; max-width: 70ch; }
ul.merkmale { margin: 0 0 20px; padding-left: 20px; color: var(--leise); }
ul.merkmale li { margin-bottom: 6px; }
ul.merkmale.gross { font-size: 16px; margin-top: 22px; }

.produktblock { padding: clamp(30px, 4vw, 50px) 0 0; }
.produktblock h2 { font-size: clamp(24px, 3vw, 32px); }
.funktionen {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.funktionen article {
  padding: 24px; border-radius: var(--rundung);
  border: 1px solid var(--rand); background: var(--karte);
}
.funktionen h3 { font-size: 18px; margin-bottom: 8px; }
.funktionen p { margin: 0; color: var(--leise); }
.produktblock.abschluss { padding-top: 40px; }

.auchdas { background: var(--flaeche); border-top: 1px solid var(--rand); margin-top: 50px; }

/* ═══════════ Warenkorb, Kasse, Konto ═══════════ */

#seiteWarenkorb, #seiteKasse, #seiteKonto { padding: 40px 0 70px; }

.korbtabelle { width: 100%; border-collapse: collapse; margin: 20px 0 10px; }
.korbtabelle td { padding: 14px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.korbtabelle tfoot td { border-bottom: 0; border-top: 2px solid var(--rand); }
.korbtabelle a { color: var(--text); text-decoration: none; font-weight: 600; }
.korbtabelle a:hover { color: var(--akzent); }
.korbtabelle .klein { display: block; }
.korbpreis { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.korbbild { width: 62px; }
.korbbild img {
  width: 46px; height: 46px; object-fit: contain;
  border-radius: 11px; background: rgba(var(--tint), .045); padding: 5px;
}

.kasseblock { padding: 30px 0 0; }
.kasseblock h2 { font-size: 22px; }
.formraster {
  display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.formraster label { display: block; font-size: 13px; color: var(--leise); }
.formraster .weit { grid-column: 1 / -1; }
.formraster input[type=text], .formraster input:not([type]), .formraster input[type=email] {
  width: 100%; margin-top: 6px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--randstark);
  background: var(--grund); color: var(--text); font: inherit;
}
.formraster input:focus { outline: none; border-color: var(--akzent); }
.haken { display: flex; align-items: flex-start; gap: 10px; }
.haken input { margin-top: 3px; }

.hinweiskasten {
  padding: 16px 18px; border-radius: 14px; margin: 20px 0;
  border: 1px solid var(--rand); background: var(--flaeche);
}
.hinweiskasten.warnung {
  border-color: rgba(217, 119, 6, .38); background: rgba(251, 191, 36, .10);
}
.hinweiskasten p { margin: 4px 0 12px; }

.korbzahl {
  display: inline-block; min-width: 19px; margin-left: 6px; padding: 0 6px;
  border-radius: 10px; background: var(--akzent); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center;
}
.korbzahl[hidden] { display: none; }

/* ═══════════ Newsletter in der Fußzeile ═══════════ */

.newsletterform { margin-top: 20px; max-width: 340px; }
.newsletterform label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.newsletterzeile { display: flex; gap: 8px; margin-top: 10px; }
.newsletterzeile input {
  flex: 1; min-width: 0; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--randstark);
  background: var(--grund); color: var(--text); font: inherit; font-size: 14px;
}
.newsletterzeile input:focus { outline: none; border-color: var(--akzent); }
.zahlart.aus { opacity: .5; }

/* ═══════════ Karten: Link statt Klickflaeche ═══════════ */

.kartenlink { text-decoration: none; color: inherit; display: block; }
.kartenlink h3 { margin: 14px 0 0; }
.kartenlink .kurz { margin-top: 6px; }
.karte { cursor: default; }
.karte .infos { text-decoration: none; }

@media (max-width: 780px) {
  .produktkopf-innen { grid-template-columns: 1fr; }
  .sprungleiste { position: static; }
  .sprungleiste .innen { gap: 16px; }
  .korbtabelle td { padding: 10px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Stand 09.09.2026 — der große Feinschliff.

   Was hier steht, kommt bewusst ANS ENDE der Datei: Bei gleicher
   Gewichtung gewinnt die spätere Regel, also überschreibt dieser Block
   ältere Festlegungen, ohne dass oben etwas gelöscht werden muss.

   Neu dazugekommen sind:
     · ein gemeinsamer Einzug für Oberleiste, Kopf, Inhalt und Fuß
     · gezeichnete Symbole statt einzelner Schriftzeichen
     · die Flaggenwahl
     · der Kopf bleibt beim Scrollen oben, samt Warenkorb
     · ein weicher Übergang beim Seitenwechsel
     · Bilder zum Durchblättern (Pfeile, Punkte, Finger, Maus)
     · Text und Bild im Wechsel statt Absatz an Absatz
     · zweispaltige Fragen zum Aufklappen
   ═══════════════════════════════════════════════════════════════════ */

/* ── Mehr Kontrast ──────────────────────────────────────────────────
   Auf dem weißen Grund wirkten die grauen Texte ausgewaschen. Die
   Zweitfarbe wird dunkler, die Ränder deutlicher. */
:root {
  /* Der Abstand zum Fensterrand — an EINER Stelle, damit Oberleiste,
     Kopf, Inhalt, Karussell und Fuss nie auseinanderlaufen. */
  --einzug: clamp(20px, 4.5vw, 52px);

  --leise:     #3c465c;
  --rand:      #d5dde9;
  --randstark: #9aa9c4;
  --akzent:    #1741c9;
}

/* ── Einzug ─────────────────────────────────────────────────────────
   Ein einziger Wert für die ganze Seite. Damit liegt das Logo genau
   über dem ersten Buchstaben des Inhalts und das Menü genau über der
   rechten Kante. */
.innen {
  width: 100%;
  max-width: calc(1100px + 2 * var(--einzug));
  margin: 0 auto;
  padding-inline: var(--einzug);
}
.innen.schmal { max-width: 780px; text-align: center; }
.innen.schmalseite { max-width: 900px; }

/* ── Symbole ────────────────────────────────────────────────────── */

.sym {
  width: 1.15em; height: 1.15em; flex: none;
  vertical-align: -0.2em;
}

.symkreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  background: rgba(var(--tint), .05);
  border: 1px solid var(--rand);
  color: var(--akzent);
  margin-bottom: 14px;
}
.symkreis .sym { width: 26px; height: 26px; stroke-width: 1.5; }
.symkreis.klein { width: 40px; height: 40px; margin-bottom: 0; }
.symkreis.klein .sym { width: 20px; height: 20px; }
.symkreis.gross { width: 66px; height: 66px; }
.symkreis.gross .sym { width: 32px; height: 32px; }

/* Der Farbverlauf des Logos als Füllung — sparsam eingesetzt, damit es
   nicht bunt wird. */
.saeulen .symkreis,
.uebersichtpunkt .symkreis,
.paket-text .symkreis {
  background: var(--verlauf-knopf); border-color: transparent; color: #fff;
}

/* Überschrift mit kurzem Strich darunter. */
.strichunten { position: relative; padding-bottom: 16px; }
.strichunten::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 62px; height: 4px; border-radius: 2px;
  background: var(--verlauf-knopf);
}
.strichunten.mitte::after { left: 50%; transform: translateX(-50%); }

/* ── Kopfbereich: bleibt oben ──────────────────────────────────────
   Oberleiste und Kopf stecken zusammen in `#kopfbereich`. Nur dieser
   Kasten klebt oben — dadurch bleibt der Warenkorb immer sichtbar,
   egal wie weit man scrollt. */

#kopfbereich {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
  transition: box-shadow .2s;
}
#kopfbereich.geschrumpft { box-shadow: 0 6px 24px rgba(var(--tint), .08); }

#oberleiste {
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
  font-size: 13px;
}
.oberleiste-innen {
  display: flex; align-items: center; gap: 18px;
  padding-block: 7px;
  transition: padding .18s;
}
#kopfbereich.geschrumpft .oberleiste-innen { padding-block: 4px; }
.oberleiste-text { color: var(--leise); margin-right: auto; }
.oberleiste-rechts { display: flex; gap: 16px; align-items: center; }

#kopf {
  position: static;                /* das Kleben macht jetzt der Kasten */
  display: block; padding: 0; border-bottom: 0;
  background: none; backdrop-filter: none;
}
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 14px;
  transition: padding .18s;
}
#kopfbereich.geschrumpft .kopf-innen { padding-block: 8px; }
#kopf .marke { display: flex; align-items: center; }
#kopf .marke img { height: 36px; width: auto; transition: height .18s; }
#kopfbereich.geschrumpft #kopf .marke img { height: 28px; }

#menue { display: flex; gap: 30px; align-items: center; }
#menue a { font-size: 15.5px; }

/* Der Warenkorb in der Oberleiste. */
.korbknopf { display: inline-flex; align-items: center; gap: 6px; }
.korbknopf .sym { width: 16px; height: 16px; }
.oberleiste-rechts .alslink { display: inline-flex; align-items: center; gap: 6px; }
.oberleiste-rechts .alslink .sym { width: 15px; height: 15px; opacity: .75; }

/* Kurz aufblitzen, wenn etwas hineingelegt wurde. */
@keyframes huepfen {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-4px) scale(1.06); }
}
.korbknopf.gehuepft { animation: huepfen .42s ease; }

/* ── Flaggenwahl ─────────────────────────────────────────────────── */

.sprachwahl { display: inline-flex; gap: 4px; align-items: center; }
.flagge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 8px;
  border: 1px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--leise);
  letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}
.flagge svg { width: 21px; height: 14px; border-radius: 2px; display: block;
              box-shadow: 0 0 0 1px rgba(var(--tint), .18) inset; }
.flagge:hover { background: rgba(var(--tint), .06); color: var(--text); }
.flagge.aktiv { border-color: var(--randstark); background: var(--grund); color: var(--text); }

/* ── Seitenwechsel ──────────────────────────────────────────────────
   Die neue Seite kommt von unten heran und wird klar — kurz genug, dass
   es nie im Weg steht. Wer Animationen abgestellt hat, sieht nichts
   davon; darum kümmert sich das Skript. */

@keyframes seiteHerein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.seite.kommt { animation: seiteHerein .34s cubic-bezier(.22, .8, .3, 1) both; }
.seite[hidden] { display: none; }

/* ── Listen mit Haken statt Punkten ─────────────────────────────── */

ul.merkmale, ul.hakenliste {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: grid; gap: 9px;
}
ul.merkmale li, ul.hakenliste li {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0; color: var(--leise);
}
ul.merkmale li .sym, ul.hakenliste li .sym {
  width: 20px; height: 20px; color: var(--akzent); margin-top: 2px;
}
ul.hakenliste li { color: var(--text); font-weight: 600; }

/* ── Bereichs- und Klappenkopf mit Symbol ───────────────────────── */

.bereichkopf { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.bereichkopf h3 { margin: 0; }
.bereichkopf p { margin: 2px 0 0; }
.klappe-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.klappe-kopf strong { display: block; font-size: 15px; }
.klappe-kopf .klein { display: block; }

/* ── Filterknöpfe ───────────────────────────────────────────────── */

.filter button { display: inline-flex; align-items: center; gap: 7px; }
.filter button .sym { width: 16px; height: 16px; }

/* ── Knöpfe mit Symbol ──────────────────────────────────────────── */

.knopf .sym { width: 18px; height: 18px; }
.knopfreihe.senkrecht { flex-direction: column; align-items: stretch; }
.knopfreihe.senkrecht .knopf { width: 100%; }

/* ── Der Kopf einer Produktseite ────────────────────────────────── */

.produktkopf { padding: 30px 0 0; }
.produktkopf-innen {
  display: grid; gap: clamp(24px, 3vw, 44px); align-items: start;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.05fr) minmax(240px, 320px);
}
.produktkopf-bild img {
  width: 100%; border-radius: 16px; border: 1px solid var(--rand);
  box-shadow: 0 20px 44px rgba(var(--tint), .14);
}
.produktkopf-text h1 { font-size: clamp(30px, 4vw, 44px); }
.produktkopf-text .lead { font-size: 17px; color: var(--leise); margin-bottom: 18px; }

.kaufkasten {
  padding: 22px; border-radius: 16px;
  background: var(--flaeche); border: 1px solid var(--rand);
  position: sticky; top: 118px;
}
.kaufkasten .produktpreis { margin: 0 0 16px; font-size: 30px; text-align: center; }
.zusatzreihe { display: grid; gap: 6px; margin-top: 14px; }
.zusatzreihe a {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--akzent); text-decoration: none;
}
.zusatzreihe a:hover { text-decoration: underline; }
.zusatzreihe .sym { width: 15px; height: 15px; }

.kaufdaten { margin: 18px 0 0; display: grid; gap: 10px; }
.kaufdaten > div { display: flex; gap: 10px; align-items: center; }
.kaufdaten dt { margin: 0; color: var(--leise); display: flex; }
.kaufdaten dt .sym { width: 19px; height: 19px; }
.kaufdaten dd { margin: 0; font-size: 14px; }

/* Die drei Zusagen unter dem Kopf. */
.produktleiste {
  display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;
  margin-top: 34px; padding-block: 24px;
  border-top: 1px solid var(--rand);
}
.produktleiste > span {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px;
}

/* ── Sprungleiste ───────────────────────────────────────────────── */

.sprungleiste { position: sticky; top: 70px; z-index: 40; }
.sprungleiste .innen { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sprungkauf { margin-left: auto; }
.sprungkauf .knopf { margin: 6px 0; }

/* ── „Alle Funktionen im Überblick" ─────────────────────────────── */

.produktblock.hell { background: var(--flaeche); border-block: 1px solid var(--rand); padding: clamp(44px, 6vw, 72px) 0; }
.produktblock.hell > .innen > h2 { margin-bottom: 34px; }

.uebersicht {
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.uebersichtpunkt { text-align: center; }
.uebersichtpunkt h3 { font-size: 17px; margin-bottom: 8px; }
.uebersichtpunkt p { margin: 0; color: var(--leise); font-size: 14.5px; line-height: 1.6; }

/* ── Bilder zum Durchblättern ───────────────────────────────────── */

.karussellkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px;
}
.karussellkopf h2 { margin: 0; }
.karussellpfeile { display: flex; gap: 10px; padding-bottom: 6px; }

.rundknopf {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--randstark); background: var(--grund);
  color: var(--text);
  transition: background .15s, color .15s, transform .15s;
}
.rundknopf:hover { background: var(--verlauf-knopf); color: #fff; border-color: transparent; transform: translateY(-2px); }
.rundknopf .sym { width: 20px; height: 20px; }
.rundknopf[data-schieben="-1"] .sym { transform: rotate(180deg); }

.karussell {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Das erste Bild beginnt genau unter der Ueberschrift, nach rechts
     laeuft der Streifen bewusst aus dem Bild heraus. */
  padding: 6px 0 18px max(var(--einzug), calc((100% - 1100px) / 2));
  padding-right: var(--einzug);
  scrollbar-width: none;
  cursor: grab;
}
.karussell::-webkit-scrollbar { display: none; }
.karussell.zieht { cursor: grabbing; scroll-snap-type: none; }
.karussell:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

.karussell .foto {
  margin: 0; flex: 0 0 min(640px, 82vw); scroll-snap-align: center;
  border-radius: 14px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--rand); background: var(--karte);
  box-shadow: 0 14px 34px rgba(var(--tint), .10);
  transition: transform .18s, border-color .18s;
}
.karussell .foto:hover { transform: translateY(-3px); border-color: var(--randstark); }
.karussell .foto img {
  width: 100%; display: block; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top; user-select: none;
}
.karussell .foto figcaption {
  padding: 12px 16px; font-size: 13.5px; color: var(--leise); line-height: 1.5;
}

.punkte { display: flex; justify-content: center; gap: 9px; margin-top: 6px; }
.punkte button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--randstark); opacity: .5;
  transition: opacity .15s, width .15s, background .15s;
}
.punkte button.aktiv { opacity: 1; width: 26px; border-radius: 5px; background: var(--akzent); }

/* ── Text und Bild im Wechsel ───────────────────────────────────── */

.wechsel {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: 1fr 1fr;
  padding: clamp(36px, 5vw, 60px) 0;
}
.wechsel + .wechsel { border-top: 1px solid var(--rand); }
.wechsel.rechts .wechsel-bild { order: 2; }
.wechsel-bild { margin: 0; }
.wechsel-bild img {
  width: 100%; border-radius: 16px; border: 1px solid var(--rand);
  box-shadow: 0 18px 40px rgba(var(--tint), .13);
}
.wechsel-bild.leer {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; border-radius: 16px;
  background: linear-gradient(135deg, rgba(109, 40, 217, .08), rgba(29, 78, 216, .08));
  border: 1px solid var(--rand); color: var(--akzent);
}
.wechsel-bild.leer .sym { width: 88px; height: 88px; stroke-width: 1.1; opacity: .8; }
.wechsel-text h3 { font-size: clamp(23px, 2.6vw, 31px); margin: 14px 0 14px; padding-bottom: 14px; position: relative; }
.wechsel-text h3::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 52px; height: 4px; border-radius: 2px; background: var(--verlauf-knopf);
}
.wechsel-text p { margin: 0; color: var(--leise); font-size: 16px; line-height: 1.75; }

/* ── So geht's ──────────────────────────────────────────────────── */

ol.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: schritt;
}
ol.schritte li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; border-radius: 14px;
  background: var(--karte); border: 1px solid var(--rand);
  color: var(--leise); font-size: 15px; line-height: 1.6;
}
.schrittzahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--verlauf-knopf); color: #fff;
  font-weight: 700; font-size: 15px;
}

/* ── Häufige Fragen ─────────────────────────────────────────────── */

.fragenraster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.frage {
  border: 1px solid var(--rand); border-top: 1px solid var(--rand);
  border-radius: 14px; background: var(--karte);
  padding: 0; box-shadow: 0 2px 10px rgba(var(--tint), .04);
  transition: border-color .15s, box-shadow .15s;
}
.frage:last-child { border-bottom: 1px solid var(--rand); }
.frage:hover { border-color: var(--randstark); box-shadow: 0 8px 22px rgba(var(--tint), .07); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; cursor: pointer; font-weight: 600; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before { content: none; }
.frage[open] summary::before { content: none; }
.frage summary .wender {
  width: 20px; height: 20px; flex: none; color: var(--leise);
  transform: rotate(90deg); transition: transform .2s;
}
.frage[open] summary .wender { transform: rotate(-90deg); }
.frage p {
  margin: 0 !important; padding: 0 20px 20px;
  color: var(--leise); line-height: 1.7;
}

/* ── Das Paket ──────────────────────────────────────────────────── */

#paket { padding: clamp(44px, 6vw, 72px) 0; }
.paketkarte {
  display: grid; gap: clamp(28px, 4vw, 52px); align-items: center;
  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, .9fr);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--rundung);
  background: var(--flaeche); border: 1px solid var(--rand);
}
.paket-text h2 { font-size: clamp(26px, 3.2vw, 36px); }
.paket-text > p { color: var(--leise); margin: 0 0 18px; }
.paketpreis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.paketpreis strong { font-size: 34px; }
.paketpreis b { color: var(--akzent); }
.paketliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paketliste a {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  padding: 12px; border-radius: 12px; color: inherit;
  background: var(--grund); border: 1px solid var(--rand);
  transition: border-color .15s, transform .15s;
}
.paketliste a:hover { border-color: var(--randstark); transform: translateX(3px); }
.paketliste img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.paketliste strong { display: block; font-size: 15px; }
.paketliste em { font-style: normal; font-size: 13px; color: var(--leise); }

.pakethinweis {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 14px;
  background: var(--flaeche); border: 1px solid var(--rand);
}
.pakethinweis > div { flex: 1 1 260px; }
.pakethinweis p { margin: 2px 0 0; }

/* ── Hinweiskästen mit Symbol ───────────────────────────────────── */

.hinweiskasten { display: flex; gap: 16px; align-items: flex-start; }
.hinweiskasten > div { flex: 1; }
.hinweiskasten p { margin: 4px 0 12px; }

/* ── Überschriften der Kassen- und Kontoblöcke ──────────────────── */

.kasseblock h2 { display: flex; align-items: center; gap: 10px; }
.kasseblock h2 .sym { width: 22px; height: 22px; color: var(--akzent); }

/* ── Dienste-Leiste ─────────────────────────────────────────────── */

.servicepunkt { align-items: center; }
.servicepunkt .symkreis { margin-bottom: 0; }

/* ── Kleinere Bildschirme ───────────────────────────────────────── */

@media (max-width: 1020px) {
  .produktkopf-innen { grid-template-columns: 1fr 1fr; }
  .kaufkasten { grid-column: 1 / -1; position: static; }
}

@media (max-width: 860px) {
  #menue {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--einzug) 18px;
    background: var(--grund); border-bottom: 1px solid var(--rand);
    box-shadow: 0 18px 36px rgba(var(--tint), .12);
    display: none;
  }
  #menue.offen { display: flex; }
  #kopf { position: relative; }
  .kopf-innen { position: static; }

  .produktkopf-innen { grid-template-columns: 1fr; }
  .wechsel { grid-template-columns: 1fr; }
  .wechsel.rechts .wechsel-bild { order: 0; }
  .paketkarte { grid-template-columns: 1fr; }
  .karussellkopf { flex-direction: column; align-items: flex-start; }
  .oberleiste-text { display: none; }
  .oberleiste-innen { justify-content: space-between; }
  .oberleiste-rechts { margin-right: auto; }
  .korbwort { display: none; }
  .sprungkauf { display: none; }
  .produktleiste { justify-content: flex-start; gap: 14px 26px; }
  .produktleiste > span { font-size: 14px; }
}

@media (max-width: 560px) {
  .karussell .foto { flex-basis: 88vw; }
  .oberleiste-rechts { gap: 10px; font-size: 12px; }
  .flagge span { display: none; }
}

/* ═══════════ Das Rad im Aufmacher ═══════════

   Neben dem Text drehen sich die Produkte durch: das vorderste gross und
   gerade, die Nachbarn kleiner, nach hinten gedreht und blasser. Jede
   Karte sitzt in der Mitte der Buehne; wohin sie wirklich gehoert,
   rechnet `radStellen()` in app.js aus und schreibt es als `transform`.
   Hier steht nur, wie der Weg dorthin aussieht.                        */

.obenraster {
  display: grid; gap: clamp(28px, 4vw, 60px); align-items: center;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.12fr);
}
.obentext { position: relative; z-index: 1; }

.rad {
  position: relative;
  height: clamp(330px, 33vw, 460px);
  /* Weiter weg = flachere Perspektive = die vorderste Karte steht
     wirklich gerade und bleibt dadurch scharf. */
  perspective: 2200px;
  /* Beschnitten, damit die Karten am Rand nicht in den Text hineinragen.
     Das Rad wirkt dadurch, als liefe es hinter der Kante weiter.

     Der Beschnitt muss hier bleiben und darf NICHT auf `.radbuehne`
     wandern: Ein `overflow` ausser `visible` macht aus einer 3D-Buehne
     wieder eine flache — die Drehung waere dann weg.

     Unten bleibt deshalb Platz fuer die Punkte INNERHALB des Kastens,
     sonst schneidet derselbe Beschnitt sie ab. */
  overflow: hidden;
  padding-bottom: 30px;
}
.radbuehne {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}

.radkarte {
  position: absolute; left: 50%;
  /* Die 15 Pixel gleichen den Platz aus, der unten fuer die Punkte
     reserviert ist - sonst saessen die Karten sichtbar zu tief. */
  top: calc(50% - 15px);
  width: min(470px, 82%);
  display: block; text-decoration: none; color: inherit;
  border-radius: 16px; overflow: hidden;
  /* Deckend, nicht durchscheinend: Hinter der Karte liegen die anderen. */
  background: var(--grund); border: 1px solid var(--rand);
  box-shadow: 0 22px 50px rgba(var(--tint), .18);
  transform-origin: center;
  transition: transform .65s cubic-bezier(.22, .8, .3, 1),
              opacity .65s, box-shadow .3s;
  /* Kein `will-change: transform`: Das laesst den Browser die Karte einmal
     als Bild ablegen und danach nur noch skalieren — die Schrift in den
     Bildschirmfotos wird davon matschig. */
  backface-visibility: hidden;
}
.radkarte.vorne { box-shadow: 0 30px 70px rgba(var(--tint), .26); }
.radkarte.vorne:hover { box-shadow: 0 34px 80px rgba(29, 78, 216, .28); }

/* Im Rad wird NICHT das ganze Programmfenster gezeigt, sondern ein
   naeherer Ausschnitt davon.

   Der Grund ist Rechnerei, keine Geschmacksfrage: Ein Fenster von 1188 px
   Breite auf 449 px gezeigt schrumpft die Schrift darin auf gut vier
   Pixel — das wird bei keiner Aufloesung wieder scharf, weil nicht die
   Bildpunkte fehlen, sondern die Buchstaben zu klein werden. Der
   Ausschnitt vergroessert das Sichtbare um die Haelfte; auf der
   Produktseite bleibt das Bild vollstaendig. */
.radbild {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(var(--tint), .04);
}
.radbild img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: top left;
  transform: scale(1.5);
  transform-origin: 4% 6%;
}
.radfuss {
  display: flex; gap: 11px; align-items: center;
  padding: 12px 15px; border-top: 1px solid var(--rand);
  background: var(--grund);
}
.radfuss > img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.radfuss strong { display: block; font-size: 15px; line-height: 1.3; }
.radfuss em {
  display: block; font-style: normal; font-size: 12.5px; color: var(--leise);
  line-height: 1.35;
  /* Eine Zeile genuegt - sonst wippt die Karte beim Wechsel in der Hoehe. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.radpunkte {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 8px; z-index: 30;
}
.radpunkte button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--randstark); opacity: .5; cursor: pointer;
  transition: opacity .18s, width .18s, background .18s;
}
.radpunkte button.aktiv { opacity: 1; width: 24px; border-radius: 4px; background: var(--akzent); }

/* Ohne Bewegung: einfach nebeneinander, ohne Drehung. */
@media (prefers-reduced-motion: reduce) {
  .radkarte { transition: none; }
}

@media (max-width: 980px) {
  .obenraster { grid-template-columns: 1fr; }
  .rad { height: clamp(280px, 58vw, 360px); margin-top: 12px; }
  .radkarte { width: min(460px, 86%); }
}

@media (max-width: 560px) {
  #oben { padding-top: clamp(40px, 9vw, 70px); }
  .rad { height: 250px; }
  .radfuss em { display: none; }
}

/* ═══════════ Alle Umwandlungen ═══════════

   Die vollstaendige Liste beim Universal Converter. Bewusst nuechtern:
   Wer hier nachsieht, will genau wissen, was geht — nicht bewundern. */

.wegeraster {
  display: grid; gap: 16px; margin: 34px 0 40px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.wegekarte {
  padding: 20px 22px; border-radius: 14px;
  background: var(--karte); border: 1px solid var(--rand);
}
.wegekarte h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; margin: 0 0 14px;
}
.wegekarte dl { margin: 0; display: grid; gap: 4px 14px; grid-template-columns: auto 1fr; }
.wegekarte dt { color: var(--leise); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.wegekarte dd { margin: 0 0 8px; }
.wegekarte > p { margin: 10px 0 0; }

.endungen {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75; color: var(--text);
  word-spacing: .1em;
}

.wegetitel { font-size: 19px; margin: 0 0 14px; }

.wegetabelle {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--rand); border-radius: 12px; overflow: hidden;
}
.wegetabelle th {
  text-align: left; padding: 11px 16px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--leise);
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.wegetabelle td { padding: 9px 16px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.wegetabelle tr:last-child td { border-bottom: 0; }
.wegetabelle tr:hover td { background: rgba(var(--tint), .025); }
.wegetabelle code {
  font-family: Consolas, "Courier New", monospace; font-size: 13px;
  font-weight: 700; color: var(--akzent);
}
.wegetabelle th:first-child, .wegetabelle td:first-child { width: 92px; }

.fussnote { margin-top: 14px; }

@media (max-width: 620px) {
  .wegekarte dl { grid-template-columns: 1fr; }
  .wegetabelle th, .wegetabelle td { padding: 8px 10px; }
  .wegetabelle th:first-child, .wegetabelle td:first-child { width: 62px; }
}

/* ── Hinweis: Verkauf startet noch nicht ───────────────────────────
   Steht ganz oben, VOR der Kopfzeile, und scrollt mit weg. Bewusst
   nicht klebend: Die Kopfzeile klebt schon, und zwei klebende Balken
   uebereinander fressen auf dem Handy den halben Bildschirm. Die
   Abstaende der klebenden Elemente darunter (top: 62px/70px/118px)
   bleiben dadurch unangetastet. */

.vorstart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 11px 20px;
  background: linear-gradient(90deg, #1d3a63, #2a2f66);
  color: #e8eefb;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vorstart .sym {
  flex: none;
  width: 18px; height: 18px;
  opacity: .85;
}
.vorstart a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.vorstart a:hover { opacity: .85; }

@media (max-width: 640px) {
  .vorstart { font-size: 13px; padding: 10px 14px; }
}

/* ── Produktbereich mittig ─────────────────────────────────────────
   Wunsch vom 10.09.2026. Vorher hing alles an der linken Kante,
   waehrend Ueberschrift und Einleitung darueber zentriert waren — das
   sah aus, als waere die Seite zur Haelfte fertig.

   Der eigentliche Grund fuer die Luecke rechts: `auto-fill` legt so
   viele Spalten an, wie hineinpassen (bei 1350 px sind das drei), auch
   wenn ein Bereich nur ein oder zwei Produkte hat. Die leeren Spalten
   blieben rechts stehen. Deshalb bekommen die Spalten jetzt eine
   Hoechstbreite statt `1fr` — nur so hat `justify-content` ueberhaupt
   etwas zu verteilen. Mit `1fr` fuellen die Spalten die Zeile und
   nichts laesst sich mehr zentrieren. */

.filter { justify-content: center; }

.bereichkopf { justify-content: center; text-align: center; }
.bereichkopf h3 { justify-content: center; }
/* Der Strich lief bisher vom Titel bis zur rechten Kante. Zentriert
   waere er einseitig, also faellt er hier weg. */
.bereichkopf h3::after { display: none; }

.raster {
  /* auto-FIT, nicht auto-fill: auto-fill laesst die leeren Spalten
     stehen, und eine einzelne Karte klebte dann weiter in Spalte eins,
     obwohl das Gitter selbst mittig sass. auto-fit klappt die leeren
     Spalten auf null zusammen — erst dadurch landet auch ein einzelnes
     Produkt wirklich in der Mitte. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
  justify-content: center;
}