/* =====================================================================
   piano.vocal – Anpassungen fuer Contao
   Bearbeitbar im Backend unter Inhalte > Dateien > theme/css/contao.css
   Nach Aenderungen in beiden Seitenlayouts die Nummer bei contao.css?v=… erhoehen.

   CSS-Klassen fuer Artikel (Feld "Experten-Einstellungen > CSS-ID/Klasse"):
     pv-zweispaltig        zwei Spalten (5/12 + 6/12) – Inhalt z. B. zwei Elementgruppen
     pv-spalten            Elemente nebeneinander in gleich breiten Spalten
     pv-spalten pv-erste-breit   wie oben, erste Spalte doppelt so breit
     pv-cta                Ueberschrift links, Button rechts
     pv-zahlen             Zahlen-Block mit Hintergrundbild (Startseite)
     pv-besetzungen        nummerierte Kaesten mit Hintergrundbild (Konzerte)
     pv-sterne             dunkler Kopfbereich mit animiertem Sternenhimmel (Unterseiten)
     pv-spalten pv-5-4-3   drei Spalten im Verhaeltnis 5:4:3 (Adresse)
     pv-alben              Album-Liste (Elementgruppen mit Klasse "pv-album")
     pv-anfrage            Anfrage-Bereich mit Formular (Kleinkunst)
     background-grey       hellgrauer Hintergrund (Polo)
     background-success    gruener Hintergrund (Polo)
     pv-bg-blau / pv-bg-creme / pv-bg-nacht   weitere Hintergrundfarben
     text-light            helle Schrift (fuer dunkle Hintergruende)
   CSS-Klassen fuer Elemente:
     pv-intro              Textelement: Ueberschrift links, Text rechts
     pv-kicker             kleine Ueberschrift ueber einer grossen
     pv-lead               Textelement mit groesserem Fliesstext
     pv-gross              Ueberschrift im grossen Polo-Stil (50px)
     pv-wie-h2             Hauptueberschrift (H1) im Aussehen einer normalen H2 (SEO)
   ===================================================================== */

/* ---------- Kopfbereich ---------- */
@media (max-width: 991.98px) {
  #header #logo img {
    width: 210px !important;
    object-fit: contain;
    object-position: left center;
  }
}

/* ---------- Slider (Varianten polo_slider / polo_slider_halb / polo_slide) ---------- */
.inspiro-slider .pv-overlay { background: rgba(0, 0, 0, .5); opacity: 1; }
.pv-slider-rechts .pv-overlay { display: none; }
.pv-slider-zentriert .slide .slide-captions { text-align: center !important; }
.pv-slider-rechts .slide .slide-captions { text-align: right !important; }
.pv-slider-rechts .slide .slide-captions .strong::after { margin-left: auto; }
.pv-slider-zentriert .slide .slide-captions .strong::after { margin-left: auto; margin-right: auto; }
.inspiro-slider .slide .slide-captions .pv-slider-text p { margin: 0; color: inherit; }

/* Startseite: grosse Rubik-Schrift */
.pv-slider-zentriert .slide .slide-captions .pv-slider-title {
  font-family: 'Rubik', sans-serif;
  font-size: 90px;
  line-height: 90px;
  font-weight: 500;
  letter-spacing: -5px;
  color: #fff;
  margin-bottom: 40px;
}
.pv-slider-zentriert .slide .slide-captions .pv-slider-text {
  font-family: 'Rubik', sans-serif;
  font-size: 25px;
  line-height: 35px;
  color: #fff;
  max-width: 480px;
  margin: 0 auto 50px;
}
.pv-slider-zentriert .slide .slide-captions .pv-slider-text p { font-size: inherit; line-height: inherit; }

/* Slider halbe Hoehe: Text als roter Balken wie im Polo-Template */
.pv-slider-rechts .slide .slide-captions .pv-slider-text p {
  display: inline-block;
  background-color: #FC3838;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 12px 18px;
}

.pv-btn,
.inspiro-slider .slide .slide-captions .pv-btn {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 60px;
  height: 60px;
  padding: 0 30px;
  min-width: 250px;
  border-radius: 30px;
  background-color: rgb(202, 87, 87);
  border-color: rgb(202, 87, 87);
  color: #fff;
}
.pv-btn:hover { background-color: rgb(180, 70, 70); border-color: rgb(180, 70, 70); color: #fff; }
@media (max-width: 991.98px) {
  .pv-slider-zentriert .slide .slide-captions .pv-slider-title { font-size: 70px; line-height: 70px; letter-spacing: -3px; }
}
@media (max-width: 575.98px) {
  .pv-slider-zentriert .slide .slide-captions .pv-slider-title { font-size: 46px; line-height: 50px; letter-spacing: -2px; margin-bottom: 25px; }
  .pv-slider-zentriert .slide .slide-captions .pv-slider-text { font-size: 20px; line-height: 30px; margin-bottom: 30px; }
  .pv-btn, .inspiro-slider .slide .slide-captions .pv-btn { min-width: 0; font-size: 16px; line-height: 50px; height: 50px; }
}

/* ---------- Allgemeine Element-Klassen ---------- */
.pv-kicker, .pv-kicker > * { margin-bottom: 10px; }
.pv-lead .rte p { font-size: 1.1rem; line-height: 1.7; }
h1.pv-gross, h2.pv-gross, .pv-gross > h1, .pv-gross > h2, .pv-intro h1 {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}
@media (max-width: 575.98px) {
  h1.pv-gross, h2.pv-gross, .pv-gross > h1, .pv-gross > h2, .pv-intro h1 { font-size: 36px; }
}
.content-image figure, .content-gallery figure { margin: 0; }
.content-image img { max-width: 100%; height: auto; }

/* YouTube-/Vimeo-Videos responsiv */
.content-youtube figure, .content-vimeo figure { margin: 0; }
.content-youtube iframe, .content-vimeo iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Intro (Textelement "pv-intro"): Ueberschrift links, Text rechts ---------- */
@media (min-width: 992px) {
  .pv-intro {
    display: grid;
    grid-template-columns: 4fr 8fr;
    column-gap: 30px;
    align-items: start;
  }
}

/* ---------- Spalten-Layouts fuer Artikel ---------- */
@media (min-width: 992px) {
  .pv-zweispaltig > .container {
    display: grid;
    grid-template-columns: 5fr 6fr;
    column-gap: 8.333%;
    row-gap: 80px;
    align-items: start;
  }
  .pv-zweispaltig.pv-mittig > .container { align-items: center; }
  .pv-spalten > .container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 30px;
    align-items: start;
  }
  .pv-spalten.pv-erste-breit > .container { grid-template-columns: 2fr; }
}
@media (max-width: 991.98px) {
  .pv-zweispaltig > .container > * + *,
  .pv-spalten > .container > * + * { margin-top: 30px; }
}

/* Programmbausteine: Elementgruppe mit Klasse "pv-raster" = 2 Spalten */
.pv-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
@media (max-width: 575.98px) { .pv-raster { grid-template-columns: 1fr; } }
.pv-raster h4 { margin-bottom: 10px; }

/* ---------- Hintergrundfarben ---------- */
.pv-bg-blau { background-color: #3098FF; }
.pv-bg-creme { background-color: #FFECD8; }
.pv-bg-nacht { background-color: #1b1d42; }
.text-light .rte, .text-light .rte p, .text-light h1, .text-light h2, .text-light h3, .text-light h4 { color: #fff; }

/* ---------- Call to Action (Artikel "pv-cta"): Ueberschrift links, Button rechts ---------- */
.pv-cta > .container {
  display: grid;
  grid-template-columns: 9fr 3fr;
  align-items: center;
  column-gap: 30px;
  text-align: center;
}
.pv-cta h3 { font-weight: 400; margin: 0; }
@media (max-width: 991.98px) {
  .pv-cta > .container { grid-template-columns: 1fr; row-gap: 20px; }
}

/* ---------- Partner-Karussell ---------- */
.pv-partner-karussell > h4 { text-align: center; margin-bottom: 1.5rem; }

/* ---------- Zahlen-Block (Artikel "pv-zahlen") ----------
   Hintergrundbild: files/bilder/seiten/counter-back.jpg */
section.pv-zahlen {
  position: relative;
  padding: 100px 0;
  background: url('../../bilder/seiten/counter-back.jpg') center center / cover no-repeat;
}
section.pv-zahlen::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
section.pv-zahlen > .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: 30px;
  align-items: start;
}
.pv-zahlen .content-text { grid-column: 1; grid-row: 1; }
.pv-zahlen .content-hyperlink { grid-column: 1; grid-row: 2; }
.pv-zahlen .content-description-list { grid-column: 2; grid-row: 1 / span 3; }
.pv-zahlen h2, .pv-zahlen p, .pv-zahlen .counter { color: #fff; }
.pv-zahlen .rte p { font-size: 1.25rem; line-height: 1.6; font-weight: 300; }
@media (max-width: 991.98px) {
  section.pv-zahlen > .container { grid-template-columns: 1fr; text-align: center; }
  .pv-zahlen .content-text, .pv-zahlen .content-hyperlink, .pv-zahlen .content-description-list { grid-column: 1; grid-row: auto; }
  .pv-zahlen .content-description-list { margin-top: 60px; }
}

/* ---------- Besetzungen (Artikel "pv-besetzungen", Konzerte) ----------
   Drei Textelemente nebeneinander, automatisch nummeriert 01. 02. 03.
   Hintergrundbild: files/bilder/seiten/back-besetzung.jpg */
section.pv-besetzungen {
  position: relative;
  counter-reset: besetzung;
  background: url('../../bilder/seiten/back-besetzung.jpg') center center / cover no-repeat;
}
section.pv-besetzungen::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
section.pv-besetzungen > .container { position: relative; z-index: 1; }
.pv-besetzungen .content-text { text-align: center; color: #fff; }
.pv-besetzungen .content-text::before {
  counter-increment: besetzung;
  content: counter(besetzung, decimal-leading-zero) ".";
  display: block;
  font-size: 80px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}
.pv-besetzungen h3 { min-height: 2.6em; }

/* ---------- Kopfbereich mit Sternenhimmel (Artikel "pv-sterne") ----------
   Die Sterne erzeugt files/theme/js/pv-sterne.js */
section.pv-sterne {
  position: relative;
  overflow: hidden;
  background-color: #1b1d42;
  text-align: center;
  padding: 100px 0;
}
section.pv-sterne .particles { position: absolute; inset: 0; z-index: 0; }
section.pv-sterne > .container { position: relative; z-index: 1; }
.pv-sterne h5.pv-kicker { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; margin-bottom: 20px; }
.pv-sterne .pv-sterne-titel { color: #fff; font-size: 60px; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.pv-sterne .rte p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
@media (max-width: 575.98px) { .pv-sterne .pv-sterne-titel { font-size: 40px; } }

/* ---------- Drei Spalten 5:4:3 ---------- */
@media (min-width: 992px) {
  .pv-spalten.pv-5-4-3 > .container { grid-template-columns: 5fr 4fr 3fr; grid-auto-flow: row; }
}

/* ---------- Logo-Raster (Galerie "polo_raster", Seite Partner) ---------- */
.pv-logo-raster > h3 { text-align: center; font-size: 1.1rem; font-weight: 400; margin-bottom: 30px; }
.pv-logo-raster ul.grid { margin: 0; padding: 0; }
.pv-logo-raster ul.grid li figure { width: 100%; margin: 0; }
.pv-logo-raster ul.grid li img { width: 100% !important; height: auto !important; }

/* ---------- Alben (Artikel "pv-alben", je Album eine Elementgruppe "pv-album") ---------- */
section.pv-alben { padding: 150px 0; }
.pv-album + .pv-album { margin-top: 100px; }
@media (min-width: 992px) {
  .pv-album {
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 30px;
    align-items: start;
  }
  .pv-album > .content-gallery { grid-column: 1; grid-row: 1 / span 10; }
  .pv-album > :not(.content-gallery) { grid-column: 2; padding: 0 40px; }
}
.pv-album .content-gallery { margin-bottom: 30px; }
.pv-album .content-gallery img { width: 100%; height: auto; }
.pv-album .content-hyperlink { margin-bottom: 10px; }
.pv-album .rte h5 { margin-bottom: 15px; }

/* ---------- Terminliste ---------- */
.pv-termine table { margin-bottom: 0; }
.pv-termine thead tr { background-color: darkgray; }
.pv-termine .badge { font-size: 12px; padding: 6px 12px; }

/* ---------- Anfrage mit Formular (Artikel "pv-anfrage") ---------- */
section.pv-anfrage { background-image: url('../../bilder/seiten/background-4.png'); }
.pv-anfrage > .container > .content-headline,
.pv-anfrage > .container > .content-text { text-align: center; }
.pv-anfrage > .container > .content-text { margin-bottom: 60px; }
.pv-anfrage .content-form { max-width: 760px; margin: 0 auto; }
.pv-formular .formbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.pv-formular .widget { grid-column: 1 / -1; margin-bottom: 20px; }
.pv-formular .widget.pv-halb { grid-column: auto; }
@media (max-width: 767.98px) { .pv-formular .widget.pv-halb { grid-column: 1 / -1; } }
.pv-formular label { display: block; font-weight: 600; margin-bottom: 6px; }
.pv-formular input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.pv-formular select,
.pv-formular textarea {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e4e6ef;
  border-radius: 5px;
  background: #fff;
  font-size: .9rem;
}
.pv-formular textarea { min-height: 180px; }
.pv-formular .checkbox_container label, .pv-formular fieldset label { display: inline; font-weight: 400; }
.pv-formular fieldset { border: 0; padding: 0; margin: 0; }
.pv-formular legend { font-size: inherit; font-weight: 600; margin-bottom: 6px; }
.pv-formular legend span, .pv-formular label span.mandatory { display: inline !important; }
.pv-formular .widget-checkbox span { display: flex; align-items: flex-start; gap: 10px; }
.pv-formular .widget-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.pv-formular .widget-checkbox label { cursor: pointer; }
.pv-formular .error { color: #FC3838; font-size: .85rem; }
.pv-formular .widget-submit { text-align: center; }
.pv-formular button[type="submit"] {
  background-color: #FC3838;
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
}
.pv-formular button[type="submit"]:hover { background-color: #e02a2a; }

p, .rte li { font-size: 15px; }


/* ---------- SEO: H1 im Aussehen einer H2 (Klasse "pv-wie-h2" am Element) ---------- */
.pv-wie-h2 > h1, h1.pv-wie-h2 { font-size: 2.35714286em; line-height: 1.36363636em; font-weight: 500; margin-bottom: 16px; }
@media all and (max-width: 767px) {
  .pv-wie-h2 > h1, h1.pv-wie-h2 { font-size: 1.78571429em; line-height: 1.5em; }
}