/* ==========================================================================
   Computerkrankenhaus Rene Noack - Stylesheet
   Keine externen Ressourcen. Keine Webfonts. Keine Cookies. Kein Tracking.
   ========================================================================== */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Farben - direkt aus dem Firmenlogo: Bordeaux #520808 (Gepardenkopf)
     und Gold #ffde94 (Schriftzug). Gold ist auf hellem Grund zu schwach fuer
     Text, deshalb dort der dunklere Ton #bd8419 nur fuer Linien und Flaechen. */
  --ink-900: #2b0505;
  --ink-800: #3f0808;
  --ink-700: #520808;
  --ink-600: #6b1010;
  --ink-400: #9a6060;

  --amber-600: #7a1212;
  --amber-500: #bd8419;
  --amber-400: #ffde94;
  --amber-100: #fdf1dd;

  --paper: #ffffff;
  --paper-2: #fbf6ef;
  --paper-3: #f3e9dc;

  --text: #241414;
  --text-muted: #5c4a45;
  --text-invert: #fdf3e6;
  --text-invert-muted: #e0c9a8;

  --line: #e6dbcc;
  --line-strong: #cdbba4;

  --danger-bg: #fdf0ee;
  --danger-line: #e3a79c;
  --danger-ink: #8a2d18;

  --ok-bg: #eef7f0;
  --ok-line: #a9cdb3;
  --ok-ink: #1f5b32;

  --info-bg: #fdf1dd;
  --info-line: #e0c48a;
  --info-ink: #6b4a0c;

  /* Typografie - Systemschriften, damit keine Daten an Dritte fliessen */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);
  --step-0: clamp(1.06rem, 1.02rem + 0.2vw, 1.19rem);
  --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 2rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.3vw, 2.75rem);
  --step-4: clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);

  /* Raum */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.75rem;
  --sp-7: 5.5rem;

  --wrap: 76rem;
  --prose: 44rem;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(43, 5, 5, 0.07),
    0 2px 8px rgba(43, 5, 5, 0.06);
  --shadow-md: 0 2px 4px rgba(43, 5, 5, 0.08),
    0 12px 32px rgba(43, 5, 5, 0.12);
  --shadow-lg: 0 4px 8px rgba(43, 5, 5, 0.09),
    0 28px 60px rgba(43, 5, 5, 0.18);

  /* Waechst mit dem Logo mit. Am Handy waere ein 84px hoher Klebekopf
     verschenkter Platz - dort ist das Logo ohnehin kleiner. */
  --header-h: clamp(4.5rem, 3.3rem + 3vw, 5.25rem);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-1);
}
h4 {
  font-size: var(--step-0);
}

p,
ul,
ol,
dl,
blockquote,
figure,
table {
  margin: 0 0 var(--sp-3);
}

a {
  color: var(--amber-600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--ink-800);
}

:focus-visible {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
  border-radius: 4px;
}

strong,
b {
  font-weight: 650;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-5) 0;
}

/* ---------- 3. Layout-Hilfen ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

/* Grid- und Flex-Kinder haben von sich aus min-width:auto. Ein breites Kind
   (z. B. eine Tabelle mit nowrap-Spalten) blaeht damit die ganze Spalte auf und
   schiebt die Seite seitlich aus dem Bild. min-width:0 erlaubt das Schrumpfen -
   das Scrollen uebernimmt dann .table-wrap. */
.grid > *,
.split > *,
.with-aside > *,
.footer-grid > *,
.contact-grid > *,
.facts > * {
  min-width: 0;
}

.prose {
  max-width: var(--prose);
}
.prose > :last-child {
  margin-bottom: 0;
}
.prose h2 {
  margin-top: var(--sp-5);
  font-size: var(--step-2);
}
.prose h3 {
  margin-top: var(--sp-4);
}
.prose ul,
.prose ol {
  padding-left: 1.35em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li::marker {
  color: var(--amber-500);
}

.section {
  padding-block: var(--sp-6);
}
.section--tight {
  padding-block: var(--sp-5);
}
.section--alt {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
}
.section--dark {
  background: var(--ink-800);
  color: var(--text-invert);
}
.section--dark h2,
.section--dark h3 {
  color: #fff;
}
.section--dark a {
  color: var(--amber-400);
}
.section--dark .card__more,
.section--dark .tile__name {
  color: var(--amber-400);
}

.stack > * + * {
  margin-top: var(--sp-3);
}

.grid {
  display: grid;
  gap: var(--sp-3);
}
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.split {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 60rem) {
  .split {
    grid-template-columns: 1fr;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--amber-500);
  flex: none;
}
.section--dark .eyebrow {
  color: var(--amber-400);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
}
.section--dark .lead {
  color: var(--text-invert-muted);
}

.center {
  text-align: center;
}
.measure-center {
  max-width: 42rem;
  margin-inline: auto;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.8em 1.5em;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--amber-600);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--ink-600);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.btn--dark {
  background: var(--ink-800);
  color: #fff;
}
.btn--dark:hover {
  background: var(--ink-700);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--ink-800);
  background: var(--paper-2);
  color: var(--text);
}

.btn--ghost-invert {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn--ghost-invert:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn--sm {
  padding: 0.55em 1.05em;
  font-size: var(--step--1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 650;
  text-decoration: none;
}
.arrow-link::after {
  content: "\2192";
  transition: transform 0.15s ease;
}
.arrow-link:hover::after {
  transform: translateX(4px);
}
.arrow-link:hover {
  text-decoration: underline;
}

/* ---------- 5. Kopfbereich / Navigation ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--amber-600);
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus {
  left: 0;
}

.topbar {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  font-size: 0.86rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
}
.topbar a {
  color: var(--text-invert);
  text-decoration: none;
}
.topbar a:hover {
  color: var(--amber-400);
  text-decoration: underline;
}
.topbar__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar__facts li {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
@media (max-width: 46rem) {
  .topbar__facts li:nth-child(n + 3) {
    display: none;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink-900);
  margin-right: auto;
  /* darf schrumpfen, damit auf 320-px-Displays der Menue-Knopf nicht
     aus dem Bild geschoben wird */
  flex: 0 1 auto;
  min-width: 0;
}
.brand__mark {
  width: clamp(2.25rem, 1.6rem + 2vw, 2.7rem);
  height: clamp(2.25rem, 1.6rem + 2vw, 2.7rem);
  flex: none;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.brand__name {
  font-weight: 750;
  font-size: clamp(0.95rem, 0.78rem + 0.6vw, 1.06rem);
  letter-spacing: -0.02em;
  /* Bricht nur an der vorgesehenen Stelle ("Computer-krankenhaus") mit
     sichtbarem Trennstrich. overflow-wrap muss dafuer zurueckgesetzt werden,
     sonst bricht das vom body geerbte break-word mitten im Wort. */
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.footer-brand strong {
  overflow-wrap: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.brand__sub {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
@media (max-width: 26rem) {
  .brand__sub {
    display: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5em;
  background: var(--ink-800);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.6em 1.1em;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 3px;
}
.nav-toggle__bars span {
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav > ul {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link,
.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6em 0.8em;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink-800);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover,
.nav__btn:hover,
.nav__btn[aria-expanded="true"] {
  background: var(--paper-3);
  color: var(--ink-900);
}
.nav__link[aria-current="page"] {
  color: var(--amber-600);
  box-shadow: inset 0 -3px 0 var(--amber-500);
}
.nav__caret {
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.nav__btn[aria-expanded="true"] .nav__caret {
  transform: rotate(-135deg) translateY(-2px);
}

.nav__group {
  position: relative;
}
.nav__panel {
  position: absolute;
  /* Direkt am Knopf ansetzen. Ein Abstand hier erzeugt einen toten Streifen,
     den die Maus auf dem Weg zum Menueeintrag durchquert - dabei verlaesst sie
     die Gruppe, das Menue klappt zu und der Klick geht ins Leere. */
  top: 100%;
  left: 0;
  min-width: 17rem;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
}
.nav__group[data-open="true"] .nav__panel {
  display: block;
}
.nav__panel a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.97rem;
  font-weight: 550;
  color: var(--text);
  text-decoration: none;
}
.nav__panel a small {
  display: block;
  font-size: 0.79rem;
  font-weight: 400;
  color: var(--text-muted);
}
.nav__panel a:hover {
  background: var(--amber-100);
  color: var(--ink-900);
}
.nav__panel a[aria-current="page"] {
  background: var(--paper-3);
  color: var(--amber-600);
}

.nav__cta {
  margin-left: var(--sp-2);
}

@media (max-width: 68rem) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--sp-2) clamp(1.1rem, 4vw, 2.5rem) var(--sp-4);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .site-header[data-nav-open="true"] .nav {
    display: flex;
  }
  .nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link,
  .nav__btn {
    width: 100%;
    justify-content: space-between;
    padding: 0.85em 0.5em;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__panel {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--paper-2);
    border-radius: 0;
    padding: 0.35rem 0.35rem 0.6rem;
  }
  .nav__group[data-open="true"] .nav__panel {
    display: block;
  }
  .nav__cta {
    margin: var(--sp-3) 0 0;
  }
  .nav__cta .btn {
    width: 100%;
  }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(
      120% 90% at 88% 8%,
      rgba(217, 130, 15, 0.28) 0%,
      rgba(217, 130, 15, 0) 55%
    ),
    linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: var(--text-invert);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.055) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
}
@media (max-width: 62rem) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--sp-3);
}
.hero h1 em {
  font-style: normal;
  color: var(--amber-400);
}
.hero__lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-invert-muted);
  max-width: 34rem;
  margin-bottom: var(--sp-4);
}
.hero__note {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-invert-muted);
}

.hero-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  backdrop-filter: blur(6px);
}
.hero-card h2 {
  font-size: var(--step-1);
  color: #fff;
  margin-bottom: var(--sp-2);
}
.hero-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: 0.98rem;
}
.hero-card dt {
  color: var(--text-invert-muted);
}
.hero-card dd {
  margin: 0;
  font-weight: 650;
  color: #fff;
}
.hero-card__phone {
  display: block;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--amber-400) !important;
  text-decoration: none;
  margin-bottom: 0.2rem;
}
.hero-card__phone:hover {
  text-decoration: underline;
}

/* ---------- 7. Karten ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.card > :last-child {
  margin-bottom: 0;
  margin-top: auto;
}
.card h3 {
  margin: 0;
  font-size: var(--step-1);
}
.card p {
  margin: 0;
  color: var(--text-muted);
}
a.card,
.card--link {
  text-decoration: none;
  color: inherit;
}
a.card:hover,
.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--amber-400);
}
.card__icon {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--amber-100);
  color: var(--amber-600);
  flex: none;
}
.card__icon svg {
  width: 1.55rem;
  height: 1.55rem;
}
.card__more {
  font-weight: 650;
  color: var(--amber-600);
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
}
.card__more::after {
  content: "\2192";
  transition: transform 0.15s ease;
}
a.card:hover .card__more::after {
  transform: translateX(4px);
}

.card--flat {
  box-shadow: none;
  background: var(--paper-2);
}
.card--dark {
  background: var(--ink-700);
  border-color: var(--ink-600);
  color: var(--text-invert);
}
.card--dark h3 {
  color: #fff;
}
.card--dark p {
  color: var(--text-invert-muted);
}

/* ---------- 8. Merkmale, Zahlen, Schritte ---------- */
.facts {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.facts li {
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.facts b {
  display: block;
  font-size: var(--step-2);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--amber-600);
  line-height: 1.1;
}
.facts span {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.steps li {
  position: relative;
  padding-left: 3.4rem;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--amber-600);
  color: #ffffff;
  font-weight: 750;
}
.steps h3 {
  margin-bottom: 0.2rem;
  font-size: var(--step-0);
}
.steps p {
  margin: 0;
  color: var(--text-muted);
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  display: grid;
  gap: 0.6rem;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 2.5px solid var(--amber-500);
  border-bottom: 2.5px solid var(--amber-500);
  transform: rotate(-45deg);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
}
.tag-list li,
.tag {
  display: inline-block;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- 9. Hinweisboxen ---------- */
.note {
  border: 1px solid var(--info-line);
  border-left-width: 5px;
  background: var(--info-bg);
  color: var(--info-ink);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.note > :last-child {
  margin-bottom: 0;
}
.note__title {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.note--warn {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.note--ok {
  border-color: var(--ok-line);
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.note--amber {
  border-color: var(--amber-400);
  background: var(--amber-100);
  color: #6b4a0c;
}
.note a {
  color: inherit;
}

blockquote.quote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--amber-500);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-0);
  color: var(--text);
}
blockquote.quote cite {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--text-muted);
}

.statement {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink-900);
  padding: var(--sp-4) 0;
  border-block: 2px solid var(--amber-500);
  margin-block: var(--sp-4);
}

/* ---------- 10. Tabellen ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  margin: 0;
}
caption {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 650;
  color: var(--text-muted);
}
th,
td {
  padding: 0.7rem var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
thead th {
  background: var(--ink-800);
  color: #fff;
  font-weight: 650;
  white-space: nowrap;
}
tbody tr:last-child td,
tbody tr:last-child th {
  border-bottom: 0;
}
tbody tr:nth-child(even) {
  background: var(--paper-2);
}
tbody th {
  font-weight: 650;
  white-space: nowrap;
}

/* Auf dem Handy wird aus .is-stacked eine Karte pro Zeile, statt seitlich
   scrollen zu muessen. Die Spaltenkoepfe wandern per data-label in die Zeile. */
@media (max-width: 40rem) {
  .table-wrap.is-stacked {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .is-stacked caption {
    padding-inline: 0;
  }
  .is-stacked thead {
    display: none;
  }
  .is-stacked tr {
    display: block;
    margin-bottom: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .is-stacked tbody tr:nth-child(even) {
    background: var(--paper);
  }
  .is-stacked tbody tr:last-child {
    margin-bottom: 0;
  }
  .is-stacked th[scope="row"] {
    display: block;
    white-space: normal;
    background: var(--paper-3);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0.9rem;
    font-weight: 700;
  }
  .is-stacked td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    white-space: normal;
    border: 0;
    padding: 0.35rem 0.9rem;
    text-align: right;
  }
  .is-stacked td:last-child {
    padding-bottom: 0.65rem;
  }
  .is-stacked td:first-of-type {
    padding-top: 0.6rem;
  }
  .is-stacked td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    flex: none;
  }
  /* Zeilen mit colspan (Samstag, Sonntag) brauchen keine Beschriftung */
  .is-stacked td[colspan] {
    justify-content: flex-start;
    text-align: left;
  }
}

/* ---------- 11. Aufklappbereiche ---------- */
details.acc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 0.7rem;
  overflow: hidden;
}
details.acc[open] {
  border-color: var(--amber-400);
  box-shadow: var(--shadow-sm);
}
details.acc > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3);
  padding-right: 3rem;
  font-weight: 650;
  font-size: var(--step-0);
  position: relative;
  color: var(--ink-900);
}
details.acc > summary::-webkit-details-marker {
  display: none;
}
details.acc > summary::after {
  content: "";
  position: absolute;
  right: var(--sp-3);
  top: 1.45em;
  width: 0.62rem;
  height: 0.62rem;
  border-right: 2.5px solid var(--amber-600);
  border-bottom: 2.5px solid var(--amber-600);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
details.acc[open] > summary::after {
  transform: rotate(-135deg);
}
details.acc > summary:hover {
  background: var(--paper-2);
}
details.acc .acc__body {
  padding: 0 var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
}
details.acc .acc__body > :last-child {
  margin-bottom: 0;
}
.acc__date {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--amber-600);
  margin-bottom: 0.35rem;
}

/* ---------- 12. Seitenkopf der Unterseiten ---------- */
.page-head {
  background: linear-gradient(165deg, var(--ink-800), var(--ink-900));
  color: var(--text-invert);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(217, 130, 15, 0.3) 0%,
    rgba(217, 130, 15, 0) 68%
  );
  pointer-events: none;
}
.page-head .wrap {
  position: relative;
  z-index: 1;
}
.page-head h1 {
  color: #fff;
  font-size: var(--step-3);
  max-width: 46rem;
  margin-bottom: var(--sp-2);
}
.page-head p {
  max-width: 44rem;
  color: var(--text-invert-muted);
  font-size: var(--step-1);
  line-height: 1.5;
  margin: 0;
}

.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: var(--sp-2);
  color: var(--text-invert-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb a {
  color: var(--text-invert-muted);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--ink-400);
}
.breadcrumb [aria-current="page"] {
  color: #fff;
}

/* ---------- 13. Beitragslayout mit Randspalte ---------- */
.with-aside {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) 19.5rem;
  align-items: start;
}
@media (max-width: 64rem) {
  .with-aside {
    grid-template-columns: 1fr;
  }
}
.aside-box {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-size: var(--step--1);
}
.aside-box + .aside-box {
  margin-top: var(--sp-3);
}
.aside-box h2,
.aside-box h3 {
  font-size: var(--step-0);
  margin-bottom: var(--sp-2);
}
.aside-box > :last-child {
  margin-bottom: 0;
}
.aside-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.aside-box li + li {
  border-top: 1px solid var(--line);
}
.aside-box li a {
  display: block;
  padding: 0.5rem 0;
  text-decoration: none;
  font-weight: 550;
  color: var(--text);
}
.aside-box li a:hover {
  color: var(--amber-600);
  text-decoration: underline;
}
.aside-sticky {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
}
@media (max-width: 64rem) {
  .aside-sticky {
    position: static;
  }
}

/* ---------- 14. Softwareliste ---------- */
.sw-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}
.sw-list > li {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.sw-list__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.sw-list__name strong {
  font-size: var(--step-0);
  font-weight: 700;
}
.sw-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
}
.sw-list ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2em;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ---------- 15. Kontaktbereich ---------- */
.contact-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.contact-item {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.contact-item h3 {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.contact-item p {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
}
.contact-item a {
  text-decoration: none;
}
.contact-item a:hover {
  text-decoration: underline;
}

/* ---------- 16. CTA-Band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--ink-800), var(--ink-600) 80%);
  color: #ffffff;
}
.cta-band .wrap {
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 {
  margin: 0 0 0.3rem;
  font-size: var(--step-2);
  color: #ffffff;
}
.cta-band p {
  margin: 0;
  max-width: 38rem;
  color: #f0d8bc;
}
.cta-band .btn--dark {
  background: #ffffff;
  color: var(--ink-800);
}
.cta-band .btn--dark:hover {
  background: var(--paper-2);
  color: var(--ink-900);
}
.cta-band .btn--ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.cta-band .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* ---------- 17. Fussbereich ---------- */
.site-footer {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  font-size: var(--step--1);
  padding-block: var(--sp-5) var(--sp-3);
}
.site-footer h2,
.site-footer h3 {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-2);
}
.site-footer a {
  color: var(--text-invert-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--amber-400);
  text-decoration: underline;
}
/* Mobile first: eine Spalte. Feste Breakpoints statt auto-fit, weil auto-fit
   mit minmax(9.5rem, ...) auf schmalen Displays ueber den Rand laeuft. */
.footer-grid {
  display: grid;
  gap: var(--sp-4) var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}
.footer-grid > * {
  min-width: 0;
}
@media (min-width: 34rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Adressblock ueber die volle Breite, damit Telefon und Mail nicht brechen */
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 62rem) {
  .footer-grid {
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  }
  .footer-grid > :first-child {
    grid-column: auto;
  }
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}
.footer-brand {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: var(--sp-2);
}
.footer-brand svg {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
}
.footer-brand strong {
  display: block;
  color: #fff;
  font-size: 1rem;
}
.footer-bottom {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ink-700);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--sp-3);
  justify-content: space-between;
  font-size: 0.83rem;
}
.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--sp-3);
}
/* Auf dem Handy Copyright und Links untereinander, linksbuendig -
   space-between reisst die beiden Bloecke sonst unschoen auseinander */
@media (max-width: 40rem) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .footer-bottom ul {
    gap: 0.4rem var(--sp-2);
  }
}

/* Adressblock: Telefonnummer und Mailadresse duerfen nicht mitten im Wort
   brechen, aber auch nicht ueberlaufen */
.footer-brand + p,
.site-footer p {
  text-wrap: pretty;
}
.site-footer a[href^="mailto:"],
.site-footer a[href^="tel:"] {
  overflow-wrap: anywhere;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.85em;
  border: 1px solid var(--ink-600);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--amber-400);
}

/* ---------- 18. Zur-Seitenspitze-Knopf ---------- */
.to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink-800);
  color: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--amber-600);
  color: #ffffff;
}
.to-top svg {
  width: 1.15rem;
  height: 1.15rem;
}

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

.updated {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.ext::after {
  content: "\2197";
  font-size: 0.78em;
  margin-left: 0.25em;
  vertical-align: 0.15em;
}

.signature {
  margin-top: var(--sp-4);
  font-weight: 650;
  color: var(--ink-800);
}

/* ---------- 20. Druck ---------- */
@media print {
  .topbar,
  .site-header,
  .to-top,
  .cta-band,
  .site-footer {
    display: none !important;
  }
  body {
    font-size: 11pt;
    color: #000;
  }
  .page-head {
    background: none !important;
    color: #000;
    padding-block: 0 1rem;
  }
  .page-head h1,
  .page-head p {
    color: #000;
  }
  details.acc {
    break-inside: avoid;
  }
  details.acc .acc__body {
    display: block !important;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
}

/* ---------- 21. Breites Navigationspanel (zwei Spalten) ---------- */
.nav__panel--wide {
  min-width: 34rem;
  display: none;
}
.nav__group[data-open="true"] .nav__panel--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.35rem;
}
@media (max-width: 68rem) {
  .nav__group[data-open="true"] .nav__panel--wide {
    display: block;
    min-width: 0;
  }
}

/* ---------- 22. Definitionslisten im Textfluss ---------- */
.prose dl {
  display: grid;
  gap: 0.15rem 0;
}
.prose dt {
  margin-top: 0.6rem;
}
.prose dt:first-child {
  margin-top: 0;
}
.prose dd {
  margin: 0 0 0 0;
  color: var(--text-muted);
}
.prose s {
  color: var(--text-muted);
}

/* ---------- 23. Robots / sitemap-Hinweis ---------- */
.sr-note {
  display: none;
}

/* ==========================================================================
   24. Firmenlogo von Rene Noack
   Das Logo ist 333x65 px, hat eine dunkle Kontur und einen hellen Schein.
   Es braucht helle Flaechen - auf dunklem Grund verschwindet der Slogan.
   ========================================================================== */
.brand {
  padding-block: 0.35rem;
}
/* Am 08.08.2026 deutlich vergroessert: der Kunde konnte das Logo am PC nur
   schlecht erkennen. Der Schriftzug "Ihre Hardware in guten Haenden" ist im
   Logo sehr fein gezeichnet und braucht Hoehe, um lesbar zu bleiben.
   Am Desktop bleiben neben Logo und Navigation noch rund 350 px frei. */
.brand__logo {
  width: auto;
  height: clamp(2.6rem, 1.4rem + 3.6vw, 4.4rem);
  max-width: 100%;
  object-fit: contain;
}
.footer-brand {
  align-items: flex-start;
  margin-bottom: var(--sp-3);
}
.footer-brand__logo {
  width: auto;
  height: 3rem;
  max-width: 100%;
}

/* ==========================================================================
   25. Startseite als Portal
   Kein langes Scrollen: kurzer Kopf, danach nur noch Kacheln zum Anklicken.
   ========================================================================== */
.portal {
  background: linear-gradient(170deg, #ffffff 0%, var(--amber-100) 100%);
  border-bottom: 1px solid var(--line);
}
.portal .wrap {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.portal__head {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
.portal__head > * {
  min-width: 0;
}
@media (max-width: 58rem) {
  .portal__head {
    grid-template-columns: 1fr;
  }
}
.portal h1 {
  font-size: var(--step-3);
  margin-bottom: var(--sp-2);
  color: var(--ink-900);
}
.portal__lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 32rem;
  margin-bottom: var(--sp-3);
}
.portal__now {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3);
}
.portal__now h2 {
  font-size: var(--step-0);
  margin-bottom: var(--sp-2);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.portal__now dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: var(--step--1);
}
.portal__now dt {
  color: var(--text-muted);
}
.portal__now dd {
  margin: 0;
  font-weight: 650;
}
.portal__note {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.portal__title {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}

/* --- Kacheln --- */
.tiles {
  display: grid;
  gap: var(--sp-2);
  /* 18.5rem sorgt dafuer, dass am Desktop hoechstens drei Spalten entstehen -
     die neun Leistungskacheln gehen damit in drei vollen Reihen auf. */
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
}
.tiles > * {
  min-width: 0;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber-500);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background-color 0.15s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--ink-700);
  background: var(--paper);
  color: inherit;
}
.tile .card__icon {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.2rem;
}
.tile .card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.tile__name {
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.25;
  color: var(--ink-900);
}
.tile__desc {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.tiles--plain .tile {
  border-left-color: var(--ink-400);
}
.portal__foot {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.portal__foot > * {
  min-width: 0;
}
.tile--wide {
  border-left-color: var(--ink-700);
}

/* ==========================================================================
   26. Heller Fussbereich - damit das Logo dort lesbar bleibt
   ========================================================================== */
.site-footer {
  background: var(--paper-2);
  color: var(--text-muted);
  border-top: 1px solid var(--line);
}
.site-footer h2,
.site-footer h3 {
  color: var(--ink-900);
}
.site-footer a {
  color: var(--text);
}
.site-footer a:hover {
  color: var(--amber-600);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}
.privacy-badge {
  border-color: var(--amber-400);
  background: var(--amber-100);
  color: var(--amber-600);
}

/* ==========================================================================
   27. Urhebervermerk NEMESIS - IT Service
   Hausstil: Monospace in NEMESIS-Rot, Tippeffekt mit blinkendem Cursor.
   Die Endbreite steht in ch, damit "Service" vollstaendig getippt wird.
   ========================================================================== */
.credit {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.site-footer .credit__link,
.credit__link {
  color: #c1121f;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: normal;
}
.site-footer .credit__link:hover,
.credit__link:hover {
  color: #8e0d17;
  text-decoration: underline;
}
.credit__type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  /* 20 Zeichen plus etwas Luft, sonst wird das letzte Wort abgeschnitten */
  width: 20.5ch;
  border-right: 2px solid #c1121f;
  animation: credit-tippen 2.4s steps(21, end) 0.5s 1 both,
    credit-cursor 0.9s step-end infinite;
}
@keyframes credit-tippen {
  from {
    width: 0;
  }
  to {
    width: 20.5ch;
  }
}
@keyframes credit-cursor {
  0%,
  100% {
    border-color: #c1121f;
  }
  50% {
    border-color: transparent;
  }
}
/* Ohne Bewegung: Schriftzug einfach vollstaendig anzeigen */
@media (prefers-reduced-motion: reduce) {
  .credit__type {
    animation-name: none;
    width: auto;
    border-right: 0;
  }
}
@media print {
  .credit__type {
    animation-name: none;
    width: auto;
    border-right: 0;
  }
}

/* ==========================================================================
   28. Umschalter zwischen neuer und klassischer Fassung
   Sitzt in der obersten Leiste, ist auf jeder Seite erreichbar und
   bleibt im selben Tab (Klasse no-ext, siehe app.js).
   ========================================================================== */
.topbar__right {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.switch-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.55em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: var(--text-invert) !important;
  text-decoration: none;
  white-space: nowrap;
}
.switch-link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff !important;
  text-decoration: none;
}
.topbar__sep {
  color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 34rem) {
  /* Auf schmalen Displays reicht der Umschalter - die Nummer steht im Kopf */
  .topbar__sep {
    display: none;
  }
  .topbar__right {
    gap: 0.35rem;
  }
}

/* ==========================================================================
   29. Bilder
   Feste Breiten- und Hoehenangaben im HTML verhindern, dass die Seite beim
   Nachladen springt. loading="lazy" laedt erst, wenn das Bild in Sichtweite
   kommt. Hier nur die Gestaltung drumherum.
   ========================================================================== */
.figure {
  margin: 0 0 var(--sp-3);
}
.figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.figure__zoom {
  display: block;
  text-decoration: none;
}
.figure__zoom:hover img {
  border-color: var(--amber-500);
  box-shadow: var(--shadow-sm);
}

/* Portraet neben dem Text, umflossen */
.figure--rechts {
  float: right;
  width: min(13rem, 40%);
  margin: 0.2rem 0 var(--sp-3) var(--sp-3);
}
@media (max-width: 34rem) {
  .figure--rechts {
    float: none;
    width: min(11rem, 55%);
    margin-inline: 0 auto;
  }
}

/* Drei Fotos nebeneinander, etwa fuer die Anfahrt */
.figure-reihe {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--sp-3);
}
.figure-reihe > * {
  min-width: 0;
  margin-bottom: 0;
}

/* Zwei Bilder im Vergleich, vorher und nachher */
.figure-paar {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
  max-width: 30rem;
  margin: var(--sp-3) 0 var(--sp-4);
}
.figure-paar--breit {
  max-width: var(--prose);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.figure-paar > * {
  min-width: 0;
  margin-bottom: 0;
}
.figure-paar figcaption {
  font-weight: 650;
  color: var(--text);
}

/* ==========================================================================
   30. Vorher-Nachher-Schieber
   Zwei Bilder uebereinander, das obere wird per clip-path beschnitten.
   Bedient wird ueber ein echtes <input type="range">: das bringt
   Tastaturbedienung, Touch und Screenreader-Unterstuetzung von Haus aus mit.
   Ohne JavaScript bleibt der Schnitt bei 50 Prozent stehen - man sieht dann
   links die alte und rechts die neue Fassung.
   ========================================================================== */
.vergleich {
  --pos: 50%;
  max-width: 18rem;
  margin: var(--sp-3) 0 var(--sp-4);
}
.vergleich__buehne {
  position: relative;
  aspect-ratio: var(--verhaeltnis, 3 / 4);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  touch-action: pan-y;
}
.vergleich__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}
.vergleich__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Beschriftungen links und unten rechts */
.vergleich__marke {
  position: absolute;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: rgba(43, 5, 5, 0.72);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.vergleich__marke--links {
  left: 0.5rem;
}
.vergleich__marke--rechts {
  right: 0.5rem;
}

/* Trennlinie mit Knauf */
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(43, 5, 5, 0.35);
  pointer-events: none;
}
.vergleich__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 2.1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-700);
  box-shadow: var(--shadow-md);
  background-image: linear-gradient(
      90deg,
      transparent 46%,
      var(--ink-700) 46%,
      var(--ink-700) 54%,
      transparent 54%
    );
}

/* Der eigentliche Regler liegt unsichtbar ueber dem Bild */
.vergleich__regler {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.vergleich__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.5rem;
  height: 100%;
}
.vergleich__regler::-moz-range-thumb {
  width: 2.5rem;
  height: 100%;
  border: 0;
  opacity: 0;
}
.vergleich__regler:focus-visible ~ .vergleich__griff::after {
  outline: 3px solid var(--amber-500);
  outline-offset: 3px;
}
.vergleich figcaption {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* Telefon und Nummer duerfen nicht auseinandergerissen werden */
.topbar__tel {
  white-space: nowrap;
}

/* Der Regler selbst nimmt keine Zeigereingaben mehr entgegen - das erledigt
   die Buehne per Pointer-Events. Tastaturfokus bleibt davon unberuehrt.
   touch-action: pan-y laesst senkrechtes Scrollen zu, waehrend waagrechtes
   Ziehen den Schieber bewegt. */
.vergleich__regler {
  pointer-events: none;
}
.vergleich__buehne {
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
}
.vergleich__bild {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ==========================================================================
   31. Farbwelten der drei Menuebereiche (Kundenwunsch 27.08.2026)
   Leistungen blau, Wissen rot, Praxis dunkelgruen. Die Zuordnung kommt aus
   dem Generator: jede Unterseite traegt data-bereich am <body>, jeder
   Startseiten-Abschnitt am <section>. Die Regeln lesen nur diese Variable,
   dadurch bleibt die Farbe an einer einzigen Stelle einstellbar.
   Alle drei Toene erreichen auf Weiss mehr als 9:1 Kontrast.
   ========================================================================== */
:root {
  --bereich: var(--ink-700);
  --bereich-dunkel: var(--ink-900);

  --leistung: #24384a;          /* Nachtblau aus dem ersten Entwurf, 12.1:1 */
  --leistung-dunkel: #131f2a;
  --wissen: #7a1212;            /* das vertraute Bordeaux, 10.9:1 */
  --wissen-dunkel: #2b0505;
  --praxis: #1d4d33;            /* dunkles Gruen, 9.7:1 */
  --praxis-dunkel: #0e2a1b;
}
[data-bereich="leistungen"] {
  --bereich: var(--leistung);
  --bereich-dunkel: var(--leistung-dunkel);
}
[data-bereich="wissen"] {
  --bereich: var(--wissen);
  --bereich-dunkel: var(--wissen-dunkel);
}
[data-bereich="praxis"] {
  --bereich: var(--praxis);
  --bereich-dunkel: var(--praxis-dunkel);
}

/* ---------- Farbbalken an Kacheln und Karten ---------- */
/* Deutlich kraeftiger als zuvor (4px -> 7px) und in der Bereichsfarbe. */
/* .tiles--plain setzt weiter oben ein gedaempftes Grau. Deshalb hier mit
   derselben Spezifitaet nachziehen, sonst bliebe der Wissen-Bereich farblos. */
.tile,
.tiles--plain .tile {
  border-left-width: 7px;
  border-left-color: var(--bereich);
}
.tile:hover {
  border-left-color: var(--bereich-dunkel);
}
[data-bereich] .card {
  border-left: 7px solid var(--bereich);
}
[data-bereich] .card__icon {
  color: var(--bereich);
  background: color-mix(in srgb, var(--bereich) 9%, transparent);
}
a.card:hover {
  border-color: var(--line);
}
[data-bereich] a.card:hover {
  border-left-color: var(--bereich-dunkel);
}
[data-bereich] .card__more {
  color: var(--bereich);
}
/* Aeltere Browser kennen color-mix nicht - dort bleibt der bisherige Ton. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  [data-bereich] .card__icon {
    background: var(--amber-100);
  }
}

/* ==========================================================================
   32. Seitenkopf: kraeftigerer Verlauf mit beigen Schwuengen
   Der Verlauf lief vorher zwischen zwei fast gleichen Toenen und war kaum zu
   sehen. Jetzt von der helleren Bereichsfarbe in den dunklen Ton, dazu drei
   geschwungene Linien als Hintergrundgrafik. Die Linien stecken als
   data-URL im Stylesheet - kein zusaetzlicher Serveraufruf.
   ========================================================================== */
.page-head {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--bereich) 88%, #ffffff) 0%,
      var(--bereich) 42%,
      var(--bereich-dunkel) 100%);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .page-head {
    background: linear-gradient(155deg, var(--bereich) 0%, var(--bereich-dunkel) 100%);
  }
}
/* Die Schwuenge liegen auf ::before. ::after ist schon vergeben - dort sitzt
   der runde Lichtschein, der eine feste Groesse und border-radius hat. Beides
   in ein Pseudoelement zu pressen ginge schief. */
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -3rem bottom -3rem;
  background-size: auto 150%;
  opacity: 0.55;
  /* Ohne diese Blende laufen die Linien quer durch die Ueberschrift. Die
     Textspalte ist auf 46rem begrenzt, rechts davon ist Platz - also blenden
     wir die Schwuenge erst dort ein. */
  -webkit-mask-image: linear-gradient(to right, transparent 40%, #000 68%);
  mask-image: linear-gradient(to right, transparent 40%, #000 68%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='260' viewBox='0 0 620 260' fill='none' stroke='%23e6d0ac' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M-20 210C90 210 150 60 260 60s170 150 280 150 120-120 120-120'/%3E%3Cpath d='M-20 168C90 168 150 18 260 18s170 150 280 150 120-120 120-120' opacity='.7'/%3E%3Cpath d='M-20 252C90 252 150 102 260 102s170 150 280 150 120-120 120-120' opacity='.45'/%3E%3C/svg%3E");
}
@media (max-width: 48rem) {
  .page-head::before {
    background-position: right -9rem bottom -2rem;
    opacity: 0.35;
  }
}
.page-head > .wrap {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   33. Menueband in Gold
   Das Logo-Gold #ffde94 erreicht auf Weiss nur 1.3:1 und waere unlesbar.
   #96670c ist derselbe Farbton, nur dunkler gestellt: 4.95:1, damit ueber
   der Grenze fuer Fliesstext. Beim Ueberfahren geht es ins Bordeaux.
   ========================================================================== */
:root {
  --gold-text: #96670c;
}
.nav__link,
.nav__btn {
  color: var(--gold-text);
}
.nav__link:hover,
.nav__btn:hover,
.nav__group[data-open="true"] .nav__btn {
  color: var(--ink-700);
}
.nav__link[aria-current="page"] {
  color: var(--ink-700);
}
/* Die Eintraege in den Klappmenues bleiben dunkel: dort steht Fliesstext mit
   Beschreibung, der muss maximal lesbar sein. */
.nav__panel a {
  color: var(--text);
}

/* ==========================================================================
   34. Fussbereich in drei Beigetoenen
   Vorher eine einzige Flaeche - der Block wirkte schwer. Jetzt drei Baender,
   von hell nach dunkler gestaffelt. Auf allen dreien bleibt der gedaempfte
   Text ueber 6:1.
   ========================================================================== */
/* Der Fussbereich hatte einen eigenen Innenabstand oben und unten. Solange er
   selbst eingefaerbt war, fiel das nicht auf. Jetzt tragen die Baender die
   Farbe - der Abstand des Fussbereichs waere ein weisser Streifen ober- und
   unterhalb geblieben. Also wandert er in die Baender. */
.site-footer {
  background: var(--paper-2);
  padding-block: 0;
}
.footer-band {
  border-top: 1px solid var(--line);
}
.footer-band > .wrap {
  padding-block: var(--sp-4);
}
.footer-band--eins > .wrap {
  padding-block: var(--sp-5) var(--sp-4);
}
.footer-band--zwei > .wrap,
.footer-band--drei > .wrap {
  padding-block: var(--sp-3);
}
.footer-band--drei .credit {
  margin: 0;
}
.footer-band--eins {
  background: #fbf6ef;
}
.footer-band--zwei {
  background: #f4ead9;
}
.footer-band--drei {
  background: #ecdfc9;
}
/* Die Trennlinie im Band uebernimmt jetzt der Farbwechsel. */
.footer-bottom {
  border-top: 0;
}

/* ==========================================================================
   35. Klappmenues in der Bereichsfarbe (Kundenwunsch 27.08.2026)
   Jede Menuegruppe traegt data-bereich und setzt damit dieselbe Variable wie
   die zugehoerigen Unterseiten. Wer das Menue oeffnet, sieht also schon die
   Farbe der Seite, auf der er gleich landet.
   ========================================================================== */
.nav__panel {
  border-top: 3px solid var(--bereich);
}
/* Der Knopf faerbt sich mit, solange sein Menue offen ist. */
.nav__group[data-open="true"] .nav__btn {
  color: var(--bereich);
}
.nav__panel a:hover,
.nav__panel a:focus-visible {
  background: color-mix(in srgb, var(--bereich) 10%, transparent);
  color: var(--bereich);
}
.nav__panel a[aria-current="page"] {
  color: var(--bereich);
  background: color-mix(in srgb, var(--bereich) 10%, transparent);
}
/* Die Beschreibung unter dem Eintrag bleibt gedaempft - sie soll die Farbe
   stuetzen, nicht mit ihr konkurrieren. */
.nav__panel a:hover small,
.nav__panel a:focus-visible small {
  color: var(--text-muted);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .nav__panel a:hover,
  .nav__panel a:focus-visible,
  .nav__panel a[aria-current="page"] {
    background: var(--amber-100);
  }
}

/* Im Klappmenue am Handy sitzen alle drei Gruppen untereinander. Dort ersetzt
   ein farbiger Streifen an der linken Kante den oberen Rand, sonst laegen drei
   waagrechte Linien dicht uebereinander. */
@media (max-width: 68rem) {
  .nav__panel {
    border-top: 0;
    border-left: 4px solid var(--bereich);
    border-radius: 0;
  }
}

/* ==========================================================================
   36. Feinschliff nach Apple-Gestaltungsregeln
   Uebernommen wurde nur, was zu einer ruhigen Informationsseite fuer eine
   aeltere Zielgruppe passt. Federanimationen, Schwungprojektion und
   Gummiband-Raender bleiben draussen - hier wird nichts geworfen oder
   gewischt, hier wird gelesen und geklickt.
   ========================================================================== */

/* ---------- 36.1 Rueckmeldung beim Druecken ----------
   Bisher gab es nur :hover. Am Telefon existiert kein Hover: Ein Antippen
   blieb bis zum Seitenwechsel voellig unbeantwortet. Die Rueckmeldung gehoert
   auf den Druck, nicht auf das Loslassen. */
a.card,
.tile,
.nav__panel a,
.to-top,
.switch-link {
  transition: transform 90ms ease-out, background-color 90ms ease-out,
    border-color 0.15s ease, box-shadow 0.18s ease;
}
a.card:active,
.tile:active {
  transform: scale(0.988);
  box-shadow: var(--shadow-sm);
}
.nav__panel a:active,
.switch-link:active {
  transform: scale(0.985);
}
.to-top:active {
  transform: scale(0.93);
}
/* Der Druck darf nicht nur eine Bewegung sein - wer Bewegung abgeschaltet
   hat, braucht trotzdem eine Antwort. Deshalb zusaetzlich ein Farbwechsel. */
a.card:active,
.tile:active,
.nav__panel a:active {
  background: color-mix(in srgb, var(--bereich) 12%, var(--paper));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  a.card:active,
  .tile:active,
  .nav__panel a:active {
    background: var(--amber-100);
  }
}

/* ---------- 36.2 Laufweite nach Schriftgroesse ----------
   Vorher trugen h1 bis h4 denselben Wert. Grosse Schrift wirkt damit zu weit
   gesperrt, kleine zu eng. Die Laufweite gehoert an die Groesse gekoppelt,
   der Zeilenabstand ebenso - eng bei grossen, luftig bei kleinen Graden. */
h1 {
  letter-spacing: -0.028em;
  line-height: 1.1;
}
h2 {
  letter-spacing: -0.022em;
  line-height: 1.16;
}
h3 {
  letter-spacing: -0.014em;
  line-height: 1.26;
}
h4 {
  letter-spacing: -0.004em;
  line-height: 1.3;
}

/* ---------- 36.3 Weniger Transparenz, mehr Kontrast ----------
   Die Kopfzeile liegt als milchige Schicht ueber dem Inhalt. Wer Transparenz
   abgeschaltet hat, bekommt eine geschlossene Flaeche; wer hohen Kontrast
   eingestellt hat, zusaetzlich eine deutliche Kante. */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
  }
  .hero-card {
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    border-bottom-color: var(--ink-700);
  }
  .card,
  .tile,
  .nav__panel {
    border-color: var(--ink-700);
  }
}

/* ==========================================================================
   37. Standortanzeige im Menueband
   Bisher zeigte sich die Bereichsfarbe erst beim Aufklappen. Wer schon auf
   einer Unterseite stand, sah im Menueband nicht, wo er ist. Die Gruppe, in
   der die geoeffnete Seite liegt, traegt jetzt dauerhaft ihre Farbe:
   Schriftfarbe, eine getoente Flaeche und ein kraeftiger Balken - drei
   Merkmale statt nur Farbe, damit es auch bei Farbsehschwaeche ankommt.
   ========================================================================== */
.nav__group[data-aktiv="true"] .nav__btn {
  color: var(--bereich);
  font-weight: 700;
  background: color-mix(in srgb, var(--bereich) 11%, transparent);
  box-shadow: inset 0 -4px 0 var(--bereich);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
/* Beim Ueberfahren und im offenen Zustand darf die vorhandene Regel nicht
   die Markierung ueberdecken - sonst verschwindet der Balken genau dann,
   wenn man das Menue benutzt. */
.nav__group[data-aktiv="true"] .nav__btn:hover,
.nav__group[data-aktiv="true"] .nav__btn[aria-expanded="true"] {
  color: var(--bereich);
  background: color-mix(in srgb, var(--bereich) 18%, transparent);
  box-shadow: inset 0 -4px 0 var(--bereich);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .nav__group[data-aktiv="true"] .nav__btn,
  .nav__group[data-aktiv="true"] .nav__btn:hover,
  .nav__group[data-aktiv="true"] .nav__btn[aria-expanded="true"] {
    background: var(--amber-100);
  }
}

/* Auch die Startseite bekommt ihren Balken in derselben Staerke, damit die
   Markierung ueberall gleich aussieht. */
.nav__link[aria-current="page"] {
  font-weight: 700;
  background: var(--amber-100);
  box-shadow: inset 0 -4px 0 var(--amber-500);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Im Klappmenue am Handy stehen die Gruppen untereinander. Ein Balken unten
   liest sich dort als Trennlinie zur naechsten Zeile - deshalb an die Kante. */
@media (max-width: 68rem) {
  .nav__group[data-aktiv="true"] .nav__btn,
  .nav__group[data-aktiv="true"] .nav__btn:hover,
  .nav__group[data-aktiv="true"] .nav__btn[aria-expanded="true"],
  .nav__link[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--bereich);
    border-radius: 0;
  }
  .nav__link[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--amber-500);
  }
}

/* Der aktuelle Eintrag im aufgeklappten Menue war nur farbig. Jetzt zusaetzlich
   mit Balken - dieselbe Sprache wie im Band darueber. */
.nav__panel a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--bereich);
}

/* ==========================================================================
   38. Farbschluessel im Willkommensbereich
   Erklaert einmal kurz, wofuer die drei Farben stehen. Der Balken ist
   absichtlich dieselbe Form wie an den Kacheln und Karten - so erkennt man
   das Muster wieder, statt es neu lernen zu muessen.
   ========================================================================== */
.farbschluessel {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: var(--step--1);
}
.farbschluessel li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--text-muted);
}
.farbschluessel b {
  color: var(--bereich);
  font-weight: 700;
}
.farbschluessel__balken {
  flex: none;
  width: 7px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--bereich);
  /* haelt den Balken auf Hoehe der Schrift statt auf der Grundlinie */
  align-self: center;
}

/* ==========================================================================
   39. Grosse Systemschrift
   Meldung vom 27.08.2026: Auf einem Handy mit vergroesserter Schrift brach
   die Telefonnummer mitten im Block um. Das ist mit geschuetzten Leerzeichen
   erledigt. Beim Nachstellen fiel zusaetzlich auf, dass die Kachelraster bei
   sehr grosser Schrift ueber den Rand laufen: minmax(16rem, 1fr) verlangt bei
   24px Wurzelschrift 384px, die ein 360px-Display nicht hat. min() deckelt
   die Mindestbreite auf die tatsaechlich verfuegbare.
   ========================================================================== */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.tiles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr));
}
.portal__foot {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.contact-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* Der Anrufen-Knopf darf notfalls umbrechen - aber zwischen Wort und Nummer,
   nicht in der Nummer. Dafuer sorgen die geschuetzten Leerzeichen im Text.
   Hier nur noch der Ausgleich, damit zweizeilige Beschriftung mittig sitzt. */
.btn {
  text-align: center;
}
/* Zusammenhalten, was zusammengehoert - vor allem die Telefonnummer. */
.nowrap {
  white-space: nowrap;
}

/* Knoepfe sind inline-flex und wachsen sonst ueber ihren Platz hinaus, statt
   die Beschriftung umbrechen zu lassen. Bei vergroesserter Systemschrift schob
   der Anrufen-Knopf dadurch die ganze Seite auf. */
.btn {
  max-width: 100%;
}
.btn-row > * {
  min-width: 0;
}

/* Weitere Raster, die bei grosser Systemschrift breiter wurden als der Platz.
   Dieselbe Ursache wie oben: eine Mindestbreite in rem waechst mit der Schrift
   mit, die Bildschirmbreite nicht. */
.figure-paar {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.figure-paar--breit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* Diese beiden Listen hatten gar keine Spaltenangabe. Eine automatische Spalte
   ist so breit wie ihr laengstes Wort - bei "Standardkomponenten" oder einer
   E-Mail-Adresse reicht das ueber den Rand. minmax(0, 1fr) laesst die Spalte
   schrumpfen, "anywhere" erlaubt dem langen Wort notfalls den Umbruch. */
.checklist,
.prose dl {
  grid-template-columns: minmax(0, 1fr);
}
.prose dt,
.prose dd,
.checklist li {
  overflow-wrap: anywhere;
}

/* Dieselbe Ursache noch einmal an drei Stellen: Raster ohne Spaltenangabe.
   Eine automatische Spalte ist so breit wie ihr laengster unteilbarer Inhalt -
   bei grosser Schrift plus Einzug reicht das ueber den Rand. */
.sw-list,
.steps {
  grid-template-columns: minmax(0, 1fr);
}
.sw-list > li,
.steps > li {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Die Merkliste im Kopfbereich hat zwei Spalten. Beide duerfen schrumpfen,
   sonst schiebt die Telefonnummer die Tabelle auf. */
.portal__now dl {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

/* Letzte Stellen, die bei sehr grosser Systemschrift aufschoben. Alles in
   px-Abfragen, weil es hier um die tatsaechliche Bildschirmbreite geht und
   nicht um die Schriftgroesse. */
@media (max-width: 360px) {
  /* Auf sehr schmalen Geraeten Bezeichnung ueber den Wert statt daneben.
     Sonst bleibt fuer die unteilbare Telefonnummer zu wenig Platz. */
  .portal__now dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0 0;
  }
  .portal__now dt {
    margin-top: 0.5rem;
  }
  .portal__now dt:first-child {
    margin-top: 0;
  }
}
/* Bilder duerfen nie breiter werden als ihr Kasten. */
.figure,
.figure img,
.figure__zoom {
  max-width: 100%;
}
/* Knopfreihen und die Kopfleiste brechen um, statt zu schieben. */
.btn-row,
.topbar__right {
  flex-wrap: wrap;
}
.topbar__right > * {
  min-width: 0;
}
@media (max-width: 360px) {
  /* Der Umschalter oben darf auf sehr schmalen Geraeten umbrechen. */
  .switch-link {
    white-space: normal;
  }
}

/* ==========================================================================
   40. Info-Baender auf der Startseite (Kundenwunsch 27.08.2026)
   Drei dunkle Baender unterbrechen die Kartenreihen, damit die Startseite
   nicht als eine einzige Kachelwand wirkt. Alle drei im selben Dunkelblau -
   der Kunde wollte ausdruecklich keine dritte Farbe auf der Startseite.
   ========================================================================== */
.section--info {
  background: linear-gradient(160deg, #2f4a63 0%, #24384a 45%, #131f2a 100%);
  color: var(--text-invert);
  position: relative;
  overflow: hidden;
}
.section--info h2,
.section--info h3 {
  color: #fff;
}
.section--info .eyebrow {
  color: var(--amber-400);
}
.section--info .lead,
.section--info p {
  color: var(--text-invert-muted);
}
.section--info a:not(.card):not(.btn) {
  color: var(--amber-400);
}
/* Dieselben Schwuenge wie im Seitenkopf, damit die Baender als Familie
   erkennbar sind - nur schwaecher, weil hier Text daneben steht. */
.section--info::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right -4rem bottom -4rem;
  background-size: auto 130%;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to right, transparent 46%, #000 74%);
  mask-image: linear-gradient(to right, transparent 46%, #000 74%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='260' viewBox='0 0 620 260' fill='none' stroke='%23e6d0ac' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M-20 210C90 210 150 60 260 60s170 150 280 150 120-120 120-120'/%3E%3Cpath d='M-20 168C90 168 150 18 260 18s170 150 280 150 120-120 120-120' opacity='.7'/%3E%3Cpath d='M-20 252C90 252 150 102 260 102s170 150 280 150 120-120 120-120' opacity='.45'/%3E%3C/svg%3E");
}
.section--info > .wrap {
  position: relative;
  z-index: 1;
}
/* Karten und Merkkaesten auf dunklem Grund */
.section--info .card--dark {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  border-left: 7px solid var(--amber-400);
  box-shadow: none;
}
.section--info .card--dark p {
  color: var(--text-invert-muted);
}
.section--info .card--dark .card__more {
  color: var(--amber-400);
}
.section--info a.card--dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: #fff;
}
.section--info .note--warn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  border-left: 7px solid var(--amber-400);
  color: var(--text-invert-muted);
}
.section--info .note__title {
  color: #fff;
}

/* Das Gepard-Band traegt nur Text, daneben der Kopf aus dem Logo. */
.section--info-schmal .wrap {
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}
.gepard {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 62rem;
}
@media (min-width: 44rem) {
  .gepard {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--sp-4);
  }
}
.gepard__mark {
  width: 6.5rem;
  height: auto;
  max-width: 100%;
  /* Der Kopf ist dunkelrot gezeichnet und verschwaende auf Blau. Aufhellen
     statt ein zweites Bild pflegen. */
  filter: brightness(0) saturate(100%) invert(88%) sepia(24%) saturate(560%)
    hue-rotate(330deg) brightness(103%) contrast(101%);
  opacity: 0.95;
}
.gepard__schluss {
  font-weight: 650;
  color: var(--amber-400) !important;
}

/* ==========================================================================
   41. Bildfolge (Album)
   Ohne JavaScript stehen alle Bilder untereinander - eine Bilderstrecke.
   Mit JavaScript blendet das Skript alle bis auf eines aus und zeigt die
   Bedienleiste ein, die im HTML mit hidden ausgeliefert wird.
   ========================================================================== */
.album {
  margin: var(--sp-4) 0;
  max-width: var(--prose);
}
.album__buehne {
  display: grid;
  gap: var(--sp-2);
}
.album__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-3);
}
[data-album][data-bereit="true"] .album__buehne {
  gap: 0;
}
.album__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.album__knopf {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-700);
  cursor: pointer;
  transition: transform 90ms ease-out, background-color 90ms ease-out;
}
.album__knopf:hover {
  background: var(--paper-3);
}
.album__knopf:active {
  transform: scale(0.97);
}
.album__knopf--spiel {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: #fff;
}
.album__knopf--spiel:hover {
  background: var(--ink-600);
}
.album__stand {
  margin: 0 0 0 auto;
  font-size: var(--step--1);
  color: var(--text-muted);
}
/* Ohne diese Zeile bleibt hidden wirkungslos: das display: block der Regel
   darueber schlaegt die display:none-Vorgabe des Browsers fuer [hidden]. */
.album__bild[hidden] {
  display: none;
}

/* ==========================================================================
   42. Symbole in der Programmliste
   Jeder Eintrag bekommt ein Gattungssymbol - Browser, Mail, Bild, Text.
   Bewusst eigene Strichzeichnungen statt Herstellerlogos: die muessten
   einzeln geladen und lizenzrechtlich gepflegt werden und wuerden neben den
   uebrigen Symbolen der Seite wie Fremdkoerper wirken.
   ========================================================================== */
.sw-list > li {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  column-gap: var(--sp-2);
  align-items: start;
}
.sw-list__sym {
  grid-row: 1 / span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bereich) 9%, transparent);
  color: var(--bereich);
  margin-top: 0.15rem;
}
.sw-list__sym svg {
  width: 1.45rem;
  height: 1.45rem;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .sw-list__sym { background: var(--amber-100); }
}
@media (max-width: 30rem) {
  .sw-list > li {
    grid-template-columns: 2.3rem minmax(0, 1fr);
    column-gap: 0.6rem;
  }
  .sw-list__sym { width: 2.1rem; height: 2.1rem; }
  .sw-list__sym svg { width: 1.2rem; height: 1.2rem; }
}

/* ==========================================================================
   43. Programmlogos in der Liste (Kundenlieferung 01.09.2026)
   Die Logos sind unterschiedlich breit - 48 px beim Firefox, 180 px beim
   LibreOffice-Dreier. Deshalb stehen sie in der Namenszeile und nicht in einer
   festen Spalte: feste Hoehe, freie Breite. Programme ohne geliefertes Logo
   behalten das gezeichnete Gattungssymbol, damit kein Eintrag leer wirkt.
   ========================================================================== */
.sw-list > li {
  display: block;
}
.sw-list__name {
  align-items: center;
  gap: 0.6rem;
}
.sw-list__sym {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-top: 0;
}
.sw-list__sym svg {
  width: 1.2rem;
  height: 1.2rem;
}
.sw-list__sym--bild {
  width: auto;
  background: none;
  border-radius: 0;
}
.sw-list__sym--bild img {
  display: block;
  height: 2rem;
  width: auto;
  max-width: 100%;
  border-radius: 5px;
}

/* ==========================================================================
   44. Programmname als Ueberschrift
   Mit den Logos daneben fiel auf, dass der Name gar keine Ueberschrift war:
   gleiche Schriftgroesse wie der Flietext, unterstrichen wie ein normaler
   Link, dazu der Pfeil fuer externe Ziele. Neben einem 32 px grossen Logo
   sah das aus wie eine Zeile Flietext mit Bild davor.
   Jetzt eine Stufe groesser, dunkel, ohne Dauerunterstreichung - der Link
   zeigt sich beim Ueberfahren.
   ========================================================================== */
.sw-list__name {
  align-items: baseline;
  row-gap: 0.35rem;
}
.sw-list__sym {
  align-self: center;
}
.sw-list__name strong {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--ink-900);
}
.sw-list__name a {
  color: inherit;
  text-decoration: none;
}
.sw-list__name a:hover,
.sw-list__name a:focus-visible {
  color: var(--bereich);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
/* Der Pfeil bleibt - er ist der Hinweis, dass die Seite den Anbieter
   verlaesst -, tritt aber zurueck. */
.sw-list__name a.ext::after {
  font-size: 0.62em;
  vertical-align: 0.35em;
  color: var(--text-muted);
}
/* Die Marke daneben soll den Namen nicht ueberstrahlen. */
.sw-list__name .tag {
  align-self: center;
}

/* ==========================================================================
   45. Aenderungen aus der Kundenmail vom 02.09.2026
   ========================================================================== */

/* ---------- 45.1 Begruessung auf der Startseite ----------
   Die grosse Ueberschrift ist entfallen. Der Gruss traegt jetzt das h2, damit
   der Abschnitt in der Gliederung nicht leer bleibt, sieht aber aus wie die
   kleine Zeile darueber - nur eine Spur groesser, damit er nicht verloren
   wirkt, wenn nichts mehr darunter steht. */
.eyebrow--gruss {
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}

/* ---------- 45.2 Notfall-Kaesten in Rot ----------
   Wunsch: "Es soll ins Auge stechen." Volle rote Flaeche mit weisser Schrift
   statt der milchigen Kachel. Bewusst ein einziges Rot fuer alle drei: drei
   verschiedene Toene wuerden eine Rangfolge behaupten, die es nicht gibt.
   Das Blau des Bandes bleibt - es haelt die drei Info-Baender zusammen. */
.section--info .note--alarm {
  background: linear-gradient(165deg, #a01818 0%, #7a1212 55%, #5c0d0d 100%);
  border: 1px solid #c23a3a;
  border-left: 7px solid var(--amber-400);
  color: #fdeaea;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.section--info .note--alarm .note__title {
  color: #fff;
}
.section--info .note--alarm p {
  color: #fbe3e3;
}
.section--info .note--alarm a {
  color: var(--amber-400);
  text-decoration-thickness: 2px;
}
.section--info .note--alarm a:hover {
  color: #fff;
}

/* ---------- 45.3 Anreisser mit wechselndem Thema ----------
   Im Behaelter stehen mehrere Karten. Ohne JavaScript ist nur die erste
   sichtbar - das ist der Zustand, den auch Suchmaschinen sehen. Mit
   JavaScript waehlt das Skript beim Laden eine davon aus. */
.anreisser > .card:not(:first-child) {
  display: none;
}
.anreisser[data-bereit="true"] > .card {
  display: none;
}
.anreisser[data-bereit="true"] > .card[data-sichtbar="true"] {
  display: flex;
}
.card__rubrik {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-400) !important;
}

/* ---------- 45.4 Wuerfel im Kopfbereich ----------
   Herr Noack wollte "links oben im Hintergrund etwas Plastizitaet". Vorlage
   war der Wuerfelhaufen aus dem alten Wunsch-PC-Bild - dort blau, was hier
   nicht paesst. Deshalb neu gezeichnet in den Goldtoenen des Logos.
   Als eigene Datei, damit sie nicht bei jedem Seitenaufruf neu im HTML
   steckt; 3 KB, ein einziger Abruf, danach im Zwischenspeicher. */
.portal {
  position: relative;
  overflow: hidden;
}
.portal::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: -1rem;
  width: 62rem;
  height: 27rem;
  background: url("wuerfel.svg") no-repeat left top / contain;
  /* Der dichte Block liegt links oben, die geloesten Wuerfel laufen nach
     rechts unten aus. Ihre Deckung nimmt schon in der Grafik ab - deshalb
     genuegt hier ein maessiger Wert, damit der Block nicht mit der
     Ueberschrift streitet. */
  opacity: 0.26;
  pointer-events: none;
  z-index: 0;
}
.portal > .wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 62rem) {
  /* Auf schmalen Geraeten laege der Haufen unter dem Text und stoerte die
     Lesbarkeit mehr, als er hilft. */
  .portal::before {
    opacity: 0.11;
    width: 34rem;
    height: 15rem;
    left: -3rem;
  }
}

/* ---------- 45.5 Kategorien auf der Downloadseite ----------
   Wunsch: kleiner und mehr Abstand nach oben. Die Ueberschriften standen im
   Grad einer Seitenueberschrift, obwohl sie nur eine Liste einleiten. */
.prose > h2.kategorie,
h2.kategorie {
  font-size: var(--step-1);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
h2.kategorie:first-of-type {
  margin-top: var(--sp-4);
}
/* Die Unterzeile im Seitenkopf war auf 44 rem begrenzt. Der Satz auf der
   Pflegeseite brach deshalb mitten im Gedanken um. 50 rem statt 44:
   Am grossen Bildschirm waechst die Schrift bis 24 px mit, dort braucht der
   Satz 780 px - mit 48 rem waere er ausgerechnet dort wieder umgebrochen.
   50 rem sind rund 62 Zeichen und damit weiter eine bequeme Zeilenlaenge. */
.page-head p {
  max-width: 50rem;
}