/* ============================================================
   Risk & Budget — "Karlsfeld Editorial"
   A Bavarian family broker as a modern trade journal.
   Paper, navy, brick. Fraunces + Inter.
   ============================================================ */

/* ---------- Fonts: Fraunces variable (display) + Inter (body) ---------- */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/fraunces-normal.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/fraunces-italic.woff2') format('woff2-variations');
}
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/inter-800.woff2') format('woff2'); }

/* ---------- Design tokens ---------- */
:root {
    /* Paper & Ink — very light cool paper (blue-leaning) */
    --paper:        #dde4ec;
    --paper-2:      #cfd6e0;
    --paper-3:      #b5bdc9;
    --ink:          #131a2b;
    --ink-soft:     #22293c;

    /* Text — all tested for ≥4.5:1 contrast against --paper (#ece9dc) */
    --stone:        #574f42;   /* ≈7.5:1 — body copy */
    --stone-light:  #73695a;   /* ≈4.8:1 — captions, masthead */
    --stone-lighter:#998f7e;   /* 3:1 — large text only */

    /* Brand — heraldic navy, echoing the blue in the R&B mark */
    --navy:         #23345c;
    --navy-dark:    #152140;
    --navy-light:   #4a5e8c;

    /* Accent — muted brick, echoing the red in the R&B mark */
    --brick:        #a8402a;
    --brick-warm:   #c05a3b;
    --brick-dark:   #7a2a18;

    /* Structure — cool rules to match the blue paper */
    --line:         #b9c2ce;
    --line-soft:    #ccd3dc;
    --line-strong:  #6f7a89;

    /* Measures */
    --measure:      64ch;
    --gutter:       clamp(1.25rem, 3.5vw, 2.5rem);
    --nav-h:        72px;

    /* Display type variation settings */
    --fx-display-soft: "opsz" 72, "wght" 440;
    --fx-display-tight: "opsz" 144, "wght" 500;
    --fx-display-heavy: "opsz" 96, "wght" 700;
    --fx-text-serif: "opsz" 24, "wght" 500;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Accessibility utilities ---------- */
/* Visually hidden, screen-reader-accessible — skip-link & external-link cues */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — invisible until focused via Tab */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1.1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--paper);
    transform: translateY(-120%);
    transition: transform 200ms ease;
}
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--brick);
    outline-offset: 2px;
}

/* Global focus-visible — keyboard users get a clear ring, mouse users do not */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--brick);
    outline-offset: 3px;
    border-radius: 2px;
}
/* iframes and images shouldn’t get a visible focus ring unless they have tabindex */
iframe:focus-visible, img:focus-visible { outline-offset: 0; }

/* External links carry a small glyph so the "opens off-site" is not color-only.
   Suppressed on buttons, nav links, and anything inside the footer columns
   where the category heading already signals "external". */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.8em;
    color: var(--brick);
    margin-left: 0.1em;
    letter-spacing: 0;
}
.btn-solid[target="_blank"]::after,
.btn-nav[target="_blank"]::after,
.nav-links a[target="_blank"]::after,
.footer-col a[target="_blank"]::after { content: none; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    -webkit-text-size-adjust: 100%;
    /* iOS Safari ignores body overflow-x alone; clip keeps scroll-smooth working (hidden = fallback). */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";   /* Inter’s single-storey a, flat-top 3 etc. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* Paper grain + colour wash behind everything */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(177,123,46,0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(35,52,92,0.10), transparent 60%),
        var(--paper);
    pointer-events: none;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    opacity: 0.35;
    mix-blend-mode: multiply;
    pointer-events: none;
}

::selection { background: var(--brick); color: var(--paper); }

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Typography primitives ---------- */
.display {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-variation-settings: var(--fx-display-soft);
    font-weight: 440;
    letter-spacing: -0.022em;
    line-height: 0.98;
    text-wrap: balance;
    font-feature-settings: "ss01";
}
.display em, .serif em { font-style: italic; font-variation-settings: "opsz" 72, "wght" 400; }

.serif {
    font-family: 'Fraunces', ui-serif, Georgia, serif;
    font-variation-settings: var(--fx-text-serif);
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Section label — small-caps tracking-wide (the "— KAPITEL I." style) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--navy);
}
.eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: var(--navy);
}
.eyebrow .ord {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: 1.15rem;
    color: var(--brick-dark);
    margin-right: 0.25em;
}

.hair {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* ---------- Scroll progress (brick thread, sitting beneath the navbar) ---------- */
.progress-thread {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 1001;
    pointer-events: none;
}
.progress-thread::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--brick-dark), var(--brick));
    transition: width 80ms linear;
}

/* ---------- Navbar ---------- */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
}
/* No border-bottom on scroll — the progress-thread (2px brick line right
   beneath the navbar) is the only visual edge, avoiding double-rules. */

.nav-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    text-decoration: none;
}
.logo-img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.logo-text {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 24, "wght" 500;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}
.nav-links a {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0.5rem 0;
    white-space: nowrap;          /* don't break "Warum wir" at the space */
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0.15rem;
    height: 1px;
    background: var(--brick);
    transition: right 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-links a:hover::after { right: 0; }

.nav-links .btn-nav {
    padding: 0.55rem 1rem 0.6rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    letter-spacing: 0.14em;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.nav-links .btn-nav::after { display: none; }
.nav-links .btn-nav:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.nav-toggle {
    display: none;
    width: 36px;
    height: 28px;
    position: relative;
}
.nav-toggle span {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 250ms ease, opacity 200ms ease;
}
.nav-toggle span:nth-child(1) { top: 6px; }
.nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle span:nth-child(3) { bottom: 6px; }

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow {
    max-width: 920px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ============================================================
   HERO  — editorial cover
   ============================================================ */
.hero {
    position: relative;
    padding: calc(var(--nav-h) + 5rem) 0 3.5rem;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
}

.hero-frame {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    align-content: space-between;  /* title rises toward the navbar, CTAs stay at the bottom */
}

/* Masthead: a quiet two-column flag — issue left, location right */
.masthead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stone-light);
}
.masthead > :last-child { text-align: right; }

/* Headline block */
.hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}
.hero-kicker {
    grid-column: 1 / -1;       /* full row above the headline */
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 18, "wght" 440;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--navy);
    margin: 0 0 0.4rem;
}

.hero-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 144, "wght" 480;
    font-weight: 480;
    letter-spacing: -0.035em;
    line-height: 0.88;
    font-size: clamp(3.6rem, 12vw, 11rem);
    text-wrap: balance;
    color: var(--ink);
}
.hero-title .amp {
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 400;
    color: var(--brick);
    font-feature-settings: "ss01";
    padding: 0 0.03em;
}
.hero-title .ort {
    display: block;
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 380;
    color: var(--navy);
    font-size: 0.6em;
    margin-top: 0.35em;
    line-height: 1;
}
.hero-title .ort::before {
    content: "— ";
    color: var(--stone-light);
    font-style: normal;
}

/* Deck/stand-first paragraph */
.hero-deck {
    max-width: 38ch;
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 24, "wght" 420;
    font-size: 1.18rem;
    line-height: 1.45;
    color: var(--ink-soft);
    padding-bottom: 0.4rem;
}
.hero-deck strong {
    font-weight: 600;
    color: var(--navy-dark);
    font-variation-settings: "opsz" 24, "wght" 620;
}

/* Bottom row: CTAs on the left, metadata/badges right */
.hero-base {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    gap: 1.5rem;
    align-items: end;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.75rem;
    align-items: baseline;
}
.cta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 36, "wght" 520;
    font-size: 1.2rem;
    color: var(--ink);
    position: relative;
    padding-bottom: 0.25rem;
    transition: color 200ms ease, letter-spacing 400ms ease;
}
.cta::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--ink);
    transform-origin: left center;
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms ease;
}
.cta .arrow {
    display: inline-block;
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    font-style: normal;
    color: var(--brick);
}
.cta:hover { color: var(--navy-dark); }
.cta:hover::after { background: var(--brick); transform: scaleX(1.04); }
.cta:hover .arrow { transform: translateX(0.5rem); }
.cta.primary {
    font-weight: 600;
    font-variation-settings: "opsz" 36, "wght" 600;
}

.hero-meta {
    text-align: right;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stone);
    line-height: 2;
}
.hero-meta strong {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 12, "wght" 500;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brick-dark);
    margin-right: 0.35em;
}
.hero-meta .meta-link {
    color: var(--ink-soft);
    border-bottom: 1px solid currentColor;
    transition: color 200ms ease, border-color 200ms ease;
}
.hero-meta .meta-link:hover {
    color: var(--brick-dark);
    border-color: var(--brick);
}

/* Watermark RB glyph behind the hero */
.hero-watermark {
    position: absolute;
    right: -2vw;
    bottom: -4vw;
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 144, "wght" 300;
    font-style: italic;
    font-size: clamp(20rem, 55vw, 44rem);
    line-height: 0.8;
    color: var(--navy);
    opacity: 0.055;
    pointer-events: none;
    user-select: none;
    z-index: -1;
}

/* Entrance animation */
@keyframes fade-rise {
    from { opacity: 0; transform: translateY(1.5rem); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-frame > * { opacity: 0; animation: fade-rise 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hero-frame > :nth-child(1) { animation-delay: 50ms; }
.hero-frame > :nth-child(2) { animation-delay: 200ms; }
.hero-frame > :nth-child(3) { animation-delay: 350ms; }
.hero-frame > :nth-child(4) { animation-delay: 500ms; }

/* ============================================================
   TICKER — slow marquee below the hero
   ============================================================ */
.ticker {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: var(--paper-2);
    padding: 0.9rem 0;
}
.ticker-track {
    display: flex;
    width: max-content;
    gap: 3.5rem;
    white-space: nowrap;
    animation: ticker 60s linear infinite;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 18, "wght" 450;
    font-size: 1.05rem;
    color: var(--navy-dark);
}
.ticker-track span { display: inline-flex; align-items: center; gap: 1.5rem; }
.ticker-track span::after {
    content: "✦";
    color: var(--brick);
    font-style: normal;
    font-size: 0.75rem;
}
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .hero-frame > * { opacity: 1; animation: none; }
}

/* ============================================================
   SECTION scaffolding
   ============================================================ */
section.chapter {
    padding: clamp(5rem, 9vw, 9rem) 0;
    position: relative;
}
section.chapter + section.chapter { border-top: 1px solid var(--line); }
.chapter.alt { background: color-mix(in srgb, var(--paper-2) 70%, var(--paper) 30%); }

.chapter-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 1320px;
    margin: 0 auto clamp(3rem, 5vw, 5rem);
    padding-inline: var(--gutter);
}
.chapter-head .display {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    max-width: 18ch;
    color: var(--ink);
}
.chapter-head .lede {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 24, "wght" 420;
    font-size: 1.22rem;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 52ch;
}

/* ============================================================
   LEISTUNGEN — numbered editorial rows (not cards)
   ============================================================ */
.services-list {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    border-top: 1px solid var(--line);
}
.service-row {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 2.4fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    position: relative;
}

.service-row .roman {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 96, "wght" 380;
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    line-height: 1;
    color: var(--brick);
    letter-spacing: -0.02em;
    padding-top: 0.15rem;
}
.service-row .name {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 48, "wght" 540;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--ink);
}
.service-row .tagline {
    display: block;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    margin-top: 0.8rem;
    font-weight: 500;
}
.service-row .items {
    columns: 3;
    column-gap: 2.25rem;
    list-style: none;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--stone);
}
.service-row .items li {
    break-inside: avoid;
    padding-left: 1.1rem;
    position: relative;
    margin-bottom: 0.35rem;
}
.service-row .items li::before {
    content: "·";
    position: absolute;
    left: 0;
    top: -0.1em;
    color: var(--brick);
    font-size: 1.4em;
    line-height: 1;
}

/* ============================================================
   WARUM — four reasons in an asymmetric 2-col layout
   ============================================================ */
.reasons {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem clamp(2rem, 4vw, 4rem);
    row-gap: clamp(3rem, 5vw, 5rem);
}
.reason {
    grid-column: span 6;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    position: relative;
    max-width: 44ch;
}
.reason::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 2.75rem;
    height: 2px;
    background: var(--brick);
}
.reason h3 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 48, "wght" 540;
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.015em;
}
.reason p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--stone);
}
.reason:nth-child(even) { transform: translateY(2rem); }
@media (max-width: 860px) {
    .reason {
        grid-column: span 12;
        max-width: none;     /* fill the column at single-col layouts */
    }
    .reason:nth-child(even) { transform: none; }
}

/* ============================================================
   TEAM — editorial portraits with subtle rotation
   ============================================================ */
.team-spread {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
}
.portrait {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.portrait .photo-frame {
    position: relative;
    padding: 0.75rem 0.75rem 2.25rem;
    margin-bottom: 1rem;             /* extra breathing room before the name */
    background: var(--paper);
    box-shadow:
        0 1px 0 var(--line),
        0 18px 32px -20px rgba(26, 20, 16, 0.18),
        0 2px 6px -2px rgba(26, 20, 16, 0.10);
    rotate: var(--tilt, -0.8deg);
    transition: rotate 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 400ms ease,
                translate 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.portrait:nth-child(2) { --tilt: 0.9deg; }
.portrait:nth-child(3) { --tilt: -0.4deg; }
.portrait:hover .photo-frame {
    rotate: 0deg;
    translate: 0 -4px;
    box-shadow:
        0 1px 0 var(--line),
        0 28px 48px -22px rgba(26, 20, 16, 0.32),
        0 4px 10px -3px rgba(26, 20, 16, 0.14);
}
.portrait .photo-frame::after {
    content: attr(data-caption);
    position: absolute;
    left: 0; right: 0;
    bottom: 0.55rem;
    text-align: center;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 12, "wght" 400;
    font-size: 0.8rem;
    color: var(--stone);
    letter-spacing: 0.02em;
}
.team-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    filter: saturate(0.85) contrast(1.02);
}

.portrait h3 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 36, "wght" 540;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.portrait .role {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 500;
}
.portrait .bio {
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--stone);
}
.portrait .contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}
.portrait .contact a {
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.2rem 0;
    /* Prefer the <wbr> hint after "@"; only break inside the local-part
       as a last-resort fallback */
    overflow-wrap: break-word;
    min-width: 0;
    transition: color 180ms ease;
}
.portrait .contact a:hover { color: var(--brick-dark); }
.portrait .contact svg {
    width: 14px;
    height: 14px;
    color: var(--navy);
    flex-shrink: 0;
}

/* ============================================================
   SCHADENFALL — four steps as a horizontal procession
   ============================================================ */
.claims-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    counter-reset: step;
}
.step {
    padding: 1.5rem 1.25rem 0 0;
    border-top: 2px solid var(--ink);
    position: relative;
    counter-increment: step;
}
.step::before {
    content: counter(step, upper-roman) ".";
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 480;
    font-size: 1.2rem;
    color: var(--brick);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}
.step h4 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 30, "wght" 560;
    font-size: 1.08rem;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 0.5rem;
    letter-spacing: -0.008em;
}
.step p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--stone);
}

.tips {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    position: relative;
}
.tips::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}
.tips h3 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 36, "wght" 560;
    font-size: 1.35rem;
    color: var(--navy-dark);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
}
.tips-list li {
    padding-left: 1.3rem;
    position: relative;
}
.tips-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brick);
    font-family: 'Fraunces', serif;
    font-style: italic;
}
.tips-list strong {
    font-weight: 600;
    color: var(--ink);
}

.btn-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.3rem;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background 200ms ease, letter-spacing 300ms ease;
}
.btn-solid:hover { background: var(--navy-dark); letter-spacing: 0.16em; }
.btn-solid .arrow { color: var(--brick-warm); }

/* ============================================================
   KONTAKT — colophon-style
   ============================================================ */
.kontakt-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
}

.kontakt-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.kontakt-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
.kontakt-cta {
    align-self: flex-start;
}
.kontakt-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    align-items: baseline;
}
.kontakt-row:first-child { padding-top: 0; border-top: 0; }
.kontakt-row dt {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 500;
}
.kontakt-row dd {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 24, "wght" 440;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ink);
}
.kontakt-row dd a {
    border-bottom: 1px solid var(--line);
    transition: border-color 180ms ease, color 180ms ease;
}
.kontakt-row dd a:hover { border-color: var(--brick); color: var(--brick-dark); }

.kontakt-map {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: 0 1px 0 var(--line);
    border: 1px solid var(--line);
    padding: 0.5rem;
    margin: 0;
}
.kontakt-map-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}
.kontakt-map-link::after { content: none; }   /* suppress global ↗ on the wrapper */
.kontakt-map-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.85) contrast(1.02);
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kontakt-map-link:hover img,
.kontakt-map-link:focus-visible img { transform: scale(1.03); }

/* Hover overlay — heads-up before opening the leave-confirmation modal */
.kontakt-map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
}
.kontakt-map-link:hover .kontakt-map-overlay,
.kontakt-map-link:focus-visible .kontakt-map-overlay { opacity: 1; }
.kontakt-map-cta {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper);
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--paper);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: background 200ms ease, letter-spacing 300ms ease;
}
.kontakt-map-cta .arrow {
    color: var(--brick-warm);
    transition: transform 300ms ease;
}
.kontakt-map-link:hover .kontakt-map-cta {
    background: rgba(255, 255, 255, 0.16);
    letter-spacing: 0.22em;
}
.kontakt-map-link:hover .kontakt-map-cta .arrow { transform: translateX(4px); }

/* OSM attribution — required by ODbL, always visible */
.kontakt-map-attribution {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    padding: 0.25rem 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--stone);
    line-height: 1.4;
}
.kontakt-map-attribution a {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color 180ms, border-color 180ms;
}
.kontakt-map-attribution a:hover {
    color: var(--brick-dark);
    border-color: var(--brick);
}
.kontakt-map-attribution a[target="_blank"]::after { content: none; }

.kontakt-map::after {
    content: "KARLSFELD · SCHWARZHÖLZLSTR. 20A";
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.4rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    font-weight: 500;
    color: var(--ink);
    z-index: 2;
    pointer-events: none;
    transition: opacity 220ms ease;
}
/* Hide the address pill on hover/focus so it doesn't sit on top of the
   "→ In Google Maps öffnen" prompt */
.kontakt-map:has(.kontakt-map-link:hover)::after,
.kontakt-map:has(.kontakt-map-link:focus-visible)::after { opacity: 0; }

/* Touch / no-hover devices: persistent CTA so tap-to-leave is obvious */
@media (hover: none) {
    .kontakt-map::after { display: none; }
    .kontakt-map-overlay {
        opacity: 1;
        background: linear-gradient(to bottom, transparent 55%, rgba(19, 26, 43, 0.6));
        justify-content: flex-end;
        gap: 0;
        padding-bottom: 1rem;
    }
    .kontakt-map-prompt { display: none; }
    .kontakt-map-cta {
        font-size: 0.65rem;
        padding: 0.45rem 0.85rem;
        background: rgba(255, 255, 255, 0.14);
    }
}

/* ============================================================
   FOOTER — deep navy, cream type, brick accents
   ============================================================ */
.footer {
    margin-top: clamp(4rem, 7vw, 8rem);
    background: var(--navy-dark);
    color: color-mix(in srgb, var(--paper) 78%, var(--navy));
    padding: clamp(3.5rem, 5vw, 5rem) 0 1.5rem;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/></svg>");
    opacity: 0.25;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }

.footer-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
}
.footer-brand { max-width: 36ch; }
.footer-logo {
    display: block;
    width: 120px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    /* No filter — natural red + blue on navy-dark (same treatment as navbar) */
}
.footer-brand .footer-wordmark {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 72, "wght" 500;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--paper);
    letter-spacing: -0.02em;
}
.footer-brand .footer-wordmark em {
    font-style: italic;
    font-variation-settings: "opsz" 72, "wght" 380;
    color: var(--brick-warm);
}
.footer-brand .footer-tagline {
    margin-top: 1rem;
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 18, "wght" 400;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--paper) 70%, var(--navy));
}
.footer-brand .footer-address {
    margin-top: 1.1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--paper) 78%, var(--navy));
}
.footer-brand .footer-address strong {
    font-weight: 500;
    color: var(--paper);
}

/* VEMA Mitglied badge — pure-white inset so the logo's blue/yellow
   don't compete with the paper's blue tint */
.vema-badge {
    display: block;
    margin-top: 1.5rem;
    width: 180px;
    max-width: 100%;
    height: auto;
    padding: 0.65rem 0.85rem;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 2px 8px -2px rgba(0,0,0,0.35);
}

.footer-col h4 {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--brick-warm);
    margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--paper) 82%, var(--navy));
    position: relative;
    display: inline-block;
    transition: color 180ms ease, padding-left 200ms ease;
}
.footer-col a:hover {
    color: var(--paper);
    padding-left: 0.5rem;
}
.footer-col a:hover::before {
    content: "→";
    position: absolute;
    left: -0.6rem;
    color: var(--brick-warm);
}

.footer-bottom {
    max-width: 1320px;
    margin: clamp(2.5rem, 4vw, 4rem) auto 0;
    padding: 1.25rem var(--gutter) 0;
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 55%, var(--navy));
}

/* ============================================================
   LEAVE-MODAL — confirmation dialog before navigating off-site
   ============================================================ */
.leave-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}
.leave-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.leave-modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    backdrop-filter: blur(4px) saturate(0.9);
    -webkit-backdrop-filter: blur(4px) saturate(0.9);
}
.leave-modal-card {
    position: relative;
    max-width: 460px;
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    box-shadow: 0 30px 60px -20px rgba(19, 26, 43, 0.4);
    transform: translateY(8px) scale(0.985);
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.leave-modal-card::before {
    content: "";
    position: absolute;
    inset: 0.45rem;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}
.leave-modal.open .leave-modal-card { transform: translateY(0) scale(1); }

.leave-modal-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brick-dark);
    margin-bottom: 0.85rem;
}
.leave-modal-title {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 48, "wght" 460;
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin-bottom: 0.85rem;
}
.leave-modal-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--stone);
    margin-bottom: 1.75rem;
}
.leave-modal-count {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 540;
    font-size: 1.35em;
    color: var(--brick-dark);
    margin: 0 0.05em;
    display: inline-block;
    min-width: 1.4ch;
    text-align: center;
}
.leave-modal-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.leave-modal-cancel {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 0.85rem 1.25rem;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}
.leave-modal-cancel:hover {
    background: var(--paper-2);
    border-color: var(--ink);
}
.leave-modal-go {
    cursor: pointer;
    border: 0;
}
.leave-modal-go .arrow { color: var(--brick-warm); }

@media (prefers-reduced-motion: reduce) {
    .leave-modal,
    .leave-modal-card { transition: none; }
}

/* ============================================================
   LEGAL pages — keep readable, keep the editorial voice
   ============================================================ */
.legal-page {
    padding: calc(var(--nav-h) + 5rem) 0 clamp(4rem, 7vw, 7rem);
    min-height: 70vh;
    background: var(--paper);
}
.legal-page .container {
    max-width: 780px;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* VEMA-injected content styling (applies to all descendants) */
.legal-page h1 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 96, "wght" 460;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.legal-page h2 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 36, "wght" 560;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--navy-dark);
    margin: 3rem 0 1rem;
    letter-spacing: -0.012em;
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.legal-page h2::before {
    content: "§ ";
    color: var(--brick);
    font-style: italic;
    font-variation-settings: "opsz" 36, "wght" 400;
}
.legal-page h3 {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 24, "wght" 560;
    font-size: 1.25rem;
    color: var(--navy-dark);
    margin: 2rem 0 0.75rem;
}
.legal-page h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
    margin: 1.75rem 0 0.65rem;
}
.legal-page p { margin: 0 0 1.25rem; }
.legal-page b, .legal-page strong {
    font-weight: 600;
    color: var(--ink);
}
.legal-page ul, .legal-page ol {
    margin: 0 0 1.25rem;
    padding-left: 1.75rem;
    list-style-position: outside;
}
.legal-page ul { list-style: disc; }
.legal-page ol { list-style: decimal; }
.legal-page li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}
.legal-page li::marker { color: var(--brick); }
.legal-page a {
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    transition: color 180ms ease, border-color 180ms ease;
}
.legal-page a:hover { color: var(--brick-dark); border-color: var(--brick); }
.legal-page table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    font-size: 0.94rem;
}
.legal-page th, .legal-page td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}
.legal-page th {
    background: var(--paper-2);
    font-weight: 600;
    color: var(--navy-dark);
}
.legal-page small { font-size: 0.82rem; color: var(--stone); }
.legal-page hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.legal-page .vema_content_loading {
    display: inline-block;
    padding: 1rem 0;
    color: var(--stone);
    font-family: 'Fraunces', serif;
    font-style: italic;
}
.legal-page .vemascript noscript p {
    padding: 1.25rem 1.5rem;
    background: var(--paper-2);
    border-left: 2px solid var(--brick);
    font-style: italic;
}

/* Drop-cap on the VEMA-injected first paragraph — only if it doesn't
   start with <b> (which many VEMA blocks do, using it as a label) */
.legal-page [class^="vema_"] > p:first-of-type:not(:has(> b:first-child))::first-letter {
    font-family: 'Fraunces', serif;
    font-variation-settings: "opsz" 96, "wght" 460;
    font-size: 4.2rem;
    float: left;
    line-height: 0.85;
    margin: 0.1em 0.25em 0 -0.05em;
    color: var(--brick);
}

/* ============================================================
   RESPONSIVE — five breakpoints:
   1100 (tablet landscape), 860 (tablet portrait), 720 (mobile),
   520 (narrow mobile), 380 (tiny)
   ============================================================ */

/* Tablet-landscape: collapse hero into one column, services to 2-col items */
@media (max-width: 1100px) {
    .hero-head { grid-template-columns: 1fr; }
    .hero-deck { max-width: 52ch; }
    .services-list .service-row {
        grid-template-columns: 3rem 1fr;
    }
    .service-row .items { grid-column: 1 / -1; columns: 2; }
    .kontakt-grid { grid-template-columns: 1fr; }
    .claims-wrap { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: span 2; }
}

/* Tablet-portrait: team stacks (3 portraits don't balance at 2-col), hero
   meta and CTAs get more breathing room */
@media (max-width: 860px) {
    .team-spread { grid-template-columns: 1fr; gap: 3.5rem; }
    .hero-base { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-meta { text-align: left; line-height: 1.9; }
}

/* Tablet stack: two-column spread per portrait — polaroid left, copy right */
@media (max-width: 860px) and (min-width: 521px) {
    .portrait {
        display: grid;
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        column-gap: 2.25rem;
        row-gap: 1rem;
        align-items: start;
    }
    .portrait .photo-frame {
        grid-row: 1 / span 3;
        margin-bottom: 0;
        align-self: start;
    }
    .portrait > div:not(.photo-frame),
    .portrait > p,
    .portrait > .contact { grid-column: 2; }
}

/* Phone: single column, contact divider becomes redundant, italic separator */
@media (max-width: 520px) {
    .portrait .photo-frame { max-width: 260px; margin-inline: auto; }
    .portrait .contact { border-top: 0; padding-top: 0.25rem; }
    .portrait + .portrait::before {
        content: "*  *  *";
        display: block;
        text-align: center;
        font-family: 'Fraunces', serif;
        font-style: italic;
        font-variation-settings: "opsz" 12, "wght" 400;
        font-size: 1.05rem;
        letter-spacing: 0.1em;
        color: var(--stone);
        opacity: 0.75;
        margin-bottom: 2rem;
    }
}

/* Compact navbar (721–880): wordmark stays but shrinks; nav tightens */
@media (max-width: 880px) and (min-width: 721px) {
    .nav-logo { gap: 0.5rem; }
    .logo-img { width: 32px; height: 32px; }
    .logo-text { font-size: 1.05rem; }
    .nav-container { gap: 1rem; }
    .nav-links { gap: 1.1rem; }
    .nav-links a { font-size: 0.7rem; letter-spacing: 0.06em; }
    .nav-links .btn-nav {
        padding: 0.45rem 0.7rem;
        letter-spacing: 0.08em;
    }
}

/* Mobile: hamburger nav, hero title smaller, service items single column */
@media (max-width: 720px) {
    :root { --nav-h: 64px; }
    .nav-links {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        background: var(--paper);
        padding: 1rem 0;
        box-shadow: 0 8px 16px -10px rgba(19, 26, 43, 0.18);
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        /* visibility delayed until transform finishes, so the closed menu
           stops painting entirely (no border-bleed through the navbar) */
        transition: transform 300ms ease, opacity 220ms ease, visibility 0s 300ms;
    }
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 300ms ease, opacity 220ms ease, visibility 0s 0s;
    }
    .nav-links li { padding: 0 var(--gutter); }
    .nav-links a { padding: 0.9rem 0; }
    .nav-links a::after { display: none; }
    .nav-links .btn-nav { margin: 0.5rem var(--gutter); text-align: center; }
    .nav-toggle { display: block; }

    .masthead { font-size: 0.62rem; gap: 0.75rem; }

    .hero { padding-top: calc(var(--nav-h) + 2.5rem); min-height: auto; }
    .hero-title { font-size: clamp(2.4rem, 13vw, 5.5rem); }

    .service-row { padding: 1.75rem 0; gap: 1rem 1.5rem; }
    .service-row .items { columns: 1; }
    .steps { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Narrow mobile: single-column steps, stacked kontakt rows */
@media (max-width: 520px) {
    .hero-title { font-size: clamp(2rem, 11vw, 4.2rem); }
    .steps { grid-template-columns: 1fr; }
    .kontakt-row { grid-template-columns: 1fr; gap: 0.35rem; }
    .reasons { row-gap: 2.5rem; }
    .reason:nth-child(even) { transform: none; }
    .service-row .roman { font-size: 1.85rem; }
}

/* Tiny viewports (older phones, ~360px): tighten gutter */
@media (max-width: 380px) {
    :root { --gutter: 1rem; }
    .hero-title { letter-spacing: -0.02em; }
    .ticker-track { gap: 2.5rem; font-size: 0.95rem; }
}

/* Hamburger-to-X animation when active */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Reveal-on-scroll — tiny rise, letterspacing tighten */
@keyframes reveal {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

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