/* DAS GROSSE SPIEL / THE GREAT GAME · Moderationsmodus v1.3 (22.10.2026) – shared/moderation/tgg-moderation.css
   Unverändert in jede Site kopieren. Einzige Site-Variable: --tgg-mod-acc (Akzentfarbe, Standard = --tgg-acc). */
:root{--tgg-mod-acc:var(--tgg-acc,#E10600);--tgg-mod-bg:rgba(8,8,8,.86);--tgg-mod-fg:#f5f5f5;--tgg-mod-mut:#b5b5b5}

/* Im Modus: Bedienelemente ausblenden (gemeinsame Bausteine + was die Seite mit hide:[…] markiert) */
html.tgg-mod-on .tgg-bar,html.tgg-mod-on .tgg-viewbar,html.tgg-mod-on .tgg-dock,html.tgg-mod-on .tgg-detail,
html.tgg-mod-on .tgg-mapctl,html.tgg-mod-on .tgg-mchint,html.tgg-mod-on .tgg-twohint,html.tgg-mod-on .tgg-backdrop,
html.tgg-mod-on .tgg-sheet,html.tgg-mod-on [data-tgg-mod-hide]{display:none!important}
html.tgg-mod-on [data-tgg-mod-dim]{opacity:.12!important;pointer-events:none!important}
html.tgg-mod-on{--tgg-h:0px}
html.tgg-mod-on.tgg-mod-idle,html.tgg-mod-on.tgg-mod-idle *{cursor:none!important}

/* Bauchbinde (Lower Third) */
.tgg-mod-root{position:fixed;inset:0;z-index:2147483000;pointer-events:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--tgg-mod-fg);-webkit-font-smoothing:antialiased}
.tgg-mod-root[hidden]{display:none}
.tgg-mod-card{position:absolute;left:clamp(16px,3.2vw,64px);bottom:clamp(16px,4.2vh,56px);width:min(62vw,1080px);max-width:calc(100vw - 32px);
 background:var(--tgg-mod-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-left:6px solid var(--tgg-mod-acc);
 border-radius:10px;padding:clamp(12px,1.5vw,28px) clamp(16px,1.9vw,34px);box-shadow:0 12px 40px rgba(0,0,0,.55);
 transition:opacity .28s ease,transform .28s ease;pointer-events:auto}
.tgg-mod-card.tgg-mod-swap{opacity:0;transform:translateY(10px)}
.tgg-mod-root.tgg-mod-nocard .tgg-mod-card{opacity:0;transform:translateY(16px);pointer-events:none}
.tgg-mod-top{display:flex;align-items:center;gap:12px;margin:0 0 .45em;font-size:clamp(12px,.95vw,18px);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tgg-mod-kick{color:var(--tgg-mod-acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tgg-mod-cnt{margin-left:auto;color:var(--tgg-mod-mut);font-variant-numeric:tabular-nums;letter-spacing:.06em;white-space:nowrap}
.tgg-mod-title{margin:0;font-size:clamp(22px,2.35vw,46px);line-height:1.1;font-weight:900;letter-spacing:-.015em;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tgg-mod-sum{margin:.5em 0 0;font-size:clamp(15px,1.3vw,25px);line-height:1.38;color:#dedede;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tgg-mod-sum:empty,.tgg-mod-meta:empty{display:none}
.tgg-mod-meta{margin:.6em 0 0;font-size:clamp(12px,.95vw,18px);color:var(--tgg-mod-mut);font-weight:600}
.tgg-mod-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);border-radius:0 0 10px 0;overflow:hidden}
.tgg-mod-bar i{display:block;height:100%;background:var(--tgg-mod-acc);width:0;transition:width .3s ease}

/* v1.3 Teleprompter / Volltext (Taste T): Bauchbinde klappt nach oben auf, nichts wird abgeschnitten, Vorlesetext scrollt.
   Bleibt links (Karte rechts sichtbar), lässt oben Platz für Steuerung/Hinweis und unten für das Wasserzeichen. */
.tgg-mod-notes{display:none}
.tgg-mod-root.tgg-mod-tpon .tgg-mod-card{box-sizing:border-box;display:flex;flex-direction:column;max-height:calc(100vh - clamp(16px,4.2vh,56px) - clamp(64px,9vh,110px));width:min(56vw,1000px)}
.tgg-mod-root.tgg-mod-tpon .tgg-mod-title,.tgg-mod-root.tgg-mod-tpon .tgg-mod-sum{display:block;-webkit-line-clamp:unset;overflow:visible;flex:none}
.tgg-mod-root.tgg-mod-tpon .tgg-mod-title{font-size:clamp(20px,1.9vw,38px)}
.tgg-mod-root.tgg-mod-tpon .tgg-mod-notes:not([hidden]){display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
 margin:.75em -.4em 0 0;padding:.7em .8em .4em 0;border-top:1px solid rgba(255,255,255,.14);
 font-size:clamp(17px,1.42vw,28px);line-height:1.5;color:#f1f1f1;font-weight:500;overflow-wrap:anywhere;
 scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.tgg-mod-notes p{margin:0 0 .75em;white-space:pre-line}.tgg-mod-notes p:last-child{margin-bottom:.2em}
.tgg-mod-notes::-webkit-scrollbar{width:6px}.tgg-mod-notes::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.tgg-mod-notes:focus{outline:none}
.tgg-mod-root.tgg-mod-tpon .tgg-mod-meta{flex:none}
.tgg-mod-ctl button[hidden]{display:none}
.tgg-mod-ctl button[aria-pressed="true"]{border-color:var(--tgg-mod-acc);color:#fff}

/* Wasserzeichen */
.tgg-mod-wm{position:absolute;right:clamp(14px,2vw,40px);bottom:clamp(12px,2.4vh,32px);display:flex;align-items:center;gap:8px;
 font-size:clamp(10px,.75vw,14px);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}
.tgg-mod-wm .tgg-mod-dots{display:inline-flex;gap:3px}.tgg-mod-wm .tgg-mod-dots i{width:.62em;height:.62em;border-radius:50%;display:block;opacity:.85}
.tgg-mod-wm .tgg-mod-dots i:nth-child(1){background:#E10600}.tgg-mod-wm .tgg-mod-dots i:nth-child(2){background:#F7931A}.tgg-mod-wm .tgg-mod-dots i:nth-child(3){background:#38bdf8}
.tgg-mod-wm .tgg-mod-site{font-weight:600;letter-spacing:.08em;opacity:.85}
.tgg-mod-wm .tgg-mod-site:empty{display:none}
/* v1.1 KI-Hinweis: dezent, aber auf Video (1280×720) lesbar; dünner Trennstrich davor */
.tgg-mod-wm .tgg-mod-ai{display:inline-flex;align-items:center;gap:8px;font-size:max(10px,.86em);font-weight:600;letter-spacing:.06em;text-transform:none;color:rgba(255,255,255,.8);opacity:.85}
.tgg-mod-wm .tgg-mod-ai::before{content:"";width:1px;height:1.05em;background:rgba(255,255,255,.45)}
.tgg-mod-wm .tgg-mod-ai[hidden],.tgg-mod-wm .tgg-mod-ai:empty{display:none}

/* Steuerung (nur sichtbar bei Mausbewegung) und Hinweis */
.tgg-mod-ctl{position:absolute;right:clamp(14px,2vw,40px);top:clamp(12px,2vh,28px);display:flex;gap:6px;pointer-events:auto;transition:opacity .3s}
.tgg-mod-idle .tgg-mod-ctl{opacity:0;pointer-events:none}
.tgg-mod-ctl button,.tgg-mod-btn{font:700 13px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#f5f5f5;background:rgba(10,10,10,.82);border:1px solid #3a3a3a;border-radius:8px;
 padding:8px 11px;cursor:pointer;min-width:36px;min-height:34px}
.tgg-mod-ctl button:hover,.tgg-mod-btn:hover{border-color:var(--tgg-mod-acc)}
.tgg-mod-ctl button:focus-visible,.tgg-mod-btn:focus-visible{outline:2px solid var(--tgg-mod-acc);outline-offset:2px}
.tgg-mod-hint{position:absolute;left:50%;top:clamp(12px,3vh,40px);transform:translateX(-50%);background:rgba(10,10,10,.88);border:1px solid #333;border-radius:999px;
 padding:8px 16px;font-size:14px;font-weight:600;color:#e5e5e5;white-space:nowrap;transition:opacity .5s;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
.tgg-mod-hint.tgg-mod-gone{opacity:0}
.tgg-mod-btn{position:fixed;left:14px;bottom:14px;z-index:900;display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.04em;opacity:.82}
.tgg-mod-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tgg-mod-acc)}
html.tgg-mod-on .tgg-mod-btn{display:none}

/* v1.2: Start-Knopf in der Leiste (button:'bar', direkt links vor .lang-switch) oder im eigenen Container (button:<Element>).
   Stil wie die Leisten-Bedienelemente (Sprachumschalter): klein, dunkel, dezent; gleiche Höhe wie .lang-switch. Mobil nur Symbol. */
.tgg-mod-btn--bar,.tgg-mod-btn--inline{position:static;z-index:auto;display:inline-flex;align-items:center;gap:7px;flex:none;opacity:1;min-width:0;min-height:0;
 font:700 14px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.01em;color:#d4d4d4;background:transparent;border:1px solid #525252;border-radius:8px;
 padding:7px 11px 7px 9px;white-space:nowrap;cursor:pointer;-webkit-font-smoothing:antialiased}
.tgg-mod-btn--bar::before,.tgg-mod-btn--inline::before{content:none}
.tgg-mod-btn--bar svg,.tgg-mod-btn--inline svg{display:block;width:16px;height:16px;flex:none;color:#a3a3a3}
.tgg-mod-btn--bar:hover,.tgg-mod-btn--inline:hover{background:#262626;color:#fff;border-color:#737373}
.tgg-mod-btn--bar:hover svg,.tgg-mod-btn--inline:hover svg{color:var(--tgg-mod-acc)}
.tgg-mod-btn--bar:focus-visible,.tgg-mod-btn--inline:focus-visible{outline:2px solid #38bdf8;outline-offset:-2px}
.tgg-bar .tgg-mod-btn--bar{margin-left:auto;margin-right:-8px}
.tgg-bar .tgg-mod-btn--bar+.lang-switch,.tgg-bar .tgg-slot:not(:empty)~.lang-switch{margin-left:0}
.tgg-bar .tgg-slot:not(:empty)~.tgg-mod-btn--bar{margin-left:0}
@media (max-width:900px){
 .tgg-mod-btn--bar .tgg-mod-btn-l{display:none}
 .tgg-mod-btn--bar{padding:7.4px 8px}
}
@media (max-width:640px){
 .tgg-bar .tgg-mod-btn--bar{margin-right:-2px;padding:5px 5px;border-color:#404040}
 /* Platz für das Symbol schaffen, damit alle drei Karten-Links sichtbar bleiben (nur wenn der Knopf da ist) */
 .tgg-bar .tgg-mod-btn--bar+.lang-switch a{padding:6px 4px;min-width:25px}
 .tgg-bar:has(.tgg-mod-btn--bar) .tgg-sites a{padding:6px 6px}
}

/* Hervorhebung für Seiten ohne eigene Karte (z. B. Hub): Element, das data-tgg-mod-cur trägt */
html.tgg-mod-on [data-tgg-mod-cur]{outline:3px solid var(--tgg-mod-acc)!important;outline-offset:6px;border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.55)!important;position:relative;z-index:5}

@media (max-width:760px){
 .tgg-mod-card{left:10px;right:10px;width:auto;bottom:10px;padding:12px 14px}
 .tgg-mod-title{font-size:20px;-webkit-line-clamp:3}.tgg-mod-sum{font-size:14.5px;-webkit-line-clamp:2}
 .tgg-mod-wm{top:10px;bottom:auto;left:10px;right:auto}.tgg-mod-wm .tgg-mod-site{display:none}.tgg-mod-wm .tgg-mod-ai{display:inline-flex}
 .tgg-mod-hint{top:auto;bottom:50%;white-space:normal;text-align:center;border-radius:12px}
}
@media (max-width:760px){
 /* v1.3 mobil: volle Breite, unter dem Wasserzeichen (oben) bis knapp über den unteren Rand */
 .tgg-mod-root.tgg-mod-tpon .tgg-mod-card{width:auto;max-height:calc(100vh - 54px);max-height:calc(100dvh - 54px)}
 .tgg-mod-root.tgg-mod-tpon .tgg-mod-title{font-size:19px}.tgg-mod-root.tgg-mod-tpon .tgg-mod-sum{font-size:14.5px}
 .tgg-mod-root.tgg-mod-tpon .tgg-mod-notes:not([hidden]){font-size:16px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){
 .tgg-mod-card,.tgg-mod-bar i,.tgg-mod-hint,.tgg-mod-ctl{transition:none!important}
 .tgg-mod-card.tgg-mod-swap{transform:none}
}
@media print{.tgg-mod-root,.tgg-mod-btn{display:none!important}}
@media (max-width:760px){
 /* v1.3.1: Bedienleiste (oben rechts) überlappte bei schmalen Screens den KI-Hinweis im Wasserzeichen (oben links).
    Mobil: Bedienleiste oben, Wasserzeichen+KI-Hinweis darunter; safe-area-bewusst. */
 .tgg-mod-ctl{top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px))}
 .tgg-mod-wm{top:calc(54px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));max-width:calc(100vw - 20px)}
 .tgg-mod-card{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
 .tgg-mod-root.tgg-mod-tpon .tgg-mod-card{max-height:calc(100vh - 96px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 96px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}