/* SystemCom GmbH -- systemcom.com
   Neuaufbau 08.09.2026. Vorher: WordPress 6.8.8 mit Divi, Autoptimize,
   Super Cache und zehn Jahren nie entfernter Demo-Inhalte. Jetzt: drei
   statische Seiten, kein JavaScript, keine Fremdressourcen.

   Farben aus der Bildmarke gemessen: #009FE3.
   Fuer Text auf hellem Grund ist dieser Ton zu schwach im Kontrast --
   dafuer die abgedunkelte Variante. Das Zeichen selbst bleibt im Original. */

:root{
  --marke:        #009FE3;
  --marke-text:   #00709F;   /* fuer Text/Links auf Hell: 4.6:1 auf --grund */
  --grund:        #F6F9FB;   /* Neutral mit leichtem Blaustich zur Marke hin */
  --karte:        #FFFFFF;
  --schrift:      #10202A;
  --leise:        #576975;
  --linie:        #DCE5EB;
  --linie-stark:  #C3D1DA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marke:       #33B4EA;
    --marke-text:  #6ECBF2;
    --grund:       #0B151B;
    --karte:       #12212A;
    --schrift:     #E6EEF3;
    --leise:       #90A4B0;
    --linie:       #223540;
    --linie-stark: #2E4653;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grund);
  color:var(--schrift);
  font-family:'Fira Sans','Segoe UI',Roboto,system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
}
h1,h2,h3,.eyebrow,.nummer{
  font-family:'Fira Sans Condensed','Fira Sans','Segoe UI Condensed',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
}
a{color:var(--marke-text)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--marke);outline-offset:2px;border-radius:2px}
img{max-width:100%;height:auto}

.huelle{max-width:62rem;margin:0 auto;padding:0 1.5rem}

/* ---------- Kopf ---------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--karte)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
            gap:1.5rem;padding:1.15rem 0;flex-wrap:wrap}
/* Die Bildmarke enthaelt eine schwarze Ellipse und weisse Buchstaben im
   Farbblock -- sie braucht einen hellen Grund. Deshalb sitzt sie immer auf
   Weiss. Im hellen Erscheinungsbild ist das Plaettchen unsichtbar (die Karte
   ist ohnehin weiss), im dunklen traegt es das Zeichen sichtbar. */
.marke{display:inline-flex;background:#fff;padding:.4rem .65rem;border-radius:3px}
.marke img{display:block;width:auto;height:3.4rem}
.kopf-kontakt{display:flex;gap:1.5rem;font-size:.95rem;flex-wrap:wrap}
.kopf-kontakt a{color:var(--schrift);text-decoration:none;
                border-bottom:1px solid var(--linie-stark);padding-bottom:1px}
.kopf-kontakt a:hover{border-color:var(--marke)}

/* ---------- Aufmacher ---------- */
.aufmacher{padding:5rem 0 4rem}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
         color:var(--marke-text);margin-bottom:1rem}
.aufmacher h1{font-size:clamp(2.1rem,5.5vw,3.6rem);letter-spacing:-.015em;max-width:32ch}
.aufmacher p{margin:1.5rem 0 0;max-width:56ch;font-size:1.2rem;color:var(--leise)}
.strich{width:4rem;height:4px;background:var(--marke);margin:2.25rem 0 0}

/* ---------- Ablauf ---------- */
.ablauf{padding:1rem 0 5rem}
.ablauf h2{font-size:1.6rem;margin-bottom:.5rem}
.ablauf .hinweis{color:var(--leise);margin:0 0 2.25rem;max-width:60ch}
.schritte{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
          list-style:none;padding:0;margin:0;counter-reset:schritt}
.schritt{background:var(--karte);border:1px solid var(--linie);border-radius:4px;
         padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column}
.schritt .nummer{font-size:.9rem;font-weight:600;color:var(--marke);
                 letter-spacing:.08em;margin-bottom:.9rem;
                 font-variant-numeric:tabular-nums}
.schritt h3{font-size:1.18rem;margin-bottom:.5rem;
            overflow-wrap:break-word;hyphens:auto}
.schritt p{margin:0;font-size:.97rem;color:var(--leise)}

/* ---------- Kontakt ---------- */
.kontakt{border-top:1px solid var(--linie);padding:4rem 0}
.kontakt-raster{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                align-items:start}
.kontakt h2{font-size:1.6rem;margin-bottom:1rem}
.kontakt p{color:var(--leise);margin:0 0 1.5rem;max-width:44ch}
dl.daten{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;margin:0;
         font-variant-numeric:tabular-nums}
dl.daten dt{color:var(--leise);font-size:.95rem}
dl.daten dd{margin:0}
.gross{font-size:1.15rem;font-weight:500}

/* ---------- Fuss ---------- */
.fuss{border-top:1px solid var(--linie);background:var(--karte);
      padding:2.5rem 0;font-size:.92rem;color:var(--leise)}
.fuss-innen{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.fuss a{color:var(--leise)}
.fuss nav{display:flex;gap:1.25rem}

/* ---------- Rechtstexte ---------- */
.text{padding:3.5rem 0 4.5rem;max-width:44rem}
.text h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:2rem}
.text h2{font-size:1.3rem;margin:2.5rem 0 .75rem}
.text p,.text li{color:var(--schrift)}
.text p{margin:0 0 1rem}
.text ul{margin:0 0 1rem;padding-left:1.25rem}
.text li{margin-bottom:.4rem}
.text .stand{color:var(--leise);font-size:.92rem;margin-top:2.5rem;
             padding-top:1.25rem;border-top:1px solid var(--linie)}
.zurueck{display:inline-block;margin-bottom:2rem;font-size:.95rem}

@media (max-width:44rem){
  .aufmacher{padding:3.25rem 0 2.5rem}
  .kontakt-raster{grid-template-columns:1fr;gap:2rem}
  dl.daten{grid-template-columns:1fr;gap:.15rem}
  dl.daten dt{margin-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}