/* Grove · Startseite und Datenschutzerklärung
   Cloud-Garden-Look nach cloud-garden-brand/BRAND.md. Keine externen Ressourcen,
   keine Skripte. Schrift: Switzer, selbst ausgeliefert (die Söhne-Testschnitte
   dürfen nicht veröffentlicht werden, siehe README). */

@font-face{font-family:'Switzer';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/switzer-400.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/switzer-500.woff2') format('woff2')}

:root{
  --cg-ink:#16181a;--cg-ink-soft:#2a2d2f;--cg-paper:#ffffff;
  --cg-grey-700:#6e7270;--cg-grey-500:#828684;--cg-grey-400:#9a9e9c;
  --cg-grey-300:#c7cbc9;--cg-grey-200:#dee1df;--cg-grey-100:#eeefee;--cg-grey-50:#f5f6f5;
  --cg-green:#4E6C37;
  --cg-dark:#15171a;--cg-dark-ink:#f3f4f3;--cg-dark-soft:#b9bdbb;--cg-dark-line:rgba(255,255,255,.12);
  --cg-font:'Switzer',-apple-system,system-ui,sans-serif;
  --cg-track-label-micro:.16em;--cg-track-label:.24em;--cg-track-label-wide:.34em;
  --cg-wrap:1200px;--cg-gutter:clamp(16px,5vw,48px);--cg-section:clamp(72px,10vw,140px);
  --cg-lk-gap:.34em;--cg-lk-clear:.72em;--cg-mark-cap:1.42cap;
  --cg-ease:cubic-bezier(.22,.68,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{font-family:var(--cg-font);font-weight:400;font-size:16px;line-height:1.6;color:var(--cg-ink);
  background:var(--cg-paper);overflow-x:clip;font-variant-numeric:tabular-nums lining-nums}
b,strong{font-weight:500}
em{font-style:normal;color:var(--cg-grey-700)}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--cg-grey-300);text-underline-offset:.22em;text-decoration-thickness:1px;
  transition:text-decoration-color .2s var(--cg-ease)}
a:hover{text-decoration-color:var(--cg-ink)}
a:focus-visible{outline:2px solid var(--cg-green);outline-offset:3px;border-radius:2px}
svg{display:block}
::selection{background:var(--cg-green);color:#f3f4f3}
.wrap{max-width:var(--cg-wrap);margin:0 auto;padding:0 var(--cg-gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--cg-gutter);top:-100px;z-index:10;background:var(--cg-ink);color:#fff;
  padding:10px 16px;border-radius:3px;font-size:12px;font-weight:500;text-decoration:none}
.skip:focus{top:12px}

/* Lockup (Komponente .lk aus dem Markenkit) */
.lk{display:inline-flex;align-items:center;gap:var(--cg-lk-gap);line-height:1;padding:var(--cg-lk-clear);
  font-size:28px;text-decoration:none;font-kerning:normal}
.lk__wm{display:block;line-height:1;font-size:1em}
.lk__cloud{display:block;font-weight:500;color:var(--cg-ink);letter-spacing:-.018em;white-space:nowrap}
.lk__garden{color:var(--cg-green)}
.lk__mark{order:-1;flex:none;display:inline-flex;font-size:1em}
.lk__mark svg{width:auto}
.lk__mark .cg-m-tile{height:1.42em;height:var(--cg-mark-cap)}
.lk__mark .cg-m-open{height:1em;height:1cap;fill:currentColor;display:none}
.lk--reversed{align-items:baseline}
.lk--reversed .lk__mark .cg-m-tile{display:none}
.lk--reversed .lk__mark .cg-m-open{display:block}
.lk--reversed .lk__cloud{color:var(--cg-dark-ink)}
.lk--reversed .lk__garden{color:var(--cg-grey-300)}
.lk--reversed .lk__mark{color:var(--cg-dark-ink)}

/* Kopf */
.masthead{border-bottom:1px solid var(--cg-grey-200)}
.mh{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mh .lk{margin-left:calc(var(--cg-lk-clear) * -1)}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:11px;font-weight:500;letter-spacing:var(--cg-track-label);
  text-transform:uppercase;color:var(--cg-grey-500)}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--cg-ink)}
.nav a[aria-current="page"]{color:var(--cg-ink);border-bottom-color:var(--cg-ink)}

.label{font-size:11px;font-weight:500;letter-spacing:var(--cg-track-label);text-transform:uppercase;color:var(--cg-grey-700)}

/* Eröffnung */
.hero{padding-top:var(--cg-section);padding-bottom:calc(var(--cg-section) * .6)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:var(--cg-track-label-wide);text-transform:uppercase;color:var(--cg-grey-500)}
h1{margin-top:22px;font-weight:500;font-size:clamp(36px,5.4vw,60px);line-height:1.05;letter-spacing:-.02em;max-width:18ch}
.lede{margin-top:26px;font-size:clamp(18px,1.7vw,21px);line-height:1.5;letter-spacing:-.005em;color:var(--cg-grey-700);max-width:40em}

/* Register: Abschnittstitel links, Inhalt rechts, Haarlinie dazwischen */
.reg{border-top:1px solid var(--cg-grey-200);padding:clamp(40px,6vw,72px) 0}
.reg .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px clamp(24px,4vw,64px)}
.reg h2{font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.018em}
.reg h2 .label{display:block;margin-bottom:12px;color:var(--cg-grey-500)}
.body{max-width:42em}
.body > * + *{margin-top:16px}
.body h3{font-weight:500;font-size:clamp(18px,1.6vw,20px);line-height:1.25;letter-spacing:-.012em;margin-top:32px}
.body h3:first-child{margin-top:0}
.body ul{padding-left:1.1em}
.body li + li{margin-top:6px}
.body li::marker{color:var(--cg-grey-400)}
.small{font-size:13px;line-height:1.55;color:var(--cg-grey-700)}
.en{color:var(--cg-ink-soft)}
.statement{border-left:1px solid var(--cg-grey-300);padding:4px 0 4px 18px}

/* Tabellen mit Haarlinien, ohne Flächen */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
caption{text-align:left;padding-bottom:10px}
th,td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--cg-grey-200)}
thead th{font-size:11px;font-weight:500;letter-spacing:var(--cg-track-label);text-transform:uppercase;color:var(--cg-grey-500);
  border-bottom-color:var(--cg-grey-300);padding-top:0}
td code,li code,p code{font-family:inherit;font-size:.92em;color:var(--cg-grey-700)}
td code{overflow-wrap:normal}

/* Fuß: dunkler Grund, umgekehrtes Lockup, kein Grün */
.colophon{background:var(--cg-dark);color:var(--cg-dark-ink);padding:clamp(56px,8vw,96px) 0}
.colophon .lk{font-size:32px;margin-left:calc(var(--cg-lk-clear) * -1)}
.colophon .meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:11px;font-weight:500;
  letter-spacing:var(--cg-track-label);text-transform:uppercase;color:var(--cg-dark-soft)}
.colophon .meta a{text-decoration-color:var(--cg-dark-line)}
.colophon .meta a[href^="mailto:"]{text-transform:none;letter-spacing:var(--cg-track-label-micro);font-size:12px}
.colophon .meta a:hover{color:var(--cg-dark-ink);text-decoration-color:var(--cg-dark-soft)}
.colophon a:focus-visible{outline-color:var(--cg-dark-ink)}
.colophon p{margin-top:20px;font-size:13px;line-height:1.6;color:var(--cg-dark-soft);max-width:44em}

/* Eine Einblendung beim Laden, danach Ruhe */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero > *{animation:rise .7s var(--cg-ease) both}
.hero > :nth-child(2){animation-delay:.08s}
.hero > :nth-child(3){animation-delay:.16s}
.hero > :nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:760px){
  .reg .wrap{grid-template-columns:1fr}
  table{font-size:14px}
  th,td{padding-right:12px}
  .colophon .lk{font-size:28px}
}
@media print{
  .skip,.nav{display:none}
  .colophon{background:none;color:var(--cg-ink);border-top:1px solid var(--cg-grey-300)}
  .colophon .lk{display:none}
  .colophon .meta,.colophon p{color:var(--cg-ink)}
}