/* journey-neu.css — V2 (03.08.): komplett unter .jnPage gescoped, damit der
   ECHTE Site-Header (header.php/travel.css) unberuehrt bleibt. Mockup-Header-
   und Benefits-Styles entfernt (Seite nutzt header.php/footer.php; Benefits
   raus per User). Werte ansonsten 1:1 aus dem Mockup. */
.jnPage {
  --navy: #032b50;
  --navy-soft: #0b3558;
  --coral: #e36c56;
  --coral-dark: #db624c;
  --hero-height: 628px;
  --planner-width: 1080px; /* PLANNERHERO (04.08., User: gleiche Breite wie der Hero-Text) */
  color: var(--navy);
  font-family: var(--font-family-sans-serif); /* RPTYPO (04.08.) */
}

.jnPage, .jnPage * { box-sizing: border-box; }
.jnPage button, .jnPage a { -webkit-tap-highlight-color: transparent; }
.jnPage button { font: inherit; }
.jnPage .submit-button, .jnPage .planner-field { border: 0; background: none; color: inherit; cursor: pointer; }

.jnPage .hero {
  position: relative;
  /* VOLLHOEHE (03.08., User-Spec): Hero fuellt den Viewport-Rest,
     --hero-height ist nur noch Mindesthoehe (kleine Screens duerfen scrollen) */
  flex: 1 1 auto;
  min-height: var(--hero-height);
  overflow: visible;
  isolation: isolate;
}

.jnPage .hero-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image: url("assets/journey-neu/hero-background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.jnPage .hero-fade {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.20) 39%, rgba(255,255,255,.02) 72%),
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 37%);
}

.jnPage .hero-copy {
  position: absolute;
  width: 650px;
  z-index: 3;
  left: calc(50% - 451px);
  top: 61px;
}

.jnPage .hero-copy h1 {
  margin: 0;
  font-family: var(--font-family-heading); /* RPTYPO (04.08.) */
  font-size: 78px;
  line-height: .89;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--navy);
}

.jnPage .hero-copy h1 em {
  color: var(--coral);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.jnPage .hero-copy p {
  margin: 23px 0 0 1px;
  font-size: 16px;
  line-height: 1.78;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #173d5f;
}

.jnPage .planner {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 390px; /* FIX von oben, im selben System wie Headline (top 61px):
     verschiebt sich NICHT mit der Fensterhoehe */
  transform: translateX(-50%);
  width: var(--planner-width);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(117,133,146,.52);
  box-shadow: 0 2px 13px rgba(33,54,72,.08);
}

.jnPage .planner-top {
  height: 96px;
  display: grid;
  grid-template-columns: 76px 1fr 150px;
  align-items: center;
  border-bottom: 1px solid #aeb9c2;
}

.jnPage .sparkle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jnPage .sparkle svg {
  width: 28px;
  height: 28px;
  fill: var(--navy);
}

.jnPage .planner-intro {
  align-self: center;
  padding-top: 2px;
}

.jnPage .planner-intro h2 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .13em;
}

.jnPage .planner-intro p {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
  color: #355471;
}

.jnPage .submit-button {
  justify-self: center;
  width: 101px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--coral);
  transition: background .2s ease;
}

.jnPage .submit-button:hover {
  background: var(--coral-dark);
}

.jnPage .submit-button svg {
  width: 39px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jnPage .planner-fields {
  height: 92px;
  display: grid;
  grid-template-columns: 1.05fr .98fr .94fr .96fr;
}

.jnPage .planner-field {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 57px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 25px;
  text-align: left;
  border-right: 1px solid #aeb9c2;
}

.jnPage .planner-field:last-child {
  border-right: 0;
}

.jnPage .field-icon {
  width: 33px;
  height: 33px;
  justify-self: center;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jnPage .field-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jnPage .field-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #2f506d;
}

.jnPage .field-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  color: #173d5f;
}

.jnPage .chevron {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


@media (max-width: 1250px) {
  .jnPage .hero-copy { left: 29%; }
  .jnPage .planner { width: min(900px, calc(100% - 120px)); transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .jnPage { --hero-height: 760px; }
  .jnPage .hero-copy { left: 8%; top: 60px; }
  .jnPage .hero-copy h1 { font-size: clamp(55px, 8vw, 74px); }
  /* MOBIL-FLOW (03.08.): Planner verlaesst das absolute Layout - er ist
     hoeher als der verfuegbare Hero-Platz. Normaler Fluss unter dem Text. */
  .jnPage .planner { position: static; left: auto; bottom: auto; transform: none; width: calc(100% - 48px); margin: 24px auto 24px; }
  .jnPage .hero { height: auto; min-height: 0; padding-bottom: 8px; }
  .jnPage .hero-copy { position: static; width: auto; padding: 42px 8% 0; }
  .jnPage .planner-top { grid-template-columns: 62px 1fr 120px; }
  .jnPage .planner-fields { grid-template-columns: repeat(2, 1fr); height: auto; }
  .jnPage .planner-field { min-height: 82px; border-bottom: 1px solid #aeb9c2; }
  .jnPage .planner-field:nth-child(2) { border-right: 0; }
  .jnPage .planner-field:nth-child(n+3) { border-bottom: 0; }
  }

@media (max-width: 680px) {
  .jnPage { --hero-height: 890px; }
  .jnPage .hero-copy { position: static; width: auto; padding: 32px 24px 0; }
  .jnPage .hero-copy h1 { font-size: 53px; }
  .jnPage .hero-copy p { font-size: 14px; }
  .jnPage .hero-copy p br { display: none; }
  .jnPage .planner { width: calc(100% - 28px); margin: 18px auto 18px; }
  .jnPage .planner-top { height: auto; min-height: 150px; grid-template-columns: 48px 1fr; padding: 21px 16px 24px; }
  .jnPage .planner-intro h2 { line-height: 1.35; }
  .jnPage .planner-intro p { line-height: 1.5; }
  .jnPage .submit-button { grid-column: 1 / -1; width: 100%; margin-top: 18px; }
  .jnPage .planner-fields { grid-template-columns: 1fr; }
  .jnPage .planner-field,
  .jnPage .planner-field:nth-child(2),
  .jnPage .planner-field:nth-child(n+3) { border-right: 0; border-bottom: 1px solid #aeb9c2; }
  .jnPage .planner-field:last-child { border-bottom: 0; }
}

/* ── FUNKTIONS-RUNDE (03.08.): Suchfeld + Picker-Popover ── */
/* SUCHLEISTE (04.08., Feedback2 Zug B): als Suchfeld erkennbar — Rahmen,
   Lupe, Fokus-Ring; vorher unsichtbares Freitextfeld. */
.jnPage .planner-search{ width:100%; border:1.5px solid rgba(23,61,95,.38); border-radius:999px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23355471' stroke-width='1.6' stroke-linecap='round'><circle cx='7' cy='7' r='5'/><path d='m11 11 3.5 3.5'/></svg>") no-repeat 14px center/16px; font:500 14px/1.25 var(--font-family-sans-serif); /* RPTYPO2 */ color:#173d5f; outline:none; padding:11px 16px 11px 40px; transition:border-color .2s, box-shadow .2s; }
.jnPage .planner-search:focus{ border-color:#032b50; box-shadow:0 0 0 3px rgba(3,43,80,.10); }
.jnPage .planner-search::placeholder{ color:#355471; opacity:.85; }
.jnPop{ position:absolute; /* nach UNTEN oeffnen (User 03.08.) */ z-index:30; min-width:280px; max-width:340px; background:#fff; border:1px solid rgba(117,133,146,.52); box-shadow:0 10px 30px rgba(33,54,72,.16); padding:16px; }
.jnPopTitle{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#2f506d; margin-bottom:10px; }
.jnPop label{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; color:#173d5f; margin-bottom:9px; }
.jnPop input[type="date"], .jnPop select{ font:500 13px var(--font-family-sans-serif); /* RPTYPO2 */ color:#173d5f; border:1px solid #aeb9c2; padding:7px 9px; background:#fff; }
.jnStep{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:#173d5f; margin-bottom:10px; }
.jnStep span{ display:inline-flex; align-items:center; gap:12px; }
.jnStep button{ width:30px; height:30px; border:1px solid #aeb9c2; background:#fff; color:#032b50; font-size:16px; cursor:pointer; }
.jnStep b{ min-width:20px; text-align:center; }
.jnChips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.jnChip{ border:1px solid #aeb9c2; background:#fff; color:#173d5f; font:600 12px var(--font-family-sans-serif); /* RPTYPO2 */ padding:6px 11px; cursor:pointer; }
.jnChip.on{ background:#032b50; border-color:#032b50; color:#fff; }
.jnPopMsg{ font-size:12px; color:#c0392b; min-height:15px; margin-bottom:4px; }
.jnPopOk{ width:100%; margin-top:4px; border:0; background:#e36c56; color:#fff; font:600 13px var(--font-family-sans-serif); /* RPTYPO2 */ padding:10px 0; cursor:pointer; }
.jnPopOk:hover{ background:#db624c; }
/* MOBIL-MODAL (03.08., User-Spec): Picker oeffnen mobil als fixiertes,
   zentriertes Modal. Grund: Planner ist mobil position:static und damit
   kein Anker mehr fuer das absolute Popover (oeffnete unsichtbar).
   !important noetig, weil das JS left inline setzt. */
@media (max-width:1024px){
  .jnPop{
    position: fixed !important;
    left: 16px !important;
    right: 16px;
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
    max-width: none;
    z-index: 1000;
    box-shadow: 0 12px 48px rgba(3,43,80,.35);
  }
}


/* ── ZWISCHENSTUFE (03.08.): zwischen ~1024 und ~1450px rutschte die Hero-Copy
   unter die Planner-Leiste (Screenshot-Beleg). Headline/Copy verkleinern und
   nach links ruecken, bis die Mockup-Proportionen wieder Platz haben. */
@media (max-width: 1450px) and (min-width: 1025px){
  .jnPage .hero-copy{ left: 5%; top: 44px; width: min(560px, 44vw); }
  .jnPage .hero-copy h1{ font-size: clamp(50px, 5.4vw, 72px); }
  .jnPage .hero-copy p{ font-size: 15px; }
  .jnPage .hero-copy p br{ display:none; }
}

/* ── SITE-CSS-RESET (03.08., Problem A): journey-neu laedt seit V2 den echten
   Header und damit travel.css — dessen globale Element-Regeln (p/h/strong/
   button-Schriften der Website) ueberschrieben die Mockup-Typografie (Beleg:
   Absatz in fetter Condensed-Schrift, lief hinter die Planner-Leiste).
   Harte Rueckstellung ALLER Typo-Werte im .jnPage-Scope per !important —
   bewusst brachial: gegen ein fremdes, global geladenes Stylesheet ist das
   die einzig stabile Grenze. Werte = 1:1 Mockup. */
.jnPage, .jnPage p, .jnPage button, .jnPage input, .jnPage small, .jnPage strong, .jnPage b, .jnPage label, .jnPage select {
  font-family: var(--font-family-sans-serif) !important; /* RPTYPO (04.08.) */
  text-transform: none !important;
}
.jnPage .hero-copy h1 { /* HEROFIX2 (04.08., User): Werte direkt in der !important-Zone - Appends wurden hier ueberstimmt */
  font-family: var(--font-family-heading) !important; /* RPTYPO (04.08.) */
  font-size: 64px !important;
  line-height: 1.06 !important;
  font-weight: 300 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: #032b50 !important;
  margin: 0 !important;
}
.jnPage .hero-copy h1 em { /* HEROFIX2: 600 + dunkelblau wie h1 */
  font-family: var(--font-family-heading) !important; /* RPTYPO (04.08.) */
  color: #032b50 !important;
  font-weight: 600 !important;
  font-style: normal !important;
}
.jnPage .hero-copy p { /* HEROFIX2: weiss + 20px */
  font-family: var(--font-family-sans-serif) !important; /* RPTYPO (04.08.) */
  font-size: 20px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin: 23px 0 0 1px !important;
}
.jnPage .planner-intro h2 {
  font-family: var(--font-family-sans-serif) !important; /* RPTYPO (04.08.) */
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  margin: 0 0 10px !important;
}
.jnPage .planner-search {
  font: 500 14px/1.25 var(--font-family-sans-serif) !important; /* RPTYPO2 */
  color: #173d5f !important;
}
.jnPage .field-copy small {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: #2f506d !important;
}
.jnPage .field-copy strong {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  color: #173d5f !important;
}
.jnPopTitle {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.jnPop label, .jnStep { font-size: 13px !important; font-weight: 600 !important; }
.jnChip { font: 600 12px var(--font-family-sans-serif) !important; /* RPTYPO2 */ }
.jnPopOk { font: 600 13px var(--font-family-sans-serif) !important; /* RPTYPO3 */ }
/* Mittlere Breiten (1025-1450px): Zwischenstufe hat Vorrang vor dem 78px-Reset */
@media (max-width: 1450px) and (min-width: 1025px){
  .jnPage .hero-copy h1{ font-size: clamp(48px, 5vw, 64px) !important; } /* HEROFIX2 */
  .jnPage .hero-copy p{ font-size: 18px !important; } /* HEROFIX2 */
}
@media (max-width: 1024px){
  .jnPage .hero-copy h1{ font-size: clamp(44px, 6.5vw, 58px) !important; } /* HEROFIX2 */
}
@media (max-width: 680px){
  .jnPage .hero-copy h1{ font-size: 38px !important; } /* HEROFIX2 */
  .jnPage .hero-copy p{ font-size: 14px !important; }
}





body.jnBody { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
body.jnBody > main.jnPage { flex: 0 0 auto; }



/* VOLLHOEHE-LAYOUT (03.08., User-Spec): Seite = exakt Viewport.
   Header natuerlich, Hero fuellt den Rest, unten weisser Balken 50px. */
body.jnBody { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
body.jnBody main.jnPage { flex: 1 1 auto; display: flex; flex-direction: column; }
body.jnBody .siteFooter { flex: 0 0 50px; height: 50px; padding: 0 40px; display: flex; align-items: center; justify-content: center; border-top: 0; }
body.jnBody .siteFooterInner { margin: 0; }
/* MOBIL-SCROLL (03.08.): unter 1024px passt Headline+Absatz+Planner nicht
   in einen Viewport - Vollhoehen-Zwang aufheben, Seite scrollt normal.
   Hero wieder feste Hoehe (890px aus dem 1024er-Breakpoint), Footer normal. */
@media (max-width: 1024px) {
  body.jnBody { display: block; min-height: 0; }
  body.jnBody main.jnPage { display: block; }
  .jnPage .hero { flex: none; height: var(--hero-height); min-height: 0; }
  body.jnBody .siteFooter { flex: none; height: auto; padding: 20px; display: block; }
  body.jnBody .siteFooterInner { justify-content: center; text-align: center; }
}


/* MODAL-OVERLAY (03.08.): echtes DOM-Element (JS), dunkelt die SEITE ab.
   Nur mobil sichtbar - Desktop-Popover brauchen keine Abdunkelung. */
.jnOverlay{ display:none; }
@media (max-width:1024px){
  .jnOverlay{ display:block; position:fixed; inset:0; background:rgba(3,43,80,.45); z-index:999; }
}


/* RP-KALENDER 1:1 (04.08., User): Werte aus travel.css (.rpKalDropdown/.kalDropdown) */
.jnPop.jnPopWide{ min-width:min(720px,94vw); max-width:720px; } /* JNCALWIDE (04.08.): Popup haengt am BODY (Stacking-Fix 03.08.), .jnPage-Scope matchte nie -> 2. Monat lief raus */
.jnCal .jnCalTabs{ display:flex; justify-content:center; gap:0; margin-bottom:14px; }
.jnCal .kqBtn{ border:1px solid #d0d4da; background:#fff; color:#002349; padding:8px 22px; cursor:pointer; font:500 14px var(--font-family-sans-serif); /* RPTYPO3 */ }
.jnCal .kqBtn:hover{ background:#f0f2f5; border-color:#002349; }
.jnCal .kqBtn.active{ background:#002349; color:#fff; border-color:#002349; }
.jnCal .calWrap{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.jnCal .month{ padding:4px; }
.jnCal .monthHead{ display:flex; align-items:center; justify-content:space-between; color:#002349; margin-bottom:10px; padding:0 2px; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:500; font-size:22px; line-height:24px; }
.jnCal .monthNav{ width:30px; height:30px; border-radius:6px; border:1px solid #d0d4da; background:#fff; cursor:pointer; font-size:16px; display:grid; place-items:center; color:#002349; }
.jnCal .monthNav:hover{ background:#f0f2f5; }
.jnCal .dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; color:#999; font-size:11px; font-weight:600; text-align:center; padding:4px 0; }
.jnCal .grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.jnCal .day{ height:36px; border-radius:6px; border:1px solid transparent; background:#fff; cursor:pointer; font-size:13px; font-weight:500; color:#173d5f; }
.jnCal .day:hover{ background:#f0f2f5; }
.jnCal .day.muted{ color:#ccc; cursor:default; background:#fff; }
.jnCal .day.disabled{ color:#ccc; cursor:default; }
.jnCal .day.start, .jnCal .day.end{ background:#002349 !important; color:#fff !important; border-color:#002349; font-weight:700; }
.jnCal .day.inRange{ background:rgba(0,35,73,.08); border-radius:0; }
.jnCal .day.preview{ background:rgba(0,35,73,.06); }
.jnCal .day.previewEnd{ background:#002349; color:#fff; border-color:#002349; }
.jnCal .kalFooter{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #eee; gap:10px; flex-wrap:wrap; }
.jnCal .kalConfirmBtn{ background:#002349; color:#fff; border:none; padding:10px 22px; cursor:pointer; font:600 14px var(--font-family-sans-serif); /* RPTYPO3 */ }
.jnCal .kalConfirmBtn:hover{ background:#003575; }
.jnCal .kalConfirmBtn:disabled{ opacity:.35; cursor:default; }
.jnCal .flexSection{ margin-bottom:0; }
.jnCal .flexQ{ color:#565556; text-align:center; margin-bottom:4px; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:500; font-size:17px; line-height:17px; }
.jnCal .flexSub{ color:#565556; text-align:center; margin-bottom:30px; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:300; font-size:17px; line-height:17px; }
.jnCal .flexDayBtns{ display:flex; gap:20px; justify-content:center; margin-bottom:22px; }
.jnCal .flexDayBtn{ padding:8px 18px; border:1px solid #e0e2e6; background:#fff; cursor:pointer; transition:all .15s; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:300; font-size:18px; line-height:18px; color:#002349; }
.jnCal .flexDayBtn:hover{ background:#f0f2f5; }
.jnCal .flexDayBtn.active{ background:#002349; color:#fff; border-color:#002349; }
.jnCal .flexMonthsWrap{ display:flex; align-items:center; gap:8px; }
.jnCal .flexMonthNav{ width:30px; height:30px; flex-shrink:0; border:none; background:#fff; cursor:pointer; font-size:26px; display:grid; place-items:center; color:#002349; }
.jnCal .flexMonthNav:disabled{ opacity:.3; cursor:default; }
.jnCal .flexMonthScroll{ display:flex; gap:8px; overflow:hidden; flex:1; }
.jnCal .flexMonthChip{ flex:0 0 calc((100% - 32px) / 5); text-align:center; border-radius:8px; border:1.5px solid #d0d4da; background:#fff; padding:10px 4px; cursor:pointer; transition:all .15s; }
.jnCal .flexMonthChip:hover{ border-color:#002349; }
.jnCal .flexMonthChip.selected{ background:#002349; color:#fff; border-color:#002349; }
.jnCal .flexMonthChip .fmYear{ color:#002349; margin-bottom:4px; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:300; font-size:14px; line-height:18px; }
.jnCal .flexMonthChip.selected .fmYear{ color:rgba(255,255,255,.7); }
.jnCal .flexMonthChip .fmName{ color:#002349; font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif; font-weight:500; font-size:18px; line-height:18px; }
.jnCal .flexMonthChip.selected .fmName{ color:#fff; }
@media(max-width:760px){ .jnCal .calWrap{ grid-template-columns:1fr; } .jnPop.jnPopWide{ min-width:94vw; max-width:94vw; } }

/* MOBILPAKET v-89 (04.08.): Motive gross (Feedback 'wie im Reiseplaner' -
   das Wuensche-Popup lebt HIER, nicht im Widget) + iOS-Zoom-Falle Landing */
.jnChip{ text-transform:capitalize; }
@media (max-width:680px){
  .jnPage .planner-search{ font-size:16px; }
  .jnPop input, .jnPop select{ font-size:16px; }
}

/* MOBILPAKET v-90 (04.08., User-Screenshot): Kalender-Popup Startseite -
   zwei Monate sprengten den Viewport, bestaetigen unerreichbar */
@media (max-width:760px){
  .jnPop.jnPopWide{ max-height:min(78dvh, 560px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .jnPop{ max-height:min(78dvh, 560px); overflow-y:auto; }
  .jnPopOk{ position:sticky; bottom:0; }
}

/* POPCENTER (04.08., User-Screenshot: Kalender-Inhalt nicht mittig):
   Basisregel spannte left:16/right:16, aber jnPopWide-min-width (94vw)
   uebersteuerte die Spannung -> Box breiter als Platz, left fix, rechts
   beschnitten. Fix: echte Zentrierung + deterministische Breiten. */
@media (max-width:1024px){
  .jnPop{ left:50% !important; right:auto !important; transform:translate(-50%,-50%); min-width:0 !important; width:min(94vw, 360px); max-width:none; }
  .jnPop.jnPopWide{ width:min(94vw, 720px); }
}

/* FEEDBACK4 (04.08.): Hero-Text weiter nach unten - klebte am Logo */
.jnPage .hero-copy{ padding-top:38px; }

/* HOME-DESKTOP (04.08., User): Startseite ohne Chat am Desktop - die
   Suchleiste IST dort die Eingabe. Hero fuellt den Viewport zwischen
   Site-Header (70px) und Footerbar (50px); Suchleiste bleibt wie gehabt.
   Mobil unveraendert (Chat kommt ueber den Tab als Sheet). Beim Wechsel
   auf Reiseplaner/Angebote erscheint der Chat automatisch (rpView-Klassen). */
@media (min-width:761px){
  body.sjShell.rpView-home .sjChatCard{ display:none; }
  body.sjShell.rpView-home .jnPage .hero,
  body.jnBody .jnPage .hero{ min-height:calc(100dvh - 120px); }
}

/* HOME-LOCK (04.08., User: Startseite darf am Desktop NICHT scrollen).
   Flex-Saeule statt Pixelrechnung: Header oben, Home-Section fuellt den
   Rest, Footerbar unten, Hero dehnt sich exakt dazwischen; overflow:hidden
   deckelt hart. rpView-Wechsel (Reiseplaner/Angebote) hebt alles auf. */
@media (min-width:761px){
  body.sjShell.rpView-home{ height:100dvh; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; } /* HEROFINAL: height statt min-height - kein Phantom-Scroll */ /* PLANNERHERO (04.08., User: MUSS scrollbar sein, wenn nicht alles passt - overflow:auto scrollt NUR bei Bedarf, sonst steht die Seite wie gehabt) */
  body.sjShell.rpView-home #shellView-home{ flex:1 1 auto; display:flex; flex-direction:column; }
  body.sjShell.rpView-home #shellView-home .jnPage{ flex:1 1 auto; display:flex; flex-direction:column; }
  body.sjShell.rpView-home .jnPage .hero{ flex:1 1 auto; min-height:720px; } /* HEROFINAL (04.08., User: Footer wandert nie ueber die Suchleiste - bei kleiner Hoehe wird gescrollt) */
  body.sjShell.rpView-home .siteFooter{ flex:0 0 auto; }
}

/* POPSCROLL (04.08., User-Screenshot: Datum-Popup ragte unter die Footerbar
   und war durch den Home-Lock abgeschnitten): solange ein Popup offen ist,
   darf die Startseite scrollen - danach rastet der Lock wieder ein. */
@media (min-width:761px){
  body.sjShell.rpView-home.jnPopOpen{ overflow-y:auto; }
}

/* POPMODAL (04.08., User: Auswahl-Picker am Desktop als zentriertes Modal
   statt Dropdown - kein Seiten-Scroll noetig, Overlay dimmt, Inhalt scrollt
   intern, bestaetigen klebt unten. Mobil galt das (POPCENTER) schon. */
@media (min-width:761px){
  .jnPopOverlay{ display:block; position:fixed; inset:0; background:rgba(7,20,40,.45); z-index:1290; }
  .jnPop{ position:fixed !important; left:50% !important; right:auto !important; top:50% !important; bottom:auto !important;
    transform:translate(-50%,-50%) !important; margin:0 !important; z-index:1300;
    max-height:min(86dvh, 720px); overflow-y:auto; box-shadow:0 30px 80px rgba(0,0,0,.35); border-radius:4px; }
  .jnPop .jnPopOk{ position:sticky; bottom:0; }
}

/* HEROZEILEN (04.08., User): Titelblock noch etwas weiter nach unten */
.jnPage .hero-copy{ padding-top:68px; }

/* RPTYPO (04.08., User: Journey uebernimmt die Reiseplaner-Typografie -
   Open Sans Fliesstext, Barlow Condensed Headings, RP-Gewichte. Hero-Block
   1080px zentriert; Serif-Mockup-Fonts + Google-Fonts-Load entfernt. */
.jnPage .hero-copy{ width:min(1080px, 92vw); left:50%; transform:translateX(-50%); }
.jnPage .hero-copy h1{ font-size:64px; font-weight:300; line-height:1.06; letter-spacing:.01em; } /* HEROFINAL: 300 fix */
.jnPage .hero-copy h1 em{ font-weight:600; font-style:normal; color:inherit; } /* HEROFINAL (04.08., User: 600 + komplette Schrift dunkelblau) */
.jnPage .hero-copy p{ font-weight:400; }
@media (max-width:680px){ .jnPage .hero-copy h1{ font-size:38px; } }

/* PLANNERHERO (04.08., User): WILMA-Subtext weiss; Suchleiste weiter nach unten */
.jnPage .hero-copy p{ color:#fff; font-size:20px; line-height:1.6; } /* HEROFINAL (04.08., User: 20px) */
.jnPage .planner{ top:440px; }

/* WILMA (05.08., User: liegend AUF der Suchleiste am Desktop; mobil ueber
   der Leiste, nach unten schauend. Mob haengt per bottom:100% an der Leiste
   selbst - sitzt damit automatisch richtig, egal wo die Leiste steht. */
.jnWilmaDesk, .jnWilmaMob{ display:none; pointer-events:none; user-select:none; }
@media (min-width:1025px){
  .jnWilmaDesk{ display:block; position:absolute; z-index:8; width:420px; height:auto;
    left:calc(50% + 90px); top:295px; filter:drop-shadow(0 12px 20px rgba(0,35,73,.30)); }
}
@media (min-width:1025px) and (max-width:1250px){
  .jnWilmaDesk{ width:340px; left:calc(50% + 60px); top:322px; }
}
@media (max-width:1024px){
  .jnPage .planner{ position:relative; } /* Anker fuer die Mobil-Wilma */
  .jnWilmaMob{ display:block; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    width:200px; height:auto; margin-bottom:-12px; z-index:8; filter:drop-shadow(0 8px 14px rgba(0,35,73,.25)); }
}

/* WILMAMOB (05.08., User-Screenshot: Mobil-Katastrophe - Text abgeschnitten,
   Wilma+Leiste klebten unten). Mobil wird der Hero zum normalen Fluss:
   Text oben (lesbar dunkelblau), darunter Wilma, direkt darunter die Leiste.
   Alles !important, weil die Site-Reset-Zone sonst uebersteuert. */
@media (max-width:760px){
  .jnPage .hero{ min-height:0 !important; height:auto !important; padding:10px 0 26px !important; }
  .jnPage .hero-copy{ position:static !important; width:auto !important; max-width:none !important;
    left:auto !important; top:auto !important; transform:none !important; padding:26px 18px 0 !important; margin:0 !important; } /* WILMAMOB2: Text tiefer */
  .jnPage .hero-copy h1{ font-size:34px !important; line-height:1.12 !important; }
  .jnPage .hero-copy p{ font-size:16px !important; line-height:1.55 !important; color:#173d5f !important; margin:10px 0 0 !important; }
  .jnPage .planner{ top:0 !important; margin-top:188px !important; } /* WILMAMOB2 (05.08.): position:relative aktivierte das Desktop-top:440px - DAS war der Ewig-Abstand. top:0 + kompakter Wilma-Raum */
  .jnWilmaMob{ width:250px; margin-bottom:-29px; } /* WILMAMOB3 (05.08., User-Werte aus DevTools) */
}

/* SPARKLEAV (05.08., User): Wilma-Avatar (Chat-Asset avatar_small) statt Funkel-SVG */
.jnPage .sparkle .sparkleAv{ width:36px; height:36px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(15,23,42,.18); display:block; }


/* SPRECHBLASE (05.08., Feedback5): Hero-Subtext als Wilma-Bubble — weiss war
   schwer lesbar (Michaela). Bewusst am DATEIENDE: gewinnt die HEROFIX2/
   HEROFINAL-!important-Kaskade (gleiche Spezifitaet, spaetere Regel). */
.jnPage .hero-copy p{
  position:relative; display:inline-block;
  color:#032b50 !important; text-shadow:none !important;
  background:rgba(255,255,255,.96); border-radius:14px 14px 14px 4px;
  padding:12px 16px !important; margin:16px 0 0 !important;
  box-shadow:0 6px 22px rgba(3,43,80,.18); max-width:520px;
  font-size:16px !important; line-height:1.55 !important;
}
.jnPage .hero-copy p::after{ content:''; position:absolute; right:-9px; top:22px;
  border:9px solid transparent; border-left-color:rgba(255,255,255,.96); border-right:0; }
/* SPRACHICO (05.08.): Lautsprecher zwischen Suchfeld und Pfeil */
.jnPage .jnVoiceIco{ display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; color:#032b50; opacity:.75; flex:0 0 auto; align-self:center; }

/* ZOOMFIX (05.08., Feedback5): iOS zoomt bei Input-Fokus < 16px — Basis ist
   14px (RPTYPO2). End-Append gewinnt jede fruehere Regel; Desktop bleibt 14px. */
@media (max-width:1024px){ .jnPage .planner-search{ font-size:16px !important; } }

/* SPRACHICO v2 (05.08., User): Lautsprecher IN der Leiste links (Lupen-
   Position), Lupe wandert nach ganz rechts innen. Appends gewinnen Kaskade. */
.jnPage .planner-intro{ position:relative; }
.jnPage .jnVoiceIco{ position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:#355471; opacity:.85; pointer-events:none; z-index:2; }
.jnPage .planner-search{
  background-position: right 16px center !important; /* Lupe nach rechts */
  padding-left:42px !important; padding-right:44px !important; }

/* SPRECHBLASE v2 (05.08., User: Schwaenzchen ZU Wilma — rechts unten; die
   Blase oeffnet sich zu ihr hin). Ueberschreibt v1-::after. */
.jnPage .hero-copy p{ border-radius:14px 14px 4px 14px !important; }
.jnPage .hero-copy p::after{
  border:9px solid transparent; border-left-color:rgba(255,255,255,.96); border-right:0;
  right:-9px; top:auto; bottom:14px; }

/* Mobil: Wilma + Auswahl liegen UNTER der Blase -> Schwaenzchen nach unten. */
@media (max-width:680px){
  .jnPage .hero-copy p{ border-radius:14px !important; }
  .jnPage .hero-copy p::after{
    border:9px solid transparent; border-top-color:rgba(255,255,255,.96); border-bottom:0;
    right:auto; left:26px; top:auto; bottom:-9px; }
}

/* SPRECHBLASE v3 (05.08., User-Feinschliff): Desktop breiter (weniger
   Umbruch), mobil weiter nach unten Richtung Wilma. Append gewinnt v1/v2. */
.jnPage .hero-copy p{ max-width:640px !important; }
@media (max-width:680px){
  .jnPage .hero-copy p{ margin-top:34px !important; }
}

/* SPRECHBLASE v4 (05.08., User: Desktop unveraendert — Wurzelursache: hartes
   <br> im Markup begrenzte die inline-block-Breite, max-width:640 griff nie.
   br raus -> Text fliesst, 640px steuern den Umbruch, Blase wird breiter. */
.jnPage .hero-copy p br{ display:none !important; }

/* SPRECHBLASE v5 (05.08., User: 610px) */
.jnPage .hero-copy p{ max-width:610px !important; }

/* DIKTAT (05.08.): Aufnahme-Zustand des Suchleisten-Mikros. */
.jnPage .jnVoiceIco.rec{ color:#ef8a7d; opacity:1; animation:jnRecPulse 1.1s ease-in-out infinite; }
@keyframes jnRecPulse{ 0%,100%{ transform:translateY(-50%) scale(1); } 50%{ transform:translateY(-50%) scale(1.22); } }

/* ZWEIZEILIG (05.08., User): Suchfeld ist jetzt ein textarea im Input-Look.
   Desktop: einzeilig wie bisher (rows=1, kein Umbruch noetig, Overflow
   versteckt). Mobil: zwei Zeilen Hoehe, Placeholder + Text brechen um. */
.jnPage textarea.planner-search{ resize:none; overflow:hidden; display:block; line-height:1.3; font-family:inherit; }
@media (max-width:680px){
  .jnPage textarea.planner-search{ height:auto !important; min-height:3.2em; white-space:normal; }
}

/* ZWEIZEILIG v2 (05.08., User-Screenshot: dritte Placeholder-Zeile wurde
   abgeschnitten — Mikro+Lupe kosten Breite, der volle Satz braucht mobil
   DREI Zeilen). Append gewinnt v1. */
@media (max-width:680px){
  .jnPage textarea.planner-search{
    min-height:4.6em; line-height:1.25; padding-top:10px; padding-bottom:10px; }
}


/* GAP1024 (14.08., User-Screenshots 722px ok / 964px zerschossen).
   ZWEI Regeln ohne @media wirkten in die Luecke 761-1024px hinein:
   1) Z.560 .hero-copy{left:50%;transform:translateX(-50%)} - bei position:static
      (Z.248) verschob das transform den Block um 46vw nach LINKS. Unter 760px
      neutralisiert Z.593 das per !important, dazwischen niemand.
   2) Z.568 .planner{top:440px} - Z.582 setzt bei <=1024 position:relative und
      machte damit top:440px scharf; unter 760px faengt Z.597 das ab.
   Hier beides fuer den gesamten Bereich <=1024 zurueckgestellt. */
@media (max-width:1024px){
  .jnPage .hero-copy{ left:auto !important; transform:none !important;
    width:auto !important; max-width:none !important; }
  .jnPage .planner{ top:0 !important; }
}
/* Wilma haengt per bottom:100% an der Leiste (Z.583) und braucht Platz darueber.
   <=760px regelt das Z.597 mit 188px; 761-1024px war ungedeckt. */
@media (min-width:761px) and (max-width:1024px){
  .jnPage .planner{ margin-top:150px !important; }
}

/* MODALFORM (18.08., User: Gaeste/Zimmer/Wuensche im Look des Datums-Modals -
   jnCal/flexQ/flexSub werden GEERBT; hier nur mittlere Breite + Stepper/Chips
   groesser + Uebernehmen navy statt orange. Datum (jnPopWide) EXAKT unveraendert.
   Ans Dateiende = gewinnt die Kaskade (gap1024-Lehre). */
.jnPop.jnPopForm{ min-width:min(460px,94vw); max-width:460px; padding:22px 22px 16px; }
.jnForm .flexSub{ margin-bottom:22px; }
.jnForm .jnStep{ font-size:15px; max-width:320px; margin:0 auto 14px; }
.jnForm .jnStep button{ width:34px; height:34px; border-radius:6px; }
.jnForm .jnStep b{ min-width:26px; font-size:15px; }
.jnForm label{ max-width:320px; margin-left:auto; margin-right:auto; }
.jnForm .jnChips{ justify-content:center; gap:10px; }
.jnForm .jnChip{ padding:8px 18px; border-color:#e0e2e6; font:500 15px 'Barlow Condensed',"Montserrat",Arial,sans-serif; }
.jnForm .jnChip.on{ background:#002349; border-color:#002349; }
/* MODALTYPO2 (18.08., User-Screenshot: Labels zu klein, Button andere Font -
   Wurzel = RPTYPO3-!important Z.~389/391. Button traegt jetzt die ECHTE
   Datums-Klasse kalConfirmBtn (erbt exakt), hier nur Vollbreite + Sticky.
   Labels per !important auf die Modal-Familie gehoben. */
.jnForm .kalConfirmBtn{ width:100%; margin-top:22px; position:sticky; bottom:0; display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; } /* BTNCENTER2 (18.08., User: center griff nicht - Flex-Zentrierung ist gegen jede Fremdregel immun) */
.jnPop.jnPopForm .jnStep, .jnPop.jnPopForm label{ font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif !important; font-size:17px !important; font-weight:500 !important; color:#173d5f !important; }
.jnPop.jnPopForm .jnStep b{ font-size:17px !important; }
/* MODALTYPO (18.08., User-Screenshot: Frage-Zeile wie im Datums-Modal - fett/navy,
   Unterzeile leicht/grau. Ans Ende gepinnt = gewinnt gegen RPTYPO-Zonen sicher. */
.jnPop.jnPopForm .flexQ{ font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif !important; font-weight:600 !important; font-size:19px !important; line-height:1.25 !important; color:#002349 !important; }
.jnPopMsg:empty{ min-height:0; margin:0; } /* MODALFEIN: Leerplatzhalter drueckte den Datums-Footer nach oben auf - Meldung erscheint bei Befuellung unveraendert */
.jnPop.jnPopForm .flexSub{ font-family:'Barlow Condensed',"Montserrat",Arial,sans-serif !important; font-weight:300 !important; font-size:16px !important; line-height:1.3 !important; color:#565556 !important; }

/* SUBMIT42 (18.08., User: Absende-Button der Planner-Leiste auf 42px = Hoehe der
   Suchleiste; Flex-Zentrierung fuers Icon (kal-Lehre: text-align reicht nicht).
   Dateiende = gewinnt gegen fruehere Regeln gleicher Spezifitaet. */
.jnPage .submit-button{ height:42px !important; min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }

/* SEARCHRADIUS (18.08., User): Suchleiste eckiger - 2px statt Bestandsradius. */
.jnPage .planner-search{ border-radius:2px !important; }

/* WILMADESK (18.08., User: feste Desktop-Position/Groesse der Wilma-Grafik). */
@media (min-width:1025px){
  .jnWilmaDesk{ width:280px !important; height:auto !important; left:calc(50% + 180px) !important; top:230px !important; } /* WILMADESK3 (19.08.): 280px / +180 / 230 */
}

/* HEROCOPY (19.08., User): Teaser-Absatz breiter + mehr Luft zur Headline. */
.jnPage .hero-copy p{ max-width:680px !important; margin-top:22px !important; }

/* FLAVORPICS (19.08., User): Vorlieben-Modal mit runden Kategorie-Bildern. */
.jnPage .jnPics{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 10px; margin:14px 0 6px; }
.jnPage .jnPic{ background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; font:inherit; }
.jnPage .jnPic .jnPicImg{ position:relative; width:76px; height:76px; border-radius:50%; overflow:visible; display:block; }
.jnPage .jnPic .jnPicImg img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:3px solid transparent; box-shadow:0 2px 10px rgba(0,35,73,.14); transition:border-color .15s; }
.jnPage .jnPic.on .jnPicImg img{ border-color:#00304f; }
.jnPage .jnPic.on .jnPicImg::after{ content:'\2713'; position:absolute; right:-1px; bottom:-1px; width:24px; height:24px; border-radius:50%; background:#00304f; color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.jnPage .jnPic .jnPicLbl{ font-size:12.5px; font-weight:700; color:#00304f; line-height:1.15; text-align:center; }

/* FLAVORPICS2 (19.08.): Popup haengt AUSSERHALB von .jnPage im Body -> Regeln
   ohne Scope, !important gegen Bestands-Button/Bild-Styles. */
.jnPics{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:16px 10px !important; margin:14px 0 6px !important; }
.jnPic{ background:none !important; border:0 !important; padding:0 !important; cursor:pointer; display:flex !important; flex-direction:column !important; align-items:center !important; gap:7px !important; font:inherit; width:auto !important; }
.jnPic .jnPicImg{ position:relative; width:76px !important; height:76px !important; border-radius:50% !important; display:block !important; }
.jnPic .jnPicImg img{ width:76px !important; height:76px !important; max-width:76px !important; border-radius:50% !important; object-fit:cover !important; display:block !important; border:3px solid transparent !important; box-shadow:0 2px 10px rgba(0,35,73,.14); transition:border-color .15s; }
.jnPic.on .jnPicImg img{ border-color:#00304f !important; }
.jnPic.on .jnPicImg::after{ content:'\2713'; position:absolute; right:-1px; bottom:-1px; width:24px; height:24px; border-radius:50%; background:#00304f; color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.jnPic .jnPicLbl{ font-size:13.5px !important; font-weight:500 !important; color:#00304f !important; line-height:1.15; text-align:center; }