:root {
  --gruen: #2f3478; --gruen2: #5258a0; --creme: #f7f3e3; --gold: #f1d81e; --asche: #b5583a; --text: #1b1b18;
  --schatten: 0 10px 40px rgba(0, 0, 0, .35);
  font-family: Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c2050; color: var(--text); }
canvas#leinwand { position: fixed; inset: 0; width: 100%; height: 100%; outline: none; touch-action: none; display: block; }
button { font: 600 17px 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: 0; border-radius: 10px; padding: 11px 18px; background: rgba(255, 255, 255, .92); color: var(--gruen); transition: transform .08s, background .15s; }
button:hover { background: #fff; transform: translateY(-1px); }
button:active { transform: translateY(1px); }
button.haupt { background: var(--asche); color: #fff; }
button.haupt:hover { background: #c8643f; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Barlow Condensed', sans-serif; margin: 0; }

.schirm { position: fixed; inset: 0; display: none; z-index: 10; }
.schirm.an { display: flex; }
#lade, #menue { flex-direction: column; align-items: center; justify-content: center; gap: 28px; color: var(--creme); text-align: center; padding: 20px; }
#lade { background: radial-gradient(circle at 50% 40%, #5258a0, #1c2050); }
#menue { background: linear-gradient(180deg, rgba(28, 32, 80, .6), rgba(28, 32, 80, 0) 45%, rgba(28, 32, 80, .75)); }
.logo h1 { font-size: clamp(54px, 12vw, 104px); font-weight: 700; line-height: .9; letter-spacing: .02em; text-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
.logo h1 em { font-style: normal; color: var(--gold); margin-left: .12em; }
.logo p { margin: 10px 0 0; font-size: 15px; opacity: .9; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.logo img { width: 96px; height: 96px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); animation: huepfen 1.6s ease-in-out infinite; }
@keyframes huepfen { 50% { transform: translateY(-12px); } }
.balken { width: min(320px, 80vw); height: 6px; background: rgba(255, 255, 255, .15); border-radius: 3px; overflow: hidden; }
.balken i { display: block; height: 100%; width: 5%; background: var(--gold); transition: width .3s; }
.klein { font-size: 13px; opacity: .8; }
.knoepfe { display: flex; flex-direction: column; gap: 10px; min-width: min(320px, 86vw); }
.knoepfe.zeile { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; min-width: 0; }
#menue .knoepfe button { font-size: 21px; padding: 14px 20px; box-shadow: var(--schatten); }
.fuss { position: absolute; bottom: 14px; font-size: 12px; opacity: .85; margin: 0; padding: 0 16px; }

.karte { align-items: center; justify-content: center; background: rgba(20, 24, 64, .5); backdrop-filter: blur(3px); padding: 16px; }
.karte > * { }
.karte.an { display: flex; }
.karte { flex-direction: column; }
.karte > h2, .karte > h3, .karte > p, .karte > label, .karte > div, .karte > table { width: min(560px, 100%); }
.karte.breit > * { width: min(860px, 100%); }
.karte { overflow-y: auto; }
.karte::before { content: ''; }
#profil, #freispiel, #turnier, #training, #hilfe, #infos, #ergebnis, #pause { color: var(--text); }
.karte > h2 { background: var(--gruen); color: var(--creme); padding: 14px 20px; border-radius: 14px 14px 0 0; font-size: 30px; letter-spacing: .03em; }
.karte > :not(h2) { background: var(--creme); padding-left: 20px; padding-right: 20px; }
.karte > :last-child { border-radius: 0 0 14px 14px; padding-bottom: 18px; }
.karte > h3 { padding-top: 14px; font-size: 18px; color: var(--gruen); text-transform: uppercase; letter-spacing: .06em; }
.karte > p { margin: 0; padding-top: 10px; line-height: 1.45; font-size: 15px; }
.karte label { display: flex; gap: 12px; align-items: center; padding-top: 14px; font-weight: 600; }
.karte input { flex: 1; font: 500 17px Inter, sans-serif; padding: 10px 12px; border-radius: 8px; border: 2px solid #cdbf98; background: #fffdf5; }
.reihe { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
.reihe > span { width: 92px; font-weight: 600; font-size: 14px; }
.farben { display: flex; flex-wrap: wrap; gap: 6px; }
.farben button { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.farben button.an { border-color: var(--gruen); transform: scale(1.1); }
.farben button.keine { background: repeating-linear-gradient(45deg, #fff 0 4px, #ddd 4px 8px) !important; }
.wahl { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.wahl.senkrecht { flex-direction: column; align-items: stretch; }
.wahl button { background: #e9dfbf; font-size: 15px; padding: 8px 12px; }
.wahl button.an { background: var(--gruen); color: var(--creme); }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding-top: 10px; }
.spalten h3 { font-size: 16px; color: var(--gruen); text-transform: uppercase; letter-spacing: .06em; }
.gegner { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding-top: 10px; }
.gegner button { text-align: left; text-transform: none; letter-spacing: 0; background: #fffaf0; border: 2px solid #e2d5ad; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.gegner button.an { border-color: var(--asche); background: #fff; box-shadow: 0 0 0 2px var(--asche); }
.gegner b { font-size: 17px; }
.gegner small { font: 400 12px Inter, sans-serif; color: #555; }
.gegner .sterne { color: var(--asche); font-size: 13px; letter-spacing: 1px; }
.gegner .punkt { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.tasten td { padding: 6px 8px; font-size: 14px; vertical-align: top; }
kbd { display: inline-block; font: 600 12px 'IBM Plex Mono', monospace; background: #fff; border: 1px solid #bbb; border-bottom-width: 3px; border-radius: 5px; padding: 2px 6px; margin: 1px; }
.gross { font: 700 34px 'Barlow Condensed', sans-serif; text-align: center; color: var(--gruen); }
.stat { border-collapse: collapse; }
.stat td { padding: 5px 8px; border-bottom: 1px solid #e3d7b4; font-size: 15px; }
.stat td:nth-child(2), .stat td:nth-child(3) { text-align: center; font-weight: 700; width: 70px; }
.stat tr:first-child td { font-family: 'Barlow Condensed'; font-size: 17px; color: var(--gruen); }

.turnierwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; padding-top: 14px; }
.turnierwahl button { text-transform: none; letter-spacing: 0; background: #fffaf0; border: 2px solid #e2d5ad; text-align: left; }
.baum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 14px; align-items: center; }
.baum .runde { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; height: 100%; }
.baum .runde h4 { margin: 0; font: 600 14px 'Barlow Condensed'; text-transform: uppercase; color: var(--gruen); letter-spacing: .06em; }
.baum .spiel { background: #fffaf0; border: 1px solid #dccd9f; border-radius: 8px; font-size: 13px; overflow: hidden; }
.baum .spiel div { display: flex; justify-content: space-between; padding: 5px 8px; gap: 6px; }
.baum .spiel div + div { border-top: 1px solid #eee2c0; }
.baum .spiel .sieger { font-weight: 700; background: #f0e5c3; }
.baum .spiel .ich { color: var(--asche); }
.baum .pokal { font-size: 40px; text-align: center; }

#hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 5; }
#hud.an { display: block; }
#tafel { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; background: rgba(36, 40, 98, .92); color: #fff; border-radius: 10px; font: 600 20px 'Barlow Condensed', sans-serif; overflow: hidden; box-shadow: var(--schatten); }
#tafel .z { display: flex; align-items: center; height: 32px; }
#tafel .z + .z { border-top: 1px solid rgba(255, 255, 255, .12); }
#tafel .n { padding: 0 12px 0 10px; min-width: 120px; display: flex; align-items: center; gap: 6px; }
#tafel .auf { width: 9px; height: 9px; border-radius: 50%; background: #f1d81e; visibility: hidden; }
#tafel .auf.an { visibility: visible; }
#tafel .s { width: 28px; text-align: center; opacity: .75; }
#tafel .g { width: 30px; text-align: center; background: rgba(255, 255, 255, .08); }
#tafel .p { width: 44px; text-align: center; background: var(--asche); height: 100%; display: flex; align-items: center; justify-content: center; }
#pauseKnopf { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; pointer-events: auto; padding: 8px 12px; background: rgba(10, 34, 22, .8); color: #fff; font-size: 14px; }
#meldung { position: absolute; top: 26%; left: 0; right: 0; text-align: center; font: 700 clamp(44px, 9vw, 86px) 'Barlow Condensed', sans-serif; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s; letter-spacing: .03em; }
#meldung.an { opacity: 1; transform: scale(1); }
#meldung.gut { color: #e7ff7a; } #meldung.schlecht { color: #ffb4a0; }
#hinweis { position: absolute; top: max(86px, calc(env(safe-area-inset-top) + 76px)); left: 10px; font: 700 18px 'Barlow Condensed'; color: var(--gold); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); text-transform: uppercase; letter-spacing: .05em; }
#tempo { position: absolute; right: 12px; top: 56px; font: 600 18px 'Barlow Condensed'; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .4s; }
#tempo.an { opacity: 1; }
#tipp { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: rgba(10, 34, 22, .75); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; max-width: 90vw; text-align: center; }
#tipp:empty { display: none; }

#touch { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
#touch.an { display: block; }
#touch { --k: clamp(58px, 12.5vmin, 104px); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch .stickfeld { position: absolute; left: 0; bottom: 0; width: 50%; height: 78%; pointer-events: auto; touch-action: none; }
#touch .geist { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: calc(var(--k) * 1.6); height: calc(var(--k) * 1.6); border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; text-align: center; font: 600 12px Inter, sans-serif; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: opacity .4s; }
#touch .stickfeld.benutzt .geist { opacity: 0; }
#touch .ring { position: absolute; width: calc(var(--k) * 1.6); height: calc(var(--k) * 1.6); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); display: none; pointer-events: none; }
#touch .ring.an { display: block; }
#touch .knauf { position: absolute; left: 50%; top: 50%; width: calc(var(--k) * .7); height: calc(var(--k) * .7); margin: calc(var(--k) * -.35) 0 0 calc(var(--k) * -.35); border-radius: 50%; background: rgba(255, 255, 255, .6); }
/* Schlagknöpfe im Bogen um den großen Topspin-Knopf, Größe nach Bildschirm (Handy klein, iPad groß) */
#touch .schlagknoepfe { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: calc(var(--k) * 3.4); height: calc(var(--k) * 2.6); pointer-events: none; }
#touch .schlagknoepfe button { position: absolute; width: var(--k); height: var(--k); border-radius: 50%; padding: 0; font-size: calc(var(--k) * .2); background: rgba(255, 255, 255, .8); touch-action: none; pointer-events: auto; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); --ladung: 0; }
#touch .schlagknoepfe button::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(#f1d81e calc(var(--ladung) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); pointer-events: none; }
#touch .schlagknoepfe button.gross { right: 0; bottom: 0; width: calc(var(--k) * 1.35); height: calc(var(--k) * 1.35); background: rgba(214, 242, 90, .92); font-size: calc(var(--k) * .24); }
#touch .schlagknoepfe [data-schlag="slice"] { right: calc(var(--k) * 1.5); bottom: 0; }
#touch .schlagknoepfe [data-schlag="lob"] { right: calc(var(--k) * .18); bottom: calc(var(--k) * 1.5); }
#touch .schlagknoepfe [data-schlag="stopp"] { right: calc(var(--k) * 1.35); bottom: calc(var(--k) * 1.22); width: calc(var(--k) * .88); height: calc(var(--k) * .88); }
#touch .schlagknoepfe button.power { right: calc(var(--k) * 2.6); bottom: calc(var(--k) * .1); width: calc(var(--k) * .82); height: calc(var(--k) * .82); background: rgba(255, 140, 60, .9); color: #fff; }
#touch .schlagknoepfe button.an { transform: scale(.92); background: #fff; }
#touch .schlagknoepfe button.power.an { background: #ff9d57; }
#drehen { display: none; position: absolute; left: 50%; top: 40%; transform: translateX(-50%); pointer-events: auto; background: rgba(10, 34, 22, .85); color: #fff; font: 600 14px Inter, sans-serif; text-transform: none; letter-spacing: 0; max-width: 80vw; }
@media (orientation: portrait) and (max-width: 700px) { #touch.an #drehen:not(.weg) { display: block; } }
body.touch #pauseKnopf { padding: 12px 16px; font-size: 16px; }
body.touch .knoepfe button, body.touch .wahl button { min-height: 44px; }
@media (pointer: coarse) { #tipp { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 112px); left: 10px; right: 10px; transform: none; font-size: 13px; } }
@media (max-width: 600px) { #tafel { font-size: 17px; } #tafel .n { min-width: 84px; } #tafel .z { height: 28px; } .baum { grid-template-columns: 1fr; } }
.karte > p.klein { opacity: 1; color: #5b5545; font-size: 13px; }
@media (min-width: 900px) { #profil.an { align-items: flex-start; padding-left: 5vw; } #profil > * { width: min(480px, 100%); } }
#profil.karte { backdrop-filter: none; background: transparent; }
.knoepfe.zeile { margin-top: 0; padding-top: 18px; }
.lektionen { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding-bottom: 4px; }
.lektionen .anzahl { color: var(--gruen); font-weight: 600; }
.sterne.gross { font-size: 40px; color: var(--asche); letter-spacing: 4px; }
#touch .schlagknoepfe button.power { grid-column: 1 / span 2; width: auto; height: 46px; border-radius: 23px; background: rgba(255, 140, 60, .85); color: #fff; }
/* Spezialtraining mit Helmut: dunkelgrüne Kante wie sein Polohemd */
.lektionen.spezial button { border-left: 4px solid #1b4d2e; }