/* Gewählte Magazinrichtung. Nach style.css laden; keine Theme-Laufzeit nötig. */
:root {
  --paper: #f5f0e6;
  --surface: #e8e1d2;
  --ink: #252d24;
  --muted: #5e6558;
  --coral: #b53723;
  --bright: #c64127;
  --line: #c7cabb;
  --display: Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', Arial, Helvetica, sans-serif;
}

.site-header {
  border-bottom: 1px solid var(--line);
  padding-block: 24px;
}

.hero {
  grid-template-columns: 1.02fr .98fr;
  min-height: 760px;
  padding: 0 3vw 30px;
  gap: 3vw;
  border: 0;
}

.hero-copy {
  padding: 66px 0 50px 3vw;
  justify-content: center;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 7.5vw, 118px);
  letter-spacing: -.04em;
  line-height: .97;
}

.group-hero h1 { font-size: clamp(58px, 6.5vw, 100px); }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 4.8vw, 76px);
  line-height: 1;
  letter-spacing: -.04em;
}

.hero-copy .intro { font-size: 17px; max-width: 380px; margin-top: 30px; }
.hero-image { min-height: 680px; height: calc(100% - 30px); margin-top: 30px; border-radius: 0; }
.hero-image img { filter: contrast(1.04); }
/* Die individuellen photo-* Ausschnitte aus style.css bleiben maßgeblich. */
.hero-image:after { inset: 0; background: linear-gradient(transparent 65%, rgba(0, 0, 0, .2)); }
.hero-image figcaption strong { font-family: var(--display); font-size: 32px; font-weight: 400; }
.section { padding-block: 115px; }
.section-heading { grid-template-columns: 1.25fr .75fr; padding-top: 30px; border-top: 1px solid var(--line); }
.travel-ways { grid-template-columns: 1fr 1fr; gap: 4vw; }
.private-way { margin-top: 150px; }
.way-image { height: 470px; border-radius: 0; }
.private-way .way-image { height: 370px; }
.way-copy h3 { font-family: var(--display); font-weight: 400; font-size: 47px; line-height: 1.05; }
.noah-layout { grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.noah-photo { height: 640px; max-width: 470px; border-radius: 0; overflow: hidden; }
.experience-rows h3 { font-family: var(--display); font-size: 30px; font-weight: 400; }
.button { border-radius: 0; }
.closing h2 { font-size: clamp(56px, 6.5vw, 104px); }
.chapter-main h3 { font-family: var(--display); font-size: 50px; font-weight: 400; }
.card h3 { font-family: var(--display); font-size: 43px; font-weight: 400; }
.chapter-photo, .arrival-box { border-radius: 0; overflow: hidden; }
.card { gap: 4vw; }
.card.is-selected { margin-inline: 0; padding-inline: 24px; }
.site-footer { border-top: 1px solid var(--line); }

/* Preis und seine Grenzen bilden im Reiseüberblick eine zusammenhängende Einheit. */
.trip-facts > div { min-width: 0; }
.trip-facts .price-note { font-size: 13px; line-height: 1.65; max-width: 38ch; margin-top: 12px; }
.trip-facts .price-note strong { font: 600 13px/1.65 var(--sans); letter-spacing: 0; }
.trip-facts .price-status { font-size: 11px; line-height: 1.65; margin-top: 12px; }
.trip-facts .price-status strong { font: 600 11px/1.65 var(--sans); letter-spacing: 0; }
.way-copy > p.teaser-price { color: var(--ink); font-size: 17px; margin-top: 22px; }
.teaser-price small { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 7px; }

/* Vier Übernachtungsstationen, auf dem Handy in zwei Zeilen. */
.route-line { gap: 22px; }
.route-line > span { min-width: 0; }
.route-line small { line-height: 1.6; }

/* Die Tagesroute gruppiert Datum und Erlebnis ohne weitere Interaktionsschritte. */
.day-list { list-style: none; padding: 0; margin: 28px 0 0; }
.day-list > li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.day-list time { font: 600 12px/1.7 var(--sans); color: var(--coral); padding-top: 2px; }
.day-list h4 { font: 600 15px/1.5 var(--sans); margin: 0 0 7px; }
.day-list p { font-size: 14px; line-height: 1.75; }
.chapter-text-only .chapter-main { grid-column: 2 / -1; max-width: 900px; }
.chapter-text-only .day-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 38px; }
.highlight-grid > article { border-top: 1px solid var(--line); padding-top: 22px; }
.highlight-grid h3 { font: 400 32px/1.1 var(--display); margin-bottom: 16px; }
.highlight-grid p { font-size: 15px; }

.host-section { border-top: 1px solid var(--line); }
.host-section .large-copy { max-width: 40ch; }
.host-section .small { max-width: 78ch; }
.host-note { font-size: 13px; line-height: 1.75; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
.inquiry-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.inquiry-actions .text-link { margin-top: 0; }
.closing .inquiry-actions { justify-content: center; }

@media (max-width: 900px) {
  .hero { padding: 0 5vw 35px; gap: 0; grid-template-columns: 1fr; }
  .hero-copy { padding: 46px 0 20px; }
  .hero h1, .group-hero h1 { font-size: clamp(47px, 9vw, 80px); }
  .hero-image { height: 440px; min-height: 440px; margin-top: 20px; }
  .section { padding-block: 75px; }
  .travel-ways { grid-template-columns: 1fr; gap: 50px; }
  .private-way { margin-top: 0; }
  .way-image, .private-way .way-image { height: 370px; }
  .noah-layout { grid-template-columns: 1fr; gap: 40px; }
  .noah-photo { height: 500px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  h2 { font-size: clamp(38px, 7.5vw, 64px); }
}

@media (max-width: 800px) {
  .route-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 20px; }
  .route-line > span { max-width: none; font-size: 15px; }
  .route-line small { font-size: 11px; }
  .route-line > i { display: none; }
  .trip-facts .price-note { max-width: 56ch; }
  .chapter-text-only .day-list { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; gap: 28px; }
  .inquiry-actions { align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero h1, .group-hero h1 { font-size: clamp(43px, 11.3vw, 56px); }
  .hero-image { height: 350px; min-height: 350px; }
  .hero-copy .intro { font-size: 15px; }
  .way-copy h3 { font-size: 36px; }
  .noah-photo { height: 420px; }
  .closing h2 { font-size: 48px; }
  .card h3 { font-size: 34px; }
  .chapter-main h3 { font-size: 38px; }
  .trip-facts .price-note { font-size: 12px; }
  .day-list > li { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .inquiry-actions .button { max-width: 100%; }
}

/* Nach der ersten Desktopprüfung: CTA und Eckdaten im Reise-Einstieg erreichbar halten. */
.group-hero h1{font-size:clamp(56px,5.4vw,82px)}
.group-hero .hero-copy{padding-block:46px 36px}
.hero-facts{margin-top:24px;border-top:1px solid var(--line);padding-top:16px;max-width:440px}
.hero-facts p{font-size:12px;line-height:1.6;margin:0}
.hero-facts p+p{margin-top:7px}
.hero-facts strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
.hero-facts span{font-size:11px;margin-left:6px;color:var(--muted)}
.hero-facts small{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:6px}
.group-hero .hero-copy .intro{max-width:430px;margin-top:24px}
.group-hero .hero-copy .button{margin-top:22px}
.hero-route-link{font-size:12px;margin-top:20px;min-height:38px}
.offer-status{font-size:12px;line-height:1.7;padding-block:18px;border-bottom:1px solid var(--line);color:var(--muted)}
.legal-page{max-width:1000px;margin:auto;font-size:15px}
.legal-page h1{font:400 clamp(46px,6vw,78px)/1.1 var(--display);letter-spacing:-.04em;margin-bottom:18px}
.legal-page h2{font:400 30px/1.2 var(--display);letter-spacing:-.025em;margin:40px 0 16px}
.legal-page p{margin-top:16px;line-height:1.8}
.legal-page address{font-style:normal;line-height:1.8}
.legal-page a{overflow-wrap:anywhere}
.legal-date{font-size:12px;color:var(--muted)}
.legal-back{margin-top:45px!important}
@media(max-width:900px){.group-hero h1{font-size:clamp(46px,7.7vw,72px)}.group-hero .hero-copy{padding-block:36px 20px}.group-hero{min-height:0}}
@media(max-width:480px){.group-hero h1{font-size:clamp(41px,10.8vw,50px)}.hero-facts{margin-top:20px}.hero-facts strong{font-size:17px}.hero-facts span{display:block;margin-left:0}.hero-facts small{font-size:10px}.group-hero .hero-copy .intro{font-size:14px}.offer-status{font-size:11px}}

/* Lesbare weiße Fotobeschriftung, auch auf hellen Motiven. */
.hero-image:after{background:linear-gradient(transparent 55%,rgba(0,0,0,.66)78%,rgba(0,0,0,.72))}

/* Beispieltouren auf der Privatseite, 28.10.2026. Stationen sind echte Abfolgen, daher die Verbindungslinie. */
.example-tours{background:var(--surface)}
.tour-group{display:grid;grid-template-columns:.75fr 2fr;gap:4vw;padding-block:45px;border-top:1px solid var(--line)}
.tour-group-head .eyebrow{font-size:10px;margin-bottom:16px}
.tour-group-head h3{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.05}
.tour-group-head>p:last-child{font-size:14px;margin-top:18px;max-width:300px}
.tour-list{display:grid;grid-template-columns:1fr 1fr;gap:4vw}
.example-tour{display:flex;flex-direction:column;align-items:flex-start}
.tour-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tour-meta span{border:1px solid var(--line);padding:4px 10px;font-size:11px;color:var(--ink)}
.example-tour h4{margin:0;font:400 28px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.tour-teaser{font-size:15px;margin-top:14px}
.tour-stops{list-style:none;counter-reset:stop;padding:0;margin:24px 0 26px}
.tour-stops li{counter-increment:stop;position:relative;padding:0 0 18px 40px;font-size:14px;line-height:1.6;color:var(--muted)}
.tour-stops li:last-child{padding-bottom:0}
.tour-stops li:before{content:counter(stop);position:absolute;left:0;top:-1px;width:26px;height:26px;border:1px solid var(--coral);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--coral);background:var(--surface)}
.tour-stops li:not(:last-child):after{content:'';position:absolute;left:13px;top:27px;bottom:1px;width:1px;background:var(--line)}
.example-tour .text-link{margin-top:auto}
.example-tours .planner-contact{margin-top:0}
@media(max-width:1150px){.tour-group{grid-template-columns:1fr;gap:30px}.tour-group-head>p:last-child{max-width:560px}}
@media(max-width:800px){.tour-list{grid-template-columns:1fr;gap:45px}.tour-group{padding-block:38px}.tour-group-head h3{font-size:34px}.example-tour h4{font-size:26px}}
@media(max-width:480px){.tour-group-head h3{font-size:30px}.example-tour h4{font-size:24px}.tour-teaser{font-size:14px}.tour-stops li{font-size:13px;padding-left:36px}}
/* Fotos der Beispieltouren: einheitliches Querformat, Nachweis direkt darunter. */
.tour-photo{width:100%;margin:0 0 22px}
.tour-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--line)}
.tour-photo img.photo-omoide{object-position:50% 28%}
.tour-photo img.photo-kiyosumi{object-position:50% 62%}
.tour-photo figcaption{margin-top:8px;font-size:10px;line-height:1.5;color:var(--muted)}
.tour-photo figcaption a{color:inherit}
.tour-photo figcaption a:hover{color:var(--coral)}
/* Routenfotos der Gruppenreise, 28.10.2026: Querformate im hohen Kapitelrahmen gezielt ausrichten. */
.chapter-photo img.photo-route-tokio{object-position:50% 50%}
.chapter-photo img.photo-route-hakone{object-position:60% 50%}
.chapter-photo img.photo-route-kyoto{object-position:38% 50%}
.chapter-photo img.photo-route-nara{object-position:42% 50%}
@media(min-width:801px){.route-chapter>.chapter-photo{align-self:start;height:auto;min-height:0;aspect-ratio:4/5;position:sticky;top:40px}}

/* Anfrageformular, 29.10.2026. Das Ziel steht im action Attribut: mailto öffnet das Mailprogramm, eine https Adresse sendet an den Formulardienst (app.js). */
.inquiry-form{max-width:640px;margin:44px auto 0;text-align:left}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field-wide{grid-column:1/-1}
.field label{display:block;font-size:13px;font-weight:600;line-height:1.4;margin-bottom:9px;color:var(--ink)}
.field label span{font-weight:400;color:var(--muted);margin-left:4px}
.field input,.field select,.field textarea{display:block;width:100%;max-width:100%;min-height:54px;border:1px solid #8f9b8e;border-radius:0;background:var(--paper);color:var(--ink);padding:13px 15px;font:16px/1.5 var(--sans)}
.field input,.field textarea{-webkit-appearance:none;appearance:none}
.field select{padding-right:34px;cursor:pointer}
.field textarea{min-height:124px;resize:vertical}
.field ::placeholder{color:#626d64;opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid #086bc4;outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral)}
.field-error{margin-top:8px;font-size:12px;font-weight:600;color:var(--coral)}
.field select.is-prefilled{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral);transition:border-color 1.2s,box-shadow 1.2s}
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{display:flex;align-items:center;gap:24px;margin-top:30px}
.closing .form-submit .button{margin:0;flex-shrink:0}
.form-hint{margin:0;max-width:300px;font-size:12px;color:var(--muted)}
.form-status{margin-top:22px;padding:16px 18px;background:var(--paper);border-left:3px solid var(--ink);font-size:14px;line-height:1.6}
.form-status.is-error{border-left-color:var(--coral)}
.form-status button{margin-top:10px;padding:0;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form-status button:hover{color:var(--coral)}
.form-done{max-width:640px;margin:44px auto 0;padding:30px;background:var(--paper);border-left:3px solid var(--coral);text-align:left}
.form-done h3{font:400 30px/1.15 var(--display);letter-spacing:-.02em}
.form-done h3:focus{outline:none}
.form-done p{margin-top:12px;font-size:15px}
@media(max-width:600px){.inquiry-form,.form-done{margin-top:34px}.form-grid{grid-template-columns:1fr;gap:20px}.form-submit{flex-direction:column;align-items:stretch;gap:14px}.closing .form-submit .button{width:100%}.form-hint{max-width:none}.form-done{padding:24px}.form-done h3{font-size:26px}}