/* ADMIN24 — Marke der Vision Networks GmbH.

   FUEHREND IST DAS ORANGE (SH 17.08.2026). Blau bleibt als Grundton, weil es von
   Vision Networks kommt; der Akzent gehoert der Marke.

   Der Wert ist GEMESSEN, nicht geschaetzt: eine Stichprobe ueber das offizielle
   `~/dev/_shared/0_Logos/admin24/admin24_orange.png` liefert genau zwei
   Flaechenfarben — #D85A39 (Kachel) und #FFFFFF (Wortmarke). Alles Weitere sind
   Kantenpixel.

   ⚠ Nebenbefund, der eine offene Frage schliesst: #D85A39 ist praktisch die
   Haus-Terracotta des VN-Styleguides (#D85B36). Die Uebergabe hielt fest,
   Terracotta sei dem VisionFON-Kern vorbehalten und bei ADMIN24 „als Akzent zu
   pruefen". Die Pruefung ist damit erledigt — ADMIN24 borgt sich die Farbe nicht,
   sie IST die Farbe der Marke.

   ⚠ Kontrast: #D85A39 auf Weiss ergibt 3,86:1 und reisst damit WCAG AA (4,5:1) fuer
   normalen Text — auch weiss auf Orange. Deshalb zwei Rollen:
     --orange       nur FLAECHEN OHNE Text (Icon-Kachel, Linien, Logo).
     --orange-tief  #BE4826, dieselbe Farbe abgedunkelt: 5,07:1 gegen Weiss in
                    BEIDE Richtungen — traegt Text auf Weiss und weissen Text auf
                    sich. Jeder farbige Text und jede Flaeche mit Text nutzt diesen.
   Wer die Werte aendert, rechnet den Kontrast nach, statt nach Augenmass zu gehen.

   Navy #1A347E stammt aus derselben Logodatei und deckt sich mit dem VN-Styleguide
   (Regal Navy #1A357E) — die Marke bleibt damit sichtbar im Haus. */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #1a347e;
  --orange: #d85a39;         /* Marke, exakt aus dem Logo — Flaechen OHNE Text */
  --orange-tief: #be4826;    /* Text und Flaechen MIT Text (AA in beide Richtungen) */
  --orange-dunkel: #9c3a1e;  /* Hover */
  --charcoal: #404956;
  --bg: #ffffff;
  --bg-soft: #fbf6f4;
  --line: #eee2dd;
  --max: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ⚠ Weiches Scrollen nur, wo es niemanden stoert. Ohne diese Abfrage bewegt sich
   die Seite auch fuer Leute, die in ihrem System ausdruecklich weniger Bewegung
   eingestellt haben (Schwindel, Migraene) — die Einstellung ist eine Bitte, keine
   Vorliebe. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ⚠ Der Kopf klebt, also verdeckt er nach einem Ankersprung die ersten Pixel des
   Ziels. GEMESSEN am 17.08.2026 im Browser: Kopfhoehe 73 px bei 1280 px Breite und
   101 px bei 375 px (dort bricht die Navigation in eine zweite Zeile). Ohne den
   Ausgleich landet `#leistungen` bei y=0 und die Abschnittsmarke „LEISTUNGEN"
   (y=72) liegt UNTER dem Kopf — der Sprung sieht aus, als sei er danebengegangen.
   Die Werte liegen bewusst ueber der gemessenen Hoehe, damit auch etwas Luft
   bleibt; wer den Kopf umbaut, misst neu statt zu schaetzen. */
section[id] { scroll-margin-top: 92px; }

body {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color: var(--charcoal);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1rem;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--orange-tief); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.site-header img { height: 40px; width: auto; display: block; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.95rem;
}
.site-nav a:hover { color: var(--orange-tief); text-decoration: none; }

/* Hero */
.hero { padding: 5rem 0 4.5rem; background:
  radial-gradient(1200px 500px at 85% -10%, rgba(216, 90, 57, 0.13), transparent 60%),
  radial-gradient(900px 400px at -10% 110%, rgba(26, 52, 126, 0.08), transparent 60%);
}
.hero .eyebrow {
  color: var(--orange-tief);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero h1 {
  color: var(--navy);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0.8rem 0 1.2rem;
  max-width: 780px;
}
.hero p { max-width: 640px; font-size: 1.1rem; }
.hero .actions { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.98rem;
}
.btn-primary { background: var(--orange-tief); color: #fff; }
.btn-primary:hover { background: var(--orange-dunkel); text-decoration: none; }
.btn-ghost { border: 2px solid var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-tief); text-decoration: none; }

/* Sections */
section { padding: 4.5rem 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 640px; margin-bottom: 2.8rem; }
.section-head .eyebrow {
  color: var(--orange-tief);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.section-head h2 {
  color: var(--navy);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  margin-top: 0.5rem;
}

/* Leistungen */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
}
.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(216, 90, 57, 0.12);
  color: var(--orange-tief);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.card h3 {
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.card p { font-size: 0.95rem; }

/* Ueber uns */
.about p { max-width: 720px; font-size: 1.05rem; }
.about p + p { margin-top: 1rem; }

/* Kontakt */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-top: 4px solid var(--orange);
  padding: 1.6rem;
}
.contact-card h3 {
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.contact-card p, .contact-card a { font-size: 1.02rem; font-weight: 600; }

/* Footer */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, 0.85); padding: 3rem 0 2.5rem; }
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* Im Footer steht dieselbe orange Kachel auf Navy — kein eigenes Weiss-Logo mehr.
   Das Logo-Paket liefert zwar eine weisse PNG-Fassung, aber SH hat am 17.08.2026
   entschieden, dass das Orange die Marke traegt; eine weisse Fassung neben dem
   orangen Header waere zwei Marken auf einer Seite. */
.site-footer img { height: 38px; width: auto; display: block; }
.site-footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-footer a { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; font-weight: 600; }
.site-footer a:hover { color: #fff; }
.site-footer .copyright { font-size: 0.85rem; width: 100%; margin-top: 1rem; color: rgba(255, 255, 255, 0.6); }

/* Weiterlese-Link auf den Karten der Startseite */
.card-mehr { margin-top: 0.9rem; }
.card-mehr a { font-weight: 700; font-size: 0.95rem; }
.card-mehr a::after { content: " \2192"; }

/* Leistungsseiten — dieselbe Typografie wie die Rechtsseiten, ohne deren Semantik.
   Bewusst eine eigene Klasse: `.legal` steht fuer Seiten auf noindex, `.seite` fuer
   Inhaltsseiten, die indexiert werden sollen. Wer die Regeln zusammenlegt, verliert
   diese Unterscheidung an der Stelle, an der sie zaehlt. */
.seite { padding: 3.5rem 0 4.5rem; }
.seite h2 { color: var(--navy); font-size: 1.35rem; font-weight: 800; margin: 2.4rem 0 0.7rem; }
.seite h2:first-child { margin-top: 0; }
.seite p, .seite li { max-width: 760px; font-size: 1rem; }
.seite p + p { margin-top: 0.9rem; }
.seite ul { padding-left: 1.3rem; margin-top: 0.6rem; }
.seite li { margin-bottom: 0.45rem; }
.seite li::marker { color: var(--orange); }

/* Rechtsseiten (Impressum / Datenschutz) */
.legal { padding: 3.5rem 0 4.5rem; }
.legal h1 { color: var(--navy); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; margin-bottom: 0.4rem; }
.legal .lead { color: var(--orange-tief); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; }
.legal h2 { color: var(--navy); font-size: 1.25rem; font-weight: 700; margin: 2.2rem 0 0.6rem; }
.legal h3 { color: var(--navy); font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 0.4rem; }
.legal p, .legal li { max-width: 760px; font-size: 0.98rem; }
.legal ul { padding-left: 1.3rem; }
.legal .provider-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  margin: 1.6rem 0;
  max-width: 560px;
}
.legal .provider-card dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-tief);
  margin-top: 0.9rem;
}
.legal .provider-card dt:first-child { margin-top: 0; }
.legal .provider-card dd { font-weight: 600; }

@media (max-width: 640px) {
  .hero { padding: 3.5rem 0 3rem; }
  section { padding: 3rem 0; }
  /* Kopf ist hier 101 px hoch (Navigation bricht um) — siehe Messung oben. */
  section[id] { scroll-margin-top: 120px; }
}