/* BRYZE Ads: Hülle (Kopfzeile, Menü, Banner) und gemeinsame Bausteine. Seitenstile stehen in seiten.css. */

.sprung { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--text); color: var(--auf-pflaume); border-radius: 10px; font-weight: 600; }
.sprung:focus { top: 8px; }

/* ---------------------------------------------------------------- Hülle */
.huelle { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-bottom: calc(var(--unterleiste-hoehe) + env(safe-area-inset-bottom, 0px)); }
.spalte { min-width: 0; }
.inhalt { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px max(var(--rand), env(safe-area-inset-left, 0px)) 48px max(var(--rand), env(safe-area-inset-right, 0px)); outline: none; }
.noscript { padding: 24px; }

/* Kopfzeile: dunkel in Pflaume (Handy). Am Desktop hell neben dem dunklen Menü. */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: var(--kopf-hoehe); padding: 6px max(var(--rand), env(safe-area-inset-right, 0px)) 6px max(var(--rand), env(safe-area-inset-left, 0px)); background: var(--text); color: var(--auf-pflaume); }
.kopf__leistenknopf { display: none; }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.marke { display: inline-flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.marke__wort { font: 800 1.35rem/1 var(--schrift-kopf); letter-spacing: .01em; background-image: linear-gradient(var(--akzent), var(--akzent)); background-repeat: no-repeat; background-size: 100% 36%; background-position: 0 92%; }
.marke__zusatz { font: 600 1rem/1 var(--schrift-text); opacity: .9; }
.kopf .marke__wort { color: var(--auf-pflaume); background-image: linear-gradient(var(--akzent), var(--akzent)); }
.kopf .marke__wort { background-size: 100% 22%; background-position: 0 100%; }

.stand, .person { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tipp); padding: 0 12px; min-width: 0; border: 1.5px solid rgba(247, 238, 223, .4); border-radius: 999px; background: transparent; color: inherit; font: 600 .875rem/1.2 var(--schrift-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stand:hover, .person:hover { background: rgba(247, 238, 223, .1); }
.stand-text { display: grid; font-size: .75rem; line-height: 1.2; font-weight: 400; white-space: nowrap; text-align: left; }
.stand-alter { color: rgba(247, 238, 223, .78); }
.stand-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); flex: none; }
.stand-punkt--gelb { background: var(--gelb); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.stand-punkt--rot { background: var(--rot); border-radius: 3px; }
.person-kreis { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--akzent); color: var(--text); font: 800 .9rem/1 var(--schrift-kopf); flex: none; }
.person-name { display: none; }
.kopf :focus-visible { outline-color: var(--auf-pflaume); box-shadow: 0 0 0 5px rgba(185, 233, 220, .55); }

/* Menü links (Desktop) */
.leiste { display: none; }

/* Untere Leiste (Handy) */
.unterleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--flaeche); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom, 0px); }
.unterleiste ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; max-width: 560px; margin-inline: auto; }
.unterleiste__eintrag { appearance: none; border: 0; background: transparent; width: 100%; min-height: var(--unterleiste-hoehe); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; color: var(--leise); text-decoration: none; font: 600 .75rem/1.1 var(--schrift-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unterleiste__ikone { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .15s ease; }
.unterleiste__ikone .ikone { width: 24px; height: 24px; }
.unterleiste__eintrag[aria-current="page"] { color: var(--text); }
.unterleiste__eintrag[aria-current="page"] .unterleiste__ikone { background: var(--akzent); }
.unterleiste__zaehler, .leiste__zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--text); color: var(--auf-pflaume); font: 600 .75rem/1 var(--schrift-zahl); }
.unterleiste__zaehler { position: absolute; top: -6px; right: 2px; }

/* Banner unter der Kopfzeile */
.banner-stapel { display: grid; gap: 6px; padding: 10px max(var(--rand), env(safe-area-inset-right, 0px)) 0 max(var(--rand), env(safe-area-inset-left, 0px)); max-width: 1180px; margin: 0 auto; }
.banner-stapel:empty { display: none; }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 7px 12px; border-radius: var(--radius-klein); border: 1px solid var(--linie); border-left-width: 5px; background: var(--flaeche); font-size: .875rem; line-height: 1.35; }
.banner__link { font-weight: 600; white-space: nowrap; }
.banner--gelb { background: var(--gelb-flaeche); border-color: var(--gelb); }
.banner--rot { background: var(--rot-flaeche); border-color: var(--rot); }
.banner--neutral { border-left-color: var(--grau); }
.banner--mint { background: var(--akzent); border-color: var(--akzent-tief); }
.banner p { flex: 1 1 12rem; }

/* Rückmeldung unten */
.toast-ort { position: fixed; left: 0; right: 0; bottom: calc(var(--unterleiste-hoehe) + 12px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; z-index: 60; pointer-events: none; padding: 0 var(--rand); }
.toast { display: inline-block; max-width: min(34rem, 100%); padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--auf-pflaume); font-weight: 600; font-size: .9375rem; box-shadow: var(--schatten); animation: toast-ein .18s ease-out; }
.toast--fehler { background: #7C2621; }
@keyframes toast-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Bausteine */
.stapel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stapel--eng { gap: 8px; }
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.reihe--zwischen { justify-content: space-between; }
.reihe--unten { align-items: flex-end; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; box-shadow: var(--schatten); min-width: 0; }
.karte--warm { background: var(--flaeche-warm); }
.karte--flach { box-shadow: none; }
.karte > h2, .karte > h3 { margin-bottom: 8px; }
.abschnitt { display: grid; gap: 12px; }
.abschnitt > h2 { margin-top: 8px; }
.ampel-mit-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.seitenkopf__text { display: grid; gap: 4px; min-width: 0; }
.seitenkopf h1:focus { outline: none; }
.seitenkopf__unter { font-size: .9375rem; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tipp); padding: 0 8px 0 0; font-weight: 600; text-decoration: none; }
.zurueck .ikone { width: 22px; height: 22px; }

/* Kachel mit großer Zahl */
.kachel { display: grid; align-content: start; gap: 4px; padding: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); min-width: 0; box-shadow: var(--schatten); }
.kachel__label { font-size: .875rem; color: var(--leise); font-weight: 600; }
.kachel__wert { font-size: clamp(1.2rem, 5.2vw, 2rem); line-height: 1.1; font-weight: 400; overflow-wrap: anywhere; }
.kachel__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8125rem; color: var(--leise); }
.kachel__zusatz { color: var(--leise); }

.datenliste { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 8px 14px; margin: 0; font-size: .9375rem; }
.datenliste dt { color: var(--leise); font-weight: 600; }
.datenliste dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) { .datenliste { grid-template-columns: 1fr; gap: 0; } .datenliste dd { margin-bottom: 10px; } }

/* Zustände */
.geruest { display: grid; gap: 12px; }
.geruest__block { border-radius: var(--radius); background: linear-gradient(100deg, rgba(33, 23, 37, .06) 20%, rgba(33, 23, 37, .12) 40%, rgba(33, 23, 37, .06) 60%) 0 0 / 220% 100%; animation: schimmer 1.6s linear infinite; }
@keyframes schimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.leer { display: grid; justify-items: start; gap: 12px; padding: 24px 20px; background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--radius); }
.leer--fehler { border-style: solid; border-color: var(--rot); background: var(--rot-flaeche); }
.leer--hinweis { border-style: solid; border-color: var(--linie); background: var(--flaeche-warm); }
.leer h2 { font-size: 1.2rem; }
.langsam { padding: 8px 0; }

.meldung { padding: 10px 12px; border-radius: var(--radius-klein); font-size: .9375rem; line-height: 1.4; border: 1px solid var(--linie); background: var(--flaeche); }
.meldung--fehler { background: var(--rot-flaeche); border-color: var(--rot); font-weight: 600; }
.meldung--ok { background: var(--gruen-flaeche); border-color: var(--gruen); }
.meldung--hinweis { background: var(--gelb-flaeche); border-color: var(--gelb); }

/* Umschalter */
.umschalter { display: inline-flex; border: 1.5px solid var(--text); border-radius: var(--radius-klein); overflow: hidden; background: var(--flaeche); }
.umschalter__knopf { appearance: none; border: 0; background: transparent; min-height: var(--tipp); min-width: 64px; padding: 0 16px; font: 600 .9375rem/1 var(--schrift-text); color: var(--text); cursor: pointer; }
.umschalter__knopf + .umschalter__knopf { border-left: 1px solid var(--linie-stark); }
.umschalter__knopf[aria-pressed="true"] { background: var(--text); color: var(--auf-pflaume); }
.umschalter__knopf:focus-visible { outline-offset: -4px; border-radius: 8px; box-shadow: none; }

/* Reiter */
.reiter { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--linie); margin-bottom: 16px; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter__knopf { appearance: none; border: 0; border-bottom: 3px solid transparent; background: transparent; min-height: var(--tipp); padding: 0 14px; font: 600 1rem/1 var(--schrift-text); color: var(--leise); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.reiter__knopf[aria-selected="true"] { color: var(--text); border-bottom-color: var(--akzent-tief); box-shadow: inset 0 -1px 0 var(--text); }
.reiter__zaehler { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--text); color: var(--auf-pflaume); font: 400 .75rem/1 var(--schrift-zahl); }
.reiter__feld { outline: none; }

/* Blatt: Dialog von unten (Handy) oder mittig (Desktop) */
.blatt { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 640px; max-height: min(90vh, 900px); border-radius: 22px 22px 0 0; background: var(--seite); color: var(--text); box-shadow: 0 -10px 40px rgba(33, 23, 37, .35); display: flex; flex-direction: column; overflow: hidden; }
.blatt:not([open]) { display: none; }
.blatt::backdrop { background: rgba(33, 23, 37, .55); }
.blatt--breit { max-width: 860px; }
.blatt__kopf .knopf--icon { flex: none; min-width: var(--tipp); min-height: var(--tipp); }
.blatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 10px var(--rand); border-bottom: 1px solid var(--linie); }
.blatt__koerper { padding: 16px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.blatt__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linie); background: var(--flaeche-warm); }
.blatt[open] { animation: blatt-hoch .22s ease-out; }
@keyframes blatt-hoch { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.blattliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.blattliste__eintrag { appearance: none; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; border-radius: var(--radius-klein); background: var(--flaeche); color: var(--text); text-decoration: none; font: 600 1.0625rem/1.2 var(--schrift-text); cursor: pointer; text-align: left; }
.blattliste__eintrag:hover { background: var(--flaeche-warm); }
.blattliste__eintrag .ikone { width: 24px; height: 24px; flex: none; }
.blattliste__pfeil { margin-left: auto; opacity: .5; }
.sitzungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sitzungen__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--flaeche); border-radius: var(--radius-klein); border: 1px solid var(--linie); }
.sitzungen__name { font-weight: 600; }

/* Messleiste, Trend, Balken, Funnel */
.messleiste { display: grid; gap: 4px; padding: 6px 0 2px; }
.messleiste__spur { position: relative; height: 16px; border-radius: 8px; overflow: visible; background: var(--grau-flaeche); }
.messleiste__zone { position: absolute; top: 0; bottom: 0; }
.messleiste__zone--gruen { background: #CFE6D6; border-radius: 8px 0 0 8px; }
.messleiste__zone--gelb { background: #F1E0AE; }
.messleiste__zone--rot { background: #EFCBC6; border-radius: 0 8px 8px 0; }
.messleiste__spanne { position: absolute; top: 5px; height: 6px; background: rgba(33, 23, 37, .42); border-radius: 3px; }
.messleiste__spanne--offen { background: linear-gradient(90deg, rgba(33, 23, 37, .42), rgba(33, 23, 37, .1)); }
.messleiste__punkt { position: absolute; top: -5px; width: 4px; height: 26px; margin-left: -2px; background: var(--text); border-radius: 2px; }
.messleiste__marken { position: relative; height: 20px; font: 400 .75rem/1 var(--schrift-zahl); color: var(--leise); }
.messleiste__marke { position: absolute; top: 4px; white-space: nowrap; padding-left: 3px; border-left: 1px solid var(--linie-stark); }
.messleiste__marke--links { transform: translateX(-100%); padding-left: 0; padding-right: 3px; border-left: 0; border-right: 1px solid var(--linie-stark); }

.trend { margin: 0; display: grid; gap: 4px; }
.trend__titel { display: flex; justify-content: space-between; gap: 8px; font-size: .875rem; font-weight: 600; }
.trend__svg { width: 100%; height: 84px; display: block; overflow: visible; }
.trend__achse { stroke: var(--linie-stark); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend__linie { fill: none; stroke: var(--text); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.trend__flaeche { fill: var(--akzent); opacity: .55; stroke: none; }
.trend__achsentext { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--leise); }

.balkenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.balkenliste__zeile { display: grid; grid-template-columns: minmax(0, 9.5rem) 1fr auto; align-items: center; gap: 10px; font-size: .875rem; }
.balkenliste__name { overflow-wrap: anywhere; }
.balkenliste__spur { height: 10px; border-radius: 5px; background: var(--grau-flaeche); overflow: hidden; }
.balkenliste__balken { display: block; height: 100%; background: var(--text); border-radius: 5px; }
.balkenliste__text { font-size: .8125rem; color: var(--leise); text-align: right; white-space: nowrap; }

.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.funnel__zeile { display: grid; grid-template-columns: 5.5rem 1fr 4rem; grid-template-areas: "name spur zahl" ". rate leck"; align-items: center; gap: 2px 10px; min-height: 44px; }
.funnel__name { grid-area: name; font-weight: 600; }
.funnel__spur { grid-area: spur; height: 18px; border-radius: 9px; background: var(--grau-flaeche); overflow: hidden; }
.funnel__balken { display: block; height: 100%; background: rgba(33, 23, 37, .55); border-radius: 9px; }
.funnel__zahl { grid-area: zahl; text-align: right; }
.funnel__rate { grid-area: rate; font-size: .75rem; }
.funnel__leck { grid-area: leck; justify-self: end; }
.funnel__zeile--leck { padding: 8px 10px; margin: 0 -10px; background: var(--flaeche); border: 2px solid var(--text); border-radius: var(--radius-klein); }
.funnel__zeile--leck .funnel__balken { background: var(--text); }
.funnel__zeile--leck .funnel__spur { background: var(--akzent); }

.vergleich { display: grid; gap: 10px; }
.vergleich__zeile { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 3.25rem; align-items: center; gap: 10px; font-size: .9375rem; }
.vergleich__spur { height: 22px; border-radius: 11px; background: var(--grau-flaeche); overflow: hidden; }
.vergleich__balken { display: block; height: 100%; border-radius: 11px; }
.vergleich__balken--meta { background: var(--akzent-tief); }
.vergleich__balken--echt { background: var(--text); }
.vergleich__zahl { text-align: right; font-size: 1.1rem; }

/* ---------------------------------------------------------------- Desktop */
@media (min-width: 960px) {
  .huelle { grid-template-columns: var(--leiste-breite) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "leiste kopf" "leiste spalte"; padding-bottom: 0; }
  .huelle[data-leiste="schmal"] { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
  .kopf { grid-area: kopf; background: var(--seite); color: var(--text); border-bottom: 1px solid var(--linie); padding-inline: 24px; }
  .kopf .marke { display: none; }
  .kopf__leistenknopf { display: inline-flex; border-color: var(--linie); background: transparent; }
  .kopf__rechts { margin-left: auto; }
  .stand, .person { border-color: var(--linie-stark); }
  .stand:hover, .person:hover { background: rgba(33, 23, 37, .06); }
  .person-name { display: inline; }
  .stand-text { display: inline; font-size: .8125rem; }
  .stand-alter::before { content: ", "; }
  .stand-alter { color: var(--leise); }
  .kopf :focus-visible { outline-color: var(--text); box-shadow: 0 0 0 5px var(--akzent); }
  .spalte { grid-area: spalte; }
  .inhalt { padding: 28px 24px 64px; }
  .banner-stapel { padding: 16px 24px 0; }
  .unterleiste { display: none; }
  .toast-ort { bottom: 24px; }
  .blatt { margin: auto; border-radius: 22px; max-height: 86vh; }
  .blatt[open] { animation-name: blatt-mitte; }

  .leiste { grid-area: leiste; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; background: var(--text); color: var(--auf-pflaume); padding: 16px 12px; overflow-y: auto; overflow-x: hidden; }
  .leiste__marke { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 10px 20px; color: inherit; text-decoration: none; min-height: 48px; }
  .leiste__marke .marke__wort { color: var(--auf-pflaume); background-size: 100% 22%; background-position: 0 100%; }
  .leiste__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .leiste__trenner { height: 1px; margin: 10px 8px; background: rgba(247, 238, 223, .18); }
  .leiste__eintrag { appearance: none; position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--radius-klein); background: transparent; color: rgba(247, 238, 223, .86); text-decoration: none; font: 600 1rem/1.2 var(--schrift-text); cursor: pointer; text-align: left; }
  .leiste__eintrag .ikone { width: 24px; height: 24px; flex: none; }
  .leiste__eintrag:hover { background: rgba(247, 238, 223, .09); color: var(--auf-pflaume); }
  .leiste__eintrag[aria-current="page"] { background: rgba(247, 238, 223, .13); color: var(--auf-pflaume); }
  .leiste__eintrag[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 5px; border-radius: 0 4px 4px 0; background: var(--akzent); }
  .leiste__eintrag:focus-visible { outline-color: var(--auf-pflaume); box-shadow: 0 0 0 5px rgba(185, 233, 220, .5); }
  .leiste__zaehler { margin-left: auto; background: var(--akzent); color: var(--text); }
  .leiste__fuss { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(247, 238, 223, .18); }
  .huelle[data-leiste="schmal"] .leiste__text, .huelle[data-leiste="schmal"] .marke__zusatz { display: none; }
  .huelle[data-leiste="schmal"] .leiste__eintrag { justify-content: center; padding: 0; }
  .huelle[data-leiste="schmal"] .leiste__zaehler { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 18px; height: 18px; }
  .huelle[data-leiste="schmal"] .leiste__marke { justify-content: center; padding-inline: 0; }
}
@keyframes blatt-mitte { from { transform: translateY(14px) scale(.985); opacity: .4; } to { transform: none; opacity: 1; } }