/* =========================================================================
   Schuetze was du liebst (SWDL), Designsystem
   Farben aus dem Vereinslogo: Petrolblau #15547F · Blattgrün #9AB45D · Weiß
   Formensprache: rund, weich, warm. Keine harten Kanten.
   ========================================================================= */

/* ------------------------------------------------------------- Schriften */
@font-face {
  font-family: 'Baloo';
  src: url('/static/fonts/baloo-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo';
  src: url('/static/fonts/baloo-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/nunito-latin.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('/static/fonts/nunito-latin-ext.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  src: url('/static/fonts/caveat-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  src: url('/static/fonts/caveat-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens */
:root {
  --blau:        #15547F;
  --blau-hell:   #3C86B8;
  --blau-tief:   #124A70;
  --blau-nacht:  #0E3A55;
  --gruen:       #9AB45D;
  --gruen-tief:  #6E8C36;
  --gruen-hell:  #C6D9A0;
  --gruen-blass: #E8EFD9;
  --blau-blass:  #E3EFF6;
  --signal:      #D2724D;
  --flieder:     #7C6A96;
  --petrol:      #1F6F6B;
  --pflaume:     #7A3B62;
  --signal-tief: #B05634;

  --papier:      #F8F9F4;
  --papier-2:    #F0F4E7;
  --sand:        #E4EBD5;
  --tinte:       #16323F;
  --tinte-weich: #5C7280;

  --bg:          var(--papier);
  --bg-2:        var(--papier-2);
  --flaeche:     #FFFFFF;
  --text:        var(--tinte);
  --text-weich:  var(--tinte-weich);
  --linie:       #DFE7D2;
  --linie-stark: #BCCBA4;
  --akzent:      var(--blau);
  --akzent-text: #FFFFFF;

  /* Rundungen, die halbe Miete fuer den weichen Eindruck */
  --r-klein:  10px;
  --r:        18px;
  --r-gross:  28px;
  --r-riesig: 40px;
  --r-pille:  999px;

  --schatten:       0 10px 28px -18px rgba(18, 60, 84, .40);
  --schatten-weich: 0 22px 48px -28px rgba(18, 60, 84, .45);
  --schatten-tief:  0 34px 70px -34px rgba(18, 60, 84, .55);

  --raum-1: .5rem;  --raum-2: 1rem;   --raum-3: 1.5rem;
  --raum-4: 2.5rem; --raum-5: 4rem;   --raum-6: 6.5rem;

  --breite: 1280px;
  --breite-eng: 780px;

  --display: 'Baloo', 'Trebuchet MS', system-ui, sans-serif;
  --sans:    'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hand:    'Caveat', 'Segoe Script', cursive;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --schnell: .25s var(--ease);
  --ruhig: .55s var(--ease);

  /* Blattform als Zeichen vor den handschriftlichen Anreißern */
  --zeichen-blatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 2.4C10.2 3 3.2 9.4 3.2 18.8c0 .6.1 1.2.3 1.7C6 13.7 10.4 9.2 16.4 6.9c-5.4 3.3-9 8.4-10.4 14.4.9.4 1.9.6 2.9.6C18 21.9 22.4 14 21.6 2.4Z'/%3E%3C/svg%3E");
}

[data-theme='dunkel'] {
  --flieder:     #A493BE;
  --bg:          #0B2231;
  --bg-2:        #102E40;
  --flaeche:     #143648;
  --text:        #E9F1F3;
  --text-weich:  #A3BCC7;
  --linie:       #23495D;
  --linie-stark: #35657E;
  --sand:        #1A4055;
  --gruen-blass: #1D4235;
  --blau-blass:  #163B50;
  --akzent:      var(--gruen);
  --akzent-text: #0B2231;
  --schatten:       0 10px 28px -18px rgba(0, 0, 0, .7);
  --schatten-weich: 0 22px 48px -28px rgba(0, 0, 0, .75);
  --schatten-tief:  0 34px 70px -34px rgba(0, 0, 0, .8);
}

/* ----------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .4s var(--ease), color .4s var(--ease);
}

img, video { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; display: inline-block; vertical-align: -.15em; flex: none; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--gruen); color: #16240A; }

:focus-visible { outline: 3px solid var(--blau-hell); outline-offset: 3px; border-radius: var(--r-klein); }
[data-theme='dunkel'] :focus-visible { outline-color: var(--gruen); }

/* ----------------------------------------------------------- Typografie */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.9rem); line-height: 1.05; }
h2 { font-size: clamp(1.95rem, 1.2rem + 2.8vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); }
h4 { font-size: 1.15rem; font-weight: 700; }

/* Zwischenueberschriften in einer Textspalte duerfen nicht groesser sein als
   die Seitenueberschrift. Ohne diese Regel erben sie die grosse h2-Groesse,
   die fuer Abschnittskoepfe gedacht ist. */
.stapel h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.gross { font-size: clamp(1.08rem, 1rem + .5vw, 1.28rem); line-height: 1.62; color: var(--text-weich); }
.lead  { font-size: clamp(1.2rem, 1.02rem + .9vw, 1.7rem); line-height: 1.42;
         font-weight: 400; color: var(--text); letter-spacing: -.005em; }
.klein { font-size: .9rem; }
.mini  { font-size: .8rem; }
.weich { color: var(--text-weich); }

/* Handschriftlicher Anreißer über den Überschriften, mit kleinem Blatt davor */
.kicker {
  font-family: var(--hand);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--gruen-tief);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .7rem;
  text-transform: none;
}
[data-theme='dunkel'] .kicker { color: var(--gruen); }
.kicker::before {
  content: '';
  width: 1.05em; height: 1.05em; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--zeichen-blatt) center / contain no-repeat;
  mask: var(--zeichen-blatt) center / contain no-repeat;
  transform: rotate(-8deg);
}

.betont { color: var(--blau); font-weight: 800; }
[data-theme='dunkel'] .betont { color: var(--gruen-hell); }

.hand { font-family: var(--hand); font-weight: 600; }

/* ------------------------------------------------------------- Struktur */
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 3rem); }
.eng    { max-width: var(--breite-eng); }
.abschnitt { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
.abschnitt--knapp { padding-block: clamp(2.2rem, 4vw, 3.5rem); }

/* Weiche Flächen bekommen große Rundungen statt Kanten */
.abschnitt--flaeche {
  background: var(--bg-2);
  border-radius: var(--r-riesig);
  margin-inline: clamp(.6rem, 2vw, 1.5rem);
}
.abschnitt--tief {
  background: linear-gradient(160deg, var(--blau) 0%, var(--blau-nacht) 65%, #0A2C40 100%);
  color: #EAF3F6;
  border-radius: var(--r-riesig);
  margin-inline: clamp(.6rem, 2vw, 1.5rem);
  overflow: hidden;
}
.abschnitt--tief .weich, .abschnitt--tief .gross { color: #B6D0DC; }
.abschnitt--tief .kicker { color: var(--gruen-hell); }
.abschnitt--tief h1, .abschnitt--tief h2, .abschnitt--tief h3 { color: #fff; }

.trenner { height: 2px; background: var(--linie); border: 0; margin: 0; border-radius: 2px; }

.kopf { display: grid; gap: var(--raum-3); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .kopf { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: var(--raum-5); }
  .kopf--schmal { grid-template-columns: minmax(0, 1fr); }
}
.kopf__zahl {
  font-family: var(--hand);
  font-size: 1.4rem; font-weight: 600;
  color: var(--gruen-tief);
  margin-bottom: .3rem;
  display: block;
}
[data-theme='dunkel'] .kopf__zahl { color: var(--gruen); }

/* --------------------------------------------------------------- Raster */
.raster { display: grid; gap: clamp(1.3rem, 2.6vw, 2.2rem); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Eine einzelne Karte soll nicht ueber die ganze Breite ziehen. Am Anfang
   gibt es oft nur eine Aktion, und die soll trotzdem nach Karte aussehen. */
.raster--2 > :only-child, .raster--3 > :only-child { max-width: 620px; }
.raster--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* -------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--blau);
  --btn-text: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.75rem;
  background: var(--btn-bg); color: var(--btn-text);
  font-family: var(--sans); font-size: .97rem; font-weight: 800;
  letter-spacing: .005em;
  border: 2px solid var(--btn-bg);
  border-radius: var(--r-pille);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--schatten);
  transition: transform var(--schnell), box-shadow var(--schnell), background var(--schnell),
              color var(--schnell), border-color var(--schnell);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--schatten-weich); }
.btn:active { transform: translateY(-1px); }
.btn--gruen { --btn-bg: var(--gruen); --btn-text: #223107; }
.btn--geist { --btn-bg: transparent; --btn-text: var(--text); border-color: var(--linie-stark); box-shadow: none; }
.btn--geist:hover { --btn-bg: var(--text); --btn-text: var(--bg); border-color: var(--text); }
.btn--hell { --btn-bg: #fff; --btn-text: var(--blau-tief); }
.btn--klein { padding: .58rem 1.15rem; font-size: .86rem; }
/* Ein Knopf ueber die volle Breite braucht kein nowrap. Auf schmalen Handys
   zwang die lange Beschriftung sonst die ganze Formularspalte breiter als den
   Bildschirm. */
.btn--voll { width: 100%; white-space: normal; text-align: center; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn__pfeil { transition: transform var(--schnell); }
.btn:hover .btn__pfeil { transform: translateX(4px); }

.link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .95rem; text-decoration: none;
  color: var(--blau); padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
  border-radius: 3px;
  transition: background-size var(--schnell), color var(--schnell);
}
.link:hover { background-size: 0% 2px; }
[data-theme='dunkel'] .link { color: var(--gruen-hell); }
.abschnitt--tief .link { color: var(--gruen-hell); }

.link-inline { color: var(--blau); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 2px; }
[data-theme='dunkel'] .link-inline { color: var(--gruen-hell); }

/* Vereinszeichen als grosse, ruhige Flaeche im Hintergrund. Sorgt fuer
   Wiedererkennung, ohne dass noch ein Kasten mehr auf der Seite steht. */
.zeichenflaeche { position: relative; overflow: hidden; }
.zeichenflaeche::before {
  content: ''; position: absolute; pointer-events: none;
  right: clamp(-6rem, -4vw, -1rem); top: 50%; translate: 0 -50%;
  width: clamp(300px, 42vw, 620px); aspect-ratio: 707 / 1024;
  background: var(--blau);
  -webkit-mask: url('/static/img/logo-mark.png') no-repeat center / contain;
  mask: url('/static/img/logo-mark.png') no-repeat center / contain;
  opacity: .07;
}
[data-theme='dunkel'] .zeichenflaeche::before { background: var(--gruen); opacity: .09; }
/* Auf den dunklen Abschluss-Flaechen sitzt das Zeichen links und hell. */
.zeichenflaeche--hell::before,
[data-theme='dunkel'] .zeichenflaeche--hell::before {
  background: #fff; opacity: .05; right: auto; left: clamp(-8rem, -5vw, -2rem);
}
@media (max-width: 860px) {
  .zeichenflaeche::before { right: -22%; opacity: .05; width: 70vw; }
}
@media (prefers-reduced-motion: no-preference) {
  .zeichenflaeche::before { transition: opacity .6s var(--ease); }
}

/* --------------------------------------------------------------- Marke */
.marke { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; }
.marke img { height: 48px; width: auto; }
.kopfzeile .marke img {
  height: 64px;
  filter: drop-shadow(0 2px 6px rgba(14, 58, 85, .18));
  transition: transform var(--schnell);
}
.kopfzeile .marke:hover img { transform: rotate(-3deg) scale(1.04); }
.kopfzeile .marke__name { font-size: 1.2rem; }
.marke__text { display: flex; flex-direction: column; line-height: 1.08; }
.marke__name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.005em; white-space: nowrap; }
.marke__zusatz { font-family: var(--hand); font-size: .95rem; color: var(--text-weich); font-weight: 600; }
.marke__kurz {
  align-self: start; margin-top: .15rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .32em;
  color: var(--gruen-tief);
}
[data-theme='dunkel'] .marke__kurz { color: var(--gruen); }
.marke__kurz--hell { color: var(--gruen-hell); }

/* ------------------------------------------------------------- Kopfzeile */
.kopfzeile {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  transition: box-shadow var(--schnell);
}
.kopfzeile.ist-gescrollt { box-shadow: 0 6px 24px -18px rgba(18, 60, 84, .6); }
.kopfzeile__innen { display: flex; align-items: center; gap: var(--raum-3); min-height: 92px; }
/* Die Kopfzeile darf breiter laufen als der Textbereich. Sonst kleben Marke
   und Navigation auf grossen Bildschirmen aneinander, und das aufgeklappte
   Menue steht direkt neben dem Vereinsnamen. */
@media (min-width: 1160px) { .kopfzeile .huelle { max-width: 1440px; } }
@media (max-width: 560px) {
  .kopfzeile .marke img { height: 50px; }
  .kopfzeile .marke__zusatz { display: none; }
  .kopfzeile .marke__name { font-size: 1rem; max-width: 11ch; line-height: 1.12; white-space: normal; }
  .kopfzeile__innen { min-height: 68px; gap: .6rem; }
}

.hauptnav { display: none; margin-left: auto; }
@media (min-width: 1160px) { .hauptnav { display: flex; align-items: center; gap: .15rem; } }

.hauptnav__punkt { position: relative; }
.hauptnav__link {
  display: flex; align-items: center; gap: .3rem;
  padding: .62rem .95rem; font-size: .96rem; font-weight: 700;
  text-decoration: none; border-radius: var(--r-pille);
  color: var(--text); transition: color var(--schnell), background var(--schnell);
}
.hauptnav__link:hover, .hauptnav__punkt:hover .hauptnav__link { color: var(--blau); background: var(--gruen-blass); }
[data-theme='dunkel'] .hauptnav__link:hover { color: var(--gruen-hell); }
.hauptnav__link.ist-aktiv { color: var(--blau); background: var(--blau-blass); }
[data-theme='dunkel'] .hauptnav__link.ist-aktiv { color: var(--gruen-hell); }
.hauptnav__pfeil { width: 9px; height: 9px; opacity: .5; transition: transform var(--schnell); }
.hauptnav__punkt:hover .hauptnav__pfeil { transform: rotate(180deg); }

.klappmenue {
  /* Haengt an der linken Kante des Reiters, nicht mittig darunter. Mittig
     wandert das Menue bei den ersten Reitern ueber das Logo. */
  position: absolute; top: calc(100% + .55rem); left: 0;
  min-width: 480px; max-width: min(480px, 92vw); padding: .7rem;
  background: var(--flaeche);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten-tief);
  display: grid; grid-template-columns: 1fr 1fr; gap: .2rem;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity var(--schnell), translate var(--schnell), visibility var(--schnell);
}
.hauptnav__punkt:hover .klappmenue,
.hauptnav__punkt:focus-within .klappmenue { opacity: 1; visibility: visible; translate: 0 0; }
/* Der letzte Reiter klappt nach links auf, sonst laeuft er aus dem Bild. */
.hauptnav__punkt:last-child .klappmenue { left: auto; right: 0; }
/* Das erste Menue bekommt zusaetzlich Abstand, damit zwischen ihm und dem
   Vereinsnamen sichtbar Luft bleibt. */
.hauptnav__punkt:first-child .klappmenue { left: 1.6rem; }
@media (max-width: 1319px) { .klappmenue { min-width: 380px; } }
/* Sicherheitsabstand: die Marke bekommt eine eigene Ebene, damit sie auch dann
   lesbar bleibt, wenn ein Klappmenue wider Erwarten zu weit nach links reicht. */
.kopfzeile .marke { position: relative; z-index: 3; }
.hauptnav { position: relative; z-index: 2; }
.klappmenue__link {
  display: block; padding: .75rem .9rem; text-decoration: none;
  border-radius: var(--r); transition: background var(--schnell);
}
.klappmenue__link:hover { background: var(--gruen-blass); }
.klappmenue__titel { font-weight: 800; font-size: .93rem; display: block; }
.klappmenue__text { font-size: .8rem; color: var(--text-weich); line-height: 1.45; display: block; margin-top: .1rem; }

.kopf-aktionen { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1160px) { .kopf-aktionen { margin-left: .75rem; } }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--flaeche); border: 2px solid transparent;
  border-radius: 50%; cursor: pointer; color: var(--text);
  box-shadow: var(--schatten);
  transition: background var(--schnell), color var(--schnell), transform var(--schnell);
}
.icon-btn:hover { background: var(--gruen-blass); transform: translateY(-2px); }
.icon-btn svg { width: 18px; height: 18px; }
.bei-dunkel { display: none; }
[data-theme='dunkel'] .bei-hell { display: none; }
[data-theme='dunkel'] .bei-dunkel { display: inline-grid; }

.icon-btn.ist-aktiv { background: var(--blau-blass); color: var(--blau); }
[data-theme='dunkel'] .icon-btn.ist-aktiv { color: var(--gruen-hell); }

/* Kontakt steckt in der Kopfleiste als Symbol. Auf schmalen Geraeten steht er
   im aufklappbaren Menue als Text, dort ist Platz genug. */
.nur-breit { display: none; }
@media (min-width: 1160px) { .nur-breit { display: inline-grid; } }

.spenden-btn { display: none; }
@media (min-width: 720px) { .spenden-btn { display: inline-flex; } }

/* Zwischen 1160 und 1400 Pixeln ist die Kopfzeile knapp. Statt Punkte zu
   verstecken wird alles ein Stueck enger gestellt. */
@media (min-width: 1160px) and (max-width: 1399px) {
  .kopfzeile__innen { gap: .9rem; }
  .hauptnav { gap: 0; }
  .hauptnav__link { padding: .55rem .58rem; font-size: .9rem; }
  .kopf-aktionen { gap: .35rem; margin-left: .35rem; }
  .kopf-aktionen .icon-btn { width: 40px; height: 40px; }
  .spenden-btn { padding-inline: .95rem; }
  .spenden-btn .lang { display: none; }
}

.burger { display: inline-grid; }
@media (min-width: 1160px) { .burger { display: none; } }

.mobilmenue {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
}
.mobilmenue.ist-offen { transform: none; }
.mobilmenue__kopf { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.15rem, 4vw, 3rem); }
.mobilmenue__inhalt { padding: 1rem clamp(1.15rem, 4vw, 3rem) 3rem; }
.mobilgruppe { padding: .3rem 0; }
.mobilgruppe__titel {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--flaeche); border: 0; padding: .95rem 1.2rem; cursor: pointer; color: inherit;
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  border-radius: var(--r); box-shadow: var(--schatten); margin-bottom: .1rem;
}
.mobilgruppe__liste { display: none; padding: .4rem 0 .6rem; }
.mobilgruppe.ist-offen .mobilgruppe__liste { display: grid; gap: .15rem; }
.mobilgruppe__liste a { padding: .6rem 1.2rem; text-decoration: none; font-size: .96rem;
  border-radius: var(--r-pille); }
.mobilgruppe__liste a:hover { background: var(--gruen-blass); color: var(--blau); }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative; min-height: min(86vh, 880px); display: grid; isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-riesig);
  margin: 0 clamp(.6rem, 2vw, 1.5rem) clamp(.6rem, 2vw, 1.5rem);
}
.hero__buehne { position: absolute; inset: 0; z-index: -2; }
.hero__folie { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__folie.ist-aktiv { opacity: 1; }
.hero__folie img, .hero__folie video { width: 100%; height: 100%; object-fit: cover; }
.hero__folie.ist-aktiv img { animation: kenburns 10s var(--ease) forwards; }

/* Bilder, die nicht ins Querformat passen: vollständig zeigen statt beschneiden.
   Dahinter liegt eine Fläche in den Vereinsfarben. */
.hero__folie--voll {
  background: linear-gradient(150deg, #17608C, #0E3A55 62%, #12455F);
}
.hero__folie--voll img, .hero__folie--voll video { object-fit: contain; }
.hero__folie--voll.ist-aktiv img { animation: none; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.13); } }

/* Weicher grüner Schleier statt harter Abdunklung */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(14,58,85,.90) 0%, rgba(20,74,96,.72) 38%, rgba(110,140,54,.30) 72%, rgba(154,180,93,.20) 100%),
    linear-gradient(to top, rgba(11,40,58,.75), transparent 58%);
}

.hero__inhalt { align-self: end; padding-block: clamp(3rem, 8vw, 6rem); color: #fff; position: relative; }
.hero__text { max-width: 46ch; }
.hero h1 { color: #fff; margin-bottom: .3em; }
.hero h1 em {
  font-style: normal; display: block;
  font-family: var(--hand);
  font-size: .82em; font-weight: 600;
  color: var(--gruen-hell);
  margin-top: .12em;
}
.hero .kicker { color: var(--gruen-hell); }
.hero__untertitel { font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem); color: #D6E5EB; max-width: 46ch; line-height: 1.62; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero__leiste {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding: .9rem 1.3rem;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-radius: var(--r-pille);
  width: fit-content;
}
.hero__striche { display: flex; gap: .45rem; }
.hero__strich {
  width: 34px; height: 5px; padding: 0; border: 0; cursor: pointer; border-radius: 5px;
  background: rgba(255,255,255,.3); position: relative; overflow: hidden;
}
.hero__strich span { position: absolute; inset: 0; background: var(--gruen-hell); transform-origin: left; transform: scaleX(0); border-radius: 5px; }
.hero__strich.ist-aktiv span { animation: strichlauf var(--dauer, 7s) linear forwards; }
@keyframes strichlauf { to { transform: scaleX(1); } }
.hero__bildtext { font-size: .82rem; color: #CFE0E8; }
.hero__zaehler { font-family: var(--hand); font-size: 1.1rem; color: rgba(255,255,255,.85); }

.hero__scroll {
  position: absolute; right: clamp(1.5rem, 4vw, 3.4rem); bottom: 2.2rem;
  writing-mode: vertical-rl; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7); text-decoration: none; display: none; font-weight: 700;
}
@media (min-width: 900px) { .hero__scroll { display: block; } }
.hero__scroll::after { content: ''; display: block; width: 2px; height: 44px; border-radius: 2px;
  background: rgba(255,255,255,.45); margin: .8rem auto 0; }

.hero__leer {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(110% 80% at 82% 18%, rgba(198,217,160,.55), transparent 58%),
    radial-gradient(90% 70% at 10% 88%, rgba(60,134,184,.55), transparent 62%),
    linear-gradient(150deg, #17608C, #0E3A55 62%, #12455F);
}

/* ------------------------------------------------------------ Bandzeile */
.band {
  background: var(--gruen); color: #223107;
  padding: .85rem 0; overflow: hidden;
  border-radius: var(--r-pille);
  margin: 0 clamp(.6rem, 2vw, 1.5rem);
}
.band__gleis { display: flex; width: max-content; animation: lauf 48s linear infinite; }
.band:hover .band__gleis { animation-play-state: paused; }
.band__lauf { display: flex; gap: 2.6rem; padding-right: 2.6rem; flex: none; }
.band span { font-size: .92rem; font-weight: 800; display: inline-flex; align-items: center; gap: .8rem; white-space: nowrap; }
.band span::after, .band__link::after { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(34,49,7,.4); }
.band__link { font-size: .92rem; font-weight: 800; display: inline-flex; align-items: center;
  gap: .8rem; white-space: nowrap; color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: calc(100% - 15px) 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: opacity var(--schnell); }
.band__link:hover { opacity: .65; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- Kachel */
.kachel {
  position: relative; background: var(--flaeche);
  border-radius: var(--r-gross);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform var(--ruhig), box-shadow var(--ruhig);
}
.kachel:hover { transform: translateY(-6px); box-shadow: var(--schatten-weich); }
.kachel > img { border-radius: 0; }

/* ---------------------------------------------------------- Hundekarte */
.hund {
  position: relative; background: var(--flaeche);
  border-radius: var(--r-gross);
  display: flex; flex-direction: column;
  padding: 1.6rem 1.4rem 1.5rem;
  text-align: center;
  box-shadow: var(--schatten);
  transition: transform var(--ruhig), box-shadow var(--ruhig);
}
.hund:hover { transform: translateY(-7px); box-shadow: var(--schatten-weich); }

/* Rundes Portrait mit versetzter Farbscheibe dahinter */
.hund__portrait { position: relative; aspect-ratio: 1; margin: 0 auto .3rem; width: min(100%, 260px); }
.hund__scheibe {
  position: absolute; inset: 11% 0 0 11%;
  border-radius: 50%; background: var(--gruen);
  opacity: .45;
}
.hund__portrait img {
  position: absolute; top: 0; left: 0;
  width: 89%; height: 89%;
  border-radius: 50%; object-fit: cover;
  transition: transform .8s var(--ease), opacity .5s var(--ease);
}
.hund__portrait img.zweit { opacity: 0; }
.hund:hover .hund__portrait img.erst { transform: scale(1.04); }
.hund:hover .hund__portrait img.zweit { opacity: 1; transform: scale(1.04); }
.hund__leer {
  position: absolute; top: 0; left: 0; width: 89%; height: 89%;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--bg-2), var(--sand)); color: var(--linie-stark);
}
.hund__herz {
  position: absolute; left: 2%; bottom: 12%;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gruen-tief); color: #fff;
  box-shadow: var(--schatten);
}
.hund__herz svg { width: 21px; height: 21px; }

.hund__marker { position: absolute; top: -.2rem; right: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
/* Zweite Spalte oben links, eine Reihe tiefer als der Status rechts. */
.hund__marker--links { right: auto; left: 0; top: 1.9rem; align-items: flex-start; }
.schild {
  display: inline-block;
  font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  padding: .38rem .9rem; border-radius: var(--r-pille);
  background: var(--blau); color: #fff;
  box-shadow: var(--schatten);
}
.schild--notfall { background: var(--signal); }
.schild--vermittelt { background: var(--gruen); color: #223107; }
.schild--reserviert { background: var(--blau-tief); }
.schild--pflege { background: var(--gruen-tief); }
/* Vermittlungshilfe ist kein Status, sondern eine Herkunftsangabe. Eigene,
   ruhige Farbe, damit sie nicht mit "Sucht ein Zuhause" verwechselt wird. */
.schild--hilfe { background: var(--flieder); }
.schild--pate { background: var(--pflaume); }
/* Partnerverein gesucht steht links, damit es nicht mit dem Status konkurriert.
   Deckend, weil es sonst im runden Vorschaubild untergeht. */
.schild--suchtpartner { background: var(--petrol); }
[data-theme='dunkel'] .schild--hilfe,
[data-theme='dunkel'] .pille--hilfe,
[data-theme='dunkel'] .hilfekasten__marke { color: #241E30; }

.hund__inhalt { padding-top: .9rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; align-items: center; }
.hund__name {
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  margin: 0; line-height: 1.1;
}
.hund__name a { text-decoration: none; }
.hund__name a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-gross); }
.hund__geschlecht { font-family: var(--hand); font-size: 1.15rem; color: var(--text-weich); font-weight: 600; }
.hund__meta { font-size: .88rem; color: var(--text-weich); display: flex; flex-wrap: wrap;
  gap: .2rem .55rem; justify-content: center; margin: 0; }
.hund__meta span { display: inline-flex; align-items: center; gap: .55rem; }
.hund__meta span + span::before { content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--linie-stark); display: inline-block; }
.hund__teaser { font-size: .92rem; color: var(--text-weich); line-height: 1.6; }
.hund__fuss {
  margin-top: auto; padding-top: .9rem; width: 100%;
  border-top: 2px solid var(--linie);
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  font-size: .8rem; flex-wrap: wrap;
}
.hund__fuss span { display: inline-flex; align-items: center; gap: .3rem; }
.hund__updates { color: var(--gruen-tief); font-weight: 800; }
[data-theme='dunkel'] .hund__updates { color: var(--gruen-hell); }

/* Pillen */
.pillen { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.pille {
  font-size: .78rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: var(--r-pille);
  background: var(--gruen-blass); color: var(--gruen-tief);
}
[data-theme='dunkel'] .pille { color: var(--gruen-hell); }
.pille--gruen { background: var(--gruen); color: #223107; }
[data-theme='dunkel'] .pille--gruen { color: #14240A; }
.pille--blau { background: var(--blau-blass); color: var(--blau); }
[data-theme='dunkel'] .pille--blau { color: #B9DCF0; }

/* ------------------------------------------------------------ Filterbar */
.filter { position: sticky; top: 82px; z-index: 60; padding-block: .7rem; }
/* Offen klebt sie nicht. Sonst stuende auf dem Smartphone die halbe
   Filterliste dauerhaft ueber den Hunden, und man scrollt an einer Wand aus
   Knöpfen vorbei. Zugeklappt bleibt sie oben, das ist eine Zeile. */
.filter.ist-offen { position: static; }
.filter__innen {
  display: grid; gap: .7rem;
  background: var(--flaeche); border-radius: var(--r-gross);
  padding: .8rem 1.1rem; box-shadow: var(--schatten);
}

/* Die schmale Zeile, die immer stehen bleibt: suchen, aufklappen,
   zurücksetzen. Alles andere kostet nur Platz, solange niemand filtert. */
.filter__leiste {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.filter__leiste .suchfeld { flex: 1 1 14rem; margin: 0; }
.filter__schalter { flex: none; }
.filter__zahl {
  display: inline-grid; place-items: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border-radius: var(--r-pille); font-size: .74rem;
  background: var(--signal); color: #fff;
}
.filter__weg { flex: none; white-space: nowrap; }
/* Beide setzen display, und display schlaegt das hidden-Attribut. Ohne diese
   zwei Zeilen stand am Knopf eine orange Null, obwohl gar nichts gefiltert
   war, und daneben ein Zurücksetzen ohne etwas zum Zurücksetzen. */
.filter__zahl[hidden], .filter__weg[hidden] { display: none; }

.filter__felder {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-top: .7rem; border-top: 2px solid var(--linie);
}
.filter__felder[hidden] { display: none; }
.filter__gruppe { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.filter__label { font-family: var(--hand); font-size: 1.15rem; font-weight: 600;
  color: var(--gruen-tief); margin-right: .3rem; }
[data-theme='dunkel'] .filter__label { color: var(--gruen); }
.chip {
  font-size: .87rem; font-weight: 700; padding: .48rem 1rem;
  border: 2px solid var(--linie); background: var(--bg); color: var(--text);
  border-radius: var(--r-pille);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  transition: all var(--schnell);
}
.chip:hover { border-color: var(--gruen); background: var(--gruen-blass); }
.chip.ist-aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
[data-theme='dunkel'] .chip.ist-aktiv { background: var(--gruen); border-color: var(--gruen); color: #0B2231; }
.chip--notfall.ist-aktiv { background: var(--signal); border-color: var(--signal); color: #fff; }
select.chip { appearance: none; -webkit-appearance: none; font-family: inherit; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23789' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; }
label.chip { cursor: pointer; }
label.chip input { accent-color: currentColor; }

.suchfeld { position: relative; margin-left: auto; }
.suchfeld input {
  width: 240px; padding: .55rem 1rem .55rem 2.4rem; font: inherit; font-size: .9rem;
  background: var(--bg); border: 2px solid var(--linie); color: var(--text);
  border-radius: var(--r-pille);
}
.suchfeld svg { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; width: 15px; height: 15px; opacity: .5; }
@media (max-width: 760px) {
  .suchfeld { margin-left: 0; width: 100%; }
  .suchfeld input { width: 100%; }
  .filter { position: static; }
  .unterreiter { position: static; }
}

/* ----------------------------------------------------------- Seitenkopf */
/* Der Kopf einer Unterseite soll einordnen, nicht die halbe Bildschirmhoehe
   fuellen. Die Leute kommen wegen der Inhalte, nicht wegen der Ueberschrift.
   Der grosse Bildkopf auf der Startseite bleibt davon unberuehrt. */
.seitenkopf { padding-block: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 1.8vw, 1.5rem); position: relative; }
.seitenkopf h1 { max-width: 22ch; font-size: clamp(1.95rem, 1.3rem + 2.4vw, 3.1rem); }
.seitenkopf .kicker { margin-bottom: .35rem; }
.seitenkopf .lead {
  color: var(--text-weich); margin-top: .7rem; max-width: 58ch;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); line-height: 1.5;
}
.seitenkopf__linie {
  height: 4px; border-radius: 4px; margin-top: clamp(1.1rem, 2vw, 1.6rem);
  background: linear-gradient(to right, var(--gruen) 0%, var(--gruen) 16%, var(--linie) 16%, var(--linie) 100%);
}

.unterreiter { position: sticky; top: 82px; z-index: 60; padding-block: .8rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); }
.unterreiter__innen { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.unterreiter__innen::-webkit-scrollbar { display: none; }
.unterreiter__link {
  padding: .6rem 1.1rem; font-size: .92rem; font-weight: 700; white-space: nowrap;
  text-decoration: none; color: var(--text-weich); border-radius: var(--r-pille);
  transition: color var(--schnell), background var(--schnell);
}
.unterreiter__link:hover { color: var(--text); background: var(--gruen-blass); }
.unterreiter__link.ist-aktiv { color: #fff; background: var(--blau); }
[data-theme='dunkel'] .unterreiter__link.ist-aktiv { background: var(--gruen); color: #0B2231; }

/* -------------------------------------------------------- Steckbrief */
.steckbrief { display: grid; gap: 0; background: var(--flaeche); border-radius: var(--r-gross);
  overflow: hidden; box-shadow: var(--schatten); }
.steckbrief__zeile { display: grid; grid-template-columns: 40% 1fr; gap: 1rem;
  padding: .9rem 1.4rem; border-bottom: 2px solid var(--bg-2); font-size: .94rem; }
.steckbrief__zeile:last-child { border-bottom: 0; }
.steckbrief__zeile dt { color: var(--text-weich); font-size: .85rem; font-weight: 700; margin: 0; }
.steckbrief__zeile dd { margin: 0; font-weight: 700; }

.messer { display: grid; gap: 1.1rem; }
.messer__zeile { display: grid; gap: .4rem; }
.messer__kopf { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 600; }
/* Statt einer Fortschrittsleiste fuellen sich Pfoten. Passt besser zum
   Verein und ist auf einen Blick zaehlbar. */
.pfotenspur { display: flex; gap: .35rem; align-items: center; }
.pfote {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--linie-stark);
  transition: color .45s var(--ease), transform .45s var(--ease);
}
.pfote svg { width: 26px; height: 26px; }
.pfote.ist-voll { color: var(--gruen-tief); }
.pfote.ist-voll--blau { color: var(--blau); }
[data-theme='dunkel'] .pfote { color: rgba(255,255,255,.22); }
[data-theme='dunkel'] .pfote.ist-voll { color: var(--gruen); }
[data-theme='dunkel'] .pfote.ist-voll--blau { color: var(--blau-hell); }
@media (prefers-reduced-motion: no-preference) {
  .pfote.ist-voll { transform: rotate(-8deg); }
  .pfote.ist-voll:nth-child(even) { transform: rotate(9deg) translateY(1px); }
}

/* ------------------------------------------------------------ Zeitleiste */
.zeitleiste { position: relative; padding-left: 2.6rem; }
.zeitleiste::before {
  content: ''; position: absolute; left: 9px; top: .8rem; bottom: 2rem;
  width: 4px; border-radius: 4px; background: linear-gradient(var(--gruen), var(--linie));
}
.eintrag { position: relative; padding-bottom: 2.8rem; }
.eintrag::before {
  content: ''; position: absolute; left: -2.6rem; top: .5rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 5px solid var(--gruen);
}
.eintrag:first-child::before { background: var(--gruen); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gruen) 25%, transparent); }
.eintrag__datum { font-family: var(--hand); font-size: 1.2rem; font-weight: 600;
  color: var(--gruen-tief); margin-bottom: .2rem; }
[data-theme='dunkel'] .eintrag__datum { color: var(--gruen-hell); }
.eintrag__titel { font-family: var(--display); font-size: 1.45rem; font-weight: 700; margin: 0 0 .5rem; }
.eintrag__bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin-top: 1.1rem; }
.eintrag__bilder img, .eintrag__bilder video { aspect-ratio: 1; object-fit: cover; width: 100%; cursor: zoom-in;
  border-radius: var(--r); transition: transform var(--schnell); box-shadow: var(--schatten); }
.eintrag__bilder img:hover { transform: scale(1.04); }

/* -------------------------------------------------------------- Galerie */
.galerie { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; position: relative; overflow: hidden; background: var(--bg-2);
  border-radius: var(--r-gross); aspect-ratio: 1; box-shadow: var(--schatten); }
.galerie__gross { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.galerie img, .galerie video { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .6s var(--ease); }
.galerie figure:hover img { transform: scale(1.05); }
.galerie__video::after {
  content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315547F'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size: 55%; background-position: 56% center; background-repeat: no-repeat;
  pointer-events: none; box-shadow: var(--schatten);
}

/* -------------------------------------------------------------- Leuchte */
.leuchte {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(10,32,45,.94); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
}
.leuchte.ist-offen { display: flex; }
.leuchte img, .leuchte video { max-height: 84vh; max-width: 100%; object-fit: contain; border-radius: var(--r-gross); }
.leuchte__text { position: absolute; bottom: 1.4rem; left: 50%; translate: -50% 0;
  color: #D6E4EC; font-size: .92rem; text-align: center; max-width: 60ch; }
.leuchte__zu { position: absolute; top: 1.2rem; right: 1.2rem; }
.leuchte__pfeil { position: absolute; top: 50%; translate: 0 -50%; }
.leuchte__pfeil--links { left: 1rem; } .leuchte__pfeil--rechts { right: 1rem; }
.leuchte .icon-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.leuchte .icon-btn:hover { background: rgba(255,255,255,.26); }

/* ------------------------------------------------------------- Aktionen */
.aktionsleiste { position: sticky; bottom: 0; z-index: 70; padding-block: .9rem; pointer-events: none; }
.aktionsleiste__innen {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--flaeche); border-radius: var(--r-pille);
  padding: .75rem 1.6rem; box-shadow: var(--schatten-tief);
  pointer-events: auto;
}
.aktionsleiste__name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin-right: auto; }

/* --------------------------------------------------------------- Zahlen */
.zahlen { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.zahl { background: var(--flaeche); padding: 1.5rem 1.4rem; border-radius: var(--r-gross); box-shadow: var(--schatten); }
.abschnitt--tief .zahl { background: rgba(255,255,255,.10); box-shadow: none; }
.zahl__wert { font-family: var(--display); font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 700; line-height: 1.05; color: var(--blau); display: block;
  overflow-wrap: break-word; hyphens: auto; }
[data-theme='dunkel'] .zahl__wert, .abschnitt--tief .zahl__wert { color: var(--gruen-hell); }
.zahl__label { font-weight: 800; font-size: .96rem; margin-top: .35rem; display: block; }
.zahl__note { font-size: .82rem; color: var(--text-weich); margin-top: .25rem; display: block; line-height: 1.5; }
.abschnitt--tief .zahl__note { color: #A9C6D3; }

/* -------------------------------------------------------------- Themen */
.themenliste { display: grid; gap: .9rem; }
.themenzeile {
  display: grid; gap: .5rem 1.8rem; align-items: center;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.4vw, 2rem);
  background: var(--flaeche); border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  text-decoration: none; position: relative;
  transition: transform var(--ruhig), box-shadow var(--ruhig), background var(--ruhig);
}
@media (min-width: 860px) {
  .themenzeile { grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.1fr) 3rem; }
}
.themenzeile:hover { transform: translateX(8px); box-shadow: var(--schatten-weich); background: var(--gruen-blass); }
.themenzeile__nr { font-family: var(--hand); font-size: 1.5rem; font-weight: 600; color: var(--gruen-tief); }
[data-theme='dunkel'] .themenzeile__nr { color: var(--gruen); }
.themenzeile__titel { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 700; margin: 0; line-height: 1.12; }
.themenzeile__text { color: var(--text-weich); font-size: .95rem; margin: 0; line-height: 1.55; }
.themenzeile__pfeil { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gruen-blass); color: var(--blau); transition: all var(--ruhig); }
.themenzeile:hover .themenzeile__pfeil { background: var(--blau); color: #fff; transform: translateX(4px); }
[data-theme='dunkel'] .themenzeile__pfeil { color: var(--gruen-hell); background: rgba(255,255,255,.08); }
[data-theme='dunkel'] .themenzeile:hover .themenzeile__pfeil { background: var(--gruen); color: #0B2231; }

.themenicon { width: 44px; height: 44px; color: var(--gruen-tief); }
[data-theme='dunkel'] .themenicon { color: var(--gruen); }

/* ----------------------------------------------------------------- Wege */
.wege { display: grid; gap: .9rem; }
.weg {
  display: grid; gap: .5rem 1.6rem; align-items: center;
  grid-template-columns: 3rem auto 1fr 3rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.2rem, 2.4vw, 2rem);
  background: var(--flaeche); border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  text-decoration: none; transition: transform var(--ruhig), box-shadow var(--ruhig), background var(--ruhig);
}
.weg:hover { transform: translateX(8px); box-shadow: var(--schatten-weich); background: var(--gruen-blass); }
.weg--stark { background: var(--gruen-blass); }
.weg--stark:hover { background: var(--gruen-hell); }
.weg__nr { font-family: var(--hand); font-size: 1.5rem; font-weight: 600; color: var(--gruen-tief); }
[data-theme='dunkel'] .weg__nr { color: var(--gruen); }
.weg__icon { color: var(--gruen-tief); }
[data-theme='dunkel'] .weg__icon { color: var(--gruen); }
.weg__text { display: grid; gap: .3rem; }
.weg__titel { font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 700; line-height: 1.15; }
.weg__beschreibung { color: var(--text-weich); font-size: .94rem; max-width: 62ch; line-height: 1.55; }
.weg__aufwand { font-family: var(--hand); font-size: 1.05rem; font-weight: 600;
  color: var(--gruen-tief); display: inline-flex; align-items: center; gap: .4rem; }
[data-theme='dunkel'] .weg__aufwand { color: var(--gruen); }
.weg .themenzeile__pfeil { justify-self: end; }
.weg--stark .themenzeile__pfeil { background: var(--flaeche); }
.themenzeile:hover .themenzeile__pfeil,
.weg:hover .themenzeile__pfeil { background: var(--blau); color: #fff; }
@media (max-width: 700px) {
  .weg { grid-template-columns: 2.4rem 1fr; }
  .weg__icon, .weg .themenzeile__pfeil { display: none; }
}

/* ------------------------------------------------------ Spendenaktionen */
.fortschritt-block { display: grid; gap: .5rem; }
.fortschritt-block__zahlen { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fortschritt-block__stand { font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); line-height: 1; color: var(--gruen-tief); }
[data-theme='dunkel'] .fortschritt-block__stand { color: var(--gruen-hell); }
.fortschritt-block__ziel { font-size: .92rem; color: var(--text-weich); font-weight: 600; }
.fortschritt-block__spur { height: 16px; border-radius: var(--r-pille); background: var(--bg-2);
  overflow: hidden; padding: 3px; }
.fortschritt-block__fuellung { display: block; height: 100%; border-radius: var(--r-pille);
  background: linear-gradient(90deg, var(--gruen), var(--gruen-tief));
  transition: width 1.2s var(--ease); min-width: 10px; }
.fortschritt-block__fuellung.ist-voll { background: linear-gradient(90deg, var(--gruen), var(--blau-hell)); }
.fortschritt-block__fuss { display: flex; justify-content: space-between; gap: .6rem;
  font-size: .85rem; flex-wrap: wrap; }
.fortschritt-block__prozent { font-weight: 800; color: var(--gruen-tief); }
[data-theme='dunkel'] .fortschritt-block__prozent { color: var(--gruen-hell); }
.fortschritt-block__rest { color: var(--text-weich); }
.fortschritt-block.ist-gross .fortschritt-block__spur { height: 22px; padding: 4px; }
.fortschritt-block.ist-gross .fortschritt-block__stand { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }

.abschnitt--tief .fortschritt-block__spur { background: rgba(255,255,255,.15); }
.abschnitt--tief .fortschritt-block__stand,
.abschnitt--tief .fortschritt-block__prozent { color: var(--gruen-hell); }
.abschnitt--tief .fortschritt-block__ziel,
.abschnitt--tief .fortschritt-block__rest { color: #B6D0DC; }

.aktion { display: flex; flex-direction: column; background: var(--flaeche);
  border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--schatten);
  transition: transform var(--ruhig), box-shadow var(--ruhig); }
.aktion:hover { transform: translateY(-6px); box-shadow: var(--schatten-weich); }
.aktion__bild { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-2); }
.aktion__bild img { width: 100%; height: 100%; object-fit: cover; }
.aktion__leer { position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--linie-stark); background: linear-gradient(150deg, var(--bg-2), var(--sand)); }
.aktion__marke { position: absolute; top: .8rem; left: .8rem; }
.aktion__inhalt { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .55rem; }
.aktion__titel { font-size: 1.45rem; margin: 0; }
.aktion__titel a { text-decoration: none; }

/* ------------------------------------------------ Vermittlungshilfe */
/* Deutlich abgesetzt, weil hier eine Erwartung korrigiert wird: der Hund
   gehoert nicht uns. Wer das ueberliest, schreibt an die falsche Stelle. */
.hilfekasten {
  position: relative;
  background: var(--flaeche);
  border: 2px dashed var(--flieder);
  border-radius: var(--r-gross);
  padding: 1.3rem 1.5rem;
}
.hilfekasten__marke {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .6rem; padding: .28rem .85rem;
  background: var(--flieder); color: #fff;
  border-radius: var(--r-pille);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hilfekasten__satz { font-size: 1.02rem; margin-bottom: .6rem; }
.hilfekasten p { margin-bottom: .6rem; }
.hilfekasten .mini { color: var(--text-weich); }
.hilfekasten .link { margin-top: .3rem; }

.pille--hilfe {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--flieder); color: #fff; border-color: var(--flieder);
}
.pille--hilfe svg { width: 14px; height: 14px; }

.kopierfeld {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .6rem .6rem 1rem;
  background: var(--bg-2); border: 2px solid var(--linie); border-radius: var(--r-pille);
}
.kopierfeld code {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--text);
}
.breit-btn { display: flex; width: 100%; justify-content: center; }

.ergebnis { background: var(--gruen-blass); border-radius: var(--r-gross);
  padding: clamp(1.4rem, 3vw, 2rem); }
.ergebnis p { max-width: 62ch; }
.ergebnis p:last-of-type { margin-bottom: 0; }

/* --------------------------------------------------- Verwendungszwecke */
.zwecke { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 1.4rem; }
.zweck { background: var(--flaeche); padding: 1.1rem 1.3rem; display: grid; gap: .25rem;
  border-radius: var(--r); box-shadow: var(--schatten); }
.zweck b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }

/* ---------------------------------------------------------- Kontakt */
.kontaktblock { background: var(--flaeche); padding: 1.6rem 1.7rem; border-radius: var(--r-gross); box-shadow: var(--schatten); }
.kontaktzeile { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: start;
  padding: .9rem 0; border-bottom: 2px solid var(--bg-2); text-decoration: none; color: inherit; }
.kontaktzeile:last-child { border-bottom: 0; padding-bottom: 0; }
.kontaktzeile > span { display: grid; gap: .15rem; }
.kontaktzeile svg { color: var(--gruen-tief); margin-top: .2rem; }
[data-theme='dunkel'] .kontaktzeile svg { color: var(--gruen); }
.kontaktzeile:hover b { color: var(--blau); }
[data-theme='dunkel'] .kontaktzeile:hover b { color: var(--gruen-hell); }

/* ----------------------------------------------------------- Fließtext */
.fliesstext { font-size: clamp(1.04rem, 1rem + .3vw, 1.14rem); line-height: 1.78; max-width: 68ch; }
.fliesstext > p:first-child::first-letter {
  font-family: var(--display); font-size: 3.2em; font-weight: 700; line-height: .88;
  float: left; margin: .04em .1em 0 0; color: var(--gruen-tief);
}
[data-theme='dunkel'] .fliesstext > p:first-child::first-letter { color: var(--gruen); }
.fliesstext h2 { margin-top: 2.2em; }
.fliesstext--schlicht > p:first-child::first-letter { font: inherit; float: none; margin: 0; color: inherit; }
.fliesstext--schlicht { font-size: 1rem; line-height: 1.72; }
.fliesstext--schlicht h2 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); margin-top: 2em; }
.fliesstext--schlicht h3 { font-size: 1.12rem; margin-top: 1.6em; }

/* ------------------------------------------------------------- Vorstand */
.vorstandsliste { display: grid; gap: 1.4rem; }
.vorstand {
  display: grid; gap: 1.4rem 2.4rem; align-items: center;
  background: var(--flaeche); border-radius: var(--r-riesig);
  padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--schatten);
}
@media (min-width: 760px) { .vorstand { grid-template-columns: 250px minmax(0, 1fr); } }
/* Das Foto fuellt seine Spalte aus. Vorher waren es 60 Prozent davon, dadurch
   blieb von einem 210er Feld nur ein 126er Kreis uebrig. */
.vorstand__portrait {
  position: relative; aspect-ratio: 1;
  width: 100%; max-width: 250px; margin-inline: auto;
}
.vorstand__scheibe { position: absolute; inset: 10% 0 0 10%; border-radius: 50%;
  background: var(--gruen); opacity: .45; }
/* Der runde Ausschnitt liegt auf dem Rahmen, nicht auf dem Foto. Sonst wuerde
   der Zoom aus dem internen Bereich die ganze Kugel aufblasen, statt nur naeher
   an das Motiv heranzugehen. So sind alle Kugeln gleich gross. */
.vorstand__kreis {
  position: absolute; top: 0; left: 0; width: 92%; height: 92%;
  border-radius: 50%; overflow: hidden;
}
/* Breite, Hoehe und Lage des Fotos kommen als Inline-Stil aus
   repo.ausschnitt_stil(). Hier stehen nur die Werte fuer den Fall, dass kein
   Ausschnitt gespeichert ist.

   max-width muss ausdruecklich weg: Weiter oben gilt fuer jedes Bild
   max-width 100 Prozent. Ein Foto, das zum Fuellen des Kreises 150 Prozent
   breit sein muss, wurde dadurch auf 100 Prozent zusammengedrueckt, waehrend
   die Hoehe stehen blieb. Genau so entsteht ein verzerrtes Gesicht. */
.vorstand__portrait img, .vorstand__leer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  transition: opacity .5s var(--ease);
}
/* Zweites Foto, wie bei den Hundekarten: erscheint beim Darueberfahren. */
.vorstand__portrait img.zweit { opacity: 0; }
.vorstand:hover .vorstand__portrait img.zweit,
.vorstand:focus-within .vorstand__portrait img.zweit { opacity: 1; }
.vorstand:hover .vorstand__portrait img.erst,
.vorstand:focus-within .vorstand__portrait img.erst { opacity: 0; }
.vorstand__leer { display: grid; place-items: center; color: var(--linie-stark);
  background: linear-gradient(150deg, var(--bg-2), var(--sand)); }
.vorstand__rolle { font-family: var(--hand); font-size: 1.25rem; font-weight: 600; color: var(--gruen-tief); }
[data-theme='dunkel'] .vorstand__rolle { color: var(--gruen); }
.vorstand__text h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: .1rem 0 .7rem; }
.vorstand__text p { margin: 0 0 .8rem; color: var(--text-weich); max-width: 62ch; }
.vorstand__text p:last-of-type { margin-bottom: 0; }

/* ------------------------------------------------------- Kanaele / Shops */
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.kanaele { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.2rem 0 0; padding: 0; }
.kanal {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--bg-2); color: var(--text-weich);
  border: 2px solid var(--linie); transition: transform .18s var(--ease), background .18s, color .18s;
}
.kanal:hover, .kanal:focus-visible {
  background: var(--gruen); border-color: var(--gruen); color: #fff; transform: translateY(-2px) rotate(-4deg);
}
/* Gemeinsam-Abschnitt: heller, warmer Grund, damit er sich vom Rest absetzt,
   ohne so schwer zu wirken wie die dunklen Abschlussflaechen. */
.gemeinsam { background: var(--gruen-blass); }
[data-theme='dunkel'] .gemeinsam { background: var(--bg-2); }
/* Die Kanaele stehen bewusst UNTER den Knoepfen: erst der Aufruf, dann die
   Erklaerung, wo man uns findet. */
.gemeinsam__kanaele {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid color-mix(in srgb, var(--gruen-tief) 20%, transparent);
}
.gemeinsam__wege { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 900px) { .gemeinsam__wege { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.gemeinsam__sozial p { max-width: 46ch; }
.gemeinsam__sozial .kanaele--gross { justify-content: flex-start; margin-top: 1.4rem; }
/* Im gruenen Abschnitt steht der Anmeldekasten sonst gruen auf gruen. */
.gemeinsam .anmeldung { background: var(--flaeche); box-shadow: var(--schatten); }
[data-theme='dunkel'] .gemeinsam .anmeldung { background: var(--flaeche); }
.kanaele--gross { justify-content: center; gap: .8rem; margin-top: 2rem; }
.kanaele--gross .kanal { width: 58px; height: 58px; background: var(--flaeche); }
.kanaele--gross .kanal svg { width: 24px; height: 24px; }

.shopliste { display: grid; gap: 1.4rem; }
@media (min-width: 820px) { .shopliste { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } }
.shopkarte {
  display: flex; flex-direction: column; gap: .8rem; padding: 1.9rem;
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--r-gross);
}
.shopkarte__kopf { display: flex; align-items: center; gap: 1rem; }
.shopkarte__bild { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.shopkarte__leer {
  width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--bg-2); color: var(--linie-stark);
}
.shopkarte h2 { font-size: 1.35rem; margin: 0; }
.shopkarte__wer { font-family: var(--hand); font-size: 1.15rem; color: var(--gruen-tief); }
[data-theme='dunkel'] .shopkarte__wer { color: var(--gruen); }
.shopkarte p { margin: 0; color: var(--text-weich); }
.shopkarte .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------- Haltungspunkt */
.haltungspunkt { padding-left: 1.4rem; border-left: 5px solid var(--gruen-blass); border-radius: 3px; }
.haltungspunkt + .haltungspunkt { margin-top: 1.6rem; }
.haltungspunkt h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); margin-bottom: .35rem; }
.haltungspunkt p { margin: 0; color: var(--text-weich); }

/* ----------------------------------------------------------- Zweckkarte */
.zweckkarte {
  background: var(--flaeche); border-radius: var(--r-gross);
  padding: 1.7rem 1.9rem; margin-block: .7rem;
  box-shadow: var(--schatten);
  border-left: 6px solid var(--blau);
}
.zweckkarte--gruen { border-left-color: var(--gruen); }
.zweckkarte__nr { font-family: var(--hand); font-size: 1.15rem; font-weight: 600;
  color: var(--gruen-tief); display: block; margin-bottom: .3rem; }
[data-theme='dunkel'] .zweckkarte__nr { color: var(--gruen); }
.zweckkarte h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); margin-bottom: .5rem; }
.zweckkarte p { margin: 0; font-size: .96rem; }

/* ------------------------------------------------------------ Prüfliste */
.pruefliste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.pruefliste li { display: grid; grid-template-columns: 30px 1fr; gap: .9rem; align-items: start; font-size: .99rem; line-height: 1.62; }
.pruefliste svg { color: #fff; background: var(--gruen-tief); border-radius: 50%; padding: 5px;
  width: 26px; height: 26px; margin-top: .12rem; }
.pruefliste--kreuz svg { background: var(--signal); }

/* --------------------------------------------------------------- Ablauf */
.ablauf { counter-reset: schritt; display: grid; gap: .8rem; }
.ablauf__schritt {
  counter-increment: schritt; display: grid; gap: .3rem 1.4rem;
  padding: 1.3rem 1.5rem;
  background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten);
}
@media (min-width: 760px) { .ablauf__schritt { grid-template-columns: 3.2rem minmax(0,13rem) minmax(0,1fr); align-items: baseline; } }
.ablauf__schritt::before {
  content: counter(schritt);
  font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: #fff;
  background: var(--gruen); width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
}
.ablauf__titel { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin: 0; }
.ablauf__text { color: var(--text-weich); margin: 0; font-size: .96rem; line-height: 1.6; }

.mini-ablauf { list-style: none; counter-reset: mini; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.mini-ablauf li { counter-increment: mini; position: relative; padding-left: 2.6rem;
  font-size: .92rem; color: var(--text-weich); line-height: 1.6; }
.mini-ablauf li::before { content: counter(mini);
  position: absolute; left: 0; top: .1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--gruen-blass); color: var(--gruen-tief);
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  display: grid; place-items: center; line-height: 1; }
[data-theme='dunkel'] .mini-ablauf li::before { color: var(--gruen-hell); }
.mini-ablauf b { color: var(--text); }

/* ----------------------------------------------------------- Aufklappen */
.aufklapp { background: var(--flaeche); border-radius: var(--r-gross); box-shadow: var(--schatten); margin-bottom: .7rem; }
.aufklapp__kopf {
  width: 100%; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  padding: 1.3rem 1.5rem; background: none; border: 0; cursor: pointer; color: inherit; text-align: left;
  font-family: var(--display); font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); font-weight: 700;
  border-radius: var(--r-gross);
}
.aufklapp__zeichen { flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gruen-blass); position: relative; margin-top: .15rem; transition: background var(--schnell); }
.aufklapp.ist-offen .aufklapp__zeichen { background: var(--gruen); }
.aufklapp__zeichen::before, .aufklapp__zeichen::after {
  content: ''; position: absolute; background: var(--gruen-tief); border-radius: 2px; transition: transform var(--schnell);
}
.aufklapp.ist-offen .aufklapp__zeichen::before, .aufklapp.ist-offen .aufklapp__zeichen::after { background: #fff; }
.aufklapp__zeichen::before { left: 7px; right: 7px; top: 13px; height: 2px; }
.aufklapp__zeichen::after { top: 7px; bottom: 7px; left: 13px; width: 2px; }
.aufklapp.ist-offen .aufklapp__zeichen::after { transform: rotate(90deg); opacity: 0; }
.aufklapp__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.aufklapp.ist-offen .aufklapp__inhalt { grid-template-rows: 1fr; }
.aufklapp__inhalt > div { overflow: hidden; }
.aufklapp__inhalt p { padding: 0 1.5rem 1.4rem; max-width: 68ch; color: var(--text-weich); }

/* ------------------------------------------------------------- Formulare */
.feld { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.feld > label, .feldgruppe__titel {
  font-size: .88rem; font-weight: 800; color: var(--text);
}
.feld input[type=text], .feld input[type=email], .feld input[type=tel], .feld input[type=number],
.feld input[type=date], .feld input[type=month], .feld input[type=password], .feld select, .feld textarea {
  width: 100%; padding: .85rem 1.1rem; font: inherit; font-size: .99rem;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--linie); border-radius: var(--r);
  transition: border-color var(--schnell), box-shadow var(--schnell), background var(--schnell);
}
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--gruen); background: var(--flaeche);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gruen) 25%, transparent);
}
.feld__hinweis { font-size: .84rem; color: var(--text-weich); line-height: 1.5; }

.feldpaar { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.haken { display: flex; gap: .75rem; align-items: flex-start; font-size: .92rem; line-height: 1.55; cursor: pointer; }
.haken input { margin-top: .25rem; width: 19px; height: 19px; accent-color: var(--gruen-tief); flex: none; border-radius: 6px; }
[data-theme='dunkel'] .haken input { accent-color: var(--gruen); }

.honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Betragswahl */
.betraege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.betrag { position: relative; }
.betrag input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.betrag span {
  display: grid; place-items: center; gap: .1rem; padding: 1rem .6rem; text-align: center;
  border: 2px solid var(--linie); background: var(--bg); cursor: pointer;
  border-radius: var(--r-gross);
  font-family: var(--display); font-size: 1.55rem; font-weight: 700;
  transition: all var(--schnell);
}
.betrag small { font-family: var(--sans); font-size: .72rem; font-weight: 700;
  color: var(--text-weich); }
/* Die Umrechnung auf den Monat. Gezahlt wird der Jahresbeitrag, aber die kleine
   Zahl nimmt der grossen den Schrecken. */
.betrag__monat {
  font-family: var(--sans); font-size: .78rem; font-weight: 600; font-style: normal;
  color: #4A6224; background: var(--gruen-blass);
  border-radius: var(--r-pille); padding: .12rem .6rem; margin-top: .25rem;
}
[data-theme='dunkel'] .betrag__monat { color: var(--gruen-hell); background: rgba(255,255,255,.08); }
.betrag input:checked + span .betrag__monat { color: #223107; background: rgba(255,255,255,.45); }
.betrag span:hover { border-color: var(--gruen); background: var(--gruen-blass); }
.betrag input:checked + span { border-color: var(--gruen-tief); background: var(--gruen); color: #223107; }
.betrag input:checked + span small { color: rgba(34,49,7,.7); }
.betrag input:focus-visible + span { outline: 3px solid var(--blau-hell); outline-offset: 3px; }

.wirkung {
  background: var(--gruen-blass); border-radius: var(--r);
  padding: 1rem 1.2rem; font-size: .94rem; margin-top: .9rem; line-height: 1.6;
}
.wirkung b { color: var(--gruen-tief); }
[data-theme='dunkel'] .wirkung b { color: var(--gruen-hell); }

.hinweisbox {
  background: var(--blau-blass); border-radius: var(--r-gross);
  padding: 1.2rem 1.5rem; font-size: .95rem; line-height: 1.62;
}
.hinweisbox--fehler { background: color-mix(in srgb, var(--signal) 18%, var(--bg)); }
.hinweisbox--gut { background: var(--gruen-blass); }
.abschnitt--tief .hinweisbox { background: rgba(255,255,255,.1); }

/* Formularkarten */
.formularkarte {
  background: var(--flaeche); border-radius: var(--r-riesig);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--schatten-weich);
}

/* ------------------------------------------------------------- Fußzeile */
.fuss {
  background: linear-gradient(160deg, var(--blau) 0%, var(--blau-nacht) 60%, #0A2C40 100%);
  color: #CBDEE7;
  border-radius: var(--r-riesig) var(--r-riesig) 0 0;
  margin: clamp(.6rem, 2vw, 1.5rem) clamp(.6rem, 2vw, 1.5rem) 0;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.fuss a { color: #CBDEE7; text-decoration: none; }
.fuss a:hover { color: var(--gruen-hell); }
.fuss__oben { display: grid; gap: 2.5rem; padding-bottom: 2.6rem; }
@media (min-width: 900px) { .fuss__oben { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.fuss__titel { font-family: var(--hand); font-size: 1.4rem; font-weight: 600; color: var(--gruen-hell); margin-bottom: .8rem; }
.fuss__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .94rem; }
.fuss .marke__name { color: #fff; }
.fuss .marke__zusatz { color: #8FB0C0; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding-top: 1.6rem; margin-top: .4rem; border-top: 2px solid rgba(255,255,255,.14);
  font-size: .85rem; color: #8FB0C0; }
.fuss__sozial { display: flex; gap: .6rem; margin-top: 1.4rem; }
.fuss__sozial a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.1); transition: all var(--schnell); }
.fuss__sozial a:hover { background: var(--gruen); color: #223107; transform: translateY(-3px); }
.fuss__sozial svg { width: 18px; height: 18px; }

/* ----------------------------------------------------- Befehlspalette */
.palette { position: fixed; inset: 0; z-index: 400; display: none; padding-top: 12vh;
  background: rgba(10,32,45,.5); backdrop-filter: blur(6px); justify-content: center; align-items: flex-start; }
.palette.ist-offen { display: flex; }
.palette__box { width: min(640px, 92vw); background: var(--flaeche); border-radius: var(--r-gross);
  box-shadow: var(--schatten-tief); overflow: hidden; }
.palette__eingabe { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.4rem; }
.palette__eingabe input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.08rem; color: var(--text); outline: none; }
.palette__liste { max-height: 52vh; overflow-y: auto; padding: .4rem .5rem .6rem; }
.palette__treffer { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .7rem .9rem;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
  border-radius: var(--r); }
.palette__treffer.ist-gewaehlt, .palette__treffer:hover { background: var(--gruen-blass); }
.palette__typ { font-size: .72rem; font-weight: 800; color: var(--gruen-tief);
  background: var(--gruen-blass); border-radius: var(--r-pille); padding: .2rem .6rem; flex: none; }
.palette__treffer.ist-gewaehlt .palette__typ { background: var(--flaeche); }
.palette__titel { font-weight: 800; font-size: .96rem; }
.palette__text { font-size: .82rem; color: var(--text-weich); }
.palette__fuss { padding: .7rem 1.4rem; background: var(--bg-2); font-size: .8rem; color: var(--text-weich);
  display: flex; gap: 1.2rem; flex-wrap: wrap; }
kbd { font-family: var(--sans); font-size: .74rem; font-weight: 800; border-radius: 6px;
  padding: .12rem .4rem; background: var(--flaeche); box-shadow: var(--schatten); }

/* ------------------------------------------------------ Fortschritt/Rail */
.fortschritt { position: fixed; top: 0; left: 0; height: 4px; background: var(--gruen); z-index: 150;
  width: 0; transition: width .1s linear; border-radius: 0 4px 4px 0; }

.seitenrail { display: none; }
@media (min-width: 1180px) {
  .seitenrail { display: block; position: sticky; top: 8rem; align-self: start; }
  .seitenrail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
  .seitenrail a { display: block; padding: .5rem 1rem; font-size: .88rem; text-decoration: none;
    color: var(--text-weich); border-radius: var(--r-pille); transition: all var(--schnell); }
  .seitenrail a:hover { color: var(--text); background: var(--gruen-blass); }
  .seitenrail a.ist-aktiv { color: var(--blau); background: var(--gruen-blass); font-weight: 800; }
  [data-theme='dunkel'] .seitenrail a.ist-aktiv { color: var(--gruen-hell); }
}

/* --------------------------------------------------------- Einblenden */
.zeigt { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.zeigt.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .zeigt { opacity: 1; transform: none; }
  .hero__folie.ist-aktiv img { animation: none; }
}

/* ---------------------------------------------------------- Hilfsklassen */
.stapel > * + * { margin-top: var(--raum-3); }
.stapel-eng > * + * { margin-top: var(--raum-2); }
.reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.mitte { text-align: center; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Der Sprunglink muss sichtbar werden, sobald er den Fokus hat. Sonst springt
   der Tastaturfokus fuer Sehende ins Nichts. */
.nur-lesbar:focus, .nur-lesbar:focus-visible {
  position: fixed; top: .8rem; left: .8rem; z-index: 100;
  width: auto; height: auto; margin: 0; padding: .7rem 1.2rem;
  clip: auto; overflow: visible; border-radius: var(--r-pille);
  background: var(--blau); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: var(--schatten);
}
.abstand-oben { margin-top: var(--raum-4); }
.abstand-oben-gross { margin-top: var(--raum-5); }
.voll { width: 100%; }

.zweispalt { display: grid; gap: clamp(2rem, 5vw, 4rem); }
/* Ohne min-width: 0 kann eine Spalte nicht schmaler werden als ihr breitester
   unteilbarer Inhalt. Das erzeugt auf dem Handy waagerechtes Scrollen. */
.zweispalt > * { min-width: 0; }
@media (min-width: 900px) { .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 900px) { .zweispalt--seite { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .zweispalt--rail { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }

.bildkasten { position: relative; }
.bildkasten img { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: contain;
  border-radius: 50%; background: var(--flaeche); box-shadow: var(--schatten-weich); }
.bildkasten__rahmen { position: absolute; inset: 9% -7% -7% 9%; border-radius: 50%;
  background: var(--gruen); opacity: .4; }
/* Die gruene Scheibe ragt rechts ueber das Bild hinaus. Sobald die Spalte
   ueber die volle Breite laeuft, schiebt sie die Seite sonst seitlich aus dem
   Bild. Deshalb bekommt der Kasten auf schmalen Geraeten eine feste Breite. */
@media (max-width: 899px) {
  .bildkasten { max-width: 300px; margin-inline: auto; }
}

/* Betragsliste (Startseite, Mitmachen) */
.beitragsliste { display: grid; gap: .6rem; }
.beitragszeile {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  background: var(--flaeche); border-radius: var(--r-gross);
  padding: 1.1rem 1.4rem; box-shadow: var(--schatten);
}
.beitragszeile__wert { font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  color: var(--gruen-tief); line-height: 1; }
.beitragszeile b { display: block; }
.abschnitt--tief .beitragszeile { background: rgba(255,255,255,.10); box-shadow: none; }
.abschnitt--tief .beitragszeile__wert { color: var(--gruen-hell); }
[data-theme='dunkel'] .beitragszeile__wert { color: var(--gruen-hell); }

.zitat { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1.28;
  font-weight: 600; margin: 0; }
.zitat cite { display: block; font-family: var(--hand); font-size: 1.3rem; font-style: normal;
  font-weight: 600; color: var(--text-weich); margin-top: 1rem; }
.zitat--gross { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); text-align: center; }
/* Der Satz unter dem Zitat, im selben Duktus wie die Bildunterschriften. */
.einladung {
  font-family: var(--hand); font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  color: var(--gruen-tief); margin-top: 1.1rem;
}
[data-theme='dunkel'] .einladung { color: var(--gruen); }

/* ------------------------------------------------- E-Mail-Community */
.anmeldung {
  background: var(--gruen-blass); border-radius: var(--r-gross);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
[data-theme='dunkel'] .anmeldung { background: var(--bg-2); }
.anmeldung--schmal { padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.anmeldung__titel { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); margin: 0 0 .5rem; max-width: 30ch; }
.anmeldung__text { color: var(--text-weich); max-width: 56ch; margin: 0 0 1.2rem; font-size: .98rem; }
.anmeldung__zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.anmeldung__zeile input[type='email'] {
  flex: 1 1 240px; min-width: 0; padding: .85rem 1.3rem; font: inherit;
  background: var(--flaeche); color: var(--text);
  border: 2px solid var(--linie); border-radius: var(--r-pille);
}
.anmeldung__zeile input[type='email']:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.anmeldung__zeile .btn { flex: 0 0 auto; }
.anmeldung__haken { margin-top: .9rem; align-items: flex-start; }
.anmeldung__haken .mini { color: var(--text-weich); line-height: 1.5; }

/* ---------------------------------------------------- Externe Videos */
/* Vor dem Klick passiert nichts. Erst danach wird von YouTube geladen. */
.videoblock {
  margin: 0; border-radius: var(--r-gross); overflow: hidden;
  background: linear-gradient(150deg, var(--blau-tief), var(--blau-nacht));
  aspect-ratio: 16 / 9; position: relative;
}
/* Hochkantvideos brauchen ein anderes Verhaeltnis. Instagram und TikTok liefern
   ihre Rahmen mit fester Mindestbreite aus. Ist der Kasten schmaler, schneidet
   der Rahmen links ab. Deshalb hier grosszuegig messen. */
/* Die Vorschau bleibt flacher als das Video selbst, sonst fuellt ein
   Hochkantvideo den halben Bildschirm, bevor ueberhaupt jemand geklickt hat. */
.videoblock--hochkant { aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
.videoblock--instagram { max-width: 540px; }
.videoblock--tiktok { max-width: 480px; }
/* Sobald der Rahmen drin ist, gibt der Anbieter die Hoehe vor. */
.videoblock.ist-geladen { aspect-ratio: auto; }
.videoblock--instagram.ist-geladen { height: 780px; }
.videoblock--tiktok.ist-geladen { height: 760px; }
.videoblock--hochkant.ist-geladen:not(.videoblock--instagram):not(.videoblock--tiktok) {
  height: 740px;
}
/* Die Vorschau liegt bei uns. Sie wird abgedunkelt, damit die Schrift darauf
   lesbar bleibt. */
.videoblock__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.5);
}
.videoblock__start {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem; text-align: center;
  background: none; border: 0; cursor: pointer; color: #fff;
}
.videoblock__knopf {
  display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: var(--gruen); color: var(--blau-nacht);
  transition: transform var(--schnell);
}
.videoblock__start:hover .videoblock__knopf { transform: scale(1.08); }
.videoblock__text { display: grid; gap: .3rem; max-width: 42ch; }
.videoblock__text b { font-family: var(--display); font-size: 1.2rem; }
.videoblock__text .mini { color: #DCE8EE; }
.videoblock__bild + .videoblock__start .videoblock__text b,
.videoblock__bild + .videoblock__start .videoblock__text .mini {
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
.videoblock iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.videolink {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1.3rem; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--r-gross);
  transition: border-color var(--schnell), transform var(--schnell);
}
.videolink:hover { border-color: var(--blau); transform: translateY(-2px); }
.videolink__symbol { display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--bg-2); color: var(--blau); }
[data-theme='dunkel'] .videolink__symbol { color: var(--gruen); }
.videolink b { display: block; font-family: var(--display); font-size: 1.1rem; }
.videolink .mini { display: block; margin-top: .15rem; }
.videolink__pfeil { color: var(--text-weich); }

/* Bedingungen direkt ueber dem Absendeknopf. Wer hier klickt, soll vorher
   gelesen haben, worauf er sich einlaesst. */
.bedingungen {
  background: var(--bg-2); border: 2px solid var(--linie);
  border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1.2rem 0 1.3rem;
}
.bedingungen__titel {
  font-family: var(--hand); font-size: 1.25rem; font-weight: 600;
  color: var(--gruen-tief); margin: 0 0 .5rem;
}
[data-theme='dunkel'] .bedingungen__titel { color: var(--gruen); }
.bedingungen ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.bedingungen li { font-size: .89rem; line-height: 1.5; color: var(--text-weich); }
.bedingungen li b { color: var(--text); }

/* Was jemand fuer das laufende Jahr wirklich zahlt. Steht direkt unter der
   Betragsauswahl, damit niemand rechnen muss. */
.jahreskasten {
  background: var(--gruen-blass); border-radius: var(--r);
  padding: 1rem 1.3rem; margin: 0 0 1.3rem;
}
[data-theme='dunkel'] .jahreskasten { background: var(--bg-2); }
.jahreskasten__titel {
  font-family: var(--hand); font-size: 1.2rem; font-weight: 600;
  color: var(--gruen-tief); margin: 0 0 .1rem;
}
[data-theme='dunkel'] .jahreskasten__titel { color: var(--gruen); }
.jahreskasten__wert {
  font-family: var(--display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  line-height: 1.1; color: var(--text); margin: 0 0 .3rem;
}
.jahreskasten .klein { color: var(--text-weich); margin: 0; }

/* Kopf der Hundeliste: Trefferzahl links, Weg zu den Happy Ends rechts. */
.listenkopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: 1.6rem;
}

/* Aufruf an andere Vereine. Steht bewusst ausserhalb des Besucherflusses. */
.partnersuche {
  border: 3px dashed var(--flieder); border-radius: var(--r-riesig);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
[data-theme='dunkel'] .partnersuche { border-color: #7E6BA0; }

/* Satzung direkt am Zustimmungshaken. Wer zustimmen soll, muss lesen koennen. */
.satzungshinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem;
  margin: 0 0 .7rem; padding: .7rem 1rem;
  background: var(--gruen-blass); border-radius: var(--r);
}
[data-theme='dunkel'] .satzungshinweis { background: var(--bg-2); }
.satzungshinweis a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; }

/* ------------------------------------------- Datenschutz-Verzeichnis */
.dsverzeichnis { display: grid; gap: .6rem; margin: 1.8rem 0 2.6rem; }
@media (min-width: 720px) { .dsverzeichnis { grid-template-columns: 1fr 1fr; } }
.dsverzeichnis a {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 2px solid var(--linie); border-radius: var(--r);
  transition: border-color var(--schnell), transform var(--schnell);
}
.dsverzeichnis a:hover { border-color: var(--blau); transform: translateY(-2px); }
.dsverzeichnis b { font-family: var(--display); font-size: 1.05rem; }
.dsverzeichnis span { font-size: .85rem; color: var(--text-weich); line-height: 1.45; }

.dsgruppe {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.4rem;
  border-top: 4px solid var(--gruen); scroll-margin-top: 7rem;
}
.dsgruppe__wer {
  font-family: var(--hand); font-size: 1.2rem; color: var(--gruen-tief);
  margin-top: -.4rem;
}
[data-theme='dunkel'] .dsgruppe__wer { color: var(--gruen); }

/* ------------------------------------------------------ Nach oben */
.nachoben {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 70; width: 50px; height: 50px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--blau); color: #fff; border: 0; border-radius: 50%;
  box-shadow: var(--schatten-tief);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--schnell), transform var(--schnell), visibility var(--schnell),
              background var(--schnell);
}
.nachoben svg { transform: rotate(180deg); }
.nachoben:hover { background: var(--blau-tief); transform: translateY(-3px); }
.nachoben.ist-da { opacity: 1; visibility: visible; transform: none; }
.nachoben.ist-da:hover { transform: translateY(-3px); }
[data-theme='dunkel'] .nachoben { background: var(--gruen); color: var(--blau-nacht); }
/* Auf Hundeseiten sitzt unten schon die Aktionsleiste. */
body:has(.aktionsleiste) .nachoben { bottom: calc(clamp(1rem, 3vw, 2rem) + 4.5rem); }
@media (prefers-reduced-motion: reduce) { .nachoben { transition: opacity .2s; } }

/* Mehrere Videos untereinander, mit Luft dazwischen. */
.videoliste > * + * { margin-top: 2rem; }

/* ======================================================== Arbeitsband
   Sichtbar nur fuer angemeldete Redaktion. Orange in der Vorschau,
   gruen beim Bearbeiten - damit auf einen Blick klar ist, in welchem
   Zustand man sich befindet. */
.arbeitsband {
  position: sticky; top: 0; z-index: 200;
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
  align-items: center; justify-content: space-between;
  padding: .55rem clamp(1rem, 4vw, 2.5rem);
  background: var(--signal); color: #fff;
  font-size: .92rem; line-height: 1.4;
}
.arbeitsband--bearbeiten { background: var(--gruen-tief); }
.arbeitsband b { font-weight: 700; }
.arbeitsband__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.arbeitsband form { margin: 0; }
.arbeitsband a,
.arbeitsband button {
  font: inherit; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-pille); padding: .18rem .8rem;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.arbeitsband a:hover,
.arbeitsband button:hover { background: rgba(255, 255, 255, .3); }
.arbeitsband a:focus-visible,
.arbeitsband button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==================================================== Bearbeitbare Texte
   Der Rahmen liegt als outline aussen an, damit er keinen Platz
   einnimmt und das Layout der Seite unveraendert bleibt. */
.tx-feld {
  cursor: pointer; border-radius: 3px;
  outline: 1px dashed color-mix(in srgb, var(--gruen-tief) 55%, transparent);
  outline-offset: 3px;
  transition: outline-color .15s var(--ease), background .15s var(--ease);
}
.tx-feld:hover,
.tx-feld:focus-visible {
  outline: 2px solid var(--gruen-tief);
  background: color-mix(in srgb, var(--gruen) 12%, transparent);
}
.tx-feld.tx-ist-offen {
  outline: 2px solid var(--gruen-tief);
  background: color-mix(in srgb, var(--gruen) 18%, transparent);
}
/* Text mit unveroeffentlichtem Entwurf */
.tx-feld.tx-hat-entwurf { outline-style: solid; outline-color: var(--signal); }

[data-theme='dunkel'] .tx-feld { outline-color: color-mix(in srgb, var(--gruen) 60%, transparent); }
[data-theme='dunkel'] .tx-feld:hover,
[data-theme='dunkel'] .tx-feld.tx-ist-offen { outline-color: var(--gruen); }

/* ========================================================= Editorkasten */
.tx-kasten {
  position: absolute; z-index: 300;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  box-shadow: var(--schatten-tief);
  padding: 1rem 1.1rem 1.1rem;
  display: grid; gap: .6rem;
}
.tx-kasten__laedt { color: var(--text-weich); font-size: .9rem; }
.tx-kasten__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.tx-kasten__titel { font-weight: 700; font-size: .95rem; }
.tx-kasten__zu {
  font: inherit; font-size: 1.4rem; line-height: 1;
  background: none; border: none; color: var(--text-weich);
  cursor: pointer; padding: 0 .2rem;
}
.tx-kasten__zu:hover { color: var(--signal); }
.tx-kasten__hinweis,
.tx-kasten__tipp { font-size: .8rem; color: var(--text-weich); margin: 0; }
.tx-kasten__tipp { font-family: var(--mono, ui-monospace, monospace); }
.tx-kasten__feld {
  font: inherit; width: 100%; resize: vertical;
  padding: .6rem .7rem;
  border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  background: var(--bg); color: var(--text);
}
.tx-kasten__feld:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 1px; }
.tx-kasten__reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.tx-knopf {
  font: inherit; font-size: .85rem; font-weight: 700;
  padding: .35rem .9rem; border-radius: var(--r-pille);
  border: 1px solid var(--linie-stark); background: transparent;
  color: var(--text); cursor: pointer;
}
.tx-knopf:hover { background: var(--gruen-blass); }
.tx-knopf:disabled { opacity: .6; cursor: default; }
.tx-knopf--gruen {
  background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff;
}
.tx-knopf--gruen:hover { background: var(--gruen); border-color: var(--gruen); }
.tx-knopf--zurueck { color: var(--signal); border-color: var(--signal); margin-left: auto; }
.tx-knopf--zurueck:hover { background: color-mix(in srgb, var(--signal) 12%, transparent); }

/* ============================================================= Meldung */
.tx-meldung {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  z-index: 400; background: var(--gruen-tief); color: #fff;
  padding: .6rem 1.2rem; border-radius: var(--r-pille);
  font-weight: 700; font-size: .9rem;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.tx-meldung.ist-da { opacity: 1; transform: translate(-50%, 0); }
.tx-meldung--fehler { background: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .tx-feld, .tx-meldung { transition: none; }
}

/* =========================================================== Mitmach-Wand */
/* Die Zahl steht unter der Wand. Sie ist die Bestätigung dessen, was man
   gerade gesehen hat, nicht die Ankündigung. Deshalb eine Zeile und kein
   Block: Oben stand zwischen Kopf und Wand ein zweiter Kasten derselben
   Breite, und man scrollte an zwei Überschriften vorbei, bevor die Wand
   überhaupt anfing. */
.wandzaehler {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; flex-wrap: wrap; text-align: left;
  margin: 1.4rem 0 0;
}
.wandzaehler__zahl {
  font-family: var(--display); font-weight: 700; line-height: .9;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
  color: var(--gruen-tief);
  font-variant-numeric: tabular-nums;
}
[data-theme='dunkel'] .wandzaehler__zahl { color: var(--gruen-hell); }
.wandzaehler__text {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  font-weight: 700; color: var(--text);
}
.wandzaehler__klein {
  display: block; font-size: .98rem; font-weight: 600;
  color: var(--text-weich); margin-top: .2rem;
}

/* Die Wand hat ihren eigenen dunklen Grund, unabhaengig vom hellen oder
   dunklen Seitenmodus. Sonst muessten die Zeichen in beiden Faellen
   funktionieren und waeren in einem davon immer zu blass. */
.wand {
  position: relative;
  border-radius: var(--r-riesig);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(154,180,93,.20) 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(21,84,127,.45) 0%, transparent 60%),
    linear-gradient(155deg, #10364B 0%, #0C2A3B 55%, #0A2030 100%);
  box-shadow: var(--schatten-tief);
  /* Wieder abgeschnitten, und das ist diesmal richtig so: Die Sprechblase
     entscheidet selbst, ob sie nach oben oder unten aufklappt und ob sie
     mittig oder an der Kante haengt (Klassen blase-oben, blase-links und so
     weiter, gesetzt in wand.py). Damit bleibt sie immer auf der dunklen
     Flaeche und ist lesbar. Frueher stand sie ueber dem Rand auf hellem
     Grund, wo man sie nicht entziffern konnte. */
  overflow: hidden;
  padding: 1.4rem;
  --basis: clamp(20px, calc(64vw / var(--spalten, 8)), 48px);
}

.wand--leer { display: grid; place-items: center; }
.wand__leerzeile {
  font-family: var(--hand); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  color: rgba(255,255,255,.62); margin: 0; text-align: center;
}

/* Ein Haufen: alle Zeichen eines Menschen, eng beieinander.
   Das Kästchen selbst ist ohne Ausdehnung, die Zeichen darin sitzen um
   seinen Punkt herum. Beim Zeigen wächst der ganze Haufen, nicht ein
   einzelnes Zeichen, und es erscheint genau eine Sprechblase. Früher stand
   jemand mit fünfzehn Euro dreimal mit demselben Satz an drei Stellen. */
.zeichengruppe {
  position: absolute; width: 0; height: 0;
  /* Der ganze Haufen steht schief, nicht nur die einzelnen Zeichen darin.
     Das ist der Unterschied zwischen hingelegt und hingeklebt. */
  transform: rotate(var(--neigung, 0deg));
  transition: transform .18s var(--ease);
  cursor: default;
}
.zeichengruppe:hover, .zeichengruppe:focus-visible {
  /* Beim Zeigen richtet sich der Haufen auf, damit die Sprechblase gerade
     steht und lesbar ist. */
  transform: rotate(0deg) scale(1.3); z-index: 5; outline: none;
}

/* Ein einzelnes Zeichen im Haufen. Platz, Drehung und Größe kommen vom
   Server, damit die Wand bei jedem Aufruf gleich aussieht und jeder seinen
   eigenen Haufen wiederfindet. */
.zeichen {
  position: absolute; left: 0; top: 0; line-height: 0;
  /* Feste Ausdehnung, nicht aus dem Inhalt gerechnet. Der Haufen darum ist
     ohne Ausdehnung, und die allgemeine Regel svg { max-width: 100% } haette
     sich darauf bezogen: Das Zeichen waere null Pixel breit geworden. */
  width: var(--basis); height: var(--basis);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--dx, 0) * var(--basis) * var(--gr, 1)),
              calc(var(--dy, 0) * var(--basis) * var(--gr, 1)))
    rotate(var(--dreh, 0deg)) scale(var(--gr, 1));
}
.zeichen svg {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  /* Die Symbole der Seite sind reine Umrisse. Auf der Wand wirken sie damit
     zerbrechlich. Eine leichte Füllung macht sie zu etwas, das jemand
     hingeklebt hat. */
  fill: currentColor;
  fill-opacity: .22;
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Selbst hochgeladene Zeichen sind Bilddateien. Ein Bild lässt sich nicht
   einfärben, deshalb wird es als Maske benutzt: Die Farbe kommt von unten
   durch, und ein eigenes Zeichen nimmt dieselben Wandfarben an wie die
   mitgelieferten. */
.zeichen__eigen {
  display: block; width: 100%; height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--bild) center / contain no-repeat;
  mask: var(--bild) center / contain no-repeat;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

.zeichen--gruen      { color: #9AB45D; }
.zeichen--gruen-hell { color: #C3DA8A; }
.zeichen--signal     { color: #E8926B; }
.zeichen--blau-hell  { color: #7FC2E8; }
.zeichen--flieder    { color: #C4A9DE; }

/* Wer einen Baustein übernommen hat, bekommt einen Ring. Ein zweites
   Zeichen wäre Angeberei, ein Ring ist ein Nicken. */
.zeichengruppe.ist-baustein::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--basis) * 2.1); height: calc(var(--basis) * 2.1);
  transform: translate(-50%, -50%);
  border: 2px solid currentColor; border-radius: 50%;
  opacity: .45;
}

/* Wer mehr gegeben hat, als Zeichen zu vergeben sind, bekommt einen
   Schimmer. Über der Höchstzahl wächst die Zahl der Zeichen nicht weiter,
   sonst belegte ein großer Betrag die halbe Wand. Der Schimmer sagt
   trotzdem leise, dass da mehr war. Bewusst nur Licht und kein zusätzliches
   Zeichen: Niemand soll ein kleineres haben als ein anderer. */
.zeichengruppe.ist-viel .zeichen svg,
.zeichengruppe.ist-viel .zeichen__eigen {
  filter: drop-shadow(0 0 9px currentColor)
          drop-shadow(0 0 17px currentColor)
          drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* Antippen oder Ansteuern zeigt, wer das war. Einmal je Haufen. */
.zeichengruppe::after {
  content: attr(data-wer);
  position: absolute;
  background: var(--tinte); color: #fff;
  /* Groß angesetzt, weil die Blase gleich wieder heruntergerechnet wird:
     Der Haufen wird beim Zeigen auf 1.3 gestellt. */
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
  padding: .58rem .9rem; border-radius: var(--r);
  white-space: normal; width: max-content; max-width: 21rem;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease);
  box-shadow: var(--schatten);
}
.zeichengruppe[data-satz]:not([data-satz=''])::after {
  content: attr(data-wer) ': ' attr(data-satz);
}

/* Wohin die Blase aufklappt. Der Server rechnet aus, welche Klasse ein
   Haufen bekommt, damit die Blase nie über den Rand der Wand hinausragt. */
.zeichengruppe.blase-oben::after  { bottom: calc(var(--basis) * .9); }
.zeichengruppe.blase-unten::after { top: calc(var(--basis) * .9); }
.zeichengruppe.blase-mittig::after        { left: 50%; transform: translateX(-50%) scale(.77); }
.zeichengruppe.blase-linksbuendig::after  { left: calc(var(--basis) * -.6); transform-origin: left center; transform: scale(.77); }
.zeichengruppe.blase-rechtsbuendig::after { right: calc(var(--basis) * -.6); transform-origin: right center; transform: scale(.77); }
.zeichengruppe.blase-linksbuendig.blase-oben::after  { transform-origin: left bottom; }
.zeichengruppe.blase-rechtsbuendig.blase-oben::after { transform-origin: right bottom; }
.zeichengruppe.blase-linksbuendig.blase-unten::after  { transform-origin: left top; }
.zeichengruppe.blase-rechtsbuendig.blase-unten::after { transform-origin: right top; }

.zeichengruppe:hover::after, .zeichengruppe:focus-visible::after { opacity: 1; }
@media (max-width: 34rem) { .zeichengruppe::after { max-width: 16rem; } }

/* Das gerade gesetzte Zeichen. Es pocht kurz, damit man es findet. */
.zeichengruppe.ist-neu { z-index: 4; }
.zeichengruppe.ist-neu::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--basis) * 2.3); height: calc(var(--basis) * 2.3);
  border: 2px solid currentColor; border-radius: 50%;
  animation: zeichenpochen 1.9s var(--ease) 3;
}
@keyframes zeichenpochen {
  0%   { transform: translate(-50%, -50%) scale(.75); opacity: .9; }
  70%  { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zeichengruppe.ist-neu::before { animation: none; opacity: .7; }
  .zeichengruppe { transition: none; }
}

.wandhinweis {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1rem 0 0; font-weight: 700; color: var(--gruen-tief);
}
[data-theme='dunkel'] .wandhinweis { color: var(--gruen-hell); }

.wandmachmit { text-align: center; margin: 2rem 0 0; }

/* Auswahl des Motivs: vier Bilder zum Antippen statt einer Auswahlliste.
   Man sucht sich ein Zeichen aus, also soll man Zeichen sehen. */
.motivwahl { border: 0; padding: 0; margin: 0 0 1.2rem; }
.motivwahl legend { font-weight: 700; margin-bottom: .6rem; padding: 0; }
.motivwahl { display: flex; flex-wrap: wrap; gap: .7rem; }
.motivwahl legend { flex-basis: 100%; }
.motivwahl__stueck input { position: absolute; opacity: 0; width: 0; height: 0; }
.motivwahl__stueck span {
  display: grid; place-items: center; gap: .3rem;
  min-width: 5.2rem; padding: .8rem .6rem;
  border: 2px solid var(--linie); border-radius: var(--r);
  cursor: pointer; transition: all .16s var(--ease);
  color: var(--text-weich);
}
.motivwahl__stueck span small { font-size: .78rem; font-weight: 600; }
.motivwahl__stueck:hover span { border-color: var(--gruen); }
.motivwahl__stueck input:checked + span {
  border-color: var(--gruen-tief); background: var(--gruen-blass);
  color: var(--gruen-tief);
}
[data-theme='dunkel'] .motivwahl__stueck input:checked + span {
  background: rgba(154,180,93,.18); color: var(--gruen-hell);
  border-color: var(--gruen);
}
.motivwahl__stueck input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }

.wandform { margin-top: 1.6rem; }

/* --------------------------------------------- Bausteine unter der Wand */
.wandtrenner { margin: 3.4rem 0 1.4rem; }
.wandtrenner h2 { margin-bottom: .5rem; }
.wandbalken { max-width: 44rem; }

.baustein {
  background: var(--flaeche); border-radius: var(--r-gross);
  padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--schatten-weich);
  border: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: .55rem;
}
.baustein__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.baustein__betrag {
  font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
  color: var(--gruen-tief); margin: 0;
}
[data-theme='dunkel'] .baustein__betrag { color: var(--gruen-hell); }
.baustein__titel { font-size: 1.1rem; margin: 0; }
.baustein .btn { margin-top: auto; align-self: flex-start; }
.baustein.ist-voll { background: var(--bg-2); box-shadow: none; }
.baustein.ist-voll .baustein__betrag { color: var(--text-weich); }
.baustein__fertig {
  margin: auto 0 0; display: flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--gruen-tief); font-size: .92rem;
}
[data-theme='dunkel'] .baustein__fertig { color: var(--gruen-hell); }

/* Das Kennwort wird von Hand in eine Banking-App getippt, oft vom Handy
   abgelesen. Deshalb gross, gesperrt und mit Ziffern gleicher Breite. */
.kennwort {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--gruen-tief); margin: .2rem 0 .3rem; word-break: break-all;
}
[data-theme='dunkel'] .kennwort { color: var(--gruen-hell); }

/* --------------------------------------------- Betrag auf der Mitmach-Wand */
/* Die Rechnung steht auf den Knoepfen selbst: so viel Euro, so viele Zeichen.
   Wer erst im Kleingedruckten nachlesen muss, wie das zusammenhaengt, macht
   nicht mit. */
.betragwahl { border: 0; padding: 0; margin: 0 0 1.4rem;
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: stretch; }
.betragwahl legend { font-weight: 700; margin-bottom: .6rem; padding: 0; }
.betragwahl legend, .betragwahl > p { flex-basis: 100%; }
.betragwahl__stueck input { position: absolute; opacity: 0; width: 0; height: 0; }
.betragwahl__stueck span {
  display: grid; place-items: center; gap: .15rem;
  min-width: 6rem; padding: .8rem 1rem; height: 100%;
  border: 2px solid var(--linie); border-radius: var(--r);
  cursor: pointer; transition: all .16s var(--ease);
}
.betragwahl__stueck b { font-size: 1.25rem; font-family: var(--display); }
.betragwahl__stueck small { font-size: .78rem; color: var(--text-weich); font-weight: 600; }
.betragwahl__stueck:hover span { border-color: var(--gruen); }
.betragwahl__stueck input:checked + span {
  border-color: var(--gruen-tief); background: var(--gruen-blass); color: var(--gruen-tief);
}
[data-theme='dunkel'] .betragwahl__stueck input:checked + span {
  background: rgba(154,180,93,.18); color: var(--gruen-hell); border-color: var(--gruen);
}
.betragwahl__stueck input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.betragwahl__frei { display: grid; gap: .2rem; align-content: center; }
.betragwahl__frei span { font-size: .82rem; color: var(--text-weich); font-weight: 600; }
.betragwahl__frei input { width: 8rem; }

/* ---------------------------------------------------- Wandkarten im Archiv */
.wandkarte {
  display: grid; gap: .35rem; align-content: start;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r-gross); padding: 1.3rem 1.4rem;
  box-shadow: var(--schatten-weich); text-decoration: none; color: inherit;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.wandkarte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.wandkarte__thema { font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gruen-tief); }
[data-theme='dunkel'] .wandkarte__thema { color: var(--gruen-hell); }
.wandkarte__titel { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.wandkarte__zahl { font-size: .9rem; color: var(--text-weich); font-weight: 600; }
.wandkarte__balken { display: block; height: 8px; border-radius: var(--r-pille);
  background: var(--bg-2); overflow: hidden; margin-top: .3rem; }
.wandkarte__balken span { display: block; height: 100%; border-radius: var(--r-pille);
  background: linear-gradient(90deg, var(--gruen), var(--gruen-tief)); }
.wandkarte.ist-laufend { border-color: var(--gruen); }

/* ------------------------------------------------- Kopf einer Mitmach-Wand */
/* Jede Wand hat ein Thema, und das soll man sehen, bevor man etwas liest.
   Deshalb ein eigener Kopf statt des allgemeinen Seitenkopfs: in den Farben
   der Wand, mit dem gewählten Zeichen groß im Hintergrund. */
.wandkopf {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(154,180,93,.22) 0%, transparent 55%),
    linear-gradient(155deg, #10364B 0%, #0C2A3B 60%, #0A2030 100%);
  padding: clamp(2.4rem, 5vw, 4.4rem) 0 clamp(2rem, 4vw, 3.4rem);
  margin-bottom: 2.4rem;
}
.wandkopf__inhalt { position: relative; }

/* Das Zeichen der Wand, vielfach und sehr blass. Es soll das Thema tragen,
   nicht mit dem Text um Aufmerksamkeit streiten. */
.wandkopf__muster {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.4rem);
  opacity: .09; color: #fff;
}
.wandkopf__zeichen { display: block; width: 60px; height: 60px; line-height: 0; }
.wandkopf__zeichen svg { width: 100%; height: 100%; max-width: none; }
.wandkopf__zeichen .zeichen__eigen { width: 60px; height: 60px; filter: none; }

/* Der Name der Wand steht klein, das Thema groß. Wer hier ankommt, kommt
   wegen der Sache. Der Name dient der Wiedererkennung, mehr nicht.

   Schriften wie überall auf der Seite: die kleine grüne Zeile in der
   Handschrift, die Überschrift in der Hausschrift. Andersherum sah es aus
   wie eine fremde Seite. */
.wandkopf__marke {
  font-family: var(--hand);
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.65rem);
  font-weight: 600; line-height: 1;
  color: var(--gruen-hell);
  margin: 0 0 .5rem;
}
.wandkopf__thema {
  font-family: var(--display); font-weight: 700;
  color: #fff; margin: 0; max-width: 20ch;
  font-size: clamp(2.3rem, 1.4rem + 4.4vw, 4.4rem); line-height: 1.05;
}
.wandkopf__zeit {
  display: flex; align-items: center; gap: .45rem;
  margin: 1rem 0 0; font-size: .95rem; font-weight: 600;
  color: rgba(255,255,255,.72);
}
.wandkopf__text {
  color: rgba(255,255,255,.86); max-width: 56ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.18rem);
  margin: 1.1rem 0 0;
}

/* ------------------------------------ Die Wand als Vorschau auf /aktionen */
/* Sie steht vor den Spendenaktionen: Ein Balken ist eine Zahl, die Wand sind
   Menschen. Rechts ein Ausschnitt der echten Wand, damit man sieht, worum es
   geht, ohne zu klicken. */
.wandteaser {
  position: relative; overflow: hidden;
  background:
    radial-gradient(110% 90% at 10% 0%, rgba(154,180,93,.20) 0%, transparent 55%),
    linear-gradient(155deg, #10364B 0%, #0C2A3B 60%, #0A2030 100%);
  padding: clamp(2rem, 4vw, 3.4rem) 0;
}
.wandteaser__innen {
  display: grid; gap: clamp(1.6rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 60rem) {
  .wandteaser__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.wandteaser__marke {
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.5rem);
  font-weight: 600; line-height: 1;
  color: var(--gruen-hell); margin: 0 0 .4rem;
}
.wandteaser__thema {
  font-family: var(--display); font-weight: 700;
  color: #fff; margin: 0; max-width: 18ch;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); line-height: 1.06;
}
.wandteaser__lead {
  color: rgba(255,255,255,.84); max-width: 48ch; margin: .9rem 0 0;
}
.wandteaser__zahl {
  margin: 1.1rem 0 0; color: #fff; font-weight: 600;
  font-size: 1.05rem;
}
.wandteaser__zahl b {
  font-family: var(--display); font-size: 2.1rem; color: var(--gruen-hell);
  margin-right: .35rem; vertical-align: -.12em;
}

/* Der Ausschnitt der Wand. Dieselben Klassen wie auf der Wandseite selbst,
   damit es dort und hier gleich aussieht. */
.wandteaser__wand {
  position: relative; min-height: 260px;
  border-radius: var(--r-riesig);
  background: rgba(255,255,255,.05);
  --basis: clamp(20px, calc(30vw / 6), 42px);
}
@media (max-width: 60rem) { .wandteaser__wand { min-height: 200px; } }

/* In der Vorschau sind die Zeichen nur Bild. Sie tragen keine Namen, also
   erschien beim Darueberfahren eine leere Sprechblase: eine blaue Pille aus
   dem Nichts. Hier also weder Blase noch Vergroesserung. Wer die Namen sehen
   will, geht auf die Wand. */
.wandteaser__wand .zeichengruppe::after { content: none; display: none; }
.wandteaser__wand .zeichengruppe { pointer-events: none; }
.wandteaser__wand .zeichengruppe:hover,
.wandteaser__wand .zeichengruppe:focus-visible {
  transform: rotate(var(--neigung, 0deg));
}

/* Hinweis über der Wand. Die Sprechblase erscheint erst beim Antippen, und
   was man nicht sieht, probiert man nicht aus. */
.wandtipp {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .7rem; font-size: .88rem; color: var(--text-weich);
}

/* Abgeschlossene Mitmach-Wand als Kachel. Statt eines Fotos ein Ausschnitt
   der Wand selbst, in derselben Form wie das Bild einer Spendenaktion. */
.aktion__bild--wand {
  background:
    radial-gradient(110% 90% at 12% 0%, rgba(154,180,93,.20) 0%, transparent 55%),
    linear-gradient(155deg, #10364B 0%, #0C2A3B 60%, #0A2030 100%);
}
.wandausschnitt {
  position: absolute; inset: 0;
  --basis: clamp(18px, 4.4vw, 34px);
}
.wandausschnitt .zeichengruppe { pointer-events: none; }
.wandausschnitt .zeichengruppe::after { content: none; display: none; }
.wandkachel__zahl { margin: .6rem 0 0; font-weight: 600; color: var(--text-weich); }
.wandkachel__zahl b {
  font-family: var(--display); font-size: 1.35rem; color: var(--gruen-tief);
  margin-right: .2rem;
}
[data-theme='dunkel'] .wandkachel__zahl b { color: var(--gruen-hell); }

/* Steht dort, wo sonst die Bankverbindung stünde, solange es noch kein
   Vereinskonto gibt. */
.kommtnoch {
  border: 2px dashed var(--linie-stark); border-radius: var(--r-gross);
  padding: 1.3rem 1.4rem; background: var(--bg-2);
}
.kommtnoch__titel {
  font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  margin: 0 0 .5rem; color: var(--gruen-tief);
}
[data-theme='dunkel'] .kommtnoch__titel { color: var(--gruen-hell); }
.kommtnoch__text { font-size: .95rem; margin: 0 0 .7rem; }
.kommtnoch__text:last-child { margin-bottom: 0; }

/* Die Rechtsform im Kopf. Klein und zurückhaltend: Der Name trägt die Seite,
   das „e. V.“ ist eine Angabe und keine Ansage. */
.marke__ev {
  font-family: var(--sans); font-weight: 600; font-size: .72em;
  color: var(--text-weich); margin-left: .35em; letter-spacing: 0;
}

/* Der Vorstand im Impressum. Drei Namen in einer Zeile hintereinanderweg
   liest niemand. */
.vorstandsliste { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.vorstandsliste li {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linie);
}
.vorstandsliste li:last-child { border-bottom: 0; padding-bottom: 0; }
.vorstandsliste span { font-size: .9rem; color: var(--text-weich); font-weight: 600; }

/* Die Satzung im Wortlaut. Ein Rechtstext liest sich besser mit Luft:
   schmale Zeilen, deutliche Abstände zwischen den Paragraphen. */
.satzung { margin-top: 1.8rem; }
.satzung__paragraf {
  font-size: 1.25rem; margin: 2.4rem 0 .8rem;
  padding-top: 1.4rem; border-top: 2px solid var(--linie);
}
.satzung__paragraf:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.satzung p { margin: 0 0 .9rem; max-width: 62ch; }
.satzung__liste { margin: 0 0 1.1rem 1.2rem; max-width: 62ch; display: grid; gap: .5rem; }
.satzung__liste li { padding-left: .3rem; }