/* =========================================================
   P2 Architektur GmbH – statischer Web-Auftritt
   Design abgeleitet aus den Original-Einstellungen
   (Theme "Twenty Twenty-Four", angepasste Farbpalette,
   selbst gehostete Roboto-Schrift) aus der geretteten
   WordPress-Datenbank.
   ========================================================= */

/* --- Selbst gehostete Roboto-Schrift (aus dem Original-Upload) --- */
@font-face{font-family:"Roboto";src:url("../fonts/KFOlCnqEu92Fr1MmSU5vBh05IsDqlA.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/KFOmCnqEu92Fr1Me4GZLCzYlKw.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/KFOlCnqEu92Fr1MmEU9vBh05IsDqlA.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("../fonts/KFOlCnqEu92Fr1MmWUlvBh05IsDqlA.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --- Design-Tokens (aus den geretteten Global-Styles übernommen) --- */
:root{
  color-scheme: dark; /* verhindert automatisches Nachfärben durch Browser-eigenen Dark-Mode (z.B. Samsung Internet, Chrome Android) */
  --bg:            #000000;   /* Basis/Zwei */
  --bg-light:      #f9f9f9;   /* Basis */
  --text:          #ffffff;   /* Akzent (Textfarbe auf dunklem Grund) */
  --text-muted:    #b7b7b7;
  --contrast:      #4e4e4e;
  --contrast-2:    #636363;
  --accent:        #ffffff;   /* vormals Terrakotta-Orange, jetzt Weiß (fett/invertiert statt farbig hervorgehoben) */
  --border-color:  #ffffff;
  --border-color-soft: rgba(255,255,255,.22);
  --radius:        15px;
  --border-w:      2px;
  --max-width:     1200px;
  --max-width-narrow: 820px;
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; height:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:300;
  font-size:1.05rem;
  line-height:1.7;
  animation:page-fade-in 1s ease;
  transition:opacity .3s ease;
}
body.page-home{ animation-duration:2s; }
/* Wird per JS vor dem Verlassen der Seite gesetzt (echter Seitenwechsel per
   Klick auf interne Links) – nutzt die Transition oben, damit sauber vom
   jeweils aktuellen Wert ausgeblendet wird, auch mitten in der Einblend-
   Animation. */
body.is-leaving{ opacity:0; }
@keyframes page-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
/* Sticky Footer: main wächst mit, Footer bleibt bei kurzem Inhalt
   am unteren Bildschirmrand statt direkt unter dem Inhalt zu kleben. */
main{ flex:1 0 auto; position:relative; }
.site-footer{ flex-shrink:0; }

/* --- Dynamischer Hintergrund: Bilder-Galerie zwischen Header und Footer.
   Bilder kommen aus img/background/ (per FTP befüllt, Apache-Verzeichnis-
   liste wird per JS ausgelesen) und faden im Hintergrund durch. --- */
.bg-gallery{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
}
.bg-gallery__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 3s ease;
}
.bg-gallery__img.is-active{ opacity:.15; }
@media (prefers-reduced-motion: reduce){
  .bg-gallery__img{ transition:none; }
  body{ animation:none; }
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); font-weight:700; text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

.container{
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:1.5rem;
}
.container--narrow{ max-width:var(--max-width-narrow); }
.text-center{ text-align:center; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.2;
  margin:0 0 1rem;
  color:var(--text);
}
h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); }
h2{ font-size:clamp(1.7rem, 4vw, 2.4rem); }
h3{ font-size:1.3rem; letter-spacing:.02em; }
p{ margin:0 0 1.25rem; color:var(--text); }
ul{ margin:0 0 1.25rem; padding-left:1.2rem; }
li{ margin-bottom:.5rem; }

/* --- Kopfbereich / Navigation --- */
.site-header{
  background:var(--bg);
  border-bottom:var(--border-w) solid var(--border-color);
  padding-block:.9rem;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.site-logo img{ width:153px; height:auto; }
.site-logo{ display:flex; align-items:center; }
/* Auf Home ist das Logo bereits prominent im Hero zu sehen – im Header
   daher unsichtbar (aber Platz bleibt erhalten, Menü-Button bleibt rechts). */
.page-home .site-logo{ visibility:hidden; }

/* Navigation öffnet sich immer als zentriertes Overlay –
   genau wie im Original (Twenty-Twenty-Four "overlayMenu: always"). */
.main-nav{
  display:none;
  position:fixed;
  inset:0;
  background:var(--bg);
  z-index:100;
  align-items:center;
  justify-content:center;
}
.main-nav.open{ display:flex; }
.main-nav ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.75rem;
  margin:0;
  padding:0;
}
.main-nav a{
  color:var(--text);
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:300;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--accent);
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--text);
  padding:.36rem;
  cursor:pointer;
  position:relative;
  z-index:101;
}
.nav-toggle-icon{ display:block; width:20px; height:20px; }

/* --- Hero: wie im Original schlicht auf Schwarz, ohne Foto --- */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:5rem;
  padding-bottom:2.25rem;
}
.hero-logo{ width:170px; margin:0 auto 2.5rem; }
.hero h1{ max-width:760px; margin-inline:auto; text-transform:none; font-size:clamp(1.3rem,3vw,1.6rem); font-weight:300; letter-spacing:0; }
.hero p{ max-width:640px; margin-inline:auto; color:var(--text); }

/* --- Bereiche / Sections --- */
.section{ padding-block:4.5rem; }
.section--tight-top{ padding-top:2.25rem; }
.section--tight-bottom{ padding-bottom:2.25rem; }
.section--light{ color:var(--text); }
.section--light h2, .section--light h3{ color:var(--text); }
.section--light p, .section--light li{ color:var(--text); }
.section-heading{ text-align:center; max-width:700px; margin:0 auto 3rem; }
.section-heading p.lead-text{ font-size:clamp(1.3rem, 3vw, 1.6rem); font-weight:300; line-height:1.2; color:var(--text); }
.section-heading p{ color:var(--text-muted); }
.section--light .section-heading p{ color:var(--text-muted); }

/* --- Leistungsbereich (Startseite Icon-Reihe) --- */
.branchen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(140px,100%),1fr));
  gap:2rem;
  text-align:center;
  border:var(--border-w) solid var(--border-color);
  border-radius:var(--radius);
  padding:2rem;
  background:rgba(0,0,0,.8);
}
.branchen img{ height:70px; width:auto; margin:0 auto 1rem; }
.branchen p{ margin:0; text-transform:uppercase; font-size:.85rem; letter-spacing:.05em; color:var(--text); }

/* --- Karten / Boxen (abgerundet, wie im Original) --- */
.card{
  border:var(--border-w) solid var(--border-color);
  border-radius:var(--radius);
  padding:2rem;
  background:rgba(0,0,0,.8);
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr));
  gap:2rem;
}
.card-grid .card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.card-grid .card-intro{
  min-height:19rem; /* hält die Galerien-Oberkanten beider Boxen auf gleicher Höhe */
}
.card-grid .card-intro h2{
  min-height:2.4em; /* reserviert 2 Zeilen, damit der Detailtext unabhängig von der Überschriften-Länge bündig beginnt */
}
.card-grid .btn{
  margin-top:auto;
  align-self:center;
}
.leistung-block{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:center;
  border:var(--border-w) solid var(--border-color);
  border-radius:var(--radius);
  padding:2rem;
  background:rgba(0,0,0,.8);
}
.leistung-block + .leistung-block{ margin-top:2rem; }
.leistung-block img{ width:70px; height:70px; opacity:.9; }
.leistung-block h3{ margin-bottom:.75rem; }

/* --- Team (Geschäftsführung, wie im Original: Trennlinien, linksbündige
   Überschrift, Foto+Rolle nebeneinander, volle Liste darunter) --- */
.team-block h2{ text-align:left; }
.rule{
  border:none;
  border-top:var(--border-w) solid var(--border-color);
  margin:1.75rem 0;
}
.team-columns{
  display:flex;
  gap:2rem;
  align-items:flex-end;
}
.team-photo-col{ flex:0 0 28%; min-width:180px; }
.team-photo-col h3{ text-align:left; margin-bottom:1rem; }
.team-photo-col img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
.team-role-col{ flex:1; padding-bottom:.25rem; }
.team-role-col p{ margin:0; }

.team-quals{ list-style:disc; padding-left:1.4rem; margin:0; }
.team-quals li{ margin-bottom:1rem; }
.team-quals li:last-child{ margin-bottom:0; }

@media (max-width: 640px){
  .team-columns{ flex-direction:column; align-items:stretch; }
  .team-photo-col{ flex-basis:auto; min-width:0; }
}

/* --- Kontakt / Info-Boxen --- */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%),1fr));
  gap:2rem;
}
.info-grid .card{ text-align:center; }
.info-grid img{ height:60px; margin:0 auto 1.25rem; }
.info-grid ul{ list-style:none; padding:0; margin:0; }
.info-grid li{ color:var(--text-muted); }

/* --- Bild-Slider (Scroll-Snap-Basis + optionale JS-Komfortschicht) --- */
.slider{ position:relative; margin:1.75rem 0; }
.slider-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:0;
  border-radius:10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.slider-track::-webkit-scrollbar{ display:none; }
.slider-track img{
  flex:0 0 100%;
  scroll-snap-align:start;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
}
.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.55);
  border:1px solid var(--text);
  color:var(--text);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  padding:0;
}
.slider-arrow--prev{ left:.6rem; }
.slider-arrow--next{ right:.6rem; }
.slider-arrow:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }

.slider-dots{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:1rem;
  list-style:none;
  padding:0;
}
.slider-dot{
  width:11px;
  height:11px;
  padding:0;
  border-radius:50%;
  border:1.5px solid var(--text);
  background:transparent;
  cursor:pointer;
}
.slider-dot.active{ background:var(--accent); border-color:var(--accent); }

/* Ohne JavaScript bleibt der Slider per Wischen/Scrollen bedienbar –
   Pfeile und Punkte sind reine Komfort-Ergänzung obendrauf. */

/* --- Button --- */
.btn{
  display:inline-block;
  border:var(--border-w) solid var(--accent);
  color:var(--text);
  border-radius:10px;
  padding:.85em 1.8em;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.08em;
  font-weight:400;
}
.btn:hover{ background:var(--accent); color:var(--bg); text-decoration:none; }

/* --- Rechtstexte --- */
.legal p{ color:var(--text-muted); }
.legal a{ word-break:break-word; }

/* --- Footer --- */
.site-footer{
  background:var(--bg);
  border-top:var(--border-w) solid var(--border-color);
  padding-block:.81rem;
  text-align:center;
}
.site-footer p{ color:var(--text-muted); font-size:.81rem; margin:0; }

/* --- Mobil --- */
@media (max-width: 720px){
  .team-card{ grid-template-columns:1fr; }
  .team-card img{ width:160px; }
  .leistung-block{ grid-template-columns:1fr; }
  .leistung-block img{ order:-1; justify-self:center; }
  .section{ padding-block:3rem; }
  .section--tight-top{ padding-top:2.25rem; }
  .section--tight-bottom{ padding-bottom:2.25rem; }
  /* Sektionen mit nur tight-top (z.B. der CTA-Button vor dem Footer) behalten
     den vollen unteren Abstand, damit er dem doppelten Tight-Abstand darüber entspricht. */
  .section--tight-top:not(.section--tight-bottom){ padding-bottom:4.5rem; }
  .hero{ padding-bottom:2.25rem; }
}