/* ==========================================================================
   RAUL GHEGHES — Commercial Photo & Video Production
   style.css

   Aufbau dieser Datei:
   1. Schriften (lokal gehostet, keine externen CDNs)
   2. Design-Tokens (Farben, Abstände, Typo-Skala)
   3. Reset & Basis
   4. Wiederverwendbare Bausteine (Buttons, Section, Eyebrow)
   5. Sektionen in Reihenfolge der Seite
   6. Rechtsseiten (impressum.html / datenschutz.html)
   ========================================================================== */


/* ==========================================================================
   1. SCHRIFTEN — lokal aus /fonts, DSGVO-konform (kein Google-Fonts-CDN)
   ========================================================================== */

/* --- Instrument Serif (Überschriften) ---
   Diese Schrift gibt es nur in EINEM Schnitt (400 Regular) — ein leichteres
   oder fetteres Gewicht ist technisch nicht möglich. Sie ist eine
   kontrastreiche Display-Serif und wirkt dadurch von sich aus schlank. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrumentserif-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Montserrat (Fließtext) ---
   Ebenfalls Variable Font, Gewichte 100 bis 900 in einer Datei.
   Genutzt werden 400 (normal) und 700 (fett, z. B. <strong>). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-var-latin.woff2') format('woff2-variations'),
       url('fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/montserrat-var-latin-ext.woff2') format('woff2-variations'),
       url('fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. DESIGN-TOKENS
   Hier zentral anpassen — wirkt sich auf die ganze Seite aus.
   ========================================================================== */

:root {
  /* Farben — bewusst reduziert: nur Schwarz/Weiß + Grauabstufungen */
  --schwarz:        #000000;
  --weiss:          #FFFFFF;
  --grau-text:      #555555;    /* Sekundärtext */
  --grau-linie:     #E4E4E4;    /* Trennlinien */

  /* Schriftfamilien */
  /* Überschriften: Instrument Serif (nur Gewicht 400 verfügbar) */
  --font-headline:  'Instrument Serif', Georgia, 'Times New Roman', serif;
  /* Fließtext, Unterzeilen UND alle kleinen Versal-Labels: Montserrat.
     Kleine Schriftgrade in einer Display-Serif wirken zu zart — deshalb
     übernimmt hier bewusst die Sans. */
  --font-text:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-label:     var(--font-text);

  /* Vertikaler Rhythmus — großzügiger Negative Space.
     clamp(min, fluid, max) = skaliert automatisch mit der Viewport-Breite. */
  --space-sektion:  clamp(6rem, 14vw, 12rem);   /* Abstand oben/unten je Sektion */
  --space-l:        clamp(2.5rem, 5vw, 4.5rem);
  --space-m:        clamp(1.5rem, 3vw, 2.5rem);
  --space-s:        1rem;

  /* Seitenränder & Maximalbreiten */
  --rand:           clamp(1.5rem, 6vw, 6rem);
  --breite-max:     1400px;   /* Gesamtcontainer */
  --breite-text:    62ch;     /* Optimale Lesebreite für Fließtext */

  /* Textschatten im Hero — hebt die Schrift vom bewegten Video ab.
     Zwei Ebenen: eine enge, dunkle für die Kontur (gibt Definition) und
     eine weite, weiche für die Tiefe (löst den Text vom Hintergrund).
     Beide sind neutral schwarz, damit die Seite monochrom bleibt.
     Zum Abschwächen einfach die Deckkraft-Werte reduzieren. */
  --schatten-hero:  0 1px 2px rgba(0, 0, 0, 0.4),
                    0 10px 44px rgba(0, 0, 0, 0.5);

  /* Tracking der Headlines. Serifen brauchen wenig zusätzliche Laufweite. */
  --tracking:       0.03em;

  /* Kleine Versal-Labels (Eyebrow, Buttons, Nummern) brauchen mehr Laufweite
     als große Headlines: je kleiner die Schrift, desto mehr Abstand.
     Hier zentral regelbar. */
  --tracking-label: 0.12em;
}


/* ==========================================================================
   3. RESET & BASIS
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Nutzer, die reduzierte Bewegung eingestellt haben, bekommen keine Animationen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.85;                    /* große Zeilenhöhe = ruhiges Lesegefühl */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking);
  line-height: 1.25;
  margin: 0;
  /* Verhindert, dass das Tracking rechts optisch überhängt */
  text-indent: var(--tracking);
  /* Überlange Wörter dürfen umbrechen, statt aus dem Layout zu ragen.
     Bewusst OHNE automatische Silbentrennung: in großen Headlines sähe
     ein "PRO-JEKT" schlecht aus. Nur die Rechtsseiten trennen automatisch
     (siehe Abschnitt 6). */
  overflow-wrap: break-word;
  hyphens: manual;
}

p { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }

/* Sichtbarer Fokusrahmen für Tastaturnutzer (Barrierefreiheit) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Zum Inhalt springen" — erscheint nur bei Tastaturfokus */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  background: var(--schwarz);
  color: var(--weiss);
  padding: 1rem 1.5rem;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }


/* ==========================================================================
   4. WIEDERVERWENDBARE BAUSTEINE
   ========================================================================== */

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* --- Sektion --- */
.section { padding-block: var(--space-sektion); }

/* Feine Trennlinie zwischen Sektionen — hält das Layout ruhig statt bunt */
.section--linie { border-top: 1px solid var(--grau-linie); }

/* --- Eyebrow (kleines Label über einer Überschrift) --- */
.eyebrow {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--grau-text);
  margin: 0 0 var(--space-l);
  display: block;
}

/* --- Überschriften-Größen --- */
.h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); }
.h3 { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); }

/* --- Fließtext-Varianten --- */
.lead {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  max-width: var(--breite-text);
  line-height: 1.8;
}
.text-sek { color: var(--grau-text); }

/* --- Buttons ---
   Mindesthöhe 48px + großzügiges Padding = gut auf dem Handy treffbar. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 1rem 2.25rem;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--schwarz);
  background: var(--schwarz);
  color: var(--weiss);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--weiss);
  color: var(--schwarz);
}

/* Invertierte Variante — für den Hero über dem Video */
.btn--invert {
  background: var(--weiss);
  color: var(--schwarz);
  border-color: var(--weiss);
}
.btn--invert:hover,
.btn--invert:focus-visible {
  background: transparent;
  color: var(--weiss);
}

/* Große Variante für den Kontakt-Abschnitt */
.btn--gross {
  min-height: 68px;
  padding: 1.25rem 3rem;
  font-size: 0.95rem;
}

/* Auf sehr schmalen Displays über die volle Breite.
   Weniger Innenabstand, damit die Beschriftung einzeilig bleibt. */
@media (max-width: 30rem) {
  .btn {
    width: 100%;
    padding-inline: 1rem;
  }
  .btn--gross {
    padding-inline: 1rem;
    font-size: 0.85rem;
  }
}

/* --- Sanftes Einblenden beim Scrollen (via JS, IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Ohne JS bleibt alles sichtbar — Inhalt darf nie unsichtbar hängen bleiben */
.no-js .reveal { opacity: 1; transform: none; }


/* ==========================================================================
   5. SEKTIONEN
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 HERO — voller Viewport, Hintergrundvideo
   Videodateien austauschen: hero-loop.webm / hero-loop.mp4 / hero-poster.jpg
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* 100svh = "small viewport height": korrekt auf iOS trotz Browserleiste */
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;          /* Text unten links */
  overflow: hidden;
  background: var(--schwarz);     /* Fallback, solange das Video lädt */
  color: var(--weiss);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* füllt die Fläche, ohne zu verzerren */
  z-index: 0;
}

/* Dunkler Verlauf, damit der weiße Text lesbar bleibt.
   Bewusst NUR im Hero — der Rest der Seite bleibt reines Weiß/Schwarz. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.20) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

.hero__inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(5rem, 12vh, 9rem);
}

/* Disziplinen-Signatur über dem Namen.
   Als Liste ausgezeichnet, weil es drei gleichrangige Begriffe sind.
   Die Trennpunkte kommen aus dem CSS und stören keinen Screenreader. */
.hero__disziplinen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  list-style: none;
  margin: 0 0 var(--space-m);
  padding: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(0.6rem, 0.55rem + 0.25vw, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.88);
}
.hero__disziplinen li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.hero__disziplinen li:not(:last-child)::after {
  content: '·';
  opacity: 0.55;
  letter-spacing: 0;
}

.hero__titel {
  font-size: clamp(2rem, 1rem + 7vw, 6rem);
  /* Instrument Serif gibt es nur in Gewicht 400. Der schlanke Eindruck
     kommt hier aus der Schrift selbst: hohe Strichkontraste und feine
     Serifen wirken deutlich leichter als eine Sans im gleichen Gewicht. */
  font-weight: 400;
  margin: 0 0 var(--space-m);
  /* Auf sehr schmalen Handys darf der Name umbrechen, statt zu überlaufen —
     aber nicht mit Trennstrich: ein Eigenname wird nicht getrennt. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-shadow: var(--schatten-hero);
}

.hero__subtitel {
  font-family: var(--font-text);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-l);
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Scroll-Indikator --- */
.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 1.75rem;
  right: var(--rand);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.25s ease;
}
.hero__scroll:hover { color: var(--weiss); }
.hero__scroll span {
  display: block;
  width: 1px;
  height: 40px;
  background: currentColor;
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* Auf kleinen Displays den Scroll-Indikator ausblenden — spart Platz */
@media (max-width: 40rem) {
  .hero__scroll { display: none; }
}


/* --------------------------------------------------------------------------
   5.2 POSITIONIERUNG — Value Proposition
   -------------------------------------------------------------------------- */

.positionierung__satz {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;         /* etwas enger als Standard, da sehr groß */
  line-height: 1.35;
  font-size: clamp(1.6rem, 1rem + 3.2vw, 3.75rem);
  max-width: 22ch;
  margin: 0 0 var(--space-l);
}

.positionierung__text {
  max-width: 46ch;
  margin-left: auto;              /* versetzt nach rechts = editorialer Look */
}

@media (max-width: 60rem) {
  .positionierung__text { margin-left: 0; }
}

/* Die drei Disziplinen als gleichwertiger Dreiklang */
.disziplinen {
  list-style: none;
  margin: var(--space-sektion) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .disziplinen {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.disziplin {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding-top: var(--space-m);
  border-top: 1px solid var(--schwarz);
}

.disziplin__titel {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  margin: 0;
}

.disziplin__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grau-text);
  max-width: 34ch;
}


/* --------------------------------------------------------------------------
   5.3 VIDEO-FASSADE (Portfolio & Testimonial)
   Klick-zum-Laden: Vimeo wird erst nach aktivem Klick geladen (DSGVO + Speed)
   -------------------------------------------------------------------------- */

/* Responsiver 16:9-Container */
.video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;            /* 9 / 16 = 56.25% */
  background: var(--schwarz);
  overflow: hidden;
}

/* Die Fassade (Vorschaubild + Play-Button) füllt den Container */
.video__fassade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.video__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease, transform 0.6s ease;
}
.video__fassade:hover .video__bild,
.video__fassade:focus-visible .video__bild { opacity: 0.75; }

/* Play-Button — schlichter weißer Kreis mit schwarzem Dreieck */
.video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 12vw, 96px);
  height: clamp(64px, 12vw, 96px);
  border-radius: 50%;
  background: var(--weiss);
  display: grid;
  place-items: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.video__fassade:hover .video__play,
.video__fassade:focus-visible .video__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.video__play svg {
  width: 28%;
  height: 28%;
  fill: var(--schwarz);
  margin-left: 8%;                /* optische Zentrierung des Dreiecks */
}

/* Projektangabe unter dem Video: Kunde + Ergebnis */
.projekt {
  display: grid;
  gap: 0.65rem;
  max-width: 58ch;
  margin: var(--space-m) 0 0;
}

.projekt__kunde {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin: 0;
}

.projekt__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--grau-text);
}

/* Hinweistext unter dem Video: erklärt die Datenübertragung an Vimeo */
.video__hinweis {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--grau-text);
  max-width: 60ch;
  margin: var(--space-m) 0 0;
}

/* Der per JS eingesetzte iframe */
.video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* --------------------------------------------------------------------------
   5.4 TESTIMONIALS
   Solange kein Inhalt da ist, wirkt der Abschnitt bewusst leer/ruhig —
   das Layout bleibt intakt.
   -------------------------------------------------------------------------- */

.testimonial__raster {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

/* Ab Tablet: Video links (breit), Logo/Zitat rechts (schmal) */
@media (min-width: 60rem) {
  .testimonial__raster {
    grid-template-columns: 2fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

/* Platzhalter-Kachel: dezent gepunktete Umrandung, kein "kaputtes" Element */
.platzhalter {
  border: 1px dashed var(--grau-linie);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 180px;
  color: var(--grau-text);
  font-size: 0.85rem;
  line-height: 1.7;
}
.platzhalter__label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* Kundenlogo — in Graustufen, damit die Seite monochrom bleibt */
.logo-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.logo-leiste img {
  max-height: 44px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.75;
}


/* --------------------------------------------------------------------------
   5.5 LEISTUNGEN
   -------------------------------------------------------------------------- */

.leistungen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--grau-linie);
}

.leistungen__item {
  border-bottom: 1px solid var(--grau-linie);
  padding-block: var(--space-l);
  display: grid;
  gap: var(--space-s);
}

/* Ab Tablet zweispaltig: Titel links, Beschreibung rechts */
@media (min-width: 48rem) {
  .leistungen__item {
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: baseline;
  }
}

.leistungen__nr {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  color: var(--grau-text);
  display: block;
  margin-bottom: 0.5rem;
}

.leistungen__text {
  max-width: 52ch;
  margin: 0;
}


/* --------------------------------------------------------------------------
   5.6 ÜBER MICH
   Wechselnder Rhythmus: Bild links / Text rechts, darunter Text links /
   Bild rechts. Auf dem Handy stapelt sich alles in der Reihenfolge des
   Quelltexts: Bild, Text, Text, Bild.
   -------------------------------------------------------------------------- */

/* Statement-Überschrift der Sektion. Bewusst etwas kleiner gesetzt als
   der Satz im Abschnitt Positionierung, damit die Hierarchie stimmt. */
.ueber__satz {
  font-size: clamp(1.35rem, 0.95rem + 2.3vw, 2.6rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
  max-width: 26ch;
  margin: 0 0 var(--space-l);
}

/* Der Schlusssatz steht in vollem Schwarz statt Grau — er ist die
   Pointe des Abschnitts und soll auch optisch landen. */
.ueber__schluss {
  color: var(--schwarz);
}

.ueber {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .ueber {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 7vw, 7rem) clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

.ueber__bild {
  margin: 0;
  overflow: hidden;
}

.ueber__bild img {
  width: 100%;
  height: auto;
  display: block;
}

/* Auf dem Handy sollen die Hochformate nicht die halbe Seite füllen */
@media (max-width: 60rem) {
  .ueber__bild {
    max-width: 26rem;
  }
}

.ueber__text {
  display: grid;
  gap: var(--space-m);
  max-width: 46ch;
}

/* Kurze Eckdaten als Beschreibungsliste — sauber ausgezeichnet,
   damit Screenreader Begriff und Wert zusammen vorlesen. */
.fakten {
  margin: var(--space-s) 0 0;
  display: grid;
  gap: var(--space-s);
  border-top: 1px solid var(--grau-linie);
  padding-top: var(--space-m);
}

.fakten > div {
  display: grid;
  gap: 0.3rem;
}

.fakten dt {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--grau-text);
}

.fakten dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
   5.7 KONTAKT
   -------------------------------------------------------------------------- */

.kontakt__titel {
  font-size: clamp(1.75rem, 1.1rem + 3.5vw, 4rem);
  max-width: 16ch;
  margin: 0 0 var(--space-l);
}

.kontakt__cta { margin-bottom: var(--space-m); }

.kontakt__hinweis {
  font-size: 0.9rem;
  color: var(--grau-text);
  margin: 0 0 var(--space-l);
}

/* Direktkontakt: Telefon & E-Mail */
.kontakt__direkt {
  list-style: none;
  margin: 0 0 var(--space-sektion);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) clamp(2rem, 6vw, 4rem);
}
.kontakt__direkt a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;               /* mobile Klickfläche */
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid var(--schwarz);
  padding-bottom: 2px;
  transition: opacity 0.25s ease;
}
.kontakt__direkt a:hover { opacity: 0.55; }
.kontakt__direkt .label {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--grau-text);
  margin-bottom: 0.35rem;
}

/* --- Formular --- */
.formular {
  max-width: 640px;
  margin-top: var(--space-l);
}

.feld { margin-bottom: var(--space-l); }

.feld label {
  display: block;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-bottom: 0.75rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld textarea {
  width: 100%;
  min-height: 56px;
  padding: 1rem 0;
  font-family: var(--font-text);
  font-size: 1rem;               /* 16px verhindert Auto-Zoom auf iOS */
  line-height: 1.6;
  color: var(--schwarz);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--schwarz);
  border-radius: 0;              /* iOS-Standardrundung entfernen */
  -webkit-appearance: none;
  transition: border-color 0.25s ease;
}
.feld textarea {
  min-height: 160px;
  resize: vertical;
  padding-top: 0.75rem;
}
.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-bottom-width: 2px;
}
.feld input::placeholder,
.feld textarea::placeholder { color: #9A9A9A; }

/* DSGVO-Checkbox */
.feld--zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.feld--zustimmung input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.35rem;
  accent-color: var(--schwarz);
  cursor: pointer;
}
.feld--zustimmung label {
  font-family: var(--font-text);
  font-size: 0.85rem;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  cursor: pointer;
  color: var(--grau-text);
}
.feld--zustimmung a { color: var(--schwarz); }

/* Honeypot gegen Spam — für Menschen unsichtbar, Bots füllen ihn aus */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Statusmeldungen nach dem Absenden */
.formular__status {
  margin-top: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--schwarz);
  font-size: 0.95rem;
  line-height: 1.7;
}
.formular__status[hidden] { display: none; }
.formular__status--fehler { border-color: var(--grau-text); color: var(--grau-text); }


/* --------------------------------------------------------------------------
   5.8 FOOTER
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--grau-linie);
  padding-block: var(--space-l);
  font-size: 0.8rem;
  color: var(--grau-text);
}
.footer__inhalt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer a:hover { color: var(--schwarz); }


/* ==========================================================================
   6. RECHTSSEITEN (impressum.html / datenschutz.html)
   ========================================================================== */

.rechtstext {
  max-width: 68ch;
  padding-block: clamp(4rem, 10vw, 8rem);
}

.rechtstext h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  margin-bottom: var(--space-l);
}

.rechtstext h2 {
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}

/* Nur hier automatische Silbentrennung: Begriffe wie
   "Verbraucherstreitbeilegung" oder "Universalschlichtungsstelle" passen
   auf dem Handy sonst nicht in eine Zeile. Funktioniert, weil im
   <html>-Tag lang="de" gesetzt ist. */
.rechtstext h1,
.rechtstext h2 { hyphens: auto; }

.rechtstext p { line-height: 1.9; }

.rechtstext ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-m);
}
.rechtstext li { margin-bottom: 0.5rem; }

/* Adressblöcke und ähnliche Zeilenlisten */
.rechtstext .block {
  margin: 0 0 var(--space-m);
  line-height: 1.9;
}

.rechtstext a { color: var(--schwarz); }

/* Zurück-Link oben auf den Rechtsseiten */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  color: var(--grau-text);
  transition: color 0.25s ease;
}
.zurueck:hover { color: var(--schwarz); }

.rechtstext .stand {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--grau-linie);
  font-size: 0.85rem;
  color: var(--grau-text);
}