/* Zimmer – Softwareentwicklung
   Schriften lokal eingebunden: kein Aufruf an Google-Server, kein Drittland-Transfer. */

@font-face{font-family:"Unbounded";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/unbounded-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/unbounded-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plex";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plex";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}

:root{
  color-scheme:light dark;
  --anthrazit:#293133;
  --azur:#225F78;
  --azur-hell:#4E93B0;      /* Markenakzent auf dunklem Grund */
  --azur-text:#8FC5DC;      /* Linkfarbe auf dunklem Grund, WCAG-tauglich */
  --creme:#F5EFE3;
  --papier:#FAF7F1;
  --blatt:#FFFFFF;
  --linie:#E2DCD0;
  --stahl:#6F6960;
  --tinte:#241F19;
  --spalte:1040px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

body{margin:0;background:var(--papier);color:var(--tinte);
  font-family:"Plex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:"Unbounded","Plex",system-ui,Arial,sans-serif;font-weight:500;
  letter-spacing:-.02em;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(28px,5.2vw,46px)}
h2{font-size:clamp(21px,3.2vw,28px)}
h3{font-size:18px;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:66ch}
a{color:var(--azur);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--anthrazit)}
:focus-visible{outline:3px solid var(--azur);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%;height:auto}

.wrap{max-width:var(--spalte);margin:0 auto;padding:0 22px}
.springlink{position:absolute;left:-9999px;background:var(--anthrazit);color:var(--creme);
  padding:10px 16px;z-index:10}
.springlink:focus{left:12px;top:12px}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--papier);
  position:sticky;top:0;z-index:5}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.kopf .logo img{display:block;width:230px}
.kopf nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.kopf nav a{font-size:14px;color:var(--stahl);text-decoration:none;
  font-family:"Unbounded",sans-serif;letter-spacing:-.01em}
.kopf nav a:hover,.kopf nav a[aria-current="page"]{color:var(--anthrazit)}

/* ---------- Abschnitte ---------- */
section{padding:72px 0;scroll-margin-top:96px}
section+section{border-top:1px solid var(--linie)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--azur);margin:0 0 14px;font-weight:600}

.hero{padding:86px 0 72px;position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:1}
.hero p.lead{font-size:clamp(17px,2.1vw,20px);color:var(--stahl);max-width:56ch}

/* Platinenmuster als Maske: die Flaeche traegt die Markenfarbe, das SVG gibt
   nur die Form vor. So folgt der Ton automatisch dem Dark Mode.
   Der diagonale Verlauf haelt die linke Textspalte frei und laesst die Textur
   nach rechts oben auslaufen. Ohne Maskenunterstuetzung faellt die Dekoration
   ersatzlos weg, statt eine blaue Flaeche zu hinterlassen.
   Hinweis: Chrome blockiert SVG-Masken ueber file:// – zum Pruefen ausliefern. */
@supports ((-webkit-mask-image:url("../img/hero-raster.svg")) or (mask-image:url("../img/hero-raster.svg"))){
  .hero::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
    background:linear-gradient(115deg,transparent 30%,var(--azur) 92%);
    -webkit-mask:url("../img/hero-raster.svg") 0 0 repeat;
    mask:url("../img/hero-raster.svg") 0 0 repeat;
    -webkit-mask-size:240px 240px;
    mask-size:240px 240px;
  }
}
.aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.knopf{display:inline-block;padding:13px 24px;border-radius:2px;text-decoration:none;
  font-family:"Unbounded",sans-serif;font-size:14px;letter-spacing:-.01em;
  background:var(--anthrazit);color:var(--creme);border:1px solid var(--anthrazit)}
.knopf:hover{background:var(--azur);border-color:var(--azur);color:var(--creme)}
.knopf.leer{background:transparent;color:var(--anthrazit);border-color:var(--linie)}
.knopf.leer:hover{border-color:var(--anthrazit);background:transparent;color:var(--anthrazit)}

.karten{display:grid;gap:18px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:740px){.karten{grid-template-columns:1fr 1fr}}
.karte{background:var(--blatt);border:1px solid var(--linie);padding:30px 26px;
  border-top:3px solid var(--azur)}
.karte h3{margin-bottom:.6em}
.karte p:last-child{margin-bottom:0}

.punkte{display:grid;gap:26px;grid-template-columns:1fr;margin-top:10px;padding:0;list-style:none}
@media(min-width:740px){.punkte{grid-template-columns:repeat(3,1fr)}}
.punkte li{border-top:1px solid var(--linie);padding-top:16px}
.punkte h3{margin-bottom:.4em}
.punkte p{margin:0;font-size:15px;color:var(--stahl)}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--anthrazit);color:var(--creme)}
.kontakt h2{color:var(--creme)}
.kontakt p{color:rgba(245,239,227,.86)}
.kontakt a{color:var(--azur-text)}
.kontakt a:hover{color:var(--creme)}
.daten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.daten li{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.daten .feld{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,239,227,.74);min-width:104px}
.daten .wert{font-family:"Unbounded",sans-serif;font-size:16px}

/* ---------- Fuß ---------- */
.fuss{background:var(--anthrazit);color:rgba(245,239,227,.76);
  border-top:1px solid rgba(245,239,227,.14);padding:28px 0;font-size:14px}
.fuss .wrap{display:flex;gap:18px;justify-content:space-between;
  align-items:center;flex-wrap:wrap}
.fuss img{width:170px;display:block}
.fuss ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.fuss a{color:rgba(245,239,227,.88);text-decoration:none}
.fuss a:hover{color:var(--creme);text-decoration:underline}

/* ---------- Rechtstexte ---------- */
.recht{padding:56px 0 76px;scroll-margin-top:96px}
.recht h2{margin-top:2em;font-size:20px}
.recht h2:first-of-type{margin-top:1.2em}
.recht h3{margin-top:1.6em;font-size:16px}
.recht p,.recht li{font-size:16px}
.recht ul{max-width:66ch;padding-left:20px}
.recht li{margin-bottom:.5em}
.recht address{font-style:normal;margin:0 0 1.4em;line-height:1.75}
.platzhalter{background:#FBE7C6;border-bottom:2px solid #D9A441;
  padding:0 4px;font-weight:600;white-space:nowrap}
.hinweis{background:var(--blatt);border:1px solid var(--linie);
  border-left:3px solid #D9A441;padding:20px 22px;margin:0 0 34px}
.hinweis p{margin:0;font-size:15px}
.hinweis strong{font-weight:600}


/* ---------- Dark Mode ----------
   Gleiche CI, invertierte Rollen: Cremeweiß trägt, Anthrazit ist die Fläche.
   Ohne diesen Block erzwingen manche Browser eine automatische Invertierung,
   die Kontraste und Markenfarben zerstört. */
@media (prefers-color-scheme: dark){
  :root{
    --papier:#23292B;
    --blatt:#2E3639;
    --linie:#3E484B;
    --tinte:#F5EFE3;
    --stahl:#B4ADA3;
    --azur:#8FC5DC;
  }
  a:hover{color:var(--creme)}
  :focus-visible{outline-color:var(--azur-text)}

  .kopf{background:var(--papier);border-bottom-color:var(--linie)}
  .kopf nav a{color:var(--stahl)}
  .kopf nav a:hover,.kopf nav a[aria-current="page"]{color:var(--creme)}

  .eyebrow{color:var(--azur-text)}
  /* Helles Azur auf dunklem Grund traegt weiter, daher etwas zurueckgenommen. */
  .hero::before{opacity:.16}
  .karte{background:var(--blatt);border-color:var(--linie);border-top-color:var(--azur-hell)}
  .punkte li{border-top-color:var(--linie)}

  .knopf{background:var(--creme);color:var(--anthrazit);border-color:var(--creme)}
  .knopf:hover{background:var(--azur-text);border-color:var(--azur-text);color:var(--anthrazit)}
  .knopf.leer{background:transparent;color:var(--creme);border-color:var(--linie)}
  .knopf.leer:hover{border-color:var(--creme);color:var(--creme)}

  .kontakt{background:#1A2022}
  .fuss{background:#1A2022;border-top-color:rgba(245,239,227,.16)}

  .hinweis{background:var(--blatt);border-color:var(--linie);border-left-color:#D9A441}
  .platzhalter{background:#5C4415;border-bottom-color:#D9A441;color:#FBE7C6}
  .springlink{background:var(--creme);color:var(--anthrazit)}
}