html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Kopfnavigation, auf allen Seiten gleich */
nav.oben {
display: flex; flex-wrap: wrap; gap: 2px;
margin-bottom: 26px;
border-bottom: 1px solid var(--line);
padding-bottom: 2px;
}
nav.oben a {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-faint);
text-decoration: none;
padding: 10px 12px;
min-height: 44px;
display: flex; align-items: center;
}
nav.oben a:hover { color: var(--accent); }
nav.oben a[aria-current="page"] { color: var(--accent); border-bottom: 2px solid var(--accent); }
nav.oben a:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
/* Kacheln der Startseite */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
a.kachel {
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 18px;
text-decoration: none;
color: var(--ink);
display: flex; flex-direction: column; gap: 6px;
}
a.kachel:hover { border-color: var(--accent); }
a.kachel:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
a.kachel .titel { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.1rem; }
a.kachel .was { color: var(--ink-soft); font-size: .92rem; }
a.kachel .stand {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--ink-faint); margin-top: 4px;
}
a.kachel.leer { opacity: .72; }
/* Zaehlwerk bis zum Abflug */
.zaehler {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
padding: 16px 18px;
background: var(--card); border: 1px solid var(--line);
border-left: 3px solid var(--amber);
box-shadow: var(--shadow);
}
.zaehler .tage {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 1.6rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.zaehler .was { color: var(--ink-soft); font-size: .95rem; }
:root {
--blattmuster-mitte: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22900%22%20height=%22900%22%20viewBox=%220%200%20900%20900%22%3E%20%3Cg%20fill=%22%2317593a%22%3E%20%3Cpath%20d=%22M120%2060C40%20130%2040%20280%20130%20350c78%2060%20170%206%20176-92%206-90-84-166-186-198Z%22%20opacity=%22.10%22/%3E%20%3Cpath%20d=%22M700%2030c-70%2080-56%20200%2030%20250%2076%2044%20158-6%20158-90%200-76-86-146-188-160Z%22%20opacity=%22.085%22/%3E%20%3Cpath%20d=%22M430%20470c-84%2036-120%20138-66%20212%2048%2066%20158%2062%20198-12%2038-72-24-164-132-200Z%22%20opacity=%22.095%22/%3E%20%3Cpath%20d=%22M60%20640c96-24%20186%2012%20232%2090-82%2012-172-12-232-44Z%22%20opacity=%22.08%22/%3E%20%3Cpath%20d=%22M840%20700c-88%2012-158%2070-180%20152%2082-8%20154-58%20192-122Z%22%20opacity=%22.075%22/%3E%20%3Cpath%20d=%22M600%20380c60-46%20140-46%20190-8-56%2026-128%2034-190%2022Z%22%20opacity=%22.07%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%230d4227%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20opacity=%22.16%22%3E%20%3Cpath%20d=%22M120%2060c32%2096%2062%20192%2090%20290M76%20156l70%2030M50%20232l84%2020M64%20306l82%206M110%20366l64-14%22/%3E%20%3Cpath%20d=%22M700%2030c38%2084%2070%20156%20102%20242M680%20100l70%2032M666%20168l76%2020M684%20236l70%206%22/%3E%20%3Cpath%20d=%22M430%20470c30%2078%2052%20148%2066%20226M390%20538l76%2020M366%20600l86%2014M388%20664l78%204%22/%3E%20%3C/g%3E%20%3C/svg%3E");
--ground: #fdf7ea;
--card: #ffffff;
--card-2: #f6efdd;
--ink: #23302c;
--ink-soft: #52655e;
--ink-faint: #8a9a92;
--line: #e6dbc4;
--line-soft: #f0e8d8;
--accent: #0e7c86;
--accent-soft: #d7eef0;
--amber: #c25c14;
--amber-soft: #fbeedb;
--safran: #e08a16;
--rot: #d8281c;
--tuerkis: #0a9fae;
/* Aus den Referenzbildern gemessen, nicht geschätzt: der Median aller
Pixel im Cyan-Tonbereich ergab #588087, der gesättigtste Zwanzigstel
#265256. Naturtürkis ist gedämpft — das Neon oben taugt fürs Zeichen,
nicht fürs Wasser. */
--wasser: #588087;
--wasser-tief: #265256;
--nacht: #170c1f;
--nacht-2: #2d1339;
--magenta: #e0489b;
--lila: #9b4ee0;
--rose: #f4cde6;
--himmel-1: rgba(224, 138, 22, .22);
--himmel-2: rgba(14, 124, 134, .16);
--shadow: 0 1px 2px rgba(35, 48, 44, .05), 0 10px 26px -18px rgba(35, 48, 44, .30);
}
* { box-sizing: border-box; }
body {
background: var(--ground);
color: var(--ink);
font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.55;
padding-inline: 18px;
padding-block: 28px 64px;
-webkit-text-size-adjust: 100%;
}
.wrap {
max-width: 700px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 34px;
}
h1, h2, h3 {
font-family: "Bricolage Grotesque", "Source Sans 3", sans-serif;
font-weight: 700;
text-wrap: balance;
margin: 0;
letter-spacing: -.015em;
}
h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); line-height: 1.1; }
h2 { font-size: 1.28rem; line-height: 1.2; }
h3 { font-size: 1.02rem; font-weight: 500; }
p { margin: 0; }
.eyebrow {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* ---------- Kopf ---------- */
header { display: flex; flex-direction: column; gap: 12px; }
header p.lede { color: var(--ink-soft); max-width: 60ch; }
.summe {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
padding: 16px 18px;
background: var(--card);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
box-shadow: var(--shadow);
}
.summe .betrag {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 1.6rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.summe .was { color: var(--ink-soft); font-size: .95rem; }
/* ---------- Y-Figur: zwei Startorte, eine Maschine ---------- */
.figur { display: flex; flex-direction: column; gap: 0; }
.zubringer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.ort {
background: var(--card);
border: 1px solid var(--line);
padding: 13px 15px;
display: flex;
flex-direction: column;
gap: 3px;
}
.ort .stadt { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; }
.ort .wer { color: var(--ink-faint); font-size: .85rem; }
.ort .flug {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .85rem;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.naht {
height: 26px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.naht span { position: relative; }
.naht span::before {
content: "";
position: absolute;
top: 0; bottom: 50%;
left: 50%;
border-left: 1px solid var(--line);
}
.naht span::after {
content: "";
position: absolute;
top: 50%;
height: 0;
border-top: 1px solid var(--line);
}
.naht span:first-child::after { left: 50%; right: 0; }
.naht span:last-child::after { left: 0; right: 50%; }
.naht-mitte {
height: 14px;
margin-inline: auto;
width: 1px;
background: var(--line);
}
.gemeinsam {
background: var(--accent-soft);
border: 1px solid var(--accent);
padding: 15px 17px;
display: flex;
flex-direction: column;
gap: 4px;
}
.gemeinsam .nummer {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: .04em;
color: var(--accent);
}
.gemeinsam .strecke { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; }
.gemeinsam .detail { color: var(--ink-soft); font-size: .9rem; }
/* ---------- Gruppenkarten ---------- */
.gruppen { display: flex; flex-direction: column; gap: 18px; }
.gruppe {
background: var(--card);
border: 1px solid var(--line);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.gruppe > .kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 4px 12px;
padding: 15px 17px 12px;
border-bottom: 1px solid var(--line-soft);
}
.gruppe .preis {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: 1.05rem;
color: var(--amber);
white-space: nowrap;
}
.gruppe .preis small { color: var(--ink-faint); font-size: .74rem; letter-spacing: .04em; }
.segmente { display: flex; flex-direction: column; }
.seg {
display: grid;
grid-template-columns: 4.2rem 1fr;
gap: 2px 12px;
padding: 12px 17px;
border-bottom: 1px solid var(--line-soft);
}
.seg .tag {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .8rem;
color: var(--ink-faint);
font-variant-numeric: tabular-nums;
padding-top: 2px;
}
.seg .zeile {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: .95rem;
}
.seg .zeile b { font-weight: 500; }
.seg .unter { grid-column: 2; color: var(--ink-soft); font-size: .85rem; }
.seg .unter .fn { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; }
.seg.umstieg {
background: var(--card-2);
padding-block: 8px;
}
.seg.umstieg .zeile {
font-family: "Source Sans 3", sans-serif;
font-size: .85rem;
color: var(--ink-soft);
}
.tarifzeile {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
padding: 12px 17px;
border-bottom: 1px solid var(--line-soft);
font-size: .9rem;
color: var(--ink-soft);
}
.tarifzeile .paar {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
}
.knopfzeile { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; }
a.buchen {
display: block;
text-align: center;
background: var(--accent);
color: #fff;
text-decoration: none;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1rem;
padding: 14px 18px;
min-height: 48px;
border: 1px solid var(--accent);
}
a.buchen:hover { filter: brightness(1.08); }
a.buchen:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
a.zweit {
display: block;
text-align: center;
color: var(--accent);
text-decoration: none;
border: 1px solid var(--line);
padding: 11px 16px;
min-height: 44px;
font-size: .93rem;
}
a.zweit:hover { border-color: var(--accent); }
a.zweit:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
/* ---------- Tagespreise ---------- */
.kalender { display: flex; flex-direction: column; gap: 12px; }
.kalscroll { overflow-x: auto; }
table {
border-collapse: collapse;
width: 100%;
min-width: 460px;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: .86rem;
}
caption {
text-align: left;
font-family: "Source Sans 3", sans-serif;
color: var(--ink-soft);
font-size: .9rem;
padding-bottom: 8px;
}
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line-soft); }
th:first-child, td:first-child { text-align: left; }
thead th {
font-family: "Source Sans 3", sans-serif;
font-weight: 600;
font-size: .82rem;
color: var(--ink-faint);
border-bottom: 1px solid var(--line);
}
td.beste { color: var(--amber); font-weight: 500; background: var(--amber-soft); }
/* ---------- Alternativen ---------- */
.alt { display: flex; flex-direction: column; gap: 14px; }
.altkarte {
background: var(--card);
border: 1px solid var(--line);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.altkarte .zeile1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
gap: 4px 12px;
}
.altkarte .linie { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; }
.altkarte .wert {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
color: var(--amber);
white-space: nowrap;
}
.altkarte .zeiten {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .88rem;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.altkarte p { font-size: .9rem; color: var(--ink-soft); }
.altkarte a {
color: var(--accent);
font-size: .92rem;
text-decoration: none;
border-bottom: 1px solid var(--line);
align-self: flex-start;
padding-block: 6px;
}
.altkarte a:hover { border-color: var(--accent); }
.marke {
display: inline-block;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .68rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--amber);
border: 1px solid var(--amber);
padding: 2px 7px;
}
/* ---------- Checkliste ---------- */
.liste { display: flex; flex-direction: column; gap: 0; }
.punkt {
display: grid;
grid-template-columns: 1.6rem 1fr;
gap: 4px 8px;
padding: 13px 0;
border-bottom: 1px solid var(--line-soft);
}
.punkt .zahl {
font-family: "IBM Plex Mono", ui-monospace, monospace;
color: var(--accent);
font-size: .9rem;
padding-top: 2px;
}
.punkt strong { font-weight: 600; }
.punkt p { color: var(--ink-soft); font-size: .92rem; grid-column: 2; }
/* Umschalter für das Gepäck */
.schalter { display: flex; flex-direction: column; gap: 8px; }
.schalter .frage { font-size: .9rem; color: var(--ink-soft); }
.knopfgruppe { display: flex; gap: 0; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.knopfgruppe button {
font: inherit;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
background: var(--card);
color: var(--ink-soft);
border: 0;
border-right: 1px solid var(--line);
padding: 11px 15px;
min-height: 44px;
cursor: pointer;
}
.knopfgruppe button:last-child { border-right: 0; }
.knopfgruppe button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.knopfgruppe button:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.zusatz { font-size: .88rem; color: var(--ink-faint); }
/* Klappblöcke */
details.klapp {
background: var(--card);
border: 1px solid var(--line);
}
details.klapp > summary {
cursor: pointer;
padding: 14px 16px;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.02rem;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 48px;
}
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after {
content: "mehr";
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
white-space: nowrap;
}
details.klapp[open] > summary::after { content: "zu"; }
details.klapp > summary:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
details.klapp .innen {
padding: 0 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
border-top: 1px solid var(--line-soft);
padding-top: 14px;
}
/* Checkliste */
.punkt label { display: contents; cursor: pointer; }
.punkt input[type="checkbox"] {
width: 20px; height: 20px;
margin: 3px 0 0;
accent-color: var(--accent);
cursor: pointer;
}
.punkt.erledigt strong, .punkt.erledigt p { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
footer {
border-top: 1px solid var(--line);
padding-top: 16px;
color: var(--ink-faint);
font-size: .85rem;
display: flex;
flex-direction: column;
gap: 6px;
}
footer .stand { font-family: "IBM Plex Mono", ui-monospace, monospace; }
@media (max-width: 430px) {
.zubringer { grid-template-columns: 1fr; }
.naht { display: none; }
.naht-mitte { height: 18px; margin-block: 8px; }
.seg { grid-template-columns: 1fr; }
.seg .unter { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ---------- Kopf der Startseite: Himmel hinter dem Titel ---------- */
header.himmel {
position: relative;
padding: 22px 20px 24px;
border: 1px solid var(--line);
background:
radial-gradient(120% 90% at 88% 0%, var(--himmel-1) 0%, transparent 62%),
radial-gradient(100% 80% at 4% 100%, var(--himmel-2) 0%, transparent 58%),
var(--card);
box-shadow: var(--shadow);
}
/* ---------- Zaehlwerk in vier Bloecken ---------- */
.uhrwerk { display: flex; flex-direction: column; gap: 10px; }
.bloecke { display: flex; flex-wrap: wrap; gap: 8px; }
.block {
flex: 1 1 68px;
min-width: 68px;
background: var(--card-2);
border: 1px solid var(--line);
padding: 10px 6px 8px;
text-align: center;
}
.block .zahl {
display: block;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: clamp(1.5rem, 8vw, 2.1rem);
font-weight: 500;
line-height: 1.05;
color: var(--ink);
}
.block .einheit {
display: block;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .64rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-faint);
margin-top: 4px;
}
.block.sekunden .zahl { color: var(--safran); }
.uhrwerk .darunter {
display: flex; flex-wrap: wrap; gap: 4px 14px;
font-size: .88rem; color: var(--ink-soft);
}
.uhrwerk .bkk-uhr {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
color: var(--accent);
}
/* ---------- Flugweg ---------- */
.flugweg { margin-top: 4px; }
.flugweg svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.flugweg .bahn { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 5; }
.flugweg .bahn-haupt { fill: none; stroke: var(--accent); stroke-width: 3; }
.flugweg .ort { fill: var(--ink-soft); }
.flugweg .ort-haupt { fill: var(--accent); }
.flugweg text {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .08em;
fill: var(--ink-soft);
}
.flugweg text.stark { fill: var(--accent); }
.flieger {
offset-path: path("M 152 62 C 210 46, 268 74, 344 104");
offset-rotate: auto;
animation: fliegen 9s linear infinite;
fill: var(--safran);
}
@keyframes fliegen {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.flieger { animation: none; offset-distance: 100%; }
}
/* ---------- Flugstreifen auf der Startseite ---------- */
.streifen { display: flex; flex-direction: column; gap: 12px; }
.reihe {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 14px;
align-items: center;
background: var(--card);
border: 1px solid var(--line);
padding: 14px 16px;
}
.reihe .wer { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; }
.reihe .zeit {
grid-column: 1;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: .92rem;
color: var(--ink-soft);
}
.reihe .geld {
grid-row: 1 / span 2;
grid-column: 2;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
color: var(--amber);
white-space: nowrap;
text-align: right;
}
.reihe a.jetzt {
grid-column: 1 / -1;
margin-top: 8px;
text-align: center;
background: var(--accent);
color: #fff;
text-decoration: none;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
padding: 12px 16px;
min-height: 46px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--accent);
}
.reihe a.jetzt:hover { filter: brightness(1.08); }
.reihe a.jetzt:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
/* Das Wortspiel im Titel: "for four" traegt die Farbe der Sonne. */
h1 .fuer-vier {
color: var(--safran);
white-space: nowrap;
}
/* ---------- Kopfbild ---------- */
figure.kopfbild {
margin: 0 0 18px;
position: relative;
}
figure.kopfbild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 32%;
border: 1px solid var(--line);
}
figure.kopfbild figcaption {
margin-top: 6px;
font-size: .8rem;
color: var(--ink-faint);
}
/* ---------- Die vier Koepfe auf der Route ---------- */
.flugweg .kopf-grund { fill: var(--card); }
.flugweg .kopf-rand {
fill: none;
stroke: var(--safran);
stroke-width: 1.6;
}
.flugweg .kopf { pointer-events: none; }
/* ---------- Die vier Koepfe im Titel, an der Stelle von "four" ---------- */
h1 .vier-koepfe {
display: inline-flex;
vertical-align: -9px;
/* Deutlicher Abstand zum Satzende: die Koepfe sollen als eigene Gruppe
rechts neben der Zeile stehen, nicht am Punkt kleben. */
margin-left: 26px;
}
h1 .vier-koepfe span {
width: 36px;
height: 36px;
border-radius: 50%;
background-image: url("/assets/wir.jpg");
background-size: 137px 137px;
background-repeat: no-repeat;
box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--safran);
}
h1 .vier-koepfe span + span { margin-left: -9px; }
.vier-koepfe .a1 { background-position: -4.5px -22.9px; }
.vier-koepfe .a2 { background-position: -28.5px -28.7px; }
.vier-koepfe .a3 { background-position: -67.3px -29.8px; }
.vier-koepfe .a4 { background-position: -92.8px -36.6px; }
.nur-vorleser {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 430px) {
h1 .vier-koepfe { vertical-align: -7px; margin-left: 6px; }
h1 .vier-koepfe span { width: 28px; height: 28px; background-size: 107px 107px; }
h1 .vier-koepfe span + span { margin-left: -7px; }
.vier-koepfe .a1 { background-position: -3.5px -17.8px; }
.vier-koepfe .a2 { background-position: -22.2px -22.3px; }
.vier-koepfe .a3 { background-position: -52.3px -23.2px; }
.vier-koepfe .a4 { background-position: -72.2px -28.5px; }
}
/* ---------- Kopfbild ---------- */
figure.kopfbild { margin: 0 0 18px; position: relative; }
figure.kopfbild img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 30%;
border: 1px solid var(--line);
}
figure.kopfbild figcaption { margin-top: 6px; font-size: .8rem; color: var(--ink-faint); }
/* ---------- Die vier Koepfe auf der Route ---------- */
.flugweg .kopf-grund { fill: var(--card); }
.flugweg .kopf-rand { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.flugweg .flieger-gruppe { pointer-events: none; }
/* Um jeden Kopf ein kleines Flugzeug: der Kopf ist der Rumpf, Flügel und
Leitwerk liegen dahinter. Sie sind bewusst blass, damit das Gesicht führt. */
.flugweg .jet-rumpf {
fill: var(--card);
stroke: var(--accent);
stroke-width: 2;
stroke-linejoin: round;
}
.flugweg .jet-teil { fill: var(--accent); }
.flugweg .jet-fluegel { fill: var(--accent); opacity: .55; }
/* Der Tukan steht auf dem Rumpf, hinter dem letzten Fenster — dort, wo
eine Fluggesellschaft ihr Zeichen auch hinsetzt. */
.flugweg .jet-marke { fill: var(--accent); }
.flugweg .jet-marke-auge { fill: var(--card); }
.flugweg .boot-kielwasser {
fill: none;
stroke: var(--accent);
stroke-width: 2.4;
stroke-linecap: round;
opacity: .45;
}
.flugweg .flieger-gruppe.aus { display: none; }
/* ---------- Der Anlass: Festival-Karte mit eigenem Tor ---------- */
.festival {
display: grid;
grid-template-columns: 116px 1fr;
gap: 6px 18px;
align-items: start;
background: var(--card);
border: 1px solid var(--accent);
border-left: 4px solid var(--safran);
padding: 18px;
box-shadow: var(--shadow);
}
.festival .tor { width: 116px; height: auto; }
.festival .tor-bogen, .festival .tor-innen, .festival .tor-turm {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linejoin: round;
}
.festival .tor-innen { stroke: var(--safran); stroke-width: 2.4; }
.festival .tor-sonne { fill: var(--safran); }
.festival .tor-strahl { fill: none; stroke: var(--safran); stroke-width: 2; stroke-linecap: round; }
.festival .tor-turm { fill: var(--accent); }
.festival-text { display: flex; flex-direction: column; gap: 8px; }
.festival-titel {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.32rem;
margin: 0;
}
.festival-zeile {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .88rem;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.festival-text p { color: var(--ink-soft); font-size: .95rem; }
.festival-link {
align-self: flex-start;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid var(--line);
padding-block: 6px;
font-size: .93rem;
}
.festival-link:hover { border-color: var(--accent); }
@media (max-width: 430px) {
.festival { grid-template-columns: 1fr; }
.festival .tor { width: 96px; }
}
/* ---------- Woran wir gerade sind ---------- */
.stand-jetzt { display: flex; flex-direction: column; gap: 6px; }
.stand-jetzt .stand-datum {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .76rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 6px;
}
ul.punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.punkte li {
display: grid;
grid-template-columns: auto 1fr;
gap: 4px 12px;
background: var(--card);
border: 1px solid var(--line);
border-left: 4px solid var(--line);
padding: 13px 15px;
}
ul.punkte li.offen { border-left-color: var(--safran); }
ul.punkte li.wartet { border-left-color: var(--accent); }
ul.punkte .marker {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .66rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: 3px 8px;
border: 1px solid var(--line);
align-self: start;
white-space: nowrap;
}
ul.punkte li.offen .marker { color: var(--amber); border-color: var(--safran); background: var(--amber-soft); }
ul.punkte li.wartet .marker { color: var(--accent); border-color: var(--accent); }
ul.punkte .sache {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
align-self: center;
}
ul.punkte .notiz {
grid-column: 1 / -1;
color: var(--ink-soft);
font-size: .92rem;
}
@media (max-width: 430px) {
ul.punkte li { grid-template-columns: 1fr; }
ul.punkte .notiz { grid-column: 1; }
}
/* ---------- Eingebettetes Video ---------- */
.video {
position: relative;
aspect-ratio: 16 / 9;
max-width: 100%;
border: 1px solid var(--line);
background: var(--card-2);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- One World Radio ---------- */
.radio {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--card);
border: 1px solid var(--line);
border-left: 4px solid var(--safran);
padding: 16px;
box-shadow: var(--shadow);
}
.radio-kopf { display: flex; align-items: flex-start; gap: 11px; }
.radio-punkt {
width: 11px; height: 11px;
border-radius: 50%;
background: #c8320f;
margin-top: 6px;
flex: none;
box-shadow: 0 0 0 4px rgba(200, 50, 15, .16);
animation: pochen 2.4s ease-in-out infinite;
}
@keyframes pochen {
0%, 100% { box-shadow: 0 0 0 4px rgba(200, 50, 15, .16); }
50% { box-shadow: 0 0 0 8px rgba(200, 50, 15, .05); }
}
@media (prefers-reduced-motion: reduce) { .radio-punkt { animation: none; } }
.radio-titel {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.12rem;
}
.radio-was, .radio-fuss { color: var(--ink-soft); font-size: .92rem; }
.radio-fuss { font-size: .88rem; }
/* ---------- Radioleiste, klebt oben ---------- */
.radioleiste {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
margin: -28px -18px 18px;
background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 100%);
border-bottom: 1px solid var(--line);
}
.rl-punkt {
width: 9px; height: 9px; border-radius: 50%;
background: #c8320f; flex: none;
box-shadow: 0 0 0 3px rgba(200, 50, 15, .16);
animation: pochen 2.4s ease-in-out infinite;
}
.rl-name {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-soft);
white-space: nowrap;
}
.rl-balken { display: flex; align-items: flex-end; gap: 2px; height: 16px; flex: 1 1 auto; max-width: 120px; }
.rl-balken i {
display: block;
width: 3px;
background: var(--accent);
opacity: .55;
height: 30%;
animation: wippen 1.1s ease-in-out infinite;
}
.rl-balken i:nth-child(2) { animation-delay: .13s; }
.rl-balken i:nth-child(3) { animation-delay: .26s; }
.rl-balken i:nth-child(4) { animation-delay: .39s; }
.rl-balken i:nth-child(5) { animation-delay: .52s; }
.rl-balken i:nth-child(6) { animation-delay: .65s; }
.rl-balken i:nth-child(7) { animation-delay: .78s; }
@keyframes wippen {
0%, 100% { height: 22%; }
50% { height: 100%; }
}
.radioleiste.an .rl-balken i { opacity: 1; background: var(--safran); }
.rl-knopf {
font: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
padding: 8px 12px;
min-height: 36px;
cursor: pointer;
margin-left: auto;
white-space: nowrap;
}
.rl-knopf:hover { filter: brightness(1.08); }
/* Der Ring für die Tastaturbedienung bleibt — er ist der einzige Hinweis, wo
man gerade steht —, aber weiss und schmal statt drei Pixel Safran: auf der
dunklen Leiste ist er so gut zu sehen und sieht nicht wie ein Fehler aus. */
.rl-knopf:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
/* Der Player schwebt unten in der Ecke, damit er nichts wegschiebt. */
.rl-panel {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 30;
width: 258px;
max-width: calc(100vw - 32px);
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 22px;
background: rgba(23, 12, 31, .92);
border: 1px solid rgba(224, 72, 155, .45);
box-shadow: 0 10px 40px rgba(23, 12, 31, .45), 0 0 24px rgba(224, 72, 155, .25);
backdrop-filter: blur(6px);
}
.rl-panel .rl-hinweis { color: rgba(244, 205, 230, .8); font-size: .78rem; }
.rl-panel .rl-hinweis a { color: var(--rose); }
@media (max-width: 520px) {
.rl-panel { left: 10px; right: 10px; bottom: 10px; width: auto; }
}
.rl-hinweis { color: var(--ink-faint); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) {
.rl-punkt, .rl-balken i { animation: none; }
}
/* ---------- Playlist ---------- */
.liste-musik { display: flex; flex-direction: column; gap: 14px; }
.kachelreihe {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
button.track {
font: inherit;
text-align: left;
background: var(--card);
border: 1px solid var(--line);
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
overflow: hidden;
}
button.track:hover { border-color: var(--accent); }
button.track:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
button.track[aria-current="true"] { border-color: var(--safran); border-width: 2px; }
button.track img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
button.track .t-titel {
padding: 9px 10px 4px;
font-size: .88rem;
font-weight: 600;
line-height: 1.25;
color: var(--ink);
}
button.track .t-wer {
padding: 0 10px 10px;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .72rem;
color: var(--ink-faint);
}
/* ---------- Was im Flugpreis steckt ---------- */
.reihe .inklusive {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--line-soft);
font-size: .86rem;
color: var(--ink-soft);
}
.reihe .inklusive .haken {
color: var(--accent);
font-weight: 700;
margin-right: 3px;
}
/* ---------- Zwei Spalten: Musik links, Inhalt rechts ---------- */
.spalten { display: grid; gap: 28px; }
.haupt { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
.seite-musik { min-width: 0; }
.seite-musik h2 { font-size: 1.1rem; }
.seite-musik .kachelreihe { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 1000px) {
.wrap { max-width: 1040px; }
.spalten { grid-template-columns: 250px minmax(0, 1fr); gap: 34px; }
.seite-musik {
position: sticky;
z-index: 40;
top: 62px;
align-self: start;
max-height: calc(100vh - 90px);
overflow-y: auto;
padding-right: 4px;
border-right: 1px solid var(--line-soft);
}
.seite-musik .kachelreihe { grid-template-columns: 1fr; }
.seite-musik button.track {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
align-items: start;
}
.seite-musik button.track img {
grid-row: 1 / span 2;
width: 84px;
aspect-ratio: 1 / 1;
}
.seite-musik button.track .t-titel {
padding: 8px 10px 2px;
font-size: .82rem;
overflow-wrap: anywhere;
}
.seite-musik button.track .t-wer {
padding: 0 10px 9px;
font-size: .68rem;
overflow-wrap: anywhere;
}
.seite-musik .kachel.leer { padding: 12px !important; }
}
/* ---------- Nachtseite: Festival und Musik ---------- */
.festival {
background:
radial-gradient(120% 130% at 88% 0%, rgba(224, 72, 155, .30) 0%, transparent 58%),
radial-gradient(100% 120% at 6% 100%, rgba(155, 78, 224, .34) 0%, transparent 60%),
linear-gradient(160deg, var(--nacht-2) 0%, var(--nacht) 100%);
border: 1px solid rgba(224, 72, 155, .38);
border-left: 4px solid var(--magenta);
color: var(--rose);
position: relative;
overflow: hidden;
}
.festival::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(60% 40% at 50% -10%, rgba(255, 255, 255, .10), transparent 70%);
}
.festival .festival-titel { color: #fff; }
.festival .festival-zeile { color: var(--magenta); }
.festival .eyebrow { color: rgba(244, 205, 230, .62); }
.festival .festival-text p { color: rgba(244, 205, 230, .84); }
.festival .festival-link {
color: #fff;
border-bottom-color: var(--magenta);
}
.festival .festival-link:hover { border-bottom-color: #fff; }
.festival .tor-bogen, .festival .tor-turm { stroke: var(--rose); }
.festival .tor-turm { fill: var(--rose); }
.festival .tor-innen { stroke: var(--magenta); }
.festival .tor-sonne { fill: #fff; }
.festival .tor-strahl { stroke: #fff; }
.festival .tor {
filter: drop-shadow(0 0 6px rgba(224, 72, 155, .85)) drop-shadow(0 0 18px rgba(155, 78, 224, .55));
}
/* Radioleiste als Nachtstreifen */
.radioleiste {
background:
radial-gradient(80% 200% at 100% 50%, rgba(224, 72, 155, .34) 0%, transparent 60%),
linear-gradient(90deg, var(--nacht) 0%, var(--nacht-2) 100%);
border-bottom: 1px solid rgba(224, 72, 155, .34);
}
.radioleiste .rl-name { color: var(--rose); }
.radioleiste .rl-balken i { background: var(--magenta); opacity: .8; }
.radioleiste.an .rl-balken i { background: var(--rose); }
.rl-knopf {
background: var(--magenta);
border-color: var(--magenta);
color: #fff;
box-shadow: 0 0 14px rgba(224, 72, 155, .55);
}
.rl-knopf:hover { background: var(--lila); border-color: var(--lila); }
/* Playlist: aktive Kachel leuchtet */
button.track[aria-current="true"] {
border-color: var(--magenta);
box-shadow: 0 0 0 1px var(--magenta), 0 0 16px rgba(224, 72, 155, .35);
}
.seite-musik h2 { position: relative; }
/* Der Player sitzt in einer runden Kachel, damit er nicht wie eine Fremdseite wirkt. */
.rl-panel { align-items: center; }
.rl-rahmen {
position: relative;
width: 100%;
height: 296px;
border-radius: 16px;
border: 1px solid rgba(224, 72, 155, .42);
background: var(--nacht);
overflow: hidden;
box-shadow: 0 0 26px rgba(224, 72, 155, .30), var(--shadow);
}
.rl-rahmen iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.rl-hinweis { text-align: center; }
.rl-hinweis a { color: var(--accent); }
.rl-knopf span { margin-left: 4px; font-size: .9em; }
@media (max-width: 430px) {
.rl-rahmen { max-width: 100%; height: 400px; border-radius: 20px; }
}
/* ---------- Preise: laut und eindeutig ---------- */
.reihe .geld {
font-size: 1.62rem;
font-weight: 500;
line-height: 1.1;
color: var(--rot);
letter-spacing: -.01em;
}
.gruppe .preis { color: var(--rot); font-size: 1.3rem; }
.je-person {
display: inline-block;
margin-top: 6px;
background: var(--tuerkis);
color: #fff;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .66rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
padding: 3px 8px 2px;
border-radius: 3px;
box-shadow: 0 0 12px rgba(10, 159, 174, .45);
white-space: nowrap;
}
.gruppe .preis .je-person { font-size: .62rem; margin-top: 4px; }
@media (max-width: 430px) {
.reihe .geld { font-size: 1.42rem; }
}
/* ---------- Dschungel im Hintergrund, selbst gezeichnet ---------- */
body {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22460%22%20height=%22460%22%20viewBox=%220%200%20460%20460%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%231f6b46%22%20stroke-width=%222.2%22%20stroke-linecap=%22round%22%20opacity=%220.5%22%3E%20%3Cpath%20d=%22M60%2040%20C10%2070%208%20140%2058%20176%20C104%20208%20150%20176%20152%20128%20C154%2084%20112%2044%2060%2040%20Z%22/%3E%20%3Cpath%20d=%22M60%2040%20C74%2090%2088%20140%20108%20190%22/%3E%20%3Cpath%20d=%22M40%2078%20L86%2096%20M28%20112%20L80%20124%20M34%20146%20L86%20148%20M62%20172%20L100%20164%22/%3E%20%3Cpath%20d=%22M330%2030%20C300%2074%20304%20130%20348%20156%20C388%20180%20424%20152%20424%20108%20C424%2068%20380%2034%20330%2030%20Z%22/%3E%20%3Cpath%20d=%22M330%2030%20C352%2074%20372%20116%20392%20168%22/%3E%20%3Cpath%20d=%22M318%2066%20L360%2086%20M310%20104%20L356%20116%20M320%20138%20L362%20140%22/%3E%20%3Cpath%20d=%22M210%20250%20C170%20270%20150%20320%20176%20360%20C200%20396%20254%20396%20274%20356%20C294%20316%20262%20268%20210%20250%20Z%22/%3E%20%3Cpath%20d=%22M210%20250%20C226%20296%20240%20340%20250%20386%22/%3E%20%3Cpath%20d=%22M186%20288%20L232%20300%20M172%20322%20L226%20330%20M182%20356%20L230%20356%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%232b7d54%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%20opacity=%220.42%22%3E%20%3Cpath%20d=%22M420%20250%20C380%20262%20350%20300%20348%20344%22/%3E%20%3Cpath%20d=%22M420%20250%20C404%20248%20384%20258%20372%20272%20M420%20250%20C400%20258%20384%20276%20376%20296%20M420%20250%20C388%20274%20368%20306%20358%20336%22/%3E%20%3Cpath%20d=%22M40%20400%20C80%20386%20118%20400%20140%20434%22/%3E%20%3Cpath%20d=%22M40%20400%20C56%20392%2078%20392%2094%20400%20M40%20400%20C64%20396%2092%20404%20112%20418%20M40%20400%20C70%20404%20104%20420%20128%20442%22/%3E%20%3Cpath%20d=%22M250%2060%20C262%2096%20258%20140%20236%20172%22/%3E%20%3Cpath%20d=%22M250%2060%20C240%2078%20236%20100%20238%20118%20M250%2060%20C246%2086%20250%20112%20258%20132%22/%3E%20%3C/g%3E%20%3C/svg%3E");
background-size: 460px 460px;
background-repeat: repeat;
background-attachment: fixed;
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(90% 70% at 50% 0%, rgba(253, 247, 234, .55) 0%, rgba(253, 247, 234, .88) 55%, var(--ground) 100%);
}
/* Karten bekommen etwas mehr Deckkraft, damit Text auf dem Muster ruhig bleibt */
.reihe, .altkarte, ul.punkte li, a.kachel, .gruppe, .summe, details.klapp, button.track, header.himmel {
background-color: rgba(255, 255, 255, .94);
}
/* ---------- Thai-Ornament als Trenner ---------- */
.zierde {
height: 18px;
background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%2218%22%20viewBox=%220%200%20180%2018%22%3E%20%3Cg%20fill=%22none%22%20stroke=%22%230a9fae%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%3E%20%3Cpath%20d=%22M90%203%20C86%208%2082%2010%2076%2010%20C70%2010%2066%207%2066%203%22/%3E%20%3Cpath%20d=%22M90%203%20C94%208%2098%2010%20104%2010%20C110%2010%20114%207%20114%203%22/%3E%20%3Cpath%20d=%22M90%203%20L90%2014%22/%3E%20%3Cpath%20d=%22M66%203%20C58%203%2052%206%2048%2011%20M114%203%20C122%203%20128%206%20132%2011%22/%3E%20%3Cpath%20d=%22M40%2011%20L14%2011%20M140%2011%20L166%2011%22%20opacity=%220.55%22/%3E%20%3C/g%3E%20%3C/svg%3E") no-repeat center;
background-size: 180px 18px;
margin: 2px 0 -12px;
}
/* ---------- Überschriften mit thailändischem Charakter ---------- */
h1, .festival-titel, .rl-name {
font-family: "Chonburi", "Bricolage Grotesque", -apple-system, sans-serif;
letter-spacing: 0;
}
h1 { line-height: 1.18; }
.thai-gruss {
font-family: "Mitr", "Chonburi", sans-serif;
font-size: 1.02rem;
color: var(--tuerkis);
letter-spacing: .02em;
}
.thai-gruss span { color: var(--ink-faint); font-family: inherit; font-size: .84rem; }
/* ---------- Player groß und wieder klein ---------- */
.spieler-fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.spieler-fuss p { color: var(--ink-faint); font-size: .85rem; }
#gross-knopf {
font: inherit;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--accent);
background: var(--card);
border: 1px solid var(--line);
padding: 8px 12px;
min-height: 36px;
cursor: pointer;
}
#gross-knopf:hover { border-color: var(--accent); }
#gross-knopf:focus-visible { outline: 3px solid var(--safran); outline-offset: 2px; }
#spieler-rahmen.gross {
position: fixed;
inset: 6vh 5vw;
isolation: isolate;
width: auto;
height: auto;
aspect-ratio: auto;
z-index: 60;
border-radius: 14px;
border-color: var(--safran);
box-shadow: 0 0 0 100vmax rgba(23, 12, 31, .86), 0 20px 60px rgba(0, 0, 0, .5);
}
body.keinscroll { overflow: hidden; }
@media (max-width: 520px) {
#spieler-rahmen.gross { inset: 12vh 3vw; }
}
/* ---------- Groß und klein: eine Fläche zum Antippen, ein X zum Schließen ---------- */
#spieler-rahmen { position: relative; }
/* Klickfläche über dem kleinen Player: vergrößert beim Antippen */
.lupe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: zoom-in;
font: inherit;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 12px;
opacity: 0;
transition: opacity .18s ease;
}
.lupe span { font-size: 1.1em; margin-right: 6px; }
.lupe::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(23, 12, 31, .72) 0%, transparent 46%);
}
.lupe > * { position: relative; }
.lupe:hover, .lupe:focus-visible { opacity: 1; }
.lupe:focus-visible { outline: 3px solid var(--safran); outline-offset: -3px; }
@media (hover: none) {
.lupe { opacity: 1; } /* auf dem Telefon dauerhaft sichtbar */
}
/* Schließen im großen Zustand */
.zu {
position: absolute;
top: -14px;
right: -14px;
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--safran);
background: var(--nacht);
color: #fff;
font-size: 1.15rem;
line-height: 1;
cursor: zoom-out;
box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.zu:hover { background: var(--magenta); border-color: var(--magenta); }
.zu:focus-visible { outline: 3px solid var(--safran); outline-offset: 3px; }
.spieler-fuss p { margin-right: auto; }
/* ---------- Leiste: Equalizer über die ganze Breite, Knopf als Pille ---------- */
.radioleiste { gap: 14px; padding: 9px 16px; }
.rl-balken {
display: flex;
align-items: flex-end;
gap: 2px;
height: 20px;
flex: 1 1 auto;
max-width: none;
margin-right: clamp(16px, 5vw, 90px);
overflow: hidden;
}
.rl-balken i {
display: block;
flex: 1 1 auto;
min-width: 2px;
max-width: 5px;
background: var(--magenta);
opacity: .55;
height: 26%;
border-radius: 2px 2px 0 0;
animation-name: wippen;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.radioleiste.an .rl-balken i { opacity: 1; background: var(--rose); }
@media (prefers-reduced-motion: reduce) { .rl-balken i { animation: none; height: 40%; } }
.rl-knopf {
border-radius: 999px;
padding: 10px 22px;
min-height: 40px;
font-size: .76rem;
letter-spacing: .12em;
border: 0;
background: linear-gradient(180deg, #f05fae 0%, var(--magenta) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(224, 72, 155, .45);
transition: transform .12s ease, box-shadow .18s ease;
}
.rl-knopf:hover {
background: linear-gradient(180deg, #f472bd 0%, #d63a8f 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 22px rgba(224, 72, 155, .55);
}
.rl-knopf:active { transform: translateY(1px); }
.radioleiste.an .rl-knopf {
background: linear-gradient(180deg, #3ad0c0 0%, var(--tuerkis) 100%);
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(10, 159, 174, .5);
}
@media (max-width: 520px) {
.rl-knopf { letter-spacing: .08em; }
.rl-balken { margin-right: 10px; }
}
/* Balken werden jetzt vom Skript in der Höhe gesteuert, nicht von Keyframes. */
.rl-balken { height: 22px; align-items: stretch; }
.rl-balken i {
height: 100%;
transform-origin: bottom center;
transform: scaleY(.3);
animation: none;
will-change: transform;
background: linear-gradient(to top, var(--magenta) 0%, #f9a8d4 100%);
opacity: .85;
}
.radioleiste.an .rl-balken i {
opacity: 1;
background: linear-gradient(to top, var(--magenta) 0%, #fff 100%);
}
/* Wellenform: die Balken wachsen aus der Mitte nach oben und unten.
Sie sitzt zwischen Name und Knopf und hält zu beiden Seiten Abstand —
vorher klebte sie am Namen und ließ rechts eine große Lücke. */
/* Die Welle sitzt in der Mitte der Leiste, nicht in der Mitte des Restraums —
sonst zieht der breitere Schriftzug links sie aus der Mitte. Deshalb absolut
positioniert; Name und Knopf behalten ihre Plätze am Rand. */
/* Hier stand einmal `position: relative` — als Bezug für die damals absolut
zentrierte Welle — und hat damit das `position: sticky` der Leiste
überschrieben: sie scrollte mit, statt oben zu kleben. Ein Versuch mit
`fixed` war der zweite Fehlgriff. Richtig ist: kein Override. Die Leiste
klebt nach der Regel weiter oben, wo sie definiert ist, und `sticky` ist für
die Kinder darin Bezugsrahmen genug. Berichtigt am 10.09.2026. */
.rl-balken {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: min(520px, 38vw);
max-width: none;
margin: 0;
padding: 0;
align-items: center;
height: 28px;
gap: 3px;
}
/* Was auf dem Telefon mit Welle, Titel und Knopf geschieht, steht gesammelt
im Abschnitt „Die Welle auf dem Telefon" weiter unten — dort, wo es zuletzt
auch überschrieben wurde. */
/* Am Rechner trägt die Welle in der Leiste den Pegel — die Tonspur wäre dort
die zweite Anzeige derselben Sache im selben Fenster. Beschlossen am
10.09.2026 auf Einwand des Nutzers: eine je Fenster genügt. Auf dem Telefon
ist es umgekehrt, dort ist die Spur die einzige in der Leiste. */
/* ---------- Der Knopf: kleiner, dafür plastisch ----------
Er war mit 40 Pixeln Höhe und 22 Pixeln Innenrand der auffälligste Teil der
Leiste. Jetzt schmaler, und der Glanz kommt aus drei Schichten statt aus
Grösse: heller Verlauf oben im Körper, eine helle Kante innen oben, eine
dunkle innen unten, dazu ein weicher Schein nach aussen. Beim Drücken
kehren sich die Kanten um, dann sieht er eingedrückt aus. */
.rl-knopf {
padding: 6px 15px;
min-height: 30px;
font-size: .68rem;
letter-spacing: .10em;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .28);
background: linear-gradient(180deg, #f77cc2 0%, var(--magenta) 52%, #c22f7d 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .70),
inset 0 -1px 0 rgba(0, 0, 0, .30),
inset 0 0 0 1px rgba(255, 255, 255, .10),
0 2px 5px rgba(0, 0, 0, .32),
0 0 14px rgba(224, 72, 155, .40);
}
/* Der Glanz: ein Lichtbogen über der oberen Hälfte, wie auf gewölbtem Glas. */
.rl-knopf::before {
content: "";
position: absolute;
left: 1px;
right: 1px;
top: 1px;
height: 48%;
border-radius: 999px 999px 60% 60% / 999px 999px 30% 30%;
background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .10) 70%, transparent 100%);
pointer-events: none;
}
.rl-knopf:hover {
background: linear-gradient(180deg, #fa8fcd 0%, #e8529f 52%, #cc3585 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .80),
inset 0 -1px 0 rgba(0, 0, 0, .28),
0 3px 8px rgba(0, 0, 0, .34),
0 0 20px rgba(224, 72, 155, .55);
}
.rl-knopf:active {
transform: translateY(1px);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, .38),
inset 0 -1px 0 rgba(255, 255, 255, .22),
0 1px 2px rgba(0, 0, 0, .30);
}
.rl-knopf:active::before { opacity: .35; }
/* Läuft der Ton, wechselt der Knopf ins Türkis — mit denselben drei Schichten. */
.radioleiste.an .rl-knopf {
background: linear-gradient(180deg, #5fe0d2 0%, var(--tuerkis) 52%, #067f8c 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .70),
inset 0 -1px 0 rgba(0, 0, 0, .30),
0 2px 5px rgba(0, 0, 0, .32),
0 0 14px rgba(10, 159, 174, .45);
}
.radioleiste.an .rl-knopf:hover {
background: linear-gradient(180deg, #74e8db 0%, #0fb0bf 52%, #078996 100%);
}
.rl-balken i {
transform-origin: center center;
border-radius: 2px;
height: 100%;
/* Kein Weiß mehr: die Enden liefen vorher ins Weiße aus und sahen wie ein
gezeichnetes Muster aus statt wie ein Pegel. */
background: linear-gradient(to bottom, #f07cc0 0%, var(--magenta) 50%, #f07cc0 100%);
opacity: .72;
}
.radioleiste.an .rl-balken i {
opacity: 1;
background: linear-gradient(to bottom, #f9a8d4 0%, var(--magenta) 48%, #f9a8d4 100%);
}
/* ------------------------------------------------------------------ *
* Zeitachse — gemeinsame Form für Route, Termine und Tagebuch.
* Ein Baustein, drei Verwendungen: die Punkte tragen nur andere Farben.
* ------------------------------------------------------------------ */
.achse { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.halt {
position: relative;
display: grid;
grid-template-columns: 92px 1fr;
/* Der Abstand muss den Punkt auf der Linie überspringen, sonst liegt er auf
der Überschrift. Punkt sitzt bei 98 bis 110 Pixeln. */
gap: 4px 36px;
padding: 0 0 22px 0;
align-items: start;
}
/* Die Linie läuft durch alle Halte, endet aber am letzten. */
.halt::before {
content: "";
position: absolute;
left: 103px;
top: 12px;
bottom: -10px;
width: 2px;
background: var(--line);
}
.halt:last-child::before { display: none; }
.halt::after {
content: "";
position: absolute;
left: 98px;
top: 7px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--card);
border: 2px solid var(--accent);
}
.halt.fest::after { background: var(--accent); border-color: var(--accent); }
.halt.jetzt::after { background: var(--safran); border-color: var(--safran); box-shadow: 0 0 0 4px var(--amber-soft); }
.halt.offen::after { border-color: var(--ink-faint); border-style: dashed; }
.halt.fertig::after { background: var(--ink-faint); border-color: var(--ink-faint); }
/* Erledigtes bleibt an seinem Platz in der Zeitachse, aber durchgestrichen —
so ist der Fortschritt sichtbar, statt dass Punkte einfach verschwinden. */
.halt.fertig .sache { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--ink-soft); }
.halt.fertig .dazu { opacity: .75; }
.halt.fertig .wer { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.halt .wann {
grid-column: 1;
text-align: right;
padding-right: 18px;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .82rem;
color: var(--ink-soft);
line-height: 1.35;
padding-top: 3px;
}
.halt .wann b { display: block; color: var(--ink); font-weight: 600; }
.halt .wann small { display: block; color: var(--ink-faint); font-size: .72rem; letter-spacing: .03em; }
.halt .inhalt { grid-column: 2; display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.halt .sache {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.25;
}
.halt .dazu { color: var(--ink-soft); font-size: .9rem; }
.halt .dazu a { color: var(--accent); }
.halt .wer {
align-self: flex-start;
font-size: .72rem;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ink-faint);
border: 1px solid var(--line);
border-radius: 999px;
padding: 1px 9px;
background: var(--card-2);
}
.halt .wer.dringend { color: var(--amber); border-color: var(--amber); background: var(--amber-soft); }
@media (max-width: 520px) {
.halt { grid-template-columns: 1fr; gap: 4px; padding-left: 24px; }
.halt::before { left: 5px; }
.halt::after { left: 0; }
.halt .wann { grid-column: 1; text-align: left; padding-right: 0; }
.halt .wann b { display: inline; margin-right: 6px; }
.halt .wann small { display: inline; }
.halt .inhalt { grid-column: 1; }
}
/* Lücke in der Achse: der Teil der Reise, der noch nicht geplant ist. */
.luecke {
position: relative;
margin: 0 0 22px 0;
padding: 16px 18px;
border: 1px dashed var(--line);
border-radius: 14px;
background: var(--card-2);
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 521px) { .luecke { margin-left: 108px; } }
.luecke .kopfzeile {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
}
.luecke .kopfzeile .zahl { color: var(--amber); font-size: 1.3rem; }
.luecke p { color: var(--ink-soft); font-size: .9rem; }
/* Vorschlagskarten: Varianten, über die noch entschieden wird. */
.varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.variante {
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 7px;
box-shadow: var(--shadow);
}
.variante .titel { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; }
.variante .weg { font-size: .86rem; color: var(--ink-soft); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.variante p { font-size: .88rem; color: var(--ink-soft); }
.variante .fuer { font-size: .82rem; color: var(--accent); font-weight: 600; }
.variante .gegen { font-size: .82rem; color: var(--amber); }
/* Tagebuch: Eintrag mit Datumskopf, Bildplatz und Text. */
.eintrag {
border: 1px solid var(--line);
border-radius: 16px;
background: var(--card);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: var(--shadow);
}
.eintrag .kopf {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: baseline;
justify-content: space-between;
}
.eintrag .datum {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .8rem;
color: var(--ink-faint);
letter-spacing: .04em;
}
.eintrag h3 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.12rem; }
.eintrag p { font-size: .95rem; color: var(--ink-soft); }
.eintrag p strong { color: var(--ink); }
.eintrag .bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.eintrag .bildplatz {
aspect-ratio: 4 / 3;
border: 1px dashed var(--line);
border-radius: 10px;
background: var(--card-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-faint);
font-size: .8rem;
text-align: center;
padding: 8px;
}
.eintrag .von {
font-size: .78rem;
color: var(--ink-faint);
border-top: 1px solid var(--line-soft);
padding-top: 8px;
}
/* Panel der Radioleiste: seit dem eigenen Player steht hier der laufende Titel
statt eines fremden Rahmens. */
.rl-panel .rl-rahmen { display: flex; flex-direction: column; gap: 8px; }
.rl-laeuft { display: flex; flex-direction: column; gap: 2px; }
.rl-laeuft b {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: #fff;
}
.rl-laeuft span { color: var(--rose); font-size: .9rem; }
.rl-sendung {
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--magenta);
}
.rl-vorher {
list-style: none;
margin: 4px 0 0;
padding: 8px 0 0;
border-top: 1px solid rgba(255, 255, 255, .14);
display: flex;
flex-direction: column;
gap: 4px;
}
.rl-vorher li { font-size: .82rem; color: rgba(255, 255, 255, .62); }
.rl-vorher li b { color: rgba(255, 255, 255, .85); font-weight: 600; }
/* Das Panel hing als iframe-Kasten unten links über der Playlist. Seit es nur
noch Text trägt, sitzt es oben rechts unter dem Knopf, der es öffnet. */
.rl-panel {
position: fixed;
top: 58px;
right: 16px;
left: auto;
bottom: auto;
width: 330px;
max-width: calc(100vw - 32px);
align-items: stretch;
padding: 16px 18px;
}
.rl-panel .rl-rahmen {
height: auto;
min-height: 0;
border: 0;
background: none;
box-shadow: none;
overflow: visible;
border-radius: 0;
}
@media (max-width: 560px) {
.rl-panel { top: 54px; right: 12px; left: 12px; width: auto; }
}
/* Feine, durchlaufende Wellenform: viele dünne Striche statt weniger Balken,
und an beiden Enden ein weicher Auslauf, damit der Verlauf nicht abgeschnitten
wirkt, wenn er die Leiste verlässt. */
.rl-balken {
gap: 1px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.rl-balken i {
min-width: 1px;
max-width: 3px;
border-radius: 1px;
}
/* Bei langen Titeln stieß der Schriftzug links an die Welle. Er bekommt eine
feste Obergrenze und wird sonst abgeschnitten — die Welle bleibt mittig. */
.radioleiste .rl-name {
max-width: 26%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 0 1 auto;
}
/* Kräftige Balken mit runden Enden und Abstand, wie bei einem Diktiergerät.
Die haarfeine Fassung davor sah aus wie ein Strichcode. */
.rl-balken { gap: 4px; height: 30px; }
.rl-balken i {
min-width: 4px;
max-width: 7px;
border-radius: 999px;
}
/* Die Wellenform zeichnet jetzt audioMotion-analyzer in ein eigenes Canvas.
Der Kasten gibt nur noch Platz und Maske vor. */
.rl-balken { display: block; padding: 0; height: 34px; }
.rl-balken canvas { width: 100% !important; height: 100% !important; display: block; }
/* Zurück zur eigenen Wellenform: feine Striche, dicht an dicht. Die Fassung mit
der Fremdbibliothek zeigte gar nichts und ist wieder entfernt. */
.rl-balken {
display: flex;
align-items: center;
gap: 1px;
height: 30px;
padding: 0;
}
.rl-balken i {
display: block;
flex: 1 1 auto;
min-width: 1px;
max-width: 3px;
height: 100%;
border-radius: 1px;
transform-origin: center center;
will-change: transform;
}
/* Noch feiner: Striche von einem Pixel mit einem Pixel Abstand, so dicht wie
ein Diktiergerät sie zeichnet. Die Welle darf dafür etwas breiter sein. */
.rl-balken { width: min(600px, 44vw); gap: 1px; }
.rl-balken i { min-width: 1px; max-width: 2px; border-radius: 0; }
/* Die Welle sitzt jetzt rechts, dicht am Radioknopf: dort entstehen die neuen
Werte, nach links laufen sie aus. Mittig sah es aus wie ein Zierband. */
.rl-balken {
position: static;
transform: none;
margin-left: auto;
margin-right: 14px;
flex: 0 0 auto;
/* Nur links ausblenden — rechts, wo die Welle entsteht, bleibt sie voll. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%);
}
/* Der Knopf hatte selbst margin-left:auto — dadurch teilten sich Knopf und
Welle den freien Raum und es blieb eine Lücke von 137 Pixeln. Jetzt schiebt
nur die Welle, der Abstand ist der Zwischenraum der Leiste. */
.radioleiste .rl-knopf { margin-left: 0; }
.rl-balken { margin-right: 0; }
/* Volle Breite: die Welle läuft jetzt vom Schriftzug links bis zum Knopf
rechts. Links blendet sie weich aus, damit sie nicht an der Schrift klebt. */
.rl-balken { width: auto; flex: 1 1 auto; margin-left: 18px; }
/* Noch feiner: ein Strich je anderthalb Pixel. */
.rl-balken { gap: 0.5px; }
.rl-balken i { min-width: 1px; max-width: 1px; }
/* Zurück auf den ruhigeren Stand: Raster zwei Pixel, Striche bis zwei Pixel
breit. Die feinere Fassung stand zu 14 Prozent am Anschlag. */
.rl-balken { gap: 1px; }
.rl-balken i { min-width: 1px; max-width: 2px; }
/* Das Gruppenbild wirkte flau: dünner grauer Strich auf cremefarbenem Grund,
dazu ein 16:10-Ausschnitt, der von einem quadratischen Bild viel wegschneidet.
Jetzt mehr Bild, kräftigere Farben und ein farbiger Schein dahinter, der die
Festivalstimmung aufnimmt. */
figure.kopfbild {
position: relative;
isolation: isolate;
margin: 0 0 22px;
}
figure.kopfbild::before {
content: "";
position: absolute;
inset: -10px -6px -16px;
z-index: 0;
border-radius: 30px;
background:
radial-gradient(58% 66% at 26% 18%, rgba(224, 72, 155, .42), transparent 72%),
radial-gradient(58% 66% at 78% 82%, rgba(224, 138, 22, .40), transparent 72%),
radial-gradient(70% 80% at 52% 55%, rgba(155, 78, 224, .26), transparent 78%);
filter: blur(20px);
pointer-events: none;
}
figure.kopfbild img {
position: relative;
z-index: 1;
aspect-ratio: 4 / 3;
object-position: 50% 34%;
border: 0;
border-radius: 18px;
/* Kein Farbfilter. Hier stand `saturate(1.22) contrast(1.07)`, und das war zu
viel für diese Vorlage: sie ist von Haus aus ein knallbuntes Poster, und
ein Viertel mehr Sättigung drückt vor allem die Haut ins Rotorange.
Gemessen am 11.09.2026, Mittelwerte über vier Hautpartien — Rot steigt,
aber Blau bricht um bis zu ein Viertel weg:
Wange 169·91·80 -> 180·85·71
Gesicht 210·110·76 -> 225·105·60
Schulter 133·67·42 -> 143·61·30
Haut ohne Blauanteil liest sich als Sonnenbrand, nicht als Bräune. Der
Nutzer hat es als „übersteuert" gemeldet und nach dem Vergleich dreier
Varianten die ungefilterte gewählt.
Wer wieder etwas anheben will: der Wert auf `.tage-feld` weiter unten muss
mitgezogen werden, sonst sitzt die gesetzte Tagezahl anders im Bild als
das Foto darunter. */
box-shadow:
0 0 0 1px rgba(224, 72, 155, .30),
0 24px 60px -28px rgba(155, 78, 224, .85),
0 12px 34px -20px rgba(224, 138, 22, .55);
}
figure.kopfbild figcaption { position: relative; z-index: 1; margin-top: 10px; }
/* Mehr Höhe und pixelgenaue Striche.
Bei 30 Pixeln Höhe verschenkt die feine Auflösung ihre Wirkung — vergrößert
sah die Form gut aus, in Originalgröße nicht. Und: mit flexibler Strichbreite
landen die Striche auf Bruchteilen von Pixeln und verschmelzen zu einem
Schleier. Feste ein Pixel plus gleichmäßiger Abstand hält sie scharf. */
.rl-balken {
height: 44px;
gap: 0;
justify-content: space-between;
}
.rl-balken i {
flex: 0 0 1px;
min-width: 1px;
max-width: 1px;
}
/* Läuft ein Stück aus der Playlist, ist dessen Ton für uns nicht messbar.
Die Leiste zeigt das: Titel in Türkis statt Rosa, Welle flach. */
.radioleiste.fremd .rl-name { color: var(--tuerkis); }
.radioleiste.fremd .rl-balken i { opacity: .38; }
/* Der Lieblingstitel steht oben und ist als solcher erkennbar. */
button.track.beste {
border-color: var(--safran);
box-shadow: 0 0 0 1px var(--safran), 0 10px 26px -18px rgba(224, 138, 22, .8);
}
button.track.beste .t-titel { color: var(--amber); }
button.track.beste .krone { margin-left: 4px; color: var(--safran); font-size: .9em; }
button.track.beste .t-wer { color: var(--amber); opacity: .85; }
/* ------------------------------------------------------------------ *
* Das eigene Abzeichen, zugleich der Weg zurück zur Startseite.
* Angelehnt an die runden Marken alter Fluggesellschaften: Globus mit
* Meridianen, darüber die Flugbahn und die vier Reisenden als Punkte.
* Selbst gezeichnet — kein fremdes Zeichen.
* ------------------------------------------------------------------ */
nav.oben { align-items: center; }
a.marke {
display: inline-flex;
align-items: center;
gap: 9px;
margin-right: 6px;
padding: 2px 10px 2px 2px;
border: 0;
border-radius: 999px;
text-decoration: none;
flex: 0 0 auto;
}
a.marke:hover { background: rgba(14, 124, 134, .08); }
a.marke:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
/* Der Tukan ist nach rechts gezeichnet und schaute damit in den Schriftzug
hinein. Gespiegelt blickt er nach aussen, vom Namen weg. Das Zeichen selbst
bleibt unveraendert — die Kreisform ist symmetrisch, gespiegelt wird nur die
Blickrichtung. Dasselbe gilt fuer den Tukan auf den Seitenleitwerken der
Flugzeuge, dort steht die Spiegelung im transform-Attribut. */
a.marke svg { width: 36px; height: 36px; flex: 0 0 auto; overflow: visible; transform: scaleX(-1); }
a.marke .m-ring { fill: none; stroke: var(--accent); stroke-width: 1.6; }
a.marke .m-kugel { fill: var(--accent-soft); }
a.marke .m-netz { fill: none; stroke: var(--accent); stroke-width: .7; opacity: .55; }
a.marke .m-bahn {
fill: none;
stroke: var(--amber);
stroke-width: 1.8;
stroke-linecap: round;
}
a.marke .m-punkt { fill: var(--amber); }
a.marke .m-vier { fill: var(--safran); stroke: var(--ground); stroke-width: .8; }
a.marke .m-text {
display: flex;
flex-direction: column;
line-height: 1.05;
text-transform: none;
letter-spacing: 0;
}
a.marke .m-text b {
font-family: "Chonburi", "Bricolage Grotesque", serif;
font-size: .96rem;
color: var(--ink);
}
a.marke .m-text small {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
}
a.marke:hover .m-text b { color: var(--accent); }
/* Der Name ist ein Wort, liest sich aber als zwei. Statt Bindestrich oder
Leerzeichen traegt "Morrow" die Farbe der Sonne — dieselbe, die im Titel
schon "for" faerbt. Beim Ueberfahren geht der ganze Name auf die
Akzentfarbe, sonst zerfiele er in zwei Haelften. */
a.marke .m-text b .m-morrow { color: var(--safran); }
a.marke:hover .m-text b .m-morrow { color: inherit; }
@media (max-width: 560px) {
a.marke .m-text { display: none; }
a.marke svg { width: 32px; height: 32px; }
}
/* ---------- Cocktailkarte in der linken Spalte ---------- */
.liste-cocktails { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.liste-cocktails h2 { font-size: 1.15rem; }
details.cocktail > summary {
display: flex;
align-items: center;
gap: 8px;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
}
details.cocktail.eigen { border-color: var(--magenta); }
details.cocktail.eigen > summary { color: var(--magenta); }
.c-marke {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--magenta);
border: 1px solid var(--magenta);
border-radius: 999px;
padding: 1px 7px;
}
.c-trick {
font-size: .88rem;
color: var(--magenta);
border-left: 2px solid var(--magenta);
padding-left: 10px;
}
ul.c-zutaten {
list-style: none;
margin: 10px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
font-size: .9rem;
}
ul.c-zutaten li {
display: flex;
justify-content: space-between;
gap: 10px;
padding-bottom: 4px;
border-bottom: 1px dotted var(--line);
}
ul.c-zutaten li span { color: var(--ink-faint); font-size: .8rem; }
.liste-cocktails .innen p { font-size: .88rem; color: var(--ink-soft); }
.c-sirup, .c-ohne { color: var(--ink-faint) !important; font-size: .82rem !important; }
/* Herkunftszeichen an den beiden Klassikern. */
.c-eltern {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
border: 1px solid var(--line);
border-radius: 999px;
padding: 1px 7px;
}
/* Drink of the Day steht im Hauptbereich, nicht mehr in der Musikspalte. */
.liste-cocktails { margin-top: 0; }
.drink-datum {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .78rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-faint);
}
details.cocktail.heute {
border-color: var(--safran);
box-shadow: 0 0 0 1px var(--safran), 0 12px 30px -22px rgba(224, 138, 22, .9);
}
.c-heute {
margin-left: auto;
margin-right: 8px;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ground);
background: var(--safran);
border-radius: 999px;
padding: 2px 9px;
}
/* ---------- Die Drinkbühne: gezeichnet, kein Foto ---------- */
.drink-buehne {
position: relative;
margin: 4px 0 14px;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 44px -26px rgba(35, 48, 44, .6);
/* Standardfarben, vom Tagesdrink überschrieben */
--drink-hell: #f4a63c;
--drink-dunkel: #c62a20;
}
.drink-buehne svg { display: block; width: 100%; height: auto; }
/* ThaiMorrow: Campari-Rot mit Bernstein. */
.drink-buehne.d0 { --drink-hell: #f0803a; --drink-dunkel: #b81f26; }
/* Negroni: tiefes Rot. */
.drink-buehne.d1 { --drink-hell: #e0512a; --drink-dunkel: #8e1414; }
/* Caipirinha: Limettengrün. */
.drink-buehne.d2 { --drink-hell: #c9e36a; --drink-dunkel: #5c9128; }
.buehne-name {
position: absolute;
left: 16px;
bottom: 14px;
font-family: "Chonburi", "Bricolage Grotesque", serif;
font-size: 1.15rem;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
@media (min-width: 700px) {
.drink-buehne { max-width: 440px; }
}
@media (prefers-reduced-motion: no-preference) {
.drink-buehne .kakadu { animation: picken 5.5s ease-in-out infinite; transform-origin: 300px 150px; }
@keyframes picken {
0%, 62%, 100% { transform: rotate(0deg); }
68% { transform: rotate(-9deg); }
74% { transform: rotate(2deg); }
80% { transform: rotate(-6deg); }
}
.drink-buehne .palme { animation: wiegen 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wiegen {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(1.4deg); }
}
}
/* Der Name darf lauter sein. */
a.marke .m-text b {
font-size: 1.24rem;
letter-spacing: -.01em;
color: var(--ink);
}
a.marke .m-text small { font-size: .64rem; letter-spacing: .14em; }
a.marke { gap: 11px; }
@media (max-width: 560px) {
a.marke .m-text { display: inline-flex; }
a.marke .m-text b { font-size: 1.02rem; }
a.marke .m-text small { display: none; }
a.marke svg { width: 36px; height: 36px; }
}
/* ------------------------------------------------------------------ *
* Mehr Dschungel.
* Das alte Muster bestand nur aus dünnen Strichen und verschwand auf dem
* cremefarbenen Grund. Jetzt liegen gefüllte Blattflächen darunter — größer,
* satter, in zwei Grüntönen —, dazu ein grüner Anflug an den Rändern.
* Deckkraft bleibt unter 15 Prozent, damit der Text lesbar bleibt.
* ------------------------------------------------------------------ */
body {
background-color: #f7f2e2;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22620%22%20height=%22620%22%20viewBox=%220%200%20620%20620%22%3E%20%3Cg%20fill=%22%231a5c3c%22%3E%20%3Cpath%20d=%22M92%2030c-72%2042-78%20148-8%20200%2062%2046%20132%204%20136-64%204-62-56-118-128-136Z%22%20opacity=%22.13%22/%3E%20%3Cpath%20d=%22M470%208c-52%2056-44%20140%2020%20176%2056%2032%20116-4%20116-64%200-54-62-104-136-112Z%22%20opacity=%22.10%22/%3E%20%3Cpath%20d=%22M300%20330c-58%2026-84%2096-46%20148%2034%2046%20110%2044%20138-8%2026-50-16-114-92-140Z%22%20opacity=%22.12%22/%3E%20%3Cpath%20d=%22M120%20430c66-16%20128%208%20160%2062-56%208-118-8-160-30Z%22%20opacity=%22.09%22/%3E%20%3Cpath%20d=%22M560%20380c-60%208-108%2048-124%20104%2056-6%20106-40%20132-84Z%22%20opacity=%22.10%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%230f4a30%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20opacity=%22.22%22%3E%20%3Cpath%20d=%22M92%2030c22%2066%2042%20132%2062%20200M60%2096l48%2020M40%20148l58%2014M50%20200l56%204M78%20244l44-10%22/%3E%20%3Cpath%20d=%22M470%208c26%2058%2048%20108%2070%20168M456%2060l48%2022M446%20106l52%2014M458%20152l48%204%22/%3E%20%3Cpath%20d=%22M300%20330c20%2054%2036%20102%2046%20156M272%20378l52%2014M256%20420l60%2010M270%20462l54%202%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%232b7d54%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20opacity=%22.18%22%3E%20%3Cpath%20d=%22M600%20240c-56%2016-96%2062-104%20122M600%20240c-22-2-48%2010-62%2028M600%20240c-30%2012-56%2036-68%2062%22/%3E%20%3Cpath%20d=%22M20%20560c56-20%20112-2%20148%2044M20%20560c22-10%2050-10%2072%200M20%20560c34-6%2074%206%20104%2026%22/%3E%20%3Cpath%20d=%22M340%2060c16%2050%2010%20110-22%20154M340%2060c-14%2024-20%2054-16%2078M340%2060c-6%2036%200%2072%2012%2098%22/%3E%20%3C/g%3E%20%3C/svg%3E");
background-size: 620px 620px;
background-repeat: repeat;
background-attachment: fixed;
}
body::before {
background:
radial-gradient(120% 70% at 50% -10%, rgba(26, 92, 60, .16), transparent 60%),
radial-gradient(90% 50% at 0% 100%, rgba(26, 92, 60, .14), transparent 65%),
radial-gradient(90% 50% at 100% 100%, rgba(20, 110, 96, .12), transparent 65%) !important;
}
/* Die Zierden zwischen den Abschnitten nehmen das Grün auf. */
.zierde { filter: hue-rotate(-24deg) saturate(1.15); }
.drink-buehne { max-width: 460px; }
@media (prefers-reduced-motion: no-preference) {
.drink-buehne .kakadu { animation: none; }
.drink-buehne .vogel { animation: picken 6s ease-in-out infinite; transform-origin: 286px 160px; }
}
.buehne-marke {
position: absolute;
top: 14px;
left: 16px;
display: flex;
align-items: center;
gap: 9px;
}
.buehne-marke svg { width: 38px; height: 38px; }
.buehne-marke .m-grund { fill: var(--tuerkis); }
.buehne-marke .m-kopf, .buehne-marke .m-hals { fill: #f8f2e0; }
.buehne-marke .m-binde { fill: #17131c; }
.buehne-marke .m-helm { fill: var(--rot); }
.buehne-marke .m-helmkante { fill: none; stroke: #8c1810; stroke-width: 1; opacity: .8; }
.buehne-marke .m-schnabel { fill: #f0a02a; }
.buehne-marke .m-spitze { fill: #17131c; }
.buehne-marke .m-schnabelkante { fill: none; stroke: #b8762f; stroke-width: 1; opacity: .75; }
.buehne-marke .m-augenring { fill: #17131c; }
.buehne-marke .m-auge { fill: #c62a20; }
.buehne-marke .m-pupille { fill: #17131c; }
.buehne-marke span { display: flex; flex-direction: column; line-height: 1.05; }
.buehne-marke b {
font-family: "Chonburi", "Bricolage Grotesque", serif;
font-size: 1.02rem;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.buehne-marke small {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .56rem;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255, 255, 255, .8);
}
/* Sundowner: eigenes Etikett für das Set zur blauen Stunde. */
button.track.sundowner {
border-color: var(--amber);
box-shadow: 0 0 0 1px var(--amber), 0 10px 26px -18px rgba(224, 138, 22, .75);
background: linear-gradient(180deg, var(--card) 0%, #fdf0dd 100%);
}
button.track.sundowner .t-titel { color: var(--amber); }
button.track.sundowner .sonne { margin-left: 4px; color: var(--safran); }
button.track .t-set {
margin-top: 4px;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .6rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ground);
background: linear-gradient(90deg, var(--safran), var(--rot));
border-radius: 999px;
padding: 2px 9px;
align-self: flex-start;
}
/* Zu jedem Cocktail sein Set. */
.c-hoeren {
align-self: flex-start;
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 7px;
font: inherit;
font-size: .84rem;
color: var(--ground);
background: var(--accent);
border: 0;
border-radius: 999px;
padding: 7px 15px;
cursor: pointer;
}
.c-hoeren:hover { background: var(--tuerkis); }
.c-hoeren:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
details.cocktail.eigen .c-hoeren { background: var(--magenta); }
details.cocktail.eigen .c-hoeren:hover { background: var(--lila); }
/* Das Sundowner-Etikett war zu groß und lief über drei Zeilen. Jetzt eine
kleine Pille in einer Zeile, in den Farben des Videobilds. */
button.track .t-set {
margin-top: 3px;
font-size: .52rem;
letter-spacing: .08em;
padding: 1px 8px;
white-space: nowrap;
background: linear-gradient(90deg, var(--set-a, var(--safran)), var(--set-b, var(--rot)));
}
button.track.sundowner {
border-color: var(--set-a, var(--amber));
box-shadow: 0 0 0 1px var(--set-a, var(--amber)), 0 10px 26px -18px color-mix(in srgb, var(--set-a, var(--amber)) 70%, transparent);
background: var(--card);
}
button.track.sundowner .t-titel { color: var(--set-a, var(--amber)); }
/* Ocean Thai: türkis statt magenta, sonst wie die anderen eigenen Drinks. */
details.cocktail.ozean { border-color: var(--tuerkis); }
details.cocktail.ozean > summary { color: var(--tuerkis); }
details.cocktail.ozean .c-marke { color: var(--tuerkis); border-color: var(--tuerkis); }
details.cocktail.ozean .c-trick { color: var(--accent); border-left-color: var(--tuerkis); }
details.cocktail.ozean .c-hoeren { background: var(--accent); }
details.cocktail.ozean .c-hoeren:hover { background: var(--tuerkis); }
/* Vierte Farbstellung für die Bühne: Ozeanblau. */
.drink-buehne.d1 { --drink-hell: #5fd6d0; --drink-dunkel: #1063a8; }
.drink-buehne.d2 { --drink-hell: #e0512a; --drink-dunkel: #8e1414; }
.drink-buehne.d3 { --drink-hell: #c9e36a; --drink-dunkel: #5c9128; }
/* ---------- Eigenen Drink posten ---------- */
details.eigenerdrink { border-color: var(--safran); }
details.eigenerdrink > summary { color: var(--amber); font-weight: 700; }
#drinkform { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
#drinkform label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: .8rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-faint);
}
#drinkform input[type="text"], #drinkform textarea {
font: inherit;
font-size: .95rem;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 9px 12px;
}
#drinkform input:focus-visible, #drinkform textarea:focus-visible {
outline: 3px solid var(--amber);
outline-offset: 1px;
}
#drinkform .farbwahl { display: flex; gap: 14px; }
#drinkform .farbwahl label { flex: 1 1 auto; }
#drinkform input[type="color"] {
width: 100%;
height: 40px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
padding: 3px;
cursor: pointer;
}
.formknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.c-teilen, .c-zurueck {
font: inherit;
font-size: .84rem;
border-radius: 999px;
padding: 7px 15px;
cursor: pointer;
border: 1px solid var(--line);
background: var(--card);
color: var(--ink);
}
.c-teilen { border-color: var(--accent); color: var(--accent); }
.c-teilen:hover { background: var(--accent-soft); }
.c-zurueck:hover { background: var(--card-2); }
.formhinweis { font-size: .82rem; color: var(--accent); min-height: 1.2em; }
.altkarte.eigener-drink { border-color: var(--safran); margin-bottom: 14px; }
.altkarte.eigener-drink h3 {
font-family: "Chonburi", "Bricolage Grotesque", serif;
font-size: 1.1rem;
color: var(--amber);
}
.altkarte.eigener-drink .von-wem { font-size: .82rem; color: var(--ink-faint); }
.drink-buehne.eigener .buehne-marke small { color: var(--safran); }
/* ------------------------------------------------------------------ *
* Dschungel in drei Ebenen.
*
* Eine einzelne Musterebene bleibt flach, egal wie kräftig sie ist. Tiefe
* entsteht erst, wenn Pflanzen auf verschiedenen Entfernungen liegen:
*
* hinten — feines Blattwerk, klein und blass, steht beim Scrollen still
* Mitte — größere Blätter, sie scrollen mit dem Inhalt mit
* vorn — große Blätter an den Rändern, dunkler und leicht unscharf
*
* Weil die hintere Ebene fest steht und die mittlere mitwandert, entsteht
* Parallax ohne eine Zeile JavaScript.
*
* Dazu gefiltertes Licht: helle Kegel von oben, dunklere Zonen unten. Ohne das
* verschmilzt alles zu einer grünen Fläche.
* ------------------------------------------------------------------ */
/* Licht von oben, Schatten unten. */
body::before {
background:
radial-gradient(60% 40% at 22% -5%, rgba(255, 246, 214, .55), transparent 62%),
radial-gradient(45% 32% at 72% -8%, rgba(255, 240, 196, .42), transparent 60%),
radial-gradient(120% 70% at 50% -12%, rgba(26, 92, 60, .18), transparent 62%),
radial-gradient(80% 45% at 0% 105%, rgba(12, 58, 36, .22), transparent 66%),
radial-gradient(80% 45% at 100% 105%, rgba(12, 58, 36, .20), transparent 66%) !important;
}
/* Vordere Ebene: Blattwerk an den Rändern, unscharf wie nah an der Linse. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221600%22%20height=%221000%22%20viewBox=%220%200%201600%201000%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%20%3Cg%20fill=%22%230f4a2c%22%3E%20%3Cpath%20d=%22M-40-40C120%2020%20220%20150%20210%20300%20120%20250%2020%20140-40%2040Z%22%20opacity=%22.26%22/%3E%20%3Cpath%20d=%22M-40%2060C90%20110%20180%20210%20200%20330%2090%20300%2010%20210-40%20130Z%22%20opacity=%22.2%22/%3E%20%3Cpath%20d=%22M120-40c40%2090%2030%20200-20%20280-30-90-20-200%2020-280Z%22%20opacity=%22.18%22/%3E%20%3Cpath%20d=%22M1640-40c-170%2050-280%20180-270%20330%20100-50%20200-160%20270-260Z%22%20opacity=%22.24%22/%3E%20%3Cpath%20d=%22M1640%2090c-140%2040-240%20140-270%20260%20110-20%20200-110%20270-190Z%22%20opacity=%22.18%22/%3E%20%3Cpath%20d=%22M1470-40c-40%20100-30%20210%2020%20290%2030-90%2020-210-20-290Z%22%20opacity=%22.16%22/%3E%20%3Cpath%20d=%22M-40%201040c130-70%20290-60%20400%2030-130%2030-290%2010-400-30Z%22%20opacity=%22.22%22/%3E%20%3Cpath%20d=%22M1640%201040c-150-60-320-40-430%2050%20150%2020%20320-10%20430-50Z%22%20opacity=%22.2%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%230a3b22%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20opacity=%22.22%22%3E%20%3Cpath%20d=%22M-40-40C90%2060%20170%20170%20210%20300M20%2020l60%2060M60%2090l70%2040M110%20170l70%2030%22/%3E%20%3Cpath%20d=%22M1640-40c-140%2090-230%20200-270%20330M1580%2030l-60%2060M1540%20100l-70%2040M1490%20180l-70%2030%22/%3E%20%3C/g%3E%20%3C/svg%3E");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(1.5px);
}
/* Mittlere Ebene: sie liegt im Fluss und wandert deshalb beim Scrollen mit. */
.wrap { position: relative; }
.wrap::before {
content: "";
position: absolute;
inset: -60px -40px;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22900%22%20height=%22900%22%20viewBox=%220%200%20900%20900%22%3E%20%3Cg%20fill=%22%2317593a%22%3E%20%3Cpath%20d=%22M120%2060C40%20130%2040%20280%20130%20350c78%2060%20170%206%20176-92%206-90-84-166-186-198Z%22%20opacity=%22.10%22/%3E%20%3Cpath%20d=%22M700%2030c-70%2080-56%20200%2030%20250%2076%2044%20158-6%20158-90%200-76-86-146-188-160Z%22%20opacity=%22.085%22/%3E%20%3Cpath%20d=%22M430%20470c-84%2036-120%20138-66%20212%2048%2066%20158%2062%20198-12%2038-72-24-164-132-200Z%22%20opacity=%22.095%22/%3E%20%3Cpath%20d=%22M60%20640c96-24%20186%2012%20232%2090-82%2012-172-12-232-44Z%22%20opacity=%22.08%22/%3E%20%3Cpath%20d=%22M840%20700c-88%2012-158%2070-180%20152%2082-8%20154-58%20192-122Z%22%20opacity=%22.075%22/%3E%20%3Cpath%20d=%22M600%20380c60-46%20140-46%20190-8-56%2026-128%2034-190%2022Z%22%20opacity=%22.07%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%230d4227%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20opacity=%22.16%22%3E%20%3Cpath%20d=%22M120%2060c32%2096%2062%20192%2090%20290M76%20156l70%2030M50%20232l84%2020M64%20306l82%206M110%20366l64-14%22/%3E%20%3Cpath%20d=%22M700%2030c38%2084%2070%20156%20102%20242M680%20100l70%2032M666%20168l76%2020M684%20236l70%206%22/%3E%20%3Cpath%20d=%22M430%20470c30%2078%2052%20148%2066%20226M390%20538l76%2020M366%20600l86%2014M388%20664l78%204%22/%3E%20%3C/g%3E%20%3C/svg%3E");
background-size: 900px 900px;
background-repeat: repeat;
}
@media (max-width: 560px) {
/* Auf dem Telefon nur zwei Ebenen — der Rahmen frisst sonst den Text. */
body::after { display: none; }
}
/* Träger für die Schrift: das Blattwerk läuft hinter der Navigation durch und
nimmt ihr den Kontrast. Ein weicher heller Schleier darunter hält sie lesbar,
ohne einen sichtbaren Kasten zu ziehen. */
nav.oben {
position: relative;
isolation: isolate;
}
nav.oben::before {
content: "";
position: absolute;
inset: -12px -20px -4px;
z-index: -1;
border-radius: 20px;
/* Am 10.09.2026 gemessen: mit .55 im Aussenbereich kam die Navigation über
dem Foto nur auf 4,38 zu 1. Kräftiger, damit auch der rechte Rand trägt. */
background: radial-gradient(85% 130% at 35% 50%, rgba(247, 242, 226, .96), rgba(247, 242, 226, .80) 72%, transparent 100%);
}
a.marke .m-text small { color: var(--ink-soft); }
/* ------------------------------------------------------------------ *
* Reihenfolge auf schmalen Bildschirmen.
*
* Im HTML steht die Musikspalte vor dem Inhalt, weil sie auf dem großen
* Bildschirm links liegt. Auf dem Telefon stapelt sich alles untereinander —
* dort stand dann die Playlist ganz oben, und Countdown und Foto kamen erst
* nach dem Scrollen. Jetzt: erst der Countdown, dann das Foto, dann der Rest,
* und die Musik ganz zum Schluss.
* ------------------------------------------------------------------ */
@media (max-width: 999px) {
.spalten { display: flex; flex-direction: column; }
.haupt { order: 1; }
.seite-musik { order: 2; }
header.himmel { display: flex; flex-direction: column; }
header.himmel .eyebrow { order: 1; }
header.himmel .thai-gruss { order: 2; }
header.himmel h1 { order: 3; }
header.himmel .lede { order: 4; }
header.himmel .uhrwerk { order: 5; } /* Countdown zuerst */
header.himmel .kopfbild { order: 6; } /* dann das Foto */
header.himmel .flugweg { order: 7; } /* dann der Flugweg */
}
/* ------------------------------------------------------------------ *
* Lichtstrahlen und Leben im Blattwerk.
*
* Was auf Regenwaldfotos die Stimmung macht, sind zwei Dinge: schräg
* einfallende Sonnenstrahlen durchs Kronendach und das türkise Wasser darunter.
* Das Licht ist gezeichnet. Der Grund darunter ist seit dem 10.09.2026 ein
* echtes Foto: die Wasserterrassen am Erawan-Wasserfall, frei lizenziert unter
* CC BY-SA 4.0 (Urheber JirapatzEn, siehe assets/HERKUNFT.md). Die
* Referenzbilder des Nutzers waren Bildschirmfotos aus einer Bildsuche und
* damit fremdes Material; gemessen wurde daraus nur die Farbe.
* ------------------------------------------------------------------ */
/* ---------- Der fotografierte Grund ----------
Hinterste Ebene, hinter allem anderen. Sie liegt fest im Bild und scrollt
nicht mit, damit der Parallax-Aufbau der drei gezeichneten Ebenen erhalten
bleibt. Zwei Dinge halten den Text lesbar: eine cremefarbene Deckschicht in
der Grundfarbe der Seite und ein leichter Weichzeichner, der das Blattwerk
zu Struktur macht statt zu Motiv. `background-attachment: fixed` wäre der
kürzere Weg, wird aber auf iOS ignoriert — deshalb ein eigenes Element. */
html::before {
content: "";
position: fixed;
inset: -8px; /* der Weichzeichner darf keine hellen Ränder zeigen */
z-index: -3;
pointer-events: none;
background-image: url("/assets/dschungel-klein.jpg");
background-size: cover;
background-position: center 62%;
background-repeat: no-repeat;
filter: blur(1px) saturate(.95);
opacity: .92;
/* Oben ist das Foto zu sehen, nach unten läuft es aus. Gleichmäßig über die
ganze Seite gelegt wirkte es nur als grauer Schleier — gemessen am
10.09.2026 im Browser: das Motiv war nicht erkennbar, die Seite verlor
aber ihren warmen Grundton. */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0,0,0,.45) 52%, transparent 76%);
mask-image: linear-gradient(to bottom, #000 0%, #000 26%, rgba(0,0,0,.45) 52%, transparent 76%);
}
@media (min-width: 760px) {
/* Das grosse Bild erst laden, wenn der Bildschirm es auch auflöst. */
html::before { background-image: url("/assets/dschungel.jpg"); }
}
html::after {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
/* Die Deckschicht hält den Text lesbar. Oben darf das Foto durchkommen,
unten übernimmt der Cremeton der Seite vollständig. */
background:
linear-gradient(180deg,
rgba(253, 247, 234, .74) 0%,
rgba(253, 247, 234, .80) 30%,
rgba(253, 247, 234, .90) 62%,
rgba(253, 247, 234, .96) 100%);
}
/* ---------- Träger für freistehenden Text ----------
Am 10.09.2026 nach dem Einbau des Fotos gemessen: der Absatz in der
Musikspalte kam auf 2,9 zu 1 gegen seinen Grund, das H2 auf 3,4 zu 1. WCAG
verlangt 4,5 zu 1. Statt das Foto weiter aufzuhellen — dann verschwindet es
wieder — tragen die freistehenden Textbereiche denselben weichen Schleier,
den die Navigation schon hat: keine sichtbare Kante, aber Grund unter der
Schrift. */
aside.seite-musik,
header {
position: relative;
isolation: isolate;
}
aside.seite-musik::before,
header::before {
content: "";
position: absolute;
inset: -16px -22px;
z-index: -1;
border-radius: 26px;
background: radial-gradient(75% 90% at 40% 40%, rgba(253, 247, 234, .90), rgba(253, 247, 234, .62) 72%, transparent 100%);
}
/* Der Seitengrund muss durchlässig werden, sonst deckt er das Foto ab. Die
Grundfarbe wandert dafür auf `html` — sonst malt der Browser weiss, wo das
Foto noch nicht geladen ist. */
html { background: var(--ground); }
body { background: transparent; }
/* Namensnennung des Hintergrundfotos: die Lizenz verlangt sie, der Blick soll
aber am Inhalt bleiben. Deshalb klein und blass, aber nicht versteckt. */
footer .bildnachweis {
margin-top: 10px;
font-size: .76rem;
color: var(--ink-faint);
line-height: 1.5;
}
footer .bildnachweis a { color: var(--ink-soft); }
/* Strahlen: schräge helle Bahnen, oben breit, nach unten auslaufend. */
.wrap::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(102deg, transparent 12%, rgba(255, 250, 224, .5) 15%, transparent 21%),
linear-gradient(98deg, transparent 26%, rgba(255, 248, 216, .38) 29%, transparent 33%),
linear-gradient(107deg, transparent 44%, rgba(255, 252, 232, .42) 48%, transparent 54%),
linear-gradient(95deg, transparent 66%, rgba(255, 246, 210, .32) 68%, transparent 72%),
linear-gradient(110deg, transparent 80%, rgba(255, 250, 226, .36) 84%, transparent 89%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
}
/* Tiere im Blattwerk — Nashornvogel, Schmetterling, Affe, Gecko. */
.wrap::before {
background-image:
url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%221200%22%20viewBox=%220%200%201200%201200%22%3E%20%3Cg%20fill=%22%2314512f%22%20opacity=%22.16%22%3E%20%3Cpath%20d=%22M180%20210c-14%200-25%2011-25%2024%200%2014%2011%2025%2025%2027%205%20.5%2010%200%2014-2l-2-49Zm0%200c10-3%2021-2%2027%203-7%202-13%202-19%204-3%201-6%201-8-1Zm0%208c11-2%2023%202%2028%208-7%207-19%2010-28%208Zm-8%204a4%204%200%201%200%200-8%204%204%200%200%200%200%208Z%22/%3E%20%3Cpath%20d=%22M170%20262c-9-2-16-7-19-14%209%205%2019%207%2026%205l4%2011c-4%201-7%201-11-2Z%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22%2314512f%22%20opacity=%22.13%22%3E%20%3Cpath%20d=%22M880%20640c-18-16-42-14-52%204-8%2015%200%2033%2018%2040-14%2010-16%2030-4%2042%2014%2014%2038%2010%2048-8%2010%2018%2034%2022%2048%208%2012-12%2010-32-4-42%2018-7%2026-25%2018-40-10-18-34-20-52-4-4%204-8%209-10%2014-2-5-6-10-10-14Z%22/%3E%20%3Cpath%20d=%22M880%20646v96%22%20stroke=%22%230d3a22%22%20stroke-width=%224%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22%2314512f%22%20opacity=%22.14%22%3E%20%3Cpath%20d=%22M420%20900c-8-14-4-32%2010-40%2014-8%2032-2%2038%2012%204%2010%202%2020-6%2028%2010%204%2016%2014%2014%2026-2%2014-16%2024-30%2022-14-2-24-16-22-30%201-8%206-14%2012-18-8-2-14-8-16-16Z%22/%3E%20%3Cpath%20d=%22M446%20926c14%206%2026%2018%2030%2034-14-4-26-14-34-26Z%22/%3E%20%3Cpath%20d=%22M414%20934c-14%208-24%2022-26%2038%2014-6%2026-18%2032-32Z%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22none%22%20stroke=%22%2314512f%22%20stroke-width=%225%22%20stroke-linecap=%22round%22%20opacity=%22.12%22%3E%20%3Cpath%20d=%22M700%20300c30-6%2062%200%2086%2018%22/%3E%20%3C/g%3E%20%3Cg%20fill=%22%2314512f%22%20opacity=%22.12%22%3E%20%3Cpath%20d=%22M300%20560c10-8%2024-8%2034%200%206%205%208%2012%206%2019%208%202%2014%209%2014%2018%200%2011-9%2020-20%2020-8%200-15-5-18-12-4%205-10%208-17%208-11%200-20-9-20-20%200-9%206-16%2014-19-2-6%200-12%207-14Z%22/%3E%20%3C/g%3E%20%3C/svg%3E"),
var(--blattmuster-mitte);
background-size: 1200px 1200px, 900px 900px;
background-repeat: repeat, repeat;
}
.buehne-marke .m-koerper, .buehne-marke .m-kopf { fill: #17131c; }
.buehne-marke .m-schwanz { fill: #0e2a20; }
.buehne-marke .m-kehle { fill: #fdfaf0; }
.buehne-marke .m-schnabel { fill: #f08a1e; }
.buehne-marke .m-schnabelspitze { fill: #17131c; }
.buehne-marke .m-schnabelkante { fill: none; stroke: #c9611a; stroke-width: 1.1; opacity: .75; }
.buehne-marke .m-augenring { fill: #5fd6d0; }
.buehne-marke .m-auge { fill: #17131c; }
.buehne-marke .m-pupille { fill: #fdfaf0; }
.buehne-marke .m-hals, .buehne-marke .m-helm, .buehne-marke .m-binde,
.buehne-marke .m-spitze, .buehne-marke .m-helmkante { display: none; }
/* ------------------------------------------------------------------ *
* Die Welle auf dem Telefon — dritte und letzte Fassung, 10.09.2026.
*
* Der Weg dahin, damit ihn niemand zurückdreht: zuerst war die Welle unter
* 560 Pixeln ausgeblendet, dadurch blieb die Leiste auf dem Handy tot. Dann
* wich der Schriftzug und die Welle blieb — dabei stand der Knopf mitten in
* ihr, und der Titel war nicht mehr zu lesen. Jetzt gilt: in der Leiste steht
* der Titel, den Pegel zeigen die Tonspur an ihrem unteren Rand und die grosse
* Welle im Panel. Alles zu diesem Thema steht hier, nicht mehr an zwei Orten.
* ------------------------------------------------------------------ */
@media (max-width: 560px) {
.rl-balken { display: none; }
.radioleiste .rl-name {
display: block;
max-width: none;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.radioleiste .rl-knopf { margin-left: auto; }
.radioleiste { gap: 10px; padding: 8px 12px; }
/* Auch auf dem Telefon der schlankere Knopf, siehe den Abschnitt „Der Knopf:
kleiner, dafür plastisch". Diese Regel setzte ihn vorher wieder gross. */
.rl-knopf { padding: 6px 13px; font-size: .66rem; min-height: 30px; }
/* Kann der Browser den Pegel nicht liefern — WebKit auf iOS gibt den Ton am
WebAudio-Graphen vorbei aus —, hat eine leere Welle keinen Zweck. Dann
bekommt der Titel den Platz. Erkannt wird das von radio.js selbst. */
.radioleiste.ohne-pegel .rl-balken { display: none; }
.radioleiste.ohne-pegel .rl-name {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Auch auf breiten Bildschirmen gilt: ohne Messung keine Welle. */
.radioleiste.ohne-pegel .rl-balken { display: none; }
/* Ohne Welle muss der Titel deren Platz übernehmen. Zwei Dinge standen dem im
Weg, beide am 10.09.2026 auf dem iPhone und im Gerätemodus gemessen: der
Name trägt ein `max-width: 26%`, das ihn bei 95 Pixeln festhielt, und ohne
ein Element, das den Rest füllt, rutschte der Knopf in die Mitte der Leiste
— genau dorthin, wo die Welle war. */
.radioleiste.ohne-pegel .rl-name {
max-width: none;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.radioleiste.ohne-pegel .rl-knopf { margin-left: auto; }
/* Der erweiterte Reiseweg: Koh Lipe als Ziel, Pattaya als Fixpunkt. */
.flugweg .bahn-boot {
fill: none;
stroke: var(--tuerkis);
stroke-width: 2.4;
stroke-dasharray: 5 5;
stroke-linecap: round;
}
.flugweg .ort-ziel { fill: var(--tuerkis); stroke: var(--ground); stroke-width: 1.4; }
.flugweg .ort-fest { fill: var(--magenta); stroke: var(--ground); stroke-width: 1.4; }
.flugweg text.ziel { fill: var(--accent); font-weight: 700; }
.flugweg text.fest { fill: var(--magenta); font-weight: 700; }
.weg-stand {
margin-top: 6px;
text-align: center;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .76rem;
letter-spacing: .04em;
color: var(--ink-faint);
}
/* ==================================================================== *
* Die Wellenform hat ihren eigenen Platz — Stand 10.09.2026, und dies
* ist die gültige Fassung.
*
* Der Weg dahin: erst lief sie in der Radioleiste mit, dann zusätzlich als
* dünne Spur an deren Rand, dann auch im Panel — drei Anzeigen derselben
* Sache. Einwand des Nutzers, und er hat recht: für etwas so aufwendig
* Gebautes ist ein 8-Pixel-Streifen keine Form, und in der Leiste
* „schwimmelt" es. Deshalb jetzt:
*
* Startseite eine Bühne im Inhalt, volle Breite, 120 Pixel hoch, mit
* Titel, Sendung und den letzten Stücken darunter
* Unterseiten das Panel übernimmt, weil dort keine Bühne steht
* Leiste nur noch Titel und Schalter, keine Welle
*
* Diese Regeln stehen am Dateiende, damit keine frühere sie überstimmt —
* genau daran ist es heute zweimal gescheitert.
* ==================================================================== */
.rl-balken { display: none; }
.radioleiste .rl-name {
display: block;
max-width: none;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.radioleiste .rl-knopf { margin-left: auto; }
.radio-buehne {
position: relative;
margin: 26px 0;
padding: 20px 22px 18px;
border: 1px solid var(--line);
border-radius: 20px;
background:
radial-gradient(120% 100% at 80% 0%, rgba(224, 72, 155, .10), transparent 60%),
linear-gradient(180deg, #241031 0%, #170c1f 100%);
box-shadow: var(--shadow);
color: #f6eefb;
overflow: hidden;
}
.radio-buehne h2 { color: #fff; margin: 0 0 4px; }
.radio-buehne .rb-lede { color: rgba(246, 238, 251, .68); font-size: .9rem; margin: 0 0 16px; }
.rb-rahmen {
position: relative;
height: 120px;
border-radius: 14px;
border: 1px solid rgba(224, 72, 155, .28);
background: rgba(0, 0, 0, .28);
padding: 10px 12px;
overflow: hidden;
}
.rb-welle {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
height: 100%;
}
.rb-welle i {
display: block;
flex: 1 1 auto;
min-width: 2px;
height: 100%;
transform-origin: center center;
transform: scaleY(.04);
border-radius: 2px;
background: linear-gradient(to bottom, #f9a8d4 0%, var(--magenta) 48%, #f9a8d4 100%);
}
.rb-flach {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .78rem;
letter-spacing: .04em;
color: rgba(246, 238, 251, .55);
background: rgba(23, 12, 31, .72);
text-align: center;
padding: 0 16px;
}
.rb-text { margin-top: 14px; }
.rb-titel {
margin: 0;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 700;
font-size: 1.12rem;
color: #fff;
}
.rb-kuenstler { margin: 2px 0 0; color: rgba(246, 238, 251, .78); font-size: .95rem; }
.rb-sendung {
margin: 8px 0 0;
color: var(--rose);
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
}
.rb-vorher {
margin: 12px 0 0;
padding: 12px 0 0;
border-top: 1px solid rgba(246, 238, 251, .14);
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
font-size: .88rem;
color: rgba(246, 238, 251, .62);
}
.rb-vorher b { color: rgba(246, 238, 251, .92); font-weight: 600; }
.rb-vorher:empty { display: none; }
@media (max-width: 560px) {
.radio-buehne { padding: 16px 14px 14px; margin: 20px 0; border-radius: 16px; }
.rb-rahmen { height: 92px; }
.rb-titel { font-size: 1rem; }
}
/* Auf den Unterseiten trägt das Panel die Welle, weil dort keine Bühne steht. */
.rl-gross {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
height: 54px;
margin-bottom: 10px;
pointer-events: none;
}
.rl-gross i {
display: block;
flex: 1 1 auto;
min-width: 2px;
height: 100%;
transform-origin: center center;
transform: scaleY(.06);
border-radius: 2px;
background: linear-gradient(to bottom, #f9a8d4 0%, var(--magenta) 48%, #f9a8d4 100%);
}
.radioleiste.ohne-pegel ~ .rl-panel .rl-gross { display: none; }
/* ---------- Senderwahl ----------
Drei Kanäle, gleichrangig nebeneinander. Der laufende trägt Farbe, die
anderen bleiben ruhig. Auf schmalen Bildschirmen untereinander, damit die
Namen lesbar bleiben statt umzubrechen. */
.rb-sender,
.rl-sender {
display: flex;
gap: 8px;
margin-top: 14px;
flex-wrap: wrap;
}
.rl-sender { margin: 12px 0 0; }
.rl-sender-knopf {
flex: 1 1 auto;
min-width: 96px;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid rgba(246, 238, 251, .22);
background: rgba(255, 255, 255, .05);
color: rgba(246, 238, 251, .82);
font: inherit;
text-align: left;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.rl-sender-knopf b {
font-family: "Bricolage Grotesque", sans-serif;
font-weight: 600;
font-size: .88rem;
color: #fff;
}
.rl-sender-knopf small {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .66rem;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(246, 238, 251, .55);
}
.rl-sender-knopf:hover {
background: rgba(255, 255, 255, .10);
border-color: rgba(246, 238, 251, .38);
}
.rl-sender-knopf[aria-current="true"] {
border-color: var(--magenta);
background: linear-gradient(180deg, rgba(224, 72, 155, .28), rgba(224, 72, 155, .12));
box-shadow: 0 0 0 1px rgba(224, 72, 155, .45), 0 0 16px rgba(224, 72, 155, .25);
}
.rl-sender-knopf[aria-current="true"] small { color: var(--rose); }
.rl-sender-knopf:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
@media (max-width: 420px) {
.rb-sender, .rl-sender { flex-direction: column; }
}
/* ---------- Das Crew-Bild mit lebendiger Tagezahl ----------
Im Foto stand „IN 70 TAGEN" auf einem Holzschild, die Zahl fest eingebrannt
und damit ab dem Folgetag falsch. Zwei Versuche, sie zu überdecken, sind
verworfen: ein nachgemaltes Holzfeld führte weder Maserung noch Brettfuge
weiter, und eine aufgesetzte Klapptafel wirkte als Fremdkörper auf dem Schild.
Jetzt ist die Zahl aus dem Foto heraus. Zwischen „IN" und „TAGEN" steht
leeres Brett — wie das gerechnet wurde, steht in assets/HERKUNFT.md. An die
frei gewordene Stelle wird die echte Tagezahl gesetzt.
Alle Masse aus crew.jpg (1400 × 902) gemessen: die alte Zahl lag zwischen
x 1091 und 1237 und zwischen y 10 und 130, ihre Mitte also bei (1164 | 70).
Die Schrift im Schild fällt mit 10 Grad, gemessen am oberen Balken der 7. */
.kopfbild-crew {
position: relative;
overflow: hidden;
border-radius: 14px;
/* Damit die Schriftgrösse an der Bildbreite hängt und nicht am Fenster:
cqw unten bezieht sich auf diesen Kasten. */
container-type: inline-size;
}
figure.kopfbild-crew img { display: block; width: 100%; height: auto; border-radius: 14px; }
.tage-feld {
position: absolute;
left: 77.9%;
top: 0.2%;
width: 10.5%;
height: 13.3%;
z-index: 2; /* das Bild selbst liegt auf z-index 1 */
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-10deg);
/* Tiefe für das Wegkippen beim Ratterlauf. Flach gehalten, sonst wandert die
Zahl beim Kippen sichtbar aus dem Brett heraus. */
perspective: 320px;
/* Kein Farbfilter — mitgezogen mit `figure.kopfbild img` weiter oben, als der
dortige am 11.09.2026 entfernt wurde. Die Regel bleibt: beide Werte sind
immer gleich. Steht hier einer und dort keiner, sitzt die gesetzte Tagezahl
kräftiger im Bild als das Foto darunter und fällt als Fremdkörper auf. */
pointer-events: none;
}
.tage-feld b {
/* Wie die Schrift im Foto: sehr fett und dunkel-aubergine — #45171B im Kern
der alten Ziffern gemessen. Der weiche Schatten nimmt der gesetzten Schrift
die Härte, damit sie zum leicht unscharfen Foto passt. */
font-family: "Bricolage Grotesque", "Chonburi", sans-serif;
font-weight: 700;
font-size: 9.6cqw;
line-height: .82;
letter-spacing: -.02em;
color: #45171b;
text-shadow:
0 .6px 1.2px rgba(66, 30, 12, .45),
0 0 2px rgba(74, 34, 14, .3);
/* Der Ratterlauf beim Öffnen: bei jedem Schritt kippt die Zahl kurz um die
eigene Querachse weg, wie das Blatt einer Fallblattanzeige, und der neue
Wert steht schon da, wenn sie zurückkommt. */
transform-origin: 50% 52%;
transition: transform .07s ease-in, opacity .07s ease-in;
}
.tage-feld.kippt b {
transform: rotateX(76deg) scaleY(.78);
opacity: .5;
}
/* Wer Bewegung abgestellt hat, bekommt den Wert ohne Ratterlauf — das Skript
überspringt ihn dann ebenfalls. */
@media (prefers-reduced-motion: reduce) {
.tage-feld b { transition: none; }
.tage-feld.kippt b { transform: none; opacity: 1; }
}
/* Der Countdown oben. Er soll auffallen, ohne die Ueberschrift zu schlagen:
kraeftiger Grund in den Markenfarben, weisse Schrift, und ein Punkt davor,
der im Sekundentakt pulst. Das Blinken liegt bewusst nur auf dem Punkt und
nicht auf der Schrift — blinkender Text ist schwer zu lesen und stoert
Menschen, die darauf empfindlich reagieren. Wer Bewegung abgestellt hat,
sieht einen ruhigen Punkt. */
.countdown {
display: inline-flex;
/* Der Kopfbereich ist ein Flex-Container in Spaltenrichtung; ohne diese
Zeile zoege der Grund ueber die volle Breite statt sich um den Text zu
legen. */
align-self: flex-start;
align-items: center;
gap: 9px;
margin: 0 0 10px;
padding: 7px 15px 7px 12px;
border-radius: 999px;
background: linear-gradient(100deg, var(--safran), #d2541a);
color: #fff;
font-weight: 700;
font-size: .95rem;
letter-spacing: .01em;
box-shadow: 0 2px 10px rgba(210, 84, 26, .28);
}
.tage-lesbar { color: inherit; font-weight: inherit; }
/* Das Crew-Bild darf nicht beschnitten werden: die Holzschilder am Rand
tragen den Text, und das Feld mit der Tagezahl sitzt in Prozent der
Bildfläche. Die frühere Regel für Kopfbilder erzwang 4:3 mit `cover` —
damit wanderte das Schild aus dem Bild. */
figure.kopfbild-crew img {
aspect-ratio: 1400 / 902;
object-fit: contain;
/* Weiche Kante statt harter Schnittkante: das Bild laeuft an allen vier
Seiten auf wenigen Prozent der Flaeche aus. Zwei Verlaeufe, einer je
Richtung, per Maskenverrechnung geschnitten — sonst wuerde nur die
zuletzt genannte Richtung wirken. */
-webkit-mask-image:
linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
mask-composite: intersect;
height: auto;
max-height: none;
/* Kein Farbfilter auf diesem Bild. Am 11.09.2026 zweimal versucht und wieder
entfernt: ein globales saturate() nahm auch dem Violett und Tuerkis der
Buehne die Farbe, und eine Maske ueber den Orangeanteil traf 78 % des
Bildes statt nur die Haut. Gemessen: selbst bei der Schwelle 0,36 liegen
noch 44,5 % der Bildpunkte im warmen Bereich — Abendlicht, Holz, Sand und
Fels sind dieselbe Farbfamilie wie die Hauttoene. Ueber die Farbe allein
ist die Haut hier nicht zu trennen; das ginge nur als Retusche in der
Bilddatei, oertlich begrenzt. */
}
/* ==================================================================== *
* Die Welle wandert — Stand 10.09.2026, Wunsch des Nutzers.
*
* Titelanzeige offen die grosse Welle im Panel trägt den Pegel, dazu
* die Senderwahl; die Leiste ruht
* Titelanzeige zu die Welle sitzt wieder oben in der Leiste, die
* Senderwahl ist mit dem Panel verschwunden
*
* Die Bühne im Seiteninhalt läuft unabhängig davon weiter.
* ==================================================================== */
.rl-balken { display: flex; }
.radioleiste.panel-offen .rl-balken { display: none; }
.radioleiste.ohne-pegel .rl-balken { display: none; }
@media (max-width: 560px) {
/* Auf dem Telefon ist neben Welle und Knopf kein Platz für den Titel — der
steht ohnehin gross in der Titelanzeige und in der Bühne. Die Welle läuft
hier im Fluss zwischen Punkt und Knopf, nicht absolut in der Mitte:
zentriert stand der Knopf mitten in ihr. */
.radioleiste .rl-balken {
position: static;
left: auto;
transform: none;
width: auto;
flex: 1 1 auto;
min-width: 0;
height: 22px;
margin: 0 4px;
}
/* Der Name bleibt stehen, auch wenn die Welle läuft — nur knapp bemessen.
Vorher stand hier `display: none`, und weil der Punkt davor ein eigenes
Element ist und nicht mit ausgeblendet wurde, sass er allein am linken
Rand. Punkt und Name gehören zusammen; einer allein sieht aus wie ein
Fehler. Gemeldet am 11.09.2026.
Die Breite ist fest und nicht am Inhalt bemessen, und das ist der
eigentliche Grund für die Zahl: in der Leiste steht während der Wiedergabe
der laufende Titel, und der ist mal 70 und mal 130 Pixel breit. Mit einem
Deckel in Prozent wanderte die Kante bei jedem Liedwechsel, der
ResizeObserver schlug an und die Welle wurde neu eingeteilt — sichtbares
Zucken, mehrmals je Minute.
96 px kosten die Welle rund ein Drittel ihrer Striche. Das ist der Preis
für Punkt plus Name. Wer die Welle lieber breit hätte, setzt hier wieder
`display: none` und blendet `.rl-punkt` gleich mit aus — beide zusammen,
nie einen allein. */
.radioleiste .rl-name {
display: block;
flex: 0 0 96px; /* fest, nicht inhaltsabhängig — siehe unten */
max-width: 96px;
min-width: 0;
font-size: .78rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ist keine Welle da, darf der Name den ganzen Platz haben. */
.radioleiste.panel-offen .rl-name,
.radioleiste.ohne-pegel .rl-name {
max-width: none;
flex: 1 1 auto;
}
}
/* Die Welle in der Leiste nimmt die ganze freie Breite, nicht 38 Prozent des
Fensters. Sie lief bisher absolut zentriert, damit sie exakt in der Mitte
der Leiste sitzt — dabei blieb links neben ihr ein leeres Feld. Im Fluss
füllt sie alles zwischen Titel und Knopf. Wunsch des Nutzers, 10.09.2026. */
.radioleiste .rl-balken {
position: static;
left: auto;
right: auto;
transform: none;
width: auto;
max-width: none;
flex: 1 1 auto;
min-width: 0;
margin: 0 12px;
}
/* Der Titel bekommt nur so viel Breite, wie er braucht — die Welle daneben
soll den Rest füllen. Er hatte `flex: 1 1 auto` aus der Zeit, als in der
Leiste keine Welle stand, und schob sie damit auf ein Drittel zusammen. */
.radioleiste .rl-name {
flex: 0 1 auto;
max-width: 30%;
}
.radioleiste.panel-offen .rl-name,
.radioleiste.ohne-pegel .rl-name {
flex: 1 1 auto;
max-width: none;
}
/* Auf dem Telefon gehört die Leiste der Welle. Punkt und Name gehen zusammen
weg, sobald sie läuft.
Das ist die Entscheidung vom 11.09.2026, und sie hat zwei Anläufe gebraucht.
Zuerst war nur der Name ausgeblendet — der Punkt davor ist ein eigenes
Element und blieb stehen, also sass er allein am linken Rand und sah aus wie
ein Fehler. Dann bekam der Name einen festen Platz von 96 px daneben; damit
war der Punkt nicht mehr allein, aber die Welle schrumpfte von 58 auf 32
Striche. Am Telefon geprüft und verworfen: „man kann nur eins haben".
Also beides weg, solange gemessen wird. Steht keine Welle da — Titelanzeige
offen oder kein Pegel —, kommen beide zurück, und zwar gemeinsam. Nie einer
allein, das ist die eigentliche Regel hier.
Diese Regeln stehen bewusst HINTER der Grunddefinition darüber und nicht im
Block `max-width: 560px` weiter oben: dort standen sie zuerst und wirkten
nicht, weil die spätere Zeile `max-width: 30%` sie bei gleicher Spezifität
überschrieb. Derselbe Kaskadenfehler wie am 10.09.2026 beim Ausblenden der
Welle — Sonderregeln gehören hinter die Definition, nicht davor.
Am Rechner bleibt alles: dort steht „ThaiMorrow Radio" beziehungsweise der
laufende Titel neben der Welle, und der Platz reicht dafür. */
@media (max-width: 560px) {
.radioleiste .rl-name,
.radioleiste .rl-punkt { display: none; }
.radioleiste.panel-offen .rl-name,
.radioleiste.ohne-pegel .rl-name {
display: block;
flex: 1 1 auto;
max-width: none;
}
.radioleiste.panel-offen .rl-punkt,
.radioleiste.ohne-pegel .rl-punkt { display: block; }
}
/* Die grosse Welle im Panel lief über den Rand: 106 Striche mit je 2 Pixeln
Mindestbreite und 2 Pixeln Abstand brauchen 424 Pixel, das Panel ist 320
breit. Schmalere Striche und ein Pixel Abstand passen hinein, und der
Überlauf ist zusätzlich abgeschnitten. */
.rl-gross {
gap: 1px;
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
}
.rl-gross i { min-width: 1px; }
/* Der Hinweis über der Senderwahl war so dunkel, dass er auf dem Telefon
kaum zu lesen war. Er trägt eine Auskunft, also muss er lesbar sein. */
.rl-panel .rl-laeuft { color: rgba(246, 238, 251, .92); }
.rl-panel .rl-laeuft span { color: rgba(246, 238, 251, .62); display: block; margin-top: 2px; font-size: .86rem; }
/* Kein Fokusring auf Touchgeräten: Safari setzt ihn nach einem Tipp auf den
Knopf, und dort erscheint er als zwei feine weisse Striche neben der Pille.
Am Rechner bleibt er — dort ist er der einzige Hinweis, wo man mit der
Tastatur steht. Gemeldet am 10.09.2026, „nur beim Handy". */
@media (hover: none) {
.rl-knopf:focus-visible,
.rl-knopf:focus,
.rl-sender-knopf:focus-visible,
.rl-sender-knopf:focus { outline: none; }
}
/* Der Knopf hatte zwei feine weisse Linien: den eigenen Rand und die helle
Innenkante des Glanzes. Auf dem Telefon lagen sie einen Pixel auseinander
und wirkten wie ein Fehler. Jetzt trägt nur die Innenkante den Glanz, und
schwächer. Gemeldet am 10.09.2026. */
.rl-knopf {
border-color: transparent;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 -1px 0 rgba(0, 0, 0, .28),
0 2px 5px rgba(0, 0, 0, .32),
0 0 14px rgba(224, 72, 155, .32);
}
.radioleiste.an .rl-knopf {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 -1px 0 rgba(0, 0, 0, .28),
0 2px 5px rgba(0, 0, 0, .32),
0 0 14px rgba(10, 159, 174, .38);
}
/* Der Glanzbogen war ein eigenes Element mit eigener Kante — zusammen mit der
hellen Innenkante ergab das auf dem Telefon zwei feine weisse Striche quer
über den Knopf. Der Bogen entfällt; den Glanz trägt jetzt allein der
Farbverlauf des Hintergrunds, der keine Kante hat. Zuletzt geändert am
10.09.2026 auf mehrfache Meldung. */
.rl-knopf::before { display: none; }
.rl-knopf {
border: 0;
box-shadow:
inset 0 -1px 0 rgba(0, 0, 0, .22),
0 2px 5px rgba(0, 0, 0, .30),
0 0 14px rgba(224, 72, 155, .30);
background: linear-gradient(180deg, #fb9ad4 0%, #ec5ca6 40%, var(--magenta) 72%, #b82b74 100%);
}
.radioleiste.an .rl-knopf {
box-shadow:
inset 0 -1px 0 rgba(0, 0, 0, .22),
0 2px 5px rgba(0, 0, 0, .30),
0 0 14px rgba(10, 159, 174, .34);
background: linear-gradient(180deg, #7fe9dd 0%, #35cdc6 40%, var(--tuerkis) 72%, #067b88 100%);
}
/* Kein Strich ragt aus seinem Kasten. Am 10.09.2026 gemessen: die Reihe war
auf dem Telefon 22 Pixel breiter als das Fenster und schob die Seite nach
rechts — der Rand stand offen. Schmale Striche, ein Pixel Abstand, und
abgeschnitten wird trotzdem. */
.rl-balken, .rb-welle, .rl-gross {
overflow: hidden;
max-width: 100%;
box-sizing: border-box;
gap: 1px;
}
.rl-balken i, .rb-welle i, .rl-gross i { min-width: 1px; max-width: 6px; }
/* Die Hintergrundebenen reichten seitlich über den Rand hinaus — das Foto um
8 Pixel, das mittlere Blattwerk um 40 —, damit ihr Weichzeichner oben und
unten keine hellen Kanten zeigt. Auf dem Telefon wurde die Seite dadurch 22
Pixel breiter als das Fenster: der rechte Rand stand offen. Jetzt reichen
sie nur noch nach oben und unten hinaus.
`overflow-x: clip` auf dem Körper wäre der kürzere Weg gewesen und war ein
Fehlgriff: er machte den Körper zum Bezugsrahmen, und die feste Radioleiste
scrollte mit — gemessen bei 400 Pixeln Versatz. */
html::before { inset: -8px 0; }
.wrap::before { inset: -60px 0; }
/* ---------- Der Knopf: nur „Radio" und eine Leuchte ----------
Kleiner als vorher, und der Zustand steht in der Leuchte statt im Wort:
rot wenn aus, türkis wenn an, wie an einem Radiogerät. Wunsch des Nutzers
vom 10.09.2026. */
.rl-knopf {
gap: 7px;
padding: 5px 13px 5px 11px;
min-height: 26px;
font-size: .64rem;
letter-spacing: .12em;
border-radius: 999px;
}
.rl-wort { line-height: 1; }
.rl-led {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff9d92 0%, #e0483c 55%, #8f1f16 100%);
box-shadow: 0 0 6px rgba(224, 72, 60, .85), inset 0 0 2px rgba(0, 0, 0, .35);
transition: background .2s ease, box-shadow .2s ease;
}
.radioleiste.an .rl-led {
background: radial-gradient(circle at 35% 30%, #b6fff6 0%, #35cdc6 55%, #067b88 100%);
box-shadow: 0 0 8px rgba(53, 205, 198, .9), inset 0 0 2px rgba(0, 0, 0, .3);
}
/* Leuchte umgedreht, 10.09.2026: aus ist weiss, an ist rot. Wie an einem
Gerät, bei dem die rote Lampe brennt, solange es sendet — und der Knopf
selbst wechselt dabei ohnehin von Rosa nach Türkis. */
.rl-led {
background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f2ece4 55%, #cdc4b8 100%);
box-shadow: 0 0 5px rgba(255, 255, 255, .55), inset 0 0 2px rgba(0, 0, 0, .28);
}
.radioleiste.an .rl-led {
background: radial-gradient(circle at 35% 30%, #ffb3a6 0%, #ef2f22 52%, #8f1109 100%);
box-shadow: 0 0 9px rgba(239, 47, 34, .95), 0 0 3px rgba(255, 120, 100, .9), inset 0 0 2px rgba(0, 0, 0, .35);
}
/* ---------- Zeichen: Riesentukan ----------
Kein thailändischer Vogel — Tukane leben in Südamerika —, aber die
Silhouette mit dem übergroßen Schnabel trägt weiter und ist auch klein
sofort erkennbar. Türkis bleibt der Grund.
Am 11.09.2026 war hier kurz ein Chamäleon; der Nutzer hat es verworfen.
Dabei aufgeräumt: vorher lagen vier Generationen dieses Zeichens
übereinander — Globus, Nashornvogel, Nashornvogel in Türkis, Tukan —, von
denen jede die vorige nur überschrieb. Geblieben ist dieser eine Block, und
er trägt die Werte, die zuletzt wirklich gewirkt haben. */
a.marke svg { width: 50px; height: 50px; }
/* Diese Farben gelten fuer die Marke an jeder Stelle, an der sie auftaucht:
im Seitenkopf und seit dem 11.09.2026 auf dem Steuerruder der Flugzeuge im
Reiseweg. Deshalb steht `.marke-voll` in jeder Zeile daneben und nicht als
eigener Block darunter — ein Vogel, eine Farbdefinition. Wer hier etwas
aendert, aendert beide Stellen. */
a.marke .m-grund, .marke-voll .m-grund { fill: var(--tuerkis); }
a.marke:hover .m-grund { fill: var(--accent); }
a.marke .m-koerper, a.marke .m-kopf,
.marke-voll .m-koerper, .marke-voll .m-kopf { fill: #17131c; }
a.marke .m-schwanz, .marke-voll .m-schwanz { fill: #0e2a20; }
a.marke .m-kehle, .marke-voll .m-kehle { fill: #fdfaf0; }
a.marke .m-schnabel, .marke-voll .m-schnabel { fill: #f08a1e; }
a.marke .m-schnabelspitze, .marke-voll .m-schnabelspitze { fill: #17131c; }
a.marke .m-schnabelkante, .marke-voll .m-schnabelkante { fill: none; stroke: #c9611a; stroke-width: 1.1; opacity: .75; }
a.marke .m-augenring, .marke-voll .m-augenring { fill: #5fd6d0; }
a.marke .m-auge, .marke-voll .m-auge { fill: #17131c; }
a.marke .m-pupille, .marke-voll .m-pupille { fill: #fdfaf0; }
@media (max-width: 560px) { a.marke svg { width: 40px; height: 40px; } }
/* ==================================================================== *
* Zwei Zonen: Dschungel und Tomorrowland — Stand 11.09.2026.
*
* Die Seite hat zwei Farbwelten, nicht eine. Der helle Dschungelteil
* traegt die Reise: Route, Unterkuenfte, Termine, Fluege. Der dunkle
* Festivalteil traegt alles, was zum Festival gehoert: Musik, Radio,
* Tickets. Der Wechsel ist beabsichtigt sichtbar und wird zur Ordnung —
* an der Farbe erkennt man, worum es gerade geht.
*
* Umgesetzt ueber die vorhandenen Farbvariablen: innerhalb von
* `.zone-fest` werden sie umdefiniert, statt jede einzelne Regel ein
* zweites Mal zu schreiben. Damit ziehen alle verschachtelten Bausteine
* automatisch mit und es entsteht keine zweite Wahrheit.
*
* Warum Magenta und Violett erst hier wirken: auf dem cremefarbenen
* Grund sahen sie fremd aus, gemessen und verworfen am selben Tag. Auf
* dunklem Grund sind sie die Farben, die das Kopfbild ohnehin traegt.
* ==================================================================== */
.zone-fest {
--ground: var(--nacht);
--card: #32163f;
--card-2: #3d1b4c;
--ink: #f6ecfa;
--ink-soft: #d6bce2;
--ink-faint: #a488b4;
--line: #4b2459;
--line-soft: #3a1b47;
--accent: var(--magenta);
--accent-soft: #4a1f5c;
--amber: #f090c8;
--amber-soft: #45204f;
--safran: var(--magenta);
position: relative;
isolation: isolate;
color: var(--ink);
background: linear-gradient(160deg, var(--nacht) 0%, var(--nacht-2) 58%, #5b2168 100%);
border-radius: 18px;
padding: 20px 22px 24px;
}
/* Der weiche Creme-Schleier, der im hellen Teil die Lesbarkeit sichert,
wuerde hier als heller Fleck ueber dem dunklen Grund liegen. */
.zone-fest::before { content: none; }
.zone-fest h2,
.zone-fest h3 { color: var(--ink); }
.zone-fest a { color: var(--magenta); }
/* Die Zonenmarke: sagt in einem Wort, in welcher Welt man sich befindet. */
.zone-fest .zone-titel {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
color: #e7a9dc;
margin: 0 0 10px;
}
/* ==================================================================== *
* Der Gruss in der Ueberschrift wechselt — Stand 11.09.2026.
*
* Zwei Aenderungen auf einmal, beide auf Wunsch des Nutzers:
*
* 1. Der Markenname traegt in der Ueberschrift dieselbe Schrift wie im
* Logo. Vorher stand dort Bricolage Grotesque und im Logo Chonburi —
* dasselbe Wort sah an zwei Stellen verschieden aus.
*
* 2. Die Anrede wechselt zwischen "Welcome to" und dem thailaendischen
* "สวัสดี". Der Wechsel laeuft langsam und mit Ueberblendung; wer
* Bewegung abgestellt hat, sieht dauerhaft die englische Fassung.
* Die Breite ist nicht festgezurrt, deshalb ruecken die Portraits
* beim Wechsel etwas — das ist gewollt und ruhiger als ein starrer
* Kasten, der bei der laengeren Fassung Luft stehen laesst.
* ==================================================================== */
h1 { perspective: 620px; }
h1 .marke-wort {
font-family: "Chonburi", "Bricolage Grotesque", serif;
font-weight: 400;
letter-spacing: 0;
}
h1 .gruss {
/* Beide Fassungen tragen dieselbe Farbe. Dadurch liest sich der Wechsel
als ein Element, das die Sprache tauscht — nicht als zwei verschiedene
Dinge, von denen eines hervorgehoben ist. */
color: var(--tuerkis);
/* Die Perspektive gehoert auf den Elternteil, sonst kippen die Zeichen
flach statt raeumlich. 420px ist nah genug fuer sichtbare Tiefe und weit
genug, dass die Raender nicht verzerren. */
display: inline-block;
}
/* Ein Zeichen der Welle. Der Versatz `--nr` kommt aus dem Skript und macht
aus gleichzeitigem Kippen ein Nacheinander. */
h1 .z {
display: inline-block;
font-weight: inherit;
transform-origin: 50% 60%;
transition:
transform .56s cubic-bezier(.22, .68, .28, 1),
opacity .56s ease;
transition-delay: calc(var(--nr, 0) * 70ms);
}
h1.weg .z {
transform: rotateX(-92deg) translateY(-.06em);
opacity: 0;
}
/* Thailändisch braucht die Schrift mit den Ober- und Unterzeichen. */
h1 .gruss.thai {
font-family: "Mitr", "Chonburi", sans-serif;
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
h1 .gruss { transition: none; }
}