/* Rechenhof, Welt Pferdehof: Optik der Welt (seit 2026-10-30, Umbau U5c, vorher in core/style.css). Alles steht unter [data-welt="pferdehof"], das Attribut setzt ui() in core/app.js am body.
   Grundlayout, Kacheln B und C und Aufgabenseiten liegen in core/style.css. Diese Datei trägt welt.json unter "stile" ein, werkzeuge/welten.mjs bindet sie in index.html und sw.js ein. */
/* Koppeln-Ansicht: Karten je Koppel, Zeilen mit Pferden und Umzugsknöpfen */
[data-welt="pferdehof"] .koppel.zu{opacity:.8}[data-welt="pferdehof"] .pferdzeile{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line)}
[data-welt="pferdehof"] .card.pferdzeile{border-top:0;padding:8px 12px}
/* Wunschbaum: Bild des eigenen Pferds bei den Abzeichen */
[data-welt="pferdehof"] .abz{text-align:center;padding:4px}[data-welt="pferdehof"] .abz svg{width:100%;max-width:200px}
[data-welt="pferdehof"] .pick{background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:6px;text-align:center;font-size:14px}
[data-welt="pferdehof"] .pick.gesperrt svg{filter:grayscale(1) opacity(.7)}
[data-welt="pferdehof"] .pick.on{border-color:var(--bar)}[data-welt="pferdehof"] .pick svg{width:100%;display:block}
/* Gras im Wind (seit 2026-10-19): das vordere Gras wiegt sich, nicht bei ruhigem Hintergrund oder "Bewegung reduzieren" */
[data-welt="pferdehof"] #hof #hv{animation:wind 3.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes wind{from{transform:skewX(-7deg)}to{transform:skewX(6deg)}}
[data-welt="pferdehof"] #hof.ruhig #hv{animation:none}
@media(prefers-reduced-motion:reduce){[data-welt="pferdehof"] #hof #hv{animation:none}}
/* Umriss der Hofgegenstände (hof.js, umrGruppe): .umr ist die Kopie mit dickem Strich unter der Zeichnung, .ufuell die Zeichnung ohne Strich, .uin mit feinen Innenlinien. Im Sparmodus fällt der Umriss weg. */
[data-welt="pferdehof"] .umr{stroke:#2a1d14;stroke-width:1.7;stroke-linejoin:round;opacity:.6}[data-welt="pferdehof"] .ufuell{stroke:none}[data-welt="pferdehof"] .uin{stroke:#3a261466;stroke-width:.55;stroke-linejoin:round}[data-welt="pferdehof"] .ohneUmriss .umr{display:none}
/* 3D-Fenster (nur ausgewachsene Pferde); im Wunschbaum bleibt es beim Scrollen oben stehen */
[data-welt="pferdehof"] .d3{position:relative;height:220px;border-radius:14px;overflow:hidden;margin:10px 0;background:linear-gradient(#cfe5ef 0%,#e6f2ea 70%,#d8ebcc 100%);border:1px solid var(--line)}
[data-welt="pferdehof"] .d3.kleb{position:sticky;top:6px;z-index:3;box-shadow:0 4px 14px #0003}
[data-welt="pferdehof"] .d3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
[data-welt="pferdehof"] .d3text,[data-welt="pferdehof"] .d3fehler{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:14px;color:#26331f;opacity:.8}
[data-welt="pferdehof"] .d3fehler,[data-welt="pferdehof"] .d3.bereit .d3text,[data-welt="pferdehof"] .d3.fehler .d3text{display:none}[data-welt="pferdehof"] .d3.fehler .d3fehler{display:flex}
@media(prefers-color-scheme:dark){[data-welt="pferdehof"] .d3{background:linear-gradient(#2a4558 0%,#2c4a3a 70%,#2f5a3a 100%)}[data-welt="pferdehof"] .d3text,[data-welt="pferdehof"] .d3fehler{color:#e8f0e2}}
[data-welt="pferdehof"] section.wb{border-top:1px solid var(--line);margin-top:16px}[data-welt="pferdehof"] section.wb>h2{margin-top:12px}
[data-welt="pferdehof"] svg.itb{display:block;width:100%;height:56px;margin:0 auto 4px}
/* Heuballen raschelt beim Antippen (seit 2026-10-21) */
[data-welt="pferdehof"] #hof .raschel{animation:raschel .6s ease-in-out;transform-box:fill-box;transform-origin:50% 100%}
@keyframes raschel{0%,100%{transform:rotate(0)}20%{transform:rotate(-2deg)}40%{transform:rotate(2deg)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1deg)}}
@media(prefers-reduced-motion:reduce){[data-welt="pferdehof"] #hof .raschel{animation:none}}
/* Training (seit 2026-10-22): Longierzirkel, Sterne, Zeitbalken */
[data-welt="pferdehof"] .trsz{width:100%;max-width:560px;display:block;margin:8px auto;border-radius:14px}
[data-welt="pferdehof"] .trs{color:#d9a21b;font-size:19px;letter-spacing:1px;white-space:nowrap}[data-welt="pferdehof"] .trs i{font-style:normal;color:var(--line)}
[data-welt="pferdehof"] .trk{padding:10px 12px}[data-welt="pferdehof"] .trk .go{margin-top:6px}
[data-welt="pferdehof"] .bar.trzeit{height:12px;margin:6px 0}[data-welt="pferdehof"] .bar.trzeit b{transition:none;background:#e2b24a}
[data-welt="pferdehof"] .trinfo{font-size:17px;margin:10px 0 4px}
/* Gesundheit und Pflege (seit 2026-10-25, pflege.js): Glücks-Hufeisen erscheint nach dem ersten Hufschmied */
@keyframes gpEin{from{opacity:0}to{opacity:1}}[data-welt="pferdehof"] #hof .glueck.neu{animation:gpEin 1.2s ease-out}
/* Ansicht A "Pferdehof" (seit 2026-10-26, Standard): Holzschilder auf Startseite, Kind-Ansicht und Rundenende (body.holz, gesetzt in ui()).
   Nur Aussehen, der Aufbau der Seiten bleibt. Knöpfe sind Bretter (dunkles Holz), .alt helles Holz, .go goldenes Brett, breite Knöpfe mit zwei Nägeln. */
/* --gr und --bar dunkler (hell) bzw. heller (dunkel), damit grüne und rote Hinweise auf dem Holzgrund gut lesbar bleiben */
body[data-welt="pferdehof"].holz{--bg:#eadcc0;--ink:#3b2414;--card:#f8efdc;--line:#cdb48a;--gr:#3b6e37;--bar:#9a3424}
body[data-welt="pferdehof"].holz main{background:linear-gradient(#efe4cf,#e3d1ae)}
@media(prefers-color-scheme:dark){body[data-welt="pferdehof"].holz{--bg:#251c14;--ink:#f1e3c8;--card:#35281c;--line:#5c4630;--gr:#8cc47c;--bar:#f08a74}body[data-welt="pferdehof"].holz main{background:linear-gradient(#2a2017,#1f1812)}}
body[data-welt="pferdehof"].holz main button{border:0;border-radius:8px;font-weight:700;color:#fff8e8;text-shadow:0 1px 0 #3b2414;
 background:repeating-linear-gradient(90deg,#8a5a32 0 3px,#93623a 3px 7px,#8a5a32 7px 12px),#8a5a32;box-shadow:inset 0 2px 0 #b5835a,inset 0 -3px 0 #5e3d22,0 3px 0 #4a2f1a}
body[data-welt="pferdehof"].holz main button.alt{color:#3b2414;text-shadow:0 1px 0 #f3e2c0;background:repeating-linear-gradient(90deg,#d8b585 0 3px,#dfbe90 3px 7px,#d8b585 7px 12px),#d8b585;box-shadow:inset 0 2px 0 #f0d6ac,inset 0 -3px 0 #a9824f,0 3px 0 #7d5c34}
body[data-welt="pferdehof"].holz main button.go{color:#3b2414;text-shadow:0 1px 0 #f7e2a6;background:repeating-linear-gradient(90deg,#d9a73c 0 3px,#e2b24a 3px 7px,#d9a73c 7px 12px),#e2b24a;box-shadow:inset 0 2px 0 #f3cf7a,inset 0 -3px 0 #a87b22,0 3px 0 #7a5716}
body[data-welt="pferdehof"].holz main button.big{position:relative;padding:12px 24px;margin:9px 0}
body[data-welt="pferdehof"].holz main button.big::before,body[data-welt="pferdehof"].holz main button.big::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#d9c7a3;box-shadow:inset -1px -1px 0 #7a6a50}
body[data-welt="pferdehof"].holz main button.big::before{left:8px}body[data-welt="pferdehof"].holz main button.big::after{right:8px}
body[data-welt="pferdehof"].holz main button.big .small{opacity:.92}body[data-welt="pferdehof"].holz main button:disabled{opacity:.55}
/* Ausnahmen: verstecktes "i" der PIN-Seiten bleibt rund, die Karte der PIN-Sperre behält ihren roten Rand */
body[data-welt="pferdehof"].holz main button.pini{border-radius:50%}body[data-welt="pferdehof"].holz .card.pinzu{border-color:#c0392b}
/* Stufe als Hufeisen statt Punkte */
body[data-welt="pferdehof"].holz .dots i{width:12px;height:11px;border-radius:6px 6px 0 0;background:none;border:2.5px solid #c9bfa8;border-bottom:0;margin-left:3px}
body[data-welt="pferdehof"].holz .dots i.on{border-color:#e2b24a}
/* Überschriften der Themengruppen mit gestrichelter Holzleiste */
/* Kapitälchen statt Großbuchstaben: der Text bleibt normal geschrieben (Vorlesen, angezeigter Text) */
body[data-welt="pferdehof"].holz h3.kat{font:700 15px Georgia,serif;font-variant:small-caps;letter-spacing:.05em;color:#6b4423;margin:18px 0 4px;display:flex;align-items:center;gap:8px}
body[data-welt="pferdehof"].holz h3.kat::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,#8a5a32 0 6px,transparent 6px 10px)}
body[data-welt="pferdehof"].holz .card,body[data-welt="pferdehof"].holz details.wdh{border:2px solid #b5835a;border-radius:10px}
body[data-welt="pferdehof"].holz input,body[data-welt="pferdehof"].holz select{border-color:#b5835a}
@media(prefers-color-scheme:dark){body[data-welt="pferdehof"].holz h3.kat{color:#dcc092}body[data-welt="pferdehof"].holz h3.kat::after{background:repeating-linear-gradient(90deg,#b5835a 0 6px,transparent 6px 10px)}body[data-welt="pferdehof"].holz .card,body[data-welt="pferdehof"].holz details.wdh{border-color:#6e5136}}
/* Startseite: Boxentür (Stroh, Pferd schaut heraus) und Namensschild */
body[data-welt="pferdehof"].holz main button.big.hbox{justify-content:flex-start;gap:12px;padding:9px 24px 9px 20px}
[data-welt="pferdehof"] .htuer{width:66px;height:60px;flex:none;border-radius:6px;background:linear-gradient(#efdcaa,#d9bf80);border:4px solid #5e3d22;box-shadow:inset 0 0 0 1px #3b2414;display:grid;place-items:end center;overflow:hidden}
[data-welt="pferdehof"] .htuer svg{display:block;width:62px;height:auto;max-height:58px}
[data-welt="pferdehof"] .hschild{flex:1;min-width:0;background:#f5e7c8;color:#3b2414;text-shadow:none;border-radius:6px;padding:4px 10px;box-shadow:inset 0 0 0 2px #b5835a;font-weight:400;line-height:1.3}
[data-welt="pferdehof"] .hschild b{display:block;font:700 18px Georgia,"Palatino Linotype",serif}[data-welt="pferdehof"] .hschild .small{display:block}
[data-welt="pferdehof"] .hbox .ap{flex:none}
[data-welt="pferdehof"] .qhufe i.neu{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
/* A Pferdehof: Schiefertafel im Holzrahmen, Hufeisen, Stempel, Tipp als Zettel (Knöpfe in Holz über body.holz) */
[data-welt="pferdehof"] .qhufe{display:flex;justify-content:center;gap:5px;margin:10px 0 4px}
[data-welt="pferdehof"] .qhufe i{width:15px;height:14px;border:3px solid #c9bfa8;border-bottom:0;border-radius:8px 8px 0 0}
[data-welt="pferdehof"] .qhufe i.ok{border-color:#e2b24a}[data-welt="pferdehof"] .qhufe i.no{border-color:#b0412f}[data-welt="pferdehof"] .qhufe i.jetzt{border-color:#3b2414}
[data-welt="pferdehof"] .qtafel{position:relative;margin:10px 0 18px;padding:10px 14px 16px;border-radius:8px;background:radial-gradient(circle at 30% 20%,#3f5a48,#2d4436);color:#f4f1e6;border:8px solid #8a5a32;box-shadow:inset 0 0 0 2px #5e3d22,0 4px 0 #4a2f1a}
[data-welt="pferdehof"] .qtafel .qinfo{font-variant:small-caps;letter-spacing:.04em;margin:0 0 4px;opacity:.85}
[data-welt="pferdehof"] .qtafel .q{font-family:"Segoe Print","Comic Sans MS","Trebuchet MS",sans-serif;color:#f4f1e6;margin:6px 0}
[data-welt="pferdehof"] .qtafel .zeich{margin:8px 0 2px}
[data-welt="pferdehof"] .qdein{font-family:"Segoe Print","Comic Sans MS","Trebuchet MS",sans-serif;font-weight:700;font-size:18px;margin:6px 0 0}[data-welt="pferdehof"] .qdein.ok{color:#9fd18f}[data-welt="pferdehof"] .qdein.no{color:#ffb3a4}
[data-welt="pferdehof"] .qstempel{position:absolute;right:10px;top:-14px;transform:rotate(-10deg);border:3px solid #9fd18f;color:#9fd18f;border-radius:8px;padding:0 10px;font-weight:800;font-size:19px;background:#2d4436}
[data-welt="pferdehof"] .qstempel.no{border-color:#ff9a86;color:#ff9a86}
/* Kreide liegt auf der unteren Rahmenleiste (seit 2026-10-28, Brain Dump: hing vorher halb unter dem Rahmen) */
[data-welt="pferdehof"] .qtafel .kreide{position:absolute;right:18px;bottom:-6.5px;width:30px;height:5px;border-radius:2.5px;background:#f6f3ea;box-shadow:0 1px 0 #0004}
/* Rahmen als Schatten nach innen: Feld und "Prüfen" sind so genau gleich hoch */
[data-welt="pferdehof"] .qa .antwort{max-width:none}[data-welt="pferdehof"] .qa .antw{background:#fffaf0;border:0;box-shadow:inset 0 0 0 2px #8a5a32;border-radius:8px;padding:0 10px;align-items:stretch}
[data-welt="pferdehof"] .qa #ans{border:0;background:transparent;font-weight:700;color:#3b2414;margin:0;padding:10px 0}[data-welt="pferdehof"] .qa .einheit{color:#6b4423;align-self:center}
body[data-welt="pferdehof"].holz main .qa button.tipp,[data-welt="pferdehof"] .qa .qhinweis{display:inline-block;margin:12px 4px 4px;padding:6px 14px;background:#fff6b0;color:#3b2414;text-shadow:none;border-radius:2px;box-shadow:0 2px 4px #0002;transform:rotate(-1.5deg);font-weight:400;font-size:14px;text-decoration:none;opacity:1;position:relative}
body[data-welt="pferdehof"].holz main .qa button.tipp::before,[data-welt="pferdehof"] .qa .qhinweis::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:#b0412f}
[data-welt="pferdehof"] .qa .qhinweis{display:block;transform:rotate(-.6deg)}
/* Antwort-Knöpfe: Rundung und Druck-Effekt wie im Kern (.qwahl .wahlk), sonst gewinnen hier die Holz-Knöpfe bzw. diese Regel */
[data-welt="pferdehof"] .qa .qwahl .wahlk{background:#fffaf0;color:#3b2a1a;border-radius:12px;box-shadow:0 3px 0 #5b3a1f,inset 0 0 0 2px #8a5a32}
[data-welt="pferdehof"] .qa .qwahl .wahlk:active{box-shadow:0 1px 0 var(--line),inset 0 0 0 2px var(--line)}
@media(prefers-reduced-motion:reduce){[data-welt="pferdehof"] .qhufe i.neu,[data-welt="pferdehof"] .qstempel.pop{animation:none}}
@media(prefers-color-scheme:dark){[data-welt="pferdehof"] .qhufe i.jetzt{border-color:#f1e3c8}}
/* Stempel ploppt auf und bleibt schräg (eigene Keyframes, .pop würde die Drehung überschreiben) */
@keyframes qstempel{0%{transform:rotate(-10deg) scale(.3);opacity:0}100%{transform:rotate(-10deg) scale(1);opacity:1}}
[data-welt="pferdehof"] .qstempel.pop{animation:qstempel .5s cubic-bezier(.2,1.6,.4,1) .15s both}
/* Fertig-Zeichen der Ladeprüfung (core/rh.js): muss die letzte Zeile bleiben */
.da-pferdehof-welt{order:1}