/* Trikot-Look fuer Podcast-Seiten. Farben kommen per CSS-Variablen aus POD (daten.js). */
/* Trikot-Look: Heimtrikot weiß, Hose rot, Stutzen blau. Theme-Werte kommen pro Podcast aus THEME unten. */
:root{
  --trikot:#FFFFFF; --hose:#D50F2D; --stutzen:#0A3F86; --tinte:#0B1F3A; --tinte-2:#5A6B82;
  --flaeche:#F3F5F8; --linie:#DCE2EA;
  color-scheme: light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);scroll-behavior:smooth}
body{margin:0;background:var(--trikot);color:var(--tinte);font:400 1.0625rem/1.6 "Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--hose);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;line-height:.98;margin:0}

/* Kopf mit blauem Stutzenrand */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--trikot)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:4px solid var(--stutzen)}
.kopf{display:flex;align-items:center;gap:16px;height:68px}
.pod-marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.pod-marke img{width:38px;height:38px;object-fit:contain}
.pod-marke strong{font-family:"Barlow Condensed",sans-serif;font-size:1.6rem;line-height:1}
.pod-marke small{display:block;font-size:.75rem;color:var(--tinte-2);margin-top:2px}
.kopf nav{margin-left:auto;display:flex;gap:22px;font-weight:600;font-size:.9375rem}
.kopf nav a{text-decoration:none}
.kopf nav a:hover{color:var(--hose)}
.sprache{display:flex;border:1px solid var(--linie);border-radius:999px;padding:3px}
.sprache button{all:unset;cursor:pointer;padding:4px 12px;border-radius:999px;font-weight:600;font-size:.875rem;color:var(--tinte-2)}
.sprache button[aria-pressed="true"]{background:var(--stutzen);color:#fff}
.sprache button:focus-visible{outline:3px solid var(--hose)}

/* Hero: das Trikot selbst. Weißes Hemd oben, rote Hose als Band, blaue Stutzen als Abschluss */
.hero{position:relative;overflow:hidden;padding:72px 0 0;background:var(--trikot)}
.hero::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,rgba(11,31,58,.025) 0 2px,transparent 2px 9px);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding-bottom:64px}
.logo-slot{display:inline-flex;align-items:center;gap:14px;margin-bottom:22px}
.logo-slot .pl{width:76px;height:76px;border-radius:50%;border:2px dashed var(--stutzen);display:grid;place-items:center;font-size:.75rem;color:var(--stutzen);text-align:center;line-height:1.1}
.logo-slot img{width:64px;height:64px;object-fit:contain}
.logo-slot .x{font-size:1.4rem;color:var(--tinte-2);font-weight:500}
.hero h1{font-size:clamp(3rem,8vw,6.4rem);max-width:11ch}
.hero p{font-size:clamp(1.125rem,2vw,1.3rem);max-width:36ch;margin:18px 0 28px;color:var(--tinte-2)}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--hose);color:#fff;font-weight:600;text-decoration:none;padding:14px 24px;border-radius:6px;border:0;cursor:pointer;font-size:1rem}
.knopf:hover{filter:brightness(1.08)}
.knopf.leise{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1.5px var(--tinte)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.figur{justify-self:center;width:min(380px,100%)}
.figur svg{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(11,31,58,.18))}
/* Echtes Heimtrikot als großer Hintergrund rechts; ohne Datei bleibt die Zeichnung */
.hero-oben{position:relative;overflow:hidden;margin-top:-72px;padding-top:72px}
.trikot-bg{position:absolute;right:2%;top:24px;bottom:24px;height:calc(100% - 48px);max-width:56%;object-fit:contain;object-position:right center;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(11,31,58,.22))}
.hero.mit-foto .figur{visibility:hidden}
.hero.mit-foto .hero-oben::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--trikot) 0%,var(--trikot) 36%,rgba(255,255,255,0) 58%);pointer-events:none}
.hero.mit-foto .hero-grid{z-index:1}
/* Wappen als Hintergrund: groß, rechts angeschnitten, ohne Schatten */
.hero.ist-wappen .trikot-bg{right:-6%;top:-6%;bottom:auto;height:112%;max-width:60%;filter:none;opacity:.95}
.hero.ist-wappen .hero-oben::after{background:linear-gradient(90deg,var(--trikot) 0%,var(--trikot) 40%,rgba(255,255,255,.55) 56%,rgba(255,255,255,0) 72%)}
.hero.ist-wappen .logo-slot img{display:none}
.hero.ist-wappen .logo-slot .x{display:none}
@media (max-width:900px){ .trikot-bg{position:static;transform:none;height:auto;max-width:70%;display:block;margin:0 auto -20px} .hero.mit-foto .hero-oben::after{display:none} .hero.mit-foto .figur{display:none} }
.hose-band{height:22px;background:var(--hose)}
.stutzen-band{height:12px;background:repeating-linear-gradient(90deg,var(--stutzen) 0 46px,#fff 46px 52px)}

section{padding:84px 0}
.kopfzeile{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.kopfzeile h2{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.kopfzeile p{margin:10px 0 0;color:var(--tinte-2);max-width:52ch}

/* Folgen mit Szenen */
.folgen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.folge{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:10px;overflow:hidden;background:#fff}
.folge .platz{position:relative;aspect-ratio:16/9;background:repeating-linear-gradient(90deg,#2E7D4F 0 34px,#348A58 34px 68px)}
.folge .platz svg{position:absolute;inset:0;width:100%;height:100%}
.folge .spiel{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);padding:5px 10px 5px 6px;border-radius:999px;font-weight:600;font-size:.8125rem}
.folge .spiel img{width:22px;height:22px;object-fit:contain}
.folge .inhalt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.folge h3{font-size:1.45rem}
.folge .meta{font-size:.875rem;color:var(--tinte-2)}
.folge .fuss{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:10px}
.folge .szenen{font-weight:600;font-size:.875rem;color:var(--stutzen)}
.folge .los{font-weight:600;font-size:.9375rem;color:var(--hose);text-decoration:none}
.folge.neu{border-color:var(--stutzen);box-shadow:0 0 0 1px var(--stutzen)}
.folge .badge{position:absolute;right:12px;top:12px;background:var(--hose);color:#fff;font-weight:600;font-size:.75rem;padding:4px 9px;border-radius:999px}

/* Tickets: Stadionlogik, darum Ticket-Optik mit Abriss */
.tickets-sec{background:var(--flaeche)}
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ticket{position:relative;background:#fff;border-radius:10px;padding:24px 24px 22px;border:1px solid var(--linie);display:flex;flex-direction:column}
.ticket::before,.ticket::after{content:"";position:absolute;top:96px;width:20px;height:20px;border-radius:50%;background:var(--flaeche);border:1px solid var(--linie)}
.ticket::before{left:-11px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-11px;clip-path:inset(0 50% 0 0)}
.ticket .art{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.5rem}
.ticket .preis{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:3rem;line-height:1;margin:6px 0 18px}
.ticket .preis small{font-size:1rem;font-weight:600;color:var(--tinte-2)}
.ticket hr{border:0;border-top:2px dashed var(--linie);margin:0 0 16px}
.ticket ul{margin:0 0 20px;padding-left:18px;color:var(--tinte-2)}
.ticket .knopf{margin-top:auto;justify-content:center}
.ticket.top{border:2px solid var(--stutzen)}
.ticket.top .knopf{background:var(--stutzen)}
.mehr{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.mehr div{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:16px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mehr strong{font-family:"Barlow Condensed",sans-serif;font-size:1.3rem}
.mehr span{font-weight:600;white-space:nowrap}
.hinweis{font-size:.875rem;color:var(--tinte-2);margin:16px 0 0}


/* Trainerprofil: Lizenzleiter C → B → A → Fußballlehrer, 5 Module, Abgleich mit dem Podcast */
.profil{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px}
.beispiel{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinte-2);background:var(--flaeche);border-radius:999px;padding:3px 10px;margin-bottom:14px}
.stufe-jetzt{display:flex;align-items:center;gap:16px}
.stufe-jetzt .abz{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--stutzen);color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.9rem;box-shadow:inset 0 0 0 4px rgba(255,255,255,.25)}
.stufe-jetzt h3{font-size:2rem}
.stufe-jetzt p{margin:2px 0 0;color:var(--tinte-2)}
.balken{height:10px;border-radius:999px;background:var(--flaeche);overflow:hidden}
.balken i{display:block;height:100%;border-radius:inherit;background:var(--hose);width:0;transition:width .8s ease}
.weg{margin:22px 0 6px}
.weg-text{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--tinte-2);margin-top:8px}
.weg-text strong{color:var(--tinte);white-space:nowrap}
.nw{white-space:nowrap}
.profil>.karte:first-child{display:flex;flex-direction:column}
.profil>.karte:first-child .leiter{margin-top:auto;padding-top:24px}
.profil>.karte:first-child .beispiel{align-self:flex-start}
.leiter{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0 0;padding:0;list-style:none}
.leiter li{position:relative;padding-top:18px;font-size:.875rem;color:var(--tinte-2);line-height:1.3}
.leiter li::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;border-radius:3px;background:var(--linie)}
.leiter li.da::before{background:var(--stutzen)}
.leiter li.jetzt::before{background:linear-gradient(90deg,var(--stutzen) 0 50%,var(--linie) 50%)}
.leiter b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.15rem;color:var(--tinte)}
.leiter .pr{display:inline-block;margin-top:4px;font-size:.6875rem;font-weight:600;color:var(--hose);border:1px solid var(--hose);border-radius:4px;padding:0 5px}
.denkt{display:flex;flex-direction:column;gap:18px;background:var(--stutzen);color:#fff;border-color:var(--stutzen)}
.denkt .beispiel{background:rgba(255,255,255,.14);color:#fff;align-self:flex-start;margin:0}
.ring{--p:0;width:132px;height:132px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
.ring span{width:104px;height:104px;border-radius:50%;background:var(--stutzen);display:grid;place-items:center;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:2.4rem}
.denkt-kopf{display:flex;align-items:center;gap:18px}
.denkt-kopf h3{font-size:1.7rem}
.denkt-kopf p{margin:6px 0 0;color:rgba(255,255,255,.8);font-size:.9375rem}
.denkt ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:10px;font-size:.9375rem}
.denkt li strong{font-family:"Barlow Condensed",sans-serif;font-size:1.3rem;margin-right:6px}
.module-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:36px 0 14px}
.module-kopf h3{font-size:1.6rem}
.module-kopf p{margin:0;font-size:.9375rem;color:var(--tinte-2)}
.module{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none;margin:0;padding:0}
.modul{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.modul .nr{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:.875rem;color:var(--tinte-2)}
.modul h4{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.35rem;line-height:1}
.modul .wert{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--tinte-2)}
.modul .wert b{color:var(--tinte);font-size:.9375rem}
.modul.offen .balken i{background:var(--tinte-2)}
.modul .fehlt{font-size:.75rem;font-weight:600;color:var(--hose)}
.saison{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;padding:14px 18px;border-radius:10px;background:var(--flaeche);font-size:.9375rem}
.saison strong{font-family:"Barlow Condensed",sans-serif;font-size:1.15rem}
@media (max-width:900px){
  .profil{grid-template-columns:1fr}
  .module{grid-template-columns:1fr;gap:8px}
  .modul{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t w" "b b" "f f";gap:8px 12px;padding:14px 16px}
  .modul .nr{display:none}
  .modul h4{grid-area:t;font-size:1.25rem;align-self:center}
  .modul .wert{grid-area:w;gap:8px}
  .modul .balken{grid-area:b}
  .modul .fehlt{grid-area:f}
  .modul .fehlt:empty{display:none}
  .karte{padding:20px}
  .ring{width:112px;height:112px}.ring span{width:88px;height:88px;font-size:2rem}
}
@media (max-width:420px){ .leiter{gap:6px} .leiter li{font-size:.75rem} .leiter b{font-size:1rem} .denkt-kopf{flex-direction:column;align-items:flex-start} }
@media (prefers-reduced-motion:reduce){ .balken i{transition:none} }

footer{background:var(--stutzen);color:#fff;padding:36px 0 44px;font-size:.9375rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer a{color:#fff}
footer .s13{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:1.25rem}
footer .s13 .nr{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid #fff;border-radius:50%;font-size:.85rem}
footer nav{display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .figur{width:min(260px,70%);order:-1}
  .folgen,.tickets,.mehr{grid-template-columns:1fr}
  .kopf nav{display:none}
}
@media (max-width:520px){ section{padding:60px 0} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ---------- Handy (iPhone + Android) ---------- */
.leiste{display:none}
@media (hover:none){ .knopf:hover{filter:none} }
.knopf:active{transform:scale(.97)}
.folge{position:relative}
.folge .los::after{content:"";position:absolute;inset:0}
@media (max-width:900px){
  body{-webkit-tap-highlight-color:transparent}
  footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .kopf{height:60px;gap:10px}
  .pod-marke small{display:none}
  .sprache{margin-left:auto}
  .sprache button{padding:9px 14px}
  /* Hero: Wappen als ruhiger Hintergrund oben rechts */
  .hero{padding-top:40px}
  .hero-oben{margin-top:-40px;padding-top:40px}
  .hero.mit-foto .trikot-bg,.hero.ist-wappen .trikot-bg{position:absolute;display:block;top:36px;right:24px;bottom:auto;height:76px;width:auto;max-width:40%;margin:0;opacity:1;filter:none;transform:none;object-position:right center}
  .hero.mit-foto:not(.ist-wappen) .trikot-bg{height:150px;top:20px}
  .hero.mit-foto .figur{display:none}
  .hero-grid{padding-bottom:40px}
  .hero h1{font-size:clamp(2.8rem,13vw,4rem)}
  .knoepfe .knopf{flex:1 1 100%;justify-content:center;min-height:52px}
  section{padding:56px 0}
  /* Folgen + Tickets: wischbar wie in einer App */
  .folgen,.tickets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -24px;padding:4px 24px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .folgen::-webkit-scrollbar,.tickets::-webkit-scrollbar{display:none}
  .folge{flex:0 0 84%;scroll-snap-align:center}
  .folge .platz{aspect-ratio:16/8}
  .ticket{flex:0 0 80%;scroll-snap-align:center}
  .ticket::before,.ticket::after{display:none}
  .punkte-nav{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .punkte-nav i{width:8px;height:8px;border-radius:50%;background:var(--linie);transition:background .2s,width .2s}
  .punkte-nav i.an{background:var(--stutzen);width:22px;border-radius:4px}
  .mehr{gap:8px}
  .mehr div{padding:14px 16px}
  footer a{display:inline-block;padding:10px 0}
  /* feste Leiste unten */
  .leiste{display:flex;gap:10px;position:fixed;transform:translateY(110%);transition:transform .25s ease;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linie)}
  .leiste .knopf{flex:1;justify-content:center;min-height:52px;padding:0 12px}
}
@media (min-width:901px){ .punkte-nav{display:none} }
.leiste.zeigen{transform:none}
@media (prefers-reduced-motion:reduce){ .leiste{transition:none} }