/* =========================================================
   wir-helfen-schuelern.de – Public Pages
   Global Styles (grün/brand) + vereinheitlichter Hero
   ========================================================= */

/* --------- Farb- und Layout-Variablen --------- */
:root{
  --brand:      #10b981;   /* Grün */
  --brand-700:  #059669;
  --brand-50:   #ecfdf5;

  --ink:        #0f172a;   /* Text */
  --muted:      #64748b;   /* Sekundärtext */

  --bg:         #f8fafc;   /* Seitenhintergrund */
  --card:       #ffffff;   /* Karten */

  --border:     #e5e7eb;   /* Linien, Umrandungen */
  --ring:       rgba(16,185,129,.25);
}

/* --------- Reset / Basis --------- */
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ max-width:1100px; margin:0 auto; padding:24px; }

/* --------- Typo-Helfer --------- */
.h1{ font-size: clamp(26px,4.2vw,44px); line-height:1.12; margin:10px 0 8px; font-weight:800; }
.h2{ font-size: clamp(22px,3vw,30px);  line-height:1.18; margin:8px 0 10px; font-weight:800; }
.lead{ font-size: clamp(16px,1.8vw,20px); color:#0a1525; }
.muted{ color:var(--muted); }
.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:var(--brand-50);
  color:#166534;
  border:1px solid #a7f3d0;
  font-weight:700;
  font-size:.95rem;
}

/* --------- Header / Top-Navigation (weiß, sticky) --------- */
.header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; }
.logo__dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); }
.nav a{ margin-left:18px; color:var(--ink); text-decoration:none; }
.nav a:hover{ text-decoration:underline; }

/* --------- Hero – einheitlich auf allen Seiten ---------
   Bild wird in der Seite mit <img class="hero__bg" src="<?=$HERO_IMG?>"> gesetzt.
   Helligkeit nach Wunsch: brightness(), contrast(), saturate() (siehe Kommentar unten)
---------------------------------------------------------- */
.hero{
  position:relative; width:100%; height:360px; overflow:hidden;
  border-bottom:1px solid var(--border);
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  /* Bildwirkung (wie dein Screenshot):
     -> Für heller:  brightness(1.20)
     -> Für dunkler: brightness(1.00–1.05)
     -> Farben kräftiger: saturate(1.1–1.2) */
  filter: brightness(1.12) contrast(1.05) saturate(1.10);
  will-change: transform;
}
.hero__veil{
  position:absolute; inset:0;
  /* sanfter Verlauf für guten Kontrast der Texte */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0.10) 28%,
    rgba(0,0,0,0.18) 100%
  );
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:34px 20px;
  color:#041015;
}
.hero__kicker{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:#dcfce7; color:#166534; font-weight:800;
}
.hero__title{ margin:14px 0 10px; font-size:clamp(28px,4.2vw,48px); line-height:1.08; font-weight:900; color:#071524; }
.hero__lead{ max-width:980px; margin:0 0 12px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }

/* kompaktere Variante bei Bedarf */
.hero--compact{ height:300px; }

@media (max-width:900px){
  .hero{ height:280px; }
  .hero__bg{ object-position:center top; } /* mobil etwas höher anschneiden */
}

/* --------- Buttons --------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:999px;
  padding:10px 16px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff; font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition: all .15s ease;
}
.btn:hover{ background:var(--brand-700); border-color:var(--brand-700); text-decoration:none; }
.btn--ghost{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn--ghost:hover{ background:var(--brand-50); }

/* --------- Karten / Raster --------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card h3{ margin:6px 0 8px; }
.grid{ display:grid; gap:16px; }
.grid--3{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }

/* --------- Seiten-Sektionen --------- */
.section{ padding:24px 0; }
.footer{ padding:24px; text-align:center; color:var(--muted); }

/* --------- „So sieht’s in der Praxis aus“ – große Einzelblöcke --------- */
.school-block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  margin:0 0 16px;
}
.school-block h3{ margin:4px 0 10px; }
/* Bild leicht kleiner als Full-HD-Laptop (gute „Blick in die App“-Wirkung) */
.school-block img{
  width:100%;
  max-height: 62vh;           /* angenehme Höhe auf Desktop */
  border-radius:12px;
  object-fit:cover;
  object-position:center top;
}

/* --------- Galerie-Einblicke --------- */
.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.gallery img{
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
}

/* --------- Deko-Platzhalter (falls benötigt) --------- */
.figure{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  min-height:140px;
  display:flex; align-items:center; justify-content:center;
  color:#94a3b8; background:#f1f5f9;
}

/* --------- Fokus-Ring / Accessibilty --------- */
:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:6px;
}

/* --------- Kleine Helfer --------- */
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.kpi{ display:flex; align-items:center; gap:10px; }
.kpi__dot{ width:12px; height:12px; border-radius:50%; background:var(--brand); }

/* --------- Tabellen (z. B. in Übersichten) --------- */
table{ width:100%; border-collapse:separate; border-spacing:0 6px; }
th{ text-align:left; padding:8px 10px; color:var(--muted); font-weight:600; }
td{ background:#fff; border:1px solid var(--border); padding:10px 12px; }
tr td:first-child{ border-radius:10px 0 0 10px; }
tr td:last-child{ border-radius:0 10px 10px 0; }
tfoot td{ background:#f9fafb; }

/* --------- Mobile Feinschliff --------- */
@media (max-width:640px){
  .container{ padding:18px; }
  .hero__inner{ padding:24px 18px; }
  .h1{ font-size: clamp(24px,6vw,34px); }
}
/* Zweiteiliger Screenshot-Block */
.split-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

@media (max-width: 900px){
  .split-2{ grid-template-columns: 1fr; }
}

.shot{
  margin:0;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.shot > img{
  display:block;
  width:100%;
  height:auto;             /* Screenshots in voller Breite, keine Verzerrung */
}

.shot > figcaption{
  padding:10px 12px;
  font-size:.95rem;
  color:#475569;           /* slate-600 */
  line-height:1.45;
}

.shot > figcaption b{
  display:block;
  color:#0f172a;           /* slate-900 */
  margin-bottom:2px;
}
/* ---- Grüne Sektion-Badges ---- */
.badge--section {
  display:inline-block;
  background:#dcfce7;          /* hellgrün */
  color:#065f46;               /* dunkelgrün Text */
  border:1px solid #a7f3d0;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  font-size:1.05rem;
}

.badge--sub {
  display:inline-block;
  background:#ecfdf5;          /* leicht heller grün */
  color:#047857;               /* kräftiger grün */
  border:1px solid #bbf7d0;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  margin:8px 10px;
  font-size:.9rem;
}

/* optisch gleichmäßige Abstände zu Bildern */
.split-2 .shot img {
  margin-top:4px;
  border-radius:0 0 8px 8px;
}
/* Grüne Sektion-Badges (wie Für Schulen) */
.badge--section{
  display:inline-block;
  background:#dcfce7;
  color:#065f46;
  border:1px solid #a7f3d0;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  font-size:1.05rem;
}

.badge--sub{
  display:inline-block;
  background:#ecfdf5;
  color:#047857;
  border:1px solid #bbf7d0;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  margin:8px 10px 6px;
  font-size:.9rem;
}

/* Bild-Kacheln */
.shot{margin:0}
.shot__img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
  margin-top:4px;
}
.shot figcaption{
  margin-top:8px;
  color:#475569;
}
.shot figcaption b{
  display:block;
  color:#0f172a;
  margin-bottom:2px;
}

/* Layout: bisher 2-spaltig -> jetzt bewusst 1-spaltig (größer, untereinander) */
.split-2{display:grid; gap:16px;}
.stack{grid-template-columns:1fr;}           /* erzwingt eine Spalte auf allen Breakpoints */

/* Falls du irgendwo anders weiterhin eine echte 2er-Spalte brauchst:
   .split-2.two-cols { grid-template-columns: 1fr 1fr; }  (optional)
*/
/* --- Hamburger-Grundform --- */
.header__toggle {
  display:none;          /* Desktop: aus */
  width:38px;
  height:30px;
  flex-direction:column;
  justify-content:space-between;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:4px 0;
}
.header__toggle span {
  display:block;
  height:3px;
  background:#0f172a;
  border-radius:999px;
  transition:all .15s ease;
}

/* --- Mobile-Navi (überarbeitet) --- */
@media (max-width: 900px) {
  /* der Header-Inhalt muss Bezugspunkt für die ausgeklappte Navi sein */
  .header__inner {
    position: relative;
  }

  /* Burger auf Handy einblenden */
  .header__toggle {
    display: flex;
    width: 38px;
    height: 30px;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
    z-index: 50; /* über der ausgeklappten Navi */
  }

  /* ausgeklappte Navi */
  .nav {
    position: absolute;
    top: 100%;       /* direkt unter dem Header */
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 10px 12px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 18px 40px rgba(15,23,42,.12);

    /* verstecken */
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 40;
  }

  /* sichtbar, wenn JS .is-open setzt */
  .nav.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Links im mobilen Menü etwas „tappbarer“ machen */
  .nav a {
    margin: 0;
    padding: 6px 8px;
  }
}

/* --- Burger-Animation (Button selbst bekommt .is-open) --- */
.header__toggle span {
  display: block;
  height: 3px;
  background: #0f172a;
  border-radius: 999px;
  transition: all .15s ease;
}

.header__toggle.is-open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.header__toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.header__toggle.is-open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}
/* =========================================
   Mobile-Fix für Bildblöcke in den Steps
   ========================================= */
@media (max-width: 900px) {
  /* die Reihen wirklich untereinander */
  .flow-step .img-row,
  .flow-step .img-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Box darf auf Handy so hoch werden, wie das Bild ist */
  .flow-step .thumb-wrap {
    min-height: auto;     /* feste Höhe weg */
    height: auto;
    overflow: visible;    /* nichts mehr abschneiden */
    align-items: flex-start;
  }

  /* Bild immer einfach ganz zeigen */
  .flow-step .thumb-wrap img {
    width: 100%;
    height: auto;
    max-height: none;
  }
}