/* werbefrei: nur die Agenturseite. Nacht und Signal statt Rosé: für Leute, die vom Telefon leben
   und einen Taschenkalender in der Jacke haben (Betreiber, 24.09.2026). Baukasten darunter bleibt glow line. */
:root {
  --grund: #F7F3ED; --grund-2: #EFE9E0; --sand: #E3DBCF; --linie: #E0D8CB;
  --taupe: #7A6F64; --taupe-tief: #45403A; --tinte: #1A1613;
  --akzent: #F29B55; --akzent-hell: #F6D2B3; --akzent-text: #A8490F;
  --primaer: #B94E14; --pille: #15110E;
  --nacht: #15110E; --nacht-2: #221B16; --creme: #F4EEE6; --leise: #B7AC9F;
}
@media (max-width: 480px) { .wortmarke b { font-size: 1.3rem; } }

/* Kopf und Held liegen in der Nacht */
.kopf.nacht { background: var(--nacht); }
.kopf.nacht .wortmarke, .kopf.nacht .kopf-nav a { color: var(--creme); }
.kopf.nacht .kopf-ruf { color: var(--creme); border-color: #3a302a; }
.held-nacht { position: relative; overflow: hidden; background: var(--nacht); color: var(--creme); }
.held-nacht .raster { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; width: 100%;
  padding-top: 28px; padding-bottom: 64px; text-align: center; }
.held-nacht h1 { color: var(--creme); font-size: clamp(3rem, 8vw, 5.6rem); }
.held-nacht h1 em { color: var(--akzent); }
.held-nacht .augenbraue { justify-content: center; color: var(--leise); }
.held-nacht .augenbraue::before { display: none; }
.held-nacht .absatz { max-width: 50ch; margin: 0 auto; color: #D6CDC2; }
.held-nacht .tun { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.held-nacht .knopf-rand { border-color: var(--creme); color: var(--creme); }
.held-nacht .knopf-rand:hover { background: var(--creme); color: var(--nacht); }
.held-nacht .hinweis-zeit { color: var(--leise); }
@media (max-width: 767px) { .held-nacht .tun .knopf { padding: 16px 22px; } }

/* Die Szene: Suche → Anruf → Termin, in Schleife */
.szene { position: relative; height: 560px; max-width: 460px; width: 100%; margin: 0 auto; }
.szene .schein { position: absolute; inset: -20% -30%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(242,155,85,.0), rgba(242,155,85,.16), rgba(120,70,160,.10), rgba(242,155,85,.0) 70%);
  filter: blur(40px); animation: drehen 18s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.ringe { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
.ringe span { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%;
  border: 2px solid rgba(242,155,85,.75); box-shadow: 0 0 24px rgba(242,155,85,.25), inset 0 0 24px rgba(242,155,85,.12); opacity: 0; }
.szene.klingelt .ringe span { animation: ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.szene.klingelt .ringe span:nth-child(2) { animation-delay: .8s; }
.szene.klingelt .ringe span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { from { transform: scale(.55); opacity: .95; } to { transform: scale(2.2); opacity: 0; } }

.szene .handy { position: absolute; left: 50%; top: 0; width: 250px; margin-left: -140px; padding: 9px; border-radius: 38px;
  background: #0b0908; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px #2e2520; }
.szene .handy::before { background: #221b16; }
.szene.klingelt .handy { animation: brummen .12s linear infinite; }
@keyframes brummen { 0% { transform: translateX(-1px) rotate(-.4deg); } 50% { transform: translateX(1px) rotate(.4deg); } 100% { transform: translateX(-1px) rotate(-.4deg); } }
.szene .bildschirm { position: relative; min-height: 440px; border-radius: 30px; padding: 30px 12px 16px; overflow: hidden; }
.zustand { position: absolute; inset: 30px 12px 16px; transition: opacity .35s ease; }
.zustand.anruf { opacity: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 34px;
  background: linear-gradient(180deg, #1c1612, #2a1e16); margin: -30px -12px -16px; padding-left: 12px; padding-right: 12px; border-radius: 30px; }
.szene.klingelt .zustand.suche { opacity: 0; }
.szene.klingelt .zustand.anruf { opacity: 1; }
.anruf .rund { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-top: 14px;
  background: rgba(242,155,85,.16); color: var(--akzent); box-shadow: 0 0 0 10px rgba(242,155,85,.07); }
.anruf .rund svg { width: 32px; height: 32px; }
.anruf .klein { margin-top: 18px; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); }
.anruf .gross { margin-top: 8px; font-size: 1.35rem; font-weight: 300; color: var(--creme); }
.anruf .woher { margin-top: 6px; font-size: .8125rem; color: #D6CDC2; }
.anruf .tasten { margin-top: auto; margin-bottom: 26px; display: flex; gap: 56px; }
.anruf .tasten span { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.anruf .tasten .nein { background: #4a3a31; color: #d8cbbe; }
.anruf .tasten .ja { background: var(--akzent); color: var(--nacht); }
.anruf .tasten svg { width: 22px; height: 22px; }
.suche .vorschlaege li { transition: background .25s ease; border-radius: 10px; padding: 8px 10px; gap: 9px; font-size: .78rem; white-space: nowrap; }
.suche .vorschlaege li.gewaehlt { background: #f6efe6; }
.suche .vorschlaege li.gewaehlt b { color: var(--akzent-text); }

/* Der Taschenkalender */
.kalender { position: absolute; right: -6px; bottom: 0; width: 230px; padding: 16px 16px 14px 34px; border-radius: 6px;
  background: #FBF6EC; color: #2a241f; transform: rotate(-5deg); text-align: left;
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
  background-image: linear-gradient(90deg, transparent 24px, rgba(200,70,60,.45) 24px, rgba(200,70,60,.45) 25.5px, transparent 25.5px),
                    repeating-linear-gradient(180deg, transparent 0 27px, rgba(80,110,160,.18) 27px 28px); }
.kalender .woche { font-family: var(--wortmarke); font-size: 1.05rem; letter-spacing: .01em; }
.kalender .woche small { display: block; font-family: var(--schrift); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: #8a7e72; margin-top: 2px; }
.kalender ol { list-style: none; margin: 8px 0 0; padding: 0; min-height: 168px; }
.kalender li { height: 28px; display: flex; align-items: flex-end; gap: 8px; padding-bottom: 5px; font-style: italic; font-weight: 300;
  font-size: .8125rem; color: #1f3f7a; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s ease-out; }
.kalender li.geschrieben { clip-path: inset(0 0 0 0); }
.kalender li b { font-style: normal; font-weight: 500; color: #2a241f; }
.kalender.blaettert ol { animation: blatt .7s ease-in forwards; }
@keyframes blatt { to { opacity: 0; transform: translateY(-6px); } }
.szene-zeile { margin-top: 10px; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }

@media (min-width: 1024px) {
  .held-nacht .raster { grid-template-columns: repeat(12, 1fr); column-gap: 48px; row-gap: 12px; text-align: left; padding-top: 56px; padding-bottom: 88px; }
  .held-nacht .kopfzeile { grid-column: 1 / span 6; grid-row: 1; }
  .held-nacht .szene-spalte { grid-column: 7 / span 6; grid-row: 1 / span 2; }
  .held-nacht .unten { grid-column: 1 / span 6; grid-row: 2; }
  .held-nacht .augenbraue { justify-content: flex-start; }
  .held-nacht .augenbraue::before { display: block; background: var(--akzent); }
  .held-nacht .absatz { margin: 0; }
  .held-nacht .tun { justify-content: flex-start; }
  .szene { height: 600px; }
  .szene .handy { width: 290px; margin-left: -185px; }
  .kalender { right: -30px; width: 270px; }
  .szene-zeile { text-align: center; }
}
@media (max-width: 480px) {
  .szene { height: 590px; }
  .szene .handy { width: 250px; margin-left: -150px; }
  .kalender { width: 222px; right: -4px; padding: 12px 12px 10px 30px; }
  .kalender ol { min-height: 140px; }
  .kalender li { font-size: .75rem; height: 24px; }
  .kalender { background-image: linear-gradient(90deg, transparent 22px, rgba(200,70,60,.45) 22px, rgba(200,70,60,.45) 23.5px, transparent 23.5px),
                    repeating-linear-gradient(180deg, transparent 0 23px, rgba(80,110,160,.18) 23px 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .szene .schein, .szene.klingelt .ringe span, .szene.klingelt .handy { animation: none; }
  .kalender li { clip-path: none; transition: none; }
}
.szene .suchfeld { font-size: .8125rem; white-space: nowrap; overflow: hidden; padding: 10px 14px; }
.suche .vorschlaege.lang li { font-size: .68rem; gap: 7px; padding: 8px 6px; }
.szene .suchfeld.lang { font-size: .72rem; }

/* Bildschirm 2 (25.09.2026): drei Schritte, „Erst sehen, dann zahlen.", die Nummer, der Knopf. Normaler Abstand oben. */
.zwei { background: var(--grund); padding: 72px 0 96px; }
.zwei h2 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; }
.drei { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.drei li { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; }
.drei span { font-size: .875rem; font-weight: 500; color: var(--akzent-text); }
.drei b { font-size: 1.25rem; font-weight: 400; }
.drei p { margin-top: 6px; font-size: .9375rem; line-height: 1.6; color: var(--taupe-tief); }
.zwei .erst { margin-top: 44px; font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-tief); }
.zwei .nummer { margin-top: 10px; font-size: clamp(2.25rem, 9vw, 3.25rem); font-weight: 300; letter-spacing: -.01em; }
.zwei .nummer a { color: var(--tinte); }
.zwei .knopf { margin-top: 20px; }
.zwei .recht { margin-top: 48px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-tief); }
.zwei .recht a { color: inherit; }
.fuss-recht { background: var(--grund); padding: 18px 24px; text-align: center; }
.fuss-recht .recht { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-tief); }
.fuss-recht .recht a { color: inherit; }

/* Held: mindestens ein Bildschirm; zweiter Absatz kleiner */
.held-nacht { min-height: calc(100svh - 80px); }
.held-nacht .klein-absatz { margin-top: 12px; font-size: .9375rem; color: var(--leise); }

/* Versteckter Zustand wirklich versteckt, nicht nur durchsichtig */
.zustand.anruf { visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.szene.klingelt .zustand.anruf { visibility: visible; transition: opacity .35s ease, visibility 0s; }
.szene.klingelt .zustand.suche { visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }

/* Vorschläge: nie abgeschnitten */
.suche .vorschlaege li span { min-width: 0; }
.suche .vorschlaege.lang li { font-size: .64rem; }

/* Balken: erst nach dem Held, weg beim letzten Knopf */
.balken { transition: transform .3s ease; }
.balken.versteckt { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { .balken { transition: none; } }
.balken { position: fixed; left: 0; right: 0; bottom: 0; }

/* ── 01.10.2026: Sample 6 von atelier (Marker-Stil, Gold-Fassung), vom Betreiber abgenommen („9 von 10, nehme ich"). Die Seite bleibt, Farben und Szene neu.
   Tokens (atelier/TOKENS.md, Entscheidung 2): Weiß, Tinte #15110E, Orange #C8611E nur Kreis und i-Punkt, Neonblau #2A5BFF Überzeile und Knopf-Rahmen,
   Neongrün #39FF14 und Gold #E0B33A nur in der Zeichnung, Gold-Strich unter „voll.", Kupfer #B87333 „voll.". Teile: site/bild/, Sitz nach teile/LAYOUT.md. ── */
:root { --grund: #FFFFFF; --grund-2: #FFFFFF; --sand: #EDE7DF; --linie: #E2D9CD; --taupe: #6E655B; --taupe-tief: #15110E; --tinte: #15110E;
  --akzent: #2A5BFF; --akzent-hell: #DCE4FF; --akzent-text: #15110E; --primaer: #2A5BFF; --pille: #15110E;
  --nacht: #FFFFFF; --nacht-2: #FFFFFF; --creme: #15110E; --leise: #6E655B;
  --blau: #2A5BFF; --gruen: #39FF14; --gold: #E0B33A; --kupfer: #B87333; --orange: #C8611E; }
/* Kopf: Wortmarke mit i-Punkt, Unterzeile daneben (auf dem Handy darunter), Anruf als der Orange-Kreis aus der Zeichnung */
.kopf.nacht .wortmarke { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.kopf.nacht .wortmarke img { height: 28px; width: auto; display: block; }
.kopf.nacht .wortmarke small { display: block; margin: 0; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tinte); font-weight: 500; white-space: nowrap; }
.kopf .knopf { display: none !important; }
.kopf-ruf, .kopf.nacht .kopf-ruf { display: block !important; width: 46px; height: 46px; border: 0; background: url("/bild/anruf-kreis.webp") center / 100% 100% no-repeat; }
.kopf-ruf svg { display: none; }
@media (min-width: 768px) {
  .kopf.nacht .wortmarke { flex-direction: row; align-items: baseline; gap: 16px; }
  .kopf.nacht .wortmarke img { height: 32px; }
  .kopf.nacht .wortmarke small { font-size: .66rem; }
}
/* Held: weiß, Überzeile blau, „voll." kupfer mit Gold-Strich */
.held-nacht { min-height: auto; }
.held-nacht .raster { padding-top: 26px; padding-bottom: 40px; gap: 18px; }
.held-nacht .augenbraue { color: var(--blau); font-weight: 700; letter-spacing: .2em; }
.held-nacht .augenbraue::before { display: none !important; }
.held-nacht h1 { color: var(--tinte); }
.held-nacht h1 em { color: var(--kupfer); position: relative; display: inline-block; }
.held-nacht h1 em::after { content: ""; position: absolute; left: -2%; right: 2%; bottom: -.06em; height: .14em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 Q50 3 100 7 T196 6' fill='none' stroke='%23E0B33A' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.held-nacht .absatz, .held-nacht .klein-absatz { color: var(--tinte); }
.knopf-primaer, .held-nacht .knopf, .zwei .knopf { background: #fff; color: var(--blau); border: 3px solid var(--blau); border-radius: 5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; box-shadow: none; }
.knopf-primaer::before { background: var(--blau); }
.knopf-primaer:hover { color: #fff; }
.held-nacht .knopf-rand { border-color: var(--blau); color: var(--blau); }
/* Die Zeichnung: vier Teile, von hinten: Konfetti, Zettel, Telefon, Kreis mit Bögen. Sitz in Prozent des Kastens (teile/LAYOUT.md) */
.szene.gezeichnet { position: relative; width: 100%; max-width: 760px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
.szene.gezeichnet .teil { position: absolute; height: auto; display: block; max-width: none; }
.szene.gezeichnet .konfetti { left: 0; top: 0; width: 100%; }
.szene.gezeichnet .zettel { left: 55.3%; top: 23.7%; width: 34.2%; transform: rotate(4deg); }
.szene.gezeichnet .telefon { left: 7.9%; top: 3.9%; width: 39.5%; transform: rotate(-6deg); }
.szene.gezeichnet .kreis { left: 11.5%; top: 21%; width: 32.9%; transform-origin: 50% 50%; }
.szene.gezeichnet.klingelt .kreis { animation: klingel 1.1s ease-in-out infinite; }
@keyframes klingel { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (max-width: 767px) {
  .szene.gezeichnet { max-width: 340px; aspect-ratio: 340 / 400; }
  .szene.gezeichnet .telefon { left: 8.8%; top: 5%; width: 61.8%; }
  .szene.gezeichnet .kreis { left: 13.2%; top: 26%; width: 52.9%; }
  .szene.gezeichnet .zettel { left: 61.8%; top: 55%; width: 44.1%; }
}
@media (min-width: 1024px) {
  .held-nacht .raster { padding-top: 32px; padding-bottom: 56px; }
  .held-nacht .kopfzeile { align-self: end; }
  .held-nacht .unten { align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .szene.gezeichnet.klingelt .kreis { animation: none; } }
/* Zweiter Bildschirm und Fuß */
.zwei { border-top: 1px solid var(--linie); }
.zwei .recht, .fuss-recht .recht { color: var(--leise); }
/* Nachbesserung nach dem ersten Bild: „voll." fett wie im Muster, Gold-Strich dichter; Handy: weniger Luft zwischen Zeichnung und Knopf */
.held-nacht h1 em { font-weight: 600; font-style: italic; }
.held-nacht h1 em::after { bottom: -.02em; height: .13em; }
@media (max-width: 767px) { .held-nacht .raster { gap: 8px; padding-bottom: 28px; } .held-nacht .tun { margin-top: 6px; } .szene.gezeichnet { aspect-ratio: 340 / 385; } }
/* Kurze Seite: Fuß unten, Korn bis zum Rand */
html { background: #fff; }
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ── 01.10.2026, atelier baut (Übergabe vom Betreiber): die Suche tippt in das gezeichnete Telefon, der Termin landet auf dem Zettel.
   Schrift für Getipptes und Notizen: Patrick Hand (OFL), selbst gehostet. Maße aus den PNG-Teilen gemessen (Feld und Linien in Prozent). ── */
@font-face { font-family: "Patrick Hand"; src: url("/baukasten/schrift/patrick-hand-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
.szene.gezeichnet .teil-wrap { position: absolute; container-type: inline-size; }
.szene.gezeichnet .teil-wrap > img { position: static; width: 100%; height: auto; display: block; }
.szene.gezeichnet .telefon-wrap { left: 7.9%; top: 3.9%; width: 39.5%; transform: rotate(-6deg); }
.szene.gezeichnet .zettel-wrap { left: 55.3%; top: 23.7%; width: 34.2%; transform: rotate(4deg); }
@media (max-width: 767px) {
  .szene.gezeichnet .telefon-wrap { left: 8.8%; top: 5%; width: 61.8%; }
  .szene.gezeichnet .zettel-wrap { left: 61.8%; top: 55%; width: 44.1%; }
}
/* Das Suchfeld: Innenfläche des gezeichneten Felds, um 4° steigend wie die Zeichnung */
.szene.gezeichnet .suche { position: absolute; left: 29.4%; top: 22.6%; width: 53%; height: 8.3%; transform: rotate(-4deg); transform-origin: 50% 50%;
  display: flex; align-items: center; gap: 1.6cqw; padding: 0 3cqw 0 3.6cqw; box-sizing: border-box; overflow: hidden; white-space: nowrap;
  font-family: "Patrick Hand", "Segoe Print", cursive; font-size: 7cqw; line-height: 1; color: #15110E; }
.szene.gezeichnet .suche .text { font-size: var(--fit, 1em); }
.szene.gezeichnet .suche svg { flex: 0 0 auto; width: 6.2cqw; height: 6.2cqw; }
.szene.gezeichnet .suche .text { min-width: 0; }
.szene.gezeichnet .suche .cursor { display: inline-block; width: 2px; height: .95em; background: #15110E; margin-left: 1px; vertical-align: -.1em; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
/* Der Vorschlag darunter: erscheint nach dem Tippen, der Marker legt sich drunter, dann klingelt es */
.szene.gezeichnet .vorschlag { position: absolute; left: 31%; top: 33.2%; width: 52%; transform: rotate(-4deg); transform-origin: 0 50%;
  font-family: "Patrick Hand", cursive; font-size: 5.2cqw; line-height: 1.25; color: var(--blau); white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity .3s ease; }
.szene.gezeichnet .vorschlag.da { opacity: 1; }
.szene.gezeichnet .vorschlag b { font-weight: 400; color: #15110E; position: relative; z-index: 0; }
.szene.gezeichnet .vorschlag b::before { content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .05em; height: .55em; z-index: -1; opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 11 Q60 6 110 11 T197 9' fill='none' stroke='%23E0B33A' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform .45s ease, opacity .2s ease; }
.szene.gezeichnet .vorschlag.gewaehlt b::before { opacity: 1; transform: scaleX(1); }
/* Der Zettel: fünf Linien, gemessen; die Linien liegen in der Zeichnung um 6° fallend */
.szene.gezeichnet .notizen { position: absolute; inset: 0; transform: rotate(-6deg); transform-origin: 50% 50%; pointer-events: none; }
.szene.gezeichnet .notizen span { position: absolute; left: 24%; width: 55%; line-height: 1; font-family: "Patrick Hand", cursive; font-size: 5.8cqw; color: var(--blau); white-space: nowrap; overflow: hidden;
  clip-path: inset(0 100% 0 0); transition: clip-path 1s ease-out; }
.szene.gezeichnet .notizen span.geschrieben { clip-path: inset(0 0 0 0); }
.szene.gezeichnet .notizen span b { font-weight: 400; color: #15110E; margin-right: .35em; }
.szene.gezeichnet .notizen span:nth-child(1) { bottom: 52.8%; } .szene.gezeichnet .notizen span:nth-child(2) { bottom: 45.8%; }
.szene.gezeichnet .notizen span:nth-child(3) { bottom: 38.8%; } .szene.gezeichnet .notizen span:nth-child(4) { bottom: 32.2%; }
.szene.gezeichnet .notizen span:nth-child(5) { bottom: 25.5%; }
.szene.gezeichnet .zettel-wrap.blaettert .notizen { animation: blatt .6s ease-in forwards; }
/* Klingeln: Kreis pulst, die Bögen zittern leicht mit */
.szene.gezeichnet.klingelt .kreis { animation: klingel .55s ease-in-out infinite; }
/* Konfetti etwas enger an die Zeichnung (Nachbesserung am Live-Bild) */
@media (min-width: 768px) { .szene.gezeichnet .konfetti { left: 4%; top: 3%; width: 92%; } }
@media (prefers-reduced-motion: reduce) {
  .szene.gezeichnet .suche .cursor { animation: none; }
  .szene.gezeichnet .notizen span, .szene.gezeichnet .vorschlag, .szene.gezeichnet .vorschlag b::before { transition: none; }
}

/* ── Angleich an das Muster (Betreiber schickte sample-06-gold als Maßstab, 01.10. 15:20):
   Headline halbfett wie im Muster, Zeichnung größer, Telefon höher, Knopf als Marker-Rahmen, Wortmarke und Unterzeile wie gezeichnet ── */
.held-nacht h1 { font-weight: 500; letter-spacing: -.02em; line-height: .98; }
.held-nacht h1 em { font-weight: 600; }
.held-nacht .augenbraue { font-size: .8rem; letter-spacing: .14em; }
/* Marker-Knopf: Rahmen aus einem SVG-Pfad mit leicht unruhiger Linie, Wort in Blau, Patrick Hand */
.knopf-primaer, .held-nacht .knopf { position: relative; border: 0; background: transparent; box-shadow: none; padding: 14px 34px;
  font-family: "Patrick Hand", cursive; font-size: 1.35rem; letter-spacing: .08em; font-weight: 400; color: var(--blau); text-transform: uppercase; border-radius: 0; }
.knopf-primaer::before { content: ""; position: absolute; inset: -3px; background: none; opacity: 1; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'%3E%3Cpath d='M6 9 Q150 4 294 8 Q297 40 293 72 Q150 76 7 71 Q3 40 6 9 Z' fill='none' stroke='%232A5BFF' stroke-width='7' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.knopf-primaer:hover { color: var(--blau); background: transparent; }
.knopf-primaer:hover::before { transform: scale(1.03); }
.knopf-primaer::after { display: none; }
/* Zeichnung: Schreibtisch größer und tiefer, Telefon 9:19,5 (der PNG-Teil ist schmaler als im Muster, deshalb Breite rauf) */
@media (min-width: 1024px) {
  .held-nacht .raster { padding-top: 24px; padding-bottom: 40px; column-gap: 24px; }
  .held-nacht .kopfzeile { grid-column: 1 / span 5; }
  .held-nacht .unten { grid-column: 1 / span 5; }
  .held-nacht .szene-spalte { grid-column: 6 / span 7; }
  .szene.gezeichnet { max-width: 900px; aspect-ratio: 900 / 720; }
  .szene.gezeichnet .konfetti { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
  .szene.gezeichnet .telefon-wrap { left: 12%; top: 1%; width: 36%; }
  .szene.gezeichnet .kreis { left: 13.5%; top: 29%; width: 33%; }
  .szene.gezeichnet .zettel-wrap { left: 58%; top: 20%; width: 33%; }
}
@media (max-width: 767px) {
  .szene.gezeichnet { max-width: 360px; aspect-ratio: 360 / 400; }
  .szene.gezeichnet .konfetti { width: 100%; height: 100%; object-fit: contain; }
  .szene.gezeichnet .telefon-wrap { left: 8%; top: 2%; width: 60%; }
  .szene.gezeichnet .kreis { left: 10.5%; top: 36%; width: 55%; }
  .szene.gezeichnet .zettel-wrap { left: 60%; top: 30%; width: 40%; }
  .held-nacht .tun { margin-top: 10px; }
}

/* ── Maß genommen am Muster (sample-06-gold, 1500×844 → 1440 und 848×1500 → 390), 01.10. 15:30 ── */
@font-face { font-family: "Montserrat"; src: url("/baukasten/schrift/montserrat-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
.held-nacht h1 { font-weight: 600; font-size: clamp(3.4rem, 7.6vw, 7rem); line-height: .96; letter-spacing: -.025em; }
.held-nacht h1 em { font-weight: 600; font-style: italic; }
.held-nacht h1 em::after { bottom: -.1em; height: .16em; left: -3%; right: 0; }
.held-nacht .augenbraue { font-size: clamp(.8rem, 1.3vw, 1.2rem); letter-spacing: .12em; font-weight: 700; margin-bottom: .4em; }
.kopf.nacht .wortmarke img { height: 44px; }
.kopf.nacht .wortmarke small { font-size: .72rem; letter-spacing: .18em; }
.kopf-ruf, .kopf.nacht .kopf-ruf { width: 56px; height: 56px; }
.knopf-primaer, .held-nacht .knopf { font-size: 1.6rem; padding: 14px 36px; letter-spacing: .06em; }
.szene.gezeichnet .suche { left: 29.4%; top: 22.6%; width: 53%; height: 8.3%; font-size: 7.6cqw; padding: 0 2.4cqw 0 3.4cqw; gap: 1.4cqw; }
.szene.gezeichnet .suche .text { display: inline-block; white-space: nowrap; }
.szene.gezeichnet .vorschlag { font-size: 5cqw; top: 33.5%; }
.szene.gezeichnet .notizen span { font-size: 6.2cqw; }
@media (min-width: 1024px) {
  .kopf.nacht .wortmarke img { height: 60px; }
  .kopf.nacht .wortmarke small { font-size: .95rem; letter-spacing: .2em; }
  .kopf-ruf, .kopf.nacht .kopf-ruf { width: 76px; height: 76px; }
  .held-nacht .raster { grid-template-columns: 44% 1fr; column-gap: 0; padding-top: 24px; padding-bottom: 36px; align-items: center; }
  .held-nacht .kopfzeile { grid-column: 1; grid-row: 1; align-self: end; }
  .held-nacht .unten { grid-column: 1; grid-row: 2; align-self: start; }
  .held-nacht .szene-spalte { grid-column: 2; grid-row: 1 / span 2; }
  .held-nacht .tun { margin-top: 36px; }
  .szene.gezeichnet { max-width: 760px; aspect-ratio: 760 / 610; margin: 0 0 0 auto; }
  .szene.gezeichnet .telefon-wrap { left: 9%; top: 0; width: 47%; }
  .szene.gezeichnet .kreis { left: 15%; top: 31%; width: 35%; }
  .szene.gezeichnet .zettel-wrap { left: 62%; top: 26%; width: 36.5%; }
}
@media (max-width: 767px) {
  .kopf.nacht .wortmarke { flex-direction: row; align-items: baseline; gap: 10px; }
  .kopf.nacht .wortmarke img { height: 36px; }
  .kopf.nacht .wortmarke small { font-size: .6rem; }
  .held-nacht .raster { padding-top: 18px; padding-bottom: 20px; gap: 6px; }
  .held-nacht h1 { font-size: 3.7rem; }
  .held-nacht .augenbraue { font-size: .95rem; letter-spacing: .1em; }
  .szene.gezeichnet { max-width: 350px; aspect-ratio: 350 / 305; margin-top: 10px; }
  .szene.gezeichnet .telefon-wrap { left: 12%; top: 1%; width: 48%; }
  .szene.gezeichnet .kreis { left: 19%; top: 34%; width: 35%; }
  .szene.gezeichnet .zettel-wrap { left: 60%; top: 23%; width: 37%; }
  .held-nacht .tun { margin-top: 18px; }
  .knopf-primaer, .held-nacht .knopf { font-size: 1.5rem; padding: 12px 40px; }
}

/* ── Zweiter Abgleich am Muster, 01.10. 15:40: Headline einzeilig, Knopf größer, Handy-Kopf einreihig, Textblock auf dem Handy links wie im Muster ── */
.held-nacht h1 { white-space: nowrap; }
.held-nacht h1 em::after { left: -4%; right: -10%; }
@media (min-width: 1024px) {
  .held-nacht .raster { grid-template-columns: 46% 1fr; }
  .held-nacht h1 { font-size: 6.2rem; letter-spacing: -.03em; }
  .held-nacht .augenbraue { font-size: 1.3rem; letter-spacing: .1em; }
  .knopf-primaer, .held-nacht .knopf { font-size: 1.95rem; padding: 16px 46px; }
  .fuss-recht { text-align: left; padding-left: 24px; }
  .fuss-recht .recht { font-weight: 600; color: var(--tinte); }
  .szene.gezeichnet .vorschlag { font-size: 5.4cqw; }
}
@media (max-width: 767px) {
  .kopf.nacht .huelle-weit { padding: 0 20px; }
  .kopf.nacht .wortmarke { gap: 8px; }
  .kopf.nacht .wortmarke img { height: 30px; }
  .kopf.nacht .wortmarke small { font-size: .5rem; letter-spacing: .14em; }
  .kopf-ruf, .kopf.nacht .kopf-ruf { width: 48px; height: 48px; }
  .held-nacht .raster { text-align: left; padding-top: 14px; }
  .held-nacht .kopfzeile { padding: 0 4px; }
  .held-nacht .augenbraue { justify-content: flex-start; font-size: .92rem; letter-spacing: .1em; }
  .held-nacht h1 { font-size: 3.25rem; letter-spacing: -.03em; }
  .szene.gezeichnet { margin: 8px auto 0; }
  .held-nacht .tun { justify-content: center; margin-top: 14px; }
  .knopf-primaer, .held-nacht .knopf { font-size: 1.55rem; padding: 12px 46px; }
  .szene.gezeichnet .vorschlag { font-size: 5.6cqw; }
}

/* ── Korrektur: „voll." auf die eigene Zeile (die Einzeiligkeit gilt nur für „Ihr Kalender,"); Handy-Held füllt den Schirm wie im Muster ── */
.held-nacht h1 em { display: block; margin-top: .02em; }
.held-nacht h1 em::after { left: -4%; right: -10%; }
@media (min-width: 1024px) {
  .held-nacht { min-height: calc(100svh - 92px - 56px); }
  .held-nacht .raster { align-content: center; }
  .held-nacht .szene-spalte { padding-top: 36px; }
}
@media (max-width: 767px) {
  .held-nacht { min-height: calc(100svh - 64px - 52px); display: flex; }
  .held-nacht .raster { align-content: space-evenly; flex: 1; }
  .szene.gezeichnet { max-width: min(360px, 100%); aspect-ratio: 360 / 318; }
}

/* ── Korrektur 2: Gold-Strich nur unter dem Wort; Zeichnung in voller Spaltenbreite ── */
.held-nacht h1 em { display: block; width: max-content; }
.held-nacht .szene-spalte { width: 100%; justify-self: stretch; }
.szene.gezeichnet { width: 100%; }
@media (min-width: 1024px) {
  .held-nacht { display: flex; }
  .held-nacht .raster { flex: 1; align-content: center; }
  .szene.gezeichnet { max-width: 840px; aspect-ratio: 840 / 660; }
  .held-nacht .szene-spalte { padding-top: 16px; }
}
@media (max-width: 767px) {
  .held-nacht .raster { justify-items: stretch; }
  .szene.gezeichnet { width: min(360px, 100%); max-width: none; margin-left: auto; margin-right: auto; }
  .knopf-primaer, .held-nacht .knopf { font-size: 1.7rem; padding: 13px 52px; }
}

/* ── Korrektur 3: Termine auf den Linien 2–6 des Zettels (Luft unter der Überschrift), Getipptes schrumpft wirklich ── */
.szene.gezeichnet .notizen span { font-size: 6.4cqw; }
.szene.gezeichnet .notizen span:nth-child(1) { bottom: 45.6%; } .szene.gezeichnet .notizen span:nth-child(2) { bottom: 38.6%; }
.szene.gezeichnet .notizen span:nth-child(3) { bottom: 32%; } .szene.gezeichnet .notizen span:nth-child(4) { bottom: 25.3%; }
.szene.gezeichnet .notizen span:nth-child(5) { bottom: 18.3%; }
.szene.gezeichnet .suche .text { flex: 0 0 auto; display: block; min-width: 0; overflow: visible; }

/* ── Korrektur 4: der Vorschlag darf so breit sein wie das Feld und schrumpft mit ── */
.szene.gezeichnet .vorschlag { width: 54%; left: 30%; font-size: var(--vfit, 5.2cqw); }

/* ── Betreiber, 01.10. 16:25, beim Go: „put the call sign in the middle" → der Anrufen-Knopf mittig unter dem ganzen Held (Schreibtisch); auf dem Handy war er es schon ── */
@media (min-width: 1024px) {
  .held-nacht .unten { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: start; margin-top: -8px; }
  .held-nacht .szene-spalte { grid-row: 1; }
  .held-nacht .kopfzeile { align-self: center; }
  .held-nacht .tun { justify-content: center; margin-top: 0; }
}

/* ── Betreiber, 01.10. 16:30, live: „remove splat" → die Konfetti-Striche um die Zeichnung sind weg; Telefon, Kreis, Zettel und der Gold-Strich bleiben ── */
.szene.gezeichnet .konfetti { display: none; }

/* ── Betreiber, 01.10. 16:40: „Put the phone on top of the center call sign. Big, big phone." → Schreibtisch: Text links, das Telefon groß und mittig über dem Anrufen-Knopf ── */
@media (min-width: 1024px) {
  .held-nacht .raster { grid-template-columns: 1fr 1.25fr; column-gap: 24px; align-items: center; padding-top: 12px; padding-bottom: 24px; }
  .held-nacht .kopfzeile { grid-column: 1; grid-row: 1; align-self: center; }
  .held-nacht .szene-spalte { grid-column: 2; grid-row: 1; padding-top: 0; }
  .held-nacht .unten { grid-column: 2; grid-row: 2; justify-self: center; align-self: start; margin-top: -4px; }
  .held-nacht { min-height: calc(100svh - 92px - 56px); }
  .szene.gezeichnet { max-width: none; width: 100%; aspect-ratio: 880 / 640; margin: 0 auto; }
  .szene.gezeichnet .telefon-wrap { left: 22%; top: 0; width: 44%; transform: rotate(-5deg); }
  .szene.gezeichnet .kreis { left: 27.5%; top: 29%; width: 33%; }
  .szene.gezeichnet .zettel-wrap { left: 66%; top: 36%; width: 32%; transform: rotate(5deg); }
  .held-nacht h1 { font-size: 5.6rem; }
}
@media (min-width: 1280px) {
  .szene.gezeichnet { aspect-ratio: 900 / 680; }
  .szene.gezeichnet .telefon-wrap { width: 46%; left: 20%; }
  .szene.gezeichnet .kreis { left: 25.8%; top: 30%; width: 34.5%; }
}
@media (max-width: 767px) {
  .szene.gezeichnet { width: 100%; aspect-ratio: 360 / 340; }
  .szene.gezeichnet .telefon-wrap { left: 10%; top: 0; width: 54%; }
  .szene.gezeichnet .kreis { left: 16%; top: 36%; width: 40.5%; }
  .szene.gezeichnet .zettel-wrap { left: 62%; top: 34%; width: 37%; }
}

/* ── 16:45: Telefon füllt die Höhe, Anrufen direkt darunter, mittig ── */
@media (min-width: 1024px) {
  .held-nacht { min-height: 0; }
  .held-nacht .raster { grid-template-columns: 0.9fr 1.1fr; align-items: center; padding-top: 0; padding-bottom: 16px; row-gap: 0; }
  .szene.gezeichnet { width: min(100%, 72vh); aspect-ratio: 1 / 1; margin: 0 auto; }
  .szene.gezeichnet .telefon-wrap { left: 17%; top: 0; width: 60%; transform: rotate(-4deg); }
  .szene.gezeichnet .kreis { left: 24%; top: 33%; width: 46%; }
  .szene.gezeichnet .zettel-wrap { left: 64%; top: 48%; width: 34%; transform: rotate(5deg); }
  .held-nacht .unten { margin-top: -10px; }
}
@media (max-width: 767px) {
  .held-nacht .raster { align-content: start; row-gap: 4px; }
  .szene.gezeichnet { width: 100%; aspect-ratio: 1 / 1; margin-top: 4px; }
  .szene.gezeichnet .telefon-wrap { left: 10%; top: 0; width: 62%; transform: rotate(-4deg); }
  .szene.gezeichnet .kreis { left: 17.5%; top: 34%; width: 47%; }
  .szene.gezeichnet .zettel-wrap { left: 60%; top: 50%; width: 38%; }
  .held-nacht .tun { margin-top: 0; }
}

/* ── Betreiber 17:43: „notizbuch schraeg text gerade … handy schraeg notizbuch gerade" → Zettel gerade (die Zeichnung selbst ist um 6° gekippt, also −6° zurück), Zeilen darauf gerade, Telefon bleibt schräg; Vorschlag bleibt im Telefon ── */
.szene.gezeichnet .zettel-wrap { transform: rotate(-6deg) !important; }
.szene.gezeichnet .notizen { transform: none; }
.szene.gezeichnet .vorschlag { width: 46%; left: 30.5%; }
@media (min-width: 1024px) { .szene.gezeichnet .zettel-wrap { left: 63%; top: 46%; width: 34%; } }
@media (max-width: 767px) { .szene.gezeichnet .zettel-wrap { left: 59%; top: 48%; width: 38%; } }
/* Zettel vor dem Telefon, wie im Muster; der Kreis bleibt zuoberst */
.szene.gezeichnet .telefon-wrap { z-index: 2; } .szene.gezeichnet .zettel-wrap { z-index: 3; } .szene.gezeichnet .kreis { z-index: 4; }

/* ── Betreiber, 01.10. 17:55: neue Szene. „Das Telefon klingelt, weil jemand angerufen hat, und dann erscheint da ein Name: Max Mustermann, der neue Kunde."
   Kein pulsierender Kreis, keine Bögen; der Zettel nur eine Zeile. ── */
.szene.gezeichnet .kreis { display: none !important; }
.szene.gezeichnet.klingelt .kreis { animation: none; }
.szene.gezeichnet .anruf { position: absolute; left: 14%; right: 14%; top: 42%; text-align: center; font-family: "Patrick Hand", cursive; color: #15110E;
  opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.szene.gezeichnet .anruf.da { opacity: 1; transform: none; }
.szene.gezeichnet .anruf small { display: block; font-family: var(--schrift); font-size: 3.4cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--blau); font-weight: 700; }
.szene.gezeichnet .anruf b { display: block; font-weight: 400; font-size: 9.5cqw; line-height: 1.05; margin-top: 1.5cqw; white-space: nowrap; }
.szene.gezeichnet .anruf span { display: block; font-size: 5cqw; color: #6E655B; margin-top: 1cqw; }
.szene.gezeichnet .anruf i { display: block; width: 22cqw; height: 22cqw; margin: 7cqw auto 0; background: url("/bild/anruf-kreis.webp") center / 100% 100% no-repeat; }
.szene.gezeichnet .notizen span { font-size: 7cqw; width: 58%; left: 22%; }
.szene.gezeichnet .notizen span:nth-child(1) { bottom: 45.6%; }
.szene.gezeichnet .notizen span b { display: block; font-size: .8em; color: var(--blau); margin: 0 0 .1em; }
.szene.gezeichnet .notizen span { line-height: 1.05; }
@media (min-width: 1024px) { .szene.gezeichnet .zettel-wrap { left: 64%; top: 50%; width: 32%; } }
@media (max-width: 767px) { .szene.gezeichnet .zettel-wrap { left: 60%; top: 52%; width: 36%; } }
/* Zettel: eine Zeile, Zeit klein davor; Anruf-Schirm bleibt stehen, bis die nächste Suche beginnt */
.szene.gezeichnet .notizen span { font-size: 6.2cqw; width: 60%; left: 23%; white-space: nowrap; }
.szene.gezeichnet .notizen span b { display: inline; font-size: .78em; margin-right: .4em; }
.szene.gezeichnet .anruf { top: 40%; }
/* Name passt ins Telefon; Zettel: Name auf Linie 1, Zeit klein auf Linie 2 */
.szene.gezeichnet .anruf { left: 11%; right: 11%; top: 39%; }
.szene.gezeichnet .anruf b { font-size: 7.6cqw; }
.szene.gezeichnet .anruf small { font-size: 3.1cqw; }
.szene.gezeichnet .anruf i { width: 20cqw; height: 20cqw; margin-top: 6cqw; }
.szene.gezeichnet .notizen span { font-size: 7.2cqw; width: 62%; left: 22%; bottom: 38.6% !important; line-height: 1.02; }
.szene.gezeichnet .notizen span b { display: block; font-size: .62em; margin: .35em 0 0; color: var(--blau); }
.szene.gezeichnet .notizen span { color: #15110E; }
/* Name ganz im Telefon (Overlay folgt der Neigung des Telefons), Zettel-Zeile auf Linie 2 ── */
.szene.gezeichnet .anruf { left: 16%; right: 10%; top: 40%; transform: rotate(-4deg); transform-origin: 50% 0; }
.szene.gezeichnet .anruf.da { transform: rotate(-4deg); }
.szene.gezeichnet .anruf b { font-size: 7cqw; white-space: nowrap; }
.szene.gezeichnet .notizen span { bottom: 36.5% !important; font-size: 6.8cqw; }

/* ── 01.10. 18:30, Betreiber wählte Mitte Nr. 1 „der Burst": der Orange-Kreis ist jetzt das Telefon. Die Suche läuft als weiße Zeile im Kreis,
   der Vorschlag darunter, dann der Anruf von Max Mustermann; die Strahlen zittern beim Klingeln; der Name landet auf dem Zettel. ── */
.szene.gezeichnet.burst .telefon-wrap, .szene.gezeichnet.burst .kreis { display: none !important; }
.szene.gezeichnet.burst { aspect-ratio: 1 / 1; }
.szene.gezeichnet.burst .strahlen { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 46%; }
.szene.gezeichnet.burst.klingelt .strahlen { animation: zittern .18s ease-in-out infinite; }
@keyframes zittern { 0%,100% { transform: rotate(-1.2deg) scale(1); } 50% { transform: rotate(1.2deg) scale(1.025); } }
.szene.gezeichnet.burst .kreis-wrap { left: 27%; top: 19%; width: 46%; z-index: 3; transform: none; }
.szene.gezeichnet.burst .kreis-wrap .kreis-bild { width: 100%; height: auto; display: block; }
.szene.gezeichnet.burst.klingelt .kreis-wrap { animation: klingel .5s ease-in-out infinite; }
/* Im Kreis: oben die Suche (weiß), darunter der Vorschlag (weiß, Gold-Marker), beim Anruf der Name */
.szene.gezeichnet.burst .suche { left: 16%; top: 24%; width: 68%; height: 13%; transform: none; color: #fff; font-size: 8cqw; gap: 2cqw; padding: 0 2cqw; }
.szene.gezeichnet.burst .suche .cursor { background: #fff; }
.szene.gezeichnet.burst .vorschlag { left: 16%; top: 40%; width: 68%; transform: none; color: #fff; font-size: 6.4cqw; }
.szene.gezeichnet.burst .vorschlag b { color: #fff; }
.szene.gezeichnet.burst .anruf { left: 10%; right: 10%; top: 22%; transform: none; color: #fff; }
.szene.gezeichnet.burst .anruf.da { transform: none; }
.szene.gezeichnet.burst .anruf small { color: #fff; opacity: .85; font-size: 4cqw; }
.szene.gezeichnet.burst .anruf b { font-size: 11cqw; margin-top: 2cqw; }
.szene.gezeichnet.burst .anruf span { color: #fff; opacity: .9; font-size: 6cqw; }
.szene.gezeichnet.burst .anruf i { display: none; }
.szene.gezeichnet.burst.ruft .suche, .szene.gezeichnet.burst.ruft .vorschlag { opacity: 0; transition: opacity .25s; }
.szene.gezeichnet.burst .suche, .szene.gezeichnet.burst .vorschlag.da { transition: opacity .25s; }
/* Der Zettel unten, Name in Blau auf der ersten Linie */
.szene.gezeichnet.burst .zettel-wrap { left: 30%; top: 66%; width: 42%; z-index: 4; transform: rotate(-3deg) !important; }
.szene.gezeichnet.burst .notizen { transform: none; }
.szene.gezeichnet.burst .notizen span { left: 10%; width: 80%; bottom: 52% !important; font-size: 10cqw; color: var(--blau); text-align: center; }
.szene.gezeichnet.burst .notizen span b { display: none; }
@media (min-width: 1024px) { .szene.gezeichnet.burst { width: min(100%, 78vh); } }
@media (max-width: 767px) { .szene.gezeichnet.burst { width: 100%; } }
/* Leerer Kreis als Grund; der Hörer nur, wenn gerade kein Text im Kreis steht */
.szene.gezeichnet.burst .kreis-wrap .glyph { position: absolute; inset: 0; width: 100%; height: auto; opacity: 1; transition: opacity .3s; }
.szene.gezeichnet.burst.aktiv .kreis-wrap .glyph { opacity: 0; }
.szene.gezeichnet.burst .suche, .szene.gezeichnet.burst .vorschlag { opacity: 0; }
.szene.gezeichnet.burst.aktiv .suche { opacity: 1; }
.szene.gezeichnet.burst.aktiv .vorschlag.da { opacity: 1; }
.szene.gezeichnet.burst.aktiv.ruft .suche, .szene.gezeichnet.burst.aktiv.ruft .vorschlag { opacity: 0; }
.szene.gezeichnet.burst .suche { top: 30%; } .szene.gezeichnet.burst .vorschlag { top: 47%; }
.szene.gezeichnet.burst .anruf { top: 26%; }
.szene.gezeichnet.burst .anruf b { font-size: 10.5cqw; }
.szene.gezeichnet.burst .notizen span { bottom: 60% !important; font-size: 9.5cqw; }

/* ── 01.10. 19:00, Betreiber: „the blank one was a thousand times better … put an iPhone right in the middle, large enough to reach the blue ring, with the list." ── */
.szene.gezeichnet.burst.iphone .kreis-wrap { display: none !important; }
.szene.gezeichnet.burst.iphone .telefon-wrap { display: block !important; left: 31%; top: 14%; width: 38%; transform: rotate(-3deg); z-index: 3; }
.szene.gezeichnet.burst.iphone .telefon-wrap > img { width: 100%; height: auto; display: block; }
/* Overlays im Telefon wie beim Sample-6-Bau, Farben wieder dunkel */
.szene.gezeichnet.burst.iphone .suche { left: 29.4%; top: 22.6%; width: 53%; height: 8.3%; transform: rotate(-4deg); color: #15110E; font-size: 7.6cqw; padding: 0 2.4cqw 0 3.4cqw; gap: 1.4cqw; opacity: 1; }
.szene.gezeichnet.burst.iphone .suche .cursor { background: #15110E; }
.szene.gezeichnet.burst.iphone .vorschlag { left: 30.5%; top: 33.5%; width: 46%; transform: rotate(-4deg); color: var(--blau); font-size: var(--vfit, 5.2cqw); opacity: 0; }
.szene.gezeichnet.burst.iphone .vorschlag b { color: #15110E; }
.szene.gezeichnet.burst.iphone.aktiv .vorschlag.da { opacity: 1; }
.szene.gezeichnet.burst.iphone.ruft .suche, .szene.gezeichnet.burst.iphone.ruft .vorschlag { opacity: 0; }
.szene.gezeichnet.burst.iphone .anruf { left: 16%; right: 10%; top: 40%; transform: rotate(-4deg); color: #15110E; }
.szene.gezeichnet.burst.iphone .anruf.da { transform: rotate(-4deg); }
.szene.gezeichnet.burst.iphone .anruf small { color: var(--blau); opacity: 1; font-size: 3.1cqw; }
.szene.gezeichnet.burst.iphone .anruf b { font-size: 7cqw; white-space: nowrap; margin-top: 1.5cqw; }
.szene.gezeichnet.burst.iphone .anruf span { color: #6E655B; opacity: 1; font-size: 5cqw; }
.szene.gezeichnet.burst.iphone .anruf i { display: block; width: 20cqw; height: 20cqw; margin-top: 6cqw; }
/* Der Zettel rechts unten am Telefon, wie im ersten Bau */
.szene.gezeichnet.burst.iphone .zettel-wrap { left: 58%; top: 60%; width: 34%; transform: rotate(3deg) !important; z-index: 4; }
.szene.gezeichnet.burst.iphone .notizen span { font-size: 9cqw; bottom: 60% !important; }
@media (max-width: 767px) {
  .szene.gezeichnet.burst.iphone .telefon-wrap { left: 30%; top: 13%; width: 40%; }
  .szene.gezeichnet.burst.iphone .zettel-wrap { left: 56%; top: 60%; width: 38%; }
}
/* Telefon breiter als die inneren Bögen, mittig, hoch; Zettel klein am Fuß, gerade */
.szene.gezeichnet.burst.iphone .telefon-wrap { left: 25%; top: 4%; width: 50%; transform: rotate(-3deg); }
.szene.gezeichnet.burst.iphone .zettel-wrap { left: 52%; top: 69%; width: 26%; transform: rotate(0deg) !important; }
.szene.gezeichnet.burst.iphone .notizen span { font-size: 9.5cqw; }
.szene.gezeichnet.burst.iphone .suche { font-size: 7.2cqw; }
.szene.gezeichnet.burst.iphone .anruf b { font-size: 6.8cqw; }
@media (max-width: 767px) {
  .szene.gezeichnet.burst.iphone .telefon-wrap { left: 25%; top: 4%; width: 50%; }
  .szene.gezeichnet.burst.iphone .zettel-wrap { left: 52%; top: 69%; width: 28%; }
}
@media (min-width: 1024px) { .szene.gezeichnet.burst.iphone { width: min(100%, 82vh); } }
/* ── 19:15, Betreiber: „the other way around": der große Orange-Kreis bleibt hinter dem Telefon, der kleine Anruf-Knopf im Telefon fällt weg ── */
.szene.gezeichnet.burst.iphone .kreis-gross { left: 27%; top: 19%; width: 46%; height: auto; z-index: 2; transform-origin: 50% 50%; }
.szene.gezeichnet.burst.iphone.klingelt .kreis-gross { animation: klingel .5s ease-in-out infinite; }
.szene.gezeichnet.burst.iphone .anruf i { display: none !important; }
.szene.gezeichnet.burst.iphone .anruf { top: 44%; }
/* 19:20: kein großer Orange-Kreis hinter dem Telefon; kein kleiner Anruf-Knopf im Telefon. Nur das Telefon im Burst. */
.szene.gezeichnet.burst.iphone .kreis-gross { display: none !important; }