/* =========================================================
   Epolia – Design Tokens & Base
   ========================================================= */

/* =========================================================
   Fonts, hosted on this server (no connection to Google).
   Variable fonts: one file covers the whole weight range.
   Fraunces and Montserrat are licensed under the SIL Open Font
   License 1.1, see assets/fonts/LICENSE.txt.
   ========================================================= */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-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: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-italic-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: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-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: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-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: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-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: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-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;
}

:root {
  /* --- Primitive colors (from brand) --- */
  --coral-500: #e6717c;
  --coral-600: #d65c68;
  --coral-700: #b84752;
  --coral-800: #a25f49;
  --coral-100: #fbe3e5;
  --salmon-300: #f5b4a7;
  --blue-600: #3a6ab8;
  --blue-700: #2c5493;
  --blue-800: #1f3a63;
  --blue-900: #16283f;
  --blue-950: #0f1a2b;
  --pink-200: #fed1d3;
  --pink-100: #fff0f1;
  --cream-100: #fbf7f2;
  --peach-100: #fbeee6;
  --white: #ffffff;
  --gray-600: #5b6572;
  --gray-400: #8b93a1;
  --gray-200: #e4e7ec;
  --gray-100: #f4f5f7;

  /* --- Semantic tokens --- */
  --color-primary: var(--coral-500);
  /* coral-700, not coral-600: this token is used for TEXT/icons on light
     backgrounds and needs to clear 4.5:1 — coral-600 only reaches ~3.8:1. */
  --color-primary-strong: var(--coral-700);
  --color-secondary: var(--blue-600);
  --color-secondary-strong: var(--blue-700);
  --color-accent-soft: var(--pink-200);
  --color-accent-softer: var(--pink-100);

  --color-bg: var(--white);
  --color-bg-alt: var(--cream-100);
  --color-bg-peach: var(--peach-100);
  --color-bg-deep: var(--blue-900);

  --color-text: var(--blue-900);
  --color-text-muted: var(--gray-600);
  --color-text-on-deep: var(--white);
  --color-text-on-deep-muted: #c7d3e6;

  --color-border: var(--gray-200);
  --color-focus: var(--blue-600);

  --color-success: #2f8f5b;
  --color-error: #b23a3a;

  /* --- Typography ---
     Serif carries headlines (editorial, distinctive); Montserrat (requested)
     stays the workhorse for nav, labels, and body copy. */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-base: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --fs-3xl: clamp(2.75rem, 2rem + 3.2vw, 4.75rem);
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Header: fixed bar height that hero sections and the mobile menu
     offset themselves by, and the height of the logo inside it. --- */
  --header-h: 88px;
  --logo-h: 56px;

  /* --- Radii & shadows --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 20px rgba(22, 40, 63, 0.08);
  --shadow-card: 0 8px 30px rgba(22, 40, 63, 0.1);
  --shadow-button: 0 8px 20px rgba(0, 0, 0, 0.22);

  --container-w: 1180px;
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Anchor targets stop below the pinned header, not under it. */
  scroll-padding-top: calc(var(--header-h) + var(--space-3));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.eyebrow, .nav-links, .btn, label, .footer-heading {
  font-family: var(--font-base);
}
p { margin: 0; }
em, i { font-style: italic; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-secondary);
  color: var(--white);
  padding: var(--space-3) var(--space-5);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

section { position: relative; }
.section-pad { padding-block: var(--space-9); }
@media (max-width: 640px) {
  .section-pad { padding-block: var(--space-8); }
}

.bg-alt { background: var(--color-bg-alt); }
.bg-peach { background: var(--color-bg-peach); }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-3);
}

.section-head { max-width: 680px; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-2xl); }
.section-head p {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
}
.section-head.center { margin-inline: auto; text-align: center; }

/* A slim italic follow-up line under a big headline — the "Exactly like
   nobody else." rhythm: one warm, human aside under the bold claim. */
.lede-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.9rem 1.75rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--coral-700);
  color: var(--white);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover { background: var(--coral-800); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }

.btn-ghost-light {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }
/* .btn-ghost-light assumes a dark backdrop (white text/border); the hero
   is now a light pastel, so its ghost button flips to a dark-on-light
   treatment instead. */
.hero .btn-ghost-light {
  background: rgba(22, 40, 63, 0.05);
  color: var(--color-text);
  border-color: rgba(22, 40, 63, 0.35);
}
.hero .btn-ghost-light:hover { background: rgba(22, 40, 63, 0.1); }

.btn-secondary {
  background: var(--color-secondary);
  color: var(--white);
}
.btn-secondary:hover { background: var(--color-secondary-strong); }

.btn-outline {
  background: transparent;
  color: var(--color-secondary);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover { border-color: var(--color-secondary); background: var(--color-accent-softer); }

.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* =========================================================
   Header + dropdown nav
   ========================================================= */
.site-header {
  /* A white bar pinned to the top of every page (fixed, so it takes no space
     in the layout; the hero starts underneath it). main.js adds .is-stuck
     once the page has scrolled, which adds the drop shadow. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 var(--color-border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.site-header.is-stuck { box-shadow: 0 6px 20px rgba(22, 40, 63, 0.1); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-2);
  /* Keeps the bar exactly --header-h tall, which the hero offsets rely on. */
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}
.brand img {
  height: var(--logo-h);
  width: auto;
  max-width: none;
  flex: none;
}
/* The logo does not shrink with the flex row, so very narrow phones get a
   smaller logo instead (keeps logo + CTA + menu button inside the viewport). */
@media (max-width: 359px) {
  :root { --logo-h: 44px; }
}
@media (min-width: 1025px) {
  /* Header spans nearly the full window width (logo far left, CTA far
     right) instead of being squeezed into the 1180px content column. */
  .header-inner {
    max-width: 1680px;
    padding-inline: clamp(var(--space-5), 4vw, var(--space-9));
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.nav-links > li { position: relative; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  font-size: 19px;
  color: var(--color-text);
  position: relative;
  padding-block: var(--space-2);
  white-space: nowrap;
}
.nav-links a[aria-current="page"] { color: var(--color-primary-strong); }
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-chevron { width: 10px; height: 10px; transition: transform var(--duration-base) var(--ease-standard); }
.nav-item.is-open .nav-chevron { transform: rotate(180deg); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  z-index: 10;
}
.nav-item.is-open .dropdown-panel,
.nav-item:hover .dropdown-panel,
.nav-item:focus-within .dropdown-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-panel a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-shadow: none;
}
.dropdown-panel a::after { display: none; }
/* The panel floats 10px below its menu item; this invisible strip fills
   that gap so the pointer stays "inside" the item while moving down to
   the panel (otherwise :hover drops and the panel closes mid-move). */
.dropdown-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.dropdown-panel a:hover { background: var(--color-bg-alt); color: var(--color-primary-strong); }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--color-text);
  border-radius: 2px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base);
}
.nav-toggle span::before { position: absolute; top: -8px; }
.nav-toggle span::after { position: absolute; top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* With the wider header there is room to spread the nav items out; the
   gap grows with the window. */
@media (min-width: 1201px) {
  .nav-links { gap: clamp(var(--space-7), calc(3.2vw + 8px), 80px); }
}
/* Five nav items need more room: tighten spacing before the mobile menu
   takes over, and switch to the hamburger earlier than the other 900px
   layout breakpoints. */
@media (max-width: 1200px) {
  .nav-links { gap: var(--space-5); }
  .nav-links a { font-size: 17px; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    /* No opacity/transform transition here on purpose: combined with
       position:fixed it occasionally left the panel rendered translucent
       (a stale-compositor-layer issue) instead of solid white. Toggling
       `display` outright is instant but reliably correct every time. */
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
    gap: var(--space-2);
  }
  .nav-links.is-open { display: flex; }
  /* The mobile panel is solid white (unlike the transparent desktop header
     floating over the photo), so its link text needs to go back to dark —
     otherwise it's white-on-white. */
  .nav-links a { font-size: 20px; padding-block: var(--space-3); }
  .dropdown-panel::before { display: none; }
  .dropdown-panel {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    padding: 0 0 0 var(--space-4);
    margin-top: var(--space-1);
  }
  /* Tapping or focusing "Leistungen" triggers the desktop open state, which
     shifts the panel by -50%; it has to stay in place in this stacked menu. */
  .nav-item.is-open .dropdown-panel,
  .nav-item:hover .dropdown-panel,
  .nav-item:focus-within .dropdown-panel { transform: none; }
  .dropdown-panel a { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
}

/* =========================================================
   Hero (photo)
   ========================================================= */
.hero {
  position: relative;
  background: var(--salmon-300);
  color: var(--color-text);
  overflow: hidden;
  /* The header floats over this same salmon field, so the top padding only
     has to clear it (same clearance as the "Über uns" hero). */
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-copy { max-width: 640px; margin-inline: auto; text-align: center; }
.hero h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
}
/* Highlighter stripe behind the key phrase; clone keeps it intact when the
   phrase wraps onto a second line. */
.hero-mark {
  background-image: linear-gradient(transparent 62%, rgba(255, 255, 255, 0.55) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.1em;
  margin-inline: -0.1em;
}
.hero-lede {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  color: var(--blue-800);
  max-width: 46ch;
  margin-inline: auto;
}
.hero-actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* =========================================================
   Simple dark hero (inner pages, no photo)
   ========================================================= */
.dark-hero {
  position: relative;
  background: var(--color-bg-peach);
  color: var(--color-text);
  overflow: hidden;
  /* Extra top clearance: the header floats over this section (transparent,
     position:absolute) instead of sitting above it. */
  padding-block: calc(var(--header-h) + 2.25rem) var(--space-10);
}
.dark-hero .container { position: relative; z-index: 1; }
.dark-hero .breadcrumb { color: var(--color-text-muted); }
.dark-hero .breadcrumb a { text-decoration: underline; }
.dark-hero h1 { font-size: var(--fs-2xl); max-width: 22ch; font-weight: 500; }
.dark-hero .topic-nav { margin-top: var(--space-6); }
.dark-hero .topic-nav ul { width: fit-content; min-width: 300px; }
/* Forced line break that only applies where the first line fits. */
.br-wide { display: none; }
@media (min-width: 600px) {
  .br-wide { display: inline; }
}
.dark-hero p.lede { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 60ch; font-size: var(--fs-md); }
/* Short job description under the lede (Karriere): two rule-cards, plain
   lines instead of bullets. */
.job-desc { margin-top: var(--space-7); max-width: 860px; }
.job-desc h2 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--space-3); }
.job-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.job-list li { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }

/* =========================================================
   Intro / "practice partner" style section with a circular badge
   ========================================================= */
.intro-section { padding-block: var(--space-9); }
/* The block is exactly as wide as the headline's longer line, and the
   paragraphs fill that width (width: 0 + min-width: 100% keeps them from
   widening the block themselves). */
.intro-section .section-head { width: fit-content; max-width: 100%; }
.intro-section .section-head p { width: 0; min-width: 100%; }
.intro-tagline { margin-top: var(--space-4); color: var(--color-text); font-weight: 600; font-size: var(--fs-md); }

.badge-circle {
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--blue-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  flex: none;
}
.badge-circle img { width: 92px; height: 92px; }

@media (max-width: 860px) {
  .badge-circle { justify-self: start; width: 140px; height: 140px; }
  .badge-circle img { width: 70px; height: 70px; }
}

/* =========================================================
   Rule cards (heading + paragraph, thin top rule — no icon tile)
   ========================================================= */
.rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-6);
}
.rule-grid--2col { grid-template-columns: repeat(2, 1fr); }
.rule-card {
  border-top: 1.5px solid var(--color-primary);
  padding-top: var(--space-5);
}
.rule-card--wide { grid-column: 1 / -1; }
.rule-card--wide p { max-width: 80ch; }
.rule-card h3 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--space-3); }
.rule-card p { color: var(--color-text-muted); font-size: var(--fs-sm); }
.rule-card.on-dark { border-top-color: var(--pink-200); }
.rule-card.on-dark h3 { color: var(--white); }
.rule-card.on-dark p { color: var(--color-text-on-deep-muted); }

@media (max-width: 860px) {
  .rule-grid { grid-template-columns: repeat(2, 1fr); }
  /* Only 3 cards here -- 2-then-1-orphan wraps awkwardly, so this instance
     goes straight to a single stacked column instead of the 2-col step. */
  .rule-grid--stack-tablet { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rule-grid { grid-template-columns: 1fr; }
}

/* Two columns: heading and text left, stacked rule-cards or a pill list
   right (Über uns, Einsatzgebiete). */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}
.split-grid h2 { font-size: var(--fs-2xl); font-weight: 500; max-width: 16ch; }
.split-grid > div:first-child p { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-md); max-width: 46ch; }
.split-grid .rule-grid { grid-template-columns: 1fr; gap: var(--space-5); }
/* Wider left column so "Main-Taunus-Kreis" fits on one line. */
.split-grid--lead { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
@media (max-width: 900px) {
  .split-grid, .split-grid--lead { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* =========================================================
   Einsatzgebiete (Regionen)
   ========================================================= */
.rule-card .rule-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--coral-700);
  margin-bottom: var(--space-2);
}
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.area-list li {
  padding: var(--space-2) var(--space-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--color-text);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* =========================================================
   Circle-photo motif (large radius on one corner)
   ========================================================= */
.circle-photo-wrap {
  position: relative;
  border-radius: 260px 0 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.circle-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Dark feature section (photo + stacked rule-cards, no icons)
   ========================================================= */
.feature-dark {
  background: var(--blue-900);
  color: var(--white);
}
.feature-dark .section-head h2 { color: var(--white); }
.feature-dark .section-head p { color: var(--color-text-on-deep-muted); }
.feature-dark .eyebrow { color: var(--pink-200); }
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.feature-list { display: flex; flex-direction: column; gap: var(--space-6); }
.feature-list h3 { font-size: var(--fs-lg); font-weight: 500; color: var(--pink-200); margin-bottom: var(--space-2); }
.feature-list p { color: var(--color-text-on-deep-muted); font-size: var(--fs-sm); }

/* Photo variant: the image fills the left half of the dark band edge to
   edge (full section height) and melts into the navy over its last third.
   The fade follows an eased (smoothstep) curve instead of a straight line,
   so it has no visible start or end edge. The text keeps the right
   column. Stacked layout on small screens is unchanged. */
.feature-dark--photo .circle-photo-wrap img { filter: brightness(0.78); }
@media (min-width: 901px) {
  .feature-dark--photo { position: relative; overflow: hidden; }
  .feature-dark--photo .circle-photo-wrap {
    --photo-fade: linear-gradient(to right,
      #000 68%,
      rgba(0,0,0,.972) 71.2%,
      rgba(0,0,0,.896) 74.4%,
      rgba(0,0,0,.784) 77.6%,
      rgba(0,0,0,.648) 80.8%,
      rgba(0,0,0,.5) 84%,
      rgba(0,0,0,.352) 87.2%,
      rgba(0,0,0,.216) 90.4%,
      rgba(0,0,0,.104) 93.6%,
      rgba(0,0,0,.028) 96.8%,
      transparent 100%);
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    aspect-ratio: auto;
    border-radius: 0;
    -webkit-mask-image: var(--photo-fade);
    mask-image: var(--photo-fade);
  }
  .feature-dark--photo .feature-grid > :last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-grid .circle-photo-wrap { order: -1; max-width: 420px; margin-inline: auto; border-radius: 160px 0 0 0; }
}

/* =========================================================
   Process ("Der Epolia-Weg")
   ========================================================= */
.process { background: var(--blue-950); color: var(--white); position: relative; overflow: hidden; }
.process .section-head { max-width: 800px; }
.process .section-head p { color: var(--color-text-on-deep-muted); }
.process .section-head h2 { color: var(--white); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}
.process-step {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
}
.process-step .step-num {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-4);
}
.process-step h3 {
  font-family: var(--font-base);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--pink-200);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}
.process-step p { font-size: var(--fs-sm); color: var(--color-text-on-deep-muted); }
@media (min-width: 981px) {
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 44px;
    right: calc(-1 * var(--space-5) / 2 - 2px);
    width: var(--space-5);
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 6px, transparent 6px 12px);
  }
}
@media (max-width: 980px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Career teaser
   ========================================================= */
.career-teaser {
  background: var(--coral-700);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.career-teaser h2 { font-size: var(--fs-xl); max-width: 26ch; color: var(--white); font-weight: 500; text-wrap: balance; }
.career-teaser p { margin-top: var(--space-3); color: rgba(255,255,255,0.95); max-width: 46ch; }
.career-teaser .btn-primary { background: var(--white); color: var(--coral-700); box-shadow: none; }
.career-teaser .btn-primary:hover { background: var(--pink-100); }
.career-teaser-actions { margin-top: var(--space-5); }

@media (max-width: 860px) {
  .career-teaser { grid-template-columns: 1fr; padding: var(--space-6); }
}

/* =========================================================
   Teaser link cards (home → dedicated pages)
   ========================================================= */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.teaser-card {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.teaser-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.teaser-card h3 { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--space-2); }
.teaser-card p { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.teaser-card .teaser-link { font-weight: 700; color: var(--color-primary-strong); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .teaser-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  text-align: left;
  padding: var(--space-5) var(--space-2);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
}
.faq-q .faq-icon {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary-strong);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}
.faq-a.is-open { grid-template-rows: 1fr; }
/* overflow:hidden clips a box's CHILDREN, never its own padding — so the
   padding that creates breathing room around the answer text has to live on
   a nested child, otherwise it survives collapse-to-0 and leaves a sliver. */
.faq-a-inner { overflow: hidden; min-height: 0; }
.faq-a-inner p { margin: 0; padding: 0 var(--space-2) var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 68ch; }
.faq-a-inner a { color: var(--color-primary-strong); text-decoration: underline; }

/* Fragen page: key figures in the hero, topic navigation beside the
   question groups. */
.dark-hero--facts { padding-bottom: var(--space-8); }
.fact-strip {
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.fact strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.1;
  color: var(--coral-700);
}
.fact span { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--color-text-muted); }
.fact-strip--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

.faq-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.faq-side { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.faq-disclaimer {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}
.topic-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid var(--color-border);
}
.topic-nav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-left: -1.5px;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid transparent;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.topic-nav a span { font-family: var(--font-serif); color: var(--coral-700); }
.topic-nav a:hover { color: var(--coral-700); border-left-color: var(--coral-700); }

.faq-group { scroll-margin-top: var(--space-6); }
.faq-group + .faq-group { margin-top: var(--space-9); }
.faq-group h2 { font-size: var(--fs-xl); font-weight: 500; }
.faq-group-intro { margin-top: var(--space-3); max-width: 62ch; font-size: var(--fs-md); color: var(--color-text-muted); }
.faq-group .faq-list { max-width: none; margin: var(--space-6) 0 0; }

@media (max-width: 1024px) {
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .faq-side { position: static; }
}
@media (max-width: 560px) {
  .fact-strip { grid-template-columns: 1fr; }
}
/* Three figures stay side by side down to tablet width. */
.fact-strip--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .fact-strip--3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Contact section
   ========================================================= */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
.contact-info .eyebrow { display: block; }
.contact-info h2 { font-size: var(--fs-2xl); font-weight: 500; }
.contact-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); }
.contact-list .icon-badge {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent-softer);
  color: var(--color-primary-strong);
  display: flex; align-items: center; justify-content: center;
}
.contact-list span.placeholder { font-style: italic; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

/* =========================================================
   Forms
   ========================================================= */
.form-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.field .hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field textarea,
.field select {
  font-family: inherit;
  font-size: var(--fs-base);
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
  min-height: 44px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--color-secondary);
  background: var(--white);
  outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}
.field-error {
  font-size: var(--fs-xs);
  color: var(--color-error);
  display: none;
  align-items: center;
  gap: var(--space-1);
}
.field-error.is-visible { display: flex; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Fill the left column first (Teilzeit, Vollzeit), then the right (Minijob). */
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: var(--space-3);
}
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-bg-alt);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.checkbox-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-accent-softer);
}
.checkbox-option input { margin-top: 3px; accent-color: var(--color-primary); width: 18px; height: 18px; flex: none; }
.checkbox-option span { font-size: var(--fs-sm); }

.consent-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.consent-option input { margin-top: 4px; accent-color: var(--color-secondary); width: 18px; height: 18px; flex: none; }
.consent-option span { font-size: var(--fs-xs); color: var(--color-text-muted); }
.consent-option a { color: var(--color-secondary); text-decoration: underline; }

.range-field { padding: var(--space-2) 0; }
.range-output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: var(--space-1) var(--space-3);
  background: var(--coral-700);
  color: var(--white);
  font-weight: 800;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}
.range-row { display: flex; align-items: center; gap: var(--space-4); }
input[type="range"] {
  flex: 1;
  accent-color: var(--color-primary);
  height: 6px;
}
.range-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  padding-inline: 2px;
}

.file-drop {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-bg-alt);
  cursor: pointer;
}
.file-drop:hover { border-color: var(--color-secondary); }
.file-drop input[type="file"] { display: none; }
.file-drop .file-drop-label { font-weight: 700; color: var(--color-secondary); }
.file-drop .file-drop-hint { font-size: var(--fs-xs); color: var(--color-text-muted); margin-top: var(--space-1); display: block; }
.file-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.file-list button {
  background: none; border: none; color: var(--color-error); cursor: pointer; font-size: var(--fs-xs); font-weight: 700;
}

.form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: #e7f6ee; color: var(--color-success); border: 1px solid #bfe6cf; }
.form-status.is-error { background: #fbe9e9; color: var(--color-error); border: 1px solid #f3c3c3; }

@media (max-width: 700px) {
  .form-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-rows: none; grid-auto-flow: row; }
  .form-card { padding: var(--space-5); }
}

/* =========================================================
   Legal content (Impressum / Datenschutz)
   ========================================================= */
.legal-content { max-width: 780px; padding-block: var(--space-8); }
.legal-content h2 { font-size: var(--fs-lg); font-weight: 500; margin-top: var(--space-7); margin-bottom: var(--space-3); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.legal-content ul { list-style: disc; padding-left: 1.25rem; }
.legal-content ul li { margin-bottom: var(--space-2); }
.legal-content strong { color: var(--color-text); }
/* Spam trap in the forms: off-screen for people, but bots fill it in. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Password page (zugang.php): the logo, one line of text and the form,
   centered on the beige page background. */
.gate-page { background: var(--color-bg-peach); }
.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.gate-logo { display: block; width: 170px; height: auto; }
.gate h1 { font-size: var(--fs-xl); font-weight: 500; max-width: 20ch; text-wrap: balance; }
.gate-lead { max-width: 46ch; color: var(--color-text-muted); font-size: var(--fs-md); }
.gate-form { width: 100%; max-width: 420px; text-align: left; margin-top: var(--space-3); }
.gate-contact { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.gate-contact a { color: var(--color-primary-strong); text-decoration: underline; }

.todo-flag {
  display: inline-block;
  background: #fff4d6;
  color: #6b4a00;
  border: 1px solid #f0dca3;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  font-size: 0.78em;
  font-weight: 700;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--blue-950);
  color: var(--color-text-on-deep-muted);
  padding-block: var(--space-9) var(--space-8);
}
/* Four columns: logo with contact lines, Übersicht, Rechtliches, and
   Anschrift with Sprechzeiten. */
.footer-top {
  display: grid;
  grid-template-columns: 1.9fr 1fr 1fr 1.3fr;
  gap: var(--space-7);
  align-items: start;
}
.footer-logo { display: block; width: fit-content; }
.footer-logo img { display: block; width: 160px; height: auto; }
.footer-contact {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-md);
}
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: var(--lh-snug); }
.footer-contact svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--salmon-300); }
.footer-contact a:hover { color: var(--white); }
.site-footer address { font-style: normal; }

.footer-heading { color: var(--white); font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--space-5); line-height: var(--lh-snug); }
.footer-heading--spaced { margin-top: var(--space-7); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-md); }
.footer-col address, .footer-col p:not(.footer-heading) { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.footer-col a:hover { color: var(--white); }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-col--wide { grid-column: 1 / -1; }
}