:root{--ink:#15342f;--muted:#61756f;--paper:#f7f3e9;--cream:#eee7d7;--white:#fffdf7;--teal:#1fa58f;--teal-dark:#147969;--coral:#ef765f;--gold:#edb84f;--red:#c94c45;--shadow:0 18px 50px rgba(20,52,47,.13);--radius:22px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Inter,"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}
.app-shell{min-height:100vh}.screen{display:none;min-height:100vh;padding:92px clamp(24px,5vw,76px) 36px}.screen.is-active{display:block}.topbar{height:68px;position:fixed;z-index:50;left:0;right:0;top:0;padding:0 clamp(20px,4vw,60px);display:flex;align-items:center;justify-content:space-between;background:rgba(247,243,233,.9);border-bottom:1px solid rgba(21,52,47,.1);backdrop-filter:blur(12px)}.topbar[hidden]{display:none}.brand-button{border:0;background:none;color:var(--ink);font-family:"League Spartan";font-weight:800;letter-spacing:.1em;font-size:19px}.mini-pyramid{color:var(--gold);margin-right:8px}.icon-button{width:42px;height:42px;border:1px solid rgba(21,52,47,.18);border-radius:50%;background:var(--white);color:var(--ink);font-size:22px;display:grid;place-items:center}
.hero-screen{position:relative;overflow:hidden;background:linear-gradient(135deg,#123a35 0%,#174a42 66%,#11342f 100%);color:var(--white);padding:clamp(30px,6vw,90px);isolation:isolate}.hero-screen.is-active{display:flex;align-items:center}.hero-content{position:relative;z-index:2;width:50%;max-width:720px}.eyebrow,.step-label,.panel-kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.eyebrow{color:#8fe2d2}.hero-content h1{font-family:"League Spartan";font-size:clamp(64px,10vw,150px);line-height:.8;margin:22px 0 30px;letter-spacing:-.04em}.hero-copy{font-size:clamp(22px,3vw,39px);margin:0 0 44px;color:#dceee9}.primary-button,.secondary-button,.text-button,.shuffle-button{border:0;border-radius:14px;padding:15px 22px;font-weight:700;transition:transform .15s,box-shadow .15s,background .15s}.primary-button{background:var(--gold);color:#2f321d;box-shadow:0 8px 24px rgba(237,184,79,.25)}.primary-button:hover,.secondary-button:hover,.shuffle-button:hover{transform:translateY(-2px)}.primary-button.large{font-size:18px;padding:18px 28px}.hero-start{font-size:20px;padding:19px 27px}.hero-start span{margin-left:18px}.hero-pyramid{position:absolute;right:4vw;bottom:8vh;width:min(44vw,700px);filter:drop-shadow(0 30px 40px rgba(0,0,0,.3));transform:perspective(800px) rotateY(-3deg)}.hero-tier{min-height:120px;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.68);font:bold 44px "League Spartan";background:rgba(255,255,255,.04)}.hero-tier-top{width:34%;margin:auto;clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:38px}.hero-tier-middle{width:68%;margin:auto}.hero-tier-bottom{width:100%}.hero-tier span{width:50%;height:100%;display:grid;place-items:center;border-right:2px solid rgba(255,255,255,.35)}.hero-tier-bottom span{width:33.33%}.hero-tier span:last-child{border:0}.sun-disc{position:absolute;width:48vw;height:48vw;border-radius:50%;right:-12vw;top:-16vw;background:radial-gradient(circle,#eeb94e 0 2%,rgba(238,185,78,.28) 2% 40%,transparent 41%);opacity:.75}.privacy-note{position:absolute;left:clamp(30px,6vw,90px);bottom:28px;color:#a6c7c0;font-size:13px}
.page-heading{max-width:760px;margin:0 auto 34px}.page-heading.centered{text-align:center}.page-heading h2{font:800 clamp(34px,5vw,62px)/1 "League Spartan";margin:8px 0}.page-heading p:not(.step-label){color:var(--muted);font-size:18px;margin:14px 0}.step-label,.panel-kicker{color:var(--teal)}.setup-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:.85fr 1.4fr;gap:24px}.panel{background:var(--white);border:1px solid rgba(21,52,47,.1);border-radius:var(--radius);padding:25px;box-shadow:var(--shadow)}.panel-heading-row{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:18px}.panel h3{font-size:22px;margin:4px 0}.count-badge{background:var(--cream);padding:7px 11px;border-radius:999px;font-weight:600;font-size:13px}.roster-panel textarea{width:100%;height:300px;border:1px solid #cfd8d4;border-radius:14px;background:#fbfaf5;padding:16px;resize:vertical;line-height:1.7}.action-row{display:flex;gap:8px;margin-top:14px}.action-row.wrap{flex-wrap:wrap}.secondary-button{background:var(--cream);color:var(--ink);border:1px solid rgba(21,52,47,.12)}.secondary-button.compact{padding-inline:14px}.shuffle-button{background:#daf1eb;color:var(--teal-dark);padding:10px 14px}.hint,.drag-note{color:var(--muted);font-size:14px}.team-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.team-box{border-radius:16px;padding:15px;min-height:285px}.team-a-box{background:#e0f3ee;border:1px solid #acdcd2}.team-b-box{background:#fce8e3;border:1px solid #f3c0b5}.team-box label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.team-box input{display:block;width:100%;border:0;border-bottom:2px solid currentColor;background:transparent;padding:6px 0 8px;color:var(--ink);font-weight:700;font-size:18px}.team-box ul{list-style:none;padding:0;margin:12px 0;display:flex;flex-wrap:wrap;gap:7px}.team-box li{background:rgba(255,255,255,.8);border:1px solid rgba(21,52,47,.12);border-radius:999px;padding:8px 11px;font-size:14px;cursor:pointer}.page-actions{max-width:1320px;margin:28px auto 0;display:flex;align-items:center;justify-content:space-between}.text-button{background:transparent;color:var(--muted)}
.rules-wrap{max-width:1060px;margin:auto}.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.rule-card{background:var(--white);border:1px solid rgba(21,52,47,.1);border-radius:var(--radius);padding:28px;min-height:245px;box-shadow:var(--shadow)}.rule-number{width:42px;height:42px;border-radius:50%;background:var(--teal);color:white;display:grid;place-items:center;font:bold 20px "League Spartan"}.rule-card h3{font-size:22px;margin:25px 0 10px}.rule-card p{line-height:1.65;color:var(--muted)}.rule-card strong:first-child{color:var(--teal)}.rule-card strong:last-child{color:var(--red)}.points-legend{margin:25px auto;background:var(--ink);color:white;border-radius:16px;display:flex;justify-content:center;gap:40px;padding:16px}.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px}.dot.easy{background:var(--teal)}.dot.medium{background:var(--gold)}.dot.hard{background:var(--coral)}
.game-screen{padding:84px 20px 18px;background:#ebe4d5;min-height:100vh}.scoreboard{max-width:1420px;margin:0 auto 12px;display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;gap:20px}.score-team{height:86px;border-radius:18px;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;color:white;box-shadow:var(--shadow)}.score-a{background:var(--teal-dark)}.score-b{background:var(--coral)}.score-team span{font-weight:700;font-size:clamp(16px,2vw,23px)}.score-team strong{font:800 48px "League Spartan"}.timer-wrap{text-align:center}.timer-label{display:block;font-size:10px;font-weight:800;letter-spacing:.18em}.timer-wrap time{display:block;font:800 48px "League Spartan";line-height:1}.timer-track{height:6px;background:#d4cdbf;border-radius:8px;margin-top:7px;overflow:hidden}.timer-track span{display:block;width:100%;height:100%;background:var(--teal);transition:width .5s linear}.timer-wrap.warning time{color:var(--red)}.timer-wrap.warning .timer-track span{background:var(--red)}.game-stage{position:relative;max-width:1120px;margin:auto}.turn-pill{width:max-content;max-width:100%;margin:0 auto 8px;background:var(--ink);color:white;border-radius:999px;padding:7px 18px;font-size:12px;font-weight:800;letter-spacing:.12em}.pyramid{clip-path:polygon(50% 0,100% 100%,0 100%);height:min(62vh,640px);display:grid;grid-template-rows:32% 30% 38%;gap:4px;background:var(--ink);isolation:isolate}.tier-row{display:grid;gap:4px}.middle-row{grid-template-columns:1fr 1fr}.bottom-row{grid-template-columns:repeat(3,1fr)}.word-card{position:relative;display:flex;align-items:center;justify-content:center;padding:28px 12px 52px;overflow:hidden;transition:filter .25s,opacity .25s,transform .2s}.hard-card{background:#ef806b;padding-top:50px}.medium-card{background:#edc062}.easy-card{background:#43ae9a}.word-card .word{font:800 clamp(18px,2.3vw,34px)/1.05 "League Spartan";text-align:center;overflow-wrap:anywhere;hyphens:auto;max-width:90%}.points-tag{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.12em;background:rgba(255,255,255,.55);padding:4px 7px;border-radius:99px}.judge-controls{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:10px}.judge-controls button{border:0;width:42px;height:36px;border-radius:9px;color:white;font:bold 25px/1 sans-serif;box-shadow:0 3px 8px rgba(0,0,0,.14)}.judge-controls .wrong{background:var(--red)}.judge-controls .correct{background:var(--teal-dark)}.word-card:not(.live) .judge-controls{visibility:hidden}.word-card.resolved{filter:saturate(.2);opacity:.58}.word-card.correct-answer::after,.word-card.wrong-answer::after{position:absolute;font:bold clamp(48px,7vw,90px) sans-serif;color:white;text-shadow:0 2px 10px rgba(0,0,0,.3)}.word-card.correct-answer::after{content:'✓'}.word-card.wrong-answer::after{content:'×'}.word-card.resolved .word{visibility:hidden}.pre-round{position:absolute;inset:0;z-index:5;clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(21,52,47,.96);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:12%;text-align:center}.pre-round.hidden{display:none}.roles{display:flex;align-items:center;gap:clamp(20px,5vw,70px)}.roles div{display:flex;flex-direction:column}.roles span{font-size:11px;letter-spacing:.14em;color:#9cc5bd;font-weight:700}.roles strong{font:800 clamp(25px,4vw,50px) "League Spartan";margin-top:6px}.role-arrow{font-size:34px!important;color:var(--gold)!important}.round-start{font-size:18px;margin-top:28px}.pre-round>p{color:#b8d0cb;font-size:13px}.game-footer{max-width:1420px;margin:12px auto 0;display:flex;justify-content:space-between;align-items:center}.game-footer>span{font-weight:800;color:var(--muted)}.danger-outline{color:var(--red);border-color:#dfa9a3}
dialog{border:0;padding:0;border-radius:24px;box-shadow:0 30px 100px rgba(21,52,47,.3);background:transparent;color:var(--ink);max-width:min(92vw,680px);width:100%}dialog::backdrop{background:rgba(13,34,31,.65);backdrop-filter:blur(4px)}.dialog-card{background:var(--white);border-radius:24px;padding:28px}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading h2,.dialog-card h2{font:800 33px "League Spartan";margin:5px 0 20px}.saved-class-list{display:grid;gap:10px;max-height:55vh;overflow:auto}.saved-class{border:1px solid #d9dfdc;border-radius:14px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}.saved-class strong{display:block}.saved-class small{color:var(--muted)}.saved-class-actions{display:flex;gap:7px}.saved-class-actions button{border:0;border-radius:9px;padding:8px 11px;font-weight:700}.load-saved{background:#d9f1eb;color:var(--teal-dark)}.delete-saved{background:#f8dfda;color:var(--red)}.small-dialog label{display:block;font-weight:700;margin:14px 0 7px}.small-dialog input{width:100%;padding:14px;border:1px solid #cad4d0;border-radius:12px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.result-card{text-align:center;padding:38px}.result-icon{display:grid;place-items:center;margin:0 auto 12px;width:64px;height:64px;border-radius:50%;background:var(--gold);font-size:30px}.result-icon.trophy{background:var(--teal);color:white}.result-card p:not(.step-label){color:var(--muted);font-size:18px;line-height:1.5}.centered-actions{justify-content:center}.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translate(-50%,120px);opacity:0;background:var(--ink);color:white;padding:12px 20px;border-radius:12px;box-shadow:var(--shadow);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.hero-content{width:100%;align-self:flex-start;margin-top:10vh}.hero-pyramid{width:82vw;right:-20vw;opacity:.35}.setup-grid,.rules-grid{grid-template-columns:1fr}.scoreboard{grid-template-columns:1fr 150px 1fr}.score-team{padding:10px;height:70px}.score-team strong{font-size:36px}.score-team span{font-size:13px}.pyramid{height:58vh}.word-card{padding-inline:5px}.points-legend{flex-wrap:wrap;gap:12px 25px}.rule-card{min-height:auto}.game-screen{padding-inline:10px}}
@media(max-width:620px){.screen{padding-inline:14px}.team-columns{grid-template-columns:1fr}.roles{gap:14px}.scoreboard{grid-template-columns:1fr 105px 1fr;gap:5px}.score-team{flex-direction:column;height:74px;padding:7px}.score-team strong{font-size:30px}.timer-wrap time{font-size:34px}.word-card .word{font-size:15px}.judge-controls{gap:4px}.judge-controls button{width:34px;height:31px}.game-footer .secondary-button{padding:10px;font-size:12px}}
@media(orientation:landscape) and (max-height:700px){.game-screen{padding-top:72px}.scoreboard{margin-bottom:5px}.score-team{height:60px}.score-team strong{font-size:35px}.timer-wrap time{font-size:36px}.pyramid{height:calc(100vh - 190px)}.game-footer{margin-top:5px}.word-card{padding-bottom:39px}.judge-controls button{height:31px}.pre-round{padding-top:8%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Die farbigen Flächen bilden die Pyramide; Texte selbst werden nicht beschnitten. */
.pyramid{position:relative;clip-path:none;background:transparent;overflow:visible}
.tier-row{margin-inline:auto}
.middle-row{width:68%}
.bottom-row{width:100%}
.word-card{z-index:0;overflow:visible;background:transparent}
.word-card::before{content:"";position:absolute;inset:0;z-index:-1}
.hard-card{width:34%;margin-inline:auto}
.hard-card::before{background:#ef806b;clip-path:polygon(50% 0,100% 100%,0 100%)}
.medium-card::before{background:#edc062}
.easy-card::before{background:#43ae9a}
.middle-row .word-card:first-child::before{clip-path:polygon(35% 0,100% 0,100% 100%,0 100%)}
.middle-row .word-card:last-child::before{clip-path:polygon(0 0,65% 0,100% 100%,0 100%)}
.bottom-row .word-card:first-child::before{clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
.bottom-row .word-card:last-child::before{clip-path:polygon(0 0,66% 0,100% 100%,0 100%)}
.word-card .word{position:relative;z-index:1;max-width:96%}
.middle-row .word-card:first-child .word,
.bottom-row .word-card:first-child .word{margin-left:24%;text-align:right}
.middle-row .word-card:last-child .word,
.bottom-row .word-card:last-child .word{margin-right:24%;text-align:left}

/* JG-Produktmarke */
.brand-button{display:flex;align-items:center;gap:9px}
.mini-logo{width:34px;height:34px;object-fit:contain;background:var(--ink);border-radius:8px}
.hero-content h1{display:flex;align-items:center;gap:clamp(10px,1.5vw,24px);font-size:clamp(48px,7.6vw,116px)}
.title-logo{width:.82em;height:.82em;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.3))}
.title-word{color:inherit}
.hero-pyramid{height:auto;overflow:visible}
.hero-copyright{position:absolute;z-index:3;top:22px;right:clamp(24px,4vw,64px);margin:0;color:rgba(255,253,247,.7);font-size:clamp(11px,1vw,14px);font-weight:500;letter-spacing:.02em}
.hero-corner-brand{position:absolute;z-index:3;top:18px;right:clamp(24px,4vw,64px);display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.jgames-logo{display:block;width:clamp(170px,20vw,300px);height:auto;filter:drop-shadow(0 7px 12px rgba(0,0,0,.25))}
.hero-corner-brand .hero-copyright{position:static;text-align:right}
@media(max-width:620px){.hero-corner-brand{top:14px;right:16px}.jgames-logo{width:150px}.hero-corner-brand .hero-copyright{font-size:9px}}

/* Kompakte Klassenverwaltung; die Seitennavigation bleibt unverändert. */
.roster-panel .action-row{gap:6px}
.roster-panel .action-row .secondary-button{padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.2;white-space:nowrap}

/* Durchgehende Spielpyramide und Rollenanzeige */
.pyramid::before{content:"";position:absolute;inset:0;z-index:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(to bottom,#ef806b 0 calc(32% - 2px),var(--ink) calc(32% - 2px) calc(32% + 2px),#edc062 calc(32% + 2px) calc(62% - 2px),var(--ink) calc(62% - 2px) calc(62% + 2px),#43ae9a calc(62% + 2px) 100%)}
.pyramid,.pyramid .tier-row{gap:0}
.pyramid .word-card::before{display:none}
.pyramid .word-card{z-index:1}
.middle-row{width:62%}
.hard-card{width:32%}
.middle-row .word-card:last-child{border-left:4px solid var(--ink)}
.bottom-row .word-card:not(:first-child)::before{display:block;inset:0 auto 0 -4px;width:4px;background:var(--ink);clip-path:none}
.bottom-row .judge-controls{bottom:16px}
.turn-pill{position:relative;z-index:10}
.score-copy{min-width:0;display:flex;flex-direction:column;gap:5px}
.score-copy>span{font-weight:700;font-size:clamp(16px,2vw,23px)}
.score-copy small{display:block;width:max-content;max-width:100%;padding:4px 9px;border-radius:7px;background:rgba(0,0,0,.16);color:rgba(255,255,255,.78);font-size:clamp(10px,1.15vw,14px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-copy small.is-active{background:rgba(255,255,255,.2);color:white}