
/* Betriebsseite, Entwurf 3: Die Straße (14.10.2026). Seit Simons Wort vom selben Tag („wir lassen es vorerst mit dem
   anderen Buchungssystem und bauen nur die Schnittpunkte für die anderen Anbieter“) ohne eigenen Kalender: nur Kanal. Simon: „mach wieder mehrere Entwürfe fertig, und denk dran, dass
   sie auf allen unterschiedlichen Geräten gut aussehen müssen." Eine Strasse mit Läden am Abend; ein Licht (die KI)
   geht sie für einen Kunden ab und bleibt bei deinem Laden stehen. An deinem Laden hängt ein Schild, das sich mit
   jeder Tafel umdreht. Zusagen wie Entwurf 1, Fundstellen in ceo/netz/gegen-uns-13-10-2026.md (velares-stripe). */
.kopf { background: linear-gradient(to bottom, var(--grund) 55%, rgba(23, 20, 18, 0)); }
.tafel { text-shadow: 0 0 14px var(--grund), 0 0 4px var(--grund); background: rgba(23, 20, 18, .9); box-shadow: 0 0 32px 22px rgba(23, 20, 18, .9); }
a.skizzenknopf { text-decoration: none; }
@media (max-aspect-ratio: 105/100) and (max-height: 740px) { .tafel:not(.schluss) p { display: none; } }
@media (max-height: 500px) { .tafel.schluss > p:not(.klein) { display: none; } }   /* quer gehaltenes Handy: Knöpfe vor Text, alles steht hinter „Auf einen Blick“ */
/* „Auf einen Blick“ liegt seit 14.10.2026 hinter einem Knopf neben dem Netz (Simon: „hinter einem knopf neben dem animierten netz“);
   ein Popover des Browsers. Der Text steht nie unter der Geschichte (Simon: „wenn ich weiterscrolle hört es nicht auf“): ohne
   Popover im Browser (etwa iPhone mit iOS 16) bleibt er verborgen, und der Knopf schaltet die Klasse `offen` (Skript unten). */
.blick { display: none; }
.blick.offen { display: block; position: fixed; inset: 0; z-index: 20; height: fit-content; box-shadow: 0 0 0 100vmax rgba(23, 20, 18, .8); }
.blick:popover-open { display: block; }
.blick[popover] { width: min(760px, calc(100% - 2 * var(--rand))); max-height: calc(100dvh - 32px); margin: auto; padding: 22px 28px 28px; overflow: auto; overscroll-behavior: contain; background: var(--grund); color: var(--text); border: 1px solid var(--linie); }
.blick[popover]::backdrop { background: rgba(23, 20, 18, .8); }
.blick .oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
button.leise { background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 720px) { .blick[popover] { padding: 14px 18px 22px; } }
.blick .kicker { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: var(--leise); letter-spacing: .02em; }
.blick h2 { font: 500 clamp(28px, 3.4vw, 44px)/1.06 'Fraunces', Georgia, serif; letter-spacing: -.02em; margin: 8px 0 12px; text-wrap: balance; }
.blick ul { list-style: none; margin: 18px 0 8px; padding: 0; max-width: 46em; }
.blick li { border-top: 1px solid var(--linie); padding: 14px 0; color: var(--text); }
.blick li:last-child { border-bottom: 1px solid var(--linie); }
.blick li span { display: block; font: 400 13px/1.4 'IBM Plex Mono', monospace; color: var(--leise); margin-bottom: 4px; }
.blick .knoepfe { margin-top: 24px; }
