/* subpages.css — gemeinsames Layout fuer /leistungen, /ueber-uns, /kontakt, /broschueren */

.page-hero{
  /* Header schwebt fixiert ueber dem Inhalt -> Platz fuer die Kopfzeile oben freihalten. Seit die
     Leistungs-Badges im Header per clamp() skalieren, ist dessen Hoehe nicht mehr konstant -- per
     Playwright gemessen (112px bis 276px je nach Breite) und mit Puffer in Tiers nachgebildet,
     statt einem einzigen fixen Wert der bei den meisten Breiten falsch lag. */
  padding: calc(230px + env(safe-area-inset-top)) 24px 40px;
  text-align:center;
  background: rgba(5,6,7,.62);
}
@media (max-width:1300px){ .page-hero{ padding-top: calc(190px + env(safe-area-inset-top)); } }
@media (max-width:1024px){ .page-hero{ padding-top: calc(155px + env(safe-area-inset-top)); } }
@media (max-width:600px){ .page-hero{ padding-top: calc(215px + env(safe-area-inset-top)); } }
@media (max-width:480px){ .page-hero{ padding-top: calc(305px + env(safe-area-inset-top)); } }
.page-hero p{
  max-width:640px;
  margin:0 auto;
  color:rgba(232,237,242,.7);
  font-size:16px;
  line-height:1.55;
}

.page-content{
  max-width:1180px;
  margin:0 auto;
  padding: 60px 24px 80px;
  background: rgba(10,12,13,.62);
}

/* Über uns */
.ueberuns-layout{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.ueberuns-photo{
  aspect-ratio:1/1;
  border-radius:12px;
  border:1px solid rgba(201,162,39,.28);
  background:rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  color:rgba(232,237,242,.55);
  font-size:14px;
}
.ueberuns-text p{ color:var(--fg); line-height:1.65; }
.ueberuns-text .about-claim{
  margin:20px 0;
  padding:14px 20px;
  border-left:3px solid var(--gold);
  font-style:italic;
  color:var(--gold-light);
}
.ueberuns-text .about-sign{ color:var(--fg); opacity:.85; }
@media (max-width:760px){
  .ueberuns-layout{ grid-template-columns:1fr; }
  .ueberuns-photo{ max-width:220px; margin:0 auto; }
}

/* Broschüren -- die Hauptseite /broschueren/ nutzt jetzt ganz normal .page-hero/.page-content wie
   jede andere Unterseite und zeigt nur zwei Auswahl-Buttons (Absprache mit dem User: "Die Hauptseite
   der Broschüre wird nur Buttons bekommen"). Die eigentliche Broschüre (PDF.js + page-flip) oeffnet
   sich per Klick als eigenes Vollbild-Overlay (siehe .brosch-overlay weiter unten) -- "in einem
   eigenen Overlay ... am Bildschirm öffnen ... volle Bildschirmhöhe". */
.brosch-choice-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
}
.brosch-empty{ text-align:center; color:rgba(232,237,242,.5); }
.brosch-choice{
  width:220px; padding:32px 20px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(201,162,39,.32);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.brosch-choice:hover{ transform:translateY(-4px); border-color:var(--gold); background:rgba(255,255,255,.07); }
.brosch-choice-year{
  font-size:clamp(30px,4vw,42px); font-weight:1000; letter-spacing:.4px;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold-light));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brosch-choice-label{ color:rgba(232,237,242,.72); font-size:14px; }

/* Scroll der Seite dahinter sperren, waehrend das Overlay offen ist. */
html.brosch-lock-scroll, html.brosch-lock-scroll body{ overflow:hidden; }

/* Vollbild-Overlay -- schwebt UEBER allem (auch ueber dem fixierten Header), nimmt die volle
   Bildschirmhoehe ein. Breite wird per JS im Verhaeltnis zur nutzbaren Hoehe berechnet, damit eine
   echte Doppelseite (2x A4) hineinpasst (siehe fitBookToViewer in broschueren/index.php). */
.brosch-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(5,6,7,.94);
  display:flex; flex-direction:column; align-items:center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
/* KRITISCHER FIX (schon mehrfach in diesem Projekt aufgetreten): ohne diese Zeile gewinnt eine
   unconditionale display-Regel immer gegen den User-Agent-Default fuer [hidden] -- das Overlay
   bliebe dann unsichtbar-aber-da und wuerde jeden Klick/Touch auf der Seite dahinter abfangen. */
.brosch-overlay[hidden]{ display:none; }
.brosch-close{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:20px; z-index:2001;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(201,162,39,.35); color:var(--gold-light);
  font-size:20px; line-height:1; display:grid; place-items:center;
  transition: background .18s ease, transform .18s ease;
}
.brosch-close:hover{ background:rgba(242,214,117,.14); transform:translateY(-1px); }

.brosch-viewer{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.brosch-book{ outline:none; }
.brosch-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(232,237,242,.6); font-size:15px; background:rgba(255,255,255,.03);
  border-radius:12px; border:1px solid rgba(201,162,39,.2);
}
.brosch-loading[hidden]{ display:none; }

.brosch-controls{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px;
}
.brosch-nav-btn{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(201,162,39,.32); background:rgba(255,255,255,.04); color:var(--gold-light);
  font-size:20px; line-height:1; display:grid; place-items:center;
  transition: background .18s ease, transform .18s ease;
}
.brosch-nav-btn:hover{ background:rgba(242,214,117,.12); transform:translateY(-1px); }
.brosch-page-info{ color:rgba(232,237,242,.7); font-size:14px; min-width:70px; text-align:center; }

@media (max-width:600px){
  .page-hero{ padding-left:18px; padding-right:18px; padding-bottom:32px; }
  .page-content{ padding:40px 18px 56px; }
}