/* ============================================================
   KL205 - architektur  ·  Architektur Neurohr
   Werbeagentur Hoffmann
   Aufbau: 1 Variablen · 2 Reset/Base · 3 Layout-Raster ·
   4 Kopf/Schriftzug · 5 Navigation · 6 Startseite ·
   7 Unterseiten · 8 Galerien · 9 Footer/Legal · 10 Responsive
   ============================================================ */

/* ============================================================
   1 · VARIABLEN
   ============================================================ */
:root {
  /* Raster */
  --frame-max: 1440px;                    /* max. Breite des weißen Bereichs */
  --pad-x: clamp(20px, 3.5vw, 48px);      /* linker/rechter Innenrand */
  /* --pad-top entfernt (Kundenkorrektur 08/2026): Wortmarke liegt auf ALLEN
     Seiten oben bündig an der Browserkante, wie auf der Startseite. */
  --pad-bottom: clamp(28px, 4vw, 60px);
  --nav-col: clamp(140px, 19vw, 230px);   /* Breite der Navigationsspalte */
  --col-gap: clamp(26px, 4.5vw, 72px);    /* Weißraum Navigation <-> Bild */
  /* Farben */
  --surround: #d8dbd6;                    /* Passpartout-Ton (heller Grüngrau) – derzeit ungenutzt, für evtl. Revert behalten */
  --text: #333333;
  --muted: #8a8a8a;
  --line: #e6e6e3;
  --wordmark: #a6a6a6;                     /* helles Grau, Schriftzug */
  --nav: #8a8a8a;                          /* Navigation inaktiv */
  --nav-active: #2a2a2a;                   /* Navigation aktiv */
  --accent: #3a3a3a;                       /* Anthrazit (Buttons) */
  --accent-2: #222222;
}

/* ============================================================
   2 · RESET / BASE
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* Layout springt nicht, wenn die Scrollleiste je nach Seitenlänge erscheint */
html, body { background: #fff; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.25; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
body.no-scroll { overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 10px 16px; z-index: 2000; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   3 · LAYOUT-RASTER + PASSPARTOUT
   ============================================================ */
.site-frame { max-width: var(--frame-max); margin: 0 auto; background: #fff; }
/* Grauer Passpartout-Rand komplett entfernt (Kundenkorrektur) – alle Seiten
   stehen auf Weiß. Für einen Revert genügt dieser Block:
   @media (min-width: 1600px) { html, body { background: var(--surround); } } */

.page-grid {
  display: grid;
  grid-template-columns: var(--nav-col) 1fr;   /* Navigation | Bild/Content */
  grid-template-rows: auto 1fr;                /* Reihe 1: Schriftzug · Reihe 2: Nav + Bild */
  column-gap: var(--col-gap);
  padding: 0 0 var(--pad-bottom) var(--pad-x);   /* oben 0 + rechts 0: Wortmarke bündig mit Browser-Oberkante,
                                                    Inhaltsspalte läuft auf ALLEN Seiten bis zur rechten Frame-Kante
                                                    (Kundenkorrektur 08/2026: einheitliche Seitenbreite) */
  container-type: inline-size;   /* Basis für container-relative Schriftzug-Größe */
}
.logo-row      { grid-column: 2; grid-row: 1; min-width: 0; }   /* Schriftzug über dem Bild */
.nav-column    { grid-column: 1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; }
.visual-column { grid-column: 2; grid-row: 2; min-width: 0; }   /* Bild bzw. Seiteninhalt */

/* ============================================================
   4 · KOPF / SCHRIFTZUG  (kein Balken – Wortmarke als SVG auf ALLEN Seiten)
   ============================================================ */
/* Wortmarke = SVG mit echtem Text (Arial Bold, #a6a6a6), auf Start- und
   Unterseiten identisch behandelt (Kundenkorrektur 08/2026):
   · linke und rechte Kante exakt bündig mit dem darunterliegenden Foto
     bzw. Inhalt (Kantenbezug) – Breite 100 % der Inhaltsspalte.
   · Das End-„r" ist leicht beschnitten (viewBox endet bei 3601; r-Tinte bis
     3611.3) – die Schnittkante liegt auf der rechten Kante. Links beginnt die
     viewBox bei 16 = Tintenkante des „K" -> Schrift exakt bündig zur Fotokante.
   · Anschnitt oben per CSS: 16 der 184 Einheiten Zeichenhöhe werden
     abgeschnitten -> sichtbar 168. top: -16/168 = -9.524 % (proportional,
     wirkt bei jeder Spaltenbreite gleich). */
.home-logo, .subpage .logo-row {
  display: block;
  grid-column: 2; grid-row: 1; min-width: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 3585 / 168;                          /* Container = sichtbare Logohöhe (kein Leerraum unten); 3585 = viewBox-Breite der SVG */
  margin: 0;
  padding: 0;
  overflow: hidden;                                  /* erzeugt den feinen Anschnitt oben */
}
.home-logo { margin-bottom: clamp(18px, 2vw, 32px); }
.subpage .logo-row { margin-bottom: clamp(18px, 3vw, 44px); }
.logo-img {
  position: absolute; top: -9.524%; left: 0;         /* oben dezent angeschnitten – alle Buchstaben klar lesbar */
  display: block; width: 100%; height: auto; max-width: none;   /* KEINE Skalierung (kein 104/105 %) */
  margin: 0; padding: 0;
}

/* Rechte Spalte (Logo + Inhalt) läuft auf allen Seiten bis an die rechte Kante
   des weißen Bereichs – das rechte Raster-Padding ist global entfernt (s. .page-grid). */

/* ============================================================
   5 · NAVIGATION
   ============================================================ */
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block;
  padding: clamp(9px, 1.3vw, 15px) 0;
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nav);
}
.nav-list a:hover { color: var(--nav-active); }
.nav-list a.active { color: var(--nav-active); font-weight: 700; }

/* Erste Navi-Zeile exakt auf die Oberkante des rechten Inhalts legen
   (Startseite = Bildoberkante · Unterseiten = Überschrift-Oberkante).
   Nur Desktop – auf Mobil ist die linke Navi ausgeblendet. */
@media (min-width: 769px) {
  .nav-list { margin-top: -4px; }                 /* zieht WORKS-Oberkante exakt auf Raster-Reihe 2 (= Bild-/Inhaltsoberkante, pixelvermessen) */
  .nav-list li:first-child a { padding-top: 0; }  /* entfernt den oberen Innenabstand des ersten Punktes */
  .subpage .page-head  { margin-top: -4px; }      /* Überschrift-Oberkante = Navi-Oberkante */
  .subpage .legal-page { margin-top: -4px; }
  .subpage .work:first-of-type > .work-head:first-child { margin-top: -22px; }   /* WORKS-Seite: Projekttitel-Oberkante = Navi-Oberkante
     (22px = Unterkanten-Ausrichtung des Kopfes + Schriftversatz, pixelvermessen; die kleinere Jahreszahl rechts ragt bewusst darüber – Kundenentscheid) */
}

/* Impressum/Datenschutz + Copyright: unten links, ruhig */
.nav-legal { margin-top: auto; padding-top: 42px; font-size: .72rem; letter-spacing: .14em; color: var(--nav); }
.nav-legal a { color: var(--nav); }
.nav-legal a:hover { color: var(--nav-active); }
.nav-copy { display: block; margin: .7em 0 0; font-size: .66rem; letter-spacing: .08em; color: #b3b3b3; }

/* Mobile Off-Canvas + Burger */
.burger { display: none; position: fixed; top: 14px; right: 16px; z-index: 1600; background: none; border: 0; cursor: pointer; padding: 8px; width: 42px; height: 42px; }
.burger span { display: block; width: 26px; height: 2px; margin: 6px 0; background: #666; transition: transform .25s ease, opacity .25s ease; }
.burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 270px; max-width: 80vw; background: #333; transform: translateX(-100%); transition: transform .3s ease; z-index: 1500; padding: 70px 0 30px; overflow-y: auto; }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a { display: block; padding: 14px 22px; color: #ddd; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid #444; }
.mobile-nav a:hover, .mobile-nav a.active { background: #444; color: #fff; font-weight: 700; }
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 1400; }
.nav-overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   6 · STARTSEITE  (statisches, blasses Bild – kein Verlauf, kein Overlay-Text)
   ============================================================ */
.start-visual { position: relative; width: 100%; }
.start-slides { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #ececec; }
.start-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.start-slides .slide.is-active { opacity: 1; }
.start-slides .slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(.94) brightness(1.03); }   /* leicht gedämpft, aber natürlich kräftig */
.start-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; }
.start-dots button { width: 11px; height: 11px; padding: 0; border: 0; background: rgba(210,210,210,.85); cursor: pointer; transition: background .2s ease; }
.start-dots button.is-active { background: #6f6f6f; }

/* ============================================================
   7 · UNTERSEITEN
   ============================================================ */
.page-head { margin: 0 0 clamp(18px, 2.5vw, 30px); }
.page-head h1 { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: .02em; color: #555; text-transform: none; margin: 0; }
.page-lead { color: var(--muted); font-size: .95rem; margin: .4rem 0 0; max-width: 62ch; }

/* Projekt-Eintrag */
.work { margin: 0 0 clamp(46px, 6vw, 84px); }
.work:first-of-type { margin-top: 0; }
.work-lead { display: block; overflow: hidden; background: #ececec; }
.work-lead img { width: 100%; height: clamp(300px, 46vh, 560px); object-fit: cover; transition: transform .6s ease, opacity .3s ease; }
.work-lead:hover img { transform: scale(1.03); opacity: .96; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.work-title { margin: 0; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.7rem); color: #3a3a3a; line-height: 1.25; }
.work-title strong { font-weight: 700; color: #333; }
.work-data { margin: 0; text-align: right; color: var(--muted); font-size: .9rem; letter-spacing: .03em; white-space: nowrap; }
.work-data .yr { display: block; color: #6f6f6c; font-size: 1.02rem; letter-spacing: .1em; margin-bottom: 3px; }
.work > .work-head:first-child { margin-top: 0; margin-bottom: 14px; }   /* Projektname/-daten stehen über dem Foto */

/* Pörrbach: Vorher/Nachher paarweise */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
/* Abschließender Nachher-Block: deutlich vom letzten Vorher-/Nachher-Paar
   abgesetzt (Kundenvorgabe: ca. 3,0 cm; 3 cm = 113 px, auf Mobil ca. 1 cm) */
.ba-grid--after { margin-top: clamp(38px, 8vw, 113px); }
.ba { position: relative; margin: 0; overflow: hidden; background: #ececec; }
.ba a { display: block; overflow: hidden; }
.ba img { width: 100%; height: clamp(180px, 26vw, 340px); object-fit: cover; transition: transform .6s ease, opacity .3s ease; }
.ba a:hover img { transform: scale(1.03); opacity: .96; }
.ba-tag, .gtag { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(40,40,40,.8); color: #fff; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; }
.ba--full { grid-column: 1 / -1; }
.ba--before img { filter: grayscale(100%) contrast(1.05); }   /* Vorher-Fotos im Schwarz-Weiß-Duktus, Nachher bleibt farbig */

/* Office / Profil */
.profil-wrap { display: flex; align-items: flex-start; gap: 34px; margin: 0 0 30px; }
.profil-portrait { flex: 0 0 34%; max-width: 280px; margin: 0; }
.profil-portrait img { width: 100%; }
.profil-body { flex: 1 1 auto; min-width: 0; }
.profil-head { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; margin: 0 0 1.4rem; }
/* Werdegang (Kundenvorgabe 08/2026, 2. Runde - nach OFFICE.pdf Seite 2):
   · Jahresspalte rechtsbündig -> senkrechte Kante zwischen Jahr und Text
   · alle Texte an derselben linken Kante (Tabellenspalte), Textspalte läuft
     ohne Rest-Padding bis an die rechte Inhaltskante
   · KEIN pauschaler Blocksatz: lange Zeilen werden einzeln per .fitline
     exakt auf die Spaltenbreite eingepasst (Schriftgrad = Spaltenbreite /
     Zeilenlaufweite --l in em, wie in der Kunden-PDF mit variierenden
     Zeilengrößen). Kurze Zeilen bleiben in Normalgröße und werden nicht
     auseinandergezogen. */
.timeline { width: 100%; border-collapse: collapse; }
.timeline td { vertical-align: top; padding: 0 0 22px 0; font-size: .95rem; color: #555; border: 0; }
.timeline td.year { white-space: nowrap; width: 110px; padding-right: 16px; text-align: right; }
.timeline tr td p { margin: 0 0 .35em; }
/* Kantenbezug bei durchgehend EINHEITLICHER Schriftgröße:
   KEIN pauschaler Blocksatz - alle Zeilen stehen linksbündig und brechen
   natürlich um (verhindert gedehnte Wortabstände und "Sprünge" in Tablet-/
   Zwischenbreiten). Nur im Vollausbau (Frame = 1440px, PDF-Referenzgröße)
   werden die als Kantenzeile vorgesehenen Zeilen (.just) per
   text-align-last exakt bis zur gemeinsamen rechten Kante gedehnt;
   .just--tight zieht die Feststellung-Zeile mit minimal engerem
   Wortabstand auf eine Zeile, damit kein Einzelwort umbricht. */
@media (min-width: 1440px) {
  .just { text-align: justify; text-align-last: justify; }
  .just--tight { word-spacing: -0.09em; }   /* hält die Zeile auch bei 1440px-Fenster (Scrollbar-Rinne) einzeilig */
}
/* Hält inhaltlich zusammengehörende Begriffe beim Umbruch zusammen - nur auf
   Breiten, auf denen die Textspalte die Phrase auch fasst; darunter darf
   normal umbrochen werden (verhindert horizontales Scrollen, z. B. Tablets). */
@media (min-width: 901px) {
  .nobr { white-space: nowrap; }
}

/* Contact */
.contact-grid { display: flex; gap: 36px; align-items: flex-start; margin: 0 0 30px; }
.contact-address { flex: 0 0 40%; max-width: 360px; font-size: .98rem; color: #555; line-height: 1.7; }
.contact-address p { margin: 0 0 1.2em; }
.contact-address strong { color: #333; font-weight: 700; }
.contact-address a { color: #555; }
.contact-address a:hover { color: var(--nav-active); }
.contact-map { flex: 1 1 auto; min-width: 0; }
.map-embed { position: relative; width: 100%; padding-bottom: 56%; height: 0; overflow: hidden; background: #ececec; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-consent-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .7rem; padding: 24px; }
.map-consent-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #444; }
.map-consent-box p { margin: 0; max-width: 46ch; font-size: .9rem; color: #555; }
.map-consent-box a { color: #555; text-decoration: underline; }
.map-load-btn { margin-top: .3rem; border: 0; cursor: pointer; padding: 11px 26px; background: var(--accent); color: #fff; font-size: .9rem; font-family: inherit; text-transform: uppercase; letter-spacing: .1em; }
.map-load-btn:hover { background: var(--accent-2); }
.map-remember { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: #777; cursor: pointer; }

/* ============================================================
   8 · GALERIEN + LIGHTBOX
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin: 16px 0 0; }   /* dreispaltig, bündig mit dem Hauptbild */
.gallery .gitem { position: relative; overflow: hidden; }
.gallery .gitem img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.gallery .gitem:hover img { transform: scale(1.05); opacity: .94; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 2500; padding: 30px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; }
.lightbox.is-before img { filter: grayscale(100%) contrast(1.05); }   /* Vorher-Bild bleibt auch in der Lightbox schwarz-weiß */
.lightbox-close { position: absolute; top: 18px; right: 26px; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 3rem; cursor: pointer; padding: 0 18px; opacity: .8; }
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }

/* Reveal beim Scrollen */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   9 · FOOTER / LEGAL / COOKIE
   ============================================================ */
.legal-page { font-size: .95rem; color: #555; padding: 0 0 20px; max-width: 82ch; }
.legal-page h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; color: #444; }
.legal-page h2 { font-size: 1.1rem; font-weight: 700; margin-top: 1.8rem; color: #444; }
.legal-page h3 { font-size: 1rem; font-weight: 700; color: #444; margin: 1.4rem 0 .4rem; }
.legal-note { margin-top: 2rem; color: #888; font-size: .9rem; }
.error-404 { text-align: center; padding: 30px 0 50px; }
.error-404 .big { font-size: 5rem; font-weight: 300; color: #bbb; margin: 0; line-height: 1; }
.btn { display: inline-block; margin-top: 18px; padding: 11px 26px; background: var(--accent); color: #fff !important; font-size: .9rem; text-transform: uppercase; }
.btn:hover { background: var(--accent-2); }

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #2b2b2b; color: #eee; padding: 16px 20px; display: none; z-index: 3000; box-shadow: 0 -2px 12px rgba(0,0,0,.3); }
.cookie-banner.is-visible { display: block; }
.cookie-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.cookie-inner p { margin: 0; font-size: .85rem; }
.cookie-inner a { color: #bbb; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-btn { border: 0; cursor: pointer; padding: 9px 20px; font-size: .85rem; font-family: inherit; }
.cookie-accept { background: var(--accent); color: #fff; } .cookie-accept:hover { background: var(--accent-2); }
.cookie-decline { background: #555; color: #fff; } .cookie-decline:hover { background: #6a6a6a; }

/* ============================================================
   10 · RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .page-grid { grid-template-columns: 1fr; grid-template-rows: auto auto; column-gap: 0; padding: 16px 18px 40px; }
  .home-logo, .subpage .logo-row { grid-column: 1; grid-row: 1; position: static; aspect-ratio: auto; height: auto; overflow: visible; margin: 0 0 16px 0; max-width: calc(100% - 84px); }   /* Wortmarke bleibt links, mit Abstand frei vom Burger */
  .logo-img { position: static; width: 100%; top: auto; right: auto; left: auto; }
  .visual-column { grid-column: 1; grid-row: 2; }
  .nav-column { display: none; }
  .burger { display: block; background: rgba(255,255,255,.92); border-radius: 5px; box-shadow: 0 1px 6px rgba(0,0,0,.15); }   /* immer sichtbar/bedienbar über dem Logo */
  .profil-wrap { flex-direction: column; gap: 8px; }
  .profil-portrait { width: 60%; max-width: 220px; margin: 0 0 12px; }
  .timeline, .timeline tbody, .timeline tr, .timeline td { display: block; width: 100%; }
  .timeline td.year { padding-bottom: 2px; font-weight: 700; color: #444; text-align: left; }
  .timeline td:not(.year) { padding-bottom: 18px; }
  .contact-grid { flex-direction: column; gap: 22px; }
  .contact-address { flex: none; max-width: none; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .work-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .work-data { text-align: left; white-space: normal; }   /* umbrechen statt Seite breit ziehen */
  .work-data .yr { display: inline; margin-right: 8px; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .gitem img { aspect-ratio: auto; }
  .ba-grid { gap: 8px; }
}