/* RESON Web · Onepager
   Alles leitet sich von --base ab. Farben, Schrift und Abstände nur in :root ändern.
   Formate (@media) stehen gesammelt am Ende. */


/* ==========================================================================
   Schrift
   ========================================================================== */

@font-face {
  font-family: 'Lakshmi';
  src: url('../fonts/Lakshmi-04-DEFI-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}


/* ==========================================================================
   Variablen
   ========================================================================== */

:root {
  --base: 16px;

  /* Farben: Rot, Pink und die Mischfarbe (Multiply von Rot und Pink, etwas dunkler) als Textfarbe */
  --color-red: #e30613;
  --color-pink: #f58cfa;   /* wie Favicon */
  --color-mix: #a0020b;
  --color-paper: #ffffff;
  --color-text: var(--color-mix);
  --color-raster: var(--color-pink);
  --color-focus: color-mix(in srgb, var(--color-pink) 55%, var(--color-paper));
  --color-nav: color-mix(in srgb, var(--color-pink) 25%, var(--color-paper));
  --color-nav-item: color-mix(in srgb, var(--color-pink) 50%, var(--color-paper));

  /* Schriftgrössen */
  --font-family: 'Lakshmi', 'Helvetica Neue', Arial, sans-serif;
  --font-size-small: var(--base);
  --font-size-medium: calc(var(--base) * 2);
  --font-size-title: calc(var(--base) * 3);      /* Zwischentitel und Bandnamen */
  --font-size-hero: calc(var(--base) * 7);       /* Haupttitel */
  --line-height-text: 1.1;
  --line-height-title: 1;
  --text-indent: calc(var(--base) * 2);

  /* Pillen (Navi, Buttons): unten etwas mehr, damit die Schrift optisch mittig sitzt */
  --pill-padding: calc(var(--base) * 0.24) calc(var(--base) * 0.8) calc(var(--base) * 0.36);
  --pill-radius: calc(var(--base) * 2);

  /* Spalten: 12, Textblock 4/12. Gutter = Randabstand */
  --grid-columns: 12;
  --page-margin: calc(var(--base) * 2.5);
  --grid-gutter: var(--page-margin);

  /* Abstände in Zeilen */
  --space-line: calc(var(--font-size-small) * var(--line-height-text));
  --space-block: calc(var(--space-line) * 2);
  --space-section: calc(var(--space-line) * 5);

  /* Hero */
  --hero-title-height: 40vh;
  --band-height: 50vh;

  /* Ebenen: Bilder · Raster · Text · Leiste */
  --layer-raster: 5;
  --layer-text: 6;
  --layer-bar: 10;
}


/* ==========================================================================
   Grundlagen
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--space-line) * 3);
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--font-size-small);
  line-height: var(--line-height-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; padding: 0; font: inherit; }
img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--color-red); }

/* Markierter Text: ohne Hintergrund, Schrift pink */
::selection { background: transparent; color: var(--color-red); }

/* Tastatur-Fokus: heller Pinkton */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }


/* ==========================================================================
   Spalten und Blöcke
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  padding-inline: var(--page-margin);
}

/* 1–3 Textblöcke à 4/12, immer ab Spalte 1 */
.blocks { row-gap: var(--space-block); }
.block { grid-column: span 4; }

.block-title {
  margin-bottom: var(--space-line);
  text-align: center;
  text-transform: uppercase;
}

/* Fliesstext: keine Leerzeilen, Absatz mit Einzug */
.text p + p { text-indent: var(--text-indent); }

.block-links { margin-top: var(--space-line); }
.support-logo { display: inline-block; margin-top: calc(var(--space-line) * 0.5); border: 0; }
.support-logo img { height: calc(var(--base) * 3.5); width: auto; }


/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
  display: inline-block;
  border: 0;
  padding: var(--pill-padding);
  border-radius: var(--pill-radius);
  background: var(--color-mix);
  color: var(--color-nav-item);
}
.button:hover { background: var(--color-red); color: var(--color-nav-item); }


/* ==========================================================================
   Leiste oben: Navigation + Anmelden
   ========================================================================== */

.top-bar {
  position: fixed; z-index: var(--layer-bar);
  top: var(--base); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--base) * 0.25);
  width: max-content;   /* sonst begrenzt left: 50% die Breite auf die halbe Seite */
  max-width: calc(100vw - var(--page-margin) * 2);
  font-size: calc(var(--font-size-small) * 0.875);
}
.top-bar > .button { flex: none; }

/* Container 1px grösser als die Punkte. Aktiver Punkt = Section im Blick (js/nav.js) */
.nav {
  display: flex; gap: 1px; min-width: 0;
  padding: 1px;
  border-radius: var(--pill-radius);
  background: var(--color-nav);
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  border: 0;
  padding: var(--pill-padding);
  border-radius: var(--pill-radius);
  background: var(--color-nav-item);
}
.nav a.is-active { background: var(--color-mix); color: var(--color-nav-item); }   /* wie der Button «Anmelden» */
.nav a:hover { background: var(--color-red); color: var(--color-nav-item); }


/* ==========================================================================
   Kopf
   ========================================================================== */

.page-header {
  padding-top: calc(var(--base) * 3.5);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-title);
}
.page-header p { grid-column: 1 / span 8; }


/* ==========================================================================
   Hero: Haupttitel, Live, Bandbilder
   ========================================================================== */

.hero-title-field {
  min-height: var(--hero-title-height);
  align-content: center;
}
.hero-title {
  grid-column: 1 / -1;
  text-align: center;
  text-transform: uppercase;
  font-size: var(--font-size-hero);
  line-height: var(--line-height-title);
  letter-spacing: -0.01em;
  color: var(--color-pink);
}

.bands {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  padding-inline: var(--page-margin);
}
.band { position: relative; height: var(--band-height); }
.band { overflow: hidden; }
.band picture { display: contents; }
.band img { width: 100%; height: 100%; object-fit: cover; }

/* Lazysizes: unscharfes Vorschaubild, bis das Bild geladen ist */
.lazyload, .lazyloading { filter: blur(16px); transform: scale(1.05); }
.lazyloaded { transition: filter 0.4s; }
.band-name {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  padding-inline: var(--base);
  text-align: center;
  text-transform: uppercase;
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  color: var(--color-pink);
}


/* YouTube unter dem Text eines Blocks (js/video.js). Liegt wie der Text über dem Raster, das Raster rechnet es nicht mit.
   «Play» wie die Blocktitel (Versalien), rosa, ohne Raster, beim Abspielen weg, beim Hover «Pause» (nur über der Schrift, YouTube bleibt bedienbar) */
.video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin-top: var(--space-line); cursor: pointer; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Vorschaubild von YouTube ist 4:3 mit schwarzen Balken: mittig, Balken fallen weg */
.video img { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); }
.video-play {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-transform: uppercase;
  color: var(--color-pink);
}
.video-label-pause { display: none; }
.video.is-playing .video-play { display: none; }
.video.is-playing.is-hover .video-play { display: block; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.video.is-playing.is-hover .video-label-play { display: none; }
.video.is-playing.is-hover .video-label-pause { display: inline; }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-top: var(--space-section); }

/* Zwischentitel (auch «Live:»): gross wie die Bandnamen, pink. Mit Raster nur gerastert sichtbar */
.section-title {
  margin-bottom: var(--space-block);
  text-align: center;
  text-transform: uppercase;
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
  color: var(--color-pink);
}

/* Fragen */
.question-call { grid-column: 1 / -1; }
.question-call > p { display: inline; }   /* CKEditor-Absatz, Button läuft im Satz weiter */
.question-call .button { line-height: var(--line-height-text); }
.questions { margin-top: var(--space-block); }
.question blockquote { font-size: var(--font-size-medium); line-height: var(--line-height-title); }
.question figcaption { margin-top: calc(var(--space-line) * 0.5); }

/* Newsletter (js/newsletter.js): Text über die ganze Breite, darunter Feld und Button als Pillen wie die Navigation */
.newsletter-text, .newsletter { grid-column: 1 / -1; }
.newsletter { display: flex; flex-wrap: wrap; gap: calc(var(--base) * 0.25); margin-top: var(--space-line); }
.newsletter-field {
  flex: 0 1 calc(var(--base) * 10); min-width: 0;
  padding: var(--pill-padding); border: 0; border-radius: var(--pill-radius);
  background: var(--color-nav); color: var(--color-text); font: inherit;   /* hell wie hinter der Navi, beim Tippen wie die Navipunkte */
}
.newsletter-field:focus, .newsletter-field:focus-visible { background: var(--color-nav-item); outline: none; }   /* Farbwechsel zeigt den Fokus, kein Rahmen */
.newsletter-email { flex-basis: calc(var(--base) * 16); }
.newsletter-role { flex-basis: calc(var(--base) * 24); }
.newsletter-field::placeholder { color: var(--color-mix); opacity: 0.5; }
.newsletter .button { font: inherit; cursor: pointer; }
.newsletter-trap { position: absolute; left: -5000px; }
.newsletter-response { flex-basis: 100%; }
.newsletter-response:empty { display: none; }

/* Programm: Zeit | Text */
.schedule {
  display: grid;
  grid-template-columns: calc(var(--base) * 3.5) 1fr;
}


/* ==========================================================================
   Fuss: Impressum und Datenschutz
   ========================================================================== */

.page-footer { padding-block: var(--space-section); }
.page-footer .text, .footer-credit { margin-top: var(--space-line); }


/* ==========================================================================
   Raster (js/raster.js setzt auf <html> .raster-live oder .raster-reduced)
   Ebenen: Bilder · Raster deckend (Lücken durchsichtig) · Text deckend
   ========================================================================== */

.raster-live :is(.page-header, .hero-title-field, .hero > .section-title, .section, .page-footer),
.raster-reduced :is(.page-header, .hero-title-field, .hero > .section-title, .section, .page-footer) {
  position: relative; z-index: var(--layer-text);
}
.raster-live .band-name,
.raster-reduced .band-name { z-index: var(--layer-text); }

/* Live: Raster über die ganze Seite, Klicks gehen durch. Titel und Bandnamen nur im Raster */
.raster-canvas {
  position: fixed; inset: 0; z-index: var(--layer-raster);
  width: 100vw; height: 100vh;
  pointer-events: none;
}
.raster-reduced :is(.hero-title, .section-title, .band-name) { color: var(--color-red); }
.raster-live :is(.hero-title, .section-title, .band-name) { color: transparent; }

/* Reduziert: vorgerechnetes RESON als Bild, Titel und Bandnamen rot */
.raster-logo {
  position: fixed; left: 0; top: 0; z-index: var(--layer-raster);
  width: min(calc(var(--base) * 68.5), 92vw); height: auto;
  pointer-events: none;
}
.raster-reduced :is(.hero-title, .section-title, .band-name) { color: var(--color-red); }


/* ==========================================================================
   Formate
   ========================================================================== */

/* Grosse Bildschirme ab 1920 */
@media (min-width: 1920px) {
  :root { --base: 20px; }
}

/* Tablet bis 1000 */
@media (max-width: 1000px) {
  :root { --font-size-hero: calc(var(--base) * 4); }
  .block { grid-column: span 6; }
}

/* Handy bis 760 */
@media (max-width: 760px) {
  :root {
    --font-size-medium: calc(var(--base) * 1.5);
    --font-size-title: calc(var(--base) * 2.5);
    --font-size-hero: calc((100vw - 2 * var(--page-margin)) / 10.2);   /* Haupttitel füllt die Breite (längste Zeile ca. 10 em) */
    --page-margin: var(--base);
    --space-section: calc(var(--space-line) * 4);
    --hero-title-height: 30vh;
  }
  .top-bar { top: calc(var(--base) * 0.5); }
  .page-header p { grid-column: 1 / -1; }
}

/* Schmales Handy bis 640: Blöcke volle Breite */
@media (max-width: 640px) {
  .block { grid-column: 1 / -1; }
}

/* Hochformat: Bandbilder untereinander */
@media (orientation: portrait) {
  .bands { grid-template-columns: 1fr; }
}

/* Weniger Bewegung: ohne weiches Scrollen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}