/* ==========================================================================
   1aHosting.ch – Startseite (Neuaufbau 2026)
   Farbwerte gemäss S:\Vorlagen\Logos\1aHosting\2026\FARBWERTE.txt (Fassung 1.1)
   Radius-System: Container 16px (gross 24px), Bedienelemente Pill (999px)
   ========================================================================== */

/* ---- Schrift: Outfit (Variable, selbst gehostet, OFL 1.1) ---- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../assets/fonts/outfit-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design-Tokens ---- */
:root {
  /* Erlaubt es, auf Schluesselwoerter wie auto zu animieren. Ohne das laesst
     sich ein aufklappender Bereich nicht weich oeffnen. */
  interpolate-size: allow-keywords;

  --bg: #faf8f5;
  --surface: #ffffff;
  --ink: #191512;
  --muted: #6b635c;
  --line: #e7e1da;
  --line-strong: #d8cfc2;
  --bg2: #f3ede4;
  /* WordPress-Blau aus dem Markenzeichen, nur fuer die Karte
     WordPress Pro. Im Dunkelmodus aufgehellt, sonst verschwindet
     der Rahmen im dunklen Grund. */
  --wp-blau: #21759b;
  /* Der Ring beim Pulsieren und der helle Grund der gefundenen Karte.
     Zuerst ausgeschrieben, weiter unten aus --wp-blau gemischt - so gibt
     es eine Quelle, und ein Browser ohne color-mix faellt trotzdem nicht
     auf einen leeren Wert zurueck. Das Gleiche fuer das Orange. */
  --wp-ring: rgba(33, 117, 155, 0.5);
  --wp-ring-aus: rgba(33, 117, 155, 0);
  --wp-flaeche: #edf4f7;
  --accent: #ff6c2c;
  /* Kein zweiter Markenton: die Rueckmeldung beim Ueberfahren einer
     bereits orangen Flaeche. Gaebe man ihr dasselbe Orange, geschaehe
     nichts Sichtbares. Sonst gilt ueberall --accent aus dem Logo. */
  --accent-druck: #e4551b;
  --accent-wash: rgba(255, 108, 44, 0.08);
  --accent-ring: rgba(255, 108, 44, 0.5);
  --accent-ring-aus: rgba(255, 108, 44, 0);
  /* Am 23.08.2026 von #1c8a4c auf #187a43 gedunkelt: Auf Weiss
     kam der alte Wert auf 4.38 zu 1, noetig sind 4.5. Jetzt 5.38. */
  --ok: #187a43;

  /* Fixe Werte für das dunkle Rechenzentrum-Panel (in beiden Modi dunkel) */
  --panel-bg: #14100e;
  --panel-surface: #1d1815;
  --panel-ink: #fcfaf8;
  --panel-muted: #9a938c;
  --panel-line: #2e2723;

  --r-card: 16px;
  --r-panel: 24px;
  --r-ctrl: 10px;
  --r-chip: 8px;

  --shadow-sm: 0 2px 10px -2px rgba(25, 21, 18, 0.08);
  --shadow-md: 0 16px 40px -16px rgba(25, 21, 18, 0.16);
  --shadow-lg: 0 28px 64px -24px rgba(25, 21, 18, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------
     SCHRIFT: fixe Teilung nach Rolle. Es gibt genau diese acht Rollen.
     Nie eine Zahl direkt schreiben, immer die Rolle waehlen.
     Wer meint, eine neue Groesse zu brauchen, hat die Rolle nicht gefunden.
     ------------------------------------------------------------------ */

  /* Ueberschriften */
  --schrift-titel: clamp(1.875rem, 4vw, 3.25rem);      /* 30 bis 52, h1, eine je Seite */
  --schrift-abschnitt: clamp(1.375rem, 3.6vw, 2.625rem); /* 22 bis 42, h2 */
  --schrift-untertitel: 1.375rem;                      /* 22, h3 und Kartentitel */
  --schrift-zwischentitel: 1.125rem;                   /* 18, kleine Titel und Vorspann */

  /* Fliesstext */
  --schrift-text: 1rem;                                /* 16, alles was man liest */
  /* Ausserhalb der Textteilung: der Seitenrahmen. Nur der Zusatz neben dem
     Logo und die unterste Zeile der Fusszeile. Sonst nirgends. */
  --schrift-rand: 0.8125rem;                           /* 13 */

  /* Zahlen, die als Zahl wirken sollen, nicht als Text */
  --schrift-zahl-gross: 2.625rem;                      /* 42, der Preis */
  --schrift-zahl: 1.875rem;                            /* 30, Kennzahlen und Telefon */

  --sec-lg: clamp(4rem, 7vw, 6rem);
  --sec-md: clamp(3rem, 5vw, 4.5rem);
  --sec-sm: clamp(2.25rem, 4vw, 3.25rem);
}

@media (prefers-color-scheme: dark) {
  :focus-visible,
  a.hero-badge:focus-visible {
    outline-color: var(--accent);
  }

  :root {
    --bg: #14100e;
    --surface: #1d1815;
    --ink: #fcfaf8;
    --muted: #9a938c;
    --line: #2e2723;
    --line-strong: #3a322b;
    --bg2: #181310;
    --wp-blau: #4ea8d8;
    --wp-ring: rgba(78, 168, 216, 0.5);
    --wp-ring-aus: rgba(78, 168, 216, 0);
    /* Dieselbe Mischung waere auf dunklem Grund kaum zu sehen, darum ein
       hoeherer Anteil. Die Farbe bleibt dieselbe Quelle. */
    --wp-flaeche: #273538;
    --accent-wash: rgba(255, 108, 44, 0.1);
    --ok: #4cc07d;
    --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 40px -16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.6);
  }}

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

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--schrift-text);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: var(--schrift-titel);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--schrift-abschnitt);
}

h3 {
  font-size: var(--schrift-untertitel);
}

p {
  margin: 0 0 1em;
}

/* Der Fokusring braucht 3:1 gegen den Grund (WCAG 1.4.11). Markenorange
   erreicht auf hellem Grund nur 2.67:1, der dunklere Ton 3.53:1.
   Im dunklen Modus ist es umgekehrt, dort traegt das hellere Orange. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--accent);
  color: #ffffff;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border-radius: 0 0 12px 0;
  box-shadow: var(--shadow-md);
}

.skip-link:focus {
  left: 0;
}

.container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 24px;
}

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

/* Optische Berichtigung fuer Abschnitte, die mit einem freien Titel
   beginnen, seit 24.08.2026.

   Gemessen auf 1440 px: Ein Kasten setzt seine Kante bei 73 px, ein freier
   Titel seine Buchstaben bei 69 px. Rechnerisch dasselbe. Trotzdem wirkt
   die Leere ueber dem Titel groesser, weil sie sich links und rechts von
   der kurzen Textzeile fortsetzt, waehrend die Kastenkante sie ueber die
   volle Breite abschneidet.

   Vier Fuenftel der Polsterung gleichen das aus. Der Wert schrumpft mit,
   die Berichtigung bleibt darum auf jeder Breite im Verhaeltnis gleich:
   72 auf 58 px am breiten Schirm, 48 auf 38 px auf dem Telefon. */
main > section.section:has(> .container > .section-head:first-child),
main > section.section:has(> .container > .seiten-kopf:first-child) {
  padding-top: calc(var(--sec-md) * 0.8);
}

/* Ein Abstand fuer alle Abschnitte, seit 24.08.2026.
   Vorher gab es drei Groessen: .section 72 px, .section-sm 52 und
   .section-lg 96. Welcher Abschnitt welche bekam, folgte keiner Regel, und
   sichtbar wurde daraus ein Abstand zwischen zwei Abschnitten von 104, 124,
   144 oder 168 px, je nachdem, welche zwei Klassen aufeinandertrafen. Allein
   die Startseite zeigte fuenf verschiedene Werte.

   Jetzt tragen alle Inhaltsabschnitte dieselbe Klasse und der Abstand ist
   ueberall 144 px. Die Tokens --sec-lg und --sec-sm bleiben stehen; wer eine
   Ausnahme braucht, kann daraus wieder eine Klasse bauen. Dann aber mit
   einer Regel, die sich erklaeren laesst.

   Zwei Stellen weichen bewusst ab: der Hero, dessen Polsterung im Container
   sitzt und dem das Faktenband folgt, und der Kopf der Rechtstexte, der
   direkt ueber seinem eigenen Text steht. */

.section-alt {
  background: var(--bg2);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lead {
  font-size: var(--schrift-zwischentitel);
  color: var(--muted);
  max-width: 62ch;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head.center .lead {
  margin-inline: auto;
}

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

.small-note {
  font-size: var(--schrift-text);
  color: var(--muted);
}

.small-note a {
  color: var(--ink);
  font-weight: 500;
}

/* ---- Markenname: das "1a" traegt die Markenfarbe wie im Logo ---- */
.marke i {
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .marke i {
    color: var(--accent);
  }}

/* ---- Schweizer Flagge (Vertrauensmarker) ---- */
.flag {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #da291c;
  position: relative;
  flex: none;
}

.flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#fff, #fff) center / 8px 2.5px no-repeat,
    linear-gradient(#fff, #fff) center / 2.5px 8px no-repeat;
}

/* ---- Buttons (Pill) ---- */
a,
button,
summary {
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 108, 44, 0.18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-ctrl);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: var(--schrift-text);
  letter-spacing: -0.01em;
  min-height: 47px;
  padding: 0.5em 1.35em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--accent-druck);
  box-shadow: 0 10px 24px -10px rgba(255, 108, 44, 0.55);
  transform: translateY(-1px);
}

/* Deckend, nicht durchsichtig. Der Knopf steht auf hellen wie getoenten Flaechen
   und faehrt teils ueber den Inhalt mit, darunter darf nichts durchscheinen. */
.btn-outline {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--surface);
}

/* Beim Ueberfahren aendert sich die Farbe, nicht die Deckung.
   #fff3ee ist genau das, was --accent-wash ueber Weiss ergibt: 8 Prozent
   Orange auf --surface, ausgerechnet und festgeschrieben. Gleiche Farbe
   wie vorher, nur ohne Durchblick. Die Tinte steht darauf bei 16.7 zu 1. */
.btn-outline:hover {
  border-color: var(--accent);
  background: #fff3ee;
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  /* 10 Prozent Orange auf dem dunklen --surface #1d1815 */
  .btn-outline:hover {
    background: #342017;
  }}

.btn-kundencenter {
  background: var(--ink);
  color: #fcfaf8;
}

.btn-kundencenter:hover {
  background: #2e2723;
  transform: translateY(-1px);
}

@media (prefers-color-scheme: dark) {
  .btn-kundencenter {
    background: #2e2723;
    border-color: var(--line-strong);
  }
  .btn-kundencenter:hover {
    background: #3a322b;
  }}

.btn-lg {
  font-size: var(--schrift-text);
  padding: 0.5em 1.8em;
}

.btn-block {
  width: 100%;
}

/* ---- Header ---- */
/* Band und Kopf stecken im Behaelter .kopfbereich, der als Ganzes klebt.
   Frueher klebten beide einzeln, wobei der Kopf seinen Abstand aus einer
   von JavaScript gesetzten Variablen bezog. Blieb das Skript aus, sass der
   Kopf unter dem Band und war verdeckt. Der Behaelter braucht kein Skript. */
.site-header {
  position: relative;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* Der Weichzeichner liegt bewusst auf einem Pseudoelement: auf dem Header
   selbst wuerde er das Mobilmenue (position: fixed) in den Header einsperren. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(12px)) {
  .site-header::before {
    background: var(--bg);
  }}

.site-header {
  border-bottom-color: var(--line);
}

.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 80px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.logo img {
  height: 36px;
  width: auto;
}

/* Zusatz beim Logo: die Jahreszahl traegt das Vertrauen */
.logo-seit {
  margin-left: 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--line-strong);
  font-size: var(--schrift-rand);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
}

.logo-seit b {
  display: block;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--ink);
}

/* Auf schmalen Geraeten kompakter, aber sichtbar */
@media (max-width: 599px) {
  .logo img {
    height: 30px;
  }

  .logo-seit {
    margin-left: 0.6rem;
    padding-left: 0.6rem;
    font-size: var(--schrift-rand);
    line-height: 1.3;
  }

  .logo-seit b {
    font-size: var(--schrift-rand);
  }}

.logo-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .logo-light {
    display: none;
  }
  .logo-dark {
    display: block;
  }}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-weight: 500;
  font-size: var(--schrift-text);
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.nav-link:hover {
  color: var(--accent);
}

.nav-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}

/* Aufklapper sind keine Ziele. Am Desktop oeffnet das Ueberfahren das
   Untermenue, deshalb bleibt der Mauszeiger ein Pfeil. Unter 1080 px wird
   getippt, dort ist die Hand richtig. */
@media (min-width: 1080px) {
  .nav-item > .nav-link {
    cursor: default;
  }}

/* ---- Untermenues ---- */
.nav-item {
  position: relative;
}

.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 232px;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s var(--ease);
}

/* Unsichtbare Bruecke, damit der Zeiger die Luecke queren kann */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub,
.nav-item.open .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-item.open .nav-link svg {
  transform: rotate(180deg);
}

.nav-sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 10px;
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav-sub a:hover {
  background: var(--accent-wash);
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .nav-sub a:hover {
    color: var(--accent);
  }}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

/* Das Schliesszeichen im Menue ist zu, solange das Menue zu ist. Bis zum
   26.08.2026 stand dafuer style="display:none" im Merkmal - auf jeder der
   26 Seiten. Als Klasse braucht die Sicherheitsregel der Seite kein
   unsafe-inline fuer Stile.

   Zwei Bestandteile im Selektor, nicht einer: .nav-toggle svg setzt
   weiter unten display: block. Mit blossem .icon-close blieb das Kreuz
   beim Laden sichtbar - beide Zeichen nebeneinander. Erst der erste
   Klick raeumte es auf, weil das Skript dann ein eigenes Merkmal setzt.
   Beim Bauen faellt das nicht auf, weil man immer erst klickt. */
.nav-toggle .icon-close {
  display: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
  display: block;
}

.nav-cta-mobile {
  display: none;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: clip;
}

/* ==================================================================
   MARKENZEICHEN IM KOPFBEREICH
   Das grosse "1a" oben rechts, auf jeder Seite.

   Es haengt an <main>, nicht am Hero: Nur die Startseite hat einen
   Hero, alle uebrigen 25 Seiten beginnen mit einem Abschnitt, einem
   Rechtskopf oder einem Beitrag. <main> ist das einzige Element, das
   auf allen Seiten an derselben Stelle steht, also oben am Inhalt.
   So braucht keine einzige Seite eine zusaetzliche Klasse, und jede
   kuenftige Seite bekommt das Zeichen von selbst.

   z-index: -1 statt 0, damit das Zeichen unter dem Inhalt liegt.
   <main> traegt bewusst kein z-index: Ein Stapelkontext dort wuerde
   das Multiplizieren abschneiden, das Zeichen wuerde als Farbflaeche
   statt als Einfaerbung erscheinen.

   Der Abriss unten besorgt der Inhalt selbst: Der naechste Abschnitt
   mit eigenem Hintergrund deckt das Zeichen ab. Auf der Startseite
   ist das das weisse Faktenband bei 515 px, auf den Unterseiten der
   erste getoente Abschnitt. Wo darunter nichts Deckendes kommt, etwa
   auf den Rechtsseiten, laeuft die Maske weich aus.
   ================================================================== */
main {
  position: relative;
  /* nur seitwaerts, sonst klemmt es klebende Elemente im Inhalt ab */
  overflow-x: clip;
}

main::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -70px;
  width: 780px;
  height: 654px;
  background: url("../assets/marke/1a-orange.svg") no-repeat center / contain;
  opacity: 0.11;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
  /* laeuft nach unten aus, damit an der Kante kein Abriss steht */
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}

@media (max-width: 979px) {
  main::after {
    width: 540px;
    height: 453px;
    right: -60px;
  }}

@media (max-width: 639px) {
  main::after {
    width: 380px;
    height: 319px;
    right: -50px;
  }}

@media (prefers-color-scheme: dark) {
  main::after {
    mix-blend-mode: screen;
  }}

@media print {
  main::after {
    display: none;
  }}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Der Umbruch trennt die beiden Titelhaelften. Titel tragen kein Satzzeichen,
   also ist dieser Umbruch die einzige Trennung und gilt auf jeder Breite. */
h1 .h1-break {
  display: block;
}

h1 .accent {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  h1 .accent {
    color: var(--accent);
  }}

.hero-lead {
  font-size: var(--schrift-zwischentitel);
  color: var(--muted);
  max-width: 46ch;
  margin-block: 1.25rem 2rem;
}

/* Knopfreihe am Abschnittsende, mittig. Gleiche Abstaende wie im Hero. */
.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* Im Panel stehen die Knoepfe links unter dem Text, nicht mittig. */
.knopf-reihe-links {
  justify-content: flex-start;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Status-Karte rechts */
.hero-visual {
  position: relative;
}

.status-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-md);
}

.status-head {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.35rem;
}

.status-head strong {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.35rem 1.5rem;
}

.status-stat b {
  display: block;
  font-size: var(--schrift-zahl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.status-stat span {
  font-size: var(--schrift-text);
  color: var(--muted);
}

.status-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--schrift-text);
  color: var(--muted);
}

.status-foot svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}

.hero-badge {
  position: absolute;
  top: -18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  padding: 0.5em 1.1em;
  font-size: var(--schrift-text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.hero-badge svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Das Etikett ist ganz anklickbar, aber ohne Verweis-Unterstreichung */
a.hero-badge {
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}

a.hero-badge:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

a.hero-badge:hover .info-hinweis {
  color: var(--accent);
}

a.hero-badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Fakten-Band ---- */
.fact-band {
  border-block: 1px solid var(--line);
  background: var(--surface);
}

.fact-band .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
  padding-block: 1.4rem;
}

/* Vier Spalten erst ab 1280 px. Gemessen am 23.08.2026: Bei vier Spalten
   bleiben je 265 px bei einem 1220 px breiten Fenster, und davon gehen
   noch 32 px fuer Trennstrich und Abstand ab. "DDoS-Schutz und Firewall"
   passt darin nicht mehr, alle vier Zellen werden zweizeilig und das Band
   waechst von 72 auf 98 px.

   Ab 1240 px ginge es knapp auf, ab 1280 px mit Luft. Die Luft ist es
   wert: Ein Wort mehr in einem der Eintraege, und der knappe Wert kippt
   wieder.

   Zweispaltig steht das Paar als Gruppe in der Mitte, nicht je ein Eintrag
   fuer sich in seiner halben Breite: So beginnen die Eintraege einer
   Spalte an derselben Stelle und die Symbole bilden eine Linie. Einzeln
   zentriert wichen sie um 13 px voneinander ab, weil die Eintraege
   verschieden lang sind. */
@media (max-width: 1279.98px) {
  .fact-band .container {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: 3rem;
  }}

.fact {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--schrift-text);
  font-weight: 500;
}

/* ---- Die Garantie schmal im Faktenband ------------------------------
   Auf breitem Bildschirm steht die Garantie als Abzeichen oben rechts an
   der Statuskarte. Schmal drueckt sie dort gegen die Karte, deshalb
   wandert sie hier ans Band und das Abzeichen oben verschwindet.

   Der Eintrag steht bewusst an erster Stelle: Die Garantie ist das
   staerkste Versprechen der Seite, sie soll nicht hinter SSL und Firewall
   verschwinden.

   Zwei Elemente statt einem, weil CSS ein Element nicht von einem
   Elternteil in einen anderen verschieben kann.
   -------------------------------------------------------------------- */
.fact-garantie {
  display: none;
  color: inherit;
  text-decoration: none;
}

.fact-garantie:hover,
.fact-garantie:focus-visible {
  color: var(--accent);
}

@media (max-width: 639px) {
  .hero-badge {
    display: none;
  }

  .fact-garantie {
    display: flex;
  }}

.fact svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex: none;
}

@media (min-width: 1280px) {
  /* Die Beschriftungen stehen mittig in ihrer Spalte. Dafuer faellt die
     Spaltenluecke weg, und jede Spalte polstert selbst - links wie rechts
     gleich viel. Der Trennstrich sitzt damit genau auf der Spaltengrenze
     und hat auf beiden Seiten 16 px Luft, wo vorher 32 px links und 0 px
     rechts standen. Gemessen am 24.08.2026 bei 1440 px: Spalte 330 statt
     294 px, also mehr Platz fuer die Beschriftung als zuvor. */
  .fact-band .container {
    column-gap: 0;
  }

  .fact {
    justify-content: center;
    padding-inline: 1rem;
  }

  .fact + .fact {
    border-left: 1px solid var(--line);
  }

  /* Links vom ersten Eintrag stand ein Strich zu viel. Die Garantie ist das
     erste Kind des Bandes und hier ausgeblendet; als Geschwister zaehlt sie
     trotzdem, also traf die Regel darueber auch den ersten sichtbaren
     Eintrag. Gefunden am 24.08.2026. */
  .fact-garantie + .fact {
    border-left: 0;
  }}

/* ---- Abstaende, die frueher im HTML standen -------------------------
   Acht Stellen trugen ihren Abstand als style-Attribut. Das wirkte, stand
   aber ausserhalb des Stilblatts und damit ausserhalb der Schriftteilung
   und der Pruefskripte. Die Werte sind unveraendert uebernommen.
   -------------------------------------------------------------------- */

/* Fussnote unter dem Preisraster: Sie darf ueber die Lesebreite hinaus,
   weil sie unter den Karten steht und nicht in einer Textspalte. */
.small-note.preis-fussnote {
  margin-top: 1.5rem;
  max-width: none;
  text-align: center;
}

/* Nachsatz am Abschnittsende, etwas mehr Luft als ein Absatz */
.small-note.abschnitt-nachsatz {
  margin-top: 1.75rem;
}

/* Die Kennzahlenreihe oben auf der Infrastruktur-Seite steht vor dem
   Fliesstext und braucht Abstand nach unten */
.dc-stats-oben {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Markenhinweis unter der Gegenueberstellung */
.pk-hinweis.marken-hinweis {
  margin-top: 1rem;
}

/* Knopfreihe im Fliesstext statt am Abschnittsende: linksbuendig */
.knopf-reihe.knopf-reihe-links {
  justify-content: flex-start;
  margin-top: 0.5rem;
}

/* Auf der WordPress-Seite stehen die Karten oben buendig statt gestreckt.
   Zwei Klassen im Selektor, weil .price-grid weiter unten align-items:
   stretch setzt und bei gleicher Staerke die spaetere Regel gewaenne. */
.price-grid.price-grid-oben {
  align-items: start;
}

/* Wo color-mix verstanden wird, kommen Ring und Flaeche aus einer
   einzigen Quelle: --wp-blau beziehungsweise --accent. Wer eine der
   beiden Farben aendert, aendert alles auf einmal. Die ausgeschriebenen
   Werte oben sind der Rueckfall fuer alles Aeltere. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --accent-ring: color-mix(in srgb, var(--accent) 50%, transparent);
    --accent-ring-aus: color-mix(in srgb, var(--accent) 0%, transparent);
    --wp-ring: color-mix(in srgb, var(--wp-blau) 50%, transparent);
    --wp-ring-aus: color-mix(in srgb, var(--wp-blau) 0%, transparent);
    --wp-flaeche: color-mix(in srgb, var(--wp-blau) 8%, var(--surface));
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --wp-flaeche: color-mix(in srgb, var(--wp-blau) 20%, var(--surface));
    }}}

/* ---- Produktefinder -------------------------------------------------
   Steht ueber der Preisliste und fuehrt in zwei bis drei Fragen zu einem
   Paket. Er reicht von der Mitte der ersten Preiskarte bis zur Mitte der
   letzten - gemessen am 24.08.2026 sind das 969 px bei 1440.

   Zugeklappt, nicht offen: Die Preisliste ist die Hauptsache, der Finder
   das Angebot fuer den, der sich nicht entscheiden kann. Gemessen am
   24.08.2026 waere er offen 260 px hoch gewesen und haette die erste
   Preiskarte auf einem Telefon aus dem Bild geschoben. Zu sind es 62 px.

   <details> statt eines eigenen Aufklappers: Der Browser kann das selbst,
   mit Tastatur, mit Vorleseprogramm und ohne eine Zeile Skript.

   Ohne JavaScript bleibt er ganz ausgeblendet. Deshalb die eigene Regel
   fuer [hidden]: Ein display darunter wuerde das Merkmal ueberstimmen.
   -------------------------------------------------------------------- */
.finder[hidden] {
  display: none;
}

/* Oranger Rahmen wie an den Preiskarten: Der Finder steht ueber ihnen und
   gehoert zur selben Familie. Ein grauer Rahmen haette ihn wie einen
   Hinweiskasten aussehen lassen.

   Ein Strich stark, wie Starter Pro. Der zweite, innen liegende Rahmen
   von Home Pro bleibt dem Bestseller vorbehalten; der Finder faellt
   ueber den pulsierenden Ring auf, nicht ueber die Dicke. */
/* Von der Mitte der ersten Karte bis zur Mitte der letzten. Bei vier
   Spalten ist eine Karte ein Viertel des Rasters abzueglich der Luecken;
   die Strecke von Mitte zu Mitte ist darum das Raster minus eine Karte,
   also drei Viertel davon plus eine viertel Luecke. Die Luecke misst
   20 px, macht 75 Prozent plus 15 px. Gemessen bei 1440: 969 px, die
   Kanten liegen auf 0 px genau auf den beiden Kartenmitten.

   Erst ab 1079.02 px, weil das Raster genau dort auf vier Spalten geht.
   Darunter stehen die Karten zu zweit oder einzeln, dann gibt es keine
   zwei mittleren mehr und der Finder nimmt die ganze Breite. Die zwei
   Nachkommastellen sind kein Zierrat: Bei einem Bildschirm mit
   gebrochenem Punkteverhaeltnis faellt eine ganze Zahl in die Luecke
   zwischen den beiden Regeln. */
@media (min-width: 1079.02px) {
  /* Zugeklappt steht der Kasten ueber Home Pro und Business Pro: von der
     linken Kante der zweiten Karte bis zur rechten der dritten. Bei vier
     gleichen Spalten ist das die halbe Rasterbreite abzueglich einer
     halben Luecke, also 50 Prozent minus 10 px. Gemessen bei 1440:
     626 px, die Kanten liegen auf 0 px genau auf den beiden Karten.

     Offen dann die Strecke von Mitte zu Mitte, wie bisher. */
  .finder {
    max-width: calc(50% - 10px);
  }

  .finder[open] {
    max-width: calc(75% + 15px);
  }

  /* Ein Wimpernschlag im zugeklappten Mass, damit es einen Ausgangswert
     zum Ueberblenden gibt - sonst springt der Kasten beim ersten Klick.
     Das Skript nimmt die Klasse nach zwei Bildern wieder weg. */
  .finder[open].finder-faltet,
  .finder.finder-schliesst {
    max-width: calc(50% - 10px);
  }}

/* Der Kasten ist sein eigener Massstab: Wie die Antworten stehen, haengt
   von seiner Breite ab, nicht von der des Fensters. Er ist mal halb so
   breit wie das Raster, mal so breit wie dieses - eine Fensterabfrage
   muesste beide Faelle nachrechnen und ginge beim naechsten Umbau schief. */
.finder {
  container-type: inline-size;
  container-name: finder;
  margin: 0 auto 2.5rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

/* ---- Aufklappen in die Breite --------------------------------------
   Beim Oeffnen mit Gummi: Die Kurve schiesst 9.8 Prozent ueber das Ziel
   hinaus - bei 1440 sind das 34 px - und federt zurueck. Beim Schliessen
   ohne: Das Unterschwingen zeigte nur eine Breite, die es nicht gibt,
   und hielt den Blick fest, waehrend der Besucher schon weiterlas.

   Breite und Hoehe sind zwei getrennte Uebergaenge auf zwei Elementen.
   Die Hoehe laeuft ueber grid-template-rows von 0fr auf 1fr; das ist der
   einzige Weg, eine unbekannte Hoehe zu ueberblenden, ohne sie vorher in
   Pixeln zu kennen.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .finder {
    transition: max-width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .finder.finder-schliesst {
    transition: max-width 0.4s var(--ease);
  }

  .finder-falte {
    transition: grid-template-rows 0.4s var(--ease);
  }}

.finder-falte {
  display: grid;
  grid-template-rows: 0fr;
}

.finder[open] .finder-falte {
  grid-template-rows: 1fr;
}

.finder[open].finder-faltet .finder-falte,
.finder.finder-schliesst .finder-falte {
  grid-template-rows: 0fr;
}

.finder-falte > div {
  overflow: hidden;
}

/* Solange sich der Kasten bewegt, stehen die Antworten nebeneinander -
   auch wenn er dafuer noch zu schmal ist. Ohne diese Regel kippte die
   Reihe mitten in der Bewegung von untereinander auf nebeneinander: Die
   mittlere Antwort verlor in einem Bild 502 px Breite und sprang 78 px
   nach oben. Gemeldet am 25.08.2026, gemessen und behoben.

   Das Skript setzt die Klasse nur, wenn der Kasten am Ende auch wirklich
   breiter als 820 px wird, und nimmt sie danach wieder weg - dann
   entscheidet wieder die Behaelterabfrage. */
.finder.finder-breit .finder-optionen {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.finder-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  /* Das voreingestellte Dreieck faellt weg, der Pfeil rechts ersetzt es. */
  list-style: none;
}

.finder-kopf::-webkit-details-marker {
  display: none;
}

.finder-titel {
  flex: 1 1 auto;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  color: var(--ink);
}

.finder-hinweis {
  flex: none;
  font-size: var(--schrift-text);
  color: var(--muted);
}

/* Eine gefuellte Scheibe in der Markenfarbe, 34 px. Vorher stand hier
   ein blosser grauer Winkel von 20 px - der sah aus wie eine Verzierung
   und nicht wie etwas, das man anfassen kann. Auf dem Telefon faellt der
   Hinweistext daneben ohnehin weg, dort trug er die Erkennbarkeit ganz
   allein.

   Gefuellt und nicht nur umrandet: Es ist dieselbe Sprache wie
   "Jetzt bestellen" auf den Preiskarten, die daneben stehen. */
.finder-pfeilknopf {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s var(--ease);
}

.finder-pfeil {
  width: 18px;
  height: 18px;
}

/* Auf dem Telefon nimmt der Hinweis dem Titel die Breite weg: gemessen am
   24.08.2026 bei 375 px brach der Titel auf vier Zeilen um, der Kopf war
   152 px hoch. Die blosse Aufforderung faellt darum weg, der Pfeil sagt
   dasselbe. Ein gefundenes Paket bleibt stehen, das ist eine Auskunft und
   keine Aufforderung. */
@media (max-width: 639px) {
  .finder-hinweis[data-stand="aufforderung"],
  .finder-hinweis[data-stand="offen"] {
    display: none;
  }

  /* Steht ein Ergebnis da, bekommt es eine eigene Zeile unter dem Titel.
     Nebeneinander blieben dem Titel 110 px, er brach auf vier Zeilen um
     und der Kopf wuchs auf 181 px. Untereinander sind es 119 px.

     Schmalerer Rand als auf dem Schreibtisch: Die Scheibe rechts ist
     34 px breit statt der 20 des frueheren Pfeils, und dem Titel fehlten
     dadurch genau 14 px auf eine Zeile - gemessen bei 375 px braucht er
     242 und hatte 228. Der Kopf war deshalb 93 statt 64 px hoch. Die
     14 px kommen aus dem Innenabstand und der Luecke. */
  .finder-kopf {
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 1.1rem;
  }

  /* Ohne diese Zeile verlangt der Titel die Breite seines laengsten
     Wortzugs, und der Pfeil rutscht auf eine eigene Zeile: gemessen 127
     statt 95 px. Mit Basis 0 nimmt der Titel, was uebrig bleibt. */
  .finder-titel {
    flex: 1 1 0;
    min-width: 0;
  }

  .finder-pfeilknopf {
    order: 1;
  }

  /* Unter 400 px eine Nummer kleiner. Bei 375 blieben dem Titel sonst nur
     zwei Pixel Reserve auf eine Zeile - das kippt beim naechsten
     Schriftschnitt. Mit 30 px sind es sechs. */
  @media (max-width: 399.98px) {
    .finder-pfeilknopf {
      width: 30px;
      height: 30px;
    }

    .finder-pfeil {
      width: 16px;
      height: 16px;
    }

    /* Bei 360 px - einer haeufigen Breite auf Android - fehlten dem Titel
       noch neun Pixel auf eine Zeile. Sie kommen aus der Luecke, dem
       Innenabstand und einer Spur weniger Laufweite. Die Schriftgroesse
       bleibt unberuehrt, nur die Buchstaben ruecken enger zusammen -
       derselbe Kniff, den die Ueberschriften der Website mit -0.018em
       ohnehin verwenden. */
    .finder-kopf {
      gap: 0.45rem;
      padding: 1.1rem 0.95rem;
    }

    .finder-titel {
      letter-spacing: -0.012em;
    }}

  .finder-hinweis {
    order: 2;
    flex-basis: 100%;
  }}

.finder[open] .finder-pfeilknopf {
  transform: rotate(180deg);
}

.finder[open].finder-faltet .finder-pfeilknopf,
.finder.finder-schliesst .finder-pfeilknopf {
  transform: none;
}

/* Der Pfeil in der Scheibe sackt alle 2.4 Sekunden kurz nach unten und
   kommt zurueck - ein Stupser in die Richtung, in die sich der Kasten
   oeffnet. Er laeuft im selben Takt wie der pulsierende Rahmen, damit
   beides als ein Herzschlag gelesen wird und nicht als zwei Uhren.

   Vorher glimmte der Pfeil von Grau nach Orange. Auf einer orangen
   Scheibe waere der weisse Pfeil dabei verschwunden.

   Nur zugeklappt: Ist der Kasten offen, hat das Zeichen seine Arbeit
   getan und ein weiterzappelnder Pfeil waere nur noch Unruhe.

   Nur transform, keine Farben - eine Bildfolge mit Farben aus Variablen
   ueberblendet Chrome 130 nicht, siehe pruefe-bildfolgen.py. */
@keyframes finder-stupsen {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }

  70% {
    transform: translateY(3.5px);
  }

  85% {
    transform: translateY(0);
  }}

/* Der Rahmen pulsiert im selben Takt wie der Pfeil: ein Ring, der nach
   aussen laeuft und dabei verblasst. Der Pfeil allein war zu leise, er
   ist nur 20 px gross; der Kasten ist 820 px breit und faellt auf.
   Der Ring waechst auf 10 px - genug, um gesehen zu werden, zu wenig,
   um an die Preiskarten zu stossen. */
@keyframes finder-pulsieren {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 108, 44, 0.5),
      0 2px 10px -2px rgba(25, 21, 18, 0.08);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 108, 44, 0),
      0 2px 10px -2px rgba(25, 21, 18, 0.08);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 108, 44, 0),
      0 2px 10px -2px rgba(25, 21, 18, 0.08);
  }}

/* Wer Bewegung abgestellt hat, bekommt den Ring ruhend statt gar nicht.
   Gemeldet am 24.08.2026: In Chrome war nichts zu sehen, auf dem Telefon
   schon - der Rechner hatte die Animationseffekte aus. Das Zeichen soll
   auch dann da sein, es soll sich nur nicht bewegen. */
@media (prefers-reduced-motion: reduce) {
  .finder:not([open]) {
    box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-sm);
  }

  .price-grid.finder-hebt .price-card.finder-marke {
    box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-lg);
  }

  .price-grid.finder-hebt .price-card.pk-wordpress.finder-marke {
    box-shadow: 0 0 0 4px var(--wp-ring), var(--shadow-lg);
  }}

@media (prefers-reduced-motion: no-preference) {
  .finder:not([open]) {
    animation: finder-pulsieren 2.4s ease-out infinite;
  }

  .finder:not([open]) .finder-pfeil {
    animation: finder-stupsen 2.4s ease-in-out infinite;
  }

  /* Beim Ueberfahren hoert der Stupser auf: Der Besucher hat den Knopf
     gefunden, ab da soll er ruhig unter dem Zeiger liegen. */
  .finder-kopf:hover .finder-pfeil {
    animation: none;
  }}

.finder-kopf:hover .finder-hinweis {
  color: var(--accent);
}

.finder-kopf:hover .finder-pfeilknopf {
  background: var(--accent-druck);
}

.finder-buehne {
  padding: 0 1.5rem 1.5rem;
}

.finder-schritt {
  margin: 0 0 0.35rem;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.finder-frage {
  margin: 0 0 1.1rem;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  line-height: 1.3;
}

/* Frage und Ergebnisname bekommen beim Weiterklicken den Fokus, damit
   Vorleseprogramme den neuen Stand ansagen. Ein Rahmen darum waere
   irrefuehrend, es sind keine Bedienelemente. */
.finder-frage:focus,
.finder-name:focus {
  outline: none;
}

/* Zwei Antworten nebeneinander, die letzte allein ueber beide Spalten.

   Gemessen am 24.08.2026 bei 1440 px, laengste Frage, Kasten 626 px:

     untereinander              494 px, Kaesten 576 px breit
     zwei Spalten               505 px, die dritte haengt als halbe Zeile
     zwei Spalten, letzte breit 453 px

   Die dritte Antwort traegt zwei Zeilen Zusatz und braucht die Breite;
   in einer 282-px-Spalte wuerde sie 162 px hoch und riss die ganze Reihe
   mit. Ueber beide Spalten sind es 111 px.

   Ein Raster macht alle Zellen einer Reihe gleich hoch. Dass «Eine
   einzige» dadurch so hoch ist wie die Antwort daneben, ist gewollt:
   Nebeneinander sollen die Kaesten gleich aussehen. */
.finder-optionen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

/* Alle Antworten auf einer Linie, gleich breit, egal wie viele es sind -
   dafuer sorgt der Spaltenfluss, nicht eine feste Spaltenzahl. Kommt
   spaeter eine vierte Antwort dazu, reiht sie sich von selbst ein.

   Erst ab 820 px Kastenbreite. Darunter blieben je Antwort weniger als
   250 px, und die zweizeiligen Zusaetze brachen auf vier Zeilen um;
   gemessen am 24.08.2026 waren die Kaesten dann schmaler als hoch. Da
   stehen sie besser untereinander. */
@container finder (min-width: 820px) {
  .finder-optionen {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }}

.finder-option {
  font: inherit;
  font-size: var(--schrift-text);
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctrl);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

/* Die Antwort selbst, und darunter die Zahlen, um die es bei ihr geht.
   Vorher standen die Zahlen in einem Satz ueber den Antworten; wer sich
   entscheidet, musste sie sich merken. Jetzt stehen sie da, wo man sie
   braucht. Beide Zeilen in der Textgroesse, unterschieden sind sie durch
   Gewicht und Farbe - eine kleinere Groesse gaebe es in der Teilung der
   Website nur fuer den Seitenrahmen. */
.finder-option b {
  display: block;
  font-weight: 600;
}

.finder-option span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
}

.finder-option:hover,
.finder-option:focus-visible {
  border-color: var(--accent);
  background: #fff3ee;
}

.finder-option:hover span,
.finder-option:focus-visible span {
  color: var(--ink);
}

/* Eine Antwort kann rechts oben ein Info-Zeichen tragen, das auf die
   zugehoerige Seite fuehrt. Es liegt neben dem Knopf, nicht in ihm: Ein
   Verweis in einem Knopf ist nicht erlaubt und waere nicht bedienbar.
   Die Huelle ist ein Raster, damit der Knopf die volle Hoehe der Zelle
   fuellt wie die Antworten ohne Zeichen daneben. */
.finder-wahl {
  position: relative;
  display: grid;
}

.finder-wahl .finder-option {
  padding-right: 3rem;
}

.finder-info {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44 px, damit ein Finger das Zeichen trifft. Zu sehen sind nur die
     20 px des Zeichens, der Kreis erscheint erst beim Ueberfahren. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
}

.finder-info:hover,
.finder-info:focus-visible {
  color: var(--accent);
  background: #fff3ee;
}

.finder-info svg {
  width: 20px;
  height: 20px;
}

@media (prefers-color-scheme: dark) {
  .finder-info:hover,
  .finder-info:focus-visible {
    background: #342017;
  }}

/* Das Ergebnis bekommt einen eigenen Rahmen: Es ist die Antwort, nicht
   die naechste Frage, und soll auch so aussehen. */
.finder-ergebnis {
  padding: 1.1rem 1.25rem;
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--r-ctrl);
}

/* Traegt die gefundene Preiskarte eine eigene Farbe, uebernimmt der
   Ergebnisrahmen sie. Welche Farbe das ist, sagt die Karte selbst ueber
   data-farbe; im Stilbogen steht darum kein Paketname, und ein kuenftiges
   Paket bringt seine Farbe einfach mit. */
.finder-ergebnis[data-farbe="wp"] {
  background: var(--wp-flaeche);
  border-color: var(--wp-blau);
}

.finder-name {
  margin: 0 0 0.3rem;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
}

/* Nicht in Markenorange: Auf Weiss kaeme die Zeile auf 2.83 zu 1, und die
   Preiskarte darunter setzt ihren Preis ebenfalls in --ink. Das Orange
   bleibt dem Ring um die gefundene Karte vorbehalten. */
.finder-daten {
  margin: 0 0 0.6rem;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--ink);
}

.finder-grund {
  margin: 0;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.finder-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.2rem;
  margin-top: 0.7rem;
}

/* Bei der ersten Frage gibt es weder Zurueck noch Von vorne. */
.finder-fuss:empty {
  display: none;
}

/* Die Polsterung ist kein Zierrat, sie macht das Ziel fuer den Finger
   gross genug: gemessen am 24.08.2026 waren die beiden Knoepfe 26 px hoch,
   empfohlen sind 44. Mit der Polsterung sind es 45. Der Aussenabstand der
   Fussreihe darueber ist im Gegenzug kleiner, damit die Reihe optisch an
   derselben Stelle bleibt. */
.finder-knopf {
  font: inherit;
  font-size: var(--schrift-text);
  padding: 0.6rem 0;
  background: none;
  border: 0;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.finder-knopf:hover,
.finder-knopf:focus-visible {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  .finder-option:hover,
  .finder-option:focus-visible {
    background: #342017;
  }}

/* Im Dunkelmodus gelten andere Schatten und ein helleres Blau. Weil in
   einer Bildfolge keine Variablen stehen duerfen, bekommt sie hier eine
   eigene Fassung; gleichnamige @keyframes in einer Medienabfrage
   ueberschreiben die ausserhalb. */
@media (prefers-color-scheme: dark) {
  @keyframes finder-pulsieren {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 108, 44, 0.5),
        0 2px 10px -2px rgba(0, 0, 0, 0.4);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(255, 108, 44, 0),
        0 2px 10px -2px rgba(0, 0, 0, 0.4);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(255, 108, 44, 0),
        0 2px 10px -2px rgba(0, 0, 0, 0.4);
    }}

  @keyframes finder-marke-pulsieren {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 108, 44, 0.5),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(255, 108, 44, 0),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(255, 108, 44, 0),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }}

  @keyframes finder-marke-pulsieren-wp {
    0% {
      box-shadow: 0 0 0 0 rgba(78, 168, 216, 0.5),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(78, 168, 216, 0),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(78, 168, 216, 0),
        0 28px 64px -24px rgba(0, 0, 0, 0.6);
    }}}

/* ---- Sponsoring ----------------------------------------------------
   Kachel ueber die volle Breite als Abschluss des Bento-Rasters. Die
   sechs anderen stehen als zwei Reihen zu dritt; eine siebte in span-4
   stuende allein und saehe aus wie ein Versehen.

   Erlaubnis des Vereins liegt seit dem 25.08.2026 vor.
   -------------------------------------------------------------------- */
.bento-cell.span-12 {
  grid-column: span 12;
}

/* Text links, Mannschaftsfoto rechts, beide gleich breit.

   align-items: start, nicht center: Das Foto ist hoeher als der Text
   daneben. Mittig ausgerichtet waere der Textblock nach unten gerutscht
   und das Herz haette in der Kachel geschwebt statt oben links zu sitzen.
   So beginnen beide Spalten auf derselben Linie, und das Herz steht dort,
   wo es hingehoert.

   Unter 900 px stehen sie untereinander, Text zuerst - wer auf dem Telefon
   liest, soll nicht erst an einem Bild vorbeiscrollen. */
.sponsor-kachel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 899px) {
  .sponsor-kachel {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }}

.sponsor-bild {
  margin: 0;
}

/* Die Abmessungen stehen im Verweis, damit der Platz von Anfang an
   reserviert ist und beim Nachladen nichts verrutscht. Hier wird nur die
   Breite gefuehrt, die Hoehe folgt dem Seitenverhaeltnis. */
.sponsor-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-ctrl);
}

.sponsor-bild figcaption {
  margin-top: 0.5rem;
  font-size: var(--schrift-text);
  color: var(--muted);
  text-align: center;
}

/* Auch das Foto fuehrt auf die Vereinsseite. Der Verweis traegt keine
   eigene Farbe und keinen Unterstrich - das Bild ist die Flaeche, und ein
   blauer Rahmen darum saehe nach Versehen aus. */
.sponsor-bild a {
  display: block;
  border-radius: var(--r-ctrl);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sponsor-bild a:hover,
.sponsor-bild a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Der Anfeuerungsruf steht direkt unter dem Text.

   Im Vereinsrot: Auf Weiss kommt es auf 4.99 zu 1 und haelt damit die
   Grenze von 4.5 fuer gewoehnliche Schrift ein - anders als das
   Markenorange, das dafuer zu hell ist.

   Zwei Klassen im Selektor, weil .bento-cell p die Absaetze der Kachel
   grau setzt und sonst gewinnt: gleiche Staerke, aber weiter oben. */
.bento-cell .sponsor-ruf {
  margin: 0.9rem 0 0;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #d23030;
}

/* Im Dunkelmodus reicht das Vereinsrot nicht: Auf dem Kachelgrund
   #1d1815 kommt #d23030 auf 3.52 zu 1 und verfehlt die Grenze von 4.5.
   Gemessen am 26.08.2026 beim Durchgang durch alle 21 Seiten - es war
   der einzige Fund. #ea5f5f ist dasselbe Rot, nur heller, und kommt auf
   5.28 zu 1. */
@media (prefers-color-scheme: dark) {
  .bento-cell .sponsor-ruf {
    color: #ea5f5f;
  }}

/* Das Logo steht oben links, wo die anderen Kacheln ihr Symbol tragen.
   Es ist die einzige Kachel, in der es nicht um 1aHosting geht - dort
   gehoert das Zeichen des Vereins hin und nicht unser Herz.
   Der Aussenabstand nach unten ist derselbe wie bei .bento-icon, damit
   die Kachel im Raster nicht aus der Reihe faellt. */
.sponsoren {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 0.9rem;
}

/* Vorgabe des Vereins: weisses Logo auf dem Vereinsrot, das sind die
   Mannschaftsfarben. Deshalb liegt das Rot hier auf der Flaeche und
   nicht im SVG - so bekommt das Logo Luft und die Ecken passen zum
   uebrigen Raster. Das Rot steht darum nur an dieser einen Stelle. */
.sponsor-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  background: #d23030;
  border-radius: 10px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.sponsor-marke:hover,
.sponsor-marke:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sponsor-marke img {
  display: block;
  height: 46px;
  width: auto;
}

/* ---- Werkzeug-Akkordeon ---- */

/* name= macht die Bereiche gegenseitig ausschliessend: oeffnet einer, schliesst
   der andere. Das kann der Browser selbst, dafuer braucht es kein Skript. */
.wz-akkordeon {
  max-width: 900px;
  margin-inline: auto;
}

.wz-akkordeon details {
  border-bottom: 1px solid var(--line);
}

/* Der Bereichsname ist ein h3, damit die Gliederung nicht von h2 auf h4 springt.
   Die Ueberschrift sitzt im summary und traegt dessen Aussehen. */
.faq.wz-akkordeon summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.35rem 0;
  transition: color 0.25s var(--ease);
}

.faq.wz-akkordeon summary h3 {
  margin: 0;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faq.wz-akkordeon summary:hover {
  color: var(--accent);
}

/* Feiner Winkel statt Feld: dreht sich beim Oeffnen um die eigene Mitte.
   Doppelte Klasse, weil .faq summary::after dieselbe Spezifitaet hat und
   weiter unten in dieser Datei steht. */
.faq.wz-akkordeon summary::after {
  content: "";
  position: static;
  margin-left: auto;
  width: 11px;
  height: 11px;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.45s var(--ease);
}

.faq.wz-akkordeon details[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

/* Die Hoehe fuehrt das Skript, siehe js/home.js. Der Weg ueber
   ::details-content waere schoener, laesst sich aber nicht animieren:
   der Browser kennt den Selektor, startet darauf jedoch keinen Uebergang.
   Geprueft mit block-size und mit height, beides ohne Wirkung. */
.wz-akkordeon .wz-huelle {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .wz-akkordeon .wz-huelle {
    transition: height 0.42s var(--ease);
  }

  .wz-inhalt {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  }

  .wz-akkordeon details[open] .wz-inhalt {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
  }}

.wz-inhalt {
  padding-bottom: 1.75rem;
}

/* Free links, Pro rechts. Flaechen ohne Rahmen, die Farbe traegt die Trennung. */
.wz-zwei {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.wz-zwei.wz-eine {
  grid-template-columns: 1fr;
}

.wz-spalte {
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: var(--r-panel);
}

.wz-spalte h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  font-size: var(--schrift-text);
  font-weight: 600;
}

/* Punkt statt Rahmen: ordnet die Spalte zu, ohne eine Kante zu ziehen */
.wz-spalte h4::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.wz-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Die Werkzeuge als Plaettchen: kompakter und ruhiger als eine Liste mit Punkten */
.wz-spalte li {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--schrift-text);
  line-height: 1.4;
}

.wz-spalte-beide {
  background: var(--bg2);
}

.wz-spalte-beide h4::before {
  background: var(--ok);
}

.wz-spalte-pro {
  background: var(--accent-wash);
}

.wz-spalte-pro h4::before {
  background: var(--accent);
}

.wz-spalte-pro h4 {
  color: var(--accent);
}

/* Wertzeilen bleiben untereinander, dort steht je Zeile ein Wert */
.wz-werte ul {
  display: grid;
  gap: 0;
}

.wz-werte li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
}

.wz-werte li:last-child {
  border-bottom: 0;
}

.wz-werte b {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.wz-teil-mark {
  margin-left: 0.4rem;
  font-size: var(--schrift-text);
  color: var(--muted);
  white-space: nowrap;
}

.wz-zahl {
  display: inline-block;
  margin-left: 0.1rem;
  padding: 0.1em 0.5em;
  border-radius: var(--r-chip);
  background: var(--bg2);
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 639px) {
  .wz-zwei {
    grid-template-columns: 1fr;
  }

  .wz-werte li {
    flex-wrap: wrap;
  }}

/* ---- Rechtstexte ---- */

/* Spamschutz aus der Cookie-Richtlinie: In der E-Mail-Adresse steckt ein
   Koederteil, den nur Sammelprogramme lesen. Wird er sichtbar, steht dort
   eine falsche Adresse. Die Auszeichnung stammt aus dem Original. */
.cmplz-fmail-domain {
  display: none;
}

/* Cookie-Angaben als Beschreibungsliste */
.cookie-liste {
  margin: 0 0 1.25rem;
}

.cookie-liste dt {
  color: var(--muted);
}

.cookie-liste dd {
  margin: 0 0 0.5rem;
}

/* Lange Fliesstexte brauchen eine schmalere Spalte als das uebrige Raster,
   sonst wandert das Auge beim Zeilenwechsel zu weit. */
.recht-inhalt .container {
  max-width: 760px;
}

/* Lange Adressen duerfen umbrechen ----------------------------------
   In den Rechtstexten stehen Adressen ohne Trennstelle. Gemessen am
   23.08.2026 auf 320 px lief die laengste 134 px aus der Spalte heraus
   und war dort abgeschnitten, weil main seitwaerts klemmt.

   anywhere statt break-word: break-word bricht ein langes Wort erst,
   wenn es allein auf der Zeile steht, anywhere schon vorher. Bei einer
   Adresse mitten im Satz ist das der Unterschied zwischen lesbar und
   abgeschnitten. Am Wortlaut aendert sich nichts.
   ------------------------------------------------------------------ */
.recht-inhalt p,
.recht-inhalt li,
.recht-inhalt td {
  overflow-wrap: anywhere;
}

.recht-inhalt {
  padding-top: 0;
}

.recht-block {
  padding-block: 2.25rem;
  border-top: 1px solid var(--line);
}

.recht-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.recht-block h2 {
  margin-bottom: 1.25rem;
}

/* Die Nummer eines Unterabschnitts steht ueber dem Absatz, nicht davor:
   im Original beginnt jeder Punkt mit seiner Nummer auf eigener Zeile. */
.recht-text h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: var(--schrift-text);
  font-weight: 700;
  color: var(--ink);
}

.recht-text h3:first-child {
  margin-top: 0;
}

.recht-text p {
  margin: 0 0 0.9rem;
  line-height: 1.7;
}

.recht-text p:last-child {
  margin-bottom: 0;
}

.recht-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.recht-text a:hover {
  color: var(--accent);
}

.recht-kopf .container {
  max-width: 760px;
}

/* ---- Preiskarten ---- */
.price-grid {
  display: grid;
  /* minmax(0,...) statt 1fr: sonst darf eine Spalte mit langem Inhalt
     ueber ihren Anteil hinauswachsen und die Karten werden ungleich breit. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  padding-top: 14px;
}

/* Nebenspalte im Preisraster: Karte links in Normalbreite, Text daneben.
   Bricht mit dem Raster zusammen um. */
.pg-neben {
  grid-column: span 3;
  align-self: start;
}

/* Sobald das Raster nicht mehr vier Spalten hat, kann die Nebenspalte keine
   drei mehr ueberspannen. Die Grenze muss deshalb dieselbe sein wie beim
   Raster: 1079 px.

   Vorher stand hier 979. Zwischen 980 und 1079 px verlangte die Nebenspalte
   drei Spalten, vorhanden waren zwei; sie rutschte damit unter die Karte,
   und rechts daneben blieb eine leere Flaeche. Genau der Bereich, in dem ein
   Tablet hochkant steht. Gemessen am 24.08.2026 auf der WordPress-Seite. */
@media (max-width: 1079px) {
  .pg-neben {
    grid-column: auto;
  }}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* Der Akzentrahmen liegt innen, damit alle Karten dieselbe Geometrie behalten */
.price-card.featured {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-md);
}

/* WordPress Pro traegt das Blau des WordPress-Zeichens, damit die Karte
   auch ohne Lesen als das andere Angebot erkennbar ist. Home Pro behaelt
   seinen kraeftigeren Rahmen als Bestseller. */
.price-card.pk-wordpress {
  border-color: var(--wp-blau);
}

/* Das Ergebnis des Produktefinders.

   Kein Ring und kein staerkerer Rahmen: Alle Preiskarten tragen schon
   einen orangen Rahmen, mehr Orange daneben ist kein Unterschied. Ein
   Versuch am 24.08.2026 mit einem 4 px starken Ring bei 35 Prozent
   Deckung war neben dem eigenen Rahmen der Karte nicht auszumachen.

   Darum umgekehrt: Der Rest tritt zurueck. Die gefundene Karte bleibt,
   wie sie ist, hebt sich um 6 px und bekommt den hellen Orangeton, den
   der helle Knopf beim Ueberfahren schon benutzt.

   Eine zurueckgetretene Karte ist nicht abgeschaltet. Wer sie mit der
   Maus beruehrt oder mit der Tastatur erreicht, holt sie zurueck. */
.price-grid.finder-hebt .price-card {
  opacity: 0.4;
}

.price-grid.finder-hebt .price-card:hover,
.price-grid.finder-hebt .price-card:focus-within {
  opacity: 1;
}

.price-grid.finder-hebt .price-card.finder-marke {
  opacity: 1;
  background: #fff3ee;
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Derselbe Ring wie am Finder oben: gleiche Farbe, gleiche 10 px, gleiche
   2.4 Sekunden. Der Finder ruft damit nach dem Besucher, die gefundene
   Karte antwortet im selben Takt.

   Eigene Bildfolge, weil die Karte einen anderen Schatten traegt: Sie ist
   angehoben und braucht den grossen, der Finder liegt flach und hat den
   kleinen. Nur der Ring ist gleich. */
@keyframes finder-marke-pulsieren {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 108, 44, 0.5),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 108, 44, 0),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 108, 44, 0),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }}

@media (prefers-reduced-motion: no-preference) {
  .price-grid.finder-hebt .price-card.finder-marke {
    animation: finder-marke-pulsieren 2.4s ease-out infinite;
  }}

/* WordPress Pro traegt sein Blau auch im Ring und im Grund. Der blaue
   Rahmen der Karte ist eine bewusste Entscheidung - sie soll auch ohne
   Lesen als das andere Angebot erkennbar sein. Ein oranger Ring um einen
   blauen Rahmen widerspraeche dem. */
@keyframes finder-marke-pulsieren-wp {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 117, 155, 0.5),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(33, 117, 155, 0),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(33, 117, 155, 0),
      0 28px 64px -24px rgba(25, 21, 18, 0.22);
  }}

.price-grid.finder-hebt .price-card.pk-wordpress.finder-marke {
  background: var(--wp-flaeche);
}

/* Auf der WordPress-Flaeche reicht der gewoehnliche Randtext im
   Dunkelmodus nicht: --wp-flaeche ist dort rgb(39, 53, 60), --muted
   #9a938c kommt darauf auf 4.17 zu 1 und verfehlt die Grenze von 4.5.
   Gemessen am 26.08.2026. #aea79f ist derselbe Grauton, nur heller, und
   kommt auf 5.27.

   Beide Stellen, die diese Flaeche tragen: die hervorgehobene Preiskarte
   und der Ergebnisrahmen des Finders. Beim ersten Anlauf hatte ich nur
   die Karte abgedeckt und den Rahmen uebersehen.

   Die orangen Karten brauchen das nicht, die behalten im Dunkelmodus
   ihre gewoehnliche Flaeche und liegen bei 5.80. */
@media (prefers-color-scheme: dark) {
  .price-grid.finder-hebt .price-card.pk-wordpress.finder-marke p,
  .price-grid.finder-hebt .price-card.pk-wordpress.finder-marke span,
  .finder-ergebnis[data-farbe="wp"] p,
  .finder-ergebnis[data-farbe="wp"] span {
    color: #aea79f;
  }}

@media (prefers-reduced-motion: no-preference) {
  .price-grid.finder-hebt .price-card.pk-wordpress.finder-marke {
    animation-name: finder-marke-pulsieren-wp;
  }}

@media (prefers-color-scheme: dark) {
  .price-grid.finder-hebt .price-card.finder-marke {
    background: #342017;
  }}

/* Der Wechsel soll sichtbar sein, aber nicht zappeln. */
.price-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Zwei Drittel des Abzeichens liegen ueber dem Kartenrand, ein Drittel
   darunter. Bei der Haelfte sah es aus, als sei es aufgeklebt; so sitzt
   es auf der Kante. */
.price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -66.7%);
  background: var(--accent);
  color: #ffffff;
  font-size: var(--schrift-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-chip);
  padding: 0.35em 0.9em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(255, 108, 44, 0.5);
}

.price-card h3 {
  font-size: var(--schrift-untertitel);
  margin-bottom: 0.4rem;
  text-align: center;
}

/* ---- Linie unter dem Paketnamen ------------------------------------
   Orange bei den drei Hosting-Paketen, blau bei WordPress Pro - dieselbe
   Quelle wie der Rahmen der Karte, es gibt keine zweite Schreibweise.

   Die Farbe steckt in der Linie und nicht in den Buchstaben. Gemessen am
   24.08.2026: Markenorange auf Weiss kommt auf 2.83 zu 1, verlangt sind
   3 zu 1 fuer grosse Schrift. Ein farbiger Name laege darunter, eine
   Linie unter einem schwarzen Namen nicht - sie ist Schmuck und muss die
   Grenze nicht einhalten. Der Name behaelt seine 18 zu 1.

   align-self statt inline-block: Die Karte ist ein Flexbehaelter, darin
   wuerde ein inline-block zu einem Block und die Linie liefe ueber die
   ganze Karte. So ist sie genau so breit wie der Name.

   Ein Strich stark, wie der Rahmen der Karte: Beide sind 1 px, damit
   liest sich die Linie als Teil derselben Zeichnung und nicht als
   Unterstreichung.

   Der Aussenabstand waechst von 0.4 auf 0.9 rem: Die Linie liegt tiefer
   als die Schrift, ohne den Zuschlag ruecke sie der Preiszahl zu nah.

   Der Wegweiser auf /shared-webhosting/ bleibt aussen vor: Sein Titel ist
   eine Frage, kein Paketname.
   -------------------------------------------------------------------- */
.price-card:not(.pk-wegweiser) h3 {
  align-self: center;
  margin-bottom: 0.9rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--accent);
}

.price-card.pk-wordpress h3 {
  border-bottom-color: var(--wp-blau);
}

.price-card .price-amount {
  justify-content: center;
}

.price-card .price-yearly {
  text-align: center;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.price-amount .currency {
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--muted);
}

.price-amount .value {
  font-size: var(--schrift-zahl-gross);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-amount .period {
  font-size: var(--schrift-text);
  color: var(--muted);
}

.price-yearly {
  font-size: var(--schrift-text);
  color: var(--muted);
  margin: 0.35rem 0 0;
}

/* ---- Speicher als Kennzahl ---- */
.pk-kennzahl {
  margin-top: 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.pk-kennzahl b {
  display: block;
  font-size: var(--schrift-zahl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pk-kennzahl span {
  display: block;
  font-size: var(--schrift-text);
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ---- Werte-Raster: gleiche Zeilen auf gleicher Hoehe ueber alle Karten ---- */
.pw-raster {
  display: grid;
  grid-auto-rows: 50px;
  margin: 0 0 auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  margin-bottom: auto;
}

.pw-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pw-zeile + .pw-zeile {
  border-top: 1px solid var(--line);
}

.pw-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.pw-label svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent);
}

/* Zusatz im Merkmal, z.B. die unlimitierte Kontenzahl */
.pw-label i {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  margin-left: -0.25rem;
}

/* "unl." steht rechts beim Wert. Die Farbe bleibt die des Textes,
   hervorgehoben wird nur durch das Schriftgewicht. */
.pw-wert i {
  font-style: normal;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .pw-label svg {
    color: var(--accent);
  }}

.pw-wert {
  font-size: var(--schrift-text);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
}

.pw-wert small {
  display: block;
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--muted);
  margin-top: 1px;
}

.pw-raster + .btn {
  margin-top: 1.5rem;
}

.included-panel {
  margin-top: 2rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem 2rem;
}

.included-panel h3 {
  font-size: var(--schrift-untertitel);
  margin-bottom: 1.4rem;
}

.card-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
  margin-top: 0.2rem;
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.card-more:hover {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .card-more {
    color: var(--accent);
  }}

/* ---- Bento: Darum 1aHosting ---- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.bento-cell {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-card);
  padding: 1.75rem;
}

/* Steht eine Zelle direkt unter dem Seitentitel, ist sie semantisch ein h2.
   Der Rang ordnet die Gliederung, das Aussehen bleibt gleich. */
.bento-cell h2,
.bento-cell h3 {
  font-size: var(--schrift-untertitel);
  margin: 0 0 0.4rem;
}

.bento-cell p {
  font-size: var(--schrift-text);
  color: var(--muted);
  margin: 0;
}

.bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 1.1rem;
}

@media (prefers-color-scheme: dark) {
  .bento-icon {
    color: var(--accent);
  }}

.bento-icon svg {
  width: 22px;
  height: 22px;
}

.span-6 {
  grid-column: span 6;
}

.span-4 {
  grid-column: span 4;
}

.bento-tint {
  background: linear-gradient(135deg, rgba(255, 108, 44, 0.12), rgba(255, 108, 44, 0.02) 60%),
    var(--surface);
}

.bento-tint-2 {
  background: linear-gradient(315deg, rgba(255, 108, 44, 0.12), rgba(255, 108, 44, 0.02) 60%),
    var(--surface);
}

/* Aufbewahrungsfristen der Backups: als Liste statt im Fliesstext,
   damit die unterschiedlichen Dauern auf einen Blick stimmen */
.bu-liste {
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
}

.bu-liste > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}

.bu-liste > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.bu-liste dt {
  font-size: var(--schrift-text);
  color: var(--muted);
}

.bu-liste dd {
  margin: 0;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.dc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: center;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
}

.dc-stat b {
  display: block;
  font-size: var(--schrift-zahl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--accent);
}

.dc-stat span {
  font-size: var(--schrift-text);
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  .dc-stat b {
    color: var(--accent);
  }}

/* ---- Gruenes Hosting ---- */
.gruen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

.gruen {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.gruen .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
}

.gruen .ico svg {
  width: 24px;
  height: 24px;
}

.gruen .ico .flag {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.gruen b {
  display: block;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.9rem 0 0.35rem;
}

.gruen span:not(.ico):not(.flag) {
  font-size: var(--schrift-text);
  color: var(--muted);
}

/* ---- Domain-Aktion ---- */
.aktion {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2.25rem);
}

.aktion-titel {
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

.aktion-tld {
  color: var(--accent);
}

.aktion-preis {
  margin: 0 0 1.25rem;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.aktion-preis b {
  display: block;
  font-size: var(--schrift-zahl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}

.aktion-preis span {
  display: block;
  margin-top: 0.35rem;
}

.aktion-code {
  margin: 0;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.code {
  font: inherit;
  font-weight: 600;
  font-size: var(--schrift-text);
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 0.3em 0.8em;
  margin-left: 0.35rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.code:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.code:active {
  transform: scale(0.97);
}

.code.kopiert {
  border-style: solid;
  color: var(--ok);
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}

@media (prefers-color-scheme: dark) {
  .aktion-tld,
  .code {
    color: var(--accent);
  }}

.domains-actions {
  justify-content: center;
}

.domains-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Domains: knapp gehalten, Aktionskasten und Knopf ruecken zusammen */
/* In einem Panel steht der Kopf in der linken Spalte, nicht zentriert darueber:
   Titel, Vorspann und Text bilden eine Spalte, die Abbildung steht daneben.
   Das gilt fuer beide Panels, Domain-Aktion wie WebsiteBuilder. */
.wb-split .section-head {
  margin-bottom: 1.35rem;
}

.domains-kompakt .aktion {
  max-width: none;
  margin-inline: 0;
}

.domains-kompakt .domains-actions {
  justify-content: flex-start;
}

.domains-kompakt .aktion {
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
}

.domains-kompakt .aktion-titel {
  margin-bottom: 0.35rem;
}

.domains-kompakt .aktion-preis {
  margin-bottom: 0.75rem;
}

.domains-kompakt .domains-actions {
  margin-top: 1.25rem;
}

/* ---- WebsiteBuilder (weisses Panel mit Grafik) ---- */
.wb-panel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(2rem, 3.5vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

/* Ueberschrift dichter am Inhalt, der Abschnitt soll knapp bleiben */
.wb-panel .section-head {
  margin-bottom: 1.75rem;
}

.wb-split p {
  margin: 0 0 0.9rem;
}

.wb-split .btn {
  margin-top: 1.25rem;
}

.wb-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.wb-split img,
.wb-bild {
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-inline: auto;
}

.quote-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  /* Nicht das weiche Scrollen der Seite erben, sonst arbeitet es
     gegen die Sprünge beim endlosen Umlauf */
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  padding: 4px 0 1rem;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.quote-marquee::-webkit-scrollbar {
  display: none;
}

.quote-marquee.zieht {
  cursor: grabbing;
  scroll-behavior: auto;
}

.quote-marquee.zieht .quote-card {
  user-select: none;
}

.quote-track {
  display: flex;
  width: max-content;
}

.quote-card {
  width: min(360px, 84vw);
  flex: none;
  margin-right: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.9rem 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.quote-card blockquote {
  margin: 0;
  font-size: var(--schrift-text);
  line-height: 1.6;
  flex: 1;
}

.quote-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--schrift-text);
  color: var(--muted);
}

.quote-avatar {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-wash);
}

.quote-person {
  display: block;
  min-width: 0;
}

.quote-meta b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--schrift-text);
  margin-bottom: 1px;
}

.faq details {
  border-bottom: 1px solid var(--line-strong);
}

.faq details:first-of-type {
  border-top: 1px solid var(--line-strong);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-weight: 600;
  font-size: var(--schrift-zwischentitel);
  letter-spacing: -0.01em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 1.55rem;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 1.85rem;
}

.faq details p {
  color: var(--muted);
  margin: 0 0 1.25rem;
  max-width: 60ch;
}

.faq-wrap {
  max-width: 800px;
  margin-inline: auto;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 5vw, 4rem);
  font-size: var(--schrift-text);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem 2.5rem;
  padding-bottom: 2.25rem;
}

.footer-brand .logo img {
  height: 28px;
}

.footer-brand address {
  font-style: normal;
  color: var(--muted);
  margin: 1rem 0;
  line-height: 1.55;
}

.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-contact svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex: none;
}

.footer-contact a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.footer-contact a:hover {
  color: var(--accent);
}

/* Die Spaltentitel der Fusszeile sind h2: sie stehen in einem eigenen
   Bereich und duerfen die Gliederung des Hauptteils nicht fortsetzen.
   Als h3 rissen sie auf Seiten ohne Zwischentitel eine Luecke. */
.site-footer h2 {
  font-size: var(--schrift-text);
  margin-bottom: 1rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.site-footer ul a {
  font-size: var(--schrift-text);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-footer ul a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: var(--schrift-rand);
  color: var(--muted);
}

.flag-line {
  font-size: var(--schrift-rand);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Einstiegs-Animationen (nur ohne reduzierte Bewegung) ----
   Nur die Bewegung, nicht die Deckkraft. Frueher begann die Animation bei
   opacity 0, mit Verzoegerungen bis 0.32 s und 0.7 s Dauer. Der Hero war
   damit rund eine Sekunde lang leer, auf Googles gedrosseltem Testgeraet
   entsprechend laenger. Das schlug auf den Speed Index durch: 4.1 s am
   23.08.2026, bei einem LCP von nur 1.6 s.

   Ohne die Deckkraft steht der Inhalt vom ersten Bild an da und gleitet
   nur noch an seinen Platz. Der Effekt bleibt, das Warten faellt weg.
   transform verschiebt nichts im Aufbau, der Layout Shift bleibt bei 0. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in {
    from {
      transform: translateY(6px);
    }
    to {
      transform: none;
    }}

  /* Die kurze Blende dazu, gewaehlt am 25.08.2026 aus vier Fassungen.
     Erst stand sie bei 0.3 und 0.35 s; das war dem Inhaber zu viel
     Uebergang, seither 0.55 und 0.28 s.

     Sie beginnt bei 0.55 und nicht bei 0: Chrome zaehlt vollstaendig
     durchsichtigen Text nicht als gezeichnet, dann verschieben sich FCP
     und LCP um die Dauer der Blende. So steht der Titel vom ersten Bild
     an da, nur heller.

     Eigene Bildfolge, nicht als Zwischenstufe in rise-in: sonst liefe
     die Beschleunigungskurve zweimal an und die Bewegung stockte in der
     Mitte. So laeuft die Bewegung weich und die Blende gerade. */
  @keyframes blende-ein {
    from {
      opacity: 0.55;
    }
    to {
      opacity: 1;
    }}

  /* Ein Stueck, nicht drei. Frueher kamen Titel, Vorspann und Statuskarte
     nacheinander, mit 16 px und Verzoegerungen bis 0.32 s. Der Inhaber hat
     am 25.08.2026 drei Staerken verglichen und diese gewaehlt: alles
     zusammen, 0.7 s. Nebeneinander gestaffelt wirkte es unruhig.

     Der Weg stand zuerst bei 10 px und ist auf seinen Wunsch auf 6 px
     zurueckgenommen. Die Dauer bleibt - ueber den kuerzeren Weg wird die
     Bewegung dadurch ruhiger statt schneller.

     Auf den uebrigen Seiten gilt dasselbe fuer den Seitenkopf. Vorher
     standen .hero-lead und .hero-cta ohne Bindung an .hero hier - dort
     bewegten sich also Vorspann und Knoepfe, die Ueberschrift darueber
     aber nicht. Nur der erste Abschnitt einer Seite, die Koepfe weiter
     unten sind beim Laden ohnehin nicht zu sehen.

     Sparsamer ist es auch: eine bewegte Ebene statt drei. */
  /* Nicht .kopf-reihe, sondern der Titelblock darin. In der Kopfreihe
     sitzt neben dem Titel der Wechselknopf, der beim Scrollen stehen
     bleiben soll - das Skript setzt dafuer position: fixed. Ein Vorfahr
     mit transform wird jedoch zum Bezugsrahmen fuer fixierte Nachfahren:
     Der Knopf haette dann an der Kopfreihe geklebt statt am Fenster und
     waere mitgescrollt. Berichtigt am 27.08.2026.
     Betroffen waren /shared-webhosting/, /wordpress-webhosting/,
     /domains/, /support/ und /websitebuilder/ - alle fuenf Seiten mit
     einer Kopfreihe. */
  .hero > .container,
  main > section:first-of-type > .container > .kopf-reihe > .seiten-kopf,
  main > section:first-of-type > .container > .seiten-kopf {
    animation: rise-in 0.7s var(--ease) 0.06s both,
               blende-ein 0.28s linear 0.06s both;
  }}

/* ---- Aus dem Blog ---- */
.blog-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.blog-karte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.blog-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.blog-bild {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg2);
}

.blog-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}

.blog-karte:hover .blog-bild img {
  transform: scale(1.03);
}

.blog-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.blog-inhalt time {
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--muted);
}

.blog-inhalt h2,
.blog-inhalt h3 {
  margin: 0.5rem 0 0.6rem;
  font-size: var(--schrift-untertitel);
  line-height: 1.3;
}

.blog-inhalt h2 a,
.blog-inhalt h3 a {
  color: var(--ink);
  text-decoration: none;
}

.blog-inhalt h2 a:hover,
.blog-inhalt h3 a:hover {
  color: var(--accent);
}

.blog-inhalt p {
  margin: 0 0 1.1rem;
  color: var(--muted);
}

.blog-mehr {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.blog-mehr::after {
  content: " →";
  transition: transform 0.2s var(--ease);
  display: inline-block;
}

.blog-mehr:hover::after {
  transform: translateX(3px);
}

.blog-fuss {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (max-width: 767px) {
  .blog-raster {
    grid-template-columns: 1fr;
  }}

/* Info-Zeichen: verweist auf die Bedingungen der Garantie */
.info-hinweis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* Das Symbol bleibt optisch 15 Pixel, die Trefferflaeche waechst auf die
     geforderten 24 (WCAG 2.5.8). Der negative Rand haelt die Zeilenhoehe. */
  min-width: 24px;
  min-height: 24px;
  margin-block: -5px;
  margin-left: 0.35rem;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.info-hinweis:hover {
  color: var(--accent);
}

.info-hinweis svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* Seitenkopf links, Verweis auf die verwandte Seite rechts daneben.
   Bricht auf schmalen Bildschirmen untereinander um. */
.kopf-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.kopf-reihe .seiten-kopf {
  margin-bottom: 0;
}

/* Knopfreihe im Seitenkopf: Luft nach oben, buendig nach unten. */
.seiten-kopf .hero-cta {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Traegt einen oder zwei Knoepfe. Als Gruppe faehrt der ganze Bereich mit,
   darum sitzen Feder und feste Position auf dem Behaelter, nicht auf dem Knopf. */
.kopf-wechsel {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

/* Beim Scrollen faehrt der Knopf ein Stueck nach oben mit und bleibt dann unter
   der Kopfzeile stehen. Der Platzhalter haelt seine Luecke in der Kopfreihe offen,
   damit der Seitentitel nicht springt. Position und rechte Kante setzt das Skript,
   damit der Knopf genau ueber seiner Ruhelage stehen bleibt. */
/* Der Gummibandstoss laeuft ueber die Variable --feder, nicht ueber style.transform:
   sonst wuerde er die Hover- und Klickzustaende von .btn ueberschreiben. Die beiden
   rechnen ihren eigenen Versatz per calc() auf die Feder drauf.
   Die Regeln stehen weit hinter .btn, bei gleicher Spezifitaet gewinnt also diese. */
.kopf-wechsel {
  transform: translateY(var(--feder, 0px));
}

/* Die Feder wirkt auf die Gruppe, Hover und Klick auf den einzelnen Knopf.
   Beides zusammen wuerde sich sonst gegenseitig ueberschreiben. */
.kopf-wechsel {
  transform: translateY(var(--feder, 0px));
}

.kopf-wechsel .btn:hover {
  transform: translateY(-1px);
}

.kopf-wechsel .btn:active {
  transform: translateY(1px) scale(0.985);
}

/* Solange die Feder schwingt, darf keine Transition auf transform laufen.
   .btn bringt eine von 0.25 s mit, die jeden Federschritt verschleifen wuerde. */
.kopf-wechsel.federt {
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.kopf-wechsel.faehrt-mit {
  position: fixed;
  z-index: 35;
  margin-top: 0;
}

.kopf-wechsel.faehrt-mit .btn {
  box-shadow: var(--shadow-md);
}

.kopf-wechsel-platz {
  display: none;
  flex: none;
}

@media (max-width: 767px) {
  .kopf-wechsel {
    margin-top: 0;
    width: 100%;
  }

  /* Zwei Knoepfe nebeneinander passen hier nicht mehr, sie teilen sich die Zeile
     oder rutschen untereinander. */
  .kopf-wechsel .btn {
    flex: 1 1 12rem;
  }}

.seiten-kopf {
  max-width: 720px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.seiten-kopf.center {
  margin-inline: auto;
  text-align: center;
}

/* Ohne Knopfreihe klafft unter dem Vorspann eine Luecke, die sonst die
   Knoepfe fuellen. Betrifft nur den Seitenkopf am Anfang, nicht die
   zentrierten Koepfe ueber einem Raster. */
.seiten-kopf:not(.center):not(:has(.hero-cta)) {
  margin-bottom: 0;
}

.seiten-kopf h1 {
  margin: 0 0 0.75rem;
}

.seiten-kopf .lead {
  margin: 0;
}

/* Zwei Vorspaenne hintereinander brauchen eine Fuge, sonst laufen sie zu
   einem Block zusammen. Gemessen am 24.08.2026 auf der WordPress-Seite:
   0 px Abstand. */
.seiten-kopf .lead + .lead {
  margin-top: 0.9rem;
}

/* Eckdaten der Garantie */
.garantie-eckdaten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.ge-karte {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

/* Symbol steht links vom Text, auf jeder Bildschirmbreite gleich */
.ge-karte svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  grid-row: span 2;
  margin-top: 0.15rem;
}

.ge-karte b {
  display: block;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.ge-karte span {
  color: var(--muted);
}

/* Gilt / Gilt nicht */
.garantie-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.garantie-block {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.gb-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-size: var(--schrift-untertitel);
}

.gb-titel svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.gb-titel.gilt svg {
  color: var(--ok);
}

.gb-titel.gilt-nicht svg {
  color: var(--muted);
}

.gb-liste {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.gb-liste li {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  font-weight: 500;
}

.gb-fuss {
  margin: 0;
  font-size: var(--schrift-text);
  color: var(--muted);
}

/* Ablauf in Schritten */
.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}

.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-top: 3.25rem;
}

.schritte li::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--schrift-zwischentitel);
}

.schritte b {
  display: block;
  font-size: var(--schrift-zwischentitel);
  margin-bottom: 0.35rem;
}

.schritte span {
  color: var(--muted);
}

/* Kontaktabschluss */
.garantie-kontakt {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bg2);
  border-radius: var(--r-panel);
  text-align: center;
}

.garantie-kontakt > p:first-child {
  margin-top: 0;
  font-weight: 500;
}

.gk-wege {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin: 1rem 0;
}

.gk-wege a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.gk-wege a:hover {
  color: var(--accent);
}

.gk-wege svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.garantie-kontakt .small-note {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .garantie-eckdaten,
  .garantie-raster,
  .schritte {
    grid-template-columns: 1fr;
  }

  /* Schrittzahl neben den Text statt darueber */
  .schritte li {
    padding-top: 0;
    padding-left: 3.5rem;
    min-height: 42px;
  }}

/* ---- Bausteine der Produktseiten ---- */

/* Merkmal-Kacheln: kurzer Titel, ein Satz Erklaerung */
/* Themenkarten: Bildflaeche oben, darunter Titel und Text. Fuer Abschnitte,
   in denen ein Sachverhalt eine eigene Zeichnung verdient. Drei je Reihe,
   das Raster nimmt aber auch mehr Karten ohne Aenderung auf. */
/* Galerie der Vorlagen: drei je Reihe, die Bilder behalten ihr Seitenverhaeltnis
   und bekommen beim Ueberfahren einen leichten Auftrieb. */
.vorlagen-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.vorlage {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.vorlage:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vorlage img {
  display: block;
  width: 100%;
  height: auto;
}

/* Aufzaehlung mit Haken, fuer Leistungen neben einer Abbildung */
.haken-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.haken-liste li {
  position: relative;
  padding-left: 1.75rem;
}

.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

@media (max-width: 899px) {
  .vorlagen-raster {
    grid-template-columns: 1fr 1fr;
  }}

@media (max-width: 559px) {
  .vorlagen-raster {
    grid-template-columns: 1fr;
  }}

.thema-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.thema-karte {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Weisser Grund wie die Karte selbst, nur die Trennlinie setzt die Zeichnung
   vom Text ab. Kein angedeuteter Fensterrahmen: die drei Punkte sahen aus,
   als liesse sich die Flaeche scrollen. */
.thema-bild {
  padding: 1.9rem 1.5rem 1.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.thema-bild svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.thema-karte h3 {
  margin: 1.35rem 1.4rem 0.55rem;
}

.thema-karte p {
  margin: 0 1.4rem 1.5rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 899px) {
  .thema-raster {
    grid-template-columns: 1fr 1fr;
  }}

/* Schmal steht jedes Raster einspaltig: Karten nebeneinander werden
   sonst zu schmal zum Lesen. */
@media (max-width: 639px) {
  .thema-raster,
  .dc-stats {
    grid-template-columns: 1fr;
  }}

/* Die Kennzahlen bleiben auch schmal zweispaltig. Es sind vier kurze
   Angaben, keine Fliesstexte - die Begruendung der Regel darueber trifft
   hier nicht zu.

   Gemessen am 23.08.2026 auf 375 x 812: Einspaltig war die Karte 512 px
   hoch und belegte damit zwei Drittel des Bildschirms, bevor der Besucher
   ueberhaupt zu den Paketen kam. Zweispaltig, mit kleinerer Zahl und
   engeren Abstaenden, sind es rund 300.

   Die Zahl faellt von der Rolle "Kennzahl" auf "Untertitel", also von 30
   auf 22 px. Beides sind feste Rollen der Schriftteilung. */
@media (max-width: 639px) {
  .status-card {
    padding: 1.15rem;
  }

  .status-grid {
    gap: 0.9rem 1rem;
  }

  .status-stat b {
    font-size: var(--schrift-untertitel);
  }

  .status-head {
    padding-bottom: 0.8rem;
    margin-bottom: 0.9rem;
  }

  .status-foot {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
  }

  /* Die Luft ueber und unter der Karte war ungleich. Gemessen am
     23.08.2026 auf 375 px: oben 72 px, naemlich 2 rem unter der
     Preiszeile plus 2.5 rem Rasterabstand, unten 56 px bis zum
     Faktenband.

     Ungleiche Abstaende um dasselbe Element fallen auf, auch wenn man
     sie nicht benennen kann. 1.5 rem gleicht es aus: 32 + 24 = 56. */
  .hero .container {
    gap: 1.5rem;
  }}

/* Ohne eigene Regel klebten Anschrift und Kontakt am linken Rand, waehrend
   die Nummernliste mittig stand. Jetzt drei gleichwertige Spalten in einer
   Karte, schmal untereinander. */
.unt-adresse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}

.unt-etikett {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: var(--schrift-text);
}

/* Die telefonischen Zeiten stehen unter den beiden Kontaktwegen, etwas
   abgesetzt. Die Wochentage bleiben in normaler Schrift. */
.unt-zeiten {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: var(--schrift-text);
  line-height: 1.45;
}

/* Die Zeiten muessen naeher an der Nummer stehen als an der Adresse
   darunter, sonst liest man sie der falschen Zeile zu. */
.unt-adresse p:has(.unt-zeiten) + p {
  margin-top: 1rem;
}

.unt-adresse p {
  margin: 0;
  line-height: 1.8;
}

/* Amtliche Nummern: Bezeichnung darueber, Nummer darunter.
   Eine Beschreibungsliste, weil genau das der Inhalt ist. */
.unt-nummern {
  margin: 0;
  text-align: center;
}

.unt-nummern dt {
  color: var(--muted);
}

.unt-nummern dd {
  margin: 0 0 0.6rem;
}

.unt-nummern dd:last-child {
  margin-bottom: 0;
}

.merkmal-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Als Spalte aufgebaut, damit ein Knopf am Fuss sitzt und die Knoepfe
   benachbarter Karten auf einer Linie stehen, auch wenn die Texte
   unterschiedlich lang sind. */
.merkmal {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  box-shadow: var(--shadow-sm);
}

.merkmal .btn {
  align-self: flex-start;
  margin-top: 1.25rem;
}

.merkmal b {
  display: block;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.merkmal h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.merkmal h3 svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}

.merkmal p {
  margin: 0;
  color: var(--muted);
  font-size: var(--schrift-text);
  line-height: 1.55;
}

/* Nur der letzte Absatz schiebt den Knopf an den Kartenfuss. Traegt jeder
   Absatz auto, teilt sich der freie Raum zwischen ihnen auf und die Karte
   zerfaellt. So stehen die Knoepfe benachbarter Karten auf einer Linie. */
.merkmal p:last-of-type {
  margin-bottom: auto;
}

.merkmal p + p {
  margin-top: 0.7rem;
}

.merkmal span {
  color: var(--muted);
}

/* Hinweiszeile in der Preiskarte */
/* Kartenfuss: sitzt immer unten, mit Trennlinie und fester Mindesthoehe,
   damit die Bestellknoepfe aller Karten auf einer Linie stehen. */
.pk-hinweis {
  margin: 0 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  min-height: 6.9em;
  font-size: var(--schrift-text);
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 979px) {
  .pk-hinweis {
    min-height: 0;
  }}

/* Die Mindesthoehe richtet mehrere Karten aneinander aus.
   Steht nur eine im Raster, waere sie bloss Leerraum. */
/* Wegweiser an Stelle einer Preiskarte: haelt die Rasterspalte besetzt,
   damit die uebrigen Karten so breit bleiben wie auf der Startseite.
   Traegt dasselbe Blau wie die Karte WordPress Pro, auf die er zeigt.
   Ohne Schatten und ohne Anheben, denn es ist kein Angebot. */
.price-card.pk-wegweiser {
  background: var(--bg2);
  border-color: var(--wp-blau);
  box-shadow: none;
}

.pk-wegweiser h3 {
  margin: 0 0 0.7rem;
}

/* Der Knopf steht direkt unter dem Text. Ein Hinweis braucht keine
   Fluchtlinie mit den Bestellknoepfen der Nachbarkarten, der freie Raum
   sammelt sich darunter. */
.pk-wegweiser p {
  margin: 0 0 1.2rem;
  font-size: var(--schrift-text);
  color: var(--muted);
  line-height: 1.55;
}

.pk-wegweiser .btn {
  margin-bottom: auto;
}

.price-grid:not(:has(.price-card ~ .price-card)) .pk-hinweis {
  min-height: 0;
}

/* Leistungsuebersicht: sechs Gruppen mit Aufzaehlung */
.ink-mehr {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.ink-mehr .btn {
  display: inline-flex;
  margin-left: 0.6rem;
  color: var(--ink);
}

.ink-mehr .btn::after {
  content: none;
}

.ink-mehr a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.ink-mehr a::after {
  content: " →";
  display: inline-block;
  transition: transform 0.2s var(--ease);
}

.ink-mehr a:hover::after {
  transform: translateX(3px);
}

/* steht bereits in einem Panel, darum ohne eigenen Rahmen */
.leist-raster.leist-blank {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.leist-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.leist-gruppe h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.leist-gruppe h3 svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

.leist-gruppe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

/* Auslassung am Gruppenende: zeigt an, dass die Liste hier nur gekuerzt steht. */
.leist-gruppe li.mehr {
  color: var(--muted);
  letter-spacing: 0.18em;
  opacity: 0.65;
  padding-top: 0.15rem;
}

.leist-gruppe li b {
  display: block;
  font-weight: 400;
  color: var(--ink);
}

.leist-gruppe li span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--schrift-text);
  color: var(--muted);
  line-height: 1.45;
}

/* Vier Vorteile auf der WordPress-Seite. Eigene Klassen, weil das Raster
   .vorteil-raster auf der Shared-Seite vier reine Textkacheln fuehrt und dort
   kein Zeichen dazukommen soll. */
.wp-vorteile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.wp-vorteil {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
}

/* Das Zeichen sitzt in einer getoenten Flaeche, damit die vier Kacheln beim
   Ueberfliegen auseinandergehalten werden koennen. */
.wp-vorteil-bild {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent);
}

.wp-vorteil-bild svg {
  width: 1.5rem;
  height: 1.5rem;
}

.wp-vorteil h3 {
  margin: 0;
}

.wp-vorteil p {
  margin: 0;
}

/* Der zweite Absatz nennt die Technik dahinter. Er tritt ueber die Farbe
   zurueck, nicht ueber die Groesse: Die Teilung kennt acht Rollen, eine
   neunte fuer Kleingedrucktes gibt es nicht. */
.wp-vorteil-technik {
  color: var(--muted);
}

/* Vorteilsbloecke mit Aufzaehlung */
.vorteil-raster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.vorteil {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.vorteil h3 {
  margin: 0 0 0.9rem;
  font-size: var(--schrift-untertitel);
}

.vorteil ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
}

.vorteil li::marker {
  color: var(--accent);
}

@media (max-width: 979px) {
  .merkmal-raster {
    grid-template-columns: 1fr 1fr;
  }

  .leist-raster {
    grid-template-columns: 1fr 1fr;
  }}

@media (max-width: 639px) {
  .merkmal-raster,
  .leist-raster,
  .vorteil-raster {
    grid-template-columns: 1fr;
  }}

/* Leistung: Text links, Schemagrafik rechts */
.leistung-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.leistung-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.leistung-punkt:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.leistung-punkt svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  margin-top: 0.2rem;
}

.leistung-punkt b {
  display: block;
  font-size: var(--schrift-zwischentitel);
  margin-bottom: 0.25rem;
}

.leistung-punkt span {
  color: var(--muted);
}

.leistung-bild {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

/* Ohne height: auto behaelt das Bild die Hoehe aus seinem Merkmal,
   waehrend die Breite schrumpft - gemessen 702 x 706 statt 702 x 468.
   Bisher standen in diesem Rahmen nur SVG-Schemata, die ihr Verhaeltnis
   von sich aus halten; seit dem 25.08.2026 auch Aufnahmen des Panels. */
.leistung-bild img {
  width: 100%;
  height: auto;
  border-radius: var(--r-ctrl);
}

/* Aufnahmen von Programmoberflaechen blenden im Dunkelmodus. Gemessen
   am 26.08.2026: Die Panel-Bilder haben eine mittlere Helligkeit von 243
   bis 246 von 255, davon sind 85 bis 91 Prozent der Bildpunkte nahezu
   weiss. Auf dem Grund #14100e ist das eine Lampe.

   0.85 nimmt die 243 auf rund 207 zurueck - genug, damit es nicht mehr
   sticht, wenig genug, dass die kleinen Beschriftungen im Panel lesbar
   bleiben.

   Nur Programmoberflaechen. Fotos (Blog 129, Mannschaft 116) und die
   Vorlagenbilder (t1 misst 28) bleiben unberuehrt - dort gehoert die
   Helligkeit zum Inhalt. */
@media (prefers-color-scheme: dark) {
  .leistung-bild img,
  .wb-split img,
  .wb-bild {
    filter: brightness(0.85);
  }}

.leistung-bild figcaption {
  margin-top: 0.9rem;
  font-size: var(--schrift-text);
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

/* Anwendungen, nach Verwendungszweck gruppiert */
.app-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.app-gruppe h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-gruppe h3 svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
}

/* Merkt an, dass eine Gruppe nicht fuer jedes Paket gilt.
   Bewusst grau, das Orange bleibt der Anzahl vorbehalten. */
.nur-fuer {
  font-size: var(--schrift-text);
  font-weight: 500;
  color: var(--muted);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 0.15em 0.5em;
  white-space: nowrap;
}

/* Titel darf umbrechen, damit Etikett und Anzahl auf schmalen Spalten Platz haben */
.app-gruppe h3 {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.app-zahl {
  margin-left: auto;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: var(--r-chip);
  padding: 0.15em 0.6em;
}

.app-gruppe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.app-gruppe li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--schrift-text);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 0.25em 0.7em 0.25em 0.45em;
  color: var(--muted);
}

/* Marke der Anwendung. Bleibt klein, damit die Liste ruhig bleibt. */
/* ---- Die Merkmalsliste steht untereinander --------------------------
   Nur das erste Raster der beiden Hosting-Seiten, nicht die
   Anwendungsliste mit den Logos: Dort sind Marken richtig, weil jeder
   Eintrag ein Bild traegt und man ihn am Zeichen erkennt.

   Bei den Merkmalen war es eine Wand. Gemessen am 23.08.2026 auf 375 px
   waren es 2947 px Hoehe, 55 Marken hintereinander, ohne Ordnung.
   Untereinander und alphabetisch findet man einen Eintrag, ohne alles zu
   lesen; das ist bei einer Nachschlageliste der Zweck.

   Die Gruppen bekommen mehr Breite als im uebrigen Raster, 420 statt
   280 px, damit zwei Spalten hineinpassen, ohne dass lange Namen wie
   "Passwortschutz fuer Verzeichnisse" umbrechen. Unter 640 px steht eine
   Spalte, dort waeren zwei zu schmal.
   -------------------------------------------------------------------- */
.app-liste {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.app-liste .app-gruppe ul {
  display: block;
  columns: 2;
  column-gap: 1.5rem;
}

@media (max-width: 639px) {
  .app-liste .app-gruppe ul {
    columns: 1;
  }}

.app-liste .app-gruppe li {
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.3rem;
  break-inside: avoid;
}

.app-gruppe li img {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}

/* Viele Marken sind einfarbig dunkel und gingen auf dunklem Grund unter.
   Eine helle Unterlage fuer alle haelt die Liste einheitlich. */
@media (prefers-color-scheme: dark) {
  .app-gruppe li img {
    background: #fff;
    border-radius: 3px;
    padding: 1px;
  }}

/* Vergleichstabelle der Hosting-Arten */
.vgl-huelle {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-sm);
}

.vgl-tabelle {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.vgl-tabelle th,
.vgl-tabelle td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.vgl-tabelle thead th {
  font-size: var(--schrift-text);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.vgl-tabelle tbody th {
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  white-space: nowrap;
}

.vgl-tabelle td {
  color: var(--muted);
}

.vgl-tabelle tr:last-child th,
.vgl-tabelle tr:last-child td {
  border-bottom: 0;
}

/* Vergleichstabellen auf schmalen Bildschirmen ------------------------------
   Die Tabellen tragen min-width: 720px und liessen sich in ihrer Huelle
   seitwaerts schieben. Auf einem Telefon nutzt das nichts: Auf 375 Pixeln nahm
   allein die erste Spalte 284 ein, vom Vergleich sah man nichts. Unter 48rem
   wird deshalb jede Zeile zu einer eigenen Karte. Die Spaltenueberschrift
   steht dann vor dem Wert; sie kommt aus data-spalte, gesetzt von
   werkzeuge/setze-tabellen-beschriftung.py. Die ARIA-Rollen im HTML halten die
   Tabellensemantik fest, die mit display: block sonst verlorenginge. */
@media (max-width: 48rem) {
  .vgl-huelle {
    overflow-x: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .vgl-tabelle,
  .vgl-tabelle thead,
  .vgl-tabelle tbody,
  .vgl-tabelle tr,
  .vgl-tabelle th,
  .vgl-tabelle td {
    display: block;
    min-width: 0;
  }

  /* Der Tabellenkopf steht in jeder Karte vor dem Wert, oben braucht es ihn
     nicht mehr. Nicht display: none, damit er vorlesbar bleibt. */
  .vgl-tabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .vgl-tabelle tbody tr {
    margin-bottom: 1rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .vgl-tabelle tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Der Zeilentitel wird zum Kartentitel. */
  .vgl-tabelle tbody th {
    padding: 0.85rem 1.1rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }

  .vgl-tabelle td {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid var(--line);
  }

  .vgl-tabelle tr td:last-child {
    border-bottom: 0;
  }

  /* Ohne Kopfzeile ueber der Spalte muss jeder Wert selbst sagen, wozu er
     gehoert. Beschriftung links, Wert rechts: Das liest sich wie eine
     Rechnung und spart gegenueber dem Untereinander die halbe Hoehe. Passt
     der Wert nicht daneben, rutscht er in die naechste Zeile. */
  .vgl-tabelle td[data-spalte] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 1.25rem;
    justify-content: space-between;
    text-align: left;
    white-space: normal;
  }

  .vgl-tabelle td[data-spalte]::before {
    content: attr(data-spalte);
    flex: none;
    color: var(--ink);
    font-weight: 600;
  }

  /* Die Endung ist der Kartentitel und braucht die ganze Breite. */
  .dom-tabelle tbody th {
    white-space: normal;
  }}

/* Preisliste der Domains: vier Spalten, drei davon nur mit Betraegen.
   Ohne Mindestbreite, damit sie auch auf einem Telefon ohne Seitwaertsscrollen passt. */
.dom-tabelle {
  min-width: 0;
}

.dom-tabelle th,
.dom-tabelle td {
  padding: 0.85rem 0.9rem;
}

/* Rechtsbuendig in beiden, aber nur die Betraege duerfen nicht umbrechen.
   Stuende nowrap auch im Kopf, sprengte «Transfer inkl. bestehender Laufzeit»
   die Tabelle auf schmalen Bildschirmen. */
.dom-tabelle thead th:not(:first-child),
.dom-tabelle td {
  text-align: right;
}

.dom-tabelle td {
  white-space: nowrap;
}

.dom-tabelle thead th {
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  vertical-align: bottom;
}

.dom-tabelle tbody th {
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.dom-tabelle td {
  color: var(--ink);
}

.dom-tabelle tbody tr:hover {
  background: var(--bg2);
}

/* Nur diese Zellen tragen ein Wort vor dem Betrag. Duerfen sie nicht umbrechen,
   bestimmen sie die Spaltenbreite und die Tabelle passt nicht mehr aufs Telefon. */
.dom-tabelle td.dom-ab {
  white-space: normal;
}

.dom-gratis {
  font-weight: 600;
  color: var(--ok);
}

/* Die Preisliste der Domains hatte hier einen eigenen Medienblock: Die Spalte
   mit der Endung wurde auf width: 1% gedrueckt und die Kopfzeilen bekamen
   Silbentrennung, damit die vier Spalten auf einem Telefon nebeneinander
   passten. Beides ist mit der Kartenansicht ueberfluessig geworden; die
   Breitenangabe machte den Kartentitel sogar 26 Pixel schmal. Entfernt am
   21.08.2026. */

.vgl-unser {
  background: var(--accent-wash);
}

.vgl-unser td {
  color: var(--ink);
}

.vgl-marke {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 979px) {
  .leistung-split {
    grid-template-columns: 1fr;
  }}

/* ---- Zurueck nach oben ---- */
.nach-oben {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nach-oben[hidden] {
  display: none;
}

.nach-oben.sichtbar {
  opacity: 1;
  transform: none;
}

.nach-oben:hover {
  background: var(--accent-druck);
  box-shadow: 0 10px 24px -10px rgba(255, 108, 44, 0.55);
  transform: translateY(-2px);
}

.nach-oben:active {
  transform: scale(0.94);
}

.nach-oben svg {
  width: 20px;
  height: 20px;
}

/* Auf dem Handy nicht ueber dem offenen Menue liegen */
body.nav-open .nach-oben {
  display: none;
}

/* ---- Scroll-Reveal ---- */
/* ---- Einblenden beim Blaettern: abgeschaltet -----------------------
   .reveal setzte die Deckkraft auf null und wartete auf JavaScript. Was
   beim Laden schon im Bild stand, wurde damit erst sichtbar, wenn
   home.js geladen, geparst und ausgefuehrt war.

   Gemessen am 23.08.2026 auf 375 x 812 betraf das sieben Seiten: den
   Abschnittskopf von /shared-webhosting/, /wordpress-webhosting/,
   /infrastruktur/ und /support/, die erste Blogkarte sowie je eine Tafel
   auf /domains/ und /unternehmen/. Google misst dort einen leeren
   Bildschirm; auf der Startseite kostete dasselbe beim Hero einen Speed
   Index von 4.1 s bei einem LCP von nur 1.6 s.

   Weisung des Inhabers am 23.08.2026: das Einblenden ist ihm gleich, die
   Geschwindigkeit nicht. Also wird nichts mehr verborgen, auf keiner
   Breite. Der Endzustand jeder Seite ist Punkt fuer Punkt derselbe wie
   vorher, Deckkraft und transform wirken nicht auf den Aufbau.

   Die Klasse bleibt im HTML und home.js setzt weiterhin "visible". Beides
   ist jetzt wirkungslos. Wer die Einblendung zurueckholen will, stellt
   hier die drei alten Zeilen wieder her:
       opacity: 0;
       transform: translateY(12px);
       transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
   -------------------------------------------------------------------- */
.reveal,
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript darf nichts unsichtbar bleiben */
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }}

.reveal-d1 {
  transition-delay: 0.08s;
}

.reveal-d2 {
  transition-delay: 0.16s;
}

@media (max-width: 1079px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    background: var(--bg);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 96px 28px calc(32px + env(safe-area-inset-bottom));
    margin: 0;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    visibility: hidden;
  }

  .main-nav.open {
    transform: none;
    visibility: visible;
  }

  .main-nav > .nav-link,
  .nav-item > .nav-link {
    font-size: var(--schrift-untertitel);
    font-weight: 600;
    padding: 0.6rem 0;
    width: 100%;
    justify-content: space-between;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .nav-sub {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 0.6rem 0.9rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .nav-sub::before {
    display: none;
  }

  .nav-item.open .nav-sub {
    display: grid;
  }

  /* Schmal wird getippt, nicht ueberfahren. Ohne :not(.open) am
     .nav-item schloss das blosse Darueberstehen das eben
     aufgeklappte Untermenue sofort wieder. */
  .nav-item:hover:not(.open) .nav-sub {
    display: none;
  }

  .nav-sub a {
    font-size: var(--schrift-text);
  }

  .nav-cta-mobile {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1.5rem;
  }

  .nav-toggle {
    display: block;
    z-index: 70;
  }

  body.nav-open {
    overflow: hidden;
  }

  .header-actions > .btn {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .price-grid {
    grid-template-columns: 1fr 1fr;
  }

  .price-card.featured {
    transform: none;
  }}

@media (max-width: 979px) {
  .hero .container {
    grid-template-columns: 1fr;
    padding-top: 2.5rem;
  }

  .hero-visual {
    max-width: 560px;
  }

  .bento-cell,
  .span-6,
  .span-4 {
    grid-column: 1 / -1;
  }

  /* Zwischen 640 und 979 px zwei Spalten. Darunter greift die
     einspaltige Regel weiter oben, deshalb die Untergrenze. */
  .dc-stats {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1rem;
  }

  @media (max-width: 639px) {
    .dc-stats {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }}

  .wb-split {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }}

@media (max-width: 639px) {
  .container {
    padding-inline: 18px;
  }

  .site-footer ul a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .site-footer ul {
    gap: 0;
  }

  .price-grid {
    grid-template-columns: 1fr;
  }

  .fact-band .container {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Auf breitem Bildschirm haengt das Abzeichen oben rechts in die Karte
     hinein, das ist gewollt. Schmal wird daraus ein Gedraenge: Gemessen am
     23.08.2026 auf 375 px lag es 25 px ueber der Karte und beruehrte fast
     die Ueberschrift "1aHosting in Zahlen".

     Deshalb steht es hier im Fluss, mit Luft darunter, statt zu
     ueberlappen. */
  .hero-badge {
    position: static;
    right: auto;
    top: auto;
    width: fit-content;
    margin: 0 0 1rem;
  }

  .wb-panel {
    padding: 2rem 1.5rem;
  }

  .unt-adresse {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }}

/* ---- Cookie-Banner ---- */
/* Aufbau wie auf der alten Website: Titel mit Schliesskreuz, Trennlinie,
   Text, zwei gleich breite Knoepfe, darunter die beiden Verweise. */
.cookie-band {
  position: fixed;
  z-index: 80;
  left: calc(20px + env(safe-area-inset-left));
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  max-width: 30rem;
  margin-left: auto;
  padding: 1.125rem 1.375rem 1.375rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.cookie-band.sichtbar {
  opacity: 1;
  transform: none;
}

.cookie-band:focus {
  outline: none;
}

.cookie-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--line);
}

.cookie-titel {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  line-height: 1.3;
}

/* 40x40 Trefferflaeche, das Kreuz selbst bleibt zierlich. */
.cookie-kreuz {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -8px -10px -8px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.cookie-kreuz:hover {
  background: var(--bg2);
  color: var(--ink);
}

.cookie-kreuz svg {
  width: 18px;
  height: 18px;
}

.cookie-text {
  margin: 0.875rem 0 1.125rem;
  color: var(--muted);
  font-size: var(--schrift-rand);
  line-height: 1.6;
}

.cookie-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.cookie-knoepfe .btn {
  width: 100%;
}

.cookie-verweise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
}

.cookie-verweise a {
  color: var(--muted);
  font-size: var(--schrift-rand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-verweise a:hover {
  color: var(--accent);
}

/* Bei offener Navigation liegt der Banner im Weg. */
body.nav-open .cookie-band {
  display: none;
}

/* Schmal war der Banner gut die halbe Bildschirmhoehe hoch. Der Wortlaut
   ist gesetzt und darf nicht gekuerzt werden, also holen wir den Platz aus
   dem Rahmen: buendig am unteren Rand, nur oben gerundet, straffer Satz. */
@media (max-width: 640px) {
  .cookie-band {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem calc(1.125rem + env(safe-area-inset-left))
      calc(1.125rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
  }

  .cookie-text {
    margin: 0.75rem 0 1rem;
    line-height: 1.5;
  }

  .cookie-verweise {
    margin-top: 0.875rem;
  }}

@media (max-width: 1023px) {
  /* Schmal nimmt der Banner die ganze Breite ein und schiebt den
     Knopf nach oben um seine gemessene Hoehe. */
  .cookie-band {
    max-width: none;
  }

  body.cookie-offen .nach-oben {
    bottom: calc(18px + env(safe-area-inset-bottom) + var(--cookie-hoehe, 0px));
  }}

/* ---- Blogbeitrag ---- */
/* Ein Beitrag ist eine Lesestrecke. Bei 16 px Fliesstext ergeben 700 px
   rund 70 Zeichen je Zeile, der Bereich mit dem besten Lesefluss.
   Breiter ginge nur mit groesserer Schrift, dafuer fehlt in der
   Schriftteilung die Stufe zwischen 22 und 42 px. */
.beitrag .container {
  max-width: 700px;
}

.beitrag-datum {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: var(--schrift-text);
}

.beitrag-bild {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 16px;
  overflow: hidden;
}

.beitrag-bild img {
  display: block;
  width: 100%;
  height: auto;
}

.beitrag-text > *:first-child {
  margin-top: 0;
}

.beitrag-text p {
  margin: 0 0 1.15rem;
  line-height: 1.8;
}

/* Im Beitrag gliedert h2 einen Textabschnitt, nicht eine ganze Sektion.
   Deshalb die Untertitelrolle statt der Abschnittsrolle, die bis
   42 px geht und die Lesestrecke sprengen wuerde. */
.beitrag-text h2 {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.9rem;
  font-size: var(--schrift-untertitel);
  font-weight: 600;
}

.beitrag-text h3 {
  margin: 1.75rem 0 0.7rem;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
}

/* Die alten Beitraege zeichnen viel fett aus, teils ganze Absaetze.
   Ohne festes Gewicht erbt ein <strong> in einem fetten Absatz
   "bolder" und landet bei 900, was auf dem Schirm wie ein Balken
   wirkt. Ein fester Wert bricht diese Kette.
   600 ist dasselbe Gewicht, das die Zwischentitel tragen. */
.beitrag-text strong,
.beitrag-text b {
  font-weight: 600;
}

/* Ein Absatz, der nur aus einer Hervorhebung besteht, war im Original
   als Einleitung gemeint. Er bleibt hervorgehoben, aber ruhig. */
.beitrag-text p > strong:only-child,
.beitrag-text p > b:only-child {
  font-weight: 600;
  color: var(--ink);
}

.beitrag-text ul,
.beitrag-text ol {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
}

.beitrag-text li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* Im Original steht jeder Punkt in einer eigenen Liste. Ohne diese Regel
   klaffte zwischen den Punkten der Abstand zweier Listen. */
.beitrag-text ul + ul,
.beitrag-text ol + ol {
  margin-top: -0.8rem;
}

.beitrag-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.beitrag-text a:hover {
  color: var(--accent);
}

/* Zurueck zur Uebersicht, oben links im Beitrag. Fein gezeichnet, damit er
   dem Titel darunter nicht die Aufmerksamkeit nimmt. Beim Ueberfahren rueckt
   er in die Richtung, in die er fuehrt. */
.beitrag-hoch {
  display: inline-flex;
  margin-bottom: 0.75rem;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}

.beitrag-hoch svg {
  width: 1.5rem;
  height: 1.5rem;
}

.beitrag-hoch:hover {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .beitrag-hoch {
    transition: none;
  }

  .beitrag-hoch:hover {
    transform: none;
  }}

/* ---- Abschlussblock unter dem Beitrag -------------------------------
   Ergaenzt am 25.08.2026. Er steht unterhalb des Beitragstextes und
   laesst den Wortlaut der SEO-Firma unberuehrt.

   Getoenter Grund statt eines blossen Rahmens: Nach einer FAQ-Liste mit
   vielen Ueberschriften braucht das Auge eine Flaeche, um zu merken,
   dass der Beitrag zu Ende ist und etwas Neues beginnt.

   Die Fragezeile traegt die Rolle Zwischentitel, kein eigenes Mass -
   pruefe-schrift.py laesst nur die acht Rollen zu. */
.beitrag-cta {
  margin: 2.5rem 0 0;
  padding: 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
}

.beitrag-cta-frage {
  margin: 0 0 1rem;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* Unter 480 px stehen die beiden Knoepfe untereinander und nehmen die
   ganze Breite - nebeneinander blieben je 150 px, das bricht die
   Beschriftung um. */
@media (max-width: 479.98px) {
  .beitrag-cta .knopf-reihe {
    flex-direction: column;
  }

  .beitrag-cta .btn {
    width: 100%;
  }}

.beitrag-zurueck {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.beitrag-zurueck a {
  color: var(--muted);
  font-size: var(--schrift-text);
  text-decoration: none;
}

.beitrag-zurueck a:hover {
  color: var(--accent);
}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }}

/* Steht bewusst am Dateiende: die Kartentitel-Regeln haben dieselbe
   Spezifitaet, bei Gleichstand gewinnt die spaetere Regel.
   Auf schmalen Bildschirmen ruecken die Titel eine Rolle nach unten.
   h1 und h2 erledigen das selbst, ihr clamp laeuft dort in den unteren Anker.
   Nur h3 braucht die Regel, sonst waere es mobil so gross wie h2. */
@media (max-width: 767px) {
  h3,
  .price-card h3,
  .included-panel h3,
  .bento-cell h3,
  .blog-inhalt h3,
  .vorteil h3,
  .faq.wz-akkordeon summary {
    font-size: var(--schrift-zwischentitel);
  }}

/* ==================================================================
   IMPRESSUM
   Ein Datenblatt, kein Lesetext. Die Angaben stehen in Gruppen statt
   als Folge gleich aussehender Absaetze. Der Wortlaut ist unantastbar,
   gestaltet wird allein die Auszeichnung.
   ================================================================== */

.impressum-blatt .container {
  max-width: 760px;
}

/* Zuerst die Anbieterin, darunter die Formalien. Nebeneinander waere hier
   falsch: die zwei kurzen Angaben liessen neben der Karte ein Loch. */
.impressum-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

/* ---- Anbieterin: die eine Angabe, die sofort auffindbar sein muss ---- */
/* Hervorgehoben wie die featured-Preiskarte: umlaufender Rahmen in der
   Markenfarbe. Ein farbiger Streifen an einer Kante waere ein Fremdkoerper,
   die Website kennt dieses Mittel nirgends. */
.firmenkarte {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.firmenname {
  margin: 0;
  font-size: var(--schrift-untertitel);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.abteilung {
  margin: 0.1rem 0 0;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
  color: var(--ink);
}

.anschrift {
  display: grid;
  gap: 0.1rem;
  margin-top: 1.15rem;
  font-style: normal;
  color: var(--ink);
}

.zugehoerigkeit {
  margin: 1.15rem 0 0;
  font-size: var(--schrift-text);
  color: var(--muted);
}

.kontaktwege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.kontaktweg {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.kontaktweg svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}

.kontaktweg:hover {
  color: var(--accent);
}

.kontaktweg:hover span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Register- und Steuerangaben ---- */
.angaben-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.angabe h2 {
  margin: 0 0 0.9rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
  font-size: var(--schrift-untertitel);
  letter-spacing: -0.015em;
}

.angabe p {
  margin: 0 0 0.35rem;
  line-height: 1.65;
}

.angabe p:last-child {
  margin-bottom: 0;
}

.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ==================================================================
   EMPFEHLUNGSBAND
   Ganz oben, vor dem Kopf. Der Kopf klebt beim Scrollen, dieses Band
   nicht: Es ist beim Ankommen da und danach aus dem Weg.

   Bewusst in Textgroesse und nicht in Randschrift: Es steht hier ein
   ganzer Satz mit einer Preisangabe und einem Verweis, also Inhalt.
   Bewusst ohne Signalfarbe, damit es den Bestellknoepfen nicht die
   Aufmerksamkeit nimmt. Das Angebot gilt fuer bestehende Kunden.
   ================================================================== */

.empfehlungsband {
  display: block;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  font-size: var(--schrift-text);
  text-decoration: none;
}

/* Deckend, nicht durchscheinend: Das Band klebt oben, unter ihm laeuft der
   Seiteninhalt durch. --accent-wash ist halbtransparent und wuerde ihn
   sichtbar machen. Der Ton hier ist derselbe Orangeanteil, aber gemischt
   statt aufgelegt. */
.empfehlungsband:hover {
  background: #f6e6da;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
}

.empfehlungsband .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 1.15rem;
  min-height: 40px;
  padding-block: 0.25rem;
}

.band-text {
  color: var(--muted);
  text-align: center;
}

/* Schmal steht die kurze Fassung, damit das Band einzeilig bleibt und dem
   Hero nicht den Platz nimmt. */
.band-kurz {
  display: none;
}

@media (max-width: 700px) {
  .band-lang {
    display: none;
  }

  .band-kurz {
    display: inline;
  }

  .band-weg-wort {
    display: none;
  }

  .empfehlungsband .container {
    gap: 0.5rem;
  }}

.band-weg {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 32px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}

.band-weg svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
  transition: transform 0.25s var(--ease);
}

.empfehlungsband:hover .band-weg {
  color: var(--accent);
}

.empfehlungsband:hover .band-weg svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .band-weg svg {
    transition: none;
  }}

/* Der Seitenkopf setzt seinen unteren Abstand auf null, wenn keine Knopfreihe
   folgt. Das stimmt, solange Fliesstext folgt. Folgt ein Raster, klebt es am
   Vorspann. Betraf auch die 30-Tage-Seite. */
.seiten-kopf + .garantie-eckdaten {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Bedingungen der Vermittlungsprovision. Drei Ebenen statt einer Liste:
   was zur Gutschrift fuehrt, und was ab der Grenze von hundert Franken
   moeglich ist. */
.bedingungs-gruppe + .bedingungs-gruppe {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.bedingungs-gruppe h3 {
  margin: 0 0 0.75rem;
  font-size: var(--schrift-zwischentitel);
  font-weight: 600;
}

.gruppen-text {
  margin: 0 0 0.6rem;
  color: var(--muted);
}

/* Der Nachsatz gehoert zur Gruppe, aber nicht in die Aufzaehlung. Er braucht
   Luft, sonst liest er sich wie ein weiterer Listenpunkt. */
.gruppen-nachsatz {
  margin: 1.25rem 0 0;
}

.bedingungs-gruppe .small-note {
  margin: 0.6rem 0 0;
}

/* Der Hinweis auf die Bedingungen steht auf eigener Zeile und traegt kein
   zusaetzliches Gewicht: Er ergaenzt den Schritt, er betont ihn nicht. */
.schritt-hinweis {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

.schritt-hinweis:hover {
  color: var(--accent);
}

/* ---- Ganze Blogbox anklickbar ----------------------------------------
   Der Titelverweis wird ueber die ganze Karte gezogen. Das ist der Weg
   ohne verschachtelte Verweise: Im Zugaenglichkeitsbaum bleibt genau ein
   Verweis, naemlich der Titel. Das Bild traegt schon aria-hidden, der
   Knopf "Weiterlesen" bleibt oben auf und damit selbst anwaehlbar. */
.blog-karte {
  position: relative;
}

.blog-karte :is(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-karte:hover :is(h2, h3) a {
  color: var(--accent);
}

.blog-mehr {
  position: relative;
  z-index: 2;
}

/* Datum und Vorschautext liegen ueber dem gezogenen Verweis, sonst beginnt
   ein Zug mit der Maus einen Link-Zug und der Text laesst sich nicht
   markieren. Der Titel bleibt darunter: Er ist selbst der Verweis. */
.blog-karte :is(time, .blog-inhalt > p) {
  position: relative;
  z-index: 2;
}

/* ---- Inforahmen ------------------------------------------------------
   Traegt einen Hinweis, der zur Sache gehoert, aber keine Warnung ist:
   eine Bedingung, eine Einschraenkung, eine Fussnote.

   Getoente Flaeche statt Signalfarbe, das Symbol im Grauton der
   Nebensache. Er faellt auf, wenn man ihn sucht, und draengt sich sonst
   nicht auf. Die Breite ist auf 62 Zeichen begrenzt, dieselbe Lesespalte
   wie beim zentrierten Hinweis darueber.
   -------------------------------------------------------------------- */
.inforahmen {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 62ch;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  background-color: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: var(--schrift-text);
  text-align: left;
}

.inforahmen svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
}

/* Steht er hinter einer Knopfreihe, sitzt er mittig darunter.

   Er gehoert dafuer NICHT in die Knopfreihe hinein: flex-basis 100 Prozent
   wuerde zwar einen Umbruch erzwingen, die Begrenzung auf 62 Zeichen macht
   ihn aber wieder schmal genug, um neben die Knoepfe zu rutschen. */
.knopf-reihe + .inforahmen {
  margin-inline: auto;
}

/* Das Symbol misst 24 x 24 und erfuellt damit knapp die Mindestgroesse nach
   WCAG 2.2. Am Telefon ist das wenig, deshalb reicht die Trefferflaeche ueber
   das Sichtbare hinaus. Das Aussehen bleibt unveraendert. */
.info-hinweis {
  position: relative;
}

.info-hinweis::after {
  content: "";
  position: absolute;
  inset: -9px;
}

/* Ein zentrierter Hinweis lief ueber die volle Containerbreite, auf dem
   Bildschirm 104 Zeichen je Zeile. Lesbar ist etwa die Haelfte davon, deshalb
   dieselbe Begrenzung wie beim Vorspann. */
.small-note.text-center {
  max-width: 62ch;
  margin-inline: auto;
}

/* ---- Lesestrecken der drei Ratgeberseiten -----------------------------
   Fliesstext braucht eine Lesespalte. Dieselbe Breite wie die Rechtstexte,
   bei 16 px Schrift ergibt das rund 75 Zeichen je Zeile. */
.lesetext {
  max-width: 760px;
}

/* Eine Knopfreihe, die auf eine Lesespalte folgt, gehoert zu dieser Spalte
   und nicht zur ganzen Seitenbreite.

   Gemessen am 24.08.2026 auf 1440 px: Die Lesespalte ist 760 px breit und
   steht links, ihre Mitte liegt bei 404 px. Die Knopfreihe war ueber den
   ganzen Container von 1320 px zentriert, ihre Mitte lag bei 660 px. Der
   Knopf sass damit 256 px rechts neben dem Text, unter dem er steht.
   Betroffen waren elf Knoepfe auf drei Seiten. */
.lesetext + .knopf-reihe {
  max-width: 760px;
}

.lesetext p {
  margin: 0 0 1.1rem;
  line-height: 1.7;
}

/* Steht die Ueberschrift darueber mittig, gehoert die Lesespalte auf
   dieselbe Achse. Auf den Ratgeberseiten stehen Ueberschrift und Text beide
   links, dort bleibt es dabei. */
.lesetext-mitte {
  margin-inline: auto;
}

.lesetext p:last-child {
  margin-bottom: 0;
}

.lesetext h3 {
  margin: 2rem 0 0.6rem;
  font-size: var(--schrift-untertitel);
  letter-spacing: -0.015em;
}

.lesetext h3:first-child {
  margin-top: 0;
}

/* ---- Textseite: eine Spalte fuer alles ------------------------------
   Gemessen am 24.08.2026 auf /guenstiges-webhosting/ bei 1440 px: Der
   Container ist 1320 px breit. Darin standen der Fliesstext mit 760 px
   linksbuendig, die Paketkacheln mit 1272 px ueber die volle Breite, die
   Knopfreihen mal auf die Textspalte und mal auf den Container zentriert
   und die FAQ wieder anders. Vier Ausrichtungen auf einer Seite, und
   rechts blieb ueberall Leere.

   Jetzt teilen sich alle Kinder des Containers dieselbe Spalte, mittig.
   Damit haben Titel, Text, Kacheln, Knoepfe und FAQ von oben bis unten
   denselben linken und rechten Rand.

   760 px, nicht mehr: Das ist die Lesebreite, die der Fliesstext ohnehin
   hatte. Breiter wuerde die Zeile zu lang zum Lesen.
   -------------------------------------------------------------------- */
.textseite .container > * {
  max-width: 760px;
  margin-inline: auto;
}

/* Der Abstand kommt allein von der Regel darunter. Bausteine, die ihren
   eigenen Aussenabstand mitbringen, haetten sonst oben und unten zwei
   verschiedene Werte. Gemessen am 24.08.2026 auf /vergleich-webhosting/:
   ueber dem Kriterienraster 32 px, darunter 40 px. */
.textseite .container > * {
  margin-bottom: 0;
}

/* Rhythmus der Textseite.
   Gemessen am 24.08.2026: Knopfreihe, Fliesstext und der FAQ-Titel standen
   mit 0 px Abstand aufeinander, weil keiner dieser Baustein-Typen einen
   eigenen Aussenabstand mitbringt. Hier bekommt die Seite vier Stufen:
   nach dem Titel wenig, zwischen Bloecken normal, um einen Aufruf mehr,
   vor einem neuen Titel am meisten. */
.textseite .container > * + * {
  margin-top: 2rem;
}

/* Der Vorspann gehoert zum Titel und rueckt naeher */
.textseite .container > .seiten-kopf + * {
  margin-top: 1.5rem;
}

/* Der Kopf ganz oben traegt den H1 und die Herleitung. Er bekommt mehr
   Luft als ein Abschnittskopf, und zwar auf jeder der vier Seiten gleich,
   ob dort nun ein Knopf steht oder nicht. */
.textseite > section:first-of-type .container > .seiten-kopf + * {
  margin-top: 3rem;
}

/* Ein Aufruf braucht Luft auf beiden Seiten, sonst klebt er im Text */
.textseite .container > .knopf-reihe,
.textseite .container > .knopf-reihe + * {
  margin-top: 2.75rem;
}

/* Ein neuer Titel im selben Abschnitt beginnt ein neues Thema */
.textseite .container > * + .seiten-kopf {
  margin-top: 3.25rem;
}

/* ---- Eckdaten in den Paketkacheln ----------------------------------
   Speicher und Preis auf einen Blick. Die Zahlen stammen aus den
   Preiskarten, der Satz darunter unveraendert von der SEO-Firma.
   -------------------------------------------------------------------- */
/* Nur der Speicher, eine Angabe auf einer Zeile.

   Der erste Versuch am 24.08.2026 trug Speicher und Preis mit einem
   Trennpunkt dazwischen. Das ging schief: Bei drei von vier Kacheln brach
   die Zeile um und liess den Trennpunkt allein am Zeilenende stehen, die
   Kacheln sahen dadurch verschieden aus, und der Preis stand zweimal
   untereinander - hier als Zahl, im Satz darunter noch einmal im Wortlaut
   der SEO-Firma.

   Der Speicher ist die Angabe, die im Satz fehlt. Also steht nur sie hier. */
.kachel-eckdaten {
  margin: 0 0 0.6rem;
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--ink);
}

/* Drei Bausteine duerfen aus der Spalte ausbrechen: Sie tragen Tabellen
   und Raster, die in 760 px unlesbar wuerden. Gemessen am 24.08.2026 sind
   das 1272 px. Sie stehen auf derselben Mitte wie die Textspalte, der
   Aufbau bleibt darum ruhig.

   Der Ausbruch gilt aber erst ab 960 px. Ein ausgebrochener Baustein ist
   immer Containerbreite minus 48 px; auf dem Tablet hochkant waeren das
   771 px gegen 760 px der Textspalte, also 5.5 px je Seite. So ein
   Ueberstand sieht nach Versehen aus, nicht nach Absicht. Ab 960 px sind
   es mindestens 68 px je Seite und der Bruch liest sich als Entscheidung.
   Darunter bleiben die Tabellen in der Spalte, gemessen bei 768 px laufen
   sie dort ohne Querlauf. */
@media (min-width: 960px) {
  .textseite .container > .kriterien,
  .textseite .container > .vgl-huelle,
  .textseite .container > .db-werte {
    max-width: none;
  }}

/* In der schmaleren Spalte stehen die vier Pakete zu zweit statt zu viert.
   Zu viert waeren die Kacheln 172 px breit, der Satz darin braeuchte sechs
   Zeilen. */
.textseite .paket-kacheln {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 639px) {
  .textseite .paket-kacheln {
    grid-template-columns: 1fr;
  }}

/* ---- Die vier Pakete als Kacheln -----------------------------------
   Auf /guenstiges-webhosting/ standen sie als Fliesstext: vier
   Ueberschriften mit je einer Zeile Preis, mitten im Lesetext. Genau die
   Stelle, an der ein Interessent vergleichen will, sah aus wie ein Absatz.

   Nebenbei fuellen die Kacheln die leere Flaeche rechts: Der Container
   misst 1320 px, die Lesespalte nur 760.

   Am Wortlaut, am Rang der Ueberschriften und an der Reihenfolge im
   Dokument aendert sich nichts, nur an der Anordnung.
   -------------------------------------------------------------------- */
.paket-kacheln {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.paket-kachel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 1.6rem 1.6rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

.paket-kachel h3 {
  margin: 0 0 0.5rem;
  font-size: var(--schrift-untertitel);
  letter-spacing: -0.015em;
}

.paket-kachel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 979px) {
  .paket-kacheln {
    grid-template-columns: 1fr 1fr;
  }}

@media (max-width: 639px) {
  .paket-kacheln {
    grid-template-columns: 1fr;
  }}

.lesetext .haken-liste {
  margin: 0 0 1.1rem;
}

/* Fortsetzung des Vorspanns, unter dem Seitenkopf */
.lesetext-kopf {
  margin-top: 1.25rem;
}

/* ==================================================================
   Vergleichskriterien
   Auf /vergleich-webhosting/. Die alte Seite hatte hier graue Kaesten
   in zwei Spalten; der Aufbau bleibt, die Mittel kommen aus dem Bestand.
   ================================================================== */
.kriterien {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.kriterium {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--shadow-sm);
}

.kriterium h3 {
  font-size: var(--schrift-zwischentitel);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

/* Vier der Karten tragen einen ganzen Satz statt eines Begriffs. Als
   Ueberschrift ausgezeichnet wuerde er die Gliederung der Seite zerreissen,
   also traegt er sein Gewicht selbst. */
.kriterium-these {
  font-size: var(--schrift-text);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.kriterium p {
  margin: 0 0 0.75rem;
}

.kriterium p:last-child {
  margin-bottom: 0;
}

/* Die Zeile mit dem Haken schliesst die Karte ab und bleibt unten stehen,
   auch wenn die Nachbarkarte laenger ist. */
.kriterium-vorteil {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  align-items: start;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: var(--schrift-text);
  color: var(--muted);
}

.kriterium-vorteil svg {
  width: 18px;
  height: 18px;
  margin-top: 0.15em;
  color: var(--accent);
}

.kriterium-vorteil strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .kriterien {
    grid-template-columns: 1fr;
  }}

/* Merksatz im Fliesstext
   Auf /vergleich-webhosting/ hebt die alte Seite einen Satz hervor: den
   Hinweis auf MySQL. Sie tat es mit groesserer Schrift in Blaugrau. Hier
   traegt ihn eine ruhige Flaeche, damit er im langen Text stehenbleibt,
   ohne wie ein Kundenzitat auszusehen. */
.merksatz {
  background: var(--bg2);
  border-radius: var(--r-card);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  margin: clamp(1.5rem, 2.5vw, 2rem) 0;
  font-size: var(--schrift-zwischentitel);
  line-height: 1.5;
  color: var(--ink);
}

/* Aufruftext
   Der Werbeblock der alten Seiten steht mehrfach auf derselben Seite. Beim
   ersten Mal traegt er eine Ueberschrift, danach diesen Absatz: gleicher
   Wortlaut, gleiches Gewicht im Bild, kein zweiter Gliederungspunkt. */
.lesetext p.aufruf-text,
.aufruf-text {
  /* Genau wie .lesetext h3, damit die drei Aufrufe gleich aussehen. Nur
     der Rang im Dokument unterscheidet sie. */
  font-size: var(--schrift-untertitel);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin: 2rem 0 0.6rem;
}

/* ==================================================================
   Technisches Datenblatt
   Nur auf /technisches-datenblatt/. Die Seite ist eine Anleitung:
   Der Leser sucht einen Wert, tippt ihn ab und geht wieder.
   ================================================================== */

/* Servernamen und Ports. Feste Zeichenbreite nicht als Zierde, sondern
   damit l, I und 1 unterscheidbar bleiben. */
code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
  font-size: var(--schrift-text);
  /* Schrift mit fester Zeichenbreite wirkt bei gleicher Groesse
     groesser. font-size-adjust gleicht die Hoehe der Kleinbuchstaben
     an die der Grundschrift an, ohne eine neue Groesse einzufuehren. */
  font-size-adjust: 0.52;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--bg2);
  border-radius: 6px;
  padding: 0.15em 0.45em;
  word-break: break-word;
}

/* Das Inhaltsverzeichnis. Zehn Punkte sind zu viele fuer eine Spalte,
   deshalb laufen sie ab 640 Pixel zweispaltig. */
.db-inhalt {
  max-width: 46rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
}

.db-inhalt-titel {
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.db-inhalt ol {
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.45rem;
}

.db-inhalt a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.2em;
}

.db-inhalt a:hover,
.db-inhalt a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* Auf dem Telefon ist jeder Eintrag ein Ziel fuer den Finger. Gemessen am
   24.08.2026 bei 375 px waren die Verweise 20 px hoch; mit der Polsterung
   sind es 44 px. inline-block statt block, damit die Ziffer der Liste auf
   der Grundlinie des Verweises stehen bleibt.

   Bis 1023.98 px, nicht nur bis 767: Das Tablet wird ebenso mit dem Finger
   bedient, und ab 768 px steht die Liste zweispaltig, die Eintraege blieben
   dort sonst 20 px hoch. */
@media (max-width: 1023.98px) {
  .db-inhalt ol {
    gap: 0;
  }

  .db-inhalt a {
    display: inline-block;
    padding-block: 0.75rem;
  }}

/* Die vier Nameserver. Nebeneinander, solange der Platz reicht. */
.db-werte {
  list-style: none;
  margin: 0 0 clamp(1.1rem, 2vw, 1.5rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.db-werte code {
  display: inline-block;
  padding: 0.55em 0.9em;
  border: 1px solid var(--line);
}

@media (min-width: 640px) {
  .db-inhalt ol {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }}