/*
 * HG 85 Köthen – Interner Bereich
 * Bootstrap = technisches Grundgerüst.
 * Diese Datei = eigene HG85-Optik.
 * Zentrale Vereinsfarben/Layoutwerte werden zusätzlich aus Tabelle `design` geladen.
 */
:root {
    --hg-primary: #07873D;
    --hg-primary-dark: #004D26;
    --hg-white: #FFFFFF;
    --hg-black: #090B0A;
    --hg-surface-light: #F5F7F6;
    --hg-bg: #090B0A;
    --hg-card: #141816;
    --hg-card-2: #1B211E;
    --hg-ink: #F5F7F6;
    --hg-muted: #AAB4AE;
    --hg-line: rgba(255,255,255,.12);
    --hg-sidebar: #050706;
    --hg-field: #F5F7F6;
    --hg-field-ink: #121713;
    --hg-font: Arial, Helvetica, sans-serif;
    --hg-radius: 28px;
    --hg-content-width: 1500px;
    --hg-gap: 20px;
    --hg-shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: var(--hg-font); color: var(--hg-ink); background: var(--hg-bg); }
a { text-decoration: none; }
code { color: #b7f5ca; }
.text-secondary { color: var(--hg-muted) !important; }

/* Formulare: bewusst invertiert zum dunklen Seitenhintergrund */
.form-label { color: var(--hg-ink); font-weight: 750; font-size: .88rem; }
.form-control,
.form-select,
.form-check-input {
    background-color: var(--hg-field);
    color: var(--hg-field-ink);
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: none !important;
}
.form-control::placeholder { color: #6e7772; }
.form-control:focus,
.form-select:focus {
    background-color: var(--hg-white);
    color: var(--hg-field-ink);
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 .22rem rgba(7,135,61,.18) !important;
}
.form-control:disabled,
.form-control[readonly] { background: #dfe4e1; color: #5d6661; }

/* Login */
.hg-login-body { min-height: 100vh; background: var(--hg-black); color: var(--hg-ink); }
.hg-login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.hg-login-brand { padding: clamp(40px, 8vw, 120px); color: var(--hg-white); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(145deg, #060806 0%, var(--hg-primary-dark) 145%); }
.hg-login-brand::after { content: ""; position: absolute; width: 520px; height: 520px; border: 70px solid rgba(255,255,255,.035); border-radius: 50%; right: -180px; bottom: -190px; }
.hg-login-mark, .hg-mark { font-weight: 900; letter-spacing: -4px; line-height: .85; }
.hg-login-mark { font-size: clamp(72px, 11vw, 150px); }
.hg-login-mark span, .hg-mark span { color: var(--hg-primary); }
.hg-login-kicker { margin: 28px 0 8px; font-weight: 800; letter-spacing: .24em; color: #9EE7B7; }
.hg-login-brand h1 { font-size: clamp(34px, 5vw, 68px); font-weight: 800; margin: 0; }
.hg-login-copy { color: rgba(255,255,255,.68); font-size: 1.15rem; max-width: 540px; margin-top: 18px; }
.hg-login-card { background: var(--hg-card); color: var(--hg-ink); padding: clamp(32px, 6vw, 86px); display: flex; flex-direction: column; justify-content: center; }
.hg-login-card-head h2 { color: var(--hg-white); font-size: 2.1rem; font-weight: 800; margin: 4px 0 8px; }
.hg-login-card-head p { color: var(--hg-muted); margin-bottom: 32px; }
.hg-eyebrow { color: #7DDA9C; font-size: .74rem; font-weight: 900; letter-spacing: .16em; }
.hg-primary-btn { background: var(--hg-primary); color: var(--hg-white); border: 0; border-radius: 12px; font-weight: 900; letter-spacing: .06em; }
.hg-primary-btn:hover, .hg-primary-btn:focus { background: var(--hg-primary-dark); color: var(--hg-white); }
.hg-setup-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.hg-setup-card { width: min(620px, 100%); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow); }
.hg-setup-title { color: var(--hg-white); font-weight: 850; margin-top: 6px; }

/* App shell */
.hg-app { min-height: 100vh; background: var(--hg-bg); }
.hg-sidebar { --bs-offcanvas-width: 284px; width: 284px; background: var(--hg-sidebar); color: var(--hg-white); position: fixed; inset: 0 auto 0 0; z-index: 1045; border: 0 !important; display: flex; flex-direction: column; }
.hg-brand { min-height: 112px; padding: 24px 22px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--hg-line); }
.hg-mark { font-size: 34px; }
.hg-brand-title { font-weight: 900; }
.hg-brand-sub { color: rgba(255,255,255,.48); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.hg-mobile-sidebar-head { border-bottom: 1px solid var(--hg-line); }
.hg-nav { padding: 18px 12px; display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.hg-nav a { color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 13px; min-height: 47px; padding: 0 15px; border-radius: 11px; font-weight: 700; }
.hg-nav a span { width: 24px; text-align: center; color: #7DDA9C; font-size: 1.15rem; }
.hg-nav a:hover { background: rgba(255,255,255,.07); color: var(--hg-white); }
.hg-nav a.active { color: var(--hg-white); background: var(--hg-primary); box-shadow: inset 4px 0 0 #B8F0C9; }
.hg-nav-label { padding: 22px 15px 6px; color: rgba(255,255,255,.32); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hg-sidebar-foot { margin-top: auto; padding: 18px 22px 24px; border-top: 1px solid var(--hg-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hg-user-mini { display: flex; flex-direction: column; min-width: 0; }
.hg-user-mini strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-user-mini span { color: rgba(255,255,255,.45); font-size: .75rem; }
.hg-logout { color: #7DDA9C; font-size: .8rem; font-weight: 800; }
.hg-main { min-height: 100vh; margin-left: 284px; display: flex; flex-direction: column; background: var(--hg-bg); }
.hg-topbar { min-height: 112px; padding: 22px clamp(20px, 4vw, 52px); display: flex; align-items: center; gap: 18px; background: rgba(9,11,10,.92); border-bottom: 1px solid var(--hg-line); position: sticky; top: 0; z-index: 1020; backdrop-filter: blur(12px); }
.hg-kicker { color: #7DDA9C; font-size: .67rem; font-weight: 900; letter-spacing: .17em; }
.hg-topbar h1 { color: var(--hg-white); margin: 2px 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 850; }
.hg-top-user { margin-left: auto; color: var(--hg-white); font-weight: 800; }
.hg-menu-btn { width: 44px; height: 44px; background: var(--hg-primary); color: var(--hg-white); border-radius: 10px; font-size: 1.25rem; }
.hg-content { width: min(100%, var(--hg-content-width)); margin: 0 auto; padding: clamp(20px, 4vw, 52px); flex: 1; }
.hg-footer { width: min(100%, var(--hg-content-width)); margin: 0 auto; padding: 18px clamp(20px, 4vw, 52px) 30px; color: var(--hg-muted); font-size: .78rem; }

/* Dashboard */
.hg-welcome { background: linear-gradient(120deg, var(--hg-primary-dark), var(--hg-primary)); color: var(--hg-white); border-radius: var(--hg-radius); padding: clamp(26px, 4vw, 46px); display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--hg-shadow); overflow: hidden; position: relative; }
.hg-welcome::before { content: ""; position: absolute; inset: auto -90px -150px auto; width: 300px; height: 300px; border: 42px solid rgba(255,255,255,.055); border-radius: 50%; }
.hg-welcome .hg-eyebrow { color: #C8F4D6; }
.hg-welcome h2 { margin: 6px 0; font-weight: 900; font-size: clamp(1.8rem, 4vw, 3.1rem); }
.hg-welcome p { margin: 0; color: rgba(255,255,255,.75); }
.hg-welcome-badge { font-weight: 950; font-size: clamp(44px, 8vw, 92px); letter-spacing: -6px; opacity: .95; white-space: nowrap; position: relative; z-index: 1; }
.hg-welcome-badge span { color: #B8F0C9; }
.hg-stat-grid { margin-top: 18px; }
.hg-stat-card { background: var(--hg-card); color: var(--hg-ink); border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: 22px; min-height: 142px; box-shadow: var(--hg-shadow); display: flex; flex-direction: column; }
.hg-stat-card > span { text-transform: uppercase; letter-spacing: .1em; font-weight: 850; font-size: .7rem; color: var(--hg-muted); }
.hg-stat-card strong { color: var(--hg-white); font-size: 2.6rem; line-height: 1; margin: 16px 0 5px; font-weight: 900; }
.hg-stat-card small { color: #7DDA9C; font-weight: 800; }
.hg-panel { background: var(--hg-card); color: var(--hg-ink); border: 1px solid var(--hg-line); border-radius: var(--hg-radius); padding: clamp(20px, 3vw, 30px); box-shadow: var(--hg-shadow); }
.hg-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.hg-panel-head h3 { color: var(--hg-white); margin: 3px 0 0; font-weight: 850; font-size: 1.35rem; }
.hg-panel-action { font-size: .78rem; color: #7DDA9C; font-weight: 850; }
.hg-game-list { display: flex; flex-direction: column; }
.hg-game-row { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hg-line); }
.hg-game-row:first-child { border-top: 0; }
.hg-game-date { width: 64px; flex: 0 0 64px; min-height: 62px; background: var(--hg-card-2); border-radius: 12px; display: grid; place-items: center; align-content: center; }
.hg-game-date strong { color: #7DDA9C; }
.hg-game-date span { color: var(--hg-muted); font-size: .75rem; }
.hg-game-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hg-game-main small { color: var(--hg-muted); }
.hg-game-main strong { color: var(--hg-white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-game-main b { color: #7DDA9C; padding: 0 5px; }
.hg-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--hg-line); border-radius: 14px; color: var(--hg-muted); padding: 30px; }
.hg-empty strong { color: var(--hg-white); margin-bottom: 4px; }
.hg-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hg-quick-grid a { min-height: 108px; background: var(--hg-card-2); border: 1px solid var(--hg-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: var(--hg-white); transition: .18s ease; }
.hg-quick-grid a:hover { transform: translateY(-2px); border-color: var(--hg-primary); box-shadow: var(--hg-shadow); }
.hg-quick-grid span { color: #7DDA9C; font-size: 1.55rem; }
.hg-quick-grid strong { font-size: .9rem; }
.hg-status-dot { background: rgba(72,194,107,.15); color: #8CE5A7; border: 1px solid rgba(140,229,167,.25); padding: 6px 10px; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }

.alert { border-radius: 12px; }

@media (max-width: 991.98px) {
    .hg-sidebar { position: fixed; }
    .hg-main { margin-left: 0; }
    .hg-topbar { min-height: 84px; }
}
@media (max-width: 767.98px) {
    .hg-login-shell { grid-template-columns: 1fr; }
    .hg-login-brand { min-height: 320px; padding: 42px 28px; }
    .hg-login-card { padding: 36px 26px 48px; }
    .hg-welcome-badge { display: none; }
}
@media (max-width: 575.98px) {
    .hg-content { padding: 18px 14px 28px; }
    .hg-stat-card { min-height: 126px; padding: 17px; }
    .hg-stat-card strong { font-size: 2.15rem; }
    .hg-quick-grid { grid-template-columns: 1fr 1fr; }
}

/* Verwaltung v4 */
body { font-family: var(--hg-font, Arial, Helvetica, sans-serif); font-size: var(--hg-font-size, 16px); }
h1,h2,h3,h4,h5,h6,.hg-brand-title,.hg-mark,.hg-login-mark { font-family: var(--hg-font-heading, var(--hg-font)); }
.hg-table { --bs-table-bg: transparent; --bs-table-color: var(--hg-ink); --bs-table-border-color: var(--hg-line); color: var(--hg-ink); }
.hg-table thead th { color: var(--hg-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border-bottom-width: 1px; white-space: nowrap; }
.hg-table tbody td { color: var(--hg-ink); border-color: var(--hg-line); padding-top: 15px; padding-bottom: 15px; }
.hg-table td strong { color: var(--hg-white); display: block; }
.hg-table td small { color: var(--hg-muted); display: block; margin-top: 2px; }
.hg-outline-btn { color: #9EE7B7; border: 1px solid rgba(158,231,183,.35); background: transparent; border-radius: 10px; font-weight: 800; }
.hg-outline-btn:hover { background: var(--hg-primary); border-color: var(--hg-primary); color: var(--hg-white); }
.hg-pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.hg-pill.is-on { background: rgba(72,194,107,.15); color: #8CE5A7; }
.hg-pill.is-off { background: rgba(220,80,80,.14); color: #F1A0A0; }
.form-check-input { background-color: #fff; border-color: #aab2ad; }
.form-check-input:checked { background-color: var(--hg-primary); border-color: var(--hg-primary); }
.form-check-label { color: var(--hg-ink); }
.form-text { color: var(--hg-muted); }
.hg-color-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.form-control-color { width: 64px; min-height: 48px; padding: 5px; }
.hg-savebar { display: flex; align-items: center; justify-content: space-between; gap: 24px; position: sticky; bottom: 16px; z-index: 10; }
.hg-savebar h3 { color: var(--hg-white); }
.hg-savebar p { color: var(--hg-muted); }
@media (max-width: 767.98px) { .hg-savebar { flex-direction: column; align-items: stretch; } }

/* HG85 v5: typografische Designvariablen */
body { font-size: var(--hg-font-size,16px); }
h1,h2,h3,h4,h5,h6,.hg-brand-title,.hg-login-mark,.hg-mark,.hg-eyebrow { font-family: var(--hg-font-heading, var(--hg-font)); }
.hg-font-preview h2 { font-size: clamp(1.8rem,4vw,3rem); margin: 16px 0; }
.hg-font-preview p { max-width: 65ch; }
.hg-font-preview-actions { display:flex; gap:12px; flex-wrap:wrap; margin:20px 0; }
.hg-font-preview-actions span { border:1px solid var(--hg-line); border-radius:8px; padding:7px 12px; font-size:.8rem; }
\n\n

/* HG85 v7: natives Formular-Dropdown mit Font-Vorschau */
.hg-native-font-select {
    min-height: 50px;
    font-size: 1.08rem;
}
.hg-native-font-select option {
    font-size: 18px;
    padding: 8px;
}

/* HG85 v9 – einzelnes Font-Dropdown mit echter optischer Vorschau */
.hg-font-combo{position:relative}
.hg-font-combo__toggle{width:100%;text-align:left;display:flex;align-items:center;min-height:50px;background:#fff;color:#111;border:1px solid #cfd5d1;border-radius:12px;padding:10px 42px 10px 14px;overflow:hidden}
.hg-font-combo__toggle span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.02rem}
.hg-font-combo__menu{display:none;position:absolute;z-index:2000;left:0;right:0;top:calc(100% + 6px);background:#fff;color:#111;border:1px solid #cfd5d1;border-radius:14px;box-shadow:0 20px 55px rgba(0,0,0,.34);overflow:hidden}
.hg-font-combo.is-open .hg-font-combo__menu{display:block}
.hg-font-combo__search-wrap{padding:10px;border-bottom:1px solid #e5e8e6;background:#f7f9f8}
.hg-font-combo__list{max-height:360px;overflow:auto;padding:6px}
.hg-font-combo__option{width:100%;border:0;background:#fff;color:#111;text-align:left;border-radius:9px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;cursor:pointer}
.hg-font-combo__option:hover,.hg-font-combo__option:focus{background:#eef7f1;outline:none}
.hg-font-combo__name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-font-combo__sample{opacity:.72;white-space:nowrap}
.hg-font-combo__status{padding:8px 12px;background:#f7f9f8;border-top:1px solid #e5e8e6;font:12px/1.4 Arial,sans-serif;color:#66706a}
@media(max-width:700px){.hg-font-combo__sample{display:none}.hg-font-combo__list{max-height:300px}}

/* HG85 v17 – Designverwaltung mit responsiver Live-Vorschau */
.hg-design-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    gap: 24px;
    align-items: start;
}
.hg-design-controls { min-width: 0; }
.hg-design-preview {
    position: sticky;
    top: 132px;
    min-width: 0;
}
.hg-design-preview__panel { padding: 20px; }
.hg-design-preview__head { margin-bottom: 8px; }
.hg-design-preview__help {
    margin: 0 0 14px;
    color: var(--hg-muted);
    font-size: .8rem;
}
.hg-preview-devices {
    display: inline-flex;
    padding: 4px;
    gap: 3px;
    border: 1px solid var(--hg-line);
    border-radius: 11px;
    background: var(--hg-card-2);
}
.hg-preview-devices button {
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hg-muted);
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}
.hg-preview-devices button.is-active {
    background: var(--hg-primary);
    color: #fff;
}
.hg-preview-stage {
    width: 100%;
    min-height: 560px;
    padding: 10px;
    display: flex;
    justify-content: center;
    overflow: auto;
    border-radius: 14px;
    background: #151a17;
    border: 1px solid var(--hg-line);
}
.hg-preview-stage iframe {
    display: block;
    width: 100%;
    height: 540px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 9px;
    background: #fff;
    transition: width .24s ease;
}
.hg-preview-stage[data-device="tablet"] iframe { width: 768px; }
.hg-preview-stage[data-device="mobile"] iframe { width: 390px; }

@media (max-width: 1399.98px) {
    .hg-design-workspace { grid-template-columns: 1fr; }
    .hg-design-preview { position: static; order: -1; }
    .hg-preview-stage { min-height: 520px; }
    .hg-preview-stage iframe { height: 500px; }
}
@media (max-width: 575.98px) {
    .hg-design-preview__head { align-items: flex-start; flex-direction: column; }
    .hg-preview-devices { width: 100%; }
    .hg-preview-devices button { flex: 1; }
    .hg-preview-stage { min-height: 475px; padding: 6px; justify-content: flex-start; }
    .hg-preview-stage iframe { height: 460px; }
}