/* ============================================
   RA Younghyo Park – Kanzlei-Website
   Basis-Stylesheet
   ============================================ */

/* ============================================
   SCHRIFTARTEN (lokal gehostet, kein Aufruf bei Google)
   ============================================ */

/* Fraunces – Serif (Überschriften) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/fraunces-latin-ext-full-normal.woff2)
    format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/fraunces-latin-full-normal.woff2) format("woff2-variations");
  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: italic;
  font-display: swap;
  font-weight: 300 600;
  src: url(../fonts/fraunces-latin-ext-full-italic.woff2)
    format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 300 600;
  src: url(../fonts/fraunces-latin-full-italic.woff2) format("woff2-variations");
  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;
}

/* Inter – Sans (Fließtext) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2)
    format("woff2-variations");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  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;
}

/* JetBrains Mono – Mono (Kicker/Labels) */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/jetbrains-mono-latin-ext-400-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/jetbrains-mono-latin-400-normal.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: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/jetbrains-mono-latin-ext-500-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/jetbrains-mono-latin-500-normal.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: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/jetbrains-mono-latin-ext-600-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../fonts/jetbrains-mono-latin-600-normal.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 {
  --petrol: #2D5C82;
  --petrol-dark: #1F4260;
  --gold: #C8642A;
  --gold-dark: #A8531F;
  --bg-page: #F7EBDD; /* wärmerer Seitenhintergrund, Palette 5: Blau & Orange */
  --cream: #FCF6EC;
  --tint: #F1E4D2;
  --tint-gold: #FBE0C8;
  --ink: #2D2620;
  --muted: #6B5D4C;
  --muted-light: #D8CBB8;
  --border: #E6D8C4;
  --border-strong: #DBC9AE;

  --font-serif: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Inhalt bleibt auf breiten Bildschirmen konzentriert statt volle Breite */
  --content-max: 75rem; /* 1200px bei 16px Basis-Schriftgröße */
  --wrap-pad: 4.5rem; /* 72px – Randabstand auf großen Screens */
  --wrap-pad-sm: 1.75rem; /* 28px – Randabstand auf schmalen Screens */

  /* ---------- Schriftgrößen-Skala ----------
     Eine Stelle für alle Größen im Stylesheet. Insgesamt bewusst
     großzügiger als eine typische Business-Website — einfach --fs-*
     Werte hier anpassen, um die ganze Seite größer/kleiner zu machen. */
  --fs-2xs: 0.75rem; /* 12px – feinste Labels (Footer, Zitat-Quelle) */
  --fs-xs: 0.875rem; /* 14px – Kicker, Nav, Fußnoten */
  --fs-sm: 1rem; /* 16px – Karten-/Formulartext */
  --fs-base: 1.125rem; /* 18px – Fließtext (Hero, Absätze) */
  --fs-md: 1.25rem; /* 20px – Karten-/Schritt-Überschriften */
  --fs-lg: 1.5rem; /* 24px – Preis, Icon-Marke */
  --fs-xl: 1.875rem; /* 30px – Zwischenüberschriften (Kontakt, CTA) */
  --fs-2xl: 2.25rem; /* 36px – Section-Überschriften */
  --fs-3xl: clamp(2.25rem, 4vw, 3rem); /* Themenseiten-Hero */
  --fs-4xl: clamp(2.5rem, 4.5vw, 3.5rem); /* Startseiten-Hero */
}

* {
  box-sizing: border-box;
}

/* font-size bewusst NICHT auf einen festen px-Wert gesetzt: 100% übernimmt
   die Basis-Schriftgröße, die im Browser/Betriebssystem eingestellt ist
   (normalerweise 16px), statt sie zu überschreiben. Das ist die Stelle,
   die rem erst wirklich barrierefrei macht. */
html {
  scroll-behavior: smooth;
  font-size: 100%;
  /* Verhindert, dass Mobile-Browser (v.a. Android/Chrome) Textblöcke in
     schmalen Containern automatisch hochskalieren ("Font Boosting").
     Genau das war der Grund, warum das Dropdown-Menü auf dem Handy
     größer wirkte, als sein font-size-Wert eigentlich vorgibt. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-sans);
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  color: var(--gold);
}

/* ---------- Zentrierter Inhalts-Container ----------
   Jede volle Section (Hintergrundfarbe) bleibt 100% breit;
   der eigentliche Inhalt sitzt in .wrap und wird dadurch
   auf --content-max begrenzt und zentriert. */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.kicker {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.serif {
  font-family: var(--font-serif);
}

.btn {
  display: inline-block;
  padding: 1rem 1.875rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-0.125rem);
}
.btn:active {
  transform: translateY(0);
}

.btn-gold {
  background: linear-gradient(155deg, #E0925C, var(--gold) 55%, #A8531F);
  color: #fff;
  box-shadow:
    0 0.5rem 1.125rem -0.375rem rgba(168, 83, 31, 0.5),
    0 0.125rem 0.3125rem rgba(45, 30, 15, 0.12);
}
.btn-gold:hover {
  background: linear-gradient(155deg, #E8A374, var(--gold) 50%, #A8531F);
  color: #fff;
  box-shadow:
    0 0.75rem 1.5rem -0.375rem rgba(168, 83, 31, 0.55),
    0 0.125rem 0.3125rem rgba(45, 30, 15, 0.14);
}

.btn-outline {
  background: transparent;
  color: var(--petrol);
  border: 1.5px solid var(--petrol);
  padding: calc(1rem - 1.5px) calc(1.875rem - 1.5px);
}
.btn-outline:hover {
  background: var(--petrol);
  color: #fff;
  box-shadow: 0 0.625rem 1.25rem rgba(45, 92, 130, 0.18);
}

.btn-sm {
  padding: 0.6875rem 1.375rem;
  font-size: var(--fs-xs);
}
/* Nav-CTA-Button +20%, ohne .btn-sm an anderer Stelle (z. B. svc-cta-banner)
   mit zu ändern */
.nav .btn-sm {
  font-size: 1.05rem; /* vorher var(--fs-xs)/0.875rem — +20% */
}

/* ---------- Nav ---------- */

.nav {
  background: linear-gradient(170deg, #35618A, var(--petrol-dark) 70%);
  padding: 1.5rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.nav-inner {
  /* Nav folgt nicht dem engen Lese-Grid der Sections darunter — sie muss
     nicht mitscrollen/mitlesen, sondern nur Platz haben. Eigenes,
     breiteres max-width statt des geerbten .wrap-Werts (überschreibt es
     durch spätere Reihenfolge im Stylesheet, gleiche Spezifität). Wächst
     die Nav künftig um weitere Links, ist hier Reserve statt Umbruch. */
  max-width: 92rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.25rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.875rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.nav-brand:hover {
  opacity: 0.8;
}

.nav-mark {
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--gold);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  flex-shrink: 0;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}
.nav-brand:hover .nav-mark {
  transform: rotate(-8deg) scale(1.05);
  border-color: #E0925C;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.nav-brand-name {
  color: #f4efe4;
  font-family: var(--font-serif);
  font-size: 1.5rem; /* vorher var(--fs-md)/1.25rem — +20%, nur im Nav-Bereich */
  letter-spacing: 0.04em;
}
.nav-brand-tag {
  color: var(--gold);
  font-size: 0.9rem; /* vorher var(--fs-2xs)/0.75rem — +20% */
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.nav-links a:not(.btn) {
  position: relative;
  color: #e4dfd3;
  font-size: 1.2rem; /* vorher var(--fs-sm)/1rem — +20%, nur im Nav-Bereich */
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}
.nav-links a:not(.btn)::after,
.nav-links a:not(.btn)::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: linear-gradient(to right, var(--gold), var(--gold-dark));
  transform: scaleX(0);
  transition: transform 0.4s ease-out;
}
.nav-links a:not(.btn)::after {
  bottom: 0;
  transform-origin: right;
}
.nav-links a:not(.btn)::before {
  top: 0;
  transform-origin: left;
}
.nav-links a:not(.btn):hover {
  color: var(--gold);
}
.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn):hover::before {
  transform: scaleX(1);
}

/* ---------- Nav-Dropdown (Ratgeber) ----------
   Öffnet über CSS :hover (Desktop) UND über eine .is-open-Klasse,
   die per Klick/Tap gesetzt wird (script.js) — Touch-Geräte kennen
   kein :hover, deshalb braucht es den Klick-Fallback. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: 0.35rem 0;
  margin: 0;
  color: #e4dfd3;
  font-size: 1.2rem; /* vorher var(--fs-sm)/1rem — +20%, nur im Nav-Bereich */
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--gold);
}
.nav-caret {
  transition: transform 0.25s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 0;
  min-width: 24rem; /* an die verkleinerte Schrift der Einträge angepasst */
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.22);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 60;
}
/* Kicker "RATGEBER" als Überschrift des Panels — greift dieselbe
   Mono-Label-Formel auf wie .sofort-box ("INHALTSVERZEICHNIS") und
   verbindet das Panel farblich mit dem geöffneten Ratgeber-Trigger.
   Bewusst per ::before statt als eigenes <div> in jeder HTML-Datei:
   das Wort steht als Beschriftung ohnehin schon auf dem Button, der
   das Menü öffnet — als reines CSS-Element wird es von Screenreadern
   nicht ein zweites Mal vorgelesen, und es bleibt bei einer einzigen
   Stelle im Stylesheet statt sieben Kopien im HTML. */
.nav-dropdown-menu::before {
  content: "RATGEBER";
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  padding: 0.25rem 1.125rem 0.5rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-links .nav-dropdown-menu a {
  padding: 0.875rem 1.125rem;
  border-radius: 0.5rem;
  color: var(--ink);
  font-size: 1.2rem; /* wie die Nav-Links: ein Untermenü sollte nicht größer
                        sein als der Eintrag, der es öffnet (vorher 1.35rem) */
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.nav-links .nav-dropdown-menu a:hover {
  background: var(--tint-gold);
  color: var(--gold);
}
.nav-dropdown-menu a::after,
.nav-dropdown-menu a::before {
  display: none;
}

/* Dimming-Overlay: sobald Ratgeber offen ist (Hover auf Desktop oder
   .is-open per Klick/Tap), dunkelt der Rest der Seite ab, damit nur
   das Dropdown-Menü im Fokus bleibt. .nav-inner liegt bewusst über
   diesem Overlay (z-index 2 > 1), damit die Nav-Leiste inkl. Menü
   selbst hell/scharf bleibt. */
.nav::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(36, 28, 22, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav:has(.nav-dropdown:hover)::after,
.nav:has(.nav-dropdown.is-open)::after {
  opacity: 1;
}

.breadcrumb {
  background: var(--tint);
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--border);
}
.breadcrumb .kicker {
  color: var(--muted);
  font-size: var(--fs-2xs);
}
.breadcrumb .kicker .current {
  color: var(--gold);
}
.breadcrumb a {
  color: inherit;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: var(--gold);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Basis bleibt beige/warm wie der Rest der Seite — die Stimmung kommt
     nicht mehr aus einer dunklen Fläche, sondern aus Licht (Glow-Verläufe)
     und Textur (Papierkorn), genau wie im Farb-Entwurf. */
  background: linear-gradient(160deg, var(--bg-page) 0%, var(--tint) 100%);
  padding: 6rem 0 5.25rem;
  overflow: hidden;
}

/* Warmer Glow oben rechts, kühlerer Gegen-Glow unten links, plus ein kaum
   sichtbares Papierkorn – das "Licht & Textur"-Duo aus der Farbstudie.
   Liegt hinter .hero-wrap, das dafür einen eigenen Stacking-Kontext
   bekommt (z-index unten). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    42% 55% at 6% 108%,
    rgba(45, 92, 130, 0.14),
    transparent 72%
  );
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero-wrap {
  position: relative;
  z-index: 1;
}

.hero-glow {
  position: absolute;
  top: -13.75rem;
  right: -6rem;
  width: 47.5rem;
  height: 47.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 68%);
  opacity: 0.18;
  filter: blur(4px);
  pointer-events: none;
}

.hero-mark {
  position: absolute;
  top: -9rem;
  right: 8rem;
  font-size: 26rem;
  color: var(--petrol);
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hero-inner {
  position: relative;
  max-width: 60rem; /* vorher: 47.5rem — Text darf jetzt deutlich weiter nach rechts reichen */
  z-index: 1; /* stellt sicher, dass der Text immer über dem "§" liegt */
}

.hero-kicker {
  color: var(--gold);
  font-size: var(--fs-xs);
  margin-bottom: 1.375rem;
}

.hero h1 {
  color: var(--petrol-dark);
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1.625rem 0;
  text-wrap: balance;
}

.hero-underline {
  position: relative;
  display: inline-block;
}
.hero-underline svg {
  position: absolute;
  left: 0;
  bottom: -0.5rem;
}

.hero p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  margin: 0 0 2.25rem 0;
  max-width: 35rem;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.hero-cta .link-arrow {
  color: var(--ink);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-strong);
}

.hero-trust {
  margin-top: 3.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* fade-up entrance animation */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(1.125rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-up {
  opacity: 0;
  animation: heroFadeUp 0.7s ease-out forwards;
}
.fade-up.d1 {
  animation-delay: 0.05s;
}
.fade-up.d2 {
  animation-delay: 0.15s;
}
.fade-up.d3 {
  animation-delay: 0.25s;
}
.fade-up.d4 {
  animation-delay: 0.35s;
}
.fade-up.d5 {
  animation-delay: 0.45s;
}

/* ---------- USP strip ---------- */

.usp-strip {
  background: var(--tint-gold);
}

.usp-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.usp-item {
  display: flex;
  gap: 0.875rem;
  padding: 1.875rem 1.5rem;
  border-right: 1px solid #EFC9A8;
}
.usp-item:first-child {
  padding-left: 0;
}
.usp-item:last-child {
  border-right: none;
  padding-right: 0;
}
.usp-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  transition: transform 0.3s ease;
}
.usp-item:hover .usp-icon {
  transform: scale(1.14) rotate(-6deg);
}
.usp-title {
  font-size: var(--fs-xs);
  color: var(--ink);
  margin-bottom: 0.375rem;
}
.usp-text {
  font-size: var(--fs-sm);
  color: #5C4E3D;
  line-height: 1.5;
}

/* ---------- Sections ---------- */

.section {
  padding: 6.25rem 0;
}
.section-tight {
  padding: 5.5rem 0;
}
.section-tint {
  background: var(--tint);
}

.section-head {
  max-width: 42rem;
  margin-bottom: 3.5rem;
}
.section-head .kicker {
  color: var(--petrol);
  font-size: var(--fs-xs);
  margin-bottom: 1rem;
}
.section-head h2 {
  font-size: var(--fs-2xl);
  font-weight: 500;
  margin: 0 0 0.875rem 0;
}
.section-head p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---------- Grids & cards ---------- */

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.375rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.375rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.card {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 1.875rem 1.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1rem 2rem rgba(45, 92, 130, 0.09);
  border-color: var(--gold);
}
.card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0;
  font-weight: 500;
}
.card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.card p a,
.flip-card p a,
.card-cta a,
.hero-cta .link-arrow {
  display: inline-block;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.card p a:hover,
.flip-card p a:hover,
.card-cta a:hover,
.hero-cta .link-arrow:hover {
  transform: translateX(0.25rem);
}

/* ---------- Leistungs-Karten (Leistungen) ----------
   Statisch statt Flip: kompletter Inhalt (Icon, Titel, Kurztext, Link)
   ist immer sichtbar. Das ist bewusst so, weil der bisherige
   3D-Flip nur über :hover ausgelöst wurde und auf Touch-Geräten
   (Handy/Tablet, vermutlich der Großteil der Besucher) gar nicht
   erreichbar war — die Rückseite war praktisch unsichtbar.
   "Stretched link": der eigentliche Klick-Bereich ist der
   .svc-link am Kartenende, aber über ::after auf die ganze Karte
   ausgedehnt — so bleibt die Karte eine einzige, valide, für
   Tastatur/Screenreader klare Verlinkung statt verschachtelter <a>s. */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.875rem 1.625rem;
  border-radius: 0.625rem;
  background: var(--cream);
  border: 1px solid var(--border);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    opacity 0.3s ease;
}
.svc-card:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1rem 2rem rgba(45, 92, 130, 0.12);
  border-color: var(--gold);
}
.svc-icon {
  color: var(--muted-light);
  transition: color 0.3s ease;
}
.svc-card:hover .svc-icon {
  color: var(--petrol);
}
.svc-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0;
  font-weight: 500;
}
.svc-card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  flex-grow: 1;
}
.svc-link {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: fit-content;
  font-size: var(--fs-xs);
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.svc-card:hover .svc-link {
  color: var(--gold);
  transform: translateX(0.25rem);
}
.svc-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Spotlight-Hover: sobald eine der drei sichtbaren Karten gehovert
   wird, dimmen die übrigen leicht ab — nur auf Desktop wirksam
   (Touch kennt kein :hover), dort greift ohnehin nur der normale
   Klick-Zustand. */
.svc-track:hover .svc-card {
  opacity: 0.72;
}
.svc-track:hover .svc-card:hover {
  opacity: 1;
}

/* ---------- Leistungen-Karussell ----------
   Zeigt immer 3 (Desktop) / 2 (Tablet) / 1 (Mobil) von 8 Karten.
   Die Kartenbreite wird von js/script.js passend zur Viewport-Breite
   gesetzt; ein Klick auf einen Pfeil verschiebt die Reihe um genau
   eine Karte — endlose Schleife: Die Karte, die links rausläuft,
   wandert unsichtbar ans Ende (und umgekehrt bei "zurück"). */
.svc-carousel {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}
.svc-carousel-viewport {
  flex: 1;
  overflow: hidden;
}
.svc-track {
  display: flex;
  gap: 1.375rem;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.svc-track .svc-card {
  flex: 0 0 auto;
}
.svc-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--petrol);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.svc-arrow:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
  box-shadow: 0 0.625rem 1.25rem rgba(168, 83, 31, 0.22);
}
.svc-arrow svg {
  width: 1.375rem;
  height: 1.375rem;
}
@media (max-width: 60rem) {
  .svc-arrow {
    width: 3rem;
    height: 3rem;
  }
}

.svc-cta-banner {
  margin-top: 1.375rem;
  border-radius: 0.625rem;
  padding: 2rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--tint-gold);
  transition: box-shadow 0.25s ease;
}
.svc-cta-banner:hover {
  box-shadow: 0 1rem 2rem rgba(168, 83, 31, 0.14);
}

.card-cta {
  border-radius: 0.625rem;
  padding: 1.875rem 1.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
  background: var(--tint-gold);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.card-cta:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1rem 2rem rgba(168, 83, 31, 0.14);
}
.card-cta a {
  font-size: var(--fs-sm);
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  width: fit-content;
}

/* scroll-reveal animation
   Uses the standalone `translate` property (not `transform`) so this
   entrance slide never fights with the `transform` hover-lift rules on
   .card/.flip-card/.card-cta/.step/.testimonial — both apply at once
   instead of one silently overriding the other once revealed. */
.reveal {
  opacity: 0;
  translate: 0 1.25rem;
  transition:
    opacity 0.6s ease,
    translate 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
.reveal.d1 {
  transition-delay: 0.05s;
}
.reveal.d2 {
  transition-delay: 0.1s;
}
.reveal.d3 {
  transition-delay: 0.15s;
}

/* ---------- Process steps ---------- */

.step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.375rem;
  border-top: 2px solid var(--gold);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}
.step:hover {
  transform: translateY(-0.25rem);
  border-top-color: var(--petrol);
}
.step .kicker {
  color: var(--gold);
  font-size: var(--fs-xs);
}
.step h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0;
  font-weight: 500;
}
.step p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ---------- Testimonials ---------- */

.testimonial {
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 2rem;
  color: #8C7A64;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.testimonial:hover {
  transform: translateY(-0.375rem);
  box-shadow: 0 1rem 2rem rgba(45, 92, 130, 0.09);
  border-color: var(--gold);
}
.testimonial blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #5C4E3D;
  margin: 0;
}
.testimonial cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 1rem;
  color: #8C7A64;
}

/* ---------- Contact ---------- */

.contact {
  position: relative;
  padding: 6.25rem 0;
  background: var(--tint);
  overflow: hidden;
}
/* dieselbe Licht&Textur-Formel wie im Hero, nur ruhiger — hält den
   Abschnitt sichtbar abgesetzt, ohne in eine dunkle Fläche zu kippen */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 65% at 96% 8%,
    rgba(200, 100, 42, 0.12),
    transparent 70%
  );
  pointer-events: none;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.04;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.contact-info .kicker {
  color: var(--gold);
  font-size: var(--fs-xs);
  margin-bottom: 1rem;
}
.contact-info h2 {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 0 0 1.25rem 0;
}
.contact-info p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  margin: 0 0 1.75rem 0;
  max-width: 27rem;
}
.contact-details {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 2;
}

.contact-form {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(45, 30, 15, 0.28);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.875rem 0.9375rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.3125rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.contact-form textarea {
  min-height: 5.625rem;
  resize: none;
}
.upload-box {
  position: relative;
  display: block;
  border: 1px dashed #CFBFA6;
  border-radius: 0.3125rem;
  padding: 0.875rem;
  font-size: var(--fs-xs);
}

.upload-box:hover {
  border-color: var(--gold);
  background: var(--tint-gold);
  color: var(--gold);
}
.upload-box input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.contact-form .btn {
  text-align: center;
  border: none;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 0.1875rem rgba(200, 100, 42, 0.18);
}

/* ---------- Footer ---------- */

/* Bewusst dieselbe Blau-Fläche wie .nav — Kopf und Fuß der Seite rahmen
   den beigen Inhalt ein (Sandwich/"수미상관"), statt eine dritte Farbe
   einzuführen. Bleibt dünn wie die Nav, also kein neuer "Block". */
.site-footer {
  /* 2.125rem statt 2.5rem: 34px Polster + 24px Inhalt = 92px — exakt die
     Höhe der Nav (24px Polster + 44px Inhalt). Kopf und Fuß rahmen die
     Seite damit als zwei gleich hohe Flächen ein. */
  padding: 2.125rem 0;
  background: linear-gradient(170deg, #35618A, var(--petrol-dark) 70%);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer .kicker {
  color: #C7D3DD;
  font-size: 1.08rem; /* nochmal +20% (vorher 0.9rem, urspr. var(--fs-2xs)/0.75rem) */
}
.footer-links {
  display: flex;
  gap: 1.75rem;
}
.footer-links a {
  position: relative;
  color: #DCE4EA;
  font-size: 1.08rem; /* nochmal +20% (vorher 0.9rem, urspr. var(--fs-2xs)/0.75rem) */
  padding-bottom: 0.2rem;
  transition: color 0.2s ease;
}
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-links a:hover::after {
  width: 100%;
}

/* ---------- Kosten / FAQ (Themenseite) ---------- */

.kosten-price {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--petrol);
  margin-bottom: 0.75rem;
  transition: color 0.25s ease;
}
.kosten-card:hover .kosten-price {
  color: var(--gold);
}
.kosten-card h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0 0 0.625rem 0;
  font-weight: 500;
}

.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 47.5rem;
}
.faq-item {
  padding: 1.625rem 0;
  border-bottom: 1px solid var(--border-strong);
  border-left: 2px solid transparent;
  transition:
    padding-left 0.25s ease,
    border-color 0.25s ease;
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item:hover {
  padding-left: 0.875rem;
  border-left-color: var(--gold);
}
.faq-item h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}
.faq-item p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.cta-banner {
  padding: 5rem 0;
  background: var(--tint-gold);
  text-align: center;
}
.cta-banner h2 {
  color: var(--ink);
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 0 0 1rem 0;
}
.cta-banner .kicker {
  font-size: var(--fs-2xs);
  color: var(--gold);
  margin: 0 0 1.75rem 0;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 60rem) {
  .wrap {
    padding: 0 var(--wrap-pad-sm);
  }
  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .usp-wrap {
    grid-template-columns: 1fr;
  }
  .usp-item {
    border-right: none;
    border-bottom: 1px solid #EFC9A8;
    padding-left: 0;
    padding-right: 0;
  }
  .usp-item:last-child {
    border-bottom: none;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .hero-mark {
    font-size: 20rem;
    top: -5rem;
  }
  .nav-links {
    gap: 1.125rem;
  }
}

/* Eigener, großzügigerer Breakpoint nur für die Nav: Logo+Tagline+4
   Links+Button brauchen bei der jetzigen (vergrößerten) Schrift ohne
   jedes Quetschen ca. 1300px. Unter 84rem daher lieber sauber umbrechen
   (mehrzeilig, wie auf Mobile) statt Logo-Tagline oder Links zu stauchen
   — ein Umbruch ist besser als eine gequetschte/überlaufende Nav. Ab
   84rem bleibt sie garantiert einzeilig, nichts wird schmaler als sein
   eigentlicher Inhalt. */
@media (max-width: 84rem) {
  .nav-inner {
    flex-wrap: wrap;
  }
  .nav-brand,
  .nav-links {
    flex-wrap: wrap;
    flex-shrink: 1;
  }
}

/* ---------- Mobil: kein horizontales Scrollen ----------
   Das Ratgeber-Dropdown hat durch min-width: 25rem auf schmalen Displays
   rechts über den Bildschirmrand hinausgeragt. Da es nur per
   visibility/opacity ausgeblendet wird (nicht per display: none), zählt es
   auch im geschlossenen Zustand zur Breite des Dokuments — Ergebnis war
   horizontales Scrollen auf der ganzen Seite. Unterhalb dieses Breakpoints
   wird das Menü deshalb an .nav-inner ausgerichtet (position: static am
   .nav-dropdown) und über die volle verfügbare Breite gezogen.
   Kein overflow-x: hidden auf html/body: das würde die sticky Nav brechen. */
@media (max-width: 48rem) {
  .nav-dropdown {
    position: static;
  }
  .nav-dropdown-menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
  /* Auf sehr schmalen Geräten (ca. 320px) passt "Betriebskostenabrechnung
     prüfen" auch dann nicht in eine Zeile — Silbentrennung erlauben. */
  .nav-links .nav-dropdown-menu a {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Lange deutsche Komposita ("Betriebskostenabrechnung") passen auf schmalen
   Displays nicht in eine Zeile und schoben das Layout auseinander.
   Silbentrennung (greift über lang="de") und Umbruch im Wort verhindern das. */
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Die Fristen-Tabelle ist breiter als ein Handydisplay. Statt die ganze
   Seite mitzuziehen, scrollt jetzt nur noch die Tabelle selbst horizontal. */
@media (max-width: 48rem) {
  .fristen-table {
    display: block;
    overflow-x: auto;
  }
}

/* Sehr schmale Geräte (bis ca. 360px): Dort passt "Betriebskostenabrechnung
   prüfen" auch mit 1.2rem nicht mehr sauber in die Zeile und würde mitten
   im Wort umbrechen. Etwas kleinere Schrift und schmalerer Innenabstand
   lösen das besser als ein Wortumbruch. */
@media (max-width: 22.5rem) {
  .nav-links .nav-dropdown-menu a {
    font-size: 1.05rem;
    padding: 0.875rem 0.75rem;
  }
}

/* Sicherheitsnetz für Mobilgeräte: Egal welches Element künftig einmal ein
   paar Pixel zu breit wird (lange Wörter, Tabellen, dekorative Elemente) —
   seitlich gescrollt wird auf dem Handy nicht mehr, die Seite endet am
   Bildschirmrand.
   Bewusst "clip" statt "hidden": hidden würde aus <html> einen Scroll-
   Container machen und damit die sticky Navigation abschalten. clip
   unterbindet nur das seitliche Scrollen und lässt sticky unangetastet.
   Gilt ausschließlich unterhalb von 48rem — am Desktop-Layout ändert
   sich dadurch nichts. */
@media (max-width: 48rem) {
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
  }
}

/* Barrierefreiheit: Wer im Betriebssystem "Bewegung reduzieren" aktiviert hat
   (z. B. wegen Migräne oder einer Gleichgewichtsstörung), bekommt die Inhalte
   ohne Bewegung. Die Animationen werden nicht entfernt, sondern auf praktisch
   null Dauer gesetzt — dadurch springen .fade-up und .reveal sofort in ihren
   Endzustand (sichtbar), statt unsichtbar zu bleiben. Für alle anderen
   Besucher ändert sich nichts. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sprunglink für Tastatur- und Screenreader-Nutzer: Die Nav enthält sechs
   Links plus ein Untermenü — ohne diesen Link müsste man sich auf jeder
   Seite erst durch alle hindurchtabben, um zum Text zu gelangen (WCAG 2.4.1
   "Bypass Blocks", Stufe A). Der Link liegt außerhalb des sichtbaren
   Bereichs und erscheint erst, wenn er den Fokus bekommt — also beim ersten
   Druck auf die Tabulatortaste. Mit der Maus bemerkt man ihn nie. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.875rem 1.375rem;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 0 0 0.5rem 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: var(--ink);
}

/* ---------- Sprachumschalter (DE | KO) ----------
   Steht in der Nav direkt vor dem Kontakt-Button. Gleiches Orange wie die
   Marke; die aktive Sprache voll deckend, die andere leicht transparent.
   Bewusst zurückhaltender als der Kontakt-Button, der die eigentliche
   Handlung der Seite bleibt. Die Unterstreichungs-Animation der übrigen
   Nav-Links ist hier abgeschaltet — zwei Buchstaben brauchen sie nicht. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* "Pretendard Toggle" steht bewusst hinter JetBrains Mono: Latein (DE)
     kommt weiter aus der Mono-Schrift, nur die drei Hangul-Zeichen holt
     sich der Browser aus der eingebetteten Mini-Schrift. Generische
     Familien (monospace) stehen ganz hinten — stünden sie davor, würden
     sie Hangul abfangen, bevor Pretendard drankommt. */
  font-family: "JetBrains Mono", "Pretendard Toggle", ui-monospace,
    "Courier New", monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
}
.nav-links .lang-toggle a {
  color: var(--gold);
  /* .nav-links a:not(.btn) setzt 1.2rem — das würde die verlinkte Sprache
     größer machen als die aktive. Hier zurück auf die Größe von
     .lang-toggle, damit beide Kürzel gleich groß stehen. */
  font-size: inherit;
  opacity: 0.55;
  padding: 0.35rem 0;
  transition: opacity 0.2s ease;
}
.nav-links .lang-toggle a:hover {
  color: var(--gold);
  opacity: 1;
}
.nav-links .lang-toggle a::before,
.nav-links .lang-toggle a::after {
  display: none;
}
.lang-toggle .is-current {
  color: var(--gold);
  opacity: 1;
}
.lang-toggle .sep {
  color: var(--gold);
  opacity: 0.3;
}

/* Hinweis unter dem Kontaktformular (Art. 13 DSGVO: Information im Moment
   der Erhebung, nicht erst in der Datenschutzerklärung). */
.form-note {
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--muted);
  margin: 0.75rem 0 0 0;
}
.form-note a {
  color: var(--gold-dark);
}

/* ---------- Hangul fuer den Sprachumschalter ----------
   Enthaelt ausschliesslich die drei Zeichen 한 국 어 (0,8 KB). Ohne diese
   Schrift haengt die Darstellung davon ab, ob auf dem Geraet des Besuchers
   ueberhaupt eine koreanische Schrift installiert ist — unter Linux haeufig
   nicht, dort erschienen dann leere Kaestchen. Als data-URI eingebettet:
   kein zusaetzlicher Request, und nichts verlaesst den eigenen Server.
   Die grosse Pretendard-Fassung der koreanischen Seite heisst bewusst
   anders ("Pretendard"), damit sich beide nicht gegenseitig ueberschreiben. */
@font-face {
  font-family: "Pretendard Toggle";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAMMAAwAAAAABUgAAAK9AAFPGgAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgAEQKgwSCZQE2AiQDDAsKAAQgBYJUByAbTARAjtMVsWmSs+kgoDqrepBM4qVwAPWD8JLEYHChTj7g9KQD7f7/XM6P/h0enY4peqQnsldTIx0LMLA0y8K9n2c9jyigwFNvxbmEJp9v/jQCMOLNlygura6PhgLw/z8AFHSocNJw1u5t+vfEXQewWNGtELNRQU1ULgPLKpF0gWnS9BqqTKAKuACEiUXZoB5Hd/S42ly/4p8jxI+Jd4AAUHLVzYA/MyABMuBMRgDOFOKBhoYEO3qc2nm1+f//b1Td+Zk1IzchAKYQamdwINjTezUIJFQPN7um2e26YaOv1LdglWyKUXYUNtkqnK5fF47C6ffVqw0sqmmIUW++cuWKceq1W2LM7euNWMLom5qm6bYbc+1aw2EWzIpxmKm9o7AIE5YHRsMhutbo2vXrJghYDY2uQtDadzEOcVRNklPzp4OnWR94z5BGPyn3bLzyWvXY5PI7ow/6zLLdn+o9ei8Rf+rwuAGfTetnbV6O7tvyizO0bf3+H58ybOz5Rb3d9u//x55bPJaGO3FgxY1ZsxYxcUCjhm4lU/YnTxjYEJqVYh5v7rgcNXl5SZPg0SdvLb91ct7Do3W6LaCdtjPvaO2Ro47X7jqPttr1guN1RtUdNjKxuKXFUtx8ZEJd6hgZJc0tlpKWIxPrZq6fu5Wlw+0AIABRy/OSc3DtVrbsr5qsAfCwR8uZ1cV9mvyK/LvRpb42HNAjASBAv/KfI7hcH/6490GAb5I0WKx7RbnOqglAYSQTO9HUx+lQAD1NyQjFAGSDsQJn2ayEldqsTKaWrEKwxayKp4P/u45g1yjSS29D9NVFJ531528L/hLFS5TEX5UuuvNXbogBeuokRldd9FRbXx3010FP7bXRV3t1ddDJAN210VeCWEniZchSpL4G6sly9ojJ+iop/2pDHZLsp4teZX/zmp+Ry0Du3z/TAAAA) format("woff2");
  unicode-range: U+AC00-D7A3;
}

/* ---------- Teilen-Leiste unter Ratgeber-Beitraegen ----------
   Bewusst ohne fremde Skripte (AddThis, Facebook-SDK o.ae.): die Buttons
   nutzen nur eingebaute Browser-Funktionen. Es werden keine Daten an
   Dritte uebermittelt, es gibt nichts zu zaehlen und nichts, was in der
   Datenschutzerklaerung ergaenzt werden muesste.
   Beide Buttons sind im HTML mit hidden markiert; script.js zeigt genau
   den, den der jeweilige Browser auch wirklich ausfuehren kann. */
.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2.5rem 0 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.share .kicker {
  color: var(--muted);
  margin-right: 0.25rem;
}
.share button {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--gold-dark);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.share button:hover {
  background: var(--tint-gold);
  border-color: var(--gold);
}
.share button[hidden],
.share[hidden] {
  display: none;
}

/* ---------- Gruppen im Ratgeber-Dropdown ----------
   Mit sieben Beiträgen wird eine reine Liste unübersichtlich. Statt eines
   zweiten Menüs (auf Touch-Geräten schlecht bedienbar) bleibt die Struktur
   flach; nicht anklickbare Gruppentitel gliedern sie.
   Die Gruppen stehen in zwei .nav-dropdown-col-Spalten. Unterhalb von 62rem
   liegen die Spalten untereinander, darüber nebeneinander — damit das Panel
   auf dem Laptop nicht zu hoch wird. Bewusst flex statt grid mit
   auto-flow: column, weil dort ein Gruppentitel am Spaltenende von seinen
   Einträgen getrennt werden kann. */
.nav-dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.nav-dropdown-group {
  color: var(--gold-dark);
  font-size: var(--fs-2xs);
  padding: 0.625rem 1.125rem 0.25rem;
  cursor: default;
}
.nav-dropdown-col > .nav-dropdown-group:first-child {
  padding-top: 0.125rem;
}

@media (min-width: 62rem) {
  .nav-dropdown-menu {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 44rem;
    gap: 0 1.5rem;
  }
  /* Das Panel-Label soll über beiden Spalten stehen, nicht neben ihnen. */
  .nav-dropdown-menu::before {
    flex: 0 0 100%;
  }
  .nav-dropdown-col {
    flex: 1 1 0;
  }
}