/* ===================================================================
   Farben direkt aus dem Logo ausgelesen
   Grün #007448 · Rot #DE0000 · Blau #0069B2 · Navy #002F51 · Gelb #FEB400
   =================================================================== */
:root{
  --gruen:      #007448;
  --gruen-tief: #005836;
  --rot:        #D10A12;
  --rot-tief:   #A5060D;
  --blau:       #0069B2;
  --blau-hell:  #2D99DD;
  --navy:       #002F51;
  --gelb:       #FEB400;

  --papier:  #FFFFFF;
  --flaeche: #EFF3F5;
  --tinte:   #10202E;
  --grau:    #5E6D7B;
  --linie:   rgba(0,47,81,.16);

  /* Fallbacks so gewählt, dass die Seite auch ohne die Dateien
     in fonts/ ordentlich aussieht. */
  --display: "Archivo", "Archivo Expanded", "Segoe UI", "Helvetica Neue",
             Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
             "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

/* ===================================================================
   Schriften — werden vom eigenen Server geladen, nichts von Google.
   Die Dateien gehören in den Ordner "fonts". Fehlen sie, greift
   automatisch der Systemschrift-Fallback aus den Variablen oben.
   In beiden Fällen geht keine Anfrage an einen fremden Server.
   =================================================================== */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-variable.woff2") format("woff2-variations"),
      url("fonts/archivo-variable.woff2") format("woff2");
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("fonts/plex-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("fonts/plex-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}

.wrap{width:min(1200px,92vw);margin-inline:auto}
.section{padding:clamp(56px,8vw,110px) 0}

h1,h2,h3{
  font-family:var(--display);font-variation-settings:"wdth" 108;
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
  margin:0;text-wrap:balance;
}
h1{font-size:clamp(33px,4.8vw,60px)}
h2{font-size:clamp(27px,3.2vw,40px)}
h3{font-size:20px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gruen);margin:0 0 16px;font-weight:500;
}

/* ---------- Servicezeile ganz oben ---------- */
.servicezeile{background:var(--navy);color:#CFE0EC}
.servicezeile .wrap{
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;
  padding:9px 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
}
.servicezeile a{text-decoration:none}
.servicezeile a:hover{color:#fff}
.servicezeile .rechts{margin-left:auto;color:#8FB0C8}
@media(max-width:720px){.servicezeile .rechts{display:none}}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:3px solid var(--gruen);
}
.kopf .wrap{display:flex;align-items:center;gap:26px;min-height:88px}
.kopf .logo{width:clamp(180px,22vw,236px);height:auto}
.hauptmenue{margin-left:auto;display:flex;gap:30px;font-size:15.5px;font-weight:500}
.hauptmenue a{text-decoration:none;color:var(--grau);padding:4px 0;border-bottom:2px solid transparent}
.hauptmenue a:hover{color:var(--gruen);border-bottom-color:var(--gruen)}
.kopf-tel{
  font-family:var(--mono);font-size:15px;font-weight:600;text-decoration:none;
  background:var(--rot);color:#fff;padding:11px 18px;border-radius:3px;white-space:nowrap;
}
.kopf-tel:hover{background:var(--rot-tief)}
@media(max-width:900px){.hauptmenue{display:none}.kopf-tel{margin-left:auto}}

/* ---------- Hero ---------- */
.hero{background:var(--flaeche);border-bottom:1px solid var(--linie);padding:clamp(44px,6vw,86px) 0}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero p.lead{font-size:clamp(17px,1.35vw,19.5px);color:#374956;max-width:48ch;margin:22px 0 0}
.hero p.lead b{color:var(--gruen);font-weight:600}

.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.knopf{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:15px;font-weight:600;padding:15px 24px;border-radius:3px;
  text-decoration:none;border:2px solid var(--navy);
  transition:background .15s ease,transform .12s ease;
}
.knopf--rot{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf--rot:hover{background:var(--rot-tief);border-color:var(--rot-tief)}
.knopf--leer:hover{background:rgba(0,47,81,.07)}
.knopf:active{transform:translateY(1px)}

/* ---------- Typenschild ---------- */
/* Der doppelte blaue Rahmen ist aus dem Logo übernommen. */
.schild{
  position:relative;border-radius:5px;padding:26px 24px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.35) 45%),
             repeating-linear-gradient(90deg,#C7CACC 0 2px,#D5D8DA 2px 4px);
  border:2px solid var(--blau);
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blau),0 20px 38px -24px rgba(0,47,81,.7);
}
.schild::before,.schild::after{
  content:"";position:absolute;top:12px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#8B9095);
}
.schild::before{left:12px}
.schild::after{right:12px}
.schild-kopf{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:13px;margin-bottom:4px;border-bottom:2px solid var(--gruen);
}
.schild-kopf strong{
  font-family:var(--display);font-variation-settings:"wdth" 120;font-weight:800;
  font-size:15px;letter-spacing:.09em;text-transform:uppercase;color:var(--gruen);
}
.schild-kopf em{
  font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;
  color:#4E555C;text-transform:uppercase;white-space:nowrap;
}
.schild dl{margin:0}
.zeile{display:flex;gap:14px;padding:11px 0;border-bottom:1px dotted rgba(0,47,81,.28)}
.zeile:last-of-type{border-bottom:0}
.zeile dt{
  flex:0 0 86px;margin:0;padding-top:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:#4E555C;
}
.zeile dd{margin:0;font-family:var(--mono);font-size:16px;font-weight:600;word-break:break-word}
.zeile dd a{color:var(--rot-tief);text-decoration:none;border-bottom:1px solid rgba(165,6,13,.35)}
.zeile dd small{display:block;font-size:11px;font-weight:400;color:#4E555C;letter-spacing:.02em}
.plakette{
  margin:18px 0 0;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gruen-tief);border:1px solid rgba(0,116,72,.45);border-radius:2px;background:rgba(255,255,255,.5);
}
.plakette::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gruen)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* ---------- Leistungen ---------- */
.kopfzeile{max-width:54ch;margin-bottom:clamp(32px,4vw,54px)}
.kopfzeile p{color:var(--grau);margin:16px 0 0}

.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie)}
.karte{background:var(--papier);padding:30px 26px 34px;min-height:250px;border-top:4px solid var(--gruen)}
.karte h3{margin:0 0 10px}
.karte p{margin:0;font-size:15px;color:#45525E;line-height:1.55}
.karte .marker{
  margin:0 0 20px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gruen);font-weight:500;
}
.karte--solar{border-top-color:var(--gelb)}
.karte--solar .marker{color:#8A6200}
@media(max-width:1000px){.raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.raster{grid-template-columns:1fr}.karte{min-height:0}}

/* ---------- Galerie ---------- */
.galerie{background:var(--flaeche);border-block:1px solid var(--linie)}
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kachel{position:relative;margin:0;background:#DDE3E7;border:1px solid var(--linie);overflow:hidden;aspect-ratio:4/3}
.kachel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kachel:hover img{transform:scale(1.04)}
.kachel figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  background:linear-gradient(0deg,rgba(0,47,81,.86),rgba(0,47,81,0));
}
.kachel.is-empty img{display:none}
.kachel.is-empty{
  display:grid;place-items:center;
  background-image:repeating-linear-gradient(45deg,rgba(0,47,81,.06) 0 10px,transparent 10px 20px);
}
.kachel.is-empty figcaption{position:static;background:none;color:var(--grau);text-align:center;padding:0 18px}
.kachel.is-empty figcaption::before{content:"Foto fehlt — ";color:var(--rot)}
@media(max-width:880px){.kacheln{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.kacheln{grid-template-columns:1fr}}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--navy);color:#D6E4EE}
.kontakt h2{color:#fff}
.kontakt .eyebrow{color:var(--gelb)}
.kontakt-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);margin-top:42px}
.grossnummer{
  font-family:var(--display);font-variation-settings:"wdth" 122;font-weight:800;
  font-size:clamp(32px,5vw,62px);letter-spacing:-.02em;color:#fff;
  text-decoration:none;display:inline-block;line-height:1.05;
}
.grossnummer:hover{color:var(--gelb)}
.hinweis{color:#95AFC2;font-size:15px;margin:16px 0 0;max-width:42ch}
.infoliste{margin:0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.infoliste li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:15px}
.infoliste span{
  flex:0 0 104px;padding-top:4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:#8FAABE;
}
.infoliste a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(254,180,0,.5)}
@media(max-width:880px){.kontakt-raster{grid-template-columns:1fr}}

/* ---------- Fußzeile ---------- */
.fuss{background:#001E36;color:#7893A8}
.fuss .wrap{
  display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;padding:24px 0 32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff}

/* ---------- Anrufleiste mobil ---------- */
.anrufleiste{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--rot);color:#fff;text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.04em;
  padding:15px;box-shadow:0 -8px 24px -14px rgba(0,0,0,.7);
}
@media(max-width:640px){.anrufleiste{display:block}body{padding-bottom:58px}}

/* ---------- Einblenden ---------- */
.auf{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.auf.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .auf{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.textseite{padding:clamp(44px,6vw,84px) 0 clamp(56px,8vw,100px)}
.textseite .wrap{width:min(760px,92vw)}
.textseite h1{margin-bottom:.6em}
.textseite h2{font-size:clamp(21px,2.2vw,26px);margin:2em 0 .6em;color:var(--gruen)}
.textseite p{margin:0 0 1.1em;color:#374956}
.textseite a{color:var(--rot-tief)}
.textseite .anschrift{
  font-family:var(--mono);font-size:15.5px;line-height:1.9;
  border-left:4px solid var(--gruen);padding:4px 0 4px 18px;margin:0 0 1.4em;
}
.textseite .zurueck{
  display:inline-block;margin-top:2.4em;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--grau);
}
.textseite .zurueck:hover{color:var(--gruen)}
.todo{
  border:2px dashed var(--rot);background:#FFF4F4;padding:16px 18px;border-radius:3px;
  font-size:15px;color:#7C1015;margin:0 0 1.6em;
}
.todo strong{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:6px}