@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent: #2456a6;
  --accent-hover: #163a75;
  --accent-soft: #e0e7f3;
  --accent-soft-2: #f2f5fa;
  --accent-line: rgba(36, 86, 166, 0.45);
  --accent-wash: rgba(36, 86, 166, 0.05);

  --ink: #1b1f1c;
  --ink-2: #2a302c;
  --ink-3: #2f3632;
  --ink-4: #3d4540;
  --muted: #59625c;
  --muted-2: #4a524c;
  --placeholder: #6b746e;

  --surface: #ffffff;
  --page: #f7f8fa;
  --map-bg: #edefe4;
  --field: #f3f5f1;
  --wash: #f0f2ee;

  --line: #e6e9e3;
  --line-soft: #eef0ec;
  --line-page: #e3e7ee;
  --line-field: #cdd3dc;
  --line-chip: #d5dbd1;
  --line-btn: #cfd6e3;

  --open: #1f7a3a;
  --closed: #b42318;
  --closed-pin: #7d8a80;
  --new: #9a4a06;
  --new-pin: #c2620f;
  --new-soft: #fdf0e1;
  --new-ink: #7a3a04;
  --new-line: #f1d7bc;
  --bio-soft: #e4efe2;
  --bio-ink: #245a30;
  --fav: #c0392b;
  --ok-soft: #e3f1e5;

  --deep: #0f2546;
  --deep-soft: #dce4f1;
  --deep-muted: #a9b8d1;
  --deep-line: #263e63;

  --focus: #1a73e8;
  --shadow-ink: 17, 24, 33;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --sh-card: 0 1px 3px rgba(var(--shadow-ink), 0.08);
  --sh-raised: 0 2px 10px rgba(var(--shadow-ink), 0.07);
  --sh-float: 0 2px 10px rgba(var(--shadow-ink), 0.18);
  --sh-pop: 0 10px 30px rgba(var(--shadow-ink), 0.2), 0 2px 6px rgba(var(--shadow-ink), 0.12);
  --sh-sheet: 0 12px 40px rgba(var(--shadow-ink), 0.24);
  --sh-rail: 2px 0 18px rgba(var(--shadow-ink), 0.1);

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

* { box-sizing: border-box; }

/* Klassenregeln mit display: flex schlagen sonst das hidden-Attribut */
[hidden] { display: none !important; }

::selection { background: var(--accent-soft); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background: #c6ccc4;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background: #a7afa5; background-clip: padding-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  scrollbar-color: #c6ccc4 transparent;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover { color: var(--accent-hover); }

button, input, textarea, select { font: inherit; color: inherit; }
button { font-family: var(--font-body); }
input, textarea { caret-color: var(--accent); }

/* Zahlen, die untereinander stehen, springen sonst in der Breite */
time { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
input[type='search']::-webkit-search-cancel-button { display: none; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-pop);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s var(--ease);
}

.skip-link:focus-visible { top: 16px; }

.scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar { display: none; }

/* ---------- Marke ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand__mark {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent);
  display: grid;
  place-items: center;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand__name em { font-style: normal; color: var(--accent); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}

.btn:hover { background: var(--accent-hover); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-btn);
}

.btn--quiet:hover { background: var(--wash); color: var(--ink); }

.btn--outline {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn--outline:hover { background: var(--accent-soft-2); color: var(--accent); }

.btn--deep { background: var(--deep); }
.btn--deep:hover { background: #0a1b34; }

.btn--on-accent { background: #fff; color: var(--deep); }
.btn--on-accent:hover { background: var(--deep-soft); color: var(--deep); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--wash);
  color: var(--ink-4);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.icon-btn:hover { background: var(--line); }

/* ---------- Felder ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.field__label { font-size: 14px; font-weight: 700; }
.field__label span { font-weight: 500; color: var(--muted); }
.field__hint { font-size: 13px; color: var(--muted); }

.field__error {
  font-size: 13px;
  font-weight: 600;
  color: var(--closed);
}

.input,
.textarea {
  width: 100%;
  min-width: 0;
  padding: 0 16px;
  height: 50px;
  border: 1px solid var(--line-field);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.textarea { height: auto; padding: 14px 16px; line-height: 1.5; resize: vertical; }

.input:hover, .textarea:hover { border-color: #aab4c4; }

.input:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.input[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--closed); }

.fav {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.fav:hover { background: #fbe9e7; }

.fav--float {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.badge--new { background: var(--new-soft); color: var(--new-ink); font-weight: 800; }
.badge--bio { background: var(--bio-soft); color: var(--bio-ink); }
.badge--plain { background: var(--line-soft); color: var(--ink-4); }
.badge--fav { background: #fbe9e7; color: #9b2c20; }

.eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow--accent { color: var(--accent); letter-spacing: 0.08em; }
.eyebrow--new { color: var(--new); }

.status { font-weight: 700; }
.status--open { color: var(--open); }
.status--closed { color: var(--closed); }
.status--unknown { color: var(--muted); font-weight: 500; }

/* ---------- Seiten-Kopf ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line-page);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { background: var(--wash); color: var(--ink); }

.site-nav a[aria-current='page'] {
  background: var(--accent-soft-2);
  color: var(--accent);
}

.site-nav a.site-nav__cta {
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
}

.site-nav a.site-nav__cta:hover { background: var(--accent-hover); }

/* ---------- Seiten-Fuß ---------- */

.site-footer {
  margin-top: 72px;
  background: var(--deep);
  color: var(--deep-soft);
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--deep-soft); }

.site-footer__top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
}

.site-footer__about { flex: 1 1 300px; }

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

.site-footer__about p {
  margin: 10px 0 0;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.5;
}

.site-footer__col {
  flex: 0 1 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}

.site-footer__col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--deep-muted);
}

.site-footer__col a[aria-current='page'] { font-weight: 700; }

.site-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 28px;
  border-top: 1px solid var(--deep-line);
  font-size: 14px;
  color: var(--deep-muted);
}

/* ---------- Newsletter-Band ---------- */

.nl-band {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 24px;
}

.nl-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  padding: 40px 44px;
  border-radius: var(--r-2xl);
  background: var(--accent);
  color: #fff;
}

.nl-band__text { flex: 1 1 380px; }

.nl-band h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

.nl-band p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: #e4ecf8;
}

.nl-band__form { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }

.nl-band__row { display: flex; flex-wrap: wrap; gap: 10px; }

.nl-band__row .input {
  flex: 1 1 220px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
}

.nl-band__row .input--plz { flex: 0 1 110px; }

.nl-band__row .input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

.nl-band__row .btn { flex: 0 0 auto; height: 52px; padding: 0 24px; font-size: 16px; }

.nl-band__fine { margin: 0; font-size: 13px; color: #e4ecf8; }
.nl-band__fine a { color: #fff; font-weight: 700; }

.nl-band__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 600;
}

.nl-band__note--error { color: #ffdad4; }

@media (max-width: 600px) {
  .nl-band { margin-top: 48px; }
  .nl-band__inner { padding: 28px 22px; }
  .nl-band h2 { font-size: 26px; }
  .nl-band p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}