/* =============================================================================
   D&K PROPERTY SERVICES — Stylesheet (v6 "Vorschau")
   -----------------------------------------------------------------------------
   Aufbau:
     01  Design-Tokens (Farben, Typo, Raster, Bewegung, Ebenen)
     02  Dark Mode
     03  Reset & Basis
     04  Layout-Primitive (Shell, Section, Grid)
     05  Typografie-Bausteine
     06  Buttons & Links
     07  Kopfbereich: Topbar, Masthead, Navigation, Mobilmenue
     08  Hero (Startseite) & Page-Hero (Unterseiten)
     09  Inhaltskomponenten (Karten, USP, Schritte, Zahlen, Slider, Galerie ...)
     10  Formulare & Kontakt
     11  Footer, Cookie-Hinweis, schwebende Aktionen
     12  Bewegungs-System (nur aktiv, wenn JS laeuft und Bewegung erlaubt ist)
     13  Responsive-Feinschliff
     14  Reduzierte Bewegung & Druck

   Grundregel fuer Animationen: Startzustaende (opacity/transform) haengen an
   `html.js-motion`. Fehlt JavaScript oder ist "prefers-reduced-motion" aktiv,
   wird die Klasse nie gesetzt - dann ist die Seite sofort vollstaendig sichtbar.
   ========================================================================== */

/* ==========================================================================
   01 · DESIGN-TOKENS
   ========================================================================== */
:root {
  /* -- Marke: Ausgangswerte aus dem bestehenden Logo/Stylesheet ------------ */
  --brand:        #205e81;   /* Primaerfarbe (unveraendert uebernommen)       */
  --brand-900:    #07202c;
  --brand-800:    #0b2c3d;
  --brand-700:    #11405a;
  --brand-600:    #175573;
  --brand-400:    #3a89b3;
  --brand-300:    #7db8d6;
  --brand-100:    #dceaf3;
  --accent:       #2a90f1;   /* Sekundaer: helles Blau, Fokus & Links dunkel  */
  --signal:       #2f9e8a;   /* Bestaetigungs-/Haekchenfarbe (aus #38b6a0)    */
  --signal-soft:  #e4f3ef;
  --warm:         #e8a33d;   /* Notfall / Dringlichkeit                       */
  --warm-ink:     #3a2600;

  /* -- Neutrale Flaechen: leicht warm, damit es nicht nach SaaS aussieht --- */
  --paper:        #ffffff;   /* Karten, Standardhintergrund                   */
  --paper-2:      #f6f3ee;   /* getoente Abschnitte (warmes Sand)             */
  --paper-3:      #ece6dc;   /* Trennflaechen, Chips                          */
  --ink:          #14212a;   /* Fliesstext                                    */
  --ink-2:        #4c5a63;   /* Sekundaertext (Kontrast > 7:1 auf Weiss)      */
  --ink-3:        #5f6e77;   /* gedaempft, aber ueber 4.5:1 auf Weiss         */
  --heading:      #0b232f;
  --line:         #e6e0d6;   /* Rahmen                                        */
  --line-strong:  #d3cabb;

  /* -- Farben auf dunklem Grund ------------------------------------------- */
  --on-dark:      #eef6fb;
  --on-dark-2:    #c2d6e2;
  --on-dark-3:    #9db8c8;

  /* -- Typografie --------------------------------------------------------- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:   clamp(2.75rem, 7.2vw, 6rem);
  --fs-h1:     clamp(2.25rem, 5.2vw, 4rem);
  --fs-h2:     clamp(1.85rem, 3.9vw, 3rem);
  --fs-h3:     clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead:   clamp(1.05rem, 1.35vw, 1.22rem);
  --fs-body:   1rem;
  --fs-small:  .9rem;

  --lh-display: 0.96;
  --lh-body:    1.72;
  --tracking-display: -0.005em;
  --tracking-eyebrow:  0.18em;

  /* -- Raster & Abstaende ------------------------------------------------- */
  --shell:      1240px;   /* Standard-Containerbreite                         */
  --shell-slim: 860px;    /* Lesebreite fuer Fliesstext / Rechtstexte         */
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --space-1:  .35rem;
  --space-2:  .7rem;
  --space-3:  1.1rem;
  --space-4:  1.6rem;
  --space-5:  2.4rem;
  --space-6:  3.4rem;
  --space-7:  clamp(3.5rem, 8vw, 7rem);   /* vertikaler Abschnittsrhythmus    */

  /* -- Radien & Schatten -------------------------------------------------- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow:    0 4px 12px rgba(0, 0, 0, .07);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, .08);

  /* -- Bewegung ----------------------------------------------------------- */
  --dur-fast:  .18s;
  --dur:       .32s;
  --dur-slow:  .7s;
  --ease:      cubic-bezier(.22, .68, .28, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* -- Z-Index-Ebenen (zentral, damit nichts zufaellig ueberlagert) ------- */
  --z-base:      1;
  --z-sticky:   100;
  --z-nav:      120;
  --z-drawer:   130;
  --z-float:    140;
  --z-cookie:   160;
  --z-modal:    180;   /* Menuefenster liegt ueber Kontaktknoepfen und Hinweis */
  --z-progress: 200;

  color-scheme: light;
}

/* ==========================================================================
   02 · DARK MODE
   ========================================================================== */
html[data-theme="dark"] {
  --paper:       #101c24;
  --paper-2:     #0b161d;
  --paper-3:     #18272f;
  --ink:         #e7eef3;
  --ink-2:       #aabbc5;
  --ink-3:       #8497a2;
  --heading:     #ffffff;
  --line:        #24363f;
  --line-strong: #33484f;
  --brand-100:   #16323f;
  --signal-soft: #102d29;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
  --shadow:      0 4px 12px rgba(0, 0, 0, .4);
  --shadow-lg:   0 10px 28px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ==========================================================================
   03 · RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Off-Canvas-Menue und Parallax-Ebenen duerfen keine Seitwaerts-Scrollleiste
     erzeugen - im Original war genau das die Ursache fuer horizontales Scrollen. */
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Lange E-Mail-Adressen und URLs sollen notfalls umbrechen statt die Seite
     zu verbreitern. */
  overflow-wrap: break-word;
}
body.nav-open { overflow: hidden; }

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

a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-600); }
/* :not(.btn) ist wichtig — sonst uebertrumpft diese Regel (hoehere Spezifitaet)
   die Textfarbe der Buttons, und im Dark Mode stuende hellblaue Schrift auf
   blauem Grund. */
html[data-theme="dark"] a:not(.btn):not(.skip-link) { color: var(--brand-300); }
html[data-theme="dark"] a:not(.btn):not(.skip-link):hover { color: var(--accent); }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* Sichtbarer Fokus - Pflicht fuer Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: var(--z-progress);
  background: var(--brand);
  color: #fff;
  padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

::selection { background: var(--brand); color: #fff; }

/* ==========================================================================
   04 · LAYOUT-PRIMITIVE
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--slim { max-width: var(--shell-slim); }

.section { padding-block: var(--space-7); position: relative; }
.section--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }
.section--flush-top { padding-top: 0; }

/* Flaechenvarianten */
.section--tint  { background: var(--paper-2); }
.section--paper { background: var(--paper); }
.section--deep {
  background: var(--brand-900);
  color: var(--on-dark);
}
.section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section--deep p { color: var(--on-dark-2); }
.section--deep :focus-visible { outline-color: #fff; }

.section--edge { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--space-3); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ==========================================================================
   05 · TYPOGRAFIE
   ========================================================================== */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 .45em;
  text-wrap: balance;
}
h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 0 0 .5em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.05rem; }

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

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 62ch;
}
.section--deep .lead { color: var(--on-dark-2); }

/* Rubriken bewusst in normaler Schreibweise: Versalien mit weiter Laufweite
   ueber jedem Abschnitt sind ein verbreitetes Erkennungsmerkmal generierter
   Seiten und tragen keine Information. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: 0;
  color: var(--ink-3);
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}
html[data-theme="dark"] .eyebrow { color: var(--brand-300); }
.section--deep .eyebrow, .hero .eyebrow, .pagehero .eyebrow { color: var(--brand-300); }
.center .eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}

.section-head { max-width: 46rem; margin-bottom: var(--space-6); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-bottom: .3em; }

/* Fliesstext-Bereiche (Leistungs- und Rechtsseiten)
   `overflow-wrap: anywhere` wirkt auch auf die Mindestbreite eines Elements.
   Das ist hier entscheidend: In den AGB steht im Muster-Widerrufsformular eine
   Unterschriftslinie aus 47 Unterstrichen, und die Kontoseite nennt einen
   langen Dateinamen. Solche nicht trennbaren Ketten zwingen die Seite sonst
   auf 380 px Mindestbreite — kleine Handys zoomen dann heraus.
   `hyphens: auto` sorgt zusaetzlich fuer saubere Trennung deutscher
   Komposita (funktioniert, weil <html lang="de"> gesetzt ist). */
.prose {
  max-width: 68ch;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.prose code, .notice code { overflow-wrap: anywhere; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.2em; }
.prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 1.9em; }
.prose > :first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: none; padding: 0; margin: 1.3em 0; }
.prose ul li {
  position: relative;
  padding: .6rem 0 .6rem 2.1rem;
  border-bottom: 1px solid var(--line);
}
.prose ul li:last-child { border-bottom: 0; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .95rem;
  width: 20px; height: 20px;
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 5.5 12.7 4 14.2 9 19 20 8l-1.5-1.5z'/%3E%3C/svg%3E") center / 15px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 5.5 12.7 4 14.2 9 19 20 8l-1.5-1.5z'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.prose ul li strong { color: var(--heading); }
.prose ol { padding-left: 1.3rem; }
.prose ol li { margin-bottom: .5rem; }

/* ==========================================================================
   06 · BUTTONS & LINKS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;                 /* komfortables Touch-Ziel */
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; }

.btn--ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="dark"] .btn--ghost { color: var(--brand-300); }

.btn--light { background: #fff; color: var(--brand-800); }
.btn--light:hover { background: var(--brand-100); color: var(--brand-900); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: #fff; color: var(--brand-800); border-color: #fff; }

.btn--warm { background: var(--warm); color: var(--warm-ink); }
.btn--warm:hover { background: #d8942f; color: var(--warm-ink); }

.btn--lg { font-size: 1.12rem; padding: 1.1rem 2.3rem; min-height: 56px; }
.btn--sm { font-size: 1.02rem; padding: .8rem 1.4rem; min-height: 46px; }
.btn--block { width: 100%; }

/* Dezenter Glanz beim Hover - nur auf Zeigergeraeten */
/* Der frueher hier stehende Glanzstreifen beim Hover war ein reiner
   Zierverlauf ohne Funktion und ist entfallen. Die Schaltflaechen zeigen
   den Hover jetzt allein ueber den Farbwechsel. */

/* Textlink mit wanderndem Pfeil */
.arrowlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}
html[data-theme="dark"] .arrowlink { color: var(--brand-300); }
.arrowlink svg { width: 1.1em; height: 1.1em; transition: transform var(--dur) var(--ease); }
.arrowlink:hover svg { transform: translateX(5px); }

/* ==========================================================================
   07 · TOPBAR · MASTHEAD · NAVIGATION
   ========================================================================== */
.topbar {
  background: var(--brand-900);
  color: var(--on-dark-2);
  font-size: .95rem;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1.4rem;
  padding-block: .5rem;
}
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.3rem; margin: 0; }
.topbar a { color: #e8f2f8; display: inline-flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.topbar__hours { margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.topbar__ig img { width: 16px; height: 16px; border-radius: 4px; }

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Die Kopfleiste war frueher milchig durchscheinend und brauchte dafuer einen
   Rueckfall fuer aeltere Browser. Sie ist jetzt in jedem Fall deckend. */
.masthead.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
/* Bewusst grosszuegig: Der Kopfbereich ist die Hauptorientierung und muss
   auch mit nachlassender Sehkraft gut erfassbar sein. Beim Scrollen faellt
   er dezent zusammen, damit mehr Inhalt sichtbar bleibt. */
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .9rem;
  transition: padding var(--dur) var(--ease);
}
.masthead.is-stuck .masthead__inner { padding-block: .4rem; }

/* -- Logo ---------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; }
/* Bildmarke (Haus + Blaetter) — breiter als hoch, deshalb Hoehe fuehrend. */
.logo__mark {
  height: 66px;
  width: auto;
  flex: none;
  object-fit: contain;
  transition: transform var(--dur) var(--ease), height var(--dur) var(--ease);
}
/* Auf dunklem Grund wird die dunkelblaue Marke rein weiss eingefaerbt —
   ohne Platte, der transparente Hintergrund bleibt erhalten.
   brightness(0) macht alle Farbwerte schwarz, invert(1) daraus weiss; die
   Alpha-Kanten bleiben dabei unangetastet, die Marke bleibt sauber
   freigestellt. */
html[data-theme="dark"] .masthead .logo__mark { filter: brightness(0) invert(1); }

/* Volle Wort-Bild-Marke im Footer: der Fussbereich ist immer dunkel,
   deshalb unabhaengig vom Farbschema immer weiss. */
.logo__mark--full {
  height: auto;
  width: 150px;
  filter: brightness(0) invert(1);
}
/* Der Schriftzug steckt bereits in der vollen Marke — daneben waere er doppelt. */
.footer-logo .logo__text { display: none; }
.logo:hover .logo__mark { transform: rotate(-4deg); }
.logo__text { font-family: var(--font-display); text-transform: uppercase; line-height: 1; }
.logo__text b { display: block; font-size: 1.55rem; font-weight: 700; letter-spacing: .02em; color: var(--heading); }
.logo__text span { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .22em; color: var(--ink-3); margin-top: .25rem; }
.masthead.is-stuck .logo__mark { height: 50px; }

/* -- Hauptnavigation (Desktop) ------------------------------------------- */
.mainnav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainnav__list a {
  position: relative;
  display: block;
  padding: .5rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
.mainnav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
html[data-theme="dark"] .mainnav__list a::after { background: var(--brand-300); }
.mainnav__list a:hover,
.mainnav__list a[aria-current="page"],
.mainnav__list a.is-current { color: var(--brand); }
html[data-theme="dark"] .mainnav__list a:hover,
html[data-theme="dark"] .mainnav__list a[aria-current="page"],
html[data-theme="dark"] .mainnav__list a.is-current { color: var(--brand-300); }
.mainnav__list a:hover::after,
.mainnav__list a[aria-current="page"]::after,
.mainnav__list a.is-current::after { transform: scaleX(1); transform-origin: left; }
.mainnav__cta { display: none; }

/* -- Werkzeuge rechts ---------------------------------------------------- */
.masthead__tools { display: flex; align-items: center; gap: .5rem; }

.iconbtn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.iconbtn:hover { color: var(--brand); border-color: var(--brand); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .icon-sun { display: none; }
html[data-theme="dark"] .iconbtn .icon-sun { display: block; }
html[data-theme="dark"] .iconbtn .icon-moon { display: none; }

.langselect {
  height: 48px;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.navtoggle {
  display: none;
  width: 50px; height: 50px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  cursor: pointer;
}
.navtoggle span {
  display: block;
  width: 22px; height: 2px;
  margin: 4.5px auto;
  background: var(--heading);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   MOBILES MENUEFENSTER
   Zentriertes Fenster statt Panel am Rand: mit Suchfeld, aufklappbaren
   Leistungen und Impressum. Auf Desktopbreiten komplett ausgeblendet.
   ========================================================================== */
.navmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1rem;
  /* Kein Versatz nach aussen — das Fenster liegt immer im Viewport. */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.navmodal[hidden] { display: none; }
body.nav-open .navmodal {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}

/* Die schwebenden Kontaktknoepfe und der Nach-oben-Knopf treten zurueck,
   solange das Menue offen ist — sonst liegen sie darueber. */
body.nav-open .fab,
body.nav-open .to-top { opacity: 0; pointer-events: none; }

.navmodal__panel {
  width: min(30rem, 100%);
  max-height: min(88vh, 44rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(14px) scale(.97);
  transition: transform var(--dur) var(--ease-out);
}
body.nav-open .navmodal__panel { transform: none; }

.navmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.navmodal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.navmodal__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
}
.navmodal__close svg { width: 20px; height: 20px; }
.navmodal__close:hover { color: var(--brand); border-color: var(--brand); }

/* -- Suchfeld -------------------------------------------------------------- */
.navsearch { position: relative; display: flex; align-items: center; }
.navsearch svg {
  position: absolute; left: .85rem;
  width: 19px; height: 19px;
  color: var(--ink-3);
  pointer-events: none;
}
.navsearch input {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1rem .7rem 2.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
}
.navsearch input:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32, 94, 129, .18);
}
.navsearch__leer { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* -- Einträge -------------------------------------------------------------- */
.navmodal__list { list-style: none; margin: 0; padding: 0; display: grid; }
.navmodal__list > li { border-bottom: 1px solid var(--line); }
.navmodal__list > li:last-child { border-bottom: 0; }
.navmodal__list a {
  display: block;
  padding: .7rem .2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.navmodal__list a:hover,
.navmodal__list a[aria-current="page"] { color: var(--brand); }
html[data-theme="dark"] .navmodal__list a:hover,
html[data-theme="dark"] .navmodal__list a[aria-current="page"] { color: var(--brand-300); }

/* Zeile "Leistungen": Beschriftung fuehrt zur Uebersicht, der Pfeil klappt auf */
.navmodal__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.navmodal__row a { flex: 1; }
.navmodal__expand {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: pointer;
  flex: none;
}
.navmodal__expand svg { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.navmodal__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.navmodal__expand:hover { color: var(--brand); border-color: var(--brand); }

/* Untermenue per Raster-Zeilen animiert, damit die Hoehe automatisch passt.
   Das Raster liegt auf der GRUPPE (genau zwei Zeilen: Titelzeile + Untermenue).
   Auf dem <ul> selbst wuerde 0fr nur die erste seiner sieben Zeilen
   zusammenfalten — die uebrigen Eintraege blieben sichtbar. */
.navmodal__group {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.navmodal__group[data-open] { grid-template-rows: auto 1fr; }
.navmodal__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
/* Das Raster der Gruppe wuerde das hidden-Attribut sonst uebersteuern */
.navmodal__list > li[hidden],
.navmodal__sub > li[hidden] { display: none; }
.navmodal__sub li a {
  padding: .6rem .2rem .6rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  border-left: 2px solid var(--line);
}
.navmodal__sub li a:hover { color: var(--brand); border-left-color: var(--brand); }
.navmodal__cta { margin-top: .2rem; }

/* Bei Bewegungsreduktion ohne Auf-/Zuklapp-Animation, aber voll bedienbar */
@media (prefers-reduced-motion: reduce) {
  .navmodal, .navmodal__panel, .navmodal__sub { transition: none; }
}

/* Ab Desktopbreite existiert das Fenster nicht */
@media (min-width: 901px) {
  .navmodal { display: none; }
}

/* -- Abdunkelung hinter dem Mobilmenue ----------------------------------- */
.navscrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(7, 32, 44, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
body.nav-open .navscrim { opacity: 1; visibility: visible; }

/* -- Scroll-Fortschritt --------------------------------------------------- */
.progressbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: var(--z-progress);
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ==========================================================================
   08 · HERO & PAGE-HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  /* Foto als unterste Ebene, darueber ein Verlauf zum Abdunkeln.
     Ohne diese Abdunklung waere die weisse Ueberschrift auf dem hellen
     Abendhimmel nicht mehr sicher lesbar. Links kraeftiger, weil dort der
     Text steht; rechts durchscheinender, damit das Motiv sichtbar bleibt. */
  background:
    linear-gradient(100deg, rgba(5, 26, 36, .93) 0%, rgba(5, 26, 36, .82) 34%, rgba(7, 34, 47, .50) 64%, rgba(9, 42, 58, .30) 100%),
    url("../img/hero.jpg") 62% center / cover no-repeat,
    linear-gradient(152deg, #06202c 0%, #0e3549 52%, #175573 100%);
}
/* Die Farbwolken treten zurueck, sonst wird es ueber dem Foto matschig. */
.hero__grid { opacity: .3; }

/* Hochformat: Ausschnitt so verschieben, dass der Mitarbeiter im Bild bleibt,
   und staerker abdunkeln, weil Text und Motiv sich hier ueberlagern. */
@media (max-width: 900px) {
  .hero {
    /* Die Abdunklung war mit 93 % so dicht, dass vom Foto praktisch nichts
       mehr zu sehen war. Jetzt oben deutlich heller; nach unten wird es
       dunkler, weil dort Text und Kacheln liegen. */
    background:
      linear-gradient(180deg, rgba(5, 26, 36, .62) 0%, rgba(5, 26, 36, .74) 45%, rgba(7, 34, 47, .86) 100%),
      url("../img/hero.jpg") 70% center / cover no-repeat,
      linear-gradient(152deg, #06202c 0%, #0e3549 52%, #175573 100%);
  }
}
/* Feines technisches Raster als Textur */
.hero__grid {
  position: absolute;
  inset: -10%;
  z-index: -2;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 71h72M71 0v72' stroke='%23ffffff' stroke-opacity='.055' fill='none'/%3E%3C/svg%3E");
  pointer-events: none;
}
/* Weiche Farbwolken, die beim Scrollen leicht mitwandern */

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  max-width: 15ch;
  margin-bottom: .3em;
}
.hero h1 .hl { color: var(--brand-300); }
.hero__text { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: #dceaf3; max-width: 54ch; }

/* Rotierende Leistungsbegriffe (nutzt ausschliesslich vorhandene Leistungsnamen) */
.rotator {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-300);
}
.rotator__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; }
.rotator__mask {
  position: relative;
  display: block;
  height: 1.7em;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.rotator__list { display: block; margin: 0; padding: 0; list-style: none; }
.rotator__list li {
  height: 1.7em;
  line-height: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-4); }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}
.hero__badge {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e6f1f8;
}
.hero__badge svg { width: 22px; height: 22px; flex: none; color: var(--signal); }

/* Rechte Spalte: Kennzahlen-Karten statt schwebender Deko */
.hero__panel { display: grid; gap: .9rem; }
.herocard {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-md);
  /* Etwas deckender als zuvor: Die Kacheln liegen jetzt ueber dem Foto und
     brauchen einen ruhigen Untergrund, damit die Zahlen klar lesbar bleiben. */
  background: #0a2230;
}
.herocard:nth-child(even) { margin-left: clamp(0px, 3vw, 2.5rem); }
/* Die ganze Kachel ist anklickbar — eine grosse, ruhige Trefferflaeche. */
a.herocard {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
html[data-theme="dark"] a.herocard { color: inherit; }
a.herocard:hover,
a.herocard:focus-visible {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(9, 34, 47, .74);
}
a.herocard:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.herocard__go {
  width: 20px; height: 20px;
  margin-left: auto;
  flex: none;
  color: var(--on-dark-2);
  opacity: .55;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
a.herocard:hover .herocard__go,
a.herocard:focus-visible .herocard__go { opacity: 1; transform: translateX(3px); }
.herocard__ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: var(--brand-300);
  flex: none;
}
.herocard__ic svg { width: 24px; height: 24px; }
.herocard b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: #fff; }
.herocard span { font-size: .85rem; color: var(--on-dark-2); }

/* -- Page-Hero der Unterseiten ------------------------------------------- */
.pagehero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(2.6rem, 6vw, 4.6rem) clamp(2.6rem, 6vw, 4.4rem);
  background: var(--brand-900);
}
.pagehero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M0 71h72M71 0v72' stroke='%23ffffff' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
}
.pagehero h1 { color: #fff; max-width: 20ch; }
.pagehero p { color: #d7e8f2; font-size: var(--fs-lead); max-width: 58ch; margin: 0; }
.pagehero :focus-visible { outline-color: #fff; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin-bottom: var(--space-3);
  font-size: var(--fs-small);
  color: var(--on-dark-3);
}
.breadcrumb a { color: var(--brand-300); }
.breadcrumb a:hover { color: #fff; }

/* ==========================================================================
   09 · INHALTSKOMPONENTEN
   ========================================================================== */

/* -- Vertrauensleiste ---------------------------------------------------- */
.trustbar { background: var(--paper); border-bottom: 1px solid var(--line); }
.trustbar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .7rem 2.2rem;
  margin: 0;
  padding: 1.05rem 0;
  list-style: none;
}
.trustbar li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}
.trustbar svg { width: 19px; height: 19px; color: var(--signal); flex: none; }

/* -- Leistungskarten ------------------------------------------------------ */
/* Flexbox statt Grid, damit eine unvollstaendige letzte Reihe MITTIG steht.
   Mit Grid ginge das nicht: justify-content zentriert dort den gesamten
   Spaltenblock, eine einzelne Karte bliebe trotzdem links in ihrer Spalte.
   flex-basis haelt die Karten in allen Reihen gleich breit, max-width
   verhindert, dass eine allein stehende Karte auf volle Breite waechst. */
.cardgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
}
/* max-width liegt knapp ueber der Breite, die eine volle Reihe ohnehin
   ergibt. Dadurch bleibt die allein stehende Karte praktisch gleich breit
   wie die anderen, statt auf die ganze Reihe aufzugehen. */
.cardgrid > .card { flex: 1 1 19rem; max-width: 23.5rem; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Farbkante oben, die beim Hover einfaehrt */
.card__icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 15px;
  margin-bottom: 1.1rem;
  background: var(--brand-100);
  color: var(--brand);
  transition: transform var(--dur) var(--ease);
}
.card__icon svg { width: 30px; height: 30px; }
/* Gelieferte Symbole sind Bilddateien mit eigener Farbigkeit. */
.card__icon img { width: 38px; height: 38px; object-fit: contain; }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-2); font-size: .97rem; flex: 1; }
.card .arrowlink { margin-top: 1.15rem; }
/* Ganze Karte klickbar - der Link bleibt ein echter Link (Tastatur/Screenreader) */
.card__stretch::after { content: ""; position: absolute; inset: 0; }

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .card:hover .card__icon { transform: rotate(-6deg) scale(1.07); }
}
.card:focus-within { border-color: var(--brand); box-shadow: var(--shadow); }

/* Einheitlich ruhige Kachel: Die Symbole bringen ihre eigene Farbe mit,
   wechselnde Hintergruende wuerden dagegen arbeiten. */
.cardgrid .card .card__icon { background: #e9f1f7; color: #1c6288; }
html[data-theme="dark"] .cardgrid .card .card__icon { background: rgba(255, 255, 255, .09); color: var(--brand-300); }

/* -- USP-Kacheln ---------------------------------------------------------- */
/* Gleiches Prinzip wie bei den Leistungskarten: letzte Reihe mittig. */
.uspgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.uspgrid > .usp { flex: 1 1 15.5rem; max-width: 17.5rem; }
.usp {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (hover: hover) { .usp:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }
.usp__ic {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--brand);
  flex: none;
}
html[data-theme="dark"] .usp__ic { background: rgba(255, 255, 255, .07); color: var(--brand-300); }
.usp__ic svg { width: 24px; height: 24px; }
.usp h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.usp p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.section--deep .usp { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.section--deep .usp__ic { background: rgba(255, 255, 255, .12); color: #fff; }
.section--deep .usp p { color: var(--on-dark-2); }

/* -- Ablauf: Schritt-Sequenz mit Fortschrittsschiene ---------------------- */
.process__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.process__rail {
  display: grid;
  gap: .4rem;
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}
.process__rail li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .8rem;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.process__rail li::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  flex: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.process__rail li.is-active { color: var(--brand); background: var(--paper-2); }
html[data-theme="dark"] .process__rail li.is-active { color: var(--brand-300); background: rgba(255, 255, 255, .05); }
.process__rail li.is-active::before { opacity: 1; transform: scale(1.3); }

.process__steps { display: grid; gap: 1.2rem; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: 1.7rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step.is-active { border-color: var(--brand); box-shadow: var(--shadow); }
.step__num {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--ink-2); margin: 0; font-size: .97rem; }

/* -- Kennzahlenband -------------------------------------------------------- */
/* auto-fit statt fester Spaltenzahl: seit dem Wegfall der Notfall-Kennzahl
   sind es drei Werte — mit repeat(4, 1fr) waere die vierte Spalte leer
   geblieben und das Band haette links gehangen. */
.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.statband__item { position: relative; }
.statband__item + .statband__item::before {
  content: "";
  position: absolute;
  left: -.75rem; top: 15%;
  width: 1px; height: 70%;
  background: rgba(255, 255, 255, .16);
}
.statband .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.statband .lab { color: var(--on-dark-2); font-size: .93rem; margin-top: .35rem; }

/* -- Notfallband ----------------------------------------------------------- */
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border-radius: var(--r-lg);
  background: var(--brand-800);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
}
.band h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .3rem; }
.band p { color: var(--on-dark-2); margin: 0; max-width: 56ch; }
.band :focus-visible { outline-color: #fff; }

/* -- Vorher/Nachher-Vergleich ---------------------------------------------- */
.bagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.6rem;
}
.ba-item { display: flex; flex-direction: column; gap: .8rem; }
.ba {
  --split: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--paper-2);
  touch-action: pan-y;          /* vertikales Scrollen bleibt moeglich */
  user-select: none;
  cursor: ew-resize;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba .ba__after { clip-path: inset(0 0 0 var(--split)); }
.ba__label {
  position: absolute;
  top: .65rem;
  padding: .28rem .65rem;
  border-radius: 6px;
  background: rgba(7, 32, 44, .72);
  color: #fff;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.ba__label--before { left: .65rem; }
.ba__label--after  { right: .65rem; }
.ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16);
  pointer-events: none;
}
.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--split);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.ba__handle svg { width: 24px; height: 24px; }
/* Der Range-Input ist das eigentliche Bedienelement: Maus, Touch und Tastatur */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; }
.ba__range::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; }
.ba:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.ba-item__cap {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--heading);
  text-align: center;
}

/* -- Transparenzhinweis zu KI-Bildern --------------------------------------
   Steht unter der Abschnittsueberschrift und muss klar lesbar sein, ohne wie
   eine Warnung zu wirken - deshalb ruhige Markenfarbe statt Signalrot. */
.ki-hinweis {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: 46rem;
  margin: 1.1rem auto 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  text-align: left;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.ki-hinweis svg { width: 20px; height: 20px; flex: none; margin-top: .15rem; color: var(--brand); }
html[data-theme="dark"] .ki-hinweis svg { color: var(--brand-300); }

/* -- Galerie: Einstiegspunkt ------------------------------------------------ */
.galerie-einstieg { display: grid; justify-items: center; gap: .8rem; }
.galerie-einstieg__hinweis { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* -- Galerie-Fenster --------------------------------------------------------
   Eigene Ebene ueber allem. Die Bilder darin sind lazy geladen und werden
   deshalb erst beim ersten Oeffnen geholt - die Startseite bleibt leicht. */
.gmodal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 3vw, 2rem);
  background: rgba(5, 24, 34, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.gmodal[hidden] { display: none; }
.gmodal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}
body.modal-open { overflow: hidden; }

.gmodal__panel {
  width: min(62rem, 100%);
  /* dvh statt vh: Auf dem Handy waechst und schrumpft die Browserleiste beim
     Scrollen. Mit vh waere das Fenster zeitweise hoeher als der sichtbare
     Bereich und der Kopf mit dem Schliessen-Kreuz laege ausserhalb. */
  max-height: min(92vh, 52rem);
  max-height: min(92dvh, 52rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(16px) scale(.97);
  transition: transform var(--dur) var(--ease-out);
}
.gmodal.is-open .gmodal__panel { transform: none; }

.gmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gmodal__title { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.gmodal__close {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.gmodal__close svg { width: 21px; height: 21px; }
.gmodal__close:hover { color: var(--brand); border-color: var(--brand); }

/* Kategorien */
.gmodal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.gchip {
  padding: .6rem 1.05rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.gchip:hover { border-color: var(--brand); color: var(--brand); }
.gchip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="dark"] .gchip.is-active { background: var(--brand-600); border-color: var(--brand-600); }

.gpanel[hidden] { display: none; }

/* Fotoraster im Fenster. auto-fill statt auto-fit: bei nur einem Foto bleibt
   die Kachel so in normaler Groesse, statt auf die volle Breite zu wachsen. */
.gfotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}
.gfotos figure {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
}
.gfotos > figure > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gfotos .ba { aspect-ratio: 4 / 3; border-radius: 0; }
.gfotos figcaption {
  padding: .6rem .8rem;
  font-size: .9rem;
  color: var(--ink-2);
}

/* Auf schmalen Schirmen wuerden sechs umgebrochene Kategorien drei Zeilen
   fuellen und kaum Platz fuers Bild lassen. Deshalb eine Zeile zum Wischen. */
@media (max-width: 700px) {
  .gmodal { padding: .6rem; }
  .gmodal__panel { max-height: 94vh; gap: .7rem; }
  .gmodal__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * -1);
    padding-inline: clamp(1rem, 2.5vw, 1.5rem);
  }
  .gmodal__tabs::-webkit-scrollbar { display: none; }
  .gchip { flex: none; scroll-snap-align: start; font-size: .88rem; padding: .55rem .9rem; }
  .gfotos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .gmodal, .gmodal__panel { transition: none; }
  .gmodal__panel { transform: none; }
}

/* -- Galerie --------------------------------------------------------------- */
/* 21rem sorgt dafuer, dass die sechs Kacheln auf grossen Schirmen als 3+3
   aufgehen statt als 4+2 mit Luecke. */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.1rem;
}
.gallery figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-sm);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.06); } }
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: .8rem .9rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7, 32, 44, .86);
}

/* -- Zweispalter / Einzugsgebiet ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 3.6rem);
  align-items: center;
}
.arealist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .2rem 1rem;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.arealist li { position: relative; padding: .4rem 0 .4rem 1.6rem; }
.arealist li::before {
  content: "";
  position: absolute;
  left: 0; top: .72rem;
  width: 14px; height: 16px;
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* -- Ortsliste im Fenster (40-km-Umkreis) ----------------------------------
   Auf der Seite stehen nur die Kreise; die rund sechzig Orte wuerden den
   Abschnitt sonst in die Laenge ziehen. Sie liegen deshalb im Fenster
   #orte-fenster, das sich die Mechanik mit der Galerie teilt. */
.area-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; }

.orte__intro { margin: 0 0 1.3rem; font-size: .93rem; color: var(--ink-2); }
/* Spaltensatz: die Gruppen fliessen nebeneinander, ohne dass eine Gruppe
   mitten im Wort umbricht. */
.orte__raster { columns: 3 15rem; column-gap: 1.8rem; }
.orte__gruppe { break-inside: avoid; margin-bottom: 1.3rem; }
.orte__gruppe h3 {
  margin: 0 0 .4rem;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand);
}
html[data-theme="dark"] .orte__gruppe h3 { color: var(--brand-300); }
.orte__gruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .93rem;
  color: var(--ink-2);
}
.orte__gruppe li { padding: .18rem 0; }
@media (max-width: 700px) { .orte__raster { columns: 1; } }

.mediaframe {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--brand);
  aspect-ratio: 4 / 3;
}
.mediaframe img, .mediaframe svg { width: 100%; height: 100%; object-fit: cover; }


/* -- Karte mit Zwei-Klick-Lösung -------------------------------------------
   Die Karte laedt erst nach ausdruecklicher Zustimmung. Vorher geht keine
   einzige Anfrage an Google — das passt zur Aussage im Cookie-Hinweis, dass
   nur technisch notwendige Cookies verwendet werden. */
.mapbox {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--brand-800);
}
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapbox__consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  padding: clamp(1.2rem, 4vw, 2rem);
  text-align: center;
  color: var(--on-dark);
}
.mapbox__consent svg { width: 40px; height: 40px; color: var(--brand-300); }
.mapbox__consent h3 { color: #fff; margin: 0; font-size: 1.15rem; }
.mapbox__consent p { color: var(--on-dark-2); margin: 0; font-size: .92rem; max-width: 34ch; }
.mapbox__consent a { color: var(--brand-300); text-decoration: underline; }
.mapbox__consent :focus-visible { outline-color: #fff; }
.mapbox__alt { font-size: .86rem; }

/* -- FAQ -------------------------------------------------------------------- */
/* -- Fragen und Antworten --------------------------------------------------
   Frueher ein Akkordeon aus <details>. Aufklappbare Standardfragen unten auf
   der Seite sind ein verbreitetes Merkmal generierter Seiten - und wer eine
   Frage hat, soll die Antwort nicht erst suchen muessen. Die vier Fragen sind
   dieselben wie vorher, sie stehen jetzt nur offen da. */
.qa-liste {
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
}
.qa { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.qa:first-child { border-top: 0; padding-top: 0; }
.qa h3 {
  margin: 0 0 .45rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--heading);
}
.qa p { margin: 0; color: var(--ink-2); }

/* -- Laufband (Ueber uns) --------------------------------------------------- */
/* Laufband.
   Aufbau fuer eine NAHTLOSE Schleife: Das Band enthaelt genau zwei identische
   Saetze. Der Abstand zwischen den Woertern liegt INNERHALB eines Satzes, der
   Abstand zum naechsten Satz als padding-right am Satz selbst. Nur so ist ein
   Satz exakt halb so breit wie das Band und translateX(-50%) trifft punktgenau
   den Anfang — sonst entsteht bei jedem Durchlauf ein sichtbarer Ruck. */
.marquee {
  overflow: hidden;
  position: relative;
  background: var(--brand-900);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  padding-block: clamp(.9rem, 2vw, 1.4rem);
  animation: marquee 44s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__set {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;   /* Abstand zum naechsten Satz — Teil des Satzes */
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
/* Jeder zweite Begriff nur als Kontur — gibt dem Band Rhythmus und Tiefe.
   Bei sieben Begriffen je Satz bleibt die Abfolge in beiden Saetzen gleich. */
.marquee__set span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--brand-300);
}
/* Raute als Trennzeichen, in Signalfarbe */
.marquee span::before {
  content: "";
  width: 9px; height: 9px;
  flex: none;
  background: var(--signal);
  transform: rotate(45deg);
  border-radius: 2px;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* -- Zitat / Leitbild ------------------------------------------------------- */
.bigquote { max-width: 54rem; margin-inline: auto; text-align: center; }
.bigquote p {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.14;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  color: #fff;
  margin: 0;
}
.bigquote .mark { color: var(--brand-300); }
.bigquote cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: .98rem;
  letter-spacing: .04em;
  color: var(--on-dark-2);
}

/* -- Zeitstrahl ------------------------------------------------------------- */
.timeline { max-width: 46rem; margin-inline: auto; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 26px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--brand);
  transform-origin: top;
}
.tl-item { position: relative; padding: 0 0 1.7rem 76px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-num {
  position: absolute;
  left: 0; top: 0;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--paper);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .tl-num { border-color: var(--brand-300); color: var(--brand-300); }
.tl-item h3 { margin-bottom: .25rem; }
.tl-item p { color: var(--ink-2); margin: 0; }

/* -- Geschaeftsfuehrung ----------------------------------------------------- */
/* Zwei Ansprechpartner nebeneinander, auf schmalen Schirmen untereinander. */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.4rem;
  align-items: start;
  max-width: 62rem;
  margin-inline: auto;
}
.founder {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
  height: 100%;
  padding: clamp(1.5rem, 3.5vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.founder__av {
  width: 104px; height: 104px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  flex: none;
}
.founder .role {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}
html[data-theme="dark"] .founder .role { color: var(--brand-300); }
.founder h3 { margin: .2rem 0 .4rem; font-size: 1.4rem; }
.founder p { color: var(--ink-2); }
/* Persoenliche Adresse sichtbar, damit sie sich kopieren laesst — nicht nur
   als Ziel hinter dem Knopf. */
.founder__mail { margin: .6rem 0 0; font-size: .95rem; }
.founder__mail a { overflow-wrap: anywhere; }
.founder__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
/* In der zweispaltigen Karte ist es enger — kompaktere Knoepfe passen
   dadurch nebeneinander statt untereinander. */
.founder__actions .btn { font-size: .98rem; padding: .7rem 1.1rem; min-height: 44px; }

/* -- Fakten-Kacheln --------------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .9rem; }
.fact {
  padding: 1.3rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  text-align: center;
}
.fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .fact b { color: var(--brand-300); }
.fact span { font-size: .88rem; color: var(--ink-2); }

/* -- Zweispalter fuer Leistungsseiten --------------------------------------- */
.layout-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 3.2rem);
  align-items: start;
}
.aside-card {
  position: sticky;
  top: 7rem;
  padding: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  display: grid;
  gap: .7rem;
}
.aside-card h3 { font-size: 1.25rem; margin: 0; }
.aside-card p { color: var(--ink-2); margin: 0; font-size: .96rem; }
.chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-block;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   10 · FORMULARE & KONTAKT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.infolist { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; }
.infolist li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.infolist li:last-child { border-bottom: 0; }
.infolist svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: .3rem; }
html[data-theme="dark"] .infolist svg { color: var(--brand-300); }
/* Kontaktangaben sind wichtige Tippziele — mindestens 24 px hoch. */
.infolist a { display: inline-block; min-height: 24px; padding-block: .15rem; }
.infolist b {
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.formcard {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
form.contact { display: grid; gap: 1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--heading); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: .8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(32, 94, 129, .18);
}
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--check { display: flex; gap: .7rem; align-items: flex-start; }
.field--check input { width: 24px; height: 24px; min-height: 0; margin-top: .2rem; flex: none; }
/* Auch ausserhalb des Kontaktformulars gilt: Ankreuzfelder gross genug */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--brand); }
.field--check label { font-weight: 400; font-size: .9rem; margin: 0; color: var(--ink-2); }
.form-note { font-size: .82rem; color: var(--ink-3); margin: 0; }
.form-status { display: none; padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .95rem; margin-bottom: 1rem; }
.form-status.is-ok  { display: block; background: var(--signal-soft); color: #17614f; border: 1px solid #b6ddd2; }
.form-status.is-err { display: block; background: #fbeaea; color: #8b2b2b; border: 1px solid #eecaca; }

.booking-embed {
  min-height: 26rem;
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-align: center;
}

/* Sobald der Kalender geladen ist, faellt der gestrichelte Platzhalter weg.
   Calendly bringt seine eigene Karte mit Schatten mit — ein zweiter Rahmen
   drumherum saehe nach Kasten im Kasten aus. Der Kalender bekommt denselben
   Untergrund wie der Abschnitt (siehe background_color in main.js) und sitzt
   dadurch scheinbar direkt auf der Seite. */
.booking-embed.is-geladen {
  min-height: 0;
  padding: 0;
  /* Der Kalender bleibt in beiden Farbschemata hell (siehe kalenderAdresse in
     main.js). Im Dunkelmodus braucht er deshalb einen deutlicheren Rand,
     damit die helle Flaeche wie eine bewusst gesetzte Karte wirkt. */
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  /* Bewusst die volle Abschnittsbreite: Calendly schaltet erst weit oben auf
     die zweispaltige Ansicht um. Wird der Rahmen schmaler gemacht, stapelt
     Calendly Termin und Kalender untereinander — dann passt der Inhalt nicht
     mehr in die feste Hoehe und wird unten abgeschnitten (nachgemessen bei
     902 und 932 px). */
}
/* Die Hoehe meldet Calendly selbst und main.js schreibt sie in das Element
   (siehe hoeheAnpassen). Die Werte hier sind nur der Rueckfall, falls die
   Meldung ausbleibt — grosszuegig genug, damit nichts abgeschnitten wird. */
.booking-embed iframe {
  display: block;
  width: 100%;
  min-height: 72rem;   /* gestapelte Ansicht auf schmalen Schirmen */
  border: 0;
}
@media (min-width: 1000px) {
  .booking-embed iframe { min-height: 46rem; }   /* zweispaltige Ansicht */
}
/* Sobald die gemeldete Hoehe steht, darf der Rueckfall nicht mehr stoeren */
.booking-embed.hat-hoehe iframe { min-height: 0; }
html[data-theme="dark"] .booking-embed.is-geladen {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.booking-embed__hint { max-width: 34rem; display: grid; gap: .9rem; justify-items: center; }
.booking-embed__hint h3 { color: var(--brand); margin: 0; }
html[data-theme="dark"] .booking-embed__hint h3 { color: var(--brand-300); }
.booking-embed__hint p { color: var(--ink-2); margin: 0; }
.booking-embed__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Drei typische Anlaesse fuer einen Rueckruf, ueber dem Kalender */
.rueckruf-gruende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.6rem;
  max-width: 62rem;
  margin: 0 auto var(--space-5);
  padding: 0;
  list-style: none;
}
.rueckruf-gruende li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  flex: 1 1 17rem;
  max-width: 22rem;
  font-size: .95rem;
  color: var(--ink-2);
}
.rueckruf-gruende svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: var(--signal); }

/* Platzhalter, solange der Kalender nicht geladen werden darf */
.booking-consent { max-width: 34rem; display: grid; gap: .9rem; justify-items: center; text-align: center; }
.booking-consent svg { width: 34px; height: 34px; color: var(--brand); }
html[data-theme="dark"] .booking-consent svg { color: var(--brand-300); }
.booking-consent h3 { margin: 0; color: var(--brand); }
html[data-theme="dark"] .booking-consent h3 { color: var(--brand-300); }
.booking-consent p { margin: 0; color: var(--ink-2); }
.booking-consent__alt { font-size: .92rem; }

/* Hinweisbox */
.notice {
  padding: 1rem 1.2rem;
  border: 1px solid #f0d98a;
  border-radius: var(--r-md);
  background: #fff8e1;
  color: #6b5407;
}
html[data-theme="dark"] .notice { background: #2a2410; border-color: #5c4d1e; color: #e9d59a; }
.notice code { background: rgba(0, 0, 0, .09); padding: .05rem .35rem; border-radius: 5px; }

/* Konto-Seite: Tabs, Tabellen, Dashboard */
.auth-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.auth-card { padding: 2rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); min-width: 0; }
.auth-wrap > * { min-width: 0; }
.tabs { display: flex; gap: .4rem; margin-bottom: 1.3rem; padding: .35rem; border-radius: 12px; background: var(--paper-2); }
.tabs button {
  flex: 1;
  padding: .7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.tabs button.active { background: var(--paper); color: var(--brand); box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .tabs button.active { color: var(--brand-300); }
.tabpane { display: none; }
.tabpane.active { display: block; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; }
/* min-width:0 ist noetig, weil Raster-Kinder sonst nicht unter ihre
   Inhaltsbreite schrumpfen — die Tabelle darin wuerde die Seite verbreitern. */
.dash-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); min-width: 0; }
.dash-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.dash-card h3 svg { width: 20px; height: 20px; color: var(--brand); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
/* Keine feste Mindestbreite: sonst erbt die Karte diese Breite und die Seite
   laesst sich auf sehr schmalen Geraeten (320 px) nicht mehr passend
   darstellen. Die Zellen umbrechen stattdessen. */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl td, .tbl th { overflow-wrap: anywhere; }
.tbl th, .tbl td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); }
.tbl th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
/* Aktionslinks in Tabellen sind eigenstaendige Tippziele, keine Fliesstextlinks */
.tbl td a { display: inline-block; min-height: 24px; padding: .2rem .1rem; font-weight: 600; }
.pill { display: inline-block; padding: .25rem .6rem; border-radius: var(--r-pill); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pill--ok { background: #e7f6ee; color: #196138; }
.pill--wait { background: #fff2df; color: #8a570e; }
.pill--open { background: #e8f0fb; color: #24509f; }
.teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(2rem, 4vw, 3rem); align-items: center; }
.teaser__panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.teaser__bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; background: var(--brand-900); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.teaser__bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #3a5b6c; }
.teaser__rows { padding: .4rem 1.1rem 1.1rem; }
.teaser__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.teaser__row:last-child { border-bottom: 0; }
.teaser__row .t { font-weight: 600; }
.teaser__row .s { font-size: .85rem; color: var(--ink-2); }
.teaser > *, .dash-grid > * { min-width: 0; }

/* ==========================================================================
   11 · FOOTER · COOKIE · SCHWEBENDE AKTIONEN
   ========================================================================== */
.site-footer {
  background: var(--brand-900);
  color: var(--on-dark-2);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.8rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem;
}
/* Semantisch h2 (eigener Seitenbereich), optisch bewusst klein gehalten. */
.site-footer h2 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: #cfe1eb; }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.footer-links li { display: flex; align-items: flex-start; gap: .5rem; }
.footer-links svg { width: 16px; height: 16px; margin-top: .38rem; flex: none; opacity: .7; }
.footer-brand p { color: var(--on-dark-3); font-size: .95rem; max-width: 34ch; }
.footer-logo { margin-bottom: 1rem; }
.footer-logo .logo__text b { color: #fff; }
.footer-logo .logo__text span { color: var(--on-dark-3); }
.social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-weight: 600;
  font-size: .93rem;
}
.social a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.social img, .social svg { width: 20px; height: 20px; border-radius: 5px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 1rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .84rem;
  color: var(--on-dark-3);
}
.footer-bottom a { color: var(--on-dark-3); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }

/* -- Cookie-Hinweis --------------------------------------------------------- */
.cookie {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: var(--z-cookie);
  width: min(42rem, calc(100% - 2rem));
  transform: translate(-50%, calc(100% + 40px));
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  transition: transform .5s var(--ease-out), visibility .5s;
}
.cookie.is-visible { transform: translate(-50%, 0); visibility: visible; }
.cookie p { font-size: .92rem; color: var(--ink-2); margin: 0 2.4rem .9rem 0; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie .btn { font-size: .95rem; padding: .65rem 1.2rem; min-height: 44px; }

/* Schliessen ohne Entscheidung. Bewusst unauffaellig, damit "Einverstanden"
   und "Ablehnen" gleich prominent bleiben. */
.cookie__x {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.cookie__x svg { width: 18px; height: 18px; }
.cookie__x:hover { background: var(--paper-2); color: var(--ink); }
.cookie__x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* -- Schwebende Kontaktaktionen --------------------------------------------- */
.fab {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: var(--z-float);
  display: grid;
  gap: .55rem;
}
.fab a {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease);
}
.fab a:hover { transform: scale(1.08); color: #fff; }
/* Ohne diese Zeile faerbt die Dark-Mode-Linkfarbe die Glyphen hellblau. */
html[data-theme="dark"] .fab a { color: #fff; }
.fab svg { width: 26px; height: 26px; }
.fab .fab--wa  { background: #1da851; }
.fab .fab--tel { background: var(--brand); }
.fab .fab--ig  { background: #c13584; }

.to-top {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: var(--z-float);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand-900);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand); }
.to-top svg { width: 21px; height: 21px; }

/* ==========================================================================
   12 · BEWEGUNGS-SYSTEM
   --------------------------------------------------------------------------
   Alles hier gilt NUR, wenn `html.js-motion` gesetzt ist. Diese Klasse setzt
   ein kleiner Inline-Skriptblock im <head> - und zwar nur dann, wenn JS laeuft
   und der Nutzer keine reduzierte Bewegung wuenscht. Damit ist ausgeschlossen,
   dass Inhalte dauerhaft unsichtbar bleiben.
   ========================================================================== */
/* "rise" ist bewusst OHNE opacity gebaut. Grund: Browser laden Bilder mit
   loading="lazy" nicht, solange sie in einem Element mit opacity:0 stecken —
   die Bilder blieben dann leer. Bildbloecke bekommen deshalb "rise", alles
   andere darf ein- und aufblenden. */
.js-motion [data-reveal]:not([data-reveal="rise"]) { opacity: 0; }
.js-motion [data-reveal="up"]    { transform: translateY(28px); }
.js-motion [data-reveal="down"]  { transform: translateY(-24px); }
.js-motion [data-reveal="left"]  { transform: translateX(-38px); }
.js-motion [data-reveal="right"] { transform: translateX(38px); }
.js-motion [data-reveal="zoom"]  { transform: scale(.94); }
.js-motion [data-reveal="rise"]  { transform: translateY(34px); }

/* Auf schmalen Schirmen KEINE seitlichen Startversaetze.
   Ein Element, das vor dem Einblenden 38 px weiter rechts steht, vergroessert
   den Layout-Viewport — Mobilbrowser zoomen daraufhin die ganze Seite heraus
   und der Inhalt wirkt abgeschnitten. `overflow-x: hidden` verhindert das
   nicht, es verbirgt den Ueberstand nur optisch. Deshalb blenden schmale
   Schirme einheitlich von unten ein. */
@media (max-width: 900px) {
  .js-motion [data-reveal="left"],
  .js-motion [data-reveal="right"] { transform: translateY(24px); }
}

/* Sicherheitsnetz: sobald "is-revealed" gesetzt ist, ist alles sichtbar.
   Das gilt auch dann, wenn GSAP fehlt und der IntersectionObserver uebernimmt. */
.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}

/* Zeilenweises Enthuellen von Ueberschriften */
.line-mask { display: block; overflow: hidden; }

/* Elemente, die GSAP bewegt, bekommen eine Kompositions-Ebene */
.js-motion .js-motion .progressbar { will-change: transform; }

/* ==========================================================================
   13 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .herocard:nth-child(even) { margin-left: 0; }
  .process__layout { grid-template-columns: 1fr; }
  .process__rail { display: none; }   /* Schiene ist nur mit Pin sinnvoll */
  .layout-2col { grid-template-columns: 1fr; }
  .aside-card { position: static; }
}

@media (max-width: 900px) {
  /* Auf schmalen Schirmen uebernimmt das zentrierte Menuefenster (.navmodal).
     Die Desktop-Navigation wird komplett ausgeblendet — dadurch gibt es je
     Breite genau eine bedienbare Navigation, und nichts steht mehr ausserhalb
     des Viewports (das war zuvor die Ursache fuer das Herauszoomen). */
  .navtoggle { display: block; }
  .mainnav { display: none; }
  .masthead__tools .btn--cta { display: none; }  /* CTA lebt im Menuefenster */
  .statband { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .statband__item + .statband__item::before { display: none; }
  .founder { grid-template-columns: 1fr; text-align: center; }
  .founder__av { margin-inline: auto; }
  .founder__actions { justify-content: center; }
}

@media (max-width: 620px) {
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__hours { display: none; }         /* Oeffnungszeiten stehen im Footer */
  .hero__actions .btn { width: 100%; }
  .band { flex-direction: column; align-items: flex-start; text-align: left; }
  .band .btn { width: 100%; }
  .field--row { grid-template-columns: 1fr; }
  .fab a { width: 50px; height: 50px; }
  .to-top { width: 44px; height: 44px; }
  .cookie { bottom: 12px; }
  .tl-item { padding-left: 62px; }
  .tl-num { width: 46px; height: 46px; font-size: 1.15rem; }
  .timeline::before { left: 22px; }
}

/* Ab hier wird es eng: Wortmarke weicht, damit Theme-, Sprach- und Menue-
   Schalter alle drei erreichbar bleiben. */
@media (max-width: 430px) {
  /* Der Untertitel "Property Services" war hier frueher ausgeblendet, weil das
     Logo mit 66 px zu viel Platz brauchte. Seit die Kopfleiste kompakt ist,
     passt er wieder - ohne ihn stand im Kopf nur "D&K". */
  .logo__mark { height: 52px; }
  .masthead__inner { gap: .5rem; }
  .masthead__tools { gap: .35rem; }
  .langselect { padding: 0 .35rem; font-size: .88rem; }
}

/* ==========================================================================
   14 · REDUZIERTE BEWEGUNG & DRUCK
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
  .btn::after { display: none; }
  .btn:hover, .card:hover, .usp:hover, .fab a:hover { transform: none; }
}

@media print {
  .topbar, .masthead, .fab, .to-top, .cookie, .progressbar, .navscrim, .marquee { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .pagehero, .section--deep { background: none !important; color: #000; }
  .hero h1, .pagehero h1, .section--deep h2, .section--deep h3 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* ==========================================================================
   HERO-KACHELN: Driften und Abprallen
   Die Bewegung rechnet main.js (initHeroDrift) Bild fuer Bild aus und schreibt
   sie als transform. Hier steht nur, wie ein Zusammenstoss aussieht: kurzes
   Aufleuchten und ein leichter Stauchimpuls.
   Ohne JavaScript oder bei "prefers-reduced-motion" passiert gar nichts —
   die Kacheln stehen dann einfach still.
   ========================================================================== */
.herocard.is-drift { will-change: transform; }
.herocard.is-bump {
  animation: heroBump .34s var(--ease-out);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
@keyframes heroBump {
  0%   { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}


/* ==========================================================================
   HANDY: KOMPAKTERE MASSE
   Auf dem Telefon wirkte alles zu gross. Der Grund war nicht die Schrift,
   sondern die Huelle drumherum: 96 px Kopfleiste mit 66-px-Logo, Karten mit
   fast 2 rem Innenabstand, 60-px-Symbolkacheln, 54-px-Schwebeknoepfe. Der
   Hero war dadurch 1208 px hoch - hoeher als der ganze Bildschirm.

   Hier wird deshalb die Huelle gestrafft, nicht der Lesetext. Fliesstext,
   Ueberschriften und Trefferflaechen bleiben gross genug; die Schaltflaechen
   halten weiterhin ihre 44 px Mindesthoehe.
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --space-5: 1.8rem;
    --space-6: 2.2rem;
    --space-7: 2.6rem;   /* Abschnittsrhythmus: 56 px -> 42 px */
  }

  /* Kopf: 96 px -> rund 60 px */
  .topbar { font-size: .82rem; }
  .masthead__inner { padding-block: .5rem; gap: .55rem; }
  .logo__mark { height: 42px; }
  .masthead.is-stuck .logo__mark { height: 36px; }
  .logo__text b { font-size: 1.15rem; }
  .logo__text span { font-size: .58rem; letter-spacing: .16em; margin-top: .15rem; }

  /* Hero */
  .hero { padding-block: 2.3rem 2.1rem; }
  .hero__actions { gap: .6rem; }
  .hero__actions .btn { width: 100%; font-size: 1rem; padding: .8rem 1.2rem; min-height: 50px; }
  .hero__badges { gap: .5rem 1.2rem; margin-top: var(--space-4); padding-top: var(--space-3); }
  .hero__badge { font-size: .82rem; gap: .4rem; }
  .hero__badge svg { width: 18px; height: 18px; }

  /* Instagram gehoert in den Fussbereich; oben in der schmalen Zeile neben
     Telefon und E-Mail draengelt es nur. */
  /* Zwei Klassen noetig: ".topbar a" setzt weiter oben inline-flex und waere
     sonst spezifischer als eine einzelne Klasse. */
  .topbar .topbar__ig { display: none; }
  .topbar__group { gap: .5rem .9rem; }

  /* Der Cookie-Hinweis nahm fast den ganzen Schirm ein. */
  .cookie { padding: .9rem 1rem; bottom: 10px; }
  .cookie p { font-size: .84rem; line-height: 1.5; margin-bottom: .7rem; }
  .cookie .btn { font-size: .88rem; padding: .55rem .9rem; min-height: 44px; }
  .cookie__x { top: .35rem; right: .35rem; width: 36px; height: 36px; }

  /* Kennzahl-Kacheln: Zahl und Beschriftung stehen jetzt nebeneinander statt
     uebereinander - fuenf Kacheln passen so in gut die halbe Hoehe. */
  .hero__panel { gap: .4rem; }
  .herocard { padding: .5rem .7rem; gap: .6rem; border-radius: var(--r-sm); }
  .herocard__ic { width: 30px; height: 30px; border-radius: 8px; }
  .herocard__ic svg { width: 17px; height: 17px; }
  .herocard > span:not(.herocard__ic) {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .1rem .45rem;
  }
  .herocard b { display: inline; font-size: 1rem; }
  .herocard span span { font-size: .78rem; }
  .herocard__go { width: 14px; height: 14px; }

  /* Leistungskarten: Symbol nach links neben die Ueberschrift statt darueber.
     Das spart pro Karte rund 60 px, ohne dass Text kleiner wird. */
  /* Zeile 2 nimmt mit 1fr den Restplatz auf. Sonst schwebt "Mehr erfahren"
     bei kurzen Karten mitten im Feld, weil alle Karten gleich hoch sind. */
  .card {
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: .8rem;
  }
  .card__icon { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 0; grid-row: 1; }
  .card__icon img { width: 24px; height: 24px; }
  .card h3 { align-self: center; margin-bottom: 0; }
  .card p { grid-column: 2; grid-row: 2; margin-top: .35rem; flex: none; }
  .card .arrowlink { grid-column: 2; grid-row: 3; margin-top: .7rem; align-self: end; }
  .cardgrid, .uspgrid { gap: .7rem; }

  /* "Warum D&K": gleiches Prinzip, Symbol neben den Text */
  .usp { padding: .95rem 1rem; gap: .8rem; align-items: flex-start; }
  .usp__ic { width: 38px; height: 38px; }
  .usp__ic svg { width: 20px; height: 20px; }
  .usp h3 { margin-bottom: .2rem; }

  /* Abschnittskoepfe dichter am Inhalt */
  .section-head { margin-bottom: var(--space-4); }

  /* Schwebende Knoepfe: kleiner und dichter an die Ecke */
  .fab { right: 12px; bottom: 12px; gap: .45rem; }
  .fab a { width: 46px; height: 46px; }
  .fab a svg { width: 22px; height: 22px; }
  .to-top { left: 12px; bottom: 12px; width: 42px; height: 42px; }

  .site-footer { padding-block: 2.2rem 1rem; }

  /* Einzugsgebiet: die beiden Schaltflaechen standen nur 14 px auseinander
     und waren unterschiedlich breit - das sah aus, als wuerden sie sich
     beruehren. Jetzt untereinander, volle Breite, klarer Abstand. */
  .area-aktionen { flex-direction: column; gap: .8rem; }
  .area-aktionen .btn { width: 100%; }

  /* Fragen und Antworten: vorher 7 px zwischen Frage und Antwort und 26 px
     zwischen den Bloecken - zu aehnlich, man sah nicht, was zusammengehoert.
     Jetzt eng gekoppelt und deutlich getrennt. */
  .qa-liste { gap: 0; }
  .qa { border-top: 1px solid var(--line); padding-block: 1.15rem; }
  .qa h3 { margin-bottom: .15rem; }

  /* Der Instagram-Verweis brach aus seiner Flaeche aus, wenn der Kontoname
     breiter wurde als der Knopf. */
  .social { width: 100%; }
  .social a { max-width: 100%; flex-wrap: wrap; word-break: break-word; }
}

/* Fussbereich auf schmalen Schirmen untereinander.
   FEHLER, der hier behoben wird: Die Spaltenangabe
     minmax(0, 1.5fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr))
   bricht nicht auf eine Spalte um. "min(100%, 11rem)" bezieht sich auf die
   Breite des GANZEN Rasters, nicht auf die Spur - bei 480 px sind das also
   weiterhin 11rem, und auto-fit legt drei Spuren an. Fuer die erste Spalte
   blieben dadurch rund 40 px uebrig: Das Logo quetschte sich in die
   Nachbarspalte und der Begleittext lief mit einem Wortfragment pro Zeile
   ueber 1163 px in die Hoehe. */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.7rem; }
  .footer-brand p { max-width: none; }
  /* Der Elternlink ist inline-flex und schrumpft auf den Inhalt - eine
     Prozentbreite haette sich selbst kleingerechnet. Deshalb ein fester Wert. */
  .footer-logo .logo__mark--full { width: 170px; }
  .footer-bottom { margin-top: 1.8rem; padding-top: 1.1rem; }
  /* Platz fuer die schwebenden Knoepfe, damit sie die letzte Zeile nicht
     ueberdecken. */
  .site-footer { padding-bottom: 4.5rem; }
}