/* =========================================================
   SC34 — Wireframe-Umsetzung (Graustufen, Bildplatzhalter)
   Basierend auf Relume-Wireframe (Desktop + Mobile)

   AUFBAU DIESER DATEI (in dieser Reihenfolge):
   1. Variablen (:root)              — Farben, Abstände, Schrift
   2. Reset & Grundeinstellungen     — Basis für alle Elemente
   3. Wiederverwendbare Bausteine    — Buttons, Platzhalter, Tags
   4. Sektionen einzeln              — Header, Hero, Leistungen, ...
   5. Responsive (@media)            — Anpassungen für Tablet/Mobile
   6. Große Bildschirme (@media)     — Optimierung ab 1440px / 1920px
   ========================================================= */


/* ---------------------------------------------------------
   1. VARIABLEN
   --------------------------------------------------------- */
:root {
  --black: #1a1a1a;
  --dark: #2b2b2b;
  --gray-700: #4a4a4a;
  --gray-500: #767676;
  --gray-300: #c2c2c2;
  --gray-200: #e0e0e0;
  --gray-100: #f1f1f1;
  --white: #ffffff;

  /* BREITE: von 1200px auf 1440px erhöht.
     Auf einem 1920px-Bildschirm bedeutet das:
     - Inhalt: 1440px breit
     - Weißer Rand links + rechts: je 240px
     Das ist bewusst — der Inhalt soll nicht von Rand zu Rand
     laufen, sondern lesbar und ruhig bleiben. */
  --max-w: 1440px;
  --gap: 24px;
  --radius: 4px;

  /* PADDING DES CONTAINERS:
     clamp(min, bevorzugt, max) bedeutet:
     - Mindestens 24px (auf kleinen Screens)
     - Im Idealfall 4% der Bildschirmbreite
     - Maximal 80px (auf sehr großen Screens)
     So hat der Inhalt auf 1920px immer noch seitlichen Abstand
     und läuft nie bis an den absoluten Rand. */
  --container-padding: clamp(24px, 4vw, 80px);

  --section-padding: 96px;
  --section-padding-mobile: 56px;

  /* Auf großen Screens mehr Abstand zwischen Sektionen */
  --section-padding-large: 120px;

  --font: 'Helvetica Neue', Arial, sans-serif;
}


/* ---------------------------------------------------------
   2. RESET & GRUNDEINSTELLUNGEN
   --------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  line-height: 1.55;
  /* Schriftgröße skaliert flüssig von 16px (klein) bis 18px (groß).
     clamp(minimum, bevorzugt, maximum) */
  font-size: clamp(16px, 1.1vw, 18px);
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Schriftgrößen skalieren flüssig mit der Bildschirmbreite:
   Auf 320px: klein, auf 1920px: groß — automatisch, ohne
   feste Breakpoints für jede Größe einzeln zu schreiben. */
h1 { font-size: clamp(28px, 3.2vw, 58px); }
h2 { font-size: clamp(24px, 2.8vw, 44px); }
h3 { font-size: clamp(17px, 1.4vw, 22px); font-weight: 600; }

p { color: var(--gray-700); }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

/* .container: Inhalt wird zentriert und bekommt seitliches
   Padding das mit der Bildschirmbreite skaliert (clamp oben).
   Auf 1920px: ca. 80px Padding links + rechts — der Inhalt
   läuft also nie bis zum absoluten Rand. */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.center { text-align: center; }

.eyebrow {
  display: block;
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 10px;
}

.section-intro {
  max-width: 600px;
  margin-bottom: 48px;
}
.section-intro.center { max-width: 600px; margin-left: auto; margin-right: auto; }
.section-intro p { margin-top: 10px; }


/* ---------------------------------------------------------
   3. WIEDERVERWENDBARE BAUSTEINE
   --------------------------------------------------------- */

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: clamp(11px, 1vw, 15px) clamp(22px, 2vw, 32px);
  border: solid 2px;
  border-radius: 35px;
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 600;
  border: 1px solid var(--black);
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.75; }

.btn-dark {
  background: var(--black);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--black);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.btn-row.center { justify-content: center; }

.link-arrow {
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 600;
  display: inline-block;
  margin-top: 16px;
}

/* --- Bild- / Icon-Platzhalter --- */
.img-placeholder {
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 13px;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.icon-placeholder {
  width: 40px;
  height: 40px;
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  margin-bottom: 18px;
}


/* ---------------------------------------------------------
   4. SEKTIONEN
   --------------------------------------------------------- */

/* --- Header --- */
.site-header {
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 100;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo {
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 700;
  font-style: italic;
}

.main-nav {
  display: flex;
  gap: clamp(24px, 2.5vw, 48px);
}
.main-nav a {
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 500;
}
.main-nav a:hover { color: var(--gray-500); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 100%;
  height: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Aktuelles-Leiste (Ankündigungen über dem Hero) --- */
.aktuelles-bar {
  padding-top: 14px;
  padding-bottom: 14px;
}

.aktuelles-bar-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  flex-wrap: wrap;
}

.aktuelles-tag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
}

.aktuelles-text {
  flex: 1 1 320px;
  font-size: clamp(13px, 0.9vw, 15px);
  margin: 0;
  line-height: 1.5;
}

.aktuelles-link {
  flex-shrink: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Hero (Vollbreite-Bild + separate Text-Sektion) ---
   Der Hero besteht aus ZWEI Sektionen:
   1. .hero-visual   — Vollbreite-Foto (ohne Filter/Textüberlagerung)
   2. .hero-intro     — reiner Text darunter, kein Bild daneben */

.hero-visual {
  padding: 0;   /* kein Sektion-Abstand — Bild soll bis an den Header stoßen */
}

.hero-visual-image {
  position: relative;
  width: 100%;
  aspect-ratio: 21/8;   /* breites, flaches Format wie im Referenz-Screenshot */
  overflow: hidden;
}

.hero-visual-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kleine Bildunterschrift rechtsbündig unter dem Hero-Bild.
   Bewusst sehr klein gehalten (Kundenwunsch) — dient nur als
   dezenter Bildnachweis, nicht als gestalterisches Element.
   Bricht bei Bedarf auf 2–3 Zeilen um, statt zu scrollen. */
.hero-visual-caption {
  margin: 6px 0 0;
  text-align: right;
  font-size: 10px;
  line-height: 1.4;
  color: #a0a090;
}

.hero-intro {
  padding-top: clamp(48px, 6vw, 88px);
}

/* Zweispaltig: links die Headline, rechts Text + Buttons.
   1fr 1fr teilt den Platz gleichmäßig auf. */
.hero-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.hero-intro-body p {
  font-size: clamp(15px, 1vw, 18px);
  max-width: 480px;
}

/* --- Leistungen: Icons statt Kreis-Platzhalter --- */
.service-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
}
.service-icon svg { width: 100%; height: 100%; }

/* --- Leistungen --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 40px);
}

.service-card p { font-size: clamp(13px, 0.9vw, 16px); margin-top: 4px; }

.services-footer {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* --- Über uns --- */
.about-text {
  max-width: 780px;
  margin: 24px auto 0;
  text-align: center;
  font-size: clamp(15px, 1vw, 18px);
}

/* --- Projekte --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 36px);
}

.project-image {
  aspect-ratio: 4/3;
  margin-bottom: 18px;
}

.project-card h3 { margin-bottom: 6px; }
.project-card p { font-size: clamp(13px, 0.9vw, 16px); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.tag {
  font-size: clamp(11px, 0.75vw, 13px);
  font-weight: 600;
  padding: 5px 11px;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  color: var(--gray-700);
}

/* --- CAD --- */
.cad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 36px);
  align-items: start;
}

.cad-image { aspect-ratio: 4/3; }
.cad-image.cad-large { aspect-ratio: 16/10; }

/* --- Stats --- */
.stats { background: var(--gray-100); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
}

.stats-text p { margin-top: 14px; }

.stats-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.stat-box {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: clamp(20px, 2vw, 36px);
}

.stat-num {
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 700;
  margin-bottom: 8px;
}

.stat-label {
  font-size: clamp(12px, 0.85vw, 15px);
  color: var(--gray-700);
}

/* --- Kontakt CTA --- */
.contact-cta .container { max-width: 640px; }
.contact-cta p { margin-top: 14px; }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--gray-200);
  padding-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(16px, 3vw, 64px);
  padding-bottom: 48px;
}

.footer-brand p {
  font-size: clamp(13px, 0.85vw, 15px);
  margin-top: 10px;
}
.footer-brand .logo { margin-bottom: 6px; }

.footer-col h4 {
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 600;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: clamp(13px, 0.85vw, 15px); color: var(--gray-700); }
.footer-col a:hover { color: var(--black); }

.footer-bottom {
  border-top: 1px solid var(--gray-200);
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: clamp(11px, 0.75vw, 13px);
  color: var(--gray-500);
}
.footer-legal a { margin-left: 18px; }


/* =========================================================
   5. RESPONSIVE — Tablet & Mobile (unter 860px)
   ========================================================= */

@media (max-width: 860px) {

  section {
    padding-top: var(--section-padding-mobile);
    padding-bottom: var(--section-padding-mobile);
  }

  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .aktuelles-bar-inner { gap: 8px; }
  .aktuelles-link { width: 100%; }

  /* Kontakt-Button im Header verstecken auf Mobile — er steht
     ohnehin als erster Link im aufklappbaren Menü. Das schafft
     Platz und verhindert Gedränge bei sehr schmalen Screens. */
  .header-inner > .btn-dark { display: none; }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    padding: 16px 24px 24px;
    gap: 18px;
  }

  .hero-visual-image { aspect-ratio: 4/3; }
  .hero-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .projects-grid { grid-template-columns: 1fr; }
  .cad-grid { grid-template-columns: 1fr; }
  .cad-image.cad-large { aspect-ratio: 4/3; }
  .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-numbers { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal a:first-child { margin-left: 0; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .stats-numbers { grid-template-columns: 1fr; }

  /* Logo etwas kompakter auf sehr schmalen Screens, damit
     neben dem Hamburger-Icon immer genug Luft bleibt. */
  .logo-icon { width: 36px; height: 36px; }
  .logo-text { font-size: 18px; }
  .logo-sub { font-size: 8px; }
}

/* Kleinste Größe 320px: Container bekommt mindestens 16px Rand */
@media (max-width: 320px) {
  .container { padding: 0 16px; }
  .hero-visual-image { aspect-ratio: 3/4; }
}


/* =========================================================
   6. GROSSE BILDSCHIRME — ab 1440px bis 1920px
   Mehr Luft zwischen Sektionen, größere Abstände im Grid.
   Der Inhalt ist bereits auf max-width: 1440px begrenzt
   und hat durch clamp() automatisch seitliches Padding —
   hier feinjustieren wir nur noch die vertikalen Abstände.
   ========================================================= */

@media (min-width: 1440px) {

  /* Mehr Abstand zwischen Sektionen auf großen Screens */
  section {
    padding-top: var(--section-padding-large);
    padding-bottom: var(--section-padding-large);
  }

  /* Leistungskarten: mehr Abstand zwischen den Spalten */
  .services-grid { gap: 40px; }

  /* Projektkarten: mehr Luft */
  .projects-grid { gap: 36px; }

  /* Hero-Textblock: etwas mehr Abstand nach oben auf großen Screens */
  .hero-intro { padding-top: 96px; }

  /* Stats: mehr Abstand zwischen Text und Zahlen */
  .stats-grid { gap: 96px; }
}


/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}