/* Smart-Present — modern dark theme */
:root{
  --bg:#0b0f14; --surface:#121822; --text:#e8eef6; --muted:#a8b3c7;
  --brand:#7dd3fc; --brand-strong:#22d3ee; --shadow:0 10px 30px rgba(0,0,0,.35);
  --overlay-opacity:0;   /* für Startseiten-Overlay */
  --bg-opacity:0.2;      /* Hintergrundbild-Deckkraft (Unterseiten) */
}

*{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
  min-height:100svh;display:flex;flex-direction:column;
}

/* ---------- Fixierte Hintergründe (Unterseiten) ---------- */
body.leistungen::before,
body.projekte::before,
body.kontakt::before,
body.ueber-mich::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:var(--bg-opacity);
}
body.leistungen::before{ background-image:url('../images/hintergrund_2.png'); }
body.projekte::before{   background-image:url('../images/hintergrund_3.png'); }
body.kontakt::before{    background-image:url('../images/hintergrund_kontakt.png'); }
body.ueber-mich::before{ background-image:url('../images/hintergrund_2.png'); }

/* Stacking: Header oben, Sections darunter */
.site-header{ position:relative; z-index:2000; background:transparent }
.section{ position:relative; z-index:0; background:transparent }
.site-footer{ position:relative; z-index:1; background:transparent }

/* Layout & Typo */
.container{ width:min(1200px,92%); margin:0 auto }
.section{ padding:90px 0 }
h1,h2,h3{ line-height:1.2; margin:0 0 .6em }
h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; letter-spacing:-.02em }
h2{ font-size:clamp(1.7rem,3.5vw,2.35rem); font-weight:800 }
h3{ font-size:1.25rem; font-weight:700 }
.lead{ font-size:clamp(1.05rem,1.2vw,1.2rem); color:var(--muted); max-width:75ch }

/* Header */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.logo-img{ width:40px; height:40px; display:block }
.logo-text{ font-weight:800; letter-spacing:.02em }

/* ======= 2-Item-Header mit Dropdowns ======= */
.nav{ display:flex; align-items:center; gap:24px; position:relative }
.nav-item{ position:relative }
.nav-link{
  background:transparent; border:0; color:var(--muted); font-weight:700;
  cursor:pointer; padding:10px 6px; font-size:1rem;
}
.nav-link:hover, .nav-link[aria-expanded="true"]{
  color:var(--text); text-decoration:underline; text-underline-offset:4px;
}

/* Dropdown (Desktop) */
.dropdown{
  position:absolute; top:100%; left:0; min-width:200px;
  background:#121822;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  z-index:3000; /* über Inhalt */
}
.dropdown a{
  display:block; padding:10px 12px; border-radius:10px;
  text-decoration:none; color:var(--text);
}
.dropdown a:hover{ background: rgba(255,255,255,.06) }

/* Desktop Hover */
@media (hover:hover){
  .has-dropdown:hover > .dropdown{
    opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto;
  }
  .dropdown{ pointer-events:none; }
}

/* Mobile Nav */
.nav-toggle{
  display:none; width:42px; height:36px; border:1px solid rgba(255,255,255,.14);
  border-radius:10px; background:transparent; position:relative;
}
.nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:var(--text) }
.nav-toggle span:nth-child(1){ top:10px }
.nav-toggle span:nth-child(2){ top:17px }
.nav-toggle span:nth-child(3){ top:24px }

@media (max-width:900px){
  .nav-toggle{ display:block }
  .nav{
    position:absolute; right:4%; top: calc(100% + 8px);
    background:#0f141b; border:1px solid rgba(255,255,255,.12);
    border-radius:16px; padding:10px; width:min(92vw, 360px);
    box-shadow:var(--shadow);
    display:none; flex-direction:column; gap:8px;
  }
  .nav.is-open{ display:flex }
  .nav-item{ width:100% }
  .nav-link{
    width:100%; text-align:left; padding:12px; border-radius:12px;
    color:var(--text); background:rgba(255,255,255,.03);
  }
  .nav-link[aria-expanded="true"]{ background:rgba(255,255,255,.06) }
  .dropdown{
    position:static; transform:none; opacity:1; visibility:visible;
    background:transparent; border:0; padding:6px 0; box-shadow:none; margin-top:4px;
    pointer-events:auto;
  }
  .dropdown a{ padding:10px 12px; border-radius:10px; background:transparent }
  .dropdown a:hover{ background:rgba(255,255,255,.06) }
}

/* Hero (nur Startseite) */
body.home .hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:url('../images/hintergrund_oberteil.jpg') center/cover no-repeat fixed;
  position:relative; isolation:isolate; padding:0 16px;
}
body.home .hero::after{
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at bottom, rgba(20,26,36,.55), rgba(11,15,20,.82));
}
.hero .hero-content{ position:relative; z-index:1; max-width:920px }
.cta-row{ display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap }

.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12); text-decoration:none; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:var(--shadow)
}
.btn.primary{ background:linear-gradient(180deg, var(--brand-strong), var(--brand)); color:#001018; border-color:transparent }
.btn:hover{ transform:translateY(-1px) }

/* Startseiten-Overlay */
#overlay{
  position:fixed; inset:0; z-index:100; pointer-events:none;
  background:url('../images/hintergrund_unterteil.png') bottom center/cover no-repeat;
  opacity:var(--overlay-opacity);
}

/* Grid & Cards */
.grid{ display:grid; gap:18px }
.features{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.projects{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.project img{ width:100%; height:auto; border-radius:12px; display:block; margin-bottom:8px }

/* Kontaktformular */
.contact-form .grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
label{ display:block; font-weight:600; color:var(--text) }
input,textarea,select{
  width:100%; margin-top:6px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); color:var(--text)
}
textarea{ resize:vertical }
fieldset.mc{ margin:8px 0 12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 12px }
fieldset.mc legend{ color:var(--muted); padding:0 6px }
fieldset.mc label{ display:inline-flex; gap:8px; margin:6px 12px 6px 0; align-items:center; font-weight:500 }
.form-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:10px }
.hint{ color:var(--muted); font-size:.95rem }
.btn.secondary{ background:transparent; border:1px solid rgba(255,255,255,.18) }

/* Footer */
.site-footer{
  margin-top:auto; position:relative; z-index:200;
  border-top:1px solid rgba(255,255,255,.08);
  padding:30px 0; background:rgba(10,15,21,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.footer-nav a{ color:var(--muted); margin-left:14px; text-decoration:none }
.footer-nav a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:4px }

/* About-Seite (Desktop) */
.about-grid{ display:grid; grid-template-columns:minmax(320px,1fr) minmax(320px,1fr); gap:2rem; align-items:start }
.about-text{ background:rgba(11,15,20,0.5); padding:2rem; border-radius:1.2rem; max-width:60ch }
.about-text p{ margin:0 0 1rem }
.about-image{ align-self:start; max-width:60ch }
.about-image img{ display:block; width:100%; height:auto; border-radius:1.25rem; box-shadow:0 8px 24px rgba(0,0,0,.15) }

/* Reverse-Variante (Desktop): Bild links, Text rechts */
.about-grid.reverse .about-image{ order:1 }
.about-grid.reverse .about-text{ order:2 }

/* Mobile Anpassungen inkl. Reihenfolge Text→Bild */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:1.25rem }
  .about-text{ max-width:42ch; padding:1.25rem 1rem; border-radius:14px; justify-self:center }
  .about-image{ max-width:42ch; justify-self:center }
  .about-image img{ width:100%; height:auto; border-radius:18px }

  /* Reihenfolge auf Mobile fix: Text immer zuerst, dann Bild */
  .about-grid.reverse .about-text{ order:1 }
  .about-grid.reverse .about-image{ order:2 }
}

/* Über-mich: Hero-Texte kräftig weiß */
body.ueber-mich .about-hero h1,
body.ueber-mich .about-hero .lead{
  color:#e8eef6 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* >>> Überschriften & Untertitel zentrieren (siteweit) <<< */
.section .container > h1,
.section .container > h2,
.section .container > p.lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* optional: Breite der Untertitel begrenzen */
.section .container > p.lead {
  max-width: 75ch;
}

/* Der Hero auf der Startseite ist bereits zentriert; kein weiterer Code nötig. */

/* optional: auch h3 zentrieren */
.section .container h3 {
  text-align: center;
}

/* Klickbare Projekt-Karten (Anker als Card) */
.projects .card {
  display:block;
  text-decoration:none;
  color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease;
}
.projects .card:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.projects .card:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:4px;
  border-radius:16px;
}