/* ==========================================================================
   Handfux — Stylesheet
   Aufbau und Schriften exakt wie bisher; nur die Goldtoene sind Orange.
   Zum Ändern von Farben: nur den :root-Block unten anfassen.
   ========================================================================== */

:root{
  --dunkel:        #241F1A;   /* Kopfzeile, Fußzeile, dunkle Abschnitte */
  --dunkel-2:      #3A342C;   /* Karten auf dunklem Grund */
  --gold:          #E2662A;   /* Buttons, Auszeichnungen */
  --gold-hell:     #F0925C;   /* Überschriften-Akzent, Rahmen */
  --creme-text:    #F2E9D8;   /* Text auf dunklem Grund */
  --creme-hell:    #E3CFB4;
  --papier:        #FDFAF3;   /* Seitenhintergrund */
  --papier-warm:   #F7F2E8;   /* abgesetzte Abschnitte */
  --weiss:         #FFFFFF;
  --tinte:         #241F1A;   /* Überschriften */
  --text:          #55503F;   /* Fließtext */
  --text-leise:    #7A7565;
  --linie:         #E4DDCC;
  --gold-tief:     #B8460F;   /* Orange fuer Text auf hellem Grund */
  --radius:        4px;
  --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:   'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* --- Schriften -----------------------------------------------------------
   Die Schriftdateien liegen unter /assets/fonts/ und werden vom eigenen
   Server geladen (kein Google-Server = kein DSGVO-Problem).
   Fehlen die Dateien, greifen automatisch Georgia und die System-Schrift.
   -------------------------------------------------------------------- */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('fonts/fraunces-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/nunitosans-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/nunitosans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/nunitosans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/nunitosans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--tinte);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:20px}
.wrap-schmal{width:100%;max-width:860px;margin:0 auto;padding-inline:20px}
.abschnitt{padding-block:clamp(56px,7vw,96px)}
.bg-warm{background:var(--papier-warm)}
.bg-weiss{background:var(--weiss)}
.bg-dunkel{background:var(--dunkel)}
.bg-dunkel h2,.bg-dunkel h3{color:var(--creme-text)}
.bg-dunkel p,.bg-dunkel li{color:#C6BCA8}

/* --- Auszeichnung / Badge --- */
.badge{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--gold-tief);
  background:rgba(226,102,42,.10);border:1px solid rgba(226,102,42,.30);
  border-radius:var(--radius);padding:7px 14px;margin-bottom:22px;
}
.bg-dunkel .badge{color:var(--gold-hell);border-color:rgba(240,146,92,.35)}

h1{font-size:clamp(40px,7vw,68px)}
h2{font-size:clamp(30px,4.6vw,48px)}
h3{font-size:clamp(20px,2.4vw,24px)}
.lead{font-size:clamp(16px,1.7vw,19px);max-width:62ch;margin-top:18px;line-height:1.7}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:16px;text-decoration:none;
  padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .12s;
}
.btn-gold{background:var(--gold);color:var(--dunkel);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-tief);border-color:var(--gold-tief);transform:translateY(-1px)}
.btn-rand{background:transparent;color:var(--creme-hell);border-color:rgba(240,146,92,.5)}
.btn-rand:hover{background:rgba(240,146,92,.12);color:var(--creme-text)}
.btn-rand-dunkel{background:transparent;color:var(--tinte);border-color:rgba(43,38,32,.28);font-weight:600}
.btn-rand-dunkel:hover{background:rgba(43,38,32,.05);border-color:var(--tinte)}
.btn-klein{padding:9px 16px;font-size:14px}
.btn-reihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* --- Kopfzeile --- */
.kopf{position:sticky;top:0;z-index:80;background:var(--dunkel);border-bottom:4px solid var(--gold)}
.kopf .wrap{display:flex;align-items:center;gap:20px;min-height:78px}
.logo{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.logo-bild{display:block;height:58px;width:auto}
.haupt-nav{display:flex;gap:28px}
.haupt-nav a{text-decoration:none;color:var(--creme-text);font-weight:700;font-size:15px;letter-spacing:.4px;padding-block:6px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.haupt-nav a:hover,.haupt-nav a.aktiv{color:var(--gold-hell);border-bottom-color:var(--gold)}
.nav-schalter{display:none;background:none;border:1px solid rgba(240,146,92,.4);border-radius:var(--radius);color:var(--creme-text);padding:8px 11px;cursor:pointer}
@media (max-width:940px){
  .kopf .wrap{min-height:70px}
  .logo-bild{height:48px}
  .haupt-nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--dunkel);border-bottom:1px solid rgba(240,146,92,.2);padding:8px 20px 18px;
  }
  .haupt-nav.offen{display:flex}
  .haupt-nav a{padding-block:13px;border-bottom:1px solid rgba(240,146,92,.12)}
  .nav-schalter{display:block;order:3}
  .kopf .btn{order:2}
}
@media (max-width:520px){.kopf .btn-gold{display:none}}

/* --- Titelbereich mit Bild --- */
.titel{position:relative;background:var(--dunkel);overflow:hidden}
.titel-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.titel-schleier{position:absolute;inset:0;background:linear-gradient(to right,rgba(43,38,32,.94) 0%,rgba(43,38,32,.80) 50%,rgba(43,38,32,.45) 100%)}
.titel .wrap{position:relative;z-index:2;padding-block:clamp(72px,11vw,132px)}
.titel h1{color:var(--creme-text)}
.titel h1 .gold{color:var(--gold-hell);display:block}
.titel-unter{font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);color:var(--creme-hell);margin-top:18px}
.titel-claim{font-family:var(--sans);font-weight:700;font-size:clamp(17px,2vw,21px);color:var(--creme-text);margin-top:16px}
.titel p.lead{color:#D4C9B6}

.merkmale{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(240,146,92,.22)}
.merkmal{display:flex;align-items:center;gap:9px;color:var(--creme-hell);font-size:15px;font-weight:600}
.merkmal svg{flex:none;color:var(--gold)}

/* --- Leistungskarten --- */
.raster{display:grid;gap:20px;margin-top:40px}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-2{grid-template-columns:repeat(2,1fr)}
.raster-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.raster-3,.raster-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.raster-2,.raster-3,.raster-4{grid-template-columns:1fr}}

.karte{position:relative;overflow:hidden;background:var(--weiss);border:1px solid var(--linie);border-top:3px solid var(--gold);border-radius:var(--radius);padding:28px;transition:border-color .16s,transform .16s,box-shadow .16s}

/* --- Grosses Symbol als Wasserzeichen hinter dem Text --- */
.karte>*:not(.wz),.detail>*:not(.wz){position:relative;z-index:1}
.wz{position:absolute;z-index:0;color:#E2662A;pointer-events:none;display:block}
.wz svg{width:100%;height:100%;display:block}
.karte .wz{right:-14px;bottom:-18px;width:138px;height:138px;opacity:.20}
.detail{position:relative;overflow:hidden;border-left:4px solid var(--gold)}
.detail .wz{right:6px;top:50%;transform:translateY(-50%);width:200px;height:200px;opacity:.14}
@media (max-width:760px){.detail .wz{width:132px;height:132px;right:-12px;opacity:.13}}
.karte:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(43,38,32,.35)}
.karte-symbol{width:46px;height:46px;border-radius:var(--radius);background:rgba(226,102,42,.12);border:1px solid rgba(226,102,42,.3);color:var(--gold-tief);display:grid;place-items:center;margin-bottom:18px}
.karte h3{margin-bottom:10px}
.karte p{font-size:15px}

/* --- Liste mit Haken --- */
.haken-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.haken-liste li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:16px}
.haken-liste svg{color:var(--gold-tief);margin-top:5px}
.bg-dunkel .haken-liste svg{color:var(--gold)}
.bg-dunkel .haken-liste li{color:#C6BCA8}

/* --- Zwei Spalten mit Bild --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
.duo-bild{border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie)}
.duo-bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* --- Leistungsdetail --- */
.detail{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(24px,3.4vw,40px);margin-bottom:22px}
.detail-kopf{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.detail-punkte{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:11px 24px}
@media (max-width:660px){.detail-punkte{grid-template-columns:1fr}}
.detail-punkte li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;align-items:start}
.detail-punkte svg{color:var(--gold-tief);margin-top:4px}

/* --- Projektgalerie --- */
.galerie-block{margin-bottom:56px}
.galerie-kopf{margin-bottom:20px}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.galerie{grid-template-columns:repeat(2,1fr)}}
.galerie button{
  padding:0;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  background:var(--papier-warm);cursor:pointer;aspect-ratio:1;transition:border-color .16s,transform .16s;
}
.galerie button:hover{border-color:var(--gold);transform:scale(1.015)}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie-hinweis{font-size:13.5px;color:var(--text-leise);margin-top:12px}

/* Lightbox */
.lupe{position:fixed;inset:0;z-index:200;background:rgba(22,20,18,.94);display:none;align-items:center;justify-content:center;padding:24px}
.lupe.offen{display:flex}
.lupe img{max-width:min(1100px,94vw);max-height:86vh;object-fit:contain;border-radius:var(--radius)}
.lupe-zu,.lupe-vor,.lupe-zurueck{
  position:absolute;background:rgba(243,237,228,.10);border:1px solid rgba(243,237,228,.3);
  color:var(--creme-text);border-radius:var(--radius);cursor:pointer;font-size:22px;line-height:1;
  width:48px;height:48px;display:grid;place-items:center;
}
.lupe-zu{top:20px;right:20px}
.lupe-zurueck{left:20px;top:50%;transform:translateY(-50%)}
.lupe-vor{right:20px;top:50%;transform:translateY(-50%)}
.lupe-zu:hover,.lupe-vor:hover,.lupe-zurueck:hover{background:rgba(243,237,228,.2)}
.lupe-zaehler{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--creme-hell);font-size:14px}

/* --- Kontakt --- */
.kontakt-duo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,56px);align-items:start}
@media (max-width:900px){.kontakt-duo{grid-template-columns:1fr}}
.kontakt-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kontakt-liste a,.kontakt-liste .zeile{display:flex;gap:16px;align-items:flex-start;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--linie)}
.kontakt-symbol{width:40px;height:40px;flex:none;border-radius:var(--radius);background:rgba(226,102,42,.12);border:1px solid rgba(226,102,42,.3);color:var(--gold-tief);display:grid;place-items:center}
.kontakt-wert{font-weight:700;color:var(--tinte);font-size:17px;display:block;overflow-wrap:anywhere}
@media (max-width:420px){.kontakt-wert{font-size:15.5px}}
.kontakt-liste a:hover .kontakt-wert{color:var(--gold-tief)}
.kontakt-zusatz{font-size:13.5px;color:var(--text-leise);display:block}

.formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(22px,3vw,34px);display:grid;gap:16px}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.feld-reihe{grid-template-columns:1fr}}
.formular label{display:block;font-size:13px;font-weight:700;color:var(--tinte);margin-bottom:6px;letter-spacing:.2px}
.formular input,.formular textarea,.formular select{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius);padding:12px 14px;transition:border-color .15s,box-shadow .15s;
}
.formular input:focus,.formular textarea:focus,.formular select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,102,42,.18);
}
.formular textarea{resize:vertical;min-height:130px;line-height:1.6}
.pflicht-hinweis{font-size:13px;color:var(--text-leise)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehlerfeld{border-color:#B03A2E!important}
.hinweis-box{background:rgba(226,102,42,.10);border:1px solid rgba(226,102,42,.3);border-radius:var(--radius);padding:16px 18px;font-size:14.5px}

/* --- Rechtstexte --- */
.rechtstext h2{font-size:clamp(21px,2.4vw,26px);margin:38px 0 12px}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p{margin-bottom:14px;max-width:72ch}
.rechtstext ul{margin:0 0 14px;padding-left:22px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{color:var(--gold-tief);text-decoration:underline;text-underline-offset:3px}
.rechtstext address{font-style:normal;line-height:1.8;margin-bottom:14px}

/* --- Fußzeile --- */
.fuss{background:var(--dunkel);color:#B7AE9B;padding-block:52px 28px;border-top:5px solid var(--gold)}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px}
@media (max-width:780px){.fuss-raster{grid-template-columns:1fr}}
.fuss h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fuss p,.fuss li{font-size:14px;line-height:1.85;color:#B7AE9B}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss a{color:#B7AE9B;text-decoration:none}
.fuss a:hover{color:var(--gold-hell)}
.fuss-unten{margin-top:34px;padding-top:20px;border-top:1px solid rgba(240,146,92,.15);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#8F8674}

.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}