/* Jahrgängerinnen-Verein 1951–1955 Wil – Design 1:1 aus der Demo «Hero v6b» */
:root{
  --green-950:#0f2a22; --green-800:#1a4a3a; --green-700:#1f5a45; --green-500:#3f7f66; --green-300:#a9c8b9; --green-200:#cfe2d8; --green-100:#e8f1ec;
  --sun:#f2b632; --sun-100:#fbe9bf; --sun-deep:#8a5f00;
  --bg:#fcfcfa; --card:#ffffff; --ink:#17201c; --ink-2:#3f4d47; --line:#d7ddda; --focus:#0b57d0; --err:#b3261e; --ok:#1f7a3f;
  --font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --font-body:"Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --measure:66ch; --radius:14px;
  --shadow-1:0 1px 2px rgba(15,42,34,.06), 0 6px 18px rgba(15,42,34,.08);
  --shadow-2:0 2px 4px rgba(15,42,34,.08), 0 18px 40px rgba(15,42,34,.16);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1180px; --gutter:clamp(20px, 4vw, 48px);
}
html{ font-size:112.5%; }
html[data-size="2"]{ font-size:125%; }
html[data-size="3"]{ font-size:140%; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--green-700); text-decoration-thickness:.09em; text-underline-offset:.16em; }
a:hover{ color:var(--green-950); }
::selection{ background:var(--sun); color:var(--ink); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.1; margin:0; text-wrap:balance; letter-spacing:-.01em; }
h1{ font-size:clamp(2.3rem, 1.3rem + 3.4vw, 4.2rem); }
h2{ font-size:clamp(1.8rem, 1.25rem + 1.7vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
h4{ font-size:1.1rem; }
p{ margin:0 0 1em; max-width:var(--measure); }
.lead{ font-size:1.16rem; line-height:1.55; color:var(--ink-2); }
.muted{ color:var(--ink-2); }
.small{ font-size:.92rem; }
.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:8px; z-index:100; }
.skip:focus{ left:8px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:52px; padding:.7rem 1.35rem; border-radius:999px; border:2px solid transparent; font:700 1rem/1.2 var(--font-body); text-decoration:none; cursor:pointer; transition:transform .18s var(--ease), background .18s, color .18s, box-shadow .18s; }
.btn:active{ transform:translateY(1px); }
.btn-sun{ background:var(--sun); color:var(--ink); }
.btn-sun:hover{ background:#f7c65a; color:var(--ink); box-shadow:var(--shadow-1); }
.btn-green{ background:var(--green-700); color:#fff; }
.btn-green:hover{ background:var(--green-800); color:#fff; }
.btn-ghost{ background:transparent; color:var(--green-700); border-color:var(--green-700); }
.btn-ghost:hover{ background:var(--green-100); color:var(--green-950); }
.btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.6); }
.btn-ghost.on-dark:hover{ background:rgba(255,255,255,.14); color:#fff; }
.btn-sm{ min-height:44px; padding:.5rem 1rem; font-size:.95rem; }
.arrow-link{ font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; min-height:44px; }
.arrow-link::after{ content:"→"; transition:transform .2s var(--ease); }
.arrow-link:hover::after{ transform:translateX(4px); }

.logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.logo img{ width:auto; height:48px; flex:none; }
.logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.logo-text strong{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; }
.logo-text span{ font-size:.84rem; color:var(--ink-2); margin-top:.15rem; }
.logo.on-dark{ color:#fff; display:inline-flex; } .logo.on-dark .logo-text span{ color:rgba(255,255,255,.75); }

.site-header{ position:sticky; top:0; z-index:50; background:rgba(252,252,250,.94); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.header-row{ display:flex; align-items:center; gap:20px; min-height:80px; }
.site-header .logo{ min-width:0; gap:12px; } .site-header .logo-text{ min-width:0; }
.site-header .logo{ flex:none; } .site-header .logo-text strong{ font-size:18px; line-height:1.12; max-width:9.5em; } .site-header .logo-text span{ font-size:14px; white-space:nowrap; }
@media (min-width: 1321px){ .site-header .logo-text span, .textsize span{ display:none; } }
.nav{ display:flex; gap:2px; }
.nav a{ display:inline-flex; align-items:center; min-height:48px; padding:0 11px; border-radius:999px; color:var(--ink); text-decoration:none; font-weight:700; font-size:17px; white-space:nowrap; }
.nav a:hover{ background:var(--green-100); color:var(--green-950); }
.nav a[aria-current="page"]{ background:var(--green-700); color:#fff; }
.textsize{ display:flex; align-items:center; gap:6px; padding-left:16px; border-left:1px solid var(--line); flex:none; }
.textsize span{ font-size:15px; color:var(--ink-2); margin-right:4px; }
.textsize button{ min-width:44px; min-height:44px; border-radius:10px; border:2px solid var(--line); background:#fff; font-family:var(--font-display); font-weight:700; color:var(--ink); cursor:pointer; line-height:1; padding:0; flex:none; }
.textsize button[data-s="1"]{ font-size:17px; } .textsize button[data-s="2"]{ font-size:21px; } .textsize button[data-s="3"]{ font-size:25px; }
.textsize button[aria-pressed="true"]{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.menu-btn{ display:none; min-height:48px; padding:0 16px; border-radius:999px; border:2px solid var(--green-700); background:#fff; color:var(--green-700); font:700 17px var(--font-body); cursor:pointer; flex:none; white-space:nowrap; }
@media (max-width: 1320px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:.5rem; }
  .textsize span{ display:none; }
  .site-header.open .nav{ display:flex; flex-direction:column; position:absolute; inset:80px 0 auto 0; background:var(--bg); padding:.75rem var(--gutter) 1.25rem; border-bottom:1px solid var(--line); box-shadow:var(--shadow-1); }
  .site-header.open .nav a{ min-height:56px; font-size:20px; border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0; }
  .site-header.open .nav a[aria-current="page"]{ background:var(--green-100); color:var(--green-950); }
}
@media (max-width: 560px){ .site-header .logo-text span{ display:none; } .site-header .logo-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .site-header .logo img{ height:42px; } .site-header .logo{ gap:8px; } .textsize{ padding-left:0; border-left:0; gap:4px; } .header-row{ gap:10px; } }
@media (max-width: 380px){ .header-row{ gap:6px; } .textsize{ gap:3px; } .site-header .logo img{ height:36px; } .menu-btn{ padding:0 12px; } }

html.js .page{ display:none; }
html.js .page.active{ display:block; animation:pageIn .45s var(--ease) both; }
@keyframes pageIn{ from{ opacity:.6; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.page-head{ position:relative; background:var(--green-700); color:#fff; padding:clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow:clip; }
.page-head.has-img{ min-height:340px; display:grid; align-items:end; }
.page-head .bg{ position:absolute; inset:0; }
.page-head .bg img{ width:100%; height:100%; object-fit:cover; }
.page-head .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,42,34,.9) 0%, rgba(15,42,34,.7) 45%, rgba(15,42,34,.3) 100%), linear-gradient(0deg, rgba(15,42,34,.7), rgba(15,42,34,0) 60%); }
.page-head .wrap{ position:relative; }
h1[tabindex="-1"]:focus{ outline:none; }
.page-head h1{ color:#fff; font-size:clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.page-head p{ color:rgba(255,255,255,.88); margin:.8rem 0 0; font-size:1.12rem; }
.section{ padding:clamp(3rem, 6vw, 5.5rem) 0; }
.section.tight{ padding-top:0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.75rem; }
.section-head p{ margin:.5rem 0 0; color:var(--ink-2); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.split.top{ align-items:start; }
.split.wide{ grid-template-columns:1.4fr 1fr; }
@media (max-width: 900px){ .split, .split.wide{ grid-template-columns:1fr; } }

.hero{ position:relative; color:#fff; background:var(--green-950); overflow:clip; min-height:min(88vh, 780px); display:grid; align-items:end; }
.hero-img{ position:absolute; inset:0; }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
html.js.loaded .hero-img img{ animation:kb 14s var(--ease) both; }
@keyframes kb{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(15,42,34,.88) 0%, rgba(15,42,34,.72) 40%, rgba(15,42,34,.46) 75%, rgba(15,42,34,.38) 100%), linear-gradient(0deg, rgba(15,42,34,.85) 0%, rgba(15,42,34,0) 45%); }
.hero-inner{ position:relative; padding:clamp(3.5rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem, 5vw, 5rem); align-items:end; }
.hero-inner > *{ min-width:0; }
.hero h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.25); }
.hero h1 em{ font-style:italic; font-weight:500; color:var(--sun); }
.hero h1 em{ position:relative; display:inline-block; padding-bottom:.12em; }
.hero h1 em::after{ content:""; position:absolute; left:-2%; right:-6%; bottom:-.02em; height:.22em; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 13C60 19 120 15 170 9S262 2 292 6c5 .8 6 5 2 7' fill='none' stroke='%23f2b632' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%; transform-origin:left center; }
html.js.loaded .hero h1 em::after{ animation:swoosh 1.1s var(--ease) .55s both; }
@keyframes swoosh{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero .lead{ color:rgba(255,255,255,.9); font-size:1.2rem; margin-top:1.1rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.board-title{ text-shadow:0 1px 12px rgba(15,42,34,.7); font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--sun); margin:0 0 .8rem; display:flex; align-items:center; gap:.6rem; }
.board-title::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.35); }
.pin{ display:grid; gap:.85rem; }
.pin-card{ display:grid; grid-template-columns:5.4rem 1fr; gap:1rem; align-items:center; background:var(--card); color:var(--ink); border-radius:var(--radius); padding:.95rem 1.2rem .95rem .95rem; box-shadow:var(--shadow-2); text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.pin-card:hover{ transform:translateY(-3px) rotate(0); box-shadow:0 4px 8px rgba(15,42,34,.1), 0 24px 48px rgba(15,42,34,.28); color:var(--ink); }
.pin-card:nth-child(1){ transform:rotate(-.6deg); } .pin-card:nth-child(2){ transform:rotate(.5deg); }
.date{ background:var(--green-100); border-radius:10px; text-align:center; padding:.5rem .2rem .45rem; font-family:var(--font-display); line-height:1; color:var(--green-950); }
.date b{ display:block; font-size:2.1rem; font-weight:700; letter-spacing:0; }
.date span{ display:block; font-size:.88rem; margin-top:.3rem; font-weight:600; }
.pin-card > div{ min-width:0; } .pin-card .pt, .ev-title{ overflow-wrap:anywhere; hyphens:auto; }
.pin-card .pt{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.15; margin:0; max-width:none; }
.pin-card p{ margin:.2rem 0 0; color:var(--ink-2); font-size:.96rem; max-width:none; }
.pin-card .go{ display:inline-block; margin-top:.35rem; font-weight:700; color:var(--green-700); }
@media (max-width: 560px){ .pin-card{ grid-template-columns:4.6rem 1fr; gap:.85rem; } .pin-card .pt{ font-size:1.1rem; } .pin-card .go{ font-size:.95rem; white-space:nowrap; } .date b{ font-size:1.85rem; } }
.board-more{ margin-top:.9rem; } .board-more a{ color:#fff; }
@media (max-width: 900px){ .hero-inner{ grid-template-columns:1fr; } .hero{ min-height:0; } }

.doing{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:auto auto; gap:.9rem; }
.tile{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--green-200); text-decoration:none; color:#fff; display:block; aspect-ratio:3/2; }
.tile.big{ grid-row:span 2; aspect-ratio:auto; min-height:420px; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.tile:hover img{ transform:scale(1.03); }
.tile-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.3rem 1.2rem; background:linear-gradient(to top, rgba(15,42,34,.9), rgba(15,42,34,0)); }
.tile-cap b{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; display:block; line-height:1.1; }
.tile.big .tile-cap b{ font-size:2rem; }
.tile-cap span{ font-size:.95rem; opacity:.92; }
.doing-list{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.doing-list a{ display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; border-radius:999px; border:1.5px solid var(--green-300); text-decoration:none; font-weight:700; color:var(--green-950); background:#fff; }
.doing-list a:hover{ background:var(--green-100); border-color:var(--green-700); }
@media (max-width: 760px){ .doing{ grid-template-columns:1fr; } .tile.big{ grid-row:auto; min-height:0; aspect-ratio:4/3; } }
.verein-band{ background:var(--green-100); }
.photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); background:var(--green-200); margin:0; }
.photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.photo figcaption{ padding:.7rem 1rem .85rem; font-size:.9rem; color:var(--ink-2); background:var(--card); border-top:1px solid var(--line); }

.flow{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; counter-reset:step; list-style:none; margin:0; padding:0; }
.flow li{ position:relative; padding:1.4rem 1.3rem 1.3rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); counter-increment:step; }
.flow li::before{ content:counter(step); font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--green-700); display:block; margin-bottom:.4rem; }
.flow b{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; display:block; margin-bottom:.3rem; }
.flow p{ margin:0; color:var(--ink-2); font-size:.97rem; }
@media (max-width: 760px){ .flow{ grid-template-columns:1fr; } }
.join{ background:var(--sun); color:var(--ink); }
.join .wrap{ display:grid; grid-template-columns:1fr auto; gap:1.5rem; align-items:center; padding-top:2.5rem; padding-bottom:2.5rem; }
.join h2{ font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.join p{ margin:.4rem 0 0; color:#4a3600; }
@media (max-width: 760px){ .join .wrap{ grid-template-columns:1fr; } }

.month{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--green-700); margin:2rem 0 .4rem; }
.events{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.events > li{ border-bottom:1px solid var(--line); }
.event{ display:grid; grid-template-columns:7rem 1fr auto; gap:1.25rem; align-items:center; padding:1.05rem 0; text-decoration:none; color:var(--ink); }
.event:hover .ev-title{ color:var(--green-700); text-decoration:underline; text-underline-offset:.18em; }
.ev-date{ font-family:var(--font-display); line-height:1; }
.ev-date b{ display:block; font-size:1.75rem; font-weight:700; letter-spacing:0; }
.ev-date span{ display:block; font-size:.88rem; color:var(--ink-2); margin-top:.25rem; }
.ev-title{ font-size:1.2rem; font-weight:700; line-height:1.3; margin:0 0 .15rem; }
.ev-meta{ color:var(--ink-2); margin:.15rem 0 0; max-width:none; font-size:.96rem; }
.tag{ display:inline-block; padding:.28rem .7rem; border-radius:999px; background:var(--green-100); color:var(--green-950); font-size:.86rem; font-weight:700; white-space:nowrap; }
.tag.sun{ background:var(--sun-100); color:var(--sun-deep); }
.tag.ok{ background:#dff3e6; color:#155f30; }
.tag.warn{ background:#fde7e5; color:#8f1d16; }
@media (max-width: 640px){ .event{ grid-template-columns:5.6rem 1fr; } .event .tag{ grid-column:2; justify-self:start; } }
details.ev summary{ list-style:none; cursor:pointer; }
details.ev summary::-webkit-details-marker{ display:none; }
details.ev summary .event{ padding-right:2.4rem; position:relative; }
details.ev summary .event::after{ content:""; position:absolute; right:.4rem; top:50%; width:11px; height:11px; border-right:2.5px solid var(--green-700); border-bottom:2.5px solid var(--green-700); transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease); }
details.ev[open] summary .event::after{ transform:translateY(-30%) rotate(225deg); }
.ev-body{ padding:0 0 1.4rem 7rem; display:grid; grid-template-columns:1fr; gap:1.2rem; align-items:start; }
.ev-body dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem; font-size:.98rem; }
.ev-body dt{ font-weight:700; } .ev-body dd{ margin:0; color:var(--ink-2); }
.ev-body .ev-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
@media (max-width: 640px){ .ev-body{ padding-left:0; grid-template-columns:1fr; } }
.toolbar{ display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.5rem; }
.notes{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.notes li{ border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; background:var(--card); }
.notes time{ font-size:.88rem; color:var(--ink-2); font-weight:700; }
.notes b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin:.2rem 0 .3rem; }
.notes p{ margin:0; color:var(--ink-2); font-size:.97rem; }

.year{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.year table{ border-collapse:collapse; width:100%; min-width:720px; font-size:.92rem; }
.year th,.year td{ padding:.55rem .5rem; text-align:center; border-bottom:1px solid var(--line); }
.year th{ font-weight:700; color:var(--ink-2); font-size:.85rem; }
.year th:first-child,.year td:first-child{ text-align:left; padding-left:1rem; white-space:nowrap; }
.year tbody th{ color:var(--ink); font-size:.95rem; }
.year td.now{ background:var(--green-100); }
.dot{ display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--green-700); }
.dot.sun{ background:var(--sun); }
.dot.half{ background:var(--green-300); }
.year-legend{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.8rem; font-size:.9rem; color:var(--ink-2); align-items:center; }
.year-legend span{ display:inline-flex; align-items:center; gap:.4rem; }

.ressorts{ border-top:1px solid var(--line); }
.ressort{ padding:2rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:220px 1fr auto; gap:1.5rem; align-items:start; }
.ressort .rimg{ border-radius:12px; overflow:hidden; background:var(--green-100); aspect-ratio:4/3; display:grid; place-items:center; color:var(--green-700); }
.ressort .rimg img{ width:100%; height:100%; object-fit:cover; }
.ressort .rimg svg{ width:44px; height:44px; }
.ressort h3{ margin-bottom:.35rem; }
.ressort p{ margin:0 0 .6rem; color:var(--ink-2); }
.ressort .facts{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.4rem 0 0; padding:0; list-style:none; }
.ressort .facts li{ font-size:.88rem; padding:.2rem .6rem; border-radius:999px; background:var(--green-100); color:var(--green-950); font-weight:700; }
.ressort .who{ display:block; margin-top:.6rem; font-size:.92rem; color:var(--ink-2); }
.ressort .rhythm{ text-align:right; font-size:.92rem; color:var(--ink-2); font-weight:700; white-space:nowrap; padding-top:.3rem; }
@media (max-width: 760px){ .ressort{ grid-template-columns:1fr; } .ressort .rimg{ max-width:300px; } .ressort .rhythm{ text-align:left; padding:0; } }
.steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:s; list-style:none; margin:0; padding:0; }
.steps-row li{ counter-increment:s; padding:1rem 1.1rem; border-top:3px solid var(--green-700); }
.steps-row li::before{ content:"Schritt " counter(s); font-size:.85rem; font-weight:700; color:var(--green-700); display:block; margin-bottom:.3rem; }
.steps-row b{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; display:block; margin-bottom:.25rem; }
.steps-row p{ margin:0; font-size:.95rem; color:var(--ink-2); }
@media (max-width: 760px){ .steps-row{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .steps-row{ grid-template-columns:1fr; } }

.facts-strip{ display:flex; flex-wrap:wrap; gap:2rem 3rem; padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:1.5rem 0 2rem; }
.facts-strip div b{ font-family:var(--font-display); font-weight:700; font-size:2rem; display:block; line-height:1; color:var(--green-950); }
.facts-strip div span{ font-size:.92rem; color:var(--ink-2); }
.timeline{ list-style:none; margin:1.5rem 0 0; padding:0; border-left:2px solid var(--green-200); }
.timeline li{ position:relative; padding:0 0 1.1rem 1.4rem; }
.timeline li::before{ content:""; position:absolute; left:-7px; top:.5rem; width:12px; height:12px; border-radius:50%; background:var(--green-700); border:2px solid var(--bg); }
.timeline b{ font-family:var(--font-display); font-size:1.12rem; display:block; }
.timeline span{ color:var(--ink-2); }
.people{ list-style:none; margin:1rem 0 0; padding:0; }
.people li{ display:grid; grid-template-columns:52px 1fr auto; gap:1rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line); }
.avatar{ width:52px; height:52px; border-radius:50%; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; }
img.avatar{ object-fit:cover; display:block; box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--green-200); }
.people .mail a{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.people b{ display:block; } .people span{ color:var(--ink-2); font-size:.95rem; }
@media (max-width: 600px){ .people li{ grid-template-columns:52px 1fr; } .people .mail{ grid-column:2; } }
.docs{ background:var(--card); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-1); }
.docs p{ color:var(--ink-2); font-size:.96rem; }
.docs ul{ list-style:none; margin:1rem 0 0; padding:0; }
.docs li{ border-top:1px solid var(--line); }
.docs li a{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:54px; padding:.5rem 0; text-decoration:none; font-weight:700; color:var(--ink); }
.docs li a:hover{ color:var(--green-700); }
.docs li a span{ font-weight:400; color:var(--ink-2); font-size:.9rem; }
.docs li.years{ display:grid; gap:.55rem; padding:.95rem 0 .35rem; }
.docs .yrs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:.3rem; }
.docs .yrs a{ display:inline-flex; min-height:44px; min-width:0; padding:0; justify-content:center; font-variant-numeric:lining-nums tabular-nums; border:1.5px solid var(--green-300); border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:.95rem; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
@media (max-width: 960px){ .docs .yrs{ grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:.4rem; } }
.docs .yrs a:hover{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
details.st{ border-top:1px solid var(--line); }
details.st:last-of-type{ border-bottom:1px solid var(--line); }
details.st summary{ cursor:pointer; font-weight:700; padding:.9rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; min-height:54px; }
details.st summary::-webkit-details-marker{ display:none; }
details.st summary::after{ content:"+"; font-family:var(--font-display); font-size:1.5rem; color:var(--green-700); }
details.st[open] summary::after{ content:"–"; }
details.st p{ margin:0 0 1rem; color:var(--ink-2); }

.gallery{ display:grid; grid-template-columns:repeat(6, 1fr); gap:.85rem; }
.gallery figure{ margin:0; position:relative; border-radius:12px; overflow:hidden; background:var(--green-200); aspect-ratio:3/2; }
.gallery figure{ grid-column:span 2; }
.gallery figure:nth-child(5n+1){ grid-column:span 4; }
.gallery figure:nth-child(5n+2){ aspect-ratio:auto; }
.gallery button{ all:unset; display:block; width:100%; height:100%; cursor:zoom-in; }
.gallery button:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.gallery figure:hover img{ transform:scale(1.03); }
.gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.7rem .9rem; font-size:.92rem; font-weight:700; color:#fff; background:linear-gradient(to top, rgba(15,42,34,.85), rgba(15,42,34,0)); pointer-events:none; }
@media (max-width: 760px){ .gallery{ grid-template-columns:1fr 1fr; } .gallery figure:nth-child(n){ grid-column:span 2; aspect-ratio:3/2; } }
.slip{ margin:1rem 0 0; } .slip img{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain; background:#fff; padding:.6rem; }
.qr-bill .iban{ white-space:nowrap; letter-spacing:-.02em; }
.alb-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .5rem; }
.alb-filter[hidden]{ display:none; }
.alb-filter button{ min-height:44px; padding:0 1.05rem; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font:700 .95rem var(--font-body); cursor:pointer; transition:background .25s, color .25s, border-color .25s; }
.alb-filter button i{ font-style:normal; font-weight:400; color:var(--ink-2); margin-left:.3rem; font-variant-numeric:tabular-nums; }
.alb-filter button:hover{ border-color:var(--green-700); }
.alb-filter button.on{ background:var(--green-700); border-color:var(--green-700); color:#fff; } .alb-filter button.on i{ color:rgba(255,255,255,.75); }
.alb-filter button:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.alb-year{ display:flex; align-items:baseline; gap:1rem; margin:2.2rem 0 .4rem; font-size:clamp(2rem,4vw,2.8rem); line-height:1; color:var(--green-700); }
.alb-year small{ font:400 .92rem var(--font-body); color:var(--ink-2); }
.alb-list{ border-top:1px solid var(--line); }
.album{ border-bottom:1px solid var(--line); }
.album[hidden], .alb-year[hidden]{ display:none; }
.album summary{ list-style:none; display:grid; grid-template-columns:64px 1fr auto; gap:1rem; align-items:center; min-height:72px; padding:.55rem 0; cursor:pointer; }
.album summary::-webkit-details-marker{ display:none; }
.album summary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:8px; }
.alb-cover{ width:64px; height:48px; object-fit:cover; border-radius:8px; background:var(--green-200); transition:transform .5s var(--ease); }
.album summary:hover .alb-cover{ transform:scale(1.06) rotate(-1.5deg); }
.alb-t b{ display:block; line-height:1.3; } .alb-t small{ color:var(--ink-2); font-size:.9rem; }
.album summary:hover .alb-t b{ color:var(--green-700); }
.alb-n{ color:var(--ink-2); font-size:.92rem; white-space:nowrap; display:flex; align-items:center; gap:.7rem; }
.alb-n::after{ content:"+"; font:400 1.4rem/1 var(--font-body); color:var(--green-700); transition:transform .3s var(--ease); }
.album[open] .alb-n::after{ transform:rotate(45deg); }
.alb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.6rem; padding:.3rem 0 1.4rem; }
.alb-grid a{ display:block; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--green-200); cursor:zoom-in; }
.alb-grid a:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.alb-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.alb-grid a:hover img{ transform:scale(1.04); }
@media (max-width: 560px){ .album summary{ grid-template-columns:56px 1fr; } .alb-cover{ width:56px; height:42px; } .alb-n{ grid-column:2; margin-top:-.5rem; justify-content:space-between; } .alb-grid{ grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion: reduce){ .alb-cover, .alb-grid img, .alb-n::after{ transition:none; } .album summary:hover .alb-cover{ transform:none; } }
.albums{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.albums li a{ display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:58px; padding:.6rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-weight:700; }
.albums li a span{ color:var(--ink-2); font-weight:400; font-size:.92rem; }
.albums li a:hover{ color:var(--green-700); }
dialog{ border:0; padding:0; background:transparent; max-width:none; max-height:none; }
dialog::backdrop{ background:rgba(15,42,34,.86); }
.lb{ width:min(96vw, 1200px); }
.lb img{ width:100%; max-height:80vh; object-fit:contain; border-radius:10px; background:#000; }
.lb-bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; color:#fff; margin-top:.8rem; }
.lb-bar .cap{ font-weight:700; }
.lb-bar .btns{ display:flex; gap:.5rem; }
.lb-bar button{ min-width:48px; min-height:48px; border-radius:999px; border:2px solid rgba(255,255,255,.6); background:transparent; color:#fff; font:700 1rem var(--font-body); cursor:pointer; padding:0 1rem; }
.lb-bar button:hover{ background:rgba(255,255,255,.15); }
.modal{ width:min(94vw, 560px); background:var(--card); color:var(--ink); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-2); }
html.js dialog[open].modal{ animation:pageIn .35s var(--ease) both; }
.modal h2{ font-size:1.6rem; }
.modal .close{ float:right; min-width:44px; min-height:44px; border-radius:999px; border:2px solid var(--line); background:#fff; font-size:1.2rem; cursor:pointer; }

.beitrag-box{ border:2px solid var(--green-200); border-radius:var(--radius); padding:1.5rem; background:var(--card); }
.amount{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-display); }
.amount b{ font-size:2.6rem; font-weight:700; letter-spacing:0; color:var(--green-950); }
.amount span{ color:var(--ink-2); }
.beitrag-box dl{ margin:1rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; }
.beitrag-box dt{ font-weight:700; } .beitrag-box dd{ margin:0; color:var(--ink-2); }
.steps{ margin:1rem 0 0; padding-left:1.3rem; } .steps li{ margin:.4rem 0; }
.qr-bill{ background:#fff; color:#000; border:1px solid #bbb; border-radius:6px; overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:.72rem; line-height:1.35; box-shadow:var(--shadow-1); position:relative; }
.qr-bill .cut{ display:grid; grid-template-columns:1fr 2fr; }
.qr-bill .part{ padding:.7rem .8rem; }
.qr-bill .part.recv{ border-right:1px dashed #999; }
.qr-bill h4{ font-family:Arial, Helvetica, sans-serif; font-size:.85rem; font-weight:700; margin:0 0 .5rem; }
.qr-bill .lbl{ font-size:.58rem; font-weight:700; margin:.5rem 0 .1rem; }
.qr-bill .pay{ display:grid; grid-template-columns:auto 1fr; gap:.8rem; }
.qr-bill .qr{ width:118px; height:118px; }
.qr-bill .amt{ display:grid; grid-template-columns:auto auto; gap:1.2rem; margin-top:.6rem; }
.qr-bill .stamp{ position:absolute; right:10px; top:10px; transform:rotate(6deg); border:2px solid var(--err); color:var(--err); font-weight:700; padding:.15rem .5rem; font-size:.75rem; border-radius:4px; background:rgba(255,255,255,.85); }
.qr-note{ font-size:.88rem; color:var(--ink-2); margin:.7rem 0 0; }
@media (max-width: 480px){ .qr-bill .cut{ grid-template-columns:1fr; } .qr-bill .part.recv{ border-right:0; border-bottom:1px dashed #999; } }

form{ display:grid; gap:1rem; }
label{ display:block; font-weight:700; margin-bottom:.35rem; }
input,textarea,select{ width:100%; font:inherit; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:10px; padding:.8rem .95rem; min-height:54px; }
select{ min-height:calc(1.6em + 1.6rem + 4px); }
textarea{ min-height:150px; resize:vertical; }
input:focus,textarea:focus,select:focus{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--green-700); }
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--err); }
.field-err{ display:none; color:var(--err); font-size:.92rem; margin:.3rem 0 0; font-weight:700; }
[aria-invalid="true"] + .field-err{ display:block; }
.hint{ color:var(--ink-2); font-size:.92rem; margin:0; }
.form-ok{ display:none; background:var(--green-100); border-radius:10px; padding:1rem 1.2rem; font-weight:700; color:var(--green-950); }
form.sent .form-ok{ display:block; } form.sent .form-fields{ display:none; }
.form-fields{ display:grid; gap:1rem; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 560px){ .row2{ grid-template-columns:1fr; } }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ display:grid; grid-template-columns:44px 1fr; gap:.8rem; align-items:start; padding:.8rem 0; border-bottom:1px solid var(--line); }
.contact-list svg{ width:26px; height:26px; color:var(--green-700); margin-top:.15rem; }
.contact-list b{ display:block; } .contact-list span{ color:var(--ink-2); font-size:.95rem; }


.prose{ max-width:var(--measure); }
.prose h2{ font-size:1.5rem; margin:2rem 0 .6rem; }
.prose h2:first-child{ margin-top:0; }

.site-footer{ background:var(--green-950); color:rgba(255,255,255,.84); padding:3.5rem 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.site-footer h3{ color:#fff; font-size:1.12rem; margin-bottom:.6rem; }
.site-footer p{ font-size:.95rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin:.35rem 0; }
.site-footer a{ color:#fff; }
.foot-bottom{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.18); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.9rem; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; gap:1.75rem; } }

.reveal{ opacity:1; transform:none; }
html.js .reveal{ transform:translateY(16px); transition:transform .7s var(--ease); }
html.js .reveal.in{ transform:none; }
@keyframes rise{ from{ opacity:.55; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes pinDrop{ from{ opacity:.55; transform:translateY(-14px) rotate(-3deg) scale(.98); } to{ opacity:1; } }
html.js.loaded .hero h1, html.js.loaded .hero .lead, html.js.loaded .hero-actions{ animation:rise .9s var(--ease) both; }
html.js.loaded .hero .lead{ animation-delay:.12s; } html.js.loaded .hero-actions{ animation-delay:.22s; }
html.js.loaded .board-title{ animation:rise .8s var(--ease) .25s both; }
html.js.loaded .pin-card{ animation:pinDrop .9s var(--ease) both; }
html.js.loaded .pin-card:nth-child(1){ animation-delay:.45s; } html.js.loaded .pin-card:nth-child(2){ animation-delay:.6s; }
html.js.loaded .board-more{ animation:rise .8s var(--ease) .8s both; }
html.js:not(.loaded) .hero h1, html.js:not(.loaded) .hero .lead, html.js:not(.loaded) .hero-actions, html.js:not(.loaded) .board-title, html.js:not(.loaded) .pin-card, html.js:not(.loaded) .board-more{ opacity:.55; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html.js .reveal{ opacity:1; transform:none; }
  html.js:not(.loaded) .hero *{ opacity:1 !important; }
  .pin-card:nth-child(n){ transform:none; }
}
@media print{
  .site-header,.site-footer,.hero,.toolbar,.join,.textsize,.menu-btn,.ev-actions,.demo-note{ display:none !important; }
  html.js .page{ display:none; } html.js .page.active{ display:block; }
  .page-head{ background:none; color:#000; padding:0 0 1rem; min-height:0; }
  .page-head .bg{ display:none; } .page-head h1,.page-head p{ color:#000; }
  body{ font-size:12pt; color:#000; background:#fff; }
  a{ color:#000; text-decoration:none; }
  details.ev{ break-inside:avoid; }
  .split, .split.wide{ grid-template-columns:1fr; }
}

/* Rückblick */
.look{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.look-card{ display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:var(--ink); background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.look-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); color:var(--ink); }
.look-card img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.look-card > div{ padding:1.1rem 1.25rem 1.3rem; }
.look-card .kicker{ display:block; font-size:.84rem; font-weight:700; color:var(--green-700); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.look-card b{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; line-height:1.15; display:block; margin-bottom:.4rem; }
.look-card p{ margin:0; color:var(--ink-2); font-size:.96rem; }
@media (max-width: 900px){ .look{ grid-template-columns:1fr; } .look-card{ grid-template-columns:1fr 1.4fr; grid-template-rows:auto; } .look-card img{ height:100%; aspect-ratio:auto; } }
@media (max-width: 560px){ .look-card{ grid-template-columns:1fr; } .look-card img{ aspect-ratio:3/2; } }

/* Mail + SMS Muster */
.arrive{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.5rem; align-items:start; }
.people .mail{ background:none; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.mail{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); }
.mail-head{ padding:.9rem 1.2rem; border-bottom:1px solid var(--line); background:#f6f7f5; font-size:.9rem; }
.mail-row{ display:grid; grid-template-columns:4.2rem 1fr; gap:.5rem; padding:.15rem 0; }
.mail-row span{ color:var(--ink-2); } .mail-row b{ font-weight:600; overflow-wrap:anywhere; }
.mail-body{ padding:1.2rem 1.3rem 1.3rem; font-size:.97rem; }
.mail-body img{ border-radius:10px; aspect-ratio:2/1; object-fit:cover; margin-bottom:1rem; }
.mail-body p{ margin:0 0 .8rem; max-width:none; }
.mail-foot{ color:var(--ink-2); font-size:.86rem; border-top:1px solid var(--line); padding-top:.8rem; margin-top:1rem !important; }
.phone{ position:relative; background:#fff; border:10px solid #1c1f1e; border-radius:34px; padding:1rem .9rem 1.2rem; box-shadow:var(--shadow-2); max-width:330px; margin:0 auto; }
.phone-top{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-2); padding:0 .2rem .8rem; border-bottom:1px solid var(--line); margin-bottom:.9rem; }
.phone-top .from{ font-weight:700; color:var(--ink); }
.bubble{ background:#e9ecea; border-radius:18px 18px 18px 4px; padding:.7rem .9rem; font-size:.92rem; line-height:1.45; margin:0 1.6rem .6rem 0; }
.bubble.me{ background:var(--green-700); color:#fff; border-radius:18px 18px 4px 18px; margin:0 0 .6rem 3rem; }
.phone-note{ font-size:.8rem; color:var(--ink-2); margin:.9rem 0 0; text-align:center; }
.mail .stamp,.phone .stamp{ position:absolute; top:.6rem; right:.7rem; font:700 .72rem/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:#8a2b24; border:2px solid #b3261e; border-radius:6px; padding:.25rem .45rem; transform:rotate(-6deg); opacity:.85; background:#fff; }
@media (max-width: 900px){ .arrive{ grid-template-columns:1fr; } }


/* Balken + Kennzahlen */
.kv{ display:grid; grid-template-columns:1fr auto 1fr auto; gap:.35rem 1rem; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line); font-size:.9rem; }
.kv span{ color:var(--ink-2); } .kv b{ text-align:right; }
@media (max-width: 480px){ .kv{ grid-template-columns:1fr auto; } }


/* Hero v3 – bildzentriert */
.btn .ico, .hcard .ico{ width:1.15em; height:1.15em; flex:none; }
.hero{ min-height:min(82vh, 740px); align-items:center; }
.hero-img{ overflow:hidden; }
.hero-img .hs{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
@media (max-width: 900px){ .hero-img .hs{ object-position:60% 50%; } }
.hero-scrim{ background:linear-gradient(90deg, rgba(15,42,34,.82) 0%, rgba(15,42,34,.6) 38%, rgba(15,42,34,.18) 70%, rgba(15,42,34,.3) 100%), linear-gradient(0deg, rgba(15,42,34,.55) 0%, rgba(15,42,34,0) 40%), linear-gradient(180deg, rgba(15,42,34,.25) 0%, rgba(15,42,34,0) 25%); }
.hero-inner{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); align-items:center; padding:clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem); }
.hero-kicker{ margin:0 0 1rem; font-size:.84rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(15,42,34,.6); }
.hero h1 em{ padding-bottom:0; }
.hero h1 em::after{ content:none; }
.hero .lead{ max-width:34rem; }
.hero-actions .btn-ghost.on-dark{ background:rgba(15,42,34,.25); }
.hero-script{ margin:0; justify-self:end; align-self:center; display:flex; flex-direction:column; align-items:flex-end; font-family:"Caveat", "Segoe Script", cursive; font-weight:600; font-size:clamp(2rem, 1.2rem + 2.2vw, 3.1rem); line-height:1.05; color:#fff; rotate:-9deg; text-shadow:0 2px 14px rgba(15,42,34,.55); margin-top:4rem; }
.hero-script span:nth-child(2){ margin-right:.4em; } .hero-script span:nth-child(3){ margin-right:.9em; }
.hero-script::after{ content:""; width:4.2em; height:.35em; margin:.12em .9em 0 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14C70 8 150 5 220 6S282 8 296 10' fill='none' stroke='%23f2b632' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%; transform-origin:left center; }
html.js.loaded .hero-script{ animation:rise .9s var(--ease) .35s both; }
html.js.loaded .hero-script::after{ animation:swoosh 1.1s var(--ease) .9s both; }
html.js.loaded .hero-kicker{ animation:rise .8s var(--ease) both; }

.hero-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; background:var(--bg); padding-top:6px; }
.hcard{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:#f6f3ea; overflow:hidden; }
.hcard img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .8s var(--ease); }
.hcard:hover img{ transform:scale(1.03); }
.hcard-body{ display:flex; flex-direction:column; padding:1.2rem clamp(1.1rem, 2.4vw, 2rem) 1.3rem; position:relative; z-index:1; background:inherit; }
.hcard-body b{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; line-height:1.15; }
.hcard-body > span{ color:var(--ink-2); font-size:.95rem; margin-top:.2rem; }
.hcard-body .ico{ margin-top:.9rem; width:1.4rem; height:1.4rem; color:var(--ink); transition:transform .25s var(--ease); }
.hcard:hover .hcard-body .ico{ transform:translateX(4px); }
.hcard:hover b{ color:var(--green-700); }
.hcard:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-script{ justify-self:start; align-items:flex-start; margin-top:.5rem; rotate:-5deg; font-size:2rem; }
  .hero-script span:nth-child(n){ margin-right:0; }
  .hero-script span:nth-child(2){ margin-left:.5em; } .hero-script span:nth-child(3){ margin-left:1em; }
  .hero-script::after{ margin:.12em 0 0 1em; }
}
@media (max-width: 700px){
  .hero-cards{ grid-template-columns:1fr; }
  .hcard{ flex-direction:row; }
  .hcard img{ width:38%; aspect-ratio:auto; min-height:7.5rem; }
  .hcard-body{ flex:1; justify-content:center; padding:1rem 1.1rem; }
  .hcard-body .ico{ margin-top:.5rem; }
}
@media (prefers-reduced-motion: reduce){ html.js.loaded .hero-script, html.js.loaded .hero-script::after, html.js.loaded .hero-kicker{ animation:none; } .hcard img, .hcard-body .ico{ transition:none; } }

/* ---------- Ergänzungen CMS (Termine aus ClubDesk, Archiv, Kontaktformular) ---------- */
.ev-body.has-img{ grid-template-columns:150px 1fr; }
.ev-body .ev-img{ width:150px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--green-100); display:block; }
.ev-text{ white-space:pre-line; overflow-wrap:anywhere; }
.ev-anmeldung{ background:var(--green-100); border-radius:10px; padding:.85rem 1rem; color:var(--green-950); font-size:.97rem; }
.ev-anmeldung p{ margin:0; max-width:none; font-weight:700; }
.ev-anmeldung ul{ list-style:none; margin:.35rem 0 0; padding:0; display:grid; gap:.15rem; }
.ev-anmeldung a{ white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width: 640px){ .ev-body.has-img{ grid-template-columns:1fr; } .ev-body .ev-img{ width:100%; max-width:320px; } }
.leer{ border:1px dashed var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; color:var(--ink-2); background:var(--card); }
.people .mail{ display:grid; justify-items:end; gap:.1rem; }
.people .mail a{ font-size:.95rem; }
@media (max-width: 600px){ .people .mail{ justify-items:start; } }
.form-err{ background:#fde7e5; color:#8f1d16; border-radius:10px; padding:1rem 1.2rem; font-weight:700; margin:0 0 1rem; }
.hp-feld{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.archiv-jahr{ margin-top:2.5rem; }
@media print{ .ev-anmeldung, .ev-img{ display:none !important; } }