/* =======================================================================
   Notarin Johanna Birkner · Schönebeck (Elbe)
   Basis-Stylesheet — erstellt und verwaltet durch NotarNova
   ----------------------------------------------------------------------
   Farbwelt aus dem Original-Auftritt:
     Navy    #162660 (Logo) / #212A5F (Fließtext-Navy)
     Creme   #EDE3D1
     Hellblau#D5E5FC
     Grau    #EEEEEE
   Schriften: Cinzel (Display) + Jost (Text) — lokal eingebunden, kein CDN.
   ======================================================================= */

/* ─── Webfonts ───────────────────────────────────────────────────────
   Beide Familien liegen als WOFF2 auf dem eigenen Server. Es wird keine
   Verbindung zu Google Fonts oder einem anderen CDN aufgebaut — beim
   Seitenaufruf verlässt also keine IP-Adresse das Haus.

   Eingebunden sind nur die tatsächlich verwendeten Schnitte:
   Cinzel in einer Stärke (Überschriften) und Jost als variable Schrift
   (Fließtext, Stärke 100–900 stufenlos). Zusammen 39 KB.
   Der Kursivschnitt und Cinzel 600 wurden entfernt, weil sie nirgends
   angefordert werden — das spart 45 KB.

   Die ...-override-Angaben gleichen die Ausweichschriften an die
   Metriken der echten Schrift an. Dadurch springt das Layout nicht,
   während die Schriften noch geladen werden.                          */
@font-face{
  font-family:'Cinzel';
  src:url('../fonts/cinzel-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cinzel Ausweich';
  src:local('Times New Roman'),local('Times'),local('Georgia'),local('serif');
  ascent-override:97.6%;descent-override:37.2%;line-gap-override:0%;size-adjust:97%;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/jost-variable.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jost Ausweich';
  src:local('Helvetica Neue'),local('Arial'),local('Segoe UI'),local('sans-serif');
  ascent-override:107%;descent-override:37.5%;line-gap-override:0%;size-adjust:97%;
}

/* ─── Design-Tokens ─────────────────────────────────────────────────── */
:root{
  --navy:#162660;
  --navy-text:#212A5F;
  --navy-deep:#0E1A44;
  --navy-soft:#3D4C86;
  --cream:#EDE3D1;
  --cream-light:#F6F0E5;
  --blue-light:#D5E5FC;
  --blue-pale:#EAF2FE;
  /* Aus dem Navy der Kanzlei ins Violett gezogen — für die
     Aktuelles-Sektion und die linken Spalten im Beitragsbereich. */
  --lila:#241C56;
  --lila-hell:#4B3E93;
  --lila-verlauf:linear-gradient(148deg,var(--lila) 0%,#332A6E 46%,var(--lila-hell) 100%);
  --gray:#EEEEEE;
  --gray-mid:#6B7080;
  --line:rgba(22,38,96,.14);
  --text:#1B1E28;
  --white:#fff;

  --serif:'Cinzel', 'Cinzel Ausweich', 'Times New Roman', Georgia, serif;
  --sans:'Jost', 'Jost Ausweich', system-ui, -apple-system, sans-serif;

  --header-h:124px;
  --shell:1280px;
  --pad:clamp(20px, 5vw, 64px);

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-sanft:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* WICHTIG: overflow-x MUSS 'clip' sein, nicht 'hidden'.
   'hidden' macht das Element zum Scrollcontainer und setzt damit
   position:sticky des Kopfbereichs außer Kraft. */
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:clip}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--white);
  line-height:1.68;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
/* <picture> selbst soll kein eigenes Kästchen bilden — die Regeln für
   die Bilder greifen dadurch unverändert weiter. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--navy);color:#fff}

/* ─── Typografie ────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--navy);line-height:1.12;letter-spacing:.01em}
.display{
  font-family:var(--serif);
  font-size:clamp(34px,5.2vw,68px);
  line-height:1.05;
  color:var(--navy);
  font-weight:400;
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(30px,4.4vw,56px);
  text-align:center;
  color:var(--navy);
  margin-bottom:clamp(36px,5vw,64px);
  font-weight:400;
}
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy-soft);display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none}
/* Ohne den Strich davor: dann beginnt die Zeile an derselben Kante wie
   die Überschrift darunter. */
.eyebrow.ohne-strich::before{display:none}
.lead{font-size:clamp(16px,1.35vw,18.5px);line-height:1.78;font-weight:300}
p + p{margin-top:1.15em}
strong,b{font-weight:500;color:var(--navy)}

/* ─── Layout-Helfer ─────────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}
.shell-schmal{max-width:960px;margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.sec-pad{padding-block:clamp(64px,8vw,132px)}
.bg-gray{background:var(--gray)}
.bg-cream{background:var(--cream-light)}
.bg-blue{background:var(--blue-pale)}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:13px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:17px 28px;border:1.5px solid var(--navy);color:var(--navy);
  background:transparent;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.btn-light{border-color:rgba(255,255,255,.65);color:#fff}
.btn-light:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ─── Formular-Knöpfe ───────────────────────────────────────────────
   Alle Knöpfe einer Sektion sind gleich breit: das Raster mit
   grid-template-columns:max-content richtet sich nach dem längsten
   Eintrag, die übrigen dehnen sich mit.

   Beim Überfahren wischt eine Farbfläche von links herein, der Pfeil
   läuft nach rechts aus und ein zweiter rückt von links nach.

   Kontrast geprüft (WCAG): weißer Knopf auf Navy = 14,2:1, cremefarben
   beim Überfahren = 12,5:1, weiß mit Navy-Rand auf Creme = 14,2:1.   */
.formular-knopf{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  padding:13px 18px;border:1.5px solid transparent;
  transition:color .55s cubic-bezier(.33,1,.68,1),
             border-color .55s cubic-bezier(.33,1,.68,1),
             transform .55s cubic-bezier(.33,1,.68,1),
             box-shadow .55s cubic-bezier(.33,1,.68,1);
}
/* Die Farbfläche wischt weich von links herein — bewusst langsam und
   mit sanfter Beschleunigung, damit es ruhig statt hektisch wirkt. */
.formular-knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .68s cubic-bezier(.33,1,.68,1);
}
.formular-knopf:hover::before,.formular-knopf:focus-visible::before{transform:scaleX(1)}
.formular-knopf > span:not(.pfeil){position:relative;text-align:left}

.formular-knopf .pfeil{position:relative;width:22px;height:12px;flex:none;overflow:hidden}
.formular-knopf .pfeil svg{
  position:absolute;top:0;left:0;width:22px;height:12px;
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .62s cubic-bezier(.33,1,.68,1);
}
.formular-knopf .pfeil svg + svg{transform:translateX(-26px)}
.formular-knopf:hover .pfeil svg,
.formular-knopf:focus-visible .pfeil svg{transform:translateX(26px)}
.formular-knopf:hover .pfeil svg + svg,
.formular-knopf:focus-visible .pfeil svg + svg{transform:translateX(0)}

.field-block.cream .formular-knopf{background:#fff;color:var(--navy);border-color:var(--navy)}
.field-block.cream .formular-knopf::before{background:var(--navy)}
.field-block.cream .formular-knopf:hover,
.field-block.cream .formular-knopf:focus-visible{
  color:#fff;transform:translateX(3px);box-shadow:0 10px 26px rgba(22,38,96,.18);
}
.field-block.navy .formular-knopf{background:#fff;color:var(--navy);border-color:#fff}
.field-block.navy .formular-knopf::before{background:var(--cream)}
.field-block.navy .formular-knopf:hover,
.field-block.navy .formular-knopf:focus-visible{
  border-color:var(--cream);transform:translateX(3px);box-shadow:0 10px 26px rgba(0,0,0,.26);
}

/* ─── Hinweisleiste ─────────────────────────────────────────────────── */
.notice{
  background:var(--blue-light);color:var(--navy);
  font-size:14px;font-weight:400;position:relative;z-index:60;
}
.notice-inner{
  max-width:var(--shell);margin-inline:auto;padding:11px var(--pad);
  display:flex;align-items:center;gap:16px;justify-content:center;text-align:center;
}
.notice b{font-weight:500}
.notice-close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:grid;place-items:center;opacity:.55;font-size:15px;line-height:1;
}
.notice-close:hover{opacity:1}
body.notice-hidden .notice{display:none}

/* ═══ HEADER ════════════════════════════════════════════════════════════
   Geteilte Navigation: links zwei Punkte, in der Mitte das Logo, rechts
   die restlichen Punkte samt Barrierefreiheits-Symbol.

   Auf der Startseite (.hero-kopf) rücken beide Gruppen zunächst in die
   Mitte zusammen, das Logo ist ausgeblendet. Sobald man am Hero vorbei
   ist, fliegen sie an die Seiten und geben das Logo frei. Die Strecke
   berechnet site.js und legt sie als --weg-vorn / --weg-hinten ab.
   ═══════════════════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 6px 30px rgba(22,38,96,.09)}
.header-inner{
  max-width:1560px;margin-inline:auto;padding:0 var(--pad);
  height:var(--header-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,2.4vw,40px);
}

/* Logo mittig */
.logo{grid-column:2;justify-self:center;display:flex;align-items:center;height:100%;padding-block:14px}
.logo img{height:100%;width:auto;max-height:82px}

/* Menügruppen */
.nav-vorn{grid-column:1;justify-self:start}
.header-rechts{grid-column:3;justify-self:end;display:flex;align-items:center;gap:clamp(16px,1.8vw,30px)}
.nav-vorn,.nav-hinten{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px)}
.nav-vorn a,.nav-hinten a{
  font-family:var(--sans);
  font-size:20px;font-weight:400;color:var(--navy);
  position:relative;padding-block:8px;white-space:nowrap;
}
.nav-vorn a::after,.nav-hinten a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1.5px;
  background:var(--navy);transition:right .3s var(--ease);
}
.nav-vorn a:hover::after,.nav-hinten a:hover::after,
.nav-vorn a[aria-current="page"]::after,.nav-hinten a[aria-current="page"]::after{right:0}

.header-tools{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);
  color:var(--navy);transition:background .2s var(--ease),color .2s var(--ease);
}
.icon-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none}

/* ─── Ausgangszustand auf der Startseite: alles in der Mitte ────────── */
.site-header.hero-kopf .nav-vorn{
  transform:translateX(var(--weg-vorn,0px));
  transition:transform .85s var(--ease-sanft);
}
.site-header.hero-kopf .header-rechts{
  transform:translateX(var(--weg-hinten,0px));
  transition:transform .85s var(--ease-sanft);
}
.site-header.hero-kopf .logo{
  opacity:0;transform:scale(.82);pointer-events:none;
  transition:opacity .5s var(--ease) .12s, transform .8s var(--ease-sanft) .12s;
}
/* Endzustand: Gruppen an den Seiten, Logo sichtbar */
.site-header.hero-kopf.logo-sichtbar .nav-vorn,
.site-header.hero-kopf.logo-sichtbar .header-rechts{transform:none}
.site-header.hero-kopf.logo-sichtbar .logo{opacity:1;transform:none;pointer-events:auto}

/* ═══ OFF-CANVAS-MENÜ ═══════════════════════════════════════════════════
   Oben ein weißer Streifen in Kopfhöhe, damit das Logo in seinen
   Originalfarben stehen kann. Beim Überfahren eines Menüpunkts fährt
   ein Pfeil von links herein und schiebt den Text mit — statt eines
   bloßen Farbwechsels.
   ═══════════════════════════════════════════════════════════════════════ */
.menu-overlay{
  position:fixed;inset:0;z-index:70;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s;
}
.menu-overlay.open{opacity:1;visibility:visible}

/* Weißer Kopfstreifen in Höhe des normalen Kopfbereichs */
.menu-kopf{
  flex:none;background:#fff;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);border-bottom:1px solid var(--line);
}
.menu-logo{display:flex;align-items:center;height:100%;padding-block:14px}
.menu-logo img{height:100%;width:auto;max-height:62px}
.menu-kopf .icon-btn{border-color:var(--line);color:var(--navy)}
.menu-kopf .icon-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.menu-koerper{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:clamp(26px,4vw,52px) var(--pad) clamp(22px,3vw,38px);
}

/* Hauptpunkte */
.menu-links{display:flex;flex-direction:column;gap:2px;margin-block:auto}
.menu-links a{
  display:flex;align-items:center;gap:0;
  font-family:var(--serif);font-size:clamp(26px,6.2vw,44px);color:#fff;
  padding-block:10px;line-height:1.1;
}
.menu-links .pfeil-ein{
  width:0;overflow:hidden;flex:none;
  transition:width .38s var(--ease-sanft),opacity .3s var(--ease),margin-right .38s var(--ease-sanft);
  opacity:0;margin-right:0;
}
.menu-links .pfeil-ein svg{
  width:clamp(30px,4.4vw,46px);height:auto;display:block;
  stroke:var(--cream);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transform:translateX(-14px);transition:transform .38s var(--ease-sanft);
}
.menu-links .wort{transition:color .28s var(--ease)}
.menu-links a:hover .pfeil-ein,
.menu-links a:focus-visible .pfeil-ein{
  width:clamp(30px,4.4vw,46px);opacity:1;margin-right:clamp(14px,1.6vw,22px);
}
.menu-links a:hover .pfeil-ein svg,
.menu-links a:focus-visible .pfeil-ein svg{transform:none}
.menu-links a:hover .wort,
.menu-links a:focus-visible .wort{color:var(--cream)}

/* Fußbereich des Menüs */
.menu-fuss{margin-top:auto;padding-top:clamp(20px,3vw,32px);border-top:1px solid rgba(255,255,255,.18)}
.menu-recht{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.menu-recht a{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
  padding:9px 15px;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.menu-recht a:hover,.menu-recht a:focus-visible{
  background:var(--cream);color:var(--navy);border-color:var(--cream);
}
.menu-meta{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:14px;color:rgba(255,255,255,.72)}
.menu-meta a:hover{color:#fff}

/* ═══ HERO ══════════════════════════════════════════════════════════════
   Links 65 % Bild, rechts 35 % Cremefläche mit großem Logo,
   Status-Kasten und zwei Schaltflächen.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{background:var(--gray)}
.hero-grid{
  display:grid;grid-template-columns:55fr 45fr;
  min-height:min(92vh,920px);
}
.hero-media{position:relative;overflow:hidden;background:var(--navy)}
/* Das Motiv ist bereits beschnitten (hero.jpg, oberer Himmel entfernt).
   hero-original.jpg liegt daneben, falls das volle Motiv gebraucht wird. */
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  transform:scale(1.04);transform-origin:50% 62%;
}
/* Das Logo bleibt oben, alles darunter rückt nach unten weg:
   der Block wird auseinandergezogen, unten bleiben rund 75 px Luft. */
.hero-panel{
  background:linear-gradient(168deg,var(--cream) 0%,var(--cream-light) 58%,#FBF7EF 100%);
  padding:clamp(34px,3.2vw,56px) clamp(26px,2.6vw,46px) clamp(58px,5.6vw,86px);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,2.6vw,38px);
}
/* Der freie Platz verteilt sich auf beide Seiten des Wappens: dadurch
   rutscht das Wappen tiefer und die Luft darunter wird deutlich kleiner. */
.hero-panel > .hero-unten{margin-top:auto}
.hero-logo{
  width:min(100%,432px);height:auto;margin:auto auto clamp(24px,3vw,48px);
}

/* Unterer Hero-Bereich: zwei Spalten, passend zu den beiden Knöpfen
   darunter. Links die Anschrift über „Anfahrt & Kontakt", rechts der
   heutige Stand über „Unsere Formulare" — beide Spalten in sich mittig. */
/* Oben und unten bündig: beide Spalten sind gleich hoch, die drei
   Adresszeilen verteilen sich auf diese Höhe. Dadurch steht die
   Anschrift auf Höhe des Status-Chips und die E-Mail-Zeile auf Höhe
   des Verweises „Alle Büro- und Telefonzeiten". */
.hero-unten{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);align-items:stretch;
}
/* Die beiden Blöcke sind nur so breit wie ihr Inhalt, stehen innen
   linksbündig und sitzen als Ganzes mittig über „ihrem" Knopf. */
.hero-facts,.hero-status{
  width:max-content;max-width:100%;margin-inline:auto;text-align:left;
}
.hero-status{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Gleiche Anmutung wie die Adresszeile darunter — nicht fett */
.hero-hinweis{
  font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--text);line-height:1.5;
}
/* Zeitangabe bleibt in derselben Zeile, nur etwas kräftiger */
.hero-hinweis .wann{font-weight:400;color:var(--navy)}
.hero-hinweis .wann:not(:empty)::before{content:" "}
/* Die Telefonzeile steht direkt unter der Aussage zum Büro und sieht
   genauso aus — nur das Wort „Telefonzeiten" ist kräftiger. Deshalb
   sitzen beide in einem eigenen Block ohne Abstand dazwischen. */
.hero-zeilen{display:flex;flex-direction:column;gap:0}
.hero-telefon{
  font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--text);line-height:1.5;margin:0;
}
/* Eigene Zeile: „Telefonzeiten heute:" oben, die Uhrzeiten darunter. */
.hero-telefon .wann{display:block;font-weight:400;color:var(--navy)}
.hero-telefon .wann:empty{display:none}
.hero-hinweis:empty,.hero-telefon:empty{display:none}
.hero-zeitenlink{
  font-size:14px;font-weight:500;color:var(--navy);
  border-bottom:1.5px solid rgba(22,38,96,.32);padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
.hero-zeitenlink:hover{border-color:var(--navy)}

/* Deutlich mehr Abstand zum Block darüber */
.hero-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:clamp(10px,1.4vw,20px)}
.hero-knoepfe .btn{padding-inline:12px;font-size:12.5px;letter-spacing:.08em;gap:8px}

/* Gefüllt -> wird beim Überfahren zur Hintergrundfarbe mit blauem Rahmen */
.btn-wechsel{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-wechsel:hover,.btn-wechsel:focus-visible{
  background:transparent;color:var(--navy);border-color:var(--navy);transform:translateY(-2px);
}
/* Umrandet -> füllt sich beim Überfahren blau */
.btn-fuellt{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-fuellt:hover,.btn-fuellt:focus-visible{
  background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);
}

/* Adressblock — ohne Trennlinie darüber */
.hero-facts{display:flex;flex-direction:column;justify-content:space-between;gap:11px;align-items:flex-start}
.fact{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.5}
.fact svg{width:17px;height:17px;flex:none;margin-top:4px;stroke:var(--navy-soft);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fact a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ─── Status-Chip (auch in der Zeiten-Sektion verwendet) ────────────── */
.status-chip{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gray-mid);background:rgba(255,255,255,.8);
  border:1px solid var(--line);border-radius:999px;padding:7px 16px;
}
.status-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#9AA0AE;flex:none}
.status-chip.open{color:#2C6E49}
.status-chip.open::before{background:#4CAF6D;box-shadow:0 0 0 4px rgba(76,175,109,.22)}
.status-chip.closed{color:#9C4450}
.status-chip.closed::before{background:#C2606B;box-shadow:0 0 0 4px rgba(194,96,107,.18)}
.status-chip.holiday{color:#8A6A2F}
.status-chip.holiday::before{background:#C9A24B;box-shadow:0 0 0 4px rgba(201,162,75,.20)}
/* Hinweis auf die nächste Öffnung — deutlich lesbar, nicht als Fußnote */
.status-note{
  font-family:var(--sans);font-size:16px;font-weight:500;
  color:var(--navy);line-height:1.4;
}
.status-note:empty{display:none}

/* ─── Willkommen ────────────────────────────────────────────────────── */
/* Leicht grau hinterlegt, damit sich der Abschnitt vom Hero absetzt.
   Inhalt senkrecht mittig, oben und unten gleich viel Luft. */
#willkommen{
  background:#F7F7F6;
  display:flex;align-items:center;
  padding-block:clamp(72px,9vw,132px);
}
#willkommen > .shell{width:100%}
.welcome-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
.welcome-grid .display{position:sticky;top:calc(var(--header-h) + 40px);font-size:clamp(38px,4.6vw,62px)}

/* ═══ TÄTIGKEITSBEREICHE ════════════════════════════════════════════════
   Die Bilder sind bereits blau eingefärbt — es liegt bewusst KEIN
   Farbverlauf und kein Filter darüber.
   ═══════════════════════════════════════════════════════════════════════ */
.field-block{
  display:grid;grid-template-columns:1fr 1fr;
  margin-bottom:clamp(28px,3.5vw,56px);
  min-height:clamp(360px,38vw,560px);   /* alle Blöcke gleich hoch */
}
.field-block:last-child{margin-bottom:0}
.field-media{position:relative;overflow:hidden;background:var(--gray)}
.field-media img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform 1.1s var(--ease);
}
.field-block:hover .field-media img{transform:scale(1.04)}
.field-body{padding:clamp(30px,3.4vw,58px);display:flex;flex-direction:column;justify-content:center;gap:24px}
.field-body h3{font-size:clamp(26px,3vw,42px)}
.field-body ul{list-style:none;display:flex;flex-direction:column;gap:9px;padding-left:4px}
.field-body li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.55}
.field-body li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;
}
/* max-content -> alle Knöpfe so breit wie der längste in der Sektion.
   minmax(0, …) erlaubt dem Raster, auf schmalen Geräten zu schrumpfen —
   ohne das ragen die Knöpfe über den Bildschirmrand hinaus. */
.field-forms{display:grid;grid-template-columns:minmax(0,max-content);gap:11px;margin-top:6px;padding-left:4px;max-width:100%}

/* Variante Creme (Text links, Aufzählungspunkte im tiefen Navy) */
.field-block.cream .field-body{background:var(--cream);color:var(--navy-text)}
.field-block.cream .field-media{order:2}
.field-block.cream li::before{background:var(--navy)}

/* Variante Navy (Text rechts, Aufzählungspunkte weiß) */
.field-block.navy .field-body{background:var(--navy);color:rgba(255,255,255,.9)}
.field-block.navy .field-body h3{color:var(--cream)}
.field-block.navy .field-media{order:-1}
.field-block.navy li::before{background:#fff}
.field-block.navy strong{color:#fff}

/* ═══ BÜRO- UND TELEFONZEITEN ═══════════════════════════════════════════
   Zwei breite Karten nebeneinander, darunter über die volle Breite
   die Karte für den heutigen Tag.
   ═══════════════════════════════════════════════════════════════════════ */
.times-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px);
  max-width:1020px;margin-inline:auto;align-items:start;
}
.times-card{background:#fff;border:1px solid var(--line);padding:clamp(26px,2.8vw,40px)}
.times-card h3{font-size:23px;margin-bottom:20px}
.times-heute{
  grid-column:1 / -1;background:var(--blue-pale);border-color:transparent;
}
.times-heute .heute-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:16px clamp(24px,3vw,48px);align-items:center;
}
/* Büro- und Telefonzeit stehen untereinander — dadurch bleibt rechts
   genug Platz, damit der Statusknopf in einer Zeile steht. */
.heute-zeiten{display:flex;flex-direction:column;gap:6px}
/* Statusknopf mittig über dem Hinweis darunter */
.heute-status{display:flex;flex-direction:column;align-items:center;gap:9px;justify-self:end;text-align:center}
.heute-status .status-chip{white-space:nowrap}
.trow{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(22,38,96,.08);font-size:15.5px;
}
.trow:last-child{border-bottom:0}
.trow .d{font-weight:400;color:var(--gray-mid)}
.trow .t{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.trow.today{background:var(--blue-pale);margin-inline:-14px;padding-inline:14px;border-bottom-color:transparent}
.trow.today .d{color:var(--navy);font-weight:500}
.trow.today .t{color:var(--navy)}
.trow.muted{opacity:.5}
.times-foot{margin-top:20px;font-size:14px;color:var(--gray-mid);line-height:1.6}
.holiday-banner{
  display:none;gap:12px;align-items:flex-start;
  background:#FBF3DF;border:1px solid rgba(201,162,75,.4);
  padding:16px 20px;margin:0 auto clamp(22px,3vw,32px);max-width:1020px;
  font-size:14.5px;color:#6E5620;
}
.holiday-banner.show{display:flex}
.holiday-banner svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ═══ KARRIERE ══════════════════════════════════════════════════════════
   Schmale Sektion, rechts das Wappen auf Cremefläche.
   ═══════════════════════════════════════════════════════════════════════ */
.career-sektion{padding-block:clamp(56px,7vw,100px) clamp(80px,10vw,140px)}
.career{
  display:grid;grid-template-columns:1.15fr 1fr;
  max-width:1130px;margin-inline:auto;align-items:stretch;
  box-shadow:0 18px 48px rgba(22,38,96,.07);
}
.career-body{background:var(--blue-light);padding:clamp(32px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.career-body h2{font-family:var(--sans);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.01em;color:var(--navy)}
.career-body p{font-size:16px;line-height:1.72}
.career-body .btn{align-self:flex-start;margin-top:6px}
.career-wappen{
  background:linear-gradient(160deg,var(--cream) 0%,var(--cream-light) 100%);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,2.6vw,36px);
}
.career-wappen img{width:min(100%,360px);height:auto}

/* ═══ KONTAKT ═══════════════════════════════════════════════════════════
   Links Anschrift und Formular, rechts nichts mehr — die Karte steht
   jetzt als eigene Sektion über die volle Breite darunter.
   ═══════════════════════════════════════════════════════════════════════ */
.contact{background:var(--blue-pale)}
.contact-body{
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(40px,4.6vw,76px) var(--pad);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
.contact-intro .display{font-size:clamp(32px,3.6vw,50px);margin-bottom:18px}
.contact-intro p{font-size:16px;line-height:1.72}
.contact-intro .fact{margin-top:14px}
.contact-intro a{color:var(--navy)}
.contact-intro a:hover{text-decoration:underline;text-underline-offset:3px}

/* ═══ ANFAHRTSKARTE ═════════════════════════════════════════════════════
   Selbst gezeichnete Karte statt eingebettetem Kartendienst — es wird
   keine Verbindung zu Google & Co. aufgebaut.
   ═══════════════════════════════════════════════════════════════════════ */
.karte-sektion{padding-block:clamp(56px,7vw,110px)}
.karte-kopf{max-width:900px;margin-inline:auto;text-align:center;margin-bottom:clamp(28px,3.4vw,48px)}
.karte-kopf .lead{margin-top:16px;color:var(--gray-mid)}
.kmap-wrap{position:relative;max-width:1480px;margin-inline:auto;padding-inline:var(--pad)}
.kmap-wrap + .kmap-wrap{margin-top:clamp(48px,6vw,96px)}
.kmap-svg{display:block;width:100%;height:auto;box-shadow:0 22px 60px rgba(22,38,96,.10)}
.kmap-marke{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy-soft);margin-bottom:12px;padding-inline:var(--pad);
}
.kmap-marke{padding-inline:0}

.kmap-wasser{font-family:var(--sans);font-size:16px;font-style:italic;fill:#8FAEC0;letter-spacing:.22em}
.kmap-titel{font-family:var(--serif);font-size:21px;fill:var(--navy)}
.kmap-unter{font-family:var(--sans);font-size:12px;fill:var(--gray-mid);letter-spacing:.08em;text-transform:uppercase}
.kmap-buero-titel{font-family:var(--serif);font-size:24px;fill:var(--navy)}
.kmap-buero-unter{font-family:var(--sans);font-size:12.5px;fill:var(--navy-soft);letter-spacing:.1em;text-transform:uppercase}

.kmap-weg{fill:none;stroke:var(--navy);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;
  opacity:.25;transition:opacity .3s var(--ease),stroke-width .3s var(--ease)}
.kmap-weg.aktiv{opacity:1;stroke-width:3.4;animation:wegFluss 1.3s linear infinite}
@keyframes wegFluss{to{stroke-dashoffset:-24}}

/* Überfahren: der Kreis unter dem Modell färbt sich tiefblau, das
   Gebäude wächst deutlich und verliert dabei seine Farbe. */
.kmap-ort{cursor:pointer;outline:none}
.kmap-ort .halo{fill:rgba(22,38,96,0);pointer-events:all;transition:fill .35s var(--ease)}
.kmap-ort .kmap-modell{
  transition:transform .35s var(--ease),filter .35s var(--ease);
  transform-box:fill-box;transform-origin:center bottom;
}
.kmap-flach .halo{fill:rgba(22,38,96,0)}
.kmap-flach .punkt{fill:#fff;stroke:var(--navy);stroke-width:2.5;transition:fill .25s var(--ease)}
.kmap-flach .kmap-ort:hover .punkt,.kmap-flach .kmap-ort:focus-visible .punkt,
.kmap-flach .kmap-ort.aktiv .punkt{fill:var(--navy)}
.kmap-ort:hover .halo,.kmap-ort:focus-visible .halo,.kmap-ort.aktiv .halo{fill:rgba(22,38,96,.6)}
.kmap-flach .kmap-ort:hover .halo,.kmap-flach .kmap-ort:focus-visible .halo,
.kmap-flach .kmap-ort.aktiv .halo{fill:rgba(22,38,96,.14)}
.kmap-ort:hover .kmap-modell,
.kmap-ort:focus-visible .kmap-modell,
.kmap-ort.aktiv .kmap-modell{
  transform:translateY(-9px) scale(1.16);
  filter:grayscale(1) contrast(1.04);
}
.kmap-ort:hover .kmap-titel,.kmap-ort:focus-visible .kmap-titel,.kmap-ort.aktiv .kmap-titel{
  font-weight:600;
}
.kmap-ort:focus-visible .halo{stroke:var(--navy);stroke-width:3}
.kmap-info{max-width:calc(100% - 2 * var(--pad) - 24px)}
.kmap-buero{cursor:pointer;outline:none}
.kmap-buero circle{pointer-events:all}
.kmap-buero .puls{fill:none;stroke:var(--navy);stroke-width:2;opacity:.75;animation:bueroPuls 2.8s ease-out infinite}
@keyframes bueroPuls{0%{r:14;opacity:.75}70%{r:36;opacity:0}100%{r:36;opacity:0}}

.kmap-info{
  position:absolute;right:calc(var(--pad) + 36px);top:72px;width:370px;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(22,38,96,.16);
  padding:0;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.kmap-info.wechselt{opacity:0;transform:translateY(6px)}

/* ─── Fassung 2: Wegbeschreibung als Kasten am rechten Rand ─────────
   Die Karte wird schmaler, der Kasten hängt mit etwa 40 % seiner
   Breite über der Karte und mit 60 % daneben. Seine Höhe steht fest,
   damit beim Wechsel der Orte nichts springt.                        */
.kmap-modern .kmap-svg{width:calc(100% - 228px)}
.kmap-modern .kmap-info{
  right:var(--pad);top:50%;left:auto;
  transform:translateY(-50%);
  width:380px;min-height:556px;padding:0;
  display:flex;flex-direction:column;
  background:#fff;box-shadow:0 26px 64px rgba(22,38,96,.18);
}
.kmap-modern .kmap-info.wechselt{opacity:0;transform:translateY(calc(-50% + 6px))}
/* Ersatzbild für schmale Bildschirme — erscheint erst im Medienblock
   weiter unten, wenn die gezeichnete Karte weicht. */
.kmap-handybild{display:none}
.nur-gross{display:inline}
.kmap-kopf{
  background:var(--blue-pale);border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:21px;font-weight:400;letter-spacing:.02em;
  color:var(--navy);padding:16px 28px 15px;
}
.kmap-koerper{padding:24px 28px 22px;flex:1}
/* Der Knopf schließt den Kasten unten ab */
.kmap-fuss{padding:0 28px 26px}
.kmap-fuss .btn{width:100%;justify-content:center;font-size:11.5px;letter-spacing:.09em;padding-inline:14px;gap:9px}
.stern{margin-left:2px;font-size:1.15em;line-height:1}
.kmap-fuss .btn .stern{margin-left:-5px}

/* Fußnote unter den Karten */
/* Die Fußnote endet bündig mit der Karte, nicht mit der Sektion —
   rechts liegt ja der Wegbeschreibungs-Kasten über der Karte hinaus. */
.karte-fussnote{
  max-width:1480px;margin:clamp(20px,2.4vw,32px) auto 0;
  padding-left:calc(var(--pad) + 8px);
  padding-right:calc(var(--pad) + 228px);
  display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;font-weight:300;line-height:1.6;color:var(--gray-mid);
}
@media (max-width:1024px){
  .karte-fussnote{padding-right:var(--pad)}
}
.karte-fussnote .stern{margin-left:0;color:var(--navy);font-weight:500}
.karte-fussnote strong{font-weight:500;color:var(--navy)}
.kmap-modern .kmap-info h3{margin-bottom:14px}

.kmap-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-soft);margin-bottom:8px}
.kmap-info h3,.kmap-titel-text{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.18;margin-bottom:16px;color:var(--navy)}
.kmap-zeilen{display:flex;flex-direction:column;gap:11px}
.kmap-zeile{display:flex;gap:12px;align-items:flex-start;font-size:14px;font-weight:300;color:var(--text);line-height:1.55}
.kmap-zeile .sym{flex:none;width:19px;height:19px;margin-top:2px}
.kmap-zeile .sym svg{width:100%;height:100%;stroke:var(--navy-soft);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kmap-zeile strong{font-weight:500;color:var(--navy)}

.karte-hinweisbox{
  max-width:1480px;margin:clamp(22px,2.6vw,34px) auto 0;padding-inline:var(--pad);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
}
.karte-hinweisbox .text{font-size:13.5px;color:var(--gray-mid);line-height:1.7;max-width:840px}
.karte-hinweisbox .text strong{display:block;font-size:12px;font-weight:600;color:var(--navy);
  margin-bottom:6px;letter-spacing:.14em;text-transform:uppercase}

/* ─── Formulare ─────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--navy-soft)}
.field input,.field textarea,.field select{
  border:1px solid var(--line);background:#fff;padding:13px 15px;font-size:15.5px;font-weight:300;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,38,96,.09);
}
.field input:invalid:not(:placeholder-shown){border-color:#C2606B}
.form-hint{font-size:12.5px;line-height:1.55;color:var(--gray-mid);margin-block:4px 16px}
.form-hint a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.form-status{display:none;padding:14px 18px;font-size:14.5px;margin-top:16px;border:1px solid}
.form-status.show{display:block}
.form-status.ok{background:#EEF7F1;border-color:#9CCBAD;color:#2C6E49}
.form-status.err{background:#FBF0F1;border-color:#DDA6AC;color:#9C4450}

/* Datei-Upload */
.dropzone{
  border:1.5px dashed var(--line);background:#fff;padding:24px 20px;text-align:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);cursor:pointer;
}
.dropzone:hover,.dropzone.drag{border-color:var(--navy);background:var(--blue-pale)}
.dropzone svg{width:26px;height:26px;margin:0 auto 10px;stroke:var(--navy-soft);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dropzone p{font-size:14px;color:var(--gray-mid)}
.dropzone b{display:block;font-size:15.5px;color:var(--navy);font-weight:500;margin-bottom:4px}
.file-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.file-list li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);padding:10px 14px;font-size:14px}
.file-list .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .fsize{color:var(--gray-mid);font-size:13px;white-space:nowrap}
.file-list .frm{width:26px;height:26px;display:grid;place-items:center;color:var(--gray-mid);flex:none}
.file-list .frm:hover{color:#9C4450}

/* ─── Bewerbungs-Funnel ─────────────────────────────────────────────── */
.funnel{background:#fff;border:1px solid var(--line);padding:clamp(24px,2.6vw,40px)}
.funnel-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft);margin-bottom:14px}
.progress{height:3px;background:var(--gray);margin-bottom:clamp(24px,3vw,36px);overflow:hidden}
.progress span{display:block;height:100%;background:var(--navy);width:0;transition:width .4s var(--ease)}
.funnel-step{display:none;animation:fadeUp .35s var(--ease)}
.funnel-step.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.funnel-step h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:8px}
/* Cinzel hat keinen echten Kursivschnitt — deshalb nur farblich hervorheben */
.funnel-step h2 em{font-style:normal;color:var(--navy-soft)}
.funnel-step .hint{font-size:14px;color:var(--gray-mid);margin-bottom:22px}
.options{display:flex;flex-direction:column;gap:9px}
.options.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt{
  display:flex;align-items:center;gap:13px;text-align:left;width:100%;
  border:1px solid var(--line);background:#fff;padding:14px 16px;font-size:15px;font-weight:300;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.opt:hover{border-color:var(--navy-soft);background:var(--blue-pale)}
.opt.sel{border-color:var(--navy);background:var(--blue-pale);font-weight:400}
.opt .check{width:20px;height:20px;flex:none;border:1.5px solid var(--line);display:grid;place-items:center;transition:all .2s var(--ease)}
.opt.sel .check{background:var(--navy);border-color:var(--navy)}
.opt .check svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt.sel .check svg{opacity:1}
.slider-row{margin-bottom:20px}
.slider-row .lbl{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:8px}
.slider-row .val{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}
.slider-row input[type=range]{width:100%;accent-color:var(--navy)}
.funnel-nav{display:flex;justify-content:space-between;gap:14px;margin-top:clamp(24px,3vw,36px);padding-top:22px;border-top:1px solid var(--line)}
.funnel-nav .spacer{flex:1}
.summary-list{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;font-size:14.5px;margin-block:20px}
.summary-list dt{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-soft);padding-top:3px}
.summary-list dd{color:var(--text)}
.success-view{display:none;text-align:center;padding-block:20px}
.success-view.show{display:block}
.success-view .tick{width:66px;height:66px;margin:0 auto 22px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.success-view .tick svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Stellenangebote: Beschreibung links, Formular rechts */
.stellen-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,60px);align-items:start;
}
.stellen-text{position:sticky;top:calc(var(--header-h) + 28px)}
.stellen-text h1{font-size:clamp(30px,3.6vw,48px)}

/* ─── Rechtstexte ───────────────────────────────────────────────────── */
.legal{max-width:820px;margin-inline:auto}
.legal h1{font-size:clamp(32px,4.4vw,54px);margin-bottom:14px}
.legal .stand{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:clamp(34px,4vw,54px)}
/* Bewusst ohne Trennstrich — die Abstände gliedern ausreichend. */
.legal h2{font-size:clamp(21px,2.2vw,28px);margin-top:clamp(34px,3.6vw,50px);margin-bottom:14px}
.legal h3{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--navy);margin-top:26px;margin-bottom:8px}
.legal p,.legal li{font-size:15.5px;line-height:1.78}
.legal ul{list-style:none;margin-block:14px;display:flex;flex-direction:column;gap:6px}
.legal ul li{position:relative;padding-left:20px}
.legal ul li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--navy-soft);opacity:.55}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal p,.legal li,.legal dd{overflow-wrap:break-word}
.legal a:hover{opacity:.7}
.legal .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:15.5px;margin-block:12px}
.legal .kv dt{color:var(--gray-mid)}
.legal .kv dd{color:var(--text)}
.legal .callout{background:var(--blue-pale);border-left:3px solid var(--navy);padding:20px 24px;margin-block:24px;font-size:15px}
/* Marke des Dienstleisters im Impressum — Logo liegt lokal im Ordner,
   kein Hotlink auf notarnova.de. */
.legal a.nn-marke{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:18px;text-decoration:none;
}
.legal a.nn-marke img{width:clamp(200px,26vw,260px);height:auto;display:block}
.legal a.nn-marke span{font-size:14.5px;color:var(--gray-mid);text-underline-offset:3px}
.legal a.nn-marke:hover{opacity:1}
.legal a.nn-marke:hover span{text-decoration:underline}

/* ─── Dokument- und Formularkarten ──────────────────────────────────── */
.doc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.doc-card{
  display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);
  padding:20px 22px;transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.doc-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.doc-card svg{width:26px;height:26px;flex:none;margin-top:2px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.doc-card b{display:block;font-size:15px;font-weight:500;color:var(--navy);text-decoration:none}
.doc-card small{font-size:13px;color:var(--gray-mid)}

/* ═══ FUSSBEREICH ═══════════════════════════════════════════════════════
   Kräftiger Navy-Streifen oben, darunter ein heller cremiger Verlauf
   mit dunkler Schrift.
   ═══════════════════════════════════════════════════════════════════════ */
.site-footer{
  border-top:4px solid var(--navy);
  background:linear-gradient(180deg,var(--cream-light) 0%,#F4F2ED 55%,#EDEDEA 100%);
  color:var(--text);
  padding-block:clamp(44px,5.5vw,72px) 0;
}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,64px);padding-bottom:clamp(32px,4vw,52px)}
.site-footer h4{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
.site-footer a{color:var(--text);transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.footer-logo img{height:62px;width:auto;margin-bottom:18px}
.footer-adresse{font-size:15px;line-height:1.75}
.footer-links{display:flex;flex-direction:column;gap:9px;font-size:15px}
.footer-bottom{
  border-top:1px solid rgba(22,38,96,.16);padding-block:20px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:var(--gray-mid);
}
.footer-credit{display:inline-flex;align-items:center;gap:6px}
.footer-credit svg{width:13px;height:13px;fill:var(--navy);opacity:.7}
.footer-credit a{text-decoration:underline;text-underline-offset:3px}
/* Eigene Marke im Fußbereich: ohne Unterstrich, etwas kräftiger als der
   Fließtext davor — auf Wunsch von NotarNova. */
.footer-credit a.credit-marke{text-decoration:none;font-weight:600;color:var(--navy)}
.footer-credit a.credit-marke:hover,
.footer-credit a.credit-marke:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Abstand zwischen Kontaktsektion und Fußbereich */
.luft-unten{height:clamp(60px,8vw,110px);background:#fff}

/* Skip-Links */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;font-size:14px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* ─── Reveal-Animation ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
html[data-motion="off"] .reveal{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion="off"] *{animation-duration:.001s!important;transition-duration:.001s!important}
html[data-motion="off"] .site-header.hero-kopf .logo{opacity:1!important;transform:none!important}
html[data-motion="off"] .site-header.hero-kopf .nav-vorn,
html[data-motion="off"] .site-header.hero-kopf .header-rechts{transform:none!important}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════
   Stufen: 1600 · 1400 · 1280 · 1180 · 1024 · 900 · 768 · 640 · 520 · 400
   Dazu Querformat auf Handys, Zeigegeräte ohne Hover und die
   Systemeinstellung „Bewegung reduzieren".
   ═══════════════════════════════════════════════════════════════════════ */

/* Sehr große Bildschirme: mehr Luft, etwas größere Grundschrift */
@media (min-width:1600px){
  :root{--pad:72px;--shell:1360px}
  html{font-size:17px}
  .hero-grid{min-height:min(88vh,980px)}
}

/* Standard-Notebooks */
@media (max-width:1400px){
  :root{--header-h:116px}
  .logo img{max-height:74px}
}

/* Enger: rechte Hero-Spalte bekommt mehr Anteil, damit das Logo passt */
@media (max-width:1280px){
  .hero-grid{grid-template-columns:60fr 40fr}
  .nav-vorn a,.nav-hinten a{font-size:18px}
  .header-inner{gap:24px}
}

@media (max-width:1180px){
  .hero-unten{grid-template-columns:1fr;gap:20px}
  .nav-vorn a,.nav-hinten a{font-size:17px}
  .header-rechts{gap:14px}
  .header-inner{gap:18px}
  .hero-logo{width:min(100%,312px)}
}

/* Ab hier wandert die Navigation in die Schublade */
@media (max-width:1024px){
  :root{--header-h:92px}
  .nav-vorn,.nav-hinten{display:none}
  .burger{display:grid}
  .header-inner{display:flex;justify-content:space-between}
  .logo{justify-self:start}
  .logo img{max-height:62px}
  .site-header.hero-kopf .logo{opacity:1;transform:none;pointer-events:auto}
  .site-header.hero-kopf .nav-vorn,
  .site-header.hero-kopf .header-rechts{transform:none!important}

  .hero-grid{grid-template-columns:1fr}
  .hero-media{min-height:44vh;order:-1}

  /* ─── Tablet-Anordnung im Hero ──────────────────────────────────
     Unter dem Bild steht das Wappen links, rechts daneben stehen
     Anschrift und heutiger Stand untereinander. Die Schaltflächen
     sitzen unter dem Wappen. Ab 640 px wird wieder gestapelt.      */
  .hero-panel{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-areas:"wappen angaben" "knoepfe angaben";
    align-content:center;align-items:start;
    column-gap:clamp(28px,4vw,56px);row-gap:clamp(22px,3vw,34px);
    padding:clamp(38px,5vw,64px) var(--pad);
  }
  .hero-logo{grid-area:wappen;width:min(100%,300px);margin:0 auto;align-self:center}
  .hero-knoepfe{grid-area:knoepfe;grid-template-columns:1fr;gap:11px;margin-top:0;align-self:start}
  .hero-unten{
    grid-area:angaben;grid-template-columns:1fr;gap:16px;align-self:center;
  }
  /* Beide Blöcke beginnen an derselben Kante — sonst steht die
     Anschrift eingerückt über dem Status-Chip. */
  .hero-facts,.hero-status{width:100%;margin-inline:0}
  .welcome-grid{grid-template-columns:1fr}
  .welcome-grid .display{position:static}
  .field-block{grid-template-columns:1fr;min-height:0}
  .field-block .field-media{order:-1!important;min-height:260px}
  .career{grid-template-columns:1fr;max-width:640px}
  .career-wappen{order:-1;padding-block:32px}
  .career-wappen img{width:min(72%,300px)}
  .contact{grid-template-columns:1fr}
  .contact-karte{min-height:420px;order:-1}
  .stellen-grid{grid-template-columns:1fr}
  .stellen-text{position:static}
  .contact-body{grid-template-columns:1fr}
  /* Infokarte rutscht unter die Karte, sonst ragt sie über den Rand —
     die Karte darf dann die volle Breite nutzen. Die Klassen sind so
     genau wie die Regeln oben, sonst gewinnt dort „.kmap-modern". */
  .kmap-modern .kmap-svg{width:100%}
  .kmap-wrap .kmap-info,.kmap-modern .kmap-info{
    position:static;right:auto;left:auto;top:auto;transform:none;
    width:auto;max-width:none;min-height:0;margin-top:18px;
  }
  .kmap-modern .kmap-info.wechselt{transform:translateY(6px)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Tablets im Hochformat */
@media (max-width:900px){
  .sec-pad{padding-block:clamp(52px,7vw,88px)}
  .karte-hinweisbox{grid-template-columns:1fr;gap:18px}
  .karte-hinweisbox .btn{justify-self:start}
  .field-body{padding:clamp(28px,4vw,44px)}
  .contact-body{padding:clamp(28px,4vw,44px)}
  .times-grid{gap:18px}
}

@media (max-width:768px){
  /* Die gezeichnete Karte wäre hier zu klein zum Lesen — an ihre Stelle
     tritt der Kartenausschnitt mit der Hausnummer, darunter steht die
     Wegbeschreibung als fester Kasten. */
  .kmap-modern .kmap-svg{display:none}
  .kmap-handybild{display:block}
  .kmap-handybild img{width:100%;height:auto;display:block;box-shadow:0 18px 44px rgba(22,38,96,.12)}
  .nur-gross{display:none}
  .kmap-wrap .kmap-info,.kmap-modern .kmap-info{margin-top:0}
  .times-grid{grid-template-columns:1fr}
  .times-heute .heute-grid{grid-template-columns:1fr 1fr}
  .career{max-width:520px}
  .contact-karte{min-height:340px}
  .funnel{padding:clamp(20px,4vw,30px)}
}

/* Große Handys */
@media (max-width:640px){
  .hero-grid{min-height:0}
  /* Handys: wieder schlicht untereinander */
  .hero-panel{
    display:flex;flex-direction:column;align-items:stretch;
    padding:clamp(30px,6vw,44px) var(--pad) clamp(40px,7vw,56px);
  }
  /* Auf dem Handy entfällt das Wappen: es steht ohnehin im Kopfbereich
     und würde hier nur Scrollweg kosten. Anschrift und Öffnungsstand
     beginnen an derselben Kante, die beiden Knöpfe schließen die
     Sektion nebeneinander ab. */
  .hero-logo-huelle{display:none}
  /* align-self aus der Tablet-Anordnung zurücknehmen, sonst schrumpfen
     die Blöcke im Flex-Stapel auf ihre Inhaltsbreite. */
  .hero-unten{grid-template-columns:1fr;gap:16px;align-self:stretch}
  .hero-facts,.hero-status{width:100%;margin-inline:0}
  .hero-media{min-height:38vh}
  .hero-knoepfe{margin-top:8px;grid-template-columns:1fr 1fr;gap:9px;align-self:stretch}
  .hero-knoepfe .btn{
    padding-inline:10px;font-size:11px;letter-spacing:.06em;
    white-space:normal;text-align:center;line-height:1.3;
  }
  /* Archivstreifen: Datum über den Titel, Trennstrich weg — nebeneinander
     bräuchte die Zeile mehr Platz, als das Handy hergibt. */
  .beitrag-streifen{grid-template-columns:minmax(0,1fr) 22px;gap:5px 12px}
  .beitrag-streifen time{grid-column:1 / -1}
  .beitrag-streifen .strich{display:none}
  .trow{flex-wrap:wrap;gap:2px 14px}
  .trow .t{white-space:normal}
  .contact-cols{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .options.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .notice-inner{padding-right:44px;text-align:left;justify-content:flex-start}
  .funnel-nav{flex-wrap:wrap}
  .funnel-nav .btn{flex:1}
  .doc-cards{grid-template-columns:1fr}
  .times-heute .heute-grid{grid-template-columns:1fr}
}

/* Kleinere Handys */
@media (max-width:520px){
  html{font-size:15.5px}
  .kmap-info{padding:20px 18px}
  .karte-sektion{padding-block:clamp(44px,6vw,72px)}
  :root{--header-h:80px}
  .logo img{max-height:52px}
  .icon-btn{width:44px;height:44px}
  .display{font-size:clamp(30px,8.5vw,42px)}
  .section-title{font-size:clamp(26px,7.5vw,36px)}
  .hero-panel{padding:26px 20px}
  .jetzt-box{padding:15px 16px}
  .legal .callout{padding:16px 18px}
  .doc-card{padding:16px 18px}
}

/* Sehr kleine Geräte (iPhone SE und ähnliche) */
@media (max-width:400px){
  :root{--pad:16px}
  .hero-logo{width:min(78%,220px)}
  .jetzt-zeile{flex-wrap:wrap;gap:0 10px}
  .jetzt-zeile .w{text-align:left}
  .btn{padding:15px 20px;font-size:11.5px;letter-spacing:.1em}
  .menu-links a{font-size:clamp(24px,8vw,34px)}
}

/* Handy im Querformat: Hero nicht über den ganzen Bildschirm ziehen */
@media (max-height:560px) and (orientation:landscape){
  .hero-grid{min-height:0}
  .hero-media{min-height:56vh}
  .menu-overlay{overflow-y:auto}
  .menu-links a{font-size:24px;padding-block:4px}
}

/* Geräte ohne echten Mauszeiger: keine Schwebe-Effekte */
@media (hover:none){
  .btn:hover{transform:none}
  .doc-card:hover{transform:none}
  .field-block:hover .field-media img{transform:none}
  .formular-link:hover{gap:12px}
}

/* Systemeinstellung „Bewegung reduzieren" respektieren */
@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;
  }
  .reveal{opacity:1!important;transform:none!important}
  .site-header.hero-kopf .logo{opacity:1;transform:none;pointer-events:auto}
  .site-header.hero-kopf .nav-vorn,
  .site-header.hero-kopf .header-rechts{transform:none!important}
}

/* ─── Barrierefreiheit: Schriftgröße / Kontrast / Lesefokus ─────────── */
html[data-text-size="large"]{font-size:17.6px}
html[data-text-size="xlarge"]{font-size:19.5px}
html[data-contrast="high"]{
  --gray-mid:#3A3F4D;--line:rgba(22,38,96,.42);--navy-soft:#162660;
  --cream:#F5EEE0;--blue-pale:#E4EEFC;
}
html[data-contrast="high"] body{color:#000}
html[data-contrast="high"] .field-block.navy .field-body{color:#fff}
html[data-contrast="high"] .site-footer{color:#000}
html[data-focus-mode="on"] p:hover,
html[data-focus-mode="on"] li:hover{background:rgba(213,229,252,.55);border-radius:3px}

@media print{
  .site-header,.site-footer,.notice,.sc-drawer,.menu-overlay,form,.dropzone,.contact-karte{display:none!important}
  body{color:#000}
  .legal{max-width:none}
}


/* ═══ HILFSKLASSEN ══════════════════════════════════════════════════════
   Ersetzen die früheren style-Attribute im HTML. Das ist Voraussetzung
   dafür, dass die Content-Security-Policy ohne 'unsafe-inline' auskommt:
   Ein Browser mit strenger Richtlinie würde Inline-Stile sonst verwerfen
   und die Seite bräche auseinander.
   ═══════════════════════════════════════════════════════════════════════ */
.mt-xs{margin-top:4px}
.mt-s{margin-top:12px}
.mt-m{margin-top:16px}
.mt-l{margin-top:20px}
.mt-xl{margin-top:26px}
.mt-2xl{margin-top:40px}
.mb-xs{margin-bottom:4px}
.mb-s{margin-bottom:10px}
.mb-m{margin-bottom:22px}
.mb-l{margin-bottom:30px}
.kein-rand{border-bottom:0}
.kein-oberkante{border-top:0;padding-top:0;margin-top:0}
.zentriert{text-align:center}
.zentriert-flex{justify-content:center}
.navy{color:var(--navy)}
.leise{font-size:14px;color:var(--gray-mid)}
.leise-mittig{margin-top:40px;font-size:15px;color:var(--gray-mid);text-align:center}
.textlink{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.h-zwischen{font-size:22px;margin-top:40px}
.knopfreihe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.voll-breit{max-width:none;margin:0}
/* Für Menschen unsichtbares Feld (Spamschutz) */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Einwilligung mit Ankreuzfeld */
.einwilligung{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.einwilligung input[type=checkbox]{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--navy)}

/* ═══ KONTAKT-POPUP ═════════════════════════════════════════════════════
   Öffnet sich über den E-Mail-Hinweis in der Zeiten-Sektion. Der
   Hintergrund wird unscharf gezeichnet, links steht ein schmaler
   Bildstreifen, rechts ein knappes Formular.
   ═══════════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:clamp(14px,3vw,40px);
  background:rgba(14,26,68,.42);
  backdrop-filter:blur(9px) saturate(.9);
  -webkit-backdrop-filter:blur(9px) saturate(.9);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
  position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  width:min(980px,100%);max-height:min(92vh,860px);background:#fff;overflow:hidden;
  box-shadow:0 40px 90px rgba(14,26,68,.35);
  transform:translateY(22px) scale(.985);
  transition:transform .42s var(--ease-sanft);
}
.modal-overlay.open .modal{transform:none}
.modal-bild{position:relative;overflow:hidden;background:var(--navy);isolation:isolate}
.modal-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.modal-bild .bild-text{
  position:absolute;left:0;right:0;bottom:0;padding:26px 24px;color:#fff;
  background:linear-gradient(to top,rgba(14,26,68,.88),rgba(14,26,68,0));
}
.modal-bild .bild-text small{
  display:block;font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;opacity:.85;margin-bottom:6px;
}
.modal-bild .bild-text span{font-family:var(--serif);font-size:20px;line-height:1.25;display:block}
.modal-form{padding:clamp(24px,3vw,40px);overflow-y:auto}
.modal-form h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:8px}
.modal-form .lead{font-size:15px;margin-bottom:20px;color:var(--gray-mid)}
.modal-close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--navy);border:1px solid var(--line);
  font-size:17px;line-height:1;transition:background .2s var(--ease),color .2s var(--ease);
}
.modal-close:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.modal-meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-size:14px;color:var(--gray-mid);
}
.modal-meta a{color:var(--navy)}
.modal-meta a:hover{text-decoration:underline;text-underline-offset:3px}
body.modal-offen{overflow:hidden}

/* Auslöser: E-Mail-Hinweis in der Zeiten-Sektion */
.mail-knopf{
  color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  font:inherit;cursor:pointer;padding:0;
}
.mail-knopf:hover{opacity:.75}

@media (max-width:768px){
  .modal{grid-template-columns:1fr;max-height:94vh}
  .modal-bild{min-height:150px}
  .modal-bild .bild-text{padding:16px 18px}
  .modal-bild .bild-text span{font-size:17px}
}
@media (max-height:620px){
  .modal-bild{display:none}
  .modal{grid-template-columns:1fr}
}

/* ═══ ABSCHLUSS DER TÄTIGKEITSBEREICHE ═════════════════════════════════ */
.bereiche-abschluss{
  margin-top:clamp(16px,1.8vw,26px);background:#fff;
  border:3px solid var(--lila);
  padding:clamp(26px,3vw,42px) clamp(24px,3vw,46px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,2.6vw,44px);align-items:center;
}
.bereiche-abschluss .text{font-size:15px;font-weight:300;line-height:1.6;color:var(--text)}
.bereiche-abschluss .text strong{
  display:block;font-family:var(--serif);font-size:clamp(20px,2vw,26px);
  font-weight:400;color:var(--navy);margin-bottom:8px;
}
.bereiche-abschluss .knoepfe{display:flex;gap:12px;flex-wrap:wrap}
/* Hinweis auf die Online-Formulare im Anfrage-Fenster */
.modal-formulare{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
  align-items:center;background:var(--blue-pale);border:1px solid rgba(22,38,96,.12);
  padding:16px 18px;margin-bottom:18px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.modal-formulare:hover{border-color:rgba(22,38,96,.35);background:#fff}
.modal-formulare > svg{width:22px;height:22px;stroke:var(--navy);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.modal-formulare span{font-size:13.5px;font-weight:300;line-height:1.5;color:var(--gray-mid)}
.modal-formulare strong{display:block;font-size:14.5px;font-weight:500;color:var(--navy);margin-bottom:3px}
.modal-formulare .pfeil{position:relative;width:22px;height:12px;display:inline-block;overflow:hidden}
.modal-formulare .pfeil svg{position:absolute;top:0;left:0;width:22px;height:12px;
  stroke:var(--navy);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .62s cubic-bezier(.33,1,.68,1)}
.modal-formulare .pfeil svg + svg{transform:translateX(-26px)}
.modal-formulare:hover .pfeil svg{transform:translateX(26px)}
.modal-formulare:hover .pfeil svg + svg{transform:translateX(0)}

.bereiche-abschluss .btn svg{width:17px;height:17px;flex:none;stroke:currentColor;
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .bereiche-abschluss{grid-template-columns:1fr}
  .bereiche-abschluss .knoepfe .btn{flex:1 1 240px}
}

/* ═══ AKTUELLES ═════════════════════════════════════════════════════════
   Beitragsübersicht auf der Startseite, eigene Übersichtsseite und die
   Einzelseiten. Die Inhalte kommen später aus dem WordPress; das Gerüst
   bleibt dabei unverändert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Sektion auf der Startseite: dunkles Violett ──────────────────── */
#aktuelles{background:var(--lila-verlauf);color:#fff;position:relative;overflow:hidden}
#aktuelles::after{
  content:"";position:absolute;inset:auto -10% -55% auto;width:min(52vw,660px);
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%);
}
#aktuelles .shell{position:relative;z-index:1}
#aktuelles .eyebrow{color:rgba(255,255,255,.72)}
#aktuelles .eyebrow::before{background:rgba(255,255,255,.5)}
#aktuelles .section-title{color:#fff}
#aktuelles .beitrag-karte{
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.17);
}
#aktuelles .beitrag-karte::before{background:rgba(255,255,255,.13)}
#aktuelles .beitrag-karte:hover{
  border-color:rgba(255,255,255,.5);box-shadow:0 26px 56px rgba(0,0,0,.28);
}
#aktuelles .beitrag-karte h3{color:#fff}
#aktuelles .beitrag-kopf time{color:rgba(255,255,255,.92)}
#aktuelles .beitrag-karte .anriss{color:rgba(255,255,255,.8)}
#aktuelles .karte-mehr{color:#fff}
#aktuelles .neu-fahne{background:#fff;color:var(--lila)}
#aktuelles .neu-fahne svg{stroke:var(--lila)}
#aktuelles .aktuelles-fuss .btn{background:#fff;color:var(--lila);border-color:#fff}
#aktuelles .aktuelles-fuss .btn:hover{background:transparent;color:#fff}

/* ─── Kopf der Sektion auf der Startseite ──────────────────────────── */
/* Linksbündig — Zeile, Überschrift und die Karten darunter beginnen
   alle an derselben Kante. */
.aktuelles-kopf{margin-bottom:clamp(30px,3.6vw,52px);text-align:left}
.aktuelles-kopf .section-title{text-align:left;margin-inline:0}
.aktuelles-fuss{margin-top:clamp(28px,3.4vw,46px);display:flex;justify-content:center}

/* ─── Gitter der Beiträge ──────────────────────────────────────────── */
.beitrag-gitter{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.5vw,22px);
}
.beitrag-gitter .gross{grid-column:span 3}

/* ─── Eine Beitragskarte ───────────────────────────────────────────── */
.beitrag-karte{
  position:relative;display:flex;flex-direction:column;
  background:var(--cream-light);border:1px solid var(--line);
  padding:clamp(22px,2vw,30px);overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             border-color .4s var(--ease);
}
/* Beim Überfahren fährt eine helle Fläche von unten herein */
.beitrag-karte::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  transform:translateY(100%);transition:transform .45s var(--ease);
}
.beitrag-karte:hover,.beitrag-karte:focus-visible{
  transform:translateY(-5px);border-color:rgba(22,38,96,.3);
  box-shadow:0 24px 54px rgba(22,38,96,.13);
}
.beitrag-karte:hover::before,.beitrag-karte:focus-visible::before{transform:translateY(0)}

/* Fahne zuerst, dann das Datum — beides linksbündig.
   Eigener Klassenname: .karte-kopf gehört zur Anfahrtskarte. */
.beitrag-karte{text-align:left}
.beitrag-kopf{
  display:flex;align-items:center;justify-content:flex-start;gap:12px;
  margin-bottom:14px;justify-self:start;text-align:left;
}
.beitrag-kopf time{
  font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-mid);
}
.neu-fahne{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--navy);padding:5px 11px 5px 9px;border-radius:999px;
}
.neu-fahne svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}

.beitrag-karte h3{
  font-family:var(--serif);font-size:19px;font-weight:400;line-height:1.28;
  color:var(--navy);margin-bottom:10px;
}
.beitrag-karte.gross h3{font-size:clamp(24px,2.4vw,33px);line-height:1.18;max-width:22ch}
.beitrag-karte .anriss{
  font-size:14.5px;font-weight:300;line-height:1.6;color:var(--text);
  margin-bottom:16px;
}
.beitrag-karte.gross .anriss{font-size:16.5px;max-width:60ch}
.karte-worte{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.schlagwort{
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-soft);background:var(--blue-pale);
  border:1px solid rgba(22,38,96,.10);border-radius:999px;padding:6px 13px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.schlagwort.klein{font-size:10.5px;padding:4px 10px}
.karte-mehr{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);
}
/* Doppelpfeil: der erste fährt hinaus, der zweite rückt nach.
   Gleiche Mechanik wie bei den Formular-Schaltflächen. */
.karte-mehr .pfeil,.zurueck-link .pfeil,.aktuelles-fuss .pfeil,.kmap-fuss .pfeil{
  position:relative;width:22px;height:12px;flex:none;overflow:hidden;display:inline-block;
}
.karte-mehr .pfeil svg,.zurueck-link .pfeil svg,.aktuelles-fuss .pfeil svg,.kmap-fuss .pfeil svg{
  position:absolute;top:0;left:0;width:22px;height:12px;
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .62s cubic-bezier(.33,1,.68,1);
}
.karte-mehr .pfeil svg + svg,.zurueck-link .pfeil svg + svg,
.aktuelles-fuss .pfeil svg + svg,.kmap-fuss .pfeil svg + svg{transform:translateX(-26px)}
.beitrag-karte:hover .karte-mehr .pfeil svg,
.beitrag-karte:focus-visible .karte-mehr .pfeil svg,
.zurueck-link:hover .pfeil svg,
.aktuelles-fuss .btn:hover .pfeil svg{transform:translateX(26px)}
.beitrag-karte:hover .karte-mehr .pfeil svg + svg,
.beitrag-karte:focus-visible .karte-mehr .pfeil svg + svg,
.zurueck-link:hover .pfeil svg + svg,
.aktuelles-fuss .btn:hover .pfeil svg + svg{transform:translateX(0)}

/* Die große Karte: Anriss und Weiterleser nebeneinander */
@media (min-width:901px){
  .beitrag-karte.gross{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"kopf text" "titel text" "worte mehr";
    column-gap:clamp(26px,3vw,54px);align-items:start;
    padding:clamp(28px,2.6vw,42px);
  }
  .beitrag-karte.gross .beitrag-kopf{grid-area:kopf}
  .beitrag-karte.gross h3{grid-area:titel;margin-bottom:0}
  .beitrag-karte.gross .anriss{grid-area:text;margin-bottom:0;align-self:center}
  .beitrag-karte.gross .karte-worte{grid-area:worte;margin:20px 0 0}
  .beitrag-karte.gross .karte-mehr{grid-area:mehr;margin-top:20px;justify-self:start}
}

/* ═══ BEITRÄGE: 30/70 mit violetter Seitenspalte ═══════════════════════
   Links die mitlaufende Spalte im Violettverlauf, rechts der Text.
   Gilt gleichermaßen für die Einzelbeiträge und das Archiv.
   ═══════════════════════════════════════════════════════════════════════ */
.beitrag-grid{
  display:grid;grid-template-columns:minmax(0,30fr) minmax(0,70fr);
  align-items:stretch;min-height:60vh;
}
/* overflow:clip statt hidden — „clip" macht das Element NICHT zum
   Scrollbereich, die mitlaufende Spalte (position:sticky) darin
   funktioniert also weiter. Gleichzeitig zählt der Zierkreis unten
   nicht mehr zur Seitenhöhe (sonst entsteht Leerraum unter der
   Fußzeile). */
.beitrag-seite{
  background:var(--lila-verlauf);color:#fff;position:relative;
  overflow:clip;
}
.beitrag-seite::after{
  content:"";position:absolute;inset:auto -30% -30% auto;width:min(70%,420px);
  aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 70%);
}
/* Der Inhalt läuft mit und füllt genau die Bildschirmhöhe — dadurch
   steht der Knopf immer unten, egal wo man im Text gerade ist. */
.seite-inhalt{
  position:sticky;top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:clamp(34px,3.4vw,58px) clamp(30px,3.2vw,58px) clamp(48px,4.6vw,72px);
  z-index:1;
}
.beitrag-seite .eyebrow{color:rgba(255,255,255,.72)}
.beitrag-seite .eyebrow::before{background:rgba(255,255,255,.5)}
.beitrag-seite h1{
  font-family:var(--serif);font-size:clamp(26px,2.7vw,38px);font-weight:400;
  line-height:1.16;color:#fff;margin-block:10px 16px;
}
.beitrag-datum{
  display:block;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.seite-lead{font-size:15.5px;font-weight:300;line-height:1.65;color:rgba(255,255,255,.8);margin-top:14px}
.schlagwortwolke{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;max-width:357px}
.beitrag-seite .schlagwort{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;
}
.beitrag-quelle{
  font-size:13.5px;font-weight:300;color:rgba(255,255,255,.7);
  max-width:357px;
}
.beitrag-quelle a{
  color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:2px;transition:border-color .25s var(--ease);
}
.beitrag-quelle a:hover{border-color:#fff}
/* Großer Knopf unten in der Seitenspalte — begrenzt, damit er nicht
   bis an den Rand der violetten Fläche läuft. */
.btn-lila{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;max-width:357px;margin-top:38px;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lila);background:#fff;border:1.5px solid #fff;padding:17px 20px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn-lila .pfeil{transform:scaleX(-1)}
.btn-lila:hover{background:transparent;color:#fff}

.beitrag-text{
  padding:clamp(40px,4.4vw,80px) clamp(26px,4vw,84px);
  /* Eine einzige Zeilenbreite für alles im Textbereich — Absätze,
     Zwischenüberschriften und der Abschlusskasten enden dadurch exakt
     bündig. In Pixeln, weil „ch" je Schriftgröße anders ausfällt und
     der Kasten sonst breiter würde als der Text darüber. */
  --zeile:809px;
}
.beitrag-text > p,.beitrag-text > h2,.beitrag-abschluss{max-width:min(100%,var(--zeile))}
.beitrag-text h2{
  font-family:var(--serif);font-size:clamp(20px,1.9vw,25px);font-weight:400;
  color:var(--navy);margin-block:34px 12px;line-height:1.24;
}
.beitrag-text h2:first-child{margin-top:0}
.beitrag-text p{
  font-size:16.5px;font-weight:300;line-height:1.72;color:var(--text);
  margin-bottom:18px;
}
/* Nur der Anrissabsatz des Fließtextes — bewusst mit „>", sonst greift
   die Regel auch auf den ersten Absatz im Abschlusskasten. */
.beitrag-text > p:first-child{font-size:18px;color:var(--navy-text)}

/* ─── Abschluss eines Beitrags: Wappen, Ansprache, zwei Wege ───────── */
.beitrag-abschluss{
  display:grid;grid-template-columns:150px minmax(0,1fr);
  gap:clamp(22px,2.6vw,40px);align-items:center;
  margin-top:clamp(40px,4vw,66px);padding:clamp(24px,2.4vw,34px);
  background:#fff;border:3px solid var(--lila);
}
.abschluss-wappen{width:100%;height:auto;align-self:center}
.beitrag-abschluss h2{
  font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);font-weight:400;
  color:var(--lila);margin-block:6px 12px;line-height:1.22;
}
.beitrag-abschluss h2 strong{font-weight:400;color:var(--navy)}
.beitrag-abschluss .eyebrow{color:var(--lila-hell);font-size:15px;font-weight:600;letter-spacing:.14em}
.beitrag-abschluss .eyebrow::before{background:var(--lila-hell)}
.beitrag-abschluss p{font-size:15px;font-weight:300;line-height:1.6;color:var(--text)}
.abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
/* Nebeneinander, solange beide Beschriftungen Platz haben — sonst
   rutscht der zweite Knopf von selbst in die nächste Zeile.
   Als Block statt Flex: das Symbol läuft im Textfluss mit und bleibt
   bei zweizeiligen Beschriftungen neben dem Text, statt an den linken
   Rand zu rutschen. */
.abschluss-knoepfe .btn{
  border-color:var(--lila);color:var(--lila);
  flex:1 1 250px;min-width:0;white-space:normal;
  display:block;text-align:center;
}
.abschluss-knoepfe .btn svg{display:inline-block;vertical-align:-4px;margin-right:9px}
.abschluss-knoepfe .btn-wechsel{background:var(--lila);color:#fff}
.abschluss-knoepfe .btn-wechsel:hover{background:transparent;color:var(--lila)}
.abschluss-knoepfe .btn-fuellt:hover{background:var(--lila);color:#fff}
.abschluss-knoepfe .btn svg{width:17px;height:17px;flex:none;stroke:currentColor;
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:700px){
  /* Das Wappen rückt nach oben und wird deutlich größer. Die Zeile
     „Notarbüro Birkner" entfällt dann — sie stünde doppelt, das Wappen
     trägt den Namen bereits. */
  .beitrag-abschluss{grid-template-columns:1fr;text-align:center}
  .beitrag-abschluss .eyebrow{display:none}
  .abschluss-wappen{width:min(72%,255px);margin-inline:auto}
  .abschluss-knoepfe{justify-content:center}
  /* Auf dem Handy untereinander und etwas kleiner gesetzt. */
  .abschluss-knoepfe .btn{
    flex:1 1 100%;font-size:10.5px;letter-spacing:.05em;padding-inline:12px;
  }
}
/* Auf dem Handy etwas kleiner gesetzt, damit auch lange Komposita
   („Fortbildungsmöglichkeiten") in eine Zeile passen — sonst müsste
   mitten im Wort umgebrochen werden. Silbentrennung ist bewusst aus. */
@media (max-width:520px){
  .beitrag-seite h1{font-size:clamp(20px,5.2vw,26px)}
  .beitrag-text h2{font-size:clamp(17px,4.6vw,20px)}
}

/* ─── Archiv: lange Streifen, einer je Beitrag ─────────────────────── */
.archiv-liste{padding:clamp(34px,3.6vw,66px) clamp(26px,4vw,72px)}
.beitrag-streifen{
  position:relative;display:grid;
  grid-template-columns:clamp(120px,11vw,155px) 1px minmax(0,1fr) 22px;
  align-items:center;gap:clamp(14px,1.8vw,28px);text-align:left;
  padding:19px clamp(18px,2vw,28px);margin-bottom:9px;
  background:linear-gradient(100deg,var(--gray) 0%,#F7F7F7 46%,#FCFCFC 100%);
  border:1px solid transparent;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.beitrag-streifen::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--lila-verlauf);
  transform:translateX(-101%);transition:transform .45s var(--ease);
}
.beitrag-streifen:hover,.beitrag-streifen:focus-visible{
  transform:translateX(5px);border-color:rgba(36,28,86,.25);
  box-shadow:0 16px 34px rgba(36,28,86,.14);
}
.beitrag-streifen:hover::before,.beitrag-streifen:focus-visible::before{transform:translateX(0)}
.beitrag-streifen time{
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-mid);white-space:nowrap;transition:color .3s var(--ease);
}
.beitrag-streifen .strich{width:1px;height:26px;background:var(--line);transition:background .3s var(--ease);justify-self:center}
/* Lange Komposita („Wohnungseigentümergemeinschaft") würden die Zeile
   auf schmalen Bildschirmen sprengen. Der Umbruch erfolgt ohne
   Trennstrich — automatische Silbentrennung ist bewusst aus. */
.streifen-titel{
  font-family:var(--serif);font-size:clamp(16px,1.35vw,19px);line-height:1.3;
  color:var(--navy);transition:color .3s var(--ease);
  overflow-wrap:anywhere;hyphens:manual;
}
.beitrag-seite h1,.beitrag-karte h3,.beitrag-text h2{overflow-wrap:anywhere;hyphens:manual}
.streifen-pfeil{width:22px;opacity:.4;transition:opacity .3s var(--ease);justify-self:end}
.streifen-pfeil .pfeil{position:relative;width:22px;height:12px;display:inline-block;overflow:hidden}
.streifen-pfeil svg{position:absolute;top:0;left:0;width:22px;height:12px;stroke:currentColor;
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .62s cubic-bezier(.33,1,.68,1)}
.streifen-pfeil svg + svg{transform:translateX(-26px)}
.beitrag-streifen:hover time,.beitrag-streifen:hover .streifen-titel{color:#fff}
.beitrag-streifen:hover .strich{background:rgba(255,255,255,.4)}
.beitrag-streifen:hover .streifen-pfeil{opacity:1;color:#fff}
.beitrag-streifen:hover .streifen-pfeil svg{transform:translateX(26px)}
.beitrag-streifen:hover .streifen-pfeil svg + svg{transform:translateX(0)}
.archiv-blaettern{margin-top:clamp(24px,2.6vw,38px);display:flex;justify-content:center}

@media (max-width:1024px){
  .beitrag-grid{grid-template-columns:1fr;min-height:0}
  .seite-inhalt{position:static;min-height:0;gap:26px}
}
@media (max-width:900px){
  .beitrag-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beitrag-gitter .gross{grid-column:span 2}
}
@media (max-width:640px){
  .beitrag-gitter{grid-template-columns:1fr}
  .beitrag-gitter .gross{grid-column:span 1}
  .beitrag-streifen{grid-template-columns:1fr;gap:7px}
  .beitrag-streifen .strich,.beitrag-streifen .streifen-pfeil{display:none}
}