/* =========================================================
   Reiter- und Fahrerfest — Ausschreibung und Nennung
   Ergänzung zu style.css, nur auf turnier.html geladen.

   Die Nennung ist als Warenkorb gebaut, aber mit den Gegenständen des
   Vereins: die Prüfungen sind die Artikel, jedes Pferd ist eine
   Position, die Summenleiste am unteren Rand ist ein Emailleschild und
   kein Systembalken. Keine neue Farbe, keine neue Schrift.

   Kein Blendmodus, kein blur, kein backdrop-filter — dieselbe Regel
   wie auf der Startseite, damit die Seite auf jedem Gerät flüssig
   scrollt.
   ========================================================= */

/* ---------- Zeitungskopf der Unterseite ----------
   "Pferdefreunde" ist im Hauptstylesheet auf 8,02em Wortbreite geeicht.
   Hier stehen zwei kürzere Zeilen, also braucht die Marke eine eigene
   Rechnung: die längste Zeile ist "Fahrerfest" mit gemessenen 6,4em.
   Satzspiegel = 0,9 x Fensterbreite, gedeckelt bei 1296 px. Bewusst
   kleiner als auf der Titelseite gesetzt: das hier ist Seite zwei des
   Hefts, nicht der Kopf des Blattes. */
.marke-fest{
  font-size:clamp(2.5rem,8.6vw,7.6rem);
  line-height:.96;
  white-space:normal;
}
.marke-fest .marke-teil{display:block}

.kopf-rueck{
  grid-column:1 / -1;
  margin:0 0 .7rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;
  color:var(--ink-2);
}
.kopf-rueck a{background-size:0 1px;background-position:0 calc(100% - 1px)}
.kopf-rueck a:hover{background-size:100% 1px}

/* ---------- Eckdaten: gestempelter Aushang ----------
   Dieselbe Anmutung wie der Termin-Aushang der Startseite, aber
   zweispaltig, weil hier Fristen und Bedingungen nebeneinander
   gehören. */
.eckdaten{
  grid-column:1 / -1;
  background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(1.1rem,2.2vw,1.9rem);
}
.eck-satz{
  margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2.2rem);
}
.eck-satz > div{
  min-width:0;
  padding-top:.7rem;border-top:2px solid var(--ink);
}
.eck-satz dt{
  margin:0 0 .35rem;
  font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
}
.eck-satz dd{
  margin:0;font-weight:700;
  font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);line-height:1.24;
  letter-spacing:-.008em;
}
.eck-satz dd small{
  display:block;margin-top:.3rem;
  font-family:var(--mono);font-weight:400;font-size:.78rem;
  letter-spacing:.02em;color:var(--ink-3);
}
.eck-fuss{
  margin:clamp(1.2rem,2.6vh,1.8rem) 0 0;padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.94rem;color:var(--ink-2);
}

/* ---------- Prüfungen ----------
   Die Artikelliste, jede mit Startnummernschild. Vier der fünf tragen
   ein Foto genau ihrer Prüfung vom Fest des Vorjahres. Der Zweispänner
   bleibt bewusst ohne: dafür liegt kein Motiv vor, und ein Bild vom
   Einspänner wäre an dieser Stelle schlicht falsch. */
.pruef-satz{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.4vw,2rem);
}
/* Alle Karten gleich breit. Die erste lief früher über die ganze
   Breite, weil sie die meiste Bedingung trägt; seit sie ein Foto hat,
   erschlägt das Bild in voller Breite die Karte. Die fünfte steht
   allein in ihrer Zeile, was passt: IV b ist der Anhang zu IV a. */

.pruef{
  position:relative;min-width:0;
  background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(1rem,1.9vw,1.5rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,1.8vw,1.4rem);row-gap:.2rem;
  align-content:start;
}
/* Startnummernschild: dasselbe Emailleblau wie an den Boxentüren,
   mit den vier Schraubpunkten und der eingelegten Linie. */
.pruef-nr{
  grid-row:1 / span 2;align-self:start;
  position:relative;
  display:grid;place-items:center;
  min-width:3.4rem;padding:.55rem .6rem;
  background:var(--blau);color:var(--on-dark);
  font-family:var(--sign);font-weight:400;font-size:1.05rem;
  letter-spacing:.03em;line-height:1;
  box-shadow:0 12px 20px -18px rgba(31,30,26,.9);
  background-image:
    radial-gradient(circle at 7px 7px,rgba(242,239,228,.5) 0 1.4px,transparent 1.6px),
    radial-gradient(circle at calc(100% - 7px) 7px,rgba(242,239,228,.5) 0 1.4px,transparent 1.6px),
    radial-gradient(circle at 7px calc(100% - 7px),rgba(242,239,228,.5) 0 1.4px,transparent 1.6px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),rgba(242,239,228,.5) 0 1.4px,transparent 1.6px);
}
.pruef-nr::before{
  content:"";position:absolute;inset:4px;pointer-events:none;
  border:1px solid rgba(242,239,228,.3);
}
.pruef h3{
  font-weight:700;
  font-size:clamp(1.14rem,1.05rem + .45vw,1.5rem);
  line-height:1.14;letter-spacing:-.014em;
  margin:0 0 .45rem;
}
/* Das Foto läuft über die ganze Kartenbreite, unter Schild und Titel:
   es zeigt die Prüfung, es ist nicht ihr Abzeichen. */
.pruef-bild{
  grid-column:1 / -1;
  margin:.2rem 0 .9rem;overflow:hidden;
  aspect-ratio:3/2;border:1px solid var(--hair);
}
.pruef-bild img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.pruef:hover .pruef-bild img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .pruef-bild img{transition:none} }

.pruef-meta{
  grid-column:2;
  display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;
  margin:0 0 .7rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;
  color:var(--ink-2);
}
.pruef-meta b{font-weight:400;color:var(--rot)}
.pruef-text{grid-column:1 / -1;margin:.5rem 0 0}
.pruef-text p{font-size:.95rem;color:var(--ink-2);margin-bottom:.5rem}
.pruef-text p:last-child{margin-bottom:0}
/* Die Teilung ist die Angabe, die beim Nennen zählt, also steht sie
   nicht im Fliesstext, sondern als eigene Zeile am Fuss. */
.pruef-teilung{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:.3rem .8rem;
  margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.78rem;color:var(--ink-3);
}
.pruef-teilung span{
  border:1px solid var(--line);padding:.14rem .5rem;
}

/* Ehrungen laufen unter allen Prüfungen durch: sie gelten für alle
   gleich, also wäre eine Wiederholung je Karte nur Rauschen. */
.ehrung{
  grid-column:1 / -1;
  margin:clamp(1.4rem,3vh,2.2rem) 0 0;padding-top:1rem;
  border-top:2.5px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  font-size:.92rem;color:var(--ink-2);
}
.ehrung b{font-weight:700;color:var(--ink)}

/* ---------- Positionen: ein Pferd, eine Karteikarte ----------
   Auf dem Papierbogen steht pro Zeile ein Pferd und eine Prüfung.
   Hier steht pro Karte ein Pferd, und die Prüfungen werden darauf
   angekreuzt. Damit ist die Regel "jedes Pferd pro Prüfung nur
   einmal" baulich nicht mehr verletzbar. */
.pferde-liste{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.pferd{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  padding:clamp(.9rem,1.8vw,1.35rem);
  /* Linierung und roter Rand wie auf der Karteikarte im Verein. */
  background-image:
    linear-gradient(to right,transparent 0 1.5rem,var(--rot-weich) 1.5rem 1.55rem,transparent 1.55rem);
  background-repeat:no-repeat;
  padding-left:clamp(2.1rem,3.4vw,2.6rem);
}
.pferd-kopf{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  margin:0 0 .9rem;
}
.pferd-zaehler{
  font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--rot);
}
.pferd-weg{
  margin-left:auto;
  background:none;border:0;padding:.25rem 0;cursor:pointer;
  font:inherit;font-family:var(--mono);font-size:.78rem;
  color:var(--ink-3);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;
  transition:color .2s ease;
}
.pferd-weg:hover{color:var(--rot)}
.pferd-weg:focus-visible{outline:2px solid var(--blau);outline-offset:3px}
.pferd-weg[hidden]{display:none}

.pferd-pruefungen{
  border:0;margin:1rem 0 0;padding:0;min-width:0;
}
.pferd-pruefungen .feld-legende{margin-bottom:.5rem}
.pruef-wahl{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.2rem 1.2rem;
}
/* Der Preis steht rechts in der Zeile, wie auf einem Bestellzettel. */
.pruef-wahl .wahl{grid-template-columns:1.15rem minmax(0,1fr) auto;align-items:baseline}
.pruef-wahl .wahl input{grid-row:1}
.pruef-wahl .preis{
  font-family:var(--mono);font-size:.84rem;color:var(--ink-2);
  white-space:nowrap;
}
.pferd-summe{
  display:flex;align-items:baseline;gap:.6rem;
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.84rem;color:var(--ink-2);
}
.pferd-summe i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.3em)}
.pferd-summe b{font-weight:400;color:var(--ink);font-size:.95rem}

.pferd-mehr{
  margin-top:clamp(1rem,2vw,1.4rem);
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
}
.pferd-mehr .hint{margin:0}

/* ---------- Zahlung ---------- */
.zahlwege{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);
}
.zahlweg{
  min-width:0;padding:1rem 1.1rem;
  border:1px solid var(--line);background:var(--paper);
}
.zahlweg h4{
  margin:0 0 .4rem;font-weight:700;font-size:1.06rem;letter-spacing:-.008em;
}
.zahlweg p{font-size:.92rem;color:var(--ink-2);margin-bottom:.7rem}
.zahlweg .mono{font-size:.86rem}

/* ---------- Summenschild ----------
   Der Warenkorb. Ein Emailleschild am unteren Rand, kein Systembalken.
   Es hat immer Papier im Rücken und liegt nie durchsichtig über dem
   Inhalt — dieselbe Regel wie bei der schmalen Leiste oben. */
.summe{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:0 var(--pad) calc(.7rem + var(--safe-b));
  pointer-events:none;
  transform:translateY(110%);
  transition:transform .34s cubic-bezier(.16,1,.3,1);
}
.summe.is-da{transform:none}
.summe-schild{
  pointer-events:auto;
  max-width:var(--maxw);margin-inline:auto;
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem clamp(1rem,2.4vw,2rem);
  background:var(--blau);color:var(--on-dark);
  padding:.85rem clamp(.9rem,1.8vw,1.4rem);
  box-shadow:0 18px 30px -26px rgba(31,30,26,.95);
  background-image:
    radial-gradient(circle at 9px 9px,rgba(242,239,228,.5) 0 1.5px,transparent 1.7px),
    radial-gradient(circle at calc(100% - 9px) 9px,rgba(242,239,228,.5) 0 1.5px,transparent 1.7px),
    radial-gradient(circle at 9px calc(100% - 9px),rgba(242,239,228,.5) 0 1.5px,transparent 1.7px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),rgba(242,239,228,.5) 0 1.5px,transparent 1.7px);
}
.summe-schild::before{
  content:"";position:absolute;inset:5px;pointer-events:none;
  border:1px solid rgba(242,239,228,.3);
}
.summe-text{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;
  min-width:0;
}
.summe-label{
  font-family:var(--mono);font-size:.74rem;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(242,239,228,.82);
}
.summe-wert{
  font-family:var(--sign);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);line-height:1;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.summe-zeile{
  font-family:var(--mono);font-size:.78rem;color:rgba(242,239,228,.82);
}
.summe-btn{margin-left:auto}
.summe .btn-hell{
  background:var(--on-dark);color:var(--blau-tief);
  border:1.5px solid var(--on-dark);
  box-shadow:inset 0 0 0 1px rgba(29,68,112,.18);
}
.summe .btn-hell:hover{background:#fff;border-color:#fff;color:var(--blau-tief)}

@media (prefers-reduced-motion:reduce){ .summe{transition:none} }

/* Das Summenschild liegt fest über dem Inhalt. Ohne Luft am Fuss
   verdeckt es genau die letzten Bedienelemente der Seite. */
body{padding-bottom:calc(6rem + var(--safe-b))}
@media (max-width:560px){
  body{padding-bottom:calc(6.5rem + var(--safe-b))}
  /* Wie auf der Vereinsseite: die Mono-Kleinschrift wird auf dem Handy
     eine Spur groesser, sonst ist sie kaum noch zu lesen. */
  .eck-kopf,.eck-satz dt,.eck-fuss,.pruef-meta,.pruef-teilung span,
  .wege-rest h3,.feld small,.hint,.wahl small{font-size:.82rem}
}

/* ---------- Anfahrt und Kontakt ---------- */
.wege{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gut);row-gap:clamp(1.6rem,3.6vh,2.4rem);
}
.wege-ruf{grid-column:1 / 6}
.wege-schild{grid-column:6 / 10;align-self:start}
.wege-rest{grid-column:10 / 13;align-self:start}
.wege-rest 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);
}
.wege-rest p{font-size:.95rem}

/* ---------- Schmalere Schirme ---------- */
@media (max-width:1100px){
  .wege-ruf{grid-column:1 / 7}
  .wege-schild{grid-column:7 / 13}
  .wege-rest{grid-column:1 / -1}
}
@media (max-width:940px){
  .eck-satz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pruef-satz{grid-template-columns:1fr}
  .zahlwege{grid-template-columns:1fr}
  .wege-ruf,.wege-schild,.wege-rest{grid-column:1 / -1}
  .wege-schild{max-width:24rem}
}
@media (max-width:760px){
  .pruef-wahl{grid-template-columns:1fr}
}
@media (max-width:560px){
  .marke-fest{font-size:clamp(2.3rem,13vw,4.4rem)}
  /* Sechs Blöcke untereinander wurden auf dem Handy zu einer langen
     Rutschbahn. Enger gesetzt, ohne an der Lesbarkeit zu sparen. */
  .eck-satz{grid-template-columns:1fr;gap:.9rem}
  .eck-satz > div{padding-top:.55rem}
  .eck-satz dt{margin-bottom:.25rem}
  .eck-satz dd{font-size:1.06rem;line-height:1.2}
  .eck-satz dd small{margin-top:.2rem;line-height:1.4}
  .pruef{grid-template-columns:1fr}
  .pruef-nr{grid-row:auto;justify-self:start;margin-bottom:.7rem}
  .pruef-meta{grid-column:1}
  .pferd{padding-left:1.1rem;background-image:none}
  /* Das Schild ist ein Warenkorb, kein Bildschirmviertel: ein
     vollbreiter Knopf mit eigener Betragszeile verdeckt auf dem Handy
     die Bedienelemente darunter. Betrag und Knopf stehen deshalb
     nebeneinander, die Beschriftung entfällt — "15,00 €" neben einem
     Absenden-Knopf braucht kein Wort davor. */
  .summe{padding-bottom:calc(.5rem + var(--safe-b))}
  .summe-schild{gap:.4rem .7rem;padding:.6rem .75rem;align-items:center;flex-wrap:nowrap}
  .summe-label{display:none}
  /* Betrag und Startzahl stapeln sich links, der Knopf steht daneben.
     Nebeneinander in einer Zeile wird der Knopf in die nächste Zeile
     gedrückt und sitzt dort unausgewogen in der Ecke. */
  .summe-text{flex-direction:column;align-items:flex-start;gap:.05rem;min-width:0}
  .summe-wert{font-size:1.4rem}
  .summe-btn{margin-left:auto;flex:0 0 auto}
  .summe-btn .btn{padding:.45rem .9rem;min-height:42px}
  .quittung-cta .btn{flex:1 1 100%}
}