/* ═══════════════════════════════════════════════════════════════
   Mapedit — Startseite (A.3.57.0: RU4U-Siegel + Überarbeitung)
   Ergaenzt style.css; die Farben und die Schrift kommen von dort.
   ⚠️ Diese Datei laden AUCH anmelden.html und die Rechtsseiten —
   die Bloecke „Konto-Formular", „Kopfzeile im Editor" und
   „Rechtsseiten" unten bleiben deshalb unangetastet.
   ═══════════════════════════════════════════════════════════════ */

body.landing {
    display: block;
    /* Werkstatt-Atmosphäre: ein warmer Schein oben, sonst tiefes
       Pergament-Dunkel. Kein Bild, keine fremde Quelle — nur Farbe. */
    background:
        radial-gradient(1100px 520px at 18% -80px, rgba(222, 167, 38, 0.07), transparent 65%),
        radial-gradient(1400px 900px at 85% 8%,  rgba(222, 167, 38, 0.035), transparent 60%),
        var(--grund);
}
/* Papierkorn über allem — so leise, dass man es nur am fehlenden
   „Plastikglatt" bemerkt. pointer-events: none, es liegt nur da. */
body.landing::after {
    content: '';
    position: fixed; inset: 0; z-index: 3;
    pointer-events: none;
    opacity: 0.05;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23k)' opacity='0.6'/></svg>");
}

/* ── Kopfzeile ── */
body.landing header { align-items: center; padding: 10px 20px; }
header h1 a { color: inherit; text-decoration: none; }
.siegel { display: flex; align-items: center; }
.siegel img { display: block; }

.knopf-oben {
    margin-left: auto;
    background: var(--gold); color: #191509;
    font-weight: 700; font-size: 13px;
    padding: 8px 16px; border-radius: 6px; text-decoration: none;
}
.knopf-oben:hover { filter: brightness(1.1); }

/* ── Held ── */
/* ⚠️ A.1.37.0 („deutlich geiler und größer"): die Karte bekommt die
   breitere Spalte und der Held mehr Gesamtbreite — auf 1920 px zeigt
   die Bühne jetzt ~860 px Karte statt ~670. */
.held {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 40px; align-items: center;
    max-width: 1500px; margin: 0 auto;
    padding: 52px 24px 40px;
}
.augenbraue {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: rgba(222, 167, 38, 0.85);
    margin-bottom: 14px; white-space: nowrap;
}
.augenbraue::after {
    content: ''; height: 1px; flex: 0 1 120px;
    background: linear-gradient(90deg, var(--rand), transparent);
}
.held-text h2 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.25; color: var(--gold);
    border: none; padding: 0; margin: 0 0 18px;
    text-transform: none; letter-spacing: 0;
}
.held-text p { color: var(--gedimmt); line-height: 1.65; margin-bottom: 14px; font-size: 15px; }
.held-text strong { color: var(--text); }
.klein { font-size: 12px; opacity: 0.75; }

.held-knoepfe { display: flex; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.knopf {
    font-family: inherit; font-size: 14px; cursor: pointer;
    padding: 11px 20px; border-radius: 7px; text-decoration: none;
    background: var(--feld2); color: var(--text);
    border: 1px solid var(--rand);
}
.knopf:hover { border-color: var(--gold); color: var(--gold); }
.knopf.haupt { background: var(--gold); color: #191509; font-weight: 700; border-color: var(--gold); }
.knopf.haupt:hover { filter: brightness(1.1); color: #191509; }

.held-bild canvas {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rand); border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    background: #0c0a07;
}

/* ── Abschnitts-Überschrift: Linie · Wort · Linie ── */
.abschnitt {
    display: flex; align-items: center; gap: 18px;
    max-width: 1240px; margin: 30px auto 0; padding: 0 24px;
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 19px; color: var(--gold);
    border: none; text-transform: none; letter-spacing: 1px;
    white-space: nowrap;
}
.abschnitt::before, .abschnitt::after {
    content: ''; flex: 1; height: 1px; min-width: 24px;
    background: linear-gradient(90deg, transparent, var(--rand) 25%, var(--rand) 75%, transparent);
}

/* ── Näher heran: drei Stufen + Zoomleiter als Maßstabsleiste ── */
.naeher { max-width: 1240px; margin: 0 auto; padding: 4px 24px 10px; }
.stufen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px; margin-top: 20px;
}
.stufen article {
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 20px 20px 22px;
    position: relative;
}
.stufen article::before {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid rgba(222, 167, 38, 0.09);
    border-radius: 7px; pointer-events: none;
}
.stufe {
    display: block;
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 30px; line-height: 1; color: var(--gold);
    margin-bottom: 10px;
}
.stufen h3 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 15px; color: var(--text); margin-bottom: 8px;
}
.stufen p { color: var(--gedimmt); font-size: 13.5px; line-height: 1.6; }

.massstab { max-width: 680px; margin: 30px auto 8px; }
.mass-wort {
    display: block; text-align: center; margin-bottom: 9px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gedimmt);
}
.mass-band {
    display: flex; height: 9px;
    border: 1px solid rgba(222, 167, 38, 0.8);
    box-shadow: 0 0 0 3px var(--grund), 0 0 0 4px var(--rand);
}
.mass-band i { flex: 1; }
.mass-band i:nth-child(odd) { background: var(--gold); opacity: 0.9; }
.mass-zahlen {
    display: flex; justify-content: space-between;
    margin-top: 6px; font-size: 11px; color: var(--gedimmt);
    font-variant-numeric: tabular-nums;
}

/* ── Punkte ── */
.punkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    max-width: 1240px; margin: 0 auto;
    padding: 20px 24px 46px;
}
.punkte article {
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 18px 18px 20px;
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.punkte article::before {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid rgba(222, 167, 38, 0.09);
    border-radius: 7px; pointer-events: none;
}
.punkte article:hover { border-color: rgba(222, 167, 38, 0.45); transform: translateY(-2px); }
.punkte h3 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 15px; color: var(--gold); margin-bottom: 8px;
}
.punkte p { color: var(--gedimmt); font-size: 13.5px; line-height: 1.6; }
.punkte strong { color: var(--text); }

/* ── Schlussband mit dem Siegel ── */
.schluss { text-align: center; padding: 34px 24px 52px; }
/* Das Logo ist ein Bild mit Alpha: drop-shadow greift die RUNDE Kante
   auf, nicht den Bildkasten — der goldene Schein liegt also unter der
   Medaille. (`color` stand hier für das currentColor des alten
   gezeichneten Siegels und wäre am <img> ohne Wirkung.) */
/* ⚠️ Auf seinen Zuruf DEUTLICH grösser (A.3.79.0): 96 → 200. Die Breite
   geht über min(), sonst stünde das Logo auf dem Handy quer über die
   halbe Zeile; `height: auto` hält es rund, während width/height am img
   das Seitenverhältnis für den Layoutsprung liefern. */
.schluss-siegel {
    width: min(200px, 52vw);
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(222, 167, 38, 0.22));
}
.schluss-name {
    font-family: 'Cinzel Decorative', Georgia, serif;
    color: var(--gold); font-size: 19px; letter-spacing: 1px;
    margin: 16px 0 5px;
}
.schluss-satz { color: var(--gedimmt); font-size: 14px; margin-bottom: 20px; }

footer {
    text-align: center; padding: 22px;
    color: var(--gedimmt); font-size: 13px;
    border-top: 1px solid var(--rand);
}
footer a { color: var(--gold); }

/* ── Aufgehen beim Laden — nur Text und Karten-Rahmen, das Canvas
      selbst wird nie animiert (der Prüfstand liest seine Pixel).
      ⚠️ NUR auf der Startseite (`.start`): anmelden.html trägt auch
      `.landing` + `.held-text` — dort soll kein Formular aufgehen. ── */
@media (prefers-reduced-motion: no-preference) {
    .start .held-text > * { opacity: 0; transform: translateY(10px); animation: aufgehen 0.55s ease-out forwards; }
    .start .held-text > *:nth-child(2) { animation-delay: 0.06s; }
    .start .held-text > *:nth-child(3) { animation-delay: 0.12s; }
    .start .held-text > *:nth-child(4) { animation-delay: 0.18s; }
    .start .held-text > *:nth-child(5) { animation-delay: 0.24s; }
    .start .held-text > *:nth-child(n+6) { animation-delay: 0.3s; }
    .start .held-bild { opacity: 0; animation: aufgehen 0.7s ease-out 0.12s forwards; }
}
@keyframes aufgehen { to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
    /* Der Untertitel quetscht sich sonst zwischen Wortmarke und Knopf,
       und im Knopf brach der Pfeil in eine zweite Zeile. */
    body.landing header .unter { display: none; }
    .knopf-oben { white-space: nowrap; font-size: 12px; padding: 7px 12px; }
}
@media (max-width: 900px) {
    .held { grid-template-columns: 1fr; gap: 26px; padding-top: 34px; }
    /* ⚠️ Die Karte ZUERST. Untereinander gestapelt stand sie sonst hinter
       rund 840 px Text — auf dem Handy sieht sie damit nur, wer lange
       genug scrollt, und sie ist das Einzige, was die Seite beweisen
       kann. */
    .held-bild { order: -1; }
    .augenbraue { white-space: normal; letter-spacing: 2px; }
}

/* ── Konto-Formular ── */
form.konto { max-width: 380px; margin: 20px 0 6px; }
form.konto label { display: block; font-size: 12px; color: var(--gedimmt); margin-bottom: 12px; }
form.konto input {
    width: 100%; margin-top: 5px; padding: 10px 12px;
    background: var(--grund); color: var(--text);
    border: 1px solid var(--rand); border-radius: 6px;
    font-family: inherit; font-size: 14px;
}
form.konto input:focus { outline: none; border-color: var(--gold); }
form.konto button { width: 100%; margin-top: 4px; }
form.konto button:disabled { opacity: 0.6; cursor: default; }
#melder.gut { color: var(--gut); }
#melder.schlecht { color: var(--schlecht); }
.klein a { color: var(--gold); }

/* ── Kopfzeile im Editor: wer ist angemeldet ── */
.konto-oben { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.konto-oben .wer { color: var(--gedimmt); }
.konto-oben button { padding: 6px 12px; font-size: 12px; }

/* ── Rechtsseiten ── (A.1.14.0)
   Impressum, Datenschutz und Nutzungsbedingungen teilen sich dieses
   Stück. Eigene Datei wäre eine Datei mehr für zwanzig Zeilen; der
   Rest kommt aus `style.css` wie bei der Startseite auch. */
.recht { max-width: 780px; margin: 0 auto; padding: 40px 24px 56px; }
.recht h2 {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 17px; color: var(--gold);
    margin: 28px 0 10px; border: none; padding: 0;
    text-transform: none; letter-spacing: 0;
}
.recht h3 { font-size: 14px; color: var(--text); margin: 18px 0 6px; }
.recht p, .recht li { color: var(--gedimmt); font-size: 14px; line-height: 1.7; }
.recht ul { margin: 8px 0 8px 20px; }
.recht li { margin-bottom: 5px; }
.recht strong { color: var(--text); }
.recht a { color: var(--gold); }
.recht .quelle { margin-top: 32px; font-size: 12px; opacity: 0.7;
                 border: none; background: none; padding: 0; }

/* Die Fusszeile trägt jetzt die Rechtslinks — auf JEDER Seite, sonst
   ist das Impressum von der Unterseite aus nicht erreichbar. */
footer .rechtslinks { display: block; margin-top: 6px; }

/* Im Editor gibt es keine Fusszeile — die Seite scrollt bewusst nicht.
   Der Weg zu den Rechtsseiten liegt deshalb in der Kopfzeile. */
.konto-oben .rechtslink {
    color: var(--gedimmt); font-size: 12px; text-decoration: none;
    border: 1px solid var(--rand); border-radius: 6px; padding: 5px 10px;
}
.konto-oben .rechtslink:hover { color: var(--gold); border-color: var(--gold); }