/* ==========================================================================
   tobisonic.de
   Handgeschriebenes CSS, kein Build-Schritt, keine externen Requests.

   Designentscheidungen, damit spaetere Aenderungen konsistent bleiben:
   - Eine Akzentfarbe fuer die ganze Seite: Ember (--ember).
   - Ein Theme fuer die ganze Seite: dunkel. Kein Abschnitt kippt ins Helle.
   - Radien: Flaechen und Medien 16px, Eingaben 12px, klickbare Textlabels
     als Pille. Keine anderen Werte.
   - Schriften liegen lokal unter assets/fonts. Kein Google-CDN.
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --ink: #100e0c;
  --ink-2: #191512;
  --ink-3: #221d19;
  --line: #2e2823;
  --line-2: #3f362e;

  --fg: #efeae3;
  --fg-2: #b8afa4;
  --fg-3: #8f8579;

  --ember: #e4693b;
  --ember-lift: #f5895e;
  --ember-wash: rgba(228, 105, 59, 0.13);

  --r-surface: 16px;
  --r-input: 12px;
  --r-pill: 999px;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1320px;
  --gap-y: clamp(4.5rem, 10vw, 9rem);
  --nav-h: 68px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --z-nav: 40;
  --z-drawer: 60;
  --z-grain: 80;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

/* Muss !important sein: mehrere Bloecke unten setzen display auf grid oder
   flex und wuerden das hidden-Attribut sonst ueberstimmen. */
[hidden] {
  display: none !important;
}

/* Nur fuer Screenreader sichtbar. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ember-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--ember);
  color: #140d09;
}

/* Feines Korn ueber der ganzen Seite. Fix positioniert und ohne
   Pointer-Events, damit es beim Scrollen nichts neu zeichnen muss. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* --- Typografie ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.t-hero {
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.1rem);
  font-weight: 700;
  letter-spacing: -0.038em;
}

.t-section {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  font-weight: 650;
  letter-spacing: -0.032em;
}

.t-card {
  font-size: clamp(1.2rem, 1.06rem + 0.6vw, 1.5rem);
  font-weight: 600;
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.24rem);
  color: var(--fg-2);
  line-height: 1.6;
  max-width: 46ch;
  text-wrap: pretty;
}

.prose {
  color: var(--fg-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1.1em;
}

.prose strong {
  color: var(--fg);
  font-weight: 600;
}

.meta {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: var(--gap-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--gap-y) * 0.66);
}

.section__head {
  max-width: 40ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head .lead {
  margin-top: 1.15rem;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  --btn-bg: var(--ember);
  --btn-fg: #150d08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.18s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.btn:hover {
  --btn-bg: var(--ember-lift);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn .i {
  width: 1.05em;
  height: 1.05em;
  transition: transform 0.25s var(--ease);
}

.btn:hover .i {
  transform: translateX(3px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line-2);
}

.btn--ghost:hover {
  --btn-bg: var(--ink-3);
  --btn-fg: var(--fg);
  border-color: var(--fg-3);
}

.btn--ghost:hover .i {
  transform: translateX(3px);
}

.btn--sm {
  padding: 0.62rem 1.15rem;
  font-size: 0.9375rem;
}

.btn--block {
  width: 100%;
}

/* Textlink mit Unterstrich, der beim Hover von links waechst. */
.link {
  color: var(--fg);
  text-decoration: none;
  background-image: linear-gradient(var(--ember), var(--ember));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.3s var(--ease), color 0.25s var(--ease);
}

.link:hover {
  background-size: 100% 1px;
  color: var(--ember-lift);
}

.i {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
}

/* --- Navigation ---------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ember);
  color: #150d08;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-input) 0;
  font-weight: 600;
}

.skip:focus {
  left: 0;
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav[data-stuck="true"] {
  background: rgba(16, 14, 12, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

/* Wortmarke.
   Ueberall steht das volle Lockup: Kopfzeile, Menue, Fuss. Es misst 528 zu
   142 Einheiten, also gut 3,7 zu 1. Gesteuert wird nur die Hoehe, die Breite
   folgt aus aspect-ratio. In der Kopfzeile sind das 38 Pixel Hoehe und damit
   141 Pixel Breite; der Name darin steht dann bei rund 14 Pixel. Ab 1024
   Pixel Fensterbreite waechst die Kopfzeile auf 76 Pixel, das Lockup auf 48.
   Unter 380 Pixel schrumpft es, damit Zeichen und Menueknopf daneben passen.
   .brand__mark bleibt als Reserve im Sprite, wird aber nicht mehr benutzt. */

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.brand__mark {
  width: 2rem;
  height: 1.85rem;
  flex: none;
  overflow: visible;
}

.brand__name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.36em;
}

.brand__name span {
  color: var(--ember);
}

/* Fuss: das Lockup traegt den Namen selbst, deshalb steht dort kein Text. */
.brand--foot {
  display: block;
}

.brand__lockup {
  display: block;
  width: clamp(230px, 24vw, 300px);
  height: auto;
  aspect-ratio: 528 / 142;
  overflow: visible;
}

/* In der Kopfzeile gibt die Hoehe den Ton an, die Breite folgt. Die Regel
   muss nach .brand__lockup stehen, sonst gewinnt dort das clamp() der
   Breite und das Logo wird so gross wie im Fuss. */
.brand__lockup--nav {
  width: auto;
  height: 2.375rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  padding: 0;
}

.nav__links a {
  text-decoration: none;
  color: var(--fg-2);
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: color 0.22s var(--ease);
}

.nav__links a:hover {
  color: var(--fg);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__social {
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--fg-3);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.nav__social:hover {
  color: var(--fg);
  border-color: var(--line);
}

.nav__social .i {
  width: 1.1rem;
  height: 1.1rem;
}

.nav__burger {
  display: none;
  padding: 0.5rem;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--fg);
}

.nav__burger .i {
  width: 1.35rem;
  height: 1.35rem;
}

/* Mobiles Menue */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--ink);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  /* visibility wird nicht weich ueberblendet, sondern geschaltet: beim
     Schliessen erst nach der Bewegung, beim Oeffnen sofort. Sonst laesst sich
     der Schliessknopf im ersten Frame nicht fokussieren. */
  transition: transform 0.42s var(--ease), visibility 0s linear 0.42s;
}

.drawer[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.42s var(--ease), visibility 0s;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) - var(--pad) + 1rem);
  margin-bottom: 2rem;
}

.drawer__links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.drawer__links a {
  display: block;
  padding: 0.7rem 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.drawer__foot {
  margin-top: auto;
  padding-top: 2rem;
}

.drawer__social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-3);
  text-decoration: none;
  transition: color 0.22s var(--ease);
}

.drawer__social:hover {
  color: var(--fg);
}

.drawer__social .i {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: stretch;
}

/* Die Hoehe haengt an der Breite, nicht nur an der Fensterhoehe. Sonst
   kippt das Seitenverhaeltnis des Ausschnitts zwischen Telefon und Tablet,
   und ein object-position, das auf dem Telefon sitzt, schneidet auf dem
   Tablet den Kopf ab. */
.hero__media {
  position: relative;
  order: -1;
  height: min(100vw, 58dvh);
  overflow: hidden;
}

/* Absolut positioniert, weil ein prozentuales height innerhalb von
   <picture> sonst nicht aufloest. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zeigt Gesicht, Mikrofon und Gitarre. Der Wert ist hoch, weil das Motiv
     im Hochformat weit unten steht. */
  object-position: 50% 58%;
}

/* Verlauf, damit die Kante zum Text hin weich auslaeuft. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 14, 12, 0.42) 0%,
    rgba(16, 14, 12, 0) 38%,
    rgba(16, 14, 12, 0.72) 88%,
    var(--ink) 100%
  );
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding-inline: var(--pad);
  padding-block: 1.5rem calc(var(--pad) + 1rem);
}

.hero__text .lead {
  max-width: 38ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.35rem;
}

/* --- Anlaesse: Bento ----------------------------------------------------- */

.bento {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  border: 1px solid var(--line);
  background: var(--ink-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  isolation: isolate;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}

.tile:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
}

/* Wo der Ausschnitt im Foto sitzt. Mobil ist die Kachel hoch und schmal, im
   Desktopraster breit und flach. Derselbe Wert passt deshalb nicht in beide.
   --pos gilt mobil, --pos-lg ab 900px, beide stehen im HTML an der Kachel.
   Ohne Angabe bleibt der Ausschnitt mittig. */
.tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 0.9s var(--ease);
}

.tile:hover .tile__img {
  transform: scale(1.04);
}

/* Stopps in Pixeln, nicht in Prozent. Sonst schuetzt der Verlauf eine hohe
   Kachel gut und eine flache Kachel gar nicht, und die Schrift steht ueber
   einem hellen Fenster. */
.tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(11, 9, 8, 0.95) 0px,
    rgba(11, 9, 8, 0.86) 90px,
    rgba(11, 9, 8, 0.6) 170px,
    rgba(11, 9, 8, 0.2) 280px,
    rgba(11, 9, 8, 0.38) 100%
  );
}

/* Gefaerbte Kachel, damit das Raster nicht nur aus Fotos und Leerflaechen
   besteht. */
.tile--wash {
  background:
    radial-gradient(120% 100% at 12% 0%, var(--ember-wash), transparent 62%),
    var(--ink-2);
}

.tile__body {
  color: var(--fg-2);
  margin-top: 0.6rem;
  max-width: 34ch;
  font-size: 0.9688rem;
}

.tile--lead {
  min-height: 400px;
}

.tile--lead .t-card {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
}

.tile--lead .tile__body {
  max-width: 40ch;
}

/* --- Musik: Vollbreites Band --------------------------------------------- */

/* Die untere Schranke ist bewusst hoch: Auf dem Telefon ergaeben 54vw einen
   flachen Streifen, in dem vom Motiv nur der Oberkoerper bliebe. */
.band {
  position: relative;
  height: clamp(390px, 70vw, 680px);
  overflow: hidden;
}

/* Der Filter nimmt dem Abendhimmel das kraeftige Blau. Ohne ihn bricht das
   Bild aus der warmen Palette der uebrigen Seite aus. */
.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  filter: saturate(0.6) sepia(0.18) contrast(1.04);
}

/* Der obere Stopp steht in Pixeln, nicht in Prozent. Sonst waechst die
   dunkle Kante mit der Bandhoehe mit und legt sich auf dem Telefon genau
   ueber den Kopf und das Gegenlicht darum. */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      var(--ink) 0px,
      rgba(16, 14, 12, 0.28) 30px,
      rgba(16, 14, 12, 0.34) 62%,
      var(--ink) 100%
    );
}

.band__quote {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.band__quote p {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(1.6rem, 0.9rem + 3vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  max-width: 20ch;
  text-wrap: balance;
}

.band__quote em {
  font-style: normal;
  color: var(--ember);
}

.musik__cols {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.factlist {
  display: grid;
  gap: 0;
  margin-top: 0.5rem;
}

.factlist > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.factlist > div:last-child {
  border-bottom: 1px solid var(--line);
}

.factlist dt {
  color: var(--fg-3);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.factlist dd {
  margin: 0;
  color: var(--fg);
}

/* --- Repertoire ---------------------------------------------------------- */

.rep__controls {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.search {
  position: relative;
  max-width: 26rem;
}

.search .i {
  position: absolute;
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--fg-3);
  pointer-events: none;
}

.search input {
  width: 100%;
  padding: 0.82rem 1rem 0.82rem 2.9rem;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  color: var(--fg);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.search input::placeholder {
  color: var(--fg-3);
}

.search input:focus {
  border-color: var(--ember);
  background: var(--ink-3);
  outline: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg-2);
  font-size: 0.9063rem;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
    color 0.22s var(--ease);
}

.chip:hover {
  color: var(--fg);
  border-color: var(--fg-3);
}

.chip[aria-pressed="true"] {
  background: var(--ember);
  border-color: var(--ember);
  color: #150d08;
  font-weight: 600;
}

.rep__count {
  color: var(--fg-3);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.songs {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.15rem 2.5rem;
}

.song {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid rgba(46, 40, 35, 0.55);
}

.song__title {
  font-weight: 500;
  color: var(--fg);
}

.song__artist {
  color: var(--fg-3);
  font-size: 0.875rem;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}

.song[data-own="1"] .song__title {
  color: var(--ember);
}

.rep__empty {
  padding: 3rem 0;
  color: var(--fg-2);
  max-width: 42ch;
}

.rep__more {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* --- Eigener Song: Angebot ----------------------------------------------- */

.offer {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.offer__kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.9rem;
}

.offer .lead {
  margin-top: 1.15rem;
}

.offer__actions {
  margin-top: 1.9rem;
}

/* Die Ziffern kommen aus einem Zaehler, nicht aus Textzeichen. So liest ein
   Screenreader die Reihenfolge einmal vor und nicht zweimal. */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: schritt;
}

.steps li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  padding-block: 1.15rem;
  border-top: 1px solid var(--line);
}

.steps li:last-child {
  border-bottom: 1px solid var(--line);
}

/* Die Zeilenhoehe ist so gewaehlt, dass die Ziffer auf derselben Grundlinie
   sitzt wie das Wort daneben. */
.steps li::before {
  content: counter(schritt);
  grid-row: span 2;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ember);
}

.steps b {
  font-weight: 600;
  color: var(--fg);
}

.steps p {
  margin-top: 0.25rem;
  color: var(--fg-2);
  font-size: 0.9688rem;
  max-width: 38ch;
}

/* --- Stimmen: Karussell -------------------------------------------------- */

.voices {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Die Spur laeuft ueber die volle Breite, die erste Karte soll aber auf
     der Kante des Rasters starten. Deshalb dieselbe Rechnung wie in .wrap,
     nur als Innenabstand. */
  --spur-pad: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  padding-inline: var(--spur-pad);
  scroll-padding-inline: var(--spur-pad);
  padding-bottom: 1.25rem;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
}

.voices::-webkit-scrollbar {
  display: none;
}

/* Das li traegt Breite und Snap-Punkt, die figure darin die Optik. */
.voices > li {
  flex: 0 0 min(86vw, 25rem);
  scroll-snap-align: start;
  display: flex;
}

.voice {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.voice blockquote {
  margin: 0;
  color: var(--fg);
  font-size: 1.0313rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.voice figcaption {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
}

/* Der Name bekommt die ganze Zeile. Anlass und Quelle teilen sich die
   naechste. */
.voice figcaption b {
  flex: 0 0 100%;
  font-weight: 600;
  color: var(--fg);
}

.voice figcaption span {
  color: var(--fg-3);
}

/* Woher die Rueckmeldung stammt. Ein Etikett am rechten Rand, damit Karten
   aus beiden Quellen gleich aussehen. */
.voice__src {
  margin-left: auto;
  flex: none;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 0.05rem 0.55rem;
}

.voices__nav {
  display: flex;
  gap: 0.5rem;
}

.iconbtn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  /* Nicht `all`: das schliesst visibility und opacity mit ein. Der
     Schliessknopf im Menue erbt visibility und liesse sich im ersten Frame
     nicht fokussieren. */
  transition: background-color 0.22s var(--ease),
    border-color 0.22s var(--ease), opacity 0.22s var(--ease);
}

.iconbtn:hover:not(:disabled) {
  background: var(--ink-3);
  border-color: var(--fg-3);
}

.iconbtn:disabled {
  opacity: 0.3;
  cursor: default;
}

.iconbtn .i {
  width: 1.15rem;
  height: 1.15rem;
}

.voices__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --- Praktisch: Zahlenkacheln -------------------------------------------- */

.facts {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.fact {
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--ink-2);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fact b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ember);
}

.fact p {
  color: var(--fg-2);
  max-width: 34ch;
}

/* --- Kontakt ------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.form {
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--fg);
}

.field label .req {
  color: var(--ember);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  color: var(--fg);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-3);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ember);
  background: var(--ink-3);
  outline: none;
}

.field .hint {
  font-size: 0.8125rem;
  color: var(--fg-3);
}

.field .err {
  font-size: 0.8125rem;
  color: var(--ember-lift);
  display: none;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--ember-lift);
}

.field[data-invalid="true"] .err {
  display: block;
}

.field--row {
  display: grid;
  gap: 1.15rem;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.28rem;
  accent-color: var(--ember);
  flex: none;
}

.check label {
  font-size: 0.9063rem;
  color: var(--fg-2);
  line-height: 1.5;
}

.check[data-invalid="true"] label {
  color: var(--ember-lift);
}

.check[data-invalid="true"] input {
  outline: 2px solid var(--ember-lift);
  outline-offset: 2px;
}

.form__status {
  border-radius: var(--r-input);
  padding: 0.9rem 1.1rem;
  font-size: 0.9375rem;
  display: none;
}

.form__status[data-show="true"] {
  display: block;
}

.form__status[data-kind="ok"] {
  background: var(--ember-wash);
  border: 1px solid var(--ember);
  color: var(--fg);
}

/* Der Hinweis liegt auf einer erhoehten Sektion. Ein Rahmen in --line-2 waere
   dort kaum sichtbar, deshalb traegt er dieselbe Akzentfarbe wie die
   markierten Felder. */
.form__status[data-kind="err"] {
  background: var(--ink);
  border: 1px solid var(--ember-lift);
  color: var(--fg);
}

.aside {
  display: grid;
  gap: 1.5rem;
}

.aside__img {
  border-radius: var(--r-surface);
  overflow: hidden;
  border: 1px solid var(--line);
}

.aside__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 58% 34%;
}

.direct {
  display: grid;
  gap: 0.15rem;
}

.direct a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--fg);
  transition: color 0.22s var(--ease);
}

.direct a:last-child {
  border-bottom: 1px solid var(--line);
}

.direct a:hover {
  color: var(--ember-lift);
}

.direct .i {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--fg-3);
}

/* --- Footer -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.foot__grid {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.foot h3 {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 1rem;
}

.foot ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.foot a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.22s var(--ease);
}

.foot a:hover {
  color: var(--fg);
}

.foot a .i {
  width: 0.95em;
  height: 0.95em;
  color: var(--fg-3);
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

/* --- Rechtstexte --------------------------------------------------------- */

.legal {
  padding-top: calc(var(--nav-h) + var(--gap-y));
}

.legal .prose {
  max-width: 66ch;
}

.legal h1 {
  margin-bottom: 1.6rem;
}

.legal h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  color: var(--fg);
}

.legal h3 {
  font-size: 1.0625rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.legal p + p,
.legal ul {
  margin-top: 0.9rem;
}

.legal ul {
  padding-left: 1.15rem;
  display: grid;
  gap: 0.4rem;
}

.todo {
  display: inline-block;
  background: var(--ember-wash);
  border: 1px dashed var(--ember);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  color: var(--ember-lift);
  font-size: 0.9em;
}

/* --- Abgesetzte Abschnitte ----------------------------------------------- */

/* Zwei Abschnitte liegen eine Stufe hoeher als die Seite. Damit Eingaben
   darin nicht mit dem Untergrund verschmelzen, kippen sie auf die dunklere
   Basisfarbe. */
.section--raised {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}

.section--raised .search input,
.section--raised .field input,
.section--raised .field select,
.section--raised .field textarea {
  background: var(--ink);
}

.section--raised .search input:focus,
.section--raised .field input:focus,
.section--raised .field select:focus,
.section--raised .field textarea:focus {
  background: var(--ink-3);
}

.section--raised .voice,
.section--raised .tile,
.section--raised .fact {
  background: var(--ink-3);
}

/* Steht der Knopf auf hidden, faellt auch sein Abstand weg. */
.rep__more:has(> [hidden]) {
  display: none;
}

/* --- Scroll-Reveal ------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 639px) {
  .voices__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
}

/* Fotos in der schmalen Ansicht. Ohne diese Werte bekommt jedes Bild
   denselben Ausschnitt wie im breiten Raster, und dort steht die Person an
   einer anderen Stelle. */
@media (max-width: 899px) {
  /* Eine Kachel ueber die volle Breite ist hoch. Von 230px bleiben unter dem
     Text keine 140px Foto uebrig, zu wenig fuer eine Person. */
  .tile--photo {
    min-height: 300px;
  }

  /* Die grosse Kachel traegt vier Zeilen Text. Ohne diese Zeile zoege der
     Wert oben sie auf 300px herunter und der Text laege auf dem Motiv. */
  .tile--lead {
    min-height: 420px;
  }

  /* Unter dem Formular steht das Bild ueber die volle Breite. Hochkant
     fuellte es damit den halben Bildschirm. Quer zeigt es dieselbe Szene
     kompakter und naeher an Gitarre und Gesicht. */
  .aside__img img {
    aspect-ratio: 3 / 2;
    object-position: 50% 46%;
  }
}

@media (min-width: 640px) {
  .field--row {
    grid-template-columns: 1fr 1fr;
  }

  .facts {
    grid-template-columns: repeat(12, 1fr);
  }

  .fact:nth-child(1) {
    grid-column: span 5;
  }
  .fact:nth-child(2) {
    grid-column: span 7;
  }
  .fact:nth-child(3) {
    grid-column: span 7;
  }
  .fact:nth-child(4) {
    grid-column: span 5;
  }
}

@media (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
  }

  .tile__img {
    object-position: var(--pos-lg, 50% 50%);
  }

  .tile--lead {
    grid-column: span 7;
    grid-row: span 2;
    min-height: 0;
  }

  .bento .tile:nth-child(2),
  .bento .tile:nth-child(3) {
    grid-column: span 5;
  }

  .bento .tile:nth-child(4) {
    grid-column: span 5;
  }

  .bento .tile:nth-child(5) {
    grid-column: span 7;
  }

  .musik__cols {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }

  .offer {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }

  .songs {
    grid-template-columns: 1fr 1fr;
  }

  .contact {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }

  .foot__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: 3rem 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 76px;
  }

  .brand__lockup--nav {
    height: 3rem;
  }

  .hero {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  }

  .hero__media {
    order: 0;
    height: auto;
    /* Das Bild ragt unter die Textspalte. Der Verlauf blendet dadurch ueber
       Bildpixel aus statt an der Zellkante. Sonst entsteht dort eine
       sichtbare senkrechte Naht. */
    margin-left: -11vw;
  }

  .hero__media img {
    object-position: 50% 26%;
  }

  /* Auf dem Desktop laeuft das Bild nach links weich aus, statt nach
     unten. Deshalb ein anderer Verlauf als in der Mobilansicht. */
  .hero__media::after {
    background: linear-gradient(
      to right,
      var(--ink) 0%,
      var(--ink) 12%,
      rgba(16, 14, 12, 0.72) 26%,
      rgba(16, 14, 12, 0) 58%
    );
  }

  .hero__text {
    position: relative;
    z-index: 1;
    /* Bindet die linke Spalte an das Raster des restlichen Layouts. */
    padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)))
      clamp(2rem, 4vw, 4rem);
    padding-block: var(--nav-h) 4rem;
    gap: 1.75rem;
  }

  .songs {
    grid-template-columns: repeat(3, 1fr);
  }

  .rep__controls {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5rem;
  }
}

@media (max-width: 380px) {
  .brand__lockup--nav {
    height: 2.125rem;
  }
}

@media (max-width: 1023px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: grid;
    place-items: center;
  }

  .nav__cta .btn {
    display: none;
  }
}

@media (min-width: 1024px) {
  .drawer {
    display: none;
  }
}

/* --- Bewegung nur, wenn erwuenscht --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .tile:hover,
  .btn:hover {
    transform: none;
  }
}

@media print {
  body::after,
  .nav,
  .drawer,
  .hero__media,
  .band {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}