/* Lord Number - the club stage as frame, the record crate for the setlist (docs/KONZEPT.md, 9).
   The site is dark on purpose: it is a stage. Only the crate is paper. */

@font-face {
    font-family: "LN Plakat";
    src: url("../fonts/noto-sans-condensed-black.ttf") format("truetype");
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "LN Fett";
    src: url("../fonts/noto-sans-condensed-bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "LN Platte";
    src: url("../fonts/noto-serif-condensed-black-italic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --nacht: #0b0707;
    --wand: #160d0c;
    --tinte: #f4eee4;
    --gedimmt: #b8a999;
    --rot: #d32f3f;
    --rot-tief: #a51f2e;
    --amber: #f2a541;
    --magenta: #e0409a;
    --neon: #ff4fa8;
    --neon-schein: #ff1f7a;
    --neon-roehre: #ffa3d2;
    --papier: #efe3c8;
    --papier-tinte: #2a1d15;
    --holz-hell: #a66d3f;
    --holz-dunkel: #6f4223;

    --schrift-plakat: "LN Plakat", "Arial Narrow", "Helvetica Neue", sans-serif;
    --schrift-fett: "LN Fett", "Arial Narrow", "Helvetica Neue", sans-serif;
    --schrift-platte: "LN Platte", Georgia, "Times New Roman", serif;
    --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --rand: clamp(1rem, 4vw, 2.5rem);
    --breit: 72rem;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--nacht);
    color: var(--tinte);
    font: 1.0625rem/1.6 var(--schrift-text);
    overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--amber);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-family: var(--schrift-plakat);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h2 { font-size: clamp(2rem, 5vw, 3.2rem); }

p { margin: 0 0 1em; }

.sprung {
    position: absolute;
    left: -999px;
    top: .5rem;
    z-index: 100;
    background: var(--amber);
    color: #000;
    padding: .5rem 1rem;
}
.sprung:focus { left: .5rem; }

.entwurf {
    margin: 0;
    padding: .35rem var(--rand);
    background: #f2c14e;
    color: #1b1412;
    font: .78rem/1.3 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}

/* ---------------------------------------------------------------- header */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem var(--rand);
    background: rgba(11, 7, 7, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.kopf-logo { display: block; flex: none; }
.kopf-logo img { display: block; height: 42px; width: auto; }

.nav {
    display: flex;
    align-items: center;
    gap: clamp(.8rem, 2vw, 1.6rem);
}

.nav a {
    font: .95rem/1 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tinte);
    padding: .45rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .2s, color .2s;
}
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--neon); }

.nav .backstage, .fuss-nav a:last-child {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.nav .backstage {
    color: var(--gedimmt);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: .45rem .85rem;
}
.nav .backstage:hover { color: var(--tinte); border-color: var(--neon); }

.symbol { flex: none; }

.nav-breit { display: none; }

.nav-schmal summary {
    list-style: none;
    cursor: pointer;
    font: .95rem/1 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .6rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
}
.nav-schmal summary::-webkit-details-marker { display: none; }
.nav-schmal[open] summary { border-color: var(--neon); }
.nav-schmal .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--rand) 1.2rem;
    background: rgba(11, 7, 7, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-schmal .nav a { padding: .9rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.nav-schmal .nav .backstage { margin-top: .8rem; align-self: flex-start; }

@media (min-width: 62rem) {
    .nav-breit { display: flex; }
    .nav-schmal { display: none; }
}

/* ---------------------------------------------------------------- the stage */

.buehne {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(4.5rem, 10svh, 7rem);
    background: var(--wand);
    /* The figures' height sets the stage: it fits the first screen on a laptop and a phone. */
    --figur: clamp(7.5rem, min(36svh, 26vw), 22rem);
}

.buehne-wand {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 45% at 50% 30%, rgba(255, 40, 130, .22), transparent 70%),
        radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(6, 3, 3, .9) 80%),
        linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .8)),
        url("../img/ziegel.svg") center top / 160px 80px;
}
.buehne-wand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/korn.svg") 0 0 / 240px 240px;
    opacity: .35;
    mix-blend-mode: overlay;
}

/* Four spots on the truss, and their cones */
.buehne-lampen span, .buehne-kegel span {
    position: absolute;
    top: 0;
}
.buehne-lampen span:nth-child(1), .buehne-kegel span:nth-child(1) { left: 12%; --farbe: 255, 70, 70; }
.buehne-lampen span:nth-child(2), .buehne-kegel span:nth-child(2) { left: 37%; --farbe: 255, 176, 92; }
.buehne-lampen span:nth-child(3), .buehne-kegel span:nth-child(3) { left: 63%; --farbe: 230, 70, 160; }
.buehne-lampen span:nth-child(4), .buehne-kegel span:nth-child(4) { left: 88%; --farbe: 255, 176, 92; }

.buehne-lampen::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 8px;
    background: linear-gradient(#3a3a3e, #1c1c1f);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.buehne-lampen span {
    width: 44px;
    height: 40px;
    margin-left: -22px;
    top: 8px;
    border-radius: 6px 6px 14px 14px;
    background: linear-gradient(#2c2c30, #111113);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .6);
}
.buehne-lampen span::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -3px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(rgb(var(--farbe)), rgba(var(--farbe), .2) 70%);
    box-shadow: 0 0 18px 6px rgba(var(--farbe), .55);
}

.buehne-kegel span {
    top: 44px;
    width: clamp(14rem, 34vw, 30rem);
    height: 100%;
    transform: translateX(-50%);
    clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
    background: linear-gradient(to bottom, rgba(var(--farbe), .30), rgba(var(--farbe), .08) 55%, transparent 85%);
    mix-blend-mode: screen;
    filter: blur(4px);
}
.buehne-kegel span:nth-child(1) { transform: translateX(-50%) rotate(-9deg); transform-origin: 50% 0; }
.buehne-kegel span:nth-child(4) { transform: translateX(-50%) rotate(9deg); transform-origin: 50% 0; }

/* The neon sign on the back wall */
.buehne-schild {
    position: relative;
    z-index: 1;
    width: min(48rem, 84vw);
}

/* with the plug the sign is a quarter wider; the letters keep their size */
.buehne-schild-stecker { width: min(60rem, 94vw); }

.neon { display: block; width: 100%; height: auto; overflow: visible; }
.neon use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.neon-aus use { stroke: #3d2b31; stroke-width: 10; }
.neon-weit { stroke: var(--neon-schein); stroke-width: 24; opacity: .85; }
.neon-nah { stroke: var(--neon); stroke-width: 14; }
.neon-roehre { stroke: var(--neon-roehre); stroke-width: 9; }
.neon-kern { stroke: #fff7fb; stroke-width: 3.5; }
/* the plug glows in a second colour, as real signs mix their tubes */
.neon-stecker .neon-weit { stroke: #ff8a1f; }
.neon-stecker .neon-nah { stroke: #ffa53a; }
.neon-stecker .neon-roehre { stroke: #ffd08a; }
.neon-stecker .neon-kern { stroke: #fff6e6; }

.neon-an { animation: einschalten 2.4s steps(1, end) .3s both; }
.neon-flacker { animation: flackern 11s 3s infinite; }

@keyframes einschalten {
    0% { opacity: 0; }
    10% { opacity: 1; }
    14% { opacity: .1; }
    20% { opacity: 1; }
    24% { opacity: .25; }
    30%, 100% { opacity: 1; }
}
@keyframes flackern {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: .15; }
    94% { opacity: 1; }
    95.5% { opacity: .1; }
    96.5% { opacity: 1; }
}

/* The band on the floor */
.buehne-band {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    list-style: none;
    /* the heads reach into the glow below the sign's line, not into the letters */
    margin: calc(var(--figur) * -.16) 0 0;
    padding: 0 2vw 1.4rem;
}

.figur { position: relative; z-index: 1; flex: none; }
.figur + .figur { margin-left: calc(var(--figur) * -.12); }
/* Thorben a little in front; and room between him and Voss, where the drums sit behind them */
.figur-thorben { z-index: 2; }
.figur + .figur-thorben { margin-left: calc(var(--figur) * .24); }

.figur a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.figur img {
    display: block;
    height: var(--figur);
    width: auto;
    filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .65)) brightness(.92);
    transition: transform .3s ease, filter .3s ease;
}
.figur-thorben img { height: calc(var(--figur) * 1.05); }
/* The drummer sits at the back, in the middle between the second and the third in front: higher
   up the stage and smaller, so his head matches the others' (Matthias, 08.10.2026). */
.figur.figur-hinten {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: calc(1.4rem + var(--figur) * .27);
    margin-left: 0;
    transform: translateX(-50%);
}
.figur-hinten img { height: calc(var(--figur) * .8); }
/* the riser he sits on; its top edge also covers where the picture ends below */
.figur-hinten::after {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: calc(var(--figur) * -.08);
    height: calc(var(--figur) * .11);
    border-top: 3px solid rgba(255, 190, 120, .55);
    background: linear-gradient(#5a3d33, #2a1a16 30%, #120a09);
    box-shadow: 0 10px 18px rgba(0, 0, 0, .55);
    pointer-events: none;
}
.figur-hinten .figur-band { display: none; }
.figur-schild-hinten {
    position: absolute;
    z-index: 3;
    left: 50%;
    /* on the riser's front - on a phone, where the figures are small, above the names in front */
    bottom: max(3rem, calc(1.4rem + var(--figur) * .2));
    transform: translateX(-50%);
}
.figur-schild-hinten a { text-decoration: none; }
/* a figure whose background is not cut out yet fades at its edges; no shadow round the box */
.figur-ungeschnitten img { filter: brightness(.92); }

.figur a:hover img, .figur a:focus-visible img {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 22px rgba(255, 190, 120, .45)) drop-shadow(0 22px 14px rgba(0, 0, 0, .6)) brightness(1.08);
}

/* Gaffer tape on the floor, with the name in marker */
.figur-band {
    margin-top: .5rem;
    padding: .3rem .55rem .25rem;
    background: linear-gradient(#e4ddcd, #cfc6b3);
    color: #1d1512;
    font: .78rem/1 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-2deg);
    clip-path: polygon(2% 8%, 98% 0, 100% 92%, 1% 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
.figur:nth-child(even) .figur-band { transform: rotate(1.5deg); }
.figur-band strong { font-family: var(--schrift-plakat); }
.figur-band span { display: none; }
@media (max-width: 30rem) {
    .figur-band { font-size: .68rem; padding: .25rem .4rem .2rem; }
}

@media (min-width: 48rem) {
    .figur-band span { display: inline; opacity: .7; }
}

.buehne-boden {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--figur) * .16 + 3.2rem);
    background:
        radial-gradient(ellipse 18% 70% at 12% 10%, rgba(255, 70, 70, .22), transparent 70%),
        radial-gradient(ellipse 18% 70% at 37% 10%, rgba(255, 176, 92, .22), transparent 70%),
        radial-gradient(ellipse 18% 70% at 63% 10%, rgba(230, 70, 160, .22), transparent 70%),
        radial-gradient(ellipse 18% 70% at 88% 10%, rgba(255, 176, 92, .2), transparent 70%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 9rem),
        linear-gradient(#3b2418, #120a07);
    border-top: 3px solid #5d3c26;
    box-shadow: inset 0 14px 24px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------- motto */

.motto {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) 0;
    text-align: center;
    background: linear-gradient(#120a07, var(--nacht));
}
.motto h1 {
    font-size: clamp(2.8rem, 9vw, 7rem);
    line-height: .9;
    margin-bottom: .35em;
}
.motto-klein {
    display: block;
    font: italic 900 .42em/1.1 var(--schrift-platte);
    text-transform: none;
    color: var(--neon-roehre);
    letter-spacing: .02em;
}
.motto p {
    margin: 0 auto;
    max-width: 40rem;
    text-wrap: balance;
    color: var(--gedimmt);
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

/* ---------------------------------------------------------------- sections */

.abschnitt {
    max-width: var(--breit);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--rand);
}

.knopf {
    display: inline-block;
    padding: .8rem 1.35rem .75rem;
    background: var(--rot);
    color: #fff;
    font: 1rem/1 var(--schrift-plakat);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(211, 47, 63, .3);
    transition: background .2s, transform .2s;
}
.knopf:hover { background: var(--rot-tief); transform: translateY(-1px); }
.knopf-dunkel { background: var(--papier-tinte); box-shadow: none; }
.knopf-dunkel:hover { background: #000; }

/* Mainstream + ticket */
.mainstream-gig {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
}
@media (min-width: 56rem) {
    .mainstream-gig { grid-template-columns: 1.25fr 1fr; }
}

.mainstream h2 em {
    display: block;
    font: italic 900 1em/1 var(--schrift-platte);
    text-transform: none;
    color: var(--rot);
}
.mainstream > p { max-width: 36rem; color: #e6dccd; text-wrap: pretty; }

.handzettel {
    position: relative;
    margin: 2rem 0 0;
    max-width: 30rem;
    padding: 1.4rem 1.5rem 1rem;
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    transform: rotate(-1.5deg);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
.handzettel::before, .handzettel::after {
    content: "";
    position: absolute;
    top: -.7rem;
    width: 4.5rem;
    height: 1.5rem;
    background: rgba(230, 222, 200, .75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.handzettel::before { left: -1rem; transform: rotate(-24deg); }
.handzettel::after { right: -1rem; transform: rotate(18deg); }
.handzettel blockquote {
    margin: 0 0 .8rem;
    font: 700 1.15rem/1.4 var(--schrift-text);
}
.handzettel figcaption {
    font: .8rem/1.2 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

/* The ticket for the next gig */
.ticket {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3rem;
    max-width: 25rem;
    justify-self: center;
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    border-radius: 10px;
    transform: rotate(2deg);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .55);
}
.ticket::before, .ticket::after {
    content: "";
    position: absolute;
    right: calc(3rem - 11px);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nacht);
}
.ticket::before { top: -11px; }
.ticket::after { bottom: -11px; }

.ticket-haupt { padding: 1.5rem 1.6rem 1.6rem; }
.ticket-zeile {
    margin: 0 0 .3rem;
    font: .85rem/1 var(--schrift-plakat);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rot);
}
.ticket-datum {
    margin: 0;
    font: 900 clamp(2.4rem, 6vw, 3.1rem)/1 var(--schrift-plakat);
}
.ticket-tag { color: var(--rot); }
.ticket-ort { margin: .6rem 0 .2rem; font-size: 1.15rem; }
.ticket-zeit { margin: 0 0 1.2rem; font-size: .95rem; opacity: .8; }

.ticket-abriss {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 2px dashed rgba(42, 29, 21, .35);
    writing-mode: vertical-rl;
    font: .78rem/1 var(--schrift-plakat);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rot);
}

/* ---------------------------------------------------------------- the record crate */

.kiste-bereich {
    position: relative;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    --platte: clamp(9.5rem, 13vw, 11.5rem);
}
/* the paper's edge, torn */
.kiste-bereich::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 12px;
    background: var(--papier);
    clip-path: polygon(0 60%, 4% 20%, 9% 70%, 14% 30%, 19% 80%, 25% 25%, 31% 65%, 36% 15%, 42% 70%, 48% 35%, 53% 85%, 59% 20%, 65% 60%, 70% 25%, 76% 75%, 82% 30%, 88% 70%, 93% 20%, 97% 60%, 100% 30%, 100% 100%, 0 100%);
}

.kiste-kopf {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 var(--rand);
    text-align: center;
}
.kiste-kopf h2 {
    font: italic 900 clamp(2.6rem, 7vw, 4.6rem)/1 var(--schrift-platte);
    text-transform: none;
    color: #b6402b;
    margin-bottom: .3em;
}
.kiste-kopf p { font-size: 1.1rem; }

.kiste {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    margin-top: 1rem;
    padding: calc(var(--platte) * .55) var(--rand) 1.5rem;
}
.kiste-innen {
    position: relative;
    width: max-content;
    margin: 0 auto;
    padding: 0 2.2rem;
}

.kiste-platten {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.platte {
    position: relative;
    flex: none;
    width: var(--platte);
    aspect-ratio: 1;
    transform: translateY(calc(var(--tief, 0px) + var(--hoch, 0px))) rotate(var(--kipp, 0deg));
    transition: transform .35s cubic-bezier(.2, .8, .3, 1.2);
}
.platte + .platte { margin-left: calc(var(--platte) * -.06); }
.platte:nth-child(3n+1) { --kipp: -3deg; --tief: 6px; }
.platte:nth-child(3n+2) { --kipp: 2deg; --tief: -4px; }
.platte:nth-child(3n) { --kipp: -1deg; --tief: 10px; }
.platte:nth-child(4n) { --tief: 0px; }
.platte:hover, .platte:focus-within { --hoch: calc(var(--platte) * -.5); --kipp: 0deg; z-index: 3; }

/* ---------------------------------------------------------------- record sleeves */
/* One sleeve per song, the same on the start page and on the setlist page: eight patterns
   (stil-1..8) in eight colourings (farbe-1..8), picked by Song.Huelle. */

.huelle {
    --grund: #c4512a;
    --f1: #f2c14e;
    --f2: #8a2f22;
    --f3: #efe3c8;
    --schrift: #fff8ec;
    --schatten: rgba(0, 0, 0, .35);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--grund);
    color: var(--schrift);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 0 40px rgba(0, 0, 0, .3);
}
/* halftone dots and a worn ring from the record inside */
.huelle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(0, 0, 0, .3) 1px, transparent 1.7px) 0 0 / 6px 6px;
    mix-blend-mode: multiply;
    opacity: .55;
}
.huelle::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .08);
}

.huelle-titel {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    padding: .6rem 1rem 1rem .7rem;
    background: linear-gradient(color-mix(in srgb, var(--grund) 90%, transparent) 55%, transparent);
    font: italic 900 clamp(1rem, 1.7vw, 1.3rem)/1.02 var(--schrift-platte);
    text-align: left;
    text-shadow: 0 2px 0 var(--schatten);
}
/* the artist of the recording - never "wie ..." (Song.Nach) */
.huelle-kuenstler {
    position: absolute;
    z-index: 1;
    left: .7rem;
    top: 33%;
    max-width: calc(100% - 1.6rem);
    padding: .2rem .4rem;
    background: rgba(20, 10, 6, .6);
    /* long band names take a second line instead of being cut off */
    text-wrap: balance;
    color: #fff8ec;
    font: .68rem/1.2 var(--schrift-fett);
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* the price sticker with the original; in the crate it hides below the board until pulled */
.huelle-preis {
    position: absolute;
    z-index: 1;
    right: .5rem;
    bottom: .4rem;
    display: grid;
    place-items: center;
    align-content: center;
    width: min(4.6rem, 40%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff1b8;
    color: #2a1d15;
    text-align: center;
    font: .72rem/1.15 var(--schrift-text);
    transform: rotate(10deg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.huelle-preis span { font: .6rem/1 var(--schrift-fett); letter-spacing: .1em; text-transform: uppercase; color: var(--rot); }
.huelle-preis strong { font: .78rem/1.05 var(--schrift-fett); }

/* eight colourings of the seventies; the last two are light and take dark ink */
.farbe-1 { --grund: #c4512a; --f1: #f2c14e; --f2: #8a2f22; --f3: #efe3c8; }
.farbe-2 { --grund: #2f6f73; --f1: #e9d8a6; --f2: #d97c2b; --f3: #183c3e; }
.farbe-3 { --grund: #7e2a24; --f1: #efe3c8; --f2: #d32f3f; --f3: #f2c14e; }
.farbe-4 { --grund: #4d5a2a; --f1: #f2c14e; --f2: #e07a2f; --f3: #b6402b; }
.farbe-5 { --grund: #6b3a5b; --f1: #a8628f; --f2: #f2c14e; --f3: #e07a2f; }
.farbe-6 { --grund: #1f2a3a; --f1: #f2c14e; --f2: #e07a2f; --f3: #b6402b; }
.farbe-7 { --grund: #e0a43a; --f1: #b6402b; --f2: #6f4223; --f3: #f6e7c4; --schrift: #2a1d15; --schatten: rgba(255, 255, 255, .35); }
.farbe-8 { --grund: #e8dcc0; --f1: #2f6f73; --f2: #c4512a; --f3: #f2c14e; --schrift: #2a1d15; --schatten: rgba(255, 255, 255, .45); }

/* eight patterns */
.stil-1 { background-image: radial-gradient(circle at 30% 72%, var(--f1) 0 16%, transparent 16.5%), repeating-radial-gradient(circle at 30% 72%, var(--grund) 0 9px, var(--f2) 9px 18px); }
.stil-2 { background-image: repeating-linear-gradient(135deg, var(--grund) 0 18px, var(--f1) 18px 25px, var(--grund) 25px 43px, var(--f2) 43px 50px); }
.stil-3 { background-image: radial-gradient(circle at 72% 70%, var(--f3) 0 26%, transparent 26.5%), radial-gradient(circle at 72% 70%, var(--f2) 0 34%, transparent 34.5%); }
.stil-4 { background-image: radial-gradient(circle at 50% 125%, transparent 0 32%, var(--f3) 32% 40%, var(--f1) 40% 48%, var(--f2) 48% 56%, var(--f3) 56% 60%, transparent 60%); }
.stil-5 { background-image: repeating-conic-gradient(from 0deg at 50% 62%, var(--grund) 0 9deg, color-mix(in srgb, var(--f1) 45%, var(--grund)) 9deg 18deg); }
.stil-6 { background-image: linear-gradient(transparent 50%, var(--f1) 50% 58%, var(--f2) 58% 66%, var(--f3) 66% 74%, transparent 74%); }
.stil-7 { background-image: conic-gradient(from 45deg at 50% 58%, var(--f2) 0 25%, var(--f1) 0 50%, var(--grund) 0 75%, var(--f3) 0); }
.stil-8 { background-image: radial-gradient(circle, var(--f1) 0 26%, transparent 28%); background-size: 33.4% 33.4%; background-position: 16.7% 16.7%; }

/* the crate's front board covers the lower half of the records */
.kiste-front {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: -1.1rem;
    height: calc(var(--platte) * .6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px 5px 3px 3px;
    background:
        url("../img/korn.svg") 0 0 / 240px 240px,
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 1.7rem),
        linear-gradient(var(--holz-hell), var(--holz-dunkel));
    box-shadow: 0 16px 26px rgba(42, 29, 21, .35), inset 0 2px 0 rgba(255, 255, 255, .18);
    pointer-events: none;
}
.kiste-front::before {
    content: "";
    position: absolute;
    top: 14%;
    left: 50%;
    width: 22%;
    max-width: 8rem;
    height: 18%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #2b190d;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .6);
}
.kiste-front span {
    margin-top: 1.4rem;
    font: clamp(.9rem, 1.6vw, 1.15rem)/1 var(--schrift-plakat);
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(30, 14, 4, .55);
}

/* between phone and wide screen, six records fit the crate; the seventh would make it scroll */
@media (min-width: 40rem) and (max-width: 74rem) {
    .platte:nth-child(n+7) { display: none; }
}

.kiste-mehr { margin: 2.2rem 0 0; text-align: center; }

/* ---------------------------------------------------------------- guest book */

.gaeste { text-align: center; }
.gaeste-liste {
    display: grid;
    gap: 1.8rem;
    list-style: none;
    margin: 2rem 0 2.5rem;
    padding: 0;
    text-align: left;
}
@media (min-width: 52rem) {
    .gaeste-liste { grid-template-columns: repeat(3, 1fr); }
}

.zettel {
    position: relative;
    padding: 1.6rem 1.3rem 1.1rem;
    background:
        repeating-linear-gradient(transparent 0 1.55rem, rgba(60, 90, 140, .18) 1.55rem calc(1.55rem + 1px)),
        #f6eedb;
    color: #2a1d15;
    transform: rotate(var(--kipp, -1.2deg));
    box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.zettel:nth-child(3n+2) { --kipp: 1.4deg; }
.zettel:nth-child(3n) { --kipp: -.6deg; }
/* the pin */
.zettel::before {
    content: "";
    position: absolute;
    top: -.55rem;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: -.55rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff6a6a, var(--rot-tief) 70%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .45);
}
.zettel blockquote {
    margin: 0 0 .9rem;
    font: italic 1.1rem/1.55rem Georgia, "Times New Roman", serif;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.zettel-wer { margin: 0; font: .85rem/1.3 var(--schrift-fett); letter-spacing: .04em; overflow-wrap: anywhere; }
.zettel-wer span, .zettel-wer time { display: block; opacity: .65; }

/* the band's reply, taped below the note */
.zettel-antwort {
    position: relative;
    margin: 1.1rem -.4rem 0 1.2rem;
    padding: .8rem .9rem .7rem;
    background: #fff7c2;
    transform: rotate(1.2deg);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
}
.zettel-antwort::before {
    content: "";
    position: absolute;
    top: -.55rem;
    left: 1.2rem;
    width: 3.2rem;
    height: 1rem;
    background: rgba(230, 222, 200, .8);
    transform: rotate(-4deg);
}
.zettel-antwort p { margin: 0; font-size: .95rem; line-height: 1.4; white-space: pre-line; }
.zettel-antwort .zettel-antwort-wer {
    margin-bottom: .2rem;
    color: var(--rot-tief);
    font: .72rem/1.2 var(--schrift-plakat);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gb-leer {
    margin: 2rem auto;
    color: var(--gedimmt);
    font: italic 900 1.3rem/1.3 var(--schrift-platte);
    text-align: center;
}

/* the guest book page: the form on paper, the notes on the wall */
.gb-kopf {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--rand) 1.5rem;
    text-align: center;
}
.gb-kopf h1 { margin-bottom: .35em; font-size: clamp(3rem, 9vw, 5.5rem); }
.gb-kopf p { color: #e6dccd; font-size: 1.1rem; text-wrap: pretty; }

.gb {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
    max-width: var(--breit);
    margin: 0 auto;
    padding: 1rem var(--rand) clamp(3.5rem, 8vw, 5.5rem);
}
@media (min-width: 60rem) {
    .gb { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); }
    .gb-formular { position: sticky; top: 5.5rem; }
}

.gb-formular {
    padding: 1.6rem 1.5rem 1.4rem;
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    scroll-margin-top: 5.5rem;
}
.gb-formular h2 {
    margin-bottom: .8rem;
    font: italic 900 2rem/1 var(--schrift-platte);
    text-transform: none;
    color: #b6402b;
}

.feld { margin-bottom: 1rem; }
.feld label {
    display: block;
    margin-bottom: .3rem;
    font: .82rem/1.2 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.feld label span { margin-left: .3rem; font-family: var(--schrift-text); letter-spacing: 0; text-transform: none; opacity: .6; }
/* The fields sit on paper: light controls, also where the browser draws them itself (the open
   list of a select, the calendar icon of a date) - the page as a whole is dark. */
.feld { color-scheme: light; }
.feld input, .feld select, .feld textarea {
    display: block;
    width: 100%;
    padding: .65rem .75rem;
    border: 2px solid rgba(42, 29, 21, .35);
    border-radius: 3px;
    background: #fffaf0;
    color: var(--papier-tinte);
    font: 1rem/1.45 var(--schrift-text);
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--amber); outline-offset: 1px; border-color: var(--papier-tinte); }
.feld input::placeholder { color: rgba(42, 29, 21, .45); }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--rot); }
.feld-meldung { margin: .35rem 0 0; color: var(--rot-tief); font-size: .9rem; font-weight: 600; }
.feld-hilfe { margin: .35rem 0 0; font-size: .85rem; opacity: .65; }

.gb-zeile { display: grid; gap: 0 1rem; }
@media (min-width: 26rem) {
    .gb-zeile { grid-template-columns: 1fr 1fr; }
}

/* the trap for bots: out of sight, but not display:none, which some bots skip */
.falle {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gb-formular .knopf { margin-top: .3rem; border: 0; cursor: pointer; }
.gb-datenschutz { margin: 1.1rem 0 0; font-size: .85rem; line-height: 1.45; opacity: .75; }
.gb-danke, .gb-hinweis {
    margin: 0 0 1.2rem;
    padding: .8rem 1rem;
    border-radius: 3px;
    font-size: .98rem;
}
.gb-danke { background: #e0edd0; border-left: 5px solid #4d7a2a; }
.gb-hinweis { background: #f9dcd5; border-left: 5px solid var(--rot); }

/* a grid, not CSS columns: a column break tore the pins off the notes */
.gb-zettel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
    align-items: start;
    gap: 2.4rem 2rem;
    margin: 0 0 2.4rem;
    padding: .6rem 0 0;
    list-style: none;
}
.gb-seiten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1rem;
    color: var(--gedimmt);
}
.gb-seiten a { color: var(--tinte); font: 1rem/1 var(--schrift-fett); letter-spacing: .06em; text-transform: uppercase; }

.unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- the setlist page */
/* All records spread out on paper; a click turns one over (setlist.js), without script the
   focus does. The back says where the song comes from - modestly: "Unsere Vorlage". */

.papier main {
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
}

.regal-kopf {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--rand) 1.5rem;
    text-align: center;
}
.regal-kopf h1 {
    margin-bottom: .35em;
    font: italic 900 clamp(2.8rem, 8vw, 5rem)/1 var(--schrift-platte);
    text-transform: none;
    color: #b6402b;
}
.regal-kopf p { font-size: 1.1rem; text-wrap: pretty; }

.regal-filter {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .6rem;
}
.regal-filter[hidden] { display: none; }
.regal-filter button {
    padding: .6rem .95rem;
    border: 2px solid var(--papier-tinte);
    border-radius: 999px;
    background: transparent;
    color: var(--papier-tinte);
    font: .9rem/1 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.regal-filter button span { margin-left: .25rem; opacity: .6; }
.regal-filter button[aria-pressed="true"] { background: var(--papier-tinte); color: var(--papier); }

.regal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 40vw), 1fr));
    gap: clamp(1.3rem, 3vw, 2.4rem);
    max-width: 74rem;
    margin: 0 auto;
    padding: 1.5rem var(--rand) 3rem;
    list-style: none;
}
.regal-platte { perspective: 1000px; scroll-margin-top: 6rem; }
.regal-platte[hidden] { display: none; }
.regal-platte:nth-child(4n+1) { --kipp: -1.6deg; }
.regal-platte:nth-child(4n+2) { --kipp: 1.2deg; }
.regal-platte:nth-child(4n+3) { --kipp: -.6deg; }
.regal-platte:nth-child(4n) { --kipp: 2deg; }

.dreh {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.dreh-innen {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotate(var(--kipp, 0deg));
    transition: transform .6s cubic-bezier(.3, .7, .3, 1);
}
.dreh .huelle, .rueckseite {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}
.dreh:hover .dreh-innen { transform: translateY(-4px); }
.dreh[aria-pressed="true"] .dreh-innen,
html:not(.js) .dreh:focus .dreh-innen { transform: rotateY(180deg); }
/* the record one came for from the start page */
.regal-platte:target .dreh { outline: 3px solid var(--rot); outline-offset: 6px; }

.huelle-dreh {
    position: absolute;
    z-index: 1;
    left: .5rem;
    bottom: .45rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(20, 10, 6, .55);
    color: #fff8ec;
    font: 1rem/1 var(--schrift-text);
}

.rueckseite {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .8rem .85rem .7rem;
    border-radius: 3px;
    background: #f6eedb url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    font: .82rem/1.3 var(--schrift-text);
    transform: rotateY(180deg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(42, 29, 21, .18), inset 0 0 30px rgba(120, 80, 30, .18);
}
.rueckseite-titel { font: italic 900 clamp(1rem, 1.6vw, 1.2rem)/1.05 var(--schrift-platte); color: #b6402b; }
.rueckseite-zeile { display: block; }
.rueckseite-wer {
    display: block;
    font: .64rem/1.2 var(--schrift-fett);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .6;
}
.rueckseite-notiz { font-style: italic; }
.rueckseite-nr {
    margin-top: auto;
    font: .62rem/1 var(--schrift-fett);
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.regal-fuss {
    padding: 0 var(--rand) clamp(3.5rem, 8vw, 5rem);
    text-align: center;
}
.regal-fuss p { margin-bottom: 1.2rem; font-size: 1.1rem; }

/* ---------------------------------------------------------------- the band page */
/* Each of the five in their own spot in front of the brick wall, the text beside; the sides
   swap from one to the next. */

.band-kopf {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--rand) clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.band-kopf-klein {
    margin: 0;
    font: italic 900 clamp(1.2rem, 3vw, 1.7rem)/1.1 var(--schrift-platte);
    color: var(--neon-roehre);
}
.band-kopf h1 { margin-bottom: .4em; font-size: clamp(3rem, 10vw, 6rem); }
.band-kopf > p:not(.band-kopf-klein) { color: #e6dccd; font-size: 1.1rem; text-wrap: pretty; }

/* gaffer tape to jump to someone */
.band-sprung {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.8rem;
}
.band-sprung a {
    padding: .45rem .75rem .4rem;
    background: linear-gradient(#e4ddcd, #cfc6b3);
    color: #1d1512;
    font: .82rem/1 var(--schrift-plakat);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transform: rotate(-1.5deg);
    clip-path: polygon(2% 8%, 98% 0, 100% 92%, 1% 100%);
}
.band-sprung a:nth-child(even) { transform: rotate(1.5deg); }
.band-sprung a:hover { background: linear-gradient(#fff4d8, #e7dbc0); }

.mitglied {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    max-width: var(--breit);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand);
    border-top: 1px solid rgba(255, 255, 255, .06);
    scroll-margin-top: 4.5rem;
}
@media (min-width: 52rem) {
    .mitglied { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .mitglied-gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .mitglied-gespiegelt .mitglied-bild { order: 2; }
}

.mitglied-bild {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 2.2rem 1rem 1.2rem;
    border-radius: 8px;
    background:
        radial-gradient(ellipse 45% 9% at 50% 91%, rgba(255, 170, 90, .3), transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 40, 130, .2), transparent 70%),
        linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, .65)),
        url("../img/ziegel.svg") center / 160px 80px;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
}
/* the spot from above */
.mitglied-bild::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 50%;
    width: 90%;
    height: 100%;
    transform: translateX(-50%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    background: linear-gradient(rgba(255, 190, 120, .26), transparent 85%);
    filter: blur(3px);
    mix-blend-mode: screen;
}
.mitglied-bild img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(17rem, 55vw, 30rem);
    object-fit: contain;
    filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .6));
}
.mitglied-bild-ungeschnitten img { filter: none; }
/* room above the head for the speech bubble */
.mitglied-bild-blase { padding-top: 6.2rem; }
.mitglied-bild .figur-band { margin-top: .7rem; }

.mitglied-rolle {
    margin: 0 0 .3rem;
    color: var(--rot);
    font: .85rem/1 var(--schrift-plakat);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.mitglied-text h2 { margin-bottom: .1em; font-size: clamp(2.6rem, 6vw, 4rem); }
.mitglied-beiname {
    margin-bottom: 1.2rem;
    color: var(--neon-roehre);
    font: italic 900 clamp(1.2rem, 2.6vw, 1.6rem)/1.15 var(--schrift-platte);
}
.mitglied-text > p:not([class]) { max-width: 38rem; color: #e6dccd; text-wrap: pretty; }
.mitglied-text strong { color: var(--tinte); }

/* what they really say, as a comic speech bubble above the head */
.sprechblase {
    position: absolute;
    z-index: 2;
    top: .9rem;
    left: 1rem;
    right: 1rem;
    width: fit-content;
    max-width: min(19rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: .7rem .95rem .65rem;
    border: 3px solid #2a1d15;
    border-radius: 1.4rem;
    background: #fffaf0;
    color: #2a1d15;
    font: italic 900 clamp(.95rem, 1.6vw, 1.1rem)/1.2 var(--schrift-platte);
    text-align: center;
    text-wrap: balance;
    transform: rotate(-1.5deg);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
}
/* the tail points down to the head */
.sprechblase::after {
    content: "";
    position: absolute;
    left: calc(50% - .6rem);
    bottom: -1rem;
    width: 1.2rem;
    height: 1.1rem;
    background: #fffaf0;
    border-left: 3px solid #2a1d15;
    border-bottom: 3px solid #2a1d15;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: skewX(-18deg);
}
.mitglied-gespiegelt .sprechblase { transform: rotate(1.5deg); }

.band-fuss {
    padding: clamp(3rem, 7vw, 5rem) var(--rand);
    border-top: 1px solid rgba(255, 255, 255, .06);
    text-align: center;
}
.band-fuss p {
    color: var(--neon-roehre);
    font: italic 900 clamp(1.4rem, 3.5vw, 2rem)/1.2 var(--schrift-platte);
}
.band-fuss-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
/* friends: the Complicen, where Voss plays too */
.band-freunde {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--rand) 0;
    text-align: center;
    scroll-margin-top: 5rem;
}
.band-freunde h2 { margin-bottom: .6rem; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.band-freunde p { color: #e6dccd; font-size: 1.1rem; }
.band-freunde a { color: var(--neon-roehre); }
.knopf-rand { background: transparent; box-shadow: inset 0 0 0 2px var(--tinte); }
.knopf-rand:hover { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------- the Backstage */
/* Behind the stage: plainer than the stage, built for doing things, on a phone too. */

.bs { max-width: 60rem; margin: 0 auto; padding: 0 var(--rand) clamp(3rem, 7vw, 5rem); }

.bs-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.4rem;
    margin: 0 calc(var(--rand) * -1);
    padding: .8rem var(--rand);
    background: #1a1010;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bs-nav > a {
    color: var(--gedimmt);
    font: .9rem/1 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: .45rem 0;
    border-bottom: 2px solid transparent;
}
.bs-nav > a:hover, .bs-nav > a[aria-current="page"] { color: var(--tinte); border-color: var(--amber); }
.bs-raus { display: flex; align-items: center; gap: .8rem; margin-left: auto; color: var(--gedimmt); font-size: .9rem; }
.bs-raus button {
    padding: .4rem .7rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: none;
    color: var(--tinte);
    font: .8rem/1 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}
.bs-raus button:hover { border-color: var(--amber); }

.bs-zahl {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: .25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--rot);
    color: #fff;
    font: .75rem/1 var(--schrift-plakat);
    letter-spacing: 0;
}
.bs-zahl-gross { position: absolute; top: .9rem; right: .9rem; min-width: 2rem; height: 2rem; font-size: 1rem; }

.bs-schild {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .3rem .65rem .25rem;
    background: var(--amber);
    color: #1b1412;
    font: .78rem/1 var(--schrift-plakat);
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}
.bs-klein { margin: .9rem 0 0; color: var(--gedimmt); font-size: .9rem; line-height: 1.45; }
.bs-karte .bs-klein { color: inherit; opacity: .7; }

/* the door: login and invitation */
.bs-tuer { max-width: 34rem; margin: 0 auto; padding-top: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.bs-tuer h1 { font-size: clamp(2.6rem, 8vw, 4rem); }
.bs-karte {
    padding: 1.5rem 1.4rem 1.3rem;
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    border-radius: 4px;
    text-align: left;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.bs-karte .knopf { border: 0; cursor: pointer; }

/* "Wer bist du?": the five heads to tap */
.wer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    margin: 0 0 1.2rem;
    padding: 0;
    border: 0;
}
@media (max-width: 26rem) {
    .wer { grid-template-columns: repeat(3, 1fr); }
}
.wer-figur {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .4rem .2rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    font: .8rem/1 var(--schrift-fett);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.wer-figur input { position: absolute; opacity: 0; pointer-events: none; }
.wer-figur img {
    width: 100%;
    max-width: 4.6rem;
    aspect-ratio: 1;
    height: auto;
    border: 3px solid transparent;
    border-radius: 50%;
    background: #2a1a17;
    object-fit: cover;
    transition: transform .15s, border-color .15s;
}
.wer-figur:hover img { transform: translateY(-2px); }
.wer-figur:has(input:checked) img { border-color: var(--rot); }
.wer-figur:has(input:checked) { background: rgba(211, 47, 63, .1); }
.wer-figur:has(input:focus-visible) { outline: 3px solid var(--amber); }

/* the start: hello, and tiles */
.bs-hallo { display: flex; align-items: flex-end; gap: 1.2rem; padding: clamp(2rem, 5vw, 3rem) 0 1.5rem; }
.bs-hallo h1 { margin: 0 0 .4rem; font-size: clamp(2.4rem, 7vw, 3.8rem); }
.bs-hallo-figur { width: auto; height: clamp(7rem, 20vw, 10rem); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); }
.bs-hallo .gb-danke { color: var(--papier-tinte); }

.bs-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bs-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: 1.2rem 1.2rem 1.3rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: #1a1110;
    color: #e6dccd;
    text-decoration: none;
}
a.bs-kachel:hover { border-color: var(--amber); background: #221614; }
.bs-kachel-titel { color: var(--tinte); font: 1.4rem/1 var(--schrift-plakat); text-transform: uppercase; }
.bs-kachel-bald { opacity: .55; border-style: dashed; }

/* lists: waiting entries, the wall, the members */
.bs-abschnitt { padding-top: clamp(2rem, 5vw, 3rem); }
.bs-abschnitt h1, .bs-abschnitt h2 { font-size: clamp(2rem, 5vw, 2.8rem); }
.bs-schmal { max-width: 32rem; }
.bs-anzahl { color: var(--gedimmt); font-size: .6em; vertical-align: .25em; }
.bs-leer { color: var(--gedimmt); font-style: italic; }
.bs-liste { display: grid; gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bs-eintrag {
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--amber);
    border-radius: 4px;
    background: #f6eedb;
    color: var(--papier-tinte);
    scroll-margin-top: 5rem;
}
.bs-eintrag blockquote { margin: 0 0 .5rem; font: italic 1.05rem/1.5 Georgia, "Times New Roman", serif; white-space: pre-line; overflow-wrap: anywhere; }
.bs-wer { margin: 0 0 .8rem; font-size: .9rem; opacity: .8; }
.bs-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bs-knoepfe form { margin: 0; }
.bs-knoepfe .knopf, .bs-antwort .knopf { border: 0; cursor: pointer; }
.bs-abschnitt .knopf-rand { color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.knopf-klein { padding: .55rem .85rem .5rem; font-size: .82rem; }
.bs-antwort label { display: block; margin-bottom: .3rem; font: .78rem/1.2 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.bs-antwort textarea {
    display: block;
    width: 100%;
    margin-bottom: .6rem;
    padding: .55rem .7rem;
    border: 2px solid rgba(42, 29, 21, .3);
    border-radius: 3px;
    background: #fff7c2;
    color: var(--papier-tinte);
    font: .98rem/1.4 var(--schrift-text);
    resize: vertical;
}

.bs-link {
    margin: 1.2rem 0;
    padding: 1rem 1.1rem;
    border-radius: 6px;
    background: #e0edd0;
    color: #1d2a12;
}
.bs-link p { margin: 0 0 .6rem; }
.bs-link-zeile { display: flex; gap: .6rem; }
.bs-link input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 2px solid #4d7a2a; border-radius: 3px; font: .9rem/1.3 ui-monospace, Consolas, monospace; }
.bs-link .knopf { border: 0; cursor: pointer; }

.bs-mitglieder { display: grid; gap: .6rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.bs-mitglieder li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: #1a1110;
}
.bs-mitglied-name { flex: 1 1 9rem; font: 1.15rem/1.1 var(--schrift-plakat); text-transform: uppercase; }
.bs-mitglied-name span { display: block; margin-top: .2rem; color: var(--gedimmt); font: .8rem/1 var(--schrift-text); text-transform: none; }
.bs-status { flex: 1 1 10rem; color: var(--gedimmt); font-size: .92rem; }
.bs-mitglieder .knopf-rand { color: var(--tinte); }

/* ---------------------------------------------------------------- the calendar (Backstage) */

.bs-mittel { max-width: 44rem; }
.bs-unter { margin-top: 2.5rem; font-size: 1.6rem; }

.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kal-kopf h1 { margin: 0; text-align: center; }
.kal-blaettern {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    color: var(--tinte);
    font-size: 1.3rem;
    text-decoration: none;
}
.kal-blaettern:hover { border-color: var(--amber); }
.kal-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1.2rem 0; }
.kal-abo { margin-left: auto; color: var(--gedimmt); font-size: .92rem; }

/* the month: seven columns, a cell per day */
.kal { border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; overflow: hidden; }
.kal-zeile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-wochentage span {
    padding: .5rem 0;
    background: #1a1010;
    color: var(--gedimmt);
    font: .75rem/1 var(--schrift-fett);
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}
.kal-tag {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 6.2rem;
    padding: .35rem .35rem .45rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-left: 1px solid rgba(255, 255, 255, .07);
    background: #130c0b;
    overflow: hidden;
}
.kal-tag:nth-child(7n+1) { border-left: 0; }
.kal-fremd { background: #0d0808; }
.kal-fremd .kal-nr, .kal-fremd .kal-eintrag { opacity: .45; }
/* days on which all five can */
.kal-alle { background: linear-gradient(rgba(91, 168, 74, .16), rgba(91, 168, 74, .06)); }
.kal-fremd.kal-alle { background: #0d0808; }
.kal-heute { box-shadow: inset 0 0 0 2px var(--amber); }
.kal-nr {
    align-self: flex-start;
    min-width: 1.6rem;
    padding: .1rem .25rem;
    border-radius: 4px;
    color: var(--tinte);
    font: .9rem/1.2 var(--schrift-fett);
    text-decoration: none;
}
.kal-nr:hover { background: rgba(255, 255, 255, .1); }
.kal-heute .kal-nr { background: var(--amber); color: #1b1412; }

.kal-punkte { display: flex; gap: 3px; }
.kal-punkt {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #5ba84a;
}
.kal-punkt-weg { background: var(--rot); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.kal-fremd .kal-punkte { opacity: .4; }

.kal-eintrag {
    display: block;
    padding: .12rem .3rem;
    border-radius: 3px;
    color: #fff;
    font: .72rem/1.25 var(--schrift-fett);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kal-gig { background: var(--rot); }
.kal-probe { background: #b7791f; }
.kal-sonstiges { background: #3d6a8a; }
.kal-eintrag.kal-aus { background: #3a2c2a; color: var(--gedimmt); text-decoration: line-through; }
/* someone is away that day: it still takes place, but wobbles - hatched, not grey */
.kal-eintrag.kal-wackelt { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .5) 0 3px, transparent 3px 7px); }
/* a request: only the outline, dashed - not fixed yet */
.kal-eintrag.kal-anfrage { background-color: transparent; outline: 1px dashed; outline-offset: -1px; }
.kal-gig.kal-anfrage { color: #ff8a95; }
.kal-sonstiges.kal-anfrage { color: #8fc0e3; }

@media (max-width: 40rem) {
    .kal-tag { min-height: 4.4rem; padding: .25rem .2rem; }
    .kal-punkt { width: .36rem; height: .36rem; }
    .kal-punkte { gap: 2px; }
    /* on a phone the entries are coloured bars; the list below has the words */
    .kal-eintrag { height: .45rem; padding: 0; font-size: 0; }
}

.kal-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin: .8rem 0 0; color: var(--gedimmt); font-size: .85rem; }
.kal-legende .kal-punkt { margin-right: -.5rem; }

/* quick mode: every day from today on is a button that turns "away" on or off for oneself */
.kal-schnell-an p { margin: 0; color: var(--gedimmt); font-size: .9rem; }
button.kal-schalter {
    width: 100%;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
button.kal-schalter:hover { filter: brightness(1.3); }
button.kal-schalter:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* the own days off stand out, since a dot is small on a phone */
button.kal-schalter[aria-pressed="true"] { background: linear-gradient(rgba(211, 47, 63, .3), rgba(211, 47, 63, .12)); }
.kal-punkt-ich, .kal-punkt-ich.kal-punkt-weg { box-shadow: 0 0 0 2px var(--tinte); }
.kal-schalter .kal-punkt-ich { transform: scale(1.25); }
.kal-vorbei { opacity: .45; }
.kal-wartet { opacity: .55; }
.kal-legende-alle { padding: .1rem .45rem; border-radius: 3px; background: rgba(91, 168, 74, .25); color: var(--tinte); }
.kal-legende .kal-eintrag { display: inline-block; height: auto; padding: .12rem .4rem; font-size: .75rem; }

/* the month as a list */
.kal-karte {
    padding: .9rem 1.1rem 1rem;
    border-left: 5px solid #3d6a8a;
    border-radius: 4px;
    background: #f6eedb;
    color: var(--papier-tinte);
    scroll-margin-top: 5rem;
}
.kal-karte-gig { border-left-color: var(--rot); }
.kal-karte-probe { border-left-color: #b7791f; }
.kal-karte.kal-aus { opacity: .6; }
.kal-karte.kal-aus h3 { text-decoration: line-through; }
.kal-karte:target { box-shadow: 0 0 0 3px var(--amber); }
.kal-karte h3 { margin: .2rem 0 .3rem; font-size: 1.35rem; text-transform: none; }
.kal-wann { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-size: .95rem; }
.kal-art {
    padding: .12rem .45rem .1rem;
    border-radius: 999px;
    background: rgba(42, 29, 21, .12);
    font: .7rem/1.2 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.kal-oeffentlich { background: #dce9cf; color: #2f5a1d; }
.kal-faellt { background: var(--rot); color: #fff; }
.kal-anfrage-text { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.kal-karte-anfrage { border-left-style: dashed; }

/* requests and answers: who can, my two buttons, and the way to fix the date */
.kal-stimmen { margin: .3rem 0 .7rem; }
.kal-stimmen-liste { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .55rem; padding: 0; list-style: none; }
.kal-stimme { padding: .25rem .6rem; border-radius: 999px; background: rgba(42, 29, 21, .08); color: var(--papier-tinte); font: .82rem/1.2 var(--schrift-fett); }
.kal-stimme span[aria-hidden] { margin-right: .15rem; }
.kal-stimme-ja { background: rgba(91, 168, 74, .25); color: #2f5a1d; }
.kal-stimme-nein { background: rgba(211, 47, 63, .16); color: var(--rot-tief); }
.kal-stimme-offen { color: rgba(42, 29, 21, .6); }
.kal-stimmen-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.kal-stimmen-knoepfe .knopf { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: var(--papier-tinte); }
.kal-stimmen-knoepfe .kal-ja[aria-pressed="true"] { background: #4f9440; box-shadow: none; color: #fff; }
.kal-stimmen-knoepfe .kal-nein[aria-pressed="true"] { background: var(--rot); box-shadow: none; color: #fff; }
.kal-stimmen-stand { margin: 0; color: rgba(42, 29, 21, .7); font-size: .88rem; }
.kal-ort, .kal-notiz, .kal-reihe { margin: 0 0 .4rem; font-size: .95rem; }
.kal-notiz { white-space: pre-line; font-style: italic; }
.kal-fehlt { margin: 0 0 .4rem; color: var(--rot-tief); font: .95rem/1.3 var(--schrift-fett); }
.kal-reihe { opacity: .7; }
.kal-von { margin: .6rem 0 0; font-size: .8rem; opacity: .55; }
.kal-karte .bs-knoepfe { margin-top: .5rem; }

.kal-weg { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.kal-weg li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-left: 4px solid var(--rot);
    border-radius: 6px;
    background: #1a1110;
}
.kal-weg strong { font: 1.05rem/1 var(--schrift-plakat); text-transform: uppercase; }
.kal-weg span { flex: 1 1 12rem; color: #e6dccd; }
.kal-weg form { margin: 0; }
.kal-weg .knopf-rand { color: var(--tinte); }

/* the form: which fields show depends on the kind, read by CSS from the checked radio */
/* light controls on the paper, like .feld: dark ones look ticked when they are not */
.termin-art { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; padding: 0; border: 0; color-scheme: light; }
.termin-art legend { margin-bottom: .4rem; font: .82rem/1.2 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.termin-art label {
    padding: .55rem .95rem;
    border: 2px solid rgba(42, 29, 21, .35);
    border-radius: 999px;
    cursor: pointer;
    font: .95rem/1 var(--schrift-fett);
}
.termin-art input { margin-right: .3rem; accent-color: var(--rot); }
.termin-art label:has(input:checked) { border-color: var(--papier-tinte); background: #fffaf0; }
.termin-form:has(input[name="Art"][value="Gig"]:checked) [data-nur="kein-gig"],
.termin-form:has(input[name="Art"]:not([value="Gig"]):checked) [data-nur="gig"],
.termin-form:has(input[name="Art"][value="Probe"]:checked) [data-nur="kein-probe"],
/* a request is never public, and a single date: no repeating either (a rehearsal is no request) */
.termin-form:has(input[name="Art"]:not([value="Probe"]):checked):has(input[name="Anfrage"]:checked) [data-nur-fest],
.termin-form:has(input[name="Art"]:not([value="Probe"]):checked):has(input[name="Anfrage"]:checked) [data-reihe] { display: none; }
.termin-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1rem; }
.termin-haken { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1.2rem; cursor: pointer; }
.termin-haken input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--rot); }
.termin-loeschen { margin-top: 1.5rem; color: var(--gedimmt); }
.termin-loeschen summary { cursor: pointer; }
.termin-loeschen form { margin-top: .8rem; padding: 1rem; border: 1px solid rgba(211, 47, 63, .5); border-radius: 6px; }
.termin-loeschen .knopf { border: 0; cursor: pointer; }

.bs-abo-form { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin: 1.4rem 0; }
.bs-abo-form .knopf { border: 0; cursor: pointer; }
.bs-abo-form .bs-klein { margin: 0; flex: 1 1 14rem; }
.bs-abo-iphone { margin: .8rem 0 0; }
.abo-anleitung h2 { margin-top: 2rem; font-size: 1.6rem; }
.abo-anleitung h3 { margin: 1.2rem 0 .3rem; font-size: 1.1rem; }
.abo-anleitung p { color: #e6dccd; }

/* ---------------------------------------------------------------- the songs page (Backstage) */

.sg-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 1rem; }
.sg-filter a {
    padding: .45rem .85rem .4rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--tinte);
    font: .85rem/1 var(--schrift-fett);
    text-decoration: none;
}
.sg-filter a span { margin-left: .25rem; color: var(--gedimmt); font-family: var(--schrift-text); }
.sg-filter a:hover { border-color: var(--amber); }
.sg-filter a[aria-current] { border-color: var(--amber); background: rgba(242, 195, 122, .14); }
.sg-liste { margin: 0; padding: 0; list-style: none; }
/* a song: the folding part, and "Üben" beside it */
.sg-song {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 .6rem;
    padding: .55rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    scroll-margin-top: 5rem;   /* back after saving: not under the menu bar */
}
.sg-song:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sg-song summary {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .8rem;
    align-items: start;
    padding: .15rem;
    border-radius: 4px;
    cursor: pointer;
    list-style: none;
}
.sg-song summary::-webkit-details-marker { display: none; }
.sg-song summary:hover strong, .sg-song summary:focus-visible strong { color: var(--amber); }
.sg-mini { width: 3rem; height: 3rem; }
.sg-mini::after { display: none; }
.sg-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.sg-kopf strong { font: 1.05rem/1.2 var(--schrift-fett); }
.sg-stand {
    margin-left: .45rem;
    padding: .12rem .4rem .08rem;
    border-radius: 3px;
    background: rgba(242, 195, 122, .18);
    color: var(--amber);
    font: .7rem/1 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
    vertical-align: .15em;
}
.sg-ruht .sg-stand { background: rgba(255, 255, 255, .08); color: var(--gedimmt); }
.sg-ruht .sg-mini, .sg-ruht .sg-kopf strong { opacity: .55; }
.sg-zeile { color: #e6dccd; font-size: .88rem; font-variant-numeric: tabular-nums; }
.sg-gespielt { color: var(--gedimmt); font-size: .8rem; }
.sg-notiz {
    display: -webkit-box;
    overflow: hidden;
    color: var(--gedimmt);
    font-size: .85rem;
    font-style: italic;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
details[open] .sg-notiz { display: none; }   /* open, the note stands in its field */
.sg-felder { margin: .6rem 0 .5rem; }
.sg-vorlage { margin: 0 0 .9rem; }
.sg-leer-hilfe { margin: -.5rem 0 1rem; }
.sg-wahl { margin-bottom: 1rem; }
.sg-wahl legend span { margin-left: .3rem; font-family: var(--schrift-text); letter-spacing: 0; text-transform: none; opacity: .6; }
.sg-ueben { margin-top: .3rem; }

/* ---------------------------------------------------------------- the mixer (Backstage) */

.mx-zettel-zeile { margin: -.4rem 0 .9rem; color: var(--gedimmt); font-size: .92rem; }
.mx-zettel-zeile a { margin-left: .5rem; color: var(--neon-roehre); }
.mx-zettel-notiz { display: block; font-style: italic; white-space: pre-line; }

.mx { max-width: none; }
.mx-zurueck { margin: 1.5rem 0 .3rem; }
.mx h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

.mx-transport {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin: 0 calc(var(--rand) * -1);
    padding: .7rem var(--rand);
    background: rgba(20, 12, 11, .96);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* on a wide screen the controls stay in view while scrolling; on a phone they would hide too much */
@media (min-width: 46rem) {
    .mx-transport { position: sticky; top: 4.2rem; z-index: 5; }
}
.mx-knopf {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: none;
    color: var(--tinte);
    cursor: pointer;
}
.mx-knopf svg { width: 1.2rem; height: 1.2rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mx-play { width: 3.6rem; height: 3.6rem; border: 0; background: var(--rot); color: #fff; box-shadow: 0 6px 18px rgba(211, 47, 63, .35); }
.mx-play svg { width: 1.5rem; height: 1.5rem; stroke: none; }
.mx-play[disabled] { opacity: .4; cursor: progress; }
.mx-zeichen-pause, .mx-spielt .mx-zeichen-play { display: none; }
.mx-spielt .mx-zeichen-pause { display: block; }
.mx-zeit { margin: 0; font: 1.35rem/1 var(--schrift-fett); font-variant-numeric: tabular-nums; }
.mx-zeit output { color: var(--tinte); }
.mx-zeit span { color: var(--gedimmt); font-size: .9rem; }
.mx-schalter {
    padding: .5rem .9rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: none;
    color: var(--tinte);
    font: .85rem/1 var(--schrift-fett);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.mx-schalter[aria-pressed="true"] { border-color: var(--amber); background: var(--amber); color: #1b1412; }
.mx-schalter[disabled] { opacity: .4; cursor: default; }
.mx-ohne[aria-pressed="true"] { border-color: var(--rot); background: var(--rot); color: #fff; }
.mx-loop-text { flex: 1 1 12rem; margin: 0; color: var(--gedimmt); font-size: .9rem; font-variant-numeric: tabular-nums; }
.mx-gesamt { display: flex; align-items: center; gap: .5rem; color: var(--gedimmt); font: .8rem/1 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.mx-gesamt input { width: 7rem; accent-color: var(--amber); }

.mx-lade { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 0; color: var(--gedimmt); }
.mx-lade[hidden] { display: none; }
.mx-lade progress { flex: 1; max-width: 20rem; accent-color: var(--amber); }
.mx-lade-fehler { color: #ff9a9a; }

/* every track: controls on the left, the waveform on the right; on a phone one above the other */
.mx-spur { display: grid; grid-template-columns: 1fr; }
.mx-lineal { position: relative; height: 1.3rem; margin-top: 1rem; }
@media (min-width: 46rem) {
    .mx-spur { grid-template-columns: 15rem 1fr; column-gap: 1rem; }
    /* the ruler's marks sit over the waveform column */
    .mx-lineal { margin-left: 16rem; }
}
.mx-lineal span { position: absolute; bottom: 0; transform: translateX(-50%); color: var(--gedimmt); font-size: .72rem; font-variant-numeric: tabular-nums; }
.mx-lineal span:first-child { transform: none; }

.mx-spuren { margin: .3rem 0 0; padding: 0; list-style: none; }
.mx-spur { align-items: center; row-gap: .4rem; padding: .55rem 0; border-top: 1px solid rgba(255, 255, 255, .07); }
/* two rows beside the head: the name, then M, S and the fader */
.mx-regler {
    display: grid;
    grid-template-columns: 2.5rem auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: .25rem .45rem;
    min-width: 0;
}
.mx-regler .mx-kopfbild { grid-row: span 2; }
.mx-regler .mx-name { grid-column: 2 / -1; }
.mx-kopfbild { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #2a1a17; object-fit: cover; }
.mx-kopfbild-leer { display: grid; place-items: center; color: var(--gedimmt); font: 1.1rem/1 var(--schrift-plakat); }
.mx-name { min-width: 0; color: var(--gedimmt); font-size: .8rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-name strong { margin-right: .35rem; color: var(--tinte); font: .95rem/1.2 var(--schrift-fett); }
.mx-ms {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 4px;
    background: none;
    color: var(--gedimmt);
    font: .85rem/1 var(--schrift-plakat);
    cursor: pointer;
}
.mx-ms[aria-pressed="true"] { border-color: var(--rot); background: var(--rot); color: #fff; }
.mx-solo[aria-pressed="true"] { border-color: var(--amber); background: var(--amber); color: #1b1412; }
.mx-pegel { width: 100%; min-width: 3.5rem; accent-color: var(--amber); }

.mx-welle {
    position: relative;
    height: 3.6rem;
    border-radius: 4px;
    background: #140c0b;
    color: #e0a43a;   /* the waveform's colour, read by mixer.js */
    cursor: text;
    touch-action: pan-y;   /* vertical swipes scroll, horizontal drags set a loop */
    user-select: none;
    overflow: hidden;
}
.mx-welle canvas { display: block; width: 100%; height: 100%; }
.mx-aus .mx-welle { color: #5a4a3e; }
.mx-aus .mx-name strong { color: var(--gedimmt); }
.mx-loop {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(242, 165, 65, .2);
    border-left: 2px solid var(--amber);
    border-right: 2px solid var(--amber);
    pointer-events: none;
}
.mx-loop.mx-loop-aus { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .25); }
.mx-kopf-linie {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, .6);
    pointer-events: none;
}
.mx-tasten { margin-top: 1.2rem; }

/* the count-in and the tempo */
.mx-zaehler { min-width: 1.4rem; color: var(--amber); font: 1.9rem/1 var(--schrift-plakat); text-align: center; }
.mx-tempo {
    padding: .5rem .85rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: none;
    color: var(--tinte);
    font: .85rem/1 var(--schrift-fett);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    cursor: pointer;
}
.mx-tempo:hover, .mx-tempo[aria-expanded="true"] { border-color: var(--amber); }
/* bar and beat next to the time; moving one */
.mx-takt { margin-left: .4rem; color: var(--amber); font-size: .8rem; letter-spacing: .04em; }
.mx-eins { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; flex-basis: 100%; margin: .2rem 0 0; color: var(--gedimmt); font-size: .85rem; }
.mx-eins[hidden] { display: none; }
.mx-eins .bs-klein { margin: 0; }
/* slower practice: − 80 % + */
.mx-langsam { display: flex; align-items: center; gap: .2rem; }
.mx-langsam[hidden] { display: none; }
.mx-langsam .mx-schalter { width: 2.3rem; padding: .4rem 0; font-size: 1.05rem; letter-spacing: 0; }
.mx-langsam-wert {
    min-width: 3.6rem;
    padding: .5rem .3rem;
    border: 0;
    background: none;
    color: var(--tinte);
    font: .9rem/1 var(--schrift-fett);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.mx-langsam-an .mx-langsam-wert { color: var(--amber); }
.mx-tempo-feld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .8rem 0 0;
    padding: .8rem 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    background: #140c0b;
}
.mx-tempo-feld[hidden], .mx-tempo-feld [hidden] { display: none; }
.mx-tempo-feld label { display: flex; align-items: center; gap: .5rem; color: var(--gedimmt); font: .8rem/1 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.mx-tempo-feld input {
    width: 6rem;
    padding: .4rem .6rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: #0b0707;
    color: var(--tinte);
    font: 1rem/1.2 var(--schrift-text);
}
.mx-tempo-feld p { flex-basis: 100%; margin: .2rem 0 0; }

/* markers: a row of buttons, flags on the ruler, a dashed line in every waveform */
.mx-marken { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; }
.mx-marken-liste { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mx-marke { display: inline-flex; border: 1px solid rgba(255, 163, 210, .45); border-radius: 999px; overflow: hidden; }
.mx-marke button { padding: .45rem .55rem; border: 0; background: none; color: var(--tinte); font: .85rem/1 var(--schrift-fett); cursor: pointer; }
.mx-marke button + button { border-left: 1px solid rgba(255, 163, 210, .25); color: var(--gedimmt); }
.mx-marke button:hover, .mx-marke button:focus-visible { background: rgba(255, 163, 210, .12); color: var(--neon-roehre); }
.mx-marke .mx-marke-weg:hover { color: #ff9a9a; }
.mx-marke-sprung { padding-left: .85rem; }
.mx-marke-sprung span { margin-left: .35rem; color: var(--gedimmt); font: .8rem/1 var(--schrift-text); font-variant-numeric: tabular-nums; }
.mx-marke-form { display: flex; flex-basis: 100%; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mx-marke-form[hidden] { display: none; }
.mx-marke-form input {
    min-width: 12rem;
    padding: .45rem .8rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: #140c0b;
    color: var(--tinte);
    font: .95rem/1.2 var(--schrift-text);
}
.mx-notiz-meldung { flex-basis: 100%; margin: 0; color: #ff9a9a; }
.mx-notiz-meldung:empty { display: none; }
.mx-lineal.mx-mit-marken { height: 2.7rem; }
.mx-lineal .mx-lineal-marke {
    top: 0;
    bottom: auto;
    padding-left: .3rem;
    border-left: 2px solid var(--neon-roehre);
    color: var(--neon-roehre);
    font: .72rem/1.15 var(--schrift-fett);
    white-space: nowrap;
    transform: none;
}
.mx-marke-linie { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(255, 163, 210, .65); pointer-events: none; }

/* the help page */
.hilfe p, .hilfe li { color: #e6dccd; text-wrap: pretty; }
.hilfe h2 { margin-top: 2.2rem; font-size: 1.8rem; scroll-margin-top: 5rem; }
.hilfe ul { padding-left: 1.2rem; }
.hilfe li { margin-bottom: .45rem; }
.hilfe a { color: var(--neon-roehre); }
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; }
.hilfe-inhalt a {
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: var(--tinte);
    font-size: .88rem;
    text-decoration: none;
}
.hilfe-inhalt a:hover { border-color: var(--amber); }

/* ---------------------------------------------------------------- /termine */

.ticket-platz { justify-self: center; width: 100%; max-width: 25rem; }
.ticket-link { margin: -.6rem 0 1.1rem; font-size: .95rem; }
.ticket-link a { color: var(--rot-tief); }
.ticket-leer .ticket-datum { font-size: clamp(2.2rem, 5vw, 2.8rem); }
.ticket-leer .ticket-ort { font-size: 1rem; margin-bottom: 1.2rem; }

.termine-kopf { max-width: 44rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--rand) 1rem; text-align: center; }
.termine-kopf h1 { margin-bottom: .35em; font-size: clamp(3rem, 9vw, 5.5rem); }
.termine-kopf p { color: #e6dccd; font-size: 1.1rem; }
.termine { max-width: var(--breit); margin: 0 auto; padding: 1.5rem var(--rand) clamp(3rem, 7vw, 4.5rem); }
.termine-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    justify-items: center;
    gap: 2.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.termine-liste li { width: 100%; max-width: 25rem; }
.termine-liste li:nth-child(even) .ticket { transform: rotate(-1.5deg); }
.termine-leer {
    max-width: 34rem;
    margin: 0 auto;
    color: var(--gedimmt);
    font: italic 900 1.35rem/1.4 var(--schrift-platte);
    text-align: center;
}
.termine-leer a { color: var(--neon-roehre); }

/* the archive: printed on the back of a tour shirt */
.tour {
    max-width: 36rem;
    margin: 0 auto;
    padding: 0 var(--rand) clamp(3.5rem, 8vw, 5.5rem);
    text-align: center;
}
.tour h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--gedimmt); }
.tour-liste { margin: 0; padding: 0; list-style: none; }
.tour-liste li {
    display: grid;
    grid-template-columns: 6.5rem 1fr 1fr;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .12);
    text-align: left;
    font-size: .98rem;
}
.tour-liste time { color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.tour-liste strong { font-family: var(--schrift-fett); letter-spacing: .04em; text-transform: uppercase; }
.tour-liste span { color: #e6dccd; }

/* ---------------------------------------------------------------- contact, imprint, privacy */

.seite-kopf {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--rand) 1.5rem;
    text-align: center;
}
.seite-kopf h1 { margin-bottom: .35em; font-size: clamp(3rem, 9vw, 5.5rem); }
.seite-kopf p { color: #e6dccd; font-size: 1.1rem; text-wrap: pretty; }

.kontakt {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    max-width: 52rem;
    margin: 0 auto;
    padding: 1rem var(--rand) clamp(3.5rem, 8vw, 5.5rem);
}
/* the address on a sheet of paper, like a letter */
.kontakt-brief {
    justify-self: center;
    width: min(100%, 30rem);
    padding: 1.8rem 1.6rem 1.5rem;
    background: var(--papier) url("../img/korn.svg") 0 0 / 240px 240px;
    color: var(--papier-tinte);
    text-align: center;
    transform: rotate(-1deg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.kontakt-zeile { margin: 0 0 .5rem; color: var(--rot); font: .85rem/1 var(--schrift-plakat); letter-spacing: .14em; text-transform: uppercase; }
.kontakt-adresse {
    display: inline-block;
    color: var(--papier-tinte);
    font: italic 900 clamp(1.5rem, 5vw, 2.2rem)/1.2 var(--schrift-platte);
    overflow-wrap: anywhere;
    text-decoration-color: var(--rot);
    text-underline-offset: .2em;
}
.kontakt-klein { margin: .8rem 0 0; font-size: .9rem; opacity: .7; }
.kontakt-buchen h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.kontakt-buchen p, .kontakt-buchen li { color: #e6dccd; }
.kontakt-buchen ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.kontakt-buchen li { margin-bottom: .3rem; }
.kontakt-buchen a, .kontakt-gaeste a { color: var(--neon-roehre); }
.kontakt-gaeste { margin: 0; color: var(--gedimmt); text-align: center; }

/* imprint and privacy: plain reading */
.recht {
    max-width: 42rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--rand) clamp(3.5rem, 8vw, 5.5rem);
}
.recht h1 { font-size: clamp(2.6rem, 8vw, 4rem); }
.recht h2 { margin: 2rem 0 .5rem; font-size: 1.35rem; }
.recht p { color: #e6dccd; text-wrap: pretty; }
.recht a { color: var(--neon-roehre); }
.recht .recht-stand { color: var(--gedimmt); font-size: .9rem; }

/* ---------------------------------------------------------------- photos */

.galerie-sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.galerie-sprung a {
    padding: .35rem .8rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: var(--tinte);
    font: .9rem/1 var(--schrift-fett);
    letter-spacing: .06em;
    text-decoration: none;
}
.galerie-sprung a:hover, .galerie-sprung a:focus-visible { border-color: var(--amber); color: var(--amber); }

.galerie-gig { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand) clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 5rem; }
.galerie-gig h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin: 0 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.galerie-gig h2 time { color: var(--amber); font: 1rem/1.2 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.galerie-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 45%), 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.galerie-bild { display: block; height: 100%; overflow: hidden; border-radius: 3px; background: #1d1412; }
.galerie-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .3s ease; }
/* The first photo of a gig is the big one: a 3:2 field over two rows and columns, whatever the
   photo is - a portrait one would otherwise stretch the rows and squeeze its neighbours. */
.galerie-raster li:first-child { position: relative; grid-column: span 2; grid-row: span 2; aspect-ratio: 3 / 2; }
.galerie-raster li:first-child .galerie-bild { position: absolute; inset: 0; }
.galerie-raster li:first-child img { aspect-ratio: auto; }
.galerie-bild:hover img, .galerie-bild:focus-visible img { transform: scale(1.04); }
.galerie-bild:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* the large view: a dialog over the whole window */
.gross {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tinte);
    touch-action: pan-y pinch-zoom;
}
.gross[open] { display: grid; place-items: center; }
.gross::backdrop { background: rgba(8, 5, 5, .94); }
.gross figure { display: grid; justify-items: center; gap: .7rem; margin: 0; padding: 3.4rem clamp(.5rem, 5vw, 4.5rem) 1rem; }
.gross img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 7.5rem); border-radius: 2px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.gross figcaption { color: #e6dccd; font-size: .95rem; text-align: center; }
.gross-zahl { margin-left: .7rem; color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.gross-zu, .gross-pfeil {
    position: fixed;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: var(--tinte);
    font: 2rem/1 var(--schrift-text);
    cursor: pointer;
}
.gross-zu { top: .8rem; right: .8rem; }
.gross-pfeil { top: 50%; transform: translateY(-50%); }
.gross-zurueck { left: .6rem; }
.gross-vor { right: .6rem; }
.gross-zu:hover, .gross-pfeil:hover { background: rgba(0, 0, 0, .75); color: var(--amber); }
.gross-zu:focus-visible, .gross-pfeil:focus-visible { outline: 3px solid var(--amber); }
.gross-einzeln .gross-pfeil { display: none; }
@media (max-width: 40rem) {
    /* on a phone the arrows sit at the bottom, out of the photo */
    .gross-pfeil { top: auto; bottom: .8rem; transform: none; }
    .gross figure { padding-bottom: 4.5rem; }
    .gross img { max-height: calc(100svh - 10rem); }
}

/* the subscription for fans */
.termine-abo { max-width: 40rem; margin: 0 auto; padding: 0 var(--rand) clamp(2.5rem, 6vw, 3.5rem); text-align: center; }
.termine-abo h2 { margin-bottom: .5rem; font-size: clamp(1.5rem, 4vw, 2rem); }
.termine-abo p { color: #e6dccd; }
.termine-abo .termine-abo-hinweis { color: var(--gedimmt); font-size: .88rem; }
.termine-abo-hinweis a { color: var(--neon-roehre); word-break: break-all; }
.termine-fotos { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand) clamp(3rem, 7vw, 4.5rem); text-align: center; }
.termine-fotos a { color: var(--neon-roehre); font-family: var(--schrift-fett); letter-spacing: .04em; }

/* ---------------------------------------------------------------- errors */

.baustelle {
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(4rem, 12vw, 8rem) var(--rand);
    text-align: center;
}
.baustelle h1 { font-size: clamp(2.6rem, 8vw, 4.5rem); }
.baustelle p { color: var(--gedimmt); margin-bottom: 2rem; }

/* ---------------------------------------------------------------- footer */

.fuss {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 3rem var(--rand) 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: #080505;
    text-align: center;
}
.fuss-logo { width: 9rem; height: auto; opacity: .85; }
.fuss-spruch { margin: 0; color: var(--gedimmt); font: .9rem/1.3 var(--schrift-fett); letter-spacing: .08em; text-transform: uppercase; }
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.fuss-nav a { color: var(--gedimmt); font-size: .95rem; text-decoration: none; }
.fuss-nav a:hover { color: var(--tinte); text-decoration: underline; }

/* ---------------------------------------------------------------- calm */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* the backup page: when the PC last fetched one */
.sicherung-pc { margin: 0 0 1.4rem; padding: .7rem .9rem; border-left: 4px solid #5ba84a; background: rgba(255, 255, 255, .04); }
.sicherung-alt { border-left-color: var(--amber); }

/* ---------------------------------------------------------------- the set list of a gig */

.sl-gig { margin: -.3rem 0 1rem; color: #e6dccd; }
.sl-summe { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0 0 .8rem; color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.sl-summe strong { color: var(--tinte); }
.sl-uebernehmen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
.sl-liste { margin: 1rem 0; padding: 0; list-style: none; }
.sl-zeile { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; border-top: 1px solid rgba(255, 255, 255, .08); background: var(--nacht); scroll-margin-top: 5rem; }
.sl-zeile:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sl-zieht { position: relative; z-index: 1; background: #241715; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.sl-griff {
    flex: none;
    width: 2rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gedimmt);
    font: 1rem/1 var(--schrift-text);
    letter-spacing: -.25em;
    cursor: grab;
    touch-action: none;   /* dragging, not scrolling */
}
.sl-griff[hidden] { display: none; }
.sl-nummer { flex: none; width: 1.8rem; color: var(--amber); font: 1.1rem/1 var(--schrift-fett); text-align: right; font-variant-numeric: tabular-nums; }
.sl-song { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sl-song a { color: var(--tinte); font: 1.05rem/1.25 var(--schrift-fett); text-decoration: none; }
.sl-song a:hover, .sl-song a:focus-visible { color: var(--amber); }
.sl-info { color: var(--gedimmt); font-size: .82rem; font-variant-numeric: tabular-nums; }
/* a note for this evening only: a small line under the song, open it to write */
.sl-notiz { font-size: .82rem; }
.sl-notiz summary { display: inline-block; color: var(--gedimmt); cursor: pointer; list-style: none; opacity: .75; }
.sl-notiz summary::-webkit-details-marker { display: none; }
.sl-notiz summary:hover, .sl-notiz summary:focus-visible { color: var(--amber); opacity: 1; }
.sl-notiz summary.sl-hat-notiz { color: var(--amber); font-style: italic; opacity: 1; }
.sl-notiz form { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .2rem; }
.sl-notiz input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: .4rem .6rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: #140c0b;
    color: var(--tinte);
    font: .95rem/1.3 var(--schrift-text);
}
.sl-trenner { background: #1a1110; }
.sl-trenner-text { flex: 1; padding-left: 2.4rem; color: var(--amber); font: .9rem/1 var(--schrift-fett); letter-spacing: .14em; text-transform: uppercase; }
.sl-knoepfe { display: flex; flex: none; gap: .25rem; }
.sl-knoepfe button {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: none;
    color: var(--tinte);
    font: 1rem/1 var(--schrift-text);
    cursor: pointer;
}
.sl-knoepfe button:hover:not([disabled]), .sl-knoepfe button:focus-visible { border-color: var(--amber); color: var(--amber); }
.sl-knoepfe button[disabled] { opacity: .25; cursor: default; }
.sl-hinzu { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 1rem 0; }
.sl-hinzu form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sl-hinzu select {
    max-width: 100%;
    padding: .5rem .7rem;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 6px;
    background: #140c0b;
    color: var(--tinte);
    font: 1rem/1.3 var(--schrift-text);
}

/* ---------------------------------------------------------------- the packing list of a gig */

.pk-anfangen { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.pk-anfangen form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.pk-anfangen .bs-klein { flex: 1 1 16rem; margin: 0; }
.pk-anfangen .knopf, .pk-hinzu .knopf, .pk-wer .knopf { border: 0; cursor: pointer; }
.pk-liste { margin: 1rem 0; padding: 0; list-style: none; }
.pk-zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .2rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    scroll-margin-top: 5rem;
}
.pk-zeile:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pk-zeile form { margin: 0; }
.pk-haken {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 6px;
    background: none;
    color: transparent;
    font: 1.1rem/1 var(--schrift-fett);
    cursor: pointer;
}
.pk-haken:hover { border-color: var(--amber); color: rgba(255, 255, 255, .3); }
.pk-haken[aria-pressed="true"] { border-color: #5ba84a; background: #5ba84a; color: #fff; }
.pk-text { flex: 1; min-width: 0; }
.pk-drin .pk-text { color: var(--gedimmt); text-decoration: line-through; }
.pk-wer { display: flex; gap: .3rem; }
.pk-wer select, .pk-hinzu select, .pk-hinzu input {
    max-width: 100%;
    padding: .45rem .55rem;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: #140c0b;
    color: var(--tinte);
    font: .92rem/1.2 var(--schrift-text);
}
.pk-wer select.pk-offen { border-color: rgba(242, 195, 122, .55); color: var(--amber); }
.pk-hinzu { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.pk-hinzu input { flex: 1 1 14rem; min-width: 0; }
.pk-wer [hidden] { display: none; }

/* ---------------------------------------------------------------- rehearsal recordings */

.af-hochladen { margin: 1.2rem 0 2rem; }
.af-hochladen .knopf { border: 0; cursor: pointer; }
.af-hochladen input[type="file"] { padding: .5rem; }
.af-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.af-fortschritt[hidden], .af-fortschritt [hidden] { display: none; }
.af-fortschritt progress { flex: 1 1 12rem; accent-color: var(--rot); }
.bs-abschnitt .af-tag { margin: 2rem 0 .6rem; font-size: 1.3rem; }
.af-liste { margin: 0; padding: 0; list-style: none; }
.af-aufnahme {
    margin: 0 0 .8rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    background: #1a1110;
    scroll-margin-top: 5rem;
}
.af-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 0 0 .3rem; }
.af-kopf strong { font: 1.05rem/1.2 var(--schrift-fett); }
.af-kopf span { color: var(--gedimmt); font-size: .85rem; }
.af-notiz { margin: 0 0 .5rem; color: #e6dccd; font-size: .92rem; white-space: pre-line; }
.af-aufnahme audio { display: block; width: 100%; margin: .3rem 0; }
.af-knoepfe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem 1.2rem; font-size: .88rem; }
.af-knoepfe a { color: var(--neon-roehre); }
.af-mehr summary { color: var(--gedimmt); cursor: pointer; }
.af-aendern, .af-loeschen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .5rem 0 0; }
.af-aendern input {
    flex: 1 1 10rem;
    min-width: 0;
    padding: .4rem .55rem;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: #140c0b;
    color: var(--tinte);
    font: .92rem/1.2 var(--schrift-text);
}
.af-aendern .knopf, .af-loeschen .knopf { border: 0; cursor: pointer; }
.af-loeschen .bs-klein { margin: 0; }

/* ---------------------------------------------------------------- the set list on stage */

/* only the list: no menu, no footer - dark and large on a tablet */
.buehne-seite { background: #000; }
.buehne-seite .kopf, .buehne-seite .fuss, .buehne-seite .entwurf, .buehne-seite .sprung { display: none; }
.buehne-steuer {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem var(--rand);
    background: rgba(0, 0, 0, .88);
}
.buehne-steuer a { margin-right: auto; color: var(--gedimmt); }
.buehne-steuer button {
    padding: .5rem .85rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: none;
    color: var(--tinte);
    font: .9rem/1 var(--schrift-fett);
    cursor: pointer;
}
.buehne-blatt {
    --buehne-basis: clamp(1.6rem, 5.2vw, 3.2rem);
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 var(--rand) 3rem;
    color: #fff;
    font-size: calc(var(--buehne-basis) * (1 + var(--buehne-stufe, 0) * .12));
}
.buehne-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin: .4rem 0 .5rem; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.buehne-kopf h1 { margin: 0; font-size: .62em; }
.buehne-kopf p { margin: 0; color: var(--gedimmt); font-size: .42em; }
.buehne-trenner { margin: .6em 0 .2em; color: var(--amber); font: .48em/1 var(--schrift-fett); letter-spacing: .14em; text-transform: uppercase; }
.buehne-liste { margin: 0; padding: 0 0 0 1.7em; }
.buehne-song { padding: .1em 0; line-height: 1.15; }
.buehne-song::marker { color: var(--amber); font: .62em var(--schrift-fett); }
.buehne-titel { font-family: var(--schrift-fett); }
.buehne-info { margin-left: .5em; color: #f2c37a; font: .48em/1 var(--schrift-text); }
.buehne-gig-notiz { display: block; color: var(--amber); font: 600 .42em/1.3 var(--schrift-text); }
.buehne-notiz { display: block; color: var(--gedimmt); font: italic .4em/1.3 var(--schrift-text); }
.buehne-leer { color: var(--gedimmt); font-size: .6em; }

/* printed: black on white, one A4 sheet - the denser the list, the smaller the type */
@media print {
    @page { size: A4; margin: 12mm 14mm; }
    .buehne-seite { background: #fff; }
    .buehne-steuer { display: none; }
    .buehne-blatt { max-width: none; padding: 0; color: #000; font-size: 34pt; }
    .buehne-blatt.dichte-2 { font-size: 30pt; }
    .buehne-blatt.dichte-3 { font-size: 26pt; }
    .buehne-blatt.dichte-4 { font-size: 21pt; }
    .buehne-blatt.dichte-5 { font-size: 16.5pt; }
    .buehne-blatt.dichte-6 { font-size: 13.5pt; }
    .buehne-blatt.dichte-7 { font-size: 11.5pt; }
    .buehne-kopf { border-color: #000; }
    .buehne-kopf p, .buehne-info { color: #333; }
    .buehne-trenner { padding-top: .25em; border-top: 1.5pt solid #000; color: #000; }
    .buehne-song { break-inside: avoid; }
    .buehne-song::marker { color: #000; }
    .buehne-notiz { display: none; }
    .buehne-gig-notiz { color: #000; font-weight: 700; }
}

/* ---------------------------------------------------------------- the poster for a gig */

/* only the poster and its controls: no menu, no footer */
.plakat-seite { background: #2a2422; }
.plakat-seite .kopf, .plakat-seite .fuss, .plakat-seite .entwurf, .plakat-seite .sprung { display: none; }
.plakat-steuer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem var(--rand);
}
.plakat-steuer > a { color: var(--gedimmt); }
.plakat-steuer .sg-filter { margin: 0; }
.plakat-steuer .knopf { border: 0; cursor: pointer; }
.plakat-zeile-form { display: flex; flex-wrap: wrap; gap: .4rem; }
.plakat-zeile-form input {
    min-width: 0;
    width: 15rem;
    padding: .45rem .6rem;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    background: #140c0b;
    color: var(--tinte);
    font: .92rem/1.2 var(--schrift-text);
}
.plakat-hinweis { flex-basis: 100%; margin: 0; color: var(--gedimmt); font-size: .85rem; }

/* A4 and A3 have the same proportions (1 : square root of 2): everything inside is measured in
   the poster's width (cqw), so it is the same poster on screen, on A4 and on A3. */
.plakat {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92vw, 40rem);
    aspect-ratio: 210 / 297;
    margin: 0 auto 3rem;
    overflow: hidden;
    background: #120a09;
    color: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.plakat .buehne { --figur: 22cqw; flex: none; padding-top: 6cqw; }
.plakat .buehne-schild-stecker { width: 92cqw; }
.plakat .buehne-kegel span { width: 36cqw; }
.plakat .buehne-band { padding-bottom: 1.4rem; }
.plakat .figur-band, .plakat .figur-schild-hinten { display: none; }
.plakat .figur a { pointer-events: none; }
.plakat .neon-an, .plakat .neon-flacker { animation: none; }
.plakat-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8cqw;
    padding: 1cqw 6cqw;
    text-align: center;
}
.plakat-text p { margin: 0; }
.plakat-motto { font: 7.6cqw/1 var(--schrift-plakat); letter-spacing: .02em; text-transform: uppercase; }
.plakat-motto span { display: block; color: var(--neon-roehre); font: italic 900 4.2cqw/1.1 var(--schrift-platte); text-transform: none; }
.plakat-text .plakat-unter { margin-bottom: 2cqw; color: #e6dccd; font-size: 2.9cqw; }
.plakat-datum { color: var(--amber); font: 9cqw/1 var(--schrift-plakat); }
.plakat-tag { display: block; margin-bottom: .4cqw; color: #fff; font-size: 3.8cqw; letter-spacing: .14em; text-transform: uppercase; }
.plakat-ort { font-size: 5cqw; line-height: 1.15; }
.plakat-ort strong { font-family: var(--schrift-fett); }
.plakat-zeit { color: #e6dccd; font-size: 3.4cqw; }
.plakat-text .plakat-zeile {
    margin-top: 1.2cqw;
    padding: .8cqw 2.6cqw .6cqw;
    background: var(--amber);
    color: #1b1412;
    font: 3.6cqw/1.1 var(--schrift-plakat);
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(-2deg);
}
.plakat-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4cqw;
    padding: 1.5cqw 6cqw 4cqw;
}
.plakat-qr { flex: none; width: 16cqw; height: 16cqw; border-radius: 1cqw; }
.plakat-fuss p { margin: 0; color: #e6dccd; font-size: 2.8cqw; line-height: 1.3; text-align: right; }
.plakat-fuss strong { display: block; color: #fff; font: 5cqw/1.1 var(--schrift-fett); }

@page plakat-a4 { size: A4; margin: 0; }
@page plakat-a3 { size: A3; margin: 0; }
@media print {
    .plakat-seite { background: none; }
    .plakat-steuer { display: none; }
    .plakat { width: 210mm; height: 297mm; aspect-ratio: auto; margin: 0; box-shadow: none; page: plakat-a4; }
    .plakat-a3 { width: 297mm; height: 420mm; page: plakat-a3; }
}