/*
Theme Name: Tierischreisen
Theme URI: https://tierischreisen.de
Author: Tierischreisen
Author URI: https://tierischreisen.de
Description: Editorial WordPress-Theme für tierischreisen.de – kuratierte Reisen mit Hund. Warm, redaktionell, eigenständig.
Version: 1.4.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tierischreisen
Tags: travel, custom-post-type, editor-style, full-width-template
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Farben */
  --color-cream: #F5EFE3;
  --color-cream-deep: #ECE3D0;
  --color-bone: #FFFFFF;
  --color-forest: #1E2B25;
  --color-forest-soft: #3A4A40;
  --color-mute: #6B7670;
  --color-terracotta: #B85C38;
  --color-terracotta-deep: #8E4326;
  --color-sage: #8B9B8E;
  --color-line: #D9CFB8;
  --color-line-soft: #E8DFC9;

  /* Typografie */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Abstände */
  --gap-xs: 0.5rem;
  --gap-s: 1rem;
  --gap-m: 1.75rem;
  --gap-l: 3rem;
  --gap-xl: 5rem;
  --gap-xxl: 8rem;

  /* Container */
  --container-narrow: 720px;
  --container: 1140px;
  --container-wide: 1320px;

  /* Sonstiges */
  --radius: 4px;
  --radius-card: 8px;
  --shadow-soft: 0 2px 24px rgba(30, 43, 37, 0.06);
  --shadow-hover: 0 8px 36px rgba(30, 43, 37, 0.10);
  --transition: 240ms cubic-bezier(0.2, 0.0, 0.0, 1);
}

/* =========================================================
   RESET & BASIS
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-forest);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-terracotta-deep);
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.18em;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--color-forest);
  text-decoration-color: var(--color-terracotta);
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-forest);
  margin: 0 0 var(--gap-s);
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-variation-settings: "opsz" 80, "SOFT" 50;
}

h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
}

h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 500;
}

h4 {
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; }

.lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--color-forest-soft);
  font-weight: 400;
  max-width: 38em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  font-weight: 600;
  margin: 0 0 var(--gap-s);
  display: inline-block;
}

.eyebrow::before {
  content: "—";
  margin-right: 0.5em;
  color: var(--color-line);
}

/* =========================================================
   LAYOUT-CONTAINER
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--gap-xl) 0; }
.section-large { padding: var(--gap-xxl) 0; }

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-line-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-forest);
  text-decoration: none;
  font-variation-settings: "opsz" 60;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-logo:hover { color: var(--color-terracotta-deep); }

.site-logo-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  background: var(--color-terracotta);
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-12deg);
  flex-shrink: 0;
}

.site-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--color-forest);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding: 0.3rem 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-terracotta);
  transition: width var(--transition);
}

.site-nav a:hover::after,
.site-nav .current-menu-item a::after { width: 100%; }

.site-nav-mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-forest);
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-nav-mobile-toggle { display: block; }
  .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-line);
    padding: 1rem 1.5rem 1.5rem;
  }
  .site-nav.is-open ul {
    flex-direction: column;
    gap: 1rem;
  }
}

/* =========================================================
   HERO (Startseite)
   ========================================================= */
.hero {
  position: relative;
  padding: var(--gap-xl) 0 var(--gap-xxl);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
}

.hero-content { max-width: 580px; }

.hero h1 {
  margin-bottom: var(--gap-m);
}

.hero h1 em {
  font-style: italic;
  color: var(--color-terracotta);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--gap-m);
}

.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-cream-deep);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(184, 92, 56, 0.25), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(139, 155, 142, 0.35), transparent 60%);
}

.hero-visual-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12rem;
  color: var(--color-forest);
  opacity: 0.08;
  font-variation-settings: "opsz" 144;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-l);
  }
  .hero-visual { max-width: 480px; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn-primary {
  background: var(--color-forest);
  color: var(--color-cream);
}

.btn-primary:hover {
  background: var(--color-terracotta-deep);
  color: var(--color-cream);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-forest);
  border-color: var(--color-forest);
}

.btn-secondary:hover {
  background: var(--color-forest);
  color: var(--color-cream);
}

.btn-link {
  font-weight: 600;
  color: var(--color-terracotta-deep);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-terracotta);
  padding-bottom: 2px;
  display: inline-block;
}

.btn-link:hover {
  color: var(--color-forest);
  border-color: var(--color-forest);
}

.btn-link::after {
  content: "→";
  margin-left: 0.4em;
  transition: transform var(--transition);
  display: inline-block;
}

.btn-link:hover::after { transform: translateX(3px); }

/* =========================================================
   FEATURE SECTION (USPs)
   ========================================================= */
.features {
  background: var(--color-cream-deep);
  padding: var(--gap-xl) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-l);
  margin-top: var(--gap-m);
}

.feature {
  padding: 0;
}

.feature-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-terracotta);
  font-style: italic;
  margin-bottom: var(--gap-s);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.feature h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.feature p {
  font-size: 0.95rem;
  color: var(--color-forest-soft);
  margin-bottom: 0;
}

/* =========================================================
   HOTEL-GRID
   ========================================================= */
.hotels-section { padding: var(--gap-xxl) 0; }

.hotels-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--gap-l);
  gap: var(--gap-m);
  flex-wrap: wrap;
}

.hotels-header h2 { margin-bottom: 0; }

.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap-m);
}

.hotel-card {
  background: var(--color-bone);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-line-soft);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.hotel-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-line);
}

.hotel-card-image {
  aspect-ratio: 16 / 11;
  background: var(--color-cream-deep);
  position: relative;
  overflow: hidden;
}

.hotel-card-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-forest);
  opacity: 0.12;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(184, 92, 56, 0.2), transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(139, 155, 142, 0.3), transparent 60%);
}

.hotel-card-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.hotel-card-location {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mute);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.hotel-card h3 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  line-height: 1.2;
  color: var(--color-forest);
}

.hotel-card p {
  font-size: 0.93rem;
  color: var(--color-forest-soft);
  margin: 0;
  line-height: 1.55;
  flex: 1;
}

.hotel-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.83rem;
  color: var(--color-forest);
  font-weight: 600;
}

.hotel-card-meta::after {
  content: "→";
  color: var(--color-terracotta);
  transition: transform var(--transition);
}

.hotel-card:hover .hotel-card-meta::after { transform: translateX(4px); }

/* =========================================================
   HOTEL-DETAILSEITE
   ========================================================= */
.hotel-detail-header {
  padding: var(--gap-xl) 0 var(--gap-l);
  border-bottom: 1px solid var(--color-line);
}

.hotel-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.92rem;
  color: var(--color-forest-soft);
  margin-bottom: var(--gap-s);
}

.hotel-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hotel-detail-meta span::before {
  content: "•";
  color: var(--color-terracotta);
}

.hotel-detail-meta span:first-child::before { display: none; }

.hotel-detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--gap-l);
  padding: var(--gap-l) 0;
}

@media (max-width: 900px) {
  .hotel-detail-grid {
    grid-template-columns: 1fr;
  }
}

.hotel-detail-content h2 {
  margin-top: var(--gap-m);
  margin-bottom: var(--gap-s);
}

.hotel-detail-sidebar {
  background: var(--color-bone);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.8rem;
  position: sticky;
  top: 100px;
  height: fit-content;
}

.hotel-detail-sidebar h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-line-soft);
}

.hotel-facts {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.hotel-facts li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.6rem;
  font-size: 0.92rem;
  align-items: baseline;
}

.hotel-facts li::before { display: none; }

.hotel-facts dt, .hotel-facts .label {
  color: var(--color-mute);
  font-size: 0.82rem;
  font-weight: 500;
}

.hotel-facts dd, .hotel-facts .value {
  color: var(--color-forest);
  margin: 0;
  font-weight: 500;
}

.hotel-facts .yes { color: #4A6B52; }
.hotel-facts .no  { color: #A55440; }

/* =========================================================
   CONTENT-PAGES
   ========================================================= */
.page-content {
  padding: var(--gap-xl) 0;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.page-content h1 { margin-bottom: var(--gap-m); }
.page-content h2 { margin-top: var(--gap-l); }
.page-content h3 { margin-top: var(--gap-m); }

.page-content ul, .page-content ol {
  padding-left: 1.4em;
  margin-bottom: var(--gap-s);
}

.page-content li { margin-bottom: 0.4em; }

.page-content blockquote {
  border-left: 3px solid var(--color-terracotta);
  margin: var(--gap-m) 0;
  padding: 0.4em 1.4em;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-forest);
  font-variation-settings: "opsz" 80, "SOFT" 100;
  line-height: 1.45;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: var(--gap-xl) 0 var(--gap-m);
  margin-top: var(--gap-xl);
}

.site-footer a {
  color: var(--color-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.site-footer a:hover { border-color: var(--color-terracotta); color: var(--color-cream); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--gap-l);
  margin-bottom: var(--gap-l);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-m);
  }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: var(--gap-s);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-brand .site-logo-mark {
  background: var(--color-terracotta);
}

.footer-tagline {
  color: var(--color-cream);
  opacity: 0.7;
  font-size: 0.95rem;
  max-width: 24em;
}

.footer-column h5 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  opacity: 0.6;
  font-weight: 600;
}

.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.footer-bottom {
  border-top: 1px solid rgba(245, 239, 227, 0.15);
  padding-top: var(--gap-m);
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 1rem;
}

/* =========================================================
   BLOG / RATGEBER
   ========================================================= */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-m);
}

.post-card {
  background: var(--color-bone);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-card);
  padding: 1.6rem 1.7rem 1.8rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.post-card-cat {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.post-card h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.6rem;
  line-height: 1.25;
}

.post-card p {
  font-size: 0.93rem;
  color: var(--color-forest-soft);
  margin: 0;
  flex: 1;
}

.post-card-meta {
  margin-top: 1.2rem;
  font-size: 0.83rem;
  color: var(--color-mute);
}

/* =========================================================
   CTA-BANNER
   ========================================================= */
.cta-banner {
  background: var(--color-forest);
  color: var(--color-cream);
  border-radius: var(--radius-card);
  padding: var(--gap-l);
  margin: var(--gap-xl) 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-m);
  align-items: center;
}

.cta-banner h3 {
  color: var(--color-cream);
  margin: 0 0 0.4rem;
  font-size: 1.8rem;
}

.cta-banner p {
  margin: 0;
  opacity: 0.85;
  font-size: 1rem;
}

.cta-banner .btn-primary {
  background: var(--color-terracotta);
}

.cta-banner .btn-primary:hover {
  background: var(--color-cream);
  color: var(--color-forest);
}

@media (max-width: 700px) {
  .cta-banner {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-m { margin-top: var(--gap-m); }
.mb-0 { margin-bottom: 0; }
.mb-m { margin-bottom: var(--gap-m); }

.divider-ornament {
  width: 60px;
  height: 1px;
  background: var(--color-terracotta);
  margin: var(--gap-m) auto;
}

.alignwide { max-width: var(--container-wide); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); }

/* Print */
@media print {
  .site-header, .site-footer { display: none; }
  body { background: white; color: black; }
}

/* =========================================================
   FRONT PAGE v2 — Verteiler-Startseite
   An style.css ANHÄNGEN. Alle Klassen mit ts- Präfix,
   damit nichts mit bestehenden Theme-Styles kollidiert.
   Nutzt die vorhandenen Theme-Variablen (:root in style.css).
   ========================================================= */

.ts-ease-vars{} /* Marker */

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity 600ms cubic-bezier(.16,1,.3,1),transform 600ms cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- HERO ---------- */
.ts-hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem);overflow:hidden;}
.ts-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}


.ts-hero-inner{position:relative;z-index:1;max-width:960px;margin:0 auto;text-align:center;}
.ts-hero-inner .eyebrow{opacity:0;animation:tsRise 600ms cubic-bezier(.16,1,.3,1) .1s forwards;}
.ts-hero-inner h1{font-size:clamp(2.7rem,6.5vw,5rem);margin-bottom:1.4rem;opacity:0;
  animation:tsRise 600ms cubic-bezier(.16,1,.3,1) .22s forwards;}
.ts-hero-inner h1 em{font-style:italic;color:var(--color-terracotta);font-variation-settings:"opsz" 144,"SOFT" 100;}
.ts-hero-inner .lead{margin:0 auto 2.6rem;opacity:0;animation:tsRise 600ms cubic-bezier(.16,1,.3,1) .34s forwards;}
@keyframes tsRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

/* ---------- DREI TÜREN ---------- */
.ts-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:880px;margin:0 auto;
  opacity:0;animation:tsRise 600ms cubic-bezier(.16,1,.3,1) .48s forwards;}
.ts-door{position:relative;background:var(--color-bone);border:1px solid var(--color-line-soft);
  border-radius:18px;padding:1.9rem 1.6rem 1.7rem;text-align:left;cursor:pointer;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.5rem;min-height:200px;
  transition:transform 240ms cubic-bezier(.2,0,0,1),box-shadow 240ms cubic-bezier(.2,0,0,1),border-color 240ms cubic-bezier(.2,0,0,1);}
.ts-door::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(184,92,56,.06),transparent 55%);opacity:0;transition:opacity 240ms;}
.ts-door:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--color-line);}
.ts-door:hover::before{opacity:1;}
.ts-door-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;transition:transform 600ms cubic-bezier(.16,1,.3,1);}
.ts-door:hover .ts-door-icon{transform:scale(1.08) rotate(-4deg);}
.ts-door-1 .ts-door-icon{background:rgba(184,92,56,.12);}
.ts-door-2 .ts-door-icon{background:rgba(139,155,142,.18);}
.ts-door-3 .ts-door-icon{background:rgba(30,43,37,.07);}
.ts-door-icon svg{width:24px;height:24px;}
.ts-door h3{font-size:1.32rem;margin:0;line-height:1.15;}
.ts-door p{font-size:.92rem;color:var(--color-forest-soft);margin:0;flex:1;}
.ts-door-cta{font-size:.84rem;font-weight:600;color:var(--color-terracotta-deep);display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;}
.ts-door-cta::after{content:"→";transition:transform 240ms;}
.ts-door:hover .ts-door-cta::after{transform:translateX(5px);}

/* ---------- BLOCK BASE ---------- */
.ts-block{padding:clamp(4rem,7vw,6.5rem) 0;}
.ts-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.6rem;flex-wrap:wrap;}
.ts-block-head h2{margin:0;}
.btn-link-light{color:#E8A07E !important;border-color:#E8A07E !important;}

/* ---------- KURZ MAL WEG ---------- */
.ts-kmw{background:var(--color-forest);color:var(--color-cream);position:relative;overflow:hidden;}
.ts-kmw .eyebrow{color:#E8A07E;}
.ts-kmw .eyebrow::before{color:rgba(245,239,227,.3);}
.ts-kmw h2{color:var(--color-cream);}
.ts-kmw-sub{color:rgba(245,239,227,.72);max-width:34em;margin:-1.4rem 0 2.6rem;}
.ts-kmw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.3rem;}
.ts-kmw-card{position:relative;border-radius:18px;overflow:hidden;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;color:#fff;isolation:isolate;text-decoration:none;transition:transform 600ms cubic-bezier(.16,1,.3,1);}
.ts-kmw-card:hover{transform:translateY(-6px);}
.ts-kmw-card-bg{position:absolute;inset:0;z-index:-2;transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.ts-kmw-card:hover .ts-kmw-card-bg{transform:scale(1.06);}
.ts-kmw-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,28,23,.88) 8%,rgba(20,28,23,.25) 55%,transparent);}
.ts-kmw-c1 .ts-kmw-card-bg{background:linear-gradient(135deg,#5a7a8c,#2d4250);}
.ts-kmw-c2 .ts-kmw-card-bg{background:linear-gradient(135deg,#8a6f4a,#4a3826);}
.ts-kmw-c3 .ts-kmw-card-bg{background:linear-gradient(135deg,#6b8b6e,#34503a);}
.ts-kmw-badge{position:absolute;top:1.2rem;left:1.2rem;z-index:1;background:var(--color-terracotta);color:#fff;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:.3rem .75rem;border-radius:999px;}
.ts-kmw-dist{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:.4rem;}
.ts-kmw-card h3{color:#fff;font-size:1.5rem;margin:0 0 .3rem;}
.ts-kmw-meta{display:flex;align-items:baseline;gap:.5rem;margin-top:.6rem;}
.ts-kmw-price{font-family:var(--font-display);font-size:1.5rem;color:#fff;}
.ts-kmw-price small{font-size:.85rem;opacity:.75;font-family:var(--font-body);}
.ts-kmw-avail{margin-left:auto;font-size:.8rem;display:inline-flex;align-items:center;gap:.4rem;}
.ts-kmw-dot{width:7px;height:7px;border-radius:50%;background:#7DBE8A;animation:tsPulse 2s infinite;}
@keyframes tsPulse{0%{box-shadow:0 0 0 0 rgba(125,190,138,.55);}70%{box-shadow:0 0 0 7px rgba(125,190,138,0);}100%{box-shadow:0 0 0 0 rgba(125,190,138,0);}}

/* ---------- PREMIUM TEASER ---------- */
.ts-premium-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;}
.ts-premium-card{background:var(--color-bone);border:1px solid var(--color-line-soft);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform 240ms cubic-bezier(.2,0,0,1),box-shadow 240ms,border-color 240ms;}
.ts-premium-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:var(--color-line);}
.ts-premium-img{aspect-ratio:16/11;position:relative;overflow:hidden;background:var(--color-cream-deep);}
.ts-premium-img-inner{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.ts-premium-card:hover .ts-premium-img-inner{transform:scale(1.06);}
.ts-premium-img-fallback{background:radial-gradient(ellipse at 30% 30%,rgba(184,92,56,.2),transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(139,155,142,.3),transparent 60%);}
.ts-premium-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:5rem;color:var(--color-forest);opacity:.12;}
.ts-premium-tag{position:absolute;top:1rem;left:1rem;background:rgba(245,239,227,.92);color:var(--color-terracotta-deep);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.32rem .7rem;border-radius:999px;}
.ts-premium-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.35rem;flex:1;}
.ts-premium-loc{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-mute);font-weight:600;}
.ts-premium-card h3{font-size:1.4rem;margin:.1rem 0 .3rem;line-height:1.2;}
.ts-premium-card p{font-size:.92rem;color:var(--color-forest-soft);margin:0;flex:1;}
.ts-premium-foot{margin-top:1rem;font-size:.83rem;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;}
.ts-premium-foot::after{content:"→";color:var(--color-terracotta);transition:transform 240ms;}
.ts-premium-card:hover .ts-premium-foot::after{transform:translateX(4px);}

/* ---------- REGIONEN ---------- */
.ts-regions{background:var(--color-cream-deep);border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);}
.ts-region-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;}
.ts-region-chip{position:relative;border-radius:18px;overflow:hidden;min-height:200px;display:flex;align-items:flex-end;padding:1.3rem;color:#fff;isolation:isolate;text-decoration:none;transition:transform 600ms cubic-bezier(.16,1,.3,1);}
.ts-region-chip:hover{transform:translateY(-5px);}
.ts-region-chip-bg{position:absolute;inset:0;z-index:-2;transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.ts-region-chip:hover .ts-region-chip-bg{transform:scale(1.07);}
.ts-region-chip::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,28,23,.82),transparent 65%);}
.ts-r1 .ts-region-chip-bg{background:linear-gradient(135deg,#6e8f9e,#33505e);}
.ts-r2 .ts-region-chip-bg{background:linear-gradient(135deg,#9a7d5a,#5a4530);}
.ts-r3 .ts-region-chip-bg{background:linear-gradient(135deg,#7d9a80,#3c5a42);}
.ts-r4 .ts-region-chip-bg{background:linear-gradient(135deg,#8c7a9a,#4e3e5a);}
.ts-region-chip h3{color:#fff;font-size:1.3rem;margin:0;}
.ts-region-chip span{font-size:.78rem;opacity:.85;}

/* ---------- RATGEBER ---------- */
.ts-post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem;}
.ts-post-card{background:var(--color-bone);border:1px solid var(--color-line-soft);border-radius:18px;padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform 240ms cubic-bezier(.2,0,0,1),box-shadow 240ms;}
.ts-post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.ts-post-cat{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-terracotta);font-weight:600;margin-bottom:.6rem;}
.ts-post-card h3{font-size:1.25rem;margin:0 0 .5rem;line-height:1.25;}
.ts-post-card p{font-size:.92rem;color:var(--color-forest-soft);margin:0;flex:1;}
.ts-post-meta{margin-top:1.1rem;font-size:.82rem;color:var(--color-mute);}

/* ---------- NEWSLETTER ---------- */
.ts-newsletter{position:relative;overflow:hidden;}
.ts-nl-card{background:var(--color-forest);color:var(--color-cream);border-radius:18px;padding:clamp(2.4rem,5vw,3.6rem);position:relative;overflow:hidden;text-align:center;}
.ts-nl-card::before{content:"&";position:absolute;font-family:var(--font-display);font-size:24rem;color:rgba(245,239,227,.05);top:-6rem;right:-2rem;line-height:1;pointer-events:none;}
.ts-nl-card .eyebrow{color:#E8A07E;}
.ts-nl-card .eyebrow::before{color:rgba(245,239,227,.3);}
.ts-nl-card h2{color:var(--color-cream);max-width:16em;margin:0 auto .8rem;}
.ts-nl-card p{color:rgba(245,239,227,.75);max-width:32em;margin:0 auto 2rem;}
.ts-nl-form{display:flex;gap:.7rem;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center;}
.ts-nl-form input{flex:1;min-width:220px;padding:.95rem 1.2rem;border-radius:999px;border:1.5px solid rgba(245,239,227,.25);background:rgba(245,239,227,.08);color:var(--color-cream);font-family:var(--font-body);font-size:.95rem;}
.ts-nl-form input::placeholder{color:rgba(245,239,227,.5);}
.ts-nl-form input:focus{outline:none;border-color:var(--color-terracotta);}
.btn-terra{background:var(--color-terracotta);color:#fff;}
.btn-terra:hover{background:var(--color-cream);color:var(--color-forest);transform:translateY(-1px);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:780px){
  .ts-doors{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .ts-blob{animation:none;}
  .ts-hero-inner .eyebrow,.ts-hero-inner h1,.ts-hero-inner .lead,.ts-doors{opacity:1;animation:none;}
  .reveal{opacity:1;transform:none;}
}

/* =========================================================
   v2.1 ERGÄNZUNGEN — Foto-Hero, Tipp der Redaktion, Highlight
   (ersetzt die Blob-Hero-Regeln oben; diese hier gewinnen,
    weil sie später in der Datei stehen)
   ========================================================= */

/* ---------- HERO mit Foto ---------- */
.ts-hero{padding:clamp(4rem,9vw,8rem) 0 clamp(4.5rem,9vw,8rem);}
.ts-hero-photo{position:absolute;inset:0;
  background-image:url('https://tierischreisen.de/wp-content/uploads/2026/06/lp_view.png');
  background-size:cover;background-position:center 38%;transform:scale(1.04);
  animation:tsKenburns 24s ease-in-out infinite alternate;}
@keyframes tsKenburns{from{transform:scale(1.04) translateY(0);}to{transform:scale(1.12) translateY(-12px);}}
.ts-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(30,43,37,.32) 0%,rgba(30,43,37,.12) 30%,rgba(30,43,37,.45) 100%),
  radial-gradient(ellipse at 30% 45%,rgba(30,43,37,.35),transparent 60%);}
.ts-hero-inner .eyebrow{color:#F2C9A8;}
.ts-hero-inner .eyebrow::before{color:rgba(245,239,227,.5);}
.ts-hero-inner h1{color:#fff;text-shadow:0 2px 24px rgba(20,28,23,.4);}
.ts-hero-inner h1 em{color:#F2C9A8;}
.ts-hero-inner .lead{color:rgba(245,239,227,.94);text-shadow:0 1px 16px rgba(20,28,23,.45);}

/* ---------- TIPP DER REDAKTION ---------- */
.ts-tipp{padding:clamp(3rem,6vw,5rem) 0 0;}
.ts-tipp-card{display:grid;grid-template-columns:1.15fr 1fr;background:var(--color-bone);
  border:1px solid var(--color-line-soft);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-soft);transition:transform 240ms cubic-bezier(.2,0,0,1),box-shadow 240ms;}
.ts-tipp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.ts-tipp-visual{position:relative;min-height:340px;overflow:hidden;}
.ts-tipp-visual-bg{position:absolute;inset:0;background:linear-gradient(135deg,#8a6f4a,#3a2c1e);transition:transform 1.2s cubic-bezier(.16,1,.3,1);}
.ts-tipp-card:hover .ts-tipp-visual-bg{transform:scale(1.05);}
.ts-tipp-visual .ts-premium-mark{color:#fff;opacity:.14;font-size:7rem;}
.ts-tipp-flag{position:absolute;top:1.3rem;left:1.3rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--color-terracotta);color:#fff;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;padding:.4rem .9rem;border-radius:999px;}
.ts-tipp-body{padding:clamp(1.8rem,3vw,2.8rem);display:flex;flex-direction:column;justify-content:center;}
.ts-tipp-loc{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-mute);font-weight:600;margin-bottom:.6rem;}
.ts-tipp-body h2{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:0 0 .8rem;}
.ts-tipp-body p{font-size:1.02rem;color:var(--color-forest-soft);margin:0 0 1.6rem;}
.ts-tipp-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.ts-tipp-price{font-family:var(--font-display);font-size:1.5rem;color:var(--color-forest);}
.ts-tipp-price small{font-size:.85rem;color:var(--color-mute);font-family:var(--font-body);}
.ts-tipp-ad{font-size:.72rem;color:var(--color-mute);letter-spacing:.04em;}
@media(max-width:780px){.ts-tipp-card{grid-template-columns:1fr;}.ts-tipp-visual{min-height:220px;}}

/* ---------- HIGHLIGHT ---------- */
.ts-highlight-band{padding:clamp(2.5rem,5vw,4rem) 0;}
.ts-highlight-card{position:relative;border-radius:18px;overflow:hidden;display:grid;
  grid-template-columns:1fr 1.3fr;align-items:stretch;min-height:220px;background:var(--color-cream-deep);
  border:1px solid var(--color-line);text-decoration:none;color:inherit;transition:transform 240ms cubic-bezier(.2,0,0,1),box-shadow 240ms;}
.ts-highlight-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.ts-highlight-visual{position:relative;overflow:hidden;min-height:200px;}
.ts-highlight-visual-bg{position:absolute;inset:0;background:linear-gradient(135deg,#6e8f9e,#2f4751);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.ts-highlight-card:hover .ts-highlight-visual-bg{transform:scale(1.06);}
.ts-highlight-flag{position:absolute;top:1.1rem;left:1.1rem;z-index:2;background:rgba(245,239,227,.92);
  color:var(--color-forest);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.32rem .75rem;border-radius:999px;}
.ts-highlight-body{padding:clamp(1.6rem,2.5vw,2.2rem);display:flex;flex-direction:column;justify-content:center;}
.ts-highlight-loc{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--color-mute);font-weight:600;margin-bottom:.4rem;}
.ts-highlight-body h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:0 0 .5rem;}
.ts-highlight-body p{font-size:.95rem;color:var(--color-forest-soft);margin:0 0 1rem;}
.ts-highlight-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.83rem;font-weight:600;color:var(--color-terracotta-deep);}
.ts-highlight-foot .ts-tipp-ad{font-weight:400;}
@media(max-width:780px){.ts-highlight-card{grid-template-columns:1fr;}}

/* ---------- reduced motion (Foto-Hero) ---------- */
@media(prefers-reduced-motion:reduce){
  .ts-hero-photo{animation:none;transform:scale(1.04);}
}

/* =========================================================
   FÜR GASTGEBER — Bewerbungsseite (an style.css anhängen)
   ts-gg- Präfix, nutzt vorhandene :root-Variablen
   ========================================================= */
.ts-gg-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem);text-align:center;}
.ts-gg-hero h1{font-size:clamp(2rem,4vw,3rem);margin:.4rem 0 1rem;}
.ts-gg-hero .lead{margin:0 auto;color:var(--color-forest-soft);}

.ts-gg-formwrap{padding:0 0 clamp(3rem,6vw,5rem);}
.ts-gg-form{display:flex;flex-direction:column;gap:1.6rem;margin-top:1rem;}
.ts-gg-fs{border:1px solid var(--color-line-soft);border-radius:var(--radius-card);
  padding:1.6rem 1.6rem 1.8rem;margin:0;background:var(--color-bone);}
.ts-gg-fs legend{font-family:var(--font-display);font-size:1.2rem;font-weight:500;
  padding:0 .6rem;color:var(--color-forest);}
.ts-gg-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.ts-gg-field:last-child{margin-bottom:0;}
.ts-gg-field > span{font-size:.9rem;font-weight:600;color:var(--color-forest);}
.ts-gg-field > span small{font-weight:400;color:var(--color-mute);}
.ts-gg-field input,.ts-gg-field select,.ts-gg-field textarea{
  font:inherit;font-size:1rem;padding:.75rem .9rem;border:1.5px solid var(--color-line);
  border-radius:9px;background:var(--color-cream);color:var(--color-forest);width:100%;}
.ts-gg-field input:focus,.ts-gg-field select:focus,.ts-gg-field textarea:focus{
  outline:none;border-color:var(--color-terracotta);}
.ts-gg-field textarea{resize:vertical;line-height:1.5;}
.ts-gg-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:560px){.ts-gg-row{grid-template-columns:1fr;}}
.ts-gg-submit{align-self:flex-start;margin-top:.4rem;}
.ts-gg-fine{font-size:.82rem;color:var(--color-mute);margin:.2rem 0 0;}

/* Honeypot unsichtbar */
.ts-gg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Hinweise (Erfolg/Fehler) */
.ts-gg-note{border-radius:var(--radius-card);padding:1.4rem 1.6rem;margin:1rem 0 0;}
.ts-gg-note h3{margin:0 0 .5rem;}
.ts-gg-ok{background:#EAF1EA;border:1px solid #Bcd3bf;}
.ts-gg-ok h3{color:#3a5a40;}
.ts-gg-err{background:#F7E9E3;border:1px solid #E2BBA8;}
.ts-gg-err p{margin:0;color:#8E4326;}


/* =========================================================
   API-BILDER-GALERIE (Tipp/Highlight/Premium-Karten)
   An style.css ANHÄNGEN. Ersetzt die einzelnen *-visual-bg /
   *-img-inner Hintergründe durch eine Galerie mit Vor/Zurück.
   ========================================================= */
.ts-gallery{position:absolute;inset:0;overflow:hidden;}
.ts-gallery-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .4s ease;
}
.ts-gallery-img.active{opacity:1;}
.ts-gallery-fallback{
  background:radial-gradient(ellipse at 30% 30%,rgba(184,92,56,.2),transparent 60%),
             radial-gradient(ellipse at 70% 70%,rgba(139,155,142,.3),transparent 60%);
  opacity:1;
}
.ts-gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:0;
  background:rgba(255,255,255,.85);color:var(--color-forest);
  font-size:18px;line-height:1;cursor:pointer;z-index:3;
  opacity:0;transition:opacity .15s ease;
  display:flex;align-items:center;justify-content:center;
}
.ts-gallery-nav.prev{left:10px;}
.ts-gallery-nav.next{right:10px;}
/* Pfeile beim Hover des Eltern-Containers zeigen */
.ts-tipp-visual:hover .ts-gallery-nav,
.ts-highlight-visual:hover .ts-gallery-nav,
.ts-premium-img:hover .ts-gallery-nav{opacity:1;}
.ts-gallery-nav:hover{background:#fff;}
/* Auf Touch-Geräten Pfeile dauerhaft sichtbar (kein Hover) */
@media (hover:none){
  .ts-gallery-nav{opacity:.9;}
}

/* Abstand unter "Tipp der Redaktion" zum folgenden Block */
.ts-tipp{ padding-bottom: clamp(3rem,6vw,5rem); }

/* ============================================================
   FIX v2 Hauptmenü-Dropdown — VOLLSTÄNDIG.
   Ersetzt den vorherigen "FIX Hauptmenü-Dropdown"-Block am
   Ende der style.css KOMPLETT. CSS-Version hochsetzen.

   Wichtig: höhere Spezifität (.site-nav .site-menu .sub-menu)
   MUSS alle Eigenschaften mitbringen, die das Submenü verstecken
   (position/opacity/visibility), sonst steht es dauerhaft sichtbar
   im Textfluss und sprengt die Menüzeile.
   ============================================================ */

/* Top-Level horizontal */
.site-nav .site-menu{
  display:flex;
  gap:1.6rem;
  align-items:center;
  list-style:none;
  margin:0;padding:0;
}
.site-nav .site-menu > li{position:relative;}

/* Submenü: vertikal, absolut positioniert, standardmäßig VERSTECKT */
.site-nav .site-menu .sub-menu{
  display:block;                 /* vertikal (überschreibt .site-nav ul flex) */
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  list-style:none;
  margin:0;
  padding:.5rem 0;
  background:var(--color-bone);
  border:1px solid var(--color-line-soft);
  border-radius:var(--radius-card);
  box-shadow:0 10px 30px rgba(20,30,25,.12);
  opacity:0;                     /* versteckt … */
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:60;
}
.site-nav .site-menu .sub-menu li{display:block;}
.site-nav .site-menu .sub-menu a{
  display:block;
  padding:.5rem 1.1rem;
  font-size:.95rem;
  color:var(--color-forest);
  white-space:nowrap;
}
.site-nav .site-menu .sub-menu a:hover{
  background:var(--color-cream);
  color:var(--color-terracotta-deep);
}

/* … wird nur bei Hover/Fokus des Eltern-Punkts sichtbar */
.site-nav .site-menu > li:hover > .sub-menu,
.site-nav .site-menu > li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Pfeil-Indikator bei Eltern mit Submenü */
.site-nav .site-menu .menu-item-has-children > a::after{
  content:'▾';font-size:.7em;margin-left:.35em;opacity:.6;
}

/* ---- Mobil: alles untereinander, Submenü eingerückt sichtbar ---- */
@media (max-width:860px){
  .site-nav .site-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
    width:100%;
  }
  .site-nav .site-menu .sub-menu{
    position:static;
    opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;
    padding:.2rem 0 .2rem 1rem;
    min-width:0;background:transparent;
  }
  .site-nav .site-menu .menu-item-has-children > a::after{content:'';}
}

/* ============================================================
   Trenner im Unterkünfte-Dropdown: roter Strich unter
   "Alle Unterkünfte durchsuchen" (Item hat Klasse ts-menu-search).
   Ans Ende von style.css anhängen, CSS-Version hochsetzen.
   ============================================================ */

/* Der Suche-Punkt etwas hervorheben + roter Trennstrich darunter */
.site-nav .site-menu .sub-menu li.ts-menu-search{
  border-bottom:2px solid var(--color-terracotta);
  margin-bottom:.35rem;
  padding-bottom:.35rem;
}
.site-nav .site-menu .sub-menu li.ts-menu-search > a{
  font-weight:600;
  color:var(--color-terracotta-deep);
}

/* Mobil: Trenner auch im aufgeklappten Menü sichtbar lassen */
@media (max-width:860px){
  .site-nav .site-menu .sub-menu li.ts-menu-search{
    border-bottom:2px solid var(--color-terracotta);
  }
}

/* ============================================================
   Kurz-mal-weg KARUSSELL — scroll-snap Version
   ------------------------------------------------------------
   WICHTIG beim Einbau: Die ALTEN Karussell-Regeln in style.css
   ENTFERNEN (vom ersten Versuch). Das sind die drei Blöcke mit
   ".ts-kmw-track > .ts-kmw-card { flex:0 0 calc(...) }" plus deren
   Media-Queries (in deiner Datei ~Zeile 1355, 1402, 1410) und ein
   evtl. vorhandener ".ts-kmw-viewport"-Block. DANN diesen Block
   ans Ende anhängen. CSS-Version hochsetzen.

   Die bestehenden .ts-kmw-card / .ts-kmw-card-bg / .ts-kmw-badge
   etc. (ab ~Zeile 981) BLEIBEN unverändert.
   ============================================================ */

/* Container: [‹] [scroll-track] [›] */
.ts-kmw-grid[data-kurzmalweg]{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* Track = native horizontale Scroll-Schiene mit Snap.
   Kein transform, kein JS-Breitenrechnen. Der Browser scrollt. */
.ts-kmw-track{
  flex:1 1 auto;
  min-width:0;                      /* nötig in Flexbox für Overflow */
  display:flex;
  gap:1.3rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;             /* Firefox: Scrollbar aus */
  padding-bottom:2px;               /* Platz, falls Snap minimal überzeichnet */
}
.ts-kmw-track::-webkit-scrollbar{ display:none; }  /* WebKit: Scrollbar aus */

/* Karte: genau 3 ins Fenster. (100% - 2 gaps) / 3.
   scroll-snap-align:start -> rastet links bündig ein. */
.ts-kmw-track > .ts-kmw-card{
  flex:0 0 calc((100% - 2 * 1.3rem) / 3);
  scroll-snap-align:start;
  min-height:330px;
}

/* Navigations-Pfeile */
.ts-kmw-nav{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid rgba(245,239,227,.35);
  background:rgba(245,239,227,.08);
  color:var(--color-cream);
  font-size:1.6rem;line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.ts-kmw-nav:hover:not(:disabled){
  background:var(--color-terracotta);
  border-color:var(--color-terracotta);
}
.ts-kmw-nav:disabled{ opacity:.3; cursor:default; }

/* Lade-Spinner am "weiter"-Pfeil */
.ts-kmw-nav.is-loading{
  color:transparent;
  position:relative;
  pointer-events:none;
}
.ts-kmw-nav.is-loading::after{
  content:"";
  position:absolute;
  width:18px;height:18px;
  border:2px solid rgba(245,239,227,.4);
  border-top-color:var(--color-cream);
  border-radius:50%;
  animation:tsKmwSpin .7s linear infinite;
}
@keyframes tsKmwSpin{to{transform:rotate(360deg);}}

/* Tablet: 2 Karten sichtbar */
@media (min-width:781px) and (max-width:1024px){
  .ts-kmw-track > .ts-kmw-card{
    flex:0 0 calc((100% - 1.3rem) / 2);
  }
}
/* Mobil: 1 Karte sichtbar */
@media (max-width:780px){
  .ts-kmw-track{ gap:.9rem; }
  .ts-kmw-track > .ts-kmw-card{
    flex:0 0 100%;
    min-height:300px;
  }
  .ts-kmw-nav{ width:38px;height:38px;font-size:1.3rem; }
}