/* ======================================================================
   Neues Design ("Vorschlag Gevibed"), auf den Schritt-1-Aufbau adaptiert.

   Liegt ueber dem alten Theme-Stylesheet (public/css/app.css) und ueber-
   schreibt es. Wo app.css mit !important arbeitet, tragen die Regeln hier
   eine id (meist #shows) — eine id schlaegt jede Zahl von Klassen.

   Der Entwurf fuehrt genau eine Schrift (Helvetica) in genau einem Grad,
   darum steht die Typografie ganz oben und ohne Ausnahmen.
   ====================================================================== */

:root {
  /* Grundfarbe. app.css referenziert sie an den Stellen, an denen frueher
     #ffe100 stand. */
  --brand: #00acd4;
  --ink:   #0a0a0a;
  --paper: #f2fbfd;
  --line:  rgba(10, 10, 10, 0.28);

  /* Genau eine Schrift, genau ein Grad — so haelt es der Entwurf
     (--font / --fs auf :root, font-weight 500 durchgehend).

     "Helvetica" zeigt hier wirklich auf Helvetica. Bis eben beschattete eine
     @font-face-Familie dieses Namens in app.css die echte Schrift, sodass
     jedes `font-family:Helvetica` auf HelveticaNeueBold landete; die Datei
     heisst dort jetzt HelveticaNeueBold und wird nicht mehr gebraucht — das
     neue Design kennt keinen fetten Schnitt. */
  --font: Helvetica, Arial, "Liberation Sans", sans-serif;
  --fs:   16px;
  --fw:   500;

  /* Ein einziger Faktor fuer alle Formen, siehe unten. Auf schmalen Schirmen
     kleiner, damit die Formen dort so gross bleiben wie bisher — die Linien
     sind in einer Ansicht immer gleich dick, das ist der Zweck. */
  --shape-k: 0.62;

  /* Abstand oben und unten an jeder Sektion. Steht hier und nicht nur an
     `.main > section`, weil das offene Mobile-Menue damit rechnet: seine
     erste Zeile soll genau dort sitzen, wo nach einem Sprung der
     Sektionstitel zu liegen kommt. */
  --section-pad: 88px;

  /* Der Schlagschatten der Cover, aus dem Entwurf. Er steht hier einmal und
     wird vom Startbereich und vom Store benutzt: frueher war er in die vier
     alten Cover *hineingezeichnet* (ein harter schwarzer Rahmen, 14px oben
     und links, 25px unten und rechts, auf einer 1435px-Leinwand mit weissem
     Rand). Die Bilder sind jetzt randlos, der Schatten kommt aus CSS und
     sieht damit auf allen Covern gleich aus.

     Ecken scharf: der Entwurf setzt `border-radius:2px` auf das Cover, das
     ist hier bewusst nicht uebernommen. */
  --cover-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 18px 34px -10px rgba(0, 0, 0, 0.38),
    0 40px 70px -20px rgba(0, 0, 0, 0.32);
}

/* --- Grundsatz -----------------------------------------------------------
   app.css setzt body auf TimesNR/18px und die Ueberschriften auf 24px/700.
   Beides ist hier vollstaendig ersetzt. */
body.body {
  font-family: var(--font);
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--brand);
  -webkit-font-smoothing: antialiased;
}

/* Ein Grad fuer alles. Der Entwurf schreibt h1..h3, p, ul, li ausdruecklich
   auf --fs; hier zusaetzlich alles andere, was auf dieser Seite vorkommt. */
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd,
figcaption, blockquote, address,
a, strong, b, em, i, small, cite, span,
button, input, select, textarea {
  font-family: inherit;
  font-size: var(--fs);
  font-weight: var(--fw);
  line-height: 1.5;
}

/* normalize.css setzt b/strong auf `bolder` — es gibt keinen fetten Schnitt. */
strong, b { font-weight: var(--fw); }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* --- Raster --------------------------------------------------------------
   Der Inhalt sitzt in .wrap (1180px), die Navileiste ausdruecklich nicht —
   die laeuft ueber die ganze Breite und hat nur denselben Innenabstand.
   Beides steht so im Entwurf. */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
}

/* Die Sektionen liegen mitten in der Formen-Staffelung (siehe unten), der
   z-index gehoert also zum Raster. 10 ist bewusst kein 1: darunter und
   darueber muss Platz fuer die Formen sein, damit sich der Inhalt zwischen
   ihnen hindurchschiebt statt vor oder hinter einer Folie zu liegen. */
.main > * {
  position: relative;
  z-index: 10;
}
.main > section { padding: var(--section-pad) 0; }

/* app.css polsterte <main> unten um 15vh bzw. calc(22vw - 140px) auf, damit
   das fixierte Bandfoto am Seitenende sichtbar wurde. Das Foto ist weg. */
.main { padding-bottom: 0 !important; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.section-title {
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}
.section-num { letter-spacing: 0.1em; }

/* Sprungmarken muessen unter der klebenden Leiste durch (site.js misst). */
.scrollspy { scroll-margin-top: var(--nav-offset, 0px); }

/* ======================================================================
   Navigation
   ====================================================================== */

/* Eine Leiste, transparent, von der ersten Bildschirmzeile an oben klebend.

   pointer-events sind auf der Huelle aus und nur auf den Bedienelementen
   wieder an — nicht auf <nav>. Das ist auf Desktop wichtig, weil die Leiste
   dort durchsichtig bleibt: <nav> ist ein 76px hoher Streifen ueber die volle
   Breite, und mit pointer-events:auto darauf schluckt es jeden Klick auf den
   Inhalt, der darunter durchscrollt — sichtbar, aber nicht anklickbar.
   Nachgemessen: an vier von sechs Stellen auf Hoehe 40px landete der Klick
   auf .nav statt auf dem Store-Eintrag darunter. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}
.brand,
.nav-toggle,
.primary-links a,
.socials .social-links-item { pointer-events: auto; }

/* Die Leiste bleibt auf jeder Breite durchsichtig, wie im Entwurf — der
   Inhalt laeuft sichtbar unter ihr durch. Unter 1024px faerbte sie sich
   frueher in die Grundfarbe, sobald der Startbereich durch war (`.is-solid`);
   das ist raus, samt der Messung in site.js, die die Klasse setzte.

   Im offenen Menue braucht die Leiste keinen eigenen Grund: <body> traegt
   dort die Grundfarbe und <main> ist ausgeblendet. */

.nav {
  /* Beide Masse auch als Token, aus demselben Grund wie --section-pad: das
     offene Menue rechnet seine erste Zeile daraus aus. */
  --nav-pad-y: 20px;
  --nav-gap: 16px;
  /* Innenabstand der Links, oben und unten. Auch das ein Token: das offene
     Menue setzt ihn kleiner und muss ihn zugleich aus seiner Ausrichtung
     herausrechnen. */
  --link-pad-y: 6px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  padding: var(--nav-pad-y) clamp(18px, 4vw, 48px);
  flex-wrap: wrap;
}

.brand {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* Ab 1024px loest sich der Container auf und Links und Socials werden zu
   Flex-Elementen der Leiste — die eine Zeile des Entwurfs. Darunter ist er
   der (geschlossene) Menue-Block; aufgeklappt wird er von app.css mit
   `body.nav-open #nav-container { display:block !important }`. */
.nav-panel { display: none; }
@media (min-width: 1024px) {
  .nav-panel { display: contents; }
}

/* app.css setzt #nav-container auf position:sticky (Rest der alten
   Zwei-Balken-Loesung) — das klebt jetzt die Leiste selbst. */
#nav-container { position: static; }

.primary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-links a {
  text-decoration: none;
  padding: var(--link-pad-y) 2px;
  display: inline-block;
  position: relative;
}
/* Der Unterstrich faehrt von links ein. Er ist im Entwurf die einzige
   Auszeichnung der Navigation — deshalb markiert er auch den Abschnitt, in
   dem man gerade steht (.active kommt vom Scrollspy in site.js). app.css
   faerbte den dafuer ein, was auf der transparenten Leiste nicht mehr
   funktioniert: Grundfarbe auf Grundfarbe. */
.primary-links a::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.primary-links a:hover::after,
.primary-links a:focus-visible::after,
.primary-links a.active::after { transform: scaleX(1); }

/* app.css: `a:hover { color:#fff }` und `.nav-item__link.active { color:… }` */
.primary-links a:hover,
.primary-links a.nav-item__link.active { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .primary-links a::after { transition: none; }
}

/* --- Socials -------------------------------------------------------------
   Im Entwurf schwarze Kreise mit Glyphe in der Grundfarbe. Der Kreis kommt
   jetzt aus CSS; das <svg class="icon-bg"> des Partials (Font-Awesome-
   fa-stack-Nachbau) wird nicht mehr gebraucht.

   Die Glyphen haben nicht-quadratische viewBoxen (facebook-f 320x512,
   soundcloud 640x512), darum Hoehe setzen und die Breite dem
   Seitenverhaeltnis lassen. */
.socials {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.socials li { display: flex; }
.socials .social-links-item {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--brand);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease;
}
.socials .icon-stack {
  width: auto;
  height: auto;
  font-size: inherit;
}
.socials .icon-bg { display: none; }
.socials .icon-glyph {
  position: static;
  height: 14px;
  width: auto;
  fill: currentColor;
}
.socials .social-links-item:hover {
  background: var(--paper);
  color: var(--ink);
}

/* --- Hamburger -----------------------------------------------------------
   Nur unter 1024px. Er sitzt am rechten Ende der Leiste und wird von deren
   align-items:center zentriert — die frueher noetige Rechnung gegen die
   Zeilenmitte der grossen Wortmarke entfaellt mit dem einen Schriftgrad. */
.nav-toggle {
  display: none;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  line-height: 0;
}
@media (max-width: 1023px) {
  .nav-toggle { display: block; }
}

/* app.css skalierte den Button zwischen 768 und 1023px um das 1.7-fache
   (Ueberbleibsel des gelben Punkts) und schob ihn um 1px nach oben. */
#nav-toggle { margin-top: 0; transform: none; }

/* app.css setzt `button:focus { outline: 5px auto … }` — auf :focus, nicht auf
   :focus-visible. Auf dem Telefon blieb der Rahmen darum nach jedem Antippen
   stehen, bis man woanders hintippte. Weg damit fuer Finger und Maus; wer mit
   der Tastatur navigiert, sieht weiterhin, wo er steht. */
#nav-toggle:focus { outline: none; }
#nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.nav-toggle__bars {
  --burger-w: 24px;
  display: block;
  position: relative;
  width: var(--burger-w);
  height: calc(var(--burger-w) * 0.72);
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle__bar:nth-child(3) { bottom: 0; }

/* offen: oberer und unterer Balken kreuzen sich, der mittlere verschwindet */
body.nav-open .nav-toggle__bar:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) {
  bottom: auto;
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}
/* app.css faerbt den Toggle im offenen Zustand in die Grundfarbe — ein
   Schliesskreuz muss man sehen, es bleibt schwarz. */
body.nav-open #nav-toggle { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar { transition: none; }
}

/* --- offenes Mobile-Menue ------------------------------------------------
   app.css macht daraus einen Vollbild-Layer (body.nav-open setzt height:100vh
   und blendet <main> aus) und faerbt ihn weiss. Weiss kommt im Entwurf
   nirgends vor — das Menue bleibt in der Grundfarbe. (Ohne diese Zeile
   entstuende dasselbe Ergebnis aus der Kaskade, weil `body.body` hier spaeter
   steht; es soll aber eine Entscheidung sein und kein Zufall.) */
body.nav-open { background-color: var(--brand); }

/* Im offenen Zustand wird die Leiste zum Raster ueber die volle Bildhoehe:
   obere Zeile (Wortmarke | Hamburger) so hoch wie ihr Inhalt, darunter eine
   Zeile `1fr`, die den Rest nimmt. Das Menue ist damit ein Element, das bis
   an den unteren Bildrand reicht — und `margin-top:auto` setzt die Socials
   dort ab. Als Flex-Zeilenumbruch ging das nicht: `align-content` verteilt
   ganze Zeilen, die Wortmarke waere mitgewachsen. */
body.nav-open .nav {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Mit id und Klasse, nicht nur mit der Klasse: app.css setzt
   `body.nav-open #nav-container { display:block !important }`, und eine id
   schlaegt jede Zahl von Klassen — auch bei !important auf beiden Seiten. Mit
   `.nav-panel` allein blieb der Block ein Block, und `margin-top:auto` an den
   Socials tat nichts. */
body.nav-open #nav-container.nav-panel {
  grid-column: 1 / -1;
  align-self: stretch;      /* sonst zentriert `align-items:center` das Menue */
  display: flex !important;
  flex-direction: column;
  width: 100%;

  /* Die erste Zeile sitzt dort, wo nach einem Sprung der Sektionstitel zu
     liegen kommt. Der Sprung setzt die Sektion auf --nav-offset (die Hoehe
     der geschlossenen Leiste), der Titel steht --section-pad darunter:

       Ziel        = navPadY + Zeile + navPadY + sectionPad
       Panel-Kante = navPadY + Zeile + navGap
       padding-top = Ziel - Panel-Kante - --link-pad-y (Innenabstand des Links)

     Die Hoehe der Wortmarkenzeile kuerzt sich dabei heraus — die Rechnung
     stimmt also auch, wenn die Zeile einmal anders hoch ist. */
  padding-top: calc(var(--nav-pad-y) + var(--section-pad) - var(--nav-gap) - var(--link-pad-y));
  padding-bottom: 0;
}
/* Enger als in der Leiste: 24px Zeile + 2x4px Innenabstand, kein gap — 32px
   von Zeile zu Zeile statt 56px im ersten Entwurf. Die Zeilenhoehe bleibt bei
   1.5 wie ueberall sonst: sie hier zu kuerzen wuerde die Glyphen im Kasten
   nach oben ruecken und die Ausrichtung auf den Sektionstitel um 2.4px
   verfehlen. Der Innenabstand ist der ehrlichere Hebel — er ist zugleich die
   Antippflaeche, darum nicht weiter herunter als 4px. */
body.nav-open .nav { --link-pad-y: 4px; }
body.nav-open .primary-links {
  flex-direction: column;
  gap: 0;
}
/* Socials an den unteren Bildrand, mit demselben Abstand wie oben die
   Wortmarke (der padding-bottom von .nav). */
body.nav-open .socials { margin-top: auto; }

/* ======================================================================
   Startbereich: Album-Cover statt Bandfoto
   ====================================================================== */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 8vh 0 6vh;
}
/* .wrap ist hier ein Flex-Element und schrumpfte sonst auf die Breite des
   Covers (496px statt 1180px). Zentriert war es trotzdem — durch `margin:0
   auto` —, aber die Box deckte sich nicht mit der der uebrigen Sektionen. */
.hero .wrap { width: 100%; }

/* Der Startbereich ist die einzige Sektion, die KEINEN eigenen Stapelkontext
   aufmacht (z-index:auto statt der 10 aus `.main > *`). Nur so koennen Cover
   und Beschriftung sich einzeln zwischen den Formen einordnen:

     Cover        10  — Formen mit --z 1..9 liegen dahinter, 11..20 davor.
                        Genau das ist das Umgarnen.
     Beschriftung 30  — ueber allen Formen. Sie nennt Titel, Format und Jahr;
                        das ist die eine Zeile, die am Seitenanfang lesbar
                        bleiben muss, und eine gefuellte Form davor deckte sie
                        sonst zu.

   Die Formen im Startbereich erreichen das 101er-Band nicht (ihre Tiefen sind
   in site.js fest gesetzt und bleiben unter der Schwelle), die 30 genuegt
   also. */
.hero { z-index: auto; }
.hero-cover,
.hero-caption { position: relative; }
.hero-cover { z-index: 10; }
.hero-caption { z-index: 30; }
.hero-cover {
  width: min(400px, 62vw);
  margin: 0 auto 20px;
}
/* Das Cover ist ein Link auf seine Platte im Store (siehe site.js). */
.hero-cover a { display: block; }
.hero-cover img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--cover-shadow);
}
.hero-caption {
  text-align: center;
  margin: 0;
}
.hero-caption strong {
  display: block;
  text-transform: uppercase;
}

/* ======================================================================
   Shows — das Bandsintown-Widget auf die Tabelle des Entwurfs getrimmt.

   Das Widget baut sein Markup selbst und app.css bearbeitet es mit
   !important auf bis zu vier Klassen Spezifitaet. Alle Regeln hier tragen
   deshalb #shows: eine id schlaegt jede Zahl von Klassen.

   Nebenbei behoben: app.css blendete `.bit-date` im Desktop-Layout aus und
   erwartete das Datum in `.bit-date-copy`. Das Widget liefert die Klasse
   nicht mehr — auf Desktop stand die Tabelle ohne Datumsspalte da.
   ====================================================================== */

#shows .bit-widget { font-size: var(--fs) !important; }

/* --- Reiter (Upcoming / Past) --------------------------------------------
   Aktiv ist der Reiter OHNE .bit-clickable — das Widget haengt die Klasse
   dem jeweils anderen an. */
#shows .bit-nav-bar {
  display: flex;
  gap: 26px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#shows .bit-nav-bar { align-items: flex-start; }
/* Beide Reiter tragen den 2px-Rand (der inaktive unsichtbar), sonst waeren
   ihre Boxen unterschiedlich hoch und die Schrift um 2px versetzt. Das
   !important muss sein: app.css setzt `border:none !important` auf
   .bit-clickable — und die Klasse traegt genau der inaktive Reiter. */
#shows .bit-event-list-title {
  padding-bottom: 2px;
  cursor: pointer;
  border-bottom: 2px solid transparent !important;
}
#shows .bit-event-list-title:not(.bit-clickable) { border-bottom-color: var(--ink) !important; }
/* app.css haengte dem ersten Reiter ein "|" als Trenner an; das macht der gap. */
#shows .bit-show-upcoming { padding-right: 0 !important; }
#shows .bit-show-upcoming::after { content: none !important; }
#shows .bit-nav-bar-container { margin-bottom: 24px !important; }

/* --- Zeile ---------------------------------------------------------------
   Der Entwurf setzt die Zeile als ein Raster 150px | 1fr | 1fr | auto. Im
   Widget-Markup liegen Datum, Venue und Ort aber gemeinsam in einem <a>,
   darum zwei verschachtelte Raster: die Zeile traegt Inhalt | Ticket, der
   Link darin die drei Textspalten. So bleibt der Link ein Element. */
#shows .bit-event {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  line-height: 1.5 !important;
  transition: background .2s ease;
}
#shows .bit-event:hover { background: rgba(10, 10, 10, 0.06) !important; }

#shows .bit-event > a.bit-details {
  display: grid !important;
  grid-template-columns: 150px 1fr 1fr;
  gap: 18px;
  align-items: center !important;
  text-decoration: none !important;
  min-width: 0;
}
#shows .bit-date {
  display: block !important;
  width: auto !important;
}
#shows .bit-titleWrapper { min-width: 0; }
#shows .bit-venue { text-transform: uppercase !important; }
/* Das Widget setzt den Ort rechtsbuendig und mit eigenen Raendern; im
   Entwurf steht er linksbuendig in seiner Spalte wie Datum und Venue. */
#shows .bit-location {
  text-align: left !important;
  margin: 0 !important;
}

/* --- Ticket-Knopf --------------------------------------------------------
   app.css nagelt .bit-event-buttons auf 70px Breite und macht aus allen
   .bit-button reine Textlinks; hier wird daraus wieder die Pille des
   Entwurfs. */
#shows .bit-event-buttons {
  width: auto !important;
  display: flex !important;
  justify-self: end;
}
#shows .bit-offers-container { width: auto !important; }
#shows .bit-offers.bit-button,
#shows .bit-past-events-show-all-button {
  display: inline-block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
  padding: 10px 18px !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 999px !important;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background .2s ease, color .2s ease;
}
#shows .bit-offers.bit-button {
  background: var(--brand) !important;
  color: var(--ink) !important;
}
#shows .bit-past-events-show-all-button {
  background: transparent !important;
  color: var(--ink) !important;
  margin: 24px 0 0 14px !important;
}
#shows .bit-offers.bit-button:hover,
#shows .bit-past-events-show-all-button:hover {
  background: var(--ink) !important;
  color: var(--brand) !important;
}
#shows .bit-offers-text { color: inherit !important; }

/* Unter 880px stapelt der Entwurf die Zeile. Datum, Venue und Ort kommen
   untereinander, die Pille bleibt rechts daneben. */
@media (max-width: 880px) {
  #shows .bit-event > a.bit-details {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #shows .bit-event-buttons { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  #shows .bit-event,
  #shows .bit-offers.bit-button,
  #shows .bit-past-events-show-all-button { transition: none; }
}

/* ======================================================================
   Inhalt der uebrigen Sektionen

   Die Templates nutzen weiterhin die Klassennamen des alten
   WordPress-Themes (.post, .format-video, .category-store, .wp-block-image),
   weil app.css darueber das responsive Video-Embed und die Vollbreiten-
   Bilder liefert. Was hier steht, ergaenzt oder korrigiert das.
   ====================================================================== */

/* Bilder im Fliesstext fuellen die Spalte ... */
.post-content img { width: 100%; height: auto; display: block; }
/* ... Pressefotos skalieren dagegen nur nach unten. */
.wp-block-image img { max-width: 100%; height: auto; display: block; }
figcaption { margin-top: .5em; }

/* app.css zieht Videos und Bilder auf Mobile um 1rem nach aussen — das war
   der Innenabstand des alten .container. Jetzt ist es der von .wrap. */
@media only screen and (max-width: 768px) {
  .post-video-container,
  .wp-block-image {
    margin-left: calc(-1 * clamp(18px, 4vw, 48px));
    margin-right: calc(-1 * clamp(18px, 4vw, 48px));
  }
  .post-video-container figcaption,
  .wp-block-image figcaption {
    margin-left: clamp(18px, 4vw, 48px);
    margin-right: clamp(18px, 4vw, 48px);
  }
}

/* --- news --------------------------------------------------------------- */
.news-item.is-hidden { display: none; }
/* WordPress wrapped post images in a gallery <figure> that added 16px below
   the image; flow-root keeps the margin from collapsing out of .post-content. */
#news .post-content { display: flow-root; }
#news .post-content > img { margin-bottom: 1rem; }
.news-load-more { text-decoration: underline; }

/* Der Ladehinweis des Widgets ist ein <img> mit einem data:-SVG: acht graue
   Kreise (#8a8a8a), die der Reihe nach aufblinken. Grau kommt auf dieser
   Seite nicht vor, und der Kreisel passt nicht zu einer Tabelle aus
   Haarlinien.

   Ersetzt durch einen 2px-Balken in Schwarz, der von links einwaechst und
   nach rechts verschwindet — dieselbe Geste wie der Unterstrich der
   Nav-Links, nur endlos.

   Die Regel haengt am :has(), und zwar mit Absicht auch die, die das <img>
   ausblendet: kennt ein Browser :has() nicht, sind beide Selektoren
   ungueltig, das graue Original bleibt stehen und niemand sitzt vor einem
   leeren Kasten. Sobald die Termine da sind, nimmt das Widget das <img> aus
   dem DOM, :has() greift nicht mehr und der Balken ist weg. */
#shows .bit-widget:has(img.bit-widget-loading) img.bit-widget-loading {
  display: none;
}
#shows .bit-widget:has(img.bit-widget-loading)::after {
  content: "";
  display: block;
  width: 140px;
  max-width: 100%;
  height: 2px;
  margin: 16px 0;
  background: var(--ink);
  transform-origin: left;
  animation: shows-loading 1.1s ease-in-out infinite;
}
@keyframes shows-loading {
  0%     { transform: scaleX(0); transform-origin: left; }
  49.9%  { transform: scaleX(1); transform-origin: left; }
  50%    { transform: scaleX(1); transform-origin: right; }
  100%   { transform: scaleX(0); transform-origin: right; }
}
/* Ohne Bewegung bleibt der Balken stehen und atmet nur. */
@media (prefers-reduced-motion: reduce) {
  #shows .bit-widget:has(img.bit-widget-loading)::after {
    animation: shows-loading-still 1.6s ease-in-out infinite;
  }
  @keyframes shows-loading-still {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
  }
}

/* --- store -------------------------------------------------------------- */
.post.category-store .post-thumbnail-container img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--cover-shadow);
}

/* Sprungziel fuer das Cover im Startbereich. Wie bei .scrollspy muss der
   Platz unter der klebenden Leiste frei bleiben; die 24px sind der Abstand,
   damit die Kachel nicht an der Leiste klebt. */
.post.category-store { scroll-margin-top: calc(var(--nav-offset, 0px) + 24px); }

/* --- downloads / info ---------------------------------------------------
   Hier standen die Schritt-1-Abstaende, die die leeren <p>&nbsp;</p> der
   alten Seite pixelgenau nachstellten (27px hier, 43px dort, 59px oben am
   Kontaktblock) — samt der 24px-Fett-Typo, die die Blocks als <h5>/<h6>
   auszeichnete. Beides gehoert zum alten Layout und ist mit dem einen
   Schriftgrad und dem Rhythmus des Entwurfs ersetzt. */
.photo-note { margin-bottom: 2rem; }
.info-contact { margin-top: 2.5rem; }
.info-links { margin-top: 1.5rem; }
.supporters { margin-top: 2.5rem; }
/* Die Logos stehen untereinander mit gleichem Abstand. Der haengt bewusst an
   den Bildern, nicht an den Links: nur Foerderer mit URL bekommen im Template
   ein <a>, Landis & Gyr hat keine. Die <br> aus dem Template braucht es nicht,
   den Umbruch macht display:block. */
.supporters br { display: none; }
.supporters .supporter-link { display: block; margin: 0; }
.supporters .supporter-logo { display: block; margin-top: 24px; }

/* ======================================================================
   Parallax-Formen

   Eine Ebene ueber die ganze Seite — aber keine Folie: jede Form bekommt
   ihren eigenen Stapelplatz (--z, gewuerfelt in site.js), und die Sektionen
   liegen mittendrin. Der Inhalt schiebt sich dadurch zwischen den Formen
   hindurch, statt geschlossen vor oder hinter ihnen zu liegen. Vorher waren
   es zwei feste Ebenen, und man sah der Seite an, was zusammengehoert.

   Die Formen sind in der Grundfarbe geflutete Linienzeichnungen — auf dem
   blauen Grund bleibt nur die schwarze Linie stehen, die Flaeche deckt ab,
   was dahinterliegt. Genau davon leben die vorderen.

   Die Ebene ist pointer-events:none. Verdeckt wird also nur optisch,
   Links und Bilder darunter bleiben anklickbar.
   ====================================================================== */

.shape-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Die Ebene spannt die ganze Seite, darum ist <body> der Bezugsrahmen. */
body.body { position: relative; }

/* .shape-field traegt selbst KEINEN z-index. Das ist der ganze Trick: mit
   einem waere sie ein eigener Stapelkontext, und alle Formen laegen als Block
   vor oder hinter dem Inhalt — die zwei Folien von vorher. Ohne z-index
   (und position:absolute allein erzeugt keinen Stapelkontext, overflow:hidden
   auch nicht) konkurrieren die --z der einzelnen Formen direkt mit den
   Sektionen.

   Die Skala:
      1 ..  9   hinter dem Inhalt
     10         die Sektionen
     11 .. 20   davor, aber unter der Navileiste
    101 ..109   auch ueber der Navileiste (die haelt 100)

   Unter dem Hintergrund von .main rutscht dabei nichts: .main ist nicht
   positioniert, sein Hintergrund malt darum vor allen positionierten
   Geschwistern mit z-index >= 0. */

/* Groesse: natuerliche Pixelbreite der Zeichnung mal EIN Faktor, fuer jede
   Form derselbe. Damit ist die Strichstaerke ueberall gleich — die Linien
   sind in allen fuenf Motiven gleich breit gezeichnet (~1.2px bei 1600px
   Bildbreite), also bleibt sie es auch nach dem Skalieren.

   Vorher trug jeder Platz eine eigene Breite in vw (52 bis 96) und site.js
   streute sie zusaetzlich um +-15%: die Strichstaerke schwankte damit um
   mehr als das Dreifache, und dasselbe Motiv sah bei jedem Aufruf anders
   gezeichnet aus.

   --nat traegt site.js aus der natuerlichen Breite des Bildes ein (die
   wechselt, weil die Motive pro Aufruf neu verteilt werden). Der Vorgabewert
   1600 ist die lange Kante aller fuenf Dateien. */
.shape {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: var(--z, 1);
  width: calc(var(--nat, 1600) * var(--shape-k) * 1px);
  will-change: transform;
  transform: translate(-50%, -50%)
             translate3d(var(--drift, 0px), var(--shift, 0px), 0)
             rotate(var(--spin, 0deg));
}
.shape img {
  display: block;
  width: 100%;
  height: auto;
}

/* Auf dem Telefon ist der Faktor kleiner: bei 0.62 waere jede Form rund
   1000px breit, auf einem 390px-Schirm also fast das Dreifache der Breite —
   deutlich mehr als die ~680px, die die Formen dort vorher hatten. 0.42
   trifft diesen Wert wieder. Es bleibt EIN Faktor fuer alle Formen, die
   Linien sind also weiterhin untereinander gleich dick. */
@media (max-width: 767px) {
  :root { --shape-k: 0.42; }
}

/* --- Formen im offenen Mobile-Menue --------------------------------------
   Im offenen Menue ist keine Form zu sehen. Das Menue ist ein fixer
   Vollbild-Layer ohne Scroll: was ein Menuepunkt an Form abbekommt, bliebe
   fuer immer darauf liegen.

   Eine stand hier laenger als Dekoration in der unteren rechten Ecke (fix
   positioniert, weil <body> im offenen Zustand auf 100vh schrumpft und die
   Ebene mit ihm). Auch die ist raus — das Menue ist jetzt leer bis auf die
   Wortmarke, die Punkte und die Socials. */
body.nav-open .shape { display: none; }