/* ==========================================================================
   Holidayhirsch — Stylesheet
   Farben aus dem Logo: Waldgruen, Terrakotta, Creme
   ========================================================================== */

:root {
  --gruen: #2d4941;
  --gruen-tief: #1e332d;
  --gruen-hell: #3d6255;
  --terra: #b26f4c;
  --terra-hell: #c8845f;
  --terra-blass: #f0e2d8;
  --creme: #faf7ec;
  --creme-tief: #f2ede0;
  --papier: #ffffff;
  --tinte: #22312c;
  --grau: #6f7d78;
  --grau-hell: #dfe3df;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  --schatten-s: 0 1px 2px rgba(30, 51, 45, .06), 0 2px 8px rgba(30, 51, 45, .05);
  --schatten-m: 0 4px 12px rgba(30, 51, 45, .07), 0 12px 32px rgba(30, 51, 45, .08);
  --schatten-l: 0 12px 28px rgba(30, 51, 45, .10), 0 28px 64px rgba(30, 51, 45, .12);

  --breite: 1240px;
  --kopf: 76px;
}

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gruen); text-decoration: none; }
a:hover { color: var(--terra); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--gruen-tief);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.mitte { text-align: center; }
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 26px;
  font: 600 15px/1 var(--sans);
  border: 0; border-radius: 100px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-terra { background: var(--terra); color: #fff; box-shadow: 0 4px 14px rgba(178, 111, 76, .3); }
.btn-terra:hover { background: var(--terra-hell); color: #fff; box-shadow: 0 8px 22px rgba(178, 111, 76, .38); }

.btn-gruen { background: var(--gruen); color: var(--creme); }
.btn-gruen:hover { background: var(--gruen-hell); color: #fff; }

.btn-rand { background: transparent; color: var(--gruen); box-shadow: inset 0 0 0 1.5px var(--grau-hell); }
.btn-rand:hover { background: var(--gruen); color: var(--creme); box-shadow: inset 0 0 0 1.5px var(--gruen); }

.btn-weiss { background: rgba(255, 255, 255, .95); color: var(--gruen-tief); }
.btn-weiss:hover { background: #fff; }

.btn-gross { padding: 17px 34px; font-size: 16px; }

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 247, 236, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.kopf.geschrumpft { border-bottom-color: rgba(45, 73, 65, .1); box-shadow: 0 2px 20px rgba(30, 51, 45, .05); }

.kopf-inner { display: flex; align-items: center; gap: 28px; height: var(--kopf); }

.logo { flex: 0 0 auto; }
/* object-fit schuetzt das Seitenverhaeltnis, falls max-width:100% die Breite kappt. */
.logo img { height: 30px; width: auto; object-fit: contain; object-position: left center; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 9px 14px;
  font-size: 15px; font-weight: 500;
  color: var(--gruen); border-radius: 100px;
  transition: background .18s ease, color .18s ease;
}
.nav a:hover { background: rgba(45, 73, 65, .07); }
.nav a.aktiv { color: var(--terra); font-weight: 600; }

.kopf-aktion { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.burger span {
  display: block; position: relative;
  width: 20px; height: 2px; background: var(--gruen); border-radius: 2px;
  transition: transform .25s ease, background .25s ease;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--gruen); border-radius: 2px;
  transition: transform .25s ease, top .25s ease;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.offen span { background: transparent; }
.burger.offen span::before { top: 0; transform: rotate(45deg); }
.burger.offen span::after { top: 0; transform: rotate(-45deg); }

.mobilnav {
  position: fixed; inset: var(--kopf) 0 auto 0; z-index: 89;
  background: var(--creme);
  padding: 16px 24px 28px;
  border-bottom: 1px solid var(--grau-hell);
  box-shadow: var(--schatten-m);
  transform: translateY(-120%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  max-height: calc(100vh - var(--kopf)); overflow-y: auto;
}
.mobilnav.offen { transform: translateY(0); }
.mobilnav a {
  display: block; padding: 13px 4px;
  font-size: 17px; font-weight: 500;
  border-bottom: 1px solid rgba(45, 73, 65, .08);
}
.mobilnav .btn { width: 100%; margin-top: 18px; }

/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; min-height: 640px; display: flex; align-items: center; overflow: hidden; }
/* Flache Variante der Startseite: Deals sollen sofort sichtbar sein. */
.hero.kompakt { min-height: 0; }
.hero.kompakt .hero-inhalt { padding: 54px 0 58px; max-width: 640px; }
.hero.kompakt h1 { font-size: clamp(2.1rem, 4vw, 3.15rem); }
.hero.kompakt .hero-text { margin-bottom: 1.4em; font-size: clamp(1rem, 1.4vw, 1.1rem); }
.hero.kompakt .marke { margin-bottom: 20px; }
.hero-bild { position: absolute; inset: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
.hero-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(30, 51, 45, .88) 0%, rgba(30, 51, 45, .62) 42%, rgba(30, 51, 45, .18) 72%, rgba(30, 51, 45, .05) 100%);
}
.hero-inhalt { position: relative; z-index: 2; padding: 90px 0; max-width: 680px; }
.hero h1 { color: #fff; margin-bottom: .34em; text-shadow: 0 2px 30px rgba(0, 0, 0, .2); }
.hero-text { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, .9); max-width: 540px; margin-bottom: 2em; }

.marke {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px 8px 13px; margin-bottom: 26px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 100px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.marke .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--terra-hell); box-shadow: 0 0 0 4px rgba(200, 132, 95, .3); }

/* Suchleiste */
.suche {
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px; max-width: 620px;
  background: rgba(255, 255, 255, .97);
  border-radius: 100px;
  box-shadow: var(--schatten-l);
}
.suche-feld { flex: 1; display: flex; align-items: center; gap: 10px; padding-left: 20px; min-width: 0; }
.suche-feld svg { flex: 0 0 auto; color: var(--grau); }
.suche input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: 400 16px var(--sans); color: var(--tinte);
}
.suche input::placeholder { color: #9aa5a0; }

.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-links a {
  padding: 8px 16px;
  font-size: 14px; font-weight: 500; color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .18s ease;
}
.hero-links a:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* --- TikTok-Band (oberster Deal-Block der Startseite) -------------------- */

.tiktok-band { padding-top: 46px; padding-bottom: 62px; }
.tiktok-band .auge { display: inline-flex; align-items: center; gap: 7px; }
.tiktok-band .auge svg { position: relative; top: -1px; }

/* --- Newsletter-Streifen ------------------------------------------------- */

.nl-band { background: var(--gruen); color: var(--creme); padding: 42px 0; }
.nl-band-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.nl-band h2 { color: var(--creme); font-size: clamp(1.55rem, 2.4vw, 2.1rem); margin-bottom: .3em; }
.nl-band p { color: rgba(250, 247, 236, .8); margin: 0; font-size: 15.5px; }
.nl-band .nl-form { margin-top: 0; }
.nl-band .nl-hinweis { margin-top: 12px; }
.nl-band .nl-hinweis a { color: rgba(250, 247, 236, .8); text-decoration: underline; }

/* --- Vertrauensleiste ---------------------------------------------------- */

.vertrauen { background: var(--gruen-tief); color: rgba(250, 247, 236, .9); padding: 22px 0; }
.vertrauen-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vertrauen-el { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.vertrauen-el svg { flex: 0 0 auto; color: var(--terra-hell); }

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt { padding: 92px 0; }
.abschnitt-creme { background: var(--creme-tief); }
.abschnitt-weiss { background: var(--papier); }

.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 44px; }
.kopfzeile-text { max-width: 620px; }
.kopfzeile p { color: var(--grau); margin: 0; font-size: 17px; }
.kopfzeile h2 { margin-bottom: .3em; }

.auge {
  display: block; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--terra);
}

/* --- Deal-Karten --------------------------------------------------------- */

.deal-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 28px; }

.karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--papier);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--schatten-s);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease;
}
.karte:hover { transform: translateY(-6px); box-shadow: var(--schatten-l); }

.karte-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--creme-tief); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.3, 0, .2, 1); }
.karte:hover .karte-bild img { transform: scale(1.06); }

.abzeichen {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: var(--terra);
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.rabatt {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 12px;
  font-size: 13px; font-weight: 700;
  color: var(--gruen-tief); background: rgba(255, 255, 255, .95);
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.karte-text { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }

.karte-ort {
  display: flex; align-items: center; gap: 6px; margin-bottom: 9px;
  font-size: 13px; font-weight: 500; color: var(--grau);
}
.karte-ort svg { color: var(--terra); flex: 0 0 auto; }

.karte h3 { font-size: 1.28rem; margin-bottom: 12px; line-height: 1.24; }
.karte h3 a { color: inherit; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.sterne { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; font-size: 13.5px; color: var(--grau); }
.sterne-reihe { display: inline-flex; gap: 1.5px; color: var(--terra); }

.merkmale { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.merkmal {
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 500; color: var(--gruen);
  background: var(--creme-tief); border-radius: 100px;
}

.karte-fuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 17px;
  border-top: 1px solid var(--grau-hell);
}
.preis-block { line-height: 1.15; }
.preis-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); margin-bottom: 3px; }
.preis { font-family: var(--serif); font-size: 1.75rem; font-weight: 700; color: var(--gruen-tief); }
.preis-alt { margin-left: 7px; font-size: 14px; color: var(--grau); text-decoration: line-through; }
.karte-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  color: var(--gruen); background: var(--creme-tief);
  border-radius: 50%;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.karte:hover .karte-pfeil { background: var(--terra); color: #fff; transform: translateX(3px); }

/* --- Filter -------------------------------------------------------------- */

.filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 34px;
}
.chip {
  padding: 10px 19px;
  font: 500 14.5px var(--sans); color: var(--gruen);
  background: var(--papier);
  border: 1.5px solid var(--grau-hell); border-radius: 100px;
  cursor: pointer;
  transition: all .2s ease;
}
.chip:hover { border-color: var(--gruen); }
.chip.aktiv { background: var(--gruen); border-color: var(--gruen); color: var(--creme); }

.filter-info { margin-left: auto; font-size: 14.5px; color: var(--grau); }
.leer { padding: 70px 20px; text-align: center; color: var(--grau); }

/* --- Kategorie-Kacheln --------------------------------------------------- */

.kachel-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kachel-gitter .kachel:nth-child(1),
.kachel-gitter .kachel:nth-child(2) { grid-column: span 2; }

.kachel {
  position: relative; display: flex; align-items: flex-end;
  min-height: 230px; padding: 26px;
  border-radius: var(--r-l); overflow: hidden;
  color: #fff;
  box-shadow: var(--schatten-s);
  transition: transform .28s ease, box-shadow .28s ease;
}
.kachel:hover { transform: translateY(-5px); box-shadow: var(--schatten-l); color: #fff; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.kachel:hover img { transform: scale(1.07); }
.kachel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30, 51, 45, .86) 0%, rgba(30, 51, 45, .35) 52%, rgba(30, 51, 45, .08) 100%);
}
.kachel-text { position: relative; z-index: 2; }
.kachel h3 { color: #fff; margin-bottom: 4px; font-size: 1.45rem; }
.kachel span { font-size: 14px; color: rgba(255, 255, 255, .84); }

/* --- Ziele --------------------------------------------------------------- */

.ziel-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ziel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 17px 21px;
  background: var(--papier);
  border: 1px solid var(--grau-hell); border-radius: var(--r-m);
  font-weight: 500;
  transition: all .2s ease;
}
.ziel:hover { border-color: var(--terra); background: var(--terra-blass); color: var(--gruen-tief); transform: translateY(-3px); }
.ziel small { font-size: 12.5px; color: var(--grau); font-weight: 400; }

/* --- Split-Abschnitt ----------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split-bild { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schatten-m); }
.split-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.punkte { list-style: none; margin: 26px 0 32px; padding: 0; }
.punkte li { position: relative; padding-left: 34px; margin-bottom: 15px; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--terra-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23b26f4c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.punkte strong { display: block; color: var(--gruen-tief); }
.punkte span { color: var(--grau); font-size: 15.5px; }

/* --- Magazin ------------------------------------------------------------- */

.artikel-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.artikel {
  position: relative; display: flex; flex-direction: column;
  background: var(--papier); border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--schatten-s);
  transition: transform .28s ease, box-shadow .28s ease;
}
.artikel:hover { transform: translateY(-5px); box-shadow: var(--schatten-m); }
.artikel-bild { aspect-ratio: 16 / 10; overflow: hidden; }
.artikel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.artikel:hover .artikel-bild img { transform: scale(1.05); }
.artikel-text { padding: 22px 24px 26px; }
.artikel .rubrik { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); }
.artikel h3 { margin: 10px 0 8px; font-size: 1.3rem; }
.artikel h3 a::after { content: ""; position: absolute; inset: 0; }
.artikel p { margin: 0; font-size: 15.5px; color: var(--grau); }

/* --- Newsletter ---------------------------------------------------------- */

.newsletter { position: relative; padding: 78px 0; background: var(--gruen); color: var(--creme); overflow: hidden; }
.newsletter::before {
  content: ""; position: absolute; top: -140px; right: -110px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(178, 111, 76, .34) 0%, transparent 68%);
}
.newsletter-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; text-align: center; }
.newsletter h2 { color: var(--creme); }
.newsletter p { color: rgba(250, 247, 236, .8); }

.nl-form { display: flex; gap: 10px; margin-top: 30px; }
.nl-form input {
  flex: 1; min-width: 0; padding: 16px 22px;
  font: 400 16px var(--sans); color: var(--tinte);
  background: rgba(255, 255, 255, .96);
  border: 0; border-radius: 100px; outline: none;
}
.nl-hinweis { margin: 16px 0 0; font-size: 13px; color: rgba(250, 247, 236, .58); }
.nl-danke { margin-top: 18px; font-weight: 600; color: var(--terra-hell); }

/* --- Fusszeile ----------------------------------------------------------- */

.fuss { background: var(--gruen-tief); color: rgba(250, 247, 236, .68); padding: 68px 0 0; font-size: 15px; }
.fuss-gitter { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 42px; padding-bottom: 48px; }
.fuss-logo img { height: 30px; width: auto; object-fit: contain; object-position: left center; margin-bottom: 18px; }
.fuss h4 { color: var(--creme); font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 17px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 10px; }
.fuss a { color: rgba(250, 247, 236, .68); }
.fuss a:hover { color: var(--terra-hell); }
.fuss-unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0 30px;
  border-top: 1px solid rgba(250, 247, 236, .12);
  font-size: 13.5px;
}
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* --- Unterseiten-Kopf ---------------------------------------------------- */

.seitenkopf { position: relative; padding: 74px 0 62px; overflow: hidden; background: var(--gruen); color: #fff; }
.seitenkopf.mit-bild { padding: 122px 0 96px; }
.seitenkopf-bild { position: absolute; inset: 0; }
.seitenkopf-bild img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(30, 51, 45, .9) 0%, rgba(30, 51, 45, .66) 58%, rgba(30, 51, 45, .38) 100%); }
.seitenkopf-inhalt { position: relative; z-index: 2; max-width: 700px; }
.seitenkopf h1 { color: #fff; }
.seitenkopf p { color: rgba(255, 255, 255, .87); font-size: 1.08rem; margin-bottom: 0; }

.krumen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .66); }
.krumen a { color: rgba(255, 255, 255, .82); }
.krumen a:hover { color: #fff; text-decoration: underline; }

/* --- Deal-Detailseite ---------------------------------------------------- */

.deal-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.deal-galerie { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schatten-m); position: relative; }
.deal-galerie img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.buchbox {
  position: sticky; top: calc(var(--kopf) + 24px);
  padding: 30px;
  background: var(--papier);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-m);
}
.buchbox .preis { font-size: 2.5rem; }
.buchbox .btn { width: 100%; margin-top: 20px; }
.spar-hinweis {
  display: inline-block; margin-top: 12px; padding: 6px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--terra);
  background: var(--terra-blass); border-radius: 100px;
}
.buch-liste { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--grau-hell); }
.buch-liste li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 15px; }
.buch-liste dt, .buch-liste .k { color: var(--grau); }
.buch-liste .w { font-weight: 600; color: var(--gruen-tief); text-align: right; }
.buch-fuss { margin: 16px 0 0; font-size: 12.5px; color: var(--grau); line-height: 1.5; }

.inhalt-text { max-width: 760px; }
.inhalt-text h2 { margin-top: 1.6em; }
.inhalt-text h2:first-child { margin-top: 0; }
.inhalt-text ul { padding-left: 22px; }
.inhalt-text li { margin-bottom: 9px; }

.info-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; margin: 34px 0; }
.info-box { padding: 22px; background: var(--creme-tief); border-radius: var(--r-m); }
.info-box .auge { margin-bottom: 7px; }
.info-box strong { font-family: var(--serif); font-size: 1.3rem; color: var(--gruen-tief); }

/* --- Formular / Kontakt -------------------------------------------------- */

.formular { display: grid; gap: 18px; max-width: 620px; }
.feld { display: grid; gap: 7px; }
.feld label { font-size: 14px; font-weight: 600; color: var(--gruen-tief); }
.feld input, .feld textarea, .feld select {
  padding: 14px 17px;
  font: 400 16px var(--sans); color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--grau-hell); border-radius: var(--r-s);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(45, 73, 65, .1);
}
.feld textarea { resize: vertical; min-height: 150px; }

/* --- Tabelle Bildnachweise ----------------------------------------------- */

.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th, .tabelle td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--grau-hell); vertical-align: top; }
.tabelle th { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Cookie-Banner ------------------------------------------------------- */

.cookie {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 120;
  display: none; align-items: center; gap: 22px;
  max-width: 880px; margin: 0 auto; padding: 20px 24px;
  background: var(--papier);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-l);
  transform: translateY(140%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.cookie.sichtbar { display: flex; }
.cookie.rein { transform: translateY(0); }
.cookie p { margin: 0; font-size: 14px; color: var(--grau); }
.cookie-knoepfe { display: flex; gap: 9px; flex: 0 0 auto; }
.cookie-knoepfe .btn { padding: 11px 21px; font-size: 14px; }

/* --- Nach-oben-Knopf ----------------------------------------------------- */

.hoch {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: var(--creme); background: var(--gruen);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: var(--schatten-m);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s, background .2s ease;
}
.hoch.sichtbar { opacity: 1; visibility: visible; transform: translateY(0); }
.hoch:hover { background: var(--terra); }

/* --- Einblend-Animation -------------------------------------------------- */

/* Nur verstecken, wenn JavaScript laeuft — sonst bliebe der Inhalt unsichtbar. */
.js .rein-anim { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1); }
.js .rein-anim.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .rein-anim { opacity: 1; transform: none; }
}

/* --- Responsiv ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .fuss-gitter { grid-template-columns: 1fr 1fr; gap: 34px; }
  .deal-layout { grid-template-columns: 1fr; gap: 34px; }
  .buchbox { position: static; }
  .kachel-gitter { grid-template-columns: repeat(2, 1fr); }
  .kachel-gitter .kachel:nth-child(1), .kachel-gitter .kachel:nth-child(2) { grid-column: span 1; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .kopf-aktion .btn { display: none; }
  .nl-band-inner { grid-template-columns: 1fr; gap: 22px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-bild { order: -1; }
  .vertrauen-gitter { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .abschnitt { padding: 66px 0; }
  .hero { min-height: 560px; }
  .kopfzeile { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .hero-inhalt { padding: 64px 0; }
  /* Kompakter Einstieg fuer Besucher aus TikTok: Deals sollen fast sofort kommen. */
  .hero.kompakt .hero-inhalt { padding: 30px 0 34px; }
  .hero.kompakt h1 { font-size: 1.95rem; line-height: 1.16; }
  .hero.kompakt .hero-text { font-size: .98rem; margin-bottom: 1.1em; }
  .hero.kompakt .marke { margin-bottom: 14px; font-size: 11.5px; padding: 6px 14px 6px 11px; }
  /* Schnellfilter in einer wischbaren Zeile statt drei Reihen */
  .hero.kompakt .hero-links {
    flex-wrap: nowrap; overflow-x: auto; margin-top: 18px;
    padding-bottom: 4px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero.kompakt .hero-links::-webkit-scrollbar { display: none; }
  .hero.kompakt .hero-links a { flex: 0 0 auto; }
  .tiktok-band { padding-top: 30px; padding-bottom: 42px; }
  .tiktok-band .kopfzeile { margin-bottom: 22px; gap: 10px; }
  .tiktok-band .kopfzeile h2 { font-size: 1.8rem; }
  /* Der Knopf ist oben schon als Chip vorhanden — hier spart das eine Zeile. */
  .tiktok-band .kopfzeile > .btn { display: none; }
  .suche { flex-direction: column; border-radius: var(--r-l); padding: 12px; }
  .suche-feld { padding: 6px 10px; }
  .suche .btn { width: 100%; }
  .deal-gitter { grid-template-columns: 1fr; gap: 22px; }
  .kachel-gitter { grid-template-columns: 1fr; }
  .fuss-gitter { grid-template-columns: 1fr; gap: 30px; }
  .nl-form { flex-direction: column; }
  .nl-form .btn { width: 100%; }
  .cookie { flex-direction: column; align-items: stretch; text-align: left; gap: 15px; left: 12px; right: 12px; bottom: 12px; }
  .cookie-knoepfe .btn { flex: 1; }
  .filter-info { margin-left: 0; width: 100%; }
  .abschnitt { padding: 54px 0; }
}