/* =====================================================================
   HANDWERTIG – Testnachbau
   Stylesheet in klarer Reihenfolge:
     1. DESIGN-TOKENS  (Farben, Schriften, Abstände – HIER anpassen!)
     2. Basis / Reset
     3. Layout-Helfer
     4. Komponenten (Buttons, Karten, Badges)
     5. Sektionen (in gleicher Reihenfolge wie im HTML)
     6. Footer
     7. Responsive (Media Queries)

   Hinweis für Bearbeitung: Fast alles Visuelle lässt sich allein über
   die Design-Tokens in :root steuern. Farbe/Schrift/Rundung ändern =
   nur die Variablen unten anfassen.
   ===================================================================== */

/* =====================================================================
   1. DESIGN-TOKENS
   ===================================================================== */
:root {
  /* --- Markenfarben --- */
  --color-accent:        #e22278;  /* Primär: Magenta/Pink (Akzente, Pills, Links) */
  --color-accent-dark:   #a8135a;  /* Hover-Zustand der Akzentfarbe        */
  --color-accent-soft:   #fdeaf2;  /* Sehr helle Akzentfläche              */

  /* --- Button-Farbe --- */
  --color-btn:           #1c8a4f;  /* Buttons: Grün                        */
  --color-btn-dark:      #146b3c;  /* Hover-Zustand der Button-Farbe       */

  /* --- Text --- */
  --color-heading:       #3b3e48;  /* Überschriften                        */
  --color-text:          #4a4d57;  /* Fließtext                            */
  --color-muted:         #6b6f7a;  /* Sekundärtext                         */

  /* --- Flächen / Hintergründe --- */
  --color-bg:            #ffffff;  /* Standard-Hintergrund                 */
  --color-mist:          #f5f6f8;  /* "mist"-Sektionen (leicht getönt)     */
  --color-line:          #e6e8eb;  /* Rahmen / Trennlinien                 */
  --color-dark:          #222357;  /* Dunkle Fläche (Footer)               */

  /* --- Schriften --- */
  --font:        'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* große Headlines */
  --font-quote:  'Libre Baskerville', Georgia, 'Times New Roman', serif;  /* Zitate          */

  /* --- Maße --- */
  --maxw:        1180px;   /* max. Inhaltsbreite            */
  --radius:      14px;     /* Standard-Eckenradius          */
  --radius-lg:   22px;     /* große Karten                  */
  --gap:         24px;     /* Standard-Abstand              */
  --pad-y:       92px;     /* vertikaler Sektionsabstand    */
  --shadow:      0 10px 30px rgba(34, 35, 87, .08);
  --shadow-lg:   0 24px 60px rgba(34, 35, 87, .12);
}

/* =====================================================================
   2. BASIS / RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--color-heading); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }

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

ul { margin: 0; padding: 0; list-style: none; }

/* =====================================================================
   3. LAYOUT-HELFER
   ===================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.pad { padding: var(--pad-y) 0; }          /* Standard-Sektion             */
.mist { background: var(--color-mist); }   /* leicht getönte Sektion       */

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px;
}

.lead { font-size: 1.15rem; color: var(--color-muted); max-width: 62ch; }

.section-head { max-width: 60ch; margin-bottom: 48px; }
.section-head.center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--gap); }

/* =====================================================================
   4. KOMPONENTEN
   ===================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--font); font-size: .95rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--color-btn); color: #fff; }
.btn-primary:hover { background: var(--color-btn-dark); color: #fff; }

.btn-ghost { background: transparent; color: var(--color-heading); border-color: var(--color-line); }
.btn-ghost:hover { border-color: var(--color-btn); color: var(--color-btn); }

.btn-block { width: 100%; justify-content: center; }

/* --- Badge / Pill --- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent-dark);
  font-size: .8rem; font-weight: 600;
}

/* --- Karte --- */
.card {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

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

/* --- 5.0 Header / Navigation --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--color-heading); }
.brand span { color: var(--color-accent); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: .95rem; font-weight: 500; color: var(--color-text); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-weight: 600; color: var(--color-heading); }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; color: var(--color-heading);
}

/* --- 5.1 Hero --- */
.hero { padding: 84px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-visual {
  aspect-ratio: 4/3; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #34356e, #222357 55%, var(--color-accent-dark));
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 28px; color: #fff;
}
.hero-visual .tag {
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
  padding: 10px 16px; border-radius: 12px; font-size: .85rem;
}

/* --- 5.2 Zwei Wege, ein Team --- */
.paths { grid-template-columns: 1fr 1fr; }
.path-card ul { margin: 18px 0 26px; display: grid; gap: 10px; }
.path-card li { position: relative; padding-left: 26px; }
.path-card li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--color-accent); font-weight: 700;
}
.path-card .note { font-size: .88rem; color: var(--color-muted); margin-top: 14px; }

/* --- 5.3 Gewerke --- */
.trades { display: flex; flex-wrap: wrap; gap: 12px; }
.trades .pill {
  background: #fff; border: 1px solid var(--color-line); color: var(--color-heading);
  font-size: .92rem; padding: 10px 18px;
}
.trades .pill:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* --- 5.4 Prozess --- */
.steps { grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.step .num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: var(--color-accent); line-height: 1; margin-bottom: 12px;
}

/* --- 5.5 Referenzen --- */
.refs { grid-template-columns: repeat(3, 1fr); }
.ref-card .ref-id { font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--color-accent); }
.ref-card h3 { margin: 8px 0 20px; }
.ref-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ref-stats span {
  background: var(--color-mist); border-radius: 8px; padding: 6px 12px;
  font-size: .85rem; font-weight: 600; color: var(--color-heading);
}

/* --- 5.6 CTA-Band --- */
.cta-band { text-align: center; }
.cta-band .card {
  background: linear-gradient(135deg, #2a2b63, var(--color-dark));
  color: #fff; padding: 64px 40px; border: 0;
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.8); margin: 0 auto 28px; }

/* =====================================================================
   6. FOOTER
   ===================================================================== */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,.75); padding: 72px 0 32px; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-col h4 { color: #fff; font-size: .95rem; margin: 0 0 16px; }
.footer-col li { margin-bottom: 9px; font-size: .9rem; }
.footer-brand .brand { color: #fff; }
.footer-brand address { font-style: normal; font-size: .9rem; line-height: 1.9; margin-top: 14px; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: .85rem;
}

/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .refs { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --pad-y: 64px; }
  .nav-links, .nav-actions .nav-phone { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 16px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; padding: 24px; border-bottom: 1px solid var(--color-line);
  }
  .paths, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}