/* =========================================================
   Eberfinger Festtage 2028 – Microsite Styles
   Wird zusätzlich zu ../assets/style.css eingebunden.
   ========================================================= */

/* --- Festtage-Farbpalette (aus neuem Logo abgeleitet) --- */
:root {
  --ft-yellow:      #f2c100;  /* Leuchtendes Gelb (Logo-Schrift) */
  --ft-brown:       #8b5a2b;  /* Holz-Banner-Braun               */
  --ft-brown-dark:  #1e0d04;  /* Dunkler Kreis-Rand im Logo      */
  --ft-forest:      #4A8C2A;  /* helles Tannengrün (Logo-Hügel/Bäume) */
  --ft-forest-dark: #356A1C;  /* dunklere Variante für Texte mit besserem Kontrast */
}

/* --- Header --- */
.ft-header {
  background: var(--ft-brown-dark);
  color: var(--cream);
  border-bottom: 4px solid var(--ft-brown);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.ft-header .ft-bar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.ft-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--cream);
  text-decoration: none;
  flex-shrink: 0;
}
.ft-brand img { width: 56px; height: 56px; display: block; }
.ft-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.ft-brand .ft-brand-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.1rem;
}
.ft-brand .ft-brand-date {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--ft-yellow);
  font-size: 0.85rem;
}
.ft-nav { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.ft-nav a {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  color: var(--cream);
  text-decoration: none;
  border-radius: 4px;
}
.ft-nav a:hover, .ft-nav a.active {
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
}
.ft-nav a.back {
  color: var(--ft-yellow);
  font-size: 0.85rem;
  border-left: 1px solid rgba(243,236,213,0.3);
  margin-left: 0.4rem;
  padding-left: 1rem;
}
.ft-nav a.back:hover { background: transparent; color: var(--cream); }

/* --- Instagram-Icon im Festtage-Header (analog zur Hauptseite, aber in Festtage-Farben) --- */
.ft-social {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem;
  margin: 0 0.3rem;
  border-radius: 50%;
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
  border: 2px solid var(--ft-yellow);
  transition: background 0.25s, border-color 0.25s, transform 0.2s;
}
.ft-social svg { width: 22px; height: 22px; display: block; }
.ft-social:hover {
  background: #FFFFFF;
  border-color: #DD2A7B;
  transform: translateY(-1px) scale(1.05);
}
.ft-social:hover svg rect,
.ft-social:hover svg path,
.ft-social:hover svg line {
  stroke: url(#ig-gradient-ft);
}

/* --- Hero --- */
.ft-hero {
  position: relative;
  /* Sky-Gradient analog Hauptseite (top-to-bottom, hell-zu-dunkel),
     aber in Festtage-Palette: Cream oben → warmes Gold → Brown unten.
     Radial-Glow oben bleibt erhalten als Wärme-Akzent. */
  background:
    radial-gradient(ellipse at 55% 25%, rgba(139,90,43,0.35), transparent 52%),
    linear-gradient(
      to bottom,
      #FAF5E4 0%,
      #F0E2A6 22%,
      #E5C870 50%,
      var(--ft-brown) 75%,
      var(--ft-brown-dark) 100%
    );
  color: var(--cream);
  padding: 4rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
}
.ft-hero::after {
  /* 4 Ebenen kombiniert:
     1. Alpensilhouette (Forest-Dark) als hinterster Hintergrund
     2. Original Grün-Schicht dunkel (#1f3a2a) — wie vorher
     3. Original Grün-Schicht mittel (#355c43, opacity 0.7) — wie vorher
     4. Eberfinger Zwiebelturm-Kirche (Brown-Dark) als Vordergrund */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'><polygon fill='%23356A1C' points='0,240 0,32 20,32 60,52 100,32 140,55 180,70 220,90 260,105 330,100 370,75 400,55 430,30 465,55 500,28 540,15 580,8 620,18 660,8 700,5 740,12 780,28 820,10 860,22 900,38 940,18 980,28 1020,15 1060,38 1100,22 1140,32 1180,15 1200,15 1200,240'/><polygon fill='%231f3a2a' points='0,240 0,153 120,87 220,142 340,65 480,153 600,76 740,164 880,98 1000,153 1100,109 1200,175 1200,240'/><polygon fill='%23355c43' opacity='0.7' points='0,240 0,185 150,120 280,175 420,109 560,175 700,120 840,185 980,131 1120,175 1200,153 1200,240'/></svg>") center bottom / cover no-repeat;
  pointer-events: none;
}
.ft-hero-logo {
  width: 200px; height: 200px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.45));
  margin-bottom: 1.4rem;
  position: relative; z-index: 2;
}
.ft-hero h1 {
  font-family: 'Oswald', sans-serif;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin: 0;
  line-height: 1.05;
  position: relative; z-index: 2;
}
.ft-date {
  font-family: 'Oswald', sans-serif;
  color: var(--ft-yellow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-top: 0.6rem;
  position: relative; z-index: 2;
}
.ft-tag {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--cream);
  margin-top: 1rem;
  font-size: 1.1rem;
  position: relative; z-index: 2;
}

/* --- Countdown --- */
.ft-countdown-wrap {
  background: var(--ft-brown-dark);
  color: var(--cream);
  padding: 3rem 1.5rem;
  text-align: center;
  border-top: 3px solid var(--ft-brown);
  position: relative;
}
.ft-countdown-wrap h2 {
  color: var(--ft-yellow);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
}
.ft-countdown {
  display: flex; justify-content: center; gap: 1rem;
  flex-wrap: wrap; max-width: 720px; margin: 0 auto;
}
.ft-counter {
  background: rgba(139,90,43,0.18);
  border: 1px solid rgba(242,193,0,0.45);
  border-radius: 8px;
  padding: 1.2rem 1rem;
  min-width: 110px;
  flex: 1 1 110px;
}
.ft-counter .num {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--ft-yellow);
  line-height: 1;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}
.ft-counter .lbl {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
  opacity: 0.85;
}

/* --- Generischer Content-Bereich --- */
.ft-content { background: var(--cream); padding: 4rem 1.5rem; }
.ft-content-inner { max-width: 1080px; margin: 0 auto; }
.ft-content h2 {
  text-align: center;
  color: var(--ft-forest);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.ft-content .lead { text-align: center; max-width: 720px; margin: 0 auto 2rem; color: #2a3a2f; }

/* --- Teaser-Grid (Landing) --- */
.ft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.ft-teaser {
  background: var(--cream-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(31,58,42,0.12);
  box-shadow: 0 3px 14px var(--shadow);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ft-teaser:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(31,58,42,0.28);
}
.ft-teaser .ft-teaser-img {
  aspect-ratio: 16/10;
  background: var(--ft-forest);
  color: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.ft-teaser .ft-teaser-img svg { width: 100%; height: 100%; display: block; }
.ft-teaser .ft-teaser-body { padding: 1.2rem 1.4rem 1.6rem; }
.ft-teaser .ft-cat {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--gold-dark);
  margin-bottom: 0.4rem;
}
.ft-teaser h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  color: var(--ft-forest);
  letter-spacing: 0.03em;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.ft-teaser p { font-size: 0.95rem; color: #44513f; margin: 0; }
.ft-teaser .ft-arrow {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: 'Oswald', sans-serif;
  color: var(--gold-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.ft-teaser:hover .ft-arrow { color: var(--ft-forest); }

/* --- Inhalts-Kacheln auf Subseiten --- */
.ft-card {
  background: var(--cream-light);
  border-radius: 8px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 2px 10px var(--shadow);
  border: 1px solid rgba(31,58,42,0.10);
}
.ft-card h3 { color: var(--ft-forest); margin-bottom: 0.5rem; }
.ft-card.dark { background: var(--ft-forest); color: var(--cream); border-color: var(--gold); }
.ft-card.dark h3 { color: var(--gold); }
.ft-card.accent { border-left: 5px solid var(--ft-brown); }

/* Tabellen für Bewirtung, Preise etc. */
.ft-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
}
.ft-table th, .ft-table td {
  text-align: left;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px dashed rgba(31,58,42,0.18);
}
.ft-table th {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--ft-forest);
}
.ft-table td.preis {
  font-family: 'Oswald', sans-serif;
  color: var(--gold-dark);
  text-align: right;
  white-space: nowrap;
}

/* --- Program-Days (Programm-Seite) --- */
.program-day {
  background: var(--cream-light);
  border-radius: 8px;
  box-shadow: 0 3px 12px var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 180px 1fr;
}
.program-day .day-head {
  background: var(--ft-forest);
  color: var(--cream);
  padding: 1.3rem 1.2rem;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
}
.program-day .day-head .wday { font-family: 'Oswald', sans-serif; font-size: 0.95rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ft-yellow); }
.program-day .day-head .date { font-family: 'Oswald', sans-serif; font-size: 2rem; letter-spacing: 0.05em; color: var(--cream); line-height: 1.1; }
.program-day .day-head .month { font-family: 'Lora', serif; font-style: italic; color: var(--ft-yellow); margin-top: 0.2rem; }
.program-day .day-body { padding: 1.3rem 1.6rem; }
.program-day h3 { color: var(--ft-forest); }
.program-day ul { list-style: none; margin-top: 0.6rem; padding: 0; }
.program-day ul li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(31,58,42,0.18);
  display: flex; gap: 1rem; align-items: baseline;
}
.program-day ul li:last-child { border-bottom: none; }
.program-day .uhr { font-family: 'Oswald', sans-serif; color: var(--ft-brown); min-width: 80px; letter-spacing: 0.05em; }

/* --- Footer --- */
.ft-footer {
  background: var(--ft-brown-dark);
  color: var(--cream);
  padding: 3rem 1.5rem 1.5rem;
  border-top: 4px solid var(--ft-brown);
}
.ft-footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.ft-footer h4 { color: var(--ft-yellow); margin-bottom: 0.8rem; }
.ft-footer a { color: var(--cream); }
.ft-footer a:hover { color: var(--gold); }
.ft-footer ul { list-style: none; padding: 0; margin: 0; }
.ft-footer ul li { margin-bottom: 0.4rem; }
.ft-footer ul.ft-footer-cols-2 {
  column-count: 2;
  column-gap: 2rem;
}
.ft-footer ul.ft-footer-cols-2 li {
  break-inside: avoid;
}
.ft-footer .copy {
  text-align: center;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(243,236,213,0.2);
  font-size: 0.85rem;
  color: rgba(243,236,213,0.75);
}

@media (max-width: 720px) {
  .ft-header .ft-bar { gap: 0.6rem; }
  .ft-brand img { width: 44px; height: 44px; }
  .ft-brand .ft-brand-name { font-size: 0.95rem; }
  .ft-hero-logo { width: 160px; height: 160px; }
  .ft-nav a.back { border-left: none; padding-left: 0.4rem; }
  .program-day { grid-template-columns: 1fr; }
}

/* --- Headings im Festtage-Bereich: Pirata One Fraktur (wie auf der Hauptseite) --- */
.ft-hero h1,
.ft-countdown-wrap h2,
.ft-content h2,
.ft-teaser h3,
.ft-card h3,
.program-day h3 {
  font-family: 'Pirata One', 'UnifrakturMaguntia', 'Lora', serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
}
/* Countdown-Zahlen ebenfalls in Pirata One (passt zu den Überschriften) */
.ft-counter .num {
  font-family: 'Pirata One', 'UnifrakturMaguntia', 'Lora', serif;
  font-weight: 400;
}

/* --- Buttons im Festtage-Bereich überschreiben (Brand-Farben statt Vereinsblau) --- */
.festtage-page .btn {
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
  border-color: var(--ft-yellow);
}
.festtage-page .btn:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ft-brown-dark);
}
.festtage-page .btn.dark {
  background: var(--ft-brown-dark);
  color: var(--ft-yellow);
  border-color: var(--ft-brown-dark);
}
.festtage-page .btn.dark:hover {
  background: var(--ft-brown);
  border-color: var(--ft-brown);
  color: var(--cream);
}
.festtage-page .btn.outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--ft-yellow);
}
.festtage-page .btn.outline:hover {
  background: var(--ft-yellow);
  border-color: var(--ft-yellow);
  color: var(--ft-brown-dark);
}

/* --- Countdown-Kacheln mit Holzbanner-Optik (Wood-Grain via externes SVG,
       horizontale organische Maserung + Knots, helles warmes Pinien-Braun) --- */
.ft-counter {
  background:
    linear-gradient(180deg, rgba(255,235,200,0.22) 0%, transparent 22%, rgba(0,0,0,0.12) 100%),
    url("/user/themes/eberfing/images/wood-grain.svg") center / cover,
    linear-gradient(180deg, #D9A968 0%, #C18B4F 50%, #A47340 100%);
  border: 2px solid #6B4521;
  box-shadow:
    inset 0 1px 0 rgba(255,230,190,0.4),
    inset 0 -2px 4px rgba(60,35,15,0.25),
    0 2px 6px rgba(0,0,0,0.35);
  border-radius: 6px;
}

/* --- Newsticker / Aktuelles (Festtage-Startseite) --- */
.ft-news-wrap {
  background: var(--cream);
  padding: 3.5rem 1.5rem;
  border-top: 1px solid rgba(60,35,15,0.10);
}
.ft-news-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.ft-news-wrap h2 {
  text-align: center;
  color: var(--ft-brown-dark);
  font-family: 'Pirata One', 'UnifrakturMaguntia', 'Lora', serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1.8rem;
}
.ft-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.ft-news-card {
  background: var(--cream-light);
  border-left: 5px solid var(--ft-yellow);
  border-radius: 0 6px 6px 0;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 2px 8px rgba(60,35,15,0.10);
}
.ft-news-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--ft-brown);
  margin-bottom: 0.5rem;
}
.ft-news-card h3 {
  color: var(--ft-forest-dark);
  font-family: 'Pirata One', 'UnifrakturMaguntia', 'Lora', serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
  line-height: 1.2;
}
.ft-news-text {
  color: #3a2818;
  line-height: 1.6;
  font-size: 0.95rem;
}
.ft-news-text p { margin-bottom: 0.6rem; }
.ft-news-text p:last-child { margin-bottom: 0; }
.ft-news-date {
  font-family: 'Oswald', sans-serif;
  color: var(--ft-brown);
  font-size: 0.78rem;
  margin-top: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Single-Card-Variante (im Festtage-Hero-Teaser) */
.ft-news-grid-single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
/* 3-Spalten-Grid für die Aktuelles-Listing-Seite */
.ft-news-grid-3col {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ft-news-inner-wide {
  max-width: 1280px;
}

/* News-Card direkt im Hero (überlagert Mountains) */
.ft-hero-news {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin: 2.2rem auto 0;
  text-align: left;
  background: rgba(250, 245, 228, 0.96);
  backdrop-filter: blur(2px);
}
.ft-hero-news .ft-news-text {
  color: #3a2818;
}
@media (max-width: 640px) {
  .ft-hero-news { margin-left: 1rem; margin-right: 1rem; }
}

/* Logo zentriert, News-Card absolut am rechten Bildschirmrand */
.ft-hero-main {
  position: relative;
  z-index: 2;
  text-align: center;
}
.ft-hero-news {
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  max-width: 380px;
  margin: 0;
  text-align: left;
  z-index: 3;
}
@media (max-width: 1100px) {
  /* Auf schmaleren Screens: zurück zu Stack, damit nichts überlappt */
  .ft-hero-news {
    position: static;
    transform: none;
    margin: 2rem auto 0;
    max-width: 560px;
  }
}

/* --- Scrollende Sponsoren-Side-Banner (festtage Hauptseite) --- */
.ft-sponsor-banner {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  overflow: hidden;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(30,13,4,0.45) 0%, transparent 100%);
}
.ft-sponsor-banner-left { left: 0; }
.ft-sponsor-banner-right {
  right: 0;
  background: linear-gradient(-90deg, rgba(30,13,4,0.45) 0%, transparent 100%);
}
.ft-sponsor-track {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem;
  will-change: transform;
}
.ft-sponsor-track-up   { animation: ft-scroll-up   45s linear infinite; }
.ft-sponsor-track-down { animation: ft-scroll-down 45s linear infinite; }
@keyframes ft-scroll-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes ft-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.ft-sponsor-tile {
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.6rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(60,35,15,0.4);
  line-height: 1.25;
}
@media (max-width: 1100px) {
  .ft-sponsor-banner { display: none; }
}

/* --- Partner-Karten (eigene Page) --- */
.ft-partner-card {
  text-align: center;
  position: relative;
  padding-top: 1.4rem;
}
.ft-partner-card .ft-cat {
  display: inline-block;
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
  padding: 0.15rem 0.6rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

/* === Countdown-Reihe (nur Counter mittig — Banner sind absolut im Wrap) === */
.ft-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  max-width: 1320px;
  margin: 0 auto;
}
/* Banner an den Außenrand des braunen Balkens, 50px Abstand oben/unten */
.ft-banner-side {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 280px;
  overflow: hidden;
  border: 2px solid var(--ft-brown);
  border-radius: 6px;
  background: var(--ft-brown-dark);
  z-index: 2;
}
/* Linker Banner schmal (280px) am linken Bildschirmrand –
   genau eine Karte sichtbar, kein Konflikt mit Countdown-Kacheln. */
.ft-banner-left {
  left: 1.5rem;
  width: 280px;
}
.ft-banner-right { display: none; }
.ft-banner-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  animation: ft-banner-slide 14s linear infinite;
}
.ft-banner-track-reverse {
  /* gleiche Richtung wie links – kein Reverse mehr */
  animation-direction: normal;
}
@keyframes ft-banner-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ft-banner-tile {
  flex: 0 0 280px;
  width: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  padding: 0.9rem 1rem 1rem;
  text-align: center;
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
  border-right: 2px dashed rgba(60,35,15,0.3);
}
.ft-banner-top {
  display: block;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ft-brown-dark);
  background: rgba(255,255,255,0.55);
  border-bottom: 1px dashed rgba(60,35,15,0.35);
  padding: 0.25rem 0.4rem;
  margin: -0.9rem -1rem 0.4rem;
}
.ft-banner-tile strong {
  font-family: 'Pirata One', 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ft-brown-dark);
}
.ft-banner-tile em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ft-brown-dark);
  opacity: 0.85;
}
.ft-banner-cat {
  font-family: 'Oswald', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ft-brown);
  background: var(--cream);
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
}
.ft-banner-cta {
  background: var(--cream);
  border: 2px dashed var(--ft-yellow);
}
.ft-banner-cta strong { color: var(--ft-brown-dark); }
.ft-banner-cta .ft-banner-top {
  background: var(--ft-yellow);
  color: var(--ft-brown-dark);
}
@media (max-width: 1100px) {
  .ft-banner-side { display: none; }
}

/* === Topbar (ft-nav) einzeilig, ohne Scrollbar, volle Seitenbreite === */
.ft-header .ft-bar {
  flex-wrap: nowrap;
  overflow: visible;
  max-width: 100%;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
.ft-nav {
  flex-wrap: nowrap;
  gap: 0.1rem;
}
.ft-nav a {
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* === Kompakter Hero fuer Impressum/Datenschutz === */
.ft-hero-compact {
  padding: 3rem 1.5rem 2rem;
  min-height: auto;
}
.ft-hero-compact h1 {
  font-family: 'Pirata One', 'Lora', serif;
  color: var(--ft-yellow);
  font-size: 2.4rem;
  text-align: center;
  margin: 0;
}
.ft-hero-compact::after { display: none; }

/* === Legal-Content Lesbarkeit === */
.legal-content {
  font-family: 'Lora', serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ft-brown-dark);
}
.legal-content h2 {
  font-family: 'Oswald', sans-serif;
  color: var(--ft-brown);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(139,90,43,0.2);
  padding-bottom: 0.3rem;
}
.legal-content h3 {
  font-family: 'Oswald', sans-serif;
  color: var(--ft-forest-dark);
  font-size: 1.05rem;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}
.legal-content p { margin-bottom: 0.8rem; }
.legal-content ul { margin: 0.6rem 0 1rem 1.5rem; }
.legal-content li { margin-bottom: 0.3rem; }
.legal-content a { color: var(--ft-forest-dark); text-decoration: underline; }
.legal-content a:hover { color: var(--ft-yellow); }

/* =========================================================
   RESPONSIVE DESIGN — Festtage Microsite
   Breakpoints: 1100 / 900 / 640 / 480
   ========================================================= */

/* ---------- <= 1100px: Tablet quer / kleines Notebook ---------- */
@media (max-width: 1100px) {
  .ft-banner-side { display: none; }
  .ft-hero-news {
    position: static;
    transform: none;
    margin: 1.5rem auto 0;
    max-width: 560px;
  }
  .ft-content-inner { max-width: 100%; padding: 0 1rem; }
}

/* ---------- <= 900px: Tablet hoch ---------- */
@media (max-width: 900px) {
  /* Topbar bricht in mehrere Zeilen */
  .ft-header .ft-bar {
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    gap: 0.6rem;
  }
  .ft-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.2rem;
  }
  .ft-nav a {
    padding: 0.35rem 0.6rem;
    font-size: 0.78rem;
  }
  .ft-brand img { width: 44px; height: 44px; }
  .ft-brand .ft-brand-name { font-size: 0.95rem; }
  .ft-brand .ft-brand-date { font-size: 0.75rem; }
  /* Hero kompakter */
  .ft-hero { padding: 2.5rem 1rem 4rem; }
  .ft-hero-logo { width: 140px; height: 140px; margin-bottom: 0.8rem; }
  .ft-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .ft-hero::after { height: 180px; }
  /* Grid-Karten 2-spaltig */
  .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* Footer 2-spaltig */
  .ft-footer-inner { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

/* ---------- <= 640px: Smartphone quer / grosses Handy ---------- */
@media (max-width: 640px) {
  /* Topbar weiter komprimieren */
  .ft-brand .ft-brand-text { display: none; }
  .ft-nav a { font-size: 0.72rem; padding: 0.3rem 0.45rem; }
  .ft-nav a.back { display: none; }

  /* Hero minimal */
  .ft-hero { padding: 2rem 1rem 3rem; }
  .ft-hero-logo { width: 110px; height: 110px; }
  .ft-hero h1 { font-size: 1.7rem; letter-spacing: 0.04em; }
  .ft-date { font-size: 1rem; letter-spacing: 0.12em; }
  .ft-tag { font-size: 0.9rem; }
  .ft-hero::after { height: 140px; }

  /* Countdown kompakter */
  .ft-countdown-wrap { padding: 1.6rem 1rem; }
  .ft-countdown-wrap h2 { font-size: 1.1rem; margin-bottom: 1rem; }
  .ft-countdown { gap: 0.5rem; flex-wrap: wrap; }
  .ft-counter { min-width: 70px; padding: 0.8rem 0.6rem; flex: 1 1 70px; }
  .ft-counter .num { font-size: 1.8rem; }
  .ft-counter .lbl { font-size: 0.65rem; letter-spacing: 0.05em; }

  /* Alles 1-spaltig */
  .ft-grid { grid-template-columns: 1fr; }
  .ft-content { padding: 2.5rem 1rem; }
  .ft-content h2 { font-size: 1.4rem; }
  .ft-card { padding: 1rem 1.2rem; }

  /* Tabellen scrollbar */
  .ft-table { font-size: 0.85rem; }

  /* Footer 1-spaltig */
  .ft-footer { padding: 2rem 1rem 1rem; }
  .ft-footer-inner { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; }

  /* News-Card */
  .ft-hero-news { padding: 1rem 1.1rem; font-size: 0.9rem; }
  .ft-news-card h3 { font-size: 1.2rem; }

  /* Programm-Tagesblöcke */
  .program-day .day-head {
    flex-direction: column;
    text-align: center;
    padding: 0.8rem 0.6rem;
  }
  .program-day .day-head .date { font-size: 2rem; }
  .program-day ul li { flex-direction: column; gap: 0.2rem; padding: 0.4rem 0; }
  .program-day ul li .uhr { font-size: 0.85rem; }

  /* Anreise-SVG-Lageplan: nicht abgeschnitten */
  .ft-content svg { width: 100% !important; height: auto !important; }
}

/* ---------- <= 480px: kleines Handy ---------- */
@media (max-width: 480px) {
  .ft-hero-logo { width: 90px; height: 90px; margin-bottom: 0.6rem; }
  .ft-hero h1 { font-size: 1.45rem; }
  .ft-content h2 { font-size: 1.25rem; }
  .ft-counter { min-width: 60px; padding: 0.6rem 0.4rem; }
  .ft-counter .num { font-size: 1.5rem; }
  .legal-content { font-size: 0.9rem; }
  .legal-content h2 { font-size: 1.1rem; }
}