/* Der Golfpark als Spielrahmen: Holzkonsole, Scorepapier und grüne Tinte.
   Nur die Oberfläche wird gestaltet; die 3D-Bühne bleibt der Mittelpunkt. */
body.mg3d {
  --mg-karte:#f6efd9; --mg-text:#233e32; --mg-lern:#536454; --mg-abschnitt:#687354;
  --mg-rand:#c5aa70; --mg-akzent:#245d43; --mg-zelle:#fff9e9;
  --mg-schatten:0 16px 52px #071b1459;
}
html[data-theme="dark"] body.mg3d {
  --mg-karte:#1d352b; --mg-text:#f1ead5; --mg-lern:#c2cbbb; --mg-abschnitt:#c9b477;
  --mg-rand:#8b794f; --mg-akzent:#9fca8a; --mg-zelle:#263e31;
  --mg-schatten:0 16px 52px #0008;
}
body.mg3d .mg_leiste {
  background:
    repeating-linear-gradient(2deg,#ffffff03 0 2px,#00000004 3px 5px),
    linear-gradient(100deg,#463222,#715036 52%,#493623);
  color:#fff5d9; border-bottom:3px solid #bea169;
  box-shadow:0 3px 10px #0d241d55,inset 0 -4px #2d241b;
  padding:.45rem 1rem;
}
html[data-theme="dark"] body.mg3d .mg_leiste {
  background:repeating-linear-gradient(2deg,#ffffff02 0 2px,#00000005 3px 5px),
    linear-gradient(100deg,#211d16,#3e3022 52%,#211e16);
}
body.mg3d .mg_titel { font:700 1.4rem Georgia,serif; letter-spacing:.035em; color:#fff2cf; }
body.mg3d .mg_brand img { background:#ede4c9; border:2px solid #d0b579; border-radius:50%; padding:3px; }
body.mg3d .mg_zurueck { background:#f6efd9; color:#244d39; border:1px solid #d0b579; box-shadow:0 2px 3px #0003; }
body.mg3d .jupi_sprachen_icon { color:#e6cd90; }
body.mg3d .mg_leiste .jupi_sprachen_select {
  color:#fff4d7; background:#293f32; border:1px solid #b29b65; min-height:40px;
}
body.mg3d .mg_leiste .jupi_theme_switch { background:#26392d; border:1px solid #b29b65; color:#f3dc9c; }
body.mg3d .mg_leiste .jts_thumb { background:#f5e5ba; box-shadow:0 1px 4px #0004; }
body.mg3d .mg_icon {
  display:inline-block; width:21px; height:21px; flex:none; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
body.mg3d .jts_icon .mg_icon { width:18px; height:18px; }
body.mg3d .mg_zeile {
  gap:6px; padding:7px 12px; background:#193d30eb; color:#f7eed4;
  border-bottom:1px solid #bda16d88; backdrop-filter:blur(8px);
}
body.mg3d .mg_anzeige {
  background:#f1e9d4; color:#4b5c47; border:1px solid #c9bc94;
  border-radius:5px; padding:3px 8px; font-size:.72rem;
  box-shadow:0 1px 2px #0002;
}
body.mg3d .mg_anzeige b { color:#244c37; font-size:.88rem; }
body.mg3d .mg_tempo { color:#f1e9d4; background:transparent; border-color:#b1c5a544; box-shadow:none; }
body.mg3d .mg_knopf {
  min-height:40px; min-width:40px; background:#f0e6c9; color:#2a4d38;
  border:1px solid #c8b079; border-radius:8px; box-shadow:0 2px 2px #061c2433;
}
body.mg3d .mg_knopf:hover { background:#fff6dc; }
body.mg3d .mg_unten {
  align-self:center; max-width:calc(100% - 24px); padding:7px 13px;
  margin-bottom:108px; border:1px solid #cfb77a66; border-radius:20px;
  background:#183d2deb; box-shadow:0 3px 12px #0002;
}
body.mg3d .mg_meldung { color:#fff1ba; font-weight:600; }
body.mg3d .mg_controls {
  background:linear-gradient(115deg,#203f32,#31523c); border:2px solid #c6ad72;
  border-radius:14px; padding:9px 11px; color:#fff2d1;
  box-shadow:0 4px 0 #433522,0 8px 25px #0004,inset 0 0 0 2px #0e241c;
}
body.mg3d .mg_controls button { background:#f3e8c9; color:#244a36; border-color:#bca269; border-radius:8px; }
body.mg3d .mg_controls #mg_hit { background:#dfc280; color:#203f2d; border-color:#f0d9a2; }
body.mg3d .mg_controls label { font-size:.72rem; letter-spacing:.035em; }
body.mg3d .mg_controls output { color:#f5dfab; font-weight:700; }
body.mg3d .mg_overlay { background:#0a2019b8; backdrop-filter:blur(3px); padding:18px; }
body.mg3d .mg_karte {
  max-width:49rem; padding:1.3rem 1.6rem; color:var(--mg-text);
  background:linear-gradient(115deg,#ffffff09,#00000002),var(--mg-karte);
  border:1px solid var(--mg-rand); border-top:7px solid var(--mg-rand);
  border-radius:8px; box-shadow:var(--mg-schatten),inset 0 0 0 5px #a68d5110;
}
body.mg3d .mg_karte h2 { font:700 1.8rem Georgia,serif; color:var(--mg-text); letter-spacing:.015em; }
body.mg3d .mg_start_logo { width:64px; height:64px; background:#fbf5de; border:1px solid var(--mg-rand); border-radius:50%; padding:5px; }
body.mg3d .mg_karte p { line-height:1.5; }
body.mg3d .mg_lernsatz { color:var(--mg-lern); }
body.mg3d .mg_lernsatz b,body.mg3d .mg_merk b { color:var(--mg-akzent); }
body.mg3d .mg_start_lern { background:#54805912; border-left:3px solid #7c9d6e; border-radius:2px; padding:.55rem .75rem; }
body.mg3d .mg_abschnitt { color:var(--mg-abschnitt); font-size:.72rem; letter-spacing:.14em; margin-top:1rem; }
body.mg3d .mg_details { background:#6f81530a; border:1px solid var(--mg-rand); border-radius:5px; }
body.mg3d .mg_details summary { color:var(--mg-text); min-height:44px; padding:.6rem .75rem; }
body.mg3d .mg_details_inhalt { color:var(--mg-lern); }
body.mg3d .mg_tipp { color:var(--mg-text); background:#7b9f721c; border-left:3px solid var(--mg-rand); border-radius:0; }
body.mg3d .mg_merk { color:var(--mg-text); background:#6f966c18; border:1px dashed var(--mg-rand); border-radius:4px; }
body.mg3d .mg_bahnen { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
body.mg3d .mg_bahnkachel {
  position:relative; min-height:103px; padding:10px 10px 8px 45px;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  background:var(--mg-zelle); color:var(--mg-text); border:1px solid var(--mg-rand);
  border-radius:5px; text-align:left; box-shadow:0 2px 2px #293a2110;
}
body.mg3d .mg_bahnkachel_nr {
  position:absolute; left:9px; top:0; display:grid; place-items:start center;
  padding-top:9px; width:27px; height:40px; color:#f9edcf; background:#426b45;
  font:700 1rem Georgia,serif; clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
}
body.mg3d .mg_bahnkachel_name {
  color:var(--mg-text); font-size:.86rem; line-height:1.2; font-weight:700;
  max-width:100%; overflow-wrap:anywhere; hyphens:auto;
}
body.mg3d .mg_bahnkachel_laenge { font-size:.9rem; font-weight:700; color:var(--mg-akzent); font-variant-numeric:tabular-nums; }
body.mg3d .mg_bahnkachel_marke { color:var(--mg-lern); font-size:.68rem; margin-top:auto; }
body.mg3d .mg_bahnkachel_aktiv { border:2px solid var(--mg-akzent); padding:9px 9px 7px 44px; background:#5b915319; }
body.mg3d .mg_bahnkachel_aktiv .mg_bahnkachel_nr { background:#a47934; }
body.mg3d .mg_bahnkachel:hover { border-color:var(--mg-akzent); transform:translateY(-1px); }
body.mg3d .mg_start,body.mg3d .mg_wahl,body.mg3d .mg_knopf_start {
  border-radius:7px; min-height:44px; border:1px solid var(--mg-rand);
  background:var(--mg-zelle); color:var(--mg-text); box-shadow:0 2px 2px #0001;
}
body.mg3d .mg_start,body.mg3d .mg_wahl_aktiv {
  color:#fff7df; background:linear-gradient(#3b704c,#285839); border-color:#587d43;
  box-shadow:0 3px 0 #173e2a;
}
body.mg3d .mg_start:hover { background:#3c7751; }
body.mg3d .mg_start_zeile { gap:8px; }
body.mg3d .mg_knopf_start { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
body.mg3d .mg_hinweis,body.mg3d .mg_tasten_hinweis { color:var(--mg-lern); }
body.mg3d .mg_schalter_zeile { color:var(--mg-text); background:var(--mg-zelle); border:1px solid var(--mg-rand); border-radius:5px; }
body.mg3d .mg_schalter_text small { color:var(--mg-lern); }
body.mg3d .mg_schalter { accent-color:#426e46; }
body.mg3d .mg_stern_voll { color:#c99c3c; }
body.mg3d .mg_stern_leer { color:var(--mg-lern); }
body.mg3d :is(button,a,summary,input,select):focus-visible { outline:3px solid #c79d48; outline-offset:3px; }
body.mg3d #mg_start_knopf { margin-top:14px; box-shadow:0 -6px 8px var(--mg-karte),0 3px 0 #173e2a; }
body.mg3d #mg_start .mg_karte {
  max-width:66rem; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:0 1.5rem;
}
body.mg3d .mg_start_intro,body.mg3d .mg_start_plan { min-width:0; }
body.mg3d .mg_start_plan { border-left:1px dashed var(--mg-rand); padding-left:1.5rem; }
body.mg3d .mg_start_plan > .mg_abschnitt:first-child { margin-top:0; }
body.mg3d .mg_start_plan .mg_bahnkachel { min-height:90px; }
body.mg3d .mg_start_aktionen {
  grid-column:1/-1; position:sticky; bottom:0; z-index:3;
  background:var(--mg-karte); padding-top:12px; margin-top:14px;
  border-top:1px solid var(--mg-rand);
}
body.mg3d .mg_start_aktionen #mg_start_knopf { position:static; margin-top:0; }
body.mg3d .mg_start_aktionen .mg_tasten_hinweis { margin:.65rem 0 0; }
@media(max-width:850px) {
  body.mg3d #mg_start .mg_karte { display:block; max-width:38rem; }
  body.mg3d .mg_start_plan { border:0; padding:0; margin-top:1.2rem; }
  body.mg3d .mg_start_aktionen { box-shadow:0 -6px 12px var(--mg-karte); }
}
@media(max-width:1000px) {
  body.mg3d .mg_leiste { padding:.4rem .65rem; }
  body.mg3d .mg_leiste .jupi_sprachen_select { max-width:15rem; }
}
@media(max-width:580px) {
  body.mg3d .mg_leiste { grid-template-columns:auto minmax(0,1fr); gap:6px; }
  body.mg3d .mg_brand { grid-row:1; grid-column:1/-1; }
  body.mg3d .mg_brand img { width:32px; height:32px; }
  body.mg3d .mg_titel { font-size:1.15rem; }
  body.mg3d .mg_zurueck { grid-row:2; grid-column:1; justify-self:start; padding:.3rem .5rem; font-size:.72rem; }
  body.mg3d .mg_leiste .jupi_werkzeuge { grid-row:2; grid-column:2; justify-self:end; gap:5px; }
  body.mg3d .mg_leiste .jupi_sprachen_select { width:clamp(5.7rem,26vw,8rem); max-width:none; font-size:.72rem; }
  body.mg3d .mg_leiste .jupi_theme_switch { width:60px; }
  body.mg3d .mg_zeile { padding:5px 7px; gap:5px; }
  body.mg3d .mg_anzeige { padding:2px 5px; font-size:.67rem; }
  body.mg3d .mg_anzeige b { font-size:.77rem; }
  body.mg3d .mg_unten { font-size:.72rem; padding:6px 10px; margin-bottom:110px; }
  body.mg3d .mg_karte { padding:1rem; }
  body.mg3d .mg_karte h2 { font-size:1.5rem; }
  body.mg3d .mg_bahnen { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  body.mg3d .mg_bahnkachel { min-height:112px; padding:40px 7px 7px; }
  body.mg3d .mg_bahnkachel_aktiv { padding:39px 6px 6px; }
  body.mg3d .mg_bahnkachel_nr { width:23px; height:34px; padding-top:6px; }
  body.mg3d .mg_bahnkachel_name { font-size:.75rem; overflow-wrap:anywhere; }
  body.mg3d .mg_controls { gap:5px; padding:8px; }
}
@media(max-width:350px) {
  body.mg3d .mg_bahnen { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mg3d .mg_bahnkachel { min-height:104px; }
}
@media(prefers-reduced-motion:reduce) {
  body.mg3d .mg_bahnkachel:hover { transform:none; }
  body.mg3d * { scroll-behavior:auto; transition:none!important; }
}