/* ═══════════════════════════════════════════════════════════════
   Mapedit — DIE STARTSEITE (A.3.351.0, dein Entwurf A „dunkel", 01.10.)
   Die Karte füllt die ganze Breite, die Ansage liegt auf ihr; darunter
   vier Klimata, die Zoomleiter und vier Schritte. Eigenes Blatt: die alte
   `landing.css` trägt weiter die Anmeldeseite.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --grund: #14110c; --feld: #1e1a13; --rand: rgba(222, 167, 38, 0.22);
    --gold: #dea726; --text: #e8dcc0; --gedimmt: rgba(232, 220, 192, 0.74);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--grund); }
body { background: var(--grund); color: var(--text); font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 17px; line-height: 1.55; }
a { color: inherit; }

/* ── Kopfzeile, über der Karte ──
   A.3.353.0 — das Logo GROSS, oben links über der Karte (dein „Dann hätte ich gerne
   das Mapedit logo deutlich größer. Gerne Links über der Karte"). Das Siegel wächst
   mit der Höhe des Fensters (12 vh, 76…128 px): auf flachen Fenstern liefe ein
   festes Mass in die Ansage. Der Schriftzug hängt am Siegel.
   A.3.358.0 — dein „Das Logo und Mapedit nochmal doppelt so groß": 24 vh bis 256 px
   (vorher 12 vh bis 128). ⚠️ Gedeckelt vom PLATZ ÜBER DER ANSAGE: die steht 110 px über
   dem Ende der Bühne (min(92vh, 860px)) und ist ~406 px hoch ⇒ Siegel ≤ Bühne − 560 px.
   Ohne den Deckel lief das Siegel bei 1280×720 und 1366×768 in die Überschrift (gemessen).
   Am Handy unverändert (es teilt die Zeile mit dem Knopf). */
.kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 24px; padding: 22px 32px;
    --siegel: clamp(76px, min(24vh, min(92vh, 860px) - 560px), 256px); }
.kopf .siegel img { display: block; width: var(--siegel); height: var(--siegel); border-radius: 50%;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)); }
.kopf .marke { font-family: 'Cinzel Decorative', serif; font-size: calc(var(--siegel) * 0.46); line-height: 1; color: var(--gold);
    letter-spacing: 1.5px; text-decoration: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.kopf .los { margin-left: auto; display: flex; gap: 10px; }
.knopf { display: inline-block; padding: 11px 20px; border-radius: 8px; font: inherit; font-weight: 700; font-size: 15px;
    line-height: 1.3; text-decoration: none; border: 1px solid var(--gold); cursor: pointer; }
.knopf.voll { background: var(--gold); color: #191509; }
.knopf.leer { color: var(--gold); background: rgba(20, 17, 12, 0.55); }
.knopf:hover { filter: brightness(1.1); }
.knopf:focus-visible { outline: 2px solid #fff3d6; outline-offset: 2px; }

/* ── Die Bühne: die Karte über die ganze Breite ── */
.buehne { position: relative; height: min(92vh, 860px); min-height: 620px; overflow: hidden; background: #2d4a5e; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; }
.buehne::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 11, 7, 0.85) 0%, rgba(14, 11, 7, 0) 15%),
                linear-gradient(90deg, rgba(14, 11, 7, 0.95) 0%, rgba(14, 11, 7, 0.82) 30%, rgba(14, 11, 7, 0.14) 60%, rgba(14, 11, 7, 0) 100%),
                linear-gradient(0deg, rgba(20, 17, 12, 1) 0%, rgba(20, 17, 12, 0) 22%); }
.ansage { position: absolute; z-index: 2; left: 32px; bottom: 110px; max-width: 560px; }
.zeile { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 3px; color: var(--gedimmt); text-transform: uppercase; margin-bottom: 14px; }
.ansage h1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: 54px; line-height: 1.08; color: #f3e6c4;
    margin-bottom: 18px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.ansage p { font-size: 19px; color: #eadfc4; margin-bottom: 26px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.ansage .los { display: flex; gap: 12px; flex-wrap: wrap; }
.live { position: absolute; z-index: 2; right: 28px; bottom: 26px; font-size: 13px; color: var(--gedimmt);
    background: rgba(20, 17, 12, 0.72); border: 1px solid var(--rand); border-radius: 20px; padding: 6px 14px; max-width: 46%; }

/* ── Abschnitte ── */
section { max-width: 1180px; margin: 0 auto; padding: 72px 32px 24px; }
h2 { font-family: 'Cinzel', serif; font-size: 30px; color: var(--gold); margin-bottom: 8px; font-weight: 700; }
.unter { color: var(--gedimmt); font-size: 18px; margin-bottom: 30px; max-width: 720px; }
.klimata { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.klima { background: var(--feld); border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
.klima img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.klima div { padding: 12px 14px 14px; }
.klima b { font-family: 'Cinzel', serif; color: #f1e2bd; font-size: 17px; display: block; margin-bottom: 3px; }
.klima span { color: var(--gedimmt); font-size: 15px; }

.lineal { display: flex; align-items: center; margin: 0 0 18px; color: var(--gedimmt); font-size: 13px; }
.lineal i { flex: 1; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(222, 167, 38, 0.2)); margin: 0 10px; }
.leiter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.stufe { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--rand); }
.stufe img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.stufe .x { position: absolute; left: 12px; top: 10px; font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold);
    background: rgba(14, 11, 7, 0.82); border: 1px solid var(--rand); border-radius: 18px; padding: 2px 12px; }
.stufe .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-size: 15px;
    background: linear-gradient(0deg, rgba(14, 11, 7, 0.88), rgba(14, 11, 7, 0)); }

.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.schritt { border-top: 2px solid var(--gold); padding-top: 14px; }
.schritt .n { font-family: 'Cinzel', serif; color: var(--gold); font-size: 30px; line-height: 1; }
.schritt b { display: block; font-size: 18px; margin: 6px 0 4px; color: #f1e2bd; }
.schritt span { color: var(--gedimmt); font-size: 15px; }

.band { margin: 64px auto 0; max-width: 1180px; padding: 40px 32px; display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--rand); }
.band img { width: 84px; height: 84px; border-radius: 50%; }
.band p { flex: 1; font-size: 18px; color: var(--gedimmt); }
.band strong { display: block; font-family: 'Cinzel', serif; color: var(--gold); font-size: 22px; font-weight: 400; }
footer { text-align: center; padding: 24px 16px 40px; font-size: 14px; color: var(--gedimmt); }
footer a { color: var(--gedimmt); }

/* ── A.3.370.0 — Weitere Projekte (über der Fußzeile; Vorbild timeghost.de) ──
   3 Spalten · 2 unter 1000 px · 1 unter 620 px. Die Überschrift ist eine Abschnittsmarke wie `.zeile`,
   nicht das grosse Gold-h2 der Abschnitte darüber. */
.projekte { padding: 40px 32px 20px; border-top: 1px solid var(--rand); }
.projekte h2 { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gedimmt); margin: 0 0 18px; }
.projekte ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.projekte a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--rand); transition: transform .15s, border-color .15s; }
.projekte a:hover, .projekte a:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.projekte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; }
@media (max-width: 1000px) { .projekte ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .projekte { padding: 32px 16px 12px; } }
@media (max-width: 620px) { .projekte ul { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
    /* Am Handy teilt sich das Logo die Zeile mit „Konto anlegen" (gemessen bis 360 px). */
    .kopf { padding: 14px 16px; gap: 10px; --siegel: clamp(48px, 15vw, 64px); }
    .kopf .los .knopf { padding: 8px 14px; font-size: 14px; }
    .kopf .los .leer { display: none; }
    .buehne { height: auto; min-height: 0; padding-top: 0; overflow: visible; background: none; }
    .buehne canvas { position: relative; height: 300px; object-position: 40% 55%; }
    .buehne::after { height: 300px; bottom: auto;
        background: linear-gradient(180deg, rgba(14, 11, 7, 0.92) 0%, rgba(14, 11, 7, 0.6) 18%, rgba(14, 11, 7, 0) 36%),
                    linear-gradient(0deg, rgba(20, 17, 12, 1) 0%, rgba(20, 17, 12, 0) 30%); }
    .ansage { position: relative; left: 0; bottom: 0; padding: 8px 16px 0; }
    .zeile { letter-spacing: 1.5px; font-size: 12px; }
    .ansage h1 { font-size: 34px; }
    .ansage p { font-size: 17px; }
    .live { position: relative; right: auto; bottom: auto; display: inline-block; margin: 18px 16px 0; max-width: none; }
    section { padding: 48px 16px 8px; }
    .klimata { grid-template-columns: 1fr 1fr; gap: 10px; }
    .leiter { grid-template-columns: 1fr; }
    .schritte { grid-template-columns: 1fr 1fr; }
    .band { flex-direction: column; text-align: center; padding: 32px 16px; }
}