/* =====================================================================
   Kanzlei Doreen Hanke - gemeinsame Gestaltung aller neuen Seiten
   Farben wie bisher: Weinrot #660000, Dunkelblau #000046, Sand #AF9C8F,
   Grautoene #E9E9E9 / #DEDEDE, Text #353535.
   Diese Datei wird von allen Seiten im Ordner "neu" geladen.
   ===================================================================== */

:root {
  --weinrot: #660000;
  --weinrot-dunkel: #4d0000;
  --navy: #000046;
  --sand: #AF9C8F;
  --sand-hell: #DED5CB;
  --grau: #E9E9E9;
  --grau-2: #DEDEDE;
  --text: #353535;
  --text-2: #555555;
  --weiss: #ffffff;
  --linie: rgba(0, 0, 0, .08);
  --accent: #660000;           /* Rot fuer Schrift, Ueberschriften, Symbole */
  --accent-rgb: 102, 0, 0;
  --navy-rgb: 0, 0, 70;
  --surface: #ffffff;          /* Karten, Felder, helle Schaltflaechen */
  --ink: 0, 0, 0;              /* fuer halbtransparente Flaechen und Linien */
  --ink-2: 53, 53, 53;
  --paper: 255, 255, 255;      /* fuer Milchglas-Flaechen */
  --nav-bg: rgba(233, 233, 233, .78);
  --nav-bg-solid: rgba(233, 233, 233, .97);
  --placeholder: #6b6b6b;
  --switch-off: #c9c9c9;
  --ok-bg: rgba(26, 110, 52, .12);
  --ok-fg: #1a5e2f;
  color-scheme: only light;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-signatur: Georgia, "Times New Roman", serif;

  --radius-l: 28px;
  --radius-m: 20px;
  --radius-s: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .07);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, .06), 0 22px 50px rgba(0, 0, 0, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --nav-h: 56px;
  --max: 1100px;
  --pad: clamp(1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }

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

/* Fokusmarkierung fuer Tastaturbedienung */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  padding: .75rem 1.1rem; border-radius: 999px;
  background: var(--weinrot); color: #fff; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .5rem; }
main:focus { outline: none; }

/* =========================== Navigation =========================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(var(--ink), 0);
  transition: border-color .3s;
}
/* Milchglas-Effekt auf eigener Ebene, damit das Vollbild-Menue korrekt sitzt */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before { background: var(--nav-bg-solid); }
}
.nav.is-scrolled { border-bottom-color: var(--linie); }
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  min-height: var(--nav-h);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
}

/* Logo: Ausschnitt "DH" aus dem bisherigen Bild bild_links_oben.png */
.brand {
  position: relative; display: block; flex: none;
  width: 40px; height: 40px; margin-right: auto;
  overflow: hidden; border-radius: 6px;
}
.brand img {
  position: absolute; max-width: none;
  width: 95.2px; height: 91.4px; left: -27.05px; top: -46.86px;
}

.menu-wrap { order: 3; width: 100%; }
.search-panel { order: 4; }
.menu { list-style: none; padding: 0; display: flex; flex-wrap: wrap; width: 100%; padding-bottom: .5rem; }
.menu li { margin: 0; }
.menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .7rem;
  font-size: .875rem; letter-spacing: -.005em; text-decoration: none;
  color: var(--text); border-radius: 999px;
  transition: color .2s, background-color .2s;
}
.menu a:hover { color: var(--accent); background: rgba(var(--ink), .05); }
.menu a[aria-current="page"], .menu a.is-section { color: var(--accent); font-weight: 600; }

.icon-btn {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text);
  cursor: pointer; transition: background-color .2s, color .2s;
}
.js .icon-btn { display: grid; }
.icon-btn:hover { background: rgba(var(--ink), .06); color: var(--accent); }
.icon-btn svg { width: 20px; height: 20px; }

.burger { position: relative; width: 18px; height: 12px; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px;
  background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease);
}
.burger span:first-child { top: 2px; }
.burger span:last-child { top: 9px; }
[aria-expanded="true"] .burger span:first-child { top: 5.5px; transform: rotate(45deg); }
[aria-expanded="true"] .burger span:last-child { top: 5.5px; transform: rotate(-45deg); }

/* Suche */
.search-panel { width: 100%; padding: .25rem 0 1rem; }
.js .search-panel:not(.is-open) { display: none; }
.search-panel.is-open { animation: dropIn .35s var(--ease) both; }
.search { position: relative; display: flex; max-width: 640px; margin: 0 auto; }
.search input[type="search"] {
  flex: 1 1 auto; min-width: 0; min-height: 48px; margin: 0;
  padding: .75rem 3.5rem .75rem 1.1rem;
  border: 1px solid rgba(var(--ink), .15); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); font-size: 1rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.search input::placeholder { color: var(--placeholder); opacity: 1; }
.search input:focus { border-color: var(--weinrot); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); outline: none; }
.search button {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 44px; padding: 0; border: 0; border-radius: 9px;
  background: var(--weinrot); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s;
}
.search button:hover { background: var(--weinrot-dunkel); }
.search button svg { width: 18px; height: 18px; }

@media (max-width: 959.98px) {
  .js .menu-wrap { order: 0; width: auto; }
  .js .menu {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
    display: block; width: auto; margin: 0;
    padding: 1.25rem var(--pad) 2rem;
    background: var(--nav-bg-solid);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .js .nav.is-open .menu { visibility: visible; opacity: 1; transition: opacity .3s var(--ease); }
  .js .menu li {
    border-bottom: 1px solid var(--linie);
    opacity: 0; transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .js .nav.is-open .menu li { opacity: 1; transform: none; }
  .js .nav.is-open .menu li:nth-child(2) { transition-delay: .03s; }
  .js .nav.is-open .menu li:nth-child(3) { transition-delay: .06s; }
  .js .nav.is-open .menu li:nth-child(4) { transition-delay: .09s; }
  .js .nav.is-open .menu li:nth-child(5) { transition-delay: .12s; }
  .js .nav.is-open .menu li:nth-child(6) { transition-delay: .15s; }
  .js .nav.is-open .menu li:nth-child(7) { transition-delay: .18s; }
  .js .menu a {
    min-height: 60px; padding: 0 .25rem; border-radius: 0;
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.015em; color: var(--navy);
  }
  .js .menu a:hover { background: none; }
  .js .menu a[aria-current="page"], .js .menu a.is-section { color: var(--accent); }
}

@media (min-width: 960px) {
  .nav__inner { flex-wrap: nowrap; position: relative; }
  .menu-wrap { order: 0; width: auto; }
  .menu { width: auto; padding: 0; flex-wrap: nowrap; gap: .1rem; }
  .menu a { font-size: .8125rem; padding: 0 .65rem; }
  .js .menu-btn { display: none; }
  .search-panel {
    position: absolute; left: 0; right: 0; top: 100%; padding: 1rem var(--pad) 1.5rem;
    background: var(--nav-bg-solid); border-bottom: 1px solid var(--linie);
  }
}

/* ===================== Hintergrund-Leuchten (Kopfbereiche) ===================== */
.hero__glow {
  position: absolute; z-index: 0; left: -10%; right: -10%; top: -30%; height: 130%;
  background:
    radial-gradient(38% 50% at 22% 45%, rgba(var(--accent-rgb), .12), transparent 70%),
    radial-gradient(34% 46% at 78% 35%, rgba(175, 156, 143, .45), transparent 70%);
  filter: blur(20px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 92%);
  mask-image: linear-gradient(#000 55%, transparent 92%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ============================ Bildwechsel (Startseite) ============================ */
.hero { position: relative; padding: clamp(1rem, 3vw, 2.5rem) var(--pad) 0; overflow: hidden; }
.slider { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; animation: heroIn 1.1s var(--ease) both; }
.slider__frame {
  position: relative; aspect-ratio: 750 / 200;
  border-radius: clamp(14px, 2.6vw, var(--radius-l));
  overflow: hidden; background: var(--weinrot);
  box-shadow: 0 30px 70px -25px rgba(102, 0, 0, .45), 0 10px 24px rgba(0, 0, 0, .10);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  touch-action: pan-y;
}
.slider__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.slider__img.is-active { opacity: 1; }
.slider__controls { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 1rem; }
.slider__controls[hidden] { display: none; }
.dots { display: flex; align-items: center; padding: 0 .4rem; min-height: 36px; border-radius: 999px; background: rgba(var(--ink), .06); }
.dot { display: grid; place-items: center; width: 26px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .45s var(--ease); }
.dot span {
  position: relative; display: block; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(var(--ink-2), .45); overflow: hidden;
  transition: width .45s var(--ease), background-color .3s;
}
.dot:hover span { background: rgba(var(--ink-2), .7); }
.dot[aria-current="true"] { width: 48px; }
.dot[aria-current="true"] span { width: 36px; background: rgba(var(--ink-2), .3); }
.dot[aria-current="true"] span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--weinrot); transform-origin: left center;
  animation: progress 5s linear both;
}
.slider.is-paused .dot[aria-current="true"] span::after { animation: none; transform: none; }
.dot:focus-visible { outline-offset: -2px; border-radius: 999px; }

/* ============================ Abschnitte ============================ */
.section { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.section--tight { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--grau { background: var(--grau); }
.section + .section--grau, .section--grau + .section { }

.gradient-text { color: var(--accent); }   /* einfarbig Weinrot (im dunklen Design hellere Variante) */

/* Startseite: Einleitung */
.intro { text-align: center; padding-top: clamp(2.5rem, 7vw, 5rem); }
.intro h1 { font-weight: 700; }
.intro h1 br { display: none; }
.h1-a { display: block; text-wrap: balance; font-size: clamp(2.375rem, 7vw, 4.75rem); line-height: 1.05; letter-spacing: -.03em; }
.h1-b {
  display: block; max-width: 40ch; margin: 1rem auto 0; text-wrap: balance;
  font-size: clamp(1.1875rem, 2.6vw, 1.75rem); line-height: 1.3; letter-spacing: -.015em;
  font-weight: 600; color: var(--text-2);
}

/* Unterseiten: Seitenkopf */
.page-hero { position: relative; overflow: hidden; text-align: center; padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2.25rem, 6.5vw, 4.25rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 700;
  text-wrap: balance; animation: fadeUp .9s var(--ease) both;
}
.page-hero .lead {
  max-width: 48ch; margin: 1.1rem auto 0; text-wrap: balance;
  font-size: clamp(1.0625rem, 2.1vw, 1.3125rem); line-height: 1.45; color: var(--text-2); font-weight: 500;
  animation: fadeUp .9s var(--ease) .1s both;
}
.eyebrow {
  display: block; margin-bottom: .9rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  animation: fadeUp .9s var(--ease) both;
}

/* ============================ Karten ============================ */
.card {
  background: var(--surface); border-radius: var(--radius-m);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow);
}
.card h2, .card-title {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.2; color: var(--navy); margin-bottom: 1.1rem;
}
.card h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy); letter-spacing: -.01em; line-height: 1.3; }
.stack { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
.grid-2 { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Fliesstext (Impressum, Datenschutz, Artikel) */
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2.75rem; font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.2;
  font-weight: 700; letter-spacing: -.02em; color: var(--navy);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.prose ul { padding-left: 1.25rem; }
.prose li { margin: .35rem 0; padding-left: .25rem; }
.prose li::marker { color: var(--accent); }
.prose li.plain { list-style: none; margin-left: -1.25rem; padding-left: 0; }
.prose a, .link {
  color: var(--navy); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(var(--navy-rgb), .3); text-underline-offset: .18em; text-decoration-thickness: 1.5px;
  transition: color .2s, text-decoration-color .2s; overflow-wrap: anywhere;
}
.prose a:hover, .link:hover { color: var(--accent); text-decoration-color: currentColor; }
.prose strong { color: var(--navy); }
.prose sup { line-height: 0; }

.prose-cards { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
.prose-cards > .card > * + * { margin-top: 1rem; }
.prose-cards > .card > h2 { margin: 0 0 .25rem; }
.prose-cards .card ul { padding-left: 1.25rem; }
.prose-cards .card li { margin: .35rem 0; }
.prose-cards .card li::marker { color: var(--accent); }
@media (min-width: 900px) { .prose-cards--2 { grid-template-columns: 1fr 1fr; } .prose-cards--2 .wide { grid-column: 1 / -1; } }

/* Schaltflaechen und Links mit Pfeil */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--weinrot); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, transform .25s var(--ease), box-shadow .25s;
  box-shadow: 0 8px 20px -8px rgba(102, 0, 0, .6);
}
.btn:hover { background: var(--weinrot-dunkel); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn img { width: 18px; height: 18px; border-radius: 3px; background: #fff; }
.btn--light { background: var(--surface); color: var(--navy); box-shadow: var(--shadow); }
.btn--light:hover { background: var(--surface); color: var(--accent); }
.back-link {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  padding: 0 1rem 0 .7rem; border-radius: 999px; background: rgba(var(--ink), .05);
  color: var(--navy); font-weight: 600; font-size: .9375rem; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.back-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.back-link:hover { background: rgba(var(--ink), .09); color: var(--accent); }
.back-link:hover svg { transform: translateX(-3px); }

/* ======================= Rechtsgebiete (Karten) ======================= */
.areas {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem); text-align: left;
}
.area {
  position: relative; display: flex; align-items: center; gap: 1rem; height: 100%;
  padding: .6rem 1rem .6rem .6rem;
  background: var(--grau); border-radius: var(--radius-m); overflow: hidden;
  text-decoration: none; color: var(--navy);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s;
}
.area__img { position: relative; flex: none; width: 96px; aspect-ratio: 299 / 210; border-radius: 12px; overflow: hidden; background: var(--grau-2); }
.area__img img { width: 100%; height: 100%; object-fit: cover; }
.area__name {
  flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.area__go {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--paper), .9); color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: transform .35s var(--ease), background-color .3s, color .3s;
}
.area__go svg { width: 14px; height: 14px; }
.area:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); background: var(--surface); }
.area:hover .area__go { background: var(--weinrot); color: #fff; transform: translateX(3px); }
.area:focus-visible { outline-offset: 4px; border-radius: var(--radius-m); }
@media (min-width: 640px) {
  .areas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
  .areas li { grid-column: span 2; }
  .areas li:nth-child(4) { grid-column: 2 / span 2; }
  .areas li:last-child { grid-column: 4 / span 2; }
  .area { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .area__img { width: auto; border-radius: 0; }
  .area__name { padding: 1rem 1.1rem 1.25rem; font-size: .9375rem; }
  .area__go { position: absolute; top: .6rem; right: .6rem; opacity: .9; }
  .area:hover { transform: translateY(-6px); }
  .area:hover .area__go { transform: scale(1.08); opacity: 1; }
}
@media (min-width: 1000px) {
  .areas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
  .areas li, .areas li:nth-child(4), .areas li:last-child { grid-column: auto; }
}

/* Rechtsgebiete-Seite: Abschnitte mit Stichwort-Chips */
.law { display: grid; gap: 1.25rem; align-items: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
.law__img { border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 299 / 210; background: var(--grau-2); }
.law__img img { width: 100%; height: 100%; object-fit: cover; }
.law h2 { margin-bottom: 1rem; }
@media (min-width: 760px) { .law { grid-template-columns: 260px 1fr; gap: 2rem; } }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  padding: .45rem .9rem; border-radius: 999px; background: var(--grau);
  font-size: .9375rem; line-height: 1.3; color: var(--text);
}

/* ============================ Willkommen ============================ */
.welcome { display: grid; gap: 1.5rem 4rem; max-width: 1000px; margin: 0 auto; }
.welcome h2 { font-size: clamp(1.875rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--navy); }
.welcome__text p { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.65; margin-bottom: 1.25rem; max-width: 62ch; }
.signatur { font-family: var(--font-signatur); font-style: italic; font-size: 1.5rem; color: var(--accent); }
.welcome__text p.signatur { margin: 2rem 0 0; }
@media (min-width: 900px) {
  .welcome { grid-template-columns: 5fr 7fr; }
  .welcome h2 { position: sticky; top: calc(var(--nav-h) + 2rem); }
}

/* ============================== NEWS ============================== */
.news {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--radius-l);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(175, 156, 143, .35), transparent 60%),
    linear-gradient(135deg, #660000 0%, #4d0000 55%, #2e0000 100%);
  color: #fff; text-align: center;
  box-shadow: 0 30px 70px -30px rgba(102, 0, 0, .6);
}
.news::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-20deg); animation: sheen 7s ease-in-out 2s infinite; pointer-events: none;
}
.news h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .18em; color: #DED5CB; margin-bottom: .9rem; }
.news p { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.news a {
  color: #fff; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .18em; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color .25s;
}
.news a:hover { text-decoration-color: #fff; }
.news a:focus-visible { outline-color: #fff; border-radius: 4px; }

/* ============================== Kontakt ============================== */
.contact { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
.card address { font-style: normal; }
.card address p { margin-bottom: 1rem; line-height: 1.6; }
.contact-list { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.contact-list li {
  display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .4rem 0;
  border-bottom: 1px solid var(--linie); overflow-wrap: anywhere;
}
.contact-list svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.contact-list a {
  display: inline-block; padding: .4rem 0;
  color: var(--navy); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 85%;
  transition: background-size .35s var(--ease), color .2s;
}
.contact-list a:hover { color: var(--accent); background-size: 100% 1.5px; }

.hours { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.hours th, .hours td { padding: .8rem 0; text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.45; border-bottom: 1px solid var(--linie); }
.hours tr:first-child th, .hours tr:first-child td { border-top: 1px solid var(--linie); }
.hours th { font-weight: 600; color: var(--navy); padding-right: 1.25rem; white-space: nowrap; }
.hours td { text-wrap: balance; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--accent); }
.hours tr.is-today th::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%;
  background: var(--weinrot); vertical-align: .1em; animation: pulse 2s ease-in-out infinite;
}
.note {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--radius-s); background: var(--grau); line-height: 1.45;
}
.note svg { flex: none; width: 20px; height: 20px; margin-top: .1rem; color: var(--accent); }
.card .note { margin-top: 0; }

.house { position: relative; padding: 0; overflow: hidden; min-height: 240px; background: var(--grau-2); }
.house img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.house .house__farbe { opacity: 0; transition: opacity 1.8s ease .4s; }
.house.is-visible .house__farbe, .no-anim .house .house__farbe { opacity: 1; }

@media (max-width: 29.99em) {
  .hours th, .hours td { display: block; border: 0; padding: 0; }
  .hours tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
  .hours tr:first-child { border-top: 1px solid var(--linie); }
  .hours tr:first-child th, .hours tr:first-child td { border-top: 0; }
  .hours th { white-space: normal; margin-bottom: .15rem; }
}
@media (min-width: 700px) {
  .contact { grid-template-columns: 1fr 1fr; }
  .contact .card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: 5fr 7fr; }
  .contact .house { grid-row: span 2; }
  .contact .card:last-child { grid-column: auto; }
}

/* Kontaktseite */
.map-card { padding: 0; overflow: hidden; }
.map-card a { display: block; }
.map-card img { width: 100%; height: auto; }
.map-card .map-caption { padding: .9rem 1.25rem; font-size: .875rem; color: var(--text-2); }
.route-steps { display: grid; gap: 1rem; }
.route-steps .card h3 { margin-bottom: .5rem; }

/* Formulare (Eingabefelder) */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; color: var(--navy); font-size: .9375rem; }
.field input, .field textarea, .inline-form input[type="text"] {
  width: 100%; min-height: 48px; padding: .75rem 1rem; margin: 0;
  border: 1px solid rgba(var(--ink), .15); border-radius: var(--radius-s);
  background: var(--surface); color: var(--text); font-size: 1rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .inline-form input[type="text"]:focus {
  border-color: var(--weinrot); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); outline: none;
}
.inline-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.inline-form input[type="text"] { flex: 1 1 16rem; width: auto; }
.form-hint { font-size: .875rem; color: var(--text-2); }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }

/* Formulare-Seite: Dokument-Karten */
.docs { list-style: none; padding: 0; display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
@media (min-width: 760px) { .docs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .docs--3 { grid-template-columns: repeat(3, 1fr); } }
.doc { display: flex; gap: 1.1rem; align-items: flex-start; height: 100%; }
.doc__thumb {
  flex: none; display: block; width: 88px; border-radius: 8px; overflow: hidden;
  background: var(--surface); box-shadow: 0 0 0 1px var(--linie), 0 6px 16px rgba(0, 0, 0, .1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.doc__thumb img { width: 100%; height: auto; }
.doc__thumb:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 0 0 1px var(--linie), 0 14px 28px rgba(0, 0, 0, .16); }
.doc__body { min-width: 0; display: grid; gap: .35rem; }
.doc__body p { font-size: .9375rem; color: var(--text-2); }

/* Veroeffentlichungen */
.year-nav {
  position: sticky; top: var(--nav-h); z-index: 50;
  padding: .6rem 0; background: rgba(var(--paper), .85);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--linie);
}
.year-nav ul { list-style: none; padding: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.year-nav ul::-webkit-scrollbar { display: none; }
.year-nav a {
  display: inline-flex; align-items: center; white-space: nowrap; min-height: 40px; padding: 0 1rem;
  border-radius: 999px; background: var(--grau); color: var(--text); font-size: .9375rem; font-weight: 500;
  text-decoration: none; transition: background-color .2s, color .2s;
}
.year-nav a:hover { background: var(--grau-2); color: var(--accent); }
.year-nav a.is-active { background: var(--weinrot); color: #fff; }
.year { scroll-margin-top: calc(var(--nav-h) + 72px); }
.year + .year { margin-top: clamp(2.5rem, 6vw, 4rem); }
.year h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); margin-bottom: 1rem; }
.articles { list-style: none; padding: 0; display: grid; gap: .6rem; }
.article-link {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem 1rem 1.25rem;
  border-radius: var(--radius-s); background: var(--grau); text-decoration: none; color: var(--navy);
  transition: background-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.article-link:hover { background: var(--surface); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.article-link__text { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.article-link__meta { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.article-link__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.article-link .area__go { flex: none; }
.article-link:hover .area__go { background: var(--weinrot); color: #fff; transform: translateX(3px); }

/* Artikelseite */
.article-head { text-align: left; }
.article-head h1 { font-size: clamp(1.875rem, 5vw, 3.25rem); text-wrap: balance; }
.article-meta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; color: var(--text-2); font-weight: 500; }
.article-meta svg { width: 18px; height: 18px; color: var(--accent); }
.article-body { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.75; }
.author { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--linie); }
.author img { width: 72px; height: 96px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); }
.author p { font-size: .9375rem; color: var(--text-2); margin: 0; }
.article-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }

/* Kanzleiprofil: Zeitleiste */
.timeline { list-style: none; padding: 0; position: relative; margin-top: .5rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: .6rem; bottom: .6rem; width: 2px; background: linear-gradient(var(--weinrot), var(--sand)); border-radius: 2px; }
.timeline li { position: relative; padding: 0 0 1.5rem 2.25rem; line-height: 1.55; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--weinrot); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1);
}
.timeline strong { display: block; color: var(--accent); font-size: .9375rem; letter-spacing: .02em; }
.profile-name { font-size: clamp(1.375rem, 2.8vw, 1.875rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); margin-bottom: 1.5rem; }

/* Stellenangebote */
.job { display: grid; gap: .75rem; }
.job__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--grau); color: var(--accent); }
.job__icon svg { width: 24px; height: 24px; }
.stand { margin-top: 1.5rem; font-size: .875rem; color: var(--text-2); text-align: center; }

/* Sitemap */
.sitemap { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); }
@media (min-width: 760px) { .sitemap { grid-template-columns: 1fr 1fr; } .sitemap .wide { grid-column: 1 / -1; } }
.sitemap h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: .6rem; }
.linklist { list-style: none; padding: 0; display: grid; gap: .1rem; }
.linklist a { display: inline-flex; align-items: center; min-height: 36px; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.linklist a:hover { color: var(--accent); text-decoration: underline; }
.linklist--cols { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 1.5rem; }


/* ======================= Ergaenzungen Unterseiten ======================= */
figure { margin: 0; }
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -.025em; font-weight: 700;
  color: var(--navy); margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.section-hint { margin-top: 1.25rem; text-align: center; }
.anfahrt { align-items: start; }
.route-steps .job__icon { margin-bottom: .75rem; }

/* Sprungnavigation im Seitenkopf (Rechtsgebiete) */
.jump { margin-top: 1.75rem; animation: fadeUp .9s var(--ease) .2s both; }
.jump ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.jump a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px;
  background: rgba(var(--paper), .75); box-shadow: 0 0 0 1px var(--linie);
  color: var(--navy); font-size: .9375rem; font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.jump a:hover { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* Artikelseiten */
.page-hero--article { text-align: left; padding-top: clamp(1.5rem, 5vw, 3rem); }
.page-hero--article .back-link { margin-bottom: clamp(1.25rem, 4vw, 2rem); animation: fadeUp .9s var(--ease) both; }
.page-hero--article .article-meta { animation: fadeUp .9s var(--ease) .1s both; }
.article-body > p, .article-body > ul { max-width: 68ch; }

/* Lange deutsche Woerter duerfen umbrechen, Rasterspalten nie breiter als der Bildschirm */
.prose-cards, .stack, .grid-2, .docs, .sitemap, .articles, .contact { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .grid-2, .docs, .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .prose-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .docs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.card, .prose, .page-hero h1, .section-title, .article-link__title { overflow-wrap: break-word; }
.card h2, .card h3, .prose h2, .page-hero h1, .section-title, .year h2 { -webkit-hyphens: auto; hyphens: auto; }

/* ============================== Fusszeile ============================== */
.footer { background: var(--grau); color: var(--text-2); font-size: .8125rem; line-height: 1.6; }
.footer__line { height: 6px; background: url(../bg_doppellinie.png) repeat-x; }
.footer__inner { padding-top: 1.75rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.footer-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; margin: 0 0 1rem -.5rem; }
@media (min-width: 640px) { .footer-nav li + li { border-left: 1px solid rgba(var(--ink), .18); } }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--text); text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; }
.footer p { padding-top: 1rem; border-top: 1px solid rgba(var(--ink), .1); }
.footer p a { color: var(--text); }
.footer p a:hover { color: var(--accent); }

/* ============================ Animationen ============================ */
@keyframes heroIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sheen { 0% { left: -60%; } 30%, 100% { left: 130%; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(102, 0, 0, .35); } 50% { box-shadow: 0 0 0 6px rgba(102, 0, 0, 0); } }

/* Elemente erscheinen beim Scrollen (nur wenn das Skript laeuft) */
.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal-on [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .house .house__farbe { opacity: 1; }
  .dot[aria-current="true"] span::after { transform: none; }
}

@media print {
  .nav, .hero__glow, .slider__controls, .skip-link, .search-panel, .year-nav { display: none !important; }
  .section { padding: 1.5rem 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .news { color: #000; background: none; box-shadow: none; border: 1px solid #999; }
  .news a { color: #000; }
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Feinschliff schmale Bildschirme */
.law { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .law { grid-template-columns: 260px minmax(0, 1fr); } }
.chips li, .article-link__title, .linklist a { overflow-wrap: anywhere; }
.article-link__text { grid-template-columns: minmax(0, 1fr); }
.inline-form input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.contact--page .house { aspect-ratio: 414 / 345; min-height: 0; align-self: start; }
@media (min-width: 700px) { .contact--page .stack { grid-column: auto; } }
@media (min-width: 1000px) { .contact--page .house { grid-row: auto; } }
.contact--page .stack > .card:last-child { grid-column: auto; }


/* ============================ Einwilligung ============================ */
.consent {
  position: fixed; z-index: 300; left: 0; right: 0; bottom: 0;
  padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__inner {
  pointer-events: auto;
  max-width: 760px; margin: 0 auto; padding: 1.5rem 1.5rem 1.25rem;
  border-radius: var(--radius-m); background: rgba(var(--paper), .94);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px var(--linie);
  opacity: 0; transform: translateY(24px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.consent.is-visible .consent__inner { opacity: 1; transform: none; }
.consent h2 { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.consent p { font-size: .9375rem; line-height: 1.5; color: var(--text); }
.consent p a { color: var(--navy); font-weight: 600; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.btn--consent { flex: 1 1 12rem; }
.footer-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; border: 0; background: none;
  color: var(--text); font-size: inherit; cursor: pointer; text-align: left;
}
.footer-link:hover { color: var(--accent); text-decoration: underline; }
.js-only { display: none; }
.js .js-only { display: list-item; }
.footer-nav .js-only { display: none; }
.js .footer-nav .js-only { display: flex; }
.footer-nav li { display: flex; }

/* ============================ Suche ============================ */
.search--page { max-width: none; margin-bottom: 1.25rem; }
.search--page input[type="search"] { min-height: 56px; font-size: 1.125rem; border-radius: 16px; padding-left: 1.25rem; }
.search--page button { width: 48px; border-radius: 12px; }
.search-status { color: var(--text-2); margin-bottom: 1.25rem; font-weight: 500; }
.search-results .article-link { align-items: flex-start; }
.search-snippet { margin-top: .4rem; font-size: .9375rem; font-weight: 400; color: var(--text-2); line-height: 1.5; }
mark { background: rgba(var(--accent-rgb), .12); color: var(--accent); border-radius: 3px; padding: 0 .1em; font-weight: 600; }

/* Sitemap: Artikel mit Titel */
.linklist--articles { gap: .2rem; }
.linklist--articles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.linklist--articles a { min-height: 0; }
.linklist__meta { display: block; font-size: .8125rem; font-weight: 600; color: var(--accent); }
.linklist__pdf { font-size: .8125rem; font-weight: 600; color: var(--accent) !important; }

/* Kontaktformular: Ergebnisseite und Spam-Falle */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.result h2 { margin: .75rem 0 .75rem; }
.result p + p { margin-top: .75rem; }
.result--error .job__icon { color: var(--accent); }
.result-list { padding-left: 1.25rem; }
.result-list li { margin: .3rem 0; }
.result-list li::marker { color: var(--accent); }
.result-data { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin: 1rem 0; padding: 1rem 1.1rem; border-radius: var(--radius-s); background: var(--grau); }
.result-data dt { font-weight: 600; color: var(--navy); font-size: .875rem; margin-top: .5rem; }
.result-data dt:first-child { margin-top: 0; }
.result-data dd { margin: 0; overflow-wrap: anywhere; }

/* ============ Stellenangebote (ueberarbeitet 24.10.2026) ============ */
.job__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.job h2 { margin: .25rem 0 0; }
.job__sub { color: var(--text-2); font-weight: 500; margin-top: -.35rem; }
.status-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px;
  background: var(--grau); color: var(--text-2); font-size: .8125rem; font-weight: 600; line-height: 1.2;
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 3px rgba(175, 156, 143, .25); }
.card--accent { background: linear-gradient(160deg, var(--surface) 0%, var(--surface) 55%, var(--sand-hell) 160%); }
.flow > * + * { margin-top: 1rem; }
.flow > h2 + p { margin-top: .5rem; }
.chips--links li { padding: 0; background: none; }
.chips--links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .95rem; border-radius: 999px;
  background: var(--grau); color: var(--navy); font-weight: 500; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.chips--links a:hover { background: var(--weinrot); color: #fff; }

/* ============ Datenschutzerklaerung (neu gefasst 24.10.2026) ============ */
.ds h3 { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.ds a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--navy-rgb), .3); text-underline-offset: .18em; overflow-wrap: anywhere; }
.ds a:hover { color: var(--accent); text-decoration-color: currentColor; }
.ds code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; padding: .1em .35em; border-radius: 6px; background: var(--grau); overflow-wrap: anywhere; }
.ds-num { color: var(--accent); margin-right: .15em; }
.ds .card { scroll-margin-top: calc(var(--nav-h) + 16px); }
.checklist { list-style: none; padding: 0 !important; display: grid; gap: .6rem; }
.checklist li { position: relative; margin: 0 !important; padding-left: 1.9rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--weinrot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.ds-toc { margin-top: 1.75rem !important; padding: 1.1rem 1.25rem; border-radius: var(--radius-s); background: var(--grau); }
.ds-toc h3 { margin: 0 0 .5rem; font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.ds-toc ol { padding-left: 1.5rem; margin: 0; columns: 2 16rem; column-gap: 2rem; }
.ds-toc li { margin: 0 !important; padding: .2rem 0; break-inside: avoid; }
.ds-toc li::marker { color: var(--accent); font-weight: 600; }
.ds-toc a { font-weight: 500; text-decoration: none; }
.ds-toc a:hover { text-decoration: underline; }

/* ============ Datenschutz-Einstellungen: Auswahl je Dienst (24.10.2026) ============ */
.consent__inner { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; }
.consent__details { margin-top: 1rem; display: grid; gap: .6rem; }
.consent__details[hidden] { display: none; }
.consent-opt { padding: .85rem 1rem; border-radius: var(--radius-s); background: var(--grau); }
.consent-opt__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-opt__head label { font-weight: 700; color: var(--navy); cursor: pointer; }
.consent .consent-opt p { margin-top: .3rem; font-size: .875rem; color: var(--text-2); }
.consent__actions [hidden] { display: none; }
.consent .btn--light { box-shadow: 0 0 0 1px var(--linie); }

/* Schalter (Checkbox mit role="switch") */
.switch {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0;
  width: 51px; height: 31px; border-radius: 999px; background: var(--switch-off); cursor: pointer;
  transition: background-color .25s var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .25s var(--ease);
}
.switch:checked { background: var(--weinrot); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { cursor: default; opacity: .55; }
.switch:focus-visible { outline: 3px solid rgba(var(--navy-rgb), .45); outline-offset: 2px; }
@media (forced-colors: active) { .switch { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; } .switch::after { display: none; } }

/* Statusanzeige in der Datenschutzerklaerung */
.consent-status { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-s); background: var(--grau); }
.consent-status[hidden] { display: none; }
.consent-status__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .35rem 0; }
.consent-status__row + .consent-status__row { border-top: 1px solid var(--linie); }
.consent-status__name { font-weight: 600; color: var(--navy); }
.consent-status__date { margin-top: .5rem; font-size: .875rem; color: var(--text-2); }
.consent-status__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem !important; }
.status-pill--on { background: var(--ok-bg); color: var(--ok-fg); }
.status-pill--off { background: var(--surface); color: var(--text-2); }

/* Verlaufsschrift: Unterlaengen (g, p, y) nicht abschneiden */
.consent-status h3 { margin: 0 0 .4rem !important; }
.news p.news__sub { max-width: 40ch; margin: 1rem auto 0; font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); font-weight: 500; letter-spacing: 0; line-height: 1.45; color: rgba(255, 255, 255, .85); text-wrap: balance; }

/* ============================ Interner Bereich (24.10.2026) ============================ */
.notice { display: flex; gap: 1rem; align-items: flex-start; border-left: 5px solid var(--weinrot); }
.notice__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .08); color: var(--accent); }
.notice__icon svg { width: 24px; height: 24px; }
.notice h2 { margin: .35rem 0 .5rem; }
.notice p + p { margin-top: .6rem; }
.board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.board h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.board__count { font-size: .875rem; color: var(--text-2); font-weight: 500; }
.board__bar { height: 6px; margin: .8rem 0 1rem; border-radius: 999px; background: var(--grau); overflow: hidden; }
.board__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--weinrot), #8a3b3b); }
.tasks { list-style: none; padding: 0; display: grid; gap: .15rem; }
.task { display: flex; align-items: flex-start; gap: .65rem; padding: .45rem 0; line-height: 1.45; border-bottom: 1px solid var(--linie); }
.task:last-child { border-bottom: 0; }
.task svg { flex: none; width: 20px; height: 20px; margin-top: .1rem; }
.task--done { color: var(--text-2); }
.task--done svg { color: var(--sand); }
.task--done > span:first-of-type { text-decoration: line-through; text-decoration-color: rgba(var(--ink), .35); }
.task--open { font-weight: 600; color: var(--navy); }
.task--open svg { color: var(--accent); }
.status-pill--todo { background: rgba(var(--accent-rgb), .1); color: var(--accent); padding: .15rem .6rem; }
.status-pill--old { background: var(--grau); color: var(--text-2); padding: .15rem .6rem; font-size: .75rem; }
.intern-grid { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .intern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.intern-grid h3 { font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.intern-grid h4 { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ilinks { list-style: none; padding: 0; display: grid; gap: .35rem; }
.ilinks li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.ilink { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--navy); text-decoration: none; }
.ilink:hover .ilink__text { color: var(--accent); text-decoration: underline; }
.ilink__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grau); color: var(--accent); transition: background-color .2s, color .2s; }
.ilink:hover .ilink__icon { background: var(--weinrot); color: #fff; }
.ilink__icon svg { width: 20px; height: 20px; }
.ilink__text { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ilink__type { display: block; font-size: .75rem; font-weight: 500; color: var(--text-2); letter-spacing: .02em; }
.link-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.flow code, .stand code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: .1em .35em; border-radius: 6px; background: var(--grau); overflow-wrap: anywhere; }
.ilink__type .status-pill { margin-left: .4rem; vertical-align: 1px; }

/* ============ Datenschutz-Einstellungen: Einstellungs-Center (24.10.2026) ============ */
.consent__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .6rem; font-size: .875rem; }
.consent .consent__links a { color: var(--navy); font-weight: 600; }

.cc { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: var(--pad); }
.cc[hidden] { display: none; }
.cc__backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 30, .38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.cc__dialog {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 820px;
  max-height: calc(100vh - 2 * var(--pad)); max-height: calc(100dvh - 2 * var(--pad));
  border-radius: var(--radius-l); background: var(--surface); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35), 0 0 0 1px var(--linie);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cc.is-visible .cc__backdrop { opacity: 1; }
.cc.is-visible .cc__dialog { opacity: 1; transform: none; }
.cc__head { position: relative; padding: 1.5rem 4rem .75rem 1.75rem; }
.cc__head h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.cc__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .35rem; font-size: .875rem; }
.cc__links a, .cc-links a, .cc-dl a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--navy-rgb), .3); text-underline-offset: .18em; }
.cc__links a:hover, .cc-links a:hover, .cc-dl a:hover { color: var(--accent); }
.cc__close {
  position: absolute; top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--grau); color: var(--navy); cursor: pointer; transition: background-color .2s;
}
.cc__close:hover { background: var(--grau-2); }
.cc__close svg { width: 20px; height: 20px; }
.cc__tabs {
  display: flex; gap: .25rem; margin: 0 1.75rem; padding: .25rem; border-radius: 14px; background: var(--grau);
  overflow-x: auto; scrollbar-width: none;
}
.cc__tabs::-webkit-scrollbar { display: none; }
.cc-tab {
  flex: 1 0 auto; min-height: 40px; padding: .45rem 1rem; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: .9375rem; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.cc-tab:hover { color: var(--navy); }
.cc-tab[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cc__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem 1.75rem 1.25rem; }
.cc-panel:focus-visible { outline: 2px solid rgba(var(--navy-rgb), .35); outline-offset: 4px; border-radius: 8px; }
.cc-intro { color: var(--text-2); font-size: .9375rem; line-height: 1.5; margin-bottom: .9rem; }
.cc-card { padding: 1rem 1.15rem; border-radius: var(--radius-s); background: var(--grau); }
.cc-card + .cc-card, .cc-card + .cc-table-wrap, .cc-table-wrap + .cc-card { margin-top: .6rem; }
.cc-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--navy); display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.cc-card > p { margin-top: .35rem; font-size: .9rem; line-height: 1.5; color: var(--text-2); }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cc-row > :first-child { min-width: 0; }
.cc-locked { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cc-row .cc-locked + .switch { margin-left: 0; }
.cc-count, .cc-prov { font-size: .8125rem; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.cc-prov { display: block; }
.cc-card h3 .cc-prov { display: inline; }
.cc-name { font-weight: 600; color: var(--navy); }
.cc-sub { padding: .75rem .9rem; border-radius: 10px; background: var(--surface); }
.cc-sub + .cc-sub { margin-top: .5rem; }
.cc-sub p { margin-top: .3rem; font-size: .875rem; color: var(--text-2); line-height: 1.45; }
.cc-more {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; margin-top: .35rem; padding: 0; border: 0; background: none;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent); cursor: pointer;
}
.cc-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.cc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.cc-more__body { margin-top: .35rem; }
.cc-more__body[hidden] { display: none; }
.cc-dl { display: grid; gap: .5rem; margin: 0; padding: .85rem .95rem; border-radius: 10px; background: var(--surface); font-size: .875rem; line-height: 1.45; }
.cc-dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
@media (min-width: 640px) { .cc-dl > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; } }
.cc-dl dt { font-weight: 600; color: var(--navy); }
.cc-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.cc-card .cc-dl { margin-top: 0; }
.cc-table-wrap { margin-top: .6rem; overflow-x: auto; border-radius: 10px; background: var(--surface); }
.cc-card .cc-table-wrap { margin-top: .5rem; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.4; }
.cc-table caption { padding: .7rem .9rem .3rem; text-align: left; font-weight: 700; color: var(--navy); font-size: .875rem; }
.cc-table th, .cc-table td { padding: .5rem .9rem; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); }
.cc-table thead th { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.cc-table tbody th { font-weight: 500; white-space: nowrap; }
.cc-table code, .cc-dl code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; padding: .05em .35em; border-radius: 5px; background: var(--grau); }
.cc-meta { margin-top: .5rem; font-size: .875rem; color: var(--text-2); }
.cc-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .5rem; font-size: .875rem; }
.cc__foot { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem 1.75rem 1.25rem; border-top: 1px solid var(--linie); background: rgba(var(--paper), .96); }
.cc__foot .btn--consent { flex: 1 1 11rem; }
.cc .btn--light { box-shadow: 0 0 0 1px var(--linie); }
.switch:indeterminate { background: #b88a8a; }
.switch:indeterminate::after { transform: translateX(10px); }

@media (max-width: 639px) {
  .cc { padding: 0; align-items: flex-end; }
  .cc__dialog { max-height: 94vh; max-height: 94dvh; border-radius: var(--radius-l) var(--radius-l) 0 0; transform: translateY(40px); }
  .cc__head { padding: 1.25rem 3.75rem .6rem 1.1rem; }
  .cc__close { top: .8rem; right: .8rem; }
  .cc__tabs { margin: 0 1.1rem; }
  .cc-tab { padding: .45rem .75rem; font-size: .875rem; }
  .cc__body { padding: .9rem 1.1rem 1rem; }
  .cc__foot { padding: .75rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  .cc__foot .btn--consent { flex-basis: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .cc__backdrop, .cc__dialog { transition: none; } }
@media print { .cc, .consent { display: none !important; } }
.cc__head, .cc__tabs, .cc__foot { flex: none; }
.cc__body { min-height: 0; }
.switch:indeterminate { background: linear-gradient(90deg, var(--weinrot) 50%, var(--switch-off) 50%); }
@media (max-width: 639px) {
  .cc__foot { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cc__foot [data-cc="save"] { grid-column: 1 / -1; grid-row: 1; }
  .cc__foot .btn--consent { min-height: 44px; padding-left: .75rem; padding-right: .75rem; }
}


/* =====================================================================
   Dunkles Design (24.10.2026)
   - Standard ist hell; dunkel nur nach Wahl ueber den Schalter oben
     (data-theme="dark" am <html>, gespeichert als kdh-design).
   ===================================================================== */
:root[data-theme="dark"] {
  --weinrot: #9b2626;
  --weinrot-dunkel: #b33434;
  --navy: #eceef8;
  --sand: #bba897;
  --sand-hell: #3c342e;
  --grau: #17171a;
  --grau-2: #232327;
  --text: #e3e3e8;
  --text-2: #a8a8b3;
  --weiss: #0e0e10;
  --linie: rgba(255, 255, 255, .1);
  --accent: #ef7d7d;
  --accent-rgb: 239, 125, 125;
  --navy-rgb: 205, 210, 245;
  --surface: #202024;
  --ink: 255, 255, 255;
  --ink-2: 225, 225, 232;
  --paper: 32, 32, 36;
  --nav-bg: rgba(16, 16, 18, .74);
  --nav-bg-solid: rgba(16, 16, 18, .97);
  --placeholder: #8d8d98;
  --switch-off: #4b4b53;
  --ok-bg: rgba(88, 200, 128, .16);
  --ok-fg: #94dfae;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
  color-scheme: dark;
}
:root[data-theme="dark"] .hero__glow { opacity: .35; }
:root[data-theme="dark"] .map-card img, :root[data-theme="dark"] .doc__thumb img { filter: brightness(.88); }
:root[data-theme="dark"] .slider__frame { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .footer__line { opacity: .6; }
html { background: var(--weiss); }
body, .card, .section--grau, .footer, .nav::before { transition: background-color .3s var(--ease), color .3s var(--ease); }

/* Hell/Dunkel-Schalter in der Kopfzeile */
.theme-btn .icon-sun { display: none; }
:root[data-theme="dark"] .theme-btn .icon-sun { display: block; }
:root[data-theme="dark"] .theme-btn .icon-moon { display: none; }
.theme-btn svg { transition: transform .5s var(--ease); }
.theme-btn:active svg { transform: rotate(40deg) scale(.9); }
@media (max-width: 959.98px) { .js .theme-btn { order: 0; } }
@media print { .theme-btn { display: none !important; } }