/* ============================================================
   FIGURENTHEATER – Rot & Gold (warm)
   Alle Fonts werden lokal geladen – keine externen Referenzen
   ============================================================ */

/* ── Lokale Fonts via @font-face ── */
/* Hinweis: Playfair Display + Source Sans 3 Dateien in theme://fonts/
   liegen. Zum Laden: woff2 Dateien in den fonts/-Ordner legen.
   Fallback: Palatino / system-ui */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Playfair Display Regular'), local('PlayfairDisplay-Regular'),
       url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Playfair Display Bold'), local('PlayfairDisplay-Bold'),
       url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Playfair Display Black'), local('PlayfairDisplay-Black'),
       url('../fonts/PlayfairDisplay-Black.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay-Black.woff') format('woff');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Playfair Display Italic'), local('PlayfairDisplay-Italic'),
       url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2'),
       url('../fonts/PlayfairDisplay-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Source Sans 3 Light'), local('SourceSans3-Light'),
       url('../fonts/SourceSans3-Light.woff2') format('woff2'),
       url('../fonts/SourceSans3-Light.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans 3 Regular'), local('SourceSans3-Regular'),
       url('../fonts/SourceSans3-Regular.woff2') format('woff2'),
       url('../fonts/SourceSans3-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Source Sans 3 SemiBold'), local('SourceSans3-SemiBold'),
       url('../fonts/SourceSans3-SemiBold.woff2') format('woff2'),
       url('../fonts/SourceSans3-SemiBold.woff') format('woff');
}

/* ── Farbpalette ── */
:root {
  --ft-crimson:         #C0392B;
  --ft-crimson-dark:    #96281B;
  --ft-crimson-light:   #E05A4A;
  --ft-ruby:            #A52020;
  --ft-gold:            #D4A017;
  --ft-gold-light:      #E8C040;
  --ft-gold-pale:       #F5DFA0;
  --ft-gold-shimmer:    #FAF0D0;
  --ft-ivory:           #FDF6E3;
  --ft-cream:           #FAF0D7;
  --ft-dark:            #1C0808;
  --ft-dark-mid:        #3A1010;
  --ft-text:            #3A1010;
  --ft-text-soft:       #7A3020;
  --ft-border:          #E8C8A0;
  --ft-velvet:          #5C1A1A;

  /* Font Stacks – lokal zuerst, dann System-Fallbacks */
  --font-serif: 'Playfair Display', 'Palatino Linotype', Palatino,
                'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-sans:  'Source Sans 3', 'Gill Sans MT', 'Gill Sans', Calibri,
                'Trebuchet MS', system-ui, -apple-system, sans-serif;
}

/* ── Basis ── */
body {
  font-family: var(--font-sans);
  color: var(--ft-text);
  background-color: var(--ft-cream);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif) !important;
  color: var(--ft-dark-mid) !important;
}

/* ── Header ── */
#header {
  background: var(--ft-ivory) !important;
  border-bottom: 2px solid var(--ft-gold) !important;
  color: var(--ft-text) !important;
  box-shadow: 0 2px 16px rgba(28, 8, 8, 0.12) !important;
}

#header a {
  color: var(--ft-dark-mid) !important;
  font-family: var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 600;
}
#header a.active {
  color: var(--ft-crimson-dark) !important;
  border-bottom: 1px dotted var(--ft-crimson-dark) !important;
}

.header-dark #header:not(.scrolled) {
  background: var(--ft-dark) !important;
  border-bottom-color: var(--ft-gold) !important;
}
.header-dark #header:not(.scrolled) a         { color: rgba(212,160,23,.85) !important; }
.header-dark #header:not(.scrolled) a.active,
.header-dark #header:not(.scrolled) a:hover   { color: var(--ft-gold-light) !important; }
.header-dark #header:not(.scrolled) .dropmenu ul ul a { color: var(--ft-text) !important; }

/* ── Navigation ── */
.dropmenu ul li a:hover,
.dropmenu ul li a:focus,
.dropmenu ul li a.active { color: var(--ft-crimson) !important; }

.dropmenu ul ul {
  background: var(--ft-ivory) !important;
  border-top: 2px solid var(--ft-gold) !important;
  box-shadow: 0 8px 30px rgba(28,8,8,.18) !important;
}

/* ── Hamburger ── */
.mobile-menu .button_container span { background: var(--ft-crimson) !important; }

/* ── Hero ── */
.hero { background-color: var(--ft-dark) !important; }
.hero h1 {
  font-family: var(--font-serif) !important;
  font-weight: 900 !important;
  color: var(--ft-gold-pale) !important;
  text-shadow: 1px 3px 12px rgba(0,0,0,.6);
}
.hero h2 {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  letter-spacing: .1em;
  color: rgba(245,223,160,.85) !important;
}
.hero.text-light h1 { color: var(--ft-gold-pale) !important; }
.hero.text-light h2 { color: rgba(232,192,64,.85) !important; }

/* ── Links ── */
a       { color: var(--ft-crimson); }
a:hover { color: var(--ft-crimson-dark); }
a:visited {    color: var(--ft-crimson-dark); }

/* ── Buttons ── */
.btn, .button {
  background: var(--ft-crimson) !important;
  border-color: var(--ft-crimson-dark) !important;
  color: #fff !important;
}
.btn:hover, .button:hover {
  background: var(--ft-crimson-dark) !important;
  border-color: var(--ft-velvet) !important;
}

/* ── Login ── */
#grav-login .login-form button[type="submit"],
#grav-login .twofa-form button[type="submit"]:first-child {
  background: var(--ft-crimson) !important;
  border-color: var(--ft-crimson-dark) !important;
  color: #fff !important;
}

/* ── Breadcrumbs ── */
#breadcrumbs span:not(:first-child)::before,
#breadcrumbs a:not(:first-child)::before { color: var(--ft-gold) !important; }

/* ── Footer ── */
#footer {
  background: var(--ft-dark) !important;
  color: rgba(212,160,23,.65) !important;
  border-top: 3px solid var(--ft-crimson) !important;
  padding: 2rem 1rem 1.5rem !important;
  font-family: var(--font-sans);
  letter-spacing: .03em;
}
#footer a       { color: var(--ft-gold-light) !important; }
#footer a:hover { color: var(--ft-gold-pale)  !important; }

/* ── Modular Features ── */
.modular-features .feature-icon          { color: var(--ft-gold) !important; }
.modular-features .feature-icon h6       { background: var(--ft-cream) !important; color: var(--ft-text-soft) !important; }
.modular-features .column:hover .feature-icon h6 { color: var(--ft-crimson) !important; }
.modular-features.small .column:hover .feature-icon i { color: var(--ft-crimson) !important; }
.modular-features .feature-content       { color: var(--ft-text-soft) !important; }

/* ── Blog Cards ── */
.blog-listing .card {
  background: var(--ft-ivory) !important;
  border: 1px solid var(--ft-border) !important;
  box-shadow: 0 4px 20px rgba(28,8,8,.08) !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
.blog-listing .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(192,57,43,.15) !important;
}

/* ── Sidebar ── */
#sidebar ul.related-pages li { border-bottom-color: var(--ft-border) !important; }

/* ── Mobile Overlay ── */
.overlay { background: var(--ft-dark) !important; }
.treemenu li { background: rgba(212,160,23,.07) !important; }
.treemenu li a:hover,
.treemenu li a:focus,
.treemenu li a.active { color: var(--ft-gold-light) !important; }

/* ── Typografie ── */
.title-h1h2 h1       { color: var(--ft-dark-mid) !important; }
.title-h1h2 h1 + h2  { color: var(--ft-crimson) !important; letter-spacing: .05em; }

/* ── Overlays ── */
.overlay-dark .image-overlay {
  background: rgba(28,8,8,.55) !important;
}
.overlay-dark-gradient .image-overlay {
  background: linear-gradient(to bottom, rgba(28,8,8,.6), rgba(192,57,43,.2)) !important;
}

/* ── Formulare ── */
.form-input:focus {
  border-color: var(--ft-crimson) !important;
  box-shadow: 0 0 0 .1rem rgba(192,57,43,.25) !important;
}

/* ── Code-Blöcke ── */
pre code, pre.xdebug-var-dump {
  background: var(--ft-ivory) !important;
  border-left: 3px solid var(--ft-gold) !important;
}

/* ── Labels ── */
.label.label-primary { background: var(--ft-crimson) !important; }

html { scroll-behavior: smooth; }

/* ============================================================
   HERO – Startseite
   ============================================================ */
.hero-home {
  background: linear-gradient(145deg,
    var(--ft-dark)          0%,
    var(--ft-velvet)        45%,
    #7A1A1A                75%,
    var(--ft-crimson-dark) 100%);
  padding: 5rem 2rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,.25) 0px,
    transparent 12px,
    transparent 28px,
    rgba(0,0,0,.18) 40px,
    transparent 52px,
    transparent 70px
  );
}
.hero-home::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ft-gold) 30%, var(--ft-gold-light) 50%, var(--ft-gold) 70%, transparent);
  z-index: 1;
}
.hero-home-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}
.hero-home h1 {
  font-family: var(--font-serif) !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  font-weight: 900 !important;
  color: var(--ft-gold-pale) !important;
  text-shadow: 2px 4px 16px rgba(0,0,0,.65);
  margin-bottom: .4rem;
  letter-spacing: .03em;
  line-height: 1.15;
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: rgba(212,160,23,.85);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 300;
  margin: .5rem 0 0;
}

/* ── Home-Inhalt ── */
.home-content {
  max-width: 760px;
  margin: 3rem auto;
  padding: 0 1rem;
}
.home-content h2 {
  color: var(--ft-crimson) !important;
  font-size: 1.5rem;
  border-bottom: 2px solid var(--ft-gold-pale);
  padding-bottom: .4rem;
  margin-bottom: 1rem;
}
.home-content h3 { color: var(--ft-dark-mid) !important; font-size: 1.1rem; }

/* ============================================================
   SPIELPLAN
   ============================================================ */
.spielplan-wrapper { max-width: 860px; margin: 0 auto; padding: 2rem 1rem; }
.spielplan-title {
  font-family: var(--font-serif) !important;
  color: var(--ft-dark-mid) !important;
  margin-bottom: .3rem;
}
.spielplan-title .saison { color: var(--ft-gold); font-style: italic; font-size: .75em; }

.spielplan-info {
  background: var(--ft-ivory);
  border-left: 4px solid var(--ft-gold);
  padding: .75rem 1rem;
  margin-bottom: 2rem;
  border-radius: 0 4px 4px 0;
  color: var(--ft-text-soft);
  font-size: .9rem;
}

.vorstellungen-liste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ft-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(28,8,8,.09);
}

.vorstellung-item {
  display: grid;
  grid-template-columns: 210px 110px 1fr 130px;
  align-items: center;
  padding: .85rem 1.2rem;
  background: #fff;
  border-bottom: 1px solid var(--ft-border);
  gap: .75rem;
  transition: background .2s;
}
.vorstellung-item:last-child { border-bottom: none; }
.vorstellung-item:nth-child(even) { background: var(--ft-cream); }
.vorstellung-item:hover { background: var(--ft-ivory); }

.vorstellung-item.vorstellung-special {
  background: linear-gradient(90deg, rgba(212,160,23,.07), transparent);
  border-left: 3px solid var(--ft-gold);
}

.vorstellung-datum { display: flex; flex-direction: column; }
.datum-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ft-dark-mid);
}
.datum-hinweis {
  font-size: .72rem;
  color: var(--ft-crimson);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.vorstellung-uhrzeit { font-size: .88rem; color: var(--ft-text-soft); white-space: nowrap; }
.vorstellung-details { display: flex; flex-direction: column; gap: .15rem; }

/* Spielplan-Link zu Repertoire-Detailseite */
a.vorstellung-titel {
  font-weight: 700;
  color: var(--ft-crimson);
  font-size: .95rem;
  text-decoration: none;
  transition: color .15s, text-decoration .15s;
}
a.vorstellung-titel:hover {
  color: var(--ft-crimson-dark);
  text-decoration: underline;
}
span.vorstellung-titel {
  font-weight: 700;
  color: var(--ft-text-soft);
  font-size: .95rem;
}
.vorstellung-untertitel { font-size: .78rem; color: var(--ft-text-soft); font-style: italic; }
.vorstellung-alter      { font-size: .78rem; color: var(--ft-text-soft); text-align: right; }

.spielplan-hinweis, .spielplan-reservierung {
  margin-top: 1.2rem;
  padding: .6rem 1rem;
  font-size: .88rem;
  color: var(--ft-text-soft);
  background: var(--ft-ivory);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.spielplan-reservierung {
  background: var(--ft-gold-pale);
  color: var(--ft-dark-mid);
  font-weight: 600;
  margin-top: .5rem;
}

@media (max-width: 768px) {
  .vorstellung-item { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; padding: .8rem 1rem; }
  .vorstellung-details { grid-column: 1 / -1; }
  .vorstellung-alter { text-align: left; }
}
@media (max-width: 480px) {
  .vorstellung-item { grid-template-columns: 1fr; }
}

/* ============================================================
   REPERTOIRE ÜBERSICHT
   ============================================================ */
.repertoire-wrapper { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
.repertoire-section { margin-bottom: 3rem; }
.repertoire-section-title {
  font-family: var(--font-serif) !important;
  color: var(--ft-dark-mid) !important;
  font-size: 1.4rem !important;
  border-bottom: 2px solid var(--ft-gold-pale);
  padding-bottom: .5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.repertoire-section-title i { color: var(--ft-gold); }

.stueck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }

.stueck-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--ft-ivory);
  border: 1px solid var(--ft-border);
  border-radius: 6px; padding: 1.2rem 1.4rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 2px 10px rgba(28,8,8,.07);
}
.stueck-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(192,57,43,.15);
  border-color: var(--ft-crimson-light);
  text-decoration: none;
}
.stueck-abend  { border-top: 3px solid var(--ft-crimson); }
.stueck-kinder { border-top: 3px solid var(--ft-gold); }

.stueck-titel {
  font-family: var(--font-serif) !important;
  font-size: .95rem !important;
  color: var(--ft-dark-mid) !important;
  margin: 0 0 .4rem !important;
  line-height: 1.3;
}
.stueck-beschreibung { font-size: .82rem; color: var(--ft-text-soft); margin: 0 0 .6rem; line-height: 1.45; }
.stueck-alter {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 12px;
  letter-spacing: .03em; text-transform: uppercase;
}
.stueck-alter-abend  { background: rgba(192,57,43,.12); color: var(--ft-crimson); }
.stueck-alter-kinder { background: rgba(212,160,23,.12); color: #A07800; }
.stueck-mehr { display: block; margin-top: .8rem; font-size: .78rem; color: var(--ft-crimson); font-weight: 600; letter-spacing: .04em; }

/* ============================================================
   STÜCK DETAILSEITE
   ============================================================ */
.stueck-detail { max-width: 780px; margin: 0 auto; padding: 2rem 1rem; }

/* Bild-Block */
.stueck-hero-bild {
  margin-bottom: 2rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(28,8,8,.18);
  position: relative;
}
.stueck-hero-bild::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ft-crimson), var(--ft-gold), var(--ft-crimson));
}
.stueck-hero-bild img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}
.stueck-no-image {
  background: linear-gradient(135deg, var(--ft-dark) 0%, var(--ft-velvet) 60%, var(--ft-crimson-dark) 100%);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.stueck-no-image::before {
  content: '🎭';
  font-size: 5rem;
  opacity: .25;
}

/* Header */
.stueck-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ft-gold-pale);
}
.stueck-name   { color: var(--ft-dark-mid) !important; margin-top: 0 !important; }
.stueck-untertitel-detail { color: var(--ft-crimson); font-style: italic; font-size: 1.05rem; margin-bottom: .75rem; }

.stueck-alter-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; padding: 3px 10px; border-radius: 14px;
  margin-right: .5rem; font-weight: 600;
  background: rgba(192,57,43,.12); color: var(--ft-crimson);
}
.stueck-dauer-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; padding: 3px 10px; border-radius: 14px;
  margin-right: .5rem; font-weight: 600;
  background: rgba(212,160,23,.12); color: #A07800;
}

.stueck-inhalt { line-height: 1.78; color: var(--ft-text); font-size: .95rem; }
.stueck-inhalt p { margin-bottom: 1rem; }

.btn-back {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 2.5rem; padding: .55rem 1.3rem;
  border: 2px solid var(--ft-border); border-radius: 4px;
  color: var(--ft-crimson); font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: all .2s;
  font-family: var(--font-sans);
}
.btn-back:hover { background: var(--ft-crimson); color: #fff; border-color: var(--ft-crimson); }

/* ── Kartenbestellung ── */
.kartenkarte {
  background: var(--ft-ivory);
  border: 2px solid var(--ft-gold);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.kartenkarte a { color: var(--ft-crimson); font-size: 1.6rem; text-decoration: none; }
.kartenkarte a:hover { color: var(--ft-crimson-dark); }
.kartenkarte i { color: var(--ft-gold); margin-right: .4rem; }

/* ── Kontakt ── */
.kontakt-karte {
  background: var(--ft-ivory); border: 1px solid var(--ft-border);
  border-radius: 8px; padding: 1.5rem; margin-left: 1rem;
}
.kontakt-karte h3 { color: var(--ft-crimson) !important; font-size: 1rem; margin-top: 0; }
.kontakt-karte address { font-style: normal; line-height: 1.7; color: var(--ft-text-soft); font-size: .9rem; }
.kontakt-karte a { color: var(--ft-crimson); }
.kontakt-karte a:hover { color: var(--ft-crimson-dark); }
@media (max-width: 768px) { .kontakt-karte { margin-left: 0; margin-top: 1.5rem; } }

/* ── Tabellen ── */
table {
  width: 100%; border-collapse: collapse; margin-bottom: 1.5rem;
  background: #fff; border: 1px solid var(--ft-border);
  border-radius: 6px; overflow: hidden; box-shadow: 0 2px 12px rgba(28,8,8,.07);
}
table th {
  background: var(--ft-ivory) !important; color: var(--ft-dark-mid) !important;
  font-family: var(--font-serif); padding: .6rem 1rem;
  border-bottom: 2px solid var(--ft-gold-pale); font-size: .85rem; text-align: left;
}
table td { padding: .6rem 1rem; border-bottom: 1px solid var(--ft-border); font-size: .88rem; color: var(--ft-text); }
table tr:last-child td { border-bottom: none; }
table tr:hover td { background: var(--ft-cream); }

/* ── Blockquote ── */
blockquote {
  background: linear-gradient(90deg, rgba(212,160,23,.1), rgba(212,160,23,.03)) !important;
  border-left: 4px solid var(--ft-gold) !important;
  margin: 1rem 0 !important; padding: .75rem 1.25rem !important;
  border-radius: 0 6px 6px 0; color: var(--ft-dark-mid) !important;
  font-style: normal !important; font-weight: 600;
}

/* ── Aufzählung ── */
.section ul li::marker { color: var(--ft-gold); }

/* ── Page padding ── */
#body-wrapper .container > .content-surround,
#body-wrapper .container { padding-top: 1rem; padding-bottom: 2rem; }
.header-fixed #body-wrapper { padding-top: 0; }

/* ── Footer Layout ── */
.footer-heading {
  font-family: var(--font-serif) !important;
  color: var(--ft-gold-light) !important;
  font-size: .85rem !important;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: .75rem;
  border-bottom: 1px solid rgba(212,160,23,.2);
  padding-bottom: .4rem;
}
.footer-address { font-style: normal; font-size: .85rem; line-height: 1.7; color: rgba(245,223,160,.7); }
#footer p, #footer small { font-size: .85rem; color: rgba(245,223,160,.65); }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: .3rem; }
.footer-nav a { font-size: .83rem; color: rgba(212,160,23,.75) !important; text-decoration: none; transition: color .2s; }
.footer-nav a.active::before {  font-family:FontAwesome; content: "\f061";}
.footer-nav a:hover { color: var(--ft-gold-pale) !important; }
.footer-bottom {
  border-top: 1px solid rgba(212,160,23,.15);
  padding-top: 1rem; font-size: .75rem;
  color: rgba(212,160,23,.4); text-align: center;
}
#footer a:visited {
    color: var(--ft-gold);
}

/* ── Page Hero (Seitenheader) ── */
.page-hero {
  background: linear-gradient(145deg,
    var(--ft-dark)          0%,
    var(--ft-velvet)        45%,
    #7A1A1A                75%,
    var(--ft-crimson-dark) 100%);
  padding: 4.8rem 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(0,0,0,.25) 0px,
    transparent 12px,
    transparent 28px,
    rgba(0,0,0,.18) 40px,
    transparent 52px,
    transparent 70px
  );
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ft-gold) 30%, var(--ft-gold-light) 50%, var(--ft-gold) 70%, transparent);
  z-index: 1;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}
.page-hero-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.3rem, 3vw, 2rem) !important;
  font-weight: 900 !important;
  color: var(--ft-gold-pale) !important;
  text-shadow: 2px 4px 16px rgba(0,0,0,.65);
  margin: 0 !important;
  letter-spacing: .03em;
  line-height: 1.2;
}

/* ── Repertoire Karten – gleichmäßige Bilder ── */
.stueck-card-bild {
  margin: -1.2rem -1.4rem 1rem;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}
.stueck-card-bild img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .3s ease;
}
.stueck-card:hover .stueck-card-bild img {
  transform: scale(1.04);
}

/* ── Footer Divider ── */
.footer-divider {
  text-align: center;
  margin: 0.4rem 0;
  opacity: 0.5;
}
.footer-divider img {
  max-width: 350px;
  width: 50%;
  height: auto;
  filter: invert(1) sepia(1) saturate(2.5) hue-rotate(5deg) brightness(0.9);
}

/* ── Nach-oben Button ── */
.totop-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--ft-gold);
  color: #fff !important;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--ft-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: background .2s, transform .2s, opacity .3s;
}
.totop-btn:hover {
  background: var(--ft-gold-pale);
  transform: translateY(-3px);
}