@layer screens{
/* ═══ 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:var(--sp-4);min-height:42px;padding:0 var(--edge)}
.scr-titelblock.scr-hasback{gap:var(--sp-3)}
.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)}

/* Die Unterzeile steht auf allen Screens links unter der Ueberschrift — nie rechtsbuendig
   in deren Zeile. Ein langer Titel kuerzt, die Unterzeile darf umbrechen. */
.scr-titelblock .scr-tt h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Frei benannte Datensaetze muessen identifizierbar bleiben; kein Schrumpfen der
   Schrift. Statische Screen-Titel behalten ihren bestehenden Einzeilenvertrag. */
.scr-titelblock.scr-datensatz{align-items:flex-start}
.scr-titelblock.scr-datensatz .scr-tt h1{white-space:normal;overflow-wrap:anywhere}
.scr-titelblock .scr-tt .scr-unter{display:flex;align-items:center;gap:6px;text-align:left}
.scr-emo{font-size:12.5px;font-weight:400;line-height:1;flex:0 0 auto}

.scr-ic{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-field);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-text);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) */
/* 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:var(--z-kopf);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) + var(--nav-overlap) + var(--sp-2));
  transition:padding-bottom var(--motion-content) var(--ease-state)}

/* 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.
   Rueckweg-Vertrag v3765: freier Chevron exakt auf der Inhaltskante, 20px sichtbare
   Breite, 8px bis Titel/Untertitel. Das unsichtbare Trefferfeld bleibt mindestens 44px. */
.scr-back{position:relative;flex:0 0 var(--sp-6);width:var(--sp-6);height:var(--sp-8);
  margin:0;padding:0;border:0;background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:flex-start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scr-back svg{width:var(--sp-6);height:var(--sp-6);display:block}
.scr-back::after{content:"";position:absolute;inset:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-4))} /* mindestens 44px Trefferfeld */
.scr-titelblock h1.gelb{color:var(--hl-text)}   /* Datensatz-Titel, der ein Name ist (69b) */
/* 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 *//* gleiches Maß wie .hm-fchip auf Home */

/* 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:0;right:0;bottom:0;z-index:var(--z-nav);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-radius:0;
  padding:8px var(--edge) max(4px, calc(env(safe-area-inset-bottom) - 6px));
  background:color-mix(in srgb, var(--head) 72%, transparent);
  border:0;border-top:1px solid var(--line);
  box-shadow:none;
  transition:transform var(--motion-nav) var(--ease-sheet),opacity var(--motion-state) var(--ease-state);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)}

.sh-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 2px;border-radius:14px;
  color:var(--muted);font-size:11.25px;font-weight:700;line-height:1.1}
.sh-tab svg{width:25px;height:25px}
/* Das Vereinswappen im TEAM-Reiter: eigene Farben, deshalb ein Bild. Im Ruhezustand
   zurueckgenommen, im aktiven Reiter voll da. */
.sh-wappen{width:25px;height:25px;display:block;object-fit:contain;opacity:.5}
.sh-tab.on .sh-wappen{opacity:1}
/* Farbe nur im Wort — das Zeichen bleibt in allen Reitern gleich ruhig. */
.sh-tab.on{color:var(--hl-text)}
.sh-tab.on svg{color:var(--ink)}
.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-text);
  animation:sh-spin var(--motion-spinner) var(--ease-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(--surface);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:var(--z-toast)}

/* Rueckmeldung innerhalb der Card: ueber ihrem Inhalt, ohne Layoutverschiebung. */
.pf-wrap > .tm-toast-soft{position:absolute;bottom:var(--sp-6);max-width:calc(100% - var(--edge) * 2);width:max-content;box-sizing:border-box;line-height:1.45;text-align:center;pointer-events:none}

/* 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,.au-welcome-head{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--bg);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;align-items:center;gap:var(--sp-3);min-height:var(--shell-head-height);
  padding:calc(env(safe-area-inset-top) + var(--sp-2)) var(--edge) var(--sp-3);
  border-bottom:1px solid transparent;transition:border-color var(--motion-content) var(--ease-state)}
.scr-leiste.eng,.au-welcome-head.eng{border-bottom-color:var(--paint-scr-leiste-border-bottom-color)}

.scr-logo,.au-welcome-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;
  /* Die Krume richtet sich am SCHRIFTKOERPER des Logos aus, nicht an seiner Box:
     der Aufstrich des "h" macht das Bild oben hoeher, die Mitte der Buchstaben
     liegt dadurch bei 64,8 % statt 50 % — bei 27px Logohoehe sind das 4px. */
  transform:translateY(4px);
  font:700 var(--fs-row)/1 var(--f);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transition:opacity var(--motion-content) var(--ease-state)}
.scr-leiste.eng .scr-krume{opacity:1}
/* Das Trennzeichen ist Darstellung, kein Text — so bleibt der Abstand einstellbar. */
.scr-krume::before{content:"\00a0\00a0\00b7\00a0\00a0";margin-right:0;flex-shrink:0}
.scr-krume:empty::before{content:none}
.scr-leiste .scr-ic.voll{width:var(--shell-head-row-size);height:var(--shell-head-row-size);margin-left:auto;border-radius:var(--r-field)}
.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: Kader-Form statt Kreis, ersetzt die Initialen. */
.scr-leiste .scr-ic.bild{background:var(--field);border-color:var(--line);overflow:visible}

/* Reine Eltern haben keine Navigationsleiste — dann faellt auch ihr Fussfreiraum weg. */
:root.ohne-leiste .sh-main{padding-bottom:max(20px, env(safe-area-inset-bottom))}
:root.ohne-leiste .sh-nav{display:none}

/* Ansehen-Modus (Schalter „Mannschaften"): die Leiste traegt nur Home und Teams. */
.sh-nav.nur-teams .sh-tab[data-screen="feed"],
.sh-nav.nur-teams .sh-tab[data-screen="mehr"]{display:none}

/* Wechsel in die Tiefe (MEHR → Mitglieder) und zurueck: genau der Wechsel der
   Mehrseiten-Karten — dieselben Keyframes wie .pf-page, damit es sich gleich anfühlt. */
.sh-main{min-height:100vh;position:relative;overflow-x:hidden}
/* ═══════════════════════════════════════════════════════════════════════════
   SEITENWECHSEL ZWISCHEN SCREENS
   Jeder Screen zeichnet mit host.innerHTML = … und loescht damit alles im Host —
   auch die Seite, die gerade hinausfahren soll. Die abgehende Seite liegt deshalb
   in einer eigenen Lage AM BODY, wo kein Screen sie erreicht.
   Echte Navigation nutzt dieselbe Vor/Zurueck-Bewegung wie Card-Unterseiten.
   ═══════════════════════════════════════════════════════════════════════════ */
.sh-ueber{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-ueberlage);overflow:hidden;
  background:var(--klar-bg);opacity:1;
  transition:opacity var(--motion-cover) var(--ease-cover);pointer-events:none}
.sh-ueber.aus{opacity:0}
/* Die Übergangsebene besitzt dieselbe neutrale Grundfläche wie der Screen. */
.sh-ueber.nurinhalt > .sh-ueber-inhalt{position:relative;z-index:1}
/* Diese Opacity-Blende bleibt NUR fuer Inhaltsumschalter innerhalb desselben Screens.
   Echte Screen-Navigation laeuft ueber den zentralen Motion-Contract in motion.css. */
.sh-ueber-inhalt{opacity:1;transition:opacity var(--motion-content) var(--ease-content-out)}
.sh-ueber-inhalt.aus{opacity:0}

/* Portrait-Vertrag: Auf Smartphones ist Querformat kein eigener App-Zustand. Browser,
   die den nativen Orientation-Lock nicht durchsetzen, bekommen deshalb nur diesen
   neutralen Hinweis statt eines breitgezogenen App-Layouts. Tablets/Desktop bleiben frei. */
.ez-portrait-guard{display:none}
}