/* ==========================================================================
   Woodpeckers e.V. Amt Wachsenburg — Promotion-Subdomain
   Mobile first (390px). Keine Border-Radius: Kanten per clip-path.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  --rot:#a1101c;
  --rot-hover:#B81320;
  --schwarz:#151312;
  --schwarz-1:#26221F;
  --schwarz-2:#1E1B19;
  --gelb:#ebb000;
  --gelb-hover:#F5C000;
  --papier:#F1EDE6;
  --weiss:#FFFFFF;
  --beige:#E5E0D7;
  --text:#2C2723;
  --text-mittel:#6B6259;
  --label-grau:#9A9188;
  --fehler:#FF9AA0;

  --auf-schwarz:rgba(241,237,230,.72);
  --auf-schwarz-50:rgba(241,237,230,.5);
  --auf-schwarz-45:rgba(241,237,230,.45);
  --auf-schwarz-42:rgba(241,237,230,.42);
  --linie-hell:rgba(241,237,230,.18);
  --feld-linie:rgba(241,237,230,.3);
  --auf-rot:rgba(255,255,255,.94);

  --display:Bangers,Impact,system-ui,cursive;
  --brush:'Caveat Brush',Bangers,cursive;
  --text-font:Barlow,system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed',Barlow,system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;

  --rand:20px;
  --foto:repeating-linear-gradient(112deg,#2B2825 0 10px,#1C1A18 10px 20px);
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--schwarz);
  color:var(--text);
  font:500 15px/1.45 var(--text-font);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* Grundfarbe für Textlinks (Footer, Kontakt, Datenschutz).
   In :where() gesetzt, damit die Regel keine Spezifität hat: Bausteine mit
   eigener Textfarbe — Karten, Buttons, Kopfleiste — behalten ihre Farbe auch
   im Hover. Ohne das färbte a:hover die schwarze Schrift der gelben
   Coaches-Karte gelb auf Gelb. */
:where(a){color:var(--gelb);text-decoration:none}
:where(a:hover){color:var(--gelb-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,
.chip:focus-visible,.karte:focus-visible{
  outline:3px solid var(--gelb);
  outline-offset:2px;
}

.nur-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--gelb);color:var(--schwarz);
  font:700 13px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  padding:12px 16px;
}
.sprung:focus{left:0}

/* Inhaltsspalte: mobil voll, ab Tablet zentriert */
.seite{
  max-width:480px;
  margin:0 auto;
  background:var(--papier);
  min-height:100vh;
  padding-bottom:0;
  overflow:hidden; /* schneidet clip-path-Kanten sauber am Spaltenrand ab */
}

/* --- Wiederkehrende Bausteine ------------------------------------------- */
.label-mono{
  font:700 11px/1 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.label-mono--rot{color:var(--rot)}
.label-mono--gelb{color:var(--gelb)}

.block{padding:26px var(--rand) 0}

.btn-primaer{
  display:block;width:100%;border:0;cursor:pointer;
  background:var(--rot);color:#fff;
  font:400 23px/1 var(--display);
  text-transform:uppercase;letter-spacing:.01em;
  padding:17px 16px;text-align:center;
  clip-path:polygon(0 0,100% 0,100% 100%,16px 100%);
  transition:background-color .12s linear;
}
.btn-primaer:hover{background:var(--rot-hover);color:#fff}
.btn-primaer:active{background:var(--rot-hover)}

/* --- Übersicht: Hero ---------------------------------------------------- */
.hero-home{
  background:var(--rot);
  padding:56px var(--rand) 46px;
  clip-path:polygon(0 0,100% 0,100% 84%,0 100%);
}
.marke{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.marke img{width:52px;height:auto}
.marke-text{
  margin:0;
  font:700 12px/1.2 var(--cond);
  letter-spacing:.1em;color:rgba(255,255,255,.9);text-transform:uppercase;
}
.marke-text span{color:var(--gelb)}

.hero-home h1{margin:0}
.hero-bangers{
  display:block;
  font:400 47px/0.92 var(--display);
  color:#fff;text-transform:uppercase;
  transform:skewX(-5deg);transform-origin:left;
  text-shadow:4px 4px 0 rgba(0,0,0,.3);
}
.hero-brush{
  display:block;
  margin-top:2px;
  font:400 54px/0.9 var(--brush);
  color:var(--gelb);
  transform:rotate(-2deg);transform-origin:left;
  text-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.hero-lead{
  margin:16px 0 0;
  font:500 15.5px/1.45 var(--text-font);
  color:var(--auf-rot);max-width:290px;
}

/* --- Übersicht: Filter-Chips -------------------------------------------
   Der Filter läuft ohne JavaScript: vier versteckte Radiobuttons stehen als
   Geschwister vor Chip-Reihe und Teamliste, das CSS blendet daraufhin die
   nicht passenden Karten aus. Tastatur (Pfeiltasten) und Screenreader
   bedienen die Radiobuttons, die sichtbaren Chips sind ihre Labels.
   ------------------------------------------------------------------------ */
.chips-block{padding:22px 0 0}
.chips-block .label-mono{padding:0 var(--rand);margin-bottom:12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 var(--rand) 4px;-webkit-overflow-scrolling:touch}

.filter-radio{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.chip{
  flex:none;white-space:nowrap;cursor:pointer;
  padding:9px 14px;
  background:var(--beige);color:#3B342B;
  font:700 12.5px/1 var(--cond);
  letter-spacing:.08em;text-transform:uppercase;
  transition:background-color .12s linear,color .12s linear;
}
.chip:hover{background:#D8D2C7}

/* aktiver Chip — steht nach :hover, damit die Auswahl sichtbar bleibt */
#f-alle:checked   ~ .chips .chip[for="f-alle"],
#f-kinder:checked ~ .chips .chip[for="f-kinder"],
#f-jugend:checked ~ .chips .chip[for="f-jugend"],
#f-ab16:checked   ~ .chips .chip[for="f-ab16"]{
  background:var(--schwarz);color:var(--gelb);
}

#f-alle:focus-visible   ~ .chips .chip[for="f-alle"],
#f-kinder:focus-visible ~ .chips .chip[for="f-kinder"],
#f-jugend:focus-visible ~ .chips .chip[for="f-jugend"],
#f-ab16:focus-visible   ~ .chips .chip[for="f-ab16"]{
  outline:3px solid var(--gelb);outline-offset:2px;
}

/* Ausblenden der nicht passenden Karten. "Alle" blendet nichts aus. */
#f-kinder:checked ~ nav .teams li:not(.g-kinder),
#f-jugend:checked ~ nav .teams li:not(.g-jugend),
#f-ab16:checked   ~ nav .teams li:not(.g-ab16){
  display:none;
}

/* --- Übersicht: Teamliste ----------------------------------------------- */
.teams{padding:20px var(--rand) 0;display:flex;flex-direction:column;gap:11px;list-style:none;margin:0}
.teams li{display:flex}

.karte{
  display:flex;align-items:stretch;width:100%;min-height:62px;
  background:var(--weiss);color:var(--schwarz);
  clip-path:polygon(0 0,100% 0,100% 100%,15px 100%);
  transition:background-color .12s linear;
}
.karte:hover{background:#fff}
.karte-badge{
  width:64px;flex:none;background:var(--schwarz);
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
  font:400 19px/1 var(--display);color:#fff;
}
.karte-text{flex:1;min-width:0;padding:13px 8px 13px 12px}
.karte-titel{
  display:block;
  font:400 22px/1 var(--display);text-transform:uppercase;
  transform:skewX(-4deg);transform-origin:left;color:inherit;
}
.karte-meta{display:block;margin-top:5px;font:500 13px/1.35 var(--text-font);color:var(--text-mittel)}
.karte-pfeil{
  width:32px;flex:none;display:flex;align-items:center;justify-content:center;
  font:400 22px/1 var(--display);color:var(--rot);
}

.karte--rot{background:var(--rot);color:#fff}
.karte--rot:hover{background:var(--rot-hover)}
.karte--rot .karte-badge{color:var(--gelb)}
.karte--rot .karte-meta{color:rgba(255,255,255,.85)}
.karte--rot .karte-pfeil{color:var(--gelb)}

.karte--gelb{background:var(--gelb);color:var(--schwarz)}
.karte--gelb:hover{background:var(--gelb-hover)}
.karte--gelb .karte-badge{color:var(--gelb)}
.karte--gelb .karte-meta{color:#4A423A}

/* --- Übersicht: So einfach geht der Anfang ------------------------------ */
.anfang{margin-top:28px;background:var(--schwarz-2);padding:24px var(--rand)}
.anfang ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px;counter-reset:schritt}
.anfang li{display:flex;gap:12px;align-items:baseline;counter-increment:schritt}
.anfang li::before{
  content:counter(schritt);
  font:400 26px/0.8 var(--display);color:var(--rot);
}
.anfang li span{font:500 14.5px/1.38 var(--text-font);color:var(--papier)}

/* --- Landingpage: Kopfleiste -------------------------------------------- */
.kopfleiste{
  background:var(--schwarz);
  display:flex;align-items:center;gap:10px;
  padding:16px 16px 11px;
}
.zurueck{
  display:inline-block;
  background:var(--rot);color:#fff;
  font:700 12px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  padding:9px 12px;
  transition:background-color .12s linear;
}
.zurueck:hover{background:var(--rot-hover);color:#fff}
.kopf-team{
  font:700 12px/1 var(--cond);letter-spacing:.1em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
}

/* --- Landingpage: Foto + Risskanten-Hero -------------------------------- */
.hero-team{background:var(--schwarz)}
.team-foto{
  position:relative;overflow:hidden;
  height:200px;background:var(--foto);
  display:flex;align-items:flex-start;padding:12px 14px;
}
/* Echtes Foto einfach als <img> in .team-foto legen — es füllt die Fläche. */
.team-foto img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  filter:grayscale(1);
}
/* Hinweis auf das gewünschte Motiv — verschwindet mit dem echten Foto.
   Steht oben, weil die Risskante die unteren 46px der Fläche überdeckt. */
.foto-hinweis{font:700 9.5px/1.4 var(--mono);color:rgba(255,255,255,.6)}

/* Risskante: die Grafik des Vereins, aufbereitet von riss.py — gedreht und
   unterhalb der Rissline mit Vereinsrot gefüllt. Sie sitzt vollständig ÜBER
   dem roten Block (bottom:100%), ihre unterste Zeile ist deckend rot und
   geht darum nahtlos in die Blockfläche über. Oben ist sie durchsichtig,
   dort bleibt das Foto sichtbar; dazwischen liegen die Papierfasern.
   Deshalb hat der Block selbst eine gerade Oberkante und keinen clip-path. */
.hero-riss{
  background:var(--rot);
  padding:32px var(--rand) 34px;
  margin-top:-23px;
  position:relative;
}
.hero-riss::before{
  content:"";
  position:absolute;
  left:0;right:0;
  /* 1 px Überlappung: die Höhe folgt aus dem Seitenverhältnis und kann krumm
     ausfallen — ohne das blitzt sonst ein Haarstrich Foto durch die Naht */
  bottom:calc(100% - 1px);
  aspect-ratio:1080 / 160;
  background:url('../img/woodpeckers-riss-fill.png') 0 0 / 100% 100% no-repeat;
  pointer-events:none;
}
/* Team-Marke im Hero — bisher nur bei Woodys Cheers */
.team-logo{width:104px;height:auto;margin:0 0 14px}

.kicker{
  font:700 13px/1 var(--cond);letter-spacing:.12em;
  color:var(--gelb);text-transform:uppercase;margin-bottom:8px;
}
.hero-riss h1{
  margin:0;
  font:400 43px/0.9 var(--display);color:#fff;text-transform:uppercase;
  transform:skewX(-5deg);transform-origin:left;
  text-shadow:4px 4px 0 rgba(0,0,0,.3);
}
.pitch{margin:14px 0 0;font:500 15.5px/1.45 var(--text-font);color:var(--auf-rot)}
.tags{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.tags li{
  padding:6px 10px;background:var(--schwarz);
  font:700 11.5px/1 var(--cond);letter-spacing:.07em;
  color:var(--gelb);text-transform:uppercase;
}

/* --- Landingpage: Freebie-Bar ------------------------------------------- */
.freebie{
  background:var(--schwarz);padding:15px var(--rand);
  display:flex;align-items:center;gap:13px;
}
.freebie-balken{width:8px;height:36px;background:var(--gelb);flex:none}
.freebie p{margin:0;font:700 17px/1.2 var(--text-font);color:#fff}

/* --- Landingpage: Trainingszeiten --------------------------------------- */
.training-karte{background:var(--weiss);clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)}
.termin{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px 13px 24px;border-bottom:1px solid rgba(21,19,18,.1);
}
.termin-tag{
  width:52px;flex:none;
  font:400 23px/0.98 var(--display);color:var(--rot);
  text-transform:uppercase;transform:skewX(-4deg);transform-origin:left;
}
.termin-text{min-width:0}
.termin-zeit{font:700 16px/1.15 var(--text-font);color:var(--schwarz)}
.termin-notiz{margin-top:2px;font:500 13px/1.3 var(--text-font);color:var(--text-mittel)}

.fakten{padding:13px 14px 13px 24px}
.fakten dt{
  font:700 11px/1 var(--cond);letter-spacing:.1em;
  color:var(--label-grau);text-transform:uppercase;margin-bottom:5px;
}
.fakten dd{margin:0;font:600 14.5px/1.35 var(--text-font);color:var(--text)}
.fakten-grid{margin-top:11px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* Was der Verein stellt — eigene, volle Zeile statt in "Mitbringen" gequetscht */
.fakten-zeile{margin-top:11px}

/* --- Landingpage: Was wir machen ---------------------------------------- */
.macht{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.macht li{
  display:flex;gap:11px;align-items:flex-start;
  background:var(--weiss);padding:12px 13px;
  clip-path:polygon(0 0,100% 0,100% 100%,11px 100%);
  font:500 14.5px/1.4 var(--text-font);color:var(--text);
}
.macht li::before{
  content:"";width:7px;height:7px;background:var(--rot);
  flex:none;margin-top:6px;transform:rotate(45deg);
}

/* --- Landingpage: Haupt-CTA --------------------------------------------- */
.vorbeikommen{
  margin:26px var(--rand) 0;
  background:var(--gelb);padding:18px 16px 18px 26px;
  clip-path:polygon(0 0,100% 0,100% 100%,16px 100%);
}
.vorbeikommen h2{
  margin:0;
  font:400 36px/0.92 var(--brush);color:var(--schwarz);
  transform:rotate(-2deg);transform-origin:left;
}
.vorbeikommen p{margin:9px 0 0;font:500 14.5px/1.4 var(--text-font);color:#3B342B}

/* --- Formular ------------------------------------------------------------ */
.formular{margin-top:26px;background:var(--schwarz);padding:26px var(--rand) 30px}
.formular h2{
  margin:0 0 6px;
  font:400 31px/0.94 var(--display);color:#fff;
  text-transform:uppercase;transform:skewX(-5deg);transform-origin:left;
}
.form-lead{margin:0 0 18px;font:500 14px/1.4 var(--text-font);color:rgba(241,237,230,.6)}

.felder{display:flex;flex-direction:column;gap:14px}

.abteilung{
  background:var(--schwarz-1);padding:11px 13px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.abteilung-label{
  font:700 10.5px/1 var(--cond);letter-spacing:.12em;
  color:var(--auf-schwarz-50);text-transform:uppercase;
}
.abteilung-wert{margin-top:4px;font:700 15px/1.1 var(--text-font);color:#fff}
.abteilung-aendern{
  display:inline-block;flex:none;
  border:1px solid var(--feld-linie);background:none;
  color:rgba(241,237,230,.75);
  font:600 11.5px/1 var(--text-font);padding:7px 9px;
  transition:border-color .12s linear,color .12s linear;
}
.abteilung-aendern:hover{border-color:var(--gelb);color:var(--gelb)}

.feld{display:block}
.feld > span:first-child,
.feld-label{
  display:block;
  font:700 11.5px/1 var(--cond);letter-spacing:.1em;
  color:var(--auf-schwarz);text-transform:uppercase;margin-bottom:6px;
}
.feld input{
  width:100%;border:0;border-bottom:2px solid var(--feld-linie);
  background:var(--schwarz-1);color:#fff;
  font:500 16px/1.2 var(--text-font);   /* 16px: verhindert iOS-Zoom */
  padding:13px 12px;outline:none;
  transition:border-color .12s linear;
}
.feld input::placeholder{color:rgba(241,237,230,.38)}
.feld input:focus{border-bottom-color:var(--gelb)}
.feld input[aria-invalid="true"]{border-bottom-color:var(--fehler)}

.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.fehler{
  display:block;font:600 12.5px/1.3 var(--text-font);
  color:var(--fehler);margin-top:5px;
}
.fehler:empty{display:none}

.eltern{background:var(--schwarz-1);padding:14px 13px;border-left:4px solid var(--gelb)}
.eltern-hinweis{font:700 12.5px/1.3 var(--text-font);color:var(--gelb);margin-bottom:10px}
.eltern input{
  width:100%;border:0;border-bottom:2px solid var(--feld-linie);
  background:var(--schwarz);color:#fff;
  font:500 15.5px/1.2 var(--text-font);padding:12px;outline:none;
  transition:border-color .12s linear;
}
.eltern input:focus{border-bottom-color:var(--gelb)}
.eltern input[aria-invalid="true"]{border-bottom-color:var(--fehler)}
.eltern .fehler{margin-top:6px}
.eltern[hidden]{display:none}

.dsgvo{position:relative;display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding-top:2px}
.dsgvo input{position:absolute;left:0;top:2px;opacity:0;width:24px;height:24px;margin:0}
.dsgvo-box{
  width:24px;height:24px;flex:none;
  background:transparent;border:2px solid var(--gelb);
  display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--text-font);color:var(--schwarz);
}
.dsgvo-box::after{content:""}
.dsgvo input:checked + .dsgvo-box{background:var(--gelb)}
.dsgvo input:checked + .dsgvo-box::after{content:"✓"}
.dsgvo input:focus-visible + .dsgvo-box{outline:3px solid var(--gelb);outline-offset:2px}
.dsgvo-text{font:500 13px/1.4 var(--text-font);color:rgba(241,237,230,.75)}
.fehler-dsgvo{margin-top:-6px}

.form-kontakt{
  margin:0;
  font:500 13px/1.4 var(--text-font);
  color:var(--auf-schwarz-45);text-align:center;
}

/* Erfolgs-Screen — ersetzt das Formular, sobald die URL auf #danke zeigt
   (submit.php leitet dorthin zurück). Funktioniert auch ohne JavaScript. */
.danke{display:none;text-align:center;padding:14px 0}
.danke:target,.danke.zeigen{display:block}
.danke:target ~ .form-body,.danke.zeigen ~ .form-body{display:none}
.danke h2{
  margin:0;
  font:400 36px/0.92 var(--display);color:var(--gelb);
  text-transform:uppercase;transform:skewX(-5deg);
}
.danke p{margin:13px 0 0;font:500 15px/1.45 var(--text-font);color:rgba(241,237,230,.82)}
.danke .btn-danke{
  display:inline-block;margin-top:20px;border:0;
  background:var(--rot);color:#fff;
  font:400 19px/1 var(--display);text-transform:uppercase;
  padding:14px 18px;
  transition:background-color .12s linear;
}
.danke .btn-danke:hover{background:var(--rot-hover);color:#fff}

/* --- Footer -------------------------------------------------------------- */
.fuss{background:var(--schwarz);padding:26px var(--rand) 34px}
.fuss--team{padding-top:4px;border-top:1px solid rgba(241,237,230,.14)}
.fuss img{width:118px;height:auto;margin-bottom:16px}
.fuss--team img{width:112px;margin:22px 0 16px}
.fuss-adresse{margin:0;font:600 14px/1.5 var(--text-font);color:var(--auf-schwarz)}
.fuss-links{
  margin-top:14px;display:flex;flex-direction:column;gap:7px;
  font:600 14px/1.4 var(--text-font);
}
.fuss-trenner{margin-top:20px;height:1px;background:var(--linie-hell)}
.fuss-recht{
  margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;
  font:600 13px/1.3 var(--text-font);
}
.fuss-copy{margin-top:12px;font:500 12px/1.45 var(--text-font);color:var(--auf-schwarz-42)}

/* --- Breitere Viewports --------------------------------------------------
   Struktur bleibt gleich; nur Spaltenbreite, Headline-Größe und die
   Teamliste ändern sich (README „Responsive behavior“).
   ------------------------------------------------------------------------- */
@media (min-width:768px){
  /* Die Spalte ist bewusst schmal — das Layout ist ein Flyer, kein Webportal.
     Damit sie auf einem großen Bildschirm nicht im Leeren steht, bekommt der
     Grund eine feine Diagonalstruktur in der Bildsprache der Flyer, und die
     Spalte einen weichen Schatten, der sie als Blatt darauf legt. */
  body{
    background:
      repeating-linear-gradient(112deg,#1A1817 0 14px,var(--schwarz) 14px 28px);
  }
  .seite{
    max-width:760px;
    box-shadow:0 0 70px rgba(0,0,0,.55);
  }
  :root{--rand:32px}

  /* Der Hero ist ein Plakat. Auf 760 px wirkte er mit 72px zu zaghaft,
     rechts blieb viel leeres Rot. */
  .hero-home{padding:72px var(--rand) 60px}
  .hero-bangers{font-size:96px;line-height:.88}
  .hero-brush{font-size:108px}
  .hero-lead{font-size:17px;max-width:460px}

  .hero-riss{padding:40px var(--rand) 42px}
  .hero-riss h1{font-size:76px}

  .teams{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .teams li{display:block}
  .karte{height:100%}

  .kopfleiste{padding:16px var(--rand) 11px}
  .team-foto{height:340px}          /* 2,7:1 wirkte zu flach für die Breite */
  .formular{padding:34px var(--rand) 38px}
  .vorbeikommen{margin:26px var(--rand) 0}

  /* Zeilenlängen begrenzen: über 75 Zeichen wird Fließtext mühsam.
     Betroffen sind nur diese beiden — der Rest bleibt darunter. */
  .pitch{max-width:50ch}
  .vorbeikommen p{max-width:50ch}

  /* Ein Namensfeld über die volle Spaltenbreite sieht nach Fehler aus. */
  .felder{max-width:460px}
}

/* --- Reduzierte Bewegung / Druck ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}