/* Antarktisreisen - Besucherseite.
   Nachbau von antarktistravels.de: gleiche Farben, Schriften und
   Abschnitte, eigenes schlankes CSS statt Elementor. Schriften werden selbst
   ausgeliefert (static/fonts), es wird nichts von fremden Servern geladen
   außer den verlinkten Bildern. */

@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/lora.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/static/fonts/lora-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/static/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/poppins-600.woff2") format("woff2"); }
/* Roboto wie auf der alten Seite (Fußzeilen-Menüs, goldene Knöpfe):
   variable Schrift, Zeichensatz Latin. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/roboto.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navy: #092230;
  --slate: #283741;
  --gold: #b99757;
  --gold-dark: #a2823f;
  --ice: #d9eef7;
  --ice-soft: #eef7fb;
  --light: #fafafa;
  --grey: #c6c6c6;
  --line: #dde6ea;
  --text: #283741;
  --muted: #5f6f79;
  --white: #ffffff;
  --ok: #2f7d4f;
  --warn: #a76a12;
  --err: #b3402e;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 10px;
  --wrap: 1248px;
  --shadow: 0 10px 30px rgba(9, 34, 48, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 16px/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dark); }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); font-weight: 400; line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 500; }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4 { font-size: 19px; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 900px; }
/* Wie auf der alten Seite: ab Tablet-Breite 20 px Seitenrand. */
@media (max-width: 1024px) { .wrap { padding: 0 20px; } }
.section { padding: 72px 0; }
.section.tight { padding: 40px 0; }
.section.ice { background: var(--ice); }
.section.light { background: var(--light); }
.section.navy { background: var(--navy); color: #dfe8ee; }
.section.slate { background: var(--slate); color: #dfe8ee; }
.section.navy h2, .section.navy h3, .section.slate h2, .section.slate h3 { color: var(--white); }
.section-head { text-align: center; max-width: 820px; margin: 0 auto 40px; }
.section-head p { color: var(--muted); font-size: 17px; }
.section.navy .section-head p, .section.slate .section-head p { color: #b9c9d2; }
.center { text-align: center; }

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius); border: 2px solid var(--gold);
  background: var(--gold); color: var(--white); text-decoration: none; cursor: pointer;
  font: 500 14px/1.1 var(--sans); letter-spacing: 1px; text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn.outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn.outline:hover { background: var(--navy); color: var(--white); }
.btn.dark { background: var(--slate); border-color: var(--slate); }
.btn.dark:hover { background: var(--navy); border-color: var(--navy); }
.btn.light { background: transparent; color: var(--white); border-color: var(--white); }
.btn.small { padding: 9px 14px; font-size: 12px; }
.btn.block { width: 100%; }
.btnrow { display: flex; gap: 14px; flex-wrap: wrap; }
.more { font-size: 14px; color: var(--gold-dark); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------- Kopf ---------- */
.topbar { position: relative; z-index: 50; background: var(--navy); color: var(--white); }
.topbar .wrap { display: flex; align-items: center; gap: 28px; min-height: 86px; }
.logo { display: block; flex: none; }
.logo img { height: 66px; width: auto; }
.logo .logotext { font-family: var(--serif); font-size: 24px; color: var(--gold); text-decoration: none; }
.mainnav { display: flex; align-items: center; gap: 2px; margin-left: 26px; }
.mainnav > .item { position: static; }
.mainnav > .item > a, .mainnav > .item > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 31px 16px;
  background: none; border: 0; color: var(--white); cursor: pointer; text-decoration: none;
  font: 500 16px/1.5 var(--sans); letter-spacing: 1px; text-transform: uppercase;
}
.mainnav > .item > a:hover, .mainnav > .item > button:hover, .mainnav > .item.open > button { color: var(--gold); }
.mainnav .chev { width: 10px; height: 10px; transition: transform .2s; }
.mainnav .item.open .chev { transform: rotate(180deg); }
/* Mega-Menüs wie auf der alten Seite (gemessen bei 1280 px): Überschrift
   Lora 32 px, Kacheln 303 px (Reiseziele), 276 px (Schiffsgröße) und 287 px
   (Kategorie) mit 35 px Abstand, Beschriftung Poppins 20 px. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--slate); color: var(--white);
  padding: 40px 0 60px; box-shadow: 0 18px 30px rgba(0,0,0,.25); display: none;
}
/* Die Kopfzeile setzt .wrap auf Flex - im Mega-Menü stehen Überschrift und
   Kacheln untereinander. */
.topbar .mega .wrap { display: block; max-width: none; min-height: 0; }
.mainnav .item.open .mega { display: block; }
/* Das Mega-Menü öffnet sich nur, wenn die Maus direkt auf dem Wort steht,
   und bleibt offen, solange sie auf dem Menü ist. Der Knopf ist dafür nur so
   groß wie das Wort; die Brücke (::after) zum Menü gibt es erst, wenn es offen
   ist - so löst die Fläche unter dem Wort es nicht aus. */
.mainnav > .item.hasmega > button { position: relative; margin: 31px 16px; padding: 0; }
@media (hover: hover) and (min-width: 1025px) {
  .mainnav .item.hasmega > button:hover + .mega, .mainnav .item.hasmega > .mega:hover { display: block; }
  .mainnav .item.hasmega > button:hover, .mainnav .item.hasmega:has(> .mega:hover) > button { color: var(--gold); }
  .mainnav .item.hasmega > button:hover::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 40px; }
  .mega .mega-all { display: none; }
}
.mega .mega-h { text-wrap: balance; margin: 0 0 40px; color: var(--white); text-align: center; font: 400 32px/40px var(--serif); }
.mega .mega-h em { font-style: italic; }
.mega .tiles { display: grid; gap: 40px 35px; grid-template-columns: repeat(3, minmax(0, 303px)); justify-content: center; }
.mega .tiles.four { grid-template-columns: repeat(4, minmax(0, 276px)); }
.mega .tiles.kat { grid-template-columns: repeat(3, minmax(0, 287px)); column-gap: 34px; }
/* Abstand vor „Schiffe nach Kategorie“ wie auf der alten Seite. */
.mega .tiles + .mega-h { margin-top: 70px; }
/* Link zur Übersicht unten im Mega-Menü - nur wo das Wort selbst nicht
   verlinkt (Touch, Handy); mit Maus führt ein Klick aufs Wort dorthin. */
.mega .mega-all { margin: 30px 0 0; text-align: center; }
.mega .mega-all a { color: var(--gold); font: 500 16px/1.5 var(--sans); letter-spacing: .5px; text-decoration: underline 1px; text-underline-offset: 4px; }
.mega .mega-all a:hover { color: var(--white); }
.mega .tile { color: var(--white); text-decoration: none; font: 400 20px/32px var(--sans); }
.mega .tile .ph { aspect-ratio: 303 / 171; background: #1b2a33 center/cover no-repeat; margin-bottom: 9px; transition: opacity .2s; }
.mega .tiles.four .tile .ph, .mega .tiles.kat .tile .ph { margin-bottom: 10px; }
.mega .tiles.four .tile .ph { aspect-ratio: 276 / 155; }
.mega .tiles.kat .tile .ph { aspect-ratio: 287 / 161; }
.mega .tile:hover .ph { opacity: .85; }
.mega .tile:hover { color: var(--gold); }
.topactions { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.topactions .phone { color: var(--gold); text-decoration: none; font-weight: 500; font-size: 16px; letter-spacing: .9px; display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; }
.topactions .phone .icon { width: 28px; height: 28px; }
.topactions .wish .icon { width: 30px; height: 30px; }
.topactions > .btn { font-size: 16px; padding: 12px 24px; min-height: 48px; border-radius: 12px; }
.topactions .phone:hover { color: var(--white); }
.topactions .wish:hover { color: var(--gold); }
.topactions .wish { color: var(--white); position: relative; display: inline-flex; }
.topactions .wish .count { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--white); border-radius: 999px; font-size: 10px; line-height: 16px; min-width: 16px; text-align: center; padding: 0 4px; }
.topactions .wish .count:empty { display: none; }
.icon { width: 20px; height: 20px; flex: none; }
.burger { display: none; background: none; border: 0; color: var(--white); padding: 8px; cursor: pointer; }
.notice-bar { background: var(--gold); color: var(--white); text-align: center; font-size: 14px; padding: 8px 16px; }
.notice-bar a { color: var(--white); }

@media (max-width: 1024px) {
  .topbar .wrap { min-height: 68px; gap: 12px; }
  .logo img { height: 44px; }
  .burger { display: inline-flex; order: 3; }
  .topactions { order: 2; gap: 14px; }
  .topactions .phone span, .topactions .btn { display: none; }
  .mainnav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: stretch; margin: 0; padding: 8px 0 16px; max-height: calc(100vh - 68px); overflow-y: auto; }
  .topbar.navopen .mainnav { display: flex; }
  .mainnav > .item > a, .mainnav > .item > button { padding: 14px 24px; width: 100%; justify-content: space-between; }
  .mainnav > .item.hasmega > button { margin: 0; padding: 14px 24px; }
  .mega { position: static; box-shadow: none; padding: 10px 0 20px; }
  .mega .tiles, .mega .tiles.four, .mega .tiles.kat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 20px; }
  .mega .tile { font-size: 16px; line-height: 1.4; }
  .mega .mega-h { font-size: 20px; }
}

/* ---------- Fußzeile ---------- */
.footer { background: var(--navy); color: var(--white); padding: 50px 0 0; font: 300 14px/24px var(--sans); }
.footer .wrap { max-width: 1000px; padding: 0; }
.footer .cols { display: grid; grid-template-columns: 41.5% 36.8% minmax(0, 1fr); padding-bottom: 64px; }
.footer .foot-h { color: var(--white); font: 400 19px/32px var(--sans); margin: 10px 0 20px; }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover, .footer a[aria-current="page"] { color: var(--gold); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font: 400 16px/20px Roboto, Arial, sans-serif; }
.footer ul a { display: block; }
.footer .addr { max-width: 222px; margin: 0 0 15px; font: 300 14px/24px var(--sans); }
.footer .addr:last-child { margin-bottom: 0; }
.footer .logo { display: block; }
.footer .logo img { display: block; width: 150px; height: 54px; margin-bottom: 19px; }
.footer > .wrap:last-child { max-width: none; padding: 0; border-top: 1px solid rgba(255, 255, 255, .19); }
.footer .bottom { display: flex; flex-wrap: wrap; justify-content: center; }
.footer .bottom a { padding: 16px 30px; font: 300 14px/20px var(--sans); }
@media (max-width: 1024px) { .footer .wrap { padding: 0 20px; } .footer .foot-h { font-size: 16px; line-height: 25.6px; } }
@media (max-width: 767px) {
  .footer { padding-top: 40px; }
  .footer .cols { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
  .footer .cols > div:first-child { padding-bottom: 14px; }
  .footer .foot-h { margin: 0 0 20px; }
  .footer .bottom { padding-bottom: 26px; }
  .footer .bottom a { padding: 6px 20px; }
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.pagehero { position: relative; background: var(--navy) center/cover no-repeat; color: var(--white); }
.pagehero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,34,48,.82), rgba(9,34,48,.35)); }
.pagehero .wrap { position: relative; padding-top: 90px; padding-bottom: 90px; }
.pagehero h1 { color: var(--white); max-width: 18ch; }
.pagehero p { color: #e3ecf1; max-width: 62ch; font-size: 18px; }
.pagehero.plain { background: var(--ice); color: var(--navy); }
.pagehero.plain::before { display: none; }
.pagehero.plain h1 { color: var(--navy); }
.pagehero.plain p { color: var(--text); }
.crumbs { font-size: 13px; color: var(--muted); margin: 18px 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-dark); }

/* ---------- Fließtext aus dem Editor ---------- */
.prose { max-width: 820px; font-size: 17px; overflow-wrap: anywhere; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }
.prose img { border-radius: 4px; margin: 1.2em 0; }
.prose blockquote { border-left: 3px solid var(--gold); margin: 1.2em 0; padding: .2em 0 .2em 1em; color: var(--muted); font-style: italic; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 15px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose a { color: var(--gold-dark); }

/* ---------- Kacheln und Karten ---------- */
.grid { display: grid; gap: 24px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }
.card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card .ph { aspect-ratio: 16/10; background: var(--ice) center/cover no-repeat; }
.card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { font-size: 21px; margin: 0; }
.card h3 a { color: var(--navy); text-decoration: none; }
.card h3 a:hover { color: var(--gold-dark); }
.card .meta { font-size: 14px; color: var(--muted); }
.card .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tilelink { display: block; text-decoration: none; color: var(--navy); }
.tilelink .ph { aspect-ratio: 16/10; background: var(--ice) center/cover no-repeat; border-radius: 4px; margin-bottom: 10px; transition: opacity .2s; }
.tilelink:hover .ph { opacity: .85; }
.tilelink b { font-family: var(--serif); font-weight: 400; font-size: 20px; }

/* ---------- Reisekarte ---------- */
.trip { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.trip + .trip { margin-top: 20px; }
.trip .ph { background: var(--ice) center/cover no-repeat; min-height: 200px; position: relative; }
.trip .line { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.trip .body { padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
.trip h3 { font-size: 22px; margin: 0; grid-column: 1 / -1; }
.trip h3 a { color: var(--navy); text-decoration: none; }
.trip h3 a:hover { color: var(--gold-dark); }
.trip .facts { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; color: var(--muted); }
.trip .facts b { color: var(--navy); font-weight: 500; }
.trip .price { text-align: right; align-self: end; }
.trip .price small { display: block; color: var(--muted); font-size: 12px; }
.trip .price strong { font-family: var(--serif); font-size: 26px; color: var(--navy); font-weight: 500; white-space: nowrap; }
.trip .actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) { .trip { grid-template-columns: 1fr; } .trip .body { grid-template-columns: 1fr; } .trip .price { text-align: left; } }
.badge { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-dark); background: #fbf6ec; }
.badge.sold { border-color: var(--grey); color: var(--muted); background: var(--light); }
.badge.navy { border-color: var(--navy); color: var(--navy); background: var(--white); }

/* ---------- Merkliste-Herz ---------- */
.wishbtn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
.wishbtn:hover { border-color: var(--gold); color: var(--gold-dark); }
.wishbtn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--white); }
.wishbtn[aria-pressed="true"] .icon path { fill: currentColor; }

/* ---------- Formulare ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.form > * { min-width: 0; }
.form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 620px) { .form .row2 { grid-template-columns: minmax(0, 1fr); } }
.form label { display: block; font-size: 13px; font-weight: 500; color: var(--navy); margin-bottom: 4px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=number], .form input[type=date], .form select, .form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--grey); border-radius: 6px; background: var(--white);
  font: 400 15px/1.4 var(--sans); color: var(--text);
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,151,87,.2); }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); font-weight: 400; }
.form .check input { margin-top: 3px; }
.form .formgroup { margin: 10px 0 -4px; font: 600 14px/20px var(--sans); color: var(--navy); text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.form .formgroup:first-of-type { margin-top: 0; }
.form fieldset.checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; border: 0; }
.form fieldset.checks legend { width: 100%; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 500; color: var(--navy); }
.form fieldset.checks .check { align-items: center; font-size: 14px; color: var(--slate); }
.form fieldset.checks .check input { margin-top: 0; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formmsg { padding: 12px 14px; border-radius: 6px; font-size: 14px; }
.formmsg.ok { background: #e7f4ec; color: var(--ok); }
.formmsg.err { background: #fbeae6; color: var(--err); }

/* ---------- Tabellen ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; padding: 10px 12px; border-bottom: 2px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }

/* ---------- Reiter ---------- */
.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 4px; overflow-x: auto; }
.tabs a, .tabs button { flex: none; padding: 14px 18px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--navy); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--gold-dark); }
.tabs .on { border-bottom-color: var(--gold); color: var(--gold-dark); }
.tabpanel { padding: 28px 0; }
.tabpanel[hidden] { display: none; }
.tabpanel figure.deck { margin: 0 0 22px; }
.tabpanel figure.deck img { display: block; width: 100%; height: auto; }
.tabpanel figure.deck figcaption { font: 500 14px/1.4 var(--sans); color: var(--navy); margin-top: 6px; }

/* ---------- Aufklappbare Abschnitte ---------- */
details.fold { border-bottom: 1px solid var(--line); }
details.fold > summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-family: var(--serif); font-size: 19px; color: var(--navy); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 300 26px/1 var(--sans); color: var(--gold); }
details.fold[open] > summary::after { content: "–"; }
details.fold > .inner { padding: 0 0 18px; }

/* ---------- Hinweise ---------- */
.callout { background: var(--ice-soft); border-left: 3px solid var(--gold); padding: 14px 18px; border-radius: 0 6px 6px 0; font-size: 15px; }
.empty { text-align: center; color: var(--muted); padding: 48px 16px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Gold-Band vor der Fußzeile ---------- */
.ctaband { background: var(--gold); color: var(--white); text-align: center; padding: 48px 0; }
.ctaband p { font-size: 17px; margin: 0 auto 22px; max-width: 760px; }

/* ---------- Startseite ----------
   Maße wie auf antarktistravels.de bei 1280 px Fensterbreite: Inhalt 1200 px,
   Abschnitte mit 70-80 px Innenabstand, große Überschriften Lora 48 px,
   Fließtext 19/32 px. Tablet ab 1024 px, Handy ab 767 px wie bei Elementor. */
.h-sec { padding: 80px 0; }
.h-ice { background: var(--ice); }
.h-light { background: var(--light); }
.h-navy { background: var(--navy); }
.h-blue { background: #005283; }
.h-white { background: var(--white); }
.h-slate { background: var(--slate); }
.h-sec h2 { font: 500 48px/1.3 var(--serif); color: var(--slate); margin: 0; text-wrap: wrap; }
.h-sec h2 em, .h-hero i { font-style: italic; }
.h-title { text-align: center; max-width: 621px; margin-left: auto !important; margin-right: auto !important; }
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  border: 2px solid var(--gold); border-radius: 10px; background: var(--gold); color: var(--white);
  font: 500 16px/1.2 var(--sans); letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.h-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.h-btn.outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.h-btn.outline:hover { background: var(--navy); color: var(--white); }
.h-btn.dark { background: var(--slate); border-color: var(--slate); }
.h-btn.navy { background: var(--navy); border-color: var(--navy); }
.h-btn.dark:hover, .h-btn.navy:hover { background: var(--gold); border-color: var(--gold); }

/* Einstieg: Text links, Foto rechts in voller Höhe. Das Foto erscheint ganz -
   es trägt die Bildunterschrift im Bild, die nicht abgeschnitten werden darf. */
.h-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: var(--white); }
/* Textblock 600 px breit, rechtsbündig in der linken Hälfte: auf breiten
   Schirmen steht er auf der Linie des Logos, wie auf der alten Seite. */
.h-hero .text { padding: 40px 0 40px max(20px, calc(100% - 600px)); }
.h-hero p, .h-hero .h-h1 { margin: 0; color: var(--navy); }
.h-hero .h-h1 { font: inherit; text-wrap: wrap; }
.h-hero .l1, .h-hero .l2, .h-hero .l3 { display: block; }
.h-hero .l1, .h-hero .l3 { font: 500 35px/1.2 var(--sans); }
.h-hero .l2 { font: 500 48px/1.3 var(--serif); margin: 15px 0 20px; }
.h-hero .l2 { text-decoration: underline 2px var(--gold); text-underline-offset: 10px; }
.h-hero .btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.h-hero .h-call { margin-top: 22px; font-size: 16px; line-height: 1.6; }
.h-hero .h-call a { color: var(--navy); font-weight: 500; text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.h-hero .h-call a[href^="tel"] { white-space: nowrap; }
.h-hero .h-call a:hover { color: var(--gold); }
.h-hero .h-call .when { color: var(--muted); white-space: nowrap; }
.h-hero .h-call .lead { display: block; color: var(--navy); font-weight: 500; }
.h-hero .pic { position: relative; }
.h-hero .pic img { display: block; width: 100%; height: auto; }
.h-hero .caption { position: absolute; right: 0; bottom: 36px; background: rgba(255,255,255,.9); padding: 10px 18px 10px 26px; border-radius: 30px 0 0 30px; text-align: right; }
.h-hero .caption b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; color: var(--navy); }
.h-hero .caption span { font-size: 14px; color: var(--navy); }

.h-guarantee { text-align: center; }
.h-guarantee .wrap { max-width: 656px; }
.h-guarantee h2 { margin-bottom: 30px; }
.h-guarantee .lead p { font-size: 19px; line-height: 32px; color: var(--slate); margin: 0 0 16px; }
.h-guarantee .lead p:last-child { margin-bottom: 0; }
.h-guarantee img { width: 200px; height: 120px; margin: 36px auto 0; }
.h-guarantee .g-logo { display: inline-block; }
/* Google-Bewertungen unter dem Logo: drei Karten nebeneinander, je Bewertung
   der Anfang des Textes; ein Klick führt zu Google. Breiter als der Text
   darüber (656 px), mittig. */
.g-reviews { width: min(1080px, calc(100vw - 40px)); margin: 18px 0 0 50%; transform: translateX(-50%); }
.g-reviews .g-sum { margin: 0 0 14px; font-size: 16px; color: var(--slate); }
.g-reviews ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; text-align: left; }
.g-reviews li a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px 18px; background: var(--white); border-radius: 6px; color: var(--slate); text-decoration: none; box-shadow: 0 2px 10px rgba(9, 34, 48, .06); }
.g-reviews li a:hover .g-text { text-decoration: underline 1px var(--gold); text-underline-offset: 3px; }
.g-reviews .g-stars { color: var(--gold); letter-spacing: 1px; font-size: 15px; line-height: 20px; }
.g-reviews .g-text { font-size: 16px; line-height: 24px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.g-reviews .g-text p { display: inline; margin: 0; }
.g-reviews .g-name { margin-top: auto; font-size: 14px; color: var(--muted); }
.g-reviews .g-more { display: inline-block; margin-top: 16px; color: var(--navy); font-weight: 500; text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
@media (max-width: 767px) { .g-reviews ul { grid-template-columns: 1fr; gap: 10px; } .g-reviews .g-text { -webkit-line-clamp: 2; } }

.h-benefits { padding: 70px 0 80px; }
.h-benefits .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.h-benefits .card {
  display: flex; flex-direction: row; gap: 20px; align-items: flex-start; min-height: 155px; padding: 20px 15px; overflow: visible;
  background: var(--white); border-radius: 12px; box-shadow: 0 5px 5px rgba(33, 33, 33, .12);
}
.h-benefits .ic { width: 90px; height: 90px; flex: none; }
.h-benefits h3 { font: 500 22px/32px var(--sans); color: var(--navy); margin: 0 0 4px; }
.h-benefits p { font-size: 16px; line-height: 1.6; color: var(--navy); margin: 0; }

.h-consult .wrap { display: grid; grid-template-columns: 566px minmax(0, 1fr); align-items: center; }
.h-consult .box { background: var(--gold); border-radius: 12px; padding: 40px; text-align: center; }
.h-consult h2 { font: 400 32px/40px var(--serif); color: var(--white); margin-bottom: 20px; }
.h-consult .intro p { font-size: 19px; line-height: 32px; color: var(--navy); margin: 0 0 30px; }
.h-consult .steps { list-style: none; margin: 0; padding: 0 0 0 120px; display: grid; gap: 17px; }
.h-consult .steps li { display: flex; align-items: center; gap: 12px; font: 500 22px/1.6 var(--sans); color: var(--white); }
.h-consult .steps img { width: 32px; height: 32px; flex: none; }
.h-form { display: grid; gap: 10px; text-align: left; }
.h-form .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.h-form input[type=text], .h-form input[type=email], .h-form textarea {
  width: 100%; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 5px;
  background: var(--white); color: var(--text); font: 400 14px/1.5 var(--sans);
}
.h-form textarea { min-height: 80px; resize: vertical; }
.h-form input:focus, .h-form textarea:focus { outline: 2px solid var(--navy); outline-offset: 0; }
.h-form .check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--navy); }
.h-form .check input { margin-top: 2px; }
.h-form .check a { color: var(--navy); }
.h-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h-form .h-btn { justify-self: center; margin-top: 10px; }

.h-occasions { padding: 70px 0 80px; }
.h-occasions .lead { max-width: 835px; margin: 30px auto 0; text-align: center; }
.h-occasions .lead p { font-size: 19px; line-height: 32px; color: var(--slate); margin: 0; }
.h-occasions .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; margin-top: 70px; }
.h-occasions .card {
  display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; text-decoration: none;
  background: var(--white); border-radius: 10px; box-shadow: 0 5px 5px rgba(33, 33, 33, .12);
}
.h-occasions .card .pic { position: relative; display: block; align-self: stretch; }
.h-occasions .card img { display: block; width: 100%; aspect-ratio: 281 / 183; object-fit: cover; border-radius: 10px 10px 0 0; transition: opacity .2s; }
.h-occasions .card:hover img { opacity: .9; }
.h-occasions .card h3 { flex: 1; font: 500 22px/1.4 var(--sans); color: var(--slate); text-align: center; margin: 15px 15px 20px; }
.h-occasions .card .h-btn { width: calc(100% - 30px); }
.h-occasions .card:hover .h-btn { background: var(--gold); border-color: var(--gold); }
/* Fünf Kacheln (mit „Deutschsprachige Antarktis–Reisen“, 27.10.2026) in einer Reihe. */
@media (min-width: 1025px) {
  .h-occasions .cards:has(> .card:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .h-occasions .cards:has(> .card:nth-child(5)) .card h3 { font-size: 19px; margin: 14px 12px 18px; }
}

/* Wendekarten (Team, Kundenmeinungen): Rückseite kippt beim Überfahren
   nach oben, wie die Elementor-Flip-Box "flip up". */
.flip { position: relative; display: block; perspective: 1000px; text-decoration: none; }
.flip .face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--navy) center/cover no-repeat; border-radius: 12px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s ease-in-out;
}
.flip .back { transform: rotateX(-180deg); }
.flip:hover .front, .flip:focus-visible .front { transform: rotateX(180deg); }
.flip:hover .back, .flip:focus-visible .back { transform: rotateX(0); }
@media (prefers-reduced-motion: reduce) { .flip .face { transition: none; } }

.h-team .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 270px 270px; column-gap: 20px; align-items: center; }
.h-team .intro { padding-right: 61px; }
.h-team h2 { color: var(--white); max-width: 497px; margin-bottom: 20px; }
.h-team .intro p { font-size: 19px; line-height: 32px; color: var(--white); margin: 0 0 30px; }
.h-team .flip { height: 480px; }
.h-team .flip b { font: 500 24px/1 var(--sans); color: var(--white); padding: 0 20px 26px; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

.h-reasons .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 631px; align-items: center; }
.h-reasons h2 { max-width: 497px; margin-bottom: 25px; }
.h-reasons.lang .wrap { align-items: start; }
.h-reasons.lang h2 { font-size: 42px; line-height: 1.3; margin-bottom: 20px; }
.h-reasons ul { list-style: none; padding: 0; margin: 0; max-width: 519px; }
.h-reasons li { display: flex; align-items: center; gap: 10px; padding: 7.5px 0; font-size: 19px; line-height: 1.4; color: var(--slate); }
.h-reasons li svg { flex: none; }
.h-reasons .media { position: relative; }
.h-reasons .media > img { width: 100%; aspect-ratio: 631 / 420; object-fit: cover; border-radius: 12px; }
.h-reasons .play {
  position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; padding: 0; border: 0;
  background: none; cursor: pointer; transform: translate(-50%, -50%); transition: transform .2s;
}
.h-reasons .play:hover { transform: translate(-50%, -50%) scale(1.06); }
.h-reasons .play img { width: 110px; height: 110px; }
.h-reasons .play .tri { display: block; width: 80px; height: 80px; margin: auto; border-radius: 50%; background: rgba(255,255,255,.85); }
.h-video { width: min(960px, 92vw); padding: 0; border: 0; background: #000; overflow: visible; }
.h-video::backdrop { background: rgba(0, 0, 0, .8); }
.h-video .frame { aspect-ratio: 16 / 9; }
.h-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.h-video .close { position: absolute; top: -44px; right: -6px; padding: 4px 8px; border: 0; background: none; color: var(--white); font-size: 34px; line-height: 1; cursor: pointer; }

.h-quotes h2, .h-faq h2, .h-partner h2 { font-size: 32px; line-height: 40px; max-width: none; }
.h-faq h2, .h-partner h2 { font-weight: 400; }
.h-quotes .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 40px; }
.h-quotes .flip { height: 320px; }
.h-quotes .face { border-radius: 10px; }
.h-quotes .front b { font: 400 20px/1 var(--sans); color: var(--white); padding: 0 15px 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.h-quotes .back::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.h-quotes .back span { position: relative; padding: 10px; font: 400 18px/1.5 var(--sans); color: var(--white); }

.h-faq h2 { color: var(--white); }
.h-faq .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 70px; row-gap: 41px; margin-top: 68px; }
.h-faq .q { display: grid; grid-template-columns: 45px minmax(0, 500px); column-gap: 20px; align-items: start; }
.h-faq .q img, .h-faq .q .dot { width: 45px; height: 45px; margin-top: 10px; }
.h-faq .q .dot { border-radius: 50%; background: var(--gold); }
.h-faq h3 { font: 500 22px/32px var(--sans); color: var(--white); margin: 0 0 4px; }
.h-faq h3 a { color: inherit; text-decoration: none; }
.h-faq h3 a:hover { color: var(--gold); }
.h-faq .q a.ic { display: block; }
.h-faq .q p { font-size: 16px; line-height: 1.6; color: var(--white); margin: 0; }
.h-faq .q a { font-size: 16px; color: var(--gold); text-decoration: none; }
.h-faq .q a:hover { text-decoration: underline; }

.h-partner { padding: 60px 0 40px; }
.h-partner .carousel { position: relative; max-width: 1200px; margin: 35px auto 0; padding: 0 32px; }
.h-partner .track { display: flex; gap: 35px; max-width: 1135px; margin: 0 auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-partner .track::-webkit-scrollbar { display: none; }
.h-partner .track > * { flex: none; width: 160px; height: 166px; scroll-snap-align: start; }
.h-partner .track img { width: 160px; height: 160px; object-fit: contain; }
.h-partner .arrow {
  position: absolute; top: 50%; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--navy);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transform: translateY(-50%); cursor: pointer;
}
.h-partner .arrow svg { width: 10px; height: 10px; }
.h-partner .prev { left: 0; }
.h-partner .next { right: 0; }


/* Titelbild über die volle Breite mit Überschrift oben (Landingpages). */
.h-cover { min-height: clamp(420px, 60.5vw, 774px); background: var(--navy) center/cover no-repeat; text-align: center; }
.h-cover .wrap { padding-top: 30px; padding-bottom: 40px; }
.h-cover h1 { max-width: 1000px; margin: 0 auto 40px; font: 500 54px/1.4 var(--serif); color: var(--white); text-wrap: wrap; }
.h-cover h1 em { font-style: italic; }
.h-cover.dark h1 { color: var(--navy); }
.h-cover.gross { min-height: clamp(420px, 59.8vw, 765px); }
.h-cover.gross .wrap { padding-top: 80px; }
.h-cover.gross h1 { max-width: 877px; font-size: 60px; line-height: 78px; }
.h-cover.mittel { min-height: clamp(420px, 52.7vw, 675px); }
.h-cover.mittel .wrap { padding-top: 204px; }
.h-cover.mittel h1 { max-width: 748px; font-size: 50px; line-height: 65px; }
.h-cover.rechts { min-height: clamp(420px, 49.2vw, 630px); text-align: right; }
.h-cover.rechts .wrap { padding-top: 206px; }
.h-cover.rechts h1 { max-width: 489px; margin-right: 0; font-size: 50px; line-height: 65px; }

/* Fließtext der gestalteten Seiten. */
.prose-h p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--slate); }
.prose-h p:last-child { margin-bottom: 0; }
.prose-h strong { font-weight: 600; color: var(--navy); }
.prose-h ul { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.prose-h li { position: relative; padding: 0 0 7.5px 27px; font-size: 19px; line-height: 1.5; color: var(--gold); }
.prose-h li::before { content: ""; position: absolute; left: 0; top: .5em; width: 15px; height: 10px; }

/* Überschrift und Text in zwei Spalten. */
.h-cols { padding: 73px 0 80px; }
.h-cols .wrap { display: grid; grid-template-columns: 552px minmax(0, 1fr); column-gap: 50px; align-items: start; }
.h-cols h2 { margin-bottom: 20px; }
.h-cols .wrap > .prose-h { margin-top: 7px; }
.h-cols .prose-h p { font-size: 20px; line-height: 32px; margin-bottom: 20px; }
.h-cols .prose-h p:last-child { margin-bottom: 0; }
.h-cols .wrap > div:first-child .prose-h p { font-size: 21px; }

/* Überschrift und Text mittig, Aufzählung linksbündig in Gold. */
.h-text { padding: 70px 0 40px; }
.h-text .h-title, .h-landing .h-occasions .h-title { max-width: 800px; }
.h-text .prose-h { max-width: 835px; margin: 35px auto 0; text-align: center; }
.h-text .prose-h p { font-size: 19px; line-height: 32px; }
.h-text .prose-h ul { margin: 20px 10px; }

/* Reisen als Karten. */
.h-trips .h-title { color: var(--white); margin-bottom: 40px !important; }
.h-trips .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.h-trips .col { display: flex; flex-direction: column; }
.h-trips h3 { min-height: 80px; margin: 0 0 22px; font: 500 32px/40px var(--serif); color: var(--white); text-align: center; text-wrap: wrap; }
.h-trips .card { flex: 1; display: flex; flex-direction: column; padding-bottom: 20px; background: var(--white); border-radius: 10px; }
.h-trips .card img { width: 100%; aspect-ratio: 377 / 251; object-fit: cover; border-radius: 10px 10px 0 0; }
.h-trips .sub { margin: 18px 0 15px; font: 500 20px/28px var(--sans); color: var(--slate); text-align: center; }
.h-trips .h-btn { margin: auto 15px 0; }
.h-trips .h-btn.more { margin-top: 35px; line-height: 24px; }
.h-trips.klein h3 { min-height: 80px; font-size: 30px; }
.h-trips .checks { margin: 25px 30px 0; }
.h-trips .checks ul { list-style: none; margin: 0; padding: 0; }
.h-trips .checks li { position: relative; padding: 0 0 12px 27px; font-size: 16px; line-height: 24px; color: var(--slate); }
.h-trips .checks li:last-child { padding-bottom: 0; }
.h-trips .checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 10px; }
/* Goldener Haken vor Aufzählungen. */
.h-trips .checks li::before, .prose-h li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 10'%3E%3Cpath d='M4.92 8.49L1.05 4.56a.62.62 0 0 0-.87 0 .63.63 0 0 0 0 .88l4.31 4.38c.24.24.63.24.87 0l8.62-8.75a.63.63 0 0 0 0-.88.62.62 0 0 0-.87 0z' fill='%23B99757'/%3E%3C/svg%3E") no-repeat;
}

/* Sprungmarke des Beratungstermins: knapp oberhalb des Abschnitts. */
.h-consult { position: relative; }

/* Landingpages: dieselben Abschnitte wie auf der Startseite, auf der alten
   Seite dort aber mit etwas knapperen Abständen. */
.h-landing .h-occasions .lead { margin-top: 35px; display: flow-root; }
.h-landing .h-occasions .lead p { margin-bottom: 14px; }
.h-landing .h-occasions .cards { margin-top: 41px; }
.h-landing .h-reasons { padding: 60px 0; }
@media (max-width: 1024px) {
  .h-cover h1, .h-cover.gross h1, .h-cover.mittel h1, .h-cover.rechts h1 { font-size: 38px; line-height: 1.4; }
  .h-cover.gross .wrap, .h-cover.mittel .wrap, .h-cover.rechts .wrap { padding-top: 40px; }
  .h-cols .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .h-cols .wrap > div:first-child .prose-h p { font-size: 17px; line-height: 1.6; }
  .h-cols .prose-h p { font-size: 16px; line-height: 1.6; }
  .h-trips .cols { gap: 30px; }
  .h-trips h3, .h-trips.klein h3 { font-size: 28px; line-height: 1.3; }
  .h-reasons.lang h2 { font-size: 36px; }
}
@media (max-width: 767px) {
  .h-cover h1, .h-cover.gross h1, .h-cover.mittel h1, .h-cover.rechts h1 { font-size: 30px; }
  .h-cols, .h-text { padding: 56px 0; }
  .h-cols .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .h-cols .prose-h p, .h-cols .wrap > div:first-child .prose-h p, .h-text .prose-h p { font-size: 17px; line-height: 1.6; }
  .h-text .prose-h li { font-size: 17px; }
  .h-trips .cols { grid-template-columns: minmax(0, 1fr); }
  .h-trips h3, .h-trips.klein h3 { min-height: 0; font-size: 26px; }
  .h-reasons.lang h2 { font-size: 28px; }
  .h-landing .h-reasons { padding: 56px 0; }
}
.h-anchor { position: absolute; top: 0; }

/* Fließtext-Seiten wie "Über uns": schmalere Spalte (1120 px), Text 19/32 px
   in Dunkelblau, Personen mit Foto im Goldrahmen. */
.h-prose { padding: 10px 0 0; color: var(--navy); }
.h-prose .wrap { max-width: 1168px; }
.h-prose h1 { margin: 70px 0; font: 400 42px/40px var(--serif); color: var(--navy); text-align: center; text-wrap: wrap; }
/* Ratgeber: wer ihn geschrieben hat, direkt unter der Überschrift. */
.h-prose .autorinnen { margin: -46px 0 40px; text-align: center; font-size: 16px; line-height: 24px; color: var(--navy); }
.h-prose .autorinnen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.h-prose h2 { margin: 0 0 30px; font: 400 32px/40px var(--serif); color: var(--navy); text-align: center; text-wrap: wrap; }
.h-prose .body { padding: 0 10px; }
.h-prose .body p { margin: 0 0 14.4px; font-size: 19px; line-height: 32px; color: var(--navy); }
.h-prose .body ul { margin: 0 0 14.4px; padding-left: 40px; list-style: disc; }
.h-prose .body li { font-size: 19px; line-height: 32px; color: var(--navy); }
.h-prose .body a { color: var(--gold); }
.h-prose.mittig .body { text-align: center; display: flow-root; padding-bottom: 11px; }
.h-landing > .h-prose:last-child:not(.h-more) { padding-bottom: 60px; }
.h-person .cols { display: grid; grid-template-columns: minmax(0, 745px) 373px; justify-content: space-between; align-items: start; }
.h-person .pic { padding: 0 10px 10px; }
.h-person .pic img { display: block; width: 100%; height: auto; border: 9px solid var(--gold); }

/* Ratgeberseiten (FAQ): goldene Abschnittsüberschriften, Zwischentitel,
   Bilder im Text, zweispaltige Abschnitte, Symbolreihe, weitere Fragen. */
.h-prose.gold h2 { color: var(--gold); }
.h-prose .body h2, .h-prose .body h3 { margin: 30px 0 15px; font: 400 22px/30px var(--serif); color: var(--navy); text-align: left; }
.h-prose .body img { display: block; max-width: 100%; height: auto; margin: 30px auto; }
.h-prose img.wide { display: block; width: 100%; height: auto; margin: 35px 0 0; }
.h-prose:has(> .wrap > img.wide) { padding-bottom: 10px; }

/* Text links, Bild rechts (Versicherung): Inhalt 1140 px, zwei Hälften,
   Text 550 px, Bild 400 x 600 mittig in der rechten Hälfte. */
.h-side { padding-bottom: 100px; }
.h-side h1 { margin-bottom: 80px; }
.h-side .wrap { max-width: 1188px; }
.h-side .cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.h-side .pic { position: relative; justify-self: center; }
.h-side .pic img { display: block; width: 400px; max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .h-side { padding-bottom: 60px; }
  .h-side h1 { margin: 40px 0; }
  .h-side .cols { grid-template-columns: 1fr; row-gap: 20px; }
}
.h-two h2 { margin-bottom: 4px; }
.h-two .sub { margin: 0 0 37px; font: 400 20px/28px var(--serif); color: var(--navy); text-align: center; }
.h-two .sub em { font-style: italic; }
.h-two .cols { display: grid; grid-template-columns: minmax(0, 745px) 373px; justify-content: space-between; align-items: start; }
.h-two .pic { padding: 0 10px; }
.h-two .pic img { display: block; width: 100%; height: auto; }
.h-two .pros { list-style: none; margin: 0; padding: 0 10px; }
.h-two .pros li { position: relative; padding: 0 0 6px 33px; font-size: 19px; line-height: 32px; color: #579fd7; }
.h-two .pros li.minus { color: var(--navy); margin-top: 14px; }
.h-two .pros li.minus + li.minus { margin-top: 0; }
.h-two .pros li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; background: no-repeat center / contain; }
.h-two .pros li.plus::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23579fd7' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
.h-two .pros li.minus::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23092230' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E"); }
.h-two .below { margin-top: 24px; }

.h-two.links .cols { grid-template-columns: 423px minmax(0, 1fr); }
.h-two.links .pic { padding: 0 0 0 35px; }
.h-two.links .pic img { width: 300px; }
.h-two.links .txt { padding: 40px 10px 0 0; }
.h-two.links h3 { margin: 0 0 20px; font: 400 22px/30px var(--serif); color: var(--navy); }
.h-two.links .txt > .body { padding: 0; }
.h-two.links .txt > .body ul { padding-left: 20px; }
.h-two.links .txt > .body li { font-size: 16px; line-height: 25.6px; }
.h-two .more summary { display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; cursor: pointer; list-style: none; font-size: 16px; line-height: 32px; color: var(--gold); }
.h-two .more summary::-webkit-details-marker { display: none; }
.h-two .more summary::before { content: ""; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; }
.h-two .more[open] summary::before { border-top-color: transparent; border-bottom-color: currentColor; margin: 0 0 5px; }
.h-two .more > .body { padding: 10px 0 0; }
.h-two .more > .body p { font-size: 16px; line-height: 25.6px; }

.h-icons .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: start; }
.h-icons .row img { width: 130px; height: auto; }
.h-icons .row a:first-child img { width: 145px; }

.h-more .wrap { max-width: 1188px; }
.h-more h2 { margin-bottom: 20px; }
.h-more .links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(var(--rows, 3), auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 60px; }
.h-more .links li { padding: 0 0 20px; margin: 0 0 24px; border-bottom: 1px solid #d5dadd; text-align: center; }
.h-more .links li.end { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px; }
.h-more .links a { display: inline-flex; align-items: center; gap: 8px; font: 500 20px/32px var(--sans); color: var(--navy); text-decoration: none; }
.h-more .links a:hover { color: var(--gold); }
.h-more .links svg { width: 16px; height: 16px; flex: none; }

/* Abstände der Ratgeberseiten (erkennbar am Raster der weiteren Fragen),
   gemessen an der alten Seite: Abstand nach dem letzten Element je Art. */
.h-landing:has(.h-more) .h-prose .wrap { display: flow-root; }
.h-landing:has(.h-more) .h-prose { padding-bottom: 10px; }
.h-landing:has(.h-more) .h-prose.mittig { padding-bottom: 40px; }
.h-landing:has(.h-more) .h-prose.mittig .body { padding-bottom: 0; }
.h-landing:has(.h-more) .h-prose.mittig:has(img.wide) { padding-bottom: 20px; }
.h-landing:has(.h-more) .h-prose:not(.h-two):not(.gold):not(.mittig):not(.h-more):has(> .wrap > h2) { padding-bottom: 45px; }
.h-landing:has(.h-more) .h-prose:not(.h-two):not(.mittig):not(.gold):has(+ .h-more) { padding-bottom: 20px; }
.h-landing:has(.h-more) .h-prose.gold { padding: 30px 0 40px; }
.h-landing:has(.h-more) .h-prose.gold h2 { margin-bottom: 50px; }
.h-landing:has(.h-more) .h-prose.gold:not(:has(.body)) { padding: 80px 0 0; }
.h-landing:has(.h-more) .h-prose.gold:not(:has(.body)) h2 { margin-bottom: 40px; }
.h-landing:has(.h-more) .h-two.links { padding: 10px 0 70px; }
.h-landing:has(.h-more) .h-icons { padding-bottom: 10px; }
/* Abstand zur Fußzeile wie auf der alten Seite (Wunsch der Nutzerin, 28.10.2026). */
.h-landing:has(.h-more) .h-more { padding-bottom: 80px; }
.h-prose.eng .body p { line-height: 28.5px; }

@media (max-width: 767px) {
  .h-two .cols, .h-two.links .cols { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .h-two.links .pic { padding: 0; justify-self: center; }
  .h-two.links .txt { padding: 0; }
  .h-icons .row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .h-more .links { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .h-more .links li.end { border-bottom: 1px solid #d5dadd; margin-bottom: 24px; padding-bottom: 20px; }
  .h-more .links a { font-size: 17px; }
  .h-landing:has(.h-more) .h-more { padding-bottom: 50px; }
}
@media (max-width: 767px) {
  .h-prose h1 { margin: 40px 0; font-size: 30px; line-height: 1.3; }
  .h-prose h2 { font-size: 26px; line-height: 1.3; }
  .h-prose .body p, .h-prose .body li { font-size: 17px; line-height: 1.6; }
  .h-person .cols { grid-template-columns: minmax(0, 1fr); }
  .h-person .pic { max-width: 373px; margin: 10px auto 30px; }
}

@media (max-width: 1024px) {
  .h-sec h2 { font-size: 38px; }
  .h-hero .l1, .h-hero .l3 { font-size: 28px; }
  .h-hero .l2 { font-size: 40px; }
  .h-consult .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .h-consult .box { max-width: 640px; width: 100%; margin: 0 auto; }
  .h-consult .steps { padding-left: 0; justify-content: center; }
  .h-occasions .cards, .h-quotes .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-team .wrap { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .h-team .intro { grid-column: 1 / -1; padding-right: 0; }
  .h-reasons .wrap { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}
@media (max-width: 767px) {
  .h-sec, .h-benefits, .h-occasions { padding: 56px 0; }
  .h-partner { padding: 48px 0 32px; }
  .h-sec h2 { font-size: 30px; }
  .h-quotes h2, .h-faq h2, .h-partner h2, .h-consult h2 { font-size: 26px; line-height: 1.3; }
  .h-hero { grid-template-columns: minmax(0, 1fr); }
  .h-hero .text { padding: 40px 16px; }
  .h-hero .l1, .h-hero .l3 { font-size: 24px; }
  .h-hero .l2 { font-size: 34px; }
  .h-guarantee .lead p, .h-occasions .lead p, .h-team .intro p { font-size: 17px; line-height: 1.6; }
  .h-benefits .cards, .h-occasions .cards, .h-quotes .cards { grid-template-columns: minmax(0, 1fr); }
  .h-benefits .card { gap: 14px; }
  .h-benefits .ic { width: 64px; height: 64px; }
  .h-consult .box { padding: 28px 20px; }
  .h-consult .steps li { font-size: 18px; }
  .h-form .row2 { grid-template-columns: minmax(0, 1fr); }
  .h-team .wrap { grid-template-columns: minmax(0, 1fr); }
  .h-team .flip { height: 420px; }
  .h-faq .items { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; margin-top: 40px; }
  .h-partner .carousel { padding: 0 28px; }
}

/* ---------- Bildstreifen oben auf Reise- und Schiffsseiten ---------- */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); height: 190px; background: var(--navy); }
.strip div { position: relative; background: var(--navy) center/cover no-repeat; }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, 1fr); height: 150px; } .strip div:nth-child(n+3) { display: none; } }
.titlebar { text-align: center; padding: 48px 0 40px; }
.titlebar h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 400; margin: 0 auto; max-width: 900px; }
.titlebar h1 em { color: var(--gold); }
.titlebar .sub { color: var(--muted); margin-top: 8px; }

/* ---------- Faktenleiste der Reise ---------- */
.factbar { background: var(--navy); color: var(--white); }
/* Infozeile wie auf der alten Seite: Angaben zweizeilig und mittig, dann
   Specials, Herz und Reise anfragen. */
/* Linke Spalte wächst mit, wenn Schiffsname, Datum und Preis zusammen
   breiter sind; die Angaben behalten immer 14 px Abstand voneinander. */
.factbar .wrap { display: grid; grid-template-columns: minmax(max-content, 548fr) 764fr; column-gap: 16px; align-items: center; max-width: 1328px; min-height: 77px; margin: 0 auto; padding: 10px 0; box-sizing: border-box; }
.factbar .facts { grid-column: 1; grid-row: 1; display: flex; align-items: center; column-gap: 14px; min-width: 0; padding-left: 20px; white-space: nowrap; }
.factbar .facts .btn { flex: none; margin-left: 4px; }
.factbar .facts p { flex: 1 1 auto; margin: 0; font: 300 14px/21px var(--sans); color: var(--white); text-align: center; }
.factbar .facts img { display: inline-block; width: 16px; height: 10px; margin: 0 2px; vertical-align: middle; object-fit: cover; }
/* Herz über der Spalte Aktivitäten, Reise anfragen bündig mit dem Ende
   der Terminliste (20 px Innenabstand wie im Original). */
.factbar .acts { grid-column: 2; grid-row: 1; display: flex; align-items: center; padding-right: 20px; }
.factbar .btn { padding: 12px 16px; border: 0; border-radius: 12px; background: var(--gold); color: var(--white); font: 400 16px/24px Roboto, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.factbar .btn:hover { background: var(--gold-dark); }
.factbar .wishbtn { flex: none; width: 33px; height: 33px; margin: 0 0 0 calc(61.5% - 4px); padding: 0; border: 0; border-radius: 0; background: none; color: var(--white); }
.factbar .wishbtn .icon { width: 32px; height: 32px; }
.factbar .wishbtn .icon path { fill: rgba(255, 255, 255, .2); }
.factbar .acts .btn { margin-left: auto; }
/* „Zurück zur Suche“ links neben dem Herz: nimmt den Platz vor dem Herz ein,
   damit das Herz über der Spalte „Aktivitäten“ stehen bleibt. */
.factbar .factback { flex: 0 0 calc(61.5% - 4px); box-sizing: border-box; padding-right: 20px; text-align: right; }
.factbar .factback[hidden] { display: none; }
.factbar .factback:not([hidden]) + .wishbtn { margin-left: 0; }
.factbar .factback a { display: inline-block; padding: 9px 16px; border: 1px solid var(--gold); border-radius: 12px; font: 400 14px/20px var(--sans); color: var(--white); text-decoration: none; white-space: nowrap; transition: background .2s; }
.factbar .factback a:hover, .factbar .factback a:focus-visible { background: var(--gold); }
.factbar .wishbtn:hover, .factbar .wishbtn[aria-pressed="true"] { background: none; border: 0; color: var(--white); }
.factbar .wishbtn[aria-pressed="true"] .icon path { fill: var(--gold); }
@media (max-width: 1100px) {
  .factbar .wrap { display: flex; flex-wrap: wrap; padding: 10px 20px; }
  .factbar .facts { flex-wrap: wrap; padding-left: 0; white-space: normal; }
  .factbar .acts { flex-basis: 100%; margin-top: 10px; padding-right: 0; }
  .factbar .wishbtn { margin: 0 24px 0 0; }
  .factbar .acts .btn { margin-left: 0; }
  .factbar .factback { flex: none; padding-right: 20px; text-align: left; }
}
@media (max-width: 560px) {
  .factbar .acts { flex-wrap: wrap; row-gap: 12px; }
  .factbar .factback { flex: 0 0 100%; padding-right: 0; }
}
@media (max-width: 767px) {
  .factbar .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; width: 100%; }
  .factbar .facts p { width: auto; }
}

.datesblock { background: var(--navy); color: var(--white); padding: 12px 0 56px; }
.datesblock .wrap { display: grid; grid-template-columns: 548fr 764fr; column-gap: 16px; row-gap: 24px; align-items: start; max-width: 1328px; margin: 0 auto; padding: 0; }
/* Spalten wie auf der alten Seite, damit das Herz über Aktivitäten steht. */
.dates { table-layout: fixed; }
.dates th:nth-child(1) { width: 20%; }
.dates th:nth-child(2) { width: 15%; }
.dates th:nth-child(3) { width: 17%; }
.dates th:nth-child(4) { width: 19%; }
.dates th:nth-child(5) { width: 14%; }
.dates th:nth-child(6) { width: 15%; }
.datesblock .map { background: #fff; border-radius: 4px; overflow: hidden; }
.datesblock .map img { width: 100%; }
.datesblock .nomap { color: #9fb3bf; font-size: 15px; }
.dates { width: 100%; border-collapse: collapse; font-size: 14px; }
.dates th { text-align: center; font: 500 16px/27px var(--sans); text-transform: uppercase; color: var(--white); padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.18); }
.dates td { text-align: center; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.1); font: 400 16px/24px var(--sans); white-space: nowrap; }
.dates td.lang img { display: inline-block; width: 16px; height: 10px; margin: 0 2px; vertical-align: middle; object-fit: cover; }
.dates td.acts { white-space: normal; line-height: 0; }
.dates td.acts img { display: inline-block; width: 28px; height: 27px; margin: 2px 1px; vertical-align: middle; object-fit: contain; }
.dates td.acts .atxt { display: inline-block; margin: 0 3px; font-size: 12px; line-height: 18px; color: #cfdbe2; }
.dates tr.current td { background: rgba(185,151,87,.14); }
/* Termine mit Angebot: Schild unter dem Datum wie auf den Karten der Suche
   (Wunsch der Nutzerin, 25.10.2026 – nicht jeder Termin einer Reise hat es). */
.dates-note { margin: 14px 0 0; font: 400 13px/20px var(--sans); color: #cfdbe2; }
.dates-note .dbadge { display: inline-block; margin: 0 6px 0 0; padding: 1px 8px; border-radius: 4px; background: var(--gold); color: var(--white); font: 500 10px/16px var(--sans); text-transform: uppercase; letter-spacing: .5px; }
.dates .dbadge { display: block; width: max-content; margin: 4px auto 0; padding: 1px 8px; border-radius: 4px; background: var(--gold); color: var(--white); font: 500 10px/16px var(--sans); text-transform: uppercase; letter-spacing: .5px; }
.dates a.go { display: inline-flex; width: 34px; height: 34px; border-radius: 6px; background: var(--gold); color: var(--white); align-items: center; justify-content: center; }
.datesmore { display: block; margin: 18px auto 0; padding: 10px 18px; border: 1px solid var(--gold); border-radius: 12px; background: none; color: var(--white); font: 400 15px/22px var(--sans); cursor: pointer; }
.datesmore:hover { background: var(--gold); }
@media (max-width: 1100px) { .datesblock .wrap { padding: 0 20px; } }
@media (max-width: 860px) { .datesblock .wrap { grid-template-columns: 1fr; } .dates { table-layout: auto; } }

.details h2 { text-align: center; margin-bottom: 26px; }
.details .foldtools { display: flex; justify-content: flex-end; gap: 16px; font-size: 13px; padding-top: 18px; }
.details .foldtools button { background: none; border: 0; color: var(--navy); text-decoration: underline; cursor: pointer; font: inherit; }
.itin summary { display: flex; align-items: center; gap: 18px; }
/* Tagesüberschrift ganz in der Schrift von „Tag 1“ (Wunsch der Nutzerinnen, 26.10.2026). */
.itin details.fold > summary { font-family: var(--sans); font-size: 17px; }
.itin .no { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--navy); display: inline-flex; align-items: center; justify-content: center; font: 400 13px/1 var(--sans); flex: none; }
.itin .label { font-family: var(--sans); font-size: 17px; }
.itin .inner p { max-width: 80ch; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.lists h3 { font-size: 22px; }
.lists ul { padding-left: 1.1em; }
.lists li { margin-bottom: 6px; }
@media (max-width: 760px) { .lists { grid-template-columns: 1fr; } }
.cabin { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cabin .ph { aspect-ratio: 4/3; background: var(--ice) center/cover no-repeat; border-radius: 6px; }
.cabin h3 { font-size: 22px; margin-bottom: 4px; }
.cabin .size { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.cabin .from { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.cabin .from small { font-family: var(--sans); font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .cabin { grid-template-columns: 1fr; } }
.shipbox { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.shipbox .ph { aspect-ratio: 16/10; background: var(--ice) center/cover no-repeat; border-radius: 6px; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th { text-align: left; font-weight: 500; color: var(--navy); padding: 7px 12px 7px 0; width: 45%; }
.specs td { padding: 7px 0; }
@media (max-width: 760px) { .shipbox { grid-template-columns: 1fr; } }
.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.extra { border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.extra b { color: var(--navy); font-weight: 500; }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }
.inquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.inquiry .subject { font-family: var(--serif); font-size: 19px; color: var(--navy); margin: 0 0 6px; }
@media (max-width: 860px) { .inquiry { grid-template-columns: minmax(0, 1fr); } }
dialog.specials { border: 0; border-radius: var(--radius); max-width: 560px; padding: 32px; box-shadow: var(--shadow); }
dialog.specials::backdrop { background: rgba(9,34,48,.6); }
/* Inhalt nach Gruppen (Baustein "specialsbox"): Überschrift je Gruppe,
   darunter die Vorteile mit Häkchen bzw. Punkt und Erklärung. */
dialog.specials .spec-group { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
dialog.specials .spec-group:first-of-type { padding-top: 2px; }
dialog.specials .spec-head { margin: 0 0 8px; font: 600 13px/18px var(--sans); letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
dialog.specials .spec-group.in .spec-head { color: var(--ok); }
dialog.specials .spec-group.out .spec-head { color: var(--warn); }
dialog.specials .spec-group ul { margin: 0; padding: 0; list-style: none; }
dialog.specials .spec-group li { position: relative; margin: 0 0 10px; padding-left: 22px; }
dialog.specials .spec-group li:last-child { margin-bottom: 0; }
dialog.specials .spec-group li::before { content: "•"; position: absolute; left: 4px; top: 0; color: var(--muted); }
dialog.specials .spec-group.in li::before { content: "✓"; left: 2px; color: var(--ok); }
dialog.specials .spec-group li b { display: block; font-weight: 600; color: var(--navy); }
dialog.specials .spec-detail, dialog.specials .spec-note { display: block; margin-top: 3px; font-size: 14px; line-height: 21px; color: var(--muted); }
dialog.specials .spec-foot { margin: 10px 0 0; font-size: 13px; line-height: 19px; color: var(--muted); }
dialog.specials form { margin-top: 20px; }

/* ---------- Reisekarten (Raster) ---------- */
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tgrid { grid-template-columns: 1fr; } }
.tcard { position: relative; background: var(--white); border-radius: 8px; box-shadow: 0 4px 18px rgba(9,34,48,.12); overflow: hidden; display: flex; flex-direction: column; }
.tcard .ph { display: block; aspect-ratio: 16/10; background: var(--ice) center/cover no-repeat; position: relative; }
.tcard .ph .promo { position: absolute; left: 12px; top: 12px; background: var(--gold); color: var(--white); border-color: var(--gold); }
.tcard .wishpos { position: absolute; top: 10px; right: 10px; }
.tcard .wishpos .wishbtn { background: rgba(255,255,255,.9); border: 0; }
.tcard .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tcard h3 { font-size: 19px; margin: 0 0 6px; }
.tcard h3 a { color: var(--navy); text-decoration: none; }
.tcard h3 a:hover { color: var(--gold-dark); }
.tcard .ship { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.tcard .ship em { color: var(--gold-dark); font-family: var(--serif); }
.kv { display: flex; gap: 22px; margin: 0 0 12px; font-size: 13px; }
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 0; color: var(--navy); font-weight: 500; }
.tcard .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.pricebox small { display: block; color: var(--muted); font-size: 12px; }
.pricebox strong { font-weight: 600; color: var(--navy); font-size: 18px; }


/* ---------- Schiffsseite ---------- */
.shipintro { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.shipintro .ph { background: var(--ice) center/cover no-repeat; min-height: 300px; }
.shipintro .txt { background: var(--navy); color: #e3ecf1; padding: 56px 8%; display: flex; flex-direction: column; justify-content: center; }
.shipintro .txt p { font-size: 15px; }
.shipintro .txt .btn { align-self: flex-start; margin-top: 12px; }
@media (max-width: 860px) { .shipintro { grid-template-columns: 1fr; } }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.twocol h3 { color: var(--gold-dark); font-size: 24px; }
@media (max-width: 760px) { .twocol { grid-template-columns: 1fr; } }
.shipcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .shipcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shipcards { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.gallery div { aspect-ratio: 4/3; background: var(--ice) center/cover no-repeat; border-radius: 4px; }

/* ---------- Merkliste ---------- */
/* Merkliste: Karten wie in der Suche, Papierkorb statt Herz (22.10.2026). */
.wishlist .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 -8px; }
.wishlist .cell { display: flex; padding: 14px 8px; }
.wishlist .cell .rk { flex: 1; }
.wishlist .note { margin: 24px 0 0; color: var(--muted); font-size: 14px; }
.wishlist ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.wishlist li { border-bottom: 1px solid var(--line); padding: 10px 0; }
.wishlist li a { font-family: var(--serif); font-size: 19px; color: var(--navy); text-decoration: none; }
.rk .wishdel { display: block; width: 33px; height: 33px; padding: 0; border: 0; background: none; color: #d0021b; cursor: pointer; }
.rk .wishdel .icon { display: block; width: 30px; height: 30px; }
.rk .wishdel:hover { color: #9b0014; }
.rk.gone .ph { height: 120px; }
@media (max-width: 1024px) { .wishlist .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .wishlist .grid { grid-template-columns: 1fr; } }


/* ---------- Sammelseiten der Schiffe (wie auf der alten Seite) ---------- */
.h-sammel { box-sizing: border-box; min-height: 69vh; padding-bottom: 276px; background: var(--ice) 50% 100% / cover no-repeat; }
@media (min-width: 2400px) { .h-sammel { min-height: 662px; } }
@media (max-width: 1366px) { .h-sammel { min-height: 53vh; } }
@media (max-width: 1200px) { .h-sammel { min-height: 48vh; } }
@media (max-width: 1024px) { .h-sammel { min-height: 265px; } }
@media (max-width: 880px) { .h-sammel { min-height: 0; } }
@media (max-width: 500px) { .h-sammel { padding-bottom: 200px; } }
.h-sammel .text { max-width: 900px; box-sizing: border-box; margin: 0 auto; padding: 30px 10px 0; text-align: center; color: var(--navy); }
.h-sammel h1 { margin: 0; font: 500 32px/40px var(--serif); color: var(--navy); }
.h-sammel h1 em { color: var(--gold); }
.h-sammel .sub, .h-sammel .sub p { margin: 10px 0 0; font: 400 20px/30px var(--serif); color: var(--navy); }
@media (max-width: 1024px) { .h-sammel .sub, .h-sammel .sub p { line-height: 26px; } }
.h-schiffe { max-width: 1328px; margin: 30px auto 120px; padding: 10px; }
.h-schiffe .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 -8px; }
.h-schiffe .tile { display: flex; flex-direction: column; padding: 10px 8px; }
.h-schiffe .ph { position: relative; margin: 0; height: 195px; overflow: hidden; border-radius: 10px 10px 0 0; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .28); background: var(--ice); }
.h-schiffe .ph img { display: block; width: 100%; height: 200px; object-fit: cover; }
.h-schiffe figcaption { position: absolute; left: 0; right: 20px; bottom: 0; padding-bottom: 3px; font: 400 12px/32px var(--sans); color: var(--white); text-align: right; opacity: 0; transition: opacity .3s; }
.h-schiffe .tile:hover figcaption { opacity: 1; }
.h-schiffe .body { display: flex; flex-direction: column; flex: 1; padding: 17px; background: var(--white); border-radius: 0 0 10px 10px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .28); }
.h-schiffe h2 { margin: 2px 0 0; font: 500 18px/18px var(--serif); color: var(--slate); hyphens: manual; }
.h-schiffe .kat { margin: 13px 0 0; font: italic 400 14px/18px var(--serif); color: var(--slate); }
.h-schiffe .kat span { margin-left: 8px; color: var(--gold); }
.h-schiffe .facts { display: grid; grid-template-columns: 38.5% 34.5% 27%; margin: 39px 0 20px; padding-bottom: 6px; }
.h-schiffe .facts dt { font: 400 13px/20px var(--sans); color: #005283; }
.h-schiffe .facts dd { margin: 5px 0 0; min-height: 20px; font: 600 16px/20px var(--sans); color: #005283; }
.h-schiffe .go { align-self: flex-end; margin-top: auto; max-width: 50%; padding: 8px 17px; border-radius: 8px; background: var(--navy); color: var(--white); font: 400 16px/24px Roboto, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none; }
.h-schiffe .go:hover { background: var(--gold); color: var(--white); }
@media (max-width: 1024px) { .h-schiffe .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .h-schiffe { padding: 10px 20px; }
  .h-schiffe .grid { grid-template-columns: 1fr; }
  .h-schiffe .ph { height: 182px; }
  .h-schiffe .facts { grid-template-columns: 1fr; }
}

/* ---------- Schiffsseite: „Alle Reisen der …“ (Knopf, Reiter, Fenster) ---------- */
.h-allbtn { display: inline-block; padding: 12px 40px; border: 0; border-radius: 12px; background: var(--gold); color: var(--white); font: 500 16px/24px Roboto, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; cursor: pointer; }
.h-allbtn:hover { background: var(--gold-dark); }
.shipintro .txt .h-allbtn { align-self: flex-start; margin-top: 20px; }
.h-abfahrten { padding: 60px 0 40px; text-align: center; }
.h-abfahrten h2 { margin: 0 auto 50px; max-width: 860px; font: 400 20px/30px var(--sans); color: var(--navy); hyphens: manual; }
html:has(dialog.h-reisen[open]) { overflow: hidden; }
.h-reisen { box-sizing: border-box; width: 70vw; max-width: none; max-height: 100vh; max-height: 100dvh; margin: auto; padding: 0; border: 0; border-radius: 10px; background: var(--white); color: var(--text); box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); overflow: hidden; }
.h-reisen::backdrop { background: rgba(0, 0, 0, .8); }
.h-reisen .in { box-sizing: border-box; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 50px 45px 60px; }
.h-reisen .x { position: absolute; z-index: 5; top: 32px; right: 28px; width: 21px; height: 21px; padding: 0; border: 0; background: none; color: var(--gold); cursor: pointer; }
.h-reisen .x svg { display: block; width: 100%; height: 100%; }
.h-reisen h2 { margin: 0; padding-right: 30px; font: 400 28px/40px var(--serif); color: #3e3e3e; hyphens: manual; }
.h-reisen .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 30px -10px 0; }
.rk { position: relative; display: flex; flex-direction: column; }
.h-reisen .rk { margin: 10px; }
.rk .cover { position: absolute; inset: 0; z-index: 2; border-radius: 10px; }
.rk .ph { position: relative; height: 257px; border-radius: 10px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .28); background: var(--ice); }
.rk .ph .badge { position: absolute; z-index: 3; top: 16px; left: 12px; padding: 4px 10px; border-radius: 6px; background: var(--gold); color: var(--white); font: 500 12px/18px var(--sans); text-transform: uppercase; letter-spacing: .5px; }
.rk .ph div { position: absolute; inset: 0; border-radius: 8px; background: center / cover no-repeat; }
.rk .ph .back { opacity: 0; transition: opacity .6s; }
.rk:hover .back { opacity: 1; }
.rk .wish { position: absolute; top: 16px; right: 12px; z-index: 3; }
.rk .wishbtn { width: 33px; height: 33px; border: 0; border-radius: 0; background: none; color: var(--white); }
.rk .wishbtn .icon { width: 33px; height: 33px; }
.rk .wishbtn .icon path { fill: rgba(70, 70, 70, .45); }
.rk .wishbtn:hover, .rk .wishbtn[aria-pressed="true"] { background: none; color: var(--white); }
.rk .wishbtn[aria-pressed="true"] .icon path { fill: var(--gold); }
.rk .body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; margin-top: -6px; padding: 17px; background: var(--white); border-radius: 0 0 10px 10px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .28); }
.rk h3 { margin: 2px 0 0; min-height: 44px; font: 500 18px/1.2 var(--serif); color: var(--slate); hyphens: manual; }
.rk .ship { margin: 13px 0 0; font: italic 400 14px/18px var(--serif); color: var(--slate); }
.rk .ship span { margin-left: 8px; color: var(--gold); }
.rk .facts { display: grid; grid-template-columns: 31% 69%; margin: 39px 0 0; padding-bottom: 6px; border-bottom: 1px solid #ccc; }
.rk .facts dt, .rk .price small { display: block; font: 400 13px/20px var(--sans); color: #005283; }
.rk .facts dd, .rk .price strong { display: block; margin: 5px 0 0; min-height: 20px; font: 600 16px/20px var(--sans); color: #005283; }
.rk .facts .flags { display: flex; align-items: center; gap: 5px; }
.rk .flags img { display: block; width: 18px; height: 12px; object-fit: cover; }
.rk .foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 20px; }
.rk .go { position: relative; z-index: 3; max-width: 50%; padding: 8px 17px; border-radius: 8px; background: var(--navy); color: var(--white); font: 400 16px/24px Roboto, Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; text-decoration: none; }
.rk .go:hover { background: var(--gold); color: var(--white); }
.h-reisen .leer { margin: 30px 0 0; }
@media (max-width: 1024px) { .h-reisen { width: 96vw; } }
@media (max-width: 767px) {
  .h-reisen { width: 90vw; }
  .h-reisen .in { padding: 40px 30px 30px; }
  .h-reisen .x { top: 29px; right: 11px; }
  .h-reisen h2 { font-size: 20px; line-height: 26px; }
  .h-reisen .grid { grid-template-columns: 1fr; }
  .rk .facts { grid-template-columns: 1fr; }
  .rk .go { max-width: none; }
}

/* ---------- Suche (wie auf der alten Seite) ---------- */
.h-suche { box-sizing: border-box; max-width: 1327px; margin: 0 auto; padding-bottom: 10px; }
.h-suche h1 { margin: 0; padding: 64px 20px 8px; font: 500 32px/40px var(--serif); color: var(--slate); text-align: center; hyphens: manual; }
.h-suche .bar { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 0 15px 0 0; }
.h-suche .filterbtn { display: none; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--navy); color: var(--white); font: 400 16px/24px Roboto, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.h-suche select { box-sizing: border-box; height: 47px; width: 137px; padding: 12px 12px 12px 16px; border: 1px solid #d9d9d9; border-radius: 12px; background: var(--white); color: var(--slate); font: 400 16px Roboto, Arial, sans-serif; cursor: pointer; }
.h-suche .layout { display: grid; grid-template-columns: 24.5% minmax(0, 1fr); column-gap: 2px; align-items: start; }
.h-suche .filters { position: relative; padding-top: 26px; }
.h-suche .filters .close { display: none; }
.h-suche .fbox { box-sizing: border-box; width: calc(100% - 5px); margin: 0 0 25px; padding: 23px 27px 27px; border: 1px solid rgba(128, 128, 128, .37); }
.h-suche .fbox h3 { margin: 0 0 10px; font: 700 18px/27px Roboto, Arial, sans-serif; color: #000; }
.h-suche .opts { display: flex; flex-direction: column; gap: 3px; }
.h-suche .opts.scroll { max-height: 180px; overflow-y: auto; }
.h-suche .opts label { display: flex; align-items: flex-start; gap: 10px; padding-top: 3.5px; cursor: pointer; font: 500 14px/21px var(--sans); color: var(--slate); }
.h-suche .opts input { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid #959499; border-radius: 0; background: var(--white) center / 12px no-repeat; cursor: pointer; }
.h-suche .opts input:checked { border-color: var(--navy); background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E"); }
.h-suche .opts input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.h-suche .range .slider { position: relative; height: 7px; }
.h-suche .range .track { position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 25px; background: #eee; }
.h-suche .range .track .sel { position: absolute; top: 0; bottom: 0; border-radius: 25px; background: var(--gold); }
.h-suche .range input[type=range] { position: absolute; left: 0; top: -4.5px; width: 100%; height: 16px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; }
.h-suche .range input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--navy); pointer-events: auto; cursor: pointer; -webkit-appearance: none; }
.h-suche .range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--navy); pointer-events: auto; cursor: pointer; }
.h-suche .range input[type=range]::-moz-range-track { background: none; }
.h-suche .range .nums { display: flex; justify-content: space-between; margin-top: 20px; }
.h-suche .range .nums label { box-sizing: border-box; width: 100px; padding: 4px 0 4px 9px; border-radius: 5px; background: #d9eef7; }
.h-suche .range .nums input { display: block; width: 100%; height: 18px; padding: 0; border: 0; background: none; font: 400 12px/18px var(--sans); color: var(--slate); }
.h-suche .reset { display: inline-block; margin: 0 0 25px; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--navy); color: var(--white); font: 400 16px/24px Roboto, Arial, sans-serif; text-decoration: none; cursor: pointer; }
.h-suche .reset:hover { background: var(--gold); color: var(--white); }
.h-suche .results { margin-right: 6px; padding-top: 10px; }
.h-suche .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.h-suche .cell { display: flex; padding: 14px 8px; }
.h-suche .cell .rk { flex: 1; }
.h-suche .empty { margin: 14px 8px; }
.h-suche .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 20px 0 0; font: 400 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.h-suche .pager a, .h-suche .pager span { padding: 10px; color: var(--navy); text-decoration: none; }
.h-suche .pager a:hover { color: var(--gold); }
.h-suche .pager .cur { color: var(--gold); }
.filters-backdrop { display: none; }
@media (max-width: 1024px) { .h-suche .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-suche .beratung-handy { display: none; }
@media (max-width: 767px) {
  .h-suche h1 { padding: 50px 0 20px; }
  .h-suche .beratung-handy { display: block; margin: -8px 20px 18px; font-size: 16px; line-height: 1.6; color: var(--navy); text-align: center; }
  .h-suche .beratung-handy a { color: var(--navy); font-weight: 500; white-space: nowrap; text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
  .h-suche .beratung-handy span { white-space: nowrap; }
  .h-suche .bar { justify-content: space-between; padding: 0 20px; }
  .h-suche .filterbtn { display: inline-block; }
  .h-suche .layout { display: block; }
  .h-suche .results { margin: 0; padding: 21px 12px 0; }
  .h-suche .grid { grid-template-columns: 1fr; }
  .h-suche .filters { position: fixed; z-index: 120; top: 0; bottom: 0; left: 0; width: 280px; padding: 40px 20px 20px; overflow-y: auto; background: var(--white); transform: translateX(-100%); transition: transform .3s; }
  .h-suche .filters .close { display: block; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: var(--slate); cursor: pointer; }
  .h-suche .filters .close svg { display: block; width: 100%; height: 100%; }
  .h-suche .fbox { width: 100%; }
  html.filters-open .h-suche .filters { transform: none; }
  html.filters-open { overflow: hidden; }
  html.filters-open .filters-backdrop { display: block; position: fixed; z-index: 110; inset: 0; background: rgba(0, 0, 0, .8); }
}

/* ---------- Reiseseiten: Reiter wie auf der alten Seite ---------- */
.details h2 { font: 400 28px/40px var(--serif); }
/* Foto links (Urheber erscheint beim Überfahren), rechts Name, Preis, Text. */
.prow { display: grid; grid-template-columns: 406px minmax(0, 1fr); gap: 16px; margin: 0 0 47px; align-items: start; }
.prow .ph, .itin .ph { position: relative; margin: 0; height: 270px; overflow: hidden; background: var(--ice-soft); }
[data-panel="aktivitaeten"] .prow .ph { height: 254px; }
.prow .ph img, .itin .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prow .ph figcaption, .itin .ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 8px; font: 400 12px/16.8px var(--sans); color: var(--white); text-align: right; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .3s; }
.prow .ph:hover figcaption, .itin .ph:hover figcaption { opacity: 1; }
/* Ohne Foto bleibt die Fläche weiß wie auf der alten Seite. */
.prow .ph.empty, .itin .ph.empty { background: var(--white); }
/* Kabine ohne Foto: schmal, Text über die volle Breite (25.10.2026). */
.prow.nophoto { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.prow .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.prow h3 { display: flex; align-items: center; gap: 20px; margin: 0; font: 400 28px/40px var(--serif); color: var(--gold); hyphens: manual; }
.prow .aicon { flex: none; width: 35px; height: 33px; object-fit: contain; }
.prow .price { flex: none; text-align: right; color: var(--navy); white-space: nowrap; }
.prow .price strong { font: 600 24px/36px var(--sans); }
.prow .price span { font: 600 24px/24px var(--sans); }
.prow .price small { display: block; font: 400 16px/24px var(--sans); }
.prow .price .ask { font-size: 20px; }
.prow .txt p { margin: 20px 0 0; font: 400 16px/26px var(--sans); color: #212121; }
.prow .txt .size { margin-top: 4px; color: var(--muted); font-size: 14px; }
.prow .txt .cabin-cut { margin: 4px 0 8px; }
.prow .txt .cabin-free { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.prow .tablewrap { margin-top: 16px; }
/* Aktivitäten ohne Foto: kompakte Kacheln, zwei nebeneinander, statt einer
   Zeile mit leerer Bildfläche (Wunsch der Nutzerin, 24.10.2026). */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 47px; }
.pcard { padding: 18px 22px; background: var(--ice); border-radius: 6px; }
.pcard .head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pcard h3 { display: flex; align-items: center; gap: 14px; margin: 0; font: 400 24px/32px var(--serif); color: var(--gold); hyphens: manual; }
.pcard .aicon { flex: none; width: 35px; height: 33px; object-fit: contain; }
.pcard .price { flex: none; text-align: right; color: var(--navy); white-space: nowrap; }
.pcard .price strong { font: 600 20px/28px var(--sans); }
.pcard .price span { font: 600 20px/20px var(--sans); }
.pcard .price small { display: block; font: 400 14px/20px var(--sans); }
.pcard .price .ask { font-size: 17px; }
.pcard p { margin: 12px 0 0; font: 400 16px/26px var(--sans); color: #212121; }
.pcard h3 { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .pgrid { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 560px) { .pcard .head { flex-direction: column; align-items: flex-start; gap: 4px; } .pcard .price { text-align: left; } .pcard h3 { font-size: 21px; line-height: 28px; } }
/* Reiseverlauf: Foto des Tages links, Text rechts. */
.itin .inner.withph { display: grid; grid-template-columns: 409px minmax(0, 1fr); gap: 17px; align-items: start; }
.itin .inner.withph .ph { height: 235px; }
.itin .inner .txt p:first-child { margin-top: 0; }
.itin .inner .txt p { font: 400 16px/26px var(--sans); }
@media (max-width: 900px) {
  .prow, .itin .inner.withph { grid-template-columns: 1fr; }
  .prow .ph, .itin .inner.withph .ph, [data-panel="aktivitaeten"] .prow .ph { height: auto; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) { .prow .head { flex-direction: column; gap: 6px; } .prow .price { text-align: left; } }
@media (max-width: 767px) { .dates th, .dates td { font-size: 13px; line-height: 20px; padding-left: 6px; padding-right: 6px; } .dates td { white-space: nowrap; } }

/* Urheber eines Fotos wie auf der alten Seite: weiß, klein, unten rechts,
   erst beim Überfahren (Baustein "urheber"). */
.credit { position: absolute; left: 0; right: 20px; bottom: 0; padding: 0 0 8px 10px; overflow-wrap: break-word; font: 400 12px/1.6 var(--sans); color: var(--white); text-align: right; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 1; }
:hover > .credit { opacity: 1; }
.strip .credit { padding-bottom: 16px; }
.mega .tile .ph, .tilelink .ph, .card .ph, .cabin .ph, .shipbox .ph, .shipintro .ph, .h-two .pic { position: relative; }
.h-two .pic .credit { right: 30px; }

/* Tarife (Hapag-Lloyd: PLATIN/SILBER), 20.10.2026 */
.callout.tarife { margin: 0 0 28px; padding: 20px 22px; }
.callout.tarife h3 { margin: 0 0 6px; }
.callout.tarife > p { margin: 0 0 14px; }
.callout.tarife > p.meta { margin: 12px 0 0; }
.callout.tarife .table { background: var(--white); }
.badge.fare { font-weight: 600; letter-spacing: .3px; }
.badge.fare-platin { border-color: var(--navy); color: var(--navy); background: var(--white); }

/* Referenzen wie antarktistravels.de/referenzen/ (21.10.2026):
   Kopf mit Kontaktkasten, dann je Referenz Bild links, Text rechts. */
.h-refkopf, .h-referenzen { color: var(--navy); }
.h-refkopf .wrap, .h-referenzen .wrap { max-width: 1188px; }
.h-refkopf { padding: 60px 0 0; }
.h-refkopf .wrap { display: grid; grid-template-columns: 2fr 1fr; align-items: start; }
.h-refkopf .main { padding: 0 53px 40px 0; }
.h-refkopf h1 { font: 400 38px/1.2 var(--serif); color: var(--navy); margin: 0 0 22px; }
.h-refkopf .body p, .h-referenzen .body p { font-size: 16px; line-height: 1.6; margin: 0 0 14.4px; }
.h-refkopf .box { border-left: 1px solid #ccc; padding: 32px 0 40px 32px; }
.h-refkopf .box h2 { font: 400 28px/1.3 var(--serif); color: var(--navy); margin: 0 0 18px; }
.h-refkopf .contact { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.h-refkopf .contact img { width: 61px; height: 61px; object-fit: cover; }
.h-refkopf .contact p { margin: 0; line-height: 1.6; }
.h-refkopf .contact a, .h-referenzen a.more { color: var(--navy); text-decoration: none; }
.h-refkopf .contact a:hover, .h-referenzen a.more:hover { color: var(--gold-dark); }
.h-referenzen { padding: 0 0 20px; }
.h-referenzen .ref { display: grid; grid-template-columns: 27% 1fr; gap: 40px; align-items: start; border-top: 1px solid #ccc; padding: 40px 0 50px; }
.h-referenzen .pic img { display: block; width: 100%; height: auto; }
.h-referenzen h2 { font: 400 28px/1.3 var(--serif); color: var(--navy); margin: 0 0 22px; }
.h-referenzen .date { color: var(--grey); margin: 0 0 18px; }
.h-referenzen .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 6px 0 0; }
.h-referenzen .rating { display: inline-flex; align-items: center; gap: 10px; }
.h-referenzen .stars { color: #f1c40f; font-size: 25px; line-height: 1; letter-spacing: 4px; }
@media (max-width: 900px) {
  .h-refkopf .wrap { grid-template-columns: 1fr; }
  .h-refkopf .main { padding-right: 0; }
  .h-refkopf .box { border-left: 0; border-top: 1px solid #ccc; padding: 30px 0 30px; }
  .h-referenzen .ref { grid-template-columns: 1fr; gap: 24px; }
  .h-referenzen .pic img { max-width: 450px; }
  .h-refkopf h1 { font-size: 32px; }
  .h-referenzen h2, .h-refkopf .box h2 { font-size: 24px; }
}

/* ---------- Reiseziel wie auf der alten Seite (22.10.2026) ----------
   Bilderleiste über die volle Breite (fünf Fotos, Tablet vier, Handy eins),
   darunter Überschrift mittig, Text 19/32 und Bild neben dem Text. */
.rz-strip { position: relative; }
.rz-strip .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rz-strip .track::-webkit-scrollbar { display: none; }
.rz-strip .track img { flex: none; width: 20%; aspect-ratio: 270 / 162; height: auto; object-fit: cover; scroll-snap-align: start; }
.rz-strip .arrow {
  position: absolute; top: 50%; z-index: 1; width: 25px; height: 25px; padding: 0; border: 0; background: none;
  color: rgba(237, 237, 237, .9); transform: translateY(-50%); cursor: pointer; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4));
}
.rz-strip .arrow svg { width: 25px; height: 25px; }
.rz-strip .prev { left: 10px; }
.rz-strip .next { right: 10px; }
.rz { padding: 70px 0 90px; color: var(--navy); }
.rz-wrap { max-width: 1104px; margin: 0 auto; padding: 0 20px; box-sizing: content-box; }
.rz h1 { margin: 0 0 60px; font: 400 42px/40px var(--serif); text-align: center; color: var(--navy); }
.rz-text { font-size: 19px; line-height: 32px; }
.rz-text p { margin: 0 0 14.4px; }
.rz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 0; align-items: start; margin: 0; }
.rz-wrap > .rz-text + .rz-row { margin-top: 30px; }
.rz-row.noimg { grid-template-columns: 1fr; }
.rz-pic, .rz-row .rz-text { padding: 0 10px; }
/* Falklandinseln: Bild neben der Einleitung, direkt unter der Überschrift. */
.rz-row.beside { margin-top: -20px; }
.rz-pic img { width: 100%; }
@media (max-width: 1024px) {
  .rz-strip .track img { width: 25%; }
}
@media (max-width: 767px) {
  .rz-strip .track img { width: 100%; }
  .rz { padding: 40px 0 60px; }
  .rz h1 { margin-bottom: 30px; font-size: 32px; line-height: 1.2; }
  .rz-text { font-size: 17px; line-height: 28px; }
  .rz-row, .rz-row.beside { grid-template-columns: 1fr; margin-top: 0; }
  .rz-pic, .rz-row .rz-text { padding: 0; }
}

/* ---------- FAQ-Seite (faq.html) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.faqhero .wrap { padding-top: 64px; padding-bottom: 56px; text-align: center; }
.faqhero h1 { max-width: none; margin: 0 auto 10px; }
.faqhero .faq-intro { max-width: 760px; margin: 16px auto 0; color: var(--text); }
.faq-search { position: relative; max-width: 640px; margin: 28px auto 0; }
.faq-search[hidden] { display: none; }
.faq-search svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.faq-search input { width: 100%; box-sizing: border-box; padding: 16px 20px 16px 52px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font: 400 16px/24px var(--sans); color: var(--navy); box-shadow: var(--shadow); }
.faq-search input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.faqpage { padding-top: 40px; }
.faqpage .wrap { max-width: 920px; }
.faq-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 36px; }
/* Themen nebeneinander, Klick springt zum Thema (Notion Nr. 64,
   29.10.2026): ohne Anzahl der Fragen, mit goldenem Rahmen wie vorher
   (Wunsch der Nutzerin). */
.faq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-chips a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid var(--gold); border-radius: 999px; font: 500 14px/20px var(--sans); color: var(--navy); text-align: center; text-decoration: none; transition: background .2s, color .2s; }
.faq-chips a:hover, .faq-chips a:focus-visible { background: var(--gold); color: var(--white); }
@media (max-width: 767px) {
  .faq-chips { flex-wrap: nowrap; width: 100%; }
  .faq-chips a { flex: 1 1 0; padding: 10px 12px; border-radius: 14px; }
}
.faq-all { padding: 8px 4px; border: 0; background: none; font: 500 14px/20px var(--sans); color: var(--gold-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.faq-all[hidden] { display: none; }
.faq-none { padding: 24px; border-radius: var(--radius); background: var(--ice-soft); text-align: center; }
.faq-none[hidden] { display: none; }
.faq-sec { margin: 0 0 48px; scroll-margin-top: 110px; }
.faq-sec[hidden] { display: none; }
.faq-sec > h2 { margin: 0 0 18px; font: 400 clamp(24px, 2.6vw, 30px)/1.3 var(--serif); color: var(--navy); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.faq-item[hidden] { display: none; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 8px; cursor: pointer; list-style: none; transition: background .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--ice-soft); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq-item summary h3 { margin: 0; font: 400 19px/28px var(--serif); color: var(--navy); }
.faq-item summary .chev { flex: none; width: 16px; height: 16px; color: var(--gold); transition: transform .2s; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item[open] summary h3 { color: var(--gold-dark); }
.faq-a { padding: 0 8px 24px; max-width: 760px; }
.faq-a p { margin: 0 0 12px; }
.faq-a mark { padding: 0 2px; background: #f6e7c4; color: inherit; border-radius: 2px; }
.faq-perma { margin-top: 16px !important; font-size: 13px; }
.faq-perma a { color: var(--muted); }
.faq-ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 56px; padding: 32px 36px; border-radius: var(--radius); background: var(--navy); color: var(--white); }
.faq-ask h2 { margin: 0 0 6px; font: 400 24px/1.3 var(--serif); color: var(--white); }
.faq-ask p { margin: 0; color: #d5e3ea; }
.faq-ask .btn { flex: none; }
@media (max-width: 760px) {
  .faqhero .wrap { padding-top: 44px; padding-bottom: 40px; }
  .faq-item summary h3 { font-size: 17px; line-height: 25px; }
  .faq-ask { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) { .faq-item summary .chev { transition: none; } }

/* ---------- Datenschutzerklärung (seite.html) ----------
   Gestaltung wie die übrigen Inhaltsseiten, aber ohne hellblauen Kopf und
   mit wenig Abstand zwischen Titel und Text (Wunsch der Nutzerin, 26.10.2026). */
.pagehero.legalhero { background: var(--white); color: var(--navy); }
.pagehero.legalhero::before { display: none; }
.pagehero.legalhero .wrap { padding-top: 56px; padding-bottom: 0; }
.pagehero.legalhero h1 { margin-bottom: 0; color: var(--navy); }
.legaltext { padding-top: 24px; }
.legaltext .prose > :first-child { margin-top: 0; }
@media (max-width: 767px) {
  .pagehero.legalhero .wrap { padding-top: 36px; }
  .legaltext { padding-top: 16px; }
}

/* ---------- Eigenes Captcha in den Formularen (captcha.go) ---------- */
.captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 12px; }
.captcha .captcha-box { margin: 0; }
.captcha.busy .captcha-box { cursor: progress; }
.captcha-state { font-size: 14px; line-height: 20px; opacity: .85; }
.captcha.ok .captcha-state { color: var(--ok); font-weight: 500; opacity: 1; }
.captcha-nojs { margin: 6px 0 0; font-size: 14px; }

/* Pflichtfelder in den Formularen (Notion Nr. 34): Sternchen am Feldnamen. */
.req { color: var(--gold-dark); font-weight: 600; }
.reqnote { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* Deutschsprachige Antarktis-Reisen (deutschsprachig.html, 27.10.2026). */
.de-top { padding-bottom: 50px; }
.de-top h1 { margin-bottom: 36px; }
.de-intro { max-width: 860px; margin: 0 auto; }
.de-intro ul { margin: 0 0 14.4px; padding-left: 1.2em; }
.de-intro li { margin-bottom: 10px; }
.de-group { scroll-margin-top: 110px; }
/* Erster Abschnitt dunkelblau statt hellblau (Wunsch der Nutzerin, 27.10.2026); die Karten bleiben weiß. */
.de-group.navy .rk h3 { color: var(--slate); }
.de-faq > .wrap > h2 { margin: 0 0 18px; font: 400 clamp(24px, 2.6vw, 30px)/1.3 var(--serif); color: var(--navy); }
.de-faq .faq-list + .faq-list { border-top: 0; }
@media (max-width: 760px) { .de-top h1 { font-size: 32px; line-height: 1.2; margin-bottom: 24px; } }

/* Übersicht der Schiffe wie auf der alten Seite (Wunsch der Nutzerin,
   28.10.2026): dunkelblau, mittig, betonte Wörter kursiv in Gold. */
.sh-navy { background: var(--navy); color: var(--white); padding: 60px 0 90px; }
.sh-head { text-align: center; }
.sh-head h1 { max-width: none; margin: 0 0 24px; font: 400 32px/1.3 var(--serif); color: var(--white); }
.sh-head h1 em, .sh-group h2 em, .sh-all h2 em { font-style: italic; color: var(--gold); }
.sh-intro { max-width: 880px; margin: 0 auto; font: 400 19px/1.6 var(--sans); color: var(--white); }
.sh-intro p { margin: 0 0 14px; color: var(--white); }
.sh-intro a { color: var(--gold); }
.sh-group { margin-top: 50px; }
.sh-group h2 { margin: 0 0 28px; text-align: center; font: 400 28px/1.3 var(--serif); color: var(--white); }
.sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.sh-tiles.few { grid-template-columns: repeat(3, minmax(0, calc((100% - 84px) / 4))); justify-content: center; }
.sh-tile { display: block; text-decoration: none; color: var(--white); }
.sh-tile .ph { position: relative; aspect-ratio: 300 / 169; background: var(--slate) center/cover no-repeat; transition: opacity .2s; }
.sh-tile span { display: block; margin-top: 12px; font: 400 20px/1.3 var(--sans); color: var(--white); }
.sh-tile:hover .ph { opacity: .85; }
.sh-tile:hover span { color: var(--gold); }
.sh-all { background: var(--white); }
@media (max-width: 980px) {
  .sh-tiles, .sh-tiles.few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sh-navy { padding: 40px 0 60px; }
  .sh-head h1 { font-size: 26px; }
  .sh-intro { font-size: 17px; }
  .sh-group h2 { font-size: 24px; }
  .sh-tiles, .sh-tiles.few { grid-template-columns: 1fr; }
}

/* Übersicht der Reiseziele wie auf der alten Seite (28.10.2026): gemessen bei
   1400 px - links die Halbinsel groß (276 px hoch), darunter Weddell- und
   Rossmeer (211 px); rechts Falkland und Südgeorgien, darunter der
   Südpolarkreis groß. Reihenfolge der Kacheln aus destListOrder. */
.rz-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 211px 49px 211px; grid-auto-rows: 211px; gap: 16px; }
.rz-tile { position: relative; display: block; overflow: hidden; text-decoration: none; color: var(--white); }
.rz-tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.rz-tile:nth-child(2) { grid-column: 1; grid-row: 3; }
.rz-tile:nth-child(3) { grid-column: 2; grid-row: 3; }
.rz-tile:nth-child(4) { grid-column: 3; grid-row: 1; }
.rz-tile:nth-child(5) { grid-column: 4; grid-row: 1; }
.rz-tile:nth-child(6) { grid-column: 3 / 5; grid-row: 2 / 4; }
.rz-tile .ph { position: absolute; inset: 0; background: var(--slate) center/cover no-repeat; transition: transform .4s; }
.rz-tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(9, 34, 48, .65)); pointer-events: none; }
.rz-tile span { position: absolute; left: 20px; bottom: 16px; z-index: 2; font: 400 20px/30px var(--sans); color: var(--white); }
.rz-tile:hover .ph { transform: scale(1.04); }
.rz-tile:hover span { color: var(--gold); }
.rz-tile .credit { z-index: 3; }
.rz-list .sh-head h1 em { font-style: italic; color: var(--gold); }
.rz-list .sh-group .wrap { max-width: 1340px; }
@media (max-width: 980px) {
  .rz-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 220px; }
  .rz-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .rz-tile:nth-child(1), .rz-tile:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .rz-mosaic { grid-template-columns: 1fr; }
  .rz-mosaic { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .rz-tile:nth-child(1), .rz-tile:nth-child(6) { grid-column: auto; }
}

/* Brotkrumen unter dem Menü auf Reisezielen, Schiffsübersichten und
   Schiffen, gestaltet wie auf den Reiseseiten (28.10.2026). */
.crumbs { margin: 0; background: var(--white); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 12px 0; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--grey); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); }
@media (max-width: 767px) {
  .crumbs ol { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding: 10px 0; scrollbar-width: none; }
}

/* Preisübersicht im Budget-Ratgeber (28.10.2026). */
.h-preise .wrap { max-width: 900px; }
.h-preise h2 { text-align: center; margin-bottom: 24px; }
.h-preise .table { margin-bottom: 18px; font-size: 16px; }
.h-preise .table td:nth-child(n+2), .h-preise .table th:nth-child(n+2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-preise .table a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.h-preise .table a:hover { color: var(--gold-dark); }
.h-preise .table .sum td { font-weight: 600; border-bottom: 0; }
.h-preise p { margin: 0 0 12px; }
.h-preise p a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.h-preise .meta { font-size: 14px; color: var(--muted); }
.h-landing:has(.h-more) .h-preise { padding: 40px 0 50px; }

/* Schiffsseite: Einordnung und Angaben auf einen Blick unter der
   Überschrift (Teil A, 28.10.2026); das dunkelblaue Feld neben dem Foto
   bleibt wie auf der alten Seite. */
.sh-summary .wrap { max-width: 900px; text-align: center; }
.sh-summary p { margin: 0 0 12px; font-size: 18px; line-height: 1.65; color: var(--navy); }
.sh-summary a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.sh-factbar { padding: 10px 0 44px; }
.sh-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 0; margin: 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sh-facts > div { padding: 0 26px; text-align: center; border-left: 1px solid var(--line); }
.sh-facts > div:first-child { border-left: 0; }
.sh-facts dt { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.sh-facts dd { margin: 3px 0 0; font-size: 16px; font-weight: 500; color: var(--navy); }
@media (max-width: 767px) {
  .sh-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .sh-facts > div { padding: 0; border-left: 0; text-align: left; }
  .sh-summary .wrap { text-align: left; }
}

/* Schiffsseite (Wunsch der Nutzerin, 28.10.2026): Fotoleiste 160 px hoch wie
   auf der alten Seite, Überschrift und Einordnung näher an die Pfadzeile. */
.strip.ship { height: 160px; }
.titlebar.ship { padding: 26px 0 14px; }
.sh-summary p:first-child { margin-top: 0; }

/* Reiseziel: Kurz und knapp und Termine auf einen Blick unter der
   Überschrift (Teil A, 28.10.2026). */
.rz:has(.rz-lead) { padding-top: 40px; }
.rz h1:has(+ .rz-lead), .rz h1:has(+ .rz-facts) { margin-bottom: 34px; }
.rz-lead { max-width: 900px; margin: 0 auto 26px; text-align: center; }
.rz-lead p { margin: 0 0 12px; font-size: 18px; line-height: 1.65; color: var(--navy); }
.rz-lead a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.rz-facts { max-width: 900px; margin: 0 auto 50px; }
.rz-facts a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
@media (max-width: 767px) { .rz-lead { text-align: left; } }

/* Reederei-Porträt und Links auf die Reederei (Teil A, 28.10.2026). */
.sh-facts a { color: var(--navy); text-decoration: underline 1px var(--gold); text-underline-offset: 4px; }
.sh-facts a:hover { color: var(--gold-dark); }
.line-ships .section-head h2 em, .line-trips .section-head h2 em { color: var(--gold); }
.line-ships + .line-trips { padding-top: 10px; }
/* Reederei-Porträt: mehr Luft zwischen Überschrift und Text, weniger
   zwischen Angabenleiste und „Die Schiffe von …“ (Wunsch der Nutzerin,
   28.10.2026). */
.titlebar.ship.line { padding-bottom: 30px; }
.line-ships { padding-top: 16px; }

/* ---------- Handy (Notion Nr. 18, 29.10.2026) ---------- */
/* Menü-Symbol wird beim Öffnen zum ×. */
.burger .i-close { display: none; }
.topbar.navopen .burger .i-open { display: none; }
.topbar.navopen .burger .i-close { display: block; }
/* „Reisen anzeigen“ im Filterfenster gibt es nur auf dem Handy. */
.h-suche .showres { display: none; }
@media (max-width: 767px) {
  /* Ab 16 px Schrift zoomt das iPhone beim Antippen eines Feldes nicht in
     die Seite. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; }
  /* Filterfenster: großes ×, Zeilen zum Antippen, keine eigenen
     Scrollbalken in den Listen, unten fest „N Reisen anzeigen“. */
  .h-suche .filters { padding-bottom: 0; }
  .h-suche .filters .close { top: 0; right: 0; width: 44px; height: 44px; padding: 12px; }
  .h-suche .opts { gap: 0; }
  .h-suche .opts.scroll { max-height: none; overflow: visible; }
  .h-suche .opts label { align-items: center; padding: 8px 0; font-size: 15px; }
  .h-suche .opts input { width: 18px; height: 18px; margin: 0; }
  .h-suche .range .nums input { height: 24px; line-height: 24px; }
  .h-suche .range input[type=range] { top: -8.5px; height: 24px; }
  .h-suche .range input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .h-suche .range input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
  .h-suche .showres { display: block; position: sticky; bottom: 0; width: calc(100% + 40px); margin: 0 -20px; padding: 16px 20px; border: 0; background: var(--gold); box-shadow: 0 -12px 16px var(--white); color: var(--white); font: 500 16px/24px var(--sans); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
  /* Schilder und kleine Knöpfe gut lesbar und antippbar. */
  .dates-note .dbadge, .dates .dbadge { font-size: 11px; }
  .details .foldtools { gap: 20px; }
  .details .foldtools button { padding: 8px 0; }
  .h-referenzen a.more { display: inline-block; padding: 8px 0; }
}
/* Termintabelle auf dem Handy wie auf der alten Seite (Wunsch der Nutzerin,
   29.10.2026): je Termin links Datum, Dauer und Preis untereinander, rechts
   Sprache und Aktivitäten, außen der Pfeil - der Preis ist ohne seitliches
   Wischen zu sehen. */
@media (max-width: 767px) {
  .dates, .dates thead, .dates tbody { display: block; }
  .dates tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "date lang go" "dur acts go" "price acts go"; column-gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .dates tr[hidden] { display: none; }
  .dates thead tr { grid-template-areas: "date lang go" "dur acts go" "price . go"; padding: 4px 0 10px; border-bottom-color: rgba(255, 255, 255, .18); }
  .dates th, .dates td { width: auto !important; padding: 0; border: 0; text-align: left; }
  .dates th { font-size: 14px; line-height: 24px; }
  .dates td { font-size: 16px; line-height: 26px; white-space: normal; }
  .dates > * > tr > :nth-child(1) { grid-area: date; }
  .dates > * > tr > :nth-child(2) { grid-area: dur; }
  .dates > * > tr > :nth-child(3) { grid-area: lang; }
  .dates > * > tr > :nth-child(4) { grid-area: acts; }
  .dates > * > tr > :nth-child(5) { grid-area: price; }
  .dates > * > tr > :nth-child(6) { grid-area: go; justify-self: end; }
  .dates td:nth-child(2) { font-size: 14px; color: #cfdbe2; }
  .dates td:nth-child(4) { align-self: start; padding-top: 4px; }
  .dates td:nth-child(5) { font-weight: 500; }
  .dates .dbadge { margin: 4px 0 2px; }
  .dates a.go { width: 44px; height: 44px; }
  .dates tr.current { background: rgba(185, 151, 87, .14); }
  .dates tr.current td { background: none; }
}
/* Reisekarten auf dem Handy kompakter (Mittelweg, Wunsch der Nutzerin,
   29.10.2026): Foto etwas niedriger, Nächte und Bordsprache in einer Zeile
   („19 Nächte · Flagge“) - eine Karte ist rund 380 statt 560 px hoch, die
   nächste Reise ist schon angeschnitten. Am Computer unverändert. */
@media (max-width: 767px) {
  .rk .ph { height: 200px; }
  .rk h3 { min-height: 0; }
  .rk .ship { margin-top: 8px; }
  .rk .facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 12px 0 0; padding: 0; border: 0; }
  .rk .facts > div { display: flex; align-items: baseline; gap: 5px; }
  .rk .facts dd { order: -1; margin: 0; min-height: 0; }
  .rk .facts dt { font-size: 14px; }
  .rk .facts > div + div::before { content: "·"; order: -2; color: #005283; }
  .rk .facts > div + div dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rk .facts .flags { align-self: center; }
  .rk .facts > div:has(.flags:empty) { display: none; }
  .rk .foot { align-items: center; padding-top: 14px; }
  .rk .price strong { margin-top: 2px; }
  .rk .go { max-width: 50%; }
}