/* ============================================================
   Grundfarben und globale CSS-Variablen
   ============================================================ */
:root {
    --bg:#090d11;
    --panel:#111820;
    --panel2:#17212b;
    --edge:#33404b;
    --text:#e8edf1;
    --muted:#96a4af;
    --accent:#79b9e8;
    --warn:#e7c36a;
    --sel:#dbefff
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:14px Arial,Helvetica,sans-serif
}

a:link, a:visited {color:var(--accent);}

button,input,select {
    font:inherit;
    color:inherit
}

button,select,input {
    background:#0d141b;
    border:1px solid var(--edge);
    border-radius:4px;
    padding:8px
}

button {
    cursor:pointer
}

button:hover {
    border-color:var(--accent)
}

/* ============================================================
   Kopfbereich
   ============================================================ */
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:13px 18px;
    background:#0c1218;
    border-bottom:1px solid var(--edge)
}

h1 {
    font-size:20px;
    margin:0;
    letter-spacing:.08em
}

h1 small {
    font-size:11px;
    color:var(--accent)
}

header p {
    margin:3px 0 0;
    color:var(--muted)
}

#status {
    color:var(--accent);
    font-size:12px
}

/* ============================================================
   Hauptlayout: Seitenleiste und Arbeitsbereich
   ============================================================ */
main {
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    min-height:780px
}

aside {
    padding:14px;
    border-right:1px solid var(--edge);
    background:var(--panel);
    overflow:auto
}

aside>label {
    display:block;
    color:var(--muted);
    margin:8px 0 5px
}

#search,#quality {
    width:100%
}

.row {
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px;
    margin-top:7px
}

.checks {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:12px 0
}

.checks label,.orientation label {
    color:var(--muted)
}

#list {
    border-top:1px solid var(--edge);
    padding-top:8px
}

.item {
    width:100%;
    display:block;
    text-align:left;
    border:0;
    border-bottom:1px solid #26323b;
    border-radius:0;
    background:transparent;
    padding:9px 5px
}

.item:hover,.item.active {
    background:#1a2731
}

.item b {
    display:block
}

.item small {
    color:var(--muted)
}

/* ============================================================
   Arbeitsbereich und Navigation
   ============================================================ */
.work {
    min-width:0;
    padding:14px
}

nav {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:10px
}

.tab.active {
    background:var(--accent);
    color:#06111a;
    border-color:var(--accent)
}

.view {
    display:none
}

.view.active {
    display:block
}

.toolbar,.orientation {
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    background:var(--panel);
    border:1px solid var(--edge);
    padding:8px 10px
}

.toolbar {
    color:var(--muted)
}

/* ============================================================
   Mondglobus und Canvas
   ============================================================ */
#stage {
    height:610px;
    min-height:360px;
    background:radial-gradient(circle,#101820 0,#020304 70%);
    border:1px solid var(--edge);
    border-top:0;
    position:relative;
    overflow:hidden
}

#map {
    display:block;
    width:100%;
    height:100%;
    touch-action:none;
    cursor:grab
}

#map:active {
    cursor:grabbing
}

.orientation {
    justify-content:flex-start;
    align-items:center;
    border-top:0
}

.orientation label {
    padding:7px
}

/* ============================================================
   Bereich „Mondwissen“
   ============================================================ */
.knowledge {
    max-width:1000px
}

.keyfacts {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:12px 0 18px
}

.keyfacts div,.knowledge-card {
    background:var(--panel);
    border:1px solid var(--edge);
    padding:14px
}

.keyfacts b {
    display:block;
    font-size:18px;
    color:var(--accent)
}

.keyfacts span,.source {
    color:var(--muted);
    font-size:12px
}

.knowledge-card {
    margin-bottom:8px
}

.knowledge-card h3 {
    margin:0 0 7px
}

.knowledge-card p {
    line-height:1.55;
    margin:0 0 8px
}

/* ============================================================
   Eigene Mondbilder
   ============================================================ */
#photoView {
    text-align:center
}

.photo-toolbar {
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    background:var(--panel);
    border:1px solid var(--edge);
    padding:8px 10px;
    color:var(--muted)
}

#photoStage {
    height:650px;
    min-height:360px;
    overflow:hidden;
    position:relative;
    background:#000;
    border:1px solid var(--edge);
    border-top:0;
    touch-action:none;
    cursor:grab
}

#photoStage:active {
    cursor:grabbing
}

#ownPhoto {
    position:absolute;
    left:50%;
    top:50%;
    max-width:none;
    max-height:none;
    transform-origin:center center;
    user-select:none;
    -webkit-user-drag:none;
    will-change:transform
}

/* ============================================================
   Quellen und Objektdetails
   ============================================================ */
#sourcesView {
    max-width:900px;
    line-height:1.6
}

code {
    color:#bfe0f6
}

.warning {
    border-left:3px solid var(--warn);
    padding:9px 12px;
    background:#211e13
}

#details {
    margin-top:12px;
    border:1px solid var(--edge);
    background:var(--panel);
    padding:12px
}

#details h2 {
    font-size:15px;
    margin:0 0 9px
}

.facts {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px
}

.fact {
    background:var(--panel2);
    padding:9px
}

.fact b {
    display:block
}

.fact span,.hint {
    color:var(--muted);
    font-size:12px
}

.note {
    margin-bottom:5px
}

@media(max-width:800px) {
    main {
        grid-template-columns:1fr
    }

    aside {
        border-right:0;
        border-bottom:1px solid var(--edge);
        max-height:340px
    }

    #stage {
        height:480px
    }

    .keyfacts {
        grid-template-columns:repeat(2,1fr)
    }

    .facts {
        grid-template-columns:repeat(2,1fr)
    }

}

/* V1.4 – ausführliche Objektakten */
.object-info  {
    margin: 14px 0;
    padding-top: 10px;
    border-top: 1px solid var(--edge);
}

.object-info h3  {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.object-info p  {
    margin: 0;
    line-height: 1.55;
}

.source-note  {
    margin-top: 14px;
    padding: 9px 10px;
    border-left: 3px solid var(--accent);
    background: rgba(255,255,255,.035);
    line-height: 1.45;
}

/* V1.5 – Scroll-Sicherheitsrand
   Rechts neben Mondglobus und eigenem Foto bleiben 30 px frei.
   In diesem Streifen löst das Mausrad keinen Bild-Zoom aus. */
#stage,
#photoStage  {
    width: calc(100% - 30px);
}

/* Auf kleinen Displays wird der Platz benötigt;
dort kein Zusatzrand. */
@media (max-width: 800px)  {
    #stage,
    #photoStage  {
        width: 100%;
    }

}

/* V1.7 – Galerie eigener Mondbilder */
.own-gallery {
    display:none;
    gap:8px;
    overflow-x:auto;
    padding:9px;
    background:var(--panel);
    border:1px solid var(--edge);
    border-top:0;
    text-align:left
}

.own-gallery.open {
    display:flex
}

.own-thumb {
    flex:0 0 112px;
    width:112px;
    padding:5px;
    background:#0b1117
}

.own-thumb img {
    display:block;
    width:100px;
    height:78px;
    object-fit:cover;
    background:#000
}

.own-thumb span {
    display:block;
    margin-top:4px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:11px;
    color:var(--muted)
}

.gallery-info {
    padding:10px;
    color:var(--muted)
}

.own-photo-name {
    width:calc(100% - 30px);
    padding:6px 10px;
    text-align:left;
    background:#0b1117;
    border-left:1px solid var(--edge);
    border-right:1px solid var(--edge);
    color:var(--muted);
    font-size:12px
}