.hero::before {
  content        : 'CHANGE';
}

/* ─────────────────────────────────────────────
   HAUPT-LAYOUT
───────────────────────────────────────────── */

.layout {
  display               : grid;
  grid-template-columns : 1fr 300px;
  gap                   : 4rem;
  max-width             : 1160px;
  margin                : 0 auto;
  padding               : 5rem 4rem;
  align-items           : start;
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns : 1fr;
    padding               : 3rem 2rem;
  }
  .sidebar { position: static !important; }
}

/* ─────────────────────────────────────────────
   TIMELINE
───────────────────────────────────────────── */

.timeline {
  position : relative;
}

/* Vertikale Linie */
.timeline::before {
  content    : '';
  position   : absolute;
  left       : 72px;
  top        : 0;
  bottom     : 0;
  width      : 1px;
  background : var(--border);
}

/* ── Timeline-Eintrag ── */
.tl-item {
  display       : grid;
  grid-template-columns: 72px 1fr;
  gap           : 2.5rem;
  margin-bottom : 0;
  position      : relative;
}

/* Verbindungslinie zwischen Items */
.tl-item + .tl-item {
  margin-top : 0;
}

/* ── Zeitstempel-Spalte ── */
.tl-time {
  text-align  : right;
  padding-top : 2rem;
  padding-right: 0;
  position    : relative;
}

.tl-time-label {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : 1rem;
  font-weight    : 400;
  color          : var(--main-red-color);
  display        : block;
  line-height    : 1.2;
}

.tl-time-sub {
  font-size   : 0.65rem;
  color       : #bbb;
  display     : block;
  margin-top  : 2px;
  letter-spacing: 0.05em;
}

/* Punkt auf der Linie */
.tl-dot {
  position      : absolute;
  right         : -6px;
  top           : 2.4rem;
  width         : 11px;
  height        : 11px;
  border-radius : 50%;
  background    : var(--main-bg-color);
  border        : 2px solid var(--main-red-color);
  z-index       : 1;
}

/* ── Inhalts-Karte ── */
.tl-card {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  overflow      : hidden;
  margin-bottom : 2rem;
  transition    : border-color 0.2s;
}

.tl-card:hover { border-color: var(--main-red-color); }

.tl-card-img {
  width      : 100%;
  height     : 220px;
  object-fit : cover;
  display    : block;
  transition : transform 0.5s ease;
}

.tl-card:hover .tl-card-img { transform: scale(1.03); }

.tl-card-body { padding: 1.8rem 2rem; }

.tl-card-tag {
  font-size      : 0.62rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : #fff !important;
  background: var(--main-red-color) !important;
  padding        : 3px 8px;
  border-radius  : 1px;
  display        : inline-block;
  margin-bottom  : 0.8rem;
}

.tl-card-tag.blue  { background: var(--main-blue-color); }
.tl-card-tag.earth { background: var(--earth); }
.tl-card-tag.dark  { background: var(--charcoal); }

.tl-card h2 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.6rem;
  font-weight   : 400;
  color         : white !important;
  line-height   : 1.3 !important;
  margin-bottom : 1rem;
}

.tl-card p {
  font-size   : 0.9rem;
  color       : #666;
  line-height : 1.85;
  margin-bottom: 0.8rem;
}

.tl-card p:last-child { margin-bottom: 0; }

/* Aktivitäten-Chips */
.tl-chips {
  display   : flex;
  flex-wrap : wrap;
  gap       : 6px;
  margin-top: 1.2rem;
}

.tl-chip {
  font-size      : 0.72rem;
  letter-spacing : 0.05em;
  color          : var(--muted);
  background     : var(--main-bg-color);
  border         : 1px solid var(--border);
  padding        : 0.3rem 0.7rem;
  border-radius  : 999px;
}

/* Highlight-Box */
.highlight {
  background    : rgba(109,26,52,0.05);
  border-left   : 3px solid var(--main-red-color);
  padding       : 1rem 1.3rem;
  margin-top    : 1.2rem;
  border-radius : 0 2px 2px 0;
}

.highlight p {
  font-family : 'Cormorant Garamond', serif;
  font-style  : italic;
  font-size   : 1rem;
  color       : var(--main-red-color);
  margin      : 0;
  line-height : 1.7;
}

/* ── Wochenprogramm-Strip (zwischen Tagen) ── */
.week-strip {
  background    : var(--charcoal);
  padding       : 3rem 4rem;
  margin        : 0 0 5rem;
}

.week-strip-inner {
  max-width : 1160px;
  margin    : 0 auto;
}

.week-strip h3 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : 1.8rem;
  font-weight   : 300;
  color         : #fff !important;;
  margin-bottom : 2rem;
}

.week-strip h3 em { font-style: italic; color: rgba(255,255,255,0.5); }

.week-grid {
  display               : grid;
  grid-template-columns : repeat(7, 1fr);
  gap                   : 8px;
}

@media (max-width: 760px) {
  .week-grid { grid-template-columns: repeat(4, 1fr); }
}

.week-day {
  background    : rgba(255,255,255,0.05);
  border        : 1px solid rgba(255,255,255,0.08);
  border-radius : 2px;
  padding       : 1rem 0.8rem;
  text-align    : center;
}

.week-day-name {
  font-size      : 0.65rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  color          : rgba(255,255,255,0.4);
  display        : block;
  margin-bottom  : 0.5rem;
}

.week-day-content {
  font-family : 'Cormorant Garamond', serif;
  font-size   : 0.88rem;
  color       : rgba(255,255,255,0.75);
  line-height : 1.5;
}

.week-day.highlight-day {
  background   : rgba(109,26,52,0.3);
  border-color : rgba(109,26,52,0.5);
}

/* ─────────────────────────────────────────────
   CTA
───────────────────────────────────────────── */

.cta-section {
  background    : var(--main-red-color);
  padding       : 5rem 4rem;
  text-align    : center;
}

.cta-section h2 {
  font-family   : 'Cormorant Garamond', serif;
  font-size     : clamp(2rem, 3.5vw, 3rem);
  font-weight   : 300;
  color         : #fff;
  margin-bottom : 1rem;
}

.cta-section h2 em { font-style: italic; }

.cta-section p {
  color         : rgba(255,255,255,0.7);
  font-size     : 0.9rem;
  margin-bottom : 2rem;
}

.cta-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 8px;
  padding        : 0.85rem 2.2rem;
  background     : #fff;
  color          : var(--main-red-color);
  font-family    : 'DM Sans', sans-serif;
  font-size      : 0.78rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  border-radius  : 2px;
  text-decoration: none;
  transition     : background 0.2s;
}

.cta-btn:hover { background: var(--main-bg-color); }

/* ─────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────── */

.sidebar {
  position       : sticky;
  top            : 6rem;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

.sidebar-card {
  background    : var(--main-bg-color2);
  border        : 1px solid var(--border);
  border-radius : 2px;
  overflow      : hidden;
}

.sidebar-card-head {
  background     : var(--main-red-color);
  padding        : 0.85rem 1.2rem;
  font-size      : 0.68rem;
  font-weight    : 500;
  letter-spacing : 0.12em;
  text-transform : uppercase;
  color          : #fff;
}

.sidebar-card-head.blue  { background: var(--main-blue-color); }
.sidebar-card-head.dark  { background: #6d1a34 !important; }

.sidebar-card-body { padding: 1.3rem; }

.sidebar-card-body p {
  font-size    : 0.85rem;
  color        : #777;
  line-height  : 1.75;
  margin-bottom: 1rem;
}

.sidebar-btn {
  display        : block;
  width          : 100%;
  padding        : 0.7rem 1rem;
  text-align     : center;
  background     : var(--main-red-color);
  color          : #fff;
  font-family    : 'DM Sans', sans-serif;
  font-size      : 0.72rem;
  font-weight    : 500;
  letter-spacing : 0.1em;
  text-transform : uppercase;
  text-decoration: none;
  border-radius  : 1px;
  transition     : background 0.2s;
  border         : 1px solid var(--main-red-color);
}

.sidebar-btn:hover { background: var(--main-red2-color); }

.sidebar-btn.outline {
  background : transparent;
  color      : var(--main-red-color);
  margin-top : 8px;
}

.sidebar-btn.outline:hover { background: var(--main-red-color); color: #fff; }

.nav-list { list-style: none; }

.nav-list li a {
  display         : flex;
  align-items     : center;
  gap             : 8px;
  padding         : 0.6rem 0;
  font-size       : 0.85rem;
  color           : #555;
  text-decoration : none;
  border-bottom   : 1px solid rgba(109,26,52,0.06);
  transition      : color 0.2s, padding-left 0.2s;
}

.nav-list li:last-child a { border-bottom: none; }
.nav-list li a:hover { color: var(--main-red-color); padding-left: 4px; }

.nav-list li a::before {
  content       : '';
  width         : 4px;
  height        : 4px;
  border-radius : 50%;
  background    : var(--main-red-color);
  flex-shrink   : 0;
  opacity       : 0.35;
  transition    : opacity 0.2s;
}

.nav-list li a:hover::before { opacity: 1; }

/* Tageszeit-Übersicht in Sidebar */
.time-list { list-style: none; }

.time-list li {
  display       : flex;
  gap           : 12px;
  align-items   : flex-start;
  padding       : 0.55rem 0;
  border-bottom : 1px solid rgba(109,26,52,0.06);
  font-size     : 0.82rem;
}

.time-list li:last-child { border-bottom: none; }

.time-list .t {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : 0.9rem;
  color          : var(--main-red-color);
  min-width      : 44px;
  flex-shrink    : 0;
}

.time-list .tl { color: #555; line-height: 1.5; }

/* ─────────────────────────────────────────────
   ANIMATIONEN
───────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-inner > * { animation: fadeUp 0.6s ease both; }
.hero .eyebrow    { animation-delay: 0s; }
.hero h1          { animation-delay: 0.1s; }
.hero .hero-sub   { animation-delay: 0.2s; }
.hero .hero-stats { animation-delay: 0.3s; }

@media (max-width: 768px) {
  .hero        { padding: 5rem 2rem 4rem; min-height: 60vh; }
  .week-strip  { padding: 2.5rem 2rem; }
  .cta-section { padding: 4rem 2rem; }
}