/* ==========================================================================
   MACX IT Support — Stylesheet
   Ein einziges Stylesheet, keine Abhaengigkeiten, keine externen Ressourcen.
   Aufbau:  1 Tokens · 2 Reset · 3 Basis-Typo · 4 Layout · 5 Komponenten
            8 Sektionen · 9 Header/Footer · 10 Utilities · 11 Print
   ========================================================================== */

/* 1 — Design-Tokens ------------------------------------------------------- */

:root {
  /* Farben — uebernommen von macx-it.de.
     Das Blau ist direkt aus den Pixeln der Logodatei gelesen (#0050ff),
     nicht aus den Buttons: deren blasseres #3f6fb7 stammt noch aus der
     Webflow-Vorlage und ist nicht die Marke. */
  --c-ink:          #212127;   /* Anthrazit der alten Startseite              */
  --c-ink-soft:     #2c2c34;   /* abgesetzte dunkle Flaeche                   */
  --c-text:         #2a2a2a;
  --c-text-muted:   #616167;
  --c-bg:           #ffffff;
  --c-bg-muted:     #f3f3f7;
  --c-border:       #e3e3ea;
  --c-border-dark:  #3a3a44;

  --c-accent:       #0050ff;   /* MACX-Blau — CTAs, Links, Hervorhebungen     */
  --c-accent-dark:  #0041d1;   /* Hover                                       */
  --c-accent-light: #4d8bff;   /* Akzent auf dunklem Grund                    */
  --c-accent-wash:  #e9f0ff;   /* sehr helle Akzentflaeche                    */
  --c-warn:         #b03e3e;   /* Risiko-/Achtung-Hinweise, Textfarbe         */
  --c-warn-line:    #cc4f4f;   /* dasselbe Rot als Linie, wie auf der alten Seite */

  /* Typografie — Poppins wie auf macx-it.de, lokal eingebunden (siehe unten).
     Fehlen die Schriftdateien, greift automatisch der System-Stack. */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Century Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", monospace;

  --fs-display: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h1:      clamp(1.9rem, 1.5rem + 1.8vw, 2.8rem);
  --fs-h2:      clamp(1.5rem, 1.28rem + 1.1vw, 2.1rem);
  --fs-h3:      clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;

  --lh-tight: 1.18;
  --lh-snug:  1.35;
  --lh-base:  1.65;

  /* Abstaende — 8-px-Raster */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Form */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(33, 33, 39, .06),
               0 2px 6px rgba(33, 33, 39, .05);
  --shadow-md: 0 2px 4px rgba(33, 33, 39, .05),
               0 8px 24px rgba(33, 33, 39, .08);

  --container: 1120px;
  --measure:   68ch;   /* max. Zeilenlaenge fuer Fliesstext */
}

/* 1b — Schriften ----------------------------------------------------------
   Poppins wird lokal ausgeliefert, nicht von Google Fonts geladen. Damit
   bleibt die Seite frei von Requests an Dritte — dieselbe Begruendung wie
   im Rest des Auftritts. Die vier Schnitte gehoeren nach assets/fonts/,
   Details in assets/fonts/LIESMICH.md.
   Poppins steht unter der SIL Open Font License; lokales Einbinden ist
   ausdruecklich erlaubt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2 — Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* fixierter Header */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

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

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

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

/* 3 — Basis-Typografie ---------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 var(--s-2);
  color: var(--c-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: 1.02rem; }

p  { margin: 0 0 var(--s-2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--c-accent-dark); }

strong { font-weight: 600; color: var(--c-ink); }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.eyebrow {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lead {
  max-width: 62ch;
  color: var(--c-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.small { font-size: var(--fs-sm); color: var(--c-text-muted); }
.fineprint { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.5; }

/* 4 — Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}

.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }

.section__head { margin-bottom: var(--s-4); }
.section__head p { color: var(--c-text-muted); font-size: var(--fs-lead); }

.grid { display: grid; gap: var(--s-3); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--s-4); }
}

.stack > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-4); }

/* 5 — Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .78em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-ink); color: var(--c-ink); }

.btn--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.btn--on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* 6 — Karten -------------------------------------------------------------- */

.card {
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card h3 { margin-bottom: var(--s-1); }
.card p  { color: var(--c-text-muted); }

.card--flat { box-shadow: none; background: var(--c-bg-muted); border-color: transparent; }

.card--link { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.card--link:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md); color: inherit; }
.card--link .card__more { display: inline-block; margin-top: var(--s-2); color: var(--c-accent); font-weight: 600; font-size: var(--fs-sm); }
.card--link:hover .card__more { text-decoration: underline; }

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--s-2);
  background: var(--c-accent-wash);
  border-radius: var(--radius-sm);
  color: var(--c-accent);
}
.card__icon svg { width: 1.4rem; height: 1.4rem; }

/* Portraitfoto — auf Weiss freigestellt, deshalb bewusst ohne Rahmen und
   ohne Hintergrund. Die Hoechstbreite verhindert, dass es auf grossen
   Schirmen den Textblock daneben ueberragt. */
.portrait {
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline: auto;
}

/* 7 — Listen -------------------------------------------------------------- */

.list-check li,
.list-dash li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .55rem;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 1rem;
  height: .55rem;
  border-left: 2.5px solid var(--c-accent);
  border-bottom: 2.5px solid var(--c-accent);
  transform: rotate(-45deg);
}
.list-dash li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: .7rem;
  height: 2px;
  background: var(--c-text-muted);
}
.list-check li:last-child, .list-dash li:last-child { margin-bottom: 0; }

.section--dark .list-check li::before { border-color: var(--c-accent-light); }

/* 8 — Sektionsvarianten --------------------------------------------------- */

.section--muted { background: var(--c-bg-muted); }

.section--dark {
  background: var(--c-ink);
  color: #ced5de;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead, .section--dark .section__head p { color: #aeb8c4; }
.section--dark .eyebrow { color: var(--c-accent-light); }
.section--dark a:not(.btn) { color: var(--c-accent-light); }
.section--dark .card {
  background: var(--c-ink-soft);
  border-color: var(--c-border-dark);
  box-shadow: none;
}
.section--dark .card p { color: #aeb8c4; }
/* strong erbt sonst die dunkle Ueberschriftenfarbe und verschwindet
   auf dunklem Grund fast vollstaendig */
.section--dark strong, .hero strong, .site-footer strong { color: #fff; }
.section--dark .card__icon { background: rgba(77, 139, 255, .14); color: var(--c-accent-light); }

/* Hero */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem);
  background: var(--c-ink);
  background-image:
    radial-gradient(900px 500px at 78% -10%, rgba(0, 80, 255, .42), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(77, 139, 255, .14), transparent 60%);
  color: #ced5de;
}
.hero h1 { color: #fff; font-size: var(--fs-display); }
.hero__inner { max-width: 46rem; }
.hero .lead { color: #b9c3ce; margin-top: var(--s-2); }
/* Petrol-Akzent waere auf dem dunklen Hero zu kontrastarm (3.7:1) */
.hero .eyebrow { color: var(--c-accent-light); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-dark);
  font-size: var(--fs-sm);
  color: #9fabb8;
}
.hero__meta span { display: inline-flex; align-items: center; gap: .45em; }
.hero__meta svg { width: 1rem; height: 1rem; color: var(--c-accent-light); flex: none; }

/* Vertrauensleiste */

.trustbar {
  padding-block: var(--s-3);
  background: var(--c-bg-muted);
  border-bottom: 1px solid var(--c-border);
}
.trustbar ul {
  display: grid;
  gap: var(--s-2) var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .trustbar ul { grid-template-columns: repeat(4, 1fr); } }
.trustbar li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.trustbar svg { width: 1.15rem; height: 1.15rem; color: var(--c-accent); flex: none; margin-top: .12rem; }
.trustbar strong { display: block; color: var(--c-ink); }
.trustbar span { color: var(--c-text-muted); }

/* Problem / Loesung */

.pain { border-left: 3px solid var(--c-warn-line); padding-left: var(--s-2); }
.pain h3 { color: var(--c-ink); }
.pain__answer {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--c-border);
  font-size: var(--fs-sm);
}
.pain__answer strong { color: var(--c-accent); }

/* Ablauf-Schritte */

.steps { counter-reset: step; display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

.steps li { counter-increment: step; position: relative; padding-top: var(--s-3); }
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--c-accent);
  border-radius: 50%;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
}
.steps li h3 { margin-top: var(--s-2); }
.steps li p { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Zitate */

.quote {
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  margin: 0;
}
.quote blockquote { margin: 0; }
.quote p { color: var(--c-text); font-size: 1.02rem; }
.quote figcaption {
  margin-top: var(--s-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.quote figcaption strong { display: block; color: var(--c-ink); }

/* Case-Karten */

.case dl { margin: var(--s-2) 0 0; }
.case dt {
  margin-top: var(--s-2);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.case dd { margin: .25rem 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Leistungsblock (Detailseite) */

.service {
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-border);
  scroll-margin-top: 6rem;
}
.service:first-of-type { border-top: 0; padding-top: 0; }
.service__grid { display: grid; gap: var(--s-3); }
@media (min-width: 900px) {
  .service__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
}
.service__occasion {
  padding: var(--s-2) var(--s-3);
  background: var(--c-accent-wash);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.service__occasion strong { display: block; margin-bottom: .2rem; color: var(--c-accent-dark); }

/* Download-Kacheln fuer die Fernwartung -------------------------------------
   Beide Kacheln sind immer gleichwertig sichtbar. main.js erkennt das
   Betriebssystem und setzt .download--empfohlen — das ist eine Hilfe, keine
   Vorauswahl: Wer am Mac sitzt und fuer den Windows-Rechner nebenan laedt,
   kommt genauso schnell an die richtige Datei. */

.downloads { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .downloads { grid-template-columns: 1fr 1fr; } }

.download {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-4) var(--s-3);
  background: var(--c-bg);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.download:hover { border-color: var(--c-accent); box-shadow: var(--shadow-md); }

.download__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--s-2);
  color: var(--c-ink);
}
.download__icon svg { width: 2.25rem; height: 2.25rem; }

.download h3 { margin-bottom: .25rem; }
.download__datei {
  margin-bottom: var(--s-3);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}
.download .btn { width: 100%; margin-top: auto; }

/* Markierung des erkannten Systems */
.download__erkannt {
  display: none;
  margin-bottom: var(--s-2);
  padding: .2em .7em;
  background: var(--c-accent);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.download--empfohlen { border-color: var(--c-accent); }
.download--empfohlen .download__erkannt { display: inline-block; }

/* Notfall-Block: die Telefonnummer als groesste Schaltflaeche der Seite */
.notruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4);
  background: var(--c-accent-wash);
  border: 1px solid rgba(0, 80, 255, .18);
  border-radius: var(--radius);
  text-align: center;
}
.notruf__nummer {
  color: var(--c-accent-dark);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.notruf__nummer:hover { color: var(--c-accent); text-decoration: underline; }

/* Sprungmarken-Leiste */

.jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--s-3);
}
.jumpnav a {
  padding: .4em .85em;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.jumpnav a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Preistabellen */

.pricing { display: grid; gap: var(--s-3); align-items: start; }
@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.plan--featured {
  border-color: var(--c-accent);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.plan__badge {
  align-self: flex-start;
  margin-bottom: var(--s-1);
  padding: .2em .7em;
  background: var(--c-accent);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.plan__price {
  margin: var(--s-2) 0 .15rem;
  color: var(--c-ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.plan__price span { font-size: 1rem; font-weight: 500; color: var(--c-text-muted); }
.plan__note { color: var(--c-text-muted); font-size: var(--fs-xs); }
.plan ul { margin: var(--s-3) 0; font-size: var(--fs-sm); }
.plan .btn { margin-top: auto; width: 100%; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
caption { text-align: left; padding-bottom: var(--s-1); color: var(--c-text-muted); font-size: var(--fs-sm); }
th, td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--c-border); }
thead th { color: var(--c-ink); font-weight: 600; background: var(--c-bg-muted); white-space: nowrap; }
td:last-child, th:last-child { text-align: right; white-space: nowrap; }

/* FAQ — funktioniert ohne JavaScript */

.faq { border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  color: var(--c-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin-top: .45rem;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding-bottom: var(--s-2); }
.faq details > div p { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Formular */

.form { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field .hint { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  padding: .65em .8em;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); }

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #b00020; }
.field__error { display: none; color: #b00020; font-size: var(--fs-xs); }
.field--invalid .field__error { display: block; }

.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .28rem; flex: none; }
.field--check label { font-weight: 400; font-size: var(--fs-sm); }

/* Honeypot — fuer Menschen unsichtbar, kein display:none (Bots pruefen darauf) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kontaktdaten */

.contact-list { font-size: 1rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: var(--s-2); }
.contact-list svg { width: 1.2rem; height: 1.2rem; color: var(--c-accent); flex: none; margin-top: .22rem; }
.contact-list strong { display: block; color: var(--c-ink); font-size: var(--fs-sm); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* Hinweisbox */

.callout {
  padding: var(--s-3);
  background: var(--c-accent-wash);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 80, 255, .18);
}
.callout h3 { color: var(--c-accent-dark); }
.callout--warn { background: #fdf1f1; border-color: rgba(204, 79, 79, .25); }
.callout--warn h3 { color: var(--c-warn); }

/* Abschluss-CTA */

.cta { text-align: center; }
.cta .container { max-width: 720px; }
.cta p { margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* 9 — Header -------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .7em 1.2em;
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--c-border);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 4.25rem;
}

/* Logo — die Originaldatei aus dem bisherigen Auftritt, gesetzt in
   Stereofunk Display. Im Kopf die blaue Fassung, im Fuss die weisse.
   Die Breite ergibt sich aus der Hoehe, damit beide Fassungen trotz
   leicht abweichender Seitenverhaeltnisse gleich gross wirken. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.brand img {
  width: auto;
  height: 1.75rem;
  transition: opacity .15s ease;
}
.brand:hover img { opacity: .8; }

/* Die weisse Fassung traegt zusaetzlich die Zeile "IT Support" und braucht
   deshalb mehr Hoehe, damit die Wortmarke gleich gross wirkt wie im Kopf. */
.site-footer .brand img { height: 3rem; }

@media (min-width: 900px) {
  .brand img { height: 2rem; }
}
@media (min-width: 1000px) { .brand small { display: inline; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5em .8em;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
/* :not(.btn) — sonst ueberschreibt diese Regel die weisse Schrift des
   CTA-Buttons im Kopf (gleiche Spezifitaet, spaeter im Stylesheet). */
.site-nav a:not(.btn) {
  display: block;
  padding: .6em .2em;
  color: var(--c-text);
  font-size: .96rem;
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--c-accent); }
.site-nav a[aria-current="page"] { color: var(--c-accent); font-weight: 700; }
.site-nav .btn { margin-top: var(--s-1); }

/* Mobil: Menue eingeklappt.
   Progressive Enhancement — eingeklappt wird nur, wenn JavaScript laeuft
   (Klasse .js am <html>). Ohne JS steht die Navigation offen untereinander. */
.nav-toggle { display: none; }

@media (max-width: 899px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav {
    flex-basis: 100%;
    padding-bottom: var(--s-3);
    border-top: 1px solid var(--c-border);
    margin-top: -1px;
  }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { padding-top: var(--s-2); }
  .site-nav a { padding: .7em 0; border-bottom: 1px solid var(--c-border); }
  .site-nav .btn { width: 100%; margin-top: var(--s-2); }
}

@media (min-width: 900px) {
  .site-nav { display: block !important; }
  .site-nav ul { flex-direction: row; align-items: center; gap: var(--s-3); }
  .site-nav .btn { margin-top: 0; padding: .55em 1.1em; }
  /* Ohne nowrap staucht der Flex-Container die Eintraege, sobald es eng wird —
     "Über mich" bricht dann mitten im Menue auf zwei Zeilen um. */
  .site-nav li { flex: none; }
  .site-nav a { white-space: nowrap; }
}

/* 10 — Footer ------------------------------------------------------------- */

.site-footer {
  padding-block: var(--s-5) var(--s-3);
  background: var(--c-ink);
  color: #9fabb8;
  font-size: var(--fs-sm);
}
.site-footer h2, .site-footer h3 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer a { color: #ced5de; text-decoration: none; }
.site-footer a:hover { color: var(--c-accent-light); text-decoration: underline; }
.site-footer__grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer li { margin-bottom: .45rem; }
.site-footer .brand { color: #fff; }
.site-footer .brand:hover { color: var(--c-accent-light); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  justify-content: space-between;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-dark);
  font-size: var(--fs-xs);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Breadcrumb */

.breadcrumb { padding-block: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li::after { content: "\203A"; margin-left: .4rem; color: var(--c-border); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }

/* Seitenkopf der Unterseiten */

.pagehead {
  padding-block: var(--s-4) var(--s-5);
  background: var(--c-bg-muted);
  border-bottom: 1px solid var(--c-border);
}
.pagehead h1 { max-width: 22ch; }

/* 11 — Utilities ---------------------------------------------------------- */

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

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mb-0 { margin-bottom: 0; }
.no-measure { max-width: none; }

/* 12 — Druck -------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .jumpnav, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section, .hero { padding-block: 1rem; background: none !important; color: #000 !important; }
  .hero h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .faq details { break-inside: avoid; }
}