/*
Theme Name: WRO Child
Theme URI: https://www.wro.at/
Template: generatepress
Author: Slidebird
Description: Child-Theme von GeneratePress für das Wiener Residenz Orchester.
             Farben, Schriften und Größen liegen in theme.json und steuern die
             Auswahl im Block-Editor. Hier stehen nur die Komponenten, die sich
             damit nicht ausdrücken lassen.
Version: 1.7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wro-child
*/

/* =================================================================
   1 · Kurz-Aliase auf die theme.json-Variablen
   ================================================================= */
:root{
  --ruby:      var(--wp--preset--color--ruby,      #941116);
  --ruby-deep: var(--wp--preset--color--ruby-deep, #6E0D11);
  --eggshell:  var(--wp--preset--color--eggshell,  #EFE8D7);
  --cream:     var(--wp--preset--color--cream,     #F7F3EA);
  --ink:       var(--wp--preset--color--ink,       #1A1416);
  --soft:      var(--wp--preset--color--soft,      #7C716A);
  --line:      var(--wp--preset--color--line,      #E2D8C6);

  --serif:  var(--wp--preset--font-family--serif,  Georgia, serif);
  --script: var(--wp--preset--font-family--script, cursive);
  --sans:   var(--wp--preset--font-family--sans,   system-ui, sans-serif);

  /* Zeichenabstand der Schreibschrift - gilt für alle Zierwörter und
     das Signet. Hier ändern wirkt überall. */
  --script-ls:.05em;

  /* Dauer der Schreib-Animation. Hier ändern wirkt überall. */
  --script-write:7s;
}

/* =================================================================
   2 · Schriften durchsetzen
   GeneratePress setzt font-family über den Customizer. Weil dieses
   Stylesheet nach generate-style geladen wird, gewinnt es bei gleicher
   Spezifität - so müssen die Schriften nicht im Customizer gepflegt
   werden (dort tauchen selbst gehostete Fonts ohnehin nicht auf).
   ================================================================= */
body,
button, input, select, textarea{
  font-family:var(--sans);
}

/* GeneratePress liefert 17px als Grundgröße aus und überschreibt damit
   den Wert aus theme.json. Hier auf 16px zurückgeholt - dieses
   Stylesheet lädt nach GeneratePress und gewinnt. */
body{
  font-size:var(--wp--preset--font-size--medium, 1rem);
}

/* Fließtext im leichten Schnitt (Poppins Light 300) - wirkt feiner und
   passt besser zur Serifenschrift. Bedienelemente bleiben kräftiger,
   damit sie greifbar sind; die Ausnahmen stehen weiter unten jeweils
   an ihrer Komponente. */
body,
p, li, dd, blockquote{
  font-weight:300;
}
/* Was bedient oder gelesen werden muss, bleibt kräftig genug */
button, input, select, textarea,
.wp-element-button,
.main-navigation .main-nav ul li a{
  font-weight:500;
}
strong, b{ font-weight:600; }

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-title{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
}

/* =================================================================
   3 · Typo-Bausteine
   Als Block-Stile im Editor wählbar (siehe functions.php)
   ================================================================= */

/* Zierwort in Script - immer eigener Absatz, nie inline */
.wro-script,
.is-style-wro-script{
  font-family:var(--script);
  /* Die Script hat nur einen 400er-Schnitt - ohne diese Angabe würde
     sie den 300er des Fließtextes erben und der Browser rechnet sich
     einen dünneren Strich zusammen. */
  font-weight:400;
  letter-spacing:var(--script-ls);
  color:var(--ruby);
  /* Etwas unter 1: die Script hat viel Weißraum in der Zeile, dadurch
     sitzt sie kompakter. Unterlängen ragen dabei sichtbar heraus,
     werden aber nicht abgeschnitten. */
  line-height:.92;
  margin:0;
}

/* Greift auch, wenn die Script über die Schriftauswahl im Editor
   zugewiesen wird statt über den Block-Stil. */
.has-script-font-family{
  letter-spacing:var(--script-ls);
  font-weight:400;
}

/* Bei zentrierten Zierwörtern sitzt der Abstand hinter dem letzten
   Buchstaben und schiebt die Zeile optisch nach links - hier wieder
   ausgeglichen. */
.wro-script.has-text-align-center,
.is-style-wro-script.has-text-align-center,
.has-script-font-family.has-text-align-center{
  text-indent:var(--script-ls);
}

/* Serif-Zeile direkt unter einem Zierwort.
   .3em Abstand ist Pflicht: die Script-Unterlängen schneiden sonst durch
   die Buchstaben der Folgezeile. Keine negativen Margins! */
.wro-script + :is(h1, h2, h3),
.is-style-wro-script + :is(h1, h2, h3){
  margin-top:.3em;
}

.wro-eyebrow,
.is-style-wro-eyebrow{
  font-family:var(--sans);
  font-size:var(--wp--preset--font-size--eyebrow, .7rem);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ruby);
  margin:0 0 1rem;
}

.wro-lead,
.is-style-wro-lead{
  color:var(--soft);
  max-width:58ch;
}

/* Leitspruch: klein, in Versalien, weit gesperrt. Für kurze Sätze
   gedacht, die als Motto unter einer Überschrift stehen. */
.wro-claim,
.is-style-wro-claim{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.72rem, 1.05vw, .82rem);
  line-height:2;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* Bewusst heller als der Sekundärton gewählt. Kontrast 3,77:1 gegen
     Weiß - unterhalb der WCAG-AA-Schwelle von 4,5:1 für kleinen Text.
     Falls das später beanstandet wird: #7C716A erfüllt sie knapp. */
  color:#8A827D;
  margin:0;
}

.wro-balance{ text-wrap:balance; }

/* Ausrichtung über die Block-Stile - unabhängig vom Knopf in der
   Werkzeugleiste. Die hohe Gewichtung (dreimal Klasse) sorgt dafür,
   dass sie auch die Mobil-Regel weiter unten schlägt. */
.entry-content .is-style-wro-zentriert,
.entry-content .is-style-wro-zentriert p,
.is-style-wro-zentriert{
  text-align:center;
}
.entry-content .is-style-wro-linksbuendig,
.entry-content .is-style-wro-linksbuendig p,
.is-style-wro-linksbuendig{
  text-align:left;
}

/* Einspaltiger Fließtext: auf angenehme Zeilenlänge begrenzt und
   mittig gesetzt. Der Text selbst bleibt linksbündig - zentrierter
   Fließtext ist über mehrere Zeilen mühsam zu lesen. */
.wro-textblock{
  /* 76ch = 25 % mehr als die vorherigen 61ch, auf Wunsch breiter
     gesetzt. Ergibt in Poppins rund 85 Zeichen je Zeile - die
     ch-Einheit rechnet mit der Ziffernbreite, die schmaler ist als der
     Durchschnittsbuchstabe. */
  max-width:76ch;
  margin-inline:auto;
  text-align:left;
}
.wro-textblock > * + *{
  margin-top:1.1em;
}

/* -----------------------------------------------------------------
   Buttons: offene Umrandung

   Der Rahmen besteht aus zwei Winkeln, die sich überlappen. Der obere
   linke zeichnet Oberkante und linke Kante, der untere rechte die
   Unterkante und rechte Kante - jeweils nur über 70 % der Breite.
   Dadurch bleiben oben rechts und unten links Lücken offen.

   Bewusst mit currentColor: So genügt es, an dunklen Stellen die
   Textfarbe zu ändern, der Rahmen zieht mit.
   ----------------------------------------------------------------- */
/* Hoch gewichtet, damit weder GeneratePress noch die aus theme.json
   erzeugten Regeln die Fläche zurückholen. Ohne !important - die
   Gewichtung allein reicht. */
.entry-content .wp-block-button .wp-block-button__link.wp-element-button,
.wro .wp-block-button .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button{
  background:transparent;
  background-color:transparent;
  border:0;
  color:var(--ruby);
}

.wro .wp-element-button,
.entry-content .wp-element-button,
.wp-block-button__link.wp-element-button{
  position:relative;
  background:transparent;
  background-color:transparent;
  color:var(--ruby);
  border:0;
  border-radius:0;
  padding:.9em 2.2em;
  font-family:var(--sans);
  font-size:.87rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-block;
  transition:color .25s ease;
}

.wp-block-button__link.wp-element-button::before,
.wp-block-button__link.wp-element-button::after{
  content:"";
  position:absolute;
  width:70%;
  height:100%;
  pointer-events:none;
  transition:width .35s ease;
}
.wp-block-button__link.wp-element-button::before{
  top:0;
  left:0;
  border-top:1px solid currentColor;
  border-left:1px solid currentColor;
}
.wp-block-button__link.wp-element-button::after{
  bottom:0;
  right:0;
  border-bottom:1px solid currentColor;
  border-right:1px solid currentColor;
}

/* Beim Überfahren schließt sich der Rahmen */
.wp-block-button__link.wp-element-button:hover::before,
.wp-block-button__link.wp-element-button:hover::after{
  width:100%;
}
.wro .wp-element-button:hover,
.entry-content .wp-element-button:hover,
.wp-block-button__link.wp-element-button:hover{
  background:transparent;
  color:var(--ruby-deep);
}

/* Auf dunklen Flächen in Eggshell - der Rahmen folgt über currentColor */
.wro-hero .wp-block-button__link.wp-element-button,
.has-ink-background-color .wp-block-button__link.wp-element-button,
.has-ruby-background-color .wp-block-button__link.wp-element-button{
  color:var(--eggshell);
}
.wro-hero .wp-block-button__link.wp-element-button:hover,
.has-ink-background-color .wp-block-button__link.wp-element-button:hover,
.has-ruby-background-color .wp-block-button__link.wp-element-button:hover{
  color:#fff;
}

/* -----------------------------------------------------------------
   Dreispaltig: Text - Bild - Text
   Das Bild steht mittig und ragt über die Textspalten hinaus, weil
   diese mittig ausgerichtet und kürzer sind.
   ----------------------------------------------------------------- */
.wro-dreispalt{
  align-items:center;
  /* Eigene Breitenbegrenzung: Auf breiten Inhaltsbereichen liefe die
     Sektion sonst zu weit auseinander und das Foto würde übergroß.
     So sitzt sie unabhängig von der Container-Einstellung. */
  max-width:1240px;
  margin-inline:auto;
}
.wro-dreispalt__bild{
  margin:0;
  /* Obergrenze fürs Foto, damit es die Textspalten nicht erdrückt */
  max-width:420px;
  margin-inline:auto;
}
.wro-dreispalt__bild img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  /* Nur links oben und rechts unten gerundet - die diagonale
     Gegenüberstellung nimmt die offenen Button-Ecken auf. */
  border-radius:50px 0 50px 0;
  box-shadow:0 14px 38px rgba(26,20,22,.14);
}

@media (max-width:900px){
  /* Gestapelt: Bild nicht über die volle Breite ziehen, sonst
     erschlägt es die Textblöcke darüber und darunter. */
  .wro-dreispalt__bild{
    max-width:340px;
    margin-inline:auto;
  }
  .wro-dreispalt .wp-block-buttons{
    justify-content:center;
  }
}

/* -----------------------------------------------------------------
   Mobil: Texte zentriert

   Vorgabe für alle Seiten. Wo linksbündig gewünscht ist, bekommt der
   Block zusätzlich die Klasse .wro-mobil-links (im Editor unter
   Erweitert -> Zusätzliche CSS-Klasse).

   Grenze bei 900px, nicht 768px: Damit sind auch kleine Tablets und
   verkleinerte Browserfenster erfasst.
   ----------------------------------------------------------------- */
@media (max-width:900px){
  /* :not([class*="has-text-align"]) sorgt dafür, dass eine im Editor
     bewusst gesetzte Ausrichtung Vorrang behält. Zentriert wird also
     nur, was keine eigene Zuweisung hat. */
  .entry-content p:not([class*="has-text-align"]),
  .entry-content li:not([class*="has-text-align"]),
  .entry-content dd,
  .wro-textblock:not([class*="has-text-align"]),
  .wro-textblock p:not([class*="has-text-align"]),
  .wro-lead:not([class*="has-text-align"]),
  .is-style-wro-lead:not([class*="has-text-align"]),
  .wp-block-column p:not([class*="has-text-align"]){
    text-align:center;
  }

  /* Aufzählungen zentrieren nur sinnvoll, wenn die Zeichen mitwandern */
  .entry-content ul,
  .entry-content ol{
    list-style-position:inside;
    padding-left:0;
  }

  /* Ausnahme auf Zuruf.
     Die Selektoren müssen mindestens so gewichtig sein wie die
     Zentrierungsregel oben (Klasse + Element + :not). Deshalb überall
     Element und Klasse kombiniert - eine Klasse allein würde
     verlieren und die Ausnahme bliebe wirkungslos. */
  .entry-content p.wro-mobil-links,
  .entry-content li.wro-mobil-links,
  .entry-content div.wro-mobil-links,
  .entry-content .wro-mobil-links p,
  .entry-content .wro-mobil-links li,
  .wro-mobil-links,
  .wro-mobil-links p,
  .wro-mobil-links li,
  /* Der Block-Stil "WRO linksbündig" gehört ebenfalls hierher - sonst
     würde die Zentrierungsregel oben ihn auf Mobilgeräten überstimmen. */
  .entry-content p.is-style-wro-linksbuendig,
  .entry-content li.is-style-wro-linksbuendig,
  .entry-content div.is-style-wro-linksbuendig,
  .entry-content .is-style-wro-linksbuendig p,
  .is-style-wro-linksbuendig,
  .is-style-wro-linksbuendig p{
    text-align:left;
  }
}

.wro-vertical{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--soft);
  margin:0;
}

/* Zahlenkolonnen sauber untereinander */
.wro-tabular{ font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------
   Schreib-Animation der Zierwörter

   Die Klasse .wro-anim setzt ein Schnipsel im Kopfbereich, bevor der
   Browser zeichnet. Ohne JavaScript, ohne IntersectionObserver oder bei
   reduzierter Bewegung bleibt der Text sichtbar - er kann also nie
   unsichtbar hängenbleiben.

   Umgesetzt mit clip-path, nicht mit einer Maske: Masken werden immer
   auf die Elementbox beschnitten. Die Schwünge der Script ragen wegen
   line-height .92 darüber hinaus und wurden dadurch oben abgeschnitten.
   clip-path erlaubt NEGATIVE Ränder - die sichtbare Fläche reicht
   bewusst über die Box hinaus, ein Beschnitt ist ausgeschlossen.

   inset(oben rechts unten links): Der rechte Wert wandert von 100%
   (nichts sichtbar) auf -12% (alles sichtbar, mit Reserve).
   ----------------------------------------------------------------- */
.wro-anim .wro-script,
.wro-anim .is-style-wro-script{
  -webkit-clip-path:inset(-80% 100% -80% -12%);
          clip-path:inset(-80% 100% -80% -12%);
  transition:-webkit-clip-path var(--script-write) cubic-bezier(.32,.3,.42,1),
                     clip-path var(--script-write) cubic-bezier(.32,.3,.42,1);
}
.wro-anim .wro-script.is-written,
.wro-anim .is-style-wro-script.is-written{
  -webkit-clip-path:inset(-80% -12% -80% -12%);
          clip-path:inset(-80% -12% -80% -12%);
}

/* Im Editor nie verstecken - dort soll immer alles sichtbar sein. */
.block-editor-writing-flow .wro-script,
.block-editor-writing-flow .is-style-wro-script{
  -webkit-clip-path:none;
          clip-path:none;
}

@media (prefers-reduced-motion:reduce){
  .wro-anim .wro-script,
  .wro-anim .is-style-wro-script{
    -webkit-clip-path:none;
            clip-path:none;
    transition:none;
  }
}

/* =================================================================
   3b · HERO — vollflächiges Bild mit Text am unteren Rand

   Bewusst nur aus Gruppe + Bild gebaut, nicht aus dem Cover-Block:
   Cover stellt strenge Anforderungen an sein gespeichertes Markup,
   handgeschriebene Patterns fallen dort schnell in den Fehler
   "unerwarteter oder ungültiger Inhalt". Gruppe und Bild sind
   unkritisch - und das Hintergrundbild bleibt trotzdem ganz normal
   über "Ersetzen" tauschbar.
   ================================================================= */
.wro-hero{
  --hero-h:min(92vh, 900px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:var(--hero-h);
  padding:0;
}

/* --- Hintergrundbild --- */
.wro-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
}
.wro-hero__bg img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  /* etwas höher als die Mitte, damit die Gesichter sitzen */
  object-position:center 32%;
}

/* --- Verlauf: dunkel links, wo der Text steht; rechts bleibt das
       Ensemble frei --- */
.wro-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(26,20,22,.93) 0%,
      rgba(26,20,22,.78) 34%,
      rgba(26,20,22,.28) 64%,
      rgba(26,20,22,.08) 100%),
    linear-gradient(180deg,
      rgba(26,20,22,.30) 0%,
      rgba(26,20,22,0) 38%,
      rgba(26,20,22,.45) 100%);
}

/* --- Inhalt --- */
.wro-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 4.5rem);
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
  min-height:var(--hero-h);
  display:grid;
  grid-template-rows:1fr auto;
  gap:clamp(2rem, 5vw, 3.5rem);
}
.wro-hero__inner > *{ margin-block:0; }

.wro-hero__content{
  align-self:end;
  max-width:44rem;
}

.wro-hero__content .wro-eyebrow,
.wro-hero__content .is-style-wro-eyebrow{
  color:var(--eggshell);
  opacity:.75;
  letter-spacing:.24em;
}

/* Zierwort auf dunklem Grund in Eggshell - Ruby verschwindet im Foto */
.wro-hero__content .wro-script,
.wro-hero__content .is-style-wro-script{
  color:var(--eggshell);
  display:block;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
}

.wro-hero__content h1,
.wro-hero__content h2{
  color:var(--eggshell);
  font-size:clamp(2rem, 5.2vw, 4.2rem);
  text-wrap:balance;
  margin:0;
}

.wro-hero__content p:not([class*="wro-eyebrow"]):not([class*="wro-script"]){
  color:#E6DCCE;
  max-width:42ch;
}

/* --- Faktenleiste --- */
.wro-hero__facts{
  align-self:end;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.25rem, 4vw, 3.5rem);
  padding-top:clamp(1rem, 2.5vw, 1.75rem);
  border-top:1px solid rgba(239,232,215,.22);
  margin:0;
}
.wro-hero__facts > *{
  margin:0;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--eggshell);
  opacity:.82;
}

/* --- Buttons auf dunklem Grund --- */
.wro-hero .wp-block-buttons{ margin-top:clamp(1.5rem, 3vw, 2.25rem); }

.wro-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background:var(--eggshell);
  color:var(--ruby);
}
.wro-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background:#fff;
  color:var(--ruby);
}
.wro-hero .is-style-outline .wp-block-button__link{
  color:var(--eggshell);
  border-color:rgba(239,232,215,.55);
  background:transparent;
}
.wro-hero .is-style-outline .wp-block-button__link:hover{
  background:var(--eggshell);
  border-color:var(--eggshell);
  color:var(--ruby);
}

@media (max-width:820px){
  .wro-hero{ --hero-h:auto; }
  .wro-hero__inner{
    padding-block:clamp(4rem, 22vw, 7rem) 2.5rem;
    gap:2.25rem;
  }
  .wro-hero__bg img{ object-position:center 30%; }

  /* Quer-Verlauf ergibt hier keinen Sinn - der Text nimmt die ganze
     Breite ein, also von unten abdunkeln. */
  .wro-hero::after{
    background:linear-gradient(180deg,
      rgba(26,20,22,.30) 0%,
      rgba(26,20,22,.12) 26%,
      rgba(26,20,22,.72) 62%,
      rgba(26,20,22,.94) 100%);
  }
  .wro-hero__facts{
    flex-direction:column;
    gap:.6rem;
  }
}

/* =================================================================
   4 · Karten
   ================================================================= */
.is-style-wro-card{
  background:#fff;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.is-style-wro-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(26,20,22,.10);
}
.is-style-wro-card img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

/* Akzentkarte ohne Bild - bricht das Raster bewusst auf */
.is-style-wro-card-accent{
  background:var(--ruby);
  color:var(--eggshell);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.is-style-wro-card-accent :is(h1,h2,h3,h4){ color:var(--eggshell); }

/* =================================================================
   5 · Bildkacheln (Spielstätten)
   ================================================================= */
.is-style-wro-tile{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  margin:0;
}
.is-style-wro-tile img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  opacity:.86;
  transition:transform .5s ease;
}
.is-style-wro-tile:hover img{ transform:scale(1.05); }
.is-style-wro-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,20,22,0) 45%, rgba(26,20,22,.72));
}
.is-style-wro-tile figcaption{
  position:absolute;
  left:1rem; right:1rem; bottom:.9rem;
  z-index:2;
  margin:0;
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.15;
  color:#fff;
  text-align:left;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* =================================================================
   6 · Signet als Hintergrund (CTA-Flächen)
   ================================================================= */
.is-style-wro-signet{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.is-style-wro-signet::before{
  content:"WRO";
  position:absolute;
  z-index:-1;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--script);
  font-size:clamp(12rem, 32vw, 26rem);
  letter-spacing:var(--script-ls);
  line-height:1;
  color:var(--eggshell);
  opacity:.12;
  user-select:none;
  pointer-events:none;
}

/* =================================================================
   7 · Fotos in die Palette einbinden
   Konzertfotos sind farbstark; ein dezenter Verlauf bindet sie ein.
   ================================================================= */
.wro-photo{ position:relative; }
.wro-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(148,17,22,.10), rgba(26,20,22,.16));
}

/* =================================================================
   7a · Überschrift mit flankierenden Linien
   Als Block-Stil "WRO Überschrift mit Linien" im Editor wählbar.
   Die Linien sind Pseudo-Elemente und passen sich der Breite an -
   kein zusätzliches Markup nötig.
   ================================================================= */
.is-style-wro-ruled{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 3vw, 2.5rem);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(1.35rem, 3.4vw, 2.5rem);
  line-height:1.18;
  /* gleicht die Laufweite hinter dem letzten Buchstaben aus, damit
     die Zeile optisch mittig steht */
  text-indent:.14em;
}
.is-style-wro-ruled::before,
.is-style-wro-ruled::after{
  content:"";
  flex:1 1 0;
  min-width:1.5rem;
  height:1px;
  background:var(--line);
}

/* Auf dunklen Flächen die Linie aufhellen */
.has-ink-background-color .is-style-wro-ruled::before,
.has-ink-background-color .is-style-wro-ruled::after,
.has-ruby-background-color .is-style-wro-ruled::before,
.has-ruby-background-color .is-style-wro-ruled::after{
  background:rgba(239,232,215,.35);
}

@media (max-width:600px){
  /* Auf schmalen Schirmen bleibt zu wenig Platz für Linien und Text */
  .is-style-wro-ruled::before,
  .is-style-wro-ruled::after{ display:none; }
  .is-style-wro-ruled{ display:block; }
}

/* Zentrierter Abschnittskopf
   Die Überschrift nutzt die volle Breite, damit die Linien Länge
   bekommen. Zierwort und Einleitung bleiben schmal und lesbar. */
.wro-sectionhead{
  text-align:center;
}
.wro-sectionhead .is-style-wro-script{
  font-size:clamp(1.35rem, 2.8vw, 1.9rem);
  margin-bottom:.35rem;
}
.wro-sectionhead > p{
  max-width:52ch;
  margin-inline:auto;
}
/* Der Leitspruch braucht die volle Breite - Versalien mit Sperrung
   laufen deutlich breiter als normaler Text. */
.wro-sectionhead > .is-style-wro-claim,
.wro-sectionhead > .wro-claim{
  max-width:none;
}

/* Auf schmalen Schirmen den festen Umbruch auflösen und die Sperrung
   etwas zurücknehmen - sonst bricht die Zeile unkontrolliert. */
@media (max-width:600px){
  .wro-claim,
  .is-style-wro-claim{
    letter-spacing:.14em;
    line-height:1.9;
  }
  .wro-claim br,
  .is-style-wro-claim br{ display:none; }
}

/* =================================================================
   7b · Termin-Tafel
   Gruppen mit "Standard"-Layout, das Raster macht das CSS - so hängt
   nichts an den Layout-Klassen, die WordPress erst beim Rendern setzt.
   ================================================================= */
.wro-datebox{
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin:0;
}
.wro-datebox > *{
  margin:0;
  padding:clamp(1.25rem, 3vw, 2.25rem);
  border-right:1px solid var(--line);
}
.wro-datebox > *:last-child{ border-right:none; }

.wro-datebox__label{
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--soft);
  margin:0 0 .5rem;
}
.wro-datebox__value{
  margin:0;
  font-family:var(--serif);
  font-size:1.55rem;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}

/* =================================================================
   7c · Komponisten-Band
   ================================================================= */
.wro-names{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.9rem, 4vw, 3.5rem);
  margin:0;
}
.wro-names > *{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.5rem, 4vw, 2.9rem);
  line-height:1.2;
}

/* =================================================================
   7d · Bewertung
   ================================================================= */
.wro-rating__stars{
  color:var(--ruby);
  font-size:1.4rem;
  letter-spacing:.22em;
  margin:0;
}
.wro-rating__score{
  margin:.3rem 0 0;
  font-family:var(--serif);
  font-size:clamp(3rem, 8vw, 5.2rem);
  line-height:1;
  color:var(--ruby);
  font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  .wro-datebox > *{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .wro-datebox > *:last-child{ border-bottom:none; }
}

/* =================================================================
   8 · GeneratePress: Header & Footer
   Struktur kommt von GeneratePress, hier nur die CI-Anpassung.
   ================================================================= */
.site-header{ border-bottom:1px solid var(--line); }

.main-navigation .main-nav ul li a{
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.site-footer{
  background:var(--ink);
  color:#B9AF9F;
  font-size:.85rem;
}
.site-footer :is(h2,h3,h4){
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--eggshell);
}
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:hover{ color:var(--eggshell); }

/* =================================================================
   9 · Bokun
   Die Widgets laufen in einem iFrame - Schrift und Farben INNEN lassen
   sich von hier NICHT ändern. Das wird in Bokun selbst eingestellt
   (Booking Channels -> Widgets -> Design). Hier nur der Rahmen drumherum.
   ================================================================= */
.wro-bokun{
  min-height:160px;
  border:1px solid var(--line);
  padding:clamp(1rem, 2.5vw, 2rem);
  background:#fff;
}
.wro-bokun iframe{ max-width:100%; border:0; }

/* =================================================================
   10 · Zugänglichkeit
   ================================================================= */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:2px solid var(--ruby);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}