/* emsland.cloud — Marke der Vision Networks GmbH.

   HERKUNFT DER FARBEN
   Die Marke gehört seit dem SH-Entscheid vom 16.09.2026 der Vision Networks GmbH,
   also spricht sie die VN-Farbwelt: Navy als Grundton, Cyan als Akzent. Die Werte
   stammen aus dem Haus-Gedächtnis `hausfarben_marken` (VN-Blau #1A357E,
   VN-Cyan #1491CF, Anthrazit #404956), nicht aus dem Augenmaß — und sie sind hier
   NACHGERECHNET, nicht zitiert:

     #1A357E auf Weiß  11,32:1   Überschriften, Navigation, Fuß
     #404956 auf Weiß   9,11:1   Fließtext
     #1491CF auf Weiß   3,51:1   ⚠ REISST AA — nur Flächen OHNE Text
     #0F7AB0 auf Weiß   4,74:1   trägt Text auf Weiß UND weißen Text auf sich

   Daraus die zwei Rollen, dieselbe Bauart wie bei ADMIN24:
     --cyan       nur FLÄCHEN OHNE Text (Linien, Marken-Punkt, Trenner).
     --cyan-tief  jeder farbige Text und jede Fläche MIT Text.

   ⚠ Und der weiche Grund ist mitgerechnet: auf #F4F7FA fällt #0F7AB0 auf 4,41:1 und
   damit unter AA. Deshalb steht --bg-soft auf #F8FAFC (4,53:1) — ein Wert, der wie
   Kosmetik aussieht und keine ist. Wer ihn abdunkelt, rechnet nach.

   ⛔ KEINE EXTERNE RESSOURCE. Die Schrift liegt als woff2 daneben; die
   Datenschutzerklärung (Ziffer 3) sagt genau das zu, und
   `tools/pruefungen/externe_requests.py` hält es. Das ist der Befund, an dem die
   Alt-Seite gescheitert ist: sie lud ihr Logo über `psa.etn.group` von einem
   Drittanbieter-CDN in UK — jeder Besucher übertrug dorthin seine IP, ohne Hinweis.

   ⚠ ES GIBT KEIN LOGO. Eine eigene Wort-/Bildmarke für emsland.cloud existiert
   nicht (Befund der Vorprüfung 16.09.2026 — die Alt-Seite trug das ETN-Logo mit
   `alt="etn.group Logo"`). Statt eine zu erfinden, trägt der Kopf eine
   TYPOGRAFISCHE Wortmarke. Kommt eine echte Marke, ersetzt sie .wortmarke — der
   Platz dafür ist vorhanden. */

@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: #1a357e;
  --cyan: #1491cf;        /* Flächen OHNE Text — reißt AA als Text */
  --cyan-tief: #0f7ab0;   /* Text und Flächen MIT Text (AA in beide Richtungen) */
  --cyan-dunkel: #0b5c86; /* Hover */
  --charcoal: #404956;
  --bg: #ffffff;
  --bg-soft: #f8fafc;     /* nachgerechnet, s. Kopf — nicht abdunkeln */
  --line: #e3e9f0;
  --max: 1080px;
}

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

/* ⚠ Weiches Scrollen nur, wo es niemanden stört. Ohne diese Abfrage bewegt sich die
   Seite auch für Leute, die in ihrem System ausdrücklich weniger Bewegung eingestellt
   haben (Schwindel, Migräne) — 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.
   Der Ausgleich liegt bewusst über der Kopfhöhe, damit Luft bleibt. */
section[id] { scroll-margin-top: 96px; }

body {
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  color: var(--charcoal);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1rem;
  /* ⚠ Die Alt-Seite brauchte `overflow-x: hidden`, um ihren überlaufenden Kopf zu
     verstecken. Das ist ein Pflaster über dem Befund, kein Umbruch — hier läuft
     nichts über, deshalb steht die Zeile nicht da. */
}

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

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

/* Sichtbar erst beim Tabben — Tastaturnutzer kommen an der Navigation vorbei. */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 20;
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--cyan-tief); outline-offset: 2px; }

/* ── Kopf ──────────────────────────────────────────────────────────────────────
   ⚠ HIER LAG DER MOBIL-BEFUND DER ALT-SEITE. Bei 375 px schob sich dort der
   Knopf über den Markennamen und der Schriftzug wurde rechts abgeschnitten.
   Die Ursache war eine Kopfzeile, die nicht umbrechen durfte. Deshalb:
   `flex-wrap: wrap` und eine Wortmarke, die mit der Breite mitskaliert. Geprüft
   bis 320 px. */
.site-header {
  border-bottom: 1px solid var(--line);
  /* ⚠ DECKEND, nicht rgba(…,.96) wie in der Vorlage. Bei 320 px gemessen: durch die
     4 % Transparenz schimmert der scrollende Fliesstext hinter dem klebenden Kopf
     durch und legt sich ueber die Navigation. Auf einer Seite mit langen
     Rechtstexten ist das genau die Stelle, an der es auffaellt. */
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.wortmarke {
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
  white-space: nowrap;
}
.wortmarke span { color: var(--cyan-tief); font-weight: 400; }
.wortmarke:hover { text-decoration: none; }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-nav a {
  color: var(--navy);
  font-weight: 600;
  font-size: .95rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 9vw, 5.5rem) 0;
}
.lead {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--cyan-tief);
  margin-bottom: .75rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
  /* ⚠ Bei 320 px ist „emsland.cloud" das längste unteilbare Wort der Seite.
     clamp() hält es im Rahmen; ein fester Wert tut das nicht. */
}
.hero-text {
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  max-width: 34em;
  margin: 1.25rem 0 2rem;
}

.knopf {
  display: inline-block;
  background: var(--cyan-tief);   /* Fläche MIT Text — deshalb die tiefe Variante */
  color: #fff;
  font-weight: 600;
  padding: .8rem 1.6rem;
  border-radius: 4px;
}
.knopf:hover { background: var(--cyan-dunkel); text-decoration: none; }

/* ── Abschnitte ────────────────────────────────────────────────────────────── */
main section { padding: clamp(2.75rem, 7vw, 4.5rem) 0; }
main section.soft { background: var(--bg-soft); border-block: 1px solid var(--line); }

.marke-label {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--cyan-tief);
  margin-bottom: .6rem;
}
main h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
main p { max-width: 38em; margin-bottom: 1rem; }

.adresse {
  font-weight: 600;
  color: var(--navy);
  border-left: 3px solid var(--cyan);   /* Fläche OHNE Text — helles Cyan zulässig */
  padding-left: 1rem;
}

.kontakt { display: grid; grid-template-columns: 1fr; gap: .15rem 1.5rem; max-width: 38em; }
.kontakt dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: .9rem;
}
.kontakt dd { font-weight: 600; color: var(--navy); }

@media (min-width: 600px) {
  .kontakt { grid-template-columns: 170px 1fr; }
  .kontakt dt { margin-top: 0; padding-top: .1rem; }
  .kontakt dd { margin-bottom: .6rem; }
}

/* ── Rechtstext-Seiten ─────────────────────────────────────────────────────── */
.legal { padding: clamp(2.5rem, 7vw, 4rem) 0; }
.legal h1 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.75rem;
}
.legal h2 {
  font-size: 1.25rem;
  color: var(--navy);
  margin: 2.25rem 0 .75rem;
}
.legal h3 {
  font-size: 1.02rem;
  color: var(--cyan-tief);
  margin: 1.5rem 0 .5rem;
}
.legal p, .legal ul { max-width: 40em; }
.legal ul { margin: 0 0 1rem 1.25rem; }
.legal li { margin-bottom: .2rem; }

.provider-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1.25rem 0 1.75rem;
  max-width: 40em;
}
.provider-card > p { font-size: 1.05rem; margin-bottom: 1.25rem; }
.provider-card dl { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.provider-card dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
  font-weight: 700;
  margin-top: .8rem;
}
.provider-card dd { font-weight: 600; color: var(--navy); }

@media (min-width: 600px) {
  .provider-card dl { grid-template-columns: 180px 1fr; gap: .1rem 1rem; }
  .provider-card dt { margin-top: 0; padding-top: .1rem; }
  .provider-card dd { margin-bottom: .55rem; }
}

/* ── Fuß ───────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: #d7e2f4;
  padding: 2.5rem 0;
  margin-top: 0;
}
.fuss-marke {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.fuss-marke span { color: #9cc9e8; font-weight: 400; }  /* 6,44:1 auf Navy */
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
.site-footer a { color: #fff; font-weight: 600; }
.copyright { font-size: .85rem; color: #b9c9e2; }