/* Tierleben Deutschland e.V. — Design-System
   Farben und Schrift aus 00_Marke/Brand-Guide/brand-tokens.md.
   Wer hier Farben ändert, ändert sie für die gesamte Seite. */

:root{
  --primary:#00A0E3;
  --primary-dark:#0B7CAC;
  --accent:#EF7F1A;
  --dark:#222222;
  --text:#555555;
  --bg:#F8F9FA;
  --bg-soft:#E9ECEF;
  --line:#DEE2E6;
  --white:#fff;
  --radius:16px;
  --radius-lg:24px;
  --shadow:0 12px 40px rgba(0,0,0,.07);
  --shadow-lg:0 20px 60px rgba(0,0,0,.11);
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Raleway',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--dark);font-weight:600;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.5vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--primary-dark);margin-bottom:12px}
.lead{font-size:1.12rem}
.mut{color:var(--text)}
.center{text-align:center}

/* --- Kopf --- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px;max-width:var(--wrap);margin:0 auto}
.site-header img{height:56px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--text);font-size:.94rem;font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--dark);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--dark);cursor:pointer;padding:4px 8px}

/* --- Knöpfe --- */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:1rem;font-weight:700;padding:14px 28px;border-radius:999px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 4px 20px rgba(0,160,227,.35)}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:var(--primary-dark);border:2px solid var(--line);padding:12px 26px}
.btn-ghost:hover{border-color:var(--primary)}
.btn-sm{padding:8px 16px;font-size:.86rem}

/* --- Abschnitte --- */
.section{padding:84px 0}
.section-soft{background:var(--white)}
.section-dark{background:var(--dark);color:rgba(255,255,255,.85)}
.section-dark h1,.section-dark h2,.section-dark h3{color:#fff}
.section-blue{background:var(--primary-dark);color:#fff}
.section-blue h1,.section-blue h2{color:#fff}
.section-blue .kicker{color:rgba(255,255,255,.75)}

/* --- Hero --- */
.hero{padding:72px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1 em{font-style:italic;color:var(--primary)}
.stats{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap}
.stats .n{font-size:1.9rem;font-weight:700;color:var(--primary);line-height:1.1}
.stats .l{font-size:.84rem}

/* --- Hundekarten --- */
.dog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:26px}
.dog-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.dog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);text-decoration:none}
.dog-card .photo{aspect-ratio:4/5;background:var(--bg-soft);position:relative;overflow:hidden}
.dog-card .photo img{width:100%;height:100%;object-fit:cover}
.dog-card .photo .none{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text);font-size:.85rem}
.dog-card .body{padding:18px 20px 22px}
.dog-card h3{margin-bottom:4px;font-size:1.25rem}
.dog-card .meta{font-size:.88rem;color:var(--text)}
.dog-card .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}

.badge{position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--primary);color:#fff}
.badge-notfall{background:var(--accent)}
.badge-reserviert{background:var(--dark)}
.tag{font-size:.76rem;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--bg);color:var(--text);border:1px solid var(--line)}

/* --- Profil --- */
.profile{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery .main{grid-column:1/-1;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumb{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-soft)}
.gallery .thumb img{width:100%;height:100%;object-fit:cover}
.facts{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;font-size:.95rem}
.facts dt{font-weight:600;color:var(--dark)}
.facts dd{margin:0}

/* --- Formulare --- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
label{display:block;font-size:.88rem;font-weight:600;color:var(--dark);margin:16px 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=password],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:1rem;color:var(--dark);background:var(--white)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary)}
textarea{min-height:120px;resize:vertical}
.check-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
.check-row label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.check-row input{width:auto}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Ablagefeld für Fotos */
.dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:34px;text-align:center;
  background:var(--bg);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dropzone:hover,.dropzone.over{border-color:var(--primary);background:#fff}
.dropzone strong{color:var(--dark);display:block;margin-bottom:4px}
.dropzone small{color:var(--text)}
.dz-list{margin-top:14px;font-size:.88rem;color:var(--text);text-align:left}

/* --- Tabelle (Verwaltung) --- */
.table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;font-size:.94rem}
.table th{text-align:left;background:var(--bg);color:var(--dark);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .thumb{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--bg-soft)}
.status{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:999px}
.status-online{background:#e6f6fd;color:var(--primary-dark)}
.status-entwurf{background:var(--bg-soft);color:var(--text)}
.status-reserviert{background:#fdf0e3;color:#9a5410}
.status-vermittelt{background:#e8f5ec;color:#1f6b3b}
.status-archiv{background:var(--bg-soft);color:var(--text)}

/* --- Hinweise --- */
.note{background:var(--bg);border-left:4px solid var(--primary);padding:16px 20px;border-radius:0 10px 10px 0;margin:20px 0}
.note-ok{border-left-color:#1f6b3b;background:#e8f5ec}
.note-warn{border-left-color:var(--accent)}

/* --- Fuß --- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.75);padding:52px 0 40px;font-size:.92rem;margin-top:0}
.site-footer a{color:rgba(255,255,255,.75)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:12px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:7px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;font-size:.84rem;opacity:.7}

@media(max-width:900px){
  .hero-grid,.profile,.field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .section{padding:56px 0}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;padding:18px 24px;gap:14px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .site-header .inner{position:relative}
}

/* ======================================================================
   Erweiterungen — Stand 2026
   Dunkelmodus, Barrierefreiheit, Container-Abfragen
   ====================================================================== */

:root{ color-scheme: light dark; }

/* Dunkelmodus: nur die Farbwerte tauschen, nichts an der Struktur.
   Das Markenblau bleibt, es trägt auf dunklem Grund sogar besser. */
@media (prefers-color-scheme: dark){
  :root{
    --primary:#2AB6F0;
    --primary-dark:#7FD4FA;   /* auf dunklem Grund muss Text HELLER werden */
    --accent:#FF9838;
    --dark:#F2F4F6;           /* aus "dunkel" wird die hellste Textfarbe */
    --text:#AFB6BD;
    --bg:#15181B;
    --bg-soft:#1E2226;
    --line:#2C3237;
    --white:#1A1E22;          /* Kartenflächen */
    --shadow:0 12px 40px rgba(0,0,0,.45);
    --shadow-lg:0 20px 60px rgba(0,0,0,.55);
  }
  .section-dark{background:#0F1113}
  .section-blue{background:#0A5E85}
  /* Das Logo hat dunkle Schrift — auf dunklem Grund braucht es eine helle Fläche */
  .site-header a:first-child{background:#fff;border-radius:12px;padding:6px 12px;display:inline-block}
  .btn-primary{color:#06212C}
  .status-online{background:#0d3a4d;color:#7FD4FA}
  .status-reserviert{background:#4a3419;color:#ffc182}
  .status-vermittelt{background:#153d26;color:#8fd6a8}
  img{opacity:.94}

  /* Achtung, Stolperstelle: --dark ist im Dunkelmodus die HELLSTE Textfarbe.
     Alles, was --dark als Hintergrund benutzt, wird dadurch fast weiss. Bei
     .section-dark war das beruecksichtigt, hier fehlte es: Der Fuss stand mit
     weisser Schrift auf weissem Grund. */
  .site-footer{background:#0F1113;color:rgba(255,255,255,.72)}
  .site-footer h4{color:#F2F4F6}
  .site-footer a{color:rgba(255,255,255,.72)}
  .site-footer a:hover{color:#fff}
  .badge-reserviert{background:#0F1113;color:#F2F4F6}
}

/* Sprungmarke — erste Station für Tastatur und Screenreader */
.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;z-index:100;font-weight:600}
.skip:focus{left:0;text-decoration:none}

/* Sichtbarer Fokus — nur bei Tastaturbedienung, nicht bei Mausklick */
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* Wer Bewegung reduziert haben will, bekommt sie nicht */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
  .dog-card:hover,.btn:hover{transform:none}
}

/* Container-Abfragen: Die Hundekarte richtet sich nach ihrem Platz,
   nicht nach der Fensterbreite. Dieselbe Karte funktioniert dadurch
   in der breiten Liste wie in der schmalen Seitenspalte. */
.dog-grid{container-type:inline-size}
.dog-card{container-type:inline-size}
@container (min-width: 340px){
  .dog-card .body{padding:22px 24px 26px}
  .dog-card h3{font-size:1.4rem}
}

/* Nur für Screenreader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Spendenmodul ---- */
.spend-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.spend-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-soft);
  border-radius:999px;padding:5px;margin:26px 26px 0}
.spend-toggle label{margin:0;text-align:center;padding:11px;border-radius:999px;cursor:pointer;
  font-weight:600;color:var(--text);transition:background .15s ease,color .15s ease}
.spend-toggle input{position:absolute;opacity:0;pointer-events:none}
.spend-toggle input:checked + label{background:var(--dark);color:var(--bg)}
.spend-toggle input:focus-visible + label{outline:3px solid var(--primary);outline-offset:2px}

.betrag{display:block;border:2px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  margin:0 0 10px;cursor:pointer;display:flex;align-items:center;gap:16px;background:var(--bg);
  font-weight:400;transition:border-color .15s ease,background .15s ease}
.betrag:hover{border-color:var(--primary)}
.betrag .euro{font-size:1.45rem;font-weight:700;color:var(--dark);min-width:66px}
.betrag .wirkung{font-size:.92rem;color:var(--text);line-height:1.45}
input[type=radio].betrag-radio{position:absolute;opacity:0;pointer-events:none}
input[type=radio].betrag-radio:checked + .betrag{border-color:var(--primary);background:var(--white)}
input[type=radio].betrag-radio:checked + .betrag .euro{color:var(--primary)}
input[type=radio].betrag-radio:focus-visible + .betrag{outline:3px solid var(--primary);outline-offset:2px}
.beliebt{margin-left:auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--accent);color:#fff;padding:4px 10px;border-radius:999px;white-space:nowrap}

/* ---- Ablauf in Schritten ---- */
.schritte{counter-reset:schritt;list-style:none;padding:0;margin:0}
.schritte li{counter-increment:schritt;position:relative;padding:0 0 34px 66px}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:-4px;width:44px;height:44px;
  border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:1.1rem}
.schritte li::after{content:"";position:absolute;left:21px;top:44px;bottom:6px;width:2px;background:var(--line)}
.schritte li:last-child{padding-bottom:0}
.schritte li:last-child::after{display:none}
.schritte h3{margin-bottom:6px}

/* ---- Karten-Raster für Inhalte ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.cards .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
/* Lange Wörter ("Zuwendungsbestätigung") liefen auf schmalen Karten in den
   Rand. Jetzt wird getrennt statt übergelaufen (29.09.2026). */
.cards .card h3{margin-bottom:8px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---- Aufklappbare Fragen ---- */
details{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:12px}
details[open]{border-color:var(--primary)}
summary{cursor:pointer;font-weight:600;color:var(--dark);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;font-size:1.4rem;line-height:1;color:var(--primary)}
details[open] summary::after{content:"−"}
details p{margin:14px 0 0}

/* ---- Fließtext-Seiten (Impressum, Datenschutz) ---- */
.prose{max-width:760px}
.prose h2{font-size:1.4rem;margin:38px 0 10px}
.prose h3{font-size:1.08rem;margin:24px 0 8px}
.prose dt{font-weight:600;color:var(--dark);margin-top:12px}
.prose dd{margin:0}

/* ---- Erfahrungsberichte ---- */
/* ---- Erfahrungsberichte ----

   Eine Vorlage, drei Anordnungen. Welche greift, entscheidet die Anzahl:
   ist-einzeln (1), ist-raster (2 bis 3), ist-reihe (ab 4). Eine Wischreihe
   mit einem einzigen Video sah aus, als waere etwas nicht geladen.

   Hochkant, weil die Videos vom Handy kommen. Bis zum 11.09.2026 standen
   sie hier in einem Fenster im Format 4:3 und verloren drei Viertel ihrer
   Hoehe: Wer den Kopf nicht in der Bildmitte hatte, war angeschnitten. */
.reel-huelle{position:relative}
.reel{list-style:none;margin:0;padding:0}

/* Das Bild selbst ist in allen drei Anordnungen dasselbe: 9:16. */
.reel-bild{position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius);background:#101619}
.reel-medium{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;display:block;background:#101619}
/* Ein quer aufgenommenes Foto wird nicht seitlich beschnitten, sondern
   eingepasst. Lieber Rand als ein halbes Gesicht. */
.reel-kachel.ist-quer .reel-medium{object-fit:contain;object-position:center;background:transparent}
/* Fotos füllen die Kachel mit dem Ausschnitt aus PfotenOS (Stimme.ausschnitt). */
.reel-foto{background-repeat:no-repeat;background-color:#101619}
/* Hinter quer aufgenommenen Bildern dasselbe Bild, weich und leicht
   abgedunkelt. Der Rand füllt sich, ohne dass etwas vom Bild fehlt. */
.reel-grund{position:absolute;inset:-28px;background-size:cover;background-position:center;
  filter:blur(24px) brightness(.88) saturate(1.05)}

.reel-knopf{position:absolute;inset:0;z-index:3;border:0;background:none;
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.reel-play{width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#101619;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;padding-left:3px;
  transition:transform .16s ease,background .16s ease}
.reel-knopf:hover .reel-play{transform:scale(1.08);background:#fff}
.reel-knopf:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}

.reel-wer{display:block;font-size:.78rem;color:var(--text)}
.reel-wer b{color:var(--dark);font-weight:700}
.reel-worte q{quotes:"\201E" "\201C"}

/* --- 1 Bericht: Grossaufnahme --- */
.reel.ist-einzeln{display:block;max-width:720px;margin:0 auto}
.reel.ist-einzeln .reel-kachel{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:center}
.reel.ist-einzeln .reel-worte{display:block}
.reel-kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--primary-dark);margin:0 0 10px}
.reel.ist-einzeln .reel-worte q{
  display:block;font-size:1.5rem;line-height:1.33;color:var(--dark);
  margin-bottom:16px;text-wrap:balance}
.reel.ist-einzeln .reel-wer{font-size:.88rem}

/* --- 2 bis 3 Berichte: Raster --- */
.reel.ist-raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;max-width:720px;margin:0 auto}
.reel.ist-raster .reel-kachel{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.reel.ist-raster .reel-bild{border-radius:0}
.reel.ist-raster .reel-worte{padding:15px 17px 18px}
.reel.ist-raster .reel-worte q{
  display:block;font-size:.92rem;line-height:1.52;font-style:italic;
  color:var(--dark);margin-bottom:9px}

/* --- ab 4 Berichten: Reihe zum Wischen --- */
.reel.ist-reihe{
  display:flex;gap:16px;overflow-x:auto;padding:4px 0 14px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.reel.ist-reihe::-webkit-scrollbar{height:6px}
.reel.ist-reihe::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.reel.ist-reihe .reel-kachel{
  flex:0 0 210px;scroll-snap-align:start;position:relative;
  aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;background:#101619}
.reel.ist-reihe .reel-bild{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
/* Hier steht das Zitat im Bild, deshalb weiss auf dunklem Verlauf. */
.reel.ist-reihe .reel-worte{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:48px 15px 15px;
  color:#fff;background:linear-gradient(transparent,rgba(6,12,15,.88) 62%);
  pointer-events:none}
.reel.ist-reihe .reel-worte q{
  font-size:.88rem;line-height:1.42;margin-bottom:7px;
  /* Drei Zeilen, dann Punkte. Der ganze Text steht im grossen Fenster. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reel.ist-reihe .reel-wer{font-size:.73rem;color:rgba(255,255,255,.8)}
.reel.ist-reihe .reel-wer b{color:#fff}

.reel-pfeil{
  position:absolute;top:calc(50% - 24px);z-index:4;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--dark);
  font-size:1.4rem;line-height:1;cursor:pointer;display:none;box-shadow:var(--shadow)}
.reel-huelle.hat-pfeile .reel-pfeil{display:block}
.reel-pfeil.links{left:-18px}
.reel-pfeil.rechts{right:-18px}
.reel-pfeil:disabled{opacity:.3;cursor:default}
@media (max-width:820px){.reel-huelle.hat-pfeile .reel-pfeil{display:none}}

/* Ohne Bild gibt es keine graue Flaeche, sondern nur das Zitat. */
.reel-kachel.ist-ohne-bild{background:var(--primary-dark);border-color:transparent}
.reel-kachel.ist-ohne-bild .reel-worte{
  background:none;color:#fff;padding:26px 22px;position:static;min-height:150px;
  display:flex;flex-direction:column;justify-content:center}
.reel-kachel.ist-ohne-bild .reel-worte q{font-size:1rem;color:#fff;-webkit-line-clamp:none}
.reel-kachel.ist-ohne-bild .reel-wer{color:rgba(255,255,255,.78)}
.reel-kachel.ist-ohne-bild .reel-wer b{color:#fff}
.reel.ist-einzeln .reel-kachel.ist-ohne-bild{grid-template-columns:1fr}

/* Das grosse Fenster mit Ton. */
html.reel-offen{overflow:hidden}
.reel-fenster{position:fixed;inset:0;z-index:200;background:rgba(4,9,12,.93);
  display:flex;align-items:center;justify-content:center;padding:22px}
.reel-fenster[hidden]{display:none}
.reel-fenster-innen{display:flex;flex-direction:column;gap:14px;
  max-width:min(420px,92vw);width:100%}
.reel-fenster video{width:100%;height:auto;max-height:80vh;
  object-fit:contain;background:transparent;border-radius:var(--radius);display:block}
.reel-fenster-worte{color:#fff;text-align:center}
.reel-fenster-worte q{display:block;quotes:"\201E" "\201C";
  font-size:1.02rem;line-height:1.55;margin-bottom:7px}
.reel-fenster-worte span{font-size:.83rem;color:rgba(255,255,255,.72)}
.reel-zu{position:absolute;top:16px;right:18px;width:42px;height:42px;
  border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;line-height:1}
.reel-zu:hover{background:rgba(255,255,255,.26)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){
  .reel.ist-einzeln .reel-kachel{grid-template-columns:150px minmax(0,1fr);gap:18px}
  .reel.ist-einzeln .reel-worte q{font-size:1.12rem}
  .reel.ist-reihe .reel-kachel{flex-basis:66vw;max-width:260px}
}

/* ---- Zahlen-Kacheln (Fördermitglied, Transparenz) ---- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.zahl{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;text-align:center}
.zahl .wert{font-size:2.3rem;font-weight:700;color:var(--primary);line-height:1.1;display:block}
.zahl .label{font-size:.9rem;margin-top:6px;display:block}
.zahl .quelle{font-size:.74rem;opacity:.7;margin-top:8px;display:block}

/* ---- Kostenaufstellung ---- */
.kosten{list-style:none;padding:0;margin:0}
.kosten li{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.kosten li:last-child{border-bottom:0}
.kosten .posten{flex:1}
.kosten .preis{font-weight:700;color:var(--dark);white-space:nowrap;font-size:1.05rem}
.kosten .balken{height:6px;border-radius:3px;background:var(--primary);flex:0 0 auto;min-width:8px}

/* ---- Bild-Text-Blöcke (Über uns) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rechts > :first-child{order:2}
.split img{border-radius:var(--radius-lg);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow)}
.platzhalter{border-radius:var(--radius-lg);aspect-ratio:4/3;background:var(--bg-soft);
  border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--text);font-size:.9rem;line-height:1.5}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:28px}
  .split.rechts > :first-child{order:0}
}


/* ---------- Bens Geschichte (Über uns) ---------- */
.ben-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,52px);align-items:start;margin-top:28px}
@media (max-width:760px){.ben-grid{grid-template-columns:1fr}}
.ben-text p{margin:0 0 18px}
.ben-zitat{border-left:4px solid var(--primary);padding:4px 0 4px 20px;margin:0 0 20px;
  font-size:1.12rem;line-height:1.55;color:var(--dark);font-weight:500}
.ben-zitat strong{font-weight:700}
.ben-merk{background:var(--bg);border-radius:12px;padding:18px 22px;margin:0 0 20px}
.ben-merk .zahl-gross{display:block;font-size:2rem;font-weight:800;color:var(--primary-dark);
  line-height:1;margin-bottom:6px}
.ben-name{font-weight:800;color:var(--dark)}
.ben-name em{font-style:normal;color:var(--primary-dark)}


/* ---------- Patenschaftsstufen ---------- */
.stufen{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
  margin-top:32px}
.stufe{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  border-top:3px solid var(--primary);display:flex;flex-direction:column}
.stufe.frei{border-top-color:var(--accent)}
.stufe .name{font-weight:800;color:var(--dark);font-size:1.05rem}
.stufe .ab{font-size:1.6rem;font-weight:800;color:var(--primary-dark);line-height:1.1;
  margin:8px 0 2px;font-variant-numeric:tabular-nums}
.stufe .je{font-size:.82rem;color:var(--muted,#6B7A82);margin-bottom:12px}
.stufe .was{font-size:.94rem;margin:0}
@media (prefers-color-scheme:dark){.stufe{background:transparent}}


/* ---------- Werbe-Landingpages ---------- */
.lp-kopf{padding:18px 0;border-bottom:1px solid var(--line)}
.lp-kopf .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp-logo{height:44px;width:auto;display:block}
.lp-claim{font-size:.82rem;font-weight:600;color:var(--primary-dark);letter-spacing:.02em}
.lp-fuss{padding:32px 0 44px;border-top:1px solid var(--line);margin-top:60px;
  font-size:.86rem;color:var(--text)}
.lp-fuss p{margin:0 0 6px}
.lp-held{padding:clamp(38px,6vw,74px) 0 clamp(30px,4vw,54px)}
.lp-held h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;margin:0 0 18px}
.lp-anker{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.lp-vertrauen{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;
  font-size:.86rem;color:var(--text)}
.lp-vertrauen span{display:inline-flex;align-items:center;gap:7px}
.lp-vertrauen span::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--primary);flex:none}

.ben-nachsatz{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--text);font-style:italic}

/* --- Spendenformular ---------------------------------------------------- */
.wahl{border:0;padding:0;margin:0}
.wahl legend{font-weight:700;font-size:.9rem;margin-bottom:10px;padding:0}
.wahl-feld{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s}
.wahl-feld:hover{border-color:var(--primary)}
.wahl-feld:has(input:checked){border-color:var(--primary);background:var(--bg)}
.wahl-feld input{margin-top:3px;flex:0 0 auto}
.wahl-feld small{color:var(--text)}

.betrag-knoepfe{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.betrag-knopf{flex:1 1 0;min-width:72px;padding:12px 8px;border:1px solid var(--line);
  border-radius:10px;background:var(--white);font:inherit;font-weight:700;cursor:pointer;
  transition:border-color .15s,background .15s}
.betrag-knopf:hover{border-color:var(--primary)}
.betrag-knopf.aktiv{border-color:var(--primary);background:var(--bg);color:var(--primary-dark)}

.mini-hinweis{font-size:.82rem;color:var(--text);margin:8px 0 0;line-height:1.5}

.werber-kasten{margin-top:22px;padding:14px 16px;border-radius:12px;background:var(--bg);
  border-left:4px solid var(--accent)}
.werber-kasten span{display:block;font-size:.86rem;color:var(--text);margin-top:3px}
.werber-tausch{display:inline-flex;gap:7px;align-items:center;margin-top:10px;
  font-size:.82rem;color:var(--text);cursor:pointer}
.werber-tausch input{margin:0}

/* --- Danke-Seite: Überweisung ------------------------------------------- */
.ueberweisung{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;
  margin-top:32px;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--white)}
.ueberweisung-code img{display:block;width:220px;height:auto;border-radius:8px}
/* Beschriftung ueber den Wert, nicht daneben: sonst bleibt fuer die IBAN so
   wenig Platz, dass sie ueber drei Zeilen bricht und die BIC mitten im Wort. */
.ueberweisung-daten dl{margin:0}
.ueberweisung-daten dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);font-weight:700;margin-bottom:2px}
.ueberweisung-daten dd{margin:0 0 14px;font-size:1.02rem}
.ueberweisung-daten dd:last-child{margin-bottom:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.01em;overflow-wrap:anywhere}

@media (max-width:640px){
  .ueberweisung{grid-template-columns:1fr;gap:24px;justify-items:center}
  .ueberweisung-daten dl{grid-template-columns:1fr;gap:2px 0}
  .ueberweisung-daten dd{margin-bottom:12px}
}

/* Beträge sind Links ins Formular — der Klick muss die ganze Zeile treffen,
   nicht nur die Zahl. */
.kosten li > a{display:flex;align-items:center;gap:14px;width:100%;
  text-decoration:none;color:inherit}
.kosten li > a:hover .preis{color:var(--accent)}

/* Zwei Zahlwege nebeneinander. PayPal zuerst, weil es der schnellere ist —
   aber die Ueberweisung bleibt gleichwertig sichtbar und nicht weggeklappt. */
.zahlwege{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:32px 0 8px}
.zahlweg h2{font-size:1.25rem;margin:0 0 10px}
.zahlweg p{margin:0 0 14px}
.zahlweg-erst{padding-right:28px;border-right:1px solid var(--line)}
@media (max-width:640px){
  .zahlwege{grid-template-columns:1fr;gap:24px}
  .zahlweg-erst{padding-right:0;border-right:0;border-bottom:1px solid var(--line);
    padding-bottom:24px}
}

/* Schritt 2 der Spendenstrecke: bestaetigt die Wahl, statt sie zu wiederholen */
.wahl-bestaetigt{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:18px;padding:18px 22px;border-radius:14px;background:var(--bg);
  border-left:4px solid var(--primary)}
.wahl-bestaetigt .summe{display:block;font-size:2rem;font-weight:800;line-height:1;
  color:var(--primary-dark)}
.wahl-bestaetigt .takt{display:block;font-size:.9rem;color:var(--text);margin-top:4px}
.wahl-bestaetigt a{font-size:.88rem;white-space:nowrap}

.wahl-klapp{margin-top:26px}
.wahl-klapp > summary{cursor:pointer;font-size:.9rem;font-weight:700;color:var(--primary-dark);
  padding:10px 0;list-style:none}
.wahl-klapp > summary::-webkit-details-marker{display:none}
.wahl-klapp > summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
.wahl-klapp[open] > summary::before{content:"▾ "}
.wahl-klapp[open] > summary{margin-bottom:8px}

/* --- Lastschriftmandat --------------------------------------------------- */
.abschnitt{font-size:1.05rem;font-weight:800;margin:30px 0 4px;padding-top:22px;
  border-top:1px solid var(--line)}
.form-card select{width:100%;padding:13px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:var(--white);color:var(--dark)}
.mandat-text{background:var(--bg);border-radius:12px;padding:18px 20px;
  font-size:.9rem;line-height:1.6;margin:10px 0 18px}
.mandat-text p{margin:0 0 12px}
.mandat-text p:last-child{margin-bottom:0}
.mandat-daten{font-size:.84rem;color:var(--text);padding-top:12px;
  border-top:1px solid var(--line)}
.check-zeile{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;
  line-height:1.5;cursor:pointer}
.check-zeile input{margin-top:4px;flex:0 0 auto;width:18px;height:18px}

.mandat-beleg{border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;margin-top:30px;background:var(--white)}
.mandat-beleg h2{font-size:1.1rem;margin:0 0 18px}
.mandat-beleg dl{margin:0}
.mandat-beleg dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);font-weight:700;margin-top:14px}
.mandat-beleg dt:first-child{margin-top:0}
.mandat-beleg dd{margin:2px 0 0;font-size:1.02rem}
@media print{
  .mandat-beleg{border-color:#999}
  header nav, .btn, footer{display:none !important}
}

/* Einzugstermin waehlen */
.termine{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 6px}
.termin{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;
  transition:border-color .15s,background .15s}
.termin:hover{border-color:var(--primary)}
.termin:has(input:checked){border-color:var(--primary);background:var(--bg)}
.termin input{margin-top:3px;flex:0 0 auto}
.termin small{display:block;color:var(--text);font-size:.84rem;margin-top:2px}
@media (max-width:560px){.termine{grid-template-columns:1fr}}

.jahresrechnung{margin:12px 0 0;padding:12px 16px;border-radius:10px;
  background:var(--bg);font-size:.92rem;line-height:1.6}
.jahresrechnung .umstellen{display:inline-block;margin-top:8px;padding:8px 14px;
  border:1px solid var(--primary);border-radius:999px;background:var(--white);
  color:var(--primary-dark);font:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer}
.jahresrechnung .umstellen:hover{background:var(--primary);color:#fff}

/* Drei Termine statt zwei — untereinander, weil die Beschriftung laenger ist */
.termine.drei{grid-template-columns:1fr}
.termine.drei .termin{align-items:center}

/* Termin: der Regelfall gross, die Ausnahmen eingeklappt */
.termin-gross{padding:18px 20px;border-width:2px;border-color:var(--primary);
  background:var(--bg)}
.termin-gross strong{font-size:1.08rem}
.termin-gross small{font-size:.9rem;margin-top:3px}
.termin-klapp{margin-top:10px}
.termin-klapp > summary{cursor:pointer;font-size:.86rem;color:var(--primary-dark);
  font-weight:700;padding:8px 0;list-style:none}
.termin-klapp > summary::-webkit-details-marker{display:none}
.termin-klapp > summary::before{content:"▸ "}
.termin-klapp[open] > summary::before{content:"▾ "}
.termin-klapp .termin{margin-top:8px}

/* Ausweichweg: erreichbar, aber nicht einladend */
.ausweichweg{margin-top:20px;text-align:center}
.ausweichweg button{background:none;border:0;padding:4px;font:inherit;
  font-size:.8rem;color:var(--text);text-decoration:underline;cursor:pointer}
.ausweichweg button:hover{color:var(--primary-dark)}

/* Unterlagen im Browser */
.krumen{font-size:.86rem;color:var(--text);margin-top:6px}
.krumen span{margin:0 6px;opacity:.5}
.ablage{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--line)}
.ablage li{border-bottom:1px solid var(--line)}
.ablage a{display:flex;align-items:center;gap:14px;padding:14px 4px;
  text-decoration:none;color:var(--dark);transition:background .12s}
.ablage a:hover{background:var(--bg)}
.ablage .zeichen{flex:0 0 auto;width:20px;text-align:center;color:var(--primary);
  font-weight:800}
.ablage .bez{flex:1;overflow-wrap:anywhere}
.ablage .neben{flex:0 0 auto;font-size:.82rem;color:var(--text);white-space:nowrap}
.ablage .ist-ordner .bez{font-weight:700}
@media (max-width:520px){.ablage .neben{display:none}}

/* Unterschriftsfeld */
.unterschriftsfeld{position:relative;border:2px dashed var(--line);border-radius:12px;
  background:var(--white);overflow:hidden;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.unterschriftsfeld canvas{display:block;width:100%;height:150px;touch-action:none;
  cursor:crosshair}
/* Auf Seiten mit Unterschriftsfeld hört das Scrollen an der Seitenkante auf und
   wird nicht an den Browser weitergereicht. Das nimmt dem In-App-Browser der
   Google-App die „nach unten wischen zum Schließen“-Geste und Chrome das
   Herunterziehen zum Neuladen — ohne dass am Seitenaufbau etwas verändert wird.
   Alles andere (Sperren, Zurückspringen) verursacht bei jedem Strichende ein
   sichtbares Zucken. */
html.mit-unterschrift{overscroll-behavior-y:none}
.unterschriftsfeld button{position:absolute;right:8px;bottom:8px;padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);
  font:inherit;font-size:.76rem;color:var(--text);cursor:pointer}
.unterschriftsfeld button:hover{border-color:var(--primary);color:var(--primary-dark)}

/* Zwei gleichwertige Zahlwege nebeneinander */
.zwei-wege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
/* Bei monatlicher Spende gibt es nur einen Weg, dann darf der Knopf
   die ganze Breite haben statt neben einer Luecke zu stehen. */
.zwei-wege.nur-ein-weg{grid-template-columns:1fr}
@media (max-width:520px){.zwei-wege{grid-template-columns:1fr}}

/* Zugänge: links die Menschen, rechts die gewählte Person (seit 28.09.2026) */
:root{--heikel:#A4560C}
@media (prefers-color-scheme: dark){:root{--heikel:#FFA552}}
.zg-kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.zg-ansicht{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--white)}
.zg-ansicht a{padding:7px 14px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--text)}
.zg-ansicht a:hover{text-decoration:none;color:var(--primary-dark)}
.zg-ansicht a.an{background:var(--primary-dark);color:#fff}
@media (prefers-color-scheme: dark){.zg-ansicht a.an{color:#06212C}}
.zg-raster{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;margin-top:22px;align-items:start}
.zg-liste{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;
  display:flex;flex-direction:column;gap:2px}
.zg-l{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;color:var(--dark)}
.zg-l:hover{text-decoration:none;background:var(--bg)}
.zg-l.hier{background:var(--bg-soft)}
.zg-l.aus{opacity:.55}
.zg-l-text{min-width:0}
.zg-l b{display:block;font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg-l small{font-size:.76rem;color:var(--text)}
.zg-plus{justify-content:center;font-weight:600;font-size:.88rem;color:var(--primary-dark);
  border:1px dashed var(--line);margin-top:4px}
.zg-av{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:.74rem;font-weight:700;background:var(--bg-soft);color:var(--primary-dark)}
.zg-av.gross{width:46px;height:46px;font-size:.95rem}
.zg-karte{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.zg-karte-kopf{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.zg-name{font-size:1.35rem;margin:0;line-height:1.2}
.zg-unter{margin:2px 0 0;font-size:.86rem;color:var(--text)}
.zg-stempel{margin-left:auto;font-size:.74rem;font-weight:600;border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;color:var(--text)}
.zg-teil{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.zg-teil h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0 0 4px}
.zg-teil .field-row label{margin-top:10px}
.zg-vorlagen{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 14px}
.zg-vorlagen-titel{font-size:.8rem;color:var(--text);margin-right:4px}
.zg-vorlage{font:inherit;font-size:.8rem;font-weight:600;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--dark);cursor:pointer}
button.zg-vorlage:hover{border-color:var(--primary)}
.zg-vorlage.an{border-color:var(--primary-dark);background:var(--bg-soft);color:var(--primary-dark)}
.zg-eigene{cursor:default;border-style:dashed;font-weight:500;color:var(--text)}
.zg-rechte{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
label.zg-recht{display:flex;gap:11px;align-items:flex-start;margin:0;padding:8px 0;font-weight:400;cursor:pointer}
.zg-recht-alles{border-bottom:1px dashed var(--line);padding-bottom:12px !important;margin-bottom:6px !important}
.zg-recht input{position:absolute;opacity:0;pointer-events:none}
.zg-recht strong{display:block;font-size:.92rem;color:var(--dark)}
.zg-recht small{display:block;font-size:.8rem;color:var(--text);line-height:1.4}
.zg-recht small.heikel{color:var(--heikel)}
.zg-schalter{width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;
  flex:0 0 auto;margin-top:2px;transition:background .15s}
.zg-schalter::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:left .15s}
.zg-recht input:checked + .zg-schalter{background:var(--primary-dark)}
.zg-recht input:checked + .zg-schalter::after{left:17px}
.zg-recht input:disabled + .zg-schalter{opacity:.45}
.zg-recht input:focus-visible + .zg-schalter{outline:3px solid var(--primary);outline-offset:2px}
.zg-ordner{margin-top:10px}
.zg-ordner summary{font-size:.86rem;color:var(--primary-dark);cursor:pointer}
.zg-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.zg-knoepfe form{margin:0}
.zg-k{font:inherit;font-size:.84rem;font-weight:600;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--white);color:var(--dark);cursor:pointer}
.zg-k:hover{border-color:var(--primary);color:var(--primary-dark)}
.zg-k.rot{color:#B3261E;border-color:#E6B8B4}
@media (prefers-color-scheme: dark){.zg-k.rot{color:#FF8A80;border-color:#5C2B28}}
.zg-einmal strong{display:block}
.zg-kopieren{display:flex;gap:8px;margin-top:8px}
.zg-kopieren input{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.zg-matrix-huelle{overflow-x:auto;margin-top:22px;border:1px solid var(--line);border-radius:14px;background:var(--white)}
.zg-matrix{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
.zg-matrix th{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--text);
  padding:12px 8px;border-bottom:1px solid var(--line);text-align:center;background:var(--bg)}
.zg-matrix th.heikel{color:var(--heikel)}
.zg-matrix td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.zg-matrix th:first-child,.zg-matrix td:first-child{text-align:left;padding-left:16px}
.zg-matrix td:first-child a{color:var(--dark)}
.zg-matrix td small{display:block;font-size:.76rem;color:var(--text)}
.zg-matrix tr:last-child td{border-bottom:0}
.zg-matrix tr.alles td:not(:first-child){background:var(--bg)}
.zg-matrix tr.aus{opacity:.45}
.zg-h{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;
  background:var(--primary-dark);color:#fff;font-size:.78rem;font-weight:700}
@media (prefers-color-scheme: dark){.zg-h{color:#06212C}}
.zg-h.fest{background:var(--bg-soft);color:var(--primary-dark)}
@media (max-width:760px){
  .zg-raster{grid-template-columns:1fr}
  .zg-rechte{grid-template-columns:1fr}
  .zg-karte{padding:18px 16px}
}
.passwort{font-family:ui-monospace,Menlo,monospace;font-size:1.15rem;font-weight:700;
  letter-spacing:.02em;margin:8px 0 0;color:var(--primary-dark)}
.ordnerwahl{display:flex;flex-wrap:wrap;gap:8px 18px}
.ordnerwahl label{display:flex;gap:7px;align-items:center;font-size:.92rem;cursor:pointer}

/* Navigation in der Verwaltung */
.verwaltung-nav{display:flex;flex-wrap:wrap;gap:4px;margin:22px 0 10px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.verwaltung-nav a{padding:10px 16px;font-size:.92rem;font-weight:600;
  color:var(--text);text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.verwaltung-nav a:hover{color:var(--primary-dark)}
.verwaltung-nav a.hier{color:var(--primary-dark);border-bottom-color:var(--primary)}

/* Quittungsliste */
.quittungsliste{width:100%;border-collapse:collapse;margin-top:18px;font-size:.92rem}
.quittungsliste td{padding:13px 10px 13px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.quittungsliste .nr{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;
  color:var(--text);white-space:nowrap}
.quittungsliste .klein{font-size:.82rem;color:var(--text)}
.quittungsliste .stand{white-space:nowrap;font-size:.84rem}
.quittungsliste .ja{color:#1E7B34;font-weight:700}
.quittungsliste .wartet{color:#9A5B00}
.quittungsliste .weg{color:var(--text);opacity:.7}
.quittungsliste .tun{text-align:right;white-space:nowrap}
.quittungsliste .tun form{display:inline-block;margin-left:6px}
.quittungsliste .tun a,.quittungsliste .tun button{padding:6px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--white);
  font:inherit;font-size:.78rem;color:var(--text);cursor:pointer;
  text-decoration:none;display:inline-block}
.quittungsliste .tun a:hover,.quittungsliste .tun button:hover{
  border-color:var(--primary);color:var(--primary-dark)}
.linkzeile{font-family:ui-monospace,Menlo,monospace;font-size:.9rem;
  overflow-wrap:anywhere;margin:8px 0 0;color:var(--primary-dark)}

/* Vorschau auf der Unterschriftsseite */
.quittungsvorschau{border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  margin-top:22px;background:var(--white)}
.betragzeile{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.betragzeile .klein{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);font-weight:700}
.betragzeile .gross{font-size:1.9rem;font-weight:800;color:var(--primary-dark)}
.quittungsvorschau dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 20px}
.quittungsvorschau dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text);font-weight:700;white-space:nowrap}
.quittungsvorschau dd{margin:0}

/* --- Unterlagen: Datei ablegen --- */
.hochladen{margin:24px 0 8px;padding:18px 20px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius)}
.hochladen label{margin:0 0 10px}
.hochladen-zeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hochladen input[type=file]{flex:1 1 260px;font:inherit;font-size:.9rem;color:var(--text)}
.hochladen .mini-hinweis{margin:10px 0 0}
.note-ok{border-left:4px solid #1f7a3d}
.note-fehler{border-left:4px solid #a32020}

/* ======================================================================
   PfotenOS — Kopf, Kacheln
   ====================================================================== */
/* Die Leiste ganz oben in der Verwaltung. Sie ersetzt die Website-
   Navigation: links das System, rechts wer angemeldet ist. Nicht sticky —
   beim Arbeiten in langen Listen ist jede fest stehende Leiste verlorener
   Platz.

   Der Weg zurueck auf die Website ist bewusst nicht hier oben, sondern das
   kleine Logo im Fuss. Oben soll nichts stehen, worauf man aus Versehen
   klickt und mitten im Arbeiten aus dem System faellt. */
.os-leiste{background:var(--white);border-bottom:1px solid var(--line)}
.os-leiste .inner{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;padding:13px 24px}

.os-fuss{margin-top:70px;padding:30px 24px 38px;text-align:center;
  border-top:1px solid var(--line)}
.os-fuss img{height:38px;width:auto;margin:0 auto;opacity:.5;
  transition:opacity .15s}
.os-fuss a:hover img{opacity:1}
.os-fuss p{margin:12px 0 0;font-size:.78rem;color:var(--text)}
.os-fuss p a{color:var(--text)}
.os-fuss p a:hover{color:var(--primary-dark)}

.os-marke{display:inline-flex;align-items:center;gap:9px;font-size:1.18rem;
  font-weight:600;color:var(--dark);letter-spacing:-.01em}
.os-marke:hover{text-decoration:none;color:var(--primary-dark)}
.os-marke b{font-weight:700;color:var(--primary-dark)}
.os-pfote{font-size:1.25rem;line-height:1}
.os-wer{font-size:.82rem;color:var(--text)}

.os-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.os-kachel{position:relative;display:flex;flex-direction:column;gap:5px;
  padding:22px 22px 24px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.os-kachel:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:var(--primary);text-decoration:none}
.os-kachel strong{color:var(--dark);font-size:1.06rem}
.os-kachel-zeichen{font-size:1.5rem;line-height:1;margin-bottom:4px}
.os-kachel-text{font-size:.86rem;line-height:1.5}
.os-kachel-zahl{position:absolute;top:18px;right:20px;font-size:.74rem;
  font-weight:700;color:var(--primary-dark);background:var(--bg);
  border-radius:999px;padding:3px 10px}
.os-liste{margin:0;padding-left:20px;font-size:.92rem}
.os-liste li{margin-bottom:6px}
@media (max-width:520px){.os-kacheln{grid-template-columns:1fr}}

/* --- Freigabe-Links --- */
.freigaben{margin:26px 0 8px;padding:18px 20px 20px;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius)}
.freigaben h2{font-size:1rem;margin:0 0 4px}
.freigabe-liste{list-style:none;padding:0;margin:0 0 16px}
.freigabe-liste li{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.freigabe-liste li:last-child{border-bottom:0}
.freigabe-liste .neben{display:block;font-size:.8rem;color:var(--text)}
.freigabe-link{display:block;margin-top:5px;font-size:.78rem;word-break:break-all;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;color:var(--primary-dark)}

/* --- Werber --- */
.werber-raster{display:grid;grid-template-columns:1fr 240px;gap:34px;margin-top:22px;align-items:start}
.werber-foto{width:100%;aspect-ratio:18/21;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.werber-foto img{width:100%;height:100%;object-fit:cover}
.werber-foto span{font-size:.84rem;color:var(--text)}
@media (max-width:720px){.werber-raster{grid-template-columns:1fr}}

.werber-foto.verstellbar{background-repeat:no-repeat;cursor:grab;touch-action:none}
.werber-foto.verstellbar:active{cursor:grabbing}
.zuschnitt{margin-top:10px}
.zuschnitt label{margin:0 0 4px}
.zuschnitt input[type=range]{width:100%}
.alslink{background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:var(--primary-dark);cursor:pointer;text-decoration:underline}

/* --- Stundenzettel --- */
.monatsgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.monat{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.monat.jetzt{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.monat strong{color:var(--dark);font-size:.95rem;margin-bottom:4px}
.monat a{font-size:.82rem}

/* --- Filterleiste --- */
.filter{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:20px;
  padding:16px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.filter label{margin:0 0 4px;font-size:.78rem}
.filter select,.filter input{min-width:150px}
.klein{font-size:.78rem;color:var(--text)}

/* ======================================================================
   Tickets
   ====================================================================== */
/* Das Formular steht zugeklappt ueber der Liste. Eine eigene Seite zum
   Anlegen waere ein Klick mehr — und der eine Klick entscheidet, ob etwas
   aufgeschrieben wird oder in Vergessenheit geraet. */
.ticket-neu{margin-top:22px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.ticket-neu>summary{cursor:pointer;padding:15px 20px;font-weight:600;
  color:var(--dark);list-style:none}
.ticket-neu>summary::-webkit-details-marker{display:none}
.ticket-neu>summary::before{content:"＋";color:var(--primary-dark);
  font-weight:700;margin-right:9px}
.ticket-neu[open]>summary{border-bottom:1px solid var(--line)}
.ticket-neu[open]>summary::before{content:"−"}
.ticket-neu form{padding:18px 20px 22px}
.ticket-neu label{display:block;margin:0 0 5px;font-size:.82rem;font-weight:600;
  color:var(--dark)}
.ticket-neu input[type=text],.ticket-neu textarea,.ticket-neu select{
  width:100%;padding:10px 12px;margin-bottom:15px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--dark);font:inherit;
  font-size:.92rem}
.ticket-neu textarea{resize:vertical;line-height:1.6}
.ticket-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0 14px}

.ticketliste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ticket{background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:12px;
  transition:border-color .15s,transform .15s}
.ticket:hover{border-color:var(--primary);transform:translateX(2px)}
.ticket>a{display:block;padding:14px 18px;color:var(--text)}
.ticket>a:hover{text-decoration:none}
.ticket.ist-offen{border-left-color:var(--primary)}
.ticket.ist-in_arbeit{border-left-color:#EF7F1A}
.ticket.ist-erledigt,.ticket.ist-verworfen{border-left-color:var(--line);opacity:.62}
.ticket-kopf{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ticket-nr{font-size:.78rem;color:var(--text);font-variant-numeric:tabular-nums}
.ticket-titel{font-weight:600;color:var(--dark);font-size:1rem}
.ticket-zeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:7px;font-size:.78rem;color:var(--text)}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:var(--bg-soft);color:var(--dark)}
.pill-fehler{background:#FDECEC;color:#B3261E}
.pill-aenderung{background:#E7F4FB;color:#0B7CAC}
.pill-idee{background:#FDF0E3;color:#A85C10}
.pill-frage{background:#EFEAF7;color:#5B4B8A}
.pill-eilig{background:#B3261E;color:#fff}
.pill-status{background:transparent;border:1px solid var(--line);color:var(--text);
  font-weight:600}

.ticket-text{margin:18px 0 0;padding:16px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);
  white-space:pre-wrap;line-height:1.65}
.ticket-schalter{margin-top:20px;padding:15px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius)}
.ticket-schalter label{display:block;margin-bottom:7px;font-size:.82rem;
  font-weight:600;color:var(--dark)}
.ticket-schalter-zeile{display:flex;gap:9px;flex-wrap:wrap}
.ticket-schalter select,.ticket-schalter input{padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:var(--dark);font:inherit;font-size:.9rem}
.ticket-schalter input{flex:1;min-width:160px}

.verlauf{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.verlauf li{padding:13px 16px;background:var(--white);border:1px solid var(--line);
  border-radius:12px}
/* Was das System selbst festhaelt, sieht anders aus als das, was ein Mensch
   geschrieben hat. Sonst liest man Statuswechsel als Kommentar. */
.verlauf li.ist-verlauf{background:transparent;border-style:dashed;
  font-size:.85rem;color:var(--text)}
.verlauf-kopf{display:flex;justify-content:space-between;gap:12px;
  flex-wrap:wrap;font-size:.76rem;color:var(--text);margin-bottom:5px}
.verlauf-kopf strong{color:var(--dark)}
.verlauf-text{white-space:pre-wrap;line-height:1.6}

/* Was gerade ausgewaehlt ist. Ohne diese Rueckmeldung sieht das Ablagefeld
   nach dem Auswaehlen genauso aus wie davor — und man denkt, es sei nichts
   passiert. */
.dz-list{margin-top:14px;font-size:.86rem;text-align:left}
.dz-datei{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:7px 11px;margin-top:6px;background:var(--white);
  border:1px solid var(--line);border-radius:9px;color:var(--text)}
.dz-datei span:first-child{color:var(--dark);font-weight:600;word-break:break-all}
.dz-datei.ist-zu-gross{border-color:#B3261E;color:#B3261E}
.dz-datei.ist-zu-gross span:first-child{color:#B3261E}
.dropzone:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* ======================================================================
   Startseite: "Heute zuerst"
   ====================================================================== */
/* Der Kasten mit dem, was aussteht. Dunkelblau, weil er das Erste sein
   soll, was man sieht — und weil die Kacheln darunter hell sind. Zwei
   helle Flaechen uebereinander haetten keine Rangfolge. */
.heute{list-style:none;margin:0 0 34px;padding:14px 16px;
  background:var(--primary-dark);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.heute li{border-bottom:1px solid rgba(255,255,255,.16)}
.heute li:last-child{border-bottom:0}
.heute a{display:flex;align-items:center;gap:12px;padding:12px 4px;
  color:rgba(255,255,255,.92);font-size:.97rem;line-height:1.4}
.heute a:hover{text-decoration:none;color:#fff}
.heute-punkt{flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.42)}
.heute .ist-dringend .heute-punkt{background:var(--accent,#EF7F1A);
  box-shadow:0 0 0 4px rgba(239,127,26,.22)}
.heute-text{flex:1}
.heute .ist-dringend .heute-text{font-weight:600;color:#fff}
.heute-pfeil{flex:0 0 auto;color:rgba(255,255,255,.5);font-size:1.15rem;
  transition:transform .15s ease}
.heute a:hover .heute-pfeil{transform:translateX(3px);color:#fff}

.bereiche-titel{margin:0 0 12px;font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text)}

/* Auf dem Telefon werden aus neun grossen Kacheln drei Bildschirme. Dort
   also Knoepfe: Zeichen, Name, Zahl. Der erklaerende Satz faellt weg, er
   ist am Rechner hilfreich und auf 390 Pixeln im Weg. */
@media (max-width:560px){
  .os-kacheln{grid-template-columns:repeat(3,1fr);gap:10px}
  .os-kachel{padding:13px 6px 11px;align-items:center;text-align:center;gap:4px}
  .os-kachel:hover{transform:none}
  .os-kachel-zeichen{font-size:1.4rem;margin-bottom:2px}
  .os-kachel strong{font-size:.76rem;line-height:1.25;font-weight:600}
  .os-kachel-text{display:none}
  .os-kachel-zahl{position:static;font-size:.74rem;font-weight:700;
    color:var(--primary-dark);line-height:1}
  .heute{margin-bottom:26px;padding:10px 13px}
  .heute a{font-size:.92rem;padding:11px 2px}
}

/* ---- Erfahrungsbericht einreichen ---- */
.anleitung{list-style:none;counter-reset:schritt;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.anleitung li{counter-increment:schritt;position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 17px 46px}
.anleitung li::before{
  content:counter(schritt);position:absolute;left:16px;top:16px;
  width:20px;height:20px;border-radius:50%;background:var(--primary);
  color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.anleitung h3{margin:0 0 3px;font-size:.95rem;color:var(--dark)}
.anleitung p{margin:0;font-size:.86rem;line-height:1.5;color:var(--text)}

.haken{display:flex;align-items:flex-start;gap:11px;margin:0 0 10px;
  padding:13px 15px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;cursor:pointer;font-size:.94rem;line-height:1.45}
.haken input{margin:3px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--primary)}
.haken:hover{border-color:var(--primary)}
.haken span{color:var(--dark)}

/* Der ausfuehrliche Wortlaut steht zugeklappt darunter: lesbar fuer alle,
   die es genau wissen wollen, ohne das Formular zur Textwand zu machen. */
.kleingedrucktes{margin:-4px 0 16px 15px}
.kleingedrucktes>summary{cursor:pointer;font-size:.8rem;color:var(--primary-dark);
  list-style:none}
.kleingedrucktes>summary::-webkit-details-marker{display:none}
.kleingedrucktes>summary::before{content:"▸ ";font-size:.7rem}
.kleingedrucktes[open]>summary::before{content:"▾ "}
.kleingedrucktes p{margin:8px 0 0;font-size:.82rem;line-height:1.6;color:var(--text)}

/* Die Falle fuer Maschinen. Nicht display:none — manche Programme fuellen
   genau die Felder nicht aus, die offensichtlich versteckt sind. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Die vier Fragen und die Dokumente zum Mitnehmen ---- */
.fragen{list-style:none;counter-reset:frage;margin:0;padding:0;display:grid;gap:10px}
.fragen li{counter-increment:frage;position:relative;padding:15px 18px 16px 50px;
  background:var(--white);border:1px solid var(--line);border-radius:14px}
.fragen li::before{content:counter(frage);position:absolute;left:17px;top:14px;
  width:22px;height:22px;border-radius:50%;background:var(--bg-soft);
  color:var(--primary-dark);font-size:.76rem;font-weight:700;
  line-height:22px;text-align:center}
.fragen h3{margin:0 0 3px;font-size:.96rem;color:var(--dark);line-height:1.35}
.fragen p{margin:0;font-size:.86rem;line-height:1.5;color:var(--text)}

.dokumente{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;margin-top:22px}
.dokument{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  color:var(--text)}
.dokument:hover{border-color:var(--primary);text-decoration:none}
.dokument-zeichen{flex:0 0 auto;margin-top:1px;padding:3px 7px;border-radius:6px;
  background:var(--primary-dark);color:#fff;font-size:.64rem;font-weight:700;
  letter-spacing:.06em}
.dokument-worte strong{display:block;color:var(--dark);font-size:.94rem;
  margin-bottom:3px}
.dokument-worte span{font-size:.82rem;line-height:1.45;display:block}

/* Der Mandatsfilter zeigt entweder einen Stichtag oder eine Spanne, nie
   beides. Ohne JavaScript sind beide sichtbar: unschoen, aber benutzbar. */
.filter.ist-spanne .nur-stichtag{display:none}
.filter:not(.ist-spanne) .nur-spanne{display:none}

/* ---- QR-Codes ---- */
.qr-art{border:0;padding:0;margin:18px 0 6px;display:grid;gap:8px}
.qr-art legend{font-weight:700;color:var(--dark);margin-bottom:8px;font-size:.92rem}
.qr-art label{display:flex;gap:10px;align-items:center;font-weight:500;margin:0}
.qr-karte{display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;align-items:center;
  margin-top:22px;padding:22px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius)}
/* Der Code steht immer auf Weiss, auch im dunklen Modus: Viele Scanner
   lesen helle Punkte auf dunklem Grund schlecht. */
.qr-bild{background:#fff;border-radius:10px;padding:8px;line-height:0}
.qr-bild svg{width:100%;height:auto}
@media (max-width:560px){.qr-karte{grid-template-columns:1fr}.qr-bild{max-width:200px}}

/* Status eines QR-Codes: auf einen Blick, ob er gerade wirkt. */
.qr-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--white)}
.qr-status form{margin-left:auto}
.qr-lampe{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.qr-status.ist-an .qr-lampe{background:#2E9E6B;box-shadow:0 0 0 4px rgba(46,158,107,.18)}
.qr-status.ist-aus{background:var(--bg);border-style:dashed}
.qr-status.ist-aus .qr-lampe{background:#9AA7AE}
/* Abschalten ist eine Handlung mit Folgen fuer gedrucktes Material: deshalb
   nicht in der Hausfarbe, aber auch nicht knallrot wie ein Loeschknopf. */
.btn-warn{background:transparent;color:#B3261E;border:1px solid #E6B8B4}
.btn-warn:hover{background:#FBEDEC;color:#B3261E;text-decoration:none}

/* Die Druckknoepfe ueber der Werberliste. */
.druck-knoepfe{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-top:10px}
.druck-knoepfe>div{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.druck-knoepfe strong{display:block;color:var(--dark)}
@media (max-width:640px){.druck-knoepfe{grid-template-columns:1fr}}

/* Zurueck zu den Kacheln. Ersetzt seit 28.09.2026 die Reiterleiste. */
.os-zurueck{display:inline-flex;align-items:center;gap:8px;margin:20px 0 4px;
  padding:9px 16px 9px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--white);color:var(--dark);font-size:.9rem;font-weight:600}
.os-zurueck:hover{border-color:var(--primary);color:var(--primary-dark);text-decoration:none}
.os-zurueck span{font-size:1.05rem;line-height:1}

/* E-Mails: Übersicht, Protokoll und Editor (seit 28.09.2026) */
.mv-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:24px}
.mv-karte{display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:18px 18px 16px;color:var(--text)}
.mv-karte:hover{text-decoration:none;border-color:var(--primary)}
.mv-titel{font-size:1.05rem;font-weight:700;color:var(--dark);margin-bottom:2px}
.mv-zeile{font-size:.86rem;line-height:1.45}
.mv-zeile b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:700}
.mv-fuss{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--line);font-size:.8rem}
.mv-pfeil{font-size:.86rem;font-weight:600;color:var(--primary-dark)}
.mv-gut{color:#1f7a3d;font-weight:600}
.mv-rot{color:#B3261E;font-weight:600}
@media (prefers-color-scheme: dark){.mv-gut{color:#6FD39A}.mv-rot{color:#FF8A80}}
.mv-tabelle-huelle{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.mv-protokoll{width:100%;border-collapse:collapse;font-size:.88rem;min-width:620px}
.mv-protokoll th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text);padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.mv-protokoll td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.mv-protokoll tr:last-child td{border-bottom:0}
.mv-zeit{white-space:nowrap}
.mv-an{word-break:break-all}
.mv-fehler{display:block;font-size:.76rem;color:var(--text);margin-top:2px}
.mv-zurueck{display:inline-block;margin-top:12px;font-size:.86rem;font-weight:600}
.mv-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.mv-form label{margin-top:14px}
.mv-form label:first-child{margin-top:0}
.mv-form textarea{width:100%;font:inherit;font-size:.94rem;line-height:1.55;resize:vertical}
.mv-fest{display:flex;flex-direction:column;gap:4px;margin:16px 0 0;padding:12px 14px;border-radius:10px;
  background:var(--bg);border:1px dashed var(--line);font-size:.84rem;line-height:1.5}
.mv-fest strong{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.mv-platzhalter{margin-top:16px}
.mv-platzhalter div{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mv-chip{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--primary-dark);cursor:pointer}
.mv-chip:hover{border-color:var(--primary)}
.mv-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mv-vorschau{position:sticky;top:16px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white)}
.mv-vorschau-kopf{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--text)}
.mv-vorschau-kopf strong{font-size:.95rem;color:var(--dark)}
.mv-vorschau iframe{display:block;width:100%;height:760px;border:0;background:#EEF1F3}
.mv-zuruecksetzen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.mv-link{font:inherit;font-size:.84rem;background:none;border:0;padding:0;color:#B3261E;
  text-decoration:underline;cursor:pointer}
@media (max-width:860px){
  .mv-raster{grid-template-columns:1fr}
  .mv-vorschau{position:static}
  .mv-vorschau iframe{height:640px}
}

/* Hunde aus Drive (seit 28.09.2026) */
.hd-bericht p{margin:6px 0 0;font-size:.9rem}
.hd-warnungen{margin:8px 0 0;padding-left:18px;font-size:.86rem;color:var(--text)}
.hd-herkunft{font-size:.76rem;color:var(--text);margin-top:3px}
.hd-herkunft b{color:#B3261E}
.hund-untertitel{font-size:1.12rem;font-weight:600;color:var(--dark);margin:6px 0 2px;line-height:1.4}

/* Beitrag eines Hundes (seit 28.09.2026) */
.bt-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;margin-top:24px;align-items:start}
.bt-fotos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.bt-fotos figure{margin:0;width:74px}
.bt-fotos img{width:74px;height:92px;object-fit:cover;border-radius:8px;display:block}
.bt-fotos figcaption{font-size:.72rem;color:var(--text);text-align:center;margin-top:2px}
.bt-folie{border:1px solid var(--line);border-radius:12px;padding:12px 16px 16px;margin:14px 0 0;background:var(--white)}
.bt-folie legend{font-weight:700;font-size:.9rem;color:var(--dark);padding:0 6px}
.bt-folie label{margin-top:10px}
.bt-folie textarea{width:100%;font:inherit;font-size:.92rem;line-height:1.5;resize:vertical}
.bt-foto-wahl{display:flex !important;align-items:center;gap:10px;font-weight:500 !important;font-size:.84rem !important}
.bt-foto-wahl select{width:auto}
.bt-ergebnis{position:sticky;top:16px;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:16px}
.bt-ergebnis-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.bt-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bt-bilder img{width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line)}
.bt-leer{padding:40px 16px;text-align:center;color:var(--text);font-size:.9rem;border:1px dashed var(--line);border-radius:10px}
@media (max-width:860px){.bt-raster{grid-template-columns:1fr}.bt-ergebnis{position:static}}

.hf-medium-fuss{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px}
.hf-medium-fuss form{margin:0}
.hf-titel{font-size:.84rem;font-weight:700;color:var(--accent);padding:6px 0}
.hf-drive{font-size:.74rem;color:var(--text)}

.bt-foto{position:relative;display:block;padding:0;border:0;background:none;cursor:crosshair;border-radius:8px;overflow:hidden}
.bt-punkt{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}
.bt-punkt.gross{width:26px;height:26px;margin:-13px 0 0 -13px;border-width:3px}
.bt-fotofolien{display:flex;flex-wrap:wrap;gap:12px}
.bt-fotofolien label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:.84rem}
.bt-dialog{border:0;border-radius:14px;padding:16px;max-width:min(92vw,560px);background:var(--white);color:var(--dark)}
.bt-dialog::backdrop{background:rgba(0,0,0,.55)}
.bt-fokus-bild{position:relative;display:inline-block;line-height:0}
.bt-fokus-bild img{display:block;max-width:100%;max-height:70vh;width:auto;height:auto;cursor:crosshair;border-radius:8px}

/* Hund melden (seit 28.09.2026) */
.hm-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.hm-block{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:14px}
.hm-block h2{font-size:1.02rem;margin:0 0 10px}
.hm-block input[type=text],.hm-block textarea{width:100%}
.hm-grossknopf{display:flex !important;align-items:center;justify-content:center;gap:10px;width:100%;margin:0 !important;
  padding:16px;border-radius:12px;border:2px dashed var(--line);background:var(--bg);font:inherit;font-size:1rem;
  font-weight:700;color:var(--primary-dark);cursor:pointer}
.hm-grossknopf:hover{border-color:var(--primary)}
.hm-mikro{border-style:solid;background:var(--primary-dark);color:#fff;border-color:var(--primary-dark)}
@media (prefers-color-scheme: dark){.hm-mikro{color:#06212C}}
.hm-vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:10px}
.hm-kachel{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--bg-soft)}
.hm-kachel img,.hm-kachel video{width:100%;height:100%;object-fit:cover;display:block}
.hm-kachel button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.hm-aufnahme{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-weight:700}
.hm-aufnahme audio{flex:1;min-width:200px}
.hm-rot{width:14px;height:14px;border-radius:50%;background:#D32F2F;animation:hm-puls 1s infinite}
@keyframes hm-puls{50%{opacity:.3}}
.hm-klein-label{font-size:.84rem !important;font-weight:500 !important;color:var(--text) !important;margin-top:14px !important}
.hm-fortschritt{height:8px;border-radius:999px;background:var(--bg-soft);overflow:hidden;margin-top:16px}
.hm-fortschritt div{height:100%;width:0;background:var(--primary);transition:width .2s}
.hm-absenden{width:100%;justify-content:center;margin-top:16px}
.hm-schritte{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.hm-schritt{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hm-schritt small{display:block;color:var(--text);font-size:.84rem}
.hm-zeichen{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:800;background:var(--bg-soft);color:var(--text)}
.hm-fertig .hm-zeichen,.hm-ohne_ki .hm-zeichen{background:#1f7a3d;color:#fff}
.hm-laeuft .hm-zeichen,.hm-offen .hm-zeichen{background:var(--primary);color:#fff;animation:hm-puls 1.4s infinite}
.hm-fehler .hm-zeichen{background:#B3261E;color:#fff}
.hm-wartet .hm-zeichen{background:var(--accent);color:#fff}
.hm-details{margin-top:16px;font-size:.9rem}
.hm-details pre{white-space:pre-wrap;font-family:inherit;background:var(--bg);padding:12px;border-radius:10px}

.hm-spick-klein{margin:0 0 10px;font-size:.88rem}
.hm-spick-klein summary{cursor:pointer;color:var(--primary-dark);font-weight:600}
.hm-spick-klein ul{margin:8px 0 0;padding-left:20px;color:var(--text)}
.hm-aufnahme-fenster{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;
  align-items:center;justify-content:center;padding:16px}
.hm-aufnahme-fenster[hidden]{display:none}
.hm-fenster-innen{background:var(--white);border-radius:18px;padding:20px 22px;max-width:480px;width:100%;
  max-height:92vh;overflow:auto;box-shadow:var(--shadow-lg)}
.hm-fenster-kopf{display:flex;align-items:center;gap:10px;font-size:1.4rem;font-weight:800;color:#D32F2F}
.hm-fenster-innen h3{margin:12px 0 8px;font-size:1.05rem}
.hm-spick{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:1rem;line-height:1.4}
.hm-stopp{width:100%;justify-content:center;margin-top:18px;background:#D32F2F}
.hm-stopp:hover{background:#B71C1C}

/* Bildausschnitt (Hundefotos, seit 28.09.2026) */
.as-dialog{border:0;border-radius:14px;padding:16px 18px;max-width:min(94vw,420px);width:100%;background:var(--white);color:var(--dark)}
.as-dialog::backdrop{background:rgba(0,0,0,.55)}
.as-rahmen{position:relative;width:100%;aspect-ratio:4/5;border-radius:10px;background-color:var(--bg-soft);
  background-repeat:no-repeat;cursor:grab;touch-action:none;overflow:hidden}
.as-rahmen:active{cursor:grabbing}
.as-deck{position:absolute;left:0;right:0;pointer-events:none}
.as-deck-oben{top:0;height:22%;background:rgba(239,127,26,.55)}
.as-deck-unten{bottom:0;height:31%;background:linear-gradient(rgba(255,255,255,.6) 0 50%,rgba(11,124,172,.6) 50%)}
.as-zeile{display:flex !important;align-items:center;gap:10px;margin:12px 0 0 !important;font-size:.88rem}
.as-zeile input[type=range]{flex:1}
.as-klein{font-weight:400 !important;font-size:.82rem !important}
.bt-punkt-marke{position:absolute;right:4px;bottom:4px;background:var(--accent);color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:.7rem;display:flex;align-items:center;justify-content:center}
/* Videoschnitt (seit 28.09.2026) */
.vs-dialog video{width:100%;max-height:52vh;border-radius:10px;background:#000;display:block}
.vs-leiste{position:relative;height:8px;border-radius:999px;background:var(--bg-soft);margin-top:10px;overflow:hidden}
.vs-leiste div{position:absolute;top:0;bottom:0;background:var(--primary)}
.vs-zeiten{font-size:.88rem;margin:8px 0 0}
.hund-video{width:100%;border-radius:var(--radius);margin-top:14px;background:#000;display:block}
.hm-pegel{height:10px;border-radius:999px;background:var(--bg-soft);overflow:hidden;margin-top:12px}
.hm-pegel div{height:100%;width:0;background:#2E9E6B;transition:width .08s}

/* hidden muss immer gewinnen. Sonst überstimmt ein display:flex aus einer
   Klasse das Ausblenden, und Knopf und Player stehen gleichzeitig da
   (so geschehen bei "Hund melden" am iPhone, 28.09.2026). */
[hidden]{display:none !important}
.hm-player{flex:1;min-width:200px}
.hm-player audio{width:100%}

/* Reel auf der Beitragsseite (seit 28.09.2026) */
.bt-reel{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bt-reel video{width:100%;max-width:260px;aspect-ratio:9/16;border-radius:10px;background:#000;display:block;margin:6px 0 8px}
.bt-reel-form label{margin-top:10px}
.bt-reel-form input[type=text],.bt-reel-form select{width:100%}
.bt-musik-neu{margin-top:10px;font-size:.86rem}
.bt-musik-neu summary{cursor:pointer;color:var(--primary-dark)}

/* Zwischentitel in der Beschreibung eines Hundes ("🐕 Andere Hunde") */
.absatz-titel{margin:22px 0 6px;font-size:1.02rem;font-weight:700;color:var(--dark);line-height:1.35}
/* Ja/Nein/unbekannt im Hundeformular: drei nebeneinander, auf dem Handy untereinander */
.field-row.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.field-row.drei{grid-template-columns:1fr}}

/* Fotos eines Hundes groß ansehen (hund.html) */
.galerie-knopf{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.galerie-knopf img{width:100%;height:100%;object-fit:cover;display:block}
.galerie-knopf:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.galerie-zahl{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;
  padding:5px 12px;font-size:.82rem;font-weight:600}
.galerie-gross{position:fixed;inset:0;z-index:1000;background:rgba(10,14,18,.97);display:flex;align-items:center;
  justify-content:center;padding:56px 16px}
.galerie-gross[hidden]{display:none}
.galerie-bild{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;user-select:none}
.galerie-zu,.galerie-pfeil{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  border-radius:999px;display:flex;align-items:center;justify-content:center;line-height:1}
.galerie-zu{top:12px;right:12px;width:44px;height:44px;font-size:1.8rem}
.galerie-pfeil{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem}
.galerie-pfeil.zurueck{left:12px}
.galerie-pfeil.weiter{right:12px}
.galerie-zu:hover,.galerie-pfeil:hover{background:rgba(255,255,255,.26)}
.galerie-zu:focus-visible,.galerie-pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px}
.galerie-stand{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;margin:0;font-size:.9rem;opacity:.85}
.galerie-mehr{position:absolute;inset:0;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;font-weight:700}