/* ==========================================================================
   Fabian Reptsis — Private Travel Studio Zürich
   Statisches CSS, kein Build-Schritt. Schriften liegen in /assets/fonts/.
   Hinter jedem Bild liegt ein CSS-Fallback.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Files are downloaded by scripts/fetch-assets.sh. If they are missing the
   site falls back to Georgia and the system sans, which still renders fine. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #10221f;
  --forest: #0e2b27;
  --forest-2: #183d36;
  --cream: #f5f0e7;
  --paper: #fffdf8;
  --sand: #d8bea0;
  --gold: #c9a56c;
  --mist: #dfe9e5;
  --muted: #6d7773;
  --line: rgba(16, 34, 31, .14);
  --white-line: rgba(255, 255, 255, .22);
  --radius: 30px;
  --shell: 1180px;
  --shadow: 0 30px 80px rgba(12, 34, 29, .14);
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* Muss vor allen Komponenten stehen und !important tragen: sonst gewinnt eine
   Klasse mit display (z.B. .button) gegen das hidden-Attribut, und per JS
   ausgeblendete Schaltflaechen bleiben sichtbar. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { width: min(calc(100% - 40px), var(--shell)); margin: 0 auto; }
.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; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 999; background: white; padding: 10px 14px; border-radius: 999px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.15rem, 7.4vw, 7rem); }
h2 { font-size: clamp(1.85rem, 5vw, 4.4rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 2.4rem); }
p { margin: 0; }

.kicker { margin-bottom: 18px; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.kicker.dark { color: var(--forest-2); }
.mini-label { margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--forest-2); }

/* Placeholder marker: content only Fabian can supply. Visible on purpose so
   it cannot be published by accident. Remove the class with the text. */
.todo { background: #fff2c9; box-shadow: 0 0 0 4px #fff2c9; border-radius: 3px; color: #6b5410 !important; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 1220px);
  min-height: 64px;
  padding: 8px 10px 8px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(14, 43, 39, .58);
  color: white;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background: rgba(14, 43, 39, .94); border-color: transparent; box-shadow: 0 12px 40px rgba(0,0,0,.16); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-text); font-size: .68rem; font-weight: 700; letter-spacing: 0; opacity: .9; }
.main-nav { display: flex; align-items: center; gap: 22px; font-size: .88rem; font-weight: 600; }
.main-nav a { opacity: .86; }
.main-nav a:hover, .main-nav a:focus-visible { opacity: 1; }
.nav-cta { padding: 13px 18px; border-radius: 999px; color: var(--ink); background: white; opacity: 1 !important; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: white; }
.menu-toggle > span:not(.sr-only) { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--forest); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #174a43; color: white; }
.hero-media, .hero-shade { position: absolute; inset: 0; }
/* Bildfallback: liegt hinter jedem Foto. Fällt ein Bild aus oder ist es noch
   nicht abgelegt, bleibt eine bewusst gestaltete Fläche stehen, kein Loch.
   Die Körnung nimmt den
   Farbverläufen das Billige und ist ein inline SVG, also kein Request. */
.image-fallback {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255, 246, 224, .92), rgba(255, 246, 224, 0) 46%),
    radial-gradient(90% 70% at 12% 92%, rgba(9, 46, 47, .55), rgba(9, 46, 47, 0) 60%),
    linear-gradient(158deg, #0f4f52 0%, #2b8d84 32%, #7fbfae 52%, #d9c3a0 74%, #f2e8d8 100%);
}
.image-fallback::after {
  content: "";
  position: absolute;
  inset: -10%;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* warm: Landschaft, Grün, feuchte Luft */
.image-fallback.warm {
  background:
    radial-gradient(100% 80% at 74% 6%, rgba(255, 241, 214, .78), rgba(255, 241, 214, 0) 48%),
    radial-gradient(120% 100% at 8% 100%, rgba(20, 48, 30, .62), rgba(20, 48, 30, 0) 62%),
    linear-gradient(160deg, #1d4a34 0%, #3f6b43 30%, #7d8f56 55%, #c99a6e 82%, #e8cfae 100%);
}

/* aqua: Wasser, Kalk, Farbe */
.image-fallback.aqua {
  background:
    radial-gradient(100% 80% at 80% 10%, rgba(255, 250, 236, .8), rgba(255, 250, 236, 0) 44%),
    radial-gradient(110% 90% at 5% 96%, rgba(8, 52, 66, .58), rgba(8, 52, 66, 0) 58%),
    linear-gradient(155deg, #0d5570 0%, #1b8391 28%, #57bcb4 52%, #b9d9c8 76%, #efe4d2 100%);
}

/* sand: heller Sand, klares Türkis */
.image-fallback.sand {
  background:
    radial-gradient(100% 80% at 72% 8%, rgba(255, 252, 242, .9), rgba(255, 252, 242, 0) 46%),
    radial-gradient(110% 90% at 10% 98%, rgba(70, 54, 33, .42), rgba(70, 54, 33, 0) 60%),
    linear-gradient(152deg, #2a9aa4 0%, #74c5c0 26%, #cfd6bd 50%, #e6cfa9 74%, #f6ecdb 100%);
}
.hero-media img { position: absolute; inset: 0; }
.hero-shade { background: linear-gradient(90deg, rgba(7,23,20,.76) 0%, rgba(7,23,20,.28) 60%, rgba(7,23,20,.15)), linear-gradient(0deg, rgba(7,23,20,.5), transparent 52%); }
.hero-inner { position: relative; z-index: 2; padding: 150px 0 90px; }
.hero-inner h1 { max-width: 960px; }
.hero-copy { max-width: 660px; margin-top: 30px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: rgba(255,255,255,.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 34px; }
.hero-note { position: absolute; z-index: 2; right: 30px; bottom: 28px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }

/* --- Buttons and links ---------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-light { background: white; color: var(--forest); }
.button-dark { background: var(--forest); color: white; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.text-link::after { content: "\2192"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }
.text-link-light { color: white; }

/* --- Intro ---------------------------------------------------------------- */
.curve-top { position: relative; margin-top: -1px; border-radius: 48px 48px 0 0; }
.intro { position: relative; z-index: 3; padding: 120px 0; background: var(--cream); }
.split-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: end; }
.intro-copy { display: grid; gap: 24px; max-width: 580px; color: var(--muted); font-size: 1.06rem; }

.section-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; margin-bottom: 46px; }
.section-heading > p { max-width: 580px; color: var(--muted); font-size: 1.02rem; }

/* --- Process -------------------------------------------------------------- */
.process { padding: 0 0 120px; }
.process-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.process-list li { display: grid; gap: 12px; align-content: start; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.42); }
.process-num { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
.process-list p { color: var(--muted); }

/* --- Destinations --------------------------------------------------------- */
.destinations { padding: 0 0 120px; }
.destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.destination-card { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.destination-card-large { grid-column: 1 / -1; min-height: 610px; }
.destination-media, .destination-overlay { position: absolute; inset: 0; }
.destination-media img { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.destination-card:hover .destination-media img { transform: scale(1.035); }
.destination-overlay { background: linear-gradient(0deg, rgba(7,23,20,.82), rgba(7,23,20,.06) 72%); }
.destination-content { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 30px; color: white; }
.destination-content p { margin-bottom: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.destination-content span { display: block; max-width: 540px; margin-top: 10px; color: rgba(255,255,255,.82); font-size: .96rem; }
.text-card { grid-column: 1 / -1; min-height: 280px; background: var(--sand); box-shadow: none; }
.dark-card { background: var(--forest); }
.static-content { position: static; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px; color: var(--ink); }
.dark-card .static-content { color: white; }
.static-content span { color: currentColor; opacity: .78; }

/* --- Services and transparency -------------------------------------------- */
.services { padding: 120px 0; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 30px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--line); }
.service-row > span { font-weight: 700; color: var(--muted); }
.service-row p { max-width: 700px; margin-top: 10px; color: var(--muted); }
.service-row strong { display: grid; gap: 4px; justify-items: end; text-align: right; white-space: nowrap; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; }
.service-row strong small { font-family: var(--font-text); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.featured-row { margin: 16px 0; padding: 34px 24px; border: 0; border-radius: 26px; background: var(--mist); }
.featured-row + .service-row { border-top: 1px solid var(--line); }
.transparency { margin-top: 46px; padding: 38px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.transparency h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.transparency ul { display: grid; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.transparency li { padding-left: 22px; position: relative; color: var(--muted); max-width: 860px; }
.transparency li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.transparency strong { color: var(--ink); }

@media (min-width: 1001px) {
  .featured-row { margin-left: -24px; margin-right: -24px; }
}

/* --- About ---------------------------------------------------------------- */
.about { padding: 0 0 120px; }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.about-card, .quote-card { min-height: 520px; border-radius: var(--radius); }
.about-card { display: grid; grid-template-columns: 260px 1fr; gap: 0; overflow: hidden; background: var(--paper); }
.founder-media { position: relative; min-height: 320px; background: var(--sand); }
.founder-media img { position: absolute; inset: 0; z-index: 2; }
/* Solange kein Porträt abgelegt ist, steht hier ein Monogramm statt einer
   leeren Fläche. Das Foto überdeckt es, sobald es existiert. */
.founder-media::after {
  content: "FR";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6rem);
  letter-spacing: .04em;
  color: rgba(255, 253, 248, .62);
}

img.is-broken { display: none; }
.about-text { padding: 44px; }
.about-card .kicker { color: var(--forest-2); }
.about-text p:not(.kicker) { max-width: 640px; margin-top: 20px; color: var(--muted); font-size: 1.02rem; }
.about-meta { font-size: .92rem !important; }
.quote-card { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: linear-gradient(145deg, #d7b98c, #735f4d); color: white; }
.quote-card p { font-family: var(--font-display); font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1.06; letter-spacing: -.03em; }
.quote-card span { color: rgba(255,255,255,.75); }

/* --- Journal -------------------------------------------------------------- */
.journal { padding: 0 0 120px; }
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.journal-grid article { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.35); }
.journal-grid h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.journal-live { background: var(--paper) !important; box-shadow: var(--shadow); }
.journal-soon { opacity: .72; }
.journal-soon span { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* --- Lead form ------------------------------------------------------------ */
.plan { padding: 120px 0 130px; background: var(--forest); color: white; border-radius: 52px 52px 0 0; }
.plan-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.plan-copy { position: sticky; top: 120px; }
.plan-copy p:last-child { max-width: 520px; margin-top: 24px; color: rgba(255,255,255,.7); }
.lead-form { display: grid; gap: 18px; padding: 28px; border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.field { display: grid; gap: 14px; }
.two-col { grid-template-columns: 1fr 1fr; }
.lead-form label { display: grid; gap: 8px; font-size: .8rem; font-weight: 700; color: #45534f; }
.lead-form .optional { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); padding: 14px 15px; outline: none; }
.lead-form textarea { resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(24,61,54,.08); }
.lead-form .button { width: fit-content; background: var(--forest); color: white; }
.consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; font-size: .86rem !important; }
.consent input { width: 18px; height: 18px; margin-top: 2px; }
.consent a { text-decoration: underline; }
.form-note { font-size: .8rem; color: var(--muted); }
.honeypot { position: absolute; left: -9999px; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { padding: 48px 0; background: #081b18; color: white; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 50px; }
.footer-grid > div { display: grid; align-content: start; gap: 8px; }
.footer-grid p, .footer-grid a { color: rgba(255,255,255,.68); font-size: .9rem; }
.footer-brand { margin-bottom: 6px; color: white; }

/* --- Sticky mobile CTA ---------------------------------------------------- */
.sticky-cta {
  position: fixed;
  z-index: 90;
  left: 16px; right: 16px; bottom: 16px;
  display: none;
  align-items: center; justify-content: center;
  min-height: 54px;
  border-radius: 999px;
  background: var(--forest);
  color: white;
  font-weight: 700;
  box-shadow: 0 14px 40px rgba(8,27,24,.32);
  opacity: 0;
  transform: translateY(120%);
  transition: opacity .25s ease, transform .25s ease;
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); }

/* --- Article pages -------------------------------------------------------- */
.article { padding: 140px 0 40px; }
.article-shell { width: min(calc(100% - 40px), 760px); margin: 0 auto; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.article-lead { margin-top: 28px; font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.article-body { padding: 20px 0 100px; }
.article-body h2 { margin: 62px 0 18px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.article-body h3 { margin: 38px 0 12px; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.article-body p { margin-top: 16px; color: #3c4a46; font-size: 1.04rem; }
.article-body ul { margin: 16px 0 0; padding-left: 22px; color: #3c4a46; }
.article-body li { margin-top: 8px; }
.article-figure { margin: 40px 0 0; }
.article-figure .ratio { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
.article-figure .ratio img { position: absolute; inset: 0; }
.article-figure figcaption { margin-top: 10px; font-size: .82rem; color: var(--muted); }
.compare { width: 100%; margin-top: 26px; border-collapse: collapse; font-size: .95rem; }
.compare caption { text-align: left; padding-bottom: 12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.compare th, .compare td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-2); }
.compare tbody th { font-weight: 600; width: 30%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.verdict { margin-top: 46px; padding: 34px; border-radius: var(--radius); background: var(--forest); color: white; }
.verdict h3 { color: white; }
.verdict p { margin-top: 14px; color: rgba(255,255,255,.82); }
.verdict .button { margin-top: 24px; }
.article-cta { padding: 0 0 120px; }
.article-cta-inner { display: grid; gap: 18px; justify-items: start; padding: 44px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.breadcrumb { font-size: .82rem; color: var(--muted); }
.breadcrumb a { text-decoration: underline; }

/* --- Legal pages ---------------------------------------------------------- */
.legal { padding: 140px 0 120px; }
.legal-shell { width: min(calc(100% - 40px), 780px); margin: 0 auto; }
.legal h2 { margin: 48px 0 14px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.legal p, .legal li { margin-top: 12px; color: var(--muted); }
.legal ul { padding-left: 22px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .about-card { grid-template-columns: 1fr; }
  .founder-media { min-height: 340px; }
}

@media (max-width: 900px) {
  .site-header { top: 10px; }
  .menu-toggle { display: block; }
  .brand-word { font-size: .95rem; }
  .main-nav { position: absolute; top: 72px; left: 0; right: 0; display: none; padding: 18px; border-radius: 24px; background: var(--forest); box-shadow: var(--shadow); }
  .main-nav.is-open { display: grid; }
  .nav-cta { text-align: center; }
  .split-intro, .section-heading, .about-grid, .plan-grid { grid-template-columns: 1fr; gap: 36px; }
  .plan-copy { position: static; }
  .process-list { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 54px 1fr; }
  .service-row strong { grid-column: 2; justify-items: start; text-align: left; }
  .journal-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .sticky-cta { display: flex; }
  .plan { padding-bottom: 110px; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  .article-shell, .legal-shell { width: calc(100% - 28px); }
  .hero-inner { padding-bottom: 118px; }
  .hero-note { left: 14px; right: 14px; bottom: 30px; font-size: .64rem; }
  .intro, .services, .plan { padding-top: 86px; padding-bottom: 86px; }
  .curve-top, .plan { border-radius: 34px; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-card-large { grid-column: auto; min-height: 480px; }
  .destination-card { min-height: 360px; }
  .two-col { grid-template-columns: 1fr; }
  .service-row { grid-template-columns: 42px 1fr; gap: 16px; }
  .featured-row { padding-left: 18px; padding-right: 18px; }
  .about-card, .quote-card { min-height: auto; }
  .about-text, .quote-card, .transparency, .article-cta-inner { padding: 30px; }
  .process-list li { padding: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; }
  .plan { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Mehrseitige Struktur, Interaktion und Formular
   Ergänzt die Basis oben. Alles hier ist Progressive Enhancement:
   ohne JavaScript bleiben Inhalte sichtbar und das Formular absendbar.
   ========================================================================== */

/* --- Kopfzeile auf Unterseiten ------------------------------------------- */
.site-header.is-solid { background: rgba(14, 43, 39, .94); border-color: transparent; }
.main-nav a[aria-current="page"] { opacity: 1; }
.main-nav a[aria-current="page"]:not(.nav-cta) { box-shadow: inset 0 -1px 0 rgba(255,255,255,.6); }

/* --- Seitenkopf ohne Bild ------------------------------------------------ */
.page-hero { padding: 150px 0 56px; }
.page-hero h1 { font-size: clamp(2.05rem, 6.2vw, 5rem); max-width: 18ch; }
.page-lead { max-width: 58ch; margin-top: 24px; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.page-hero .button { margin-top: 30px; }

/* --- Scroll-Hinweis im Hero ---------------------------------------------- */
.scroll-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 26px;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 9px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 999px; background: rgba(255,255,255,.8);
  animation: scroll-hint 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scroll-hint {
  0%, 18% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  70% { transform: translateY(15px); opacity: 0; }
  100% { transform: translateY(15px); opacity: 0; }
}
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* --- Weiterführende Links ------------------------------------------------ */
.section-more { margin-top: 34px; }
.card-link { margin-top: 18px !important; }
.static-content .card-link a { color: white; }

/* --- Leistungen ---------------------------------------------------------- */
.offer { padding: 0 0 100px; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.offer-card { display: grid; gap: 14px; padding: 36px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.offer-card.is-featured { background: var(--forest); color: white; border-color: transparent; box-shadow: var(--shadow); }
.offer-card.is-featured .mini-label { color: var(--gold); }
.offer-card h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.offer-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--forest-2); }
.offer-card.is-featured .offer-price { color: white; }
.offer-price small { display: block; margin-top: 4px; font-family: var(--font-text); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.offer-card.is-featured .offer-price small { color: rgba(255,255,255,.66); }
.offer-lead { color: var(--muted); }
.offer-card.is-featured .offer-lead { color: rgba(255,255,255,.8); }
.ticks { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 26px; color: var(--muted); font-size: .96rem; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}
.offer-card.is-featured .ticks li { color: rgba(255,255,255,.86); }
.offer-not { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.offer-card.is-featured .offer-not { border-top-color: var(--white-line); color: rgba(255,255,255,.72); }
.offer-not strong { color: var(--ink); }
.offer-card.is-featured .offer-not strong { color: white; }

.transparency-section { padding: 0 0 100px; }
.transparency-lead { margin-top: 12px; color: var(--muted); max-width: 68ch; }

/* --- Grenzen ------------------------------------------------------------- */
.boundaries { padding: 0 0 110px; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.boundary { padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.4); }
.boundary h3 { font-size: 1.35rem; }
.boundary p { margin-top: 10px; color: var(--muted); font-size: .96rem; }

/* --- Über mich ----------------------------------------------------------- */
.portrait { padding: 130px 0 60px; }
.portrait-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 54px; align-items: center; }
.portrait-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.portrait-media img { position: absolute; inset: 0; z-index: 2; }
.portrait-media::after {
  content: "FR"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font-family: var(--font-display); font-size: clamp(4rem, 9vw, 7rem); color: rgba(255,253,248,.62);
}
.portrait-text h1 { font-size: clamp(2.3rem, 5.8vw, 5rem); }

.prose-section { padding: 0 0 90px; }
.prose { width: min(calc(100% - 40px), 720px); margin: 0 auto; }
.prose h2 { margin: 54px 0 14px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 14px; color: #3c4a46; font-size: 1.04rem; }

.credentials { padding: 0 0 110px; }
.credential-list { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.credential { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.credential dt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest-2); }
.credential dd { margin: 0; color: var(--muted); }

/* --- Akkordeon ----------------------------------------------------------- */
.faq-page { padding: 0 0 110px; }
.faq-shell { width: min(calc(100% - 40px), 820px); }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
  content: ""; flex: none; width: 13px; height: 13px; margin-top: .35em;
  border-right: 1.5px solid var(--forest-2); border-bottom: 1.5px solid var(--forest-2);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.accordion-item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.accordion-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.accordion-body { padding: 0 0 24px; max-width: 68ch; }
.accordion-body p { color: var(--muted); }

/* --- Anfrageformular ----------------------------------------------------- */
.enquiry { padding: 130px 0 110px; }
.enquiry-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; align-items: start; }
.enquiry-aside { position: sticky; top: 120px; }
.enquiry-aside h1 { font-size: clamp(1.95rem, 4.2vw, 3.4rem); }
.assurances { display: grid; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
.assurances li { position: relative; padding-left: 22px; color: var(--muted); font-size: .95rem; }
.assurances li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.assurances strong { color: var(--ink); }
.enquiry-direct { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

.stepper { display: none; }
.lead-form.is-stepped .stepper {
  display: flex; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none;
  font-size: .78rem; font-weight: 600; color: var(--muted);
}
.lead-form.is-stepped .stepper li { display: flex; align-items: center; gap: 7px; flex: 1; padding-bottom: 12px; border-bottom: 2px solid var(--line); transition: border-color .3s ease, color .3s ease; }
.lead-form.is-stepped .stepper li span {
  display: grid; place-items: center; width: 21px; height: 21px; flex: none;
  border-radius: 50%; border: 1px solid var(--line); font-size: .7rem;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.lead-form.is-stepped .stepper li.is-active { color: var(--ink); border-bottom-color: var(--forest); }
.lead-form.is-stepped .stepper li.is-active span { background: var(--forest); border-color: var(--forest); color: white; }
.lead-form.is-stepped .stepper li.is-done { color: var(--forest-2); border-bottom-color: var(--gold); }
.lead-form.is-stepped .stepper li.is-done span { background: var(--gold); border-color: var(--gold); color: white; }

.form-step { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; }
.form-step legend { padding: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.lead-form.is-stepped .form-step { display: none; }
.lead-form.is-stepped .form-step.is-active { display: grid; animation: step-in .3s ease; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.field-row { display: grid; gap: 8px; font-size: .8rem; font-weight: 700; color: #45534f; }
.hint { font-size: .8rem; font-weight: 500; color: var(--muted); }
.lead-form .is-invalid input, .lead-form .is-invalid textarea, .lead-form .is-invalid select,
.lead-form input.is-invalid, .lead-form textarea.is-invalid, .lead-form select.is-invalid {
  border-color: #a8452e; box-shadow: 0 0 0 3px rgba(168, 69, 46, .1);
}
.error-msg { font-size: .8rem; font-weight: 500; color: #a8452e; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.button-ghost:hover { border-color: var(--ink); }
.enquiry .lead-form { padding: 34px; box-shadow: var(--shadow); }

/* --- Journal-Übersicht --------------------------------------------------- */
.journal-page { padding: 0 0 110px; }
.journal-list { display: grid; gap: 18px; }
.journal-entry { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.journal-entry-media { position: relative; min-height: 260px; }
.journal-entry-media img { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.journal-entry:hover .journal-entry-media img { transform: scale(1.04); }
.journal-entry-body { display: grid; gap: 12px; align-content: center; padding: 38px; }
.journal-entry h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.journal-entry p { color: var(--muted); }
.journal-entry.is-upcoming { grid-template-columns: 1fr; background: rgba(255,255,255,.35); opacity: .78; }
.journal-note { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; margin-top: 34px; padding: 30px; border-radius: 24px; background: var(--mist); }
.journal-note p { color: var(--muted); max-width: 60ch; }
.journal-note strong { color: var(--ink); }

/* --- Homepage-Journalkarten ---------------------------------------------- */
.journal-grid article { gap: 22px; }

/* --- Abschluss-CTA ------------------------------------------------------- */
.closing { padding: 90px 0; margin: 0 18px 0; border-radius: 52px; background: var(--forest); color: white; }
.closing-inner { display: flex; flex-wrap: wrap; gap: 30px 50px; align-items: center; justify-content: space-between; }
.closing-inner > div { max-width: 60ch; display: grid; gap: 14px; }
.closing h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.closing p { color: rgba(255,255,255,.72); }

/* --- Danke-Seite --------------------------------------------------------- */
.confirm { padding: 140px 0 110px; background: var(--forest); color: white; }
.confirm-shell { width: min(calc(100% - 40px), 820px); margin: 0 auto; }
.confirm h1 { font-size: clamp(2.3rem, 7.4vw, 5.5rem); }
.confirm .page-lead { color: rgba(255,255,255,.8); }
.confirm-steps { grid-template-columns: 1fr; margin-top: 34px; gap: 14px; }
.confirm-steps li { background: rgba(255,255,255,.06); border-color: var(--white-line); }
.confirm-steps h2 { font-size: 1.4rem; }
.confirm-steps p { color: rgba(255,255,255,.72); }
.confirm-more { margin-top: 34px; color: rgba(255,255,255,.72); }
.confirm-more .text-link { color: white; }

/* --- 404 ----------------------------------------------------------------- */
.notfound-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* --- Fusszeile ----------------------------------------------------------- */
.footer-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.site-footer .footer-label { color: rgba(255,255,255,.46); }
.footer-mail { margin-top: 10px; }
.footer-mail a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Lesefortschritt im Artikel ------------------------------------------ */
.reading-progress { position: fixed; z-index: 120; left: 0; top: 0; height: 3px; width: 100%; background: transparent; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }

/* --- Nach oben ----------------------------------------------------------- */
.to-top {
  position: fixed; z-index: 90; right: 20px; bottom: 20px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top::before { content: ""; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translate(1px, 1px); }
@media (max-width: 900px) { .to-top { display: none; } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .offer-grid { grid-template-columns: 1fr; }
  .portrait-grid { grid-template-columns: 1fr; gap: 34px; }
  .portrait-media { max-width: 340px; }
  .enquiry-grid { grid-template-columns: 1fr; gap: 40px; }
  .enquiry-aside { position: static; }
  .journal-entry { grid-template-columns: 1fr; }
  .journal-entry-media { min-height: 220px; }
}

@media (max-width: 900px) {
  .boundary-grid { grid-template-columns: 1fr; }
  .credential { grid-template-columns: 1fr; gap: 6px; }
  .page-hero { padding-top: 120px; }
  .portrait { padding-top: 110px; }
  .enquiry { padding-top: 110px; }
}

@media (max-width: 640px) {
  .closing { margin: 0 8px; border-radius: 34px; padding: 70px 0; }
  .offer-card { padding: 28px 24px; }
  .enquiry .lead-form { padding: 24px; }
  .journal-entry-body { padding: 26px; }
  .journal-note { padding: 24px; }
  .prose { width: calc(100% - 28px); }
  .form-actions .button { flex: 1 1 auto; }
  .lead-form.is-stepped .stepper { font-size: 0; gap: 6px; }
  .lead-form.is-stepped .stepper li span { font-size: .7rem; }
}

/* --- Verlinkte Reisearten-Kacheln ---------------------------------------- */
a.destination-card { display: block; color: inherit; }
a.destination-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.card-more {
  display: inline-flex !important; align-items: center; gap: 7px;
  margin-top: 14px !important; font-weight: 700; font-size: .88rem; color: white !important;
}
.card-more::after { content: "\2192"; transition: transform .2s ease; }
a.destination-card:hover .card-more::after { transform: translateX(4px); }

/* --- Seitenkopf der Reisearten ------------------------------------------- */
.trip-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(62svh, 520px); padding: 150px 0 52px;
  overflow: hidden; background: #174a43; color: white;
}
.trip-hero-media, .trip-hero-shade { position: absolute; inset: 0; }
.trip-hero-media img { position: absolute; inset: 0; }
.trip-hero-shade { background: linear-gradient(90deg, rgba(7,23,20,.8) 0%, rgba(7,23,20,.35) 62%, rgba(7,23,20,.2)), linear-gradient(0deg, rgba(7,23,20,.5), transparent 55%); }
.trip-hero-inner { position: relative; z-index: 2; }
.trip-hero h1 { font-size: clamp(2rem, 5.8vw, 4.6rem); max-width: 18ch; }
.trip-lead { max-width: 58ch; margin-top: 22px; color: rgba(255,255,255,.84); font-size: clamp(1.02rem, 1.7vw, 1.2rem); }

/* --- Typische Fehler ------------------------------------------------------ */
.mistakes { padding: 100px 0 0; }
.mistake-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.mistake-list li { display: grid; gap: 8px; padding: 28px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); }
.mistake-list strong { position: relative; padding-left: 30px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.mistake-list strong::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 17px; height: 17px;
  border-radius: 50%; border: 1.5px solid #a8452e;
}
.mistake-list strong::after {
  content: ""; position: absolute; left: 8px; top: .52em; width: 1.5px; height: 9px;
  background: #a8452e; box-shadow: 0 11px 0 #a8452e; border-radius: 2px;
}
.mistake-list span { color: var(--muted); padding-left: 30px; }

/* --- Was ich übernehme ---------------------------------------------------- */
.deliverables { padding: 100px 0 0; }
.deliver-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.deliver { padding: 30px; border-radius: 24px; background: var(--mist); }
.deliver h3 { font-size: 1.3rem; }
.deliver p { margin-top: 10px; color: #47544f; }

/* --- Vorlauf -------------------------------------------------------------- */
.timing-section { padding: 100px 0 110px; }
.timing { display: grid; gap: 16px; justify-items: start; padding: 44px; border-radius: var(--radius); background: var(--sand); }
.timing h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.timing p { max-width: 68ch; color: #4a3f30; }
.timing .kicker.dark { color: #5b4a33; }

@media (max-width: 900px) {
  .mistake-list, .deliver-grid { grid-template-columns: 1fr; }
  .trip-hero { padding-top: 120px; }
  .mistakes, .deliverables, .timing-section { padding-top: 70px; }
  .timing { padding: 30px; }
}

/* --- Fusszeile mit vier Spalten ------------------------------------------ */
.footer-grid { grid-template-columns: 1.4fr auto auto auto; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- Hervorhebung im Artikel --------------------------------------------- */
.callout {
  margin: 34px 0 0; padding: 26px 30px;
  border-left: 3px solid var(--gold); border-radius: 0 20px 20px 0;
  background: var(--paper);
}
.callout-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px !important; }
.callout p:last-child { margin-top: 0 !important; color: var(--ink) !important; font-size: 1.06rem !important; }

/* --- Quellenangaben ------------------------------------------------------ */
.sources { list-style: none; padding-left: 0 !important; }
.sources li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--muted); }
.sources li::before { content: ""; position: absolute; left: 0; top: .68em; width: 9px; height: 1px; background: var(--muted); }

/* --- Verlinkte Journal-Titel --------------------------------------------- */
.journal-entry h2 a { box-shadow: inset 0 -1px 0 var(--line); }
.journal-entry h2 a:hover { box-shadow: inset 0 -1px 0 var(--forest-2); }

/* ==========================================================================
   Touch-Ziele
   Auf dem Handy wird mit dem Daumen getippt, nicht mit einem Mauszeiger.
   Apple und Google nennen beide rund 44 Pixel als Mindestgroesse. Textlinks
   und Fusszeilenlinks waren 17 bis 26 Pixel hoch, also unter der Haelfte.
   Die Flaeche waechst hier nur nach oben und unten, die Schrift bleibt gleich,
   deshalb aendert sich die Optik kaum, die Trefferquote aber deutlich.
   ========================================================================== */
@media (hover: none), (max-width: 900px) {
  .text-link,
  .footer-grid a,
  .footer-mail a,
  .brand {
    min-height: 44px;
    align-items: center;
  }
  .footer-grid a,
  .footer-mail a {
    display: inline-flex;
  }
  /* Die Zeilen sind jetzt selbst hoch genug, der zusaetzliche Abstand
     zwischen ihnen wuerde die Fusszeile unnoetig auseinanderziehen. */
  .footer-grid > div { gap: 0; }
  .footer-grid > div > .footer-label { margin-bottom: 4px; }
  .footer-brand { min-height: 0; }
}
@media (hover: none), (max-width: 900px) {
  .breadcrumb a,
  .legal-shell a[href^="mailto:"] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ==========================================================================
   Sprachumschaltung
   Deutsch und Englisch sind zwei echte Seitenbaeume, kein Umschalten per
   JavaScript. Der Schalter ist deshalb ein normaler Verweis und funktioniert
   auch, wenn das Skript nicht laedt. Die aktive Sprache steht als Text da
   und ist bewusst kein Link auf sich selbst.
   ========================================================================== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.lang-switch > span[aria-hidden="true"] { opacity: .38; }
.lang-switch a { opacity: .6; }
.lang-switch a:hover,
.lang-switch a:focus-visible { opacity: 1; }
.lang-current { opacity: 1; }

/* Im Kopf steht der Schalter zwischen Navigation und Anfrage-Button und
   bekommt eine feine Trennlinie, damit er nicht als weiterer Menuepunkt
   gelesen wird. */
.site-header .lang-switch {
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.22);
}
.site-header .lang-switch .lang-current { color: inherit; }

.site-footer .lang-switch { margin-top: 16px; color: white; }
.site-footer .lang-switch a { color: rgba(255,255,255,.7); }
.site-footer .lang-switch a:hover { color: white; }

@media (max-width: 1000px) {
  /* Im aufgeklappten Menue steht der Schalter in einer eigenen Zeile,
     mittig, mit Trennlinie darueber statt daneben. */
  .site-header .lang-switch {
    justify-content: center;
    padding: 12px 0 4px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.16);
  }
}

@media (hover: none), (max-width: 900px) {
  .lang-switch a,
  .lang-switch .lang-current {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }
}

/* ==========================================================================
   Neufassung September 2026
   Ergaenzt die Klassen, die mit den neuen Inhalten dazugekommen sind.
   ========================================================================== */

/* --- Grenzen: vier Karten statt drei Angebotsstufen ---------------------- */
.limits { padding: 0 0 110px; }
.limit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.limit {
  display: grid; gap: 12px; align-content: start;
  padding: 32px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper);
}
.limit h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.limit p { color: var(--muted); }
@media (max-width: 900px) { .limit-grid { grid-template-columns: 1fr; } }

/* --- Fliesstext-Seite "Ueber mich" --------------------------------------- */
.story { padding: 0 0 110px; }
.story-shell { width: min(calc(100% - 40px), 780px); margin: 0 auto; }
.story h2 { margin: 52px 0 14px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.story p { margin-top: 14px; color: var(--muted); font-size: 1.04rem; }
.story strong { color: var(--ink); }

/* --- Honorar-Streifen ----------------------------------------------------- */
.fee-strip { padding: 0 0 120px; }
.fee-strip .intro-copy { max-width: 640px; }

/* Breiter Fliesstext dort, wo keine zweite Spalte danebensteht. */
.wide-copy { max-width: 760px; }

/* --- Ausblick im Journal -------------------------------------------------- */
.journal-note > div { display: grid; gap: 10px; }

/* --- Anfrageseite --------------------------------------------------------- */
.enquiry-aside h2 { margin: 34px 0 12px; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.enquiry-aside p { margin-top: 12px; color: var(--muted); }
.enquiry-aside .page-lead { color: var(--ink); }
.enquiry-aside strong { color: var(--ink); }
.lead-form .form-note:last-child { margin-top: -4px; text-align: center; }

/* Die Beschriftungen im Formular sind Grid-Container, damit Text und Feld
   untereinander stehen. Bei der Einwilligung steht der Text aber in einer
   Zeile mit einem Link darin: dort wuerde jedes Wortteil zu einer eigenen
   Zeile. Deshalb hier wieder normaler Textfluss. */
.consent label { display: block !important; }
.consent { align-items: start; }

/* Sieben Zeilen mit Ueberschriften in voller Groesse lesen sich wie sieben
   Kapitel. Innerhalb der Leistungsliste eine Stufe kleiner. */
.service-row h3 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); }

/* ==========================================================================
   Vertikaler Rhythmus um Überschriften

   Befund aus der Messung über alle Seiten: Die Zeilenhöhe von 1.04 ist für
   deutsche Überschriften zu eng. Wörter wie "gehen" oder "Vorfreude" haben
   Unterlängen, Umlaute haben Punkte darüber, und beides ragt aus der Zeile
   heraus. Dazu kam der Abstand zum folgenden Absatz aus dem Gitterabstand
   des Containers, der für kleinere Schriftgrade gedacht war: bei 51 Pixel
   Schrift blieben 14 Pixel, an vier Stellen sogar null.

   Beides ist hier zusammen gelöst. Der Abstand wird in em angegeben, wächst
   also mit der Schriftgrösse mit, statt für einen Grad zu passen und für
   alle anderen nicht.
   ========================================================================== */
h1 { line-height: 1.06; }
h2, h3 { line-height: 1.12; }

:is(h1, h2, h3):not(:last-child) { margin-bottom: .5em; }
/* Die grossen Titel brauchen anteilig weniger, sonst reisst es die Seite
   auseinander: ein halbes Em sind bei 107 Pixel Schrift über 50 Pixel. */
h1:not(:last-child) { margin-bottom: .34em; }

/* Wichtig zu wissen, falls hier jemand weiterarbeitet: Zwischen zwei
   Blockelementen gewinnt der groessere der beiden Abstaende, sie addieren
   sich nicht. Ein margin-top von 14px am Absatz macht ein margin-bottom von
   10px an der Ueberschrift wirkungslos. Deshalb stehen hier halbe Ems und
   keine kleineren Werte. */

/* In der Transparenz-Karte standen h2-Überschriften im Grad der grossen
   Abschnittstitel. In einer Karte ist das zu laut und war der Grund für die
   Null-Abstände. */
.transparency h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }

/* Sprungziele nicht unter die fixierte Kopfzeile legen. Ohne das landet
   jeder Ankerklick hinter der Navigation. */
:target, [id] { scroll-margin-top: 108px; }

/* --- Bildreihe "Wo ich war" ---------------------------------------------
   Drei eigene Aufnahmen als Beleg fuer die Reiseerfahrung. Gleiches
   Seitenverhaeltnis, damit die Reihe ruhig bleibt. */
.place-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 40px auto 10px;
}
.place-row figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background: var(--mist);
}
.place-row .image-fallback,
.place-row img { position: absolute; inset: 0; }
.place-row img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.place-row figure:hover img { transform: scale(1.03); }
.place-note {
  width: min(calc(100% - 40px), var(--shell));
  margin: 0 auto 60px;
  font-size: .8rem;
  color: var(--muted);
}
@media (max-width: 700px) {
  .place-row { grid-template-columns: 1fr; gap: 12px; }
  .place-row figure { aspect-ratio: 3 / 2; }
}

/* Bildunterschriften der Ortsreihe: liegen im Bild, damit die Reihe eine
   ruhige Kante behaelt, statt unten auszufransen. */
.place-row figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 40px 18px 14px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(0deg, rgba(8,27,24,.72), rgba(8,27,24,0));
}