/* =============================================================
   Engineering Editorial — Erweiterte Komponenten fuer
   die B2B Service-Seiten (Managed Services / Cloud / Security)
   ============================================================= */

/* Fix: Frappe's <body> ist display:flex (kein <main> tag!).
   Ohne flex-shrink:0 kollabieren unsere Sections zu padding-height. */
.ns-section,
.ns-ed-hero,
.ns-cta-ed {
  flex: 0 0 auto;
  width: 100%;
}

/* NET-457 (Oliv): weniger Abstand oberhalb einzelner Sections. Zwischen zwei .ns-section
   addieren sich padding-bottom der vorigen und padding-top dieser Section (96 + 96 px).
   Der Modifikator halbiert nur padding-top; die Media-Queries spiegeln die von .ns-section
   in base.css (1199 / 767 px). Steht in pages.css, also nach base.css: gleiche Spezifität,
   spätere Regel gewinnt. */
.ns-section--eng { padding-top: var(--ns-sp-6); }
@media (max-width: 1199px) {
  .ns-section--eng { padding-top: var(--ns-sp-4); }
}
@media (max-width: 767px) {
  .ns-section--eng { padding-top: var(--ns-sp-3); }
}

/* ---------- Container Variants ---------- */
.ns-container--wide {
  max-width: var(--ns-max-width-wide);
  margin: 0 auto;
  padding: 0 var(--ns-sp-3);
}

/* ---------- Section Backgrounds ---------- */
.ns-section--paper {
  background: var(--ns-bg-paper);
  position: relative;
  overflow: hidden;
}
.ns-section--ink {
  background: var(--ns-anthracite);
  color: var(--ns-bg-alt);
  position: relative;
  overflow: hidden;
}
.ns-section--ink h2,
.ns-section--ink h3,
.ns-section--ink h4 { color: var(--ns-white); }

/* Dotted Engineering grid background */
.ns-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(31, 31, 31, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent 0%, var(--ns-ink) 12%, var(--ns-ink) 88%, transparent 100%);
  pointer-events: none;
}
.ns-section--ink .ns-grid-bg {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* ---------- Hairline Rule ---------- */
.ns-rule {
  height: 1px;
  background: var(--ns-hairline);
  border: 0;
  margin: 0;
}
.ns-section--ink .ns-rule {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------- Eyebrow Label (Mono) ---------- */
.ns-eyebrow {
  font-family: var(--ns-mono);
  font-size: var(--ns-mono-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-orange-text); /* B1: 4,7:1 auf Papier */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ns-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.ns-eyebrow--mute { color: var(--ns-light-gray); }
.ns-section--ink .ns-eyebrow--mute { color: rgba(255,255,255,0.6); }

/* ---------- Display-Überschriften (Open Sans) ---------- */
.ns-display {
  font-family: var(--ns-font);
  font-weight: 360;
  font-size: clamp(34px, 4vw, 52px); /* B3: Erscheinungsbild 48 px, Startseite bis 52 px */
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ns-ink);
  padding-top: 0.1em;
}
.ns-display em {
  font-style: italic;
  font-weight: 320;
}
.ns-section--ink .ns-display { color: var(--ns-white); }

.ns-display-sm {
  font-family: var(--ns-font);
  font-weight: 380;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ns-ink);
}
.ns-display-sm em {
  font-style: italic;
}
.ns-section--ink .ns-display-sm { color: var(--ns-white); }

/* ---------- Editorial Hero ---------- */
.ns-ed-hero {
  padding: var(--ns-sp-8) 0 var(--ns-sp-8);
  position: relative;
  background: var(--ns-bg-paper);
  overflow: hidden;
  border-bottom: 1px solid var(--ns-hairline);
}
.ns-ed-hero__inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--ns-sp-8);
  align-items: start;
  position: relative;
  z-index: 1;
}
.ns-ed-hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ns-dark-gray);
  max-width: 56ch;
  margin: var(--ns-sp-4) 0 var(--ns-sp-4);
}
.ns-ed-hero__cta-row {
  display: flex;
  gap: var(--ns-sp-2);
  align-items: center;
  margin-top: var(--ns-sp-3);
  flex-wrap: wrap;
}
.ns-ed-hero__title {
  margin-top: var(--ns-sp-3);
}

/* Spec-Sidebar im Hero */
.ns-spec-card {
  border: 1px solid var(--ns-hairline);
  background: var(--ns-white);
  padding: var(--ns-sp-4);
  border-radius: var(--ns-radius);
  position: relative;
}
.ns-spec-card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 28px;
  height: 28px;
  border-top: 2px solid var(--ns-orange);
  border-left: 2px solid var(--ns-orange);
}
.ns-spec-card::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 28px;
  height: 28px;
  border-bottom: 2px solid var(--ns-orange);
  border-right: 2px solid var(--ns-orange);
}
.ns-spec-card__head {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  margin-bottom: var(--ns-sp-3);
  display: flex;
  justify-content: space-between;
}
.ns-spec-card__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ns-sp-2);
  padding: 12px 0;
  border-top: 1px dashed var(--ns-hairline);
  font-size: 14px;
}
.ns-spec-card__row:first-of-type { border-top: 0; }
.ns-spec-card__row dt {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  align-self: center;
}
.ns-spec-card__row dd {
  font-weight: 600;
  color: var(--ns-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* NET-547 Befund 7 (Oliv 09.11.2026 „3 ja“): Kopfkarte der Themenwelten (2 Zeilen) ohne Leerfläche unten –
   Bootstrap-Abstände von dl/dd (16 + 8 px) und Polster der letzten Zeile entfallen, Karte endet am Inhalt. */
.ns-spec-card--themenwelt dl,
.ns-spec-card--themenwelt dd { margin-bottom: 0; }
.ns-spec-card--themenwelt .ns-spec-card__row:last-child { padding-bottom: 0; }

/* ---------- Section Header (numeriert) ---------- */
.ns-sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ns-sp-4);
  align-items: end;
  padding-bottom: var(--ns-sp-4);
  border-bottom: 1px solid var(--ns-hairline);
  margin-bottom: var(--ns-sp-6);
}
.ns-sec-head__num {
  font-family: var(--ns-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ns-orange-text);
  padding-bottom: 6px;
}
.ns-sec-head__title {
  font-family: var(--ns-font);
  font-weight: 380;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ns-ink);
}
.ns-sec-head__title em {
  font-style: italic;
}
.ns-section--ink .ns-sec-head { border-bottom-color: rgba(255,255,255,0.15); }
.ns-section--ink .ns-sec-head__title { color: var(--ns-white); }
.ns-sec-head__meta {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  text-align: right;
  padding-bottom: 8px;
  white-space: nowrap;
}
.ns-section--ink .ns-sec-head__meta { color: rgba(255,255,255,0.55); }

@media (max-width: 767px) {
  /* NET-338 D (Neri N1): einspaltig darf die Kennzeile umbrechen; minmax(0, 1fr) verhindert, dass
     ihre Mindestbreite die Spalte über den Viewport hinaus aufweitet (vorher 415 px auf /ueber-uns). */
  .ns-sec-head { grid-template-columns: minmax(0, 1fr); gap: var(--ns-sp-2); }
  .ns-sec-head__meta { text-align: left; white-space: normal; }
}

/* ---------- Spec Sheet (Capabilities) ---------- */
.ns-spec-sheet {
  display: grid;
  gap: 0;
}
.ns-spec-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr auto;
  gap: var(--ns-sp-4);
  padding: var(--ns-sp-4) 0;
  border-bottom: 1px solid var(--ns-hairline);
  align-items: start;
  transition: background 0.4s ease, padding-left 0.4s ease;
}
.ns-spec-row:hover {
  background: linear-gradient(90deg, var(--ns-orange-soft) 0%, transparent 60%);
  padding-left: var(--ns-sp-2);
}
.ns-spec-row__id {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ns-light-gray);
  padding-top: 6px;
}
.ns-spec-row__title {
  font-family: var(--ns-font);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ns-ink);
}
.ns-spec-row__desc {
  color: var(--ns-dark-gray);
  font-size: 15px;
  line-height: 1.55;
  padding-top: 4px;
}
.ns-spec-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 6px;
}
.ns-pill {
  font-family: var(--ns-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--ns-hairline);
  border-radius: 999px;
  color: var(--ns-dark-gray);
  background: var(--ns-white);
  white-space: nowrap;
}
.ns-pill--orange {
  border-color: var(--ns-orange);
  color: var(--ns-orange-text);
  background: var(--ns-orange-soft);
}
.ns-section--ink .ns-pill {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}
.ns-section--ink .ns-pill--orange {
  border-color: var(--ns-orange);
  color: var(--ns-orange);
  background: var(--ns-orange-a12);
}

/* Spec-Sheet auf dunklem Grund (ns-section--ink) — Lesbarkeit analog ns-layer */
.ns-section--ink .ns-spec-row { border-bottom-color: rgba(255,255,255,0.14); }
.ns-section--ink .ns-spec-row:hover {
  background: linear-gradient(90deg, var(--ns-orange-a16) 0%, transparent 60%);
}
.ns-section--ink .ns-spec-row__id { color: rgba(255,255,255,0.45); }
.ns-section--ink .ns-spec-row__desc { color: rgba(255,255,255,0.72); }

@media (max-width: 1199px) {
  .ns-spec-row {
    grid-template-columns: 60px 1fr;
  }
  .ns-spec-row__desc { grid-column: 2; }
  .ns-spec-row__tags { grid-column: 2; justify-content: flex-start; }
}

/* ---------- Process Steps ---------- */
.ns-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ns-hairline);
  border-bottom: 1px solid var(--ns-hairline);
}
.ns-section--ink .ns-process {
  border-color: rgba(255,255,255,0.15);
}
.ns-process__step {
  padding: var(--ns-sp-6) var(--ns-sp-4);
  border-right: 1px solid var(--ns-hairline);
  position: relative;
}
.ns-section--ink .ns-process__step { border-right-color: rgba(255,255,255,0.15); }
.ns-process__step:last-child { border-right: 0; }
.ns-process__num {
  font-family: var(--ns-font);
  font-size: 64px;
  font-weight: 280;
  color: var(--ns-orange-text);
  line-height: 1;
  margin-bottom: var(--ns-sp-3);
}
.ns-process__title {
  font-family: var(--ns-font);
  font-size: 22px;
  font-weight: 420;
  margin-bottom: 10px;
  color: var(--ns-ink);
}
.ns-section--ink .ns-process__title { color: var(--ns-white); }
.ns-process__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ns-dark-gray);
}
.ns-section--ink .ns-process__text { color: rgba(255,255,255,0.7); }

@media (max-width: 991px) {
  .ns-process { grid-template-columns: repeat(2, 1fr); }
  .ns-process__step:nth-child(2) { border-right: 0; }
  .ns-process__step:nth-child(1),
  .ns-process__step:nth-child(2) {
    border-bottom: 1px solid var(--ns-hairline);
  }
}
@media (max-width: 600px) {
  .ns-process { grid-template-columns: 1fr; }
  .ns-process__step { border-right: 0 !important; border-bottom: 1px solid var(--ns-hairline); }
  .ns-process__step:last-child { border-bottom: 0; }
}

/* ---------- Tech Stack Grid ---------- */
.ns-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--ns-radius);
  overflow: hidden;
}
.ns-stack__item {
  padding: var(--ns-sp-4);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.3s ease;
  position: relative;
}
.ns-stack__item:hover {
  background: var(--ns-orange-a08);
}
.ns-stack__item:nth-child(4n) { border-right: 0; }
.ns-stack__cat {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
  display: block;
}
.ns-stack__name {
  font-family: var(--ns-font);
  font-size: 22px;
  font-weight: 420;
  color: var(--ns-white);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ns-stack__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

@media (max-width: 991px) {
  .ns-stack { grid-template-columns: repeat(2, 1fr); }
  .ns-stack__item:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.08); }
  .ns-stack__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .ns-stack { grid-template-columns: 1fr; }
  .ns-stack__item { border-right: 0 !important; }
}

/* ---------- KPI / Stats Strip ---------- */
.ns-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: var(--ns-sp-6) 0;
  border-top: 1px solid var(--ns-hairline);
  border-bottom: 1px solid var(--ns-hairline);
}
.ns-stat {
  padding: 0 var(--ns-sp-4);
  border-right: 1px solid var(--ns-hairline);
}
.ns-stat:last-child { border-right: 0; }
.ns-stat__num {
  font-family: var(--ns-font);
  font-size: clamp(48px, 5.5vw, 72px);
  font-weight: 320;
  line-height: 1;
  color: var(--ns-ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ns-stat__num em {
  font-style: italic;
  color: var(--ns-orange-text);
  font-size: 0.55em;
  font-weight: 400;
}
.ns-stat__label {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  margin-top: 14px;
}

/* NET-547: Bei 768–899 px sind vier Spalten zu schmal für „< 10 Min.“ (Leiste 787 px breit bei 768 px,
   /managed-services). Dort zwei Spalten wie auf dem Handy; ab 900 px unverändert vier. */
@media (min-width: 768px) and (max-width: 899px) {
  .ns-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ns-sp-6); }
  .ns-stat { min-width: 0; }
  .ns-stat:nth-child(2n) { border-right: 0; }
}

@media (max-width: 767px) {
  /* minmax(0, 1fr) statt 1fr: sonst zwingt die grosse Zahl die Spalte breiter
     als den Viewport und die Seite scrollt horizontal (gemessen 02.09.2026:
     scrollWidth 478 px bei 390 px Viewport) */
  .ns-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-sp-4); }
  .ns-stat { border-right: 0; min-width: 0; padding: 0 var(--ns-sp-2); }
  .ns-stat:nth-child(odd) { border-right: 1px solid var(--ns-hairline); }
  .ns-stat__num { font-size: clamp(36px, 11vw, 48px); }
}

/* ---------- Referenzen (Startseite, Auszug) ---------- */
.ns-ref-card { display: flex; flex-direction: column; gap: var(--ns-sp-2); }
.ns-ref-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ns-sp-2); }
.ns-ref-card__meta {
  font-family: var(--ns-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ns-light-gray); text-align: right; line-height: 1.5;
}
.ns-ref-card__satz { font-size: 16px; color: var(--ns-ink); line-height: 1.5; margin: 0; }
.ns-ref-card__satz strong { font-weight: 600; }
.ns-ref-card__chips { display: flex; flex-wrap: wrap; gap: var(--ns-sp-1); }
.ns-ref-chip {
  font-family: var(--ns-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ns-bg-alt); border: 1px solid var(--ns-hairline); color: var(--ns-dark-gray);
  padding: 4px 10px; border-radius: 999px; text-decoration: none;
}
.ns-ref-chip:hover { border-color: var(--ns-orange); color: var(--ns-orange-text); }
.ns-ref-chip--aktiv { background: var(--ns-anthracite); border-color: var(--ns-anthracite); color: var(--ns-white); }
.ns-ref-chip--aktiv:hover { color: var(--ns-white); border-color: var(--ns-anthracite); }
/* "Eingesetzt bei" auf Baustein-Seiten */
.ns-ref-einsatz { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; text-decoration: none; color: inherit; }
.ns-ref-einsatz__meta { font-family: var(--ns-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ns-light-gray); }
.ns-ref-einsatz:hover .ns-ref-einsatz__meta { color: var(--ns-orange-text); }
/* Branchenfilter auf /referenzen */
.ns-ref-filter { display: flex; flex-wrap: wrap; gap: var(--ns-sp-1); margin-bottom: var(--ns-sp-6); }
.ns-ref-filter .ns-ref-chip { padding: 8px 14px; font-size: 12px; }
.ns-ref-card__zitat { font-size: 14px; color: var(--ns-light-gray); font-style: italic; margin: 0; }
.ns-ref-logo { display: inline-flex; align-items: center; height: 40px; }
.ns-ref-logo img { height: 40px; width: auto; max-width: 150px; filter: grayscale(100%); opacity: 0.75; transition: filter 0.2s ease, opacity 0.2s ease; }
.ns-ref-logo:hover img { filter: grayscale(0%); opacity: 1; }
/* Platzhalter ohne Logo: gestrichelter Rahmen mit Kundennamen */
.ns-ref-logo--leer {
  min-width: 120px; padding: 0 12px; border: 2px dashed var(--ns-hairline-strong); border-radius: var(--ns-radius-sm);
  font-family: var(--ns-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ns-light-gray); white-space: nowrap;
  background: repeating-linear-gradient(135deg, var(--ns-paper-2) 0 8px, var(--ns-bg-paper) 8px 16px);
  justify-content: center;
}
.ns-ref-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ns-sp-4) var(--ns-sp-6);
  margin-top: var(--ns-sp-6); padding-top: var(--ns-sp-4); border-top: 1px solid var(--ns-hairline);
}
@media (max-width: 767px) {
  .ns-ref-card__head { flex-direction: column; align-items: flex-start; }
  .ns-ref-card__meta { text-align: left; }
}

@media (max-width: 480px) {
  /* NET-338 D (Neri N1): minmax(0, 1fr) statt 1fr und umbrechende Preis-Pille — vorher weitete die
     nicht umbrechende Pille „… € inkl. 19 % USt. (… € netto)“ die Spalte auf 410 px (/managed-backup). */
  .ns-spec-row { grid-template-columns: minmax(0, 1fr); gap: var(--ns-sp-1); min-width: 0; }
  .ns-spec-row__tags .ns-pill { white-space: normal; max-width: 100%; }
  .ns-spec-row__id,
  .ns-spec-row__title,
  .ns-spec-row__desc,
  .ns-spec-row__tags { grid-column: 1; }
  .ns-spec-row__title { font-size: 20px; overflow-wrap: anywhere; }
  .ns-sec-head__title,
  .ns-sec-head__meta { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- Pakete / SLA Table ---------- */
.ns-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ns-sp-3);
}
.ns-tier {
  background: var(--ns-white);
  border: 1px solid var(--ns-hairline);
  padding: var(--ns-sp-4);
  position: relative;
  display: flex;
  flex-direction: column;
}
.ns-tier--featured {
  border-color: var(--ns-orange);
  box-shadow: var(--ns-shadow-lg);
  transform: translateY(-8px);
}
.ns-tier--featured::before {
  content: "EMPFEHLUNG";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ns-orange);
  color: var(--ns-on-orange);
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 4px 12px;
  border-radius: 999px;
}
.ns-tier__id {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
}
.ns-tier__name {
  font-family: var(--ns-font);
  font-size: 36px;
  font-weight: 380;
  line-height: 1.05;
  margin: 6px 0 var(--ns-sp-2);
  color: var(--ns-ink);
}
.ns-tier__name em {
  font-style: italic;
}
.ns-tier__tag {
  font-size: 14px;
  color: var(--ns-light-gray);
  margin-bottom: var(--ns-sp-3);
  padding-bottom: var(--ns-sp-3);
  border-bottom: 1px dashed var(--ns-hairline);
}
.ns-tier__list {
  list-style: none;
  margin: 0 0 var(--ns-sp-4);
  flex: 1;
}
.ns-tier__list li {
  font-size: 14px;
  padding: 10px 0 10px 24px;
  border-bottom: 1px solid var(--ns-hairline);
  color: var(--ns-dark-gray);
  position: relative;
}
.ns-tier__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ns-orange);
  font-weight: 600;
}
.ns-tier__list li:last-child { border-bottom: 0; }
.ns-tier .ns-btn { width: 100%; }

@media (max-width: 991px) {
  .ns-tiers { grid-template-columns: 1fr; }
  .ns-tier--featured { transform: none; }
}

/* ---------- FAQ Accordion ---------- */
.ns-faq {
  max-width: 880px;
  margin: 0 auto;
}
.ns-faq__item {
  border-top: 1px solid var(--ns-hairline);
}
.ns-faq__item:last-child { border-bottom: 1px solid var(--ns-hairline); }
.ns-faq__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--ns-sp-3) 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--ns-sp-3);
  align-items: center;
  font-family: var(--ns-font);
  font-size: 22px;
  font-weight: 420;
  color: var(--ns-ink);
  transition: color 0.2s ease;
}
.ns-faq__summary::-webkit-details-marker { display: none; }
.ns-faq__summary:hover { color: var(--ns-orange-text); }
.ns-faq__num {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ns-light-gray);
}
.ns-faq__icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ns-hairline);
  position: relative;
  flex: none;
  transition: all 0.3s ease;
}
.ns-faq__icon::before, .ns-faq__icon::after {
  content: "";
  position: absolute;
  background: var(--ns-ink);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.ns-faq__icon::before { width: 12px; height: 1.5px; }
.ns-faq__icon::after { width: 1.5px; height: 12px; }
.ns-faq__item[open] .ns-faq__icon {
  background: var(--ns-orange);
  border-color: var(--ns-orange);
}
.ns-faq__item[open] .ns-faq__icon::before,
.ns-faq__item[open] .ns-faq__icon::after { background: var(--ns-on-orange); }
.ns-faq__item[open] .ns-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ns-faq__body {
  padding: 0 0 var(--ns-sp-4) 56px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ns-dark-gray);
  max-width: 70ch;
}

@media (max-width: 600px) {
  .ns-faq__summary { font-size: 18px; }
  .ns-faq__body { padding-left: 0; }
}

/* ---------- Inline Note Box ---------- */
.ns-note {
  border-left: 3px solid var(--ns-orange);
  background: var(--ns-orange-soft);
  padding: var(--ns-sp-3) var(--ns-sp-4);
  border-radius: 0 var(--ns-radius-sm) var(--ns-radius-sm) 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ns-anthracite-2);
}
.ns-note__label {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ns-orange-text);
  display: block;
  margin-bottom: 6px;
}

/* ---------- Threat Layers (Security only) ---------- */
.ns-layers {
  display: grid;
  gap: 14px;
}
.ns-layer {
  display: grid;
  grid-template-columns: auto 80px 1fr auto;
  gap: var(--ns-sp-3);
  align-items: center;
  padding: var(--ns-sp-3) var(--ns-sp-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--ns-radius);
  transition: all 0.3s ease;
}
.ns-layer:hover {
  background: var(--ns-orange-a08);
  border-color: var(--ns-orange);
  transform: translateX(6px);
}
.ns-layer__num {
  font-family: var(--ns-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
}
.ns-layer__name {
  font-family: var(--ns-font);
  font-size: 20px;
  font-weight: 420;
  color: var(--ns-white);
}
.ns-layer__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.ns-layer__tool {
  font-family: var(--ns-mono);
  font-size: 12px;
  color: var(--ns-orange);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ns-layer { grid-template-columns: 1fr; gap: 8px; }
  .ns-layer__num { display: none; }
}

/* ---------- Big CTA Block ---------- */
.ns-cta-ed {
  padding: var(--ns-sp-12) 0;
  background: var(--ns-anthracite);
  color: var(--ns-white);
  position: relative;
  overflow: hidden;
}
.ns-cta-ed__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--ns-sp-8);
  align-items: end;
  position: relative;
  z-index: 1;
}
.ns-cta-ed__title {
  font-family: var(--ns-font);
  font-weight: 360;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--ns-white);
  letter-spacing: -0.025em;
}
.ns-cta-ed__title em {
  font-style: italic;
}
.ns-cta-ed__meta {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--ns-sp-2);
}
.ns-cta-ed__side {
  display: flex;
  flex-direction: column;
  gap: var(--ns-sp-3);
}
.ns-cta-ed__side p {
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  line-height: 1.6;
}
.ns-cta-ed__buttons {
  display: flex;
  gap: var(--ns-sp-2);
  flex-wrap: wrap;
}
.ns-cta-ed .ns-btn--primary {
  background: var(--ns-orange);
  border-color: var(--ns-orange);
  color: var(--ns-on-orange);
}
.ns-cta-ed .ns-btn--ghost {
  border-color: rgba(255,255,255,0.4);
  color: var(--ns-white);
}
.ns-cta-ed .ns-btn--ghost:hover {
  background: var(--ns-white);
  color: var(--ns-anthracite);
}
.ns-cta-ed__corner {
  position: absolute;
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.ns-cta-ed__corner--tl { top: 24px; left: 24px; }
.ns-cta-ed__corner--br { bottom: 24px; right: 24px; }

@media (max-width: 991px) {
  .ns-cta-ed__inner { grid-template-columns: 1fr; }
}

/* ---------- Hero Section Overlap Tweaks ---------- */
@media (max-width: 991px) {
  .ns-ed-hero__inner { grid-template-columns: 1fr; gap: var(--ns-sp-6); }
}

/* ---------- Reveal-on-scroll (CSS only, intersection-free) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ns-reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: ns-rise 0.9s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .ns-reveal--d1 { animation-delay: 0.08s; }
  .ns-reveal--d2 { animation-delay: 0.16s; }
  .ns-reveal--d3 { animation-delay: 0.24s; }
  .ns-reveal--d4 { animation-delay: 0.32s; }
  .ns-reveal--d5 { animation-delay: 0.40s; }
}
@keyframes ns-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons - extend ---------- */
.ns-btn--lg {
  padding: 16px 32px;
  font-size: 16px;
}
.ns-btn--arrow::after {
  content: " →";
  display: inline-block;
  transition: transform 0.25s ease;
}
.ns-btn--arrow:hover::after {
  transform: translateX(4px);
}

/* ---------- Util ---------- */
.ns-mt-0 { margin-top: 0; }
.ns-mt-2 { margin-top: var(--ns-sp-2); }
.ns-mt-4 { margin-top: var(--ns-sp-4); }
.ns-mt-6 { margin-top: var(--ns-sp-6); }

/* ============================================================
   Display-Schrift-Strategie (2026-06-22):
   Open Sans = durchgängige Hausschrift (self-hosted, statisch).
   - Hero/Headlines (.ns-display, .ns-display-sm, .ns-stat__num,
     .ns-ed-hero__title): Open Sans, font-weight 500, Italic-em 600.
   - Section-Titel (.ns-sec-head__title, .ns-cta-ed__title): font-weight 500.
   Hinweis: statische Schnitte → font-weight statt font-variation-settings.
   ============================================================ */

/* Hero-Display: Open Sans, einheitlich über alle Headlines */
.ns-display,
.ns-display-sm,
.ns-stat__num,
.ns-tier__name,
.ns-ed-hero__title {
  font-family: var(--ns-font);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.ns-display em,
.ns-display-sm em,
.ns-ed-hero__title em,
.ns-tier__name em,
.ns-stat__num em {
  font-style: italic;
  font-weight: 600;
}

/* Section-Titel + CTA: Open Sans, Hervorhebung kursiv 600 */
.ns-sec-head__title em,
.ns-cta-ed__title em {
  font-style: italic;
  font-weight: 600;
}

.ns-sec-head__title,
.ns-cta-ed__title {
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* =============================================================
   IONOS-REFRESH — produktklare Komponenten (eure Farben/Schriften)
   Branch design/ionos-refresh. Rollback = diesen Block entfernen.
   Vorbild: ionos.de Struktur (Klarheit, Preis-Karten, Trust-Bar,
   Benefit-Icons) — NICHT die Farbwelt (kein Blau/Tuerkis).
   ============================================================= */

/* ---------- Buttons: praesenter, Pill-Variante ---------- */
/* B8: keine Pillenform mehr — gleiche Form wie alle Schaltflächen (8 px) */
.ns-btn--pill { border-radius: var(--ns-radius); }
.ns-btn--xl {
  padding: 18px 38px;
  font-size: 17px;
  font-weight: 700;
}
/* Sekundaer-CTA auf hellem Grund: gefuellt-soft statt nur outline */
.ns-btn--soft {
  background: var(--ns-orange-soft);
  color: var(--ns-ink);
  border-color: transparent;
}
.ns-btn--soft:hover {
  background: var(--ns-orange);
  color: var(--ns-on-orange);
}

/* ---------- Trust-Bar (direkt unter Hero) ---------- */
.ns-trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--ns-hairline);
  border-radius: var(--ns-radius-lg);
  background: var(--ns-white);
  box-shadow: var(--ns-shadow);
  overflow: hidden;
}
.ns-trustbar__item {
  flex: 1 1 0;
  min-width: 150px;
  padding: var(--ns-sp-3) var(--ns-sp-4);
  text-align: center;
  border-right: 1px solid var(--ns-hairline);
}
.ns-trustbar__item:last-child { border-right: 0; }
.ns-trustbar__num {
  font-family: var(--ns-font);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--ns-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ns-trustbar__num em { font-style: normal; color: var(--ns-orange-text); }
.ns-trustbar__label {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  margin-top: 8px;
}
@media (max-width: 767px) {
  .ns-trustbar__item { flex-basis: 50%; border-bottom: 1px solid var(--ns-hairline); }
  .ns-trustbar__item:nth-child(2n) { border-right: 0; }
}

/* ---------- Hero-Visual (rechte Spalte der Index-Hero) ---------- */
.ns-hero-visual {
  background: var(--ns-anthracite);
  color: var(--ns-white);
  border-radius: var(--ns-radius-lg);
  padding: 40px var(--ns-sp-4);
  position: relative;
  overflow: hidden;
  box-shadow: var(--ns-shadow-lg);
}
.ns-hero-visual__eyebrow {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-orange);
  margin-bottom: var(--ns-sp-3);
}
.ns-hero-visual__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 15px;
  color: rgba(255,255,255,0.88);
}
.ns-hero-visual__row:first-of-type { border-top: 0; }
.ns-hero-visual__row svg { width: 20px; height: 20px; flex: none; color: var(--ns-green); }
/* Themenwelt-Einstieg (06.11.2026): Highlights mit Titel + einem Satz */
.ns-einstieg .ns-hero-visual__row { align-items: flex-start; }
.ns-einstieg .ns-hero-visual__row svg { margin-top: 2px; }
.ns-einstieg__text { display: inline-block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.72); }

/* ---------- Preis-/Paket-Karten (IONOS-Raster) ---------- */
.ns-pricegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ns-sp-3);
  align-items: stretch;
}
.ns-pricegrid--2 { grid-template-columns: repeat(2, 1fr); }
.ns-pricegrid--4 { grid-template-columns: repeat(4, 1fr); }
.ns-price-card {
  display: flex;
  flex-direction: column;
  background: var(--ns-white);
  border: 1px solid var(--ns-hairline);
  border-radius: var(--ns-radius-lg);
  padding: var(--ns-sp-4);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ns-price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ns-shadow-lg);
  border-color: var(--ns-orange);
}
.ns-price-card--featured {
  border-color: var(--ns-orange);
  box-shadow: var(--ns-shadow-lg);
}
.ns-price-card__badge {
  position: absolute;
  top: -12px;
  left: var(--ns-sp-4);
  background: var(--ns-orange);
  color: var(--ns-on-orange);
  font-family: var(--ns-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.ns-price-card__name {
  font-family: var(--ns-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ns-ink);
  letter-spacing: -0.015em;
}
.ns-price-card__tag {
  font-size: 14px;
  color: var(--ns-light-gray);
  margin: 6px 0 var(--ns-sp-3);
  min-height: 2.6em;
}
.ns-price-card__price {
  font-family: var(--ns-font);
  font-weight: 600;
  font-size: 38px;
  line-height: 1;
  color: var(--ns-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ns-price-card__price small {
  font-family: var(--ns-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ns-light-gray);
}
/* Nettopreis in Klammern hinter dem Bruttopreis (NET-257, Weg 2) */
.ns-netto,
.ns-price-card__price small.ns-netto {
  font-family: var(--ns-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ns-light-gray);
  white-space: nowrap;
}
/* Bruttopreis klein unter bzw. hinter dem Nettopreis (Oliv 09.11.2026: Webhosting und Microsoft netto groß) */
.ns-brutto {
  font-family: var(--ns-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ns-light-gray);
  white-space: nowrap;
}
.ns-comptable .ns-brutto,
.ns-csp__einzel .ns-brutto,
.ns-csp__summe .ns-brutto { display: block; }
.ns-csp__einzel { text-align: right; }
@media (max-width: 600px) { .ns-csp__einzel { text-align: left; } }
.ns-price-card__ust {
  font-size: 12px;
  color: var(--ns-light-gray);
  margin-top: 4px;
}
.ns-price-card__from {
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ns-light-gray);
  margin-bottom: 6px;
}
.ns-price-card__list {
  list-style: none;
  margin: var(--ns-sp-3) 0 var(--ns-sp-4);
  flex: 1;
}
.ns-price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ns-dark-gray);
  line-height: 1.45;
}
.ns-price-card__list li::before {
  content: "✓";
  color: var(--ns-green);
  font-weight: 700;
  flex: none;
  line-height: 1.45;
}
.ns-price-card .ns-btn { width: 100%; }

@media (max-width: 991px) {
  .ns-pricegrid, .ns-pricegrid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ns-pricegrid, .ns-pricegrid--2, .ns-pricegrid--4 { grid-template-columns: 1fr; }
}

/* ---------- Benefit-Karten mit Icon ---------- */
.ns-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--ns-sp-2);
}
.ns-benefit__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ns-orange-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ns-orange);
}
.ns-benefit__icon svg { width: 26px; height: 26px; }
.ns-benefit__title {
  font-family: var(--ns-font);
  font-weight: 600;
  font-size: 19px;
  color: var(--ns-ink);
  letter-spacing: -0.01em;
}
.ns-benefit__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ns-dark-gray);
}

/* ---------- Index-Hero: Split mit Visual ---------- */
.ns-ed-hero__inner--index {
  grid-template-columns: 1.25fr 0.85fr;
  align-items: center;
}
@media (max-width: 991px) {
  .ns-ed-hero__inner--index { grid-template-columns: 1fr; }
}

/* ---------- Legal-Text (AGB / Datenschutz / Domain-Bedingungen) ---------- */
.ns-legal h2 {
  font-family: var(--ns-font);
  font-size: 21px;
  font-weight: 600;
  color: var(--ns-ink);
  letter-spacing: -0.01em;
  margin: var(--ns-sp-6) 0 var(--ns-sp-2);
  padding-top: var(--ns-sp-3);
  border-top: 1px solid var(--ns-hairline);
}
.ns-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ns-legal h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ns-ink);
  margin: var(--ns-sp-3) 0 var(--ns-sp-1);
}
.ns-legal p {
  margin-bottom: var(--ns-sp-2);
  line-height: 1.7;
  font-size: 15px;
  color: var(--ns-dark-gray);
}
.ns-legal ul, .ns-legal ol { margin: 0 0 var(--ns-sp-2) var(--ns-sp-4); }
.ns-legal li {
  margin-bottom: 8px;
  line-height: 1.65;
  font-size: 15px;
  color: var(--ns-dark-gray);
}
.ns-legal strong { color: var(--ns-ink); font-weight: 600; }

/* Rechtstexte (Impressum, Datenschutz; DE und EN) im selben Container wie die übrigen Seiten,
   linksbündig mit dem Seitenkopf. Fließtext höchstens so breit wie der Inhaltsbereich der
   Bausteinseiten (1120 px), damit die Zeilen lesbar bleiben. Oliv 07.11.2026 */
.ns-legal-container > * { max-width: 1120px; }

/* ---------- Vergleichstabelle (Webhosting-Tarife) ---------- */
.ns-comptable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ns-comptable th, .ns-comptable td {
  padding: 12px var(--ns-sp-2);
  border-bottom: 1px solid var(--ns-hairline);
  text-align: center;
}
.ns-comptable th:first-child, .ns-comptable td:first-child {
  text-align: left;
  font-family: var(--ns-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ns-dark-gray);
}
.ns-comptable thead th {
  font-family: var(--ns-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--ns-ink);
  border-bottom: 2px solid var(--ns-ink);
  text-transform: capitalize;
}
.ns-comptable thead th.is-featured { color: var(--ns-orange-text); border-bottom-color: var(--ns-orange); }
.ns-comptable td { color: var(--ns-ink); font-variant-numeric: tabular-nums; }
.ns-comptable tbody tr:hover { background: var(--ns-orange-soft); }
.ns-comptable .col-featured { background: var(--ns-orange-a05); }
@media (max-width: 767px) {
  /* Mobile: Tabelle horizontal scrollbar statt gequetscht */
  .ns-comptable {
    font-size: 12.5px;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ns-comptable th, .ns-comptable td { padding: 9px 6px; white-space: nowrap; }
  .ns-comptable th:first-child, .ns-comptable td:first-child { white-space: normal; min-width: 130px; }
}

/* ---------- Eignungscheck ---------- */
.ns-check { background: var(--ns-bg-alt); }
.ns-check__head { text-align: center; max-width: 640px; margin: 0 auto var(--ns-sp-5); }
.ns-check__head h2 { margin: var(--ns-sp-1) 0 var(--ns-sp-2); }
.ns-check__head p { color: var(--ns-light-gray); }
.ns-check__form {
  display: flex; flex-wrap: wrap; gap: var(--ns-sp-3);
  align-items: flex-end; justify-content: center;
  max-width: 920px; margin: 0 auto;
}
.ns-check__field {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ns-dark-gray);
  flex: 1 1 200px;
}
.ns-check__form select {
  padding: 11px 14px; font-family: var(--ns-font); font-size: 15px;
  border: 1px solid var(--ns-border-ui); border-radius: var(--ns-radius-sm); background: var(--ns-white);
  font-weight: 400; color: var(--ns-ink);
}
.ns-check__form select:focus { border-color: var(--ns-ink); } /* B6: Ring über :focus-visible (base.css) */
.ns-check__submit { flex: 0 0 auto; }
.ns-check__result {
  max-width: 760px; margin: var(--ns-sp-5) auto 0;
  background: var(--ns-white); border-radius: var(--ns-radius); box-shadow: var(--ns-shadow);
  padding: var(--ns-sp-4);
}
.ns-check__rtitle { font-size: var(--ns-h3); margin: 0 0 var(--ns-sp-3); }
.ns-check__items { list-style: none; margin: 0 0 var(--ns-sp-3); padding: 0; }
.ns-check__items li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-top: 1px solid var(--ns-hairline);
}
.ns-check__items li strong { color: var(--ns-ink); }
.ns-check__items li span { font-size: 14px; color: var(--ns-light-gray); }
.ns-check__note { font-size: 13px; color: var(--ns-light-gray); margin-bottom: var(--ns-sp-3); }
.ns-check__lead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ns-sp-2); margin-top: var(--ns-sp-3); }
.ns-check__lead input[type=text], .ns-check__lead input[type=email] {
  padding: 10px 14px; font-family: var(--ns-font); font-size: 15px;
  border: 1px solid var(--ns-border-ui); border-radius: var(--ns-radius-sm); width: 100%;
}
.ns-check__lead input:focus { border-color: var(--ns-ink); }
.ns-check__privacy { grid-column: 1 / -1; font-size: 13px; color: var(--ns-dark-gray); display: flex; gap: 8px; align-items: flex-start; }
.ns-check__lead button { grid-column: 1 / -1; }
.ns-check__msg { grid-column: 1 / -1; font-size: 14px; margin: 0; }
.ns-check__msg--err { color: var(--ns-error); }
.ns-check__msg--ok { color: var(--ns-success); font-weight: 600; }
@media (max-width: 767px) {
  .ns-check__form { flex-direction: column; align-items: stretch; }
  .ns-check__lead { grid-template-columns: 1fr; }
}


/* =============================================================
   NET-338 — Kontrast und Bedienbarkeit (Befund NET-255, B1/B6/B7/B11)
   Orange ist Fläche, Linie und Zeichen. Als Schrift auf hellem Grund
   nur --ns-orange-text; auf Anthrazit bleibt --ns-orange (6,0:1).
   ============================================================= */

/* B1  Hervorgehobenes Wort in Überschriften: dunkle Schrift auf orangem
       Marker statt orange Schrift (2,6:1). Schrift auf dem Marker 6,0:1. */
.ns-display em,
.ns-display-sm em,
.ns-ed-hero__title em,
.ns-sec-head__title em,
.ns-tier__name em,
.ns-cta-ed__title em {
  color: var(--ns-ink);
  background: linear-gradient(transparent 60%, var(--ns-orange) 60% 94%, transparent 94%);
  padding: 0 0.1em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* B1  Auf dunklem Grund deckt der Marker das ganze Wort, sonst stünde dunkle
       Schrift halb auf Anthrazit. */
.ns-section--ink .ns-display em,
.ns-section--ink .ns-display-sm em,
.ns-section--ink .ns-sec-head__title em,
.ns-section--ink .ns-tier__name em,
.ns-cta-ed .ns-cta-ed__title em,
.ns-cta-ed .ns-display em,
.ns-cta-ed .ns-display-sm em {
  color: var(--ns-on-orange);
  background: var(--ns-orange);
  padding: 0 0.15em;
  margin: 0;
}

/* B1  Orange als Schrift nur auf dunklem Grund (6,0:1 auf --ns-anthracite) */
.ns-section--ink .ns-eyebrow,
.ns-cta-ed .ns-eyebrow,
.ns-hero-visual .ns-eyebrow,
.ns-section--ink .ns-sec-head__num,
.ns-section--ink .ns-process__num,
.ns-section--ink .ns-stat__num em,
.ns-section--ink .ns-note__label,
.ns-section--ink .ns-code-link,
.ns-section--ink a:not(.ns-btn),
.ns-cta-ed a:not(.ns-btn),
.ns-hero-visual a:not(.ns-btn) {
  color: var(--ns-orange);
}
.ns-section--ink .ns-eyebrow--mute,
.ns-cta-ed .ns-eyebrow--mute { color: rgba(255,255,255,0.6); }
.ns-section--ink a:not(.ns-btn):hover,
.ns-cta-ed a:not(.ns-btn):hover,
.ns-hero-visual a:not(.ns-btn):hover { color: var(--ns-white); }

/* B6  Fokusring auf dunklem Grund weiß statt dunkel */
.ns-section--ink :focus-visible,
.ns-cta-ed :focus-visible,
.ns-hero-visual :focus-visible,
.ns-footer :focus-visible {
  outline-color: var(--ns-white);
}
.ns-section--ink .ns-btn:focus-visible,
.ns-cta-ed .ns-btn:focus-visible,
.ns-footer .ns-btn:focus-visible {
  box-shadow: 0 0 0 6px var(--ns-anthracite);
}

/* B7  Preiskarte: der Preis ist die wichtigste Zahl — groß und dunkel,
       Orange als Linie. Steuerangabe (NET-257 Weg 2) unverändert aus preis(). */
.ns-spec-card__row.ns-preis-zeile {
  grid-template-columns: 1fr;
  gap: 4px;
  border-bottom: 3px solid var(--ns-orange);
  padding-bottom: var(--ns-sp-2);
}
.ns-preis-zeile dt {
  font-weight: 600;
  color: var(--ns-ink);
}
.ns-preis-zeile dd.ns-preis {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ns-ink);
  text-align: left;
  letter-spacing: -0.01em;
}
.ns-preis-zeile dd.ns-preis .ns-netto {
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

/* B11 Handy (bis 600 px): Kennzeile enger, Schaltflächen volle Breite */
@media (max-width: 600px) {
  .ns-eyebrow { letter-spacing: 0.08em; font-size: 12px; gap: 8px; }
  .ns-eyebrow::before { width: 16px; }
  .ns-ed-hero__cta-row,
  .ns-cta-ed__buttons { flex-direction: column; align-items: stretch; }
  .ns-ed-hero__cta-row .ns-btn,
  .ns-cta-ed__buttons .ns-btn { width: 100%; text-align: center; }
}


/* ===== NET-447 Server-Konfigurator (/server-konfigurator) =====
   Nur .ns-konf…-Regeln; Farben ausschließlich über Variablen, Fokus über den globalen
   :focus-visible-Ring (base.css). Bei 390 px einspaltig, nichts ragt seitlich über. */
.ns-konf__vorteile { list-style: none; margin: var(--ns-sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ns-sp-1); }
.ns-konf__vorteile li { background: var(--ns-white); border: 1px solid var(--ns-hairline); border-radius: var(--ns-radius); padding: 6px 12px; font-size: 14px; color: var(--ns-dark-gray); }
.ns-konf-sektion { padding-top: var(--ns-sp-4); }
.ns-konf[hidden], .ns-konf [hidden], .ns-konf-anfrage[hidden] { display: none !important; }
.ns-konf, .ns-konf * { box-sizing: border-box; }
.ns-konf__titel { font-size: var(--ns-h3); margin: 0 0 var(--ns-sp-2); }
.ns-konf__pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ns-sp-2); }
.ns-konf__paket,
.ns-konf__wahl-knopf {
  font: inherit; color: var(--ns-ink); text-align: left; cursor: pointer;
  background: var(--ns-white); border: 1px solid var(--ns-border-ui); border-radius: var(--ns-radius);
  padding: 12px 14px; min-width: 0;
}
.ns-konf__paket strong, .ns-konf__wahl-knopf strong { display: block; font-size: 15px; }
.ns-konf__paket span, .ns-konf__wahl-knopf span { display: block; font-size: 13px; color: var(--ns-dark-gray); }
.ns-konf__paket em, .ns-konf__wahl-knopf em { display: block; font-style: normal; font-weight: 600; margin-top: 6px; }
.ns-konf__paket[aria-pressed="true"],
.ns-konf__wahl-knopf[aria-pressed="true"] { border: 2px solid var(--ns-orange); padding: 11px 13px; background: var(--ns-orange-soft); }
.ns-konf__wahl-knopf:disabled { cursor: not-allowed; opacity: 0.55; }
.ns-konf__wahl-knopf--neu { border-style: dashed; }
.ns-konf__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--ns-sp-3); margin-top: var(--ns-sp-3); align-items: start; }
.ns-konf__spalte, .ns-konf__seite { min-width: 0; }
.ns-konf__karte, .ns-konf__preis, .ns-konf__diagramm {
  background: var(--ns-white); border: 1px solid var(--ns-hairline); border-radius: var(--ns-radius-lg);
  padding: var(--ns-sp-3); margin-bottom: var(--ns-sp-3); min-width: 0;
}
.ns-konf__preis { border: 2px solid var(--ns-orange); }
.ns-konf__kopf { font-size: var(--ns-h3); margin: 0 0 var(--ns-sp-1); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ns-konf__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ns-orange); color: var(--ns-on-orange); font-size: 14px; font-weight: 700; }
.ns-konf__unterkopf { margin: var(--ns-sp-3) 0 var(--ns-sp-1); }
.ns-konf__hinweis { font-size: 14px; color: var(--ns-dark-gray); margin: 0 0 var(--ns-sp-2); }
.ns-konf__klein { font-size: 13px; color: var(--ns-dark-gray); margin: var(--ns-sp-1) 0 0; }
.ns-konf__etikett { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.ns-konf__info {
  display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--ns-border-ui); background: var(--ns-white); color: var(--ns-dark-gray);
  font: 700 12px/1 var(--ns-font); cursor: pointer; flex: none;
}
.ns-konf__info[aria-expanded="true"] { border-color: var(--ns-ink); color: var(--ns-ink); }
.ns-konf__erklaerung { flex-basis: 100%; grid-column: 1 / -1; font-size: 14px; color: var(--ns-dark-gray); background: var(--ns-bg-paper); border-radius: var(--ns-radius); padding: 10px 12px; margin: 8px 0 0; }
.ns-konf__reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--ns-sp-1) 0 var(--ns-sp-2); }
.ns-konf__reiter .ns-konf__wahl-knopf { padding: 6px 12px; }
.ns-konf__reiter .ns-konf__wahl-knopf[aria-pressed="true"] { padding: 5px 11px; }
.ns-konf__feldzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.ns-konf__text { font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--ns-border-ui); border-radius: var(--ns-radius-sm); background: var(--ns-white); color: var(--ns-ink); max-width: 100%; }
.ns-konf__zahl { width: 80px; }
.ns-konf__schalter { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-konf__schalter .ns-konf__wahl-knopf { padding: 6px 12px; font-size: 14px; }
.ns-konf__schalter .ns-konf__wahl-knopf[aria-pressed="true"] { padding: 5px 11px; }
.ns-konf__regler { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 190px); align-items: center; gap: 8px 14px; margin: 14px 0; }
.ns-konf__wert { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.ns-konf__wert-menge { display: block; font-weight: 700; }
.ns-konf__wert .ns-konf__angabe { font-size: 13px; }
.ns-konf input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; cursor: pointer;
  background: transparent;
}
.ns-konf input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ns-orange) var(--ns-konf-p, 0%), var(--ns-hairline) var(--ns-konf-p, 0%));
}
.ns-konf input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ns-hairline); }
.ns-konf input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ns-orange); }
.ns-konf input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--ns-white); border: 3px solid var(--ns-orange);
}
.ns-konf input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ns-white); border: 3px solid var(--ns-orange); }
.ns-konf__wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.ns-konf__einrichtung { margin-top: 4px; }
.ns-konf__check { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.ns-konf__check input { width: 18px; height: 18px; accent-color: var(--ns-orange); }
.ns-konf__warnung { background: var(--ns-orange-soft); border-left: 3px solid var(--ns-orange); border-radius: var(--ns-radius-sm); padding: 8px 12px; font-size: 14px; margin: 8px 0; }
.ns-konf__warnung p { margin: 0; }
.ns-konf__knopf-klein { padding: 6px 14px; font-size: 14px; }
.ns-konf__domains { list-style: none; margin: 0; padding: 0; }
.ns-konf__domains li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ns-hairline); font-size: 15px; }
.ns-konf__leer { color: var(--ns-dark-gray); }
.ns-konf__entfernen { font: inherit; font-size: 20px; line-height: 1; background: none; border: 1px solid transparent; border-radius: var(--ns-radius-sm); color: var(--ns-dark-gray); cursor: pointer; padding: 2px 8px; }
.ns-konf__angabe .ns-netto { color: var(--ns-dark-gray); font-weight: 400; }
.ns-konf__ust { font-size: 13px; font-weight: 400; color: var(--ns-dark-gray); }
.ns-konf__vorher { color: var(--ns-dark-gray); text-decoration: line-through; font-size: 14px; min-height: 20px; margin: 0; }
.ns-konf__betrag { margin: 4px 0; }
.ns-konf__betrag .ns-konf__brutto { display: block; font-size: 34px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ns-ink); }
.ns-konf__betrag .ns-netto { display: block; font-size: 14px; }
.ns-konf__rabattleiste { display: flex; gap: 4px; margin: 10px 0 4px; }
.ns-konf__rabattleiste span { flex: 1; height: 6px; border-radius: 3px; background: var(--ns-hairline); }
.ns-konf__rabattleiste span.is-an { background: var(--ns-success); }
.ns-konf__posten { list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; }
.ns-konf__posten li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 5px 0; border-bottom: 1px dotted var(--ns-hairline-strong); font-variant-numeric: tabular-nums; }
.ns-konf__posten li > span:first-child { min-width: 0; }
.ns-konf__posten li .ns-konf__angabe { text-align: right; margin-left: auto; }
.ns-konf__posten li.is-rabatt { color: var(--ns-success); font-weight: 600; }
.ns-konf__posten li.is-summe { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--ns-ink); margin-top: 4px; padding-top: 8px; }
.ns-konf__neben { font-size: 14px; margin: 12px 0; background: var(--ns-bg-paper); border-radius: var(--ns-radius); padding: 8px 12px; }
.ns-konf__neben div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 3px 0; }
.ns-konf__neben dt { font-weight: 400; }
.ns-konf__neben dd { margin: 0; margin-left: auto; text-align: right; font-weight: 600; }
.ns-konf__anfragen { width: 100%; margin-top: var(--ns-sp-1); }
.ns-konf__donutbox { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; }
.ns-konf__donut { width: 140px; height: 140px; }
.ns-konf__donut-grund { stroke: var(--ns-hairline); }
.ns-konf__legende { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ns-konf__legende li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.ns-konf__legende b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.ns-konf__farbe { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex: none; }
.ns-konf__teil--grund { stroke: var(--ns-dark-gray); background: var(--ns-dark-gray); }
.ns-konf__teil--cpu { stroke: var(--ns-orange); background: var(--ns-orange); }
.ns-konf__teil--ram { stroke: var(--ns-orange-text); background: var(--ns-orange-text); }
.ns-konf__teil--disk { stroke: var(--ns-anthracite); background: var(--ns-anthracite); }
.ns-konf__teil--sicherung { stroke: var(--ns-border-ui); background: var(--ns-border-ui); }
.ns-konf__teil--betreuung { stroke: var(--ns-success); background: var(--ns-success); }
.ns-konf__teil--lizenz { stroke: var(--ns-light-gray); background: var(--ns-light-gray); }
.ns-konf__teil--ha { stroke: var(--ns-ink); background: var(--ns-ink); }
.ns-konf__teil--support { stroke: var(--ns-green); background: var(--ns-green); }
.ns-konf__teil--webhosting { stroke: var(--ns-hairline-strong); background: var(--ns-hairline-strong); }
.ns-konf__balken { margin: 0 0 14px; }
.ns-konf__balken-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.ns-konf__balken-kopf > span:first-child { font-weight: 600; }
.ns-konf__balken--eigen .ns-konf__balken-kopf > span:first-child { font-weight: 800; }
.ns-konf__spur { display: flex; height: 16px; margin-top: 4px; background: var(--ns-bg-paper); border-radius: 3px; overflow: hidden; }
.ns-konf__spur-server { background: var(--ns-dark-gray); }
.ns-konf__balken--eigen .ns-konf__spur-server { background: var(--ns-orange); }
.ns-konf__spur-aufwand { background: repeating-linear-gradient(45deg, var(--ns-hairline-strong) 0 3px, var(--ns-paper-2) 3px 6px); }
.ns-konf__legende-balken { font-size: 13px; color: var(--ns-dark-gray); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ns-konf__regler--satz { grid-template-columns: minmax(0, 1fr); }
.ns-konf__regler--satz .ns-konf__wert { text-align: left; }
.ns-konf__form { margin-top: var(--ns-sp-3); }
.ns-konf__meldung { font-size: 15px; margin: var(--ns-sp-2) 0 0; }
.ns-konf__meldung--fehler { color: var(--ns-error); }
.ns-konf__meldung--ok { color: var(--ns-success); font-weight: 600; }
@media (max-width: 1000px) {
  .ns-konf__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ns-konf__regler { grid-template-columns: minmax(0, 1fr) auto; }
  .ns-konf__regler > input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .ns-konf__regler--satz { grid-template-columns: minmax(0, 1fr); }
  .ns-konf__karte, .ns-konf__preis, .ns-konf__diagramm { padding: var(--ns-sp-2); }
  .ns-konf__donutbox { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ns-konf__legende { width: 100%; }
  .ns-konf__betrag .ns-konf__brutto { font-size: 28px; }
}

/* ---------- Managed Backup: Leistungsmerkmale, Ansichten, Rechner (Entwurf 06.11.2026) ---------- */
.ns-mb-merkmale { row-gap: var(--ns-sp-3); }
.ns-mb-merkmal .ns-benefit__title { font-size: 17px; margin: 0; }
.ns-mb-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-sp-4); }
.ns-mb-bild { margin: 0; }
.ns-mb-bild--gross { grid-column: 1 / -1; }
.ns-mb-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--ns-hairline); border-radius: var(--ns-radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); background: var(--ns-white); }
.ns-mb-bild figcaption { font-size: 14px; color: var(--ns-dark-gray); margin-top: var(--ns-sp-1); line-height: 1.5; }
.ns-mb-zusatz { display: block; font-size: 14px; font-weight: 600; color: var(--ns-ink); }
@media (max-width: 760px) {
  .ns-mb-bilder { grid-template-columns: minmax(0, 1fr); }
  .ns-mb-merkmale { row-gap: var(--ns-sp-2); }
}

/* ============================================================
   Microsoft-CSP-Partner und Lizenzbeispiele (Entwurf 07.11.2026, /managed-microsoft-cloud)
   ============================================================ */
.ns-csp__lead { max-width: 760px; margin-top: var(--ns-sp-6); font-size: 17px; line-height: 1.6; }
.ns-csp__punkte { margin-top: var(--ns-sp-6); }
.ns-csp__beispiele { margin-top: var(--ns-sp-6); }
.ns-csp__karte { display: flex; flex-direction: column; }
.ns-csp__posten { list-style: none; margin: var(--ns-sp-3) 0 0; padding: 0; font-size: 14px; }
.ns-csp__posten li {
  display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: var(--ns-sp-3);
  padding: var(--ns-sp-2) 0; border-bottom: 1px solid var(--ns-hairline);
}
.ns-csp__einzel { color: var(--ns-dark-gray); font-variant-numeric: tabular-nums; }
.ns-csp__summe { margin-top: auto; padding-top: var(--ns-sp-3); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ns-csp__hinweis { margin-top: var(--ns-sp-6); font-size: 13px; line-height: 1.6; color: var(--ns-light-gray); max-width: 900px; }
.ns-csp__cta { margin-top: var(--ns-sp-6); }
/* Hero-Liste „Wir bieten Ihnen:“ (Oliv 08.11.2026, /managed-microsoft-cloud) */
.ns-angebot__label { margin: var(--ns-sp-4) 0 var(--ns-sp-2); font-weight: 600; color: var(--ns-dark-gray); }
.ns-angebot { margin: 0 0 var(--ns-sp-4); padding-left: 1.2em; max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--ns-dark-gray); }
.ns-angebot li { margin-bottom: var(--ns-sp-1); }
.ns-angebot__alt { margin: 0 0 var(--ns-sp-4); font-size: 15px; color: var(--ns-dark-gray); }


/* =============================================================
   NET-547 Designkorrekturen (Connies Designprüfung 08.11.2026)
   Nur Gestaltung, kein Inhalt. Rücknahme = diesen Block entfernen und die Vorlagen-Commits zurücksetzen.
   ============================================================= */

/* <main> umschließt jetzt den Seiteninhalt (vorher fehlte er). Frappe setzt <body> auf display:flex;
   main übernimmt dasselbe Spaltenlayout, damit Abstände der Sections unverändert bleiben. */
.ns-main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
}

/* Befund 4: eine Kennzahlenleiste auf allen Seiten (Karte wie auf der Startseite), Zahl bricht nie um */
.ns-trustbar__num { white-space: nowrap; }
.ns-trustbar__zusatz {
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: .75;
  margin-top: 2px;
  text-wrap: balance;
}

/* Befund 5: zwei feste Überschriftenstufen.
   Abschnitt (H2): .ns-sec-head__title, clamp(28px, 3.6vw, 48px), Gewicht 500.
   Karte (H3): 22px, Gewicht 600, Zeilenhöhe 1.3 – für Karten, Fähigkeitenlisten und Ablaufschritte. */
.ns-spec-row__title,
.ns-process__title,
.ns-card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* Frappe-Grundstil gab jeder H3 56 px Abstand nach oben: in Listen sitzt der Titel jetzt bündig mit Nummer
   und Text, in Karten mit festem Abstand zum Symbol und knapp über dem Text. */
.ns-spec-row__title { margin: 0; }
.ns-process__title,
.ns-card__title { margin: var(--ns-sp-3) 0 var(--ns-sp-1); }
.ns-card__title:first-child { margin-top: 0; }
/* Abschnittskopf: Nummer, Titel und Kennzeile auf einer Grundlinie */
.ns-sec-head { align-items: baseline; }
.ns-sec-head__num,
.ns-sec-head__meta { padding-bottom: 0; }

/* Befund 6: Fähigkeitenlisten mit festem Spaltenraster (Nummer / Titel / Text / Tags).
   minmax(0, …) und feste Tag-Spalte: jede Zeile hat dieselben Spaltenkanten. */
@media (min-width: 1200px) {
  .ns-spec-row { grid-template-columns: 80px minmax(0, 1.2fr) minmax(0, 2fr) 220px; }
  .ns-spec-row__tags { justify-content: flex-start; }
}

/* Befund 7: Eignungscheck auf der Inhaltsbreite der übrigen Blöcke, linksbündig wie die Abschnittsköpfe */
.ns-check__head { text-align: left; max-width: 760px; margin: 0 0 var(--ns-sp-4); }
.ns-check__form { justify-content: flex-start; max-width: none; margin: 0; }
.ns-check__form select { min-height: 54px; }
.ns-check__result { max-width: none; margin: var(--ns-sp-4) 0 0; }

/* Spec-Karte (Bausteine, Werbeseiten): Werte linksbündig in fester Spalte statt rechts flatternd */
@media (min-width: 481px) {
  .ns-spec-card__row { grid-template-columns: minmax(0, 11em) minmax(0, 1fr); }
  .ns-spec-card__row dd { text-align: left; }
}

/* Befund 12: Tippflächen auf dem Handy mindestens 44 px (Fußzeile, Brotkrumen, Sprachwahl, Menü) */
@media (max-width: 767px) {
  .ns-footer__links li { margin-bottom: 0; }
  .ns-footer__links a,
  nav.ns-eyebrow a,
  .ns-navbar__menu .ns-navbar__link,
  .ns-navbar__menu .ns-navbar__lang a,
  a.ns-navbar__lang {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ns-navbar__menu { gap: 0; }
}

/* Befund 14: Preis-/Spec-Karte oben auf Werbeseiten auf dem Handy kompakter */
@media (max-width: 767px) {
  .ns-spec-card { padding: var(--ns-sp-3); }
  .ns-spec-card__head { margin-bottom: var(--ns-sp-2); flex-wrap: wrap; gap: 2px var(--ns-sp-2); }
  .ns-spec-card__row { padding: 8px 0; }
  .ns-preis-zeile dd.ns-preis { font-size: 20px; }
}


/* ============================================================
   design-final (09.11.2026): aus NET-549 übernommen
   ============================================================ */

/* Befund 6 (NET-549 d41dd67): Bausteinkarten der Themenwelten – kein Leerraum über dem Titel (wie mobil M8),
   Tag-Zeile am Kartenboden (Karte als Spalte, Tags margin-top: auto) */
.ns-card > .ns-eyebrow + .ns-card__title { margin-top: 0; }
.ns-card--baustein { display: flex; flex-direction: column; align-items: flex-start; }
.ns-card--baustein > .ns-card__tags { margin-top: auto; padding-top: var(--ns-sp-3); }

/* Befund 16 (NET-549 e599686, dac0a33): Nettoangabe auf dunklem Grund heller
   (--ns-netto-dunkel auf --ns-anthracite ca. 6,9:1; wirkt u. a. auf /managed-services, .ns-section--ink) */
.ns-section--ink .ns-netto,
.ns-cta-ed .ns-netto,
.ns-hero-visual .ns-netto { color: var(--ns-netto-dunkel); }

/* Fernwartung (/fernwartung, Oliv 09.11.2026): große Download-Schaltflächen je Betriebssystem, drei Schritte, Hinweise */
.ns-fw { padding-top: var(--ns-sp-4); }
.ns-fw-downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ns-sp-3);
}
.ns-fw-download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--ns-sp-3) var(--ns-sp-4);
  text-align: left;
}
.ns-fw-download__system { font-size: 22px; font-weight: 600; line-height: 1.2; }
.ns-fw-download__zusatz { font-size: 15px; font-weight: 500; }
.ns-fw-download__meta { font-family: var(--ns-mono); font-size: 12px; font-weight: 400; opacity: 0.85; }
.ns-fw-schritte {
  list-style: none;
  counter-reset: fw;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ns-sp-4);
  margin: var(--ns-sp-6) 0 0;
  padding: 0;
}
.ns-fw-schritte li { counter-increment: fw; display: flex; flex-direction: column; gap: var(--ns-sp-1); }
.ns-fw-schritte li::before {
  content: "0" counter(fw);
  font-family: var(--ns-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ns-orange-text);
}
.ns-fw-schritte strong { font-size: 20px; color: var(--ns-ink); }
.ns-fw-infos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ns-sp-4);
  margin-top: var(--ns-sp-8);
  padding-top: var(--ns-sp-6);
  border-top: 1px solid var(--ns-hairline);
}
.ns-fw-info p { margin-bottom: var(--ns-sp-2); }
.ns-fw-info__titel { font-size: 20px; font-weight: 600; margin: 0 0 var(--ns-sp-2); color: var(--ns-ink); }
.ns-fw-telefon { font-size: 22px; font-weight: 600; color: var(--ns-ink); text-decoration: none; }
.ns-fw-server { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--ns-sp-2); margin: 0 0 var(--ns-sp-2); font-size: 14px; }
.ns-fw-server dd { margin: 0; overflow-wrap: anywhere; }
.ns-fw-server code { color: var(--ns-ink); }
@media (max-width: 991px) {
  .ns-fw-schritte,
  .ns-fw-infos { grid-template-columns: minmax(0, 1fr); }
}

/* Untermenü „Leistungen“ (Oliv 09.11.2026: Fernwartung „über Support im Submenü … als Punkt bei Leistungen“).
   Ab 1200 px Aufklappliste bei Hover/Fokus; im Burger-Menü eingerückt immer sichtbar. Der Menüpunkt selbst bleibt
   gleich breit (kein Pfeil), damit das feste Menüraster (Befund 13) nicht wandert. */
.ns-navbar__item--sub { position: relative; }
.ns-navbar__sub { list-style: none; margin: 0; padding: 0; }
.ns-navbar__sub .ns-navbar__link { display: block; }
@media (min-width: 1200px) {
  .ns-navbar__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--ns-sp-2));
    min-width: 220px;
    padding: var(--ns-sp-2);
    background: var(--ns-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: var(--ns-radius);
    z-index: 110;
  }
  .ns-navbar__item--sub:hover .ns-navbar__sub,
  .ns-navbar__item--sub:focus-within .ns-navbar__sub { display: block; }
  .ns-navbar__item--sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
  .ns-navbar__sub li + li { margin-top: var(--ns-sp-1); }
}
@media (max-width: 1199px) {
  .ns-navbar__item--sub { display: flex; flex-direction: column; align-items: center; }
  .ns-navbar__sub { display: flex; flex-direction: column; align-items: center; gap: var(--ns-sp-1); margin-top: var(--ns-sp-1); }
  .ns-navbar__sub .ns-navbar__link { font-size: 15px; color: var(--ns-dark-gray); }
}

/* ============================================================
   Mobil-Korrekturen (07.11.2026, Oliv: „Das Design ist bei Mobilansicht noch zerschossen“).
   Nur innerhalb von Media-Queries: Desktop bleibt unverändert. Test: tests/test_css_mobil.py
   ============================================================ */

/* M1 Nummernlisten B.xx/L.xx (Baustein-Seiten „Ihr Nutzen“, „Leistungsumfang“).
   Ursache: Die Beschreibung trägt im Template style="grid-column: 2 / -1". Bis 480 px hatte die Zeile nur
   eine Spalte; das Inline-Style schlug die Mobilregel „grid-column: 1“, legte eine implizite zweite Spalte
   an und drückte die Nummernspalte auf 0 px – die Nummer lief über den Textanfang.
   Jetzt: feste schmale Nummernspalte, Nummer und erste Textzeile auf einer Grundlinie, kompakte Abstände. */
@media (max-width: 480px) {
  .ns-spec-row:not(:has(> .ns-spec-row__title)) {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: var(--ns-sp-1);
    row-gap: 0;
    align-items: baseline;
    padding: var(--ns-sp-2) 0;
  }
  .ns-spec-row:not(:has(> .ns-spec-row__title)) > .ns-spec-row__id { padding-top: 0; white-space: nowrap; }
  .ns-spec-row:not(:has(> .ns-spec-row__title)) > .ns-spec-row__desc { grid-column: 2; padding-top: 0; margin: 0; }
  .ns-spec-row:not(:has(> .ns-spec-row__title)):hover { padding-left: 0; }
}
/* Browser ohne :has(): Nummer als eigene Zeile über dem Text statt Überlappung */
@supports not selector(:has(*)) {
  @media (max-width: 480px) {
    .ns-spec-row__desc[style] { grid-column: 1 / -1 !important; }
  }
}

/* M2 Kennzahlen „22 Jahre“, „< 10 Min.“ brechen nicht mehr um (Startseite, /managed-services, /it-security,
   /cloud-hosting); Kachel der Kennzahlenleiste ohne Mindestbreite 150 px (bei 360 px abgeschnitten). */
@media (max-width: 767px) {
  .ns-trustbar__item { min-width: 0; padding: var(--ns-sp-3) var(--ns-sp-1); }
  .ns-trustbar__num { font-size: clamp(22px, 6.6vw, 30px); white-space: nowrap; }
  .ns-trustbar__label { letter-spacing: 0.06em; overflow-wrap: anywhere; }
  .ns-stats { padding: var(--ns-sp-4) 0; }
  .ns-stat__num { font-size: clamp(24px, 7.4vw, 48px); white-space: nowrap; }
  .ns-stat__label { letter-spacing: 0.08em; overflow-wrap: anywhere; }
}

/* M3 Brotkrumen-Zeile bricht um statt rechts abgeschnitten zu werden (Baustein-Seiten, bis 600 px) */
@media (max-width: 600px) {
  nav.ns-eyebrow { display: flex; flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
}

/* M4 Spec-Sheet-Karte: Bezeichnung über dem Wert statt schmaler, rechtsbündiger Wertspalte */
@media (max-width: 480px) {
  .ns-spec-card__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ns-spec-card__row dd { text-align: left; overflow-wrap: anywhere; }
}

/* M5 Preiskarten /managed-services: 1fr = minmax(auto, 1fr) weitete die Spalte auf 401 px (35 px abgeschnitten) */
@media (max-width: 991px) {
  .ns-pricegrid, .ns-pricegrid--2, .ns-pricegrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-price-card { min-width: 0; }
}
@media (max-width: 600px) {
  .ns-pricegrid, .ns-pricegrid--2, .ns-pricegrid--4 { grid-template-columns: minmax(0, 1fr); }
  /* Stufenzeilen (Inline-Flex „Stufe … Preis“, Preis nowrap): Preis bricht unter die Stufe statt die Karte zu weiten */
  .ns-price-card div[style*="space-between"] { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
}

/* M6 Rechner (Server-Konfigurator, Backup, 3CX): Kästchen und Text bleiben in einer Zeile,
   das „i“ steht rechts daneben statt in einer eigenen Zeile */
@media (max-width: 620px) {
  .ns-konf__check { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .ns-konf__check > input { margin: 3px 0 0; }
  .ns-konf__check > span { grid-column: 2; }
  .ns-konf__feldzeile { align-items: flex-start; }
  .ns-konf__feldzeile > .ns-konf__check { flex: 1 1 calc(100% - 50px); min-width: 0; }
  .ns-konf__feldzeile > .ns-konf__erklaerung,
  .ns-konf__feldzeile > .ns-konf__klein { flex-basis: 100%; }
  .ns-konf__feldzeile > .ns-konf__klein:empty { display: none; }
}

/* M7 Lange Wörter in Seitentiteln („Standardanwendungen“ bei 360 px 23 px zu breit).
   NET-547 Befund 12 (Oliv 09.11.2026 „3 ja“): keine automatische Silbentrennung mehr („mitein-ander“), nur
   gesetzte Trennstellen (&shy;, z. B. „Standard-anwendungen“); overflow-wrap bleibt als Netz gegen Überlauf. */
@media (max-width: 480px) {
  .ns-display, .ns-ed-hero__title, .ns-sec-head__title { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
}

/* M8 Bausteinkarten (Themenwelten): kein Leerraum zwischen Code-Zeile und Titel */
@media (max-width: 600px) {
  .ns-card > .ns-eyebrow + .ns-card__title { margin-top: 0; }
}

/* M9 Rechner-Auswahl mit ungerader Kachelzahl (Laufzeit, Support: 3 Kacheln im 2er-Raster) – letzte Kachel volle Breite statt Lücke */
@media (max-width: 620px) {
  .ns-konf__wahl > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}