/*
Theme Name:   Scharff Reisen
Theme URI:    https://afrika.lu
Description:  Genesis-Child-Theme für Scharff Reisen / afrika.lu. Setzt das neue Kachel-Design (Reisearten, Reiseziele, Themenreisen, Service), den Reisefinder und die Reise-Detailseiten auf Basis von WooCommerce um.
Author:       Claude, im Auftrag von Scharff Reisen
Template:     genesis
Version:      1.3.0
Text Domain:  scharff
*/

/* Die Schriften (Yellowtail, Oswald, Work Sans) werden nicht per @import geladen,
   sondern in functions.php sauber über wp_enqueue_style eingebunden. Das lädt sie
   parallel statt nacheinander und macht sie zentral austauschbar — etwa wenn sie
   später lokal (DSGVO-freundlich) statt von Google ausgeliefert werden sollen. */

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root{
  --cream:            #FAF5EC;
  --surface:          #FFFFFF;
  --line:             #E9DFCF;
  --ink:              #2E2A24;
  --ink-soft:         #756B5D;
  --terracotta:       #C6501E;
  --terracotta-deep:  #9C3B14;
  --terracotta-tint:  #F3DDC7;
  --focus:            #8A5A2E;
  --good:             #4C7A4F;
  --shadow: 0 1px 2px rgba(46,42,36,.05), 0 14px 30px -18px rgba(46,42,36,.35);
}
/* Die Website tritt immer in den Markenfarben auf (warmes Creme + Terrakotta).
   Ein automatischer Dunkelmodus ist hier bewusst NICHT aktiv: Besucher mit
   dunkel eingestelltem Betriebssystem sollen dieselbe Gestaltung sehen wie alle
   anderen — sonst verliert der Auftritt seine Bildwirkung und Farbidentität. */
:root{ color-scheme: light; }

/* =====================================================================
   2. BASE
   ===================================================================== */
*{ box-sizing:border-box; }
html{ background:var(--cream); }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
/* Genesis-Wrapper (Kopf, Navigation, Fuß) werden mittig gesetzt. */
.wrap{ max-width:1180px; margin-left:auto; margin-right:auto; }

/* Die Inhalts-Container von Genesis bleiben absichtlich über die volle Breite:
   Hero-Bilder laufen randlos von Kante zu Kante, und jeder .section-Block
   zentriert sich selbst über max-width + margin:0 auto. Würde man hier eine
   Breite begrenzen OHNE margin:auto, säße der gesamte Seiteninhalt linksbündig,
   während Kopf und Fuß mittig stehen. */
.site-inner,
.content-sidebar-wrap,
.content{ max-width:none; width:100%; margin:0; padding:0; float:none; }

/* Alles andere im Inhaltsbereich — normale Seiten und Beiträge, die Shop-Übersicht,
   Warenkorb, Kasse, Kundenkonto, Suchergebnisse — bekommt automatisch dieselbe
   Satzbreite mit Seitenrand. Ausgenommen sind nur unsere eigenen Layoutbausteine,
   die ihre Breite selbst mitbringen: .hero läuft randlos, .section zentriert sich
   selbst, und .scharff-trip ist die Reise-Detailseite, die beides enthält. */
.content > *:not(.hero):not(.section):not(.scharff-trip){
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}

.kicker{
  font-family:'Yellowtail', cursive;
  font-size:1.8rem;
  color:var(--terracotta);
  line-height:1;
  margin:0 0 6px;
  display:block;
}
h1,h2,h3,
.entry-title, .archive-title, .page-title{
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  color:var(--ink);
}
h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); margin:0 0 12px; }
h3{ font-size:1.05rem; margin:0 0 8px; }

/* Genesis gibt am Seitenanfang zwei Sprunglinks für Screenreader aus
   (ul.genesis-skip-link > li > a.screen-reader-shortcut). Ohne diese Regeln
   erscheinen sie als sichtbare Aufzählung über dem Logo. Sie werden optisch
   ausgeblendet, bleiben aber für Tastatur und Screenreader erreichbar und
   werden beim Anfokussieren sichtbar — so wie es barrierefrei sein soll. */
.genesis-skip-link{ margin:0; padding:0; list-style:none; }
.genesis-skip-link li{ list-style:none; width:0; height:0; }

.screen-reader-text,
.screen-reader-shortcut{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px; border:0;
  overflow:hidden; white-space:nowrap;
  clip:rect(0,0,0,0); clip-path:inset(50%);
}
.screen-reader-text:focus,
.screen-reader-shortcut:focus{
  position:fixed !important;
  top:12px; left:12px;
  width:auto; height:auto; margin:0;
  clip:auto; clip-path:none;
  padding:12px 22px;
  z-index:99999;
  background:var(--terracotta); color:#fff;
  border-radius:999px;
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(46,42,36,.35);
}

/* =====================================================================
   3. GENESIS HEADER / NAV
   Genesis outputs a stable, documented markup structure:
   header.site-header > div.wrap > div.title-area > p.site-title / p.site-description
   nav.nav-primary > div.wrap > ul.genesis-nav-menu
   We restyle these real Genesis elements rather than inventing our own header markup,
   so the design keeps working with logo/menu changes made in wp-admin.
   ===================================================================== */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  max-width:1180px; margin:0 auto;
  padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.title-area{ display:flex; align-items:center; }
.site-title{ margin:0; font-size:1rem; }
.site-title a{
  background:var(--terracotta);
  color:#fff !important;
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.95rem;
  padding:9px 16px;
  border-radius:2px;
  text-decoration:none;
  display:inline-block;
}
.site-description{ display:none; }
.custom-logo-link img{ max-height:52px; width:auto; }

/* Sobald die Marke in der Navigation sitzt (siehe inc/genesis-setup.php), entfällt
   die separate weiße Kopfleiste — Marke und Menü teilen sich einen Balken. */
.has-nav-brand .site-header{ display:none; }

.nav-primary{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
/* Maße wie im freigegebenen Entwurf: ein Balken, Marke links, Menü rechts. */
.nav-primary .wrap{
  max-width:1180px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; flex-wrap:wrap; gap:20px;
}

/* Die Marke: entweder das im Customizer hinterlegte Logo oder der Schriftzug als Pille. */
.nav-brand{ display:flex; align-items:center; }
.nav-brand-link{
  background:var(--terracotta);
  color:#fff !important;
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.95rem;
  padding:9px 16px;
  border-radius:2px;
  text-decoration:none;
  display:inline-block;
}
.nav-brand-link:hover{ filter:brightness(.95); }
.nav-brand .custom-logo-link{ display:block; }
.nav-brand .custom-logo-link img{ max-height:48px; width:auto; }

.genesis-nav-menu{
  display:flex; flex-wrap:wrap; align-items:center; gap:28px;
  list-style:none; margin:0 0 0 auto; padding:0;
}
.genesis-nav-menu a{
  text-decoration:none;
  color:var(--ink);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:0;
}
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a{ color:var(--terracotta); }
/* Give any menu item the "btn" CSS class (Design > Menüs > Menüpunkt bearbeiten
   > CSS-Klassen) to render it as a filled pill button, e.g. for "Reisefinder". */
.genesis-nav-menu li.menu-item.btn > a,
.genesis-nav-menu a.btn{
  background:var(--terracotta);
  color:#fff !important;
  padding:9px 16px;
  border-radius:2px;
  font-weight:600;
}
.genesis-nav-menu li.menu-item.btn > a:hover{ filter:brightness(.95); }
/* --- Umschalt-Button für die mobile Navigation --------------------------------
   Der Button wird von js/nav.js eingefügt, das auch .has-toggle setzt. Alle Regeln
   hängen an .has-toggle: ohne JavaScript bleibt das Menü als sichtbare Liste stehen. */
.nav-toggle{
  display:none;
  align-items:center; gap:10px;
  margin:0; padding:11px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--terracotta); color:var(--terracotta); }
.nav-toggle-bars{
  position:relative;
  width:17px; height:2px; border-radius:2px;
  background:currentColor;
  transition:background .15s ease;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:""; position:absolute; left:0;
  width:17px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }
.nav-primary.is-open .nav-toggle-bars{ background:transparent; }
.nav-primary.is-open .nav-toggle-bars::before{ top:0; transform:rotate(45deg); }
.nav-primary.is-open .nav-toggle-bars::after{ top:0; transform:rotate(-45deg); }

@media (max-width:860px){
  /* Marke links, Menü-Button rechts — das Menü klappt darunter auf. */
  .nav-primary.has-toggle .wrap{ justify-content:space-between; }
  .nav-primary.has-toggle .nav-toggle{ display:inline-flex; }
  .nav-primary.has-toggle .genesis-nav-menu{ display:none; }
  .nav-primary.has-toggle.is-open .genesis-nav-menu{
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    width:100%; padding-top:14px; margin:12px 0 0;
    border-top:1px solid var(--line);
  }
}

@media (max-width:760px){
  .nav-primary .wrap > .genesis-nav-menu{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* =====================================================================
   4. SHARED LAYOUT PRIMITIVES (used by front-page + custom page templates)
   ===================================================================== */
.section{ max-width:1180px; margin:0 auto; padding:clamp(52px,7vw,86px) 24px; }
.section.dotted{
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -6px -6px;
}
.section-head{ max-width:640px; margin:0 0 clamp(32px,4vw,48px); }
.sub{ font-size:1.02rem; line-height:1.6; color:var(--ink-soft); max-width:56ch; margin:0; }

.btn-primary, .btn-ghost, .btn-secondary{
  font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.85rem;
  padding:14px 26px;
  border-radius:3px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  font-family:'Oswald', ui-sans-serif, sans-serif;
}
.btn-primary{ background:var(--terracotta); color:#fff !important; }
.btn-primary:hover{ filter:brightness(.95); color:#fff; }
.btn-ghost{ border:1.5px solid rgba(255,255,255,.75); color:#fff !important; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-secondary{
  border:1.5px solid var(--line); color:var(--ink) !important; background:transparent;
  justify-content:center;
}
.btn-secondary:hover{ border-color:var(--terracotta); color:var(--terracotta) !important; }

/* =====================================================================
   5. TILE GRID (Reisearten / Reiseziele / Themenreisen / Service)
   ===================================================================== */
.tile-grid{ display:flex; flex-wrap:wrap; gap:22px; }
.tile{
  flex:1 1 250px; max-width:340px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:30px 26px 26px;
  display:flex; flex-direction:column; gap:16px;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
  transition:transform .25s ease, border-color .25s ease;
  position:relative;
}
.tile-grid.compact .tile{ flex:1 1 240px; max-width:300px; }
.tile:hover, .tile:focus-visible{ transform:translateY(-4px); border-color:var(--terracotta); }
.tile:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

.icon-plate{
  width:56px; height:56px; border-radius:50%;
  background:var(--terracotta-tint);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:background .25s ease;
}
.tile:hover .icon-plate{ background:var(--terracotta); }
.icon-plate svg{
  width:26px; height:26px;
  stroke:var(--terracotta-deep); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .25s ease;
}
.tile:hover .icon-plate svg{ stroke:var(--surface); }

.tile h3{
  font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:1.02rem; line-height:1.3; margin:0;
}
.tile p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-soft); flex-grow:1; }
.tile .go{
  font-size:.82rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--terracotta); display:inline-flex; align-items:center; gap:6px;
}
.tile .go svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.tile:hover .go svg{ transform:translateX(3px); }

.cta-bar{
  max-width:1180px; margin:clamp(32px,5vw,52px) auto 0;
  background:var(--terracotta);
  border-radius:6px;
  padding:26px 30px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.section > .cta-bar:first-child{ margin-top:0; }
.cta-bar p{ margin:0; color:#FFF3E8; font-size:1rem; max-width:46ch; }
.cta-bar strong{ color:#fff; }
.cta-bar a{
  flex-shrink:0; background:#fff; color:var(--terracotta-deep) !important;
  text-decoration:none; font-family:'Oswald', ui-sans-serif, sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.85rem;
  padding:12px 22px; border-radius:3px; transition:filter .2s ease;
}
.cta-bar a:hover{ filter:brightness(.95); }
@media (max-width:480px){ .cta-bar{ flex-direction:column; align-items:flex-start; } }

/* =====================================================================
   6. HERO (front page + trip detail page)
   ===================================================================== */
.hero{
  position:relative; overflow:hidden;
  display:flex; align-items:center; color:#FBEFDD;
}
.hero.hero-tall{ height:clamp(420px,54vw,560px); }
.hero.hero-slim{ height:clamp(300px,36vw,380px); align-items:flex-end; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero-tint{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(120,55,20,.38), rgba(40,20,10,.22));
  mix-blend-mode:multiply;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,10,6,.72) 0%, rgba(15,10,6,.42) 42%, rgba(15,10,6,.06) 70%),
             linear-gradient(0deg, rgba(15,10,6,.35) 0%, rgba(15,10,6,0) 35%);
}
.hero.hero-slim .hero-scrim{
  background:linear-gradient(0deg, rgba(15,10,6,.75) 0%, rgba(15,10,6,.15) 60%, rgba(15,10,6,0) 100%);
}
.hero-content{ position:relative; max-width:1180px; margin:0 auto; padding:0 24px; width:100%; }
.hero.hero-slim .hero-content{ padding:0 24px 30px; }
.hero-content .kicker{ color:#F6D9B0; }
.hero h1{
  color:#fff; margin:0 0 6px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero.hero-tall h1{ font-size:clamp(2.1rem,5.4vw,3.6rem); margin-bottom:18px; }
.hero.hero-slim h1{ font-size:clamp(1.7rem,4vw,2.6rem); }
.hero-sub{ max-width:46ch; font-size:1.05rem; line-height:1.6; color:rgba(255,247,236,.92); margin:0 0 30px; }
.hero .subtitle{ font-size:1.02rem; color:rgba(255,247,236,.92); margin:0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* =====================================================================
   7. FRONT PAGE: ENTRY CARDS / STATS / QUOTE
   ===================================================================== */
.entries{ display:flex; flex-wrap:wrap; gap:22px; }
.entry{
  flex:1 1 250px; max-width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.entry:hover{ transform:translateY(-5px); border-color:var(--terracotta); }
.entry-visual{ height:150px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--terracotta-tint); }
.entry-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.entry:hover .entry-photo{ transform:scale(1.06); }
.entry-tint{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(120,55,20,.3), rgba(30,15,8,.4)); mix-blend-mode:multiply; }
.entry-icon-plate{
  position:relative; width:54px; height:54px; border-radius:50%;
  background:rgba(250,245,236,.94);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(20,12,6,.35);
  transition:background .25s ease;
}
.entry-visual svg.icon{ width:26px; height:26px; stroke:var(--terracotta-deep); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s ease; }
.entry:hover .entry-icon-plate{ background:var(--terracotta); }
.entry:hover .entry-visual svg.icon{ stroke:#fff; }
.entry-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.entry h3{ font-size:1.08rem; margin:0; }
.entry p{ margin:0; font-size:.9rem; line-height:1.5; color:var(--ink-soft); flex-grow:1; }
.entry .go{ font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--terracotta); display:inline-flex; align-items:center; gap:6px; }
.entry .go svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.entry:hover .go svg{ transform:translateX(3px); }

.stats{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.stat{ flex:1 1 200px; background:var(--surface); padding:26px 22px; text-align:center; }
.stat .num{ font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:700; color:var(--terracotta); font-size:2rem; line-height:1; margin:0 0 8px; }
.stat .lbl{ font-size:.85rem; color:var(--ink-soft); line-height:1.4; }

.quote{ text-align:center; max-width:760px; margin:0 auto; padding:0 24px; }
.quote p.q{ font-family:'Yellowtail', cursive; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--terracotta-deep); line-height:1.4; margin:0 0 14px; }
.quote .attr{ font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }

/* =====================================================================
   8. GENESIS FOOTER
   ===================================================================== */
.site-footer{ margin-top:clamp(52px,7vw,86px); background:var(--surface); border-top:1px solid var(--line); }
.site-footer .wrap{ max-width:1180px; margin:0 auto; padding:30px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; list-style:none; margin:0; padding:0; }
.footer-links a{ text-decoration:none; color:var(--ink-soft); font-size:.85rem; }
.footer-links a:hover{ color:var(--terracotta); }
.footer-fine, .site-footer p{ font-size:.8rem; color:var(--ink-soft); margin:0; }

/* =====================================================================
   9. REISEFINDER (filter tool)
   ===================================================================== */
.rf-note{ font-size:.85rem; color:var(--ink-soft); font-style:italic; margin:0 0 30px; }
.rf-filters{
  display:flex; flex-direction:column; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow); padding:24px 26px 26px; margin-bottom:34px;
}
.rf-group h2{
  font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.78rem; color:var(--ink-soft); margin:0 0 10px;
}
.rf-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.rf-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 6px; border:1px solid var(--line); border-radius:999px;
  background:var(--cream); color:var(--ink); font:inherit; font-size:.85rem; font-weight:500;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.rf-chip .ic{ width:24px; height:24px; border-radius:50%; background:var(--terracotta-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s ease; }
.rf-chip .ic svg{ width:13px; height:13px; stroke:var(--terracotta-deep); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s ease; }
.rf-chip .n{ color:var(--ink-soft); font-size:.78rem; }
.rf-chip:hover{ border-color:var(--terracotta); }
.rf-chip[aria-pressed="true"]{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.rf-chip[aria-pressed="true"] .ic{ background:rgba(255,255,255,.28); }
.rf-chip[aria-pressed="true"] .ic svg{ stroke:#fff; }
.rf-chip[aria-pressed="true"] .n{ color:rgba(255,255,255,.85); }
.rf-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
#rf-count{ font-size:.9rem; color:var(--ink-soft); margin:0; }
#rf-count strong{ color:var(--ink); font-weight:600; }
#rf-reset{ background:none; border:none; padding:0; font:inherit; font-size:.85rem; font-weight:600; color:var(--terracotta); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
#rf-reset:disabled{ color:var(--ink-soft); text-decoration:none; cursor:default; opacity:.6; }

.rf-grid{ display:flex; flex-wrap:wrap; gap:22px; }
.rf-card{
  flex:1 1 260px; max-width:340px; background:var(--surface); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .25s ease, border-color .25s ease; text-decoration:none; color:inherit;
}
.rf-card:hover{ transform:translateY(-4px); border-color:var(--terracotta); }
.rf-card-visual{ height:130px; background:linear-gradient(155deg, var(--terracotta-tint), var(--cream)); overflow:hidden; position:relative; }
.rf-card-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rf-card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.rf-card-meta{ font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--terracotta-deep); }
.rf-card h3{ font-size:1.08rem; line-height:1.3; margin:0; text-transform:none; letter-spacing:0; }
.rf-card p.teaser{ margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-soft); flex-grow:1; }
.rf-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.rf-tag{ font-size:.72rem; font-weight:500; line-height:1.45; padding:3px 9px; border-radius:999px; background:var(--terracotta-tint); color:var(--terracotta-deep); }
.rf-card-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line); margin-top:4px; }
.rf-price{ font-weight:600; font-size:.95rem; }
.rf-price span{ font-weight:400; color:var(--ink-soft); font-size:.78rem; }
.rf-go{ font-size:.78rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--terracotta); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.rf-go svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.rf-empty{ text-align:center; padding:56px 24px; border:1px dashed var(--line); border-radius:6px; color:var(--ink-soft); }
.rf-empty .ic{ width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--terracotta-tint); display:flex; align-items:center; justify-content:center; }
.rf-empty .ic svg{ width:24px; height:24px; stroke:var(--terracotta-deep); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.rf-empty p{ margin:0 0 16px; font-size:.95rem; }
.rf-empty button{ background:var(--terracotta); color:#fff; border:none; border-radius:3px; font:inherit; font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:.82rem; padding:11px 20px; cursor:pointer; }

/* =====================================================================
   10. TRIP DETAIL PAGE (single WooCommerce product)
   ===================================================================== */
.overview{ display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; padding-top:clamp(36px,5vw,56px); }
.overview-main{ flex:2 1 420px; }
.tagline{ font-size:1.05rem; line-height:1.65; color:var(--ink); max-width:62ch; margin:0 0 22px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tag{ font-size:.78rem; font-weight:500; padding:5px 12px; border-radius:999px; background:var(--terracotta-tint); color:var(--terracotta-deep); }

.facts{ display:flex; flex-wrap:wrap; gap:22px 32px; }
.fact{ display:flex; gap:12px; align-items:flex-start; min-width:150px; }
.fact .ic{ width:36px; height:36px; border-radius:50%; background:var(--terracotta-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fact .ic svg{ width:18px; height:18px; stroke:var(--terracotta-deep); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.fact .lbl{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 2px; }
.fact .val{ font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.35; }
.level{ display:flex; gap:3px; margin-top:5px; }
.level i{ width:12px; height:6px; border-radius:1px; background:var(--line); display:block; }
.level i.on{ background:var(--terracotta); }

.price-card{ flex:1 1 260px; max-width:320px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:26px 26px 24px; box-shadow:var(--shadow); }
.price-card .from{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 2px; }
.price-card .amount{ font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:700; color:var(--terracotta); font-size:2.1rem; line-height:1; margin:0 0 4px; }
.price-card .unit{ font-size:.85rem; color:var(--ink-soft); margin:0 0 16px; }
.price-card .alt{ font-size:.85rem; color:var(--ink); margin:0 0 20px; padding-top:14px; border-top:1px solid var(--line); }
.price-card .alt strong{ font-weight:600; }
.price-card .cart{ margin:0 0 10px; }
.price-card .cart form.cart{ margin:0; }
.price-card .cart .button{
  display:block; width:100%; text-align:center;
  background:var(--terracotta) !important; color:#fff !important; border:none;
  font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:.88rem; padding:14px 20px; border-radius:3px; cursor:pointer;
}
.price-card .cart .button:hover{ filter:brightness(.95); }
.price-card .cart table.variations{ width:100%; margin-bottom:12px; font-size:.85rem; }
.price-card .cart table.variations select{ width:100%; padding:8px; border:1px solid var(--line); border-radius:3px; font:inherit; }
.price-card .contact-link{ display:block; text-align:center; margin-top:8px; font-size:.8rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; }
.price-card .contact-link:hover{ color:var(--terracotta); }

.timeline{ display:flex; flex-direction:column; }
.day{ display:flex; gap:20px; padding:0 0 30px; position:relative; }
.day:last-child{ padding-bottom:0; }
.day-num{
  flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:var(--surface); border:2px solid var(--terracotta);
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:700; color:var(--terracotta);
  font-size:.95rem; position:relative; z-index:1;
}
.day-rail{ position:absolute; left:26px; top:52px; bottom:0; width:2px; background:var(--line); }
.day:last-child .day-rail{ display:none; }
.day-body{ padding-top:6px; }
.day-date{ font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--terracotta-deep); font-weight:600; margin:0 0 4px; }
.day-title{ font-family:'Oswald', ui-sans-serif, sans-serif; font-weight:600; font-size:1.05rem; margin:0 0 6px; text-transform:none; letter-spacing:0; }
.day-desc{ font-size:.92rem; line-height:1.55; color:var(--ink-soft); margin:0; max-width:64ch; }

.gallery{ display:grid; gap:12px; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 200px 200px; }
.gallery-item{ position:relative; border-radius:6px; overflow:hidden; background:var(--terracotta-tint); }
.gallery-item:nth-child(1){ grid-column:1; grid-row:1 / 3; }
.gallery-item:nth-child(2){ grid-column:2; grid-row:1; }
.gallery-item:nth-child(3){ grid-column:3; grid-row:1; }
.gallery-item:nth-child(4){ grid-column:2; grid-row:2; }
.gallery-item:nth-child(5){ grid-column:3; grid-row:2; }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-item .g-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,10,6,.68) 0%, rgba(15,10,6,0) 55%); }
.gallery-item .g-cap{ position:absolute; left:0; right:0; bottom:0; padding:10px 14px; color:#FBEFDD; font-size:.82rem; font-weight:500; text-shadow:0 1px 6px rgba(0,0,0,.4); }
@media (max-width:700px){
  .gallery{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,160px); }
  .gallery-item:nth-child(1){ grid-column:1 / 3; grid-row:1; }
  .gallery-item:nth-child(2){ grid-column:1; grid-row:2; }
  .gallery-item:nth-child(3){ grid-column:2; grid-row:2; }
  .gallery-item:nth-child(4){ grid-column:1; grid-row:3; }
  .gallery-item:nth-child(5){ grid-column:2; grid-row:3; }
}

.leistungen{ display:flex; flex-wrap:wrap; gap:32px; }
.leist-col{ flex:1 1 320px; }
.leist-col h3{ font-size:.95rem; margin:0 0 14px; text-transform:uppercase; letter-spacing:.02em; }
.leist-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.leist-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; line-height:1.5; color:var(--ink); }
.leist-list svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.leist-list.yes svg{ stroke:var(--good); }
.leist-list.no svg{ stroke:var(--ink-soft); }
.leist-list.no li{ color:var(--ink-soft); }

.hotel-card{ display:flex; flex-wrap:wrap; gap:24px; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:26px; box-shadow:var(--shadow); }
.hotel-visual{ flex:0 0 220px; height:150px; border-radius:4px; overflow:hidden; background:linear-gradient(150deg, var(--terracotta-tint), var(--cream)); display:flex; align-items:center; justify-content:center; position:relative; }
.hotel-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hotel-visual svg{ width:52px; height:52px; stroke:var(--terracotta-deep); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.hotel-info{ flex:1 1 260px; }
.hotel-info h3{ font-size:1.1rem; margin:0 0 4px; text-transform:none; letter-spacing:0; }
.stars{ color:var(--terracotta); font-size:.85rem; letter-spacing:2px; margin:0 0 10px; }
.hotel-info .loc{ font-size:.88rem; color:var(--ink-soft); margin:0 0 14px; }
.amenities{ display:flex; flex-wrap:wrap; gap:8px; }
.amenities span{ font-size:.78rem; padding:5px 11px; border-radius:999px; background:var(--terracotta-tint); color:var(--terracotta-deep); }

/* =====================================================================
   11. WOOCOMMERCE SHOP / ARCHIVE (default templates via Genesis Connect)
   ===================================================================== */
/* Das Produktraster erbt Breite und Seitenrand aus der .content-Regel oben;
   hier wird nur der obere/untere Abstand ergänzt. */
ul.products{ display:flex; flex-wrap:wrap; gap:22px; list-style:none; padding-top:8px; padding-bottom:40px; margin:0; }

/* Das <li> ist nur noch der Rasterplatz — die eigentliche Karte ist .rf-card darin
   (siehe inc/trip-card.php). Alle Kartenmerkmale wie Rahmen, Schatten und Hintergrund
   gehören dorthin, sonst läge eine Karte in der anderen. */
ul.products li.product{
  flex:1 1 250px; max-width:300px;
  display:flex; margin:0; padding:0;
  background:none; border:0; box-shadow:none;
}
ul.products li.product::before,
ul.products li.product::after{ content:none; }
ul.products li.product .rf-card{ width:100%; }

/* Anzahl der gefundenen Reisen unter der Überschrift. */
.shop-count{ margin:10px 0 0; font-size:.86rem; color:var(--ink-soft); }
.shop-count strong{ color:var(--ink); }
.woocommerce-breadcrumb{ font-size:.82rem; color:var(--ink-soft); max-width:1180px; margin:16px auto 0; padding:0 24px; }
.woocommerce-breadcrumb a{ color:var(--ink-soft); text-decoration:none; }
.woocommerce-breadcrumb a:hover{ color:var(--terracotta); }

/* =====================================================================
   12. MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .tile, .icon-plate, .icon-plate svg, .go svg, .cta-bar a,
  .entry, .entry-visual, .entry-photo, .rf-chip, .rf-card{ transition:none; }
}