/* ============================================================
     MY LAW — Kanzlei Yılmaz
     Markensystem „Keshan": Indigo · Krapprot · Staubblau · Elfenbein
     Bewusst einthemig (fixe Corporate Identity, kein Dark-Mode-Toggle).
     Hintergrund und Farben werden dennoch überall explizit gesetzt,
     damit die Seite auf jedem Host-Grund korrekt aufliegt.
     ============================================================ */

  /* Zwei Dateien pro Schnitt: die "latin"-Subsets tragen den eigentlichen
     Text. Die ursprünglich verwendeten "latin-ext"-Subsets von Fontsource
     hatten einen echten Rasterisierungsfehler am Versal-A (trat erst bei
     mehreren gleichzeitigen Größen-Instanzen auf einer Seite auf, siehe
     Testreihe) — deshalb laufen sie jetzt nur noch, per unicode-range fest
     auf Latin Extended-A eingegrenzt, für das türkische ı in „Yılmaz". */
  @font-face {
    font-family: 'Young Serif';
    src: url('fonts/young-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
  }
  @font-face {
    font-family: 'Young Serif';
    src: url('fonts/young-serif-400-tr.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
    unicode-range: U+0100-017F;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-400-tr.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-500-tr.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-600-tr.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Schibsted Grotesk';
    src: url('fonts/schibsted-grotesk-700-tr.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017F;
  }

  :root {
    /* Palette „Keshan" */
    --indigo: #1E2B52;
    --krapprot: #A4132A;
    --krapprot-hell: #C8263F;
    --krapprot-hover: #7A0E20;
    --staubblau: #9DAFC6;
    --staubblau-hell: #BAC7D7;
    --elfenbein: #EFE7D6;
    --weiss: #FFFFFF;
    --hairline: #DCD4C0;
    --hairline-auf-indigo: rgba(239, 231, 214, 0.22);

    /* Typografie */
    --font-display: 'Young Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-text: 'Schibsted Grotesk', system-ui, sans-serif;

    /* Abstandsraster (px) */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 18px; --s5: 22px;
    --s6: 30px; --s7: 44px; --s8: 60px; --s9: 76px; --s10: 110px;

    --content-max: 1240px;
    --stroke: 7;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; }

  body {
    margin: 0;
    background: var(--weiss);
    color: var(--indigo);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-inline: max(18px, env(safe-area-inset-left, 0px));
    /* Alle Inhalte sind gegen ~320px geprüft und bleiben innerhalb des
       Viewports; dies ist nur ein Riegel gegen Sub-Pixel-Rundungsfehler
       (z. B. beim Web-Font-Nachladen), nicht dazu gedacht, echten
       Inhalt abzuschneiden. */
    overflow-x: hidden;
  }

  img { max-width: 100%; }
  [hidden] { display: none !important; }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    margin: 0;
    text-wrap: balance;
  }

  p { margin: 0; }

  a { color: var(--krapprot); text-decoration: none; }
  a:hover { color: var(--krapprot-hover); text-decoration: underline; }
  a:focus-visible, button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--krapprot);
    outline-offset: 3px;
  }

  .skip-link {
    position: absolute;
    top: -48px;
    left: var(--s5);
    z-index: 200;
    background: var(--indigo);
    color: var(--elfenbein);
    padding: 10px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 999px;
    transition: top 150ms ease-out;
  }
  .skip-link:focus-visible {
    top: var(--s4);
    outline: 2px solid var(--elfenbein);
    outline-offset: 3px;
  }
  .skip-link:hover { color: var(--elfenbein); text-decoration: none; }

  .wrap {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s5);
  }

  .eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--krapprot);
    margin-bottom: var(--s6);
  }

  .bullet-list { list-style: none; margin: 0; padding: 0; }
  .bullet-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: var(--s3);
  }
  .bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--krapprot);
    flex-shrink: 0;
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(.2,.7,.3,1), background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, box-shadow 180ms ease-out;
    touch-action: manipulation;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97) translateY(0); }
  .btn-primary {
    background: var(--indigo);
    color: var(--weiss);
    border: 1px solid var(--indigo);
  }
  .btn-primary:hover { background: var(--krapprot); border-color: var(--krapprot); color: var(--weiss); text-decoration: none; box-shadow: 0 6px 16px -6px rgba(164,19,42,0.45); }
  .btn-secondary {
    background: transparent;
    color: var(--krapprot);
    border: 1px solid var(--krapprot);
  }
  .btn-secondary:hover { background: var(--krapprot); color: var(--weiss); text-decoration: none; box-shadow: 0 6px 16px -6px rgba(164,19,42,0.35); }

  /* Zeichen (Monogramm)
     Die Pfade werden per <use> aus einem <symbol> instanziiert; das erzeugt
     einen Shadow-Tree, den gewöhnliche Nachfahren-Selektoren (".mark--on-dark
     .mark-m") nicht durchdringen — deshalb blieb das Zeichen im Footer trotz
     Klasse "mark--on-dark" in Indigo statt Elfenbein und ging auf der Indigo-
     Fläche unter. CSS-Variablen vererben sich dagegen zuverlässig durch den
     Shadow-Tree, daher hier über --mark-m/--mark-y statt über Klassen-Kaskade. */
  .mark-m { fill: none; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; stroke: var(--mark-m, var(--indigo)); }
  .mark-y { fill: none; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; stroke: var(--mark-y, var(--krapprot)); }
  .mark--on-dark { --mark-m: var(--elfenbein); --mark-y: var(--krapprot-hell); }
  .mark--mono { --mark-m: currentColor; --mark-y: currentColor; }

  .icon { width: 20px; height: 20px; flex-shrink: 0; }
  .icon path, .icon rect, .icon circle {
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hairline);
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
    padding-block: var(--s4);
  }
  .brand-lockup { display: flex; align-items: center; gap: var(--s3); }
  .brand-lockup svg { width: 34px; height: auto; }
  .brand-lockup .wordmark { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.005em; color: var(--indigo); }
  .brand-lockup .suffix {
    display: block;
    font-family: var(--font-text);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--indigo);
    opacity: 0.6; /* Rasterung von Indigo statt zusätzlichem Grau, siehe Markenregeln §5 */
    margin-top: 2px;
  }

  .main-nav { display: flex; align-items: center; gap: var(--s6); }
  .main-nav ul { list-style: none; display: flex; gap: var(--s6); margin: 0; padding: 0; }
  .main-nav a {
    color: var(--indigo);
    font-size: 0.9375rem;
    font-weight: 500;
    position: relative;
  }
  .main-nav a:hover { text-decoration: none; color: var(--indigo); }
  .main-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--krapprot);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms ease-out;
  }
  .main-nav a:hover::after { transform: scaleX(1); }

  /* Mobil-Menü: unterhalb 860px ersetzt ein Umschalt-Knopf die verborgene
     .main-nav, damit Profil/Kontakt/etc. ohne vollständiges Scrollen der
     Seite erreichbar bleiben. */
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--indigo);
    cursor: pointer;
    transition: transform 150ms ease-out, border-color 150ms ease-out;
  }
  .nav-toggle:active { transform: scale(0.97); }
  .nav-toggle svg { width: 16px; height: 16px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  .mobile-nav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--weiss);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 16px 28px -16px rgba(30, 43, 82, 0.22);
    opacity: 0;
    visibility: hidden;
  }
  .mobile-nav-panel.is-open { opacity: 1; visibility: visible; }
  @media (prefers-reduced-motion: no-preference) {
    .mobile-nav-panel {
      transform: translateY(-8px);
      transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms ease-out;
    }
    .mobile-nav-panel.is-open { transform: none; }
  }
  .mobile-nav-panel ul {
    list-style: none;
    margin: 0;
    padding: var(--s4) var(--s5) 0;
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-panel li { border-bottom: 1px solid var(--hairline); }
  .mobile-nav-panel a:not(.btn) {
    display: block;
    padding: var(--s4) 0;
    color: var(--indigo);
    font-size: 1.0625rem;
    font-weight: 500;
  }
  .mobile-nav-panel a:not(.btn):hover { color: var(--krapprot); text-decoration: none; }
  .mobile-nav-panel .btn { display: flex; margin: var(--s5); justify-content: center; }

  .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; }
  .lang-switch a, .lang-switch span {
    color: var(--indigo);
    opacity: 0.5;
    padding: 2px 3px;
  }
  .lang-switch a:hover { opacity: 1; color: var(--krapprot); text-decoration: none; }
  .lang-switch [aria-current="true"] { opacity: 1; color: var(--krapprot); }
  .lang-switch .sep { opacity: 0.3; }
  footer .lang-switch a, footer .lang-switch span { color: var(--staubblau-hell); opacity: 1; }
  footer .lang-switch a:hover { color: var(--elfenbein); }
  footer .lang-switch [aria-current="true"] { color: var(--elfenbein); }

  /* Rechtstexte (Impressum, Datenschutz) */
  .legal-doc { padding-block: var(--s9) var(--s10); }
  .legal-doc .wrap { max-width: 780px; }
  .legal-doc h1 { font-size: 2rem; color: var(--indigo); margin-bottom: var(--s7); }
  .legal-doc h2 { font-size: 1.1875rem; color: var(--indigo); font-family: var(--font-text); font-weight: 700; margin-top: var(--s8); margin-bottom: var(--s4); }
  .legal-doc p { margin-top: var(--s4); }
  .legal-doc p:first-of-type { margin-top: 0; }
  .legal-doc ul, .legal-doc ol { margin-top: var(--s4); padding-left: 1.2em; }
  .legal-doc li { margin-bottom: var(--s3); }
  .legal-doc a { text-decoration: underline; text-underline-offset: 2px; }
  .legal-doc .updated { font-size: 0.875rem; color: var(--indigo); opacity: 0.6; margin-bottom: var(--s8); }
  .back-link { display: inline-block; margin-bottom: var(--s7); font-size: 0.9375rem; font-weight: 600; }

  /* Vollständiges Profil */
  .profile-hero { padding-block: var(--s9) var(--s7); }
  .profile-hero .wrap { max-width: 820px; }
  .profile-hero .eyebrow { margin-bottom: var(--s4); }
  .profile-hero h1 { font-size: clamp(1.875rem, 2.4vw + 1rem, 2.5rem); color: var(--indigo); }
  .profile-hero .rolle { margin-top: var(--s3); font-size: 1rem; color: var(--krapprot); font-weight: 600; }
  .profile-hero .lede { margin-top: var(--s5); max-width: 60ch; font-size: 1.0625rem; }

  .profile-body { padding-block: 0 var(--s10); }
  .profile-body .wrap {
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s9);
    align-items: start;
  }
  .profile-bio { position: relative; }
  .profile-bio p { position: relative; z-index: 1; margin-top: var(--s5); max-width: 64ch; }
  .profile-bio p:first-child { margin-top: 0; }
  .profile-bio-mark {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--s8);
    width: 220px;
    opacity: 0.05;
    color: var(--indigo);
    pointer-events: none;
  }
  @media (max-width: 860px) {
    .profile-bio-mark { display: none; }
  }

  .profile-aside { display: flex; flex-direction: column; gap: var(--s7); }
  .profile-block { border-top: 1px solid var(--hairline); padding-top: var(--s5); }
  .profile-block h2 {
    font-family: var(--font-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--krapprot);
    margin-bottom: var(--s5);
  }
  .profile-block ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
  .profile-block li { font-size: 0.9375rem; color: var(--indigo); line-height: 1.5; }
  .profile-block .stage-role { display: block; font-weight: 600; }
  .profile-block .stage-place { display: block; opacity: 0.68; font-size: 0.875rem; margin-top: 2px; }
  .profile-block p { font-size: 0.9375rem; color: var(--indigo); }

  @media (max-width: 860px) {
    .profile-body .wrap { grid-template-columns: 1fr; gap: var(--s7); }
  }

  /* Hero */
  .hero {
    padding-block: var(--s9) var(--s10);
    position: relative;
    overflow: clip;
  }
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: var(--s8);
    align-items: center;
  }
  .hero-mark {
    justify-self: end;
    width: 100%;
    max-width: 320px;
    opacity: 0.92;
  }
  .hero-claim {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--krapprot);
    margin-top: var(--s6);
  }
  .hero h1 {
    font-size: clamp(2.25rem, 4.2vw + 1rem, 4rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--indigo);
  }
  .hero .lede {
    max-width: 46ch;
    margin-top: var(--s5);
    font-size: 1.125rem;
    line-height: 1.65;
  }
  .hero .lede strong { font-weight: 600; }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    margin-top: var(--s7);
  }

  /* Hero-Variante „bold": einspaltiges typografisches Statement, das
     Zeichen als blasses Wasserzeichen im Hintergrund statt als eigene
     Spalte. Vorerst nur auf der DE-Startseite (.hero--bold), EN/TR
     behalten die zweispaltige .hero-Grundform, bis final entschieden ist. */
  .hero--bold .wrap {
    display: block;
    max-width: 840px;
    position: relative;
    z-index: 1;
  }
  .hero--bold .hero-mark {
    position: absolute;
    top: 50%;
    right: -6%;
    transform: translateY(-50%);
    width: 46vw;
    max-width: 620px;
    opacity: 0.06;
    color: var(--indigo);
    pointer-events: none;
    z-index: 0;
  }
  .hero--bold .hero-claim { display: block; margin-top: 0; margin-bottom: var(--s5); }
  .hero--bold h1 {
    font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    max-width: 17ch;
  }
  .hero--bold .lede { margin-top: var(--s6); }
  @media (max-width: 860px) {
    .hero--bold .hero-mark { display: none; }
  }

  /* Sections */
  section { padding-block: var(--s10); }
  section.on-elfenbein { background: var(--elfenbein); }
  .section-head {
    max-width: 62ch;
    margin-bottom: var(--s8);
  }
  .section-head h2 { font-size: 1.75rem; color: var(--indigo); }
  .section-head .lede { margin-top: var(--s4); max-width: 60ch; }

  /* Angebot */
  .angebot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .card {
    background: var(--weiss);
    border: 1px solid var(--hairline);
    padding: var(--s6) var(--s6) var(--s7);
    display: flex;
    flex-direction: column;
  }
  .card h3 { font-family: var(--font-text); font-size: 1.25rem; font-weight: 600; color: var(--indigo); }
  .card .kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--krapprot); margin-bottom: var(--s3); }
  .card p { margin-top: var(--s4); color: var(--indigo); }
  .card .triggers { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hairline); }
  .card .triggers .lead { font-size: 0.9375rem; font-weight: 600; margin-bottom: var(--s4); display: block; }
  .card .triggers li { font-size: 0.9375rem; }

  /* Rechtsgebiete */
  .leistungen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8) var(--s7);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .leistung .num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--krapprot);
    margin-bottom: var(--s3);
    font-variant-numeric: tabular-nums;
  }
  .leistung h3 { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; color: var(--indigo); }
  .leistung p { margin-top: var(--s3); color: var(--indigo); }
  .leistung .bullet-list { margin-top: var(--s5); font-size: 0.9375rem; }
  .leistung--breit { grid-column: 1 / -1; }
  .leistung--breit .bullet-list { columns: 2; column-gap: var(--s7); }
  .leistung--breit .bullet-list li { break-inside: avoid; }

  .gebiete-weitere {
    margin-top: var(--s9);
    padding-top: var(--s6);
    border-top: 1px solid var(--hairline);
  }
  .weitere-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--indigo);
    opacity: 0.65;
    margin-bottom: var(--s4);
  }
  .gebiete-chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip {
    padding: 8px 18px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--indigo);
    background: var(--weiss);
  }

  /* Privatpersonen */
  #privatpersonen { border-top: 1px solid var(--hairline); }
  .privatpersonen-list { max-width: 62ch; }

  /* Belege */
  .belege-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s6);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding-block: var(--s7);
  }
  .beleg { min-width: 0; }
  .beleg dt {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-variant-numeric: tabular-nums;
    font-kerning: none;
    color: var(--indigo);
    overflow-wrap: anywhere;
  }
  .beleg dd {
    margin: var(--s2) 0 0;
    font-size: 0.875rem;
    color: var(--indigo);
    max-width: 22ch;
  }
  /* Profil */
  .profil-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: var(--s8);
    align-items: center;
  }
  .profil-mark-panel {
    background: var(--elfenbein);
    border: 1px solid var(--hairline);
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s7);
  }
  .profil-mark-panel svg { width: 60%; height: auto; }
  .profil-text h2 { font-size: 1.75rem; color: var(--indigo); }
  .profil-text .rolle { margin-top: var(--s2); font-size: 0.9375rem; color: var(--krapprot); font-weight: 600; }
  .profil-text p.bio { margin-top: var(--s5); max-width: 56ch; }
  .profil-text .memberships { margin-top: var(--s5); font-size: 0.8125rem; color: var(--indigo); opacity: 0.65; }
  .profil-text .btn { margin-top: var(--s6); }

  /* Kontakt */
  .kontakt-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
    align-items: start;
  }
  .kontakt-list { list-style: none; margin: var(--s7) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s5); }
  .kontakt-list li { display: flex; align-items: flex-start; gap: var(--s4); }
  .kontakt-list .icon { color: var(--krapprot); margin-top: 2px; }
  .kontakt-list a, .kontakt-list span.text { color: var(--indigo); font-size: 1rem; }
  .kontakt-list a:hover { color: var(--krapprot); }
  .kontakt-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

  /* Footer */
  footer {
    background: var(--indigo);
    color: var(--staubblau);
    padding-block: var(--s8) var(--s6);
  }
  footer .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s7);
  }
  .footer-brand { display: flex; align-items: center; gap: var(--s3); }
  .footer-brand svg { width: 26px; height: auto; }
  .footer-brand .wordmark { font-family: var(--font-display); font-size: 1.0625rem; color: var(--elfenbein); }
  .footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s6); margin: 0; padding: 0; }
  .footer-nav a { color: var(--staubblau-hell); font-size: 0.875rem; }
  .footer-nav a:hover { color: var(--elfenbein); }
  .footer-meta {
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--hairline-auf-indigo);
    font-size: 0.8125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s4);
    width: 100%;
  }

  /* Reveal-on-scroll */
  .reveal { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(14px) scale(0.98);
      transition: opacity 420ms ease-out, transform 420ms ease-out;
    }
    .reveal.is-visible { opacity: 1; transform: none; }
  }

  /* Responsive */
  @media (max-width: 860px) {
    /* Unterhalb 860px weicht die volle .main-nav (Linkliste + Header-CTA,
       sprengte zuvor die 390px-Breite um 52px) einem Umschalt-Knopf mit
       Klapp-Panel, siehe .nav-toggle/.mobile-nav-panel. Die CTAs in Hero
       und Kontakt bleiben ohnehin erreichbar. */
    .main-nav { display: none; }
    .nav-toggle { display: flex; }
    .hero .wrap { grid-template-columns: 1fr; }
    /* Das Zeichen steht bereits im Header-Logo; auf Schmalbildschirmen
       direkt darunter wiederholt, wirkte es redundant statt markant. */
    .hero-mark { display: none; }
    .angebot-grid, .leistungen-grid, .profil-layout, .kontakt-layout { grid-template-columns: 1fr; }
    .leistung--breit .bullet-list { columns: 1; }
    .belege-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); }
    .profil-mark-panel { aspect-ratio: 16 / 9; order: -1; }
    section { padding-block: var(--s8); }
  }
  @media (max-width: 480px) {
    .belege-row { grid-template-columns: 1fr 1fr; }
    .beleg dt { font-size: 1.75rem; }
    .card { padding: var(--s5); }
  }

  /* Icon-Bibliothek (unsichtbar, per <use> referenziert) */
  .sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* ============================================================
     Platzhalterseite — „Coming soon"
     Eigenständige, minimale Ergänzung für die Testseite vor dem
     Launch. Nutzt ausschließlich bestehende Marken-Tokens.
     ============================================================ */
  .placeholder-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background: var(--elfenbein);
  }
  .placeholder-page .wrap {
    max-width: 560px;
    padding-block: var(--s10);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .placeholder-mark {
    width: 72px;
    height: auto;
    margin-bottom: var(--s6);
  }
  .placeholder-mark .mark-m { stroke: var(--indigo); }
  .placeholder-mark .mark-y { stroke: var(--krapprot); }
  .placeholder-page .eyebrow { display: block; margin-bottom: var(--s4); }
  .placeholder-page h1 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    line-height: 1.15;
    color: var(--indigo);
    margin-bottom: var(--s5);
  }
  .placeholder-page .lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--indigo);
    margin-bottom: var(--s8);
  }
  .placeholder-page .kontakt-list {
    align-items: center;
    margin-top: var(--s3) !important;
    margin-bottom: var(--s8);
  }
  .placeholder-page .kontakt-list li { align-items: center; }
  .placeholder-footer {
    padding: var(--s6) 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--indigo);
    opacity: 0.65;
  }
  .placeholder-footer a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
  .placeholder-footer .sep { opacity: 0.4; margin: 0 var(--s2); }