/* Objektseiten sbecher.com — erzeugt von generiere_sbecher.py, nicht von Hand aendern */
:root {
  /* Kontrast WCAG AA: leise 4,54:1 auf Weiss (vorher #8a8a8a, 3,45:1); die Pille behaelt
     ihr Blau auch dunkel (#fff darauf 4,53:1; das hellere Dunkel-Blau gab nur 3,95:1) */
  --grund: #fff; --text: #111; --leise: #767676; --blau: #2f6df6;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #000; --text: #ededed; --leise: #8a8a8a; }
  /* Strichzeichnungen haben eine feste Linienfarbe #141414; dunkel invertiert -> #ebebeb.
     Die Farbwahl im SVG selbst war in iOS Safari unzuverlaessig (WebKit-Bug 283489). */
  img.strich { filter: invert(1); }
}
* { box-sizing: border-box; }
/* Einblenden beim Scrollen (Eigentuemer 18.10.2026: „sobald man zu ihnen scrollt, aber etwas
   schneller als“ apple.com): 0,45 s und 16 px statt rund 1 s und mehr Weg.  Nur mit JavaScript
   (Klasse .js am <html>), ohne Bewegung bei prefers-reduced-motion. */
.js .einblenden { opacity: 0; transform: translateY(16px);
                  transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .7, .2, 1); }
.js .einblenden.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .einblenden { opacity: 1; transform: none; transition: none; }
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; }

.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
        padding: 14px 16px; font-size: 14px; }
.kopf nav { display: flex; gap: 18px; }
.kopf .aktiv { color: var(--leise); }
/* Tippflaeche um ~44 px ohne sichtbare Aenderung */
.kopf a, .weiter a, .fuss a { position: relative; }
.kopf a::after, .weiter a::after, .fuss a::after { content: ""; position: absolute; inset: -12px -4px; }

/* Raster: quadratische Kacheln, je Objekt eine Kachel plus Textkachel. Ohne Rasterlinien
   und höchstens 3 Spalten (Wünsche des Eigentümers, 17.10.2026): die Textkachel rückt
   in die zweite Reihe */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .raster { grid-template-columns: 1fr; } }
.kachel { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
          background: var(--grund); -webkit-tap-highlight-color: transparent; }
.kachel:hover { text-decoration: none; }
.kachel:focus-visible { outline-offset: -1px; }      /* Rahmen innen: am Bildrand sichtbar */
.kachel picture, .kachel img { display: block; width: 100%; height: 100%; }
.kachel img { object-fit: contain; }
/* Axonometrien optisch gleich gross auf gemeinsamer Standlinie, waagerecht in der optischen
   Mitte: Lage und Hoehe je Zeichnung rechnet der Generator (optische_lage), in % der Kachel */
.kachel.linie img { position: absolute; left: var(--l); bottom: var(--u); height: var(--h);
                    width: auto; }
/* Rendering und Strichzeichnung uebereinander: Rendering sichtbar, beim Ueberfahren (und mit
   Tastatur) die Zeichnung; ohne Maus (Touch) bleibt das Rendering */
.kachel.mit-render .render { position: absolute; left: var(--rl); bottom: var(--ru);
                             height: var(--rh); aspect-ratio: 1 / 1; }
.kachel.mit-render .render picture, .kachel.mit-render .render img { width: 100%; height: 100%; }
.kachel.mit-render .render, .kachel.mit-render img.strich { transition: opacity .25s ease; }
.kachel.mit-render img.strich { opacity: 0; }
@media (hover: hover) {
  .kachel.mit-render:hover .render, .kachel.mit-render:focus-visible .render { opacity: 0; }
  .kachel.mit-render:hover img.strich, .kachel.mit-render:focus-visible img.strich { opacity: 1; }
}
.kachel .unter { position: absolute; left: 16px; bottom: 11px; font-size: 13px;
                 color: var(--leise); opacity: 0; transition: opacity .2s; }
.kachel:hover .unter, .kachel:focus-visible .unter { opacity: 1; }
@media (hover: none) { .kachel .unter { opacity: 1; } }
/* Steckbrief wie eine vierte Kachel: Block in der optischen Mitte — senkrecht 3 % ueber der
   Mitte (Innenrand oben 8 %, unten 14 %), waagerecht um --dx (steckbrief_versatz) nach
   rechts; Satz unveraendert */
.kachel.text { display: flex; flex-direction: column; justify-content: center; align-items: center;
               padding: 8% 11% 14%; font-size: clamp(15px, 1.7vw, 21px); line-height: 1.4; }
.kachel.text dl { display: grid; grid-template-columns: auto 1fr; gap: 0 1.2em; margin: 0;
                  position: relative; left: var(--dx, 0); }
.kachel.text dd { margin: 0; }

/* Detailseite */
.buehne { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
/* Hauptbild: das quadratische Rendering oben und unten je 10 % beschnitten (5:4,
   HELD_BESCHNITT; der Generator prueft, dass das Objekt nicht hineinragt); Hoehe weiter
   hoechstens 78vh, also Breite hoechstens 97,5vh */
.held { margin: 0 auto; max-width: min(100%, 97.5vh); }
.held img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.zeile { text-align: center; max-width: 760px; margin: 14px auto 0; font-size: 17px; line-height: 1.55;
         text-wrap: balance; }
.zeile h1 { display: inline; font: inherit; margin: 0; }
.pille { display: inline-block; background: var(--blau); color: #fff; border-radius: 4px;
         padding: 0 7px; margin-left: .25em; white-space: nowrap; }
/* Mappe und Fotos: ohne Rahmen und ohne Bildunterschriften */
.mappe { display: grid; grid-template-columns: repeat(2, 1fr); margin: 56px 0 0; }
@media (max-width: 560px) { .mappe { grid-template-columns: 1fr; } }
.mappe figure { margin: 0; }
.mappe picture, .mappe img { display: block; width: 100%; height: auto; }
/* Strichzeichnung fuellt 76 % des Felds; Orthogonalansichten mit --r < 1 im Massstab der
   groessten Ansicht des Objekts: Innenabstand 12 % + 38 % x (1 - r) */
.mappe figure.linie img { aspect-ratio: 1 / 1; object-fit: contain;
                          padding: calc(12% + 38% * (1 - var(--r, 1))); }
.fotos { margin-top: 48px; gap: 16px; }
.daten { max-width: 760px; margin: 48px auto 0; }
.daten dl { display: grid; grid-template-columns: minmax(8em, 13em) 1fr; gap: 6px 18px; margin: 0; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .daten dl { grid-template-columns: 1fr; gap: 0; } .daten dd { margin-bottom: 10px; } }
/* Stueckliste im Satz des Steckbriefs (.daten) */
.zutaten .menge { font-variant-numeric: tabular-nums; }
.weiter { display: flex; justify-content: space-between; gap: 16px; max-width: 760px;
          margin: 48px auto 0; font-size: 14px; }
.text-seite { max-width: 760px; margin: 40px auto; padding: 0 16px; }
.text-seite h1 { font-size: 21px; font-weight: 500; }
.text-seite h2 { font-size: 15px; font-weight: 600; margin: 28px 0 6px; }
.text-seite p { margin: 0 0 10px; }
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
        padding: 40px 16px 28px;
        font-size: 13px; color: var(--leise); }