@font-face{font-family:Rowan;src:url(/schrift/rowan-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Archivo;src:url(/schrift/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --grund:#F6F1E7;      /* Macke-Weiß */
  --tinte:#1C1B2E;      /* Indigo-Schwarz */
  --kobalt:#2546B8;     /* Macke-Blau */
  --zinnober:#E2452B;   /* Macke-Rot */
  --tafel:#F2B630;      /* gelbe NRW-Tafel */
  --gruen:#1F6E45;      /* Reitweg-Schild */
  --linie:#D9CFBE;
  --matt:#5A5868;
  --holz:#7A5232;
  --rand:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 17px/1.6 Archivo,system-ui,sans-serif;font-stretch:96%}
img{max-width:100%;height:auto;display:block}
a{color:var(--kobalt);text-underline-offset:3px}
a:hover{color:var(--zinnober)}
.vh{position:absolute;left:-9999px}
.vh:focus{left:8px;top:8px;background:var(--tinte);color:var(--grund);padding:10px 14px;z-index:9}
h1,h2,h3{line-height:1.1;margin:0 0 .5em}
h2,h3{font-family:Archivo,sans-serif;font-weight:800}
h3{font-size:1.2rem;font-stretch:90%}
p{margin:0 0 1em}

/* ---------- Kopf: Marke + Hufschlag-Menü ---------- */
.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:12px var(--rand);border-bottom:2px solid var(--tinte)}
.marke{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--tinte);text-decoration:none;font:700 1.25rem/1 Rowan,serif;margin-right:auto}
.eisen{width:22px;height:22px;fill:currentColor;flex:none}
.marke .eisen{color:var(--zinnober)}
.hufschlag{display:flex;flex-wrap:wrap;gap:0 4px}
.hufschlag a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--tinte);text-decoration:none;font-weight:600;font-stretch:88%}
.hufschlag a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:6px;
  background:radial-gradient(circle 3px,var(--zinnober) 98%,transparent) 0 0/14px 6px repeat-x;opacity:0;transform:translateX(-6px);transition:.25s}
.hufschlag a:hover::after,.hufschlag a[aria-current]::after{opacity:1;transform:none}
.hufschlag a[aria-current]{color:var(--zinnober)}

/* ---------- Auftakt (Startseite) ---------- */
.auftakt{position:relative;display:grid;gap:28px;padding:28px var(--rand) 88px;overflow:hidden}
.dach{font-weight:700;font-stretch:115%;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--zinnober);margin-bottom:12px}
.auftakt h1{font:700 clamp(3.1rem,13vw,8.4rem)/.9 Rowan,serif;letter-spacing:-.02em;margin:0 0 18px}
.auftakt h1 span{display:block;margin-top:.3em;font:800 clamp(1.15rem,3.6vw,1.9rem)/1.15 Archivo,sans-serif;font-stretch:120%;letter-spacing:0;color:var(--kobalt)}
.lead{font-size:1.1rem;max-width:36em}
.wegweiser{position:relative;min-height:440px;display:grid;grid-template-columns:1fr;align-items:start}
.aquarell{grid-area:1/1;justify-self:end;width:min(100%,560px);aspect-ratio:4/3;border-radius:58% 42% 47% 53%/44% 56% 44% 56%;overflow:hidden;transform:rotate(-3deg);
  box-shadow:0 0 0 10px var(--grund),0 0 0 12px var(--linie)}
.aquarell img{width:100%;height:100%;object-fit:cover;animation:weht 18s ease-in-out infinite alternate}
@keyframes weht{to{transform:scale(1.08) translate(-2%,1%)}}
.pfosten{grid-area:1/1;justify-self:start;margin-left:22px;width:18px;height:100%;min-height:440px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#6b4527 0 3px,var(--holz) 3px 7px,#8a603d 7px 10px);box-shadow:3px 0 0 rgba(0,0,0,.15)}
.bretter{grid-area:1/1;align-self:center;display:grid;gap:14px;margin-top:150px;padding-left:12px;z-index:1}
.schild{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 12px;width:min(88%,360px);min-height:64px;padding:10px 40px 10px 16px;
  background:var(--gruen);color:#fff;text-decoration:none;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,0 100%);
  transform-origin:12px 50%;animation:schwing .9s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.25s + var(--i)*.15s)}
.schild:nth-child(2){margin-left:18px;background:var(--kobalt)}
.schild:nth-child(3){background:var(--zinnober)}
.schild:hover{color:#fff;filter:brightness(1.1)}
.schild-t{font:800 1.2rem/1.1 Archivo,sans-serif;font-stretch:110%}
.schild-u{grid-column:1;font-size:.9rem;opacity:.9}
.schild .pf{grid-row:1/3;grid-column:2;width:20px;height:20px}
@keyframes schwing{from{transform:rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.hufspur{position:absolute;left:0;right:0;bottom:22px;height:40px;pointer-events:none}
.hufspur i{position:absolute;left:calc(var(--rand) + var(--n)*7.2%);top:calc(6px + (var(--n) % 2)*18px);width:14px;height:16px;
  border:4px solid var(--tinte);border-bottom:0;border-radius:8px 8px 0 0;opacity:0;transform:rotate(90deg);
  animation:tritt 6s linear infinite;animation-delay:calc(var(--n)*.38s)}
@keyframes tritt{0%{opacity:0}4%{opacity:.55}60%{opacity:.25}100%{opacity:0}}

/* ---------- Blöcke ---------- */
.block{padding:40px var(--rand);border-top:1px solid var(--linie)}
.block.text,.text{max-width:46em}
.block.text{margin:0 auto}
.zwei{display:grid;gap:28px;align-items:start}
.gang{font-size:clamp(1.55rem,4.4vw,2.4rem);font-stretch:68%;transition:font-stretch .9s cubic-bezier(.2,.8,.2,1)}
.gang.los{font-stretch:118%}
.foto{margin:0}
.foto img{width:100%;border-radius:4px}
.foto figcaption{font-size:.8rem;color:var(--matt);margin-top:6px}
.zahlen{display:grid;gap:18px}
.zahlen div{display:flex;flex-wrap:wrap;min-width:0;gap:6px 14px;align-items:baseline;border-top:3px solid var(--tinte);padding-top:10px}
.zahlen b{font:700 clamp(2.6rem,9vw,4.2rem)/1 Rowan,serif;color:var(--kobalt);min-width:2.2ch}
.zahlen div:nth-child(2) b{color:var(--zinnober)}
.weiter{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.pf{width:18px;height:18px}
.hinweis{border-left:4px solid var(--tafel);padding:8px 12px;background:#fff6dc}
.quelle{font-size:1rem;color:var(--matt)}
.gruppen li,.haken li{margin-bottom:8px}

/* Status-Marken */
.st{display:inline-block;padding:2px 9px;border-radius:3px;font-size:.85rem;font-weight:700;font-stretch:85%;white-space:nowrap;line-height:1.5}
.st-ja{background:var(--gruen);color:#fff}
.st-nein{background:var(--zinnober);color:#fff}
.st-bedingt{background:var(--tafel);color:var(--tinte)}
.st-pruefen{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.st-pflicht{background:var(--tafel);color:var(--tinte);box-shadow:inset 0 0 0 2px var(--tinte)}
.st-frei{background:#e8e1d2;color:var(--tinte)}

/* ---------- Unterseiten-Kopf: Wegweiser-Brett ---------- */
.seitenkopf{padding:20px var(--rand) 36px;background:linear-gradient(90deg,transparent 0 calc(var(--rand) + 6px),var(--holz) calc(var(--rand) + 6px) calc(var(--rand) + 20px),transparent calc(var(--rand) + 20px))}
.krumen{font-size:.9rem;margin-bottom:22px;background:var(--grund);display:inline-block;padding-right:8px}
.krumen a{display:inline-flex;align-items:center;min-height:44px}
.brett{position:relative;display:flex;align-items:center;gap:14px;width:min(100%,900px);padding:18px 56px 18px 18px;background:var(--gruen);color:#fff;
  clip-path:polygon(0 0,calc(100% - 40px) 0,100% 50%,calc(100% - 40px) 100%,0 100%);animation:schwing .8s cubic-bezier(.3,1.6,.5,1) both;transform-origin:20px 50%}
.brett h1{font:700 clamp(1.9rem,6.5vw,3.6rem)/1 Rowan,serif;margin:0}
.brett-eisen .eisen{width:34px;height:34px;fill:var(--tafel)}
.unter{max-width:40em;margin:18px 0 0;padding:6px 0 0 30px;font-size:1.08rem;background:var(--grund)}

/* ---------- Ritt-Probe ---------- */
.ritt{padding:44px var(--rand);background:var(--tinte);color:var(--grund)}
.ritt a{color:#9fb4ff}
.ritt-kopf{max-width:44em}
.ritt .gang{color:var(--tafel)}
.ritt-steuer{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:end;margin:18px 0 24px}
.feld{display:grid;gap:4px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.feld select{min-height:48px;min-width:240px;max-width:100%;padding:0 12px;font:600 1.05rem Archivo,sans-serif;text-transform:none;letter-spacing:0;
  background:var(--grund);color:var(--tinte);border:0;border-radius:4px}
.ritt-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.ritt button{min-height:48px;padding:0 16px;font:700 1rem Archivo,sans-serif;border:2px solid var(--grund);background:transparent;color:var(--grund);border-radius:4px;cursor:pointer}
.ritt button.los{background:var(--zinnober);border-color:var(--zinnober);color:#fff;font-stretch:115%}
.ritt button:disabled{opacity:.4;cursor:default}
.strecke{position:relative;list-style:none;margin:0;padding:34px 0 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.strecke li{position:relative}
.ritt .abschnitt{width:100%;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:10px;text-align:left;
  font:inherit;color:var(--tinte);background-color:var(--grund);border:0;border-radius:4px;cursor:pointer;padding-top:62px;
  background-image:var(--muster);background-repeat:no-repeat;background-size:100% 46px;background-position:0 10px}
.abschnitt b{font-size:1rem;font-stretch:90%}
.abschnitt small{font-size:.78rem;color:var(--matt);line-height:1.3}
.abschnitt .st{align-self:flex-start;margin-top:4px}
.abschnitt[data-weg=fahrweg]{--muster:linear-gradient(transparent 8px,#c9b994 8px 38px,transparent 38px)}
.abschnitt[data-weg=reitweg]{--muster:linear-gradient(transparent 12px,#b08a5a 12px 34px,transparent 34px)}
.abschnitt[data-weg=schmal]{--muster:linear-gradient(transparent 16px,#c9b994 16px 30px,transparent 30px)}
.abschnitt[data-weg=pfad]{--muster:linear-gradient(transparent 20px,#a99b7c 20px 26px,transparent 26px)}
.abschnitt[data-weg=rueckegasse]{--muster:repeating-linear-gradient(90deg,#7a6a4c 0 6px,transparent 6px 14px)}
.abschnitt[data-weg=quer]{--muster:radial-gradient(circle 4px,#5d7f45 98%,transparent) 0 0/16px 16px}
.abschnitt.stopp{outline:4px solid var(--zinnober);outline-offset:-4px}
.abschnitt.gelb{outline:4px solid var(--tafel);outline-offset:-4px}
.reiter{position:absolute;top:0;left:0;width:30px;height:30px;transition:transform .7s cubic-bezier(.45,0,.3,1);z-index:2}
.reiter .eisen{width:30px;height:30px;fill:var(--tafel)}
.reiter.halt .eisen{fill:var(--zinnober)}
.ritt-ergebnis{margin-top:14px;padding:16px;border:2px solid var(--grund);border-radius:4px;max-width:52em}
.ritt-ergebnis h3{font-stretch:105%;margin-bottom:6px}
.ritt-ergebnis p{margin:0 0 6px}

/* ---------- Tabelle & Steckbriefe ---------- */
.tabelle-hülle{overflow-x:auto}
table.laender{width:100%;border-collapse:collapse;font-size:1rem}
.laender caption{text-align:left;font-size:.85rem;color:var(--matt);padding-bottom:10px}
.laender th,.laender td{padding:10px 8px;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.laender thead th{font-stretch:80%;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--tinte)}
.steckbriefe{display:grid;gap:0}
.steckbrief{padding:22px 0;border-top:1px solid var(--linie)}
.steckbrief h3{font:700 1.7rem/1 Rowan,serif;margin-bottom:10px}
.wegliste{list-style:none;padding:0;margin:0 0 10px}
.wegliste li{margin-bottom:6px}
.wegtafeln{display:grid;gap:18px}
.wegtafeln article{border-top:6px solid var(--tinte);padding-top:12px}
.wegtafeln article:nth-child(2){border-color:var(--tafel)}
.wegtafeln article:nth-child(3),.wegtafeln article:nth-child(4){border-color:var(--zinnober)}
.schilderliste{list-style:none;padding:0}
.schilderliste li{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.schilderliste span{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%}
.schilderliste .eisen{width:26px;height:26px}
.z238{background:var(--kobalt);fill:#fff}.z238 .eisen{fill:#fff}
.z258{background:#fff;box-shadow:inset 0 0 0 7px var(--zinnober)}.z258 .eisen{fill:var(--tinte)}
.zland{background:var(--gruen);border-radius:4px!important}.zland .eisen{fill:#fff}
.tafel{display:inline-grid;grid-template-columns:auto auto;gap:0 12px;align-items:center;margin:4px 0 18px;padding:10px 16px;background:var(--tafel);
  border:3px solid var(--tinte);border-radius:6px;font-stretch:120%}
.tafel span{font-weight:800;font-size:.8rem}
.tafel b{font-size:1.7rem;letter-spacing:.06em}
.tafel i{grid-column:1/3;font-style:normal;justify-self:end;font-size:.75rem;background:var(--grund);padding:0 6px;border-radius:10px}
.kz-liste{list-style:none;padding:0;margin:0 0 16px}
.kz-liste li{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--linie)}
.kz-liste .land{font-weight:800;font-size:1.1rem}
.kz-liste .st{justify-self:start}
.fragen details{border-bottom:1px solid var(--linie);max-width:50em}
.fragen summary{min-height:44px;padding:14px 0;font-weight:700;cursor:pointer;font-size:1.08rem}
.fragen details p{padding-bottom:10px}
.mail{font-size:1.3rem;font-weight:700}
.lizenzen{font-size:1rem}

/* ---------- Fuß ---------- */
.fuss{margin-top:40px;background:var(--tinte);color:var(--grund);padding:36px var(--rand) 28px}
.fuss a{color:var(--grund);display:inline-flex;align-items:center;min-height:44px;margin-right:20px}
.absitzen{font:700 clamp(2.8rem,12vw,7rem)/.92 Rowan,serif;margin:0 0 26px;color:var(--grund)}
.absitzen span{color:var(--tafel)}
.fuss-zeile{display:grid;gap:10px;border-top:1px solid #3d3b55;padding-top:16px;font-size:1rem}
.fuss-zeile p{margin:0}

/* ---------- breitere Bildschirme ---------- */
@media (min-width:768px){
  .zwei{grid-template-columns:1.1fr .9fr;gap:44px}
  .zwei.umgekehrt{grid-template-columns:.9fr 1.1fr}
  .zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wegtafeln{grid-template-columns:1fr 1fr;gap:28px}
  .kz-liste li{grid-template-columns:220px 140px 1fr;align-items:baseline}
}
@media (min-width:1080px){
  .auftakt{grid-template-columns:1.05fr .95fr;align-items:center;min-height:calc(100vh - 70px);padding-top:20px}
  .wegweiser{min-height:560px}
  .pfosten{min-height:560px}
  .steckbriefe{grid-template-columns:1fr 1fr;column-gap:44px}
}
@media (max-width:767px){
  table.laender thead{display:none}
  table.laender,table.laender tbody,table.laender tr,table.laender th,table.laender td{display:block}
  table.laender tr{padding:12px 0;border-bottom:2px solid var(--tinte)}
  table.laender th[scope=row]{font:700 1.3rem Rowan,serif;border:0;padding:0 0 6px}
  table.laender td{display:flex;justify-content:space-between;gap:10px;border:0;padding:4px 0}
  table.laender td::before{content:attr(data-weg);font-weight:600}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hufspur i{opacity:.35}
}
.ritt .quelle{color:#c4c1d6}