/* ============================================================
   AUFRECHT — Tatjana Viert · Yoga, Haltung, Bewegung
   Design: hell geführt, anthrazitfarbene Anker
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bad Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/badscript-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Bad Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/badscript-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/schibsted-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/schibsted-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens ---------- */
:root{
  /* Flächen */
  --papier:#F7F6F2;
  --papier-tief:#EFEDE7;
  --tinte:#191C18;
  --tinte-weich:#4A5049;
  --tinte-zart:#7C837A;

  /* Die drei Säulen (aus dem Logo) */
  --salbei:#4E5D43;   /* Bewegung & Yoga   */
  --petrol:#3E6A68;   /* Rücken & Haltung  */
  --sand:#C2AC95;     /* Ruhe & Atem       */

  --salbei-hell:#8FA07E;
  --petrol-hell:#7AA9A5;
  --sand-hell:#E2D5C4;

  --linie:rgba(25,28,24,.12);
  --linie-hell:rgba(247,246,242,.18);

  /* Maße: eine Inhaltsachse, eine Abstandsskala */
  --rand:clamp(1.25rem,5vw,4.5rem);
  --breite:80rem;
  --schmal:44rem;
  --kopfhoehe:5.2rem;

  --luft-xs:.8rem;
  --luft-s:1.5rem;
  --luft-m:2.4rem;
  --luft-l:clamp(2.75rem,5vw,4rem);
  --luft-xl:clamp(4.5rem,9vw,8rem);

  /* Die Blattkurve: eine Ecke deutlich stärker gerundet */
  --blatt:5rem 0.5rem 5rem 0.5rem;
  --blatt-klein:2.5rem 0.35rem 2.5rem 0.35rem;

  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(1.0625rem,.42vw + .96rem,1.1875rem);
  line-height:1.72;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
/* Lange Wörter und Adressen dürfen das Layout nicht sprengen */
p,li,dd,h1,h2,h3,.wort,.zitat,.kontaktliste a{overflow-wrap:anywhere}

/* ---------- Typografie ---------- */
h1,h2,h3,.display{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.012em;
  margin:0;
}
h1{font-size:clamp(2.75rem,7.5vw,6rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.75rem);line-height:1.06}
h3{font-size:clamp(1.4rem,2vw,1.85rem);line-height:1.2}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.wort{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(3.5rem,15vw,11rem);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

.kursiv{font-family:'Bad Script',cursive;font-style:normal}

/* Handschrift für die Zeilen, die etwas versprechen statt etwas zu erklären.
   Bad Script läuft breiter als die Serife und braucht mehr Zeilenabstand,
   damit die Schwünge sich nicht berühren. */
.hand{
  font-family:'Bad Script',cursive;
  font-style:normal;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.004em;
}
.lead.hand{
  font-size:clamp(1.4rem,2.1vw,1.85rem);
  line-height:1.3;
  color:var(--tinte);
  max-width:21em;
}
.dunkel .lead.hand{color:var(--papier)}

/* Kleine Auszeichnung über Überschriften */
.marke{
  display:flex;align-items:center;gap:.6rem;
  font-size:.75rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--tinte-zart);
  margin:0 0 1.4rem;
}
.marke::before{
  content:"";flex:none;
  width:.85rem;height:1.3rem;
  background:currentColor;
  -webkit-mask:url(logo-mono.svg) center/contain no-repeat;
  mask:url(logo-mono.svg) center/contain no-repeat;
  opacity:.75;
}
.dunkel .marke{color:var(--sand-hell)}

.lead{
  font-size:clamp(1.2rem,1.5vw,1.5rem);
  line-height:1.55;
  color:var(--tinte-weich);
  font-weight:400;
}
.dunkel .lead{color:rgba(247,246,242,.8)}

/* ---------- Layout ---------- */
.huelle{
  width:100%;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:var(--rand);
}
.huelle-weit{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}

section{position:relative}
.block{padding-block:var(--luft-xl)}
.block-eng{padding-block:var(--luft-l)}

.dunkel{
  background:var(--tinte);
  color:var(--papier);
}
.dunkel h1,.dunkel h2,.dunkel h3{color:var(--papier)}
.getoent{background:var(--papier-tief)}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:1rem max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  background:transparent;
  transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
.kopf.fest{
  background:var(--papier);
  box-shadow:0 1px 0 var(--linie),0 14px 40px -32px rgba(25,28,24,.5);
  padding-block:.7rem;
}
.kopf.auf-dunkel:not(.fest){color:var(--papier)}

.zeichen{
  display:flex;align-items:center;gap:.85rem;
  text-decoration:none;color:inherit;
  flex:none;
}
.zeichen img{width:auto;height:3.4rem;transition:height .45s var(--ease)}
.kopf.fest .zeichen img{height:2.8rem}
.zeichen .zeichen-text{
  display:flex;flex-direction:column;line-height:1;
}
.zeichen b{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;font-size:1.6rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.zeichen span{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinte-zart);margin-top:.3rem;
}
.kopf.auf-dunkel:not(.fest) .zeichen span{color:rgba(247,246,242,.65)}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav a{
  text-decoration:none;
  font-size:.95rem;font-weight:500;
  letter-spacing:.01em;
  padding:.35rem 0;
  position:relative;
  white-space:nowrap;
}
/* Der Unterstrich wird gezogen wie mit der Hand, nicht eingeblendet.
   Ein gerader Balken wäre hier der Standard, den jede Seite hat. */
.nav .strich{
  position:absolute;left:-.04em;bottom:.02rem;
  width:calc(100% + .08em);height:.36rem;
  overflow:visible;pointer-events:none;
}
.nav .strich path{
  fill:none;
  stroke:var(--salbei);
  stroke-width:1.35;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;   /* bleibt gleich dünn, egal wie breit das Wort */
  stroke-dasharray:128;
  stroke-dashoffset:128;
  transition:stroke-dashoffset .55s cubic-bezier(.42,.02,.62,1);
}
.nav a:hover .strich path,
.nav a:focus-visible .strich path,
.nav a[aria-current="page"] .strich path{stroke-dashoffset:0}
body.menue-auf .nav .strich path{stroke:var(--salbei-hell);stroke-width:2.2}

/* Der Knopf in der Kopfzeile ist schlanker als die Knöpfe im Inhalt
   und braucht seinen Innenabstand zurück (".nav a" schlägt sonst ".knopf"). */
.nav a.knopf{
  padding:.55rem 1.25rem;
  margin-left:.65rem;
  font-size:.9rem;
  gap:.5rem;
}
.nav a.knopf::after{content:none}

.burger{
  display:none;
  position:relative;
  z-index:3;              /* liegt über dem geöffneten Menü */
  width:2.75rem;height:2.75rem;
  border:0;background:none;color:inherit;
  padding:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger i{
  display:block;width:1.4rem;height:1px;background:currentColor;
  position:relative;transition:background .25s var(--ease);
}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;width:1.4rem;height:1px;background:currentColor;
  transition:transform .35s var(--ease);
}
.burger i::before{top:-.42rem}
.burger i::after{top:.42rem}
body.menue-auf .burger i{background:transparent}
body.menue-auf .burger i::before{transform:translateY(.42rem) rotate(45deg)}
body.menue-auf .burger i::after{transform:translateY(-.42rem) rotate(-45deg)}

/* ---------- Buttons ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.95rem 1.8rem;
  border-radius:2rem;
  background:var(--tinte);color:var(--papier);
  text-decoration:none;
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
  border:1px solid var(--tinte);
  cursor:pointer;
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.knopf:hover{transform:translateY(-2px);background:var(--salbei);border-color:var(--salbei);box-shadow:0 16px 30px -18px rgba(25,28,24,.65)}
.knopf .pfeil{transition:transform .35s var(--ease)}
.knopf:hover .pfeil{transform:translateX(3px)}

.knopf-leer{
  background:transparent;color:var(--tinte);border-color:var(--linie);
}
.knopf-leer:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.dunkel .knopf{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.dunkel .knopf:hover{background:var(--sand-hell);border-color:var(--sand-hell)}
.dunkel .knopf-leer{background:transparent;color:var(--papier);border-color:var(--linie-hell)}
.dunkel .knopf-leer:hover{background:var(--papier);color:var(--tinte)}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--luft-m)}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:end;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(8rem,14vh,11rem) var(--rand) clamp(3rem,7vh,5.5rem);
  max-width:92rem;margin-inline:auto;
}
.hero-text{padding-bottom:clamp(.5rem,4vh,3rem)}
.hero h1{
  font-size:clamp(3.6rem,13vw,10.5rem);
  line-height:.84;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.hero-claim{
  font-family:'Bad Script',cursive;
  font-style:normal;
  font-size:clamp(1.85rem,3.5vw,3.05rem);
  line-height:1.24;
  color:var(--tinte-weich);
  margin:var(--luft-s) 0 0;
  max-width:12em;
}
.hero-zeilen{
  margin-top:clamp(1.8rem,4vh,3rem);
  max-width:34ch;
  color:var(--tinte-weich);
}
.hero-bild{
  position:relative;
  border-radius:var(--blatt);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--papier-tief);
}
.hero-bild img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{
  padding:calc(var(--kopfhoehe) + var(--luft-xl)) 0 var(--luft-l);
  position:relative;
}

/* Seitenkopf mit Bild: gleicher Aufbau wie der erste Bildschirm.
   Text links auf der Inhaltsachse, Bild randlos zur rechten Kante. */
.seitenkopf-bild{
  display:grid;
  grid-template-columns:1fr minmax(0,40vw);
  align-items:stretch;
  gap:var(--luft-l);
  padding:0 0 var(--luft-xl) max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  margin:0;
}
.seitenkopf-bild .kopf-text{
  align-self:center;
  padding-top:calc(var(--kopfhoehe) + var(--luft-l));
  padding-bottom:var(--luft-l);
  max-width:38rem;
}
.seitenkopf-bild .kopf-foto{
  position:relative;
  overflow:hidden;
  background:var(--papier-tief);
  margin-top:var(--kopfhoehe);
  min-height:min(62svh,34rem);   /* füllt die Spalte bis zur Bildschirmkante */
}
.seitenkopf-bild .kopf-foto img{width:100%;height:100%;object-fit:cover}
/* Neben dem Bild braucht das große Wort weniger Platz */
.seitenkopf-bild .richt-wort{font-size:clamp(2.6rem,7.2vw,6.6rem)}
.seitenkopf-bild .lead{max-width:32ch}

@media (max-width:64rem){
  .seitenkopf-bild{grid-template-columns:1fr;padding-right:0;padding-bottom:var(--luft-l)}
  .seitenkopf-bild .kopf-text{padding-right:var(--rand);padding-bottom:var(--luft-l)}
  .seitenkopf-bild .kopf-foto{margin-top:0;min-height:0;aspect-ratio:4/3;max-height:50svh}
  .seitenkopf-bild .richt-wort{font-size:clamp(3.2rem,13vw,9.5rem)}
}
.seitenkopf .wort{margin-bottom:var(--luft-s)}


/* ---------- Bildflächen ---------- */
.bildflaeche{
  position:relative;
  border-radius:var(--blatt);
  overflow:hidden;
  background:var(--papier-tief);
}
.bildflaeche img{width:100%;height:100%;object-fit:cover;display:block}
.bild-hoch{aspect-ratio:3/4}
.bild-breit{aspect-ratio:16/9}
.bild-quer{aspect-ratio:3/2}
.bild-45{aspect-ratio:4/5}

/* Vollbild-Anker */
.anker{
  position:relative;
  min-height:min(78svh,44rem);
  display:grid;align-items:end;
  overflow:hidden;
  color:var(--papier);
  isolation:isolate;
}
.anker-bild{position:absolute;inset:0;z-index:-2}
.anker-bild img{width:100%;height:100%;object-fit:cover}
.anker::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,23,19,.22) 0%,rgba(20,23,19,.62) 45%,rgba(20,23,19,.93) 100%);
}
.anker .huelle{padding-bottom:var(--luft-l);padding-top:var(--luft-xl)}
.anker h2{max-width:16ch}
.anker .lead{color:rgba(247,246,242,.85);max-width:44ch}

/* ---------- Zwei-Spalter ---------- */
.paar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:var(--luft-l);
  align-items:center;
}
.paar-versetzt{align-items:start}
/* Nur in diesem einen Abschnitt: die Überschrift bleibt stehen,
   während rechts die Termine durchlaufen. */
@media (min-width:64rem){
  .paar-haftet > *:first-child{
    position:sticky;
    top:calc(var(--kopfhoehe) + var(--luft-l));
    align-self:start;
  }
}
.paar-getauscht > *:first-child{order:2}
@media (max-width:44rem){.paar-getauscht > *:first-child{order:0}}
.paar-text{max-width:40rem}
.paar-eng{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}

/* ---------- Karten ---------- */
.karten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
  gap:var(--luft-m);
}
.karten-4{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.karte{
  background:var(--papier);
  border-radius:var(--blatt-klein);
  padding:clamp(1.6rem,2.6vw,2.4rem);
  box-shadow:0 2px 4px -2px rgba(25,28,24,.08),0 18px 40px -30px rgba(25,28,24,.5);
  display:flex;flex-direction:column;gap:.85rem;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.karte:hover{transform:translateY(-4px);box-shadow:0 3px 6px -2px rgba(25,28,24,.1),0 28px 55px -32px rgba(25,28,24,.6)}
.karte h3{font-size:clamp(1.25rem,1.6vw,1.55rem)}
.karte p{font-size:1rem;line-height:1.65;color:var(--tinte-weich);margin:0}
.dunkel .karte{background:rgba(247,246,242,.055);box-shadow:none;border:1px solid var(--linie-hell)}
.dunkel .karte p{color:rgba(247,246,242,.72)}
.dunkel .karte:hover{background:rgba(247,246,242,.09);transform:translateY(-4px);box-shadow:none}

/* Säulen-Kodierung */
.karte .saeule{
  font-size:.72rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;
}
.karte .saeule::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.s-bewegung{color:var(--salbei)}
.s-ruecken{color:var(--petrol)}
.s-ruhe{color:#9C8467}
.dunkel .s-bewegung{color:var(--salbei-hell)}
.dunkel .s-ruecken{color:var(--petrol-hell)}
.dunkel .s-ruhe{color:var(--sand-hell)}

/* ---------- Liste mit Häkchen ---------- */
.punkte{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem}
.punkte li{
  position:relative;padding-left:1.9rem;
  color:var(--tinte-weich);
}
.punkte li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.6rem;height:.6rem;border-radius:50% 0 50% 0;
  background:var(--salbei);
}
.dunkel .punkte li{color:rgba(247,246,242,.78)}
.dunkel .punkte li::before{background:var(--salbei-hell)}

/* ---------- Zahlen ---------- */
.zahlen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));
  gap:var(--luft-l);
}
.zahl b{
  display:block;
  font-variant-numeric:tabular-nums;   /* springt beim Zählen nicht */
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(3rem,6vw,4.75rem);
  line-height:1;
  letter-spacing:-.02em;
}
.zahl span{
  display:block;margin-top:.6rem;
  font-size:.95rem;line-height:1.45;color:var(--tinte-weich);
}
.dunkel .zahl span{color:rgba(247,246,242,.7)}

/* ---------- Zitat ---------- */
.zitat{
  font-family:'Bad Script',cursive;
  font-style:normal;
  font-size:clamp(1.9rem,3.7vw,3.15rem);
  line-height:1.32;
  letter-spacing:.004em;
  max-width:14em;
  margin:0;
}
.zitat-quelle{
  margin-top:1.6rem;
  font-family:'Schibsted Grotesk',sans-serif;font-style:normal;
  font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tinte-zart);
}
.dunkel .zitat-quelle{color:var(--sand-hell)}

/* ---------- Termin-Zeilen ---------- */
.termin{
  display:grid;
  grid-template-columns:minmax(6.5rem,auto) 1fr auto;
  gap:var(--luft-m);
  align-items:start;
  padding:var(--luft-m) 0;
  border-top:1px solid var(--linie);
}
/* In schmalen Spalten (Anrisse auf der Startseite) einspaltig */
.termin.kompakt{grid-template-columns:1fr;gap:.9rem}
.termin.kompakt .termin-datum{display:flex;align-items:baseline;gap:.8rem}
.termin.kompakt .termin-datum small{margin-top:0}
.termin.kompakt .termin-tat{justify-self:start;margin-top:.3rem}
.termin:last-of-type{border-bottom:1px solid var(--linie)}
.dunkel .termin{border-color:var(--linie-hell)}
.termin-datum{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.05;
}
.termin-datum small{display:block;font-family:'Schibsted Grotesk',sans-serif;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-zart);margin-top:.45rem}
.dunkel .termin-datum small{color:rgba(247,246,242,.6)}
.termin-inhalt h3{margin-bottom:.5rem}
.termin-inhalt p{color:var(--tinte-weich);font-size:1rem;margin-bottom:.5rem}
.dunkel .termin-inhalt p{color:rgba(247,246,242,.75)}
.termin-tat{align-self:center}

/* ---------- Formular ---------- */
.formular{display:grid;gap:1.1rem}
.feldpaar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:1.1rem}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld label{font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinte-zart)}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:1rem;
  padding:.9rem 1.05rem;
  border:1px solid var(--linie);
  border-radius:.9rem;
  background:var(--papier);
  color:var(--tinte);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  width:100%;
}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--salbei);
  box-shadow:0 0 0 3px rgba(78,93,67,.13);
}
.dunkel .feld label{color:var(--sand-hell)}
.dunkel .feld input,.dunkel .feld textarea,.dunkel .feld select{
  background:rgba(247,246,242,.06);border-color:var(--linie-hell);color:var(--papier);
}
.dunkel .feld input:focus,.dunkel .feld textarea:focus{border-color:var(--sand-hell);box-shadow:0 0 0 3px rgba(226,213,196,.15)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zustimmung{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--tinte-weich)}
.zustimmung input{width:1.15rem;height:1.15rem;margin-top:.28rem;flex:none;accent-color:var(--salbei)}
.dunkel .zustimmung{color:rgba(247,246,242,.75)}
.meldung{
  padding:1rem 1.2rem;border-radius:.9rem;font-size:.98rem;display:none;
}
.meldung.gut{display:block;background:rgba(78,93,67,.12);color:var(--salbei)}
.meldung.schlecht{display:block;background:rgba(150,60,45,.1);color:#8C3B2C}
.dunkel .meldung.gut{background:rgba(143,160,126,.16);color:var(--salbei-hell)}

/* ---------- Kontaktdaten ---------- */
.kontaktliste{display:grid;gap:1.6rem;margin:0;padding:0}
.kontaktliste div{display:grid;gap:.3rem}
.kontaktliste dt{font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte-zart)}
.kontaktliste dd{margin:0;font-size:1.1rem}
.kontaktliste a{text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:.1rem;transition:border-color .3s var(--ease)}
.kontaktliste a:hover{border-color:currentColor}
.dunkel .kontaktliste dt{color:var(--sand-hell)}
.dunkel .kontaktliste a{border-color:var(--linie-hell)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--tinte);color:var(--papier);padding-block:var(--luft-xl) 2rem}
.fuss-oben{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--luft-l);
  padding-bottom:var(--luft-l);
}
.fuss h4{
  font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--sand-hell);margin:0 0 1.1rem;
}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fuss a{color:rgba(247,246,242,.8);text-decoration:none;transition:color .3s var(--ease)}
.fuss a:hover{color:var(--papier)}
.fuss-zeichen img{height:3.4rem;width:auto;margin-bottom:1.2rem}
.fuss-zeichen p{color:rgba(247,246,242,.7);font-size:.98rem;max-width:32ch}
.fuss-unten{
  border-top:1px solid var(--linie-hell);
  padding-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  font-size:.88rem;color:rgba(247,246,242,.6);
}

/* ---------- Fließtext-Seiten (Impressum/Datenschutz) ---------- */
.fliesstext{max-width:var(--schmal)}
.fliesstext h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:2.8rem 0 .9rem}
.fliesstext h3{font-size:1.2rem;margin:2rem 0 .6rem}
.fliesstext p,.fliesstext li{color:var(--tinte-weich);font-size:1.02rem;line-height:1.72}
.fliesstext ul{padding-left:1.2rem;display:grid;gap:.4rem}
.fliesstext a{color:var(--salbei)}

/* ---------- Aufsteigen (Signature-Bewegung) ---------- */
.steigt{opacity:0;transform:translateY(2.2rem);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.steigt.da{opacity:1;transform:none}
.steigt.v2{transition-delay:.1s}
.steigt.v3{transition-delay:.2s}
.steigt.v4{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .steigt{opacity:1;transform:none;transition:none}
}

/* ---------- Skip-Link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinte);color:var(--papier);padding:.8rem 1.2rem;border-radius:0 0 .6rem 0;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--salbei);outline-offset:3px;border-radius:.2rem}

/* ---------- Responsiv ---------- */
@media (max-width:64rem){
  .hero{grid-template-columns:1fr;align-items:start;min-height:auto;gap:2.5rem}
  .hero-bild{aspect-ratio:4/5;max-height:70svh}

  .fuss-oben{grid-template-columns:1fr 1fr}
  .fuss-zeichen{grid-column:1/-1}
}

@media (max-width:52rem){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:0;
    z-index:1;
    background:var(--tinte);color:var(--papier);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.4rem;
    padding:5.5rem max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))) 3rem;
    transform:translateX(100%);
    transition:transform .5s var(--ease);
    overflow-y:auto;
  }
  body.menue-auf .nav{transform:none}
  .nav a{
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(2rem,9vw,3rem);font-weight:400;
    padding:.35rem 0;
  }
  .nav .knopf{
    font-family:'Schibsted Grotesk',sans-serif;
    font-size:.95rem;margin-top:1.4rem;
  }
  /* Das Einwilligungsbanner liegt bei 1000. Beim geöffneten Menü muss
     die Navigation darüber, sonst ist sie beim ersten Besuch blockiert. */
  body.menue-auf .kopf{color:var(--papier);background:transparent;box-shadow:none;z-index:1100}
  body.menue-auf .zeichen{position:relative;z-index:3}
  body.menue-auf .zeichen span{color:rgba(247,246,242,.7)}
  /* Der gezeichnete Strich passt nicht zu den großen Menüzeilen */
  .nav .strich{display:none}
  .nav a[aria-current="page"]{color:var(--sand-hell)}
  body.menue-auf{overflow:hidden}
  .termin{grid-template-columns:1fr;gap:.9rem}
  .termin-tat{justify-self:start}
  .fuss-oben{grid-template-columns:1fr}
}

@media (max-width:44rem){
  /* Breite Bilder werden auf dem Handy sonst zu flach */
  .bild-breit{aspect-ratio:4/3}
  .anker{min-height:min(70svh,34rem)}
}

@media (max-width:34rem){
  :root{--blatt:3rem .4rem 3rem .4rem}
  .zeichen img{height:2.4rem}
  .zeichen b{font-size:1.3rem}
  .knopfreihe .knopf{width:100%;justify-content:center}
}

/* ============================================================
   v2 — AUFRICHTEN ALS LAYOUTPRINZIP
   Das Wort steht links angeschnitten, das Portrait läuft
   randlos aus dem Bild, Schrift und Bilder richten sich auf.
   ============================================================ */

/* ---------- Hero, randlos ---------- */
.hero-v2{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,42vw);
  align-items:stretch;
  min-height:100svh;
  max-width:none;
  padding:0 0 0 max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand)));
  gap:var(--luft-l);
}
.hero-v2 .hero-text{
  align-self:center;
  padding:calc(var(--kopfhoehe) + var(--luft-l)) 0 var(--luft-xl);
  max-width:40rem;
}
.hero-v2 .hero-foto{
  position:relative;
  overflow:hidden;
  background:var(--papier-tief);
  margin-top:var(--kopfhoehe);   /* Platz für die Navigation */
}
.hero-v2 .hero-foto img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 20%;
}

/* Die Rolle läuft aufrecht am linken Rand mit */
.achse{
  position:absolute;
  left:.9rem;
  bottom:clamp(2.5rem,6vh,4.5rem);
  top:auto;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:.7rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--tinte-zart);
  white-space:nowrap;
  pointer-events:none;
}
.hero-text{position:relative}
.seitenkopf .lead,.seitenkopf .marke{max-width:38ch}
.seitenkopf .achse{display:none}

/* ---------- Das aufrichtende Wort ---------- */
.richt-wort{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  line-height:.84;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.richt-wort .zeile{display:block;white-space:nowrap}
.richt-wort .schacht{
  display:inline-block;
  /* nur nach unten beschneiden, seitlich bleiben Serifen heil */
  clip-path:inset(-30% -12% 0 -12%);
}
.richt-wort .buchstabe{
  display:inline-block;
  transform:translateY(112%) rotate(7deg);
  transform-origin:0% 100%;
  transition:transform 1.05s cubic-bezier(.19,.9,.28,1);
}
.richt-wort.aufgerichtet .buchstabe{transform:none}

/* Anschnitt am linken Rand: erst ab Tablet, sonst unleserlich */
/* Optischer Ausgleich: die Serife des ersten Buchstabens ragt sonst
   sichtbar über die Textkante hinaus */
.richt-wort{margin-left:-.045em}

.hero-v2 h1.richt-wort{font-size:clamp(3.4rem,12.5vw,10.5rem)}
.seitenkopf .richt-wort{font-size:clamp(3.2rem,13vw,9.5rem)}

/* ---------- Überschriften und Text richten sich auf ---------- */
.richtet{
  transform:translateY(1.6rem) rotate(.9deg);
  transform-origin:0% 100%;
  opacity:0;
  transition:transform 1.15s var(--ease),opacity .8s var(--ease);
}
.richtet.da{transform:none;opacity:1}
.richtet.v2{transition-delay:.09s}
.richtet.v3{transition-delay:.18s}
.richtet.v4{transition-delay:.27s}

/* Bilder wachsen von unten in ihre volle Höhe */
.waechst{
  transform:scaleY(.93);
  transform-origin:50% 100%;
  opacity:0;
  transition:transform 1.3s cubic-bezier(.19,.9,.28,1),opacity .9s var(--ease);
}
.waechst.da{transform:none;opacity:1}

/* ---------- Die drei Säulen steigen an ---------- */
@media (min-width:56rem){
  .karten-steigend > *:nth-child(1){margin-top:3.2rem}
  .karten-steigend > *:nth-child(2){margin-top:1.6rem}
  .karten-steigend > *:nth-child(3){margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  .richt-wort .buchstabe,.richtet,.waechst{transform:none;opacity:1;transition:none}
}

@media (max-width:64rem){
  .hero-v2{grid-template-columns:1fr;min-height:auto;padding-right:0}
  .hero-v2 .hero-text{
    padding-top:calc(var(--kopfhoehe) + var(--luft-l));
    padding-bottom:var(--luft-l);
    padding-right:var(--rand);
  }
  .hero-v2 .hero-foto{margin-top:0}
  .hero-v2 .hero-foto{aspect-ratio:4/5;max-height:70svh}
  .achse{display:none}
}

/* ============================================================
   Handschrift, die geschrieben wird
   Jede Zeile wird von links nach rechts freigelegt, eine nach
   der anderen, im Tempo ihrer Länge. Der Text bleibt echter
   Text: markierbar, vorlesbar, für Google lesbar.
   ============================================================ */
.schreibt .schreibwort{display:inline}
.schreibt .zeile-schreibt{
  display:block;
  /* oben, unten und links Luft lassen, sonst schneidet die Maske
     Ober-, Unterlängen und Anschwünge ab */
  clip-path:inset(-22% 105% -28% -5%);
}
.schreibt.los .zeile-schreibt{
  animation:federzug var(--dauer,1.1s) cubic-bezier(.42,.02,.62,1) both;
  animation-delay:var(--warten,0s);
}
/* Nach dem Schreiben wird die Maske ganz entfernt. Bliebe sie stehen,
   könnte ein Zeilenumbruch beim Vergrößern Text abschneiden. */
.schreibt .zeile-schreibt.fertig{clip-path:none;animation:none;visibility:visible}
@keyframes federzug{
  from{clip-path:inset(-22% 105% -28% -5%)}
  to{clip-path:inset(-22% -6% -28% -5%)}
}

/* Solange nicht geschrieben wird, bleibt die Zeile unsichtbar,
   sonst blitzt sie vor dem Start kurz auf */
.schreibt:not(.los) .zeile-schreibt{visibility:hidden}
.schreibt.los .zeile-schreibt{visibility:visible}

@media (prefers-reduced-motion:reduce){
  .schreibt .zeile-schreibt,
  .schreibt.los .zeile-schreibt{
    clip-path:none;animation:none;visibility:visible;
  }
}

/* ---------- Preiskarte, die auf dem Bild sitzt ---------- */
.mit-preis{position:relative}
.preiskarte{
  position:absolute;
  left:var(--luft-m);
  right:calc(var(--luft-m) * -1);
  bottom:calc(var(--luft-m) * -1);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--luft-m);
  padding:calc(var(--luft-m) - .2rem) var(--luft-m);
  background:var(--papier);
  border-radius:var(--blatt-klein);
  box-shadow:0 2px 4px -2px rgba(25,28,24,.1),0 24px 50px -28px rgba(25,28,24,.75);
}
.preiskarte b{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;
  font-size:clamp(1.7rem,2.5vw,2.2rem);
  line-height:1;
  letter-spacing:-.015em;
}
.preiskarte span{
  display:block;margin-top:.35rem;
  font-size:.88rem;line-height:1.4;color:var(--tinte-weich);
}
.preiskarte .teil + .teil{padding-left:var(--luft-m);border-left:1px solid var(--linie)}

@media (max-width:64rem){
  .preiskarte{position:static;left:auto;right:auto;bottom:auto;margin-top:var(--luft-m)}
}
@media (max-width:34rem){
  .preiskarte{grid-template-columns:1fr;gap:var(--luft-s)}
  .preiskarte .teil + .teil{padding-top:var(--luft-s);border-top:1px solid var(--linie);border-left:0;padding-left:0}
}

/* ============================================================
   Einwilligung und Anfahrtskarte
   Die Karte lädt Kacheln von openstreetmap.org, also von einem
   fremden Server. Sie wird erst gebaut, wenn zugestimmt wurde.
   ============================================================ */
.karte-halter{
  position:relative;
  z-index:0;
  isolation:isolate;   /* hält die Ebenen von Leaflet im Kasten */
  contain:paint;
  border-radius:var(--blatt-klein);
  overflow:hidden;
  background:var(--papier-tief);
  aspect-ratio:12/7;
}
#karte{width:100%;height:100%}
/* Solange gesperrt ist, bestimmt der Hinweis die Höhe. Der leere
   Kartenkasten würde sie sonst wegdrücken und der Text verschwände. */
.karte-halter.gesperrt{aspect-ratio:auto;min-height:0}
.karte-halter.gesperrt #karte{display:none}
.karte-halter.gesperrt .karte-sperre{position:relative;inset:auto}
.karte-sperre{
  position:absolute;inset:0;z-index:2;
  display:grid;place-content:center;justify-items:center;
  gap:var(--luft-s);
  padding:var(--luft-l);
  text-align:center;
  background:var(--papier-tief);
}
.karte-sperre p{max-width:34ch;color:var(--tinte-weich);font-size:1rem;margin:0}
.karte-sperre .hinweis{font-size:.85rem;color:var(--tinte-zart);max-width:40ch}

/* Leaflet an die Markenwelt anpassen */
.leaflet-container{font-family:'Schibsted Grotesk',sans-serif;background:var(--papier-tief)}
.leaflet-control-attribution{font-size:.7rem;background:rgba(247,246,242,.88)}
.leaflet-bar a{color:var(--tinte);border-radius:0}
.leaflet-bar a:hover{background:var(--papier-tief)}
.marke-punkt{
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--salbei);border:3px solid var(--papier);
  box-shadow:0 0 0 8px rgba(78,93,67,.22);
}

/* ---------- Einwilligungsbanner ---------- */
.zustimmung-banner{
  position:fixed;inset:auto 0 0;z-index:1000;
  display:none;
  padding:var(--luft-m) var(--rand) calc(var(--luft-m) + env(safe-area-inset-bottom));
  background:var(--papier);
  box-shadow:0 -1px 0 var(--linie),0 -20px 60px -40px rgba(25,28,24,.7);
}
.zustimmung-banner.offen{display:block}
.zustimmung-innen{
  max-width:var(--breite);margin-inline:auto;
  display:grid;grid-template-columns:1.35fr 1fr;
  gap:var(--luft-l);align-items:start;
}
.zustimmung-banner h2{font-size:clamp(1.4rem,2vw,1.9rem);margin-bottom:.6rem}
.zustimmung-banner p{font-size:.98rem;line-height:1.6;color:var(--tinte-weich);margin:0}
.zustimmung-banner a{color:var(--salbei)}
.zustimmung-zeichen{height:2.4rem;width:auto;margin-bottom:var(--luft-s)}

.zustimmung-liste{display:grid;gap:.9rem;margin:0 0 var(--luft-m)}
.zustimmung-zeile{
  display:flex;align-items:flex-start;gap:.9rem;
  font-size:.95rem;line-height:1.5;
}
.zustimmung-zeile b{display:block;font-family:inherit;font-weight:600;font-size:.95rem}
.zustimmung-zeile span{color:var(--tinte-weich);font-size:.88rem}
.zustimmung-fest{
  flex:none;margin-top:.15rem;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--salbei);font-weight:600;white-space:nowrap;
}
.schalter{position:relative;flex:none;margin-top:.1rem;width:2.9rem;height:1.6rem}
.schalter input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.schalter i{
  display:block;width:100%;height:100%;
  background:var(--linie);border-radius:1rem;
  transition:background .3s var(--ease);pointer-events:none;
}
.schalter i::after{
  content:"";position:absolute;top:.2rem;left:.2rem;
  width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--papier);
  box-shadow:0 1px 3px rgba(25,28,24,.35);
  transition:transform .3s var(--ease);
}
.schalter input:checked + i{background:var(--salbei)}
.schalter input:checked + i::after{transform:translateX(1.3rem)}
.schalter input:focus-visible + i{outline:2px solid var(--salbei);outline-offset:3px}

.zustimmung-knoepfe{display:flex;gap:.8rem;flex-wrap:wrap}
.zustimmung-knoepfe .knopf{flex:1 1 0;justify-content:center;min-width:11rem}

@media (max-width:56rem){
  .zustimmung-innen{grid-template-columns:1fr;gap:var(--luft-m)}
  .zustimmung-banner{max-height:86svh;overflow-y:auto}
}

/* Anfahrt sitzt auf der Kontaktseite unter den Kontaktdaten */
.anfahrt-block{margin-top:var(--luft-xl)}
.anfahrt-block > p:not(.marke){
  color:var(--tinte-weich);
  margin-bottom:var(--luft-s);
  max-width:34ch;
}
.anfahrt-block .karte-halter{aspect-ratio:3/2}
@media (max-width:64rem){
  .anfahrt-block{margin-top:var(--luft-l)}
  .anfahrt-block .karte-halter{aspect-ratio:4/3}
}

/* Auf der Kontaktseite füllt die Karte genau den Platz, der neben dem
   Formular übrig bleibt. So enden beide Spalten auf gleicher Höhe. */
@media (min-width:64rem){
  .kontakt-spalten{align-items:stretch}
  .kontakt-spalten > div:first-child{display:flex;flex-direction:column}
  .anfahrt-block{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .anfahrt-block .karte-halter{
    flex:1 1 auto;
    aspect-ratio:auto;
    min-height:11rem;
  }
}

/* Der gesperrte Kasten richtet sich immer nach seinem Hinweistext.
   Muss nach den Regeln der Anfahrt stehen, sonst gewinnt deren
   festes Seitenverhältnis und der Text wird abgeschnitten. */
.anfahrt-block .karte-halter.gesperrt,
.karte-halter.gesperrt{
  aspect-ratio:auto;
  contain:none;
  min-height:fit-content;
}

/* ============================================================
   Feinschliff fürs Handy
   ============================================================ */
@media (max-width:64rem){
  /* ---- Bilder halten links wie rechts denselben Abstand ---- */
  .hero-v2,
  .seitenkopf-bild{
    padding-inline:var(--rand);
  }

  /* ---- Reihenfolge: Überschrift, Foto, dann der Untertext ---- */
  .seitenkopf-bild{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    gap:0;
  }
  .seitenkopf-bild .kopf-text{
    display:contents;         /* löst den Kasten auf, die Teile ordnen sich selbst */
  }
  .seitenkopf-bild .marke{
    order:1;
    margin-top:calc(var(--kopfhoehe) + var(--luft-l));
  }
  .seitenkopf-bild .wort{order:2;margin-bottom:0}
  .seitenkopf-bild .kopf-foto{
    order:3;
    margin-top:var(--luft-l);
    margin-bottom:var(--luft-l);
  }
  .seitenkopf-bild .lead{order:4;max-width:38ch}
}

@media (max-width:56rem){
  /* ---- Zahlen: Zahl links, Erklärung daneben statt darunter ---- */
  .zahlen{gap:var(--luft-m)}
  .zahl{
    display:grid;
    grid-template-columns:minmax(4.5rem,auto) 1fr;
    align-items:baseline;
    gap:var(--luft-s);
  }
  .zahl b{font-size:clamp(2.4rem,11vw,3.4rem)}
  .zahl span{margin-top:0;font-size:1rem;line-height:1.4}
}

/* ============================================================
   Handy: überall Überschrift, dann Foto, dann der Text
   Der Textblock wird aufgelöst, damit sich seine Teile einzeln
   um das Foto herum anordnen lassen.
   ============================================================ */
@media (max-width:64rem){
  .paar:has(> .paar-bild){
    display:flex;
    flex-direction:column;
    align-items:stretch;   /* sonst zentriert das geerbte center waagerecht */
    text-align:left;
    gap:0;
  }
  .paar:has(> .paar-bild) > .paar-text{display:contents}
  .paar:has(> .paar-bild) > .paar-text > *{order:5;margin-top:var(--luft-s)}
  .paar:has(> .paar-bild) > .paar-text > .marke{order:1;margin-top:0}
  .paar:has(> .paar-bild) > .paar-text > h2{order:2;margin-top:0}
  /* Die Handschrift gehört zur Überschrift, nicht zum Fließtext */
  .paar:has(> .paar-bild) > .paar-text > .hand{order:3;margin-top:var(--luft-s)}
  .paar:has(> .paar-bild) > .paar-bild{
    order:4;
    margin-top:var(--luft-l);
    margin-bottom:var(--luft-s);
  }
  /* Der erste Absatz nach dem Foto braucht keinen doppelten Abstand */
  .paar:has(> .paar-bild) > .paar-text > .knopfreihe{margin-top:var(--luft-m)}
}

/* ---- Der Workshop-Abschnitt hat das Bild in derselben Spalte wie
        die Termine. Beide Spalten werden aufgelöst, damit sich das
        Bild zwischen Überschrift und Text schieben lässt. ---- */
@media (max-width:64rem){
  .paar-haftet{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:0}
  .paar-haftet > *{display:contents}
  .paar-haftet .marke{order:1}
  .paar-haftet h2{order:2}
  .paar-haftet .bildflaeche{
    order:3;
    margin-top:var(--luft-l);
    margin-bottom:var(--luft-s);
  }
  .paar-haftet .lead{order:4}
  .paar-haftet .knopfreihe{order:5;margin-top:var(--luft-m);margin-bottom:var(--luft-l)}
  .paar-haftet .termin{order:6}
}

/* ---- Kopfbilder: Portraits nicht am Kopf beschneiden ---- */
.kopf-foto img{object-position:50% 14%}

/* ---- Im mobilen Menü sieht Kontakt aus wie die übrigen Punkte ---- */
@media (max-width:52rem){
  .nav a.knopf{
    background:none;
    border:0;
    color:inherit;
    padding:.35rem 0;
    margin-left:0;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(2rem,9vw,3rem);
    font-weight:400;
    gap:.6rem;
  }
  .nav a.knopf:hover{background:none;transform:none;box-shadow:none;color:var(--sand-hell)}
  .nav a.knopf .pfeil{display:none}
}

/* ---- Startseite: auch hier Überschrift, Foto, dann der Text ---- */
@media (max-width:64rem){
  .hero-v2{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-align:left;
    gap:0;
    padding-top:calc(var(--kopfhoehe) + var(--luft-l));
  }
  .hero-v2 .hero-text{display:contents}
  /* Die Schreibschrift gehört zur Überschrift, nicht zum Fließtext.
     Sie steht deshalb direkt darunter, erst dann kommt das Foto. */
  .hero-v2 h1{order:1}
  .hero-v2 .hero-claim{order:2;margin-top:var(--luft-s)}
  .hero-v2 .hero-foto{
    order:3;
    margin-top:var(--luft-l);
    margin-bottom:var(--luft-l);
  }
  .hero-v2 .hero-zeilen{order:4;margin-top:0}
  .hero-v2 .knopfreihe{order:5;margin-top:var(--luft-m)}
}

/* Bild und Text enden auf gleicher Höhe. Ohne das ragt ein Bild mit
   festem Seitenverhältnis über einen kurzen Text hinaus. */
@media (min-width:64rem){
  .paar-hoehengleich{align-items:stretch}
  .paar-hoehengleich > .paar-bild{display:flex;flex-direction:column}
  .paar-hoehengleich > .paar-bild .bildflaeche{
    flex:1 1 auto;
    aspect-ratio:auto;
    min-height:22rem;
  }
  /* Das Bild darf die Höhe nicht mehr vorgeben, sonst bestimmt seine
     eigene Größe die Zeile und der Text wird nur mitgestreckt. */
  .paar-hoehengleich > .paar-bild .bildflaeche img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
}

/* ---- Kleine Zwischenüberschrift im Fließtext ---- */
.untertitel{
  font-size:.75rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--tinte-zart);
  margin:var(--luft-m) 0 var(--luft-s);
}
.dunkel .untertitel{color:var(--sand-hell)}

/* ---- Die drei Fragen sind der Kern des Workshops ---- */
.fragen{
  margin:var(--luft-m) 0;
  display:grid;
  gap:.5rem;
}
.fragen p{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  line-height:1.3;
  letter-spacing:-.008em;
  color:var(--tinte);
  margin:0;
  max-width:26ch;
}
.dunkel .fragen p{color:var(--papier)}

/* „auf Anfrage" steht an der Stelle einer Zahl und braucht deshalb
   etwas weniger Größe, sonst wirkt die Karte kopflastig. */
.preiskarte b.wort-preis{
  font-size:clamp(1.3rem,1.8vw,1.6rem);
  line-height:1.15;
}

/* Der Anker ist breiter als das Bild, beschnitten wird also oben und
   unten. Der Ausschnitt bleibt tief, damit das Boot sichtbar bleibt. */
.anker-strand .anker-bild img{object-position:50% 96%}