/* Draxler · Stangl · Dr. Stern · Stern – Designvorschlag von Skillfleet
   Leitmotiv: Das Kanzleiregal (Ordnerrücken, Rückenschild, Griffloch, Regalboden) */

/* ---------- Schriften (lokal, keine externen Abrufe) ---------- */
@font-face { font-family: "Sofia Sans Condensed"; src: url("../fonts/sofia-c-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; src: url("../fonts/sofia-c-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("../fonts/sofia-xc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("../fonts/sofia-xc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/serif-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/serif-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --blau: #1F2C8F;          /* Kanzleiblau, aus dem Signet */
  --blau-tief: #161F6B;
  --himmel: #8CB8E6;        /* Himmelblau der bisherigen Seite */
  --himmel-hell: #E4EEF9;
  --papier: #F6F8FB;
  --weiss: #FFFFFF;
  --tinte: #172036;
  --tinte-2: #47526A;
  --karton: #C7CCD4;
  --archiv: #1C2742;
  --linie: rgb(23 32 54 / 0.14);
  --linie-hell: rgb(255 255 255 / 0.16);

  --f-head: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --f-label: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --f-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --bar-h: 44px;
  --head-h: 76px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 9vw, 120px);
  --r: 4px;
  --schatten: 0 12px 18px -12px rgb(23 32 54 / 0.45); /* nur Regalboden und herausgezogener Ordner */
  --marmor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='240'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .21 0 0 0 -1.6 1.15'/%3E%3C/filter%3E%3Crect width='120' height='240' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 1.125rem/1.65 var(--f-body);
  font-optical-sizing: auto; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blau-tief); }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.04; margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.dunkel :focus-visible, .footer :focus-visible, .proposal-bar :focus-visible { outline-color: var(--himmel); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: var(--r); }
.skip-link:focus { top: 12px; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
section[id], [id].anker { scroll-margin-top: calc(var(--bar-h) + var(--head-h) + 12px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 22px;
  border-radius: var(--r); border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  font: 700 1.0625rem/1 var(--f-head); letter-spacing: 0.01em;
  transition: background-color .2s, color .2s, border-color .2s, transform .1s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--primaer { background: var(--blau); color: #fff; }
.btn--primaer:hover { background: var(--blau-tief); color: #fff; }
.btn--rahmen { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.btn--rahmen:hover { background: var(--tinte); color: #fff; }
.dunkel .btn--rahmen { border-color: rgb(255 255 255 / 0.7); color: #fff; }
.dunkel .btn--rahmen:hover { background: #fff; color: var(--tinte); }

/* ==========================================================================
   Kopf: Skillfleet-Banner + Kopfzeile (gemeinsam sticky)
   ========================================================================== */
.masthead { position: sticky; top: 0; z-index: 70; }
.proposal-bar { background: var(--tinte); color: #DDE4F0; font: 600 0.9375rem/1.2 var(--f-head); letter-spacing: 0.01em; }
.proposal-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; height: var(--bar-h); }
.proposal-bar__text { display: flex; align-items: center; gap: 12px; margin: 0; min-width: 0; white-space: nowrap; }
.proposal-bar__tag { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.proposal-bar__tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--himmel); flex: none; }
.proposal-bar__long { color: #AEB8CC; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.proposal-bar__long strong { color: #fff; font-weight: 600; }
.proposal-bar__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.proposal-bar a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); }
.proposal-bar a:hover { color: var(--himmel); }
.switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: inherit; font: inherit; }
.switch__track { width: 38px; height: 22px; border-radius: 11px; background: rgb(255 255 255 / 0.2); position: relative; transition: background-color .2s; flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch[aria-pressed="true"] .switch__track { background: var(--himmel); }
.switch[aria-pressed="true"] .switch__track::after { transform: translateX(16px); background: var(--tinte); }

.site-header { background: var(--papier); border-bottom: 1px solid var(--linie); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); min-width: 0; }
.logo__mark { width: 52px; height: auto; flex: none; }
.logo__text { display: grid; gap: 3px; min-width: 0; }
.logo__name { font: 700 1.1875rem/1 var(--f-head); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--blau); }
.logo__name .dot { color: var(--himmel); padding-inline: 0.18em; }
.logo__name .dr { text-transform: none; }
.logo__sub { font: 600 0.875rem/1 var(--f-head); color: var(--tinte-2); letter-spacing: 0.02em; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav__links { display: flex; gap: clamp(14px, 1.7vw, 26px); list-style: none; }
.nav__links a { color: var(--tinte); text-decoration: none; font: 600 1.0625rem/1 var(--f-head); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--himmel); color: var(--tinte); }
.nav .btn { min-height: 44px; padding: 10px 18px; }
.nav__tel { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--linie); border-radius: var(--r); background: transparent; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; background: var(--tinte); position: relative; transition: transform .2s, background-color .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, 120px); bottom: 0; z-index: 65;
    background: var(--papier); flex-direction: column; align-items: stretch; gap: 24px;
    padding: 16px var(--gutter) 32px; overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
  .nav__links { flex-direction: column; gap: 0; }
  .nav__links a { display: block; font-size: 1.75rem; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .nav .btn { justify-content: center; min-height: 54px; }
  .nav__tel { display: inline-flex; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 720px) {
  :root { --bar-h: 40px; --head-h: 64px; }
  .proposal-bar { font-size: 0.875rem; }
  .proposal-bar__long, .switch__label { display: none; }
  .proposal-bar__actions { gap: 14px; }
  .logo__mark { width: 40px; }
  .logo__name { font-size: 0.9375rem; letter-spacing: 0.035em; }
  .logo__sub { font-size: 0.8125rem; }
}
@media (max-width: 380px) {
  .logo__name { font-size: 0.875rem; letter-spacing: 0.02em; }
  .logo__mark { width: 34px; }
}

/* ==========================================================================
   Leitmotiv: Ordner, Rückenschild, Griffloch, Regalboden
   ========================================================================== */
.regal { list-style: none; display: flex; align-items: flex-end; gap: 5px; position: relative; padding: 0; margin: 0; }
.regal::after { /* Regalboden */
  content: ""; position: absolute; left: calc(-1 * var(--board-ueberstand, 28px)); right: calc(-1 * var(--board-ueberstand, 28px)); bottom: -16px; height: 16px;
  background: var(--board, var(--tinte)); border-radius: 2px; box-shadow: var(--schatten);
}
.ordner {
  --c: var(--blau); --w: 62px; --h: 320px;
  position: relative; flex: none; width: var(--w); height: var(--h);
  background: var(--c); border-radius: 3px 3px 1px 1px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 16px 9px 0;
  box-shadow: inset 3px 0 0 rgb(255 255 255 / 0.14), inset -4px 0 0 rgb(0 0 0 / 0.14);
}
.ordner--himmel { --c: var(--himmel); }
.ordner--tinte { --c: #2A3550; }
.ordner--karton { --c: var(--karton); }
.ordner--tief { --c: var(--blau-tief); }
.ordner--marmor { --c: #D3D8DF; background-image: var(--marmor); background-size: 120px 240px; }
.ordner__schild {
  width: 100%; height: var(--schild, 64%); background: var(--weiss); border-radius: 2px;
  border: 1px solid rgb(23 32 54 / 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 0; overflow: hidden;
}
.ordner__schild > span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 var(--fs, 1.3125rem)/1 var(--f-label); color: var(--tinte); letter-spacing: 0.01em; white-space: nowrap;
}
.ordner__schild svg { width: 32px; height: auto; flex: none; }
.ordner__loch { /* Griffloch */
  width: 28px; height: 28px; border-radius: 50%; margin: auto 0 26px; flex: none;
  background: rgb(10 14 30 / 0.28);
  box-shadow: inset 0 3px 4px rgb(0 0 0 / 0.25), 0 0 0 2px rgb(255 255 255 / 0.4);
}
/* liegender Ordner (Stapel) */
.liegend {
  --c: var(--blau);
  display: flex; align-items: center; gap: 16px; min-height: 68px;
  background: var(--c); border-radius: 1px 3px 3px 1px; padding: 9px 22px 9px 9px;
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14), inset 0 -4px 0 rgb(0 0 0 / 0.14);
}
.liegend.ordner--himmel { --c: var(--himmel); }
.liegend.ordner--tinte { --c: #2A3550; }
.liegend.ordner--karton { --c: var(--karton); }
.liegend.ordner--marmor { --c: #D3D8DF; background-image: var(--marmor); background-size: 240px 120px; }
.liegend__schild {
  flex: 1 1 auto; min-width: 0; background: var(--weiss); border-radius: 2px; border: 1px solid rgb(23 32 54 / 0.12);
  display: flex; align-items: baseline; gap: 14px; padding: 10px 16px; color: var(--tinte);
}
.liegend__wert { font: 700 2.125rem/1 var(--f-label); color: var(--blau); flex: none; min-width: 2.2ch; }
.liegend__text { font: 600 1.1875rem/1.15 var(--f-head); }
.liegend .ordner__loch { margin: 0; width: 26px; height: 26px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--himmel-hell); position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero__kicker { font: 700 1.125rem/1.2 var(--f-head); color: var(--blau); margin: 0 0 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero h1 { font-size: clamp(3rem, 1.4rem + 5.4vw, 6rem); line-height: 0.92; letter-spacing: -0.015em; color: var(--tinte); }
.hero h1 .h1-zweit { display: block; font-size: 0.42em; line-height: 1.1; letter-spacing: 0; color: var(--tinte-2); margin-top: 0.5em; font-weight: 600; }
.hero__lead { font-size: 1.1875rem; max-width: 36em; margin: 28px 0 32px; color: var(--tinte); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__notiz { font: 600 1rem/1.4 var(--f-head); color: var(--tinte-2); margin: 20px 0 0; }

.hero__regal { position: relative; padding-bottom: 16px; justify-self: end; width: 100%; max-width: 660px; }
.hero__regal .regal { justify-content: flex-start; padding-left: 8px; --board-ueberstand: 40px; }
.hero__regal .ordner { --w: 60px; }
.ordner--lehnt { transform-origin: 0 100%; transform: rotate(-7deg); margin-left: 38px; }
.luecke { flex: none; width: 60px; height: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .js .ordner--neu { animation: einstellen 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
  @keyframes einstellen {
    0% { transform: translate(0, -125%) rotate(-3deg); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: none; opacity: 1; }
  }
}
.hero__regal-hinweis { position: absolute; right: 0; bottom: -52px; font: 600 0.9375rem/1.2 var(--f-head); color: var(--tinte-2); margin: 0; }

@media (max-width: 1100px) {
  .hero__regal .ordner { --w: 50px; }
  .ordner--opt { display: none; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__regal { justify-self: start; margin-top: 12px; }
  .hero__regal .ordner { --w: 46px; --fs: 1.0625rem; }
  .hero__regal .ordner__loch { width: 22px; height: 22px; margin-bottom: 18px; }
  .hero__regal-hinweis { position: static; margin-top: 30px; }
}
@media (max-width: 900px) {
  .hero__regal .ordner { height: calc(var(--h) * 0.62); }
}
@media (max-width: 420px) {
  .ordner--opt2 { display: none; }
}

/* ==========================================================================
   Sektionen allgemein
   ========================================================================== */
.section { padding: var(--sec) 0; position: relative; }
.section--weiss { background: var(--weiss); }
.section--himmel { background: var(--himmel-hell); }
.dunkel { background: var(--archiv); color: #E6EBF4; }
.dunkel h2, .dunkel h3 { color: #fff; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2, .h2 { font-size: clamp(2.25rem, 1.3rem + 3vw, 3.75rem); }
.section-head p { font-size: 1.1875rem; color: var(--tinte-2); margin: 18px 0 0; max-width: 40em; }
.dunkel .section-head p { color: #B9C3D6; }
.head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Kanzlei auf einen Blick (Stapel) ---------- */
.blick { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.blick h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
.blick__intro p { color: var(--tinte-2); margin-top: 16px; }
@media (max-width: 900px) { .blick { grid-template-columns: 1fr; } .stapel { margin-inline: 8px; } }
.zeiten { margin-top: 28px; border-top: 2px solid var(--tinte); }
.zeiten h3 { font-size: 1.25rem; margin: 16px 0 8px; }
.zeiten dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: 1.0625rem; }
.zeiten dt { font: 700 1.0625rem/1.6 var(--f-head); }
.zeiten dd { margin: 0; }
.zeiten small { display: block; margin-top: 10px; color: var(--tinte-2); font-size: 0.9375rem; }
.stapel { list-style: none; display: grid; gap: 6px; padding-bottom: 16px; position: relative; }
.stapel::after { content: ""; position: absolute; left: -24px; right: -24px; bottom: -16px; height: 16px; background: var(--tinte); border-radius: 2px; box-shadow: var(--schatten); }
.stapel .liegend:nth-child(1) { margin-right: 6%; margin-left: 3%; }
.stapel .liegend:nth-child(2) { margin-right: 1%; margin-left: 0; }
.stapel .liegend:nth-child(3) { margin-right: 4%; margin-left: 5%; }
.stapel .liegend:nth-child(4) { margin-right: 0; margin-left: 1%; }

/* ---------- Leistungen: Regal mit Register ---------- */
.leistungen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.leistungen .regal { --board-ueberstand: 20px; padding-top: 24px; }
.ordner-tab {
  appearance: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: center;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s;
}
.ordner-tab.ordner { --w: 92px; --h: 440px; }
.leistungen .ordner-tab.ordner:nth-child(2) { --h: 422px; }
.leistungen .ordner-tab.ordner:nth-child(3) { --h: 432px; }
.leistungen .ordner-tab.ordner:nth-child(4) { --h: 414px; }
.ordner-tab[aria-selected="true"] { transform: translateY(-24px); box-shadow: inset 3px 0 0 rgb(255 255 255 / 0.14), inset -4px 0 0 rgb(0 0 0 / 0.14), var(--schatten); }
.ordner-tab:hover:not([aria-selected="true"]) { transform: translateY(-8px); }
.ordner-tab[aria-selected="true"] .ordner__schild { outline: 3px solid var(--blau); outline-offset: -6px; }
.ordner-tab .ordner__schild > span { font-size: 1.75rem; }
.ordner-tab .ordner__loch { width: 32px; height: 32px; margin-bottom: 30px; }
.leistungen__hinweis { margin: 40px 0 0; font-size: 1rem; color: var(--tinte-2); max-width: 26em; }

.blatt { /* Registerblatt mit Lochung */
  position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: 2px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 48px) clamp(56px, 6vw, 88px);
  min-height: 100%;
}
.blatt::before, .blatt::after { /* zwei Löcher */
  content: ""; position: absolute; left: clamp(20px, 2.4vw, 32px); width: 16px; height: 16px; border-radius: 50%;
  background: var(--papier); box-shadow: inset 0 2px 3px rgb(23 32 54 / 0.4), 0 0 0 1px rgb(23 32 54 / 0.12);
}
.blatt::before { top: 30%; }
.blatt::after { top: 62%; }
.blatt__reiter { /* Register-Reiter */
  position: absolute; top: -1px; right: clamp(24px, 4vw, 56px); transform: translateY(-100%);
  background: var(--himmel); color: var(--tinte); font: 700 1rem/1 var(--f-head); padding: 10px 16px 8px; border-radius: 4px 4px 0 0;
}
.blatt h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); margin-bottom: 12px; }
.blatt__lead { color: var(--tinte-2); font-size: 1.125rem; max-width: 36em; }
.punkte { list-style: none; margin-top: 24px; columns: 2 300px; column-gap: 40px; }
.punkte li { break-inside: avoid; padding: 12px 0 12px 28px; border-top: 1px solid var(--linie); position: relative; font-size: 1.0625rem; line-height: 1.45; }
.punkte li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 7px; border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(-45deg); }
.blatt[hidden] { display: none; }
.js .blatt:not([hidden]) { animation: blatt-auf .35s ease-out; }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .blatt:not([hidden]) { animation: none; } .ordner-tab { transition: none; } }

@media (max-width: 900px) {
  .leistungen { grid-template-columns: 1fr; gap: 48px; }
  .leistungen .regal { justify-content: flex-start; }
  .ordner-tab.ordner { --w: calc((100vw - 2 * var(--gutter) - 3 * 5px) / 4); --h: 230px; max-width: 86px; }
  .leistungen .ordner-tab.ordner:nth-child(2) { --h: 220px; }
  .leistungen .ordner-tab.ordner:nth-child(3) { --h: 226px; }
  .leistungen .ordner-tab.ordner:nth-child(4) { --h: 214px; }
  .ordner-tab .ordner__schild > span { font-size: 1.1875rem; }
  .ordner-tab .ordner__loch { margin-bottom: 16px; width: 22px; height: 22px; }
  .blatt { padding-left: 52px; }
  .blatt::before, .blatt::after { left: 18px; }
}

/* ---------- Jahrgänge (Archiv) ---------- */
.archiv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.archiv .regal { --board: #3A4766; --board-ueberstand: 16px; gap: 4px; padding-top: 28px; }
.archiv__scroll { overflow-x: auto; overflow-y: visible; padding: 0 16px 20px; margin: 0 -16px; scrollbar-width: thin; scrollbar-color: #3A4766 transparent; }
.jahr-tab.ordner { --w: 54px; --h: 300px; --schild: 46%; --fs: 1.375rem; }
.jahr-tab.ordner:nth-child(3n+1) { --h: 312px; }
.jahr-tab.ordner:nth-child(4n+2) { --h: 288px; }
.jahr-tab .ordner__schild > span { font-weight: 700; letter-spacing: 0.02em; }
.archiv__blatt { border-top: 2px solid var(--himmel); padding-top: 24px; min-height: 300px; }
.archiv__blatt[hidden] { display: none; }
.archiv__jahr { font: 700 clamp(4rem, 2.5rem + 5vw, 7rem)/0.9 var(--f-label); color: var(--himmel); display: block; margin-bottom: 16px; }
.archiv__blatt h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 12px; }
.archiv__blatt p { color: #C9D2E3; max-width: 34em; }
.archiv__nav { display: flex; gap: 10px; margin-top: 24px; }
.archiv__nav button { min-height: 44px; padding: 8px 16px; background: transparent; border: 1.5px solid rgb(255 255 255 / 0.5); color: #fff; border-radius: var(--r); font: 700 1rem/1 var(--f-head); cursor: pointer; }
.archiv__nav button:hover { background: #fff; color: var(--tinte); }
.archiv__nav button:disabled { opacity: 0.35; cursor: default; background: transparent; color: #fff; }
@media (max-width: 1000px) {
  .archiv { grid-template-columns: 1fr; }
  .jahr-tab.ordner { --h: 220px; --w: 48px; --fs: 1.1875rem; }
  .jahr-tab.ordner:nth-child(3n+1) { --h: 232px; }
  .jahr-tab.ordner:nth-child(4n+2) { --h: 210px; }
  .jahr-tab .ordner__loch { width: 20px; height: 20px; margin-bottom: 16px; }
  .archiv__blatt { min-height: 0; }
}

/* ---------- Partner ---------- */
.partner { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; padding-bottom: 0; }
.partner__person { display: grid; grid-template-rows: auto auto; align-content: start; }
.partner__foto { width: 145px; height: 180px; border: 1px solid var(--linie); background: var(--himmel-hell); margin-bottom: 0; }
.partner__foto img { width: 145px; height: 180px; object-fit: cover; filter: saturate(0.92); }
.partner__boden { height: 6px; background: var(--tinte); margin: 0 calc(var(--gap) / -2) 22px; box-shadow: 0 6px 10px -8px rgb(23 32 54 / 0.4); }
.partner__person:first-child .partner__boden { margin-left: -20px; border-radius: 2px 0 0 2px; }
.partner__person:last-child .partner__boden { margin-right: -20px; border-radius: 0 2px 2px 0; }
.karriere__lead { font-size: 1.1875rem; color: var(--tinte-2); }
.partner__person h3 { font-size: 1.5rem; margin: 0 0 4px; }
.partner__titel { font: 700 1.0625rem/1.3 var(--f-head); color: var(--blau); margin: 0 0 12px; }
.partner__weg { font-size: 1rem; color: var(--tinte-2); margin: 0; line-height: 1.55; }
.partner__wrap { position: relative; }
.partner__regalboden { position: relative; height: 12px; background: var(--tinte); border-radius: 2px; box-shadow: var(--schatten); margin: 0 -20px 24px; }
.partner__fotos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: end; }
@media (max-width: 900px) {
  .partner, .partner__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .partner__regalboden { display: none; }
}

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.team__foto { margin: 0; }
.team__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.team__foto figcaption { font: 600 0.9375rem/1.4 var(--f-head); color: var(--tinte-2); padding-top: 10px; }
.team__text h2 { font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem); margin-bottom: 18px; }
.team__text > p { color: var(--tinte-2); }
.reihe { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 26px 18px; align-items: flex-end; }
.reihe__gruppe { display: grid; gap: 0; justify-items: start; }
.reihe__ordner { width: max-content; min-width: 30px; list-style: none; display: flex; gap: 3px; align-items: flex-end; height: 92px; position: relative; padding: 0 4px; }
.reihe__ordner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: var(--tinte); border-radius: 1px; }
.reihe__ordner li { width: 15px; height: 86px; background: var(--c, var(--blau)); border-radius: 2px 2px 0 0; position: relative; }
.reihe__ordner li:nth-child(odd) { height: 80px; }
.reihe__ordner li::before { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 34%; background: #fff; border-radius: 1px; }
.reihe__ordner li::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgb(0 0 0 / 0.25); }
.reihe__label { margin-top: 16px; font: 600 1rem/1.2 var(--f-head); }
.reihe__label b { font: 700 1.375rem/1 var(--f-label); color: var(--blau); margin-right: 4px; }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }

/* ---------- Philosophie ---------- */
.zitat { margin: 0; padding-left: clamp(0px, 14vw, 220px); position: relative; }
.zitat p { font: 400 clamp(1.625rem, 1.1rem + 1.9vw, 2.625rem)/1.3 var(--f-body); color: var(--tinte); max-width: 26em; margin: 0 0 20px; text-wrap: balance; }
.zitat p + p { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); color: var(--tinte-2); }
.zitat footer { font: 700 1.0625rem/1.2 var(--f-head); color: var(--blau); margin-top: 28px; }
.zitat__ordner { position: absolute; left: 0; top: 4px; display: flex; gap: 4px; align-items: flex-end; }
.zitat__ordner .ordner { --w: 48px; --h: 210px; --fs: 1.125rem; --schild: 70%; }
.zitat__ordner .ordner__loch { width: 20px; height: 20px; margin-bottom: 14px; }
@media (max-width: 900px) { .zitat__ordner { display: none; } .zitat { padding-left: 0; } }

/* ---------- Ausbildung ---------- */
.karriere { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.karriere h2 { font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem); margin-bottom: 20px; }
.karriere h3 { font-size: 1.375rem; margin: 32px 0 8px; }
.karriere .punkte { columns: 1; margin-top: 8px; }
.karriere__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.weg h3 { font-size: 1.75rem; margin: 0 0 6px; }
.weg > p { color: var(--tinte-2); margin-bottom: 28px; }
.treppe { list-style: none; display: grid; gap: 6px; padding-bottom: 16px; position: relative; }
.treppe::after { content: ""; position: absolute; left: -16px; right: -16px; bottom: -16px; height: 16px; background: var(--tinte); border-radius: 2px; box-shadow: var(--schatten); }
.treppe .liegend { margin-left: var(--ein, 0); }
.treppe .liegend__wert { font-size: 1.75rem; min-width: 3ch; }
.treppe .liegend__text { font-size: 1.0625rem; }
.weg__zitat { margin: 40px 0 0; font-style: italic; color: var(--tinte-2); border-left: 3px solid var(--himmel); padding-left: 16px; }
@media (max-width: 900px) { .karriere { grid-template-columns: 1fr; } .treppe .liegend { margin-left: calc(var(--ein, 0) / 2); } }

/* ---------- Aktuelles ---------- */
.aktuell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); }
.aktuell h3 { font-size: 1.5rem; margin-bottom: 4px; }
.aktuell__quelle { color: var(--tinte-2); font-size: 1rem; margin-bottom: 16px; }
.meldungen { list-style: none; }
.meldungen li { border-top: 1px solid var(--linie); }
.meldungen li:last-child { border-bottom: 1px solid var(--linie); }
.meldungen a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 20px; padding: 18px 0; text-decoration: none; color: var(--tinte); }
.meldungen a:hover .meldung__titel { color: var(--blau); text-decoration: underline; text-decoration-thickness: 1px; }
.meldung__datum { font: 700 1rem/1.4 var(--f-label); color: var(--tinte-2); letter-spacing: 0.02em; }
.meldung__titel { font: 700 1.25rem/1.25 var(--f-head); }
.meldung__rubrik { grid-column: 2; font-size: 0.9375rem; color: var(--tinte-2); }
.blog { background: var(--himmel-hell); padding: 28px; border-radius: 2px; position: relative; }
.blog__liste { list-style: none; margin-top: 12px; }
.blog__liste li { border-top: 1px solid var(--linie); }
.blog__liste a { display: block; padding: 14px 0; font: 700 1.1875rem/1.3 var(--f-head); color: var(--tinte); text-decoration: none; }
.blog__liste a:hover { color: var(--blau); text-decoration: underline; }
.blog__liste small { display: block; font: 400 0.9375rem/1.4 var(--f-body); color: var(--tinte-2); margin-top: 4px; }
@media (max-width: 900px) { .aktuell { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .meldungen a { grid-template-columns: 1fr; } .meldung__rubrik { grid-column: 1; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .section-head { margin-bottom: 0; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 700 1.3125rem/1.25 var(--f-head); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--blau); background:
  linear-gradient(var(--blau), var(--blau)) center / 10px 2px no-repeat,
  linear-gradient(var(--blau), var(--blau)) center / 2px 10px no-repeat; transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen summary:hover { color: var(--blau); }
.fragen details p { margin: 0 0 22px; color: var(--tinte-2); max-width: 40em; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Kontakt & Anfahrt ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.kontakt h2 { font-size: clamp(2.25rem, 1.3rem + 3vw, 3.5rem); margin-bottom: 24px; }
.adresse { font-style: normal; font-size: 1.1875rem; margin-bottom: 24px; }
.kontakt__tel { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem)/1 var(--f-label); color: var(--blau); text-decoration: none; letter-spacing: 0.01em; margin-bottom: 14px; }
.kontakt__tel svg { width: 30px; height: 30px; }
.kontakt__tel:hover { color: var(--blau-tief); text-decoration: underline; }
.kontakt__weitere { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 28px; }
.kontakt__weitere dt { font: 700 1.0625rem/1.6 var(--f-head); }
.kontakt__weitere dd { margin: 0; }
.karte { margin: 0; background: var(--weiss); border: 1px solid var(--linie); padding: 12px; border-radius: 2px; }
.karte svg { width: 100%; height: auto; display: block; }
.karte figcaption { font: 600 0.875rem/1.3 var(--f-head); color: var(--tinte-2); padding: 8px 4px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wege { margin-top: 28px; }
.wege h3 { font-size: 1.375rem; margin-bottom: 8px; }
.wege details { border-top: 1px solid var(--linie); }
.wege details:last-child { border-bottom: 1px solid var(--linie); }
.wege summary { cursor: pointer; padding: 14px 0; font: 700 1.125rem/1.2 var(--f-head); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.wege summary::-webkit-details-marker { display: none; }
.wege summary::after { content: "+"; font: 700 1.375rem/1 var(--f-head); color: var(--blau); }
.wege details[open] summary::after { content: "–"; }
.wege details p { font-size: 1rem; color: var(--tinte-2); margin: 0 0 16px; }

.formular { margin-top: clamp(48px, 6vw, 80px); background: var(--weiss); border: 1px solid var(--linie); border-radius: 2px; padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.formular h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); margin-bottom: 12px; }
.formular__intro p { color: var(--tinte-2); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feld { display: grid; gap: 8px; align-content: start; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font: 700 1.0625rem/1.2 var(--f-head); }
.feld input, .feld textarea, .feld select {
  font: 400 1.0625rem/1.4 var(--f-body); color: var(--tinte); background: var(--papier);
  border: 1.5px solid var(--karton); border-radius: var(--r); padding: 12px 14px; min-height: 50px; width: 100%;
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgb(31 44 143 / 0.18); background: #fff; }
.feld__hilfe { font-size: 0.875rem; color: var(--tinte-2); }
.check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--tinte-2); }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--blau); flex: none; }
.formular .btn { justify-self: start; }
@media (max-width: 900px) {
  .kontakt { grid-template-columns: 1fr; }
  .formular { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .felder { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--tinte); color: #C3CCDC; padding: clamp(48px, 6vw, 80px) 0 32px; font-size: 1rem; }
.footer a { color: #fff; }
.footer a:hover { color: var(--himmel); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--linie-hell); }
.footer .logo { color: #fff; }
.footer .logo__name { color: #fff; }
.footer .logo__sub { color: #AEB8CC; }
.footer h3 { font-size: 1.125rem; color: #fff; margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 6px; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }
.footer address { font-style: normal; margin-top: 20px; }
.footer__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; font-size: 0.9375rem; color: #9AA6BC; }
.footer__region { max-width: 52em; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__marke { grid-column: 1 / -1; } }

/* ==========================================================================
   Marker „Was wir verbessert haben“
   ========================================================================== */
.has-tip { position: relative; }
.tip { position: absolute; z-index: 40; top: -14px; right: -14px; }
.tip--inline { position: relative; top: auto; right: auto; display: inline-block; vertical-align: middle; }
.tip--in { top: 12px; right: 12px; }
.tip__dot {
  position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  background: var(--blau); color: #fff; cursor: pointer; padding: 0;
  font: 700 0.9375rem/1 var(--f-label); display: grid; place-items: center;
  box-shadow: 0 2px 0 rgb(23 32 54 / 0.3);
  transition: transform .15s, background-color .15s;
}
.tip__dot:hover, .tip__dot[aria-expanded="true"] { background: var(--blau-tief); transform: scale(1.08); }
.dunkel .tip__dot { background: var(--himmel); color: var(--tinte); border-color: var(--archiv); }
@media (prefers-reduced-motion: no-preference) {
  .tip__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--blau); animation: ping 2.4s ease-out 1.6s 3 both; }
  .dunkel .tip__dot::before { border-color: var(--himmel); }
}
@keyframes ping { 0% { opacity: .8; transform: scale(.7); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
.tip__card {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(330px, calc(100vw - 32px));
  background: #fff; color: var(--tinte); border: 1.5px solid var(--tinte); border-radius: var(--r);
  padding: 16px 18px; text-align: left; box-shadow: 6px 6px 0 rgb(23 32 54 / 0.14);
  font: 400 0.9688rem/1.45 var(--f-body); letter-spacing: 0; text-transform: none; white-space: normal;
  display: none; z-index: 41;
}
.tip--inline .tip__card { right: auto; left: 0; }
.tip--links .tip__card { right: auto; left: 0; }
.tip.is-open .tip__card { display: block; }
@media (hover: hover) { .tip:hover .tip__card { display: block; } }
.tip__card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 1.125rem/1.2 var(--f-head); margin-bottom: 10px; }
.tip__card-title small { font: 600 0.8125rem/1 var(--f-head); color: var(--blau); white-space: nowrap; }
.tip__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--linie); }
.tip__row b { font: 700 0.875rem/1.7 var(--f-head); color: var(--tinte-2); }
.tip__row--now b { color: var(--blau); }
.tip__close { display: none; }
@media (max-width: 640px) {
  .tip.is-open .tip__card {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; z-index: 95;
    box-shadow: 0 20px 60px rgb(23 32 54 / 0.4); transform: none !important;
  }
  .tip.is-open .tip__close {
    display: inline-flex; margin-top: 12px; min-height: 44px; width: 100%; justify-content: center; align-items: center;
    background: var(--tinte); color: #fff; border: 0; border-radius: var(--r); font: 700 1rem/1 var(--f-head); cursor: pointer;
  }
}
html.tips-off .tip { display: none; }
/* offenen Marker über Nachbarn heben */
.has-tip:has(.tip.is-open), .has-tip:has(.tip:hover) { z-index: 45; }

/* ==========================================================================
   Interesse-Seite
   ========================================================================== */
.interesse { background: var(--himmel-hell); padding: clamp(48px, 8vw, 112px) 0; min-height: 70vh; }
.interesse__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.interesse h1 { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); line-height: 0.98; margin-bottom: 24px; }
.interesse__lead { font-size: 1.1875rem; max-width: 34em; }
.interesse__hinweis { background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blau); padding: 16px 20px; margin: 28px 0; font-size: 1.0625rem; }
.interesse__liste { list-style: none; margin: 0 0 28px; display: grid; gap: 8px; }
.interesse__liste li { padding-left: 28px; position: relative; }
.interesse__liste li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 7px; border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(-45deg); }
.visitenkarte { background: #fff; border: 1px solid var(--linie); padding: 28px; border-radius: 2px; }
.visitenkarte h2 { font-size: 1.75rem; margin-bottom: 4px; }
.visitenkarte p { color: var(--tinte-2); }
.visitenkarte dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0; }
.visitenkarte dt { font: 700 1.0625rem/1.6 var(--f-head); }
.visitenkarte dd { margin: 0; overflow-wrap: anywhere; }
.interesse .regal { margin: 0 0 40px 8px; }
.interesse .regal .ordner { --w: 52px; --h: 200px; --fs: 1.125rem; }
.interesse .regal .ordner__loch { width: 20px; height: 20px; margin-bottom: 14px; }
@media (max-width: 900px) { .interesse__grid { grid-template-columns: 1fr; } }

/* Mobil: Regalböden dürfen nicht über den Rand ragen */
@media (max-width: 900px) {
  .partner__person .partner__boden { margin-left: calc(var(--gap) / -2); margin-right: calc(var(--gap) / -2); border-radius: 0; }
  .partner__person:nth-child(odd) .partner__boden { margin-left: 0; }
  .partner__person:nth-child(even) .partner__boden { margin-right: 0; }
  .leistungen .regal { --board-ueberstand: 8px; }
}
.interesse .regal { width: max-content; --board-ueberstand: 12px; }