/* ==========================================================================
   Catrina Health Concept | Stylesheet
   Farbwelt: Farn. Fuenf weitere Fassungen zum Durchschalten in themes.css.
   ========================================================================== */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/libre-franklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/libre-franklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Design Tokens ---------- */
:root {
  /* Farben. Fassung Salbei, fest gewaehlt.
     --green ist der dunkle Strukturton: Ueberschriften, Fluegel des Zeichens,
     starke Textstellen. Nie ein Knopf.
     --clay und --accent-ink tragen den Salbeiakzent: Knoepfe, Links, Navigation.
     --logo-strich ist bewusst ein eigener Ton. Der senkrechte Strich im Zeichen
     ist das einzige warme Element der Marke und folgt dem Akzent nicht. */
  --cream:             #F7F3ED;
  --cream-deep:        #F0E9E0;
  --sand:              #E8DDD0;
  --sand-line:         #D0C6BA;
  --green:             #242420;
  --green-mid:         #6E6C68;
  --green-soft:        #83817C;
  --clay:              #6E7D69;
  --clay-soft:         #B9BEB2;
  --accent-ink:        #5A6656;
  --akzent-hauch:      #E9E7E0;
  --ink:               #20201D;
  --muted:             #6F6D69;
  --white:             #FFFCF5;
  --on-primary:        #FFFCF5;
  --on-primary-soft:   rgba(255, 252, 245, 0.78);
  --cta-bg:            #657361;
  --cta-bg-hover:      #556151;
  --cta-ink:           #FFFCF5;
  --btn-light-bg:      #FFFCF5;
  --btn-light-ink:     #242420;
  --logo-strich:       #C15A2C;

  /* Typografie */
  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Libre Franklin', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1.06rem, 1rem + 0.3vw, 1.15rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.5vw, 2.8rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.1vw, 3.8rem);


  /* Abstandsskala. Vorher hatte die Datei 35 verschiedene clamp-Werte, 34 davon
     genau einmal benutzt. Damit gibt es keinen Rhythmus, sondern 35 Einzelfaelle.
     Sieben Stufen, jede rund das 1,5-fache der vorigen. */
  --raum-1:    clamp(0.4rem, 0.7vw, 0.55rem);
  --raum-2:    clamp(0.65rem, 1.2vw, 0.9rem);
  --raum-3:    clamp(1rem, 1.9vw, 1.4rem);
  --raum-4:    clamp(1.5rem, 2.9vw, 2.2rem);
  --raum-5:    clamp(2.2rem, 4.4vw, 3.4rem);
  --raum-6:    clamp(3.2rem, 6.4vw, 5.2rem);
  --raum-7:    clamp(4.6rem, 9vw, 8rem);

  /* Maße */
  --container: 1660px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  /* Abstand von der Container-Innenkante bis zum Fensterrand – für randlose Bilder */
  --edge: max(0px, calc((100vw - var(--container)) / 2));
  --bleed: calc(var(--edge) + var(--gutter));
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius: 14px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 10px rgba(43, 48, 43, 0.05);
  --shadow-md: 0 18px 45px -22px rgba(43, 48, 43, 0.28);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--clay-soft); color: var(--green); }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--green);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--raum-3);
  line-height: 1.5;
  text-wrap: balance;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: currentColor;
  vertical-align: 0.28em;
  margin-right: var(--raum-1);
}
.eyebrow--center { text-align: center; }

.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--muted);
}

.script {
  font-family: var(--font-display);
  font-style: italic;
}

.text-center { text-align: center; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 52ch; }
.mt-1 { margin-top: var(--raum-2); }
.mt-2 { margin-top: var(--raum-4); }
.mt-3 { margin-top: var(--raum-5); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }
.container--mid { max-width: 980px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: var(--raum-6); }
.section--sand { background: var(--cream-deep); }
.section--green { background: var(--cta-bg); color: var(--cta-ink); }
.section--green h2, .section--green h3 { color: var(--cta-ink); }
.section--green .lead { color: var(--on-primary-soft); }
.section--green .eyebrow { color: var(--clay-soft); }
.section--green .eyebrow::before { background: var(--clay-soft); }

.section-head { max-width: 46rem; margin-bottom: var(--raum-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { text-align: center; }
.section-head .lead { margin-top: var(--raum-3); }

.rule {
  height: 1px;
  background: var(--sand-line);
  border: 0;
  margin-block: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-1);
  padding: var(--raum-2) var(--raum-4);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
              color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary {
  background: var(--cta-bg);
  color: var(--cta-ink);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--cta-bg-hover); }

.btn--clay { background: var(--clay); color: var(--white); }
.btn--clay:hover { background: var(--cta-bg-hover); }

.btn--outline {
  border: 1px solid var(--sand-line);
  color: var(--accent-ink);
  background: transparent;
}
.btn--outline:hover { border-color: var(--accent-ink); background: var(--akzent-hauch); }

.btn--light { background: var(--btn-light-bg); color: var(--btn-light-ink); }
.btn--light:hover { background: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  align-items: center;
  margin-top: var(--raum-4);
}
.btn-row--center { justify-content: center; }

/* Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-ink);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--sand-line);
  transition: border-color 0.35s var(--ease), gap 0.35s var(--ease);
}
.link-arrow:hover { border-color: var(--accent-ink); gap: var(--raum-2); }
.link-arrow svg { width: 14px; height: 14px; }

/* ---------- Header ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--green);
  color: var(--on-primary);
  padding: var(--raum-2) var(--raum-3);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  background: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), padding 0.4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--sand-line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 84px;
  transition: min-height 0.4s var(--ease);
}
.site-header.is-scrolled .header-inner { min-height: 70px; }

.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  line-height: 1.1;
}
.brand__mark { width: 44px; height: 44px; flex: none; display: block; }
/* Inline statt <img>, damit das Zeichen die Farbtoken erbt und beim
   Umschalten der Farbwelt sofort mitgeht. */
.bm-f { fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linejoin: round; }
.bm-k { fill: none; stroke: var(--logo-strich); stroke-width: 2.6; stroke-linecap: round; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.34rem;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.004em;
  white-space: nowrap;
}
.brand__text { display: inline-flex; flex-direction: column; gap: 0.4rem; }
.site-header.is-scrolled .brand__word { font-size: 1.2rem; }
.site-header.is-scrolled .brand__mark { width: 38px; height: 38px; }
.footer-brand .brand__word { font-size: 1.52rem; }
.footer-brand .brand__mark { width: 44px; height: 44px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  color: var(--green);
  letter-spacing: -0.005em;
}

.nav { display: flex; align-items: center; gap: var(--raum-4); }
.nav a {
  text-decoration: none;
  font-size: 0.94rem;
  color: var(--ink);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--clay);
  transition: width 0.35s var(--ease);
}
.nav a:hover { color: var(--accent-ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--accent-ink); }

.header-cta { display: inline-flex; }
.nav .btn { display: none; }

.brand, .nav-toggle { position: relative; z-index: 95; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: var(--raum-6) var(--gutter) var(--raum-5);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease);
    z-index: 90;
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateY(0); }
  .nav a {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    color: var(--green);
    padding-block: var(--raum-1);
    width: 100%;
    text-align: center;
    border-bottom: 1px solid var(--sand-line);
  }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: var(--raum-4); font-size: 0.8rem; }
}

html.nav-open, body.nav-open { overflow: hidden; }

/* ---------- Bildrahmen ---------- */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--arch { border-radius: 50vw 50vw var(--radius-lg) var(--radius-lg); }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }
/* Breites Bildband ueber die volle Containerbreite. Ein Querformat in die
   schmale, hohe Bildspalte des Auftakts zu zwingen haette den Bildinhalt
   zerschnitten; als Band steht es richtig. */
.frame--wide { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .frame--band { aspect-ratio: 4 / 3; } }

/* Fotos: leicht entsättigt und warm überlagert, damit sie zur Farbwelt passen.
   Der Farbwert ist bewusst fest und kein Token, sonst würde das Foto in jeder
   Farbwelt anders aussehen. */
.frame--photo { position: relative; }
.frame--photo img {
  object-position: 50% 18%;
  filter: saturate(0.9) contrast(1.02);
}
.frame--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #EDE4D6;
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
}
/* engerer Ausschnitt, damit dasselbe Foto auf der zweiten Seite anders wirkt */
.frame--photo-close img {
  object-position: 50% 20%;
  transform: scale(1.2);
  transform-origin: 50% 22%;
}

.frame--garten img { object-position: 52% 42%; }

/* dekorativer Rahmen-Versatz */
.frame-stack { position: relative; }
.frame-stack::before {
  content: '';
  position: absolute;
  inset: 1.75rem -1.75rem -1.75rem 1.75rem;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.frame-stack--arch::before { border-radius: 50vw 50vw var(--radius-lg) var(--radius-lg); }
.frame-stack > .frame { position: relative; z-index: 1; }

/* ---------- Hero (randlos bis zum Fensterrand) ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: min(720px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--sand) 85%, transparent) 0%, transparent 68%);
  z-index: 0;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
  min-height: min(84vh, 880px);
}
.hero__intro {
  align-self: center;
  max-width: 56rem;
  padding-block: var(--raum-6);
  padding-inline: var(--bleed) var(--raum-5);
  container-type: inline-size;
}
/* Schriftgroesse folgt der Spaltenbreite (cqi), nicht der Fensterbreite.
   Ohne Container-Query-Unterstuetzung greift die Regel fuer h1 daneben. */
.hero__title { margin-bottom: var(--raum-3); font-size: clamp(2.1rem, 10.5cqi, 4.1rem); }
.hero__intro p { color: var(--muted); font-size: var(--step-1); line-height: 1.62; }
.hero__intro p + p { margin-top: var(--raum-2); }
.hero__sig {
  margin-top: var(--raum-4);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--sand-line);
}
.hero__sig strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  color: var(--green);
  letter-spacing: -0.02em;
}
.hero__sig span { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.hero__media { position: relative; min-height: 32rem; }
.hero__media .frame {
  height: 100%;
  border-radius: clamp(110px, 18vw, 280px) 0 0 clamp(40px, 6vw, 90px);
}

/* ---------- Auftakt der Unterseiten ----------
   Die Unterseiten begannen mit einer schmalen Textzeile, die Startseite mit
   einem Hero ueber die volle Breite. Das war der eigentliche Bruch: nicht die
   Raender, sondern der Auftakt. Die Unterseiten nutzen jetzt dasselbe Raster,
   nur flacher, weil dort kein zweiter Absatz und keine Signatur stehen. */
/* ---------- Auftakt der Unterseiten ----------
   Rechnung, die vorher nicht aufging: die Bildspalte war ein fester Anteil des
   Rasters (0.7fr, also rund 700 px), das Bild darin aber auf 24 rem Hoehe
   begrenzt. Ein Hochformat ist dann 277 px breit und schwimmt in 700 px Spalte.

   Jetzt bestimmt das Bild die Spalte (auto) statt umgekehrt, und beide Seiten
   zusammen passen in 72 rem. Damit bleibt weder Luft zwischen Text und Bild
   noch wird etwas beschnitten. Hoehe und Breite des Bildes sind beide
   gedeckelt, sonst wuerde ein Querformat breiter als der Text. */
.hero--sub .hero__grid {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--raum-5);
  align-items: center;
  min-height: 0;
}
.hero--sub .hero__intro {
  padding-inline: 0;
  padding-block: var(--raum-6);
  max-width: none;
}
.hero--sub .hero__title { font-size: clamp(1.9rem, 8cqi, 2.9rem); }
.hero--sub .hero__media { min-height: 0; padding: 0; display: grid; place-items: center; }
.hero--sub .hero__media .frame {
  width: fit-content;
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--radius-lg);
}
.hero--sub .hero__media .frame img {
  width: auto;
  height: auto;
  /* Beide Grenzen sind noetig, aber sie greifen je nach Format verschieden:
     beim Hochformat bindet die Hoehe (416 px hoch, 277 breit), beim Querformat
     die Breite (448 breit, 299 hoch). Mit nur 20 rem Breite wurde das
     Querformat 320 mal 213 und damit zur Briefmarke neben dem Text. */
  max-height: 26rem;
  max-width: 28rem;
  object-fit: contain;
}
.hero--sub .btn-row { margin-top: var(--raum-4); }

/* Ohne Bild faellt die zweite Spalte weg, der Text behaelt aber dieselbe
   linke Kante wie ueberall sonst. */
.hero--sub.hero--ohne-bild .hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero--sub.hero--ohne-bild .hero__grid { min-height: 0; }

/* Zeichenfeld statt Foto, fuer Seiten ohne eigenes Bild. */
.hero__symbol {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 19rem;
}
.hero__symbol::before {
  content: '';
  position: absolute;
  width: min(26rem, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sand);
}
.hero__symbol::after {
  content: '';
  position: absolute;
  width: min(30rem, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  transform: translate(8%, -6%);
}
.hero__symbol svg {
  position: relative;
  z-index: 1;
  width: min(14rem, 42%);
  height: auto;
}
.hero__symbol .il-dark { fill: var(--green); }
.hero__symbol .il-dl { fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; }
.hero__symbol .il-al { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
.hero__symbol .il-a { fill: var(--clay); }
@media (max-width: 900px) {
  .hero--sub .hero__grid { grid-template-columns: 1fr; gap: var(--raum-4); }
  .hero--sub .hero__media { order: -1; }
  .hero--sub .hero__media .frame img { max-height: 18rem; max-width: 14rem; }
  .hero__symbol { min-height: 0; height: min(38vh, 16rem); }
}

.hero__badge {
  position: absolute;
  left: clamp(-1.25rem, -2vw, -0.5rem);
  bottom: clamp(2rem, 6vw, 4rem);
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--raum-2) var(--raum-3);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  z-index: 2;
  max-width: 15rem;
}
.hero__badge svg { width: 26px; height: 26px; color: var(--accent-ink); flex: none; }
.hero__badge span { font-size: 0.86rem; line-height: 1.4; color: var(--green); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; min-height: 0; height: min(62vh, 30rem); }
  .hero__media .frame { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .hero__intro {
    padding-inline: var(--gutter);
    padding-block: var(--raum-5) var(--raum-6);
  }
  .hero__badge { left: var(--gutter); bottom: 1.25rem; }
}

/* ---------- Schwerpunkte ----------
   Vier Eintraege auf einer Kante, durch Haarlinien getrennt. Die frueher
   waehlbare Kartenansicht ist mit der Entscheidung entfallen. */
.sw { max-width: 52rem; margin-inline: auto; }
.sw__item {
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-block: clamp(1.25rem, 2.8vw, 1.9rem);
  border-top: 1px solid var(--sand-line);
}
.sw__item:first-child { border-top: 0; padding-top: 0; }
.sw__item:last-child { padding-bottom: 0; }
.sw__med { flex: 0 0 auto; width: clamp(3rem, 6.5vw, 4.75rem); }
.sw__txt { min-width: 0; }
.sw h2 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.sw .lead { margin-bottom: 0.4rem; }
.sw__kreis {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--sand);
  display: grid;
  place-items: center;
}
.sw__kreis .illu { width: 76%; height: auto; display: block; }
.illu .il-dark { fill: var(--green); }
.illu .il-dl { fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; }
.illu .il-al { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
.illu .il-a  { fill: var(--clay); }

/* ---------- Karten-Raster ---------- */
.grid { display: grid; gap: var(--raum-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  padding: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.card--link { text-decoration: none; color: inherit; }
.card__more {
  margin-top: auto;
  padding-top: var(--raum-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.card__more svg { width: 13px; height: 13px; }
.card--link:hover .card__more, .card--link:focus-visible .card__more { opacity: 1; transform: none; }
@media (hover: none) { .card__more { opacity: 1; transform: none; } }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); font-size: 0.97rem; }
/* Dieselben vier Zeichen wie auf der Schwerpunkte-Seite, nur klein. Vorher
   standen hier andere Linien-Icons, also zwei verschiedene Bildsprachen fuer
   dieselben vier Themen. */
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sand);
  display: grid;
  place-items: center;
  color: var(--green);
  margin-bottom: var(--raum-2);
}
.card__icon svg { width: 78%; height: auto; display: block; }
.card__icon .il-dark { fill: var(--green); }
.card__icon .il-dl { fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; }
.card__icon .il-al { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
.card__icon .il-a { fill: var(--clay); }
.section--sand .card { background: var(--cream); }

/* Werte-Liste (Über mich) */
.values { display: grid; gap: 0; border-top: 1px solid var(--sand-line); }
.value {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: var(--raum-5);
  padding-block: var(--raum-4);
  border-bottom: 1px solid var(--sand-line);
  align-items: baseline;
}
.value h3 { font-size: var(--step-2); font-weight: 600; }
.value p { color: var(--muted); }
@media (max-width: 720px) { .value { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- Ablauf / Schritte ---------- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--raum-4);
  padding-block: var(--raum-4);
  border-top: 1px solid var(--sand-line);
  position: relative;
}
.step:last-child { border-bottom: 1px solid var(--sand-line); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--green-soft);
}
.step h3 { font-size: var(--step-2); margin-bottom: var(--raum-1); }
.step p { color: var(--muted); max-width: 54ch; }
.step__meta {
  display: inline-block;
  margin-top: var(--raum-2);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: 0.4rem; }
  .step__num { font-size: 1.6rem; }
}

/* ---------- Split-Abschnitt (Text + Bild) ---------- */
.split[id] { scroll-margin-top: var(--raum-6); }
/* Zweispaltige Abschnitte sassen im 1660er Container, das ergab Spalten von
   830 px und damit ein Foto von ueber 1000 px Hoehe. Die Startseite hatte das
   Problem nie, weil dort kein solcher Abschnitt mehr steht. Jetzt haben sie
   dieselbe Obergrenze wie die uebrigen Inhaltsabschnitte. */
.split {
  max-width: 68rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-6);
  align-items: center;
}
.split--narrow-media { grid-template-columns: 1fr 0.85fr; }
.split--reverse .split__media { order: 2; }

/* Bilder in Textspalten bleiben im Raster. Frueher liefen sie randlos bis zum
   Fensterrand, waehrend Kopfzeile und Textabschnitte an der Containerkante
   begannen. Das ergab auf jeder Seite zwei verschiedene linke Kanten. Jetzt
   haben alle Abschnitte denselben Rand.
   Das feste Seitenverhaeltnis ist noetig, weil der Rahmen sonst die volle
   natuerliche Hoehe des Fotos annimmt: ein Hochformat waere in einer 700 px
   breiten Spalte ueber 1000 px hoch. */
.split__media .frame { aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .split, .split--narrow-media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 26rem; margin-inline: auto; width: 100%; }
}

/* ---------- Zitat ---------- */
.quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.32;
  color: var(--green);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.quote--light { color: var(--cream); }
.quote__author {
  display: block;
  margin-top: var(--raum-3);
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CTA-Band ---------- */
.cta-band { background: var(--cta-bg); color: var(--cta-ink); position: relative; overflow: hidden; }
.cta-band::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -55%;
  transform: translateX(-50%);
  width: min(900px, 110vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--clay) 24%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; text-align: center; max-width: 44rem; margin-inline: auto; }
.cta-band h2 { color: var(--cta-ink); }
.cta-band p { color: var(--on-primary-soft); font-size: var(--step-1); margin-top: var(--raum-3); }
.cta-band .pill { margin-top: var(--raum-4); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-soft);
}
.pill span { display: inline-flex; align-items: center; gap: var(--raum-2); }
.pill span::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.pill span:last-child::after { display: none; }
.pill--dark { color: var(--accent-ink); }

/* ---------- Kontakt ---------- */
.contact-grid {
  /* Das Formular steht in der zweiten Spalte. Mit 0.9fr in einem 68-rem-Raster
     blieben davon rund 500 px, und zwei Felder nebeneinander werden darin zu
     schmal zum Ausfuellen. Jetzt bekommt das Formular die groessere Haelfte. */
  max-width: 74rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: var(--raum-6);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: var(--raum-3); margin-top: var(--raum-4); }
.contact-list a, .contact-list div {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  text-decoration: none;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  background: var(--cream);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.contact-list a:hover { border-color: var(--accent-ink); background: var(--akzent-hauch); transform: translateX(4px); }
.contact-list svg { width: 20px; height: 20px; color: var(--accent-ink); flex: none; }
.contact-list a > span, .contact-list div > span { display: grid; gap: 0.15rem; }
.contact-list strong { display: block; font-weight: 500; color: var(--green); font-size: 0.95rem; }
.contact-list small { color: var(--muted); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }

.form { display: grid; gap: var(--raum-2); }
.form__row { display: grid; gap: var(--raum-2); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: var(--raum-2) var(--raum-2);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.98rem;
  font-weight: 300;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px var(--akzent-hauch);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--raum-2); }
.field--check input { width: 1.05rem; height: 1.05rem; margin-top: 0.35rem; accent-color: var(--green); padding: 0; }
.field--check label { text-transform: none; letter-spacing: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.form__note { font-size: 0.82rem; color: var(--muted); }

/* Honigtopf: fuer Menschen unsichtbar, fuer Skripte ausfuellbar */
.hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.form__status {
  margin-top: 0.25rem;
  padding: var(--raum-2) var(--raum-2);
  border-radius: var(--radius);
  font-size: 0.92rem;
  border: 1px solid var(--sand-line);
  background: var(--cream-deep);
  color: var(--ink);
}
.form__status[data-state="ok"] { border-color: var(--accent-ink); color: var(--accent-ink); }
.form__status[data-state="fehler"] { border-color: var(--accent-ink); color: var(--accent-ink); }
.form.is-busy { opacity: 0.6; pointer-events: none; }

.form-panel {
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  padding: var(--raum-4);
}

/* ---------- Zertifizierungssiegel ---------- */
.seal { display: inline-block; line-height: 0; transition: transform 0.4s var(--ease); }
.seal img { width: 104px; height: auto; }
.seal:hover { transform: scale(1.04); }
.seal--sm img { width: 76px; }
.footer-brand .seal--sm { display: inline-block; margin-top: var(--raum-3); }

.qualification {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-3);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  background: var(--cream-deep);
  flex-wrap: wrap;
}
.qualification .seal img { width: 92px; }
.qualification h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.qualification p { color: var(--muted); font-size: 0.95rem; }
.qualification a { color: var(--accent-ink); text-underline-offset: 3px; }

/* ---------- Hinweisbox ---------- */
.note {
  border-left: 2px solid var(--clay);
  padding: 0.35rem 0 0.35rem var(--raum-3);
  color: var(--muted);
  font-size: 0.92rem;
}
.note strong { color: var(--green); font-weight: 500; }

.callout {
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  padding: var(--raum-4);
}

/* ---------- Preis ---------- */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-1);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--green);
}
.price small { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Seitenkopf (Unterseiten) ---------- */
/* Der Seitenkopf laeuft auf derselben Breite wie die Textabschnitte darunter,
   also container--mid und zentriert. Vorher hatte er eine eigene Breite und war
   linksbuendig, waehrend alles darunter mittig stand: zwei verschiedene Kanten
   auf jeder Unterseite. Die Startseite hatte das Problem nie, weil sie
   durchgehend zentriert ist. */

.hero--sub .breadcrumb { margin-bottom: var(--raum-3); }
.breadcrumb {
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--raum-3);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); }

/* Fehlende Pflichtangaben im Impressum. Bewusst auffaellig: ein Impressum,
   in dem ein Platzhalter uebersehen wird, ist schlimmer als gar keines, weil
   es vollstaendig aussieht. */
.luecke {
  background: #FBE3E3;
  color: #8A1C1C;
  border: 1px dashed #C06B6B;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-weight: 600;
  font-size: 0.94em;
}
.luecke::before { content: "fehlt: "; opacity: 0.75; font-weight: 400; }
.prose .hinweis {
  font-size: var(--step--1);
  color: var(--muted);
  border-left: 2px solid var(--sand-line);
  padding-left: var(--raum-2);
  margin-top: var(--raum-1);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--cream-deep);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

/* ---------- Prosa (Impressum / Datenschutz) ---------- */
.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { font-size: var(--step-2); margin-top: var(--raum-5); margin-bottom: var(--raum-2); }
.prose h3 { font-size: var(--step-1); margin-top: var(--raum-4); margin-bottom: var(--raum-1); }
.prose p, .prose ul { color: var(--muted); }
.prose ul { padding-left: var(--raum-3); display: grid; gap: 0.4rem; margin-top: var(--raum-2); }
.prose li::marker { color: var(--accent-ink); }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.prose > *:first-child { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cream-deep);
  border-top: 1px solid var(--sand-line);
  padding-block: var(--raum-6) var(--raum-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--raum-5);
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; gap: var(--raum-4); } }
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--raum-3);
}
.footer-links { display: grid; gap: var(--raum-1); }
.footer-links a { text-decoration: none; font-size: 0.95rem; color: var(--ink); transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--accent-ink); }
.footer-brand .brand { margin-bottom: 0.25rem; }
.footer-brand p { color: var(--muted); font-size: 0.95rem; margin-top: var(--raum-2); max-width: 32ch; }
.footer-disclaimer {
  margin-top: var(--raum-5);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--sand-line);
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 70ch;
}
.footer-bottom {
  margin-top: var(--raum-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-bottom nav { display: flex; gap: var(--raum-3); flex-wrap: wrap; }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--accent-ink); }

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Helfer ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}