/* mycontest.org — Vertriebsseite FightReg
   Eigenstaendiges Marketing-Stylesheet. Bewusst NICHT das Design-System der
   Anwendung: eine Werbeseite hat andere Aufgaben als eine Arbeitsoberflaeche.
   Keine externen Schriften, keine externen Skripte. */

:root{
  --bg:#ffffff;
  --bg-alt:#f4f6f9;
  --bg-deep:#0f172a;
  --text:#16202e;
  --text-muted:#54637a;
  --text-on-deep:#e7edf6;
  --text-on-deep-muted:#9fb0c7;
  --accent:#d6432b;
  --accent-hover:#b8351f;
  --accent-soft:rgba(214,67,43,.10);
  --line:#dde3ec;
  --line-deep:rgba(255,255,255,.14);
  --card:#ffffff;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  /* Kantig, nicht rundlich. 14px war der Wert, den jede Vorlage hat; 6px
     traegt noch, ohne dass die Seite aussieht wie eine Vorlage. Kreise
     (50%) und der Telefonrahmen in den Bildern bleiben rund -- ein Telefon
     mit 6px Ecken ist kein Telefon mehr. */
  --radius:6px;
  --maxw:1120px;
  --win:#1f8a4c;
  --win-soft:rgba(31,138,76,.10);
  --dim:#7b8aa0;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101826;
    --bg-alt:#16202f;
    --bg-deep:#0a1120;
    --text:#e7edf6;
    --text-muted:#9fb0c7;
    --line:#22304a;
    --card:#16202f;
    --accent:#ff6a4d;
    --accent-hover:#ff8468;
    --accent-soft:rgba(255,106,77,.12);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --win:#3ecf7f;
    --win-soft:rgba(62,207,127,.12);
    --dim:#8798af;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
section{padding-block:clamp(56px,7vw,92px)}
section.alt{background:var(--bg-alt)}

h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:650}
h3{font-size:1.06rem;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:1.14rem;color:var(--text-muted);max-width:62ch}
.eyebrow{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.9em;
}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* Kopfleiste */
header.top{
  position:sticky;top:0;z-index:50;background:rgba(15,23,42,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line-deep);
}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text-on-deep);text-decoration:none;font-size:1.05rem;letter-spacing:-.01em}
.brand svg{flex:0 0 auto}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.top nav a{color:var(--text-on-deep-muted);text-decoration:none;font-size:.94rem}
.top nav a:hover{color:var(--text-on-deep)}
.top .btn-login{color:var(--text-on-deep);border:1px solid var(--line-deep);padding:8px 16px;border-radius:5px}
.top .btn-login:hover{background:rgba(255,255,255,.08)}
@media (max-width:820px){.top nav a.hide-sm{display:none}}

/* Held */
.hero{background:linear-gradient(170deg,#0f172a 0%,#152236 60%,#1a2436 100%);background-color:#0f172a;color:var(--text-on-deep);padding-block:clamp(64px,9vw,120px)}
.hero h1{max-width:20ch}
.hero .lead{color:var(--text-on-deep-muted);font-size:1.2rem;max-width:58ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:18px;font-size:.9rem;color:var(--text-on-deep-muted)}
.hero-facts{display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line-deep)}
.fact b{display:block;font-size:1.7rem;font-weight:700;letter-spacing:-.02em}
.fact span{font-size:.88rem;color:var(--text-on-deep-muted)}

.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:5px;
  font-size:1rem;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-outline{border-color:var(--line);color:var(--text);background:var(--card)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}

/* Problem */
.problems{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:38px}
.problem{border-left:3px solid var(--accent);padding:2px 0 2px 20px}
.problem h3{margin-bottom:.35em}
.problem p{color:var(--text-muted);margin:0;font-size:.98rem}

/* Ablauf */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:44px;counter-reset:step}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);position:relative}
.step::before{
  counter-increment:step;content:counter(step);
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:5px;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.95rem;margin-bottom:16px;
}
.step h3{margin-bottom:.6em}
.step ul{margin:0;padding-left:18px;color:var(--text-muted);font-size:.96rem}
.step li{margin-bottom:.4em}

/* Zielgruppen */
.audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;margin-top:40px}
.aud{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.aud .ico{width:40px;height:40px;border-radius:5px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.aud p{color:var(--text-muted);font-size:.96rem;margin-bottom:0}

/* Funktionen */
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px;margin-top:42px}
.group h3{display:flex;align-items:center;gap:10px;color:var(--text);margin-bottom:.7em}
.group h3 .ico{color:var(--accent);display:inline-flex}
.group ul{margin:0;padding-left:20px;color:var(--text-muted);font-size:.97rem}
.group li{margin-bottom:.45em}

/* Beweise */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-top:38px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow)}
.pcard b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.pcard span{font-size:.9rem;color:var(--text-muted)}

/* Preis */
.price{max-width:760px;margin:38px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
.price ul{list-style:none;margin:0 0 26px;padding:0}
.price li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.price li:last-child{border-bottom:0}
.price li b{flex:0 0 auto;min-width:9.5em}
.price li span{color:var(--text-muted);font-size:.97rem}

/* FAQ */
.faq{max-width:820px;margin:38px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-weight:700;font-size:1.25rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::before{content:"\2013"}
.faq p{color:var(--text-muted);margin:0 0 18px;padding-left:24px;font-size:.98rem}

/* Kontakt */
.contact{background:var(--bg-deep);color:var(--text-on-deep)}
.contact h2{color:var(--text-on-deep)}
.contact .lead{color:var(--text-on-deep-muted)}
.form{max-width:620px;margin:36px auto 0;display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.field label{display:block;font-size:.88rem;margin-bottom:7px;color:var(--text-on-deep-muted)}
.field input,.field textarea{
  width:100%;padding:12px 14px;border-radius:5px;border:1px solid var(--line-deep);
  background:rgba(255,255,255,.06);color:var(--text-on-deep);font:inherit;font-size:.98rem;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-content:center}
.form-note{font-size:.85rem;color:var(--text-on-deep-muted);text-align:center;margin:0}

/* Einwilligung und Sicherheitsfrage. Beide stehen im dunklen Kontaktabschnitt,
   deshalb die Farben auf --text-on-deep und nicht auf --text. */
.check{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--text-on-deep-muted);text-align:left;cursor:pointer}
.check input{margin:2px 0 0;width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.check a{color:var(--text-on-deep)}
.check:focus-within{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.rechnen input{max-width:170px}
.meldung{margin:0;padding:12px 15px;border-radius:5px;font-size:.93rem;text-align:left}
.meldung.gut{background:rgba(62,207,127,.12);border:1px solid rgba(62,207,127,.45);color:var(--text-on-deep)}
.meldung.schlecht{background:var(--accent-soft);border:1px solid var(--accent);color:var(--text-on-deep)}

/* Fuss */
footer.bottom{background:var(--bg-deep);color:var(--text-on-deep-muted);border-top:1px solid var(--line-deep);padding-block:36px;font-size:.92rem}
footer.bottom .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer.bottom a{color:var(--text-on-deep-muted);text-decoration:none}
footer.bottom a:hover{color:var(--text-on-deep);text-decoration:underline}
footer.bottom .sp{margin-left:auto}

/* Inhaltsseiten (Impressum, Datenschutz) */
.doc{max-width:760px;margin:0 auto}
.doc h2{margin-top:1.6em}
.doc .todo{background:var(--accent-soft);border-left:3px solid var(--accent);padding:14px 18px;border-radius:0 4px 4px 0;font-size:.95rem}

/* Pakete — drei Stufen im Preisabschnitt. Die mittlere ist hervorgehoben,
   weil sie in der Beratung fast immer die richtige ist. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:40px 0 34px;text-align:left}
.plan{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.plan .tag{
  display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:4px 9px;border-radius:6px;margin-bottom:14px;
}
.plan h3{font-size:1.25rem;margin-bottom:.3em}
.plan .who{color:var(--text-muted);font-size:.95rem;margin-bottom:18px}
.plan ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.plan li{position:relative;padding:7px 0 7px 26px;color:var(--text)}
.plan li::before{
  content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.plan li.plus{padding-left:0;color:var(--text-muted);font-weight:600;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--line);
  margin-top:8px;padding-top:16px}
.plan li.plus::before{display:none}

/* ── Vorher/Nachher ────────────────────────────────────────────────────────
   Der Abschnitt steht dunkel zwischen zwei hellen: er ist der Umschlagpunkt
   von "so ist es" zu "so waere es", und der Bruch im Hintergrund macht das
   sichtbar, bevor ein Wort gelesen ist. */
section.deep{background:var(--bg-deep);color:var(--text-on-deep)}
section.deep h2{color:var(--text-on-deep)}
section.deep .eyebrow{color:var(--accent)}
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:34px}
.vs-col{
  background:rgba(255,255,255,.04);border:1px solid var(--line-deep);
  border-radius:var(--radius);padding:24px 22px;
}
.vs-col h3{
  color:var(--text-on-deep);margin-bottom:16px;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.vs-col ul{list-style:none;margin:0;padding:0}
.vs-col li{position:relative;padding:9px 0 9px 30px;font-size:.98rem;border-top:1px solid var(--line-deep)}
.vs-col li:first-child{border-top:0}
.vs-col.before{color:var(--text-on-deep-muted)}
.vs-col.before li::before,
.vs-col.before li::after{
  content:"";position:absolute;left:10px;top:17px;width:2px;height:13px;
  background:var(--text-on-deep-muted);border-radius:1px;
}
.vs-col.before li::before{transform:rotate(45deg)}
.vs-col.before li::after{transform:rotate(-45deg)}
.vs-col.after{border-color:rgba(62,207,127,.34);background:rgba(62,207,127,.07);color:var(--text-on-deep)}
.vs-col.after h3{color:var(--win)}
.vs-col.after li{border-top-color:rgba(62,207,127,.18)}
.vs-col.after li::before{
  content:"";position:absolute;left:8px;top:16px;width:12px;height:6px;
  border-left:2px solid var(--win);border-bottom:2px solid var(--win);
  transform:rotate(-45deg);
}

/* ── Turnierbaum ───────────────────────────────────────────────────────────
   Erzeugt von tools/turnierbaum.py. Jede Farbe kommt aus einer Variablen,
   damit derselbe Baum das helle und das dunkle Thema traegt. */
.bracket{margin:38px 0 18px}
.bk{width:100%;height:auto;display:block;font-family:inherit}
.bk-schmal{display:none}
.bk-flaeche{fill:var(--card)}
.bk-flanke{fill:var(--bg-alt)}
.bk-kennung{
  fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-anchor:middle;dominant-baseline:middle;
}
.bk-rahmen{fill:none;stroke:var(--line);stroke-width:1.4}
.bk-rahmen.gewonnen{stroke:var(--win)}
.bk-rahmen.finale{stroke:var(--accent);stroke-width:2}
.bk-name{fill:var(--text);font-size:14px}
.bk-name.sieger{fill:var(--win);font-weight:650}
.bk-frei{fill:var(--dim);font-size:13px;font-style:italic}
.bk-trenn{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.bk-linie{fill:none;stroke:var(--win);stroke-width:1.6}
.bk-pille{
  fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-anchor:middle;
}
.bk-platz{fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.14em}
.bk-urk{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.6}
.bk-urk-titel{
  fill:var(--accent);font-size:12px;font-weight:700;letter-spacing:.12em;text-anchor:middle;
}
.bk-urk-zeile{fill:var(--text);font-size:14px;text-anchor:middle}
.bracket-note{font-size:.9rem;color:var(--text-muted);max-width:70ch;margin:0}
@media (max-width:760px){
  .bk-breit{display:none}
  .bk-schmal{display:block}
}

/* ── Live-Kachel und Assistent ─────────────────────────────────────────────
   Zwei Haelften derselben Aussage: die linke zeigt den Stand, die rechte
   beantwortet die Frage, die man dem Stand nicht ansieht. */
.live{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px;margin-top:34px}
.live-card,.ki{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);
}
.live-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.live-head strong{font-size:1rem}
.live-head .dot{
  width:9px;height:9px;border-radius:50%;background:var(--win);flex:none;
  box-shadow:0 0 0 4px var(--win-soft);
}
.live-tag{
  margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);border:1px solid var(--line);border-radius:5px;padding:2px 7px;
}
.live-nums{display:flex;gap:26px;padding:16px 0;border-bottom:1px solid var(--line)}
.live-nums b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.live-nums span{font-size:.82rem;color:var(--text-muted)}
.live-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.live-row:last-child{border-bottom:0;padding-bottom:0}
.live-area{font-weight:650;flex:none;min-width:74px}
.live-bout{color:var(--text-muted);flex:1 1 auto}
.live-state{
  flex:none;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:5px;padding:3px 8px;
}
.live-state.running{color:var(--accent);background:var(--accent-soft)}
.live-state.next{color:var(--text-muted);background:var(--bg-alt);border:1px solid var(--line)}
.live-state.done{color:var(--win);background:var(--win-soft)}
.ki h3{font-size:1.1rem}
.ki-intro{color:var(--text-muted);font-size:.96rem}
.ki-dialog{margin:18px 0}
.ki-frage,.ki-antwort{margin:0 0 10px;padding:12px 15px;border-radius:6px;font-size:.96rem}
.ki-frage{background:var(--bg-alt);border:1px solid var(--line);border-bottom-right-radius:4px;margin-left:16%}
.ki-antwort{background:var(--accent-soft);border:1px solid var(--line);border-bottom-left-radius:4px;margin-right:10%}
.ki-note{font-size:.85rem;color:var(--text-muted);margin:0}

/* ── Hallenplan ────────────────────────────────────────────────────────────
   Erzeugt von tools/hallenplan.py, nachgebaut nach der Hallenplan-Seite der
   Anwendung. Die Objekte sind grau und tragen ihr Zeichen, nicht ihre Farbe:
   auf einem Plan bedeutet Farbe nichts, und ein rotes WC hiesse sonst
   "Gefahr". Bedeutung tragen hier nur zwei Dinge -- was laeuft (Signalfarbe)
   und was entschieden ist. */
.halle-zwei{margin:44px 0 .4em;font-size:1.25rem}
.halle-lead{color:var(--text-muted);max-width:68ch;margin:0 0 4px}
.hallenplan{margin:26px 0 16px}
.hplan{width:100%;height:auto;display:block;font-family:inherit}
.hplan-schmal{display:none}
.hpl-halle{fill:var(--bg);stroke:var(--line);stroke-width:1.4}
.hpl-mat{fill:var(--card);stroke:var(--line);stroke-width:1.4}
.hpl-mat-name{fill:var(--text);font-size:17px;font-weight:700;letter-spacing:-.01em}
.hpl-mat-linie{stroke:var(--line);stroke-width:1}
.hpl-zeit{fill:var(--text-muted);font-size:15px;font-weight:650}
.hpl-zeit.jetzt{fill:var(--text)}
.hpl-jetzt-pille{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.hpl-jetzt-text{fill:var(--accent);font-size:11px;font-weight:700;letter-spacing:.06em;text-anchor:middle}
.hpl-kat{fill:var(--text);font-size:15px}
.hpl-trenn{stroke:var(--line);stroke-width:1}
.hpl-geplant{fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.12em}
.hpl-folgt{fill:var(--text-muted);font-size:14px}
.hpl-obj{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.hpl-obj-text{fill:var(--text-muted);font-size:13px}
.hpl-obj-text.mitte{text-anchor:middle}
.hpl-zeichen{fill:none;stroke:var(--dim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hpl-sponsor{fill:var(--bg-alt);stroke:var(--line);stroke-width:1.4}
.hpl-sponsor-titel{fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.14em}
.hpl-logo{fill:var(--card);stroke:var(--line);stroke-width:1;stroke-dasharray:4 3}
.hpl-logo-text{fill:var(--dim);font-size:12px;text-anchor:middle}
.hpl-sponsor-text{fill:var(--text-muted);font-size:13px}
@media (max-width:760px){
  .hplan-breit{display:none}
  .hplan-schmal{display:block}
}

/* ── Wertungsbogen am Kampfrichtertisch ────────────────────────────────────
   Erzeugt von tools/wertungsbogen.py. Ein Geraet im Hochformat neben dem
   Text -- so sieht es am Tisch aus: der Hauptschiedsrichter tippt, die
   Punktegeber bleiben bei den Fahnen. */
.tisch{display:grid;grid-template-columns:340px 1fr;gap:38px;align-items:start;margin:34px 0 46px}
.tisch-bild{justify-self:center}
.tisch-text h3{font-size:1.25rem;margin-top:.2em}
.tisch-text p{color:var(--text-muted);max-width:60ch}
.tisch-text ul{list-style:none;margin:20px 0;padding:0;font-size:.97rem}
.tisch-text li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--line);color:var(--text-muted)}
.tisch-text li:first-child{border-top:0}
.tisch-text li strong{color:var(--text)}
.tisch-text li::before{
  content:"";position:absolute;left:2px;top:17px;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.tisch-fuss{font-size:.9rem}
@media (max-width:860px){
  .tisch{grid-template-columns:1fr;gap:26px}
}

.wbogen{width:340px;max-width:100%;height:auto;display:block;font-family:inherit}
.wb-geraet{fill:var(--bg-deep);stroke:var(--line);stroke-width:1.4}
.wb-lautsprecher{fill:rgba(255,255,255,.18)}
.wb-schirm{fill:var(--bg)}
.wb-kopf{fill:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.wb-punkt{stroke:var(--line);stroke-width:1}
.wb-gelb{fill:#e0b400}
.wb-blau{fill:#2563eb}
.wb-ecke{fill:var(--text);font-size:12px;font-weight:700;letter-spacing:.06em}
.wb-ecke.klein{font-size:11px}
.wb-name{fill:var(--text-muted);font-size:13px}
.wb-runde{fill:none;stroke:var(--line);stroke-width:1.2}
.wb-runde.fertig{fill:var(--bg-alt)}
.wb-runde.offen{stroke:var(--accent);stroke-width:1.6}
.wb-runde-titel{fill:var(--text);font-size:13px;font-weight:700}
.wb-fertig{fill:var(--win);font-size:10px;font-weight:700;letter-spacing:.08em;text-anchor:end}
.wb-zahlen{fill:var(--text-muted);font-size:11px}
.wb-fahnen-erg{fill:var(--text);font-size:12px;font-weight:650}
.wb-spalte{fill:var(--text-muted);font-size:10px;font-weight:700;letter-spacing:.08em}
.wb-knopf{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.wb-knopf-strich{stroke:var(--text-muted);stroke-width:1.6;stroke-linecap:round}
.wb-wert{fill:var(--text);font-size:14px;font-weight:700;text-anchor:middle}
.wb-trenn{stroke:var(--line);stroke-width:1}
.wb-fahne{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.wb-fahne.gesetzt{fill:rgba(224,180,0,.18);stroke:#e0b400;stroke-width:1.6}
.wb-fahne-text{fill:var(--text-muted);font-size:12px;text-anchor:middle}
.wb-fahne-text.gesetzt{fill:var(--text);font-weight:700}
.wb-aktion{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.wb-aktion-text{fill:var(--dim);font-size:12px;font-weight:650;text-anchor:middle}
.wb-grund{fill:var(--text-muted);font-size:11px;text-anchor:middle}

/* ── Urkunde ───────────────────────────────────────────────────────────────
   Erzeugt von tools/urkunde.py, nach der Vorlage „Klassisch" des
   Urkunden-Designers. Das SVG rechnet in Millimetern wie die Vorlage selbst;
   die Schriftgroessen sind ihre Punktwerte. */
.urkunde-block{margin-top:44px}
.urkunde-block .tisch-bild{order:2}
.urkunde{width:300px;max-width:100%;height:auto;display:block;font-family:inherit;box-shadow:var(--shadow)}
.urk-blatt{fill:#ffffff;stroke:var(--line);stroke-width:.3}
.urk-balken{fill:var(--accent)}
.urk-logo{fill:none;stroke:#d1d5db;stroke-width:.3;stroke-dasharray:1.5 1.2}
.urk-logo-text{fill:#9ca3af;font-size:3px;text-anchor:middle}
.urk-typ{fill:#9ca3af;text-anchor:middle;letter-spacing:.3px}
.urk-wettkampf{fill:var(--accent);text-anchor:middle}
.urk-datum,.urk-anlass{fill:#6b7280;text-anchor:middle}
.urk-anlass{fill:#9ca3af}
.urk-name{fill:#111827;text-anchor:middle}
.urk-verein{fill:#6b7280;text-anchor:middle}
.urk-kategorie{fill:var(--accent);text-anchor:middle}
.urk-platz{fill:#d4af37;text-anchor:middle}
.urk-qr-grund{fill:#ffffff}
.urk-qr{fill:#111827}
.urk-linie{stroke:#d1d5db;stroke-width:.3}
.urk-siglabel{fill:#9ca3af;font-size:2.5px;text-anchor:middle}
@media (max-width:860px){
  .urkunde-block .tisch-bild{order:0}
}

/* ── Die vier Stufen als Bild ──────────────────────────────────────────────
   Erzeugt von tools/phasen.py. Vier Andeutungen, keine Mockups: in dieser
   Groesse waeren Details unlesbar, und ein nachgezeichneter Bildschirm altert
   mit jedem Sprint. Auf dem Telefon faellt die Reihe weg -- vier Ansichten
   nebeneinander sind dort vier Briefmarken, und darunter steht ohnehin, was
   sie zeigen. */
.phasenbild{margin:30px 0 6px}
.phasen{width:100%;height:auto;display:block}
.ph-rahmen{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.ph-nr-grund{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}
.ph-nr{fill:var(--accent);font-size:13px;font-weight:700;text-anchor:middle;font-family:inherit}
.ph-linie{fill:var(--line)}
.ph-label{fill:var(--line);opacity:.65}
.ph-feld{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.ph-knopf{fill:var(--accent)}
.ph-trenn{stroke:var(--line);stroke-width:1}
.ph-haken{fill:none;stroke:var(--win);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ph-offen{fill:none;stroke:var(--dim);stroke-width:1.6;stroke-dasharray:2.5 2}
.ph-karte{fill:var(--bg-alt);stroke:var(--line);stroke-width:1}
.ph-startnr{fill:var(--text);font-size:21px;font-weight:700;font-family:inherit;letter-spacing:-.5px}
.ph-code{fill:var(--text)}
.ph-blatt{fill:#fff;stroke:var(--line);stroke-width:1}
.ph-blatt-balken{fill:var(--accent)}
.ph-blatt-zeile{fill:#d8dee8}
.ph-siegel{fill:rgba(212,175,55,.22);stroke:#d4af37;stroke-width:1.6}
.ph-band{fill:#d4af37}
@media (max-width:760px){ .phasenbild{display:none} }

/* ── Das Faltblatt im Rahmen ───────────────────────────────────────────────
   Eine eigene Seite im iframe, von derselben Adresse -- kein fremder Dienst,
   und die Google-Fonts-Zeilen sind beim Kopieren herausgenommen worden.
   loading="lazy": die Datei wiegt 670 kB, und wer nie bis hierher scrollt,
   soll sie nicht laden. */
.falt-rahmen{
  margin:34px 0 22px;border:1px solid var(--line-deep);border-radius:var(--radius);
  overflow:hidden;background:var(--bg);
}
/* Hoch genug, dass nichts scrollt UND nichts abgeschnitten wird -- das sind
   zwei Bedingungen, und die zweite ist die, die man vergisst. Mit
   overflow:hidden drueben faellt bei zu kleinem Rahmen die Bedienleiste
   unten heraus, und das ist schlimmer als ein Scrollbalken: das Faltblatt
   laesst sich dann nicht mehr auf- und zuziehen.
   Gemessen: 640 Punkte bei breitem Fenster, 627 bei 390 Punkten Breite --
   schmal braucht es also MEHR, nicht weniger, weil der Text oben umbricht. */
.falt-rahmen iframe{display:block;width:100%;height:660px;border:0;background:var(--bg)}
.falt-note{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0}
.falt-note span{font-size:.9rem;color:var(--text-on-deep-muted);max-width:52ch}
/* Auch der Hintergrund, nicht nur Rand und Schrift: .btn-outline bringt
   background:var(--card) mit, und das ist im dunklen Abschnitt weiss auf
   weiss -- der Knopf war da und trotzdem unlesbar. */
section.deep .btn-outline{border-color:var(--line-deep);color:var(--text-on-deep);background:transparent}
section.deep .btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.demo-note{font-size:.92rem;color:var(--text-muted);max-width:62ch;margin:14px auto 0}
@media (max-width:760px){
  .falt-rahmen iframe{height:700px}
}