/* ============================================================
   +Frames — plus-frames.com
   Nachbau der Vorlage: vier einzelne Bildschirme, keine Scroll-Seite.
   START · ABOUT · INDEX · PROJEKTSEITE
   Eine Schrift. Schwarz-weiss. Einzige Farbe: das gruene +F.
   ============================================================ */

:root{
  /* Kachelmass und Luecke: gelten fuer die Startseite UND fuer die
     Kopfzeilen der anderen Bildschirme. */
  --tile:clamp(140px, min(19.5vw, calc(37.5vh - 92px)), 380px);
  --gap:24px;
  --paper:#F7F7F7;
  --ink:#000;
  --dim:#9A9A9A;
  color-scheme:light dark;
  --green:#4CAF50;
  --font:"Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --pad:clamp(18px, 3.4vw, 46px);
}

/* ---------- Dunkelmodus (31.08.2026, Levin: "dunkel modus homepage") ----------
   Zwei Wege, beide gewollt:
   A) ohne Zutun folgt die Seite der Einstellung von Mac/iPhone,
   B) der Knopf in der Kopfzeile ueberschreibt das (Wahl wird gemerkt).
   Umgeschaltet werden nur die drei Farben; die schwarzen Kacheln mit den
   Animationen bleiben in beiden Faellen schwarz. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A0A0A;    /* wie die App: DesignTokens bg */
    --ink:#E8E4DD;      /* wie die App: DesignTokens fg */
    --dim:#8A8A8A;
  }
}
:root[data-theme="dark"]{
  --paper:#0A0A0A;
  --ink:#E8E4DD;
  --dim:#8A8A8A;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
/* Keine Scrollbalken. Dass etwas weitergeht, sieht man am Text —
   der Balken wuerde nur die Flucht der Seite stoeren. */
*{ scrollbar-width:none }
*::-webkit-scrollbar{ width:0; height:0; display:none }

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font); font-weight:400;
  font-size:14px; line-height:1.7; letter-spacing:.05em;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
img{ display:block; width:100%; height:100%; object-fit:cover }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }

.u{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:.5px }
.u:hover{ text-decoration:none }
/* Es gibt genau EINE Schriftgroesse und EINE Farbe auf der Seite.
   .xs ist nur noch ein Haken fuer Nummern und Kleinkram — optisch
   identisch mit allem anderen. */
.xs{ font-size:inherit; letter-spacing:inherit; color:inherit }

/* ---------- Bildschirm ---------- */
.screen{
  position:fixed; inset:0; padding:var(--pad);
  display:none; background:var(--paper);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.screen.is-on{ display:block }

.tl{ position:absolute; top:var(--pad); left:var(--pad) }
.tr{ position:absolute; top:var(--pad); right:var(--pad) }
.bl{ position:absolute; bottom:var(--pad); left:var(--pad) }
.br{ position:absolute; bottom:var(--pad); right:var(--pad); text-align:right }

.mono-mark{ color:var(--green); line-height:1.05; letter-spacing:.1em }

/* ---------- 1 · START ----------
   .home-row  spannt die volle Breite: darin sitzt ABOUT rechts auf der
              OBEREN FLUCHT des +F.
   .home-block +F oben, darunter das Raster 4+4, beides linksbuendig
              zueinander, als Ganzes mittig.
   Schrift und Abstaende sind fest. Nur die Bilder wachsen mit dem
   Fenster, begrenzt durch Breite UND Hoehe, damit beide Reihen immer
   zusammen sichtbar bleiben.                                           */
.home-row{
  position:absolute; top:65px; left:0; right:0;
  padding:0 var(--pad);
}


.home-block{
  position:relative;
  /* Genau so breit wie das Raster: vier Kacheln und drei Luecken. Dieselbe
     Rechnung benutzt die ABOUT-Seite, damit die Kopfzeile ueberall auf
     denselben Pixel faellt. */
  width:calc(4 * var(--tile) + 3 * var(--gap)); margin:0 auto;
  /* Kopfzeile (+F 72px + 22px Abstand), zwei Bildunterschriften (je 32px)
     und die Luecke (24px) brauchen 182px; dazu oben und unten je der
     Seitenrand (46px). Was bleibt, teilen sich die zwei Bildreihen:
     Kachel = (Fensterhoehe - 274) * 0.375  ->  37.5vh - 103px  */
}
/* ---------- Die Kopfzeile ----------
   Eine einzige Zeile fuer die ganze Seite: +F links, Apfel, Instagram und
   das wechselnde Wort rechts. Sie liegt ueber allen Bildschirmen und
   bewegt sich nie — egal ob Start, ABOUT oder eine Projektseite.
   Breite und Flucht wie das Kachelraster. */
.topbar{
  position:fixed; top:22px; left:50%; transform:translateX(-50%);
  width:calc(4 * var(--tile) + 3 * var(--gap));
  z-index:30; --mark:18px;   /* KOPF-1 (Levin-Wahl C, 20.09.2026): war 12px */
}
/* Das Wort rechts wechselt zwischen ABOUT und BACK. Damit die beiden
   Zeichen davor dabei nicht wandern, ist sein Platz fest reserviert —
   so breit wie das laengere der beiden Woerter, rechtsbuendig gesetzt. */
#navlink{ display:inline-block; min-width:3.75em; text-align:right }

.topbar .big-mark{
  position:relative; display:inline-block; vertical-align:top; text-align:left;
  top:1px; left:auto;                    /* 1 px tiefer: Tinte auf Tinte */
  color:var(--green); line-height:.86; letter-spacing:-.05em;
  font-size:var(--mark, 12px); margin:0;
}
/* Kopfzeile rechts: Apfel, Instagram, ABOUT in einer Reihe. Rechte Kante
   auf der rechten Kante des Rasters, Oberkante der Schrift auf der
   Oberkante des Pluszeichens (an der Tinte gemessen, nicht am Kasten).
   Die Zeichen sind schwarz wie die Schrift; nur das +F ist gruen. */
.home-nav{
  position:absolute; top:50%; transform:translateY(-50%); right:0;
  display:flex; align-items:center; gap:1.5em;
}
.home-nav .ilink{ display:block; line-height:0 }
.home-nav .ico{ width:22px; height:22px; display:block }   /* KOPF-1: war 16px */
/* Dunkelmodus-Knopf: sieht aus wie die anderen Zeichen in der Kopfzeile. */
.home-nav .modus{ background:none; border:0; padding:0; margin:0; cursor:pointer;
  color:inherit; line-height:0; display:block }
.home-nav .modus .ico-sonne{ display:none }
:root[data-theme="dark"] .home-nav .modus .ico-sonne{ display:block }
:root[data-theme="dark"] .home-nav .modus .ico-mond{ display:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .home-nav .modus .ico-sonne{ display:block }
  :root:not([data-theme="light"]) .home-nav .modus .ico-mond{ display:none }
}

/* ---------- Eingang: +F gross in der Mitte, Tap holt die Seite ----------
   Das Zeichen sitzt IMMER an seinem Platz oben links; im Eingangszustand
   wird es nur verschoben und vergroessert (transform). Dadurch bleibt das
   Raster darunter unberuehrt und die Bewegung laeuft fluessig. */
.topbar .big-mark{
  transform-origin:left top;
  transition:transform .8s cubic-bezier(.66,0,.2,1);
}
/* Der Eingang steht rein im Stylesheet: schon der erste Anstrich zeigt das
   +F gross und mittig, ohne dass ein Skript etwas ausrechnen muss. Deshalb
   ruckelt beim Laden nichts mehr. */
/* Im Eingang darf die Kopfzeile das Zeichen nicht mehr an sich binden:
   ihre eigene Verschiebung wuerde die Mitte des Bildschirms verfaelschen. */
body.is-intro .topbar{ top:0; left:0; right:0; width:auto; transform:none }
body.is-intro .topbar .big-mark{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(72px, 20vh, 118px);
  margin:0; z-index:5;
}
#s-home .grid8, .topbar .home-nav{
  transition:opacity .5s ease .35s;
}
/* Im Eingang ist wirklich nur das +F zu sehen — auch die Zeichen und
   ABOUT kommen erst nach dem Tap. */
body.is-intro #s-home .grid8, body.is-intro .home-nav{
  opacity:0; pointer-events:none; transition-delay:0s;
}
@media (prefers-reduced-motion: reduce){
  .topbar .big-mark{ transition:none }
  #s-home .grid8, .topbar .home-nav{ transition:none }
}

.grid8{
  display:grid; grid-template-columns:repeat(4, var(--tile));
  gap:var(--gap);
}
.tile{ display:block; width:var(--tile) }
.tile .box{ display:block; position:relative; width:100%; aspect-ratio:3 / 4; overflow:hidden }
.tile .box.is-dark{ background:#000 }
.tile .box canvas{ display:block; width:100%; height:100% }

/* Astro-Buddy-Kachel: Frage tippt sich, Antwort erscheint darunter rechts */
.chat{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.9em;
  padding:8% 9%;
  color:#fff; text-transform:none; letter-spacing:0; line-height:1.45;
}
.chat .q{ align-self:flex-start; max-width:88%; color:rgba(255,255,255,.95) }
.chat .a{ align-self:flex-end; max-width:88%; text-align:right;
          color:rgba(255,255,255,.62); opacity:0; transition:opacity .5s }
.chat .a.on{ opacity:1 }
.chat .car{ display:inline-block; width:.5em; margin-left:.08em;
            border-bottom:1px solid #fff; animation:blink 1s steps(1) infinite }
@keyframes blink{ 50%{ opacity:0 } }

/* Preis-Kachel: Monthly und Yearly blenden nacheinander ein und aus.
   Gleicher Rand und dieselbe Schriftgroesse wie die Buddy-Fragen. */
.pricefade{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:8% 9%;
  text-align:center; text-transform:none; letter-spacing:0; line-height:1.45;
  white-space:nowrap;
  color:#fff; opacity:0; transition:opacity .7s;
}
.pricefade.on{ opacity:1 }
/* Das +F ist nur gruen — Groesse und Schrift wie der Rest der Zeile. */
.pricefade .pf{ color:var(--green); font-size:inherit; font-weight:inherit; letter-spacing:inherit }
.pricefade .line{ white-space:nowrap }
.tile-cap{ display:block; margin-bottom:8px; white-space:nowrap }
.tile-cap .xs{ margin-right:1em }
.tile:hover .tile-cap{ text-decoration:underline; text-underline-offset:3px }

/* ---------- 2 · ABOUT ---------- */
.big-mark{
  position:absolute; top:19%; left:31%;
  color:var(--green); text-transform:none;
  font-size:clamp(56px,7.4vw,110px); line-height:.86; letter-spacing:-.05em;
}
/* ABOUT ist wie die Startseite gebaut: dieselbe Kopfzeile oben, der Text
   darunter, linksbuendig auf derselben Flucht wie das +F. */
/* Die Pluszeichen zwischen den Stichworten tragen das App-Gruen — die
   Woerter bleiben schwarz. Es ist dieselbe Farbe wie das +F. */
.gp{ color:var(--green) }

/* Der Text beginnt auf derselben senkrechten Flucht wie das +F.
   Kopf und Dokument stehen untereinander in EINER Saeule: der Kopf
   bleibt oben stehen, darunter blendet der Text auf und scrollt dort
   fuer sich. Die Fusszeile behaelt ihren Platz. */
.about-saeule{
  position:absolute; top:96px; bottom:104px; left:50%; transform:translateX(-50%);
  width:calc(4 * var(--tile) + 3 * var(--gap));
  display:flex; flex-direction:column; min-height:0;
}

/* ---------- 3 · SEND AN IMAGE ----------
   Eigener Bildschirm, kein Dokument mehr. Breite und Flucht wie ABOUT und
   der Bogen; der Inhalt scrollt fuer sich, die Kopfzeile steht fest. */
.beitrag-saeule{
  position:absolute; top:96px; bottom:48px; left:50%;
  transform:translateX(-50%);
  width:calc(4 * var(--tile) + 3 * var(--gap));
  display:flex; flex-direction:column; min-height:0;
}
.beitrag-innen{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding:0 0 3em;
}

.about-txt{ flex:0 0 auto }
.about-grid{
  position:absolute; top:52%; left:59%; width:30%;
  display:grid; grid-template-columns:1fr 1fr; gap:.9em 2em;
}
.about-grid span{ position:relative; padding-left:1.4em }
.about-grid span::before{ content:"+"; position:absolute; left:0 }
/* Fusszeile auf derselben Flucht wie die Kopfzeile: linke Kante unter dem
   +F, das Zeichen rechts endet auf der rechten Rasterkante. */
.foot-row{
  position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
  width:calc(4 * var(--tile) + 3 * var(--gap));
  display:flex; gap:4.2vw;
}
/* Der Beitrags-Verweis steht ganz rechts in der Kopfzeile und ist der
   einzige Eintrag, der auffallen soll: fett und im App-Gruen. */
.home-nav .stark{ font-weight:700; color:var(--green) }
/* Steht die Tafel offen, ist man schon dort: dann bleibt rechts nur
   BACK stehen — wie ABOUT, das auf der Unterseite zu BACK wird. */
body.auf-beitrag #beitraglink{ display:none }

/* Das Zeichen steht als letztes Glied IN der Reihe und wird an den rechten
   Anschlag geschoben. Dadurch endet es auf der Rasterkante, deckt keine
   Links ab und schrumpft am Handy mit, wenn die Zeile eng wird. */
#s-about .br{
  position:static; margin-left:auto; text-align:right;
  bottom:auto; left:auto; right:auto; width:auto; transform:none;
  white-space:nowrap;
}

/* ---------- Guide, FAQ, Privacy, Terms ----------
   Die Texte fahren unter der Kopfzeile auf: Papier, kein Kasten, keine
   Rahmen. Gleiche Schrift und gleiche Groesse wie die ganze Seite — aber
   NICHT in Grossbuchstaben: 1200 Woerter Datenschutz in Versalien liest
   kein Mensch. Ueberschriften tragen die Sperrung der Seite, sie sind
   nicht groesser. Blende und Text liegen auf der Flucht des Rasters.   */
.doc-blende{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  margin-top:2.2em;
  opacity:0; transform:translateY(10px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.32,.72,.28,1);
}
.doc-blende[hidden]{ display:none }
.doc-blende.offen{ opacity:1; transform:none }
.doc-innen{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 0 2em;
}
/* Das Kreuz steht in einer eigenen Zeile ueber dem Text, rechts auf der
   Rasterkante — auf derselben Flucht, auf der auch das Zeichen unten in
   der Fusszeile endet. */

/* Kein eigener Satzspiegel: der Text nimmt dieselbe Breite wie die
   Kopfzeile, die Stichwortzeile und die Fusszeile. */
.doc{ max-width:none }
.doc h1, .doc h2, .doc h3{
  font-size:1em; font-weight:400; text-transform:uppercase;
  letter-spacing:.14em; margin:2.4em 0 .8em;
}
.doc h1{ margin-top:0 }
.doc p, .doc li{ text-transform:none; letter-spacing:0; margin:0 0 1em }
.doc ul{ list-style:none; padding:0; margin:0 0 1em }
.doc li{ position:relative; padding-left:1.4em }
.doc li::before{ content:"+"; position:absolute; left:0; color:var(--green) }
.doc a{ text-decoration:underline; text-underline-offset:3px }
.doc strong{ font-weight:400; color:var(--green) }
/* Alles, was im Text auf etwas in der App zeigt, traegt das App-Gruen:
   hervorgehobene Woerter, Namen von Reitern, Beispiele aus der Anzeige. */
.doc code{ font-family:inherit; font-size:inherit; color:var(--green) }
.doc .pill{ color:var(--green) }
.doc .doc-meta{ margin-top:-.4em }
/* Die Katalogtabelle im Guide: keine Linien, nur Flucht. Die Kopfzeile
   traegt die Sperrung der Seite, die Zahlen stehen rechts am Anschlag. */
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1.4em }
.doc th{
  text-align:left; font-weight:400; text-transform:uppercase;
  letter-spacing:.14em; padding:0 0 .7em;
}
.doc td{ text-transform:none; letter-spacing:0; padding:.18em 0 }
.doc th:last-child, .doc td:last-child{ text-align:right }
.doc tr.complete td{ color:var(--green) }
/* Credits: die Objekte links schmal und in Gruen, der Urheber bekommt den
   Platz, die Lizenz steht rechts am Anschlag und bricht nie um. */
.doc table.credits td:first-child{ width:24%; padding-right:1.4em; color:var(--green) }
.doc table.credits th:first-child{ width:24% }
.doc table.credits td:last-child{ white-space:nowrap; padding-left:1.4em }
@media (prefers-reduced-motion: reduce){
  .doc-blende{ transition:none }
}

/* ---------- 4 · PROJEKTSEITE ---------- */
/* Der Rahmen traegt die Lage. Das Bild darin schneidet ab — beim
   Blaettern faehrt das naechste in diesem Ausschnitt herein. Die Winkel
   sitzen im Rahmen, aber ausserhalb des Bildes, und werden deshalb nicht
   mit abgeschnitten. */
.work-rahmen{ position:absolute; top:16%; left:33%; width:36%; height:68% }
.work-img{ position:absolute; inset:0; overflow:hidden }
/* Geblaettert wird mit zwei gruenen Winkeln neben dem Bild, auf halber
   Bildhoehe. Die alte Zeile mit den Pfeilen und BACK entfaellt — BACK
   steht oben in der Kopfzeile. Sie bleibt aber IM Quelltext stehen: dort
   steht die Reihenfolge, und die Winkel holen sich ihr Ziel von dort. */
.work-nav{ display:none }

.chev{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  color:var(--green); display:flex; align-items:center;
  padding:16px 10px;
}
.chev-links { right:calc(100% + 26px) }
.chev-rechts{ left:calc(100% + 26px) }
.chev svg{ display:block; width:24px; height:40px }
.chev:hover{ opacity:.55 }
.work-txt{ position:absolute; bottom:16%; left:71%; width:24% }
.work-title{ margin-bottom:1.3em }
.work-title .xs{ margin-right:1em }
.meta{
  display:grid; grid-template-columns:1fr 1fr; gap:0 1.4em;
  margin-top:1.9em;
}
.meta span:nth-child(even){ text-align:right }

/* ---------- Baustellen-Leiste (vor dem Hochladen loeschen) ---------- */

/* ============================================================
   HANDY — wie in der Vorlage: EIN Bild pro Bildschirm
   ============================================================ */
@media (max-width:760px){
  .home-row{ position:static; transform:none; padding:0 }
  /* auch am Handy: ABOUT auf der Oberkante des +F, nicht am Bildschirmrand */
  /* Am Handy dieselbe Mitte wie am Rechner. Vorher stand hier top:2px,
     die Verschiebung um die halbe Hoehe blieb aber stehen — dadurch rutschte
     die Reihe nach oben aus der Kopfzeile heraus und unter die Browserleiste. */

  .home-block{ width:auto; margin:0 }
  .grid8{ display:block; margin:0 0 12vh; --tile:100% }
  .tile{ width:100%; margin-bottom:7vh }
  .tile .box{ aspect-ratio:3 / 4 }

  /* Startseite am Handy: alles im Fluss, +F oben, Bilder darunter */
  /* Die Kopfzeile klebt oben am Bildschirmrand, quer ueber die Breite.
     Alle Bildschirme lassen oben so viel Platz, dass nichts darunter
     verschwindet. */
  /* Am Handy sitzt die Zeile ueber die volle Breite: +F am linken Rand,
     die Zeichen und das Wort buendig am rechten. Die Reihe liegt hier im
     Fluss statt absolut — sonst richtet sie sich am Kasten aus und nicht
     am Seitenrand, und ABOUT lief rechts hinaus. */
  .topbar{
    top:0; left:0; right:0; transform:none; width:auto;
    padding:calc(12px + env(safe-area-inset-top, 0px)) var(--pad) 12px;
    background:var(--paper);
    display:flex; align-items:center; justify-content:space-between;
  }
  /* Am Handy ist die Zeile voll: Zeichen, Atlas DSO, ABOUT und der
     Beitrags-Verweis. Mit 1.5em Luecke bricht sie um, mit 1em passt
     alles auf eine Zeile. */
  .home-nav{ position:static; transform:none; right:auto; gap:1em }
  .screen{ padding-top:calc(56px + env(safe-area-inset-top, 0px)) }
  #s-home{ padding-top:calc(56px + env(safe-area-inset-top, 0px)) }
  #s-home .big-mark{ position:static; display:inline-block; vertical-align:top; margin:0; text-align:left }
  /* About-Seite behaelt ihre feste Anordnung */
  #s-about .big-mark{ top:16%; left:var(--pad) }
  .about-saeule{ top:92px; bottom:72px; left:var(--pad); right:var(--pad); width:auto; transform:none }
  .beitrag-saeule{ top:92px; bottom:24px; left:var(--pad); right:var(--pad); width:auto; transform:none }
  .about-grid{ top:62%; left:var(--pad); width:auto; right:var(--pad) }
  /* Am Handy laufen beide auf den Seitenrand, dort ist die Flucht dieselbe. */
  /* Die Reihe bleibt IMMER einzeilig; passt sie nicht, wird die Schrift
     kleiner gerechnet (siehe Skript "Fusszeile"). Die Luecken sind in em
     gesetzt, damit sie mit der Schrift mitschrumpfen. */
  .foot-row{ gap:0.9em; flex-wrap:nowrap; white-space:nowrap;
             left:var(--pad); right:var(--pad); transform:none; width:auto;
             bottom:32px }



  /* Am Handy stehen Bild, Blaetterzeile und Text untereinander im Fluss.
     Das Bild behaelt sein Seitenverhaeltnis 4:5 — vorher hatte der Kasten
     eine feste Hoehe, und der Ausschnitt schnitt oben und unten bis zu
     einem Drittel des Bildes weg. */
  /* Drei Spalten mit solchen Namen passen am Handy nicht nebeneinander.
     Dort steht jede Aufnahme als Block: Objekte, Urheber, Lizenz. */
  .doc table.credits, .doc table.credits tr,
  .doc table.credits td, .doc table.credits th{ display:block }
  .doc table.credits th{ display:none }
  .doc table.credits tr{ margin:0 0 1.1em }
  .doc table.credits td{ padding:0; overflow-wrap:anywhere }
  .doc table.credits td:first-child,
  .doc table.credits td:last-child{ width:auto; text-align:left; white-space:normal }

  .work-rahmen{ position:relative; top:auto; left:auto; width:100%; height:auto;
                aspect-ratio:4 / 5; margin:2vh 0 0 }
  .work-img{ position:absolute; inset:0 }
  /* Derselbe sichtbare Abstand wie auf der Startseite zwischen "001 Atlas"
     und der Kachel: dort sind es 8 px Kasten, 16 px bis zur Tinte. Hier
     steht der Text unter dem Bild statt darueber, deshalb 9 px Kasten —
     das ergibt wieder 16 px Weiss. */
  .work-txt{ position:static; width:auto; margin:9px 0 6vh }
  .screen[id^="s-w-"]{ padding-left:var(--pad); padding-right:var(--pad) }

  /* Blaettern mit dem Finger. Senkrecht scrollt der Browser weiter selbst,
     waagrecht gehoert dem Skript — das sagt pan-y. Es bewegt sich nur das
     Bild: die Pfeile bleiben stehen, der Text zum neuen Bild blendet
     danach auf. */
  .screen[id^="s-w-"]{ touch-action:pan-y }

  /* Der Bildkasten ist der Rahmen, in dem geblaettert wird. Die beiden
     Nachbarbilder liegen links und rechts davor bereit und sind
     abgeschnitten, solange sie nicht hereingezogen werden. */
  .work-img img.nachbar{ position:absolute; inset:0 }
  .work-img img.nachbar.links { transform:translate3d(-100%,0,0) }
  .work-img img.nachbar.rechts{ transform:translate3d(100%,0,0) }
  .screen.zieht .work-img img{ will-change:transform }
  .work-img img.gleit{ transition:transform 300ms cubic-bezier(.22,.61,.36,1) }

  /* Waehrend des Zuges tritt der Text ab; ist das Bild eingerastet,
     kommt der Text des neuen Bildes herauf. */
  .work-txt{ transition:opacity .34s ease }
  .screen.zieht .work-txt{ opacity:0; transition:opacity .16s ease }
  .screen.kommt .work-txt{ opacity:0; transition:none }

  /* Am Handy blaettert man mit den gruenen Winkeln im Bild — die Zeile
     mit den Pfeilen und BACK darunter entfaellt, BACK steht ohnehin oben
     in der Kopfzeile. */
  .chev{
    padding:16px 12px;
    filter:drop-shadow(0 0 7px rgba(0,0,0,.5));
  }
  .chev-links { left:12px;  right:auto }
  .chev-rechts{ right:12px; left:auto }
  .chev svg{ width:26px; height:44px }
}

@media (max-width:760px) and (prefers-reduced-motion: reduce){
  .work-img img.gleit{ transition:none }
  .work-txt{ transition:none }
}

/* ANFANG BOGEN (bogen_einbauen.py) */
/* ---------- Bogen: Atlas DSO ----------
   Ein Bogen, kein Kasten: die Bilder liegen im selben Raster wie alles
   andere auf der Seite, zwoelf in einer Reihe. Unter jedem stehen Art und
   Katalognummer in derselben Schrift und Groesse wie der Rest — keine
   Rahmen, keine Linien, keine zweite Schriftgroesse. */
/* Wie das Dokumentenfeld auf ABOUT: der Bogen scrollt in seinem eigenen
   Bereich unter der Kopfzeile. Die Kopfzeile bleibt frei, es faehrt ihr
   nie ein Bild ins Gesicht. */
#s-bogen{ overflow:hidden }
.bogen-feld{
  position:absolute; top:78px; bottom:0; left:50%; transform:translateX(-50%);
  width:calc(4 * var(--tile) + 3 * var(--gap));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.bogen{
  position:relative;              /* Bezug fuer die, die gerade gehen */
  padding-bottom:12vh;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  align-items:start;                       /* sonst dehnt die Reihe die Bilder */
  gap:26px 8px;
}
.dso{ display:block; min-width:0 }
/* hidden schlaegt display:block nur, wenn man es hinschreibt — sonst
   blendet der Filter nichts aus. */
.dso[hidden]{ display:none }
/* Hochkant 3:4 — dasselbe Format wie die acht Kacheln auf der Startseite. */
.dso-bild{ display:block; position:relative; overflow:hidden; margin-bottom:3px }
.dso img{
  display:block; width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover;
  background:#000; margin:0;
}
/* ---------- Suche: finden, nicht wegfiltern ----------
   Die Arten filtern, die Suche zeigt. Wer M 31 eingibt, soll die Galaxie
   sehen — sie wird angefahren und traegt den gruenen Ring, den die App um
   das gewaehlte Objekt zeichnet. Alles andere tritt zurueck. */
.bogen.gesucht .dso{ opacity:.18; transition:opacity .3s ease }
.bogen.gesucht .dso.treffer{ opacity:1 }
.dso.treffer .dso-bild{ outline:1.5px solid var(--green); outline-offset:-1.5px }
.dso.treffer .dso-nr{ color:var(--ink) }

/* Die Nummern sitzen am Bild, nicht darunter im Nichts: dieselbe Groesse
   wie ueberall, aber eng gesetzt — bei 91 px Bildbreite waere der normale
   Zeilenabstand der Seite doppelt so hoch wie noetig. */
/* Gleicher Abstand ueberall unter dem Bild: 3 px unter dem Bild und
   Zeilenhoehe 1.15 ergeben beide Male gemessene 6,4 px Weiss — zwischen
   Bildkante und erster Nummer wie zwischen den beiden Nummern. Der
   Zeilenabstand der Seite (1,7) waere hier dreimal so viel. */
.dso-nr{ display:block; line-height:1.15; white-space:nowrap;
         overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em;
         color:var(--green); transition:color .22s ease }

/* ---------- Mischeln ----------
   Beim Wechsel der Art wandern die bleibenden Bilder von ihrem alten auf
   ihren neuen Platz; die dazukommenden blenden auf. */
/* Drei Rollen — so, wie es die Werkzeuge fuer genau diese Aufgabe
   machen (Isotope, GSAP Flip, Vue TransitionGroup):

     bleibt  -> wandert vom alten auf den neuen Platz (FLIP)
     kommt   -> waechst aus dem Nichts auf
     geht    -> verlaesst den Fluss, bleibt an seinem Platz stehen und
                schrumpft dort zu nichts zusammen

   Die Werte sind die von Isotope: 0,4 s, verschwunden heisst
   opacity 0 und scale(0.001) — nicht ein bisschen blasser, sondern weg.
   Ohne die dritte Rolle springt der Bogen einfach um. */
.dso.mischelt{
  transition:transform .45s cubic-bezier(.32,.72,.28,1) var(--wv, 0ms),
             opacity .45s ease var(--wv, 0ms);
}
.dso.kommt{ opacity:0; transform:scale(.001) }
.dso.geht{
  position:absolute; z-index:1; pointer-events:none; margin:0;
  transition:transform .45s cubic-bezier(.32,.72,.28,1) var(--wv, 0ms),
             opacity .45s ease var(--wv, 0ms);
}
.dso.geht.weg{ opacity:0; transform:scale(.001) }

/* ---------- Reiter fuer die Arten ----------
   Sie stehen dort, wo sonst die Zeichen stehen: dieselbe Zeile, dieselbe
   Schrift. Der gewaehlte traegt das App-Gruen. */
/* Die Zeile laeuft vom +F bis zum rechten Wort und verteilt sich ueber
   die ganze Rasterbreite: Arten und Suchfeld stehen gleichmaessig, nicht
   als Klumpen rechts. .arten gibt seine Kinder an die Zeile weiter
   (display:contents), damit alle neun Glieder gemeinsam verteilt werden. */
body.auf-bogen .home-nav{ left:3.6em; right:0; justify-content:space-between }
.filterzeile{ flex:1 1 auto; align-items:center;
              justify-content:space-between; gap:0 }
.arten{ display:contents }
.arten a{ white-space:nowrap }
.arten a:hover{ text-decoration:underline; text-underline-offset:3px }
.arten a.an{ color:var(--green) }
/* Die Arten-Zeile gehoert nur auf den Bogen. Ueberall sonst stehen dort
   die beiden Zeichen, und der Reiter ATLAS DSO fuehrt hin; auf dem Bogen
   ist es umgekehrt. Den Zustand setzt der Router am Koerper.
   WICHTIG: das steht hier und nicht in frames.css — der Einbau schreibt
   diesen Block bei jedem Lauf neu, alles andere ginge verloren. */
.filterzeile{ display:none }
body.auf-bogen .filterzeile{ display:flex }
body.auf-bogen .home-nav .ilink,
body.auf-bogen .zeichen,
body.auf-bogen #beitraglink,
body.auf-bogen #dsolink{ display:none }

/* Das Suchfeld steht in derselben Zeile und traegt dieselbe Schrift wie
   die Arten daneben: kein Kasten, kein Rahmen — nur der Strich darunter,
   derselbe wie unter jedem Verweis der Seite. */
.suche{
  font:inherit; letter-spacing:inherit; text-transform:uppercase;
  color:inherit; background:none; border:0; outline:none; padding:0;
  width:7.5em; line-height:1;
  border-bottom:.5px solid currentColor; padding-bottom:3px;
}
.suche::placeholder{ color:inherit; opacity:.42 }
.suche:focus{ border-bottom-color:var(--green) }
.suche.voll{ color:var(--green); border-bottom-color:var(--green) }
/* Das Kreuz des Browsers ist blau und rund — dafuer gibt es hier ein
   eigenes, dasselbe wie ueber den Dokumenten auf ABOUT. */
.suche::-webkit-search-cancel-button,
.suche::-webkit-search-decoration{ -webkit-appearance:none; display:none }
.such-feld{ position:relative; display:flex; align-items:center }
.such-zu{
  border:0; background:none; padding:0; margin-left:-14px;
  width:11px; height:11px; color:var(--green); cursor:pointer; display:none;
}
.such-zu svg{ display:block; width:100%; height:100% }
.such-feld.voll .such-zu{ display:block }

/* Die Rasterbreite haengt auch an der Fensterhoehe (--tile rechnet mit
   vh). In einem flachen Fenster wird der Block so schmal, dass die acht
   Woerter aneinanderstossen — dann bekommt die Zeile eine eigene Reihe,
   genau wie am Handy. Deshalb steht hier eine Bedingung fuer BEIDES.
   Die Arten lassen sich dort seitlich ziehen, das Suchfeld bleibt rechts
   stehen — sonst muesste man erst scrollen, um suchen zu koennen. */
@media (max-width:1150px), (max-height:840px){
  body.auf-bogen .filterzeile{
    position:fixed; top:calc(44px + env(safe-area-inset-top, 0px));
    left:0; right:0; z-index:29; background:var(--paper);
    padding:6px var(--pad) 10px; gap:1.1em; flex:0 0 auto;
  }
  body.auf-bogen .home-nav{ left:auto; right:auto }
  .arten{ display:flex; align-items:center; flex:1 1 auto; min-width:0; gap:1.2em;
          overflow-x:auto; -webkit-overflow-scrolling:touch }
  .arten::-webkit-scrollbar{ display:none }
  .such-feld{ flex:0 0 auto }
  .suche{ width:5.4em }
  body.auf-bogen .bogen-feld{ top:96px }
}

@media (max-width:760px){
  .bogen-feld{ top:96px; left:var(--pad); right:var(--pad); width:auto; transform:none }
  .bogen{ grid-template-columns:repeat(4, 1fr); gap:18px 8px }
}
/* ENDE BOGEN */

/* Sehr schmale Geraete (iPhone SE und aehnlich, 375 px und darunter):
   fuenf Glieder in der Kopfzeile passen dort nur mit engerer Luecke
   auf eine Zeile. Ab 390 px bleibt es bei 1em. */
@media (max-width:389px){
  /* --pad statt nur der Kopfzeile: so bleibt das +F auf derselben
     Flucht wie der Text darunter. */
  :root{ --pad:12px }
  .home-nav{ gap:.7em }
}