/* startseite.css */
/* startseite.css – Startseite (AW-05), nach Muster A3 (K2). Farben nur über werte.css (Umsetzungsblatt 5.4),
   Abfragen nur mit Namen aus umschaltbreiten.json, vom Handy aufwärts (3.1). Bewegt werden nur opacity, transform,
   clip-path (3.3). Das Innere der Hüllen vorfuehrung() und editionskarten() gestaltet diese Datei nicht. */

/* ---------- Abschnitte ---------- */
.abschnitt-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-2); margin-top: 16px; }
@media (min-width: 720px) { .abschnitt-lead { font-size: 1.1875rem; } }

/* ---------- Kopfbereich ---------- */
.kopfbereich { position: relative; overflow: hidden; background: var(--weiss); padding: 56px 0 72px; border-bottom: 1px solid var(--rahmen); }
.kopfbereich-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
/* Joris' Überschrift wird nie getrennt (Antwort zu Halt T, Nr. 6): Die Schriftgröße folgt auch der Breite der Textspalte
   (Container-Einheit cqi). „Lademittelverwaltung“ ist rund 10,1 Schriftgrößen breit; 9.4cqi lässt etwa 5 % Luft.
   Die Spaltengrenze gilt immer, auch bei größerer Standardschrift (Halt E1, Runde 1, Nr. 2). */
.kopfbereich-text { container-type: inline-size; }
.kopfbereich h1 { font-size: min(clamp(1.5rem, 1.1rem + 3.6vw, 3.15rem), 9.4cqi); line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin-top: 22px; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.kopf-unterzeile { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.4; letter-spacing: -.01em; color: var(--text-2); margin-top: 20px; max-width: 26ch; font-weight: 450; }
/* Wechselndes Wort (B97): das Wort schiebt sich aus der Zeile, das nächste herein; nur transform, immer voll deckend
   (Kontrast bei jeder Messung, P06) */
.wechsel { display: block; overflow: hidden; color: var(--blau); font-weight: 650; }
.wechsel-wort { display: inline-block; transition: transform .3s ease; }
.wechsel-wort.ist-weg { transform: translateY(-110%); }
.wechsel-wort.ist-neu { transform: translateY(110%); transition: none; }
.kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.kopf-knoepfe .knopf { width: 100%; }
@media (min-width: 720px) { .kopf-knoepfe .knopf { width: auto; } }
.kopf-wege { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.kopf-wege .textlink { min-height: 44px; }
.kopf-klein { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rahmen); max-width: 56ch; }
.kopf-klein .kleingedrucktes + .kleingedrucktes { margin-top: 4px; }
/* Die h2 der Startseite nie größer als ihre h1 (D5): unter --computer begrenzt der mittlere Wert der h1 (1.1rem + 3.6vw). */
.abschnitt h2, .boden h2 { font-size: min(clamp(2rem, 1.5rem + 1.8vw, 2.9rem), 9cqi, 1.1rem + 3.6vw); }
/* Ab --computer steht die h1 in der schmaleren Textspalte (9.4cqi davon, etwa 4.5vw − 5.4 px); die h2 der Seite und des
   Seitenabschlusses bleiben darunter, auch bei großer Standardschrift (D5, D6). 1 px Luft für eine Bildlaufleiste. */
@media (min-width: 1024px) {
  .abschnitt h2, .boden h2 { font-size: min(clamp(2rem, 1.5rem + 1.8vw, 2.9rem), 9cqi, calc(min(4.5vw, 54px) - 6.5px)); }
  .kopfbereich { padding: 80px 0 104px; }
  .kopfbereich-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; }
}

/* Kopfbild: Fläche mit Punktraster wie programmbild(); Bild 1a bestimmt die Größe (Breite und Höhe setzt der Bild-Umbau) */
.kopfbild { position: relative; padding: 28px 0; min-width: 0; }
.kopfbild::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10%; right: -24px; border-radius: var(--r-xl); background-color: var(--flaeche); background-image: var(--punkte); background-size: 20px 20px; border: 1px solid var(--flaeche-rand); }
@media (min-width: 1024px) { .kopfbild { padding: 40px 0; } .kopfbild::before { left: 16%; right: -56px; } }
.kopfbild-rahmen { position: relative; border-radius: 10px; overflow: hidden; box-shadow: var(--schatten-2); background: var(--weiss); }
.kopfbild-ebene { display: block; }
.kopfbild-ebene img { display: block; width: 100%; height: auto; }

/* Belebung beim Laden (B19 (2); K36 (8)): Bild 1b (Stand B) liegt über 1a und blendet einmal aus. Die Titelleiste
   (in 1b grau, in 1a aktiv) ist per clip-path aus 1b herausgenommen, damit sie nicht mit überblendet. Auslöser ist eine
   kurze Verzögerung nach dem Laden; fill-mode both hält den Endzustand: 1b unsichtbar, also immer Bild 1a.
   Ohne die Klasse „bewegung“ (ohne JavaScript, abgeschaltete Bewegung) ist 1b gar nicht sichtbar. */
.kopfbild-ebene--b { display: none; position: absolute; inset: 0; }
.bewegung .kopfbild-ebene--b { display: block; clip-path: inset(4.4% 0 0 0); animation: kopfbild-wechsel .9s var(--ease) 1.2s both; }
@keyframes kopfbild-wechsel { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Was Palettenkonto kann ---------- */
.funktionen { display: flex; flex-direction: column; gap: 72px; }
.funktion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.funktion h3 { font-size: min(clamp(1.5rem, 1.2rem + 1vw, 2rem), 8cqi); line-height: 1.15; letter-spacing: -.025em; font-weight: 750; }
.funktion-absatz { font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); margin-top: 14px; max-width: 44ch; }
.funktion-liste ul, .modul-punkte ul, .modul-text ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.funktion-liste { margin-top: 22px; }
.funktion-liste li, .modul-punkte li, .modul-text li { position: relative; padding-left: 28px; font-size: .98rem; line-height: 1.55; color: var(--text); }
.funktion-liste li::before, .modul-punkte li::before, .modul-text li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 14px; height: 3px; border-radius: 2px; background: var(--blau); }
.funktion-edition { margin-top: 20px; }
.funktion-bild { min-width: 0; }
.funktion-bild--zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .funktion-bild--zwei { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
@media (min-width: 1024px) {
  .funktionen { gap: 112px; }
  .funktion { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .funktion:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .funktion:nth-child(even) .funktion-bild { order: -1; }
}

/* Weitere Punkte; die Aussage „ohne Cloud“ steht als eigener article daneben, nicht in einer Liste (F6) */
.mehr { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 72px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r-l); box-shadow: var(--schatten-1); }
.mehr-punkt { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.mehr-punkt + .mehr-punkt { border-top: 1px solid var(--rahmen); }
.mehr-symbol { width: 40px; height: 40px; border-radius: 11px; background: var(--grau-1); color: var(--grau-7); display: grid; place-items: center; }
.mehr-symbol .s { width: 20px; height: 20px; }
.mehr h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; font-weight: 700; }
.mehr-text { font-size: .96875rem; line-height: 1.6; color: var(--text-2); }
.mehr-text p + p { margin-top: 8px; }
.mehr-anbieter { font-size: .875rem; color: var(--text-3); }
.funktionen-hinweis { margin-top: 22px; font-size: .9375rem; line-height: 1.6; color: var(--text-2); max-width: 72ch; }
@media (min-width: 1024px) {
  .mehr { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 112px; }
  .mehr-punkt { padding: 28px 30px 30px; }
  .mehr-punkt + .mehr-punkt { border-top: 0; border-left: 1px solid var(--rahmen); }
}

/* ---------- Für Ihre Branche (Karten über karte()) ---------- */
.branchen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.branchen > div { display: flex; }
.branchen .karte { flex: 1; background: var(--grund); }
@media (min-width: 720px) { .branchen { grid-template-columns: 1fr 1fr; } }

/* ---------- Zusatzmodule ---------- */
.module { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 720px) { .module { grid-template-columns: 1fr 1fr; } }
/* Schalter „aus“: Die Kachel Palettenkonto Web steht allein, ohne leere zweite Spalte (Halt E1, Runde 1, Nr. 1) */
.module > .modul:only-child { grid-column: 1 / -1; max-width: 720px; }
.modul { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r-xl); box-shadow: var(--schatten-1); padding: 24px 22px 26px; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .modul { padding: 28px 32px 32px; } }
.modul-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.modul-symbol { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: none; background: var(--blau-50); color: var(--blau); }
.modul-symbol .s { width: 24px; height: 24px; }
.modul--wb .modul-symbol { background: var(--indigo-50); color: var(--indigo); }
.modul h3 { font-size: min(1.5rem, 8cqi); line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
.modul-marke { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-800); background: var(--indigo-50); border: 1px solid var(--indigo-200); border-radius: 999px; padding: .2rem .6rem; }
.modul-unter, .modul-text > p:first-child { font-size: 1.0625rem; line-height: 1.55; color: var(--text-2); margin-top: 14px; }
.modul-punkte, .modul-text ul { margin-top: 20px; }
.modul--wb .modul-text li::before { background: var(--indigo); }
.modul-fuss { margin-top: auto; padding-top: 24px; }
.modul-bedingung { display: flex; align-items: flex-start; gap: .6rem; border-radius: 12px; padding: .8rem 1rem; font-size: .9375rem; line-height: 1.45; font-weight: 500; background: var(--blau-50); color: var(--blau-800); border: 1px solid var(--blau-200); }
.modul-bedingung .s { width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.modul-link { margin-top: 18px; }
/* Kachel Web-Bestätigungen: Wortlaut aus der gemeinsamen Datei (Absatz, Liste, Zusatzmodul mit Link), darunter der Link
   zur Modulseite wie in der Kachel Palettenkonto Web (B128) */
.modul-text { display: flex; flex-direction: column; flex: 1; }
.modul-text ul { margin-bottom: 24px; }
.modul-text > p:last-child { border-radius: 12px; padding: .8rem 1rem; font-size: .9375rem; line-height: 1.45; font-weight: 500; background: var(--indigo-50); color: var(--indigo-800); border: 1px solid var(--indigo-200); margin-top: auto; }
.modul-text > p:last-child a { color: var(--indigo-800); font-weight: 650; }
.modul-text + .modul-fuss { padding-top: 0; }

/* ---------- Druck: eigene Abschnitte lesbar, ohne Belebung und ohne Bild 1b (K36 (8)) ---------- */
@media print {
  .kopfbild-ebene--b { display: none !important; animation: none !important; }
  .kopfbereich, .abschnitt--weiss { background: var(--weiss); }
  .kopfbild::before { display: none; }
  .kopfbild-rahmen, .modul, .mehr, .branchen .karte { box-shadow: none; }
  /* Listenstriche als Rahmen, weil Hintergründe meist nicht gedruckt werden (Halt E1, Runde 1, Nr. 3) */
  .funktion-liste li::before, .modul-punkte li::before, .modul-text li::before { background: none; height: 0; border-top: 3px solid var(--blau); border-radius: 0; }
  .modul--wb .modul-text li::before { border-top-color: var(--indigo); }
}
/* mitteilung.css */
/* Mitteilungsfenster der Startseite (B132): oben rechts unter der Kopfleiste, nicht modal, mit dem X zu schließen.
   Nur mit JavaScript sichtbar ([data-nur-js], skripte/mitteilung.js); unter der Kopfleiste (z-index 50) und unter dem
   Cookie-Fenster (eigene Ebene). Auf dem Handy über die ganze Breite mit 16 px Rand. */
.mitteilung { position: fixed; z-index: 45; top: calc(var(--kopf-h) + 12px); left: 16px; right: 16px; display: flex; align-items: flex-start; gap: 12px; padding: 16px 10px 18px 18px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: var(--r); box-shadow: var(--schatten-2); }
.mitteilung[hidden] { display: none; }
.mitteilung-inhalt { flex: 1; min-width: 0; }
.mitteilung-text { font-weight: 650; line-height: 1.4; color: var(--text); }
.mitteilung .knopf { margin-top: 12px; }
.mitteilung-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -10px 0 0; border: 0; border-radius: var(--knopf-r); background: transparent; color: var(--text-2); cursor: pointer; }
.mitteilung-zu:hover { background: var(--flaeche); color: var(--text); }
.mitteilung-zu .s { width: 1.25rem; height: 1.25rem; }
@media (min-width: 720px) { .mitteilung { left: auto; right: 24px; width: min(24rem, calc(100vw - 48px)); } }
@media (prefers-reduced-motion: no-preference) {
  .mitteilung:not([hidden]) { animation: mitteilung-ein .3s var(--ease) both; }
  @keyframes mitteilung-ein { from { opacity: 0; transform: translateY(-8px); } }
}
/* messung.css */
/* messung.css – Fenster zur Einwilligung in die Anzeigen-Messung (teile/messung.njk; B76, B86, B90, K68; AW-15, AW-17).
   Präfix mb-. Vorgeschobenes Fenster (<dialog>, showModal) in der Mitte; die Seite dahinter ist abgedunkelt und gesperrt
   (kein Klick, kein Rollen). Zwei Ebenen im selben Fenster, je mit rollendem Text und festem Knopfbereich: Passt bis
   320 px und 24 px Standardschrift in den Bildschirm, zu langer Text rollt im Fenster, die Knöpfe bleiben sichtbar.
   Knöpfe je Ebene gleich groß; schmal (auch 390 px) untereinander, breit nebeneinander (Container-Abfragen in em).
   Ohne JavaScript bleibt der <dialog> zu; deshalb steht display nur an .mb[open] und an sichtbaren Ebenen. */
.mb { container: mb / inline-size; width: min(40rem, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--r-l); background: var(--weiss); color: var(--text); box-shadow: var(--schatten-2); overflow: hidden; }
.mb[open] { display: flex; flex-direction: column; }
.mb::backdrop { background: var(--abdunkelung); }
/* Fokus beim Öffnen steht auf dem Fenster bzw. dem Titel der zweiten Ebene; beide sind keine Bedienelemente, daher ohne Rahmen */
.mb:focus, .mb-titel:focus { outline: none; }
.mb-ebene:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mb-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px 8px; font-size: .9375rem; line-height: 1.55; color: var(--text-2); overflow-wrap: break-word; }
.mb-titel { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.mb-knoepfe { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 24px 24px; }
.mb-knoepfe .knopf { width: 100%; min-width: 0; padding-inline: .75rem; overflow-wrap: anywhere; }

/* zweite Ebene: Arten von Speicherung mit Titel und Status bzw. Schalter */
.mb-art { border-top: 1px solid var(--rahmen); padding-top: 14px; margin-top: 14px; }
.mb-art > * + * { margin-top: 6px; }
.mb-art-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-art-titel { min-width: 0; font-weight: 700; color: var(--text); }
label.mb-art-titel { cursor: pointer; }
.mb-art code { font-size: .875em; }
/* Schalter: echtes Kontrollkästchen (role="switch") unsichtbar über der gezeichneten Spur, damit Klick und Tastatur wirken */
.mb-schalter-ort { position: relative; flex: none; width: 44px; height: 26px; }
.mb-schalter-feld { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mb-schalter { position: absolute; inset: 0; border-radius: 13px; background: var(--knopf-rahmen); transition: background-color .15s; }
.mb-schalter::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--weiss); box-shadow: var(--schatten-1); transition: transform .15s var(--ease); }
.mb-schalter-feld:checked + .mb-schalter { background: var(--blau); }
.mb-schalter-feld:checked + .mb-schalter::before { transform: translateX(18px); }
.mb-schalter-feld:focus-visible + .mb-schalter { outline: 3px solid var(--blau); outline-offset: 2px; }

/* breiter: erste Ebene zwei Hauptknöpfe nebeneinander, „Einstellungen“ darunter über die volle Breite;
   zweite Ebene drei Knöpfe nebeneinander */
@container mb (min-width: 30em) {
  .mb-text { padding: 32px 32px 8px; }
  .mb-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 32px 32px; }
  .mb-mehr { grid-column: 1 / -1; }
}
@container mb (min-width: 36em) { .mb-knoepfe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container mb (min-width: 30em) and (max-width: 35.99em) { .mb-knoepfe--drei { grid-template-columns: minmax(0, 1fr); } }

/* Seite hinter dem offenen Fenster rollt nicht (nur am Bildschirm, damit der Druck nichts abschneidet) */
@media screen { :root:has(.mb[open]) { overflow: hidden; } }
/* sanftes Einblenden nur ohne Wunsch nach reduzierter Bewegung; in der ruhigen Fassung keine Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .mb[open], .mb[open]::backdrop { animation: mb-ein .18s ease-out; }
}
@media (prefers-reduced-motion: reduce) { .mb-schalter, .mb-schalter::before { transition: none; } }
@keyframes mb-ein { from { opacity: 0; } }
@media print { .mb, .mb::backdrop { display: none !important; } }
/* Nach der Wahl steht der Fokus am Anfang der Seite (messung.js setzt ihn kurz auf body); ohne Rahmen um die ganze Seite */
body[tabindex="-1"]:focus { outline: none; }