/* Magische Tierwesen -- modernes, responsives Design, angelehnt an die
   Hogwarts-Legacy-Aesthetik: tiefes Nachthimmel-Lila, geschmiedetes Gold,
   Pergament-Karten mit ornamentalen Rahmen, Buchdruck-Ueberschriften. */

@import url('vendor/fonts/fonts.css'); /* lokal statt Google Fonts, 08.10.2026 */

:root {
    --bg-deep: #140d24;
    --bg-mid: #1a1330;
    --bg-glow: #2c1f4a;
    --panel: #241a3d;
    --panel-2: #2c2049;
    --panel-3: #3a2a5c;
    --border: #6b5490;
    --border-soft: #4a3768;
    --gold: #d4af37;
    --gold-bright: #e8c96b;
    --gold-pale: #ffe9a8;
    --ink: #2b1d0e;
    --parchment: #f0e6d2;
    --muted: #f0eaf7;
    --wine: #6b2f3f;
    --emerald: #2f5c40;
    --radius: 10px;
    --shadow: 0 4px 18px rgba(0,0,0,0.45);
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }

a, a:Visited, a:Active { color: var(--gold-bright); text-decoration: underline; }
a:Hover { text-decoration: none; color: var(--gold-pale); }
a.Menu, a.Menu:Visited, a.Menu:Active { text-decoration: none; }

body {
    font-family: 'EB Garamond', 'Trebuchet MS', 'Segoe UI', arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: normal;
    color: var(--parchment);
    background-color: var(--bg-mid);
    background-image:
        radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(107,84,144,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 1000px 800px at 100% 10%, rgba(107,47,63,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at top, var(--bg-glow) 0%, var(--bg-deep) 70%);
    background-attachment: fixed;
    margin: 0;
    text-decoration: none;
}

h1, h2, h3, h4, h5 {
    font-family: 'Cinzel', 'Trebuchet MS', serif;
    color: var(--gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    letter-spacing: 0.02em;
    font-weight: 700;
}
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3.body, h3 { font-size: 1.15rem; }

li { margin: 3px 0px; }
ul { margin: 15px; }

img { max-width: 100%; height: auto; }
/* blank.gif war im alten Tabellen-Layout ein 1x1-Spacer, der per width/height-
   Attribut auf beliebige Groessen "gestreckt" wurde, um Spaltenbreiten zu
   erzwingen -- mit unserem Flexbox-Layout nicht mehr noetig, und durch die
   globale img{height:auto}-Regel wuerde das 1x1-Bild sonst quadratisch auf
   die width="..." aufgeblasen (sichtbare Luecken). Einfach ausblenden. */
img[src="blank.gif"] { display: none; }

table { border: none; border-collapse: collapse; }
td { font-size: 15px; border: none; padding: 4px 7px; }
th {
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--gold);
    padding: 8px 10px;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    color: var(--gold-bright);
}

/* ---------- Layout-Gerueste (ersetzen die alten Tabellen-Hacks) ---------- */

.hero-shell { width: 100%; margin: 0 0 24px; padding: 0; }
.hero-banner { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.hero-cta {
    margin-top: -18px; position: relative; z-index: 1;
    max-width: 620px; margin-left: auto; margin-right: auto;
    text-align: center; padding: 22px 30px;
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    border: 1px solid var(--gold); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero-cta h1 { margin: 0 0 6px; font-size: 1.6rem; }
.hero-cta p { margin: 0 0 16px; color: var(--muted); }
.hero-cta-button { display: inline-block; font-size: 1.05rem; padding: 10px 26px; text-decoration: none; }
@media (max-width: 560px) {
    .hero-cta { margin-top: 12px; padding: 18px 20px; }
    .hero-cta h1 { font-size: 1.25rem; }
}

.startseite-teaser { padding: 6px 4px; }
.startseite-teaser a { font-weight: 600; }

.site-footer {
    max-width: 1240px; margin: 30px auto 0; padding: 18px 16px;
    border-top: 1px solid var(--border-soft);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    font-size: 0.85rem; color: var(--muted);
}
.site-footer-brand { font-family: 'Cinzel', serif; color: var(--gold-bright); font-weight: 700; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.site-footer-links a { color: var(--muted); text-decoration: none; }
.site-footer-links a:hover { color: var(--gold-bright); }

.site-shell { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; }

.brand-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(58,42,92,0.55), rgba(20,13,36,0.2));
    border-bottom: 1px solid var(--border-soft);
}
.brand-bar a { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-bar .brand-crest { height: 52px; width: auto; border-radius: 8px; }
.brand-bar .brand-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--gold-bright);
    letter-spacing: 0.03em;
}

.site-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    padding: 0 16px;
}
.site-grid .site-left { flex: 1 1 220px; max-width: 260px; }
.site-grid .site-main { flex: 3 1 480px; min-width: 280px; }
.site-grid .site-right { flex: 1 1 220px; max-width: 280px; }

.game-header-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
    width: 100%; margin: 0 0 20px; padding: 22px 28px;
    background: linear-gradient(90deg, var(--bg-deep) 0%, var(--panel) 55%, transparent 100%),
        url('Branding/castle-banner.jpg') right center / 420px 100% no-repeat;
    border-bottom: 1px solid var(--gold);
}
.game-header-titel h1 { margin: 0; font-size: 1.7rem; }
.game-header-titel p { margin: 2px 0 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.game-header-user { font-size: 0.95rem; white-space: nowrap; }
.game-header-user i { color: var(--gold-bright); margin-right: 4px; }
.game-header-sep { margin: 0 10px; color: var(--border); }
@media (max-width: 560px) {
    .game-header-banner { background-image: none; padding: 16px 18px; }
    .game-header-titel h1 { font-size: 1.3rem; }
}

.game-shell { max-width: 1280px; margin: 0 auto; padding: 0 16px 40px; }
.game-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.game-sidebar { flex: 0 1 240px; min-width: 220px; }
.game-sidebar .crest-wrap { text-align: center; margin-bottom: 10px; }
.game-sidebar .crest-wrap img {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(212,175,55,0.35), var(--shadow);
    background: radial-gradient(circle, var(--panel-3), var(--bg-deep));
}
.spieler-karte { text-align: center; margin-bottom: 14px; }
.spieler-name { font-family: 'Cinzel', serif; color: var(--gold-bright); font-size: 1.1rem; }
.spieler-level { font-size: 0.8rem; color: var(--muted); }
.game-main { flex: 1 1 520px; min-width: 280px; }

@media (max-width: 860px) {
    .site-grid, .game-grid { flex-direction: column; }
    .site-grid .site-left, .site-grid .site-main, .site-grid .site-right,
    .game-sidebar, .game-main { max-width: 100%; flex-basis: auto; }
    .game-sidebar .crest-wrap img { width: 110px; height: 110px; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    .brand-bar { padding: 10px 14px; }
    .brand-bar .brand-title { font-size: 1.05rem; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
}

/* Horizontal scrollende Datentabellen auf schmalen Bildschirmen, statt
   Layout-Bruch -- wird per JS/PHP-Wrapper (.table-scroll) um breite
   Rasteransichten (Freigehege, Reaktoren, Markt etc.) gelegt. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; min-width: 480px; }

/* ---------- Karten (ehemals reine Farbklassen) ---------- */

.auftraege, .edelsteine, .empfehlungen, .freigehege, .forschung, .hilfe,
.import, .information, .kontakte, .login, .markt, .nachricht, .navigation,
.news, .profil, .reaktoren, .starthilfe, .statistik, .status, .vertrag,
.werbung, .wettbewerb {
    width: 100% !important;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
    color: var(--parchment);
    box-shadow: var(--shadow-soft);
    margin-bottom: 16px;
    overflow: hidden;
}
.auftraege th, .edelsteine th, .empfehlungen th, .forschung th,
.hilfe th, .import th, .information th, .kontakte th, .login th, .markt th,
.nachricht th, .navigation th, .news th, .profil th, .reaktoren th,
.starthilfe th, .statistik th, .status th, .vertrag th, .werbung th,
.wettbewerb th { border-bottom: 1px solid var(--gold); }

/* Diese Klassen werden ausschliesslich auf echten <table>-Datengrids
   verwendet (nicht als div-Karten) -- horizontal scrollbar statt
   Layout-Bruch bei vielen Spalten auf schmalen Bildschirmen. */
.vertrag, .nachricht, .statistik, .werbung, .wettbewerb, .import, .forschung, .hilfe {
    overflow-x: auto;
    display: block;
}

.edelsteine { background: linear-gradient(160deg, #5a3f80, var(--panel)); }
.freigehege { background: linear-gradient(160deg, #354a2e, var(--panel)); }
.forschung { background: linear-gradient(160deg, #5c2f4a, var(--panel)); }
.markt, .reaktoren { background: linear-gradient(160deg, #4a2f5c, var(--panel)); }
.starthilfe { border: 2px dashed var(--gold); background: linear-gradient(160deg, var(--panel-3), var(--panel)); }

.login { padding: 18px; }
.login-titel { text-align: center; margin: 0 0 14px; }
.login-fehler { font-size: 0.85rem; background: rgba(107,47,63,0.35); border: 1px solid var(--wine); border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; }
.login-feld {
    display: flex; align-items: center; gap: 8px;
    background: rgba(20,13,36,0.55); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px; margin-bottom: 10px;
}
.login-feld i { color: var(--gold-bright); width: 16px; text-align: center; }
.login-feld input { flex: 1; background: none; border: none; color: var(--parchment); font-family: inherit; font-size: 0.95rem; }
.login-feld input:focus { outline: none; }
.login-feld-captcha img { border-radius: 4px; }
.login-button { display: block; width: 100%; text-align: center; margin-top: 4px; }
.login-registrieren { text-align: center; font-size: 0.85rem; margin: 12px 0 0; }

.seiten-kopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 16px 0;
}
.seiten-kopf-buttons { display: flex; flex-wrap: wrap; gap: 6px; }

.markt-shell { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.markt-shell-side { flex: 1 1 220px; max-width: 260px; }
.markt-shell-main { flex: 3 1 480px; min-width: 260px; }
@media (max-width: 700px) { .markt-shell-side { max-width: 100%; } }

.markt-produktliste { columns: 2 150px; column-gap: 14px; padding: 10px; }
.markt-produktliste hr { break-after: column; border: none; border-top: 1px solid var(--border-soft); margin: 6px 0; }
.markt-produktliste div { break-inside: avoid; padding: 1px 0; }

.markt-seitenleiste {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}

.freigehege-trenner { border: none; border-top: 1px solid var(--gold); margin: 14px 10px; opacity: 0.6; }

.reaktoren-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    padding: 10px;
}
.reaktor-zelle {
    padding: 8px; text-align: center; overflow: hidden;
    min-height: 130px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.reaktor-zelle select { max-width: 100%; }
.reaktor-zelle [id^="Count1-"] img,
.reaktor-bild { width: 53px; height: 53px; display: block; margin: 0 auto 6px; border-radius: 8px; }
.reaktor-uebernehmen-btn {
    width: 100%; box-sizing: border-box;
    white-space: normal; line-height: 1.2;
    font-size: 0.8rem; padding: 5px 8px; margin-top: 4px;
}
.reaktor-reparieren-btn {
    display: block; text-decoration: none; text-align: center;
    width: 100%; box-sizing: border-box;
    font-size: 0.8rem; padding: 5px 8px;
}
.reaktor-leeren-x {
    display: inline-block; margin-left: 4px; color: var(--wine, #b03030);
    font-weight: 800; cursor: pointer; line-height: 1; user-select: none;
}
.reaktor-leeren-x:hover { color: #ff5c5c; }

.defekt-icon {
    display: inline-block; width: 28px; height: 20px; vertical-align: middle;
    background-color: var(--gold-bright);
    -webkit-mask-image: url('defekt.gif'); mask-image: url('defekt.gif');
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
}

.card-titel {
    margin: 0; padding: 8px 10px;
    font-size: 0.85rem; font-family: 'Cinzel', serif; letter-spacing: 0.04em;
    text-transform: uppercase; font-weight: 600;
    border-bottom: 1px solid var(--gold);
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    color: var(--gold-bright); text-align: center;
}
.tab-leiste { display: flex; gap: 8px; padding-top: 10px; border-bottom: 1px solid var(--border-soft); }
.tab-leiste-kompakt { gap: 4px; }
.tab-leiste-kompakt .tab-btn { flex: 1; text-align: center; padding: 8px 6px; }
.tab-btn { display: inline-block; background: none; border: 1px solid var(--gold); border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 18px; color: var(--parchment); font-family: 'Cinzel', serif; cursor: pointer; opacity: 0.65; text-decoration: none; }
.tab-btn.aktiv { opacity: 1; background: linear-gradient(160deg, var(--panel-2), var(--panel)); color: var(--gold-bright); }

.dino-katalog { display: none; flex-wrap: wrap; gap: 16px; padding-top: 10px; }
.dino-katalog.aktiv { display: flex; }
.dino-karte { width: 230px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 12px; text-align: center; color: var(--parchment); transition: transform 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; }
.dino-karte:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212,175,55,0.3); }
.dino-karte img { width: 100%; border-radius: 8px; display: block; box-shadow: 0 0 0 1px var(--border-soft); }
.dino-karte h4 { margin: 8px 0 4px; font-size: 1rem; font-family: 'Cinzel', serif; color: var(--gold-bright); }
.dino-karte-werte { width: 100%; font-size: 0.78rem; table-layout: fixed; border-collapse: collapse; }
.dino-karte-werte td { padding: 2px 0; white-space: normal; word-break: break-word; vertical-align: top; }
.dino-karte-werte td:first-child { color: var(--muted); text-align: left; width: 42%; }
.dino-karte-werte td:last-child { text-align: right; }

.dino-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(10,6,20,0.75); z-index: 1000; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.dino-popup-overlay.sichtbar { display: flex; }
.dino-popup-karte { position: relative; cursor: default; }
.dino-popup-schliessen { position: absolute; top: 2px; right: 10px; cursor: pointer; font-size: 1.4rem; color: var(--gold-bright); line-height: 1; }

.pwv-overlay { display: none; position: fixed; inset: 0; background: rgba(10,6,20,0.75); z-index: 1000; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.pwv-overlay.sichtbar { display: flex; }
.pwv-karte { position: relative; width: 100%; max-width: 360px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--gold); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 20px; box-sizing: border-box; }
.pwv-schliessen { position: absolute; top: 6px; right: 12px; cursor: pointer; font-size: 1.4rem; color: var(--gold-bright); line-height: 1; }
.pwv-meldung { font-size: 0.85rem; border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; }
.pwv-meldung.ok { background: rgba(47,107,63,0.35); border: 1px solid var(--gold); }
.pwv-meldung.fehler { background: rgba(107,47,63,0.35); border: 1px solid var(--wine); }

.freigehege-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
    padding: 10px;
}
.freigehege-grid.aktiv { display: grid; }

.freigehege-thumb {
    display: block; flex-shrink: 0; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--gold), var(--shadow-soft);
    background: radial-gradient(circle, var(--panel-3), var(--bg-deep));
}
.freigehege-inaktiv .freigehege-thumb { box-shadow: 0 0 0 2px var(--border-soft); filter: grayscale(1) brightness(0.6); }

.freigehege-row { display: flex; align-items: center; gap: 8px; text-align: left; }
.freigehege-text { min-width: 0; }

.freigehege-kaufen-link {
    display: inline-block; margin-top: 2px;
    color: var(--gold-bright); text-decoration: underline;
    font-weight: 600; font-size: 0.78rem;
}
.freigehege-bereit:hover .freigehege-kaufen-link { color: var(--gold-pale); }

.freigehege-aktiv, .freigehege-bereit, .freigehege-inaktiv { padding: 8px; text-align: left; }
.freigehege-aktiv { border: 1px solid var(--border); border-radius: 6px; font-size: calc(0.8rem + 2px); background-color: #24331f; color: var(--gold-bright); cursor: pointer; }
.freigehege-bereit { border: 1px solid var(--border); border-radius: 6px; font-size: calc(0.8rem + 2px); background-color: #4a6b3c; color: var(--parchment); cursor: pointer; }
.freigehege-inaktiv { border: 1px solid var(--border-soft); border-radius: 6px; font-size: calc(0.8rem + 2px); color: var(--muted); }
.freigehege-aktiv:hover, .freigehege-bereit:hover { filter: brightness(1.12); }

.lineA { background-color: rgba(36,26,61,0.6); }
.lineB { background-color: rgba(44,32,73,0.6); }
.mini { font-size: 0.8rem; }
.nopadding { padding-left: 0px; padding-right: 0px; }
.rahmen { border: 1px solid var(--border); font-size: 0.8rem; border-radius: 6px; }

.nav-zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; font-size: 0.9rem;
    border-bottom: 1px solid rgba(107,84,144,0.25);
}
.nav-zeile i { width: 18px; text-align: center; color: var(--gold-bright); }
.nav-zeile:last-child { border-bottom: none; }
.navigation-aktiv {
    background: linear-gradient(180deg, var(--border), var(--border-soft));
    color: var(--gold-pale); font-weight: 600; border-radius: 6px;
}
.navigation-aktiv i { color: var(--gold-pale); }
.navigation-inaktiv { color: var(--parchment); }
.navigation-counter { color: var(--gold-pale); font-weight: bold; }
.news-akt { background-color: var(--border); color: var(--gold-pale); }

.stat-zeile-link { display: block; color: inherit; text-decoration: none; border-radius: 6px; }
.stat-zeile-link:hover { background: rgba(212,175,55,0.12); }
.stat-zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 4px; font-size: 0.9rem;
}
.stat-zeile i { width: 18px; text-align: center; color: var(--gold-bright); }
.stat-label { color: var(--muted); flex: 1; }
.stat-wert { font-weight: 600; }
.forschung-balken {
    height: 6px; border-radius: 4px; background: rgba(0,0,0,0.35);
    margin: 0 4px 8px; overflow: hidden;
}
.forschung-balken-fuellung {
    height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-pale));
    border-radius: 4px;
}

/* ---------- Buttons ---------- */

.button-normal, .button-aktiv, input[type="submit"], input[type="button"] {
    font-family: 'EB Garamond', 'Trebuchet MS', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    padding: 7px 16px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.button-normal {
    background: linear-gradient(180deg, #a5843d, #7a5c1f);
    border: 1px solid var(--gold);
    color: var(--gold-pale);
    box-shadow: var(--shadow-soft);
}
.button-aktiv, .button-normal:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background: linear-gradient(180deg, var(--gold), #a5731d);
    border: 1px solid var(--gold-pale);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212,175,55,0.35);
}
.button-normal:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

input[type="text"], input[type="password"], select, textarea {
    background: rgba(20,13,36,0.55);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--parchment);
    padding: 5px 8px;
    font-family: inherit;
    font-size: 0.95rem;
}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.25);
}
select[name="Produkt"] option { padding: 0 4px; }