/* ------------------------------------------------------------------
   it-schniering.de - Stilvorlage
   Angelegt am 26.08.2026 beim Neubau ohne WebSite X5.
   Am 03.09.2026 auf die Bildsprache der Impeccable-Vorschau umgestellt:
   grosse Rajdhani-Ueberschriften, kantige Flaechen ohne Rundungen,
   dunkle Baender aus --nacht als Gliederung, Gold nur als Signal.
   Die Klassennamen sind absichtlich unveraendert geblieben, damit alle
   sechzehn Seiten dieselbe Welt bekommen, ohne dass Formulare,
   Bestellstrecken oder Rechtstexte angefasst werden muessen.
   ------------------------------------------------------------------ */

:root {
  --blau: #008cbb;
  --blau-dunkel: #005f8c;
  --blau-zart: #eaf7fc;
  --gold: #ffb000;
  --tinte: #17313b;
  --gedaempft: #526b75;
  --linie: #cfe6ef;
  --flaeche: #f7fbfd;
  --weiss: #ffffff;
  --nacht: #122a34;
  --nacht-linie: rgba(255, 255, 255, 0.16);
  --nacht-text: #d2e8f0;
  --gruen: #1f7a4f;
  --rot: #9f2323;
  --schatten: 0 24px 70px rgba(18, 42, 52, 0.14);
  --rand: clamp(18px, 5vw, 72px);
  --bahn: 1240px;
}

/* --- Schriften, lokal ausgeliefert. Keine Verbindung zu Google. --- */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schriften/Quicksand-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: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schriften/Quicksand-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;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/Rajdhani-400-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: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/schriften/Rajdhani-400-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;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/Rajdhani-700-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: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/schriften/Rajdhani-700-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;
}

/* --- Grundgeruest --- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
  /* Auch die Teile, die der Browser selbst zeichnet, gehoeren zur Gestaltung. */
  accent-color: var(--blau);
  caret-color: var(--blau-dunkel);
  scrollbar-color: #9dc7d8 var(--blau-zart);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--tinte);
  background: var(--weiss);
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: proportional-nums;
}

::selection {
  color: var(--nacht);
  background: #ffe2a1;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blau-dunkel);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
  /* Silbentrennung nur auf schmalen Bildschirmen: dort passen lange deutsche
     Woerter wie "Standardsoftware" sonst nicht in eine Zeile. Ab 620px stoert
     der Trennstrich das Schriftbild - Dennis hat "Ansprechpart-ner" am
     04.09.2026 zu Recht bemaengelt. Der Umbruch ohne Strich bleibt erlaubt. */
  hyphens: manual;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  h1,
  h2,
  h3,
  h4 {
    hyphens: auto;
  }
}

h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 6.4vw, 5.4rem);
}

h2 {
  max-width: 20ch;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

h3 {
  font-size: 1.5rem;
  line-height: 1.15;
}

h4 {
  font-size: 1.14rem;
  line-height: 1.2;
}

p,
li,
dd,
td,
summary {
  /* Lange Wörter und Adressen dürfen umbrechen, sonst schiebt ein
     einzelner Link auf schmalen Bildschirmen die ganze Seite auf. */
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 16px;
}

p:last-child {
  margin-bottom: 0;
}

.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;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  color: var(--weiss);
  background: var(--blau-dunkel);
  font-weight: 700;
}

.sprungmarke:focus {
  left: 8px;
  top: 8px;
}

/* --- Kopfbereich --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px max(var(--rand), (100% - var(--bahn)) / 2);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(16px);
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.marke img {
  width: 46px;
  height: auto;
}

.marke strong {
  display: block;
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.24rem;
  line-height: 1;
}

.marke small {
  display: block;
  color: var(--gedaempft);
  font-size: 0.78rem;
}

.menue-schalter {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 14px;
  color: var(--blau-dunkel);
  background: var(--weiss);
  border: 2px solid var(--linie);
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menue-schalter:hover {
  border-color: var(--blau);
}

.menue-schalter .balken {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 6px currentColor, 0 -6px currentColor;
}

.hauptmenue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 2px;
  font-size: 0.97rem;
  font-weight: 700;
}

.hauptmenue a {
  padding: 9px 11px;
  border-radius: 6px;
  color: #29424c;
  text-decoration: none;
}

.hauptmenue a:hover {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
}

.hauptmenue a[aria-current='page'] {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  box-shadow: inset 0 -3px var(--gold);
}

/* --- Menuepunkt mit Untermenue ---
   Angelegt am 28.08.2026, damit SiteCare unter Managed Services haengt.
   Aufklappen ohne JavaScript ueber :hover und :focus-within. --- */

.menue-punkt {
  position: relative;
}

.menue-punkt > a::after {
  content: ' \25BE';
  color: var(--gedaempft);
  font-size: 0.8em;
}

.untermenue {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  display: none;
  min-width: 250px;
  padding: 6px;
  background: var(--weiss);
  border-top: 3px solid var(--gold);
  box-shadow: 0 18px 44px rgba(18, 42, 52, 0.2);
}

.menue-punkt:hover .untermenue,
.menue-punkt:focus-within .untermenue {
  display: block;
}

.untermenue a {
  display: block;
  font-size: 0.94rem;
}

.hauptmenue .menue-aktion {
  margin-left: 6px;
  color: var(--weiss);
  background: var(--blau);
}

.hauptmenue .menue-aktion:hover,
.hauptmenue .menue-aktion[aria-current='page'] {
  color: var(--weiss);
  background: var(--blau-dunkel);
  box-shadow: none;
}

/* --- Bereichsleiste ---
   Am 03.09.2026 aus dem Live-Stand zurueck in den Bausatz geholt. Sie sitzt
   unter dem Kopf und fuehrt innerhalb der Managed-Services-Familie weiter. --- */

.bereichsmenue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 9px max(var(--rand), (100% - var(--bahn)) / 2);
  background: var(--blau-zart);
  border-bottom: 1px solid var(--linie);
  font-size: 0.93rem;
}

.bereichsmenue-titel {
  margin-right: 12px;
  color: var(--gedaempft);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bereichsmenue-liste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.bereichsmenue a {
  padding: 7px 12px;
  white-space: nowrap;
  border-radius: 6px;
  color: #29424c;
  text-decoration: none;
  font-weight: 700;
}

.bereichsmenue a:hover {
  color: var(--blau-dunkel);
  background: var(--weiss);
}

.bereichsmenue a[aria-current='page'] {
  color: var(--blau-dunkel);
  background: var(--weiss);
  box-shadow: inset 0 -3px var(--gold);
}

/* --- Nach oben. Erscheint erst nach etwa einer Bildschirmhoehe. --- */

.nach-oben {
  position: fixed;
  right: 15px;
  bottom: 100px;
  z-index: 99999990;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--weiss);
  background: var(--blau);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(18, 42, 52, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.15s ease-out;
}

.nach-oben:hover,
.nach-oben:focus-visible {
  color: var(--weiss);
  background: var(--blau-dunkel);
}

.nach-oben.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nach-oben {
    transition: none;
    transform: none;
  }
}

@media screen and (min-width: 64.0625em) {
  .nach-oben {
    right: 40px;
  }
}

/* --- Bausteine --- */

.bereich {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: clamp(58px, 8vw, 104px) var(--rand);
}

/* Flaechige und dunkle Baender gehen ueber die volle Breite, ihr Inhalt
   bleibt aber auf derselben Bahn wie die uebrigen Abschnitte. */
.bereich-flaeche,
.bereich-blau {
  max-width: none;
  padding-inline: 0;
}

.bereich-flaeche > *,
.bereich-blau > * {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.bereich-flaeche {
  background: var(--flaeche);
  border-block: 1px solid var(--linie);
}

.bereich-blau {
  color: var(--nacht-text);
  background: var(--nacht);
}

.bereich-blau h2,
.bereich-blau h3,
.bereich-blau h4,
.bereich-blau strong {
  color: var(--weiss);
}

.bereich-blau p,
.bereich-blau li {
  color: var(--nacht-text);
}

.bereich-blau a {
  color: var(--weiss);
}

.bereich-blau .hakenliste li::before {
  border-color: var(--gold);
}

/* Der Kicker ueber der Ueberschrift ist am 03.09.2026 entfallen: die
   Ueberschrift traegt sich selbst. Die Regel bleibt nur stehen, falls
   irgendwo noch ein alter Absatz auftaucht - dann faellt er nicht auf. */
.augenbraue {
  display: none;
}

.einleitung {
  max-width: 62ch;
  margin-top: 26px;
  color: #344f5b;
  font-size: clamp(1.05rem, 2vw, 1.24rem);
}

.bereich > p,
.bereich .fliesstext {
  max-width: 70ch;
  color: #3f5b66;
  font-size: 1.06rem;
}

.bereich-blau > p,
.bereich-blau .fliesstext {
  color: var(--nacht-text);
}

.bereich h2 + p,
.bereich h2 + .fliesstext {
  margin-top: 22px;
}

/* --- Aufmacher --- */

.aufmacher {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.74fr);
  align-items: center;
  align-content: center;
  min-height: min(76svh, 620px);
  gap: clamp(34px, 7vw, 96px);
  padding: clamp(46px, 7.5vw, 96px) max(var(--rand), (100% - var(--bahn)) / 2);
  border-bottom: 1px solid var(--linie);
  background:
    linear-gradient(115deg, var(--blau-zart) 0%, rgba(255, 255, 255, 0.9) 52%, var(--weiss) 100%);
}

.aufmacher > * {
  min-width: 0;
}

/* Ein Aufmacher, der die ganze Bahn nutzt: der Text steht allein. */
.aufmacher-schmal {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(58svh, 460px);
  padding-bottom: clamp(38px, 6vw, 68px);
}

/* Aufmacher mit Foto im Hintergrund. Die Klassen sind absichtlich fest
   verdrahtet statt inline gesetzt, damit die Content-Security-Policy
   ohne Ausnahme fuer style-Attribute auskommt. */
.aufmacher-bild {
  position: relative;
  color: var(--tinte);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.aufmacher-bild::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(234, 247, 252, 0.98) 0%, rgba(247, 252, 254, 0.93) 46%, rgba(255, 255, 255, 0.88) 100%);
}

.aufmacher-bild > * {
  position: relative;
}

.hero-diagnose {
  background-image: url('/assets/bilder/service-diagnostics.webp');
}

.hero-reparatur {
  background-image: url('/assets/bilder/service-repair.webp');
}

.hero-software {
  background-image: url('/assets/bilder/service-software.webp');
}

.hero-monitoring {
  background-image: url('/assets/bilder/managed-monitoring.webp');
}

.hero-ablage {
  background-image: url('/assets/bilder/service-automation.webp');
}

.hero-kontakt {
  background-image: url('/assets/bilder/service-contact.webp');
}

.hero-webcare {
  background-image: url('/assets/bilder/managed-webcare.webp');
}

.hero-hosting {
  background-image: url('/assets/bilder/managed-hosting.webp');
}

/* Bild im rechten Feld eines zweispaltigen Aufmachers (404). */
.aufmacher > div > img {
  display: block;
  width: 100%;
}

/* Ein Bild, das ueber die ganze Textbreite laufen soll. */
.breitbild {
  display: block;
  width: 100%;
  margin-top: 30px;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.knopf {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.knopf:hover {
  transform: translateY(-2px);
}

.knopf:active {
  transform: translateY(0);
}

.knopf-haupt {
  color: var(--weiss);
  background: var(--blau);
  box-shadow: 0 16px 34px rgba(0, 95, 140, 0.2);
}

.knopf-haupt:hover {
  background: var(--blau-dunkel);
}

.knopf-neben {
  color: var(--blau-dunkel);
  background: var(--weiss);
  border-color: var(--linie);
}

.knopf-neben:hover {
  border-color: var(--blau);
}

.knopf[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.bereich-blau .knopf-neben {
  color: var(--blau-dunkel);
  border-color: rgba(255, 255, 255, 0.3);
}

/* --- Vertrauenstafel ---
   Der Kasten mit "Mo-Fr / seit 2010 / 1 Ansprechpartner / 0 EUR".
   Dennis wollte ihn ausdruecklich behalten; er bekommt jetzt die Optik
   des Servicebretts aus der Vorschau statt des alten Goldbalkens. --- */

.tafel {
  display: grid;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--schatten);
}

.tafel::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(255, 176, 0, 0) 78%);
}

.tafel > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 26px;
}

.tafel > div + div {
  border-top: 1px solid var(--linie);
}

.tafel .wert {
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tafel .wert-klein {
  font-size: 2rem;
}

.tafel .bezeichnung {
  color: var(--gedaempft);
  font-size: 0.94rem;
  font-weight: 700;
  text-align: right;
}

/* Ab Tablet-Breite passen die Beschriftungen in eine Zeile; Dennis wollte
   den Umbruch bei "fester Ansprechpartner" am Rechner weghaben. Unterhalb
   von 620 px darf weiter umbrochen werden, sonst laeuft der Kasten ueber. */
@media (min-width: 621px) {
  .tafel-einzeilig .bezeichnung {
    white-space: nowrap;
  }
}

/* Zwischen 961 und 1100 px ist die Seitenspalte am schmalsten. Damit die
   einzeiligen Beschriftungen dort nicht aus dem Kasten laufen, ruecken
   Innenabstand, Abstand und Schriftgroesse eine Stufe zusammen. */
@media (min-width: 961px) and (max-width: 1100px) {
  .tafel-einzeilig > div {
    gap: 10px;
    padding: 15px 17px;
  }

  .tafel-einzeilig .bezeichnung {
    font-size: 0.86rem;
  }

  .tafel-einzeilig .wert {
    font-size: 2.3rem;
  }

  .tafel-einzeilig .wert-klein {
    font-size: 1.75rem;
  }
}

/* --- Merkmalsleiste ---
   Das dunkle Schlagwortband direkt unter dem Aufmacher. --- */

.merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 17px max(var(--rand), (100% - var(--bahn)) / 2);
  background: var(--nacht);
}

.merkmale span {
  padding: 5px 14px;
  color: #d9f2fb;
  background: transparent;
  border: 1px solid var(--nacht-linie);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

/* --- Grossflaechiger Anriss ---
   Ein Thema gross statt sechs Kacheln gleich laut. --- */

.anriss-gross {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  margin-top: 34px;
  padding: clamp(22px, 4vw, 34px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}

/* Gespiegelte Fassung: Text links, Bild rechts. Die Reihenfolge steht
   im Quelltext, damit Vorleseprogramme dieselbe Reihenfolge hören. */
.anriss-gross-rechts {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  background: var(--blau-zart);
}

.anriss-gross img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.anriss-gross h3 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.anriss-gross p {
  margin-top: 16px;
  color: #3f5b66;
}

/* --- Karten --- */

.karten {
  display: grid;
  /* 250px, damit vier Karten auf der vollen Bahn in eine Reihe passen
     und keine angebrochene Zeile mit einer einzelnen Karte entsteht. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  margin-top: 30px;
}

.karten article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--weiss);
}

.karten article > p {
  margin-top: 12px;
  color: var(--gedaempft);
}

.karten article > :last-child {
  margin-bottom: 0;
}

.bereich-blau .karten article {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--nacht-linie);
  border-top-color: var(--gold);
}

.bereich-blau .karten article > p {
  color: var(--nacht-text);
}

.karten-bild article {
  padding: 0;
  overflow: hidden;
  border-top-width: 1px;
  border-top-color: var(--linie);
}

.karten-bild article img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.karten-bild .karten-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 26px;
}

.karten-bild .karten-text p {
  margin-top: 12px;
  color: var(--gedaempft);
}

.karten-link {
  margin-top: auto;
  padding-top: 16px;
  font-weight: 800;
  text-decoration: none;
}

.karten-link::after {
  content: ' \203A';
}

.karten-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* --- Ablauf als Zeitstrahl ---
   Angelegt am 28.08.2026 fuer die SiteCare-Seite: fuenf Schritte
   untereinander an einer Linie, damit die Reihenfolge sichtbar wird
   und die Seite nicht nur aus Textkaesten besteht. --- */

.ablauf {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.ablauf > li {
  position: relative;
  margin-left: 23px;
  padding: 0 0 30px 52px;
  border-left: 3px solid var(--linie);
}

.ablauf > li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.ablauf .schritt-nummer {
  position: absolute;
  top: -4px;
  left: -25px;
  display: grid;
  width: 47px;
  height: 47px;
  place-items: center;
  color: var(--weiss);
  background: var(--blau);
  border: 4px solid var(--weiss);
  border-radius: 50%;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

.bereich-flaeche .ablauf .schritt-nummer {
  border-color: var(--flaeche);
}

.ablauf h3 {
  margin: 6px 0 0;
  font-size: 1.3rem;
}

.ablauf p {
  margin: 8px 0 0;
  max-width: 66ch;
  color: var(--gedaempft);
}

/* Der Rettungsschritt bekommt die Signalfarbe - das ist der Punkt,
   auf den es ankommt. */
.ablauf .schritt-rettung .schritt-nummer {
  color: var(--nacht);
  background: var(--gold);
}

.ablauf .schritt-rettung {
  border-left-color: var(--gold);
}

.ablauf .marke-neu {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  color: var(--nacht);
  background: var(--gold);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 3px;
}

/* --- Beispielbericht ---
   Zeigt die Infomail als kleines Abbild, damit man sieht, was man bekommt. --- */

.berichtvorschau {
  margin: 0;
}

.berichtvorschau .blatt {
  overflow: hidden;
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.berichtvorschau .blatt-kopf {
  padding: 16px 20px;
  color: var(--weiss);
  background: var(--nacht);
}

.berichtvorschau .blatt-kopf strong {
  display: block;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.32rem;
  line-height: 1.1;
}

.berichtvorschau .blatt-kopf span {
  font-size: 0.83rem;
  color: var(--nacht-text);
}

.berichtvorschau .blatt-inhalt {
  padding: 20px;
}

.berichtvorschau .fahne {
  margin: 0 0 18px;
  padding: 11px 14px;
  background: #eaf6f0;
  font-weight: 800;
  color: #14603d;
}

.berichtvorschau .fahne-gold {
  background: #fff4dc;
  color: #6f4c00;
}

.berichtvorschau h4 {
  margin: 18px 0 6px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.berichtvorschau h4:first-of-type {
  margin-top: 0;
}

.berichtvorschau ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.94rem;
}

.berichtvorschau li {
  padding: 3px 0;
}

.berichtvorschau .haken {
  color: #14603d;
  font-weight: 800;
}

.berichtvorschau .pfeil {
  color: #6f4c00;
  font-weight: 800;
}

.berichtvorschau .leise {
  color: var(--gedaempft);
}

.berichtvorschau figcaption {
  margin-top: 14px;
  color: var(--gedaempft);
  font-size: 0.88rem;
}

/* --- Zweispalter --- */

.spalten {
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 6vw, 78px);
  align-items: start;
}

.spalten > div > p,
.spalten > div > ul {
  max-width: 68ch;
  color: #3f5b66;
}

.spalten > div > img {
  display: block;
  width: 100%;
  margin-top: 26px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bereich-blau .spalten > div > p,
.bereich-blau .spalten > div > ul {
  color: var(--nacht-text);
}

/* --- Schritte --- */

.schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  margin-top: 30px;
}

.schritte article {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--linie);
  background: var(--weiss);
}

.schritte .nummer {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--nacht);
  background: var(--gold);
  border-radius: 999px;
  font-weight: 900;
}

.schritte h3 {
  color: var(--blau-dunkel);
  font-size: 1.4rem;
}

.schritte p {
  margin-top: 10px;
  color: var(--gedaempft);
}

.bereich-blau .schritte article {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--nacht-linie);
}

.bereich-blau .schritte h3 {
  color: var(--weiss);
}

.bereich-blau .schritte p {
  color: var(--nacht-text);
}

/* --- Listen --- */

.hakenliste {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.hakenliste li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 30px;
}

.hakenliste li::before {
  content: '';
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--blau);
  border-bottom: 3px solid var(--blau);
  transform: rotate(-45deg);
}

/* --- Kontaktangaben --- */

.kontaktkarte {
  padding: 26px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
}

.bereich-flaeche .kontaktkarte {
  background: var(--weiss);
}

.kontaktkarte dl {
  margin: 0;
}

.kontaktkarte dt {
  margin-top: 16px;
  color: var(--gedaempft);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kontaktkarte dt:first-child {
  margin-top: 0;
}

.kontaktkarte dd {
  margin: 4px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* --- Formular --- */

.formularblock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
  padding: 26px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
}

.bereich-flaeche .formularblock {
  background: var(--weiss);
}

/* Die Zeilen im Feld bleiben auf ihrer natuerlichen Hoehe und liegen oben an.
   Ohne das dehnt der Grid die Zeilen auf die Hoehe der Nachbarspalte, und ein
   Auswahlfeld neben einem Feld mit Hinweistext rutscht nach unten (28.08.2026). */
.formularblock label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: #2f424b;
  font-weight: 800;
}

.formularblock fieldset {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 18px 18px;
  border: 1px solid #a9cfde;
  border-radius: 6px;
  background: var(--weiss);
}

.formularblock legend {
  padding: 0 6px;
  color: #2f424b;
  font-weight: 800;
}

.formularblock fieldset .zustimmung {
  background: transparent;
}

.formularblock .hinweis {
  color: var(--gedaempft);
  font-size: 0.86rem;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid #a9cfde;
  border-radius: 6px;
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: #63808b;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blau);
  outline: 3px solid rgba(0, 140, 187, 0.24);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

.ganze-breite {
  grid-column: 1 / -1;
}

.zustimmung {
  grid-column: 1 / -1;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  font-weight: 600;
}

.zustimmung input {
  width: 22px;
  height: 22px;
  margin-top: 3px;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.meldung {
  grid-column: 1 / -1;
  padding: 16px 18px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  font-weight: 700;
}

.meldung-erfolg {
  color: #14603d;
  background: #eaf6f0;
  border-color: #b8ddc9;
  border-top-color: var(--gruen);
}

.meldung-fehler {
  color: var(--rot);
  background: #fdf1f1;
  border-color: #e8c2c2;
  border-top-color: var(--rot);
}

/* --- Rechtstexte --- */

.rechtstext {
  max-width: 74ch;
  overflow-wrap: anywhere;
}

.rechtstext h2 {
  max-width: none;
  margin: 48px 0 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.rechtstext h2:first-child {
  margin-top: 0;
}

.rechtstext h3 {
  margin: 30px 0 8px;
  font-size: 1.3rem;
}

.rechtstext h4 {
  margin: 22px 0 6px;
}

.rechtstext p,
.rechtstext li {
  color: #3b4d55;
}

.rechtstext ul,
.rechtstext ol {
  padding-left: 22px;
}

.rechtstext li {
  margin-bottom: 8px;
}

/* --- Fussbereich --- */

.fuss {
  padding: clamp(44px, 6vw, 72px) var(--rand) 26px;
  color: var(--nacht-text);
  background: var(--nacht);
}

.fuss-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
  max-width: var(--bahn);
  margin-inline: auto;
}

.fuss h2 {
  max-width: none;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fuss p,
.fuss li {
  color: var(--nacht-text);
  font-size: 0.96rem;
}

.fuss ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss li {
  margin-bottom: 7px;
}

.fuss a {
  color: var(--weiss);
}

.fuss-abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: var(--bahn);
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--nacht-linie);
  font-size: 0.9rem;
}

.fuss-abschluss img {
  width: 170px;
  height: auto;
}

/* --- Portraet und Personen-Anriss ---
   Angelegt am 27.08.2026 mit dem Foto von Dennis. --- */

.portraet {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.portraet img {
  width: 100%;
  height: auto;
  border: 8px solid var(--blau-zart);
}

.portraet h2 {
  margin-top: 0;
}

.anriss-person {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.anriss-person img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 8px solid rgba(255, 255, 255, 0.14);
}

/* --- Preistafeln. Angelegt am 27.08.2026 fuer die Preisseiten. --- */

.preisliste {
  width: 100%;
  margin: 26px 0 0;
  border-collapse: collapse;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.preisliste caption {
  margin-bottom: 12px;
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

.preisliste th,
.preisliste td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}

.preisliste thead th {
  border-bottom: 2px solid var(--blau);
  color: var(--gedaempft);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.preisliste tbody tr:nth-child(even) {
  background: var(--flaeche);
}

.bereich-flaeche .preisliste tbody tr:nth-child(even) {
  background: var(--weiss);
}

.preisliste .betrag {
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.preisliste .hinweis {
  display: block;
  color: var(--gedaempft);
  font-size: 0.92rem;
}

.preishinweis {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
  color: #3f5b66;
  font-size: 0.98rem;
}

.bereich-flaeche .preishinweis {
  background: var(--weiss);
}

/* --- Fragenbereich (FAQ) ----------------------------------------
   Angelegt am 27.08.2026. Jede Frage ist ein <details>, damit die
   Seite ohne JavaScript funktioniert und Vorleseprogramme sie
   sauber ankuendigen.
   ---------------------------------------------------------------- */

.fragen {
  margin-top: 30px;
  border-top: 1px solid var(--linie);
}

.fragen details {
  border-bottom: 1px solid var(--linie);
}

.fragen summary {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 4px;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinte);
  cursor: pointer;
  list-style: none;
}

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

.fragen summary::after {
  content: '+';
  flex: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blau);
}

.fragen details[open] summary::after {
  content: '\2013';
}

.fragen summary:hover {
  color: var(--blau-dunkel);
}

.fragen .antwort {
  padding: 0 4px 22px;
  max-width: 72ch;
}

.fragen .antwort p {
  margin: 0 0 12px;
  color: #3f5b66;
}

.fragen .antwort :last-child {
  margin-bottom: 0;
}

.fragen .antwort ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: #3f5b66;
}

.fragen .antwort li {
  margin-bottom: 6px;
}

/* --- Ein einziger gestalterischer Moment: der Aufmacher faehrt beim
   Laden ruhig ein. Ausgangszustand ist die fertige Ansicht, damit ohne
   Animation nichts fehlt. --- */

@media (prefers-reduced-motion: no-preference) {
  .aufmacher > * {
    animation: einblenden 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .aufmacher > * + * {
    animation-delay: 0.1s;
  }

  @keyframes einblenden {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}

/* --- Schmale Bildschirme --- */

@media (max-width: 960px) {
  .aufmacher,
  .spalten,
  .anriss-gross,
  .portraet,
  .anriss-person {
    grid-template-columns: 1fr;
  }

  .aufmacher {
    align-items: start;
  }

  .portraet img {
    max-width: 340px;
  }

  .anriss-person img {
    max-width: 240px;
  }
}

@media (max-width: 800px) {
  html {
    scroll-padding-top: 16px;
  }

  .kopf {
    position: static;
  }

  .js .menue-schalter {
    display: inline-flex;
  }

  .js .hauptmenue {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--linie);
  }

  .js .hauptmenue.offen {
    display: flex;
  }

  .hauptmenue a {
    padding: 12px;
  }

  .hauptmenue .menue-aktion {
    margin-left: 0;
    margin-top: 6px;
  }

  /* Untermenue auf schmalen Bildschirmen: einfach eingerueckt darunter,
     nichts zum Aufklappen. */
  .js .hauptmenue .untermenue {
    position: static;
    display: block;
    min-width: 0;
    padding: 0 0 0 18px;
    border: 0;
    border-left: 3px solid var(--linie);
    box-shadow: none;
  }

  .js .hauptmenue .menue-punkt > a::after {
    content: '';
  }

  .formularblock {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .bereichsmenue {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0 10px var(--rand);
  }

  .bereichsmenue-titel {
    margin: 0;
  }

  /* Die Punkte bleiben in einer Zeile und lassen sich seitlich schieben.
     Untereinander wuerden sie den halben Bildschirm fuellen. */
  .bereichsmenue-liste {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-right: var(--rand);
    scrollbar-width: none;
  }

  .bereichsmenue-liste::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  .tafel > div {
    padding: 15px 20px;
  }

  .tafel .wert {
    font-size: 2.2rem;
  }

  .tafel .wert-klein {
    font-size: 1.7rem;
  }

  .preisliste,
  .preisliste tbody,
  .preisliste tr,
  .preisliste td {
    display: block;
    width: 100%;
  }

  .preisliste caption {
    display: block;
    width: 100%;
  }

  .preisliste thead {
    display: none;
  }

  .preisliste tr {
    margin-bottom: 16px;
    border: 1px solid var(--linie);
    border-top: 3px solid var(--gold);
    background: var(--weiss);
  }

  .preisliste tbody tr:nth-child(even) {
    background: var(--flaeche);
  }

  .preisliste td {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .preisliste td + td {
    padding-top: 2px;
    color: var(--gedaempft);
    font-size: 0.92rem;
  }

  .preisliste .betrag {
    padding-top: 6px;
    padding-bottom: 14px;
    color: var(--blau-dunkel);
    font-size: 1.7rem;
    text-align: left;
  }
}

/* --- CCM19-Einstellungssymbol. Angelegt am 28.08.2026 -----------------
   CCM19 setzt das kleine Zahnrad fest nach unten links (15px, ab 1025px
   40px). Der gebuchte Tarif erlaubt kein eigenes CSS im CCM19-Konto,
   deshalb spiegeln wir es hier nach rechts. --- */
.ccm-settings-summoner {
  left: auto !important;
  right: 15px !important;
  inset-inline-start: auto !important;
  inset-inline-end: 15px !important;
}

@media screen and (min-width: 64.0625em) {
  .ccm-settings-summoner {
    right: 40px !important;
    inset-inline-end: 40px !important;
  }
}

/* ==================================================================
   Mailcheck - eigene Bausteine
   Angelegt am 04.09.2026. Alles darueber ist die unveraenderte
   Stilvorlage von it-schniering.de (Neubau vom 03./04.09.2026).
   Hier stehen nur die Teile, die es dort nicht gibt: Ampel, Befund-
   zeilen, Statusmarken, Uploadfeld und Ablegeflaeche. Sie benutzen
   dieselben Farben, Schriften, Kanten und Abstaende wie die Hauptseite:
   weisse Kaesten mit duenner Linie und einem 3px-Akzent oben,
   keine Rundungen ausser bei Knoepfen und Pillen.
   ================================================================== */

/* --- Bereiche ---
   Die Berichtsseite reiht viele Abschnitte aneinander. Zwei einfache
   Bereiche hintereinander bekommen nur einmal Luft; ein flaechiges
   Band behaelt seinen vollen Abstand, weil es eine eigene Kante hat. */

.bereich:not(.bereich-flaeche):not(.bereich-blau)
  + .bereich:not(.bereich-flaeche):not(.bereich-blau) {
  padding-top: 0;
}

/* Der Innenabstand des flaechigen Bandes sitzt am Band selbst, damit
   Ueberschrift und Kastenrand auf derselben Linie stehen. Die
   Inhaltsbahn bleibt dieselbe wie bei allen anderen Abschnitten. */
.bereich-flaeche {
  padding-inline: max(var(--rand), (100% - var(--bahn)) / 2);
}

.bereich-flaeche > * {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* --- Kasten ---
   Das Gegenstueck zu ".karten article" der Hauptseite, nur einzeln. --- */

.karte {
  margin-top: 26px;
  padding: 26px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
}

.karte h2,
.karte h3 {
  margin-bottom: 10px;
}

.karte .statusmarke + h3 {
  margin-top: 12px;
}

.karte ul {
  margin: 12px 0 0;
  padding-left: 22px;
  color: #3f5b66;
}

.karte li {
  margin: 6px 0;
}

.karte > :last-child {
  margin-bottom: 0;
}

.hinweisleiste {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--blau-zart);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  color: #26414d;
  font-size: 0.98rem;
}

/* --- Ampel ---
   Das Ergebnis in einem Wort. Farbe und Flaeche kommen aus dem
   Bericht, deshalb steht hier nur das Geruest. Die dicke Kante oben
   ist derselbe Akzent wie bei allen Kaesten, nur kraeftiger. --- */

.ampel {
  margin-top: 26px;
  padding: clamp(22px, 4vw, 32px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top-width: 6px;
}

.ampel .wort {
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
}

.ampel p {
  margin: 10px 0 0;
  max-width: 70ch;
  font-size: 1.06rem;
}

/* --- Statusmarke ---
   Die kleine Pille an Befunden, Anhaengen und Links. Sie sieht aus wie
   die Schlagwoerter der Merkmalsleiste, steht aber auf hellem Grund. --- */

.statusmarke {
  display: inline-block;
  padding: 4px 13px;
  color: var(--blau-dunkel);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}

.m-kritisch {
  color: #a6182a;
  background: #fdecee;
  border-color: #f2c3c9;
}

.m-auffaellig {
  color: #a86a00;
  background: #fdf3e2;
  border-color: #f0dcb4;
}

.m-hinweis {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  border-color: var(--linie);
}

.m-unauffaellig {
  color: #14603d;
  background: #eaf6f0;
  border-color: #b8ddc9;
}

/* --- Befundzeile ---
   Bezeichnung links, Angabe rechts. "wert" heisst hier etwas anderes
   als in der Vertrauenstafel, deshalb die eigene Regel. --- */

.zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
}

.zeile:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.zeile .name {
  flex: 0 0 230px;
  color: var(--gedaempft);
  font-weight: 700;
}

.zeile .wert {
  flex: 1 1 240px;
  color: var(--tinte);
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* In der Vertrauenstafel duerfen lange Woerter wie "Unauffaellig"
   umbrechen; auf der Hauptseite stehen dort nur kurze Angaben. */
.tafel .wert {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- Gesperrte Adresse ---
   Link-Ziele werden gezeigt, aber nie anklickbar gemacht. --- */

.gesperrt {
  display: inline-block;
  padding: 8px 12px;
  color: #2f424b;
  background: var(--flaeche);
  border: 1px dashed #a9cfde;
  border-radius: 6px;
  font-size: 0.9rem;
  word-break: break-all;
}

code {
  padding: 2px 7px;
  color: #2f424b;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* --- Knoepfe ohne Klasse ---
   Rueckmeldung und Upload benutzen echte <button>. Sie sollen aussehen
   wie ".knopf-haupt" bzw. ".knopf-neben" der Hauptseite. Der
   Menueschalter hat eine eigene Klasse und bleibt davon unberuehrt. --- */

form.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

form.feedback button,
#uploadknopf {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  color: var(--weiss);
  background: var(--blau);
  border: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(0, 95, 140, 0.2);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

form.feedback button:hover,
#uploadknopf:hover {
  background: var(--blau-dunkel);
  transform: translateY(-2px);
}

form.feedback button:active,
#uploadknopf:active {
  transform: translateY(0);
}

form.feedback button.leise {
  color: var(--blau-dunkel);
  background: var(--weiss);
  border-color: var(--linie);
  box-shadow: none;
}

form.feedback button.leise:hover {
  background: var(--weiss);
  border-color: var(--blau);
}

/* --- Uploadfeld ---
   Der Handlungskasten der Seite. Gold oben, wie die Kontaktkarte und
   der Formularblock auf der Hauptseite. --- */

.uploadfeld {
  margin-top: 26px;
  padding: 26px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gold);
}

.bereich-flaeche .uploadfeld {
  background: var(--weiss);
}

.uploadfeld form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.uploadfeld > p {
  max-width: 70ch;
  color: var(--gedaempft);
  font-size: 0.98rem;
}

.adressfeld {
  grid-column: 1 / -1;
  min-width: 0;
}

.adressfeld label {
  display: block;
  margin-bottom: 6px;
  color: #2f424b;
  font-weight: 800;
}

.adressfeld input[type='email'] {
  min-height: 48px;
}

.feldhinweis {
  margin: 6px 0 0;
  color: var(--gedaempft);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Ablegeflaeche fuer Maildateien --- */

.ablegeflaeche {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 32px);
  background: var(--blau-zart);
  border: 2px dashed var(--blau);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ablegeflaeche:hover,
.ablegeflaeche:focus-within {
  background: #ddf1f9;
  border-color: var(--blau-dunkel);
}

.ablegeflaeche.ist-aktiv {
  background: #d2ecf7;
  border-style: solid;
  border-color: var(--blau-dunkel);
}

.ablegeflaeche.ist-fertig {
  background: #eaf6f0;
  border-color: var(--gruen);
}

.ablege-symbol {
  color: var(--blau);
  line-height: 0;
}

.ablege-symbol svg {
  max-width: 100%;
  height: auto;
}

.ablege-titel {
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
}

.ablege-text,
.ablege-oder {
  max-width: 42ch;
  color: var(--gedaempft);
  font-size: 0.96rem;
}

.ablege-link {
  color: var(--blau-dunkel);
  font-weight: 700;
  text-decoration: underline;
}

.ablege-datei {
  color: var(--blau-dunkel);
  font-size: 0.95rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ablege-datei.ist-fehler {
  color: var(--rot);
}

.ablege-datei:empty {
  display: none;
}

/* Das Dateifeld bleibt bedienbar, ist aber unsichtbar. */
.ablegeflaeche input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Ohne JavaScript bleibt ein sichtbares Dateifeld und der Knopf. */
.uploadfeld input[type='file'] {
  min-height: 48px;
  max-width: 100%;
  padding: 10px;
}

/* Mit JavaScript startet die Pruefung sofort, der Knopf entfaellt. */
.uploadfeld form.mit-ablage {
  grid-template-columns: minmax(0, 1fr);
}

.uploadfeld form.mit-ablage #uploadknopf {
  display: none;
}

/* Liegt die Datei schon bereit, fehlt aber die Adresse, kommt der Knopf zurueck. */
.uploadfeld form.mit-ablage.wartet-auf-adresse #uploadknopf {
  display: inline-flex;
}

/* --- Schmale Bildschirme --- */

@media (max-width: 720px) {
  .uploadfeld form {
    grid-template-columns: 1fr;
  }

  .zeile .name {
    flex: 1 1 100%;
  }
}

/* --- Berichtsseite (bericht.php) ---
   Nur hier, angehaengt ueber die Klasse "seite-bericht" am <body>.
   Startseite, Warteseite und Upload behalten ihre Abstaende unveraendert.

   1. Gleiche Kartenbreite in allen Abschnitten.
      Im gemeinsamen Baustein tragen bei ".bereich-flaeche" und
      ".bereich-blau" die Kinder den Seitenrand, bei ".bereich" dagegen
      der Abschnitt selbst. Dadurch wird eine ".karte" im grauen Band um
      2x --rand breiter als eine ".karte" im weissen Abschnitt. Hier
      wandert der Rand auf den Abschnitt, die Bahn der Kinder wird um
      denselben Betrag verkleinert - damit ist die Inhaltsbreite in
      beiden Faellen min(100% - 2*--rand, --bahn - 2*--rand).

   2. Weniger Leerraum. Der Bericht besteht aus rund acht kurzen
      Abschnitten; mit clamp(58px, 8vw, 104px) standen bis zu 208px
      zwischen zwei Karten. Der Aufmacher behaelt seine Luft, er hat
      eigene Abstaende. --- */

.seite-bericht .bereich {
  padding-block: clamp(20px, 2.5vw, 34px);
}

.seite-bericht .bereich-flaeche,
.seite-bericht .bereich-blau {
  padding-inline: var(--rand);
}

.seite-bericht .bereich-flaeche > *,
.seite-bericht .bereich-blau > * {
  max-width: calc(var(--bahn) - 2 * var(--rand));
  margin-inline: auto;
  padding-inline: 0;
}

/* Steht die Karte ganz oben im Abschnitt, ist ihr Aussenabstand
   doppelter Leerraum - der Abschnitt bringt ihn schon mit. */
.seite-bericht .bereich > .karte:first-child,
.seite-bericht .bereich > .ampel:first-child {
  margin-top: 0;
}

/* 3. Ruhigere Abschnittsueberschriften.
   Die allgemeine Regel laesst h2 bis clamp(2rem, 4.4vw, 3.5rem) wachsen -
   bei 1440px sind das 56px. Auf der Startseite ist das richtig, dort
   traegt eine Ueberschrift einen ganzen Abschnitt. Der Bericht hat neun
   kurze Abschnitte hintereinander; jede Ueberschrift wirkt dann wie ein
   eigener Seitentitel und macht den groessten Teil des verbliebenen
   Abstands aus. Hier bleibt sie klar ueber Fliesstext und h3 (1.5rem),
   aber deutlich unter der h1 des Aufmachers. */
.seite-bericht .bereich h2 {
  max-width: 34ch;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.18;
}

/* Bei 56px trug die Ueberschrift ihren Luftraum selbst. Kleiner braucht
   sie etwas Fuehrung nach unten, damit der Absatz nicht klebt. Die
   Aussenabstaende benachbarter Geschwister fallen zusammen, es gilt also
   jeweils der groessere der beiden Werte. */
.seite-bericht .bereich > h2 {
  margin-bottom: 10px;
}

.seite-bericht .bereich h2 + p,
.seite-bericht .bereich h2 + .fliesstext {
  margin-top: 14px;
}

.seite-bericht .karte h2 {
  margin-bottom: 8px;
}