/* 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;
}

/* Variante: linksbuendig, exakt auf die linke Textkante von .page-content ausgerichtet (Absprache:
   "linksbündig passend zum Text") -- gleiches Box-Modell wie .page-content (max-width 1180px +
   margin:auto ZUERST, seitliches Padding danach), statt der zentrierten 640px-Spalte oben. */
.page-hero-left{ text-align:left; padding-left:0; padding-right:0; }
.page-hero-left p{ max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .page-hero-left p{ padding:0; } }

.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; }
}

/* Generische Leistungs-Textseite (z.B. /security/, spaeter auch /facility-management/,
   /deep-cleaning/, /paramedic/) -- Stichpunkt-Liste + Bild-Platzhalter-Galerie, bis echte Fotos
   geliefert werden. Bewusst generisch benannt statt seitenspezifisch, damit die anderen Leistungs-
   Unterseiten dieselben Klassen wiederverwenden koennen. */
.feature-list{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.feature-list li{ color:var(--fg); line-height:1.6; padding-left:22px; position:relative; }
.feature-list li::before{
  content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--gold);
}
.feature-list strong{ color:var(--gold-light); }

.img-gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:36px;
}
.img-placeholder{
  aspect-ratio:4/3; 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; text-align:center; padding:12px; margin:0;
}

/* Text links breiter + vertikaler Bild-Slider rechts (Alternative zur .img-gallery-Kachelreihe oben,
   fuer Leistungs-Unterseiten mit viel Fliesstext -- Absprache: "text linksseitig etwas mehr und
   rechts vertikal den slider mit den bildern"). JS ist je Seite eigenstaendig inline eingebunden
   (wie beim horizontalen Pendant in w_leistungen.php), diese Klassen sind generisch/wiederverwendbar. */
.text-media-layout{ display:grid; grid-template-columns:1.7fr 340px; gap:44px; align-items:start; }
.text-media-text p{ color:var(--fg); line-height:1.65; }

/* Spiegel-Variante: Slider links, Text rechts (Absprache: "paramedic ... Slider links anstelle
   rechts") -- Reihenfolge im Markup ist bereits vertauscht (Slider zuerst), diese Klasse passt nur
   die Spaltenbreiten an, damit der Slider weiterhin die schmale Spalte bekommt. */
.text-media-layout--reverse{ grid-template-columns:340px 1.7fr; }

.v-slider{ position:relative; height:440px; overflow:hidden; border-radius:12px; }
.v-slider-track{ display:flex; flex-direction:column; height:100%; transition:transform .5s ease; }
.v-slider-slide{ flex:0 0 100%; height:100%; }
.v-slider .img-placeholder{ aspect-ratio:auto; height:100%; border-radius:12px; }

.v-slider-nav{
  position:absolute; left:50%; transform:translateX(-50%); z-index:2; cursor:pointer;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(201,162,39,.35);
  background:rgba(10,12,13,.6); color:var(--gold-light); font-size:13px; display:grid; place-items:center;
  transition:background .18s ease, transform .18s ease;
}
.v-slider-nav:hover{ background:rgba(242,214,117,.16); }
.v-slider-nav-prev{ top:10px; }
.v-slider-nav-next{ bottom:10px; }

.v-slider-dots{
  position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; flex-direction:column; gap:8px;
}
.v-slider-dot{
  width:8px; height:8px; padding:0; margin:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(201,162,39,.55); background:transparent;
}
.v-slider-dot.active{ background:var(--gold); }

@media (max-width:900px){
  .text-media-layout{ grid-template-columns:1fr; }
  .v-slider{ height:300px; max-width:440px; 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; }
}

/* Unter 520px stapelt der fixierte Footer (widget_f00.css) auf zwei Zeilen (Icons + Copyright) und
   wird dadurch deutlich hoeher -- ohne mehr Bodenabstand ueberlappt er den letzten Seiteninhalt
   (aufgefallen bei /security/, betrifft aber jede lange Unterseite gleichermassen). */
@media (max-width:520px){
  .page-content{ padding-bottom: 130px; }
}