/* herzreise.ch – statische Version.
   Aufbau wie beim Wix-Original:
   - Ab 751px skaliert der gesamte Inhalt proportional mit der Fensterbreite (--u = 1px bei 1280px Breite).
   - Bis 1000px ersetzt das Hamburger-Menü die Navigation.
   - Bis 750px gilt das Handy-Layout, das proportional zu 390px Breite skaliert.
   Der Header (Logo, Menü) behält feste Schriftgrössen. Masse stehen als u(Zahl) und werden unten in calc() umgewandelt. */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face { font-family: "Arimo"; font-weight: 400; font-display: swap; src: url("../fonts/arimo-400.woff2") format("woff2"); }
@font-face { font-family: "Wix Madefor Text"; font-weight: 400; font-display: swap; src: url("../fonts/madefor-text-400.woff2") format("woff2"); }
@font-face { font-family: "Wix Madefor Text"; font-weight: 500; font-display: swap; src: url("../fonts/madefor-text-500.woff2") format("woff2"); }
@font-face { font-family: "Wix Madefor Display"; font-weight: 700; font-display: swap; src: url("../fonts/madefor-display-700.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600; font-display: swap; src: url("../fonts/worksans-600.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-400.woff2") format("woff2"); }

/* ---------- Grundlagen ---------- */
:root {
  --lila: #e1bded;
  --grau: #6e6e6e;
  --creme: #fafcf4;
  --blau: #1a6aff;
  --schwarz: #000;
  --u: calc(100vw / 1280);
  --helv: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --madefor: "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --madefor-display: "Wix Madefor Display", "Wix Madefor Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--schwarz); font-family: var(--madefor); font-size: 16px; line-height: 1.6; overflow-x: clip; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; padding: 0; font-weight: 400; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p:empty::before { content: "\00a0"; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }

/* ---------- Header (feste Grössen, Abstände proportional zur Fensterbreite) ---------- */
.site-header { height: 90px; background: #fff; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 3.05vw 0 7.25vw; position: relative; z-index: 10; }
.brand { display: block; padding-top: 14px; text-decoration: none; }
.brand-name { display: block; font-family: "Work Sans", var(--madefor); font-weight: 600; font-size: 36px; line-height: 42px; color: var(--lila); }
.brand-tag { display: block; font-family: var(--madefor); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--grau); margin-top: 2px; white-space: nowrap; }

.nav { margin-top: 22px; }
.nav ul { display: flex; gap: 7px; }
.nav a { display: block; padding: 10px; font-size: 20px; line-height: 25px; text-decoration: none; color: var(--schwarz); }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; }

.menu-btn { display: none; position: absolute; top: 15px; right: 3.5vw; width: 60px; height: 60px; background: none; border: 0; padding: 0; cursor: pointer; }
.menu-btn span { position: absolute; left: 13px; width: 34px; height: 2px; background: var(--schwarz); }
.menu-btn span:nth-child(1) { top: 19px; }
.menu-btn span:nth-child(2) { top: 29px; }
.menu-btn span:nth-child(3) { top: 39px; }

/* Menü-Overlay (Hamburger) */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6); display: none; }
.overlay.open { display: block; }
.overlay-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 40vw; background: #fff; padding-top: 100px; }
.overlay-close { position: absolute; top: 35px; right: 46px; width: 20px; height: 20px; background: none; border: 0; padding: 0; cursor: pointer; }
.overlay-close::before, .overlay-close::after { content: ""; position: absolute; left: -4px; top: 9px; width: 28px; height: 1px; background: var(--schwarz); transform: rotate(45deg); }
.overlay-close::after { transform: rotate(-45deg); }
.overlay-panel ul { text-align: center; }
.overlay-panel a { display: block; padding: 10px 0; font-size: 18px; line-height: 28.8px; text-decoration: none; }
.overlay-panel a[aria-current="page"] { color: var(--blau); }

/* ---------- Footer ---------- */
.site-footer { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 18px; position: relative; }
.site-footer a { position: absolute; left: calc(50% + 88px); white-space: nowrap; }

/* ---------- Unterseiten: Angebot ---------- */
.angebot { width: calc(1100 * var(--u)); margin: 0 auto; min-height: calc(603 * var(--u)); padding-top: calc(62 * var(--u)); display: grid; grid-template-columns: calc(604 * var(--u)) calc(404 * var(--u)); column-gap: calc(92 * var(--u)); align-items: start; }
.angebot .foto { display: block; width: 100%; aspect-ratio: 604 / 479; object-fit: cover; border-radius: calc(12 * var(--u)); }
.angebot .foto[src$="stiefel.jpg"] { aspect-ratio: 1200 / 748; } /* Querformat, sonst werden die äusseren Stiefel abgeschnitten */
.angebot h1 { font-family: var(--helv); font-size: calc(42 * var(--u)); line-height: calc(54.6 * var(--u)); margin-top: calc(1 * var(--u)); }
.angebot h1.lila { color: var(--lila); white-space: nowrap; }
.angebot .untertitel { font-family: var(--helv); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); margin-top: calc(13 * var(--u)); }
.akkordeon { margin-top: calc(59 * var(--u)); }
.untertitel + .akkordeon { margin-top: calc(57 * var(--u)); }
.akkordeon details { border-bottom: 1px solid var(--schwarz); }
.akkordeon summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; height: 54px; font-family: var(--madefor-display); font-weight: 700; font-size: 16px; line-height: 22.4px; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: ""; width: 12px; height: 12px; flex: none; margin-right: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 3.5 6 8l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.akkordeon details[open] summary::after { transform: rotate(180deg); }
.akkordeon .inhalt { padding-bottom: calc(28 * var(--u)); font-size: calc(16.19 * var(--u)); line-height: calc(25.9 * var(--u)); }
.akkordeon .inhalt a, .text-seite a { text-decoration: none; }
/* Zwilling und Traumaarbeit nutzen im Original eine Serifenschrift und kleineren Text */
.angebot--serif .akkordeon summary { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 18px; line-height: 25.2px; height: 57px; }
.angebot--serif .akkordeon .inhalt { font-size: 15px; line-height: 24px; }
.termine .termin { padding: calc(14 * var(--u)) 0; border-top: 1px solid #ddd; }
.termine .termin:first-child { border-top: 0; padding-top: 0; }
.termine .termin p { margin: 0; }
.termine .termin-datum { color: var(--grau); }
.termine .termin-titel { font-weight: 500; }
.termine .termin-text { margin-top: calc(6 * var(--u)); }
.termine .termin-link { display: inline-block; margin-top: calc(6 * var(--u)); text-decoration: underline; }

/* ---------- Unterseite: Kontakt ---------- */
.kontakt { width: calc(1100 * var(--u)); margin: 0 auto; min-height: calc(1263 * var(--u)); padding-top: calc(78 * var(--u)); display: grid; grid-template-columns: calc(594 * var(--u)) calc(506 * var(--u)); grid-template-rows: calc(627 * var(--u)) auto; align-items: start; }
.kontakt h1 { font-family: var(--helv); font-size: calc(80.95 * var(--u)); line-height: calc(105.2 * var(--u)); margin-top: calc(3 * var(--u)); }
.kontakt .text { margin-top: calc(14 * var(--u)); max-width: calc(414 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); }
.kontakt .mail { padding-top: calc(114 * var(--u)); }
.kontakt .mail p { font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.btn { display: block; width: calc(459 * var(--u)); max-width: 100%; height: calc(41 * var(--u)); line-height: calc(41 * var(--u)); text-align: center; background: var(--blau); color: #fff; text-decoration: none; font-size: calc(16 * var(--u)); }
.btn:hover { background: #094bcc; }
.karte-box { grid-column: 1 / -1; margin-left: calc(9 * var(--u)); width: calc(1083 * var(--u)); height: calc(489 * var(--u)); background: #eef1ec; position: relative; overflow: hidden; }
.karte-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-platzhalter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(14 * var(--u)); text-align: center; padding: calc(20 * var(--u)); }
.karte-platzhalter p { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--grau); max-width: calc(420 * var(--u)); }
.karte-platzhalter .btn { width: calc(220 * var(--u)); border: 0; font-family: var(--madefor); cursor: pointer; }

/* ---------- Unterseiten: AGB, Impressum, Datenschutz ---------- */
.text-seite { width: calc(1100 * var(--u)); margin: 0 auto; }
.text-seite--agb { min-height: calc(731 * var(--u)); padding-top: calc(81 * var(--u)); font-family: var(--helv); font-size: calc(20.24 * var(--u)); line-height: calc(26.31 * var(--u)); }
.text-seite--impressum { min-height: calc(500 * var(--u)); padding-top: calc(48 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28.8 * var(--u)); }
.text-seite--datenschutz { min-height: calc(600 * var(--u)); padding: calc(48 * var(--u)) 0 calc(60 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28.8 * var(--u)); }
.text-seite--datenschutz h2 { font-family: var(--madefor-display); font-weight: 700; font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); margin-top: calc(28 * var(--u)); }
.text-seite--datenschutz p + p, .text-seite--datenschutz h2 + p { margin-top: calc(6 * var(--u)); }

/* ---------- Startseite ---------- */
.hero { min-height: calc(500 * var(--u)); background: linear-gradient(90deg, rgba(5, 25, 28, .35), rgba(5, 25, 28, 0) 65%), url(/img/hero.jpg) center 30% / cover no-repeat #0d1f22; color: #fff; }
.hero-inner { width: calc(1100 * var(--u)); margin: 0 auto; padding-top: calc(67 * var(--u)); padding-bottom: calc(30 * var(--u)); }
.hero h1 { font-family: var(--helv); font-size: calc(64.76 * var(--u)); line-height: calc(84 * var(--u)); }
.hero p { font-family: var(--helv); font-weight: 300; font-size: calc(18 * var(--u)); line-height: calc(29 * var(--u)); max-width: calc(620 * var(--u)); padding-left: calc(6 * var(--u)); }
.hero h1 + p { margin-top: calc(21 * var(--u)); }

.creme { background: var(--creme); }
.creme .wrap { width: calc(1119 * var(--u)); margin: 0 auto; }
.creme .angebot-start { padding-top: calc(111 * var(--u)); }
.creme h2 { font-family: var(--helv); font-size: calc(36.43 * var(--u)); line-height: calc(47 * var(--u)); color: var(--lila); }
.karten { margin-top: calc(87 * var(--u)); display: grid; grid-template-columns: calc(268 * var(--u)) calc(346 * var(--u)) calc(353 * var(--u)); column-gap: calc(71 * var(--u)); row-gap: 0; grid-template-rows: auto 1fr; align-items: start; }
.karten .farn { grid-row: 1 / span 2; width: calc(268 * var(--u)); height: calc(488 * var(--u)); object-fit: cover; object-position: 50% 10%; border-radius: calc(12 * var(--u)); }
.karte { padding-top: calc(24 * var(--u)); text-decoration: none; display: block; }
.karte h3 { font-family: var(--helv); font-size: calc(20.24 * var(--u)); line-height: calc(26 * var(--u)); color: var(--lila); }
.karte p { font-family: var(--helv); font-size: calc(16.19 * var(--u)); line-height: calc(21.05 * var(--u)); color: var(--grau); margin-top: calc(9 * var(--u)); }
.karte:nth-of-type(odd) p { max-width: calc(340 * var(--u)); }
.karte:nth-of-type(even) p { max-width: calc(353 * var(--u)); }
.karte svg { display: block; margin-top: calc(11 * var(--u)); width: calc(35 * var(--u)); height: calc(10 * var(--u)); color: #000; }
.karte:hover h3 { text-decoration: underline; }

.creme .ueber { margin-top: calc(147 * var(--u)); }
.ueber-kopf { display: grid; grid-template-columns: 1fr calc(300 * var(--u)); column-gap: calc(70 * var(--u)); align-items: start; }
.ueber .ich { display: block; width: calc(300 * var(--u)); height: auto; border-radius: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.ueber .text { margin-top: calc(6 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(28.8 * var(--u)); }
.ueber hr { width: calc(235 * var(--u)); height: 2px; margin: calc(30 * var(--u)) 0 0; border: 0; background: #000; }
.listen { margin-top: calc(45 * var(--u)); display: grid; grid-template-columns: calc(524 * var(--u)) 1fr; padding-bottom: calc(93 * var(--u)); }
.listen h3 { font-family: var(--helv); font-size: calc(20.24 * var(--u)); line-height: calc(28 * var(--u)); padding-left: calc(1 * var(--u)); }
.listen ul { list-style: disc; margin-top: calc(18 * var(--u)); font-family: var(--helv); font-size: calc(16.19 * var(--u)); line-height: calc(26 * var(--u)); padding-left: calc(32 * var(--u)); }
.listen .col2 ul { padding-left: calc(30 * var(--u)); }

.kontaktblock { width: calc(1126 * var(--u)); margin: 0 auto; padding: calc(77 * var(--u)) 0 calc(37.4px + 5.16vw); display: grid; grid-template-columns: calc(483 * var(--u)) calc(426 * var(--u)) 1fr; }
.kontaktblock h3, .kontaktblock a { font-family: var(--madefor-display); font-weight: 700; font-size: clamp(18px, calc(12px + .625vw), 24px); line-height: 1.5; }
.kontaktblock address { font-style: normal; font-size: 16px; line-height: 25.6px; margin-top: calc(15px + .35vw); max-width: calc(205 * var(--u)); }

/* ---------- Tablet: Hamburger-Menü statt Navigation (bis 1000px) ---------- */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .kontaktblock { width: auto; padding: 8vw 0 calc(-7.6px + 9.2vw) 8vw; grid-template-columns: 29.5vw 27.1vw 1fr; }
}

/* ---------- Handy (bis 750px): Masse proportional zu 390px Breite ---------- */
@media (max-width: 750px) {
  :root { --u: calc(100vw / 390); }
  .menu-btn { right: calc(7.8vw - 11px); }
  .overlay-panel { width: 100%; }
  .overlay-panel a { font-size: 16px; line-height: 25.6px; }

  .angebot { display: block; width: auto; padding: calc(47 * var(--u)) calc(27 * var(--u)) calc(28 * var(--u)); min-height: calc(500 * var(--u)); }
  .angebot .foto { width: 100%; aspect-ratio: 337 / 161; object-fit: cover; border-radius: calc(10 * var(--u)); }
  .angebot--serif .foto { aspect-ratio: 337 / 195; }
  .angebot .foto[src$="stiefel.jpg"] { aspect-ratio: 1200 / 748; }
  .angebot .foto[src$="wald.jpg"] { object-position: center 75%; }
  .angebot h1 { margin-top: calc(27 * var(--u)); font-size: calc(24.9 * var(--u)); line-height: calc(32.4 * var(--u)); }
  .angebot h1.lila { white-space: normal; }
  .angebot .untertitel { font-size: calc(12.45 * var(--u)); line-height: calc(16.2 * var(--u)); margin-top: calc(4 * var(--u)); }
  .akkordeon { margin-top: calc(21 * var(--u)); }
  .untertitel + .akkordeon { margin-top: calc(19 * var(--u)); }
  .akkordeon .inhalt { font-size: calc(15.6 * var(--u)); line-height: calc(24.96 * var(--u)); padding-bottom: calc(20 * var(--u)); }

  .kontakt { display: block; width: auto; min-height: 0; padding: calc(21 * var(--u)) calc(27 * var(--u)) calc(51 * var(--u)); }
  .kontakt h1 { font-size: calc(24.9 * var(--u)); line-height: calc(32.4 * var(--u)); margin-top: 0; }
  .kontakt .text { margin-top: calc(7 * var(--u)); max-width: none; font-size: calc(16.6 * var(--u)); line-height: calc(26.55 * var(--u)); }
  .kontakt .mail { padding-top: calc(38 * var(--u)); }
  .kontakt .mail p { font-size: calc(16.6 * var(--u)); line-height: calc(26.55 * var(--u)); }
  .btn { width: 100%; height: calc(42 * var(--u)); line-height: calc(42 * var(--u)); font-size: calc(16 * var(--u)); }
  .karte-box { margin: calc(50 * var(--u)) 0 0; width: 100%; height: calc(489 * var(--u)); }
  .karte-platzhalter { gap: calc(14 * var(--u)); padding: calc(20 * var(--u)); }
  .karte-platzhalter p { font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); max-width: calc(300 * var(--u)); }
  .karte-platzhalter .btn { width: calc(220 * var(--u)); height: calc(42 * var(--u)); }

  .text-seite { width: auto; padding-left: calc(27 * var(--u)); padding-right: calc(27 * var(--u)); }
  .text-seite--agb { font-size: calc(16.6 * var(--u)); line-height: calc(21.57 * var(--u)); min-height: 0; padding-top: calc(10 * var(--u)); padding-bottom: calc(23 * var(--u)); }
  .text-seite--impressum { min-height: calc(359 * var(--u)); padding-top: calc(13 * var(--u)); font-size: calc(16.6 * var(--u)); line-height: calc(26.55 * var(--u)); }
  .text-seite--datenschutz { min-height: 0; padding-top: calc(13 * var(--u)); padding-bottom: calc(40 * var(--u)); font-size: calc(16.6 * var(--u)); line-height: calc(26.55 * var(--u)); }
  .text-seite--datenschutz h2 { font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); margin-top: calc(24 * var(--u)); }

  .hero { min-height: calc(100vh - 2px); min-height: calc(100svh - 2px); display: flex; align-items: center; }
  .hero { background: linear-gradient(rgba(5, 25, 28, .38), rgba(5, 25, 28, .38)), url(/img/hero-mobile.jpg) center / cover no-repeat #0d1f22; }
  .hero-inner { width: 100%; padding: 0 calc(19 * var(--u)) calc(20 * var(--u)); text-align: center; }
  .hero h1 { font-size: calc(34 * var(--u)); line-height: calc(44.2 * var(--u)); }
  .hero p { font-size: calc(18 * var(--u)); line-height: calc(28.8 * var(--u)); padding-left: 0; max-width: none; }
  .hero h1 + p { margin-top: calc(10 * var(--u)); }

  .creme .wrap { width: auto; padding-left: calc(27 * var(--u)); padding-right: calc(27 * var(--u)); }
  .creme .angebot-start { padding-top: calc(33 * var(--u)); }
  .creme h2 { font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); }
  .angebot-start h2::after { content: ""; display: block; width: calc(70 * var(--u)); height: 1px; background: #000; margin-top: calc(16 * var(--u)); }
  .karten { display: block; margin-top: 0; }
  .karten .farn { display: none; }
  .karte { padding-top: calc(19 * var(--u)); }
  .karte h3 { font-size: calc(16 * var(--u)); line-height: calc(20.8 * var(--u)); }
  .karte p, .karte:nth-of-type(odd) p, .karte:nth-of-type(even) p { font-size: calc(12 * var(--u)); line-height: calc(15.6 * var(--u)); margin-top: calc(8 * var(--u)); max-width: none; }
  .karte svg { margin-top: calc(11 * var(--u)); width: calc(35 * var(--u)); height: calc(10 * var(--u)); }
  .creme .ueber { margin-top: calc(57 * var(--u)); }
  .ueber-kopf { display: flex; flex-direction: column; }
  .ueber-text { display: contents; }
  .ueber hr { order: 3; }
  .ueber .ich { order: 2; width: calc(200 * var(--u)); margin: calc(24 * var(--u)) auto 0; border-radius: calc(10 * var(--u)); }
  .ueber h2 { font-family: var(--madefor); font-size: calc(16 * var(--u)); line-height: calc(25.6 * var(--u)); }
  .ueber .text { margin-top: 0; font-size: calc(12 * var(--u)); line-height: calc(19.2 * var(--u)); color: #323232; }
  .ueber hr { margin: calc(24 * var(--u)) auto 0; width: calc(100 * var(--u)); height: 1px; }
  .listen { grid-template-columns: calc(177 * var(--u)) 1fr; margin-top: calc(34 * var(--u)); padding-bottom: calc(31 * var(--u)); }
  .listen h3 { font-size: calc(12 * var(--u)); line-height: calc(16.8 * var(--u)); padding-left: calc(1 * var(--u)); }
  .listen ul, .listen .col2 ul { font-size: calc(12 * var(--u)); line-height: calc(19.2 * var(--u)); padding-left: calc(23 * var(--u)); margin-top: calc(5 * var(--u)); color: #323232; }
  .kontaktblock { display: block; width: auto; padding: calc(39 * var(--u)) calc(39 * var(--u)) calc(91px + (100vw - 390px) * .1); }
  .kontaktblock h3, .kontaktblock a { font-size: 18px; line-height: 27px; }
  .kontaktblock address { font-size: 16px; line-height: 25.6px; margin-top: 19px; max-width: none; }
  .kontaktblock .link { margin-top: 30px; }
  .kontaktblock .link + .link { margin-top: 101px; }
}