/* ==========================================================================
   kunstspuren.com — Corporate Design
   Zwei Bereiche, ein System:
     Standard            = Graublau  (Hub, Rechtstexte)
     [data-bereich=...]  = Vivarium-Grün
   Bernstein ist der gemeinsame Akzent und wechselt nie — er ist die Klammer.
   ========================================================================== */

/* --- Schriften: lokal, DSGVO-konform ------------------------------------
   Lora und Poppins, SIL Open Font License 1.1 (siehe fontsmsi/OFL.txt).
   Liegen im eigenen Webspace — es geht keine Anfrage an fremde Server.      */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;
  src:url('fontsmsi/lora-regular.woff') format('woff')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;
  src:url('fontsmsi/lora-italic.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url('fontsmsi/poppins-300.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fontsmsi/poppins-regular.woff') format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fontsmsi/poppins-500.woff') format('woff')}

/* --- Token: Bereich Allgemein (Graublau) -------------------------------- */
:root{
  --surface:#f6f7f9; --surface-panel:#eaeef2; --surface-deep:#1e2a35;
  --ink:#1d262e; --ink-muted:#5e6c79; --ink-faint:#94a0ab;
  --accent:#b8811f; --accent-ink:#8a5e12;
  --border:#dde3e9; --border-faint:#eceff3; --rule-strong:#1d262e;
  --deep-ink:#f6f7f9; --deep-ink-muted:#aab8c4; --deep-ink-faint:#8798a6;
  --deep-border:#34434f; --deep-accent:#e0a93f;

  --font-serif:"Lora","Iowan Old Style",Georgia,serif;
  --font-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;
  --rule-hair:1px; --rule-group:1.5px; --rule-accent:3px;
  --layout-max:1180px; --layout-measure:68ch; --layout-gutter:24px;
}

/* --- Token: Bereich Vivarium (Grün) ------------------------------------- */
[data-bereich="vivarium"]{
  --surface:#fbf8f2; --surface-panel:#f2ede1; --surface-deep:#14301f;
  --ink:#1b2b22; --ink-muted:#78887d; --ink-faint:#9ba79e;
  --border:#e4ddcf; --border-faint:#efeade; --rule-strong:#14301f;
  --deep-ink:#fbf8f2; --deep-ink-muted:#a9bcaf; --deep-ink-faint:#7e9686;
  --deep-border:#2f5240;
}

/* --- Dunkelmodus --------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#1e2a35; --surface-panel:#26333f;
    --ink:#f6f7f9; --ink-muted:#aab8c4; --ink-faint:#8798a6;
    --accent:#e0a93f; --accent-ink:#e8bf6e;
    --border:#34434f; --border-faint:#2a3843; --rule-strong:#f6f7f9;
  }
  [data-bereich="vivarium"]:not([data-theme="light"]){
    --surface:#14301f; --surface-panel:#1c3a27;
    --ink:#fbf8f2; --ink-muted:#a9bcaf; --ink-faint:#7e9686;
    --border:#2f5240; --border-faint:#25412f; --rule-strong:#fbf8f2;
  }
}

/* --- Grundlage ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--surface-deep)}
body{margin:0;background:var(--surface);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block;border-radius:0}
a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.wrap{max-width:var(--layout-max);margin-inline:auto;padding-inline:var(--layout-gutter)}
@media (min-width:900px){ .wrap{padding-inline:48px} }
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:9;background:var(--surface);
  padding:var(--space-3) var(--space-4);color:var(--ink)}

/* --- Textstile ----------------------------------------------------------- */
.label{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);line-height:1;margin:0}
.label-sm{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.display{font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,7vw,56px);
  line-height:1.02;letter-spacing:-.015em;margin:0}
.display .it{display:block;font-style:italic;color:var(--accent)}
.title{font-family:var(--font-serif);font-weight:400;font-size:clamp(26px,4.4vw,36px);
  line-height:1.15;letter-spacing:-.01em;margin:0}
.quote{font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,2.6vw,24px);line-height:1.35;margin:0}
.lead{font-weight:300;font-size:clamp(16px,1.6vw,18px);line-height:1.7;
  max-width:var(--layout-measure);margin:0}
.rule-accent{width:24px;height:var(--rule-accent);background:var(--accent);
  margin:var(--space-6) 0 var(--space-4);border:0}
.sci{font-family:var(--font-serif);font-style:italic}

/* --- Kopfzeile ----------------------------------------------------------- */
.site-head{background:var(--surface-deep);color:var(--deep-ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding-block:var(--space-6);flex-wrap:wrap}
.wordmark{font-family:var(--font-serif);font-size:19px;color:var(--deep-ink);
  text-decoration:none}
.wordmark:hover{text-decoration:underline;text-decoration-color:var(--deep-accent)}
.nav{display:flex;gap:var(--space-6);flex-wrap:wrap}
.nav a{color:var(--deep-ink-muted);text-decoration:none;font-size:13px;letter-spacing:.06em}
.nav a:hover,.nav a[aria-current="page"]{color:var(--deep-accent)}

/* --- Dunkelfläche -------------------------------------------------------- */
.dark{background:var(--surface-deep);color:var(--deep-ink)}
.dark .label{color:var(--deep-accent)}
.dark .rule-accent{background:var(--deep-accent)}
.dark .lead{color:var(--deep-ink-muted)}
.dark .label-sm{color:var(--deep-ink-faint)}
.dark a{color:var(--deep-accent)}
.hero .wrap{padding-block:clamp(56px,9vw,96px)}
.hero-grid{display:grid;gap:var(--space-12);align-items:start}
@media (min-width:860px){ .hero-grid{grid-template-columns:1fr 280px;gap:var(--space-16)} }
.portrait{width:100%;max-width:280px;filter:saturate(.9)}
.portrait-cap{margin-top:var(--space-3);color:var(--deep-ink-faint)}
.hero-quote{margin-top:var(--space-12);padding-top:var(--space-6);
  border-top:1px solid var(--deep-border)}
.hero-quote .sub{margin:var(--space-2) 0 0;font-weight:300;color:var(--deep-ink-muted)}

/* --- Abschnitt ----------------------------------------------------------- */
.section .wrap{padding-block:clamp(56px,8vw,var(--space-24))}
.section-head{margin-bottom:var(--space-12)}

/* --- Bereichs-Teaser (Farbwechsel sichtbar machen) ----------------------- */
.teaser{display:block;text-decoration:none;color:inherit}
.teaser .wrap{padding-block:clamp(48px,7vw,80px)}
.teaser .inner{display:grid;gap:var(--space-8);align-items:end}
@media (min-width:820px){ .teaser .inner{grid-template-columns:1fr auto} }
.teaser .go{font-size:13px;letter-spacing:.06em;color:var(--deep-accent);
  border-bottom:1px solid var(--deep-accent);padding-bottom:var(--space-1);
  justify-self:start;white-space:nowrap}
.teaser:hover .go{color:var(--deep-ink)}

/* --- Listenkopf + Zeilen ------------------------------------------------- */
.list-head{display:flex;align-items:baseline;gap:var(--space-3);
  padding-bottom:var(--space-2);border-bottom:var(--rule-group) solid var(--rule-strong)}
.list-head h3{margin:0;font-size:20px;font-weight:500;line-height:1.2}
.list-head .lat{font-family:var(--font-serif);font-style:italic;font-size:15px;
  color:var(--ink-muted)}
.list-head .count{margin-left:auto;color:var(--accent);white-space:nowrap}
.list{margin:0;padding:0;list-style:none}
.gruppe{margin-bottom:var(--space-12)}
.gruppe .note{margin:var(--space-3) 0 0;font-size:13px;color:var(--ink-muted)}

/* Kanal-Zeilen (Startseite) */
.row{border-bottom:var(--rule-hair) solid var(--border)}
.row a{display:grid;grid-template-columns:1fr;gap:var(--space-2) var(--space-6);
  padding:var(--space-6) 0;text-decoration:none;color:inherit}
@media (min-width:720px){ .row a{grid-template-columns:1fr 210px;align-items:baseline} }
.row .name{font-family:var(--font-serif);font-size:clamp(19px,2.2vw,22px);line-height:1.3}
.row .desc{margin:var(--space-2) 0 0;font-size:14px;line-height:1.6;color:var(--ink-muted);
  max-width:56ch}
.row .handle{font-size:13px;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap}
@media (min-width:720px){ .row .handle{text-align:right} }
.row:hover{border-bottom-color:var(--rule-strong)}
.row:hover .name{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:var(--accent)}

/* Bestands-Zeilen (Vivarium) */
.tier{display:grid;grid-template-columns:1fr;gap:var(--space-1) var(--space-6);
  padding:var(--space-3) 0;border-bottom:var(--rule-hair) solid var(--border)}
@media (min-width:720px){
  .tier{grid-template-columns:150px 1fr 150px;align-items:baseline}
  .tier.ohne-code{grid-template-columns:1fr 220px}
  .tier .rechts{text-align:right}
}
.tier .code{font-size:12px;letter-spacing:.02em;color:var(--ink-faint);white-space:nowrap}
.tier .art{font-family:var(--font-serif);font-style:italic;font-size:17px;line-height:1.45}
.tier .art .form{font-family:var(--font-sans);font-style:normal;font-size:13px;
  color:var(--ink-muted)}
.tier .rechts{font-weight:500;font-size:15px}
.tier .rechts.meta{font-weight:400;font-size:13px;color:var(--ink-muted)}
.tier:last-child{border-bottom:0}

/* Gattungsblöcke (Asseln) */
.gattung{margin-top:var(--space-8)}
.gattung-kopf{display:flex;align-items:baseline;gap:var(--space-3);
  padding-bottom:var(--space-2);border-bottom:var(--rule-hair) solid var(--border)}
.gattung-kopf h4{margin:0;font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:19px;line-height:1.3}
.gattung-kopf .n{margin-left:auto;color:var(--accent)}
.formen{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr;gap:0 var(--space-8)}
@media (min-width:760px){ .formen{grid-template-columns:1fr 1fr} }
.formen li{font-family:var(--font-serif);font-style:italic;font-size:15px;
  padding:var(--space-2) 0;border-bottom:var(--rule-hair) solid var(--border-faint)}
.formen li .q{font-family:var(--font-sans);font-style:normal;font-size:13.5px;
  color:var(--ink-muted)}

/* --- Filter -------------------------------------------------------------- */
.filter{max-width:420px}
.filter label{display:block;margin-bottom:var(--space-2);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.filter input{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:var(--rule-hair) solid var(--rule-strong);
  padding:var(--space-2) 0;border-radius:0}
.filter input::placeholder{color:var(--ink-faint)}
.filter .treffer{margin-top:var(--space-2);font-size:13px;color:var(--ink-muted)}
[hidden]{display:none!important}

/* --- Schaltflächen ------------------------------------------------------- */
.btn{display:inline-block;font-family:inherit;font-size:14px;font-weight:500;
  letter-spacing:.04em;padding:14px 26px;border:1px solid transparent;border-radius:0;
  text-decoration:none;cursor:pointer;transition:background .15s ease-out,color .15s ease-out}
.btn-hell{background:var(--deep-ink);color:var(--surface-deep);border-color:var(--deep-ink)}
.btn-hell:hover{background:var(--deep-accent);border-color:var(--deep-accent);
  color:var(--surface-deep)}
.btn-rahmen{background:none;color:var(--ink);border-color:var(--border)}
.btn-rahmen:hover{border-color:var(--rule-strong)}

/* --- Fließtext (Rechtsseiten) -------------------------------------------- */
.prose{max-width:var(--layout-measure)}
.prose h2{font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1.25;
  margin:var(--space-16) 0 var(--space-4);padding-bottom:var(--space-2);
  border-bottom:var(--rule-hair) solid var(--border)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 var(--space-4)}
.prose ul{margin:0 0 var(--space-4);padding-left:1.1em}
.prose li{margin-bottom:var(--space-2)}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:500}
.address{font-style:normal;line-height:1.8}
.kv{display:grid;gap:var(--space-1);margin-bottom:var(--space-6)}
.kv .k{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent)}
.kv .hint{font-size:13px;color:var(--ink-muted)}

/* --- Panel --------------------------------------------------------------- */
.panel{background:var(--surface-panel);padding:var(--space-8);margin-top:var(--space-16);
  max-width:var(--layout-measure)}
.panel .label{margin-bottom:var(--space-4)}
.panel p{margin:0;font-size:15px;line-height:1.7}
.panel p + p{margin-top:var(--space-4)}

/* --- Fußzeile ------------------------------------------------------------ */
.site-foot .wrap{padding-block:var(--space-16)}
.site-foot .top{display:flex;flex-wrap:wrap;gap:var(--space-6);
  justify-content:space-between;align-items:baseline}
.site-foot .handle{font-family:var(--font-serif);font-size:24px;color:var(--deep-accent);
  text-decoration:none}
.site-foot .handle:hover{text-decoration:underline}
.site-foot nav{display:flex;gap:var(--space-6);flex-wrap:wrap}
.site-foot nav a{color:var(--deep-ink-muted);text-decoration:none;font-size:13px}
.site-foot nav a:hover{color:var(--deep-accent)}
.site-foot .bottom{margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--deep-border);display:flex;flex-wrap:wrap;gap:var(--space-4);
  justify-content:space-between;color:var(--deep-ink-faint)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* --- Bilder -------------------------------------------------------------- */
figure{margin:0}
figcaption{margin-top:var(--space-3);font-size:13px;line-height:1.5;color:var(--ink-muted)}
figcaption .art{font-family:var(--font-serif);font-style:italic;font-size:15px;color:var(--ink);
  display:block;margin-bottom:var(--space-1)}
.dark figcaption{color:var(--deep-ink-muted)}
.dark figcaption .art{color:var(--deep-ink)}

.bild-breit{margin-bottom:var(--space-16)}
.bild-breit img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){ .bild-breit img{aspect-ratio:4/5} }

/* --- Galerie ------------------------------------------------------------- */
.galerie{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:1fr}
@media (min-width:600px){ .galerie{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .galerie{grid-template-columns:1fr 1fr 1fr} }
.galerie img{width:100%;aspect-ratio:3/4;object-fit:cover}
.galerie figure.hoch img{aspect-ratio:3/4}

/* --- DIY-Schritte -------------------------------------------------------- */
.schritte{counter-reset:schritt;margin:0;padding:0;list-style:none}
.schritt{display:grid;gap:var(--space-6);grid-template-columns:1fr;
  padding:var(--space-8) 0;border-top:var(--rule-hair) solid var(--border)}
@media (min-width:760px){
  .schritt{grid-template-columns:260px 1fr;gap:var(--space-12);align-items:start}
  .schritt.gedreht{grid-template-columns:1fr 260px}
  .schritt.gedreht .bild{order:2}
}
.schritt:last-child{border-bottom:var(--rule-hair) solid var(--border)}
.schritt img{width:100%;aspect-ratio:3/4;object-fit:cover}
.schritt h3{margin:0 0 var(--space-3);font-family:var(--font-serif);font-weight:400;
  font-size:22px;line-height:1.25}
.schritt h3::before{counter-increment:schritt;content:counter(schritt,decimal-leading-zero);
  display:block;font-family:var(--font-sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;color:var(--accent);margin-bottom:var(--space-2)}
.schritt p{margin:0;max-width:56ch}
.schritt p + p{margin-top:var(--space-3)}

/* --- Hobby-Hinweis ------------------------------------------------------- */
.hinweis{background:var(--surface-panel);padding:var(--space-8);max-width:var(--layout-measure)}
.hinweis .label{margin-bottom:var(--space-4)}
.hinweis p{margin:0;font-size:15px;line-height:1.7}
.hinweis p + p{margin-top:var(--space-4)}
.dark .hinweis{background:transparent;border:1px solid var(--deep-border);
  color:var(--deep-ink-muted)}
.dark .hinweis .label{color:var(--deep-accent)}

/* --- Filter (sitzt in der .wrap und erbt deren Seitenrand) --------------- */
.filter{margin:0 0 var(--space-12)}

/* --- Video --------------------------------------------------------------- */
.video video{width:100%;display:block;background:#0e1a13;border-radius:0}
.galerie .video video{aspect-ratio:3/4;object-fit:cover}
.video-breit video{width:100%;max-height:78vh;object-fit:cover}

/* --- Legende (Zahlenschema) ---------------------------------------------- */
.legende{margin:var(--space-4) 0 0;display:grid;grid-template-columns:auto 1fr;
  gap:var(--space-2) var(--space-6);align-items:baseline}
.legende dt{font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--accent-ink);
  white-space:nowrap}
.legende dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink-muted)}

/* --- Teaser mit zwei Zielen ---------------------------------------------- */
a.go{text-decoration:none;display:inline-block}
.teaser-links{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-8)}
.teaser-links .go{border-bottom:1px solid var(--deep-accent)}
.teaser-links .go:hover{color:var(--deep-ink);border-bottom-color:var(--deep-ink)}

/* --- Projektkopf auf der DIY-Seite --------------------------------------- */
.projekt{margin-bottom:var(--space-24)}
.projekt:last-child{margin-bottom:0}

/* --- Artenschutz-Markierung ---------------------------------------------- */
.schutz{display:inline-block;margin-left:var(--space-2);padding:0 6px;font-family:var(--font-sans);
  font-style:normal;font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.7;
  text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent);
  text-decoration:none;vertical-align:2px;white-space:nowrap}
a.schutz:hover{background:var(--accent);color:var(--surface)}
.schutz-still{margin-left:0}
.tier .art a.portrait-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--accent);text-underline-offset:3px}
.tier .art a.portrait-link:hover{color:var(--accent-ink)}

/* --- Artenporträt -------------------------------------------------------- */
.portraet-grid{display:grid;gap:var(--space-12);align-items:start}
@media (min-width:880px){ .portraet-grid{grid-template-columns:1fr 380px;gap:var(--space-16)} }
.tafel img{width:100%;background:#f7f3ea}
.tafel figcaption{color:var(--deep-ink-faint)}
.kennung{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--deep-border);
  display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kennung .k{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--deep-ink-faint)}
.kennung .v{margin-top:var(--space-1);font-family:var(--font-serif);font-size:19px;color:var(--deep-ink)}
.kennung .v.code{font-family:var(--font-sans);font-size:14px;letter-spacing:.02em}

.kapitel{max-width:780px;margin-bottom:var(--space-16)}
.kapitel:last-child{margin-bottom:0}
.kapitel h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(24px,3.2vw,30px);
  line-height:1.2;margin:var(--space-3) 0 var(--space-6)}
.kapitel p{margin:0 0 var(--space-4);max-width:var(--layout-measure)}

.steckbrief{margin:0}
.steckbrief div{display:grid;grid-template-columns:170px 1fr;gap:var(--space-4);
  padding:var(--space-3) 0;border-bottom:var(--rule-hair) solid var(--border)}
.steckbrief div:first-child{border-top:var(--rule-group) solid var(--rule-strong)}
.steckbrief dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);padding-top:4px}
.steckbrief dd{margin:0}
@media (max-width:560px){ .steckbrief div{grid-template-columns:1fr;gap:var(--space-1)} }

.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:var(--rule-group) solid var(--rule-strong);margin-bottom:var(--space-8)}
.werte > div{padding:var(--space-6) var(--space-6) var(--space-6) 0;
  border-bottom:var(--rule-hair) solid var(--border)}
.werte .n{font-family:var(--font-serif);font-size:30px;line-height:1.1}
.werte .l{margin-top:var(--space-2);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.werte .h{margin-top:var(--space-2);font-size:13px;line-height:1.5;color:var(--ink-muted)}

.quellen{margin:0;padding-left:1.1em;font-size:14px;line-height:1.6;color:var(--ink-muted)}
.quellen li{margin-bottom:var(--space-2)}
.quellen li::marker{color:var(--accent)}

/* --- Artenübersicht ------------------------------------------------------ */
.karten{display:grid;gap:var(--space-12) var(--space-8);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.karte{display:block;text-decoration:none;color:inherit;padding-bottom:var(--space-4);
  border-bottom:var(--rule-hair) solid var(--border)}
.karte img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#f7f3ea}
.karte .name{display:block;margin-top:var(--space-4);font-family:var(--font-serif);
  font-style:italic;font-size:21px;line-height:1.25}
.karte .meta{display:block;margin-top:var(--space-2);font-size:13px;color:var(--ink-muted)}
.karte .zeichen{margin-top:var(--space-3)}
.karte:hover{border-bottom-color:var(--rule-strong)}
.karte:hover .name{text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--accent);text-underline-offset:4px}

/* --- Artenschutz-Seite --------------------------------------------------- */
.kasten-reihe{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin:var(--space-6) 0 var(--space-8)}
.kasten{background:var(--surface-panel);padding:var(--space-6)}
.kasten .label{margin-bottom:var(--space-3)}
.kasten p{margin:0;font-size:15px;line-height:1.6}

/* --- Abgabe -------------------------------------------------------------- */
.angebote{margin:0;padding:0;list-style:none;border-top:var(--rule-group) solid var(--rule-strong)}
.angebot{display:grid;gap:var(--space-4) var(--space-12);grid-template-columns:1fr;
  padding:var(--space-8) 0;border-bottom:var(--rule-hair) solid var(--border)}
@media (min-width:800px){ .angebot{grid-template-columns:280px 1fr} }
.angebot .gruppe-label{margin-bottom:var(--space-3)}
.angebot h3{margin:0;font-family:var(--font-serif);font-weight:400;font-size:24px;line-height:1.2}
.angebot .sci-name{display:block;margin-top:var(--space-2);font-family:var(--font-serif);
  font-style:italic;font-size:16px;color:var(--ink-muted)}
.angebot .form{font-family:var(--font-sans);font-style:normal;font-size:14px}
.angebot .was{margin:0 0 var(--space-3);font-weight:500}
.angebot p{margin:0 0 var(--space-3);max-width:62ch}
.tipp{margin-top:var(--space-4);padding:var(--space-1) 0 var(--space-1) var(--space-4);
  border-left:var(--rule-accent) solid var(--accent);font-size:14px;line-height:1.6;
  color:var(--ink-muted);max-width:62ch}
.tipp strong{color:var(--ink);font-weight:500}
.stand{margin-top:var(--space-4);font-size:13px;color:var(--ink-muted)}
.kontakt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-8);
  margin-top:var(--space-8)}
.kontakt .handle-gross{font-family:var(--font-serif);font-size:24px;color:var(--deep-accent);
  text-decoration:none}
.kontakt .handle-gross:hover{text-decoration:underline}
.galerie-zwei{display:grid;gap:var(--space-8) var(--space-6);grid-template-columns:1fr;margin-bottom:var(--space-16)}
@media (min-width:640px){ .galerie-zwei{grid-template-columns:1fr 1fr} }
.galerie-zwei img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* --- Fußzeile: Kontakt --------------------------------------------------- */
.foot-kontakt{display:flex;flex-direction:column;gap:var(--space-2)}
.foot-mail{font-size:14px;color:var(--deep-ink-muted);text-decoration:none}
.foot-mail:hover{color:var(--deep-accent);text-decoration:underline}

/* --- Sprungmarken auf langen Seiten -------------------------------------- */
.seitennav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin-top:var(--space-8);
  padding-top:var(--space-6);border-top:1px solid var(--deep-border)}
.seitennav a{font-size:13px;letter-spacing:.06em;color:var(--deep-ink-muted);text-decoration:none}
.seitennav a:hover{color:var(--deep-accent)}
[id]{scroll-margin-top:var(--space-6)}

/* --- Versandregeln ------------------------------------------------------- */
.regeln{margin:0;padding:0;list-style:none;border-top:var(--rule-group) solid var(--rule-strong)}
.regeln li{display:grid;grid-template-columns:1fr;gap:var(--space-1) var(--space-12);
  padding:var(--space-6) 0;border-bottom:var(--rule-hair) solid var(--border)}
@media (min-width:800px){ .regeln li{grid-template-columns:280px 1fr} }
.regeln .titel{font-family:var(--font-serif);font-size:20px;line-height:1.3}
.regeln p{margin:0;max-width:62ch}
.kontakt .handle-gross{font-size:clamp(17px,4.6vw,24px);overflow-wrap:anywhere}

/* --- Legende / Glossar --------------------------------------------------- */
.glossar{margin:0 0 var(--space-4)}
.glossar div{display:grid;grid-template-columns:130px 1fr;gap:var(--space-2) var(--space-6);
  padding:var(--space-4) 0;border-bottom:var(--rule-hair) solid var(--border)}
.glossar div:first-child{border-top:var(--rule-group) solid var(--rule-strong)}
.glossar dt{font-family:var(--font-sans);font-size:17px;font-weight:500;line-height:1.35;
  color:var(--accent-ink)}
.glossar dt em{font-family:var(--font-serif);font-weight:400}
.glossar dd{margin:0;max-width:60ch}
.glossar dd .bsp{display:block;margin-top:var(--space-1);font-size:13px;color:var(--ink-muted)}
@media (max-width:520px){ .glossar div{grid-template-columns:1fr;gap:var(--space-1)} }
.kapitel .glossar + .tipp{margin-top:var(--space-2)}
.ki-hinweis{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--deep-border)}
.ki-hinweis:hover{color:var(--deep-accent)}