/* drahtkartenhalter.ch – Ergänzungen zu main.css (Oktober 2026)
   Ursprüngliches Layout: Vollbilder mit Text. Neu: weisse Startseite mit Röntgen-3D,
   Schriftzug oben mittig, «Geschichte» und «Kaufen» unten. Kopf und unten sind schwarz/weiss:
   schwarz auf hellem Grund, weiss auf dunklen Bildern. */

@font-face { font-family: 'Favorit Mono'; src: url(../assets/fonts/ABCFavoritMonoEdu-Regular.woff2) format('woff2'), url(../assets/fonts/ABCFavoritMonoEdu-Regular.woff) format('woff'); font-display: swap; }

:root { --rand: clamp(16px, 2.2vw, 32px); --kopf: clamp(64px, 9vh, 96px); --unten: 64px; }

/* alter Kopf und Kaufen-Knopf aus main.css nicht mehr verwenden */
header:not(.kopf) { display: none; }

/* schwarz auf hellem Grund (Startseite, helle Bilder), sonst weiss */
body.hell header.kopf, body.hell nav.unten { color: #000; }

/* Kopf: Schriftzug mittig */
header.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kopf); margin: 0;
              display: flex; justify-content: center; align-items: center; pointer-events: none;
              color: #fff; font-size: 16px; transition: color .25s; }
header.kopf a { pointer-events: auto; display: block; color: inherit; }
header.kopf .logo { display: block; height: clamp(34px, 5.2vh, 52px); width: auto; aspect-ratio: 167.129 / 120.508; fill: currentColor; }

/* Unten: Geschichte links, Kaufen rechts */
nav.unten { position: fixed; inset: auto 0 0 0; z-index: 50; height: var(--unten); padding: 0 var(--rand) 18px;
            display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none;
            color: #fff; transition: color .25s; font-family: 'Favorit Mono', ui-monospace, monospace; font-size: 17px; line-height: 1; }
nav.unten a { pointer-events: auto; color: inherit; text-decoration: none; }
nav.unten a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Startseite weiss, 3D zwischen Kopf und unterer Leiste */
section.hero { position: relative; height: 100dvh; background: #fff; overflow: hidden; }
#xr-stage { position: absolute; top: var(--kopf); bottom: var(--unten); left: var(--rand); right: var(--rand);
            cursor: grab; opacity: 0; transition: opacity .9s ease; }
#xr-stage.ready { opacity: 1; }
#xr-stage:active { cursor: grabbing; }
#xr-stage canvas { display: block; width: 100%; height: 100%; }

/* Footer: am Ende einrasten, Platz für die untere Leiste */
footer { scroll-snap-align: end; height: auto; min-height: 4.25em; padding: 2.5em 1em calc(var(--unten) + 2em); }
footer p { line-height: 1.4; }
footer .links { margin-top: 1.25em; font-size: .85em; }

@media (max-width: 640px) {
    :root { --unten: 56px; }
    nav.unten { font-size: 15px; padding-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { #xr-stage { transition: none; } }

/* Unterseiten (Geschichte, Impressum & AGB): weiss, Kopf und Leiste schwarz */
body.hell nav.unten a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
body.hell:not(:has(section.hero)) main { padding-top: var(--kopf); }
body.hell:not(:has(section.hero)) header.kopf,
body.hell:not(:has(section.hero)) nav.unten { background: #fff; }      /* auf Textseiten nichts überlagern */
body.hell:not(:has(section.hero)) nav.unten { align-items: center; padding-bottom: 0; }

/* Oben und unten: durchgehende schwarze Balken, Schrift immer weiss */
header.kopf, nav.unten,
body.hell header.kopf, body.hell nav.unten,
body.hell:not(:has(section.hero)) header.kopf,
body.hell:not(:has(section.hero)) nav.unten { background: #000; color: #fff; transition: none; }
nav.unten, body.hell:not(:has(section.hero)) nav.unten { align-items: center; padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
header.kopf { padding-top: env(safe-area-inset-top); }

/* ===== Stand 11.10.: Schriftzug nur oben auf der ersten Seite, untere Leiste weiss ===== */
body { position: relative; }                       /* Kopf scrollt mit der Seite weg */
html body header.kopf { position: absolute !important; background: none !important; color: #000 !important; padding-top: 0; }
html body nav.unten { background: #fff !important; color: #000 !important; }
html body nav.unten a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Geschichte: erste Seite weiss mit grossem Titel, danach Vollbilder mit Text wie auf der Startseite */
section.hero.titel { display: flex; align-items: center; justify-content: center; padding: var(--kopf) 10% var(--unten); }
section.hero.titel h2 { color: #000; margin: 0; text-align: left; }
.geschichte-bild h2.lang { font-size: clamp(26px, 3.6vw, 54px); line-height: 1.05; max-width: min(16em, 80vw); }
.geschichte-bild.text-schwarz h2 { color: #000; }

/* Footer im gleichen Stil auf allen Seiten */
footer.ende { display: flex; justify-content: center; align-items: center; text-align: center; background: #000; color: #fff;
              font-family: 'Favorit Bold', -apple-system, Arial, sans-serif; font-size: 16px; line-height: 1.4;
              scroll-snap-align: end; min-height: 4.25em; padding: 2.5em 1em calc(var(--unten) + 2em); }
footer.ende p { margin: 0; }
footer.ende a { color: #fff; }
footer.ende .links { margin-top: 1.25em; font-size: .85em; }
.recht + footer.ende, body:not(:has(section.hero)) footer.ende { margin-top: 12svh; }

@media (max-width: 640px) {
    .geschichte-bild h2.lang { font-size: 8.2vw; }
}

/* ===== Stand 11.10. (2): grösserer Schriftzug, schmalere untere Leiste, Footer mit drei Punkten ===== */
:root { --kopf: clamp(88px, 13.5vh, 136px); --unten: 46px; }
html body header.kopf .logo { height: clamp(58px, 9.5vh, 96px); aspect-ratio: 169.239 / 120.508; }
html body nav.unten { height: var(--unten); font-size: 20px; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; }

/* Footer: drei Punkte, gross wie die Bildtexte, untereinander */
footer.ende { display: block; text-align: left; min-height: 70dvh; padding: 12dvh 10% calc(var(--unten) + 7dvh); }
footer.ende .ende-links { display: flex; flex-direction: column; align-items: flex-start; gap: .08em;
                          font-family: 'Favorit Bold', -apple-system, Arial, sans-serif; font-size: 7.5dvw; line-height: .95; }
footer.ende .ende-links a { color: #fff; text-decoration: none; }
footer.ende .ende-links a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; }
footer.ende .ende-adresse { margin-top: 2.2em; font-family: 'Favorit Mono', ui-monospace, monospace; font-size: 15px; line-height: 1.4; opacity: .75; }

@media (max-width: 640px) {
    :root { --kopf: 96px; --unten: 42px; }
    html body header.kopf .logo { height: 62px; }
    html body nav.unten { font-size: 17px; }
    footer.ende .ende-links { font-size: 9dvw; }
    footer.ende .ende-adresse { font-size: 13px; }
}

/* ===== Footer: drei Punkte übereinander, mittig, gleiche Schrift wie «Geschichte» und «Kaufen», weiss ===== */
html body footer.ende { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
                        min-height: 50dvh; padding: 8dvh 1em calc(var(--unten) + 8dvh); }
html body footer.ende .ende-links { flex-direction: column; align-items: center; gap: .55em;
                                    font-family: 'Favorit Mono', ui-monospace, monospace; font-size: 20px; line-height: 1; letter-spacing: 0; }
html body footer.ende .ende-links a { color: #fff; text-decoration: none; }
html body footer.ende .ende-links a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 640px) { html body footer.ende .ende-links { font-size: 17px; } }

html body nav.unten { z-index: 150; transition: background-color .2s, color .2s; }
html body.am-ende nav.unten { background: #000 !important; color: #fff !important; }   /* verschmilzt mit dem Footer */

/* ===== Letzte Runde: 3D über die ganze Startseite, kleinerer Schriftzug, höhere Leiste ===== */
:root { --kopf: clamp(76px, 11.5vh, 116px); --unten: 56px; }
html body header.kopf .logo { height: clamp(46px, 7.4vh, 74px); }
html body nav.unten { height: var(--unten); }
#xr-stage { inset: 0 !important; }                                  /* ganze Seite, nichts wird abgeschnitten */
html body.auf-start nav.unten { background: transparent !important; color: #000 !important; }
html body header.kopf { z-index: 60; }
@media (max-width: 640px) {
    :root { --kopf: 84px; --unten: 52px; }
    html body header.kopf .logo { height: 50px; }
}