/* ============================================================
   style.css — eine Datei für die ganze Website
   Aufbau:  1 Grundlagen  2 Layout  3 Header  4 Hero  5 Sektionen
            6 Karten/Referenzen  7 Formular  8 Footer  9 Rechtstexte
   Keine externen Schriften, keine CDNs — alles lokal.
   ============================================================ */

/* ---------- 1 Grundlagen ---------- */
:root{
  --anthrazit:#1C2126;
  --anthrazit-2:#39424A;
  --grau:#6B757D;
  --grau-hell:#F4F5F3;
  --linie:#E2E5E1;
  --weiss:#FFFFFF;
  --akzent:#C05621;        /* warmes Orange — Kontrast auf Weiß: 4.7:1 */
  --akzent-dunkel:#9C4318;
  --akzent-hell:#FBF0E8;
  --gruen:#1F6F4A;
  --rot:#A32E1E;
  --radius:6px;
  --schatten:0 1px 3px rgba(28,33,38,.08), 0 8px 24px rgba(28,33,38,.05);
  --breite:1120px;
  --schrift:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

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

html{scroll-behavior:smooth; color-scheme:light;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}

body{
  margin:0;
  background:var(--weiss);
  color:var(--anthrazit);
  font-family:var(--schrift);
  font-size:17px;              /* nicht unter 16px — Lesbarkeit, BFSG-Empfehlung */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--akzent-dunkel); text-underline-offset:2px;}
a:hover{color:var(--akzent);}
:focus-visible{outline:3px solid var(--akzent); outline-offset:2px; border-radius:2px;}

h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em; text-wrap:balance;}
h1{font-size:clamp(32px,5.5vw,50px); font-weight:800;}
h2{font-size:clamp(26px,3.6vw,36px); font-weight:700;}
h3{font-size:20px; font-weight:700; letter-spacing:-.01em;}
p{margin:0 0 1em; max-width:68ch;}

/* 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;
}

/* Sprunglink für Tastatur-Nutzer */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--anthrazit); color:#fff; padding:12px 20px;
}
.skip:focus{left:8px; top:8px;}

/* ---------- 2 Layout ---------- */
.wrap{max-width:var(--breite); margin:0 auto; padding:0 20px;}

section{padding:72px 0;}
@media (min-width:800px){ section{padding:96px 0;} }
/* Damit der klebende Header beim Ankersprung die Überschrift nicht verdeckt */
section[id]{scroll-margin-top:86px;}
.section-hell{background:var(--grau-hell);}

.section-kopf{max-width:62ch; margin:0 0 44px;}
.eyebrow{
  display:block; font-size:13px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent); margin:0 0 12px;
}
.section-kopf p{color:var(--anthrazit-2); font-size:18.5px; margin:0;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius); border:2px solid transparent;
  font-size:17px; font-weight:700; text-decoration:none; cursor:pointer;
  font-family:inherit; transition:background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--akzent); color:#fff;}
.btn-primary:hover{background:var(--akzent-dunkel); color:#fff;}
.btn-sekundaer{background:transparent; color:var(--anthrazit); border-color:var(--linie);}
.btn-sekundaer:hover{border-color:var(--anthrazit); color:var(--anthrazit);}
.btn-hell{background:#fff; color:var(--anthrazit);}
.btn-hell:hover{background:var(--grau-hell); color:var(--anthrazit);}

/* ---------- 3 Header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--linie);
}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:70px;}

.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--anthrazit); font-weight:800; font-size:19px; letter-spacing:-.02em;}
.logo .mark{
  width:34px; height:34px; border-radius:8px; background:var(--anthrazit);
  color:#fff; display:grid; place-content:center; font-size:14px; font-weight:800; letter-spacing:0;
}

.nav{display:none;}
@media (min-width:900px){
  .nav{display:flex; align-items:center; gap:28px;}
  .nav a{color:var(--anthrazit-2); text-decoration:none; font-weight:600; font-size:16px;}
  .nav a:hover{color:var(--anthrazit);}
  .nav .btn{padding:10px 18px; font-size:16px;}
}
/* Mobil: nur ein Anruf-/Kontakt-Button statt Burger-Menü — weniger Code, weniger Fehler */
.header-cta{font-size:15px; padding:10px 16px;}
@media (min-width:900px){ .header-cta{display:none;} }

/* ---------- 4 Hero ---------- */
.hero{
  background:linear-gradient(180deg,#fff 0%, var(--grau-hell) 100%);
  padding:60px 0 72px; border-bottom:1px solid var(--linie);
}
@media (min-width:900px){ .hero{padding:88px 0 96px;} }
.hero-grid{display:grid; gap:44px; align-items:center;}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr; gap:56px;} }
.hero h1{margin-bottom:20px;}
.hero .lead{font-size:20px; color:var(--anthrazit-2); margin-bottom:28px;}
.hero-aktionen{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px;}
.hero-punkte{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.hero-punkte li{display:flex; gap:10px; align-items:flex-start; font-size:16.5px; color:var(--anthrazit-2);}
.hero-punkte svg{flex:none; margin-top:3px; color:var(--gruen);}

/* Bildschirm-Attrappe im Hero */
.mockup{
  background:#fff; border:1px solid var(--linie); border-radius:12px;
  box-shadow:var(--schatten); overflow:hidden;
}
.mockup-bar{
  display:flex; align-items:center; gap:6px; padding:11px 14px;
  background:var(--grau-hell); border-bottom:1px solid var(--linie);
}
.mockup-bar span{width:10px; height:10px; border-radius:50%; background:#D4D8D3;}
.mockup-bar .url{
  margin-left:10px; font-size:12px; color:var(--grau); background:#fff;
  border:1px solid var(--linie); border-radius:20px; padding:3px 12px;
}

/* ---------- 5 Sektionen ---------- */
.grid{display:grid; gap:22px;}
@media (min-width:680px){ .grid-2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr);} }

.karte{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:28px; box-shadow:var(--schatten);
}
.karte h3{margin-bottom:8px;}
.karte p{margin:0; color:var(--anthrazit-2); font-size:16.5px;}
.karte .icon{
  width:44px; height:44px; border-radius:10px; background:var(--akzent-hell);
  color:var(--akzent-dunkel); display:grid; place-content:center; margin-bottom:18px;
}
.preis{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--linie);
  font-size:15px; color:var(--grau);
}
.preis strong{color:var(--anthrazit); font-size:17px;}

/* Ablauf-Schritte */
.schritte{list-style:none; margin:0; padding:0; display:grid; gap:26px; counter-reset:s;}
@media (min-width:900px){ .schritte{grid-template-columns:repeat(3,1fr); gap:32px;} }
.schritte li{counter-increment:s; padding-top:56px; position:relative;}
.schritte li::before{
  content:counter(s); position:absolute; top:0; left:0;
  width:42px; height:42px; border-radius:50%; background:var(--anthrazit); color:#fff;
  display:grid; place-content:center; font-weight:800; font-size:18px;
}
.schritte h3{margin-bottom:6px;}
.schritte p{margin:0; color:var(--anthrazit-2); font-size:16.5px;}

/* ---------- 6 Referenzen ---------- */
.referenzen{display:grid; gap:26px;}
@media (min-width:760px){ .referenzen{grid-template-columns:repeat(2,1fr);} }

.projekt{
  background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--schatten); display:flex; flex-direction:column;
}
.projekt-bild{
  aspect-ratio:16/10; background:var(--grau-hell);
  border-bottom:1px solid var(--linie); position:relative; overflow:hidden;
}
.projekt-bild img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.projekt-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1;}
.projekt-body h3{margin-bottom:4px;}
.branche{font-size:14px; font-weight:700; color:var(--akzent); letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px;}
.projekt-body p{color:var(--anthrazit-2); font-size:16.5px; margin:0 0 16px;}
.projekt-links{margin-top:auto; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:16px; font-weight:600;}

/* Platzhalter-Kachel, solange kein Projekt fertig ist */
.projekt.platzhalter{border-style:dashed; box-shadow:none; background:var(--grau-hell);}
.projekt.platzhalter .projekt-bild{
  display:grid; place-content:center; background:transparent; border-bottom-style:dashed;
  color:var(--grau);
}
.projekt.platzhalter h3{color:var(--anthrazit-2);}

/* Bewertungen */
.bewertungen{display:grid; gap:22px;}
@media (min-width:900px){ .bewertungen{grid-template-columns:repeat(3,1fr);} }
.bewertung{background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:26px;}
.sterne{display:flex; gap:3px; color:#E8A33D; margin-bottom:12px;}
.bewertung blockquote{margin:0 0 14px; font-size:17px; color:var(--anthrazit);}
.bewertung cite{font-style:normal; font-size:15px; color:var(--grau); font-weight:600;}
.hinweis-box{
  border:1px dashed var(--linie); border-radius:var(--radius);
  padding:24px; background:var(--grau-hell); color:var(--anthrazit-2); font-size:16.5px;
}
.hinweis-box p:last-child{margin:0;}

/* Über mich */
.ueber{display:grid; gap:36px; align-items:start;}
@media (min-width:860px){ .ueber{grid-template-columns:260px 1fr; gap:48px;} }
.portrait{
  aspect-ratio:1; border-radius:var(--radius); background:var(--grau-hell);
  border:1px solid var(--linie); display:grid; place-content:center; color:var(--grau);
  text-align:center; font-size:14px; padding:20px; overflow:hidden;
}
.portrait img{width:100%; height:100%; object-fit:cover;}
.fakten{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px;}
.fakten li{display:flex; gap:10px; font-size:16.5px; color:var(--anthrazit-2);}
.fakten svg{flex:none; margin-top:4px; color:var(--akzent);}

/* ---------- 7 Kontakt & Formular ---------- */
.kontakt{background:var(--anthrazit); color:#fff;}
.kontakt h2{color:#fff;}
.kontakt .section-kopf p{color:#C6CDD2;}
.kontakt .eyebrow{color:#E8A33D;}
.kontakt-grid{display:grid; gap:40px;}
@media (min-width:900px){ .kontakt-grid{grid-template-columns:1fr 1.15fr; gap:56px;} }

.direkt{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:18px;}
.direkt li{display:flex; gap:14px; align-items:flex-start;}
.direkt svg{flex:none; margin-top:4px; color:#E8A33D;}
.direkt .label{display:block; font-size:14px; color:#98A3AC; margin-bottom:1px;}
.direkt a, .direkt span.wert{color:#fff; font-size:18px; font-weight:600; text-decoration:none;}
.direkt a:hover{color:#E8A33D; text-decoration:underline;}

form{background:#fff; color:var(--anthrazit); border-radius:8px; padding:28px; box-shadow:var(--schatten);}
@media (min-width:600px){ form{padding:34px;} }
.feld{margin-bottom:20px;}
.feld-reihe{display:grid; gap:20px;}
@media (min-width:600px){ .feld-reihe{grid-template-columns:1fr 1fr;} }
label{display:block; font-weight:700; font-size:15.5px; margin-bottom:7px;}
label .opt{font-weight:500; color:var(--grau); font-size:14px;}
input, textarea, select{
  width:100%; font-family:inherit; font-size:17px; color:var(--anthrazit);
  padding:13px 14px; border:1.5px solid var(--linie); border-radius:var(--radius);
  background:#fff; transition:border-color .15s ease;
}
input:hover, textarea:hover, select:hover{border-color:#C9CFC9;}
input:focus, textarea:focus, select:focus{border-color:var(--akzent); outline:none; box-shadow:0 0 0 3px var(--akzent-hell);}
textarea{min-height:140px; resize:vertical;}
input[aria-invalid="true"], textarea[aria-invalid="true"]{border-color:var(--rot); background:#FDF4F2;}

.check{display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; margin-bottom:22px;}
.check input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--akzent);}
.check label{font-weight:500; font-size:15.5px; line-height:1.5; margin:0; color:var(--anthrazit-2);}

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar. Nicht display:none —
   manche Bots erkennen das. Off-Screen ist unauffälliger. */
.hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}

.formhinweis{font-size:14.5px; color:var(--grau); margin:16px 0 0;}
.meldung{border-radius:var(--radius); padding:16px 18px; margin:0 0 24px; font-size:16px;}
.meldung-fehler{background:#FDF4F2; border:1px solid #E9C4BC; color:var(--rot);}
.meldung-fehler ul{margin:8px 0 0; padding-left:20px;}
.meldung-ok{background:#EDF6F1; border:1px solid #BEDDCC; color:var(--gruen);}

/* ---------- 8 Footer ---------- */
.footer{background:#12161A; color:#9AA5AE; padding:52px 0 40px; font-size:15.5px;}
.footer-grid{display:grid; gap:30px; margin-bottom:34px;}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr;} }
.footer h4{color:#fff; font-size:15px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px;}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.footer a{color:#C6CDD2; text-decoration:none;}
.footer a:hover{color:#fff; text-decoration:underline;}
.footer .logo{color:#fff; margin-bottom:12px;}
.footer .logo .mark{background:#fff; color:var(--anthrazit);}
.footer-unten{
  border-top:1px solid #262D33; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; font-size:14.5px;
}

/* ---------- 9 Rechtstexte (Impressum / Datenschutz) ---------- */
.rechtstext{padding:56px 0 80px;}
.rechtstext .wrap{max-width:780px;}
.rechtstext h1{font-size:clamp(28px,4.4vw,40px); margin-bottom:8px;}
.rechtstext .stand{color:var(--grau); font-size:15px; margin:0 0 40px;}
.rechtstext h2{font-size:23px; margin:44px 0 12px; padding-top:22px; border-top:1px solid var(--linie);}
.rechtstext h3{font-size:18px; margin:26px 0 8px;}
.rechtstext p, .rechtstext li{color:var(--anthrazit-2); font-size:16.5px;}
.rechtstext ul{padding-left:22px; margin:0 0 1em;}
.rechtstext li{margin-bottom:6px;}
.rechtstext address{font-style:normal; line-height:1.8;}
.platzhalter-marker{
  background:#FFF3CD; color:#7A5B00; padding:1px 6px; border-radius:3px;
  font-weight:600; font-size:.94em;
}
.zurueck{display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; margin-bottom:28px;}

/* ---------- Danke-Seite ---------- */
.danke{min-height:70vh; display:grid; place-content:center; text-align:center; padding:80px 20px;}
.danke .haken{
  width:76px; height:76px; border-radius:50%; background:#EDF6F1; color:var(--gruen);
  display:grid; place-content:center; margin:0 auto 26px;
}
.danke p{margin-left:auto; margin-right:auto;}