/* =========================================================
   Pferdefreunde e.V. Aschau am Inn — Gestaltung 2026-07-30
   Haltung: die Anschlagtafel des Vereins, nicht der Design-Baukasten.
   Gegenstände statt Effekte: Zeitungskopf, Kolumnentitel mit Punktlinie,
   Emailleschild, Vereinslogo, Karteikarte, Aushang,
   Aufnahmeantrag, Kolophon.
   Zwei Druckfarben auf Formularpapier: Emailleblau und Stempelrot.
   Drei Rollen: Bevan als Plakatschrift für Wortmarke, Schilder und Namen,
   Bitter als Egyptienne für Schlagzeilen und Lesetext, Courier Prime für
   alles Administrative. Keine Grotesk auf der Seite.
   Kein Blendmodus, kein blur, kein backdrop-filter: die Seite soll auf
   jedem Gerät flüssig scrollen.
   ========================================================= */

@font-face{
  font-family:'Bevan';
  src:url('../fonts/bevan-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Bitter';
  src:url('../fonts/bitter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Courier Prime';
  src:url('../fonts/courier-prime-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Werkpapier: warmes Grau, wie Vereinsheft- und Formularpapier. Bewusst
     nicht das orangestichige Beige jeder generierten Seite, aber auch nicht
     kühl — kühles Papier mit Blauschwarz sah technisch aus. */
  --paper:#efece2;
  --paper-2:#e7e2d5;
  --paper-3:#dbd5c4;
  --ink:#1f1e1a;
  --ink-2:#4e4b43;   /* 7,4:1 auf Papier — für Kleinschrift zugelassen */
  --ink-3:#5d594f;   /* 5,9:1 auf Papier — Untergrenze, nichts Blasseres */
  --line:rgba(31,30,26,.24);
  --hair:rgba(31,30,26,.13);
  /* Erste Druckfarbe: Emailleblau, wie an Hoftafeln und Stallschildern.
     Gedeckt wie Ölfarbe, nicht das satte Bildschirmblau. */
  --blau:#1d4470;
  --blau-tief:#142f4f;
  --blau-weich:rgba(29,68,112,.1);
  /* Zweite Druckfarbe: Stempelrot. Nur für Stempel, Aushang und
     Platzhalterlinien — nie flächig. */
  --rot:#a63a2c;
  --rot-weich:rgba(166,58,44,.5);
  --on-dark:#f2efe4;

  /* Plakatschrift: Holzschnitt-Egyptienne für Wortmarke, Schilder und Namen. */
  --sign:'Bevan',Rockwell,Georgia,serif;
  /* Werkschrift: Egyptienne-Slab für Schlagzeilen und Lesetext. */
  --text:'Bitter',Georgia,serif;
  --mono:'Courier Prime',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --maxw:1440px;
  --pad:clamp(1.15rem,5vw,4.5rem);
  --gut:clamp(1rem,2.2vw,2rem);
  --bar:58px;
  --safe-b:env(safe-area-inset-bottom,0px);

  color-scheme:light;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.95rem + .2vw,1.06rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Textlinks: die Unterlinie wird beim Zeigen gezeichnet, statt zu blinken. */
a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:background-size .3s cubic-bezier(.16,1,.3,1),color .2s ease;
}
a:hover{background-size:100% 2px;color:var(--blau)}
p a,li a{padding-bottom:.06em}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px}

h1,h2,h3{margin:0;font-family:var(--text);font-weight:400}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;background-image:none;
}
.skip:focus{left:0}

/* Alles Administrative läuft in der Schreibmaschine: Daten, Beschriftungen,
   Formularzeilen, Bildunterschriften, Kolophon. */
.mono,.kopf-zeile,.kolumne,.inhaltsleiste em,.kartei-kopf,.aushang-kopf,
.kolophon h2,.quellen,.kolophon-fuss,figcaption{
  font-family:var(--mono);
}

/* ---------- Papierkorn ----------
   Eine feste Ebene, nie animiert, ohne Blendmodus: kostet im Scroll nichts. */
.grain{
  position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ---------- Schmale Leiste ----------
   Erscheint erst unter dem Zeitungskopf. Sie hat immer Papier im Rücken,
   liegt also nie durchsichtig über einem Foto. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--bar);
  display:flex;align-items:center;gap:1.4rem;
  padding:0 var(--pad);
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--line);
  transform:translateY(-101%);
  transition:transform .34s cubic-bezier(.16,1,.3,1);
}
.topbar.is-stuck{transform:none}
.brand{display:flex;align-items:center;gap:.55rem;background-image:none;flex:0 0 auto}
.brand-mark{width:34px;height:auto;flex:0 0 auto}
.brand-name{font-weight:700;font-size:1rem;letter-spacing:-.005em}
.brand-place{font-family:var(--mono);font-size:.7rem;color:var(--ink-2);white-space:nowrap}
.nav{margin-left:auto;display:flex;gap:1.4rem}
.nav a{
  font-size:.86rem;color:var(--ink-2);
  background-size:0 1px;background-position:0 calc(100% - 2px);
}
.nav a:hover{background-size:100% 1px;color:var(--ink)}
.nav a.is-active{
  color:var(--ink);
  background-image:linear-gradient(var(--rot),var(--rot));background-size:100% 2px;
}
.topbar-cta{flex:0 0 auto}
.nav-toggle{display:none}

@media (max-width:1000px){
  /* Das Menue rollt hinter der Leiste hervor und wieder zurueck: geclippt
     statt hart ein- und ausgeblendet. Bewegt werden nur clip-path,
     transform und opacity, also nichts, was neu umbricht. */
  .js .nav{
    position:fixed;top:var(--bar);left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.25rem var(--pad) 1.1rem;
    clip-path:inset(0 0 100% 0);
    transform:translateY(-10px);pointer-events:none;
    transition:clip-path .3s cubic-bezier(.4,0,.7,1),
               transform .3s cubic-bezier(.4,0,.7,1);
  }
  .js .nav a{
    padding:.8rem 0;border-bottom:1px solid var(--hair);font-size:1rem;background-image:none;
    opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .24s cubic-bezier(.16,1,.3,1);
  }
  .js .nav.is-open{
    clip-path:inset(0 0 0 0);
    transform:none;pointer-events:auto;
    transition:clip-path .46s cubic-bezier(.16,1,.3,1),
               transform .46s cubic-bezier(.16,1,.3,1);
  }
  /* Die Zeilen kommen der Reihe nach nach, sobald das Blatt offen ist. */
  .js .nav.is-open a{opacity:1;transform:none}
  .js .nav.is-open a:nth-child(1){transition-delay:.06s}
  .js .nav.is-open a:nth-child(2){transition-delay:.11s}
  .js .nav.is-open a:nth-child(3){transition-delay:.16s}
  .js .nav.is-open a:nth-child(4){transition-delay:.21s}
  .js .nav.is-open a:nth-child(5){transition-delay:.26s}
  .js .nav-toggle{
    display:inline-flex;align-items:center;margin-left:auto;
    min-height:42px;
    background:none;border:0;padding:.5rem .3rem;cursor:pointer;
    font:inherit;font-family:var(--mono);font-size:.86rem;letter-spacing:.04em;
    color:var(--ink);
  }
  .topbar .btn-sm{min-height:42px}
  .topbar{gap:.9rem}
}
@media (prefers-reduced-motion:reduce){ .js .nav,.js .nav a,.topbar{transition:none;transition-delay:0s} }

/* ---------- Satzspiegel ---------- */
main{position:relative;z-index:1}
.kopf,.kap,.kolophon,.aufmacher,.band{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);
}
.kap{padding-block:clamp(2.8rem,6.4vh,5rem)}
.kap > *{grid-column:1 / -1}

.regel{grid-column:1 / -1;height:1px;background:var(--line);margin:0}
.regel-stark{height:2.5px;background:var(--ink)}

/* ---------- Zeitungskopf ---------- */
.kopf{position:relative;padding-top:clamp(1rem,3vh,2rem)}
.kopf-zeile{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;justify-content:space-between;
  margin:0 0 .7rem;
  font-size:.74rem;letter-spacing:.02em;color:var(--ink-2);
}
.kopf-mitte{color:var(--ink-3)}

.kopf-satz{grid-column:1 / -1;position:relative;padding-top:clamp(.6rem,1.6vh,1.4rem)}
/* Der Zeitungskopf steht auf einer Zeile und füllt den Satzspiegel genau.
   Gemessen: „Pferdefreunde" in Bevan ist bei Schriftgrad 100 px 818 px
   breit, mit der Laufweite bleiben 8,02 em. Satzspiegel = 0,9 × Fenster­
   breite → 11,15vw, gedeckelt auf 10,05rem (= 1296 px Satzspiegel ab
   1440 px Fensterbreite). Wer die Laufweite ändert, muss beides neu
   rechnen, sonst schießt die Marke über den Rand. */
.marke{
  font-family:var(--sign);font-weight:400;
  font-size:clamp(2.4rem,11.15vw,10.05rem);
  line-height:1;letter-spacing:-.012em;
  white-space:nowrap;
  margin:0;
}
.marke-teil{display:inline-block}
/* Zeichenweise Einblendung: jedes Zeichen bekommt eine eigene Hülle. */
.marke .glyph{display:inline-block;will-change:transform}
.wm-clip{display:inline-block;overflow:hidden;vertical-align:bottom}

/* Letztes Element des zweispaltigen Verzeichnisses. Als Rasterelement kann
   der Stempel keine Seitenzahl verdecken, und die Zeile wächst von selbst
   mit. Bei sechs Einträgen wäre er das siebte Element und landete in
   Spalte 1, also mitten auf der Seite: deshalb ausdrücklich in die zweite
   Spalte. Einspaltig muss das wieder weg (siehe 820-px-Block), sonst legt
   das Raster eine zweite Spalte an, die es gar nicht geben soll. */
.kopf-logo{
  grid-column:2;
  justify-self:end;align-self:start;margin-top:.3rem;
  width:clamp(104px,9.4vw,140px);height:auto;
  pointer-events:none;
}
.kopf-sub{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;
  margin:clamp(.7rem,2vh,1.2rem) 0 clamp(.9rem,2.4vh,1.6rem);
  font-family:var(--mono);font-size:.82rem;color:var(--ink-2);
}

/* Inhaltsverzeichnis mit Punktlinie und Seitenzahl. */
.inhaltsleiste{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5.5rem);
  padding:.9rem 0 1rem;
}
.inhaltsleiste a{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.44rem 0;background-image:none;
  font-size:1.02rem;
}
.inhaltsleiste i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.3em)}
.inhaltsleiste em{font-style:normal;font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.inhaltsleiste a:hover{color:var(--blau)}
.inhaltsleiste a:hover i{border-bottom-color:var(--blau)}
.inhaltsleiste a:hover em{color:var(--blau)}

/* ---------- Aufmacher ---------- */
.aufmacher{padding-block:clamp(1.2rem,3vh,2.2rem) clamp(2rem,5vh,3.4rem)}
.platte{grid-column:1 / -1;margin:0;position:relative}
.platte-bild{overflow:hidden;aspect-ratio:16/8}
/* 112 % hoch und um 6 % hochgezogen: damit bleibt der Rahmen gefüllt,
   während das Bild beim Scrollen um ±5 % nachläuft. */
.platte-bild img{
  width:100%;height:112%;position:relative;top:-6%;
  object-fit:cover;object-position:50% 56%;
}

/* Emailleschild: trägt den Kernsatz. Ein Gegenstand im Bild statt einer
   Riesenzeile über einem Gradienten. */
.schild{
  position:absolute;left:clamp(.9rem,2.6vw,2.4rem);bottom:clamp(.9rem,2.6vw,2.4rem);
  max-width:min(30rem,72%);
  background:var(--blau);color:var(--on-dark);
  padding:clamp(1rem,1.8vw,1.5rem) clamp(1.1rem,2vw,1.7rem);
  border-radius:3px;
  box-shadow:0 16px 26px -24px rgba(31,30,26,.85);
}
.schild::before{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(242,239,228,.34);border-radius:1px;
}
.schild-satz{
  margin:0;font-weight:700;
  font-size:clamp(1.05rem,.9rem + .8vw,1.7rem);
  line-height:1.16;letter-spacing:-.012em;
}
.schild-fuss{
  margin:.6rem 0 0;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.03em;color:rgba(242,239,228,.86);
}
.platte figcaption,.ausschnitt figcaption{
  display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between;
  margin-top:.7rem;font-size:.76rem;color:var(--ink-2);
}

.aufmacher-fuss{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;align-items:end;gap:1rem clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1.4rem,3.4vh,2.4rem);
}
.aufmacher-text{
  margin:0;max-width:34ch;
  font-weight:600;
  font-size:clamp(1.1rem,1rem + .55vw,1.5rem);line-height:1.28;letter-spacing:-.015em;
}
.aufmacher-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 0 auto}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.72rem 1.5rem;background-image:none;border-radius:3px;
  font-family:var(--text);font-weight:600;font-size:.94rem;
  white-space:nowrap;cursor:pointer;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .12s ease;
}
.btn-sm{min-height:36px;padding:.42rem 1rem;font-size:.84rem}
.cta-kurz{display:none}
.btn-solid{
  background:var(--blau);color:var(--on-dark);border:1.5px solid var(--blau);
  /* eingelegte Linie wie bei den Schildern, kein Material-Knopf */
  box-shadow:inset 0 0 0 1px rgba(242,239,228,.3);
}
.btn-solid:hover{background:var(--blau-tief);border-color:var(--blau-tief);color:var(--on-dark)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn:active{transform:translateY(1px)}

/* ---------- Platzhalter ----------
   Sehen aus wie auszufüllende Formularzeilen: Schreibmaschine über einer
   gepunkteten Linie in Stempelrot. */
.todo{
  font-family:var(--mono);font-size:.92em;color:var(--ink-3);
  border-bottom:1px dotted var(--rot-weich);
  padding-bottom:.06em;
}
p.todo,dd.todo,h3.todo{
  display:block;font-family:var(--mono);font-weight:400;font-size:.86rem;
  color:var(--ink-3);border-bottom:1px dotted var(--rot-weich);padding-bottom:.25rem;
}
h3.todo{font-size:.95rem}

/* ---------- Kolumnentitel ----------
   Laufender Kopf wie im Heft: Rubrik links, Punktlinie, Folio rechts. */
.kolumne{
  grid-column:1 / -1;
  display:flex;align-items:baseline;gap:.8rem;
  margin:0 0 clamp(1rem,2.4vh,1.8rem);
  font-size:.8rem;letter-spacing:.03em;color:var(--ink-2);
  border-top:2.5px solid var(--ink);padding-top:.5rem;
}
.kolumne i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.3em)}
.kolumne em{font-style:normal;color:var(--ink-3);letter-spacing:.02em}

.kap-titel{
  grid-column:1 / 11;
  font-weight:700;
  font-size:clamp(2.3rem,1.1rem + 5vw,5.4rem);
  line-height:.98;letter-spacing:-.008em;
  margin:0 0 clamp(1.1rem,2.8vh,2rem);
  text-wrap:balance;
}
.kap-lead{
  grid-column:1 / 8;
  font-size:clamp(1.06rem,1rem + .5vw,1.34rem);line-height:1.42;
  color:var(--ink-2);text-wrap:pretty;
  margin:0 0 clamp(1.8rem,4.5vh,3rem);
}
.hint{font-size:.86rem;color:var(--ink-3)}
.link-out::after{content:" \2197";font-size:.85em}

/* ---------- Verein: Reportage plus Karteikarte ---------- */
.reportage{
  grid-column:1 / 8;
  columns:2;column-gap:clamp(1.4rem,2.6vw,2.8rem);
  color:var(--ink-2);
}
.reportage p{margin:0 0 .9rem;text-wrap:pretty}
/* Initial als Holzschnitt-Versal in der ersten Druckfarbe. */
.anriss{color:var(--ink)}
.anriss::first-letter{
  float:left;
  /* Die Initiale soll genau zwei Zeilen tief sitzen. Maßgeblich ist die
     Höhe des Float-Kastens: Schriftgrad × Zeilenhöhe + Innenabstand oben
     = 4,3 × 0,64 + 0,43 = 3,18em, also knapp unter 2 × 1,6em. Wird der
     Kasten höher, rückt auch die dritte Zeile ein. */
  font-family:var(--sign);font-weight:400;font-size:4.3em;line-height:.64;
  padding:.1em .12em 0 0;color:var(--blau);
}

.kartei{
  grid-column:9 / 13;align-self:start;
  background:var(--paper-2);
  border:1px solid var(--line);
  transform:rotate(-.7deg);
  box-shadow:0 1px 0 rgba(31,30,26,.05),0 15px 24px -22px rgba(31,30,26,.7);
  /* Linierung und roter Rand wie auf einer Karteikarte. */
  background-image:
    linear-gradient(to right,transparent 0 1.65rem,var(--rot-weich) 1.65rem 1.7rem,transparent 1.7rem),
    repeating-linear-gradient(to bottom,transparent 0 1.65rem,var(--hair) 1.65rem 1.7rem);
  background-position:0 0,0 2.6rem;
}
.kartei-kopf{
  margin:0;padding:.6rem .9rem .5rem;
  border-bottom:1px solid var(--line);
  font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--rot);
}
.kartei-satz{margin:0;padding:.7rem .9rem 1rem 1.95rem}
.kartei-satz > div{padding:.28rem 0}
.kartei-satz dt{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;
  color:var(--ink-2);
}
.kartei-satz dd{margin:0;font-size:1rem;line-height:1.35}

/* ---------- Bildband mit Zitat ----------
   Ersetzt die vollflächigen Fotostrecken mit Gradient und Riesenzeile:
   Foto im Layout, Zitat auf Papier daneben. */
.band{
  padding-block:clamp(2rem,5vh,3.6rem);
  align-items:center;row-gap:clamp(1.2rem,3vh,2rem);
}
.band-bild{grid-column:1 / 8;margin:0;overflow:hidden;aspect-ratio:4/3}
.band-bild img{width:100%;height:112%;position:relative;top:-6%;object-fit:cover}
.band-zitat{grid-column:8 / 13;margin:0}
.band-flip .band-bild{grid-column:6 / 13;grid-row:1}
.band-flip .band-zitat{grid-column:1 / 6;grid-row:1}
.band-zitat p{
  margin:0;font-weight:700;
  font-size:clamp(1.55rem,1rem + 2.2vw,2.9rem);
  line-height:1.1;letter-spacing:-.01em;text-wrap:balance;
}
.band-zitat cite{
  display:block;margin-top:.9rem;
  font-family:var(--mono);font-style:normal;font-size:.84rem;color:var(--ink-2);
}
.band-zitat cite::before{content:"— "}

/* ---------- Vollflächiges Bild ---------- */
.ausschnitt{
  grid-column:1 / -1;
  margin:0 calc(var(--pad) * -1);
}
.ausschnitt-rahmen{overflow:hidden;aspect-ratio:16/9}
.ausschnitt img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
/* Die Kirche steht mittig im Bild, der Beschnitt darf also tiefer sitzen. */
.ausschnitt-kurz img{object-position:50% 45%}
.ausschnitt figcaption{padding-inline:var(--pad)}

/* ---------- Termine: Aushang ---------- */
.aushang{
  grid-column:1 / 10;
  background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(1.1rem,2.2vw,1.9rem);
}
.aushang-kopf{
  display:inline-block;margin:0 0 1.2rem;
  border:2px solid var(--rot);color:var(--rot);
  padding:.24rem .8rem;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  transform:rotate(-1.4deg);
}
.aushang-liste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.aushang-liste li{
  display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2rem);align-items:start;
  padding-top:1rem;border-top:1px solid var(--line);
}
.aushang-datum{
  margin:0;padding:.5rem .6rem;text-align:center;
  font-family:var(--mono);font-size:.92rem;color:var(--rot);
}
.aushang-datum.todo{
  border:1.5px dashed var(--rot-weich);
  padding-bottom:.5rem;
}
.aushang-liste h3{
  font-weight:700;font-size:1.16rem;letter-spacing:-.004em;
  margin-bottom:.35rem;
}
.aushang-liste h3.todo{font-family:var(--mono);font-weight:400}
.aushang-fuss{margin:1.4rem 0 0;font-size:.92rem;color:var(--ink-2)}

/* ---------- Termin als Plakat am Brett ----------
   Der Eintrag war ein Textblock mit zwei Textlinks und wurde überflogen.
   Jetzt liegt er als eigenes Blatt auf dem Aushang: helleres Papier,
   Bild, Datum als Stempelzeile, die Frist mit verbleibenden Tagen und
   ein sichtbarer Knopf. */
/* Der Selektor braucht das li: `.aushang-liste li` ist spezifischer als
   `.termin` und würde sonst Rasterspalten und Ausrichtung zurückholen.
   Das Bild lag dann in einer 9,5-rem-Spalte und quoll über den Text. */
.aushang-liste li.termin{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:0 clamp(1rem,2.2vw,1.8rem);
  /* stretch, damit das Bild die Hoehe der Textspalte füllt. */
  align-items:stretch;
  /* Überschreibt die Trennlinie der einfachen Aushang-Zeilen: dieses
     Blatt traegt seinen eigenen Rand. */
  padding:0;border-top:0;
  background:var(--paper);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.16,1,.3,1),
             box-shadow .3s cubic-bezier(.16,1,.3,1),
             border-color .3s ease;
}
/* Die ganze Fläche klickt, aber es bleibt EIN Link: der Titel legt sich
   per ::after über das Blatt. Deshalb liegt der Titel im Stapel oben. */
.termin-titel a::after{
  content:"";position:absolute;inset:0;z-index:2;
}
.termin:hover,.termin:focus-within{
  transform:translateY(-2px);
  border-color:var(--ink-3);
  box-shadow:0 16px 24px -20px rgba(31,30,26,.85);
}
.termin:focus-within{outline:2px solid var(--blau);outline-offset:3px}
/* Der Umriss liegt schon am Blatt, der Link selbst braucht keinen zweiten. */
.termin-titel a:focus-visible{outline:none}

/* Kein aspect-ratio: das Bild füllt die Spalte auf ganzer Hoehe. Ein
   Seitenverhältnis würde gegen den Streckvorgang rechnen und die
   Breite über die Spalte hinaus aufblasen. Die Untergrenze verhindert
   nur, dass es bei sehr kurzem Text zum Streifen wird. */
.termin-bild{
  margin:0;overflow:hidden;min-height:13rem;
  border-right:1px solid var(--line);
}
.termin-bild img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.termin:hover .termin-bild img{transform:scale(1.045)}

.termin-satz{padding:clamp(1rem,2vw,1.5rem)}
.termin-datum{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;
  margin:0 0 .5rem;
  font-family:var(--mono);font-size:.86rem;letter-spacing:.02em;
  color:var(--rot);
}
.termin-datum b{
  font-weight:400;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
}
.termin-titel{
  font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.15rem);
  line-height:1.08;letter-spacing:-.016em;
  margin:0 0 .6rem;
}
/* Die Unterlinie des Titels zeichnet sich beim Zeigen über das ganze
   Blatt, nicht nur über die Schrift: sie ist das Signal, dass hier
   etwas dahinterliegt. */
.termin-titel a{background-size:0 2px}
.termin:hover .termin-titel a{background-size:100% 2px;color:var(--blau)}
.termin-text{margin:0 0 .9rem;font-size:.98rem;color:var(--ink-2)}

.termin-frist{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  margin:0 0 1.1rem;padding-top:.7rem;
  border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.82rem;color:var(--ink-2);
}
/* Die verbleibenden Tage rechnet js/main.js aus dem data-Attribut. Ohne
   JS bleibt das Feld leer und die Frist steht trotzdem da. */
.termin-rest{
  font-weight:400;color:var(--rot);
  border:1px solid var(--rot-weich);padding:.1rem .5rem;
}
.termin-rest:empty{display:none}

.termin-cta{margin:0}
/* Knopf-Optik ohne eigenes Link-Element: geklickt wird das Blatt. */
.termin-cta .btn{pointer-events:none}
.termin-cta .btn::after{content:" \2192";margin-left:.15em}

@media (prefers-reduced-motion:reduce){
  .termin,.termin-bild img{transition:none}
  .termin:hover,.termin:focus-within{transform:none}
}

/* ---------- Mitglied werden: Aufnahmeantrag ----------
   Das Formular selbst nutzt die Formularbausteine oben. Hier stehen nur
   die beiden Teile, die keine Eingaben sind: die drei Schritte als
   Kästchenliste und die Beitragszeilen mit Punktlinie. */
.antrag-schritte{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;
}
/* Frei im Satzspiegel statt im Rahmen des Faksimiles: auf breiten
   Schirmen laufen die drei Schritte nebeneinander, sonst untereinander. */
.antrag-schritte-frei{
  grid-column:1 / -1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2.4rem);
  margin-bottom:clamp(1.6rem,3.6vh,2.6rem);
}
.antrag-schritte li{
  display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.2rem .9rem;min-width:0;
}
/* Kästchen ist ::before und belegt Spalte 1. Alles andere gehört
   ausdrücklich in Spalte 2 - sonst rutscht der Absatz in die 1,1rem-Spalte
   und bricht Wort für Wort um. */
.antrag-schritte li > *{grid-column:2;min-width:0}
/* Kästchen wie auf einem Vordruck. Gestrichelt und heller als die
   echten Ankreuzfelder darunter: seit der Antrag ausfüllbar ist, würde
   ein gleich aussehendes Kästchen zum Draufklicken einladen, obwohl
   hier nur der Ablauf beschrieben wird. */
.antrag-schritte li::before{
  content:"";width:1.1rem;height:1.1rem;margin-top:.34rem;
  border:1.5px dashed var(--line);
}
.antrag-schritte h3{
  font-weight:700;font-size:1.1rem;margin-bottom:.2rem;
}
.antrag-schritte p{font-size:.95rem;color:var(--ink-2)}

/* Beitragszeilen: Bezeichnung links, Punktlinie, Betrag rechts. */
.antrag-satz{margin:0 0 1.1rem;padding:0}
.antrag-satz > div{display:flex;align-items:baseline;gap:.6rem;padding:.4rem 0}
.antrag-satz dt{font-family:var(--mono);font-size:.84rem;color:var(--ink-2)}
.antrag-satz dd{
  order:2;margin:0 0 0 auto;font-family:var(--mono);font-size:.86rem;
}
.antrag-satz > div::after{
  content:"";order:1;flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.3em);
}
.antrag-cta{
  display:flex;flex-wrap:wrap;gap:.7rem;margin:clamp(1rem,2.4vh,1.6rem) 0 0;
}

/* ---------- Formularbausteine ----------
   Gemeinsam für den Nennungsbogen (turnier.html) und den Aufnahme-
   antrag (index.html). Beides sind Formulare im selben Gegenstand:
   Rahmen in Tinte, Kopfzeile in Versalien, Eingaben als Formularzeilen
   auf Papier, Kästchen und Punkte gezeichnet statt als
   Systemsteuerelement. Turnier-Eigenes steht in css/turnier.css.
   ---------------------------------------------------------------- */

/* ---------- Nennungsbogen ----------
   Faksimile wie der Aufnahmeantrag der Startseite, hier aber
   ausfüllbar. Rahmen in Tinte, Kopfzeile in Versalien. */
.bogen{
  grid-column:1 / -1;
  border:1.5px solid var(--ink);background:var(--paper-2);
}
.bogen-kopf{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between;
  margin:0;padding:.65rem clamp(1rem,2vw,1.6rem);
  border-bottom:1.5px solid var(--ink);
  font-family:var(--mono);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.09em;
}
.bogen-teil{
  padding:clamp(1.1rem,2.2vw,1.8rem) clamp(1rem,2vw,1.6rem);
  border-bottom:1px solid var(--line);
}
.bogen-teil:last-of-type{border-bottom:0}
.bogen-teil > h3{
  display:flex;align-items:baseline;gap:.8rem;
  margin:0 0 1.1rem;
  font-family:var(--mono);font-weight:400;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--rot);
}
.bogen-teil > h3 i{
  flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.3em);
}

/* Felder. Label steht über dem Feld, Fehler darunter — die Reihenfolge
   ändert sich nie, damit der Bogen beim Ausfüllen ruhig bleibt. */
.feld-satz{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);
}
.feld{display:grid;gap:.34rem;min-width:0}
.feld-weit{grid-column:1 / -1}
.feld > label,.feld-legende{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
  color:var(--ink-2);
}
.feld-legende{padding:0;margin:0 0 .1rem}
/* Auswahlgruppen brauchen ein fieldset für die Vorlesereihenfolge, aber
   keinen Rahmen: den traegt schon der Bogen. */
.feld-gruppe{border:0;margin:0;padding:0;min-width:0}
.pflicht{color:var(--rot)}

/* Eingaben sehen aus wie Formularzeilen: Papier, Tintenlinie unten,
   keine abgerundete Eingabemaske. */
.feld input[type=text],
.feld input[type=tel],
.feld input[type=email],
.feld input[type=date],
.feld textarea{
  width:100%;min-width:0;
  font:inherit;font-family:var(--mono);font-size:.94rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);border-bottom:1.5px solid var(--ink-2);
  border-radius:0;
  padding:.6rem .7rem;
  transition:border-color .2s ease,background-color .2s ease;
}
.feld textarea{min-height:5.5rem;resize:vertical;line-height:1.5}
.feld input::placeholder,.feld textarea::placeholder{color:var(--ink-3);opacity:1}
.feld input:hover,.feld textarea:hover{border-bottom-color:var(--ink)}
.feld input:focus-visible,.feld textarea:focus-visible{
  outline:2px solid var(--blau);outline-offset:2px;
  border-bottom-color:var(--blau);background:#fff;
}
.feld-hint{
  margin:0;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);
}
.feld-fehler{
  margin:0;font-family:var(--mono);font-size:.76rem;color:var(--rot);
}
.feld-fehler:empty{display:none}
.feld.is-fehler input,.feld.is-fehler textarea{
  border-color:var(--rot);border-bottom-color:var(--rot);
}

/* Kästchen und Punkte: gezeichnet wie auf dem Papierbogen, nicht als
   Systemsteuerelement. */
.wahl{
  display:grid;grid-template-columns:1.15rem minmax(0,1fr);
  gap:.2rem .7rem;align-items:start;
  cursor:pointer;padding:.2rem 0;
}
.wahl input{
  appearance:none;-webkit-appearance:none;
  width:1.15rem;height:1.15rem;margin:.16rem 0 0;
  background:var(--paper);border:1.5px solid var(--ink-2);
  border-radius:0;cursor:pointer;
  display:grid;place-items:center;
  transition:border-color .18s ease,background-color .18s ease;
}
.wahl input[type=radio]{border-radius:50%}
.wahl input:hover{border-color:var(--ink)}
.wahl input:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
/* Der Haken wird gezeichnet, nicht eingeblendet. */
.wahl input[type=checkbox]::after{
  content:"";width:.62rem;height:.34rem;
  border-left:2px solid var(--on-dark);border-bottom:2px solid var(--on-dark);
  transform:rotate(-45deg) translate(.04rem,-.06rem) scale(.4);
  opacity:0;transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.wahl input[type=checkbox]:checked{background:var(--blau);border-color:var(--blau)}
.wahl input[type=checkbox]:checked::after{opacity:1;transform:rotate(-45deg) translate(.04rem,-.06rem) scale(1)}
.wahl input[type=radio]::after{
  content:"";width:.52rem;height:.52rem;border-radius:50%;
  background:var(--blau);transform:scale(.3);opacity:0;
  transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.wahl input[type=radio]:checked{border-color:var(--blau)}
.wahl input[type=radio]:checked::after{opacity:1;transform:scale(1)}
.wahl span{font-size:.95rem;line-height:1.4}
.wahl small{
  display:block;font-family:var(--mono);font-size:.76rem;color:var(--ink-3);
  margin-top:.12rem;
}
.wahl-reihe{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.wahl-reihe .wahl{grid-template-columns:1.15rem auto}

/* Auf Touch-Geräten ist das Label die Trefferfläche, nicht das
   Kästchen. Bei langen Erklärungen ist sie ohnehin gross, bei kurzen
   Auswahlknöpfen wie "Ja" oder "Nein" zu klein. Gebunden an die
   Zeigeart, nicht an die Breite: ein Tablet hat dasselbe Problem. */
@media (pointer:coarse){
  /* Zeilenhöhe des Labels rund 21 px, dazu zweimal 0,65rem Innenabstand
     ergibt die geforderten gut 40 px. */
  .wahl{padding:.65rem 0}
  .wahl-reihe{gap:.1rem 1.5rem}
  /* Der Knopf am Termin klickt nicht selbst (das Blatt tut es), aber die
     Leute zielen trotzdem auf ihn. */
  .termin-cta .btn{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .wahl input,.wahl input::after{transition:none}
}

/* ---------- Erklärungen ----------
   Auf dem Papier sind es drei getrennte Unterschriften. Online bleiben
   es drei getrennte Kästchen: die Fotofreigabe darf keine Bedingung
   für die Teilnahme sein, also wird sie nie mit der Haftpflicht
   zusammengelegt. */
.erklaerungen{display:grid;gap:1.1rem}
.erklaerung{
  padding:.9rem 1rem;
  border:1px solid var(--hair);background:var(--paper);
}
.erklaerung.is-freiwillig{border-style:dashed}
.erklaerung .wahl span{font-size:.94rem}
.erklaerung-kopf{
  margin:0 0 .5rem;
  font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
}
/* Ohne Trenner las sich die Zeile als "Haftpflicht Pflicht". */
.erklaerung-kopf em{font-style:normal;color:var(--rot)}
.erklaerung-kopf em::before{content:"· ";color:var(--ink-3)}
.erklaerung .feld-fehler{margin-top:.4rem;padding-left:1.85rem}

/* ---------- Bestaetigung ---------- */
.quittung{
  grid-column:1 / -1;
  border:1.5px solid var(--ink);background:var(--paper-2);
  padding:clamp(1.2rem,2.4vw,2rem);
}
.quittung[hidden]{display:none}
.quittung-kopf{
  display:inline-block;margin:0 0 1.1rem;
  border:2px solid var(--rot);color:var(--rot);
  padding:.24rem .8rem;
  font-family:var(--mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em;
  transform:rotate(-1.4deg);
}
.quittung h3{
  font-weight:700;
  font-size:clamp(1.4rem,1.2rem + .9vw,2rem);line-height:1.12;
  letter-spacing:-.014em;margin:0 0 .7rem;
}
.quittung-text{
  margin:0 0 1.2rem;max-width:56ch;color:var(--ink-2);
}
.quittung pre{
  margin:0 0 1.2rem;padding:1rem;
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--mono);font-size:.82rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;
  max-height:22rem;overflow:auto;
}
.quittung-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}


/* Feldpaare brechen auf schmalen Schirmen untereinander. */
@media (max-width:760px){
  .feld-satz{grid-template-columns:1fr}
}

/* ---------- Kontakt ---------- */
.kontakt{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);
  row-gap:clamp(1.8rem,4vh,2.8rem);
  margin-bottom:clamp(2.2rem,5vh,3.6rem);
}
.kontakt-ruf{grid-column:1 / 6}
.kontakt-label{
  margin:0 0 .5rem;font-family:var(--mono);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);
}
.fon{
  display:inline-block;
  font-family:var(--sign);font-weight:400;
  font-size:clamp(1.75rem,1rem + 2.7vw,3.4rem);
  line-height:1.06;letter-spacing:-.004em;margin-bottom:.9rem;
  background-size:0 2px;
}
.fon:hover{background-size:100% 2px}
.kontakt-name{font-weight:600;margin-bottom:.15rem}

/* Emailleschild mit der Anschrift, wie am Hoftor. */
.tor-schild{
  grid-column:6 / 9;align-self:start;
  position:relative;
  background:var(--blau);color:var(--on-dark);
  padding:clamp(1rem,1.8vw,1.4rem) clamp(1.1rem,2vw,1.5rem);
  transform:rotate(-.6deg);
  box-shadow:0 14px 22px -20px rgba(31,30,26,.85);
  background-image:
    radial-gradient(circle at 10px 10px,rgba(242,239,228,.5) 0 1.6px,transparent 1.8px),
    radial-gradient(circle at calc(100% - 10px) 10px,rgba(242,239,228,.5) 0 1.6px,transparent 1.8px),
    radial-gradient(circle at 10px calc(100% - 10px),rgba(242,239,228,.5) 0 1.6px,transparent 1.8px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),rgba(242,239,228,.5) 0 1.6px,transparent 1.8px);
}
.tor-schild::before{
  content:"";position:absolute;inset:6px;pointer-events:none;
  border:1px solid rgba(242,239,228,.32);border-radius:1px;
}
.tor-name{
  margin:0 0 .5rem;font-family:var(--sign);font-weight:400;
  font-size:.92rem;text-transform:uppercase;letter-spacing:.045em;line-height:1.24;
}
.tor-adresse{margin:0;font-family:var(--mono);font-size:.9rem;line-height:1.5}
.tor-fuss{margin:.9rem 0 0;font-family:var(--mono);font-size:.8rem}
.tor-fuss a{color:rgba(242,239,228,.92)}
.tor-fuss a:hover{color:#fff}

.kontakt-spalten{grid-column:9 / 13;display:grid;gap:1.6rem;align-self:start}
.kontakt-spalten h3{
  font-family:var(--mono);font-weight:400;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);
  margin-bottom:.6rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.kontakt-spalten p{font-size:.95rem}

/* ---------- Kolophon ---------- */
.kolophon{
  position:relative;z-index:1;
  padding-block:clamp(1.6rem,4vh,2.6rem) calc(clamp(2rem,5vh,3.2rem) + var(--safe-b));
}
.kolophon > *{grid-column:1 / -1}
.kolophon-satz{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3rem);margin-top:clamp(1.4rem,3vh,2.2rem);
}
.kolophon h2{
  font-weight:400;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--rot);
  margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.kolophon p{font-size:.88rem;color:var(--ink-2)}
.quellen{
  margin:0;padding-left:1.1rem;font-size:.78rem;color:var(--ink-3);
  display:grid;gap:.3rem;
}
.kolophon-fuss{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  margin:clamp(1.8rem,4vh,2.6rem) 0 0;padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-3);
}
.kolophon-fuss span:first-child{max-width:62ch}

/* ---------- Schmalere Schirme ---------- */
@media (max-width:1100px){
  .kap-titel{grid-column:1 / -1}
  .reportage{grid-column:1 / 8}
  .kartei{grid-column:8 / 13}
  .aushang{grid-column:1 / -1}
}
@media (max-width:940px){
  .antrag-schritte-frei{grid-template-columns:1fr;gap:1rem}
  .band-bild,.band-zitat,.band-flip .band-bild,.band-flip .band-zitat{
    grid-column:1 / -1;grid-row:auto;
  }
  .band-bild{aspect-ratio:16/9}
  .kontakt-ruf,.tor-schild,.kontakt-spalten{grid-column:1 / -1}
  .tor-schild{max-width:24rem}
  .kontakt-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
}
@media (max-width:820px){
  .reportage{grid-column:1 / -1;columns:1}
  .kartei{grid-column:1 / -1;max-width:26rem;transform:rotate(-.5deg)}
  .kap-lead{grid-column:1 / -1}
  .kolophon-satz{grid-template-columns:1fr}
  /* Einspaltiges Verzeichnis: das Vereinslogo steht als letzte Zeile links
     und schließt die Titelseite ab. */
  .inhaltsleiste{grid-template-columns:1fr}
  .kopf-logo{
    grid-column:1;
    justify-self:start;margin:1rem 0 .2rem;
    width:118px;
  }
}
@media (max-width:680px){
  .aushang-liste li{grid-template-columns:1fr;gap:.7rem}
  .aushang-datum{text-align:left;max-width:11rem}
  /* Das Plakat stapelt: Bild oben, Text darunter. Der Rand wandert dabei
     von rechts nach unten, sonst schneidet er quer durchs Blatt. */
  .aushang-liste li.termin{grid-template-columns:1fr;gap:0}
  /* Einspaltig gibt es keine Nachbarspalte zum Füllen, also wieder ein
     festes Seitenverhältnis. */
  .termin-bild{aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .kontakt-spalten{grid-template-columns:1fr}
}
@media (max-width:700px){
  /* Sonst schiebt der Ortszusatz die Anruf-Schaltfläche aus der Leiste. */
  .brand-place{display:none}
}
@media (max-width:560px){
  :root{--bar:56px}
  /* Die Mono-Kleinschrift der Seite ist auf dem Handy sonst zu klein. */
  .kopf-zeile,.kopf-sub,.schild-fuss,.kartei-kopf,.kartei-satz dt,
  .kolumne,.aushang-kopf,.bogen-kopf,.eck-kopf{font-size:.82rem}
  .platte figcaption,.ausschnitt figcaption,.band-zitat cite{font-size:.82rem}
  .brand-mark{width:30px}
  /* Daumengerechte Trefferflaechen: Marke und die freistehenden Verweise. */
  .brand{min-height:44px}
  .kontakt-spalten p a,.tor-fuss a,.aushang-fuss a,
  .kontakt-ruf a,.wege-ruf a,.kolophon-satz a{padding-block:.35rem}
  .kap{padding-block:clamp(2.4rem,6vh,3.6rem)}
  .marke{font-size:clamp(3rem,19vw,5.4rem);line-height:.94;white-space:normal}
  .marke-teil{display:block}
  .kopf-logo{margin:1.4rem 0 .4rem;width:132px}
  .kopf-zeile{gap:.1rem;flex-direction:column}
  .kopf-mitte{display:none}
  .platte-bild{aspect-ratio:4/5}
  .schild{position:static;max-width:none;margin-top:-2.2rem;margin-inline:.8rem}
  .aufmacher-cta{margin-left:0}
  .aufmacher-cta .btn{flex:1 1 100%}
  .ausschnitt-rahmen,.ausschnitt-kurz .ausschnitt-rahmen{aspect-ratio:4/3}
  .antrag-cta .btn{flex:1 1 100%}
  .antrag-schritte-frei{grid-template-columns:1fr;gap:1rem}
}

/* Sehr schmale Geraete (iPhone SE, Galaxy Fold zugeklappt): Marke, Menue-
   Schalter und Anrufen-Knopf passten zusammen nicht in 320 px, der Knopf
   wurde rechts abgeschnitten. Enger setzen statt etwas wegzulassen. */
@media (max-width:380px){
  .topbar{padding:0 .7rem;gap:.55rem}
  .brand{gap:.35rem}
  /* Auf dem Turnierblatt heisst der Knopf "Jetzt nennen" und ist damit
     breiter als das "Anrufen" der Startseite - hier die Kurzform. */
  .cta-lang{display:none}
  .cta-kurz{display:inline}
}

/* ---------- Einblenden ---------- */
/* Ohne JS bleibt alles sichtbar; die Klasse setzt erst das Skript. */
.reveal{opacity:0}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .btn,a{transition:none}
}

/* ---------- Drucken ----------
   Nennungsbogen und Aufnahmeantrag müssen sich ausdrucken lassen:
   viele Vereinsmitglieder bringen sie lieber ausgefüllt mit. */
@media print{
  html,body{background:#fff}
  .grain,.topbar,.summe,.pferd-weg,.pferd-mehr,.kopf-rueck,
  .aufmacher,.band,.quittung-cta,.antrag-cta,.inhaltsleiste,
  .ausschnitt,.reportage,.kartei{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .kap{padding-block:1rem;break-inside:avoid}
  .bogen,.pruef,.eckdaten,.pferd,.quittung,.erklaerung{break-inside:avoid}
  .bogen,.pruef,.eckdaten,.pferd{background:#fff}
  a{background-image:none}
  .marke-fest{font-size:2.4rem}
}