/* drahtkartenhalter.ch – Archiv-Layout (Oktober 2026)
   Ein Bild pro Bildschirm, 4:5, mittig, viel Weiss. Eine Schrift, klein und fett. */

@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; }
@font-face { font-family: 'Favorit Bold'; src: url(../assets/fonts/ABCFavoritEdu-Bold.woff2) format('woff2'), url(../assets/fonts/ABCFavoritEdu-Bold.woff) format('woff'); font-display: swap; }

:root {
    --weiss: #fff;
    --schwarz: #000;
    --grau: #9a9a9a;
    --rand: clamp(16px, 2vw, 32px);
    --nav: 64px;
    --navschrift: 17px;
    --bildtext: 19px;
    --format: 2 / 3;                            /* Bildformat, z.B. 3 / 4 oder 4 / 5 */
    --bildh: min(62svh, 820px);               /* Bildhöhe; Breite aus dem Format */
    --schrift: 'Favorit Bold', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'Favorit Mono', ui-monospace, Menlo, monospace;   /* wie «MADE IN HELVETIA» und der Kreistext auf dem Inlay */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--schwarz); font-family: var(--schrift); font-size: 15px; line-height: 1.28; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .45; }
img { display: block; }

/* 1  Navigation – fix am oberen Rand. Alle drei Elemente unten bündig auf einer Grundlinie */
.nav, .fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: last baseline; padding: 0 var(--rand) 14px; font-family: var(--mono); font-size: var(--navschrift); line-height: 1; letter-spacing: 0; }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--nav); align-content: end; background: var(--weiss); }
.nav .marke { justify-self: start; display: block; }
.nav .logo { display: block; height: 1.45em; width: calc(1.45em * 1.387); }            /* Schriftzug: d gerundet, Buchstaben etwas auseinander, Originalbreite */
.nav .mitte, .fuss .mitte { justify-self: center; }
.nav .rechts, .fuss .rechts { justify-self: end; }
.nav a[aria-current="page"], .fuss a[aria-current="page"] { opacity: .45; }

/* Footer ganz unten, gleich gebaut wie die Navigation */
.fuss { padding-top: 14svh; padding-bottom: 18px; background: var(--weiss); }
.stapel .fuss { padding-top: 0; background: none; }
.nav a, .fuss a { white-space: nowrap; }

/* jede Station füllt einen Bildschirm, das Bild steht in der Mitte */
.start, .bild { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
                padding: var(--nav) var(--rand) 24px; background: var(--weiss); }

/* Startseite als Kartenstapel: pro Wisch/Scroll genau eine Karte weiter, die nächste legt sich über die vorherige */
html.stapel { scroll-snap-type: y mandatory; }
.stapel .start, .stapel .bild { position: sticky; top: 0; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
.stapel .letzte { position: relative; }
.stapel .letzte .fuss { position: absolute; left: 0; right: 0; bottom: 0; }

/* gemeinsames Format */
.bild img { height: var(--bildh); width: auto; aspect-ratio: var(--format); max-width: calc(100vw - 2 * var(--rand)); }
.bild img { object-fit: cover; object-position: center; background: #f4f4f4; }

/* 2  Startansicht – Röntgenbild, so gross wie möglich zwischen Navigation und unterem Rand */
.start { padding: calc(var(--nav) + 8px) var(--rand) 20px; }
.start .rahmen { position: relative; width: 100%; flex: 1; min-height: 0; }
#xr-stage { position: absolute; inset: 0; 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%; }
#xr-stage[data-fehler] { opacity: 1; background: #f4f4f4; }
/* 3  Bildfolge: Bild, darunter der Text, so breit wie das Bild */
figure { margin: 0; display: table; }
figure > .text { display: table-caption; caption-side: bottom; padding-top: 16px; font-size: var(--bildtext); line-height: 1.18; }
.text p { margin: 0; }
.bild .text .klein { display: block; margin-top: .5em; font-size: 12px; line-height: 1.35; color: var(--grau); }
.bild .text .klein a { text-decoration: underline; text-underline-offset: .15em; }

/* Geschichte */
.geschichte .text p { margin: 0 0 1em; font-size: 14px; line-height: 1.38; }
.geschichte .text p.titel { font-size: 15px; line-height: 1.28; }

@media (max-width: 640px) {
    :root { --nav: 56px; --navschrift: 14px; --bildtext: 16px; --bildh: min(62svh, calc((100vw - 80px) * 1.5)); }
    body { font-size: 14px; }
    .fuss { font-size: 15px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #xr-stage { transition: none; } .weiter span { animation: none; } }

/* Impressum & AGB – eine Seite, eine schmale Spalte */
.recht { padding: calc(var(--nav) + 12svh) var(--rand) 0; }
.recht .spalte { max-width: 34em; margin: 0 auto; font-size: 14px; line-height: 1.42; }
.recht .inhalt { margin: 0 0 4em; }
.recht section { margin-bottom: 4em; scroll-margin-top: calc(var(--nav) + 24px); }
.recht h2 { font-size: var(--bildtext); line-height: 1.1; font-weight: normal; margin: 0 0 1em; }
.recht h3 { font-size: 14px; font-weight: normal; margin: 1.6em 0 .2em; }
.recht p { margin: 0 0 .8em; }
.recht .stand { color: var(--grau); }
.recht a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.recht .inhalt a { text-decoration: none; }