/* ═══ v2 · shell.css — Kopfleiste, Screenflaeche, Glass-Navigation ═══
   Zustaendig NUR fuer die Huelle. Screens stylen sich in css/screens/<name>.css. */

/* ── Kopf des Screens (Turn 96) ──
   Keine Leiste mit Marke mehr: der Inhalt beginnt oben, der Titel steht dort, wo vorher
   das Logo sass. Rechts daneben Glocke und Avatar (32px-Kreise, 44px Trefferfeld ueber
   ::after). Auf Unterscreens ersetzt der Rueckweg-Kreis beide.
   Beim Scrollen verschwimmt der Inhalt knapp unter der Uhr und verschwindet dort. */

/* Keine Titelleiste, kein Deckel: der Inhalt verschwimmt knapp unter der Uhr und
   verschwindet dort — wie in iOS-Apps. Die Schicht liegt ueber dem Inhalt, laesst
   Beruehrungen aber durch. Der Verlauf macht sie nach unten hin durchsichtig, damit
   keine Kante entsteht. */

/* Traegt die verschwimmende Schicht. Der eigene Bezugsrahmen (transform) nimmt sie aus
   dem Ueberziehen heraus — laut css-overscroll-Beschluss wandert sie dann nicht mit. */
/* Gleicher Abstand zur Notch auf allen Screens: das erste Element im Scrollbereich
   bekommt keinen eigenen Abstand oben — der steckt im Polster von .scr-scroll. */
.scr-scroll > *:first-child{margin-top:0}
/* Titelblock: Titel links, Unterzeile darunter. Erste Zeile des Inhalts, scrollt mit. */
.scr-titelblock{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 var(--edge)}
.scr-titelblock .scr-tt{flex:1;min-width:0}
.scr-titelblock h1{margin:0;font:800 var(--fs-title)/1.15 var(--f);letter-spacing:-.6px;color:var(--ink)}

/* Hauptscreens: die Unterzeile sitzt rechtsbuendig in derselben Zeile wie der Titel,
   auf dessen Grundlinie (Home, Team, Feed, Mehr). Unterscreens bleiben zweizeilig. */
#screen-feed .scr-tt,#screen-mehr .scr-tt,
[data-screen="feed"] .scr-tt,[data-screen="mehr"] .scr-tt{
  display:flex;align-items:baseline;gap:var(--sp-4)}
#screen-feed .scr-tt h1,#screen-mehr .scr-tt h1,
[data-screen="feed"] .scr-tt h1,[data-screen="mehr"] .scr-tt h1{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* HOME und TEAM fehlen hier bewusst: dort steht die Unterzeile (Datum bzw. Sportart)
   wieder unter der Ueberschrift, nicht rechtsbuendig in ihrer Zeile. */
#screen-feed .scr-tt .scr-unter,#screen-mehr .scr-tt .scr-unter,
[data-screen="feed"] .scr-tt .scr-unter,[data-screen="mehr"] .scr-tt .scr-unter{
  order:9;margin-left:auto;padding:0;text-align:right;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.scr-ic{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--field);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--hl-text);padding:0;line-height:0}
.scr-ic svg{width:21px;height:21px;display:block}
.scr-ic::after{content:"";position:absolute;inset:-6px}
.scr-ic.voll{width:42px;height:42px;background:var(--hl);border-color:var(--hl);color:var(--hl-ink);
  font:800 var(--fs-sub)/1 var(--f);letter-spacing:0;text-indent:0}
.scr-punkt{position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;
  background:var(--hl);border:2px solid var(--bg)}

/* Screenflaeche: Kopf des Screens steht, darunter der scrollende Inhalt.
   REGEL fuer alle Screens: <div class="scr-head">Kopf</div><div class="scr-scroll">Inhalt</div>
   (fehlt der Rahmen, zieht die Huelle ihn automatisch nach — siehe app.js) */
.sh-main{min-height:100vh}
/* Der Kopf steht fest (inkl. gelber Kante); die Kopfleiste liegt darueber, deshalb traegt
   der Kopf oben deren Hoehe als Polster. Der Inhalt scrollt darunter weg. */
/* 59b: KEIN eigener Hintergrund — die eckige Flaeche des Rahmens lag hinter den runden
   Ecken der Kopf-Ebene und liess den Kasten rechteckig wirken. Die Farbe tragen jetzt
   allein die Kopfleiste (Statusbereich) und die Kopf-Ebene des Screens (mit Rundung). */
.scr-head{position:fixed;top:0;left:0;right:0;z-index:40;background:transparent;
  padding-top:env(safe-area-inset-top);pointer-events:none}
.scr-head > *{pointer-events:auto}
/* Turn 96: keine Leiste mehr. Der Freiraum unter der Uhr gehoert zum Scrollbereich —
   dadurch wandert der Inhalt beim Scrollen bis unter den Statusbereich, wie in iOS-Apps.
   Sichtbar bleibt dort nur die Leiste, die beim Scrollen entsteht. */
/* Der Inhalt beginnt dicht unter der Notch — der Abstand steckt allein hier, damit er
   auf JEDEM Screen gleich ist. Screens duerfen oben kein eigenes Polster setzen. */
.scr-scroll{padding-top:var(--kopf, calc(env(safe-area-inset-top) + 68px));
  padding-bottom:calc(env(safe-area-inset-bottom) + 78px);transition:padding-bottom .22s ease}

/* Tastatur-Modus: die Leiste unten weicht dem Tippen, der Fußfreiraum schrumpft mit. */
:root.tastatur .scr-scroll{padding-bottom:var(--sp-7)}
/* Titelblock als erste Inhaltszeile — einheitlich fuer alle Screens */
/* 74d: Der Rueckweg ist ein 32px-Kreis LINKS NEBEN dem Titel — spart die eigene Zeile.
   Kein Wort, nur der Pfeil in Vereinsgelb; das Ziel steht im Titel des Screens, zu dem er fuehrt. */
.scr-back{position:relative;width:32px;height:32px;border-radius:99px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;color:var(--hl-text)}
.scr-back svg{width:16px;height:16px}
.scr-back::after{content:"";position:absolute;inset:-6px}   /* 44px Trefferfeld */
.scr-titel{display:flex;align-items:center;gap:12px;padding:0 var(--edge)}
.scr-titel h1{flex:1;min-width:0;margin:0;font-size:var(--fs-title);font-weight:800;letter-spacing:-.6px;line-height:1.15;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr-titel h1.gelb{color:var(--hl-text)}   /* Datensatz-Titel, der ein Name ist (69b) */
.scr-titel .scr-akt{border:1px solid var(--hl);border-radius:var(--r-chip);background:transparent;color:var(--hl-text);
  padding:4px 12px;font:700 12.5px/1 var(--f);white-space:nowrap;flex-shrink:0}
/* Unterzeile unter dem Titel: links buendig auf der Inhaltskante, auf allen Tabs gleich. */
.scr-unter{padding:var(--sp-1) 0 0;font-size:var(--fs-sub);color:var(--muted)}
/* Im Titelblock traegt sie die Kante nicht selbst — der Block hat sie schon. */
/* Kompakte Auswahl-Chips (Mockup 57a) — von Feed UND Mehr genutzt, seitlich wischbar */
.scr-chips{display:flex;gap:var(--sp-3);margin:var(--sp-7) var(--edge) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:var(--sp-1)}
.scr-chips::-webkit-scrollbar{display:none}
/* Leiter: das erste Element unter der Titelzeile gehoert zum Kopf (Filter, Umschalter) — 16.
   Der erste eigene Block bzw. die erste Abschnittsueberschrift darunter steht bei 24. */
.scr-titelblock + .scr-chips,.scr-titelblock + .hm-filter,
.scr-titelblock + .tm-seg,.scr-titelblock + .tm-picker{margin-top:var(--sp-5)}
.tm-picker + .tm-seg{margin-top:var(--sp-5)}
.scr-chip{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0;white-space:nowrap;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-chip);
  padding:7px 14px;color:var(--muted);font:600 12.5px var(--f)}   /* gleiches Maß wie .hm-fchip auf Home */
.scr-chip.on{border-color:var(--hl);border-width:1.5px;color:var(--ink);font-weight:700}
.scr-chip i{width:6px;height:6px;border-radius:99px;background:var(--c,var(--muted));flex-shrink:0}

/* Glass-Navigation */
/* Die Leiste ist das Gegenstueck zur Kopf-Flaeche: gleiche Farbe, kein Rahmen, ein weicher
   Schatten — nur nach oben statt nach unten. Das Gelb bleibt dem aktiven Reiter. */
.sh-nav{position:fixed;left:var(--edge);right:var(--edge);bottom:max(4px, calc(env(safe-area-inset-bottom) - 10px));z-index:60;   /* tiefer, aber nie unter der Home-Leiste */
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 8px;border-radius:24px;
  background:color-mix(in srgb, var(--head) 88%, transparent);
  border:0;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 -14px 30px -18px rgba(0,0,0,.8), 0 18px 40px -22px rgba(0,0,0,.7);
  transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .18s ease;will-change:transform}
:root.tastatur .sh-nav{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
:root.tastatur .tm-toast{bottom:calc(env(safe-area-inset-bottom) + 20px)}
[data-theme="light"] .sh-nav{box-shadow:0 -12px 26px -20px rgba(20,28,46,.35), 0 14px 30px -24px rgba(20,28,46,.3)}
@media (prefers-reduced-motion:reduce){.sh-nav{transition:none}}
.sh-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:16px;
  color:var(--muted);font-size:11.25px;font-weight:700}
.sh-tab svg{width:23px;height:23px}
.sh-tab.on{color:var(--ink)}
.sh-tab.on svg{color:var(--hl-text)}
.sh-tab.on span{color:var(--hl-text)}

/* Ladezustand eines Screens */
.sh-load{display:flex;align-items:center;gap:12px;padding:24px var(--edge);color:var(--muted);font-size:13.25px}
.sh-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--hl);
  animation:sh-spin .8s linear infinite}
@keyframes sh-spin{to{transform:rotate(360deg)}}

/* Kurzer Hinweis fuer noch nicht gebaute Wege (von TEAM und MEHR genutzt) */
.tm-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-chip);padding:8px 16px;
  font:600 13.25px/1 var(--f);color:var(--ink);box-shadow:var(--shadow);z-index:150}

/* Umschalter (Verein/Sportart, Mannschaften) entscheiden, WAS die Liste zeigt — sie
   bleiben deshalb oben erreichbar und wandern in den festen Kopf. */

/* ── Die feste Leiste (Turn 99a/99b) ──
   Fest ist nur eine schmale Zeile: Logo links, Avatar rechts. Der Titel gehoert zum Inhalt
   und scrollt weg; beim Weiterscrollen haengt er sich klein als Brotkrume an das Logo.
   Getrennt wird erst, wenn Inhalt darunter wegläuft — dann zieht eine Haarlinie auf
   (kein Schatten: der taeuscht eine Ebene vor, die es nicht gibt). */
.scr-leiste{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg);
  display:flex;align-items:center;gap:var(--sp-3);
  padding:calc(env(safe-area-inset-top) + var(--sp-2)) var(--edge) var(--sp-3);
  border-bottom:1px solid transparent;transition:border-color .22s ease}
.scr-leiste.eng{border-bottom-color:rgba(255,255,255,.09)}
[data-theme="light"] .scr-leiste.eng{border-bottom-color:rgba(20,28,46,.1)}
.scr-logo{flex-shrink:0;height:27px;width:auto;display:block}
/* Die Brotkrume erscheint erst beim Scrollen: „esszehNET · Als Naechstes". */
.scr-krume{flex:1;min-width:0;display:flex;align-items:center;height:23px;
  transform:translateY(1px);   /* Grossbuchstaben sitzen in ihrer Box etwas hoch */
  font:700 var(--fs-row)/1 var(--f);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transition:opacity .22s ease}
.scr-leiste.eng .scr-krume{opacity:1}
/* Das Trennzeichen ist Darstellung, kein Text — so bleibt der Abstand einstellbar. */
.scr-krume::before{content:"\00b7";margin-right:7px;flex-shrink:0}
.scr-krume:empty::before{content:none}
.scr-leiste .scr-ic.voll{width:38px;height:38px;margin-left:auto}
.scr-leiste.eng .scr-ic.voll{margin-left:0}
/* Der Punkt am Avatar meint: etwas verlangt dich. Deshalb rot, nicht gelb. */
.scr-leiste .scr-punkt{background:var(--bad);top:-1px;right:-1px;width:11px;height:11px}

/* Eigenes Profilbild in der Leiste: fuellt den Kreis, ersetzt die Initialen. */
.scr-leiste .scr-ic.bild{background:var(--field);border-color:var(--line);overflow:visible}
.scr-bild{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}