/* ------------------------------------------------------------------
 * content-width.css -- eine Inhaltsbreite für alle Abschnitte (Desktop
 * und Tablet). Seit 07.11.2026, Wunsch Chris: vorher liefen sieben
 * verschiedene Breiten untereinander (542 / 580 / 720 / 520 / 900 / 960),
 * jetzt richtet sich alles nach den Stern-Trennlinien: 880px bei voller
 * Breite, darunter 94 % (erst Mitglieder-Raster 960px, dann auf Chris'
 * Wunsch auf die Linien gezogen).
 * Lädt als LETZTE Datei; #main-Präfix schlägt die section-eigenen Regeln.
 * Revert = <link> in index.html entfernen. Unter 768px greift nichts --
 * dort ist ohnehin alles fluid (mobile.css).
 * ------------------------------------------------------------------ */

@media only screen and (min-width: 768px) {

  /* Seitenrand = Einzug der Stern-Trennlinie (restyle.css:
   * background-size min(880px, 94%)): voll 60px, schmaler 3 %. So enden
   * Text, Raster und Formulare genau mit der Linie (Wunsch Chris 07.11.).
   * % bezieht sich auf #main = Breite der Abschnitte. */
  :root { --rb-gutter: max(calc((100% - 880px) / 2), 3%); }

  /* --- Fließtext-Einleitungen und Listen: volle Inhaltsbreite ------- */
  #main .section-music .music-lead,
  #main .section-faq .faq-lead,
  #main .faq-list,
  #main .section-contact .contact-lead,
  #main .section-newsletter .newsletter-lead,
  #main .press-section,
  #main .press-pointer,
  #main .contact-done,
  #main .contact-privacy {
    max-width: none;
  }
  #main .section-music,
  #main .section-faq,
  #main .section-contact,
  #main .section-newsletter,
  #main .section-gallery {
    padding-left: var(--rb-gutter);
    padding-right: var(--rb-gutter);
  }

  /* --- Band: die zwei Einleitungsabsätze nebeneinander -------------- *
   * Auf 960px wäre eine Zeile ~120 Zeichen lang; zwei Spalten halten
   * die Zeilen lesbar (Musik links, Booking rechts) und füllen die Breite. */
  #main #band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    padding-left: var(--rb-gutter);
    padding-right: var(--rb-gutter);
  }
  #main #band > .headline,
  #main #band > .feature { grid-column: 1 / -1; }
  #main #band .lead {
    max-width: none;
    margin: 0 0 16px;
  }
  #main #band .feature {
    padding-inline: 0;
    background-size: 100% auto;   /* Linie über den Fotos = Rasterbreite (war 940px) */
  }

  /* --- Termine: Karte über die volle Breite ------------------------- *
   * Theme: #posts-list 580px, rechte Spalte fix 483px. Jetzt fluid,
   * Datumskreis bleibt 80px + 17px Abstand. */
  #main #posts-list {
    width: auto;
    margin-left: var(--rb-gutter);
    margin-right: var(--rb-gutter);
  }
  #main #posts-list article .entry-right-data {
    width: calc(100% - 97px);
  }
  #main #posts-list article .feature-image img { width: 100%; }

  /* --- Musik: Player-Karte breit, die zwei Alben nebeneinander ------ */
  #main .music-frame { max-width: none; }
  #main .music-albums {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  #main .music-album { flex: 1 1 0; }

  /* --- Kontaktformular: zwei Spalten -------------------------------- *
   * Links Name / E-Mail / Betreff, rechts die Nachricht über die ganze
   * Höhe; Senden + Datenschutzhinweis darunter über beide Spalten. */
  #main #contactform {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
  }
  #main #contactform label[for="realname"] { grid-area: 1 / 1; }
  #main #contactform #realname             { grid-area: 2 / 1; }
  #main #contactform label[for="email"]    { grid-area: 3 / 1; }
  #main #contactform #email                { grid-area: 4 / 1; }
  #main #contactform label[for="subject"]  { grid-area: 5 / 1; }
  #main #contactform #subject              { grid-area: 6 / 1; }
  #main #contactform label[for="msg"]      { grid-area: 1 / 2; }
  #main #contactform #msg {
    grid-column: 2;
    grid-row: 2 / 7;
    align-self: stretch;
    min-height: 100%;
  }
  #main #contactform #submitArea,
  #main #contactform .contact-privacy { grid-column: 1 / -1; }

  /* --- Newsletter: zwei Spalten über die volle Breite --------------- */
  #main .subscribe-options { max-width: none; }
  #main .subscribe-option { max-width: none; }
}