/* ==========================================================================
   Benjamin Groth – Kanzlei Operations
   Zentrales Stylesheet für index.html, impressum.html, datenschutz.html
   Farb- und Typografie-Vorgaben: branding.md (verbindlich)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften – lokal eingebunden (DSGVO: kein Google-Fonts-CDN!)
   Dateien liegen in assets/fonts/. font-display: swap zeigt sofort Text
   in der Ersatzschrift, bis die Webfont geladen ist.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-v57-latin/oswald-v57-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("assets/fonts/oswald-v57-latin/oswald-v57-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Farbpalette aus dem Styleguide als CSS-Variablen
   Gewichtung laut Styleguide: 60 % Offwhite/Greige, 25 % Navy/Dark Panel,
   10 % Anthrazit-Text, 5 % Gold. Gold führt, dominiert nicht.
   -------------------------------------------------------------------------- */

:root {
  --navy:        #091620; /* Brand Navy – Header-Flächen, Footer, dunkle Sektionen */
  --dark-panel:  #1B262A; /* Dark Panel – dunkle Infoboxen, sekundäre Flächen */
  --gold:        #B2770E; /* Gold Accent – CTA-Button, Linien, Akzente */
  --ocher:       #91650F; /* Muted Ocher – Hover-Zustände, dunklere Gold-Variante */
  --offwhite:    #F4F1EC; /* Offwhite – Haupt-Hintergrund, helle Sektionen */
  --greige:      #C2BCB8; /* Warm Greige – Rahmen, Trennlinien, dezente Flächen */
  --greige-2:    #A3978D; /* Secondary Greige – Sekundärtexte, feine Linien */
  --text:        #43474D; /* Anthracite – Fließtext */

  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --max-width: 1280px;    /* Inhaltsbreite – füllt breite Monitore souveräner */
}

/* --------------------------------------------------------------------------
   3. Basis / Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Sanftes Scrollen zu den Ankern (#kontakt) – ganz ohne JavaScript */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px – Styleguide: keine zu kleinen Schriftgrößen */
  line-height: 1.7;          /* großzügige Zeilenhöhe für ruhige Lesbarkeit */
  color: var(--text);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ocher);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* Überschriften: Oswald, dunkel, klar (Styleguide) */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}

/* Zentrierter Inhaltscontainer mit seitlichem Abstand */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Einheitlicher vertikaler Rhythmus der Sektionen – viel Weißraum */
.section {
  padding: 88px 0;
}

/* Kleines Label über Sektions-Überschriften mit dünner Goldlinie darunter */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocher);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold); /* dünne Goldlinie, kein Balken */
  margin-bottom: 20px;
}

.section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  margin-bottom: 24px;
}

.section p + p {
  margin-top: 16px;
}

/* Textbreite für lange Absätze begrenzen – angenehme Zeilenlänge */
.prose {
  max-width: 720px;
}

/* Reine Textsektionen („Das Problem", „Die Lösung"): Sie nutzen dasselbe
   Container-Raster wie alle Sektionen (gleiche linke/rechte Kante). Nur
   Label, Überschrift und Fließtext werden auf angenehme Lesebreite
   (ca. 65–75 Zeichen) begrenzt – linksbündig am Raster, damit alle
   Sektions-Überschriften an derselben Kante beginnen. */
.section--narrow .section-label,
.section--narrow h2,
.section--narrow .prose {
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   4. CTA-Button (Primary Button laut Styleguide)
   Kontrast-Hinweis: #F4F1EC auf #B2770E erreicht ca. 3,4:1 – das erfüllt
   WCAG AA für große/fette Schrift. Deshalb ist der Button bewusst auf
   mindestens 18,7px bei Schriftschnitt 600 gesetzt.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--offwhite);
  font-family: var(--font-body);
  font-size: 1.17rem;        /* ≈18,7px – „large text" im Sinne von WCAG */
  font-weight: 600;
  padding: 16px 32px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ocher);  /* Hover: Muted Ocher (Styleguide) */
  text-decoration: none;
}

/* Pfeil nach rechts (optional laut Styleguide) – rein per CSS */
.btn::after {
  content: " →";
}

/* --------------------------------------------------------------------------
   5. Seitenkopf (Header mit Logo und Anker-Navigation)
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--offwhite);
  border-bottom: 1px solid var(--greige);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-header .logo img {
  height: 96px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ocher);
  text-decoration: none;
  border-bottom: 2px solid var(--gold); /* aktive/hover Navigation: Goldlinie */
}

/* Der „Kontakt"-Link ist dezent hervorgehoben, bleibt aber ruhig */
.site-nav .nav-kontakt {
  color: var(--ocher);
}

/* Overlay-Variante (Startseite): Der Header liegt transparent über dem
   oberen Hero-Bereich – Logo = helles BG-Monogramm, Links in Offwhite.
   Er ist NICHT fixiert, sondern scrollt als normaler Seiteninhalt mit
   nach oben aus dem Bild. Dadurch verdeckt er keine Überschriften und
   braucht keinen Scroll-Offset. Inhalt sitzt im .container – also am
   selben Raster wie der restliche Seiteninhalt (Change 2). */
.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
  border-bottom: none;
}

/* Großes, präsentes Monogramm statt Briefmarken-Logo */
.header-overlay .logo img {
  height: 76px;
}

.header-overlay .site-nav a {
  color: var(--offwhite);
}

.header-overlay .site-nav a:hover,
.header-overlay .site-nav a:focus-visible,
.header-overlay .site-nav .nav-kontakt {
  color: var(--gold); /* aktiv/hover in Gold laut Styleguide */
}

/* Burger-Button: standardmäßig verborgen, erscheint nur mobil mit
   aktivem JavaScript (siehe Media Query unten) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 10px 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--offwhite);
}

/* --------------------------------------------------------------------------
   6. Hero
   Desktop: Foto als Hintergrund, Text als echtes HTML darüber.
   Ein dunkler Verlauf von links sichert die Lesbarkeit des Textes.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background-image:
    /* Oberer Verlauf: sichert die Lesbarkeit von Logo und Navigation */
    linear-gradient(180deg,
      rgba(9, 22, 32, 0.55) 0%,
      rgba(9, 22, 32, 0) 22%),
    /* Overlay: links fast deckend dunkel, nach rechts auslaufend */
    linear-gradient(100deg,
      rgba(9, 22, 32, 0.88) 0%,
      rgba(9, 22, 32, 0.72) 45%,
      rgba(9, 22, 32, 0.25) 100%),
    url("assets/images/header.webp");
  background-size: cover;
  background-position: center;
  color: var(--offwhite);
}

.hero .container {
  min-height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 150px; /* Platz für den transparent darüberliegenden Header */
  padding-bottom: 88px;
}

.hero-inner {
  max-width: 680px; /* Text bleibt in der dunklen linken Bildhälfte */
}

.hero h1 {
  font-size: clamp(2.125rem, 5vw, 3.375rem);
  color: var(--offwhite);
  margin-bottom: 28px;
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 18px;
}

.hero .btn {
  margin-top: 16px;
}

/* Dünne Goldlinie über der Headline – exakt so breit wie deren erste
   Zeile („Ihre Zeit gehört den" = 7,9em in Oswald 600). Die font-size
   ist identisch mit der H1, dadurch skaliert der Strich auf allen
   Bildschirmbreiten mit der Headline mit. */
.hero-rule {
  font-size: clamp(2.125rem, 5vw, 3.375rem); /* = H1-Schriftgröße */
  width: 7.9em;
  max-width: 100%;
  height: 2px;
  background: var(--gold);
  border: none;
  margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   7. Sektion „Die Lösung" – dunkle Kontrastfläche (Navy-Anteil der Palette)
   -------------------------------------------------------------------------- */

.section-dark {
  background: var(--navy);
  color: var(--offwhite);
}

.section-dark h2 {
  color: var(--offwhite);
}

.section-dark .section-label {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   8. Leistungen – helle Cards laut Styleguide
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.card {
  background: var(--offwhite);
  border: 1px solid var(--greige);
  border-radius: 4px;
  padding: 32px 28px;
  box-shadow: 0 1px 3px rgba(9, 22, 32, 0.06); /* sehr dezenter Schatten */
}

/* Dünne Goldlinie als Akzent statt Icon-Bibliothek */
.card::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 20px;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.card p {
  font-size: 1rem;
}

/* Die Leistungen-Sektion bekommt einen leicht abgesetzten Greige-Hintergrund */
.section-tinted {
  background: #EAE6DF; /* Offwhite leicht Richtung Greige abgedunkelt */
}

/* --------------------------------------------------------------------------
   9. Zusammenarbeit – drei nummerierte Schritte
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
  /* Als geordnete Liste umgesetzt – Zähler ersetzt die Standard-Nummerierung */
  list-style: none;
  counter-reset: schritt;
}

.step {
  counter-increment: schritt;
}

/* Große Gold-Nummer in Oswald über jedem Schritt */
.step::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
}

.step h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.step p {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   10. Über mich – Porträt neben dem Text, Vertraulichkeit als dunkle Box
   -------------------------------------------------------------------------- */

/* 2×2-Raster:
     Zeile 1: Porträt (r1c1)      | Text (r1c2)
     Zeile 2: Vertraulichkeit (r2c1) | Wortmarke (r2c2)
   align-items: stretch lässt Bild und Text dieselbe Zeilenhöhe teilen –
   sie schließen oben und unten bündig ab. Die Zeilenhöhe bestimmt der
   Text (das Bild bringt über den absolut positionierten Inhalt keine
   Eigenhöhe mit, siehe .about-portrait). */
.about-grid {
  display: grid;
  /* Textspalte auf Lesebreite gedeckelt (minmax), damit sie im breiten
     Container nicht zu breit wird. Das Raster ist linksbündig, die
     linke Kante liegt auf demselben Raster wie die anderen Sektionen. */
  grid-template-columns: 400px minmax(0, 640px);
  justify-content: start;
  column-gap: 56px;
  row-gap: 24px;
  align-items: stretch;
  margin-top: 20px; /* gleicher Abstand wie Trennstrich -> Überschrift */
}

/* Überschrift „Benjamin Groth": Abstand nach unten an den Abstand nach
   oben (Trennstrich) angleichen – beide 20px. */
#ueber-mich h2 {
  margin-bottom: 20px;
}

/* Bild-Wrapper: füllt seine Rasterzelle. Das <img> liegt absolut darin,
   dadurch hat der Wrapper keine Eigenhöhe und die Textspalte gibt die
   Zeilenhöhe vor. object-fit: cover skaliert das Porträt formatfüllend. */
.about-portrait {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.about-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%; /* Gesicht/Oberkörper im Bild halten */
}

/* Volle Wortmarke (Navy): eigene Rasterzelle (r2c2), horizontal und
   vertikal zentriert – füllt so den Freiraum unter dem Text und neben
   der Vertraulichkeits-Box. */
.about-grid .about-wordmark {
  width: 70%;          /* füllt den Freiraum der Zelle dezent */
  max-width: 480px;    /* mit Luft zum Rand */
  align-self: center;
  justify-self: center;
  border: none;
  border-radius: 0;
}

.about-name {
  font-size: 1.375rem;
  margin-bottom: 16px;
}

/* Dunkle Infobox (Dark Card laut Styleguide) für Vertraulichkeit & Remote */
.trust-box {
  background: var(--dark-panel);
  color: var(--offwhite);
  border-radius: 4px;
  padding: 28px 32px;
}

.trust-box h3 {
  color: var(--offwhite);
  font-size: 1.125rem;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--greige-2); /* feine Linie laut Styleguide */
}

.trust-box p {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   11. Kontakt: Abschluss-Text als Einleitung + Formular
   -------------------------------------------------------------------------- */

/* Einleitung und Formular teilen sich dieselbe, in der Sektion
   zentrierte Spalte – als fokussierter Abschluss (bewusst mittig,
   abweichend vom linksbündigen Raster der übrigen Sektionen). */
.kontakt-intro {
  max-width: 640px;
  margin: 0 auto;
}

.form-wrap {
  max-width: 640px;
  margin: 40px auto 0;
}

.form-field {
  margin-bottom: 22px;
}

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  margin-bottom: 8px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--greige);
  border-radius: 4px;
  padding: 13px 14px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid var(--gold); /* deutlicher, aber markenkonformer Fokus */
  outline-offset: 1px;
  border-color: var(--gold);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

/* DSGVO-Einwilligung: Checkbox und Text sauber nebeneinander */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 0.9375rem;
}

.form-consent input[type="checkbox"] {
  margin-top: 5px;
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Bots ein Köder.
   display:none allein reicht nicht immer – daher zusätzlich aus dem
   Layout und der Tab-Reihenfolge genommen. */
.hp-field {
  display: none !important;
  position: absolute;
  left: -9999px;
}

/* --------------------------------------------------------------------------
   13. Footer – Navy-Grund, Logo, Pflicht-Links
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: var(--offwhite);
  padding: 56px 0 40px;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Helles BG-Monogramm (SVG, bereits offwhite – kein Filter nötig).
   Der Namenszug steht in der Copyright-Zeile darunter. */
.site-footer .logo img {
  height: 64px;
  width: auto;
}

.footer-links {
  display: flex;
  gap: 28px;
}

.footer-links a {
  color: var(--offwhite);
  font-size: 0.9375rem;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--gold);
}

.footer-meta {
  font-size: 0.875rem;
  color: var(--greige-2);
}

/* --------------------------------------------------------------------------
   14. Unterseiten (Impressum / Datenschutz)
   -------------------------------------------------------------------------- */

.legal {
  padding: 72px 0 96px;
}

.legal .container {
  max-width: 760px; /* schmalere Textspalte für lange Rechtstexte */
}

.legal h1 {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gold);
}

/* Einleitungszeile direkt unter der H1 (Rechtsgrundlagen-Nennung) */
.legal-lead {
  margin-top: -18px; /* rückt näher an die H1 */
  margin-bottom: 8px;
  color: var(--greige-2);
  font-size: 0.9375rem;
}

.legal h2 {
  font-size: 1.375rem;
  margin-top: 40px;
  margin-bottom: 14px;
}

.legal h3 {
  font-size: 1.125rem;
  margin-top: 28px;
  margin-bottom: 10px;
}

.legal ul {
  margin: 12px 0 12px 22px;
}

/* Platzhalter, die vom Seitenbetreiber ersetzt werden müssen –
   bewusst auffällig, damit nichts versehentlich online geht. */
.platzhalter {
  background: #F3E3C3;
  color: var(--ocher);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}

/* Hinweiskasten am Seitenanfang der Rechtstexte */
.legal-hinweis {
  background: #EAE6DF;
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  margin-bottom: 36px;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   15. Responsive Anpassungen
   -------------------------------------------------------------------------- */

/* Tablet */
@media (max-width: 900px) {
  /* Einspaltig stapeln sich die vier Rasterkinder in Quellreihenfolge:
     Bild → Text → Vertraulichkeits-Box → Wortmarke. */
  .about-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* Ohne zweite Spalte gibt es keine Textspalte, die die Höhe vorgibt –
     der Bild-Wrapper braucht daher ein eigenes Seitenverhältnis
     (entspricht dem Crop 1024×1306), sonst kollabiert er auf 0. */
  .about-portrait {
    aspect-ratio: 1024 / 1306;
    width: 100%;
    max-width: 420px;
    margin: 0 auto; /* zentriert */
  }

  .about-grid .about-wordmark {
    margin: 0 auto;
  }
}

/* Smartphone */
@media (max-width: 720px) {

  .section {
    padding: 64px 0;
  }

  /* Fallback ohne JavaScript: nur Logo + Kontakt-Link, kein Burger */
  .site-nav a {
    display: none;
  }

  .site-nav .nav-kontakt {
    display: inline-block;
  }

  /* Mit JavaScript (html.js): Burger-Button rechts, Navigation als
     Dropdown-Panel unter dem Header. Das Panel hat einen eigenen
     Navy-Grund und funktioniert damit sowohl über dem Hero als auch
     über hellen Sektionen. */
  .js .nav-toggle {
    display: flex;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch; /* Links über die volle Breite (Tap-Fläche) */
    gap: 0;
    background: var(--navy); /* voll deckend – nichts scheint durch */
    padding: 8px 24px 16px;
    border-bottom: 1px solid rgba(244, 241, 236, 0.12);
  }

  .js .nav-open .site-nav {
    display: flex;
  }

  /* Alle Menüpunkte im Panel: klar lesbar, Offwhite, Gold beim Tippen */
  .js .site-nav a,
  .js .site-nav .nav-kontakt {
    display: block;
    color: var(--offwhite);
    font-size: 1.0625rem;
    padding: 14px 0;
    border-bottom: 1px solid rgba(244, 241, 236, 0.08);
  }

  .js .site-nav a:last-child {
    border-bottom: none;
  }

  .js .site-nav a:hover,
  .js .site-nav a:focus-visible {
    color: var(--gold);
    border-bottom-color: rgba(244, 241, 236, 0.08); /* keine Gold-Linie im Panel */
  }

  .site-header .logo img {
    height: 78px;
  }

  /* Monogramm mobil etwas kleiner, bleibt aber präsent */
  .header-overlay .logo img {
    height: 58px;
  }

  /* Hero mobil: Das quer komponierte Foto funktioniert hochkant nicht.
     Stattdessen ruhige Navy-Fläche mit gestapeltem Text – eigene,
     einfachere Anordnung laut Anforderung. Der transparente Header
     liegt auch hier über der Navy-Fläche. */
  .hero {
    background-image: none;
    background-color: var(--navy);
  }

  .hero .container {
    min-height: 0;
    padding-top: 124px; /* Platz für den darüberliegenden Header */
    padding-bottom: 64px;
  }

  .hero p {
    font-size: 1.0625rem;
  }

  .trust-box {
    padding: 24px 22px;
  }

  .footer-links {
    flex-direction: column;
    gap: 12px;
  }
}