/* ==========================================================================
   Service Dathe — base.css
   Zuständig für: Reset, Design-Tokens, Typografie, Layout-Primitives.
   NICHT zuständig für: Komponenten (siehe components.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Optionale Webschrift.
   Erst aktivieren, wenn die Dateien unter assets/fonts/ liegen.
   Ohne diese Dateien bleibt der System-Stack aktiv — das ist der Normalfall.

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-variable.woff2") format("woff2-variations");
  font-weight:400 900;
  font-display:swap;
}
-------------------------------------------------------------------------- */

:root{
  /* Markenfarben — Flächen, Icons, Kanten. Aus dem Logo gemessen. */
  --brand-navy:#0E2E3B;
  --brand-blue:#0148A5;
  --brand-orange:#FE6C03;
  --brand-green:#0B8C35;

  /* Textvarianten — abgedunkelt, Kontrast auf Weiß mindestens 4.5:1 */
  --ink-blue:#0148A5;      /* 8.50:1 */
  --ink-orange:#A34500;    /* 5.31:1 */
  --ink-green:#046C27;     /* 6.09:1 */

  /* Flächen */
  --paper:#FFFFFF;
  --surface:#EDF0F2;
  --surface-deep:#0E2E3B;

  /* Text */
  --ink:#0E2E3B;
  --ink-soft:#4A5B64;
  --ink-invert:#FFFFFF;
  --ink-invert-soft:#B9C6CC;

  /* Linien */
  --rule:#D5DCE0;

  /* Maße */
  --wrap:1140px;
  --gutter:24px;
  --radius:6px;
  --radius-lg:10px;

  /* Typografie — Skala nach Bringhold'schem Terzverhältnis, gerundet */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --step--1:0.875rem;
  --step-0:1.0625rem;
  --step-1:1.25rem;
  --step-2:1.5rem;
  --step-3:1.9375rem;
  --step-4:2.5rem;
  --step-5:3.25rem;
}

/* Bereichsfarben. Jede Sektion setzt --accent, Komponenten lesen nur --accent. */
[data-bereich="sanierung"]{ --accent:var(--brand-orange); --accent-ink:var(--ink-orange); }
[data-bereich="it-service"]{ --accent:var(--brand-blue);   --accent-ink:var(--ink-blue); }
[data-bereich="hausmeister"]{--accent:var(--brand-green);  --accent-ink:var(--ink-green); }
[data-bereich="reinigung"]{  --accent:var(--brand-navy);   --accent-ink:var(--brand-navy); }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

/* Unterseiten tragen zusaetzlich eine klebende Sprungleiste. Das Merkmal setzt
   der Seitenbauer, damit kein :has() noetig wird. */
html[data-sprungleiste]{ scroll-padding-top:140px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }

a{ color:var(--ink-blue); text-decoration:underline; text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }

button,input,select,textarea{ font:inherit; color:inherit; }

/* Sichtbarer Tastaturfokus auf allen Flächen */
:focus-visible{
  outline:3px solid var(--brand-blue);
  outline-offset:2px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

h1,h2,h3{ line-height:1.15; letter-spacing:-0.02em; font-weight:800; }
h1{ font-size:var(--step-5); letter-spacing:-0.03em; }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); line-height:1.25; }
h4{ font-size:var(--step-1); font-weight:700; line-height:1.3; }

.lead{ font-size:var(--step-1); line-height:1.55; color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
.small{ font-size:var(--step--1); }

/* Lesbare Zeilenlänge — Regel statt Einzelfallkorrektur */
p{ max-width:68ch; }

/* --------------------------------------------------------------------------
   Layout-Primitives
   -------------------------------------------------------------------------- */

.wrap{
  width:min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline:auto;
}

.section{ padding-block:clamp(56px,8vw,104px); }
.section--tight{ padding-block:clamp(40px,5vw,64px); }
.section--surface{ background:var(--surface); }
.section--deep{ background:var(--surface-deep); color:var(--ink-invert); }
.section--deep h1,
.section--deep h2,
.section--deep h3{ color:var(--ink-invert); }
.section--deep .lead,
.section--deep .muted{ color:var(--ink-invert-soft); }
.section + .section--surface,
.section--surface + .section{ border-top:1px solid var(--rule); }

.stack > * + *{ margin-top:var(--flow,16px); }
.stack--lg{ --flow:28px; }
.stack--sm{ --flow:10px; }

.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--brand-navy); color:#fff;
  padding:10px 16px; border-radius:var(--radius);
  text-decoration:none;
}
.skip-link:focus-visible{ top:8px; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Ausgeblendete Elemente zuverlässig verstecken.
   Hausregel: display:grid/flex schlägt [hidden], deshalb diese Begleitregel. */
[hidden]{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}