/* Homepage SummiTip — dieselbe Gestaltung wie die Module der SummitGO Medical Suite.
   tokens.css, grund.css und bausteine.css sind die unveränderte Auslieferung aus dem Neubau
   (SummitGO_Neu/oberflaeche/src). Hier stehen nur: der Kopf (wie schale/schale.css), der
   nachtblaue Tafelgrund mit Hero, Marke und Kachelgitter (wie seiten/seiten.css) und das
   Wenige, was nur eine Homepage braucht. Alle Werte kommen aus den Tokens. */
html { scroll-behavior: smooth; }
html, body { height: auto; }

/* ── Kopf: wie schale.css ── */
.kopf { display: flex; align-items: center; gap: var(--r2); height: 56px; padding: 0 var(--r3);
  background: var(--kopf); color: var(--tinte-hell); position: sticky; top: 0; z-index: 20; }
.kopf .marke { display: flex; align-items: center; }
.kopf .marke .schleife { width: 32px; height: 32px; display: block; flex-shrink: 0; object-fit: contain; }
.kopf .marke .strich { width: 1px; height: 28px; background: var(--farbe-navy-300); margin: 0 10px; flex-shrink: 0; }
.kopf .marke .textblock { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.kopf .marke .schriftzug { height: 15px; width: auto; display: block; }
.kopf .marke .zeile { font-size: 11px; line-height: 14px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: var(--gewicht-fett); color: var(--farbe-navy-100); white-space: nowrap; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--halb); }
.kopf .navpunkt { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--r2);
  border-radius: var(--rund-voll); color: var(--farbe-navy-100); font-weight: var(--gewicht-halbfett);
  transition: background var(--uebergang); }
.kopf .navpunkt:hover { background: rgba(220,228,238,.14); color: var(--tinte-hell); }
.kopf .hero-admin { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--r2); margin-left: var(--r1);
  border-radius: var(--rund-voll); background: var(--karte); color: var(--farbe-navy-900);
  font-size: var(--grund-groesse); font-weight: var(--gewicht-fett); transition: background var(--uebergang); }
.kopf .hero-admin:hover { background: var(--farbe-navy-100); }

/* ── Tafelgrund: wie seiten.css (Nachtblau, weiße Karten, Schleife als Schimmer) ── */
.tafelgrund { position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 82% -10%, rgba(194,161,92,.16), transparent 55%),
              linear-gradient(180deg, var(--farbe-navy-800), #0E1C29); }
.schleife-hintergrund { position: absolute; top: 50%; right: -240px; width: 760px; height: 760px;
  pointer-events: none; z-index: 0; transform: translateY(-50%); opacity: .16;
  background: url("../logo/schleife_hell_256.png") center/contain no-repeat; animation: schimmer 90s linear infinite; }
@keyframes schimmer { to { transform: translateY(-50%) rotate(360deg); } }
.tafelgrund .hero, .tafelgrund .seite { position: relative; z-index: 1; max-width: calc(1280px + 2 * var(--seitenrand)); margin-inline: auto; }
.hero { position: relative; color: var(--tinte-hell); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: var(--r8); align-items: center; padding: var(--r8) var(--seitenrand) var(--r4); }
.marke-gross { display: flex; align-items: center; margin-bottom: var(--r4); }
.marke-gross .schleife { width: 72px; height: 72px; display: block; flex-shrink: 0; object-fit: contain; }
.marke-gross .strich { width: 1px; height: 48px; background: var(--farbe-navy-300); margin: 0 var(--r2); }
.marke-gross .textblock { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.marke-gross .schriftzug { height: 30px; width: auto; display: block; }
.marke-gross .zeile { font-weight: 300; font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--farbe-navy-200); padding-left: 1px; white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.hero h1 { font-size: var(--riese-groesse); line-height: var(--riese-zeile); letter-spacing: var(--riese-laufweite); }
.hero .claim { color: var(--farbe-navy-100); font-size: var(--betont-groesse); line-height: var(--betont-zeile); margin-top: var(--r2); max-width: 46ch; }
.hero .rufe { display: flex; gap: var(--r1); flex-wrap: wrap; margin-top: var(--r3); }
.hero .klein { color: var(--farbe-navy-200); font-size: var(--klein-groesse); line-height: var(--klein-zeile); margin-top: var(--r2); }
.ortsschild { display: inline-block; margin-top: var(--r3); font-size: var(--klein-groesse); font-weight: var(--gewicht-fett);
  letter-spacing: .08em; padding: 3px 14px; border-radius: var(--rund-voll); border: 1px solid currentColor;
  color: var(--akzent); background: rgb(212 175 55 / .12); }
.blockzeile { margin: var(--r3) 0 var(--r1); font-size: var(--klein-groesse); font-weight: var(--gewicht-fett);
  letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-tinte); }
.tafelgrund .blockzeile { color: var(--akzent); }
.tafelgrund .seite { padding-top: 0; padding-bottom: var(--r8); }

/* ── Kachelgitter und Kachel: wie seiten.css ── */
.modulgitter { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--rinne); grid-auto-rows: 1fr; }
.modulgitter .modulkachel { grid-column: span 4; height: 100%; }
.modulgitter.vier .modulkachel { grid-column: span 3; }
.modulkachel { flex-direction: row; }
.modulkachel .kinhalt { display: flex; flex-direction: column; gap: var(--halb); min-width: 0; }
.modulkachel .beschreibung { color: var(--tinte-gedaempft); }

/* ── Das Mailfenster im Hero: eine Karte ── */
.schaufenster { position: relative; padding-bottom: var(--r8); }
.schaufenster .karte { padding: 0; overflow: hidden; color: var(--tinte); box-shadow: var(--schatten-schwebend); }
.fenster-kopf { display: flex; align-items: center; gap: var(--r1); padding: 10px var(--r2); background: var(--farbe-navy-100);
  font-size: var(--klein-groesse); font-weight: var(--gewicht-halbfett); color: var(--tinte-gedaempft); }
.fenster-kopf i { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe-navy-300); }
.fenster-zeile { padding: var(--r1) var(--r3); border-bottom: 1px solid var(--linie-zart); }
.fenster-zeile em { font-style: normal; color: var(--tinte-gedaempft); margin-right: var(--r1); }
.fenster-text { padding: var(--r2) var(--r3) var(--r3); min-height: 176px; display: flex; flex-direction: column; gap: var(--r1); }
.fenster-text p { opacity: 0; animation: schreib 10s ease-out infinite; }
.fenster-text p:nth-child(1) { animation-delay: 2.2s; } .fenster-text p:nth-child(2) { animation-delay: 2.5s; } .fenster-text p:nth-child(3) { animation-delay: 2.8s; }
@keyframes schreib { 0% { opacity: 0; transform: translateY(4px); } 4%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
.wolke { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: var(--halb);
  animation: wolke 10s ease-in-out infinite; }
.wolke img { width: 48px; height: 48px; filter: drop-shadow(0 0 6px rgba(194,161,92,.55)); animation: atmen 1.1s ease-in-out infinite alternate; }
.wolke span { background: #0E1C29; color: var(--tinte-hell); border: 1px solid rgba(220,228,238,.55); border-radius: var(--rund-voll);
  font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett); padding: 3px 12px; }
@keyframes atmen { from { transform: scale(.92); } to { transform: scale(1.08); } }
@keyframes wolke { 0%, 3% { opacity: 0; } 6%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }

/* ── Helle Abschnitte: wie eine Modulseite ── */
.abschnitt { padding: var(--r8) var(--seitenrand); }
.abschnitt.ruhig { background: var(--flaeche-ruhig); }
.abschnitt > .innen { max-width: 1280px; margin: 0 auto; }
.abschnitt .blockzeile { margin-top: 0; }
.abschnitt .einleitung { color: var(--tinte-gedaempft); font-size: var(--betont-groesse); line-height: var(--betont-zeile); margin: var(--r1) 0 var(--r4); max-width: 60ch; }
.abschnitt h1 + .modulgitter, .abschnitt h1 + .preise { margin-top: var(--r4); }
.nummer { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--kopf); color: var(--tinte-hell);
  display: grid; place-items: center; font-weight: var(--gewicht-fett); }
.zweier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r8); align-items: center; }
.zweier > * { min-width: 0; }
.eine-karte { padding: 0 var(--r3); }
.eine-karte > * { display: flex; align-items: center; gap: var(--r2); padding: var(--r2) 0; border-bottom: 1px solid var(--linie-zart); font-weight: var(--gewicht-fett); font-size: var(--betont-groesse); }
.eine-karte > *:last-child { border-bottom: 0; }
.zeichen { width: 40px; height: 40px; flex: none; border-radius: var(--rund); display: grid; place-items: center;
  background: rgba(194,161,92,.12); border: 1.5px solid rgba(194,161,92,.45); color: var(--akzent); }
.zeichen svg { width: 22px; height: 22px; }
.leitsatz { font-size: var(--riese-groesse); line-height: var(--riese-zeile); letter-spacing: var(--riese-laufweite); font-weight: var(--gewicht-extrafett); text-align: center; }
.leitsatz em { font-style: normal; color: var(--akzent-tinte); }
.preise { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rinne); max-width: 760px; }
.preise .karte { display: flex; flex-direction: column; gap: var(--r2); }
.preise .betrag { display: flex; align-items: baseline; gap: var(--r1); flex-wrap: wrap; color: var(--tinte-gedaempft); }
.preise .betrag b { font-size: var(--riese-groesse); line-height: var(--riese-zeile); letter-spacing: var(--riese-laufweite); font-weight: var(--gewicht-extrafett); color: var(--tinte); }
.haken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--r1); }
.haken li { display: flex; gap: var(--r1); align-items: flex-start; }
.haken li::before { content: ""; flex: none; width: 6px; height: 11px; margin: 2px 6px 0 4px; border: solid var(--erfolg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.preise .knopf { margin-top: auto; align-self: flex-start; }
.fragen { padding: 0 var(--r3); max-width: 760px; }
.fragen details { border-bottom: 1px solid var(--linie-zart); } .fragen details:last-child { border-bottom: 0; }
.fragen summary { padding: var(--r2) 0; font-weight: var(--gewicht-halbfett); font-size: var(--betont-groesse); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--r2); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--akzent-tinte); font-size: 20px; line-height: 24px; }
.fragen details[open] summary::after { content: "–"; }
.fragen p { padding: 0 0 var(--r2); color: var(--tinte-gedaempft); max-width: 62ch; }
.schluss { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--r2); padding: var(--r6) var(--r3); }
.schluss img { width: 56px; height: 56px; }
.schluss p { color: var(--tinte-gedaempft); }

/* ── Fuß ── */
.fuss { background: var(--kopf); color: var(--farbe-navy-200); padding: var(--r6) var(--seitenrand); }
.fuss .innen { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--r4); }
.fuss b { display: block; color: var(--tinte-hell); margin-bottom: var(--r1); }
.fuss a { display: block; color: var(--farbe-navy-200); padding: 2px 0; } .fuss a:hover { color: var(--tinte-hell); }
.fuss .satz { color: var(--tinte-hell); font-weight: var(--gewicht-halbfett); margin-top: var(--r2); }

@media (max-width: 1024px) { :root { --seitenrand: var(--seitenrand-tablet); } .hero, .zweier { grid-template-columns: 1fr; gap: var(--r5); }
  .modulgitter.vier .modulkachel { grid-column: span 6; } .kopf .navpunkt { display: none; } .fuss .innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { :root { --seitenrand: var(--seitenrand-telefon); } .modulgitter .modulkachel, .modulgitter.vier .modulkachel { grid-column: span 12; }
  .preise { grid-template-columns: 1fr; } .fuss .innen { grid-template-columns: 1fr; } .hero h1, .leitsatz { font-size: 32px; line-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .fenster-text p { opacity: 1; animation: none; } .wolke, .wolke img, .schleife-hintergrund { animation: none; } html { scroll-behavior: auto; } }

/* ── Unterseiten: Auftakt, Formulare, Listen, Tabellen ── */
.unterseite .abschnitt:first-child { padding-top: var(--r6); }
.abschnitt > .innen.schmal { max-width: 840px; }
.zweier.oben { align-items: start; }
.unterseite h2 { margin-bottom: var(--r2); }
h2.mit-zeichen { display: flex; align-items: center; gap: var(--r2); }
.formular { display: flex; flex-direction: column; gap: var(--r2); }
.formular .knopf { align-self: flex-start; }
.feld { display: flex; flex-direction: column; gap: var(--halb); }
.feld label { font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett); color: var(--tinte-gedaempft); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 40px; border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 10px var(--r2); font: inherit; font-size: var(--betont-groesse); color: var(--tinte); background: var(--karte); }
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; box-shadow: var(--fokus-schein); border-color: var(--wirkung); }
.feld .hinweis { margin-top: 0; }
.meldung { border-left: 4px solid var(--erfolg); border-radius: var(--rund); background: var(--erfolg-flaeche); color: var(--tinte); padding: var(--r1) var(--r2); }
.meldung.warnung { border-left-color: var(--akzent); background: var(--farbe-gold-100); }
/* Hinweis-Karte: goldene Kante links = Hinweis der Suite */
.hinweiskarte { border-left: 4px solid var(--akzent); margin-top: var(--r3); display: flex; flex-direction: column; gap: var(--halb); padding: var(--r2) var(--r3); }
.hinweiskarte p { color: var(--tinte-gedaempft); }
.eine-liste { padding: 0 var(--r3); }
.eine-liste > div { display: flex; gap: var(--r2); align-items: flex-start; padding: var(--r2) 0; border-bottom: 1px solid var(--linie-zart); }
.eine-liste > div:last-child { border-bottom: 0; }
.eine-liste b { font-weight: var(--gewicht-halbfett); font-size: var(--betont-groesse); line-height: var(--betont-zeile); }
.eine-liste p { color: var(--tinte-gedaempft); margin-top: 2px; }
.nummer.klein { width: 28px; height: 28px; font-size: var(--klein-groesse); }
.tabelle { padding: 0 var(--r3); }
.tabelle > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--r2); padding: var(--r2) 0; border-bottom: 1px solid var(--linie-zart); }
.tabelle.dreier > div { grid-template-columns: 1.4fr 1fr 1fr; }
.tabelle > div:last-child { border-bottom: 0; }
.tabelle b { font-weight: var(--gewicht-halbfett); }
.tabelle .kopfzeile b { font-size: var(--klein-groesse); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-gedaempft); }
.fehlt { color: var(--warnung); }
.fragen.breit { max-width: none; margin-top: var(--r1); }
@media (max-width: 760px) { .tabelle > div { grid-template-columns: 1fr; gap: var(--halb); } .tabelle.dreier > div { grid-template-columns: 1fr 1fr 1fr; } }

/* ── Bestellstrecke ── */
.weg { list-style: none; margin: 0 0 var(--r4); padding: 0; display: flex; gap: var(--r1); flex-wrap: wrap; }
.weg li { display: flex; align-items: center; gap: var(--r1); padding: var(--halb) var(--r2) var(--halb) var(--halb); border-radius: var(--rund-voll);
  border: 1px solid var(--linie); color: var(--tinte-gedaempft); font-weight: var(--gewicht-halbfett); background: var(--karte); }
.weg li .nummer { background: var(--farbe-navy-100); color: var(--tinte-gedaempft); }
.weg li.aktiv { background: var(--kopf); border-color: var(--kopf); color: var(--tinte-hell); }
.weg li.aktiv .nummer { background: var(--karte); color: var(--kopf); }
.weg li.fertig .nummer { background: var(--erfolg-flaeche); color: var(--erfolg); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r2); }
.feldtitel { font-size: var(--klein-groesse); font-weight: var(--gewicht-fett); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-gedaempft); margin-top: var(--r1); }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r1); }
.wahlkarte { display: flex; gap: var(--r1); align-items: flex-start; border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--r2); cursor: pointer; transition: border-color var(--uebergang); }
.wahlkarte:hover { border-color: var(--akzent); }
.wahlkarte:has(input:checked) { border-color: var(--wirkung); box-shadow: var(--fokus-schein); }
.wahlkarte input { margin-top: 3px; accent-color: var(--wirkung); }
.wahlkarte b { display: block; font-weight: var(--gewicht-halbfett); } .wahlkarte small { color: var(--tinte-gedaempft); font-size: var(--klein-groesse); line-height: var(--klein-zeile); }
.hakenfeld { display: flex; gap: var(--r1); align-items: flex-start; } .hakenfeld input { margin-top: 3px; accent-color: var(--wirkung); }
.codefeld { font-size: 28px !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px !important; }
[data-nur][hidden] { display: none; }
@media (max-width: 760px) { .feldpaar, .wahl { grid-template-columns: 1fr; } }

/* ── Startseite: der Film steht gleich im ersten Ausschnitt (Doc, 19.09.2026) ── */
.hero.kompakt { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: var(--r5); padding-top: var(--r5); padding-bottom: var(--r3); }
.hero.kompakt .claim { margin-top: var(--r1); }
.hero.kompakt .rufe { margin-top: 0; justify-content: flex-end; }
.hero.kompakt .klein { text-align: right; margin-top: var(--r1); }
.tafelgrund > .seite { padding-top: 0; padding-bottom: var(--r6); }
@media (max-width: 1024px) { .hero.kompakt { grid-template-columns: 1fr; gap: var(--r2); } .hero.kompakt .rufe { justify-content: flex-start; } .hero.kompakt .klein { text-align: left; } }
.wahl.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .wahl.drei { grid-template-columns: 1fr; } }
.preise.drei { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 900px) { .preise.drei { grid-template-columns: 1fr; } }
.preise .karte.vorn { border-color: var(--wirkung); }
.formular .wahl.drei { grid-template-columns: 1fr; }

/* ── Konto erstellen auf einer Seite, ohne Doppeltes (Doc, 19.09.2026) ── */
.formular.breit .wahl.drei { grid-template-columns: repeat(3, 1fr); }
.feldreihe { display: grid; gap: var(--r2); align-items: start; }
.feldreihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feldreihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feld .etikett { font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett); color: var(--tinte-gedaempft); }
.feld .wahl { grid-template-columns: 1fr 1fr; }
.feld .wahlkarte { padding: 9px var(--r2); align-items: center; } .feld .wahlkarte input { margin-top: 0; } .feld .wahlkarte small:empty { display: none; }
.formfuss { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; } .formfuss .hinweis { margin: 0; }
.unterseite .abschnitt:first-child .weg { margin-bottom: var(--r3); }
@media (max-width: 1024px) { .feldreihe.drei, .feldreihe.vier, .formular.breit .wahl.drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .feldreihe.drei, .feldreihe.vier, .formular.breit .wahl.drei, .feld .wahl { grid-template-columns: 1fr; } }
.feld .wahlkarte input { width: auto; min-height: 0; padding: 0; flex: none; }

/* ── Bildschirmseiten (Doc, 19.09.2026): jeder Inhalt füllt genau einen Bildschirm, nichts überlappt.
   seite.js verkleinert den Inhalt einer Seite so weit, dass er bei jeder Fenstergröße ganz hineinpasst. ── */
html { scroll-snap-type: y proximity; scroll-padding-top: 56px; }
.schirm { min-height: calc(100vh - 56px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; }
.schirm.abschnitt { padding-block: var(--r4); }
.schirm > .innen, .schirm > .schirm-innen { width: 100%; }
.tafelgrund.schirm { justify-content: center; }
.fuss { scroll-snap-align: end; }
.unterseite .abschnitt.schirm:first-child { padding-top: var(--r4); }

/* Konto erstellen: links die Wahl, rechts das Formular */
.formular.zweispaltig { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr); gap: var(--r5); align-items: start; }
.formular.zweispaltig .links { display: flex; flex-direction: column; gap: var(--r1); }
.formular.zweispaltig .links .wahl.drei { grid-template-columns: 1fr; }
.formular.zweispaltig .rechts { display: flex; flex-direction: column; gap: var(--r2); }
.feldreihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.unterseite .weg { margin-bottom: var(--r2); }
@media (max-width: 760px) { .formular.zweispaltig, .feldreihe.zwei { grid-template-columns: 1fr; } .schirm { min-height: 0; } html { scroll-snap-type: none; } }

/* ── Vorführung mit Beispieldaten ── */
.vorfuehrband { background: var(--farbe-gold-100); color: var(--tinte); border-bottom: 1px solid rgba(194,161,92,.45); text-align: center;
  font-size: var(--klein-groesse); line-height: var(--klein-zeile); font-weight: var(--gewicht-halbfett); padding: 6px var(--r3); }
.konto-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rinne); align-items: start; }
.konto-gitter .tabelle > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding: var(--r1) 0; }
.konto-gitter .tabelle.dreier > div { grid-template-columns: 1.2fr 1fr auto; }
.konto-gitter .formular .feld { flex: 1; }
@media (max-width: 900px) { .konto-gitter { grid-template-columns: 1fr; } }
.vorfuehrband { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border-bottom: 0; border-top: 1px solid rgba(194,161,92,.45); }
.ladekarte { display: flex; align-items: center; gap: var(--r3); margin-top: var(--r3); flex-wrap: wrap; }
.ladekarte > div { flex: 1; min-width: 200px; } .ladekarte .meldung { flex-basis: 100%; }

/* ── „Wofür“ und „Vertraulich“ auf einem Bildschirm (Doc, 19.09.2026) ── */
.innen.doppel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--r8); align-items: start; }
.innen.doppel .einleitung { margin-bottom: var(--r3); }
.modulgitter.zweier-gitter .modulkachel { grid-column: span 6; padding: var(--r2); }
@media (max-width: 900px) { .innen.doppel { grid-template-columns: 1fr; gap: var(--r5); } }
/* Kopfzeile: aktiver Punkt als helle Pille (auf Navy das Gegenstück zur Navy-Pille der Modulleiste; Gold bleibt der Marke) */
.kopf .navpunkt.aktiv { background: rgba(220,228,238,.18); color: var(--tinte-hell); }

/* ── Fragen: drei Gruppen nebeneinander; lange Liste rollt normal (kein Verkleinern) ── */
.fragen-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r3); align-items: start; margin-top: var(--r3); }
.fragen-spalten .blockzeile { margin-top: 0; }
.fragen-spalten .fragen summary { font-size: var(--grund-groesse); padding: 12px 0; }
.fragen-spalten .fragen p { font-size: var(--grund-groesse); }
@media (max-width: 900px) { .fragen-spalten { grid-template-columns: 1fr; } }

/* ── Kurzanleitung: eine Seite A4 ── */
.druckblatt { max-width: 1040px; margin: 0 auto; }
@media print {
  @page { size: A4; margin: 14mm; }
  .kopf, .fuss, .vorfuehrband, .nicht-drucken { display: none !important; }
  body { background: #fff; } .abschnitt { padding: 0 !important; } .karte { box-shadow: none !important; }
  .druckblatt { zoom: .82; } .zweier { grid-template-columns: 1fr 1fr !important; }
}

/* ── Banner auf einem Preisfeld (Doc, 20.09.2026): sitzt auf der oberen Kante, schiebt nichts ── */
.preise .karte.mit-banner { position: relative; border-color: var(--farbe-gold-500); }
.preise .banner { position: absolute; top: 0; right: var(--r3); transform: translateY(-50%); padding: 2px 12px; border-radius: 999px;
  background: var(--farbe-gold-500); color: #10243A; font-size: 12px; line-height: 20px; font-weight: var(--gewicht-extrafett); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }