:root {
        color-scheme: light;
        --green: #9bc449;
        --ink: #343433;
        --muted: #74756f;
        --line: #e7e9e3;
        --bg: #ffffff;
        --measure: 1150px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 300;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-underline-offset: .22em; }
    a:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
    img { max-width: 100%; }
    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0;
        margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
        white-space: nowrap; border: 0;
    }
    .shell { width: min(var(--measure), calc(100% - 72px)); margin-inline: auto; }
    .masthead { position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
    .masthead__inner {
        height: 70px; display: flex; justify-content: space-between;
        align-items: center; gap: 24px;
    }
    .masthead__name {
        font-size: 12px; font-weight: 500; letter-spacing: .22em;
        text-decoration: none; text-transform: uppercase;
    }
    .masthead__nav { display: flex; align-items: center; gap: 34px; }
    .masthead__nav a {
        color: var(--muted); text-decoration: none;
        font-size: 12px; font-weight: 400; letter-spacing: .035em;
        transition: color .15s ease;
    }
    .masthead__nav a:hover { color: var(--ink); }
    .hero { overflow: hidden; background: #fff; }
    .hero__desktop {
        width: min(100%, 1672px); height: auto; max-height: 920px;
        object-fit: contain; display: block; margin: 0 auto;
    }
    .hero__mobile { display: none; }
    .hero__below { border-top: 1px solid var(--line); }
    .hero__below-inner {
        min-height: 69px; display: flex; justify-content: space-between;
        align-items: center; gap: 20px; padding-block: 16px;
    }
    .hero__claim {
        font-size: 11px; letter-spacing: .19em; text-transform: uppercase;
        font-weight: 400;
    }
    .hero__down {
        font-size: 12px; color: var(--muted); text-decoration: none;
        display: inline-flex; gap: 9px; align-items: center;
    }
    .hero__down::after {
        content: "↓"; font-size: 17px; line-height: 1; color: var(--green);
    }
    .intro { padding: clamp(68px, 9vw, 126px) 0 clamp(58px, 7vw, 94px); }
    .eyebrow {
        display: block; margin-bottom: 19px; font-size: 11px;
        letter-spacing: .21em; font-weight: 500; text-transform: uppercase;
        color: var(--muted);
    }
    h1,h2,h3,p { margin-top: 0; }
    .intro h2 {
        max-width: 810px; margin-bottom: 23px;
        font-size: clamp(35px, 5.6vw, 69px);
        font-weight: 300; letter-spacing: -.043em;
        line-height: 1.1;
    }
    .intro__lead {
        max-width: 670px; margin: 0;
        color: var(--muted); font-size: clamp(16px, 1.6vw, 19px);
        line-height: 1.65;
    }
    .services { border-top: 1px solid var(--line); }
    .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .service {
        padding: 49px 34px 55px 0;
        border-right: 1px solid var(--line);
    }
    .service:not(:first-child) { padding-left: 34px; }
    .service:last-child { border-right: 0; padding-right: 0; }
    .service__index {
        color: var(--green); display: block; margin-bottom: 39px;
        font-size: 12px; font-weight: 500; letter-spacing: .12em;
    }
    .service h3 {
        font-size: clamp(19px, 2vw, 24px);
        font-weight: 400; line-height: 1.28;
        letter-spacing: -.028em; margin-bottom: 16px;
    }
    .service p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
    .about { background: #f7f8f5; border-top: 1px solid var(--line); }
    .about__inner {
        display: grid; grid-template-columns: 1fr 1.12fr;
        gap: 8vw; padding-block: clamp(66px, 8vw, 108px);
        align-items: start;
    }
    .about h2 {
        font-size: clamp(29px, 3.5vw, 44px);
        font-weight: 300; line-height: 1.18;
        letter-spacing: -.035em;
        max-width: 390px; margin-bottom: 0;
    }
    .about__text p { color: #62645e; margin-bottom: 18px; font-size: 16px; }
    .about__text p:last-child { margin-bottom: 0; }
    .footer { border-top: 1px solid var(--line); }
    .footer__inner {
        padding-block: 28px; display: flex; justify-content: space-between;
        gap: 15px; color: var(--muted); font-size: 12px;
    }
    .footer__name { color: var(--ink); font-weight: 500; letter-spacing: .1em; }
    @media (max-width: 900px) {
        .shell { width: min(var(--measure), calc(100% - 48px)); }
        .service { padding-right: 20px; }
        .service:not(:first-child) { padding-left: 20px; }
    }
    @media (max-width: 700px) {
        .shell { width: calc(100% - 40px); }
        .masthead__inner { height: 58px; }
        .masthead__nav { gap: 17px; }
        .masthead__nav a { font-size: 11px; }
        .hero__desktop { display: none; }
        .hero__mobile {
        display: flex; flex-direction: column; align-items: center;
        overflow: hidden; padding-top: 10px; background: #f6f7f8;
        }
        .hero__mobile-brand {
        display: block; width: min(69%, 270px); height: auto;
        margin-inline: auto;
        }
        .hero__mobile-visual {
        display: block; width: min(95%, 480px); height: auto;
        margin: 0 auto -4px; object-fit: contain;
        }
        .hero__below-inner { align-items: flex-start; padding-block: 20px; }
        .hero__claim { max-width: 230px; line-height: 1.7; }
        .intro { padding-block: 78px 64px; }
        .services__grid { grid-template-columns: 1fr; }
        .service, .service:not(:first-child), .service:last-child {
        border-right: 0; border-bottom: 1px solid var(--line);
        padding: 27px 0 30px;
        }
        .service:last-child { border-bottom: 0; }
        .service__index { margin-bottom: 13px; }
        .about__inner { grid-template-columns: 1fr; gap: 35px; }
        .footer__inner { flex-direction: column; gap: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .masthead__nav a { transition: none; }
    }
    

/* v03 – rechtliche Seiten, Modal und Tabs. Alle Schriften sind Systemfonts. */
:root { --veil: rgba(26,31,26,.66); --panel:#fff; }
body { font-weight: 300; }
.site-link { color: inherit; text-decoration-thickness: 1px; }
.masthead__nav a[href="/kontakt/"] { color:var(--ink); }
.masthead__nav a[href="/kontakt/"]::after { content:" ↗"; font-size: 10px; color:var(--green); }
.services .service p { max-width: 345px; }
.footer__inner { align-items: start; font-size: 12px; gap: 28px; flex-wrap:wrap; }
.footer__meta { display:flex; flex-direction: column; gap: 7px; }
.footer__nav { display:flex; gap: 8px 20px; flex-wrap: wrap; justify-content: flex-end; max-width: 560px; }
.footer__nav a { color:var(--muted); text-decoration:none; }
.footer__nav a:hover, .footer__nav a:focus-visible { color:var(--ink); text-decoration:underline; }
.footer__copyright { white-space: nowrap; font-size:11px; color:var(--muted); }
/* Ohne JS sind diese Verweise normale Links auf serverseitige Dokumente. */
.document-main { border-top:1px solid var(--line); min-height:55vh; padding: 85px 0 105px; }
.document-shell { max-width:880px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:11px; align-items:center; font-size:12px; color:var(--muted); margin-bottom:53px; }
.breadcrumb a { text-decoration:none; }
.breadcrumb span::before { content:' / '; margin-right: 11px; color:#c4c7bf; }
.document__kicker { font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--green); font-weight:500; margin-bottom:15px; }
.document__title { font-weight:300; letter-spacing:-.04em; line-height:1.1; font-size:clamp(35px,5vw,62px); margin-bottom:19px; }
.document__intro { color:var(--muted); font-size:clamp(15px,1.9vw,18px); line-height:1.7; max-width: 700px; margin-bottom:39px; }
.document__body { font-size:15px; line-height:1.76; max-width:730px; }
.document__section { padding:22px 0 16px; border-top:1px solid var(--line); }
.document__section h2, .document__section h3 { margin:0 0 12px; font-weight:400; letter-spacing:-.015em; line-height:1.35; font-size:19px; }
.document__section p { margin:0 0 13px; }
.document__section p:last-child { margin-bottom:0; }
.document__section ul { margin:7px 0 14px; padding-left:20px; }
.document__section li { padding-left:4px; margin-bottom:9px; }
.document__section strong { font-weight:500; }
.document__section a { text-decoration-color:#7bb72b; overflow-wrap:anywhere; }
.document__address { font-style:normal; line-height:1.85; }
.document__footnote { font-size:12px; color:var(--muted); margin-top:17px; }
.document__pending { padding:13px 17px; background:#f7f8f5; border-left:3px solid var(--green); font-size:13px; }
.document__cta { display:inline-block; margin-top:26px; font-size:13px; color:var(--ink); text-underline-offset:.28em; }
/* Modal als zugänglicher, zentrierter Dialog mit nativer Fokusbegrenzung. */
.info-dialog { width:min(960px,calc(100% - 46px)); max-width:none; max-height:min(90dvh,860px); padding:0; border:1px solid #e7e9e3; border-radius: 6px; color:var(--ink); background:var(--panel); box-shadow:0 24px 90px rgba(22,27,20,.22); overscroll-behavior:contain; }
.info-dialog::backdrop { background:var(--veil); backdrop-filter:blur(3px); }
.info-dialog__layout { display:grid; grid-template-rows:auto auto minmax(0,1fr); min-height: min(440px,70dvh); max-height:min(90dvh,860px); }
.info-dialog__head { padding:23px 31px 18px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); gap:15px; }
.info-dialog__caption { margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.info-dialog__close { flex:0 0 auto; width:40px; height:40px; border:1px solid var(--line); background:white; font:300 27px/1 'Helvetica Neue',Helvetica,Arial,sans-serif; color:var(--ink); cursor:pointer; }
.info-dialog__close:hover { background:#f7f8f5; }
.info-dialog__tabs { padding:0 28px; overflow-x:auto; display:flex; gap:18px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.info-dialog__tabs a { flex:0 0 auto; border-bottom:2px solid transparent; text-decoration:none; font-size:12px; font-weight:400; color:var(--muted); padding:17px 1px 14px; white-space:nowrap; }
.info-dialog__tabs a[aria-selected="true"] { color:var(--ink); border-color:var(--green); }
.info-dialog__tabs a:hover { color:var(--ink); }
.info-dialog__panel { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:27px 42px 44px; scrollbar-gutter:stable; }
.info-dialog__panel:focus { outline-offset:-5px; }
.info-dialog__panel .document__title { font-size: clamp(33px,4.4vw,48px); }
.info-dialog__panel .document__intro { font-size:15px; margin-bottom:28px; }
.info-dialog__panel .document__body { font-size:14px; }
.info-dialog__panel .document__section { padding:18px 0 13px; }
.info-dialog__panel .document__section h3 { font-size:17px; }
.info-dialog__status { color:var(--muted); padding:14px 0; font-size:14px; }
@media (max-width:900px) { .footer__nav { justify-content:flex-start; } }
@media (max-width:700px) {
    .footer__inner { flex-direction:column; }
    .footer__nav { gap:13px 18px; }
    .document-main { padding:54px 0 78px; }
    .breadcrumb { margin-bottom:37px; }
    .info-dialog { width:100%; height:min(92dvh,900px); max-height:92dvh; margin:auto 0 0; border-radius:13px 13px 0 0; border-left:0; border-right:0; border-bottom:0; }
    .info-dialog__layout { height:100%; max-height:none; min-height:0; }
    .info-dialog__head { padding:14px 20px 10px; }
    .info-dialog__tabs { padding-inline:18px; gap:21px; }
    .info-dialog__tabs a { font-size:12px; padding-top:15px; }
    .info-dialog__panel { padding:26px 22px 44px; }
    .info-dialog__panel .document__title { font-size:35px; }
}
@media (prefers-reduced-motion:reduce) { .info-dialog::backdrop { backdrop-filter:none; } }