/* =============================================
   THERME 51° – Global Styles v2 (Dark CI)
   #AF3534 Bordeaux · #1a1a1a Antrazit · #22c55e Grün (Tagesgast)
============================================= */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
  --bordeaux: #AF3534;
  --bordeaux-dark: #8f2b2a;
  --antra-deep: #111111;
  --antra-mid:  #1e1e1e;
  --antra-soft: #2d2d2d;
  --antra-line: #383838;
  --teal:       #2A8FAD;
  --green:      #22c55e;
  --green-dark: #16a34a;
  --text-dark:  #f0eee9;
  --text-muted: rgba(240,238,233,0.6);
  --text-body:  #222222;
  --bg-light:   #f9f8f5;
  --bg-white:   #ffffff;
  --max-w: 1160px;
  --radius: 3px;
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lato', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.72; color: var(--text-body); background: var(--bg-white); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --- Typography --- */
h1,h2,h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: .6rem; }
h3 { font-size: 1.3rem; margin-bottom: .35rem; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Buttons --- */
.btn {
  display: inline-block; padding: .72rem 1.8rem; border-radius: var(--radius);
  font-family: var(--font-body); font-size: .9rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: all .2s ease; white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--bordeaux); color: #fff; border: 2px solid var(--bordeaux); }
.btn-primary:hover { background: var(--bordeaux-dark); border-color: var(--bordeaux-dark); }
.btn-green  { background: var(--green); color: #fff; border: 2px solid var(--green); }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }
.btn-outline-dark { background: transparent; color: var(--antra-deep); border: 2px solid var(--antra-deep); }
.btn-outline-dark:hover { background: var(--antra-deep); color: #fff; }
.btn-dark { background: var(--antra-deep); color: #fff; border: 2px solid var(--antra-deep); }
.btn-dark:hover { background: #000; }

/* --- Layout --- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

/* Light sections */
.section      { padding: 5rem 0; background: var(--bg-white); }
.section-soft { padding: 5rem 0; background: var(--bg-light); }

/* Dark sections */
.section-dark {
  padding: 5rem 0; background: var(--antra-deep); color: var(--text-dark);
}
.section-dark h1,.section-dark h2,.section-dark h3 { color: var(--text-dark); }
.section-dark p { color: var(--text-muted); }
.section-dark .muted { color: var(--text-muted); }

/* Mid-dark */
.section-mid {
  padding: 5rem 0; background: var(--antra-mid); color: var(--text-dark);
}
.section-mid h2,.section-mid h3 { color: #fff; }
.section-mid p { color: var(--text-muted); }

/* Labels */
.section-label {
  display: block; font-family: var(--font-body); font-size: .75rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bordeaux); margin-bottom: .75rem;
}
.section-dark .section-label, .section-mid .section-label { color: var(--teal); }

/* Spa label green */
.label-green { color: var(--green) !important; }

/* Helpers */
.text-center { text-align: center; }
.muted { color: #666; }

/* Banner */
.banner { background: var(--bordeaux); color: #fff; padding: .9rem 1.5rem; text-align: center; font-size: .92rem; }
.banner a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: .4rem; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.split-img img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius); }
.split.reverse .split-img { order: 2; }
.split.reverse .split-text { order: 1; }
.split-text { display: flex; flex-direction: column; gap: 1.2rem; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.card { background: var(--bg-white); border: 1px solid #e5e3df; border-radius: var(--radius); padding: 1.8rem; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.card h3 { color: #111; }
.card-dark { background: var(--antra-soft); border-color: var(--antra-line); }
.card-dark h3 { color: #fff; }
.card-dark p { color: var(--text-muted); }
.card-icon { font-size: 1.8rem; margin-bottom: .6rem; }

/* Checklist */
.checklist { list-style: none; }
.checklist li { padding: .28rem 0 .28rem 1.8rem; position: relative; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.section-dark .checklist li::before,.section-mid .checklist li::before { color: var(--green); }

/* Table */
.t51-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.t51-table th { background: var(--antra-deep); color: #fff; padding: .6rem 1rem; text-align: left; font-size: .82rem; letter-spacing: .05em; }
.t51-table td { padding: .6rem 1rem; border-bottom: 1px solid #e8e6e2; }
.t51-table tr:last-child td { border-bottom: none; }
.t51-table td:first-child { color: #555; font-size: .92rem; }

/* Gutschein-Strip (erscheint auf allen Seiten) */
.gutschein-strip {
  background: var(--antra-soft); border-top: 1px solid var(--antra-line);
  padding: 1.5rem 0; text-align: center;
}
.gutschein-strip p { color: var(--text-muted); font-size: .9rem; margin: 0 0 .6rem; }

/* Responsive */
@media (max-width: 768px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-img,.split.reverse .split-text { order: 0; }
  .split-img img { height: 260px; }
  .section,.section-soft,.section-dark,.section-mid { padding: 3rem 0; }
  h1 { font-size: 2.2rem; }
}