/* =========================================================
   Light on Hill Inclusive School – CSS Split
   Datei: 04-pages.css
   Stand: 2026-01-15
   Zweck: Mobile Menu + Seitenbereiche (Gallery/Project/FAQ/Consent/Lightbox etc.).
   Hinweis: Inhalt stammt aus der bereinigten styles.css.
   Reihenfolge ist relevant! (siehe HTML <head>)
   ========================================================= */

@media (max-width:920px){
  /* =========================
     MOBILE NAV + HERO OVERRIDES
     (nur <= 920px, damit Desktop unverändert bleibt)
     ========================= */

  .nav>ul{ display:none; }
  .nav-toggle{ display:inline-block; }

  /* Mobile Menü als sauberes, fixed Panel */
  .nav.open>ul{
    display:flex;
    flex-direction:column;
    gap:10px;

    background: rgba(10,26,19,.92);
    backdrop-filter: blur(12px);

    position:fixed;
    right:16px;
    top:72px;
    width:min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow:auto;

    padding:14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    z-index:999;
  }

  /* Mobile: Dropdown zu (nur bei .open anzeigen) */
  .nav .dropdown{
    position:static;
    display:none;
    background:transparent;
    border:none;
    padding:6px 0 0;
  }
  .nav .has-sub.open .dropdown{
    display:grid;
    gap:8px;
  }
  .nav .dropdown a{
    margin:0;
    padding:.55rem .9rem;
    border-radius:.8rem;
    background: rgba(14,34,26,.55);
  }

  /* Mobile Buttons volle Breite */
  .nav > ul > li > a:not(.btn),
  .nav > ul > li.has-sub > button,
  .nav > ul > li > a.btn{
    width:100%;
    justify-content:center;
  }

  /* Hero: Wasserzeichen bleibt sichtbar, aber kleiner als Desktop */
  .hero-logo-watermark{ left:16px; top:10px; opacity:1; }
  .hero-logo-watermark img{ width:160px; }

  /* Auf Mobile/Tablet keine Desktop-Verschiebung */
  .hero .hero-inner{ transform:none; }
}

@media (max-width:720px){
  /* Hero: Wasserzeichen-Logo auf Telefon wieder kleiner wie vorher */
  .hero-logo-watermark img{ width:96px; }
}


/* ===== Gallery: eine große Card um alles ===== */
.gallery-card{
  padding: 22px;
}

.gallery-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

.gallery-title{
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  letter-spacing: .2px;
}

.gallery-sub{
  margin: 10px 0 0;
  max-width: 70ch;
}

.gallery-sub__hint{
  display:inline-block;
  margin-left: .4rem;
  opacity: .9;
}


/* ===== Gallery Tiles: keine Einzel-Card mehr ===== */

/*
  NOTE:
  Die Basis-Grid-Regeln (.gallery) liegen in 02-sections.css.
  Hier werden die Kacheln "entschärft" (wie in der Original-Version),
  damit die Galerie wie im Screenshot #1 wirkt (Bildkacheln ohne extra Card-Rahmen).
*/

@media (max-width:920px){

.gallery{
  margin-top: 18px;
  gap: 14px;
}

/* überschreibt den Card-Look aus 02-sections.css */
.gallery-item{
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}

.gallery-item img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display:block;
}

.gallery-item:hover{
  transform: translateY(-2px);
  filter: saturate(1.03) brightness(1.02);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.gallery-item:focus{ outline:none; }
.gallery-item:focus-visible{
  box-shadow: 0 0 0 3px rgba(16,185,129,.18), 0 18px 45px rgba(0,0,0,.25);
}


}

@media (max-width: 700px){
.gallery-card{ padding: 16px; }
  .gallery-card__head{ flex-direction: column; }
}


/* ===== Index: Video-Card (YouTube Embed) ===== */
.section--tight{ padding: 54px 0; }

.video-card{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px;
}

.video-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}

.video-title{
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.video-sub{
  margin: 10px 0 0;
  max-width: 70ch;
}

.video-badge{
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,26,19,.25);
  color: rgba(230,242,236,.92);
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
}

.video-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.video-actions{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 720px){
.video-card{ padding: 16px; }
  .video-head{ flex-direction: column; }
  .video-badge{ align-self: flex-start; }
}


/* ===== Project Page – bündig + saubere Tabelle ===== */
.project-card{
  max-width: 980px;
  margin: 0 auto;
}

.page-head h1{
  margin: 0;
}

.page-head .lead{
  margin-top: 10px;
}

/* weicher Card-Style (falls card--soft noch nicht definiert ist) */
.card--soft{
  background: rgba(17,40,31,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
}

.table-wrap{
  width: 100%;
  overflow-x: auto;
  margin-top: 12px;
}

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td{
  text-align: left;
  padding: 12px 14px;
  vertical-align: top;
}

.table thead th{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.table tbody td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}

.table tbody tr:last-child td{
  border-bottom: none;
}

/* Spaltenbreiten stabil (Meilenstein groß, Zeitraum kompakt) */
.table th:last-child,
.table td:last-child{
  width: 220px;
  white-space: nowrap;
  color: rgba(255,255,255,.84);
}

/* =========================
   ABOUT PAGE – Rahmen + Layout
   ========================= */
.page-shell{
  background: rgba(17,40,31,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

.page-head{ margin-bottom: 18px; }

.page-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top: 18px;
}
@media (max-width: 920px){
.info-grid{ grid-template-columns: 1fr; }
}


.divider{
  border:0;
  border-top:1px solid rgba(255,255,255,.10);
  margin: 22px 0;
}

/* Optional weiche „Soft Card“ (falls noch nicht vorhanden) */
.card--soft{
  background: rgba(17,40,31,.45);
}

/* Liste */
.list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(243,247,245,.78);
}
.list li{ margin: 6px 0; }

/* Quote-Block */
.quote{
  margin-top: 14px;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(10,26,19,.28);
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.quote-text{
  font-weight: 700;
  color: rgba(243,247,245,.90);
}

/* ===== Kontakt: Validierung / Notices ===== */
.req{ color: var(--accent); font-weight: 800; margin-left: 4px; }

.field-error{
  min-height: 18px;
  font-size: .92rem;
  color: rgba(245,158,11,.95);
  margin-top: 6px;
}

.field-hint{
  font-size: .9rem;
  color: rgba(230,242,236,.70);
  margin-top: 6px;
}

.is-invalid{
  border-color: rgba(245,158,11,.75) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18) !important;
}

.notice{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,26,19,.45);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 14px 0 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}


/* Honeypot unsichtbar */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.yt-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  gap:10px;
}
.yt-headline{ margin:0; }

/* ===== Consent Banner (Bottom Bar) ===== */
#consent-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 2147483647;
  padding: 14px;
  pointer-events: none; /* optional: verhindert Klick-Probleme außerhalb */
}

#consent-banner .consent-bar{
  max-width:1100px;
  margin:0 auto;
  background:rgba(17,40,31,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:14px 16px;
  pointer-events: auto;
}

#consent-banner .consent-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

#consent-banner .consent-text{
  flex:1 1 520px;
  min-width:260px;
  font-size:.95rem;
  line-height:1.45;
}

#consent-banner .consent-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

#consent-banner .consent-settings{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

#consent-banner .consent-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}

/* Mobil: Banner etwas kompakter */
@media (max-width:560px){
#consent-banner{ padding:10px; }
  #consent-banner .consent-bar{ padding:12px; }
}


/* Scroll-Lock ohne Layoutshift */
html.lb-open,
html.lb-open body{
  overflow: hidden;
}

/* Lightbox Overlay */
.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  padding: 18px;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.lightbox.open{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panel: KEIN eigener Scrollbalken */
.lightbox__panel{
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: hidden;                 /* <— wichtig: scrollbar weg */
}

/* Inhalt als Spalte: Bild oben, Caption unten */
.lightbox__media{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: hidden;
}

/* Bild immer im Viewport */
.lightbox__img{
  display: block;
  max-width: 100%;
  max-height: 72vh;
  height: auto;
  width: auto;
}

/* Wenn Text zu lang -> nur Caption scrollt */
.lightbox__caption{
  max-height: 16vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 14px;
}

/* Optional: Scrollbar in Caption dezenter/unsichtbar (WebKit) */
.lightbox__caption::-webkit-scrollbar{
  width: 0;
  height: 0;
}

@media (max-width: 480px){
.lightbox{ padding: 12px; }
  .lightbox__img{ max-height: 68vh; }
  .lightbox__caption{ max-height: 18vh; }
}


/* ========== FAQ Page ========== */
.faq-hero { margin-bottom: 1rem; }
.faq-hero .lead { max-width: 62ch; margin: .5rem 0 0; }

.faq-card { padding-top: 1.25rem; }

.faq-quick { margin-top: 1rem; }
.faq-quick-grid{
  display:flex; flex-wrap:wrap; gap:.5rem;
  align-items:center;
}
.faq-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .75rem;
  border:1px solid var(--border);
  border-radius: 999px;
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,.03);
  transition: transform .12s ease, background .12s ease;
}
.faq-chip:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }

.faq-section{ margin-top: 1.25rem; }
.faq-section:first-of-type{ margin-top: 0; }

.faq .h3{ margin: 1.25rem 0 .6rem; }

.faq-item{
  border-top: 1px solid var(--border);
  padding: .15rem 0;
}
.faq-item:last-of-type{ border-bottom: 1px solid var(--border); }

.faq-item summary{
  cursor: pointer;
  font-weight: 750;
  padding: .85rem 0;
  list-style: none;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "▾";
  margin-left:auto;
  opacity:.7;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.faq-item[open] summary::after{ transform: rotate(180deg); }

.faq-body{
  padding: 0 0 1rem;
  max-width: 72ch;
}
.faq-body p{ margin: .55rem 0; }

.faq-note{
  margin: .75rem 0 1rem;
  padding: .85rem .95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  max-width: 72ch;
}

.faq-contact{
  display:grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: .75rem;
  max-width: 72ch;
}
.faq-contact-box{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  padding: .85rem .95rem;
}
.faq-contact-title{
  font-weight: 800;
  margin-bottom: .35rem;
}
.faq-contact-lines{ line-height: 1.6; }

.small{ font-size: .95rem; }

/* Better touch targets on phones */
@media (max-width: 720px){
.faq-item summary{ padding: 1rem 0; }
  .faq-body{ padding-bottom: 1.1rem; }
}


/* Einblicke – Layout & Optik */
.insights-hero { padding: 18px; }
.insights-hero__top{
  display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
}
.insights-title{ margin:0 0 6px; }
.insights-sub{ margin:0; }

.insights-badge{
  white-space:nowrap;
  padding:8px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
}

.insights-nav{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:14px;
}
.insights-nav__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  background: rgba(255,255,255,.03);
}
.insights-nav__link:hover{ background: rgba(255,255,255,.06); }

.insights-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){
.insights-grid{ grid-template-columns: 1fr; }
}


.insights-gallery { padding:18px !important; }   /* statt 0 */
.insights-updates { padding:18px; }              /* bleibt */

.insights-sectionhead{ margin-bottom:14px; }
.insights-h2{ margin:0 0 6px; }
.insights-hint{ margin-top:14px; }

.updates-list{ display:flex; flex-direction:column; gap:12px; }
.update-item{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background: rgba(255,255,255,.03);
}
.update-meta{
  display:flex;
  align-items:center;   /* <- das ist der wichtige Teil */
  gap:10px;
  flex-wrap:wrap;
}
.update-date{ opacity:.85; }
.update-tag{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  font-weight:600;
}
.update-title{ margin:0 0 6px; font-size:1.05rem; }
.update-text{ margin:0; }