*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top: 96px}
body{margin:0;background:var(--paper-light);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:17px;font-weight:400;line-height:1.72;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}


/* ============================================================
   ROOT
   ============================================================ */
:root {
  --paper: #fff6df;
  --paper-light: #fffaf0;
  --paper-deep: #efe2d6;
  --apricot: #f2d686;
  --apricot-light: #fbefc6;
  --terracotta: #d7a72d;
  --terracotta-deep: #74530d;
  --copper: #c38367;
  --copper-deep: #754536;
  --copper-light: #e8bda5;
  --ink: #2b2722;
  --ink-soft: #625a50;
  --cognac: #bd8b18;
  --cognac-deep: #74530d;
  --night: #302a23;
  --line: rgba(95, 72, 25, 0.17);
  --white: #fffdf7;
  --content: 1240px;
  --text: 720px;
  --shadow-soft: 0 24px 70px rgba(72, 54, 19, 0.13);
  --radius-small: 8px;
  --radius-medium: 28px;
  --radius-large: 72px;
}

/* ============================================================
   FARBSCHEMATA FÜR SECTIONS
   Anwendung im HTML, zum Beispiel:
   <section class="section farbschema-muschel">

   Jedes Schema legt fest:
   1. Hintergrund der Section
   2. Hintergrund normaler Kacheln
   3. Hintergrund hervorgehobener Kacheln
   4. Farben für Primary- und Secondary-Buttons
   5. Farben für Textlinks

   Die Klassen gold, braun, gruen und creme bleiben weiterhin
   als gezielte Farbabweichung für einzelne Elemente verfügbar.
   ============================================================ */

/* CREME: sehr hell, ruhig, goldene Bedienelemente */
.farbschema-creme {
  --section-aufhellung: rgba(255, 253, 247, 0.88);
  --section-hintergrund: #fffaf0;
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #f1d8ca;
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}

/* ELFENBEIN: warmes, fast weißes Beige mit goldenen Bedienelementen */
.farbschema-elfenbein {
  --section-aufhellung: rgba(255, 253, 247, 0.82);
  --section-hintergrund: #fff7ee;
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #f1d8ca;
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}

/* PORZELLAN: sehr heller Verlauf mit einem zarten Rosé-Ausklang */
.farbschema-porzellan {
  --section-aufhellung: rgba(255, 253, 247, 0.82);
  --section-hintergrund: linear-gradient(135deg, #fffaf5 0%, #fbf3ed 56%, #f6e7de 100%);
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #f1d8ca;
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}

/* PUDER: stilles, leicht rosiges Off-White mit goldenen Bedienelementen */
.farbschema-puder {
  --section-aufhellung: rgba(255, 253, 247, 0.78);
  --section-hintergrund: #fbf4ef;
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #f1d8ca;
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}

/* MUSCHEL: warmes Rosé-Beige, helle Kacheln, goldene Bedienelemente */
.farbschema-muschel {
  --section-aufhellung: rgba(255, 253, 247, 0.86);
  --section-hintergrund:
    radial-gradient(circle at 92% 94%, rgba(215, 167, 45, 0.12), transparent 31%),
    linear-gradient(135deg, #f8eee7 0%, #f3e2d5 52%, #f7e9de 100%);
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #f1d8ca;
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}

/* SAND: beige, etwas kräftigere Kacheln, braune Bedienelemente */
.farbschema-sand {
  --section-aufhellung: rgba(255, 253, 247, 0.76);
  --section-hintergrund: #efe2d6;
  --kachel-hintergrund: #e9dfd5;
  --kachel-hervorgehoben: #ddcbbb;
  --element-farbe: #a89686;
  --element-hover: #7c6e61;
  --element-text: #fffaf3;
  --element-hover-text: #fffaf3;
  --element-schatten: rgba(92, 72, 57, 0.18);
  --element-fokus: rgba(168, 150, 134, 0.42);
  --secondary-text: #6f5f52;
  --secondary-hintergrund: transparent;
  --secondary-border: rgba(111, 95, 82, 0.55);
  --textlink-farbe: #765d49;
  --textlink-hover: #594436;
  --textlink-fokus: rgba(118, 93, 73, 0.32);
}

/* SALBEI: grünlich hell, helle Kacheln, grüne Bedienelemente */
.farbschema-salbei {
  --section-aufhellung: rgba(255, 253, 247, 0.55);
  --section-hintergrund: #e7ebe5;
  --kachel-hintergrund: #f2f4f0;
  --kachel-hervorgehoben: #dce5df;
  --element-farbe: #567568;
  --element-hover: #486358;
  --element-text: #fffdf7;
  --element-hover-text: #fffdf7;
  --element-schatten: rgba(72, 99, 88, 0.18);
  --element-fokus: rgba(86, 117, 104, 0.42);
  --secondary-text: #486358;
  --secondary-hintergrund: transparent;
  --secondary-border: rgba(72, 99, 88, 0.55);
  --textlink-farbe: #486358;
  --textlink-hover: #324a40;
  --textlink-fokus: rgba(72, 99, 88, 0.35);
  --intro-weichzeichner: 244, 247, 242; /* Intro: Fläche und Weichzeichner hinter dem Text (#f4f7f2) */
}

/* AUBERGINE: helles, pudriges Aubergine mit gedeckten Bedienelementen */
.farbschema-aubergine {
  --section-aufhellung: rgba(255, 252, 249, 0.72);
  --section-hintergrund: #eee4e8;
  --kachel-hintergrund: #faf6f7;
  --kachel-hervorgehoben: #dfcdd5;
  --deko-farbe: rgba(132, 91, 110, 0.84);
  --element-farbe: #795568;
  --element-hover: #513a46;
  --element-text: #fffaf7;
  --element-hover-text: #fffaf7;
  --element-schatten: rgba(81, 58, 70, 0.20);
  --element-fokus: rgba(121, 85, 104, 0.40);
  --secondary-text: #674858;
  --secondary-hintergrund: rgba(255, 250, 247, 0.48);
  --secondary-border: rgba(103, 72, 88, 0.52);
  --textlink-farbe: #704d5e;
  --textlink-hover: #4c3440;
  --textlink-fokus: rgba(112, 77, 94, 0.32);
}

/* COGNAC: warmes Sandbeige mit tiefen Cognac-Akzenten */
.farbschema-cognac {
  --section-aufhellung: rgba(255, 253, 247, 0.70);
  --section-hintergrund: #f2e9db;
  --kachel-hintergrund: #faf6ee;
  --kachel-hervorgehoben: #eadbc8;
  --deko-farbe: rgba(128, 84, 60, 0.86);
  --element-farbe: #603d2d;
  --element-hover: #302a23;
  --element-text: #fffaf2;
  --element-hover-text: #fffaf2;
  --element-schatten: rgba(96, 61, 45, 0.20);
  --element-fokus: rgba(128, 84, 60, 0.40);
  --secondary-text: #603d2d;
  --secondary-hintergrund: rgba(255, 253, 247, 0.52);
  --secondary-border: rgba(128, 84, 60, 0.52);
  --textlink-farbe: #603d2d;
  --textlink-hover: #80543c;
  --textlink-fokus: rgba(128, 84, 60, 0.32);
}

/* Gemeinsame Darstellung aller Section-Farbschemata */
.section-grundaufbau.farbschema-creme,
.section-grundaufbau.farbschema-elfenbein,
.section-grundaufbau.farbschema-porzellan,
.section-grundaufbau.farbschema-puder,
.section-grundaufbau.farbschema-muschel,
.section-grundaufbau.farbschema-sand,
.section-grundaufbau.farbschema-salbei,
.section-grundaufbau.farbschema-aubergine,
.section-grundaufbau.farbschema-cognac,
.section-grundaufbau.farbschema-kupfer {
  background:radial-gradient(circle at 12% 9%, var(--section-aufhellung), transparent 32%),var(--section-hintergrund)}
  
/* ============================================================
   SCHRIFTARTEN
   ============================================================ */
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-v21-latin-regular.woff2")format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-v21-latin-500.woff2")format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-garamond-v21-latin-italic.woff2")format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:300;src:url('../fonts/manrope-v20-latin-300.woff2')format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:400;src:url('../fonts/manrope-v20-latin-regular.woff2')format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:500;src:url('../fonts/manrope-v20-latin-500.woff2')format('woff2')}
@font-face{font-display:swap;font-family:'Manrope';font-style:normal;font-weight:600;src:url('../fonts/manrope-v20-latin-600.woff2')format('woff2')}


/* ============================================================
   SCHRIFTFORMATIERUNG
   ============================================================ */
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;text-wrap:balance}
h1{max-width:680px;margin-bottom:26px;font-size:clamp(52px, 5.35vw, 82px);line-height:0.96;letter-spacing:-0.035em}
h2{margin-bottom:24px;font-size:clamp(42px, 5vw, 72px);line-height:1.04;letter-spacing:-0.025em}
h3{margin-bottom:14px;font-size:clamp(28px, 3vw, 42px);line-height:1.08}


.ueberstand-abschneiden{overflow:clip}
.seitenkopf{position:fixed;top:0;right:0;left:0;z-index:1000;isolation:isolate;border-bottom:1px solid rgba(95, 72, 25, 0.08);background:rgba(255, 250, 240, 0.76);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);transition:min-height 220ms ease, background 220ms ease, box-shadow 220ms ease}
.seitenkopf.is-scrolled{background: rgba(255, 250, 240, 0.96);box-shadow:0 10px 34px rgba(59, 47, 23, 0.1)}
.seitenkopf.is-scrolled .header-inner{min-height: 76px}
.seitenkopf.is-scrolled .brand img{height: 43px}
.header-inner{width: min(var(--content), calc(100% - 40px));min-height:94px;margin:0 auto;padding:7px 0;display:flex;align-items:center;justify-content: space-between;gap:28px;transition:min-height 220ms ease}


/* ============================================================
  LOGO UND WORTMARKE
   ============================================================ */
.brand{display:flex;align-items:center;gap:13px;min-width:max-content}
.brand img{width:auto;height:50px;filter:brightness(0) saturate(100%) invert(48%) sepia(91%) saturate(534%) hue-rotate(5deg) brightness(91%) contrast(87%);transition:height 220ms ease}
.brand-name,.brand-subline{display:block}
.brand-name{font-size:13px;font-weight:600;letter-spacing:0.17em}
.brand-subline{margin-top:2px;color:var(--ink-soft);font-size:12px;line-height:1.3}

/* ============================================================
   NAVIGATION DESKTOP
   ============================================================ */
.desktop-nav{display:flex;align-items:center;gap:clamp(14px, 2vw, 30px)}
.desktop-nav a{position:relative;padding:10px 0;font-size:13px}
.desktop-nav a::after{content:"";position:absolute;right:0;bottom:5px;left:0;height:1px;background:var(--cognac);transform:scaleX(0);transform-origin:right;transition:transform 240ms ease}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ============================================================
   NAVIGATION MOBIL
   ============================================================ */
.menue-oeffnen-schliessen-schalter{display:none;width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.menue-oeffnen-schliessen-schalter span{display:block;width:18px;height:1px;margin:5px auto;background:currentColor}
.mobile-nav{position:fixed;inset:0;z-index:1100;width:100%;height:100dvh;padding:24px 28px 36px;overflow-y:auto;background:#fffaf0;color:#2b2722;opacity:0;visibility:hidden;transform:translateX(100%);transition:transform 0.4s ease, opacity 0.3s ease, visibility 0.3s ease}
.mobile-nav::before{content:"";position:absolute;top:190px;left:0;width:84px;height:410px;border-radius:0 999px 999px 0;background:#e5b32b;pointer-events:none}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:translateX(0)}
.mobile-nav-shell{position:relative;z-index:1;min-height:calc(100dvh - 60px)}
.mobile-nav-head{display:flex;align-items:flex-start;justify-content:space-between;gap: 18px}
.mobile-nav-brand{display:flex;align-items:center;gap:12px;min-width:0;color:#2b2722;text-decoration:none}
.mobile-nav-brand img{display:block;flex:0 0 auto;width:auto;height:46px;filter:brightness(0) saturate(100%) invert(48%) sepia(91%) saturate(534%) hue-rotate(5deg) brightness(91%) contrast(87%)}
.mobile-nav-markenname{display:block;min-width: 0}
.mobile-nav-brand .brand-name{display:block;white-space:nowrap;font-family:"Manrope",sans-serif;font-size:13px;font-weight:600;line-height:1.2;letter-spacing:0.15em}
.mobile-nav-brand .brand-subline{display:block;max-width:220px;margin-top:4px;font-family:"Manrope",sans-serif;font-size:13px;line-height:1.35;color:#6d6258}
.menu-close{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;padding:0;border:1px solid rgba(43, 39, 34, 0.28);border-radius:50%;background:transparent;color:#2b2722;font-family:"Manrope",sans-serif;font-size:28px;line-height:1;cursor:pointer}
.mobile-nav-content{width: calc(100% - 70px);margin:38px 0 0 70px;}
.mobile-nav-inner{display:flex;flex-direction:column;align-items: flex-start}
.mobile-nav-inner .nav-link{display:inline-block;padding:10px 0;font-family:"Manrope",sans-serif;font-size:21px;font-weight:500;line-height:1.3;color:#2b2722;text-decoration:none;transition:color 0.2s ease,transform 0.2s ease}
.mobile-nav-inner .nav-link:hover,.mobile-nav-inner .nav-link:focus-visible{color:#8a620e;transform:translateX(6px)}
@media (max-width: 520px) {
  .mobile-nav{padding:20px 22px 32px}
  .mobile-nav::before{top:175px;width:68px;height:390px}
  .mobile-nav-brand img{height:42px}
  .mobile-nav-brand .brand-subline{max-width:190px}
  .mobile-nav-content{width:calc(100% - 56px);margin:32px 0 0 56px}
  .mobile-nav-inner .nav-link{font-size:20px}
}
.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}

/* ============================================================
   SEITENÜBERGREIFEND: INTRO
   ============================================================ */
.seiten-intro{position:relative;min-height:min(880px,100svh);overflow:hidden;background:var(--paper-light)}
.seiten-intro::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.98) 0%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.92) 31%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.52) 51%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.02) 72%),linear-gradient(0deg, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.2), transparent 30%);pointer-events:none}/*Weicher Übergang zum Bild*/
.seiten-intro::before{content:"";position:absolute;z-index:2;top:24%;left:-86px;width:172px;height:360px;border-radius:0 90px 90px 0;background:rgba(215, 167, 45, 0.88);mix-blend-mode:multiply;pointer-events:none}/*Oval*/
.intro-innenbereich{position:relative;z-index:2;width:min(var(--content), calc(100% - 40px));min-height:min(880px, 100svh);margin:0 auto;display:flex;align-items:center}
.intro-textbereich{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;width:min(640px, 54%);padding:156px 0 122px}
.ueberzeile{margin:0 0 26px;color:var(--cognac);font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase}
.intro-einleitung{max-width:520px;margin-bottom:34px;color:var(--cognac-deep);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(23px, 2vw, 29px);font-style:italic;line-height:1.3}
.intro-text{max-width:680px;margin-bottom:34px;color:var(--ink-soft);font-size:clamp(17px,1.25vw,19px);line-height:1.72}
.intro-bild{position:absolute;inset:0;margin:0;background:var(--paper-deep)}
.intro-bild img{width:100%;height:100%;object-fit:cover;object-position:center center}
/* Zusatzzeile unter Buttons (Intro, Begrüßung): einheitlich */
.intro-zusatz,.begruessung-zusatz{margin:26px 0 0;color:var(--ink-soft);font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
@media (max-width: 800px){.intro-zusatz,.begruessung-zusatz{margin-top:18px;font-size:10px}}
.intro-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.intro-buttons .btn{min-height:54px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:18px 4px 18px 4px;font-family:var(--font-sans);font-size:1rem;font-weight:500;line-height:1;text-decoration:none;transition:color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease}
.intro-buttons .btn-primary{color:#241f1a;background-color:#dfad2d;border-color:#dfad2d;box-shadow:0 8px 22px rgba(103, 72, 29, 0.14)}
.intro-buttons .btn-secondary{color:#46382e;background-color:rgba(255, 250, 240, 0.5);border-color:rgba(70, 56, 46, 0.5)}
.intro-buttons .btn-primary:hover,.intro-buttons .btn-secondary:hover{color:#fffaf0;background-color:#6f4e3b;border-color:#6f4e3b;box-shadow:0 10px 26px rgba(82, 55, 34, 0.2);transform:translateY(-2px)}
.intro-buttons .btn:active{box-shadow:none;transform:translateY(0)}
.intro-buttons .btn:focus-visible{outline:3px solid rgba(223, 173, 45, 0.42);outline-offset:4px}
@media (max-width: 560px) {
  .intro-buttons{align-items:stretch;flex-direction:column}
  .intro-buttons .btn{width:100%}
}

/* ============================================================
   ALLGEMEIN: Grundbausteine
   ============================================================ */
.section-einleitung{max-width:1050px;color:var(--ink-soft);font-size:clamp(18px, 1.35vw, 20px);line-height:1.7;margin:0 0 52px}
.section-grundaufbau{position:relative;padding:clamp(76px, 8vw, 112px) 20px}
.section-innenbereich {width:min(var(--content), 100%);margin:0 auto}

.text-link{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:15px;font-weight:600;letter-spacing:0.04em;color:var(--terracotta-deep)}


/* ============================================================
   KACHELN: gemeinsame Abstände und sichere Links an Rundungen
   Die jeweilige Eckrichtung und Kachelgröße bleiben bewusst
   beim betreffenden Bereich definiert.
   ============================================================ */

.abstand-von-rundung {
  margin-left: 24px;
}

.haltungs-kachel h3,
.blog-kachel h3 {
  color: var(--ink);
  font-size: clamp(27px, 2.4vw, 35px);
}



/* ============================================================
   INDEXSEITE – Begrüßungsbereich
   Aufbau: Text links, Bildkachel rechts
   Vorkommen: 2. Section (SCHÖN, DASS DU DA BIST)
   ============================================================ */
.begruessung-grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(300px, 0.54fr);gap:clamp(54px, 7vw, 100px);align-items:center}
.begruessung-text{max-width:650px}
.fliesstext{color:var(--ink-soft)}
.begruessung-unterschrift{margin-top:14px;color:#8b5f32;font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-style:italic;line-height:1.05}
.begruessung-unterschrift strong{display:inline-block;margin-top:5px;font-size:2.25rem;font-weight:500;letter-spacing:0.01em}
.begruessung-portrait{height:480px;margin:0;overflow:hidden;border-radius:var(--radius-large) 0 var(--radius-large) 0;box-shadow:var(--shadow-soft)}
.begruessung-portrait img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   INDEXSEITE – Angebot
   Aufbau: Text, Kacheln
   Vorkommen: 3. Section (ANGEBOT)
   ============================================================ */
.angebot-index-gridsystem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(310px,auto));gap:22px}
.angebot-index-angebotskachel{position:relative;min-height:310px;overflow:hidden;border-radius:0 var(--radius-large) 0 var(--radius-large);display:flex;flex-direction:column;border:1px solid rgba(169,79,52,0.12);background:var(--paper-light);color:var(--ink);box-shadow:0 22px 55px rgba(111,68,45,0.09)}
.angebot-index-angebotskachel:first-child{grid-column:span 6;grid-row:span 2}
.angebot-index-angebotskachel:nth-child(2){grid-column:span 6;border-radius:var(--radius-large) 0 var(--radius-large) 0}
.angebot-index-angebotskachel:nth-child(3){grid-column:span 6}
.angebot-index-angebotskachel img{position:relative;width:100%;height:290px;flex:0 0 auto;object-fit:cover;filter:saturate(0.94) brightness(1.05);transition:transform 800ms cubic-bezier(.2,.75,.2,1)}
.angebot-index-angebotskachel:first-child img{height:590px;object-position:60% 8%}
.angebot-index-angebotskachel:nth-child(2) img{object-position:center 43%}
.angebot-index-angebotskachel:nth-child(3) img{object-position:center 52%}
.angebot-index-angebotskachel:hover img{transform:scale(1.035)}
.angebot-index-angebotskachel-content{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.kachel-innenabstand{padding:34px}
.kachel-text{max-width:560px;margin-bottom:22px;color:var(--ink-soft)}

/* ============================================================
   INDEXSEITE – Ablauf
   Aufbau: Kachel, 3 Textbereiche
   Vorkommen: 4. Section (Ablauf)
   ============================================================ */
.ablauf-grid{display:grid;grid-template-columns:minmax(340px, 0.9fr) minmax(0, 1.1fr);gap:clamp(56px, 8vw, 120px);align-items:start}
.ablauf-bildgestaltung{position:sticky;top:118px;height:min(70vh, 720px);min-height:560px;overflow:hidden;border-radius:0 var(--radius-large) 0 var(--radius-large);box-shadow:var(--shadow-soft)}
.ablauf-bildgestaltung img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(0.9) contrast(0.96) brightness(1.01)}
@media (max-width: 760px) {
.ablauf-bildgestaltung{min-height:460px;height:62vh;position:relative;top:auto}
.ablauf-textbereich{padding-top: 0}
.ablauf-textbereich > h2{margin-bottom:20px}
.ablauf-textbereich-artikel{min-height:0;padding:26px 0 38px}
}
.ablauf-textbereich{padding-top:26px}
.ablauf-textbereich > h2{margin-bottom:24px}
.breitenbegrenzung{max-width:650px;margin-bottom:44px}
@media (max-width: 900px) {
.breitenbegrenzung{margin-bottom:36px}
}
.ablauf-textbereich-artikel{min-height:0;padding:30px 0 42px;border-top:1px solid var(--line)}
.ablauf-textbereich-artikel-nummer{display:block;margin-bottom:18px;color:var(--cognac);font-family:"Cormorant Garamond",Georgia,serif;font-size:26px}
.ablauf-textbereich-artikel h3{margin-bottom:14px}
.ablauf-textbereich-artikel p{margin:0;max-width:620px;color:var(--ink-soft)}
.ablauf-textbereich-artikel .textlink{display:inline-flex;margin-top:24px}

/* ============================================================
   INDEXSEITE – Stimme eines Gastes
   Aufbau: Text, Kacheln
   Vorkommen: 5. Section
   ============================================================ */
.gaststimme-grid{width:min(var(--content), 100%);margin:0 auto;display:grid;grid-template-columns:minmax(0, 1fr)clamp(290px, 28vw, 410px);gap: clamp(70px, 9vw, 145px);align-items:center}
.gaststimme-bereich{position:relative;overflow:hidden}
.gaststimme-textbereich{max-width:780px}
.gaststimme-textbereich h2{max-width:760px;margin:0;font-size:clamp(46px, 4.4vw, 66px);line-height:1.03;letter-spacing:-0.03em;text-wrap:balance}
.gaststimme-zitat{position:relative;max-width:720px;margin:42px 0 0;padding:0}
.gaststimme-zitat::before{content:"“";display:block;height:36px;margin-bottom:15px;color:var(--copper-deep);font-family:"Cormorant Garamond",Georgia,serif;font-size:68px;font-weight:400;line-height:0.75}
.gaststimme-zitat p {margin:0;color:var(--ink-soft);font-family:"Manrope",system-ui,sans-serif;font-size:clamp(18px, 1.35vw, 21px);font-weight:400;line-height:1.72;letter-spacing:-0.01em}
.gaststimme-quelle{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:18px;font-family:"Manrope",system-ui,sans-serif}
.gaststimme-quelle cite{color:var(--cognac-deep);font-size:14px;font-style:normal;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
.gaststimme-quelle span{color:var(--ink-soft);font-size:14px}
.gaststimme-link{margin-top:28px}
.gaststimme-bild {position:relative;width:100%;margin:0;overflow:hidden;aspect-ratio:4 / 5;border-radius:0 var(--radius-medium) 0 var(--radius-medium);
box-shadow:0 20px 55px rgba(57, 40, 24, 0.08)}
.gaststimme-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% center}

/* ============================================================
   INDEXSEITE – Was Männer bewegt
   Aufbau: 3 Kacheln links, Text rechts
   Vorkommen: 6. Section
   ============================================================ */
.themenwelten-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(280px,0.72fr);grid-template-areas:"list heading";gap:clamp(60px,10vw,150px);align-items:start}
.themenwelten-kopfbereich{grid-area:heading;position:sticky;top:130px}
.haltungs-gridsystem{grid-area:list;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:760px){.haltungs-gridsystem{grid-template-columns:1fr}.haltungs-kachel{min-height:300px}.haltungs-kachel:first-child{grid-column:auto}}
.haltungs-kachel{min-height:350px;display:flex;flex-direction:column;border:1px solid rgba(169,79,52,0.12);border-radius:0 var(--radius-medium) 0 var(--radius-medium);background:var(--paper-light);box-shadow:0 18px 42px rgba(111,68,45,0.08);transition:transform 240ms ease,box-shadow 240ms ease}
.haltungs-kachel:first-child{grid-column:1/-1;min-height:280px}
.haltungs-kachel:nth-child(3){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.haltungs-kachel:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(111,68,45,0.13)}
.haltungs-kachel .textlink{margin-top:auto;align-self:flex-start}

/* ============================================================
   INDEXSEITE – Gutschein
   Aufbau: text, rechts Bild Gutschein
   Vorkommen: 7. Section
   ============================================================ */

.gutschein-bereich{overflow:hidden}
.gutschein-bereich::before{content:"";position:absolute;top:50%;left:-126px;width:252px;height:470px;border-radius:0 126px 126px 0;background:var(--paper-light);transform:translateY(-50%);opacity:0.84}
.gutschein-aufteilung{position:relative;z-index:1;display:grid;grid-template-columns:minmax(320px,0.78fr) minmax(460px,1.22fr);gap:clamp(64px,8vw,120px);align-items:center;overflow:visible}
.gutschein-bildbereich{position:relative;min-height:460px;margin:0;display:flex;flex-direction:column;justify-content:center;overflow:visible;background:transparent}
.gutschein-darstellung{position:relative;width:min(100%,670px);aspect-ratio:1.58/1;margin:0 auto;transform:rotate(-2deg)}
.gutschein-darstellung::before{content:"";position:absolute;inset:24px -20px -18px 22px;border-radius:22px 0 22px 0;background:rgba(255,250,240,0.68);box-shadow:0 28px 65px rgba(72,54,19,0.16)}
.gutschein-karte{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(116,83,13,0.14);border-radius:22px 0 22px 0;background:var(--paper-light);box-shadow:0 26px 70px rgba(72,54,19,0.2)}
.gutschein-karte>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(0.88) brightness(1.04)}
.gutschein-karte-verlauf{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,240,0.99)0%,rgba(255,250,240,0.96)43%,rgba(255,250,240,0.42)67%,rgba(255,250,240,0.04)100%)}
.gutschein-karte-textbereich{position:relative;z-index:1;width:58%;height:100%;padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.gutschein-karte-ueberzeile{color:var(--terracotta-deep);font-size:10px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase}
.gutschein-karte-textbereich strong{max-width:310px;margin-top:20px;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(36px,4.5vw,60px);font-weight:400;line-height:0.98}
.gutschein-karte-unterzeile{margin-top:18px;color:var(--ink-soft);font-size:15px;line-height:1.55}
.gutschein-karte-markenbereich{display:flex;align-items:center;gap:12px;margin-top:auto}
.gutschein-karte-logo{display:block;width:30px;height:auto;flex:0 0 auto;filter:brightness(0) saturate(100%) invert(57%) sepia(94%) saturate(1117%) hue-rotate(7deg) brightness(91%) contrast(91%)}
.gutschein-karte-markenname{display:block;color:var(--ink);font-size:11px;font-weight:600;letter-spacing:0.18em}
.gutschein-karte-markenbereich small{display:block;margin-top:3px;color:var(--ink-soft);font-size:8px;line-height:1.35}
.gutschein-textbereich{max-width:590px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.gutschein-textbereich .section-einleitung{max-width:560px;margin-bottom:28px}
@media(max-width:1020px){.gutschein-aufteilung{grid-template-columns:minmax(280px,0.85fr) minmax(380px,1.15fr);gap:52px}}
@media(max-width:760px){.gutschein-bereich::before{top:70px;left:-68px;width:136px;height:240px;border-radius:0 68px 68px 0;transform:none}.gutschein-aufteilung{grid-template-columns:1fr;gap:38px}.gutschein-textbereich{max-width:680px;padding:0}.gutschein-bildbereich{min-height:390px}.gutschein-darstellung{width:calc(100% - 30px)}.gutschein-karte-textbereich{width:62%;padding:28px 24px}}



/* ============================================================
   INDEXSEITE – Erfahrungen
   Aufbau: Überschrift und Link, darunter drei Stimmen-Kacheln
   Vorkommen: 8. Section
   ============================================================ */
.erfahrungen-kopfbereich{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:54px}
.erfahrungen-kopfbereich h2{margin-bottom:0}
.erfahrungen-gridsystem{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,0.88fr);grid-template-rows:repeat(2,minmax(230px,auto));gap:22px}
.erfahrungs-kachel{position:relative;min-height:230px;margin:0;padding:36px 32px 30px;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);background:#f4e3da;box-shadow:0 18px 45px rgba(57,40,24,0.07)}
.erfahrungs-kachel:nth-child(2){transform:none;border-radius:var(--radius-medium) 0 var(--radius-medium) 0;background:#fffaf5}
.erfahrungs-kachel:nth-child(3){background:#fffaf5}
.erfahrungs-kachel:first-child{grid-row:1/span 2;min-height:478px;padding:clamp(42px,5vw,66px);display:flex;flex-direction:column;justify-content:center;background:#f1d8ca}
.erfahrungs-kachel:first-child p{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(25px,2.2vw,32px);line-height:1.3}
.erfahrungs-kachel::before{content:"“";display:block;margin-bottom:10px;color:var(--copper-deep);font-family:"Cormorant Garamond",Georgia,serif;font-size:72px;line-height:0.6}
.erfahrungs-kachel p{color:var(--ink-soft)}
.erfahrungs-kachel cite{color:var(--cognac-deep);font-size:12px;font-style:normal;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
@media(max-width:1020px){.erfahrungen-gridsystem{grid-template-columns:1fr;grid-template-rows:none}.erfahrungs-kachel{max-width:760px}.erfahrungs-kachel:first-child{grid-row:auto;min-height:360px}.erfahrungs-kachel:nth-child(2){transform:none}}
@media(max-width:760px){.erfahrungen-kopfbereich{align-items:start;flex-direction:column}}

/* ============================================================
   INDEXSEITE – Blog
   Aufbau: Überschrift und Link, darunter drei Artikel-Kacheln
   Vorkommen: 9. Section
   ============================================================ */
.blog-kopfbereich{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px}
.blog-kopfbereich>div{max-width:1050px}
.blog-kopfbereich .section-einleitung{margin-bottom:0}
.blog-kopfbereich .textlink{flex:0 0 auto;margin-bottom:8px}
@media(max-width:800px){.blog-kopfbereich{align-items:flex-start;flex-direction:column;gap:24px}.blog-kopfbereich .textlink{margin-bottom:0}}
.blog-bereich{position:relative;overflow:hidden}
.blog-bereich .section-innenbereich{position:relative;z-index:1}
.blog-gridsystem{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.blog-kachel{grid-column:span 4;overflow:hidden;border-radius:0 var(--radius-medium) 0 var(--radius-medium);background:var(--paper-light)}
.blog-kachel:nth-child(2){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.blog-kachel-bild{position:relative;aspect-ratio:4/3;overflow:hidden}
.blog-kachel-bild img{width:100%;height:100%;object-fit:cover;filter:saturate(0.96) brightness(1.02);transition:transform 600ms ease;object-position:right center}
.blog-kachel:hover img{transform:scale(1.035)}
.blog-kategorie{display:block;margin-bottom:16px;color:var(--cognac);font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
@media(max-width:1020px){.blog-kachel{grid-column:span 6}.blog-kachel:last-child{grid-column:4/span 6}}
@media(max-width:760px){.blog-kachel,.blog-kachel:last-child{grid-column:1/-1;transform:none}}


/* ============================================================
   INDEXSEITE – E-Book
   Aufbau: Cover links, Text und Button rechts
   Vorkommen: 10. Section
   ============================================================ */
.e-book-aufteilung{display:grid;grid-template-columns:0.8fr 1.2fr;overflow:hidden;border-radius:0 var(--radius-large) 0 var(--radius-large);background:#e9dfd5;color:var(--ink)}
.e-book-bildbereich{display:grid;place-items:center;min-height:620px;padding:50px;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,0.42),transparent 34%),linear-gradient(145deg,#eee5dc,#ddcbbb 68%,#c9ad94)}
.e-book-cover{display:block;width:min(360px,82%);height:auto;padding:0;border:0;background:none;box-shadow:22px 28px 55px rgba(61,40,27,0.24);transform:rotate(-3deg)}
.e-book-textbereich{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(48px,7vw,90px);background:#e9dfd5}
.e-book-textbereich .section-einleitung{max-width:650px}
@media(max-width:760px){.e-book-aufteilung{grid-template-columns:1fr}.e-book-bildbereich{min-height:430px}}
@media(max-width:480px){.e-book-textbereich,.e-book-bildbereich{padding:38px 26px}}




/* ============================================================
   INDEXSEITE – Kontakt
   Aufbau: Text und Telegram links, Kontaktformular rechts
   Vorkommen: 11. Section
   ============================================================ */
.kontakt-bereich{position:relative;overflow:hidden;color:var(--ink)}
.kontakt-bereich::before{content:"";position:absolute;left:-90px;bottom:12%;width:180px;height:410px;border-radius:0 90px 90px 0;background:rgba(86,117,104,0.13)}
.kontakt-aufteilung{position:relative;z-index:1;display:grid;grid-template-columns:0.84fr 1.16fr;gap:clamp(60px,9vw,130px);align-items:start}
.kontakt-textbereich{position:sticky;top:128px}
.kontakt-aktionen{margin-top:32px}
.telegram-hinweis{max-width:520px;margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
.telegram-hinweis h3{margin:0 0 14px;font-size:clamp(26px,2.2vw,34px);line-height:1.08}
.telegram-hinweis p:not(.ueberzeile){color:var(--ink-soft);margin:0 0 18px;font-size:15px}
.kontakt-formularbereich{padding:clamp(34px,5vw,58px);border:1px solid rgba(86,117,104,0.2);border-radius:0 var(--radius-large) 0 var(--radius-large);background:#f2f4f0;box-shadow:0 24px 60px rgba(72,99,88,0.1)}
.kontakt-formularbereich .button{margin-top:32px}
.formularfeld{margin-top:26px}
.formularfeld label{display:block;margin-bottom:7px;color:var(--terracotta-deep);font-size:11px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
.formularfeld input,.formularfeld textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(86,117,104,0.34);border-radius:0;outline:0;background:transparent;color:var(--ink)}
.formularfeld textarea{min-height:110px;resize:vertical}
.formularfeld input:focus,.formularfeld textarea:focus{border-color:#567568}
.formular-botfalle{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){.kontakt-aufteilung{grid-template-columns:1fr}.kontakt-textbereich{position:relative;top:auto}}
@media(max-width:480px){.kontakt-formularbereich{padding:26px 22px}}


/* ============================================================
   INDEXSEITE – Footer
   Aufbau: 3-spaltig
   Vorkommen: 12. Section
   ============================================================ */
.site-footer{background:#3a332b;color:rgba(255,255,255,0.82)}
.footer-inner{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(42px,5.5vw,82px);align-items:stretch}
.footer-brand{color:var(--white);font-size:16px;font-weight:600;letter-spacing:0.17em}
.footer-heading{display:block;color:var(--white);font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:20px}
.footer-contact p{margin-bottom:22px;font-size:14px;line-height:1.7}
.footer-brand-center p,.footer-ebook p{margin-bottom:10px;font-size:14px;line-height:1.7}
.footer-contact a{display:block;width:fit-content;margin-top:10px;font-size:14px}
.footer-contact>a[href^="mailto:"],.footer-contact>a[href^="tel:"]{padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,0.72);color:var(--white)}
.footer-contact .text-link,.footer-ebook-link{display:inline-flex;align-items:center;gap:10px;padding:0 0 4px;border-bottom:1px solid currentColor;color:var(--apricot);font-size:14px;font-weight:600;letter-spacing:0.04em;transition:color 180ms ease,gap 180ms ease}
.footer-contact .text-link:hover,.footer-contact .text-link:focus-visible,.footer-ebook-link:hover,.footer-ebook-link:focus-visible{gap:14px;color:var(--paper-light)}
.footer-brand-center{width:min(100%,300px);justify-self:start;text-align:center}
.footer-brand-center img{width:auto;height:68px;margin:0 auto 18px;filter:brightness(0) saturate(100%) invert(48%) sepia(91%) saturate(534%) hue-rotate(5deg) brightness(91%) contrast(87%)}
.footer-brand-center p{margin:12px auto 26px;max-width:280px}
.footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.footer-social a{padding:7px 10px;border:1px solid rgba(255,255,255,0.42);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.footer-ebook h3{margin:0 0 18px;color:var(--white);font-size:clamp(29px,3vw,39px);line-height:1.12}
.footer-ebook-link{margin-top:12px}
.footer-navigation{padding:0 20px 58px}
.footer-navigation-inner{width:min(var(--content),100%);margin:0 auto;padding-top:40px;border-top:1px solid rgba(255,255,255,0.25)}
.footer-nav-group+.footer-nav-group{margin-top:44px}
.footer-nav-group nav{display:flex;flex-wrap:wrap;column-gap:clamp(14px,2vw,30px);row-gap:14px;margin-top:-25px}
.footer-navigation a{width:fit-content;color:rgba(255,255,255,0.74);font-size:14px}
.footer-navigation a,.footer-legal a{position:relative;padding:10px 0}
.footer-navigation a::after,.footer-legal a::after{content:"";position:absolute;right:0;bottom:5px;left:0;height:1px;background:var(--cognac);transform:scaleX(0);transform-origin:right;transition:transform 240ms ease}
.footer-navigation a:hover::after,.footer-navigation a:focus-visible::after,.footer-legal a:hover::after,.footer-legal a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.footer-legal{padding:22px 20px;background:rgba(255,250,240,0.96);color:var(--terracotta-deep)}
.footer-legal-inner{width:min(var(--content),100%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-legal nav{display:flex;flex-wrap:wrap;gap:26px}
.footer-legal a,.footer-legal p{margin:0;font-size:14px}



[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(.2, .72, .2, 1), transform 820ms cubic-bezier(.2, .72, .2, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1020px) {
  .desktop-nav {
    display: none;
  }

  .menue-oeffnen-schliessen-schalter {
    display: block;
  }

  .intro-innenbereich {
    min-height: 760px;
  }

  .intro-textbereich {
    width: min(620px, 64%);
    padding-right: 0;
  }

  .intro-bild {
    height: 100%;
  }

  /* Startseite – 1. Section: schmaleres Text-Bild-Raster */
  .begruessung-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
    gap: 48px;
  }

  .angebot-index-gridsystem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .angebot-index-angebotskachel:first-child,
  .angebot-index-angebotskachel:nth-child(2),
  .angebot-index-angebotskachel:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    min-height: 400px;
  }

  .angebot-index-angebotskachel img,
  .angebot-index-angebotskachel:first-child img {
    height: 250px;
  }

 .themenwelten-grid {
  grid-template-columns: 1fr;
  grid-template-areas:
    "heading"
    "list";
  gap: 54px;
}

.themenwelten-kopfbereich {
  position: relative;
  top: auto;
  max-width: 760px;
}

}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

 .seitenkopf .brand-subline {
  display: none;
}

  .intro-innenbereich {
    width: calc(100% - 40px);
    min-height: 930px;
    align-items: flex-start;
  }

  .intro-textbereich {
    width: 100%;
    padding: 140px 0 238px;
  }

  .intro-bild {
    height: 100%;
  }

  .intro-bild img {
    object-position: 63% center;
  }

  .seiten-intro::after {
    background: linear-gradient(180deg, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.99) 0%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.95) 53%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.5) 73%, rgba(var(--intro-weichzeichner, 255, 250, 240), 0.04) 100%);
  }

  .seiten-intro::before {
    top: 18%;
    left: -68px;
    width: 112px;
    height: 260px;
  }

  /* Startseite – 1. Section: Text und Bild untereinander */
  .begruessung-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .begruessung-portrait {
    height: 380px;
  }

  
  .ablauf-grid,
  .footer-inner {
    grid-template-columns: 1fr;
   
  }

  .angebot-index-gridsystem {
    grid-template-columns: 1fr;
    grid-template-rows: none;
	 gap: 24px;
  }

  .angebot-index-angebotskachel:first-child,
  .angebot-index-angebotskachel:nth-child(2),
  .angebot-index-angebotskachel:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }

  .angebot-index-angebotskachel img,
  .angebot-index-angebotskachel:first-child img {
    height: 230px;
  }


  .themenwelten-kopfbereich {
    position: relative;
    top: auto;
  }







  .portrait-section {
    padding: 84px 20px;
  }

  .portrait-stage {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .portrait-copy {
    max-width: 680px;
  }

  .portrait-visual {
    width: 100%;
    max-width: 560px;
    justify-self: start;
    aspect-ratio: 4 / 5;
  }

  .portrait-visual img {
    object-position: 48% center;
  }





 

.gaststimme-grid {
  grid-template-columns: 1fr;
  gap: 54px;
}

.gaststimme-textbereich h2 {
  font-size: clamp(42px, 10vw, 56px);
}

.gaststimme-zitat {
  margin-top: 34px;
}

.gaststimme-zitat::before {
  height: 32px;
  margin-bottom: 13px;
  font-size: 62px;
}

.gaststimme-zitat p {
  font-size: 18px;
  line-height: 1.68;
}


.gaststimme-bild {
  width: min(100%, 430px);
  justify-self: start;
}

.abstand-nach-oben {

  margin-top: 28px;}
  	
  .telegram-band-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }



  .footer-contact,
  .footer-brand-center,
  .footer-ebook {
    min-height: 0;
    padding: 38px 0;
  }

  .footer-brand-center,
  .footer-ebook {
    border-top: 1px solid rgba(255, 255, 255, 0.32);
  }

  .footer-nav-group + .footer-nav-group {
    margin-top: 38px;
  }

  .footer-nav-group nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 14px;
  }

  .footer-legal-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

}

@media (max-width: 440px) {
  .footer-nav-group nav {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .header-inner {
    width: calc(100% - 32px);
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 40px;
  }


  .button {
    width: 100%;
  }



 

  .kachel-innenabstand {
    padding: 26px 22px;
  }

  .abstand-von-rundung {
    margin-left: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


 @media (max-width: 700px) {
  h2 {
    line-height: 1.08;
  }
}




.footer-contact > a[href^="mailto:"],
.footer-contact > a[href^="tel:"] {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  color: var(--white);
}

.footer-contact > a[href^="tel:"] {
  margin-bottom: 22px;
}
/* ============================================================
   BUTTONS (class="button primary gruen")
   ============================================================ */
/* ------------------------------------------------------------
   ALLGEMEINE BUTTONFORM (Keine Gewichtung und keine Farbe)
   ------------------------------------------------------------ */
.button{display:inline-flex;align-items:center;justify-content:center;min-width:220px;min-height:54px;padding:0 30px;border:1px solid transparent;border-radius:18px 4px 18px 4px;font-family:"Manrope",system-ui,sans-serif;font-size:16px;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;appearance:none;cursor:pointer;transition:color 220ms ease,background-color 220ms ease,border-color 220ms ease,box-shadow 220ms ease,transform 220ms ease}
.button:hover{transform:translateY(-2px)}
.button:active{box-shadow:none;transform:translateY(0)}
.button:focus-visible{outline:3px solid var(--element-fokus);outline-offset:4px}
@media (max-width: 480px) {
.button{width:100%;min-width:0}
}
/* ------------------------------------------------------------
   PRIMARY (Gefüllter Button)
   ------------------------------------------------------------ */
.primary{color:var(--element-text);background-color:var(--element-farbe);border-color:var(--element-farbe);box-shadow:0 8px 22px var(--element-schatten)}
.primary:hover,.primary:focus-visible{color:var(--element-hover-text);background-color:var(--element-hover);border-color:var(--element-hover);box-shadow:0 10px 26px var(--element-schatten)}

/* ------------------------------------------------------------
   SECONDARY (Transparenter Button mit Kontur)
   ------------------------------------------------------------ */
.secondary{color:var(--secondary-text);background-color:var(--secondary-hintergrund);border-color:var(--secondary-border);box-shadow:none}
.secondary:hover,.secondary:focus-visible{color:var(--element-hover-text);background-color:var(--element-hover);border-color:var(--element-hover);box-shadow:0 8px 22px var(--element-schatten)}

/* ------------------------------------------------------------
   GOLD
   Entspricht dem bisherigen goldenen Hero-Button
   ------------------------------------------------------------ */

.gold {
  --element-farbe: #dfad2d;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(103, 72, 29, 0.18);
  --element-fokus: rgba(223, 173, 45, 0.42);

  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 250, 240, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.5);
  
   /* Textlink */
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(189, 139, 24, 0.35);
}


/* ------------------------------------------------------------
   GRÜN
   Entspricht den Buttons der Kontaktsection
   ------------------------------------------------------------ */

.gruen {
  --element-farbe: #567568;
  --element-hover: #486358;
  --element-text: #fffdf7;
  --element-hover-text: #fffdf7;
  --element-schatten: rgba(72, 99, 88, 0.18);
  --element-fokus: rgba(86, 117, 104, 0.42);
  
   /* Textlink */
  --textlink-farbe: #486358;
  --textlink-hover: #324a40;
  --textlink-fokus: rgba(72, 99, 88, 0.35);
}


/* ------------------------------------------------------------
   BRAUN
   Entspricht dem bisherigen E-Book-Button
   ------------------------------------------------------------ */

.braun {
  --element-farbe: #a89686;
  --element-hover: #7c6e61;
  --element-text: #fffaf3;
  --element-hover-text: #fffaf3;
  --element-schatten: rgba(92, 72, 57, 0.18);
  --element-fokus: rgba(168, 150, 134, 0.42);
}


/* ------------------------------------------------------------
   CREME
   Für dunkle Hintergründe
   ------------------------------------------------------------ */

.creme {
  --element-farbe: #fff6df;
  --element-hover: #e9dfd5;
  --element-text: #302a23;
  --element-hover-text: #302a23;
  --element-schatten: rgba(48, 42, 35, 0.16);
  --element-fokus: rgba(255, 246, 223, 0.48);
}


/* ============================================================
   TEXTLINKS (class="textlink gold")
   ============================================================ */
.textlink{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding-bottom:4px;border-bottom:1px solid currentColor;color:var(--textlink-farbe);font-family:"Manrope",system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1.4;letter-spacing:0.02em;text-decoration:none;transition:color 180ms ease,gap 180ms ease,border-color 180ms ease}
.textlink:hover{gap:14px;color:var(--textlink-hover)}
.textlink:focus-visible{gap:14px;color:var(--textlink-hover);outline:3px solid var(--textlink-fokus);outline-offset:5px}
.textlink span{display:inline-block;transition:transform 180ms ease}
.textlink:hover span,.textlink:focus-visible span{transform:translateX(3px)}



/* ============================================================
   KI Auszeichnung Bilder
   ============================================================ */
.ki-generiert::after{content:"AI";position:absolute;right:6px;bottom:6px;z-index:4;font-family:"Manrope",sans-serif;font-size:10px;font-weight:400;line-height:1;letter-spacing:0.05em;color:rgba(255,255,255,0.72);pointer-events:none}
.angebot-index-angebotskachel-bild{position:relative;flex:0 0 auto;overflow:hidden}



/* ============================================================
   KACHELFARBEN AUS DEM FARBSCHEMA
   class="kachel" übernimmt die normale Kachelfarbe der Section.
   class="kachel hervorgehoben" nutzt deren Hervorhebungsfarbe.
   ============================================================ */
.farbschema-creme .kachel,
.farbschema-elfenbein .kachel,
.farbschema-porzellan .kachel,
.farbschema-puder .kachel,
.farbschema-muschel .kachel,
.farbschema-sand .kachel,
.farbschema-salbei .kachel,
.farbschema-cognac .kachel,
.farbschema-kupfer .kachel {
  background: var(--kachel-hintergrund);
}

.farbschema-creme .kachel.hervorgehoben,
.farbschema-elfenbein .kachel.hervorgehoben,
.farbschema-porzellan .kachel.hervorgehoben,
.farbschema-puder .kachel.hervorgehoben,
.farbschema-muschel .kachel.hervorgehoben,
.farbschema-sand .kachel.hervorgehoben,
.farbschema-salbei .kachel.hervorgehoben,
.farbschema-cognac .kachel.hervorgehoben,
.farbschema-kupfer .kachel.hervorgehoben {
  background: var(--kachel-hervorgehoben);
}
/* KUPFER: Muschelhintergrund mit kupferfarbenen Bedienelementen */
.farbschema-kupfer {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #f4e5da;
  --kachel-hintergrund: #fffaf5;
  --kachel-hervorgehoben: #ead3c5;

  --deko-farbe: rgba(184, 111, 82, 0.84);

  --element-farbe: #754536;
  --element-hover: #302a23;
  --element-text: #fffaf0;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(117, 69, 54, 0.20);
  --element-fokus: rgba(184, 111, 82, 0.40);

  --secondary-text: #754536;
  --secondary-hintergrund: rgba(255, 250, 240, 0.62);
  --secondary-border: rgba(117, 69, 54, 0.62);

  --textlink-farbe: #754536;
  --textlink-hover: #302a23;
  --textlink-fokus: rgba(184, 111, 82, 0.35);
}
/* Farbzuweisung im Unterseiten-Intro */
.seiten-intro.farbschema-kupfer {
  background: var(--section-hintergrund);
}

.seiten-intro.farbschema-kupfer::before {
  background: var(--deko-farbe);
  mix-blend-mode: multiply;
}

/* Angebotsseite: Logo in derselben Kupferfarbe wie das Oval */
.angebotsseite .brand img,
.angebotsseite .mobile-nav-brand img {
  filter: brightness(0) saturate(100%) invert(26%) sepia(23%) saturate(884%) hue-rotate(329deg) brightness(183%) contrast(114%);
}

.angebotsseite .seiten-intro.farbschema-kupfer {
  --deko-farbe: #c96f50;
}

.angebotsseite .seiten-intro.farbschema-kupfer .primary {
  color: #fffaf5;
  background-color: #c96f50;
  border-color: #c96f50;
}
.angebotsseite .seiten-intro.farbschema-kupfer .primary:hover,
.angebotsseite .seiten-intro.farbschema-kupfer .primary:focus-visible {
  color: #fffaf5;
  background-color: #684053;
  border-color: #684053;
}
.angebotsseite .seiten-intro.farbschema-kupfer .secondary:hover,
.angebotsseite .seiten-intro.farbschema-kupfer .secondary:focus-visible {
  color: #fffaf5;
  background-color: #684053;
  border-color: #684053;
}

.seiten-intro.farbschema-kupfer .intro-einleitung {
  color: var(--element-farbe);
}

.seiten-intro.farbschema-kupfer .intro-text,
.seiten-intro.farbschema-kupfer .intro-zusatz {
  color: #584d45;
}

.angebot-object-position{object-position:top !important}

/* ============================================================
   ANGEBOTSSEITE
   Nur die Anordnung ist seitenspezifisch. Schriftgrößen, Sections,
   Kacheln, Buttons und Farben folgen den allgemeinen Regeln.
   ============================================================ */

/* ANGEBOTSSEITE – Sprunglinks im Intro */
.intro-angebotslinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.intro-angebotslinks a{color:inherit;text-decoration:none}
.intro-angebotslinks a:hover,.intro-angebotslinks a:focus-visible{color:var(--element-farbe)}

/* ANGEBOTSSEITE – Tantra-Massage, Gay-Tantra und Ausbildung */
.angebotsbereich{--page-accent:var(--textlink-farbe)}
.angebots-einstieg{display:grid;grid-template-columns:minmax(320px,0.76fr) minmax(0,1.24fr);gap:clamp(54px,8vw,112px);align-items:center;margin-bottom:clamp(62px,8vw,104px)}
.angebots-bild{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:0 var(--radius-large) 0 var(--radius-large);box-shadow:var(--shadow-soft)}
.angebots-bild img{width:100%;height:100%;object-fit:cover}
.angebots-kurzbeschreibung{max-width:700px}
.angebots-kurzbeschreibung .section-einleitung{margin-bottom:0}
.angebots-inhalt{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(250px,320px);justify-content:space-between;gap:clamp(56px,8vw,112px);align-items:start}
.inhalts-textbereich{max-width:var(--text);color:var(--ink-soft)}
.inhalts-textbereich p{margin:0 0 1.35em}
.inhalts-textbereich strong{color:var(--ink);font-weight:600}
.inhalts-textbereich a:not(.textlink){color:var(--textlink-farbe);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:0.18em}
.inhalts-textbereich ul,.inhalts-textbereich ol{margin:1.6em 0;padding-left:1.35em}
.inhalts-textbereich li+li{margin-top:0.6em}
.inhaltsabschnitt{padding:0 0 34px;border-bottom:1px solid var(--line)}
.inhaltsabschnitt+.inhaltsabschnitt{padding-top:34px}
.inhaltsabschnitt:last-child{border-bottom:0}
.hinweis-kachel{margin:48px 0;padding:clamp(28px,4vw,42px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}
.hinweis-kachel>:last-child{margin-bottom:0}
.rahmen-kachel{position:sticky;top:116px;padding:32px;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 45px rgba(72,54,19,0.08)}
.rahmen-kachel h3{margin-bottom:24px;font-size:32px}
.rahmen-liste{margin:0}
.rahmen-liste>div{padding:15px 0;border-top:1px solid var(--line)}
.rahmen-liste dt{color:var(--textlink-farbe);font-size:10px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
.rahmen-liste dd{margin:4px 0 0;color:var(--ink);font-size:15px;line-height:1.55}
.rahmen-kachel .button{width:100%;margin-top:24px}
.kleingedrucktes{margin:20px 0 0;color:var(--ink-soft);font-size:11px;line-height:1.65}
@media(max-width:1020px){.angebots-einstieg{grid-template-columns:minmax(0,1fr) minmax(300px,0.72fr);gap:52px}.angebots-inhalt{grid-template-columns:minmax(0,1fr) minmax(240px,290px);gap:52px}}
@media(max-width:760px){.angebots-einstieg,.angebots-inhalt{grid-template-columns:1fr}.angebots-bild{width:min(100%,480px);aspect-ratio:4/4.8}.angebots-einstieg{margin-bottom:54px}.rahmen-kachel{position:relative;top:auto}}
@media(max-width:480px){.rahmen-kachel,.hinweis-kachel{padding:25px 22px}}

/* ANGEBOTSSEITE – Gutschein */
.angebotsseite .gutschein-bereich .angebots-inhalt{margin-top:clamp(70px,9vw,120px)}

/* ============================================================
   AUSBILDUNGSSEITE
   Allgemeine Abstände, Überschriften, Überzeilen, Farbschemata,
   Buttons, Textlinks, Kacheln, Gaststimme, Kontakt und Footer
   folgen den gemeinsamen Regeln der Indexseite.
   ============================================================ */

/* AUSBILDUNGSSEITE – Intro */
.ausbildungsseite{--ausbildung-salbei:#6f806f;--ausbildung-salbei-dunkel:#465849;--ausbildung-salbei-hell:#e5ebe2}
.ausbildungsseite .seiten-intro{background:var(--ausbildung-salbei-hell)}
.ausbildungsseite .seiten-intro::before{background:rgba(111,128,111,0.84);mix-blend-mode:multiply}
.ausbildungsseite .seiten-intro::after{background:linear-gradient(90deg,rgba(238,242,235,0.99) 0%,rgba(238,242,235,0.95) 31%,rgba(238,242,235,0.61) 51%,rgba(238,242,235,0.06) 73%),linear-gradient(0deg,rgba(238,242,235,0.2),transparent 30%)}
.ausbildungsseite .intro-einleitung{color:var(--ausbildung-salbei-dunkel)}
.ausbildungsseite .intro-text,.ausbildungsseite .intro-zusatz{color:#4e584e}
@media(max-width:760px){.ausbildungsseite .seiten-intro::after{background:linear-gradient(180deg,rgba(238,242,235,0.99) 0%,rgba(238,242,235,0.96) 53%,rgba(238,242,235,0.58) 73%,rgba(238,242,235,0.08) 100%)}}

/* AUSBILDUNGSSEITE – Überblick */
.ausbildung-einstieg-grid{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(260px,330px);justify-content:space-between;gap:clamp(60px,9vw,124px);align-items:start}
.ausbildung-einstieg-text{max-width:var(--text)}
.ausbildung-einstieg-text>p:not(.ueberzeile):not(.section-einleitung){margin:0 0 1.35em}
.ausbildung-rahmen{border-color:rgba(70,88,73,0.18)}
.ausbildung-rahmen .textlink{margin-top:22px}
@media(max-width:900px){.ausbildung-einstieg-grid{grid-template-columns:1fr}.ausbildung-rahmen{position:relative;top:auto}}

/* AUSBILDUNGSSEITE – Haltung */
.ausbildung-kopfbereich{max-width:790px;margin-bottom:clamp(54px,7vw,86px)}
.ausbildung-kopfbereich-breit{max-width:920px}
.ausbildung-kopfbereich .section-einleitung{margin-bottom:0}
.ausbildung-haltung-grid{display:grid;grid-template-columns:minmax(300px,0.82fr) minmax(0,1.18fr);gap:clamp(48px,6vw,84px);align-items:start}
.ausbildung-zitatkachel{margin:0;padding:clamp(28px,4vw,42px);border:1px solid rgba(70,88,73,0.18);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}


.ausbildung-zitatkachel p:not(.ueberzeile){margin:0;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.4vw,31px);line-height:1.28}
.ausbildung-zitatkachel footer{margin-top:24px;color:var(--ausbildung-salbei-dunkel);font-size:11px;font-style:normal;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}
@media(max-width:1020px){.ausbildung-haltung-grid{grid-template-columns:minmax(270px,0.9fr) minmax(0,1.1fr);gap:40px}}
@media(max-width:760px){.ausbildung-haltung-grid{grid-template-columns:1fr;gap:42px}}

/* AUSBILDUNGSSEITE – Ausbildungsweg */
.ausbildungsweg-zeitstrahl{position:relative;max-width:920px;margin:0 auto;padding-left:clamp(34px,5vw,58px)}
.ausbildungsweg-zeitstrahl::before{content:"";position:absolute;top:8px;bottom:8px;left:6px;width:1px;background:rgba(116,83,13,0.28)}
.ausbildungsweg-zeitstrahl::after{content:"";position:absolute;z-index:2;bottom:0;left:-2px;width:11px;height:11px;border:3px solid var(--section-hintergrund);border-radius:50%;background:var(--ink);box-sizing:content-box}
.ausbildungsweg-schritt{position:relative;padding:0 0 clamp(58px,7vw,86px)}
.ausbildungsweg-schritt::before,.praxisphase::before{content:"";position:absolute;z-index:2;top:7px;left:calc(-1 * clamp(34px,5vw,58px) - 2px);width:11px;height:11px;border:3px solid var(--section-hintergrund);border-radius:50%;background:var(--cognac);box-sizing:content-box}
.ausbildungsweg-schritt-basis::before{background:var(--ausbildung-salbei-dunkel)}
.ausbildungsweg-nummer{display:none}
.ausbildungsweg-schritt-text{min-width:0;padding:0 0 12px;border-bottom:1px solid var(--line)}
.ausbildungsweg-schritt-abschluss{padding-bottom:18px}
.ausbildungsweg-schritt-abschluss .ausbildungsweg-schritt-text{border-bottom:0}
.ausbildungsweg-schritt-text h3{overflow-wrap:anywhere}
.praxisphase h3{margin:0;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-weight:400}
.praxisphase p:not(.ueberzeile){color:var(--ink-soft);font-size:clamp(16px,1.2vw,18px);line-height:1.75}
.ausbildungsweg-schritt ul{margin:22px 0 24px;padding-left:1.2em}
.ausbildungsweg-schritt li+li{margin-top:7px}
.praxisphase{position:relative;z-index:1;width:100%;margin:0 0 clamp(58px,7vw,86px);padding:clamp(28px,4vw,42px);border:1px solid rgba(70,88,73,0.16);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 16px 38px rgba(70,88,73,0.08)}

.praxisphase h3{margin-bottom:12px;font-size:clamp(29px,3vw,40px)}
.praxisphase p:not(.ueberzeile){max-width:700px;margin:0}
@media(max-width:520px){.ausbildungsweg-zeitstrahl{padding-left:28px}.ausbildungsweg-schritt::before,.praxisphase::before{left:-30px}}



/* AUSBILDUNGSSEITE – Kosten und Planung */
.ausbildung-planung-grid{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(320px,0.72fr);gap:clamp(62px,10vw,140px);align-items:start}
.ausbildung-planung-grid .section-einleitung{margin-bottom:0}
.ausbildung-planung-details{padding-top:10px}
.ausbildung-planung-aktionen{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-top:30px}
@media(max-width:900px){.ausbildung-planung-grid{grid-template-columns:1fr}}
.ausbildung-einstieg-text .section-einleitung{margin-bottom:36px}

/* ============================================================
   ÜBER-MICH-SEITE
   Allgemeine Abstände, Überschriften, Überzeilen, Farbschemata,
   Buttons, Textlinks, Inhaltsabschnitte, Kontakt und Footer
   folgen den gemeinsamen Regeln der Indexseite.
   ============================================================ */

/* ÜBER-MICH-SEITE – Intro */
.ueber-mich-seite .intro-bild img{object-position:center center}

/* ÜBER-MICH-SEITE – Mein Weg */
.ueber-mich-weg-grid{display:grid;grid-template-columns:minmax(300px,0.78fr) minmax(0,1.22fr);gap:clamp(54px,8vw,112px);align-items:center}
.ueber-mich-weg-bild{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:0 var(--radius-large) 0 var(--radius-large);box-shadow:var(--shadow-soft)}
.ueber-mich-weg-bild img{display:block;width:100%;height:100%;object-fit:cover}
.ueber-mich-weg-text{max-width:var(--text)}
.ueber-mich-weg-text .section-einleitung{margin-bottom:36px}
@media(max-width:760px){.ueber-mich-weg-grid{grid-template-columns:1fr}.ueber-mich-weg-bild{width:min(100%,480px)}}

/* ÜBER-MICH-SEITE – Lebensweg und Leitgedanke */
.ueber-mich-kopfbereich{max-width:790px;margin-bottom:clamp(54px,7vw,86px)}
.ueber-mich-kopfbereich-breit{max-width:920px}
.ueber-mich-kopfbereich .section-einleitung{margin-bottom:0}
.ueber-mich-langtext-grid{display:grid;grid-template-columns:minmax(0,var(--text)) minmax(270px,340px);justify-content:space-between;gap:clamp(56px,8vw,112px);align-items:start}
.ueber-mich-leitgedanke{position:sticky;top:116px;margin:0;padding:clamp(28px,4vw,42px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}
.ueber-mich-leitgedanke blockquote{margin:0}
.ueber-mich-leitgedanke blockquote p{margin:0;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.4vw,31px);line-height:1.28}
.ueber-mich-leitgedanke-zusatz{margin:24px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.65}
@media(max-width:900px){.ueber-mich-langtext-grid{grid-template-columns:1fr}.ueber-mich-leitgedanke{position:relative;top:auto}}

/* ÜBER-MICH-SEITE – Haltung */
.ueber-mich-haltung-grid{display:grid;grid-template-columns:minmax(300px,0.82fr) minmax(0,1.18fr);gap:clamp(48px,6vw,84px);align-items:start}
.ueber-mich-zitatkachel{margin:0;padding:clamp(28px,4vw,42px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}
.ueber-mich-zitatkachel p:not(.ueberzeile){margin:0;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.4vw,31px);line-height:1.28}
.ueber-mich-zitatkachel footer{margin-top:24px;color:var(--textlink-farbe);font-size:11px;font-style:normal;font-weight:600;letter-spacing:0.12em;text-transform:uppercase}
@media(max-width:760px){.ueber-mich-haltung-grid{grid-template-columns:1fr;gap:42px}}

/* ÜBER-MICH-SEITE – Persönliches Profil */
.ueber-mich-profil-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,0.72fr);gap:clamp(56px,8vw,112px);align-items:center}
.ueber-mich-profil-text{max-width:var(--text)}
.ueber-mich-profil-text .section-einleitung{margin-bottom:36px}
.ueber-mich-fakten{margin:0}
.ueber-mich-fakten>div:first-child{border-top:0}
.ueber-mich-profil-bild{margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:var(--radius-large) 0 var(--radius-large) 0;box-shadow:var(--shadow-soft)}
.ueber-mich-profil-bild img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.ueber-mich-profil-grid{grid-template-columns:1fr}.ueber-mich-profil-bild{width:min(100%,480px)}}


/* ============================================================
   RATENZAHLUNGSSEITE
   Allgemeine Abstände, Überschriften, Überzeilen, Farbschemata,
   Buttons, Textlinks, Kontakt und Footer folgen den gemeinsamen
   Regeln der Indexseite.
   ============================================================ */

/* RATENZAHLUNGSSEITE – Sprunglinks im Intro */
.intro-ratenzahlungslinks{display:flex;flex-wrap:wrap;gap:8px 18px}
.intro-ratenzahlungslinks a{color:inherit;text-decoration:none}
.intro-ratenzahlungslinks a:hover,.intro-ratenzahlungslinks a:focus-visible{color:var(--ausbildung-salbei-dunkel)}

/* RATENZAHLUNGSSEITE – Erklärung und Verbindlichkeit */
.ratenzahlung-erklaerung,.ratenzahlung-vertrauen-grid{display:grid;grid-template-columns:minmax(300px,0.82fr) minmax(0,1.18fr);gap:clamp(54px,8vw,112px);align-items:start}
.ratenzahlung-kopfbereich{max-width:790px;margin-bottom:clamp(54px,7vw,86px)}
.ratenzahlung-kopfbereich-breit{max-width:920px}
.ratenzahlung-erklaerung .ratenzahlung-kopfbereich{margin-bottom:0}

/* RATENZAHLUNGSSEITE – Zahlungsmodelle */
.ratenzahlung-modelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ratenzahlung-modell{display:flex;min-height:440px;padding:clamp(30px,4vw,44px);flex-direction:column;border:1px solid rgba(70,88,73,0.16);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(70,88,73,0.08)}
.ratenzahlung-modell:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.ratenzahlung-modell h3{margin:0 0 18px;font-size:clamp(31px,3vw,42px)}
.ratenzahlung-modell-text{max-width:520px;margin:0 0 28px;color:var(--ink-soft)}
.ratenzahlung-preise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:auto 0 0}
.ratenzahlung-preise>div{padding:18px 0;border-top:1px solid var(--line)}
.ratenzahlung-preise dt{color:var(--ausbildung-salbei-dunkel);font-size:10px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase}
.ratenzahlung-preise dd{margin:6px 0 0;color:var(--ink);font-size:17px;line-height:1.55}
@media(max-width:900px){.ratenzahlung-erklaerung,.ratenzahlung-vertrauen-grid{grid-template-columns:1fr;gap:42px}.ratenzahlung-erklaerung .ratenzahlung-kopfbereich{margin-bottom:0}.ratenzahlung-modelle{grid-template-columns:1fr}.ratenzahlung-modell{min-height:0}}
@media(max-width:520px){.ratenzahlung-modell{padding:27px 23px}.ratenzahlung-preise{grid-template-columns:1fr}}
.verschoben{transform:translateX(100px)}

.zusatzangabe {
  margin: 24px 0 20px;
  color: var(--ausbildung-salbei-dunkel);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inhaltsaufteilung {
  display: grid;
  grid-template-columns: minmax(300px, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: start;
}
.inhaltsaufteilung-gespiegelt {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(300px, 0.84fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: start;
}

@media (max-width: 760px) {
  .inhaltsaufteilung,
  .inhaltsaufteilung-gespiegelt {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ============================================================
   BLOGSEITE
   Intro, allgemeine Abstände, Überschriften, Überzeilen,
   Farbschemata, Buttons, Textlinks, Kontakt und Footer folgen
   den gemeinsamen Regeln der Indexseite.
   ============================================================ */

/* BLOGSEITE – Intro */
.blogseite .intro-bild img{object-position:center center}

/* BLOGSEITE – Artikelübersicht */
.blogseite-kopfbereich{max-width:1050px;margin-bottom:52px}
.blogseite-kopfbereich .section-einleitung{margin-bottom:0}
.blogseite-gridsystem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.blogseite-gridsystem .blog-kachel{grid-column:span 4;display:flex;min-height:100%;margin:0;flex-direction:column;color:inherit;box-shadow:0 18px 42px rgba(111,68,45,0.08);transition:transform 240ms ease,box-shadow 240ms ease}
.blogseite-gridsystem .blog-kachel:nth-child(2){transform:none}
.blogseite-gridsystem .blog-kachel:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.blogseite-gridsystem a.blog-kachel:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(111,68,45,0.13)}
.blogseite-gridsystem .blog-kachel-bild{margin:0}
.blog-kachel-textbereich{display:flex;flex:1;flex-direction:column}
.blogseite-kacheltext{margin:0 0 28px;color:var(--ink-soft)}
.blog-kachel-textbereich .textlink{margin-top:auto;align-self:flex-start}
.blogseite-angekuendigt .textlink{opacity:0.72}
@media(max-width:1020px){.blogseite-gridsystem .blog-kachel,.blogseite-gridsystem .blog-kachel:last-child{grid-column:span 6}}
@media(max-width:760px){.blogseite-gridsystem .blog-kachel,.blogseite-gridsystem .blog-kachel:last-child{grid-column:1/-1;transform:none}}

/* BLOGSEITE – Haltung */
.blogseite-haltung-grid{display:grid;grid-template-columns:minmax(300px,0.82fr) minmax(0,1.18fr);gap:clamp(54px,8vw,112px);align-items:start}
@media(max-width:760px){.blogseite-haltung-grid{grid-template-columns:1fr;gap:36px}}

/* ============================================================
   DATENSCHUTZSEITE
   Navigation, Footer, Schriften, Überzeile, Farbschemata und
   Grundabstände folgen den gemeinsamen Regeln der Indexseite.
   ============================================================ */

/* DATENSCHUTZSEITE – Inhaltsverzeichnis und Rechtstext */
.datenschutz-aufteilung,.impressum-aufteilung{display:grid;grid-template-columns:minmax(240px,0.48fr) minmax(0,1.52fr);gap:clamp(48px,7vw,96px);align-items:start}
.datenschutz-inhaltsverzeichnis{position:sticky;top:112px;padding:30px;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}
.datenschutz-inhaltsverzeichnis nav{display:flex;flex-direction:column}
.datenschutz-inhaltsverzeichnis nav a{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:14px;line-height:1.45}
.datenschutz-inhaltsverzeichnis nav a:hover,.datenschutz-inhaltsverzeichnis nav a:focus-visible{color:var(--textlink-farbe)}
.datenschutz-inhaltsverzeichnis nav span{color:var(--textlink-farbe);font-size:10px;font-weight:600;letter-spacing:0.1em}
.datenschutz-text{max-width:var(--text);min-width:0}
.datenschutz-text h2{margin:0 0 28px;padding-top:26px;scroll-margin-top:110px}
.datenschutz-text h2:first-child{padding-top:0}
.datenschutz-text h3{margin:34px 0 14px;color:var(--ink)}
.datenschutz-text p,.datenschutz-text li{color:var(--ink-soft)}
.datenschutz-text p{margin-bottom:22px}
.datenschutz-text a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--textlink-farbe)}
.datenschutz-text a:hover,.datenschutz-text a:focus-visible{color:var(--textlink-hover)}
.datenschutz-text ul{margin:0 0 26px;padding-left:1.25em}
.datenschutz-text li+li{margin-top:6px}
@media(max-width:820px){.datenschutz-aufteilung,.impressum-aufteilung{grid-template-columns:1fr}.datenschutz-inhaltsverzeichnis{position:relative;top:auto}.datenschutz-text{max-width:none}}

/* ============================================================
   IMPRESSUMSSEITE
   Intro, Grundaufbau, Farbschema und Rechtstext folgen exakt
   den gemeinsamen Regeln der Datenschutzseite.
   ============================================================ */

/* IMPRESSUMSSEITE – Kontaktkarte */
.impressum-kontaktkarte{position:sticky;top:112px;padding:clamp(30px,4vw,42px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium)}
.impressum-kontaktkarte h2{font-size:clamp(36px,4vw,52px)}
.impressum-kontaktkarte address{color:var(--ink-soft);font-style:normal}
.impressum-kontaktlinks{display:flex;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:8px}
.impressum-kontaktlinks a{color:var(--textlink-farbe);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.impressum-kontaktlinks a:hover,.impressum-kontaktlinks a:focus-visible{color:var(--textlink-hover)}
@media(max-width:820px){.impressum-kontaktkarte{position:relative;top:auto}}

/* ============================================================
   CHAKREN-ARTIKEL – gemeinsame Section-Farben und Kachelformen
   ============================================================ */
.chakren-seite .intro-bild img{object-position:right center}
.artikel-uebersicht{max-width:var(--content)}
.artikel-uebersicht .section-einleitung{max-width:780px}
.artikel-inhaltsverzeichnis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px;max-width:1000px;margin-top:44px;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.artikel-inhaltsverzeichnis a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:15px;line-height:1.5}
.artikel-inhaltsverzeichnis a:hover,.artikel-inhaltsverzeichnis a:focus-visible{color:var(--textlink-farbe)}
.artikel-kapitel{scroll-margin-top:100px}
.artikel-kapitel .inhaltsaufteilung,.artikel-kapitel .inhaltsaufteilung-gespiegelt{grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:clamp(48px,6vw,90px)}
.artikel-kapitel .inhaltsaufteilung-gespiegelt{grid-template-columns:minmax(0,1.17fr) minmax(0,.83fr)}
.artikel-kapitel-kopf{align-self:start;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.artikel-kapitel:nth-of-type(even) .artikel-kapitel-kopf{border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.artikel-kapitel-kopf h2{font-size:clamp(32px,3.1vw,46px);line-height:1.1}
.artikel-kapitel-kopf .section-einleitung{margin-bottom:0;font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--ink-soft)}
.inhaltsaufteilung-gespiegelt .artikel-kapitel-kopf{order:2}
.inhaltsaufteilung-gespiegelt .artikel-text{order:1}
.artikel-text{width:100%;max-width:760px;margin:0;color:var(--ink-soft);font-size:clamp(17px,1.2vw,18px);line-height:1.72;overflow-wrap:break-word}
.artikel-text h2{margin:0 0 24px;font-size:clamp(34px,3.5vw,52px);line-height:1.08;scroll-margin-top:112px}
.artikel-text h3{margin:2em 0 .55em;font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.artikel-text p{margin:0 0 1.3em}
.artikel-text a:not(.textlink){color:var(--textlink-farbe);text-decoration:underline;text-underline-offset:.18em}
.artikel-text ul,.artikel-text ol{margin:1.4em 0;padding-left:1.35em}
.artikel-text li+li{margin-top:.55em}
.artikel-text sup{font-size:.7em;line-height:0;vertical-align:super}
.artikel-zitat{margin:clamp(36px,5vw,60px) 0;padding:clamp(26px,3vw,40px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);background:var(--kachel-hintergrund);box-shadow:0 16px 38px rgba(111,68,45,.07);color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(29px,3.1vw,40px);line-height:1.18}
.artikel-zitat:nth-of-type(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.artikel-zitat::before{content:"“";display:block;height:25px;margin-bottom:12px;color:var(--textlink-farbe);font-size:58px;line-height:.8}
.artikel-zitat footer{margin-top:18px;color:var(--ink-soft);font-family:"Manrope",system-ui,sans-serif;font-size:12px;font-style:normal}
.artikel-quellen{margin:0 auto;padding:0;border:0}
.artikel-quellen h2{max-width:680px}
.quellen-aufklapper{margin-top:42px}
.quellen-aufklapper summary{color:var(--ink);font-weight:600;cursor:pointer}
.quellen-liste{color:var(--ink-soft);font-size:14px;line-height:1.72}
.quellen-liste li+li{margin-top:1.2em}
.artikel-empfehlungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px}
.artikel-empfehlung{display:flex;min-height:260px;flex-direction:column;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.artikel-empfehlung:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.artikel-empfehlung h3{font-size:clamp(28px,2.5vw,36px)}
.artikel-empfehlung p:not(.ueberzeile){color:var(--ink-soft);font-size:15px;line-height:1.65}
.artikel-empfehlung .textlink{margin-top:auto;align-self:flex-start}
@media(max-width:1020px){.artikel-kapitel .inhaltsaufteilung,.artikel-kapitel .inhaltsaufteilung-gespiegelt{grid-template-columns:1fr;gap:38px}.artikel-kapitel-kopf{max-width:740px}.inhaltsaufteilung-gespiegelt .artikel-kapitel-kopf{order:1}.inhaltsaufteilung-gespiegelt .artikel-text{order:2}.artikel-empfehlungen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.artikel-inhaltsverzeichnis,.artikel-empfehlungen{grid-template-columns:1fr}.artikel-kapitel-kopf{position:static}.artikel-text{max-width:100%}}
@media(max-width:480px){.artikel-empfehlung{padding:25px 22px}.artikel-kapitel-kopf{padding:28px 24px}.artikel-inhaltsverzeichnis{padding:24px}}


/* Lange Artikelkapitel folgen dem offenen Section-Aufbau der Startseite.
   Fließtext bleibt eine Lesespalte; kurze Kapitel nutzen gespiegelte Kacheln. */
.chakren-seite .artikel-kapitel-lang .inhaltsaufteilung,
.chakren-seite .artikel-kapitel-lang .inhaltsaufteilung-gespiegelt{display:block}
.chakren-seite .artikel-kapitel-lang .artikel-kapitel-kopf{max-width:900px;margin-bottom:clamp(32px,4vw,54px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.chakren-seite .artikel-kapitel-lang .artikel-kapitel-kopf h2{font-size:clamp(38px,4vw,58px)}
.chakren-seite .artikel-kapitel-lang .artikel-kapitel-kopf .section-einleitung{max-width:780px;font-size:clamp(18px,1.35vw,20px);line-height:1.7}
.chakren-seite .artikel-kapitel-lang .inhalts-textbereich{max-width:780px;margin:0}
@media(max-width:1020px){.chakren-seite .artikel-kapitel-lang .artikel-kapitel-kopf{max-width:780px}}
/* ============================================================
   FAQ-SEITE
   Intro, Sections, Farbschemata, Kacheln, Buttons, Kontakt und
   Footer folgen den gemeinsamen Regeln der Indexseite.
   ============================================================ */
.faq-seite .intro-bild img{object-position:center top}
.faq-suche-kopf{max-width:880px;margin-bottom:42px}
.faq-suche-kopf .section-einleitung{margin-bottom:0}
.faq-suche{max-width:940px;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.faq-suche>label{display:block;margin-bottom:10px;color:var(--textlink-farbe);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.faq-suchfeld{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:64px;padding:0 18px;border:1px solid var(--line);border-radius:var(--radius-small);background:var(--paper-light)}
.faq-suchfeld:focus-within{border-color:var(--textlink-farbe);box-shadow:0 0 0 4px var(--textlink-fokus)}
.faq-suchfeld svg{width:22px;fill:none;stroke:var(--textlink-farbe);stroke-linecap:round;stroke-width:1.7}
.faq-suchfeld input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:17px;line-height:1.5}
.faq-suchfeld input::placeholder{color:var(--ink-soft);opacity:.8}
.faq-suche-loeschen{padding:7px 0;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--textlink-farbe);font-size:12px;font-weight:600;cursor:pointer}
.faq-suchstatus{min-height:24px;margin:10px 0 0;color:var(--ink-soft);font-size:13px}
.faq-themen-navigation{display:flex;flex-wrap:wrap;gap:10px;max-width:1120px;margin:34px 0 0}
.faq-themen-navigation a{padding:10px 15px;border:1px solid var(--line);border-radius:999px;color:var(--textlink-farbe);font-size:13px;transition:color 180ms ease,background 180ms ease,border-color 180ms ease}
.faq-themen-navigation a:hover,.faq-themen-navigation a:focus-visible{border-color:var(--element-hover);background:var(--element-hover);color:var(--element-hover-text)}
.faq-keine-ergebnisse{max-width:780px;margin:32px 0 0;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);color:var(--ink-soft)}
.faq-themenbereich{scroll-margin-top:96px}
.faq-themenbereich .inhaltsaufteilung,.faq-themenbereich .inhaltsaufteilung-gespiegelt{grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(48px,7vw,104px)}
.faq-themenbereich .inhaltsaufteilung-gespiegelt{grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr)}
.faq-themenkopf{align-self:start}
.faq-themenkopf h2{font-size:clamp(38px,4.2vw,62px)}
.inhaltsaufteilung-gespiegelt .faq-themenkopf{order:2}
.inhaltsaufteilung-gespiegelt .faq-liste{order:1}
.faq-liste{border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.inhaltsaufteilung-gespiegelt .faq-liste{border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.faq-eintrag{border-top:1px solid var(--line);scroll-margin-top:110px}
.faq-eintrag:first-child{border-top:0}
.faq-eintrag[hidden],.faq-themenbereich[hidden],.faq-themen-navigation a[hidden]{display:none}
.faq-frage{position:relative;padding:24px 52px 24px 0;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,2.5vw,32px);line-height:1.16;list-style:none;cursor:pointer}
.faq-frage::-webkit-details-marker{display:none}
.faq-symbol{position:absolute;top:50%;right:4px;width:25px;height:25px;transform:translateY(-50%)}
.faq-symbol::before,.faq-symbol::after{content:"";position:absolute;top:12px;left:3px;width:19px;height:1px;background:var(--textlink-farbe);transition:transform 180ms ease,opacity 180ms ease}
.faq-symbol::after{transform:rotate(90deg)}
.faq-eintrag[open] .faq-symbol::after{opacity:0;transform:rotate(0)}
.faq-antwort{max-width:800px;padding:0 52px 28px 0;color:var(--ink-soft);font-size:16px;line-height:1.8}
.faq-antwort p{margin:0 0 1em}
.faq-antwort a{color:var(--textlink-farbe);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:900px){.faq-themenbereich .inhaltsaufteilung,.faq-themenbereich .inhaltsaufteilung-gespiegelt{grid-template-columns:1fr;gap:36px}.inhaltsaufteilung-gespiegelt .faq-themenkopf{order:1}.inhaltsaufteilung-gespiegelt .faq-liste{order:2}}
@media(max-width:600px){.faq-suchfeld{grid-template-columns:22px minmax(0,1fr)}.faq-suche-loeschen{grid-column:2;justify-self:start;margin:-8px 0 12px}.faq-liste,.faq-suche{padding:26px 22px}.faq-frage{padding-right:40px}.faq-antwort{padding-right:0}}

/* ============================================================
   STIMMEN-SEITE
   Intro, Sections, Farbschemata, Buttons, Kontakt und Footer
   folgen den gemeinsamen Regeln der Indexseite.
   ============================================================ */
.stimmen-seite .intro-bild img{object-position:center center}
.seiten-intro.farbschema-aubergine{background:var(--section-hintergrund)}
.seiten-intro.farbschema-aubergine::before{background:var(--deko-farbe);mix-blend-mode:multiply}
.seiten-intro.farbschema-aubergine::after{background:linear-gradient(90deg,rgba(248,242,238,.99) 0%,rgba(248,242,238,.94) 31%,rgba(238,228,232,.58) 53%,rgba(238,228,232,.03) 74%),linear-gradient(0deg,rgba(238,228,232,.22),transparent 30%)}
@media(max-width:760px){.seiten-intro.farbschema-aubergine::after{background:linear-gradient(180deg,rgba(248,242,238,.99) 0%,rgba(248,242,238,.96) 53%,rgba(238,228,232,.58) 74%,rgba(238,228,232,.06) 100%)}}
.stimmen-kopfbereich{max-width:960px;margin-bottom:54px}
.stimmen-kopfbereich .section-einleitung{margin-bottom:0}
.stimmen-gridsystem{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;align-items:stretch}
.stimmen-kachel{grid-column:span 6;display:flex;min-height:100%;flex-direction:column;margin:0;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);background:var(--paper-light);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.stimmen-kachel:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.stimmen-kachel.hervorgehoben{grid-column:1/-1;min-height:340px;background:var(--kachel-hervorgehoben)}
.stimmen-kachel::before{content:"“";display:block;height:36px;margin-bottom:18px;color:var(--textlink-farbe);font-family:"Cormorant Garamond",Georgia,serif;font-size:68px;font-weight:400;line-height:.75}
.stimmen-kachel h3{max-width:760px;margin-bottom:22px;color:var(--ink);font-size:clamp(28px,2.6vw,38px)}
.stimmen-kachel p{margin:0 0 18px;color:var(--ink-soft);font-size:16px;line-height:1.75}
.stimmen-kachel footer{margin-top:auto;padding-top:10px}
.stimmen-kachel cite{color:var(--textlink-farbe);font-size:12px;font-style:normal;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.gaststimme-grid-gespiegelt{grid-template-columns:clamp(290px,28vw,410px) minmax(0,1fr)}
.gaststimme-grid-gespiegelt .gaststimme-textbereich{order:2}
.gaststimme-grid-gespiegelt .gaststimme-bild{order:1;border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
@media(max-width:900px){.stimmen-kachel{grid-column:1/-1}.gaststimme-grid-gespiegelt{grid-template-columns:1fr}.gaststimme-grid-gespiegelt .gaststimme-textbereich{order:1}.gaststimme-grid-gespiegelt .gaststimme-bild{order:2}}
@media(max-width:600px){.stimmen-kopfbereich{margin-bottom:38px}.stimmen-kachel{padding:28px 24px}.stimmen-kachel.hervorgehoben{min-height:0}}
.stimmen-ablauf .ablauf-bildgestaltung{border-radius:var(--radius-large) 0 var(--radius-large) 0}
.stimmen-hero{object-position:top !important}
.stimmen-ablauf .ablauf-textbereich-artikel:first-child{border-top:0}
.stimmen-ablauf .gaststimme-zitat p{font-size:inherit;line-height:inherit;letter-spacing:normal}
.stimmen-ablauf .ablauf-textbereich{padding-top:0}
.stimmen-ablauf .gaststimme-zitat{margin-top:0}
.stimmen-zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:start}
.stimmen-spalte{display:flex;min-width:0;flex-direction:column}
.stimmen-spalte:first-child{padding-right:clamp(38px,5vw,76px)}
.stimmen-spalte+.stimmen-spalte{padding-left:clamp(38px,5vw,76px)}
.stimmen-eintrag{padding:42px 0;border-top:1px solid var(--line)}
.stimmen-spalte .stimmen-eintrag:first-child{padding-top:0;border-top:0}
.stimmen-spalte .stimmen-eintrag:last-child{padding-bottom:0}
.stimmen-eintrag blockquote{margin:0}
.stimmen-eintrag .gaststimme-zitat p{max-width:620px;margin:0;color:var(--ink-soft);font-family:"Manrope",system-ui,sans-serif;font-size:16px;line-height:1.75;letter-spacing:normal}
@media(max-width:760px){.stimmen-zweispaltig{grid-template-columns:1fr}.stimmen-spalte:first-child{padding-right:0}.stimmen-spalte+.stimmen-spalte{margin-top:42px;padding:42px 0 0;border-top:1px solid var(--line);border-left:0}}
.stimmen-ablauf .ablauf-textbereich-artikel:first-child{  padding-top:12px;
  border-top:0}
.ablauf-grid-gespiegelt{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)}
/* ============================================================
   TERMINSEITE
   Intro, Sections, Kacheln, Buttons, Kontakt und Footer folgen
   den gemeinsamen Regeln der Indexseite.
   ============================================================ */
.terminseite .intro-bild img{object-position:center top}
.seiten-intro.farbschema-cognac{background:var(--section-hintergrund)}
.seiten-intro.farbschema-cognac::before{background:var(--deko-farbe);mix-blend-mode:multiply}
.seiten-intro.farbschema-cognac::after{background:linear-gradient(90deg,rgba(250,246,238,.99) 0%,rgba(250,246,238,.94) 31%,rgba(242,233,219,.58) 53%,rgba(242,233,219,.03) 74%),linear-gradient(0deg,rgba(242,233,219,.24),transparent 30%)}
.farbschema-cognac .ueberzeile{color:#80543c}
.seiten-intro.farbschema-cognac .intro-einleitung{color:#80543c}
.seiten-intro.farbschema-cognac .intro-text,.seiten-intro.farbschema-cognac .intro-zusatz{color:#685d55}
.termin-wege-kopf{max-width:800px;margin-bottom:48px}
.termin-wege-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.termin-weg{display:flex;min-height:330px;flex-direction:column;border:1px solid rgba(128,84,60,.19);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 42px rgba(96,61,45,.08)}
.termin-weg:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.termin-weg-nummer{display:block;margin-bottom:42px;color:#80543c;font-family:"Cormorant Garamond",Georgia,serif;font-size:44px;line-height:1}
.termin-weg p{color:var(--ink-soft)}
.termin-weg .textlink{margin-top:auto}
.termin-hinweise-grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(54px,8vw,120px);align-items:start}
.termin-hinweise-grid .section-einleitung{max-width:520px;margin-bottom:0}
.termin-hinweislisten article{padding:34px 0;border-top:1px solid rgba(128,84,60,.19)}
.termin-hinweislisten article:first-child{padding-top:0;border-top:0}
.termin-hinweislisten h3{margin-bottom:18px}
.termin-hinweislisten ul{margin:0;padding-left:1.25em;color:var(--ink-soft)}
.termin-hinweislisten li+li{margin-top:9px}
.termin-buchung-einleitung-grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);gap:clamp(54px,8vw,120px);align-items:end}
.termin-buchung-einleitung-grid .inhalts-textbereich{max-width:650px}
.termin-kalender-bereich{padding-top:0}
.termin-kalender-stapel{display:grid;gap:54px}
.termin-kalender-kachel{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);overflow:hidden;border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 20px 54px rgba(72,54,19,.09);scroll-margin-top:110px}
.termin-kalender-kachel:nth-child(even){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.termin-kalender-textbereich{padding:clamp(38px,5vw,68px)}
.termin-kalender-textbereich h2{margin-bottom:30px;font-size:clamp(34px,3.4vw,50px)}
.termin-daten{margin:0}
.termin-daten>div{display:grid;grid-template-columns:minmax(120px,.72fr) minmax(0,1.28fr);gap:20px;padding:15px 0;border-top:1px solid var(--line)}
.termin-daten dt{color:var(--textlink-farbe);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.termin-daten dd{margin:0;color:var(--ink)}
.termin-fussnote{margin:28px 0 0;color:var(--ink-soft);font-size:12px;line-height:1.65}
.termin-kalender-einbettung{min-width:0;min-height:760px;background:#fffaf5}
.termin-kalender-einbettung .calendly-inline-widget{width:100%;height:100%;min-height:760px}



@media(max-width:1050px){.termin-kalender-kachel{grid-template-columns:1fr}.termin-kalender-einbettung{min-height:720px}}
@media(max-width:860px){.termin-wege-grid,.termin-hinweise-grid,.termin-buchung-einleitung-grid{grid-template-columns:1fr}.termin-hinweise-grid,.termin-buchung-einleitung-grid{gap:38px}.termin-weg{min-height:0}}
@media(max-width:760px){.seiten-intro.farbschema-cognac::after{background:linear-gradient(180deg,rgba(250,246,238,.99) 0%,rgba(250,246,238,.96) 53%,rgba(242,233,219,.58) 74%,rgba(242,233,219,.06) 100%)}.termin-wege-kopf{margin-bottom:36px}.termin-kalender-stapel{gap:34px}.termin-kalender-textbereich{padding:30px 24px}.termin-daten>div{grid-template-columns:1fr;gap:4px}.termin-kalender-einbettung,.termin-kalender-einbettung .calendly-inline-widget{min-height:680px}}
/* Zusatz zur gemeinsamen style.css: Hilfeseite Google-Rezension */
.rezensionsseite .seiten-intro{min-height:700px;background:radial-gradient(circle at 81% 45%,#e9d9ca 0,#f5e9dc 25%,#fffaf0 59%)}
.rezensionsseite .intro-innenbereich{min-height:700px}
.rezensionsseite .intro-textbereich{width:min(790px,75%);padding:155px 0 110px}
.rezensionsseite .intro-textbereich .intro-einleitung{max-width:680px}
.rezensionsseite .intro-textbereich .intro-text{max-width:650px}
.rezensionsseite .rezension-einstieg{align-items:center}
.rezensionsseite .rezension-hinweis{margin:0;padding:clamp(28px,4vw,42px);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.rezensionsseite .rezension-weg{background:var(--kachel-hintergrund);border-radius:0 var(--radius-medium) 0 var(--radius-medium);padding:clamp(28px,4vw,48px);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.rezensionsseite .rezension-hinweis h3,.rezensionsseite .rezension-weg h3{margin:0 0 18px}
.rezensionsseite .rezension-hinweis .ueberzeile{margin:0 0 18px;color:var(--textlink-farbe)}
.rezensionsseite .rezension-hinweis p:not(.ueberzeile){color:var(--ink-soft)}
.rezensionsseite .rezension-hinweis p{margin:0 0 18px}
.rezensionsseite .rezension-hinweis p:last-child{margin-bottom:0}
.rezensionsseite .rezension-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.rezensionsseite .rezension-weg:nth-child(2){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.rezensionsseite .rezension-nummer{margin:0 0 18px;color:var(--textlink-farbe);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rezensionsseite .rezension-weg ol{margin:0;padding-left:1.3em}
.rezensionsseite .rezension-weg li+li{margin-top:15px}
.rezensionsseite .rezension-weg li::marker{color:var(--textlink-farbe);font-weight:700}
.rezensionsseite .rezension-weg a,.rezensionsseite .rezension-quelle a{color:var(--textlink-farbe);text-decoration:underline;text-underline-offset:3px}
.rezensionsseite .rezension-quelle{margin:28px 0 0;color:var(--ink-soft);font-size:14px}
.rezensionsseite .rezension-abschluss{align-items:center}
.rezensionsseite .rezension-abschluss .ablauf-bildgestaltung img{object-position:82% center}
.rezensionsseite .rezension-abschluss .section-einleitung{margin-bottom:20px}
.rezensionsseite .rezension-abschluss .intro-buttons{margin-top:36px}
@media(max-width:800px){.rezensionsseite .rezension-wege{grid-template-columns:1fr}.rezensionsseite .seiten-intro,.rezensionsseite .intro-innenbereich{min-height:660px}.rezensionsseite .intro-textbereich{width:100%;padding:145px 0 80px}}
@media(max-width:560px){.rezensionsseite .seiten-intro,.rezensionsseite .intro-innenbereich{min-height:0}.rezensionsseite .intro-textbereich{padding:140px 0 75px}.rezensionsseite .rezension-weg,.rezensionsseite .rezension-hinweis{padding:28px 24px}.rezensionsseite .rezension-abschluss .intro-buttons .button{width:100%}}


/* ============================================================
   WARUM NUR MÄNNER – gemeinsame Seitenbausteine
   ============================================================ */
.warum-seite .seiten-intro{background:var(--section-hintergrund)}
.warum-seite .seiten-intro .intro-bild img{object-position:center center}
.warum-seite .seiten-intro .intro-textbereich{max-width:650px}
.warum-seite .seiten-intro .intro-buttons{margin-top:0}
.warum-seite .section-grundaufbau h2{font-size:clamp(42px,4.2vw,64px);line-height:1.07}
.warum-seite .section-grundaufbau h3{font-size:clamp(27px,2.5vw,36px);line-height:1.18}
.warum-seite .page-ueberzeile{display:block;margin:0 0 22px;color:var(--cognac-deep);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.warum-seite .section-heading{max-width:550px}
.warum-seite .section-heading h2{margin:0}
.warum-einstieg-grid{display:grid;grid-template-columns:minmax(290px,.75fr) minmax(0,1.25fr);gap:clamp(50px,8vw,120px);align-items:start}
.warum-einstieg .men-opening-copy{max-width:730px;color:var(--ink-soft)}
.warum-einstieg .men-opening-copy p:first-child{margin-top:0}
.warum-einstieg .men-opening-copy p+p{margin-top:22px}
.warum-leitgedanke{padding-top:clamp(58px,7vw,100px);padding-bottom:clamp(58px,7vw,100px)}
.warum-leitgedanke p{max-width:1000px;margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(42px,5.2vw,76px);line-height:1.08;letter-spacing:-.025em}
.warum-leitgedanke em{color:var(--cognac-deep);font-weight:400}
.warum-kapitel-grid{display:grid;grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr);gap:clamp(52px,8vw,116px);align-items:start}
.warum-kapitel-aside{position:sticky;top:116px;padding:clamp(30px,4vw,48px);border:1px solid var(--line);border-radius:0 var(--radius-large) 0 var(--radius-large);box-shadow:var(--shadow-soft)}
.warum-kapitel-aside h2{margin:0 0 34px}
.warum-kapitel-aside blockquote{margin:0;padding-top:26px;border-top:1px solid var(--line)}
.warum-kapitel-aside blockquote p{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(26px,2.5vw,36px);font-style:italic;line-height:1.28}
.warum-kapitel-inhalt{max-width:720px}
.warum-kapitel-inhalt .inhaltsabschnitt{padding:0 0 38px}
.warum-kapitel-inhalt .inhaltsabschnitt+.inhaltsabschnitt{padding-top:38px;border-top:1px solid var(--line)}
.warum-kapitel-inhalt h3{margin:0 0 20px}
.warum-kapitel-inhalt p,.warum-raum-text p,.warum-thema p,.warum-abschluss p,.warum-kontakt p{color:var(--ink-soft)}
.warum-kapitel-inhalt p+p,.warum-raum-text p+p,.warum-thema p+p,.warum-abschluss p+p{margin-top:20px}
.warum-raum-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(56px,8vw,120px);align-items:center}
.warum-raum-bild{height:min(72vh,690px);min-height:520px;margin:0;overflow:hidden;border-radius:0 var(--radius-large) 0 var(--radius-large);box-shadow:var(--shadow-soft)}
.warum-raum-bild img{width:100%;height:100%;object-fit:cover}
.warum-raum-text{max-width:660px}
.warum-raum-text h2{margin:0 0 30px}
.warum-themen .section-heading{max-width:850px;margin-bottom:48px}
.warum-themen-liste{display:grid;gap:26px;max-width:1080px}
.warum-thema{padding:clamp(30px,4vw,52px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:0 18px 45px rgba(57,40,24,.06)}
.warum-thema:nth-child(2){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.warum-thema>span{display:block;margin-bottom:16px;color:var(--cognac-deep);font-family:"Cormorant Garamond",Georgia,serif;font-size:29px}
.warum-thema h3{margin:0 0 22px}
.warum-thema p{max-width:850px}
.warum-abschluss-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(50px,8vw,115px);align-items:start}
.warum-abschluss-grid h2{margin:0}
.warum-abschluss .intro-buttons{margin-top:35px}
.warum-kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(45px,7vw,100px);align-items:start}
.warum-kontakt h2{margin:0 0 24px}
.warum-kontakt .button{margin-top:20px}
.warum-formular{padding:clamp(28px,4vw,48px);border:1px solid var(--line);border-radius:0 var(--radius-medium) 0 var(--radius-medium);box-shadow:var(--shadow-soft)}
.warum-formular h3{margin:0 0 24px}
.warum-formular #danke-bereich{display:none}
.warum-formular .clean-form{display:grid;gap:18px}
.warum-formular .form-honeypot{position:absolute;left:-9999px}
.warum-formular .form-field{display:grid;gap:7px}
.warum-formular label{font-size:14px;font-weight:600}
.warum-formular input:not([type=hidden]),.warum-formular textarea{width:100%;min-height:50px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:#fffdf7;color:var(--ink)}
.warum-formular textarea{min-height:140px;resize:vertical}
.warum-formular #form-success-message{display:none}
@media(max-width:900px){.warum-einstieg-grid,.warum-kapitel-grid,.warum-raum-grid,.warum-abschluss-grid,.warum-kontakt-grid{grid-template-columns:1fr;gap:36px}.warum-kapitel-aside{position:relative;top:auto}.warum-raum-bild{max-width:620px;height:480px;min-height:0}}
@media(max-width:560px){.warum-seite .seiten-intro .intro-textbereich{width:100%}.warum-raum-bild{height:360px}.warum-kapitel-aside,.warum-thema,.warum-formular{padding:28px 24px}}

/* Warum nur Männer: leichtere Themenkacheln und gemeinsamer Kontaktbaustein */
.warum-seite .warum-themen-liste{max-width:950px;gap:18px}
.warum-seite .warum-thema{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:22px;padding:30px 34px;border-color:var(--line);background:rgba(255,250,245,.58);box-shadow:none}
.warum-seite .warum-thema>span{grid-column:1;grid-row:1/span 5;margin:0;font-size:27px}
.warum-seite .warum-thema h3,.warum-seite .warum-thema p{grid-column:2}
.warum-seite .warum-thema h3{margin:0 0 14px}
.warum-seite .warum-thema p{margin-top:0;margin-bottom:14px}
.warum-seite .warum-thema p:last-child{margin-bottom:0}
.warum-seite .warum-kontakt .kontakt-aufteilung{grid-template-columns:.84fr 1.16fr}
.warum-seite .warum-kontakt .kontakt-textbereich{position:sticky;top:128px}
.warum-seite .warum-formular-rahmen{padding:0;border:0;background:transparent;box-shadow:none}
.warum-seite .warum-formular-rahmen #danke-bereich[hidden],.warum-seite .warum-formular-rahmen #form-success-message[hidden]{display:none}
.warum-seite .warum-formular-rahmen .kontakt-formularbereich{display:block;gap:0}
.warum-seite .warum-formular-rahmen .kontakt-formularbereich h3{margin:0 0 20px}
.warum-seite .warum-formular-rahmen .formularfeld{display:block;gap:0;margin-top:26px}
.warum-seite .warum-formular-rahmen .formularfeld label{display:block;margin-bottom:7px;color:var(--terracotta-deep);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.warum-seite .warum-formular-rahmen .formularfeld input,.warum-seite .warum-formular-rahmen .formularfeld textarea{padding:12px 0;border:0;border-bottom:1px solid rgba(86,117,104,.34);border-radius:0;background:transparent}
@media(max-width:900px){.warum-seite .warum-kontakt .kontakt-aufteilung{grid-template-columns:1fr}.warum-seite .warum-kontakt .kontakt-textbereich{position:relative;top:auto}}
@media(max-width:560px){.warum-seite .warum-thema{grid-template-columns:1fr;padding:26px 24px}.warum-seite .warum-thema>span,.warum-seite .warum-thema h3,.warum-seite .warum-thema p{grid-column:1}.warum-seite .warum-thema>span{grid-row:auto;margin-bottom:12px}}

/* ============================================================
   INTRO RESPONSIV (Startseite + Angebotsseite)
   ab 1468px:   Desktop unverändert
   801–1467px:  Oval sichtbar, Text hält immer Abstand zum Oval
   801–1279px:  stärkerer Weichzeichner, Text schmaler
   bis 800px:   Text links, Bild rechts daneben, kein Oval
   Überall:     Abstand Header→Text = Abstand Text→Intro-Ende
   ============================================================ */

/* Oval: sichtbare Breite + Mindestabstand des Textes */
:is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) {
  --oval-sichtbar: 86px;   /* 172px breit, 86px nach links verschoben */
  --oval-abstand: 28px;
  --header-hoehe: 95px;     /* .seitenkopf inkl. Linie, nicht gescrollt */
  --intro-luft: 40px;       /* Mindestabstand über und unter dem Text */
}

/* Der Text rückt nur so weit ein, wie nötig ist, um das Oval nie zu berühren.
   Ab ca. 1468px Breite ergibt die Formel 0 – dort bleibt alles wie bisher. */
@media (min-width: 801px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-textbereich {
    padding-top: calc(var(--header-hoehe) + var(--intro-luft));
    padding-bottom: var(--intro-luft);
    padding-left: max(0px, calc(var(--oval-sichtbar) + var(--oval-abstand) - (100vw - min(var(--content), 100vw - 40px)) / 2));
  }
  /* Text wird im Bereich unter dem Header zentriert → oben und unten gleich viel Luft */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-innenbereich { align-items: center; }
}

/* 801–1279px: Weichzeichner stärker, Motiv tritt zurück */
@media (min-width: 801px) and (max-width: 1279px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::after {
    background:
      linear-gradient(90deg, rgba(var(--intro-weichzeichner, 255,250,240), .99) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .96) 38%, rgba(var(--intro-weichzeichner, 255,250,240), .72) 55%, rgba(var(--intro-weichzeichner, 255,250,240), .18) 74%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 86%),
      linear-gradient(0deg, rgba(var(--intro-weichzeichner, 255,250,240), .2), transparent 30%);
  }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-einleitung { max-width: 15em; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .ueberzeile { max-width: 22em; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-zusatz { max-width: 26em; }
}

/* 801–1020px: Bild rechts, Oval kleiner */
@media (min-width: 801px) and (max-width: 1020px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) { --oval-sichtbar: 60px; --oval-abstand: 24px; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro),
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-innenbereich { min-height: min(760px, 100svh); }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-textbereich { width: min(560px, 62%); }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) h1 { font-size: clamp(46px, 6vw, 56px); }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild { left: 30%; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild img { object-position: 80% center; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::after {
    background: linear-gradient(90deg, rgba(var(--intro-weichzeichner, 255,250,240), 1) 0%, rgba(var(--intro-weichzeichner, 255,250,240), 1) 34%, rgba(var(--intro-weichzeichner, 255,250,240), .92) 48%, rgba(var(--intro-weichzeichner, 255,250,240), .5) 62%, rgba(var(--intro-weichzeichner, 255,250,240), .1) 76%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 84%);
  }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::before { top: 26%; left: -70px; width: 130px; height: 280px; }
}

/* bis 800px: Text links, Bild rechts daneben, Weichzeichner senkrecht (links → rechts) */
@media (max-width: 800px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) { --intro-luft: clamp(40px, 8vw, 56px); min-height: 0; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::before { display: none; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-innenbereich { width: calc(100% - 40px); min-height: 0; align-items: flex-start; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-textbereich {
    width: min(440px, 66%);
    padding: calc(var(--header-hoehe) + var(--intro-luft)) 0 var(--intro-luft);
  }
  /* Bild immer über die volle Breite – der Weichzeichner allein macht den Übergang, keine Bildkante */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild { position: absolute; inset: 0; height: auto; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild img { object-position: 90% center; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::after {
    display: block;
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .96) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .9) 28%,
      rgba(var(--intro-weichzeichner, 255,250,240), .74) 44%, rgba(var(--intro-weichzeichner, 255,250,240), .5) 58%,
      rgba(var(--intro-weichzeichner, 255,250,240), .26) 72%, rgba(var(--intro-weichzeichner, 255,250,240), .08) 86%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 100%);
  }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .ueberzeile { max-width: 17em; margin-bottom: 18px; font-size: 11px; letter-spacing: .16em; text-wrap: balance; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) h1 { margin-bottom: 18px; font-size: clamp(34px, 7.4vw, 56px); line-height: 1; hyphens: manual; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-einleitung { max-width: 13.5em; margin-bottom: 0; font-size: clamp(20.5px, calc(4.2vw - 1.5px), 25.5px); text-wrap: balance; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons { align-items: flex-start; flex-direction: row; margin-top: 26px; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons .button { width: auto; min-width: 0; min-height: 44px; padding: 0 22px; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-zusatz { display: block; max-width: 22em; margin-top: 18px; font-size: 10px; }
}
@media (max-width: 600px) {
  /* Überschrift dreizeilig: Tantra-Massagen / für Männer / in Freiburg */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) h1 { max-width: 6.6em; font-size: clamp(32px, 9vw, 46px); text-wrap: wrap; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-einleitung { max-width: 11em; }
}
@media (max-width: 380px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-textbereich { width: 80%; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .ueberzeile { font-size: 10px; letter-spacing: .12em; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) h1 { font-size: 32px; }
}

/* 501–800px: Unterzeile der Wortmarke im Header wieder zeigen
   (die allgemeine Regel blendet sie ab 760px aus; bis 500px regelt es der Block unten) */
@media (min-width: 501px) and (max-width: 800px) {
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seitenkopf .brand-subline { display: block; }
}

/* ============================================================
   STARTSEITE – INTRO bis 500px
   Bild füllt das ganze Intro, Header liegt zunächst durchsichtig
   darauf (Logo und Menü wie gewohnt). Beim Scrollen bekommt der
   Header seinen normalen Hintergrund (Klasse .is-scrolled).
   ============================================================ */
@media (max-width: 500px) {
  /* Header vor dem Scrollen: durchsichtig, Logo und Menü bleiben wie gewohnt */
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seitenkopf:not(.is-scrolled) {
    border-bottom-color: transparent; background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Menü-Schalter leicht: zwei weiße, abgerundete Striche ohne Kreis */
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .menue-oeffnen-schliessen-schalter {
    border: 0; border-radius: 0; background: transparent;
  }
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .menue-oeffnen-schliessen-schalter span {
    width: 26px; height: 2.5px; margin: 7px auto; border-radius: 2px;
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seitenkopf:not(.is-scrolled) .menue-oeffnen-schliessen-schalter span {
    background: var(--ink);
  }

  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) { display: flex; flex-direction: column; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::before,
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro)::after { display: none; }

  /* Bild füllt das ganze Intro bis zur Unterkante – nichts wird ausgeblendet */
  /* Sichtbarer Abstand gleich: Unterkante der Marke → Überzeile
     ist genauso groß wie Button → Bildende */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) { position: relative; --marke-unterkante: 70px; /* Unterkante Marke (75px) minus Zeilenluft der Überzeile */ --intro-luft: 52px; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild img { object-position: 66% 40%; }
  /* Aufhellung nur links hinter dem Text – rechts bleibt das Motiv klar */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-bild::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .95) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .88) 30%,
      rgba(var(--intro-weichzeichner, 255,250,240), .72) 46%, rgba(var(--intro-weichzeichner, 255,250,240), .48) 60%,
      rgba(var(--intro-weichzeichner, 255,250,240), .24) 74%, rgba(var(--intro-weichzeichner, 255,250,240), .06) 88%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 100%);
  }

  /* Text unten im Bild */
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-innenbereich { position: relative; z-index: 2; width: calc(100% - 40px); min-height: 0; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-textbereich { width: 100%; padding: calc(var(--marke-unterkante) + var(--intro-luft)) 0 var(--intro-luft); }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-zusatz { display: none; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .ueberzeile { display: block; max-width: 17em; margin-bottom: 16px; font-size: 11px; letter-spacing: .16em; text-wrap: balance; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) h1 { max-width: 6.6em; text-wrap: wrap; margin-bottom: 14px; font-size: clamp(32px, 9.4vw, 42px); line-height: 1.02; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-einleitung { max-width: 11em; font-size: clamp(19.5px, calc(6vw - 1.5px), 23.5px); }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons { margin-top: 24px; }
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons .button { width: auto; min-width: 0; min-height: 44px; padding: 0 22px; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
}
/* Text bündig mit dem Logo im Header (Header-Rand ab 480px: 16px) */
@media (max-width: 480px) {
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-innenbereich { width: calc(100% - 32px); }
}
/* Vollständige Wort-Bildmarke im Header der Startseite:
   Logo links, rechts oben TOUCHED TO BE, darunter die Unterzeile */
@media (max-width: 500px) {
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seitenkopf .brand-subline {
    display: block; max-width: 13.5em; margin-top: 3px;
    font-size: 11.5px; line-height: 1.3;
  }
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .header-inner { gap: 14px; }
  :is(body:has(.seiten-intro#start), body.angebotsseite, body.ausbildungsseite, body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .brand { min-width: 0; }
}

/* ============================================================
   STARTSEITE – BEGRÜSSUNG (2. Section)
   Ab 761px: Bild beginnt auf Höhe des Fließtextes und scrollt
   beim Lesen mit (sticky), bis der Text zu Ende ist.
   Bis 760px: Bild steht direkt nach dem ersten Absatz.
   Technik: .begruessung-text gibt seine Kinder ans Raster weiter
   (display: contents), so kann das Bild neben/zwischen den Text.
   ============================================================ */
.begruessung-grid { align-items: start; row-gap: 0; }
.begruessung-text { display: contents; }
.begruessung-text > * { grid-column: 1; max-width: 650px; }
.begruessung-portrait {
  grid-column: 2; grid-row: 3 / span 7; align-self: start;
  position: sticky; top: 120px;
}
@media (max-width: 760px) {
  .begruessung-grid { grid-template-columns: 1fr; }
  .begruessung-text > h2 + .fliesstext ~ * { order: 2; }
  .begruessung-portrait {
    grid-column: 1; grid-row: auto; order: 1;
    position: relative; top: auto;
    width: min(100%, 480px); height: auto; aspect-ratio: 1 / 1;
    margin: 12px 0 40px;
  }
}

/* ============================================================
   BUTTONS AUF KLEINEN BILDSCHIRMEN (seitenweit)
   Bis 800px leichter und kompakter – wie im Intro der Startseite.
   Mehrere Buttons stehen ab 560px untereinander, behalten aber
   ihre eigene Breite (kein Balken über die volle Breite).
   ============================================================ */
@media (max-width: 800px) {
  .button,
  .intro-buttons .btn {
    min-width: 0; min-height: 44px; padding: 0 22px;
    font-size: 14px; font-weight: 500; letter-spacing: .02em;
  }
}
@media (max-width: 560px) {
  .intro-buttons { align-items: flex-start; }
  .intro-buttons .btn,
  .intro-buttons .button,
  .button { width: auto; }
}
/* ============================================================
   STARTSEITE – ANGEBOT, 761–1020px
   Die dritte Kachel steht nicht mehr allein in halber Breite,
   sondern läuft über die ganze Breite: Bild links, Text rechts.
   ============================================================ */
@media (min-width: 761px) and (max-width: 1020px) {
  .angebot-index-angebotskachel:nth-child(3) {
    grid-column: 1 / -1; flex-direction: row; min-height: 0;
  }
  .angebot-index-angebotskachel:nth-child(3) .angebot-index-angebotskachel-bild { flex: 0 0 50%; }
  .angebot-index-angebotskachel:nth-child(3) img { height: 100%; min-height: 300px; }
  .angebot-index-angebotskachel:nth-child(3) .angebot-index-angebotskachel-content { justify-content: center; }
}
/* ============================================================
   STARTSEITE – DEINE ZEIT BEI MIR, bis 760px
   Überschrift und Einleitung zuerst, dann das Bild im Querformat,
   danach die drei Schritte. Kein riesiges Hochformat mehr vorneweg.
   ============================================================ */
@media (max-width: 760px) {
  .ablauf-grid { row-gap: 0; }
  .ablauf-textbereich { display: contents; }
  .ablauf-textbereich > * { grid-column: 1; }
  .ablauf-bildgestaltung {
    order: 1; position: relative; top: auto;
    width: min(100%, 560px); height: auto; min-height: 0;
    aspect-ratio: 4 / 3; margin: 0 0 36px;
  }
  .ablauf-bildgestaltung img { object-position: 50% 42%; }
  .ablauf-textbereich-artikel { order: 2; }
}
/* ============================================================
   STARTSEITE – STIMME EINES GASTES, bis 760px
   Wie Begrüßung und „Deine Zeit bei mir“: erst die Überschrift,
   dann das Bild im Querformat, danach Zitat, Quelle und Link.
   ============================================================ */
@media (max-width: 760px) {
  .gaststimme-grid { row-gap: 0; }
  .gaststimme-textbereich { display: contents; }
  .gaststimme-textbereich > * { grid-column: 1; }
  .gaststimme-bild {
    order: 1; width: min(100%, 560px); aspect-ratio: 4 / 3;
    margin: 34px 0 0;
  }
  .gaststimme-bild img { object-position: 50% 45%; }
  .gaststimme-zitat, .gaststimme-link { order: 2; }
}
/* ============================================================
   STARTSEITE – WAS MÄNNER BEWEGT: gleichmäßige Abstände
   - Bis 1020px: Einleitung → erste Kachel = 52px (wie beim Angebot)
   - Bis 760px: Kacheln so hoch wie ihr Inhalt, Link folgt dem Text
     immer mit 22px Abstand (keine Lücke durch Mindesthöhe)
   - Ab 761px bleiben die Links nebeneinanderliegender Kacheln
     auf einer Linie (unten ausgerichtet)
   ============================================================ */
@media (max-width: 1020px) {
  .themenwelten-grid { row-gap: 0; }
}
@media (max-width: 760px) {
  .haltungs-kachel,
  .haltungs-kachel:first-child { min-height: 0; }
  .haltungs-kachel .textlink { margin-top: 0; }
}
/* ============================================================
   STARTSEITE – ZEIT VERSCHENKEN (Gutschein)
   - Bis 1300px: Karte schmaler (je 27px Luft), damit Karte,
     Drehung und Schatten nie rechts aus dem Bild laufen
   - Bis 800px: Text und Gutschein untereinander (vorher erst ab 760px)
   - Bis 1300px: Karte wächst mit ihrem Inhalt, nichts wird abgeschnitten;
     Mindesthöhe entspricht weiter dem Kartenformat 1,58 : 1
   ============================================================ */
@media (max-width: 1300px) {
  .gutschein-darstellung { width: min(calc(100% - 54px), 670px); aspect-ratio: auto; }
  /* Karte wächst mit dem Inhalt; ::after hält mindestens das Kartenformat 1,58 : 1 */
  .gutschein-karte { position: relative; inset: auto; display: flex; }
  .gutschein-karte::after { content: ""; flex: 0 0 0; padding-top: 63.3%; }
  .gutschein-karte-textbereich { height: auto; }
  .gutschein-karte-markenbereich { padding-top: 18px; }
  .gutschein-karte-markenname { white-space: nowrap; }
}
@media (max-width: 800px) {
  .gutschein-aufteilung { grid-template-columns: 1fr; gap: 38px; }
  .gutschein-textbereich { max-width: 680px; padding: 0; }
  .gutschein-bildbereich { min-height: 0; }
  .gutschein-karte-textbereich { width: 62%; padding: 28px 24px; }
}
@media (max-width: 500px) {
  .gutschein-karte-textbereich { width: 74%; padding: 22px 20px; }
  .gutschein-karte-textbereich strong { margin-top: 14px; font-size: 32px; }
  .gutschein-karte-unterzeile { margin-top: 12px; font-size: 13px; }
  .gutschein-karte-verlauf {
    background: linear-gradient(90deg, rgba(255,250,240,.99) 0%, rgba(255,250,240,.95) 58%, rgba(255,250,240,.5) 80%, rgba(255,250,240,.1) 100%);
  }
}
@media (max-width: 380px) {
  .gutschein-karte-markenname { font-size: 10px; letter-spacing: .12em; }
}
/* ============================================================
   STARTSEITE – ERFAHRUNGEN
   - 761–1020px: zweispaltig wie auf dem Desktop (große Stimme links,
     zwei kleine rechts) statt einer schmalen Spalte mit Leerraum
   - Bis 1020px: Kacheln nutzen die volle Breite, rechte Kante
     schließt mit „Weitere Stimmen lesen“ ab
   - Bis 760px: untereinander, Höhe nach Inhalt (keine leeren Flächen)
   ============================================================ */
@media (min-width: 761px) and (max-width: 1020px) {
  .erfahrungen-gridsystem { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-rows: auto auto; }
  .erfahrungs-kachel:first-child { grid-row: 1 / span 2; min-height: 0; padding: 40px 34px; }
  .erfahrungs-kachel:first-child p { font-size: 25px; }
  .erfahrungs-kachel { min-height: 0; padding: 30px 26px 26px; }
}
@media (max-width: 1020px) {
  .erfahrungs-kachel { max-width: none; }
}
@media (max-width: 760px) {
  .erfahrungs-kachel,
  .erfahrungs-kachel:first-child { min-height: 0; }
  .erfahrungs-kachel:first-child { padding: 36px 28px 32px; }
  .erfahrungs-kachel { padding: 30px 26px 26px; }
}

/* ============================================================
   OVAL-REGEL (seitenweit)
   Das Oval steht immer links und wird sparsam eingesetzt
   (Startseite: Intro, Gutschein, Kontakt). Bis 800px wird es
   ausgeblendet, damit es nie hinter Text liegt.
   ============================================================ */
@media (max-width: 800px) {
  .gutschein-bereich::before,
  .kontakt-bereich::before { display: none; }
}

/* ============================================================
   STARTSEITE – BLOG, 761–1020px
   Die dritte Kachel steht nicht allein in der Mitte, sondern
   läuft über die volle Breite: Bild links, Text rechts
   (wie beim Angebot).
   ============================================================ */
@media (min-width: 761px) and (max-width: 1020px) {
  .blog-kachel:last-child { grid-column: 1 / -1; display: flex; }
  .blog-kachel:last-child .blog-kachel-bild { flex: 0 0 50%; aspect-ratio: auto; min-height: 300px; }
  .blog-kachel:last-child .blog-kachel-textbereich { flex: 1; justify-content: center; }
  .blog-kachel:last-child .textlink { margin-top: 8px; }
}
/* ============================================================
   STARTSEITE – E-BOOK
   - Bis 1020px: Karte nur so hoch wie nötig (keine 620px Mindesthöhe),
     Cover bleibt gut sichtbar
   - 761–900px: Cover-Spalte etwas breiter, damit das Cover nicht
     zur Briefmarke wird
   - Bis 760px: Cover kleiner und kompakter über dem Text,
     damit Titel und Button schneller sichtbar sind
   ============================================================ */
@media (max-width: 1020px) {
  .e-book-bildbereich { min-height: 0; padding: 48px 36px; }
  .e-book-textbereich { padding: 52px 44px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .e-book-aufteilung { grid-template-columns: 0.9fr 1.1fr; }
  .e-book-cover { width: min(260px, 86%); }
}
@media (max-width: 760px) {
  .e-book-bildbereich { min-height: 0; padding: 44px 26px 36px; }
  .e-book-cover { width: min(220px, 62%); }
  .e-book-textbereich { padding: 36px 28px 40px; }
}
/* ============================================================
   STARTSEITE – KONTAKT, bis 760px
   Reihenfolge nach Wichtigkeit: Überschrift, Text, „Freien Termin
   ansehen“, dann direkt das Formular – der Telegram-Hinweis
   (Nebenweg) rückt ans Ende.
   ============================================================ */
@media (max-width: 760px) {
  .kontakt-aufteilung { row-gap: 0; }
  .kontakt-textbereich, .kontakt-aktionen { display: contents; }
  .kontakt-textbereich > *, .kontakt-aktionen > * { grid-column: 1; }
  .kontakt-aktionen > .button { justify-self: start; margin-top: 8px; margin-bottom: 44px; }
  .kontakt-formularbereich { order: 1; }
  .telegram-hinweis { order: 2; margin-top: 44px; }
}

/* ============================================================
   FOOTER (seitenweit)
   - 761–1020px: Marke oben über die volle Breite (mittig),
     darunter Kontakt und E-Book in zwei Spalten
   - Bis 760px: Marke zuerst (linksbündig wie alles andere),
     dann Kontakt, dann E-Book
   - Navigationslinks bleiben bis 320px zweispaltig
   ============================================================ */
@media (min-width: 761px) and (max-width: 1020px) {
  .footer-inner { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .footer-brand-center {
    grid-column: 1 / -1; order: -1; justify-self: stretch; width: auto;
    margin-bottom: 44px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.25);
  }
}
@media (max-width: 760px) {
  .footer-brand-center { order: -1; padding-top: 0; border-top: 0; text-align: left; width: 100%; }
  .footer-brand-center img { margin: 0 0 18px; }
  .footer-brand-center p { margin-left: 0; }
  .footer-social { justify-content: flex-start; }
  .footer-contact { border-top: 1px solid rgba(255, 255, 255, 0.32); }
}
@media (max-width: 440px) {
  .footer-nav-group nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Links im Kontaktblock stehen immer untereinander, auch wenn Platz nebeneinander wäre */
.footer-contact .text-link { display: flex; width: fit-content; }

/* ============================================================
   FOOTER – Feinschliff bis 1020px
   - Marke wie im Header: Logo links, rechts TOUCHED TO BE,
     darunter die Unterzeile; Kanäle darunter
   - Bis 760px: gleichmäßige Abstände (32px über und unter jeder
     Trennlinie), engere Zeilen in der Navigation
   ============================================================ */
@media (max-width: 1020px) {
  .footer-brand-center {
    display: grid; grid-template-columns: auto 1fr; column-gap: 13px; align-items: center;
    justify-self: start; text-align: left;
  }
  .footer-brand-center img { grid-row: 1 / 3; height: 50px; margin: 0; }
  .footer-brand-center .footer-brand { align-self: end; font-size: 13px; letter-spacing: .17em; }
  .footer-brand-center p { align-self: start; max-width: none; margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
  .footer-social { grid-column: 1 / -1; justify-content: flex-start; margin-top: 22px; }
}
@media (max-width: 760px) {
  .footer-inner { row-gap: 0; }
  .footer-contact, .footer-brand-center, .footer-ebook { padding: 32px 0; }
  .footer-brand-center { padding-top: 0; }
  .footer-ebook h3 { margin-bottom: 14px; }
  .footer-navigation { padding-bottom: 36px; }
  .footer-navigation-inner { padding-top: 32px; }
  .footer-nav-group nav { row-gap: 0; margin-top: -6px; }
  .footer-navigation a { padding: 6px 0; }
  .footer-nav-group + .footer-nav-group { margin-top: 26px; }
}
@media (max-width: 1020px) {
  .site-footer > .section-grundaufbau { padding-bottom: 48px; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .footer-brand-center { justify-self: stretch; }
}
@media (max-width: 760px) {
  .site-footer > .section-grundaufbau { padding-bottom: 0; }
}

/* ============================================================
   STARTSEITE – E-BOOK: Buch frei stehend, ohne Kachel
   Nur der Textbereich rechts bleibt Kachel. Das Cover steht
   frei auf dem Section-Hintergrund und darf größer werden.
   ============================================================ */
.e-book-aufteilung, .e-book-aufteilung.kachel { background: transparent; border-radius: 0; overflow: visible; box-shadow: none; border: 0; align-items: center; gap: clamp(40px, 6vw, 90px); }
.e-book-bildbereich { background: none; min-height: 0; padding: 20px 0; }
.e-book-cover { width: min(420px, 92%); }
.e-book-textbereich { border-radius: 0 var(--radius-large) 0 var(--radius-large); box-shadow: 0 22px 55px rgba(61,40,27,0.10); }
@media (max-width: 1020px) {
  .e-book-bildbereich { padding: 12px 0; }
  .e-book-cover { width: min(340px, 94%); }
}
@media (max-width: 760px) {
  .e-book-aufteilung { gap: 36px; }
  .e-book-bildbereich { padding: 8px 0 0; }
  .e-book-cover { width: min(320px, 80%); }
  .e-book-textbereich { border-radius: 0 var(--radius-medium) 0 var(--radius-medium); }
}

/* ============================================================
   ABSTAND TEXT → BUTTON: einheitlich 32px
   (Ausnahmen bewusst: Intro und Begrüßung behalten ihre Abstände)
   ============================================================ */
.gutschein-textbereich .section-einleitung,
.e-book-textbereich .section-einleitung,
.kontakt-textbereich .section-einleitung { margin-bottom: 0; }
.gutschein-textbereich > .button { margin-top: 32px; }
.e-book-textbereich .intro-buttons { margin-top: 32px; }
.kontakt-aktionen { margin-top: 32px; }
.kontakt-formularbereich .button { margin-top: 32px; }
@media (max-width: 760px) {
  .kontakt-aktionen > .button { margin-top: 32px; }
}

/* ============================================================
   EINHEITLICHER SEITENRAND
   - Überall 20px (ab 1281px: Inhalt mittig, max. 1240px)
   - Header und Intro bis 480px ebenfalls 20px statt 16px
   - Ablauf-Bild: Browser-Standardabstand von <figure> (40px) entfernt
   ============================================================ */
.ablauf-bildgestaltung { margin: 0; }
@media (max-width: 760px) {
  .ablauf-bildgestaltung { margin: 0 0 36px; }
}
@media (max-width: 480px) {
  .header-inner,
  .seiten-intro#start .intro-innenbereich { width: calc(100% - 40px); }
}

/* ============================================================
   ANGEBOTSSEITE – Intro-Ergänzungen (mehr Text als auf der Startseite)
   - Überschrift bricht natürlich: „Mein Angebot / für Männer.“
   - Einleitung und Zusatztext haben Abstand zueinander
   - Bis 800px: Weichzeichner kräftiger, weil mehr Text auf dem Bild steht
   ============================================================ */
@media (max-width: 800px) {
  body:is(.angebotsseite, .ausbildungsseite) .seiten-intro#seitenanfang h1 { max-width: 7.2em; text-wrap: balance; }
  :is(.angebotsseite, .ausbildungsseite, .blogseite, .chakren-seite, .entwicklung-seite, .interview-seite, .namaste-seite, .osho-seite, .faq-seite, .terminseite, .ueber-mich-seite, .warum-seite, .maenner-seite) .seiten-intro .intro-text { margin: 18px 0 0; max-width: 21em; font-size: 15px; line-height: 1.6; }
  :is(.angebotsseite, .blogseite, .chakren-seite, .entwicklung-seite, .interview-seite, .namaste-seite, .osho-seite, .faq-seite, .terminseite, .ueber-mich-seite, .warum-seite, .maenner-seite) .seiten-intro::after {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .97) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .93) 36%,
      rgba(var(--intro-weichzeichner, 255,250,240), .8) 52%, rgba(var(--intro-weichzeichner, 255,250,240), .5) 66%,
      rgba(var(--intro-weichzeichner, 255,250,240), .2) 80%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 96%);
  }
}
@media (max-width: 500px) {
  :is(.angebotsseite, .blogseite, .chakren-seite, .entwicklung-seite, .interview-seite, .namaste-seite, .osho-seite, .faq-seite, .terminseite, .ueber-mich-seite, .warum-seite, .maenner-seite) .seiten-intro .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .97) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .93) 40%,
      rgba(var(--intro-weichzeichner, 255,250,240), .78) 56%, rgba(var(--intro-weichzeichner, 255,250,240), .45) 70%,
      rgba(var(--intro-weichzeichner, 255,250,240), .15) 86%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 100%);
  }
}

/* ============================================================
   ANGEBOTSSEITE – Angebotsabschnitte bis 760px
   Reihenfolge wie auf der Startseite: Überzeile, Überschrift,
   Einleitung → Bild im Querformat → „Der Rahmen“ (Preis, Dauer,
   Buchen) → ausführlicher Text.
   ============================================================ */
@media (max-width: 760px) {
  .angebots-einstieg { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; margin-bottom: 40px; }
  .angebots-kurzbeschreibung { order: 1; }
  .angebots-bild { order: 2; width: min(100%, 560px); aspect-ratio: 4 / 3; }
  .angebots-inhalt { display: flex; flex-direction: column; gap: 0; }
  .angebots-inhalt .rahmen-kachel { order: -1; width: 100%; margin-bottom: 48px; }
}

/* REGEL: Buttons in Kacheln sind – wie auf der Startseite (Kontaktformular,
   E-Book) – nur so breit wie ihr Text und stehen linksbündig. */
.rahmen-kachel .button { width: auto; }

/* ============================================================
   REGEL: Gestapelte Buttons (bis 560px) sind gleich breit –
   so breit wie der längere der beiden, linksbündig.
   ============================================================ */
@media (max-width: 560px) {
  .intro-buttons,
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons {
    flex-direction: column; align-items: stretch; width: fit-content; max-width: 100%;
  }
  .intro-buttons .button,
  :is(.seiten-intro#start, .angebotsseite .seiten-intro, .ausbildungsseite .seiten-intro, .blogseite .seiten-intro, .chakren-seite .seiten-intro, .entwicklung-seite .seiten-intro, .interview-seite .seiten-intro, .namaste-seite .seiten-intro, .osho-seite .seiten-intro, .stimmen-seite .seiten-intro, .terminseite .seiten-intro, .ueber-mich-seite .seiten-intro, .warum-seite .seiten-intro, .maenner-seite .seiten-intro) .intro-buttons .button { width: 100%; }
}

/* ============================================================
   ANGEBOTSSEITE – Intro-Bild bis 500px: Motiv nach links,
   damit Brust und Gesicht sichtbar sind
   ============================================================ */
@media (max-width: 500px) {
  .angebotsseite .seiten-intro .intro-bild img.angebot-object-position { object-position: 67% 0 !important; }
}

/* ============================================================
   INHALTSTEXTE (Angebotsseite u. a.): gleichmäßige Abstände
   - Kein zusätzlicher Leerraum nach dem letzten Absatz
   - Hinweis-Kachel mit demselben Abstand davor und danach
     wie zwischen zwei Abschnitten (34px + 34px)
   ============================================================ */
.inhalts-textbereich > :last-child { padding-bottom: 0; margin-bottom: 0; }
.inhalts-textbereich > :last-child > p:last-child { margin-bottom: 0; }
.hinweis-kachel { margin: 34px 0; }
.hinweis-kachel + .inhaltsabschnitt { padding-top: 34px; }
.inhaltsabschnitt > p:last-child { margin-bottom: 0; }

/* ============================================================
   ANGEBOTSSEITE – Feinschliff
   - Intro 501–1280px: Motiv deutlich nach rechts, mehr Bild sichtbar
   - Rahmen-Kacheln kompakter, damit auch die lange Ausbildungs-
     Kachel in den Bildschirm passt und beim Lesen mitscrollt
   ============================================================ */
@media (min-width: 501px) and (max-width: 1280px) {
  .angebotsseite .seiten-intro .intro-bild img.angebot-object-position { object-position: 100% 0 !important; }
}
.rahmen-kachel { padding: 28px 30px; }
.rahmen-kachel h3 { margin-bottom: 24px; }
.rahmen-liste > div { padding: 10px 0; }
.rahmen-liste dd { margin-top: 2px; font-size: 14px; line-height: 1.45; }
.rahmen-kachel .button { margin-top: 20px; }
.rahmen-kachel .kleingedrucktes { margin-top: 14px; }
@media (min-width: 761px) {
  .rahmen-kachel { top: 104px; }
}
/* Ausbildung (9 Angaben): ab 761px zweispaltig, damit die Kachel
   in den Bildschirm passt */
@media (min-width: 761px) {
  #ausbildung .rahmen-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  #ausbildung .rahmen-liste > div:nth-child(2) { border-top: 1px solid var(--line); }
}

/* ============================================================
   OVALE BEI GUTSCHEIN UND KONTAKT
   Sichtbar nur, solange zwischen Oval und Text mindestens 28px
   Abstand bleiben. Das Oval wird dafür schmaler und verschwindet
   unter 1376px Fensterbreite ganz.
   ============================================================ */
.gutschein-bereich::before,
.kontakt-bereich::before { display: none; }
@media (min-width: 1376px) {
  .gutschein-bereich::before { display: block; left: -126px; width: calc(126px + min(126px, (100vw - 1240px) / 2 - 28px)); }
  .kontakt-bereich::before { display: block; left: -90px; width: calc(90px + min(90px, (100vw - 1240px) / 2 - 28px)); }
}

/* ============================================================
   KONTAKT bis 760px – für alle Seiten (auch wenn das Formular in
   einem eigenen <div> steckt oder nur ein Textlink davor steht)
   Text → Link/Button 32px, danach 44px bis zum Formular.
   ============================================================ */
@media (max-width: 760px) {
  .kontakt-textbereich > p:not(.ueberzeile) { margin-bottom: 0; }
  .kontakt-aktionen > :first-child { margin-top: 32px; }
  .kontakt-aktionen > .button { margin-bottom: 0; }
  .kontakt-aufteilung > :not(.kontakt-textbereich) { order: 1; margin-top: 44px; }
  .kontakt-aufteilung > .telegram-hinweis, .kontakt-aktionen > .telegram-hinweis { order: 2; }
}

/* ============================================================
   RATENZAHLUNGSSEITE
   - Gespiegelte Abschnitte (Text links, Überschrift rechts):
     bis 760px steht die Überschrift zuerst
   - Modell-Kacheln bleiben bis 761px zweispaltig
   ============================================================ */
@media (max-width: 760px) {
  .inhaltsaufteilung-gespiegelt > .ratenzahlung-kopfbereich { order: -1; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .ratenzahlung-modelle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ratenzahlung-modell { min-height: 0; padding: 30px 26px; }
}
@media (max-width: 760px) {
  .inhaltsaufteilung-gespiegelt > .ratenzahlung-kopfbereich { margin-bottom: 0; }
  .inhaltsaufteilung-gespiegelt:has(> .ratenzahlung-kopfbereich) { row-gap: 0; }
}
/* Preise Deutschland/Schweiz bleiben bis 360px nebeneinander */
@media (min-width: 360px) and (max-width: 520px) {
  .ratenzahlung-preise { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .ratenzahlung-preise dd { font-size: 15px; }
}

/* ============================================================
   INTRO-BILD „verschoben“ (Ratenzahlungsseite)
   Auf dem Desktop wird das Bild um 100px nach rechts geschoben.
   Bis 1020px entstand dadurch links ein leerer Streifen in der
   Hintergrundfarbe. Dort wird das Motiv stattdessen per
   object-position verschoben – das Bild bleibt randlos.
   ============================================================ */
@media (max-width: 1020px) {
  .seiten-intro .intro-bild.verschoben { transform: none; }
}
@media (max-width: 800px) {
  .seiten-intro .intro-bild.verschoben img { object-position: 62% center; }
}

/* ============================================================
   INTRO MIT FARBSCHEMA SALBEI (z. B. Ausbildung, Ratenzahlung)
   Fläche und Weichzeichner hinter dem Text kommen aus dem
   Farbschema: --intro-weichzeichner (siehe .farbschema-salbei).
   :not(#_) hebt die Regel über die gemeinsamen Intro-Regeln.
   ============================================================ */
.seiten-intro.farbschema-salbei:not(#_) { background: rgb(var(--intro-weichzeichner)); }
.seiten-intro.farbschema-salbei:not(#_)::after {
  background:
    linear-gradient(90deg, rgba(var(--intro-weichzeichner),.99) 0%, rgba(var(--intro-weichzeichner),.95) 31%, rgba(var(--intro-weichzeichner),.61) 51%, rgba(var(--intro-weichzeichner),.06) 73%),
    linear-gradient(0deg, rgba(var(--intro-weichzeichner),.2), transparent 30%);
}
@media (min-width: 801px) and (max-width: 1279px) {
  .seiten-intro.farbschema-salbei:not(#_)::after {
    background:
      linear-gradient(90deg, rgba(var(--intro-weichzeichner),.99) 0%, rgba(var(--intro-weichzeichner),.96) 38%, rgba(var(--intro-weichzeichner),.72) 55%, rgba(var(--intro-weichzeichner),.18) 74%, rgba(var(--intro-weichzeichner),0) 86%),
      linear-gradient(0deg, rgba(var(--intro-weichzeichner),.2), transparent 30%);
  }
}
@media (min-width: 801px) and (max-width: 1020px) {
  .seiten-intro.farbschema-salbei:not(#_)::after {
    background: linear-gradient(90deg, rgba(var(--intro-weichzeichner),1) 0%, rgba(var(--intro-weichzeichner),1) 34%, rgba(var(--intro-weichzeichner),.92) 48%, rgba(var(--intro-weichzeichner),.5) 62%, rgba(var(--intro-weichzeichner),.1) 76%, rgba(var(--intro-weichzeichner),0) 84%);
  }
}
@media (max-width: 800px) {
  .seiten-intro.farbschema-salbei:not(#_)::after {
    background: linear-gradient(90deg, rgba(var(--intro-weichzeichner),.97) 0%, rgba(var(--intro-weichzeichner),.93) 36%, rgba(var(--intro-weichzeichner),.8) 52%, rgba(var(--intro-weichzeichner),.5) 66%, rgba(var(--intro-weichzeichner),.2) 80%, rgba(var(--intro-weichzeichner),0) 96%);
  }
}
@media (max-width: 500px) {
  .seiten-intro.farbschema-salbei:not(#_) .intro-bild::before {
    background: linear-gradient(90deg, rgba(var(--intro-weichzeichner),.97) 0%, rgba(var(--intro-weichzeichner),.93) 40%, rgba(var(--intro-weichzeichner),.78) 56%, rgba(var(--intro-weichzeichner),.45) 70%, rgba(var(--intro-weichzeichner),.15) 86%, rgba(var(--intro-weichzeichner),0) 100%);
  }
}

/* ============================================================
   BLOGSEITE – Intro auf kleinen Bildschirmen
   Motiv (Mann am Fenster) nach rechts, Weichzeichner kräftiger,
   damit der längere Text nicht auf dem dunklen Hemd steht.
   ============================================================ */
@media (max-width: 800px) {
  :is(body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seiten-intro:not(#_) .intro-bild img { object-position: 62% center; }
}
@media (max-width: 500px) {
  /* Mann immer am rechten Rand, unabhängig von der Breite */
  :is(body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seiten-intro:not(#_) .intro-bild img { object-position: 70% center; }
  :is(body.blogseite, body.chakren-seite, body.entwicklung-seite, body.interview-seite, body.namaste-seite, body.osho-seite, body.stimmen-seite, body.terminseite, body.ueber-mich-seite, body.warum-seite, body.maenner-seite) .seiten-intro:not(#_) .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .97) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .95) 50%,
      rgba(var(--intro-weichzeichner, 255,250,240), .85) 66%, rgba(var(--intro-weichzeichner, 255,250,240), .55) 80%,
      rgba(var(--intro-weichzeichner, 255,250,240), .2) 92%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 100%);
  }
}

/* ============================================================
   CHAKRENSEITE (Blogartikel „Das Chakrenkonzept“)
   Eigene Bausteine mit Präfix .chakra-… – aufgebaut auf den
   allgemeinen Regeln (Farbschemata, Kacheln, Buttons, Abstände).
   Stufen: ab 1021px Desktop · 761–1020px Tablet · bis 760px Handy
   ============================================================ */

/* Lesefortschritt oben (nur in Browsern mit Scroll-Animation) */
.lesefortschritt { display: none; }
@supports (animation-timeline: scroll()) {
  .lesefortschritt {
    display: block; position: fixed; z-index: 1001; top: 0; left: 0;
    width: 100%; height: 3px; background: var(--cognac);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: chakra-lesefortschritt linear both; animation-timeline: scroll(root);
  }
  @keyframes chakra-lesefortschritt { to { transform: scaleX(1); } }
}

/* Quellenverweise im Text */
.quelle-verweis { font-size: .62em; line-height: 0; }
.quelle-verweis a { padding: 0 1px; color: var(--textlink-farbe); font-weight: 600; text-decoration: none; }
.quelle-verweis a:hover, .quelle-verweis a:focus-visible { text-decoration: underline; }

/* Teil-Markierung in der Überzeile */
.chakra-teil {
  display: inline-block; margin-right: 10px; padding: 3px 9px 2px;
  border-radius: 999px; background: var(--element-farbe); color: var(--element-text);
  font-size: 10px; letter-spacing: .14em; vertical-align: 1px;
}

/* ---------- Einstieg ---------- */
.chakra-einstieg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.chakra-einstieg .section-einleitung { margin-bottom: 22px; }
.chakra-einstieg .fliesstext { margin: 0; }
.chakra-kernfrage { margin: 0; padding: 6px 0 6px clamp(24px, 3vw, 40px); border-left: 2px solid var(--element-farbe); }
.chakra-kernfrage p { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(28px, 2.6vw, 38px); font-style: italic; line-height: 1.25; }
.chakra-kernfrage footer { margin-top: 18px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }

.chakra-leseweg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(56px, 7vw, 88px); }
.chakra-leseweg-teil {
  display: flex; flex-direction: column; min-height: 100%; padding: 28px 26px 26px;
  border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium);
  box-shadow: 0 18px 42px rgba(111, 68, 45, .07); color: var(--ink);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.chakra-leseweg-teil:nth-child(even) { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.chakra-leseweg-teil:hover, .chakra-leseweg-teil:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(111, 68, 45, .12); }
.chakra-leseweg-nummer { color: var(--cognac); font-family: "Cormorant Garamond", Georgia, serif; font-size: 50px; line-height: 1; }
.chakra-leseweg-teil .ueberzeile { margin: 14px 0 6px; }
.chakra-leseweg-teil strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(23px, 2vw, 27px); font-weight: 400; line-height: 1.15; }
.chakra-leseweg-kapitel { margin-top: auto; padding-top: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

/* ---------- Kapitel: Kopf und Spalten ---------- */
.chakra-kapitelkopf { max-width: 760px; margin-bottom: 52px; }
.chakra-kapitelkopf-breit { max-width: 980px; }
.chakra-kapitelkopf .section-einleitung { margin-bottom: 0; }
.chakra-kapitelkopf h2 em { font-style: italic; }

.chakra-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(48px, 7vw, 104px); align-items: start; }
.chakra-spalten-gespiegelt { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); }
.chakra-spalten-gespiegelt > :first-child { order: 2; }
.chakra-spalten-kopf { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.chakra-spalten-kopf > .chakra-kapitelkopf { position: sticky; top: 120px; margin-bottom: 0; }
.chakra-spalten-abstand { margin-top: clamp(56px, 7vw, 88px); }

.chakra-text { max-width: var(--text); }
.chakra-text > p:last-child { margin-bottom: 0; }
.chakra-text h3 { margin: 48px 0 16px; color: var(--ink); font-size: clamp(26px, 2.4vw, 32px); }
.chakra-text h3:first-child { margin-top: 0; }
.chakra-lead { color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(24px, 2.2vw, 30px); font-style: italic; line-height: 1.35; }
.chakra-merksatz { margin-top: 32px; padding-left: 22px; border-left: 2px solid var(--element-farbe); color: var(--ink); font-weight: 500; }
.chakra-randnotiz { margin-top: 22px; padding: 18px 22px; border: 1px dashed var(--line); border-radius: 0 18px 0 18px; font-size: 15px; line-height: 1.65; }

/* Wortkarte „cakra“ */
.chakra-wortkarte { position: sticky; top: 120px; padding: 34px 30px 26px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); box-shadow: 0 18px 45px rgba(72, 54, 19, .08); }
.chakra-rad { width: 92px; height: 92px; margin-bottom: 18px; fill: none; stroke: var(--textlink-farbe); stroke-width: 2; animation: chakra-rad 60s linear infinite; }
@keyframes chakra-rad { to { transform: rotate(360deg); } }
.chakra-wortkarte .ueberzeile { margin-bottom: 6px; }
.chakra-wort { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(52px, 5vw, 66px); line-height: 1; }
.chakra-wortbedeutung { margin: 10px 0 22px; color: var(--cognac-deep); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Zitat-Kachel und Merk-Kachel */
.chakra-zitatkachel { margin: 0; padding: clamp(28px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.chakra-zitatkachel::before { content: "“"; display: block; height: 26px; margin-bottom: 10px; color: var(--textlink-farbe); font-family: "Cormorant Garamond", Georgia, serif; font-size: 60px; line-height: .8; }
.chakra-zitatkachel p { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(23px, 2vw, 28px); font-style: italic; line-height: 1.35; }
.chakra-zitatkachel footer { margin-top: 18px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.chakra-text .chakra-zitatkachel { margin-top: 36px; }
.chakra-randkachel { position: sticky; top: 120px; }
.chakra-merkkachel { padding: clamp(26px, 3vw, 34px); border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); }
.chakra-merkkachel p:last-child { margin: 0; color: var(--ink); }

/* Glossar */
.chakra-glossar { position: sticky; top: 120px; padding: 30px 28px 20px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); box-shadow: 0 18px 45px rgba(72, 54, 19, .08); }
.chakra-glossar h3 { margin-bottom: 14px; font-size: clamp(26px, 2.3vw, 32px); }
.chakra-glossar dl { margin: 0; }
.chakra-glossar dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.chakra-glossar dt { color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; line-height: 1.2; }
.chakra-glossar dd { margin: 3px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* Zitatband */
.chakra-zitatband { max-width: 1000px; margin: 0 0 clamp(64px, 8vw, 104px); }
.chakra-zitatband::before { content: "“"; display: block; height: 44px; color: var(--textlink-farbe); font-family: "Cormorant Garamond", Georgia, serif; font-size: 110px; line-height: .8; }
.chakra-zitatband p { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }

/* ---------- Zeitstrahl ---------- */
.chakra-zeitstrahl { --zeit: 190px; position: relative; max-width: 1080px; margin: 0; padding: 0; list-style: none; }
.chakra-zeitstrahl::before { content: ""; position: absolute; top: 14px; bottom: 30px; left: var(--zeit); width: 1px; background: rgba(116, 83, 13, .28); }
.chakra-station { display: grid; grid-template-columns: var(--zeit) minmax(0, 1fr); }
.chakra-station-zeit { position: relative; padding: 0 36px 0 0; color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; text-align: right; }
.chakra-station-zeit::after { content: ""; position: absolute; top: 10px; right: -7px; width: 9px; height: 9px; border: 3px solid var(--kachel-hintergrund); border-radius: 50%; background: var(--element-farbe); box-shadow: 0 0 0 1px rgba(116, 83, 13, .28); }
.chakra-station-inhalt { max-width: var(--text); padding: 0 0 clamp(48px, 6vw, 72px) 44px; }
.chakra-station-inhalt h3 { margin-bottom: 14px; color: var(--ink); font-size: clamp(27px, 2.5vw, 36px); }
.chakra-station-inhalt p { color: var(--ink-soft); }
.chakra-station-inhalt > p:last-child { margin-bottom: 0; }
.chakra-station-heute .chakra-station-zeit { color: var(--ink); font-style: italic; }
.chakra-station-heute .chakra-station-zeit::after { width: 13px; height: 13px; top: 8px; right: -9px; background: var(--ink); }
.chakra-station-heute .chakra-station-inhalt { padding-bottom: 0; }

/* ---------- Schichten (Hybridprodukt) ---------- */
.chakra-schichten { display: grid; gap: 10px; margin: clamp(56px, 7vw, 88px) 0 0; }
.chakra-schicht { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; justify-self: center; padding: 20px 28px; border-radius: 0 22px 0 22px; background: rgba(215, 167, 45, .12); }
.chakra-schicht:nth-child(1) { width: 64%; }
.chakra-schicht:nth-child(2) { width: 76%; background: rgba(215, 167, 45, .18); }
.chakra-schicht:nth-child(3) { width: 88%; background: rgba(215, 167, 45, .25); }
.chakra-schicht-basis { width: 100%; background: rgba(215, 167, 45, .34); }
.chakra-schicht-nr { color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 38px; line-height: 1; }
.chakra-schicht strong { display: block; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(22px, 2vw, 27px); font-weight: 400; line-height: 1.2; }
.chakra-schicht span:not(.chakra-schicht-nr) { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* Tabelle der Zuordnungen */
.chakra-tabelle { width: 100%; padding: 22px 28px 14px; border: 1px solid var(--line); border-collapse: separate; border-spacing: 0; border-radius: 0 var(--radius-medium) 0 var(--radius-medium); box-shadow: 0 18px 45px rgba(72, 54, 19, .08); }
.chakra-tabelle caption { margin: 0 0 14px; text-align: left; }
.chakra-tabelle th, .chakra-tabelle td { padding: 11px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.chakra-tabelle tr:first-child th, .chakra-tabelle tr:first-child td { border-top: 0; }
.chakra-tabelle th { padding-right: 18px; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; font-weight: 400; white-space: nowrap; }
.chakra-tabelle td { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ---------- Zwischenspiel mit Bild ---------- */
.chakra-zwischenspiel-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(48px, 7vw, 110px); align-items: center; }
.chakra-zwischenspiel-bild { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 0 var(--radius-large) 0 var(--radius-large); box-shadow: var(--shadow-soft); }
.chakra-zwischenspiel-bild img { width: 100%; height: 100%; object-fit: cover; }
.chakra-zwischenspiel-text h2 { font-size: clamp(44px, 5.4vw, 78px); line-height: 1; }
.chakra-zwischenspiel-text .section-einleitung { margin-bottom: 0; }

/* ---------- Anatomie: Achse und Faktencheck ---------- */
.chakra-anatomie { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: start; }
.chakra-achse { position: sticky; top: 120px; margin: 0; }
.chakra-achse svg { display: block; width: 100%; height: auto; overflow: visible; }
.chakra-achse-linie { stroke: rgba(116, 83, 13, .35); stroke-width: 1.5; }
.chakra-achse-punkt circle { fill: var(--element-farbe); stroke: var(--kachel-hintergrund); stroke-width: 4; }
.chakra-achse-punkt text { fill: var(--ink-soft); font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.chakra-achse-punkt .chakra-achse-nr { fill: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; font-weight: 400; letter-spacing: 0; text-anchor: end; }
.chakra-achse figcaption { margin-top: 18px; color: var(--ink-soft); font-size: 12px; font-style: italic; line-height: 1.5; }

.chakra-faktencheck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.chakra-fakt { display: flex; flex-direction: column; padding: 28px 26px 24px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); box-shadow: 0 16px 40px rgba(111, 68, 45, .07); }
.chakra-fakt:nth-child(even) { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.chakra-fakt-nr { margin: 0 0 8px; color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; }
.chakra-fakt h3 { margin-bottom: 12px; color: var(--ink); font-size: clamp(24px, 2.1vw, 29px); }
.chakra-fakt p:not(.chakra-fakt-nr) { color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
.chakra-fakt-grenze { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px !important; }
.chakra-fakt-grenze span { display: block; margin-bottom: 4px; color: var(--copper-deep); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }

.chakra-fazit { margin-top: 52px; padding: clamp(30px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-large) 0 var(--radius-large) 0; }
.chakra-fazit p:last-child { margin: 0; max-width: 900px; color: var(--ink); font-size: clamp(17px, 1.3vw, 19px); }
.chakra-fazit strong { font-weight: 600; }

/* ---------- Vergleich: Beobachtung → Deutung ---------- */
.chakra-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: stretch; }
.chakra-vergleich-seite { padding: 28px 28px 20px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); }
.chakra-vergleich-seite:last-child { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.chakra-vergleich-seite ul { margin: 0; padding: 0; list-style: none; }
.chakra-vergleich-seite li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
.chakra-vergleich-pfeil { align-self: center; color: var(--cognac); font-family: "Cormorant Garamond", Georgia, serif; font-size: 44px; line-height: 1; }

/* ---------- Sprache in der Praxis ---------- */
.chakra-sprache { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; margin-top: clamp(56px, 7vw, 88px); }
.chakra-sprache-seite { padding: clamp(28px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); }
.chakra-sprache-seite:last-child { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.chakra-sprache-satz { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(24px, 2.2vw, 30px); font-style: italic; line-height: 1.3; }
.chakra-sprache-satz + .chakra-sprache-satz { margin-top: 18px; }
.chakra-sprache-nicht .chakra-sprache-satz { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(117, 69, 54, .45); text-decoration-thickness: 1px; }
.chakra-sprache-fazit { max-width: 860px; margin: 32px 0 0; color: var(--ink-soft); }
.chakra-sprache-fazit strong { color: var(--ink); font-weight: 600; }

.chakra-schluss { max-width: 900px; margin: clamp(80px, 10vw, 130px) auto 0; text-align: center; }
.chakra-schluss-intro { margin: 0; color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 1.8vw, 25px); font-style: italic; }
.chakra-schluss-motto { margin: 20px 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(38px, 5vw, 68px); line-height: 1.08; letter-spacing: -.02em; }
.chakra-schluss .intro-buttons { justify-content: center; margin: 32px auto 0; }

/* ---------- Quellen und Weiterlesen ---------- */
.chakra-quellen .section-einleitung { margin-bottom: 0; }
.chakra-quellen .quellen-liste { margin: 28px 0 0; padding: 0; list-style: none; }
.chakra-quellen .quellen-liste li { scroll-margin-top: 120px; padding: 10px 14px; border-radius: 0 14px 0 14px; transition: background-color 400ms ease; }
.chakra-quellen .quellen-liste li:target { background: var(--kachel-hervorgehoben); }
.chakra-quellen .quellen-liste a { color: var(--textlink-farbe); }
:is(.chakren-seite, .entwicklung-seite, .interview-seite, .namaste-seite, .osho-seite) .artikel-empfehlung .textlink { margin-top: auto; }

/* ---------- Tablet 761–1020px ---------- */
@media (max-width: 1020px) {
  .chakra-leseweg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chakra-spalten { grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); gap: 48px; }
  .chakra-spalten-gespiegelt { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .chakra-spalten-kopf { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .chakra-zeitstrahl { --zeit: 140px; }
  .chakra-anatomie { grid-template-columns: 140px minmax(0, 1fr); }
  .chakra-schicht:nth-child(1) { width: 76%; }
  .chakra-schicht:nth-child(2) { width: 84%; }
  .chakra-schicht:nth-child(3) { width: 92%; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  :is(.chakren-seite, .entwicklung-seite, .interview-seite, .namaste-seite, .osho-seite) .artikel-empfehlung:last-child { grid-column: 1 / -1; min-height: 0; }
  .chakra-faktencheck { grid-template-columns: 1fr; }
}

/* ---------- Handy bis 760px ---------- */
@media (max-width: 760px) {
  .chakra-einstieg,
  .chakra-spalten, .chakra-spalten-gespiegelt, .chakra-spalten-kopf,
  .chakra-zwischenspiel-raster, .chakra-anatomie,
  .chakra-sprache { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .chakra-spalten-gespiegelt > :first-child { order: 0; }
  .chakra-spalten-kopf > .chakra-kapitelkopf,
  .chakra-wortkarte, .chakra-glossar, .chakra-randkachel { position: relative; top: auto; }
  .chakra-spalten-kopf > .chakra-kapitelkopf { margin-bottom: -4px; }

  /* Zwischenspiel: Überschrift zuerst, dann Bild im Querformat */
  .chakra-zwischenspiel-text { order: 1; }
  .chakra-zwischenspiel-bild { order: 2; width: min(100%, 560px); aspect-ratio: 4 / 3; }
  .chakra-zwischenspiel-bild img { object-position: 50% 30%; }

  .chakra-zeitstrahl { --zeit: 0px; padding-left: 30px; }
  .chakra-zeitstrahl::before { left: 6px; }
  .chakra-station { grid-template-columns: 1fr; }
  .chakra-station-zeit { padding: 0 0 8px; text-align: left; }
  .chakra-station-zeit::after { left: -30px; right: auto; }
  .chakra-station-heute .chakra-station-zeit::after { left: -32px; }
  .chakra-station-inhalt { padding-left: 0; }

  .chakra-achse { display: none; }
  .chakra-faktencheck { grid-template-columns: 1fr; }

  .chakra-schicht, .chakra-schicht:nth-child(n) { width: 100%; grid-template-columns: 44px minmax(0, 1fr); padding: 18px 20px; }

  .chakra-vergleich { grid-template-columns: 1fr; gap: 12px; }
  .chakra-vergleich-pfeil { justify-self: center; transform: rotate(90deg); }

  .chakra-tabelle { padding: 18px 20px 10px; }
  .chakra-tabelle th { font-size: 18px; white-space: normal; }
}
@media (max-width: 500px) {
  .chakra-leseweg { grid-template-columns: 1fr; }
  .chakra-leseweg-teil { min-height: 0; }
  .chakra-zitatband::before { height: 34px; font-size: 84px; }
  /* Tabelle: Name über der Beschreibung */
  .chakra-tabelle, .chakra-tabelle tbody, .chakra-tabelle tr, .chakra-tabelle th, .chakra-tabelle td { display: block; }
  .chakra-tabelle caption { display: block; }
  .chakra-tabelle tr { padding: 11px 0; border-top: 1px solid var(--line); }
  .chakra-tabelle tr:first-child { border-top: 0; }
  .chakra-tabelle th, .chakra-tabelle td { padding: 0; border-top: 0; }
  .chakra-tabelle td { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .chakra-rad { animation: none; }
  .lesefortschritt { display: none; }
}

/* ============================================================
   ENTSTEHUNGS-ARTIKEL („Wer hat’s erfunden?“)
   Nutzt die Artikel-Bausteine der Chakrenseite (.chakra-…) und
   ergänzt Steckbrief, Meilenstein, Bücherliste und Zwischenruf.
   ============================================================ */

/* Sechs Stationen: 3 → 2 → 1 Spalten */
.entwicklung-leseweg { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.entwicklung-leseweg .chakra-leseweg-nummer { font-size: 44px; }
.entwicklung-leseweg .chakra-leseweg-kapitel { font-size: 14px; }

/* Steckbrief neben dem Porträttext */
.entwicklung-steckbrief {
  position: sticky; top: 120px; padding: 34px 30px 28px;
  border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium);
  box-shadow: 0 18px 45px rgba(72, 54, 19, .08);
}
.chakra-spalten-gespiegelt .entwicklung-steckbrief { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.entwicklung-steckbrief-jahr { margin: 0 0 14px; color: var(--cognac); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(56px, 5.4vw, 76px); line-height: .9; letter-spacing: -.02em; }
.entwicklung-steckbrief .ueberzeile { margin-bottom: 6px; }
.entwicklung-steckbrief-name { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.12; }
.entwicklung-steckbrief-alias { margin: 6px 0 0; color: var(--ink-soft); font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-style: italic; line-height: 1.3; }
.entwicklung-steckbrief-daten { margin: 16px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.entwicklung-steckbrief-beitrag { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.6; }
.entwicklung-steckbrief-beitrag span { display: block; margin-bottom: 4px; color: var(--cognac-deep); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Schattenseite (Osho) mit Abstand im Fließtext */
.chakra-text .entwicklung-schatten { margin: 40px 0 0; }

/* Zwischenruf */
.entwicklung-zwischenruf .chakra-zitatband { margin-bottom: 22px; }
.entwicklung-zwischenruf-text { max-width: 640px; margin: 0; color: var(--ink-soft); font-size: clamp(17px, 1.3vw, 19px); }
.entwicklung-zwischenruf-text strong { color: var(--ink); font-weight: 600; }

/* Meilenstein 1978 */
.entwicklung-meilenstein { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; margin: 40px 0; padding: 28px 30px; border-radius: 0 var(--radius-medium) 0 var(--radius-medium); background: rgba(215, 167, 45, .16); }
.entwicklung-meilenstein-jahr { margin: 0; color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(48px, 4.6vw, 64px); line-height: .9; }
.entwicklung-meilenstein .ueberzeile { margin-bottom: 8px; }
.entwicklung-meilenstein p:last-child { margin: 0; color: var(--ink); }

/* Bücher (Anand) */
.entwicklung-buecher { margin: 32px 0; padding: 0; list-style: none; }
.entwicklung-buecher li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); }
.entwicklung-buecher li:last-child { border-bottom: 1px solid var(--line); }
.entwicklung-buecher-jahr { color: var(--cognac-deep); font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; line-height: 1.1; }

/* Zwei Begriffe in der Wortkarte untereinander */
.entwicklung-seite .chakra-wortbedeutung + .chakra-wort { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.entwicklung-seite .chakra-wortbedeutung:last-child { margin-bottom: 0; }

@media (max-width: 1020px) {
  .entwicklung-leseweg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .entwicklung-steckbrief { position: relative; top: auto; }
  /* Handy: Überzeile → Name → Einleitung → Steckbrief → restlicher Text (ohne HTML-Umbau) */
  .chakra-spalten:has(> .entwicklung-steckbrief) { display: flex; flex-direction: column; gap: 0; }
  .chakra-spalten:has(> .entwicklung-steckbrief) > .chakra-text { display: contents; }
  .chakra-spalten:has(> .entwicklung-steckbrief) > .chakra-text > * { order: 3; }
  .chakra-spalten:has(> .entwicklung-steckbrief) > .chakra-text > :is(.ueberzeile, h2, .chakra-lead) { order: 1; }
  .chakra-spalten > .entwicklung-steckbrief { order: 2; margin: 6px 0 32px; }
  .entwicklung-steckbrief { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding: 24px 22px; }
  .entwicklung-steckbrief > * { grid-column: 2; }
  .entwicklung-steckbrief-jahr { grid-column: 1; grid-row: 1 / span 4; margin: 0; font-size: 44px; }
  .entwicklung-steckbrief-beitrag { grid-column: 1 / -1; }
  .entwicklung-meilenstein { grid-template-columns: 1fr; gap: 10px; padding: 24px 22px; }
}
@media (max-width: 500px) {
  .entwicklung-leseweg { grid-template-columns: 1fr; }
  .entwicklung-buecher li { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   INTERVIEW-ARTIKEL („Meine erste Tantra-Massage“)
   Nutzt die Artikel-Bausteine (.chakra-…) und ergänzt Gesprächs-
   verlauf (Frage/Antwort mit Sprecher-Spalte), Personenkarte,
   Fragenliste, Rat und Dank.
   ============================================================ */

/* Personenkarte im Einstieg */
.interview-person { padding: 34px 30px 26px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium); box-shadow: 0 18px 45px rgba(72, 54, 19, .08); }
.interview-person-kuerzel { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 20px; border-radius: 50%; background: var(--element-farbe); color: var(--element-text); font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; line-height: 1; }
.interview-person .ueberzeile { margin-bottom: 4px; }
.interview-person-name { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(48px, 4.6vw, 62px); line-height: 1; }
.interview-person-hinweis { margin: 8px 0 18px; color: var(--ink-soft); font-size: 12px; font-style: italic; }
.interview-person-fakten { margin: 0; padding: 0; list-style: none; }
.interview-person-fakten li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.5; }

/* Gesprächsverlauf: Sprecher links, Inhalt rechts */
.interview-verlauf { max-width: 1000px; }
.interview-frage, .interview-antwort { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); }
.interview-frage > *:not(.interview-sprecher), .interview-antwort > *:not(.interview-sprecher) { grid-column: 2; }
.interview-sprecher { grid-column: 1; grid-row: 1 / span 20; align-self: start; display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.interview-sprecher::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.interview-frage .interview-sprecher { color: var(--ink-soft); }
.interview-frage .interview-sprecher::before { border: 1px solid var(--ink-soft); }
.interview-antwort .interview-sprecher { position: sticky; top: 120px; color: var(--cognac-deep); }
.interview-antwort .interview-sprecher::before { background: var(--element-farbe); }

.interview-frage { margin-top: clamp(64px, 7vw, 88px); }
.interview-verlauf > .interview-frage:first-child { margin-top: 0; }
.interview-frage h3 { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(25px, 2.2vw, 31px); font-style: italic; font-weight: 400; line-height: 1.3; }
.interview-antwort { margin-top: 30px; }
.interview-antwort > p:not(.interview-sprecher) { max-width: var(--text); }
.interview-antwort > p:last-child { margin-bottom: 0; }

/* Zitat zwischen zwei Fragen */
.interview-zitat { margin: clamp(56px, 7vw, 80px) 0 0 calc(130px + clamp(28px, 4vw, 56px)); padding-left: clamp(22px, 3vw, 36px); border-left: 2px solid var(--element-farbe); }
.interview-zitat p { margin: 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; text-wrap: balance; }

/* Fragenliste vor dem ersten Termin */
.interview-fragenliste { max-width: var(--text); margin: 8px 0 28px; padding: 0; list-style: none; }
.interview-fragenliste li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(20px, 1.7vw, 23px); font-style: italic; line-height: 1.3; }
.interview-fragenliste li:last-child { border-bottom: 1px solid var(--line); }

/* Rat, Dank, Zitatband-Autor */
.interview-rat { margin: 0 0 24px; padding-left: 22px; border-left: 2px solid var(--element-farbe); color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(25px, 2.3vw, 32px); font-style: italic; line-height: 1.3; }
.interview-dank { max-width: 780px; margin: 18px auto 0; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(23px, 2vw, 29px); font-style: italic; line-height: 1.4; }
.interview-zurueck { margin: 32px 0 0; }
.interview-zitatband { margin-bottom: 0; }
.interview-zitatband footer { margin-top: 22px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
:is(.interview-seite, .osho-seite) .chakra-kapitelkopf { margin-bottom: clamp(44px, 5vw, 64px); }

@media (max-width: 760px) {
  .interview-frage, .interview-antwort { grid-template-columns: minmax(0, 1fr); }
  .interview-frage > *, .interview-antwort > * { grid-column: 1 !important; }
  .interview-sprecher { grid-row: auto; position: static !important; margin: 0 0 12px; }
  .interview-frage { margin-top: 56px; }
  .interview-antwort { margin-top: 24px; }
  .interview-zitat { margin: 48px 0 0; }
  .interview-person { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; padding: 26px 22px 20px; }
  .interview-person > * { grid-column: 2; }
  .interview-person-kuerzel { grid-column: 1; grid-row: 1 / span 3; width: 60px; height: 60px; margin: 0; font-size: 34px; }
  .interview-person-fakten { grid-column: 1 / -1; margin-top: 4px; }
}

/* ============================================================
   NAMASTÉ-ARTIKEL
   Artikel-Bausteine (.chakra-…) plus Händesymbol, Gleichheits-
   Vergleich und drei Fundament-Kacheln ohne Link.
   ============================================================ */
.artikel-fragenliste { margin: 0 0 32px; }
.namaste-haende { width: 92px; height: 92px; margin-bottom: 18px; fill: none; stroke: var(--textlink-farbe); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chakra-wortkarte .rahmen-liste { margin-top: 0; }
.namaste-gleich .chakra-vergleich-seite:last-child { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.namaste-gleich .chakra-vergleich-pfeil { font-size: 56px; }
.namaste-fundament { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.namaste-fundament .chakra-leseweg-teil:hover { transform: none; box-shadow: 0 18px 42px rgba(111, 68, 45, .07); }
.namaste-fundament .chakra-leseweg-teil strong { margin-top: auto; }
.namaste-glossar-text { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) {
  .namaste-gleich .chakra-vergleich-pfeil { transform: none; }
}
@media (max-width: 500px) {
  .namaste-fundament { grid-template-columns: 1fr; }
}

/* ============================================================
   OSHO-ARTIKEL (Interview)
   Nutzt Interview- und Artikel-Bausteine; ergänzt nur Abstände
   für den Vergleich „Narrativ ↔ verschwiegen“ mitten im Gespräch.
   ============================================================ */
.osho-narrativ { margin: clamp(56px, 7vw, 80px) 0; }
.osho-narrativ .chakra-vergleich-seite:last-child { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.interview-antwort.osho-fortsetzung { margin-top: 0; }
.chakra-sprache + .interview-verlauf { margin-top: clamp(40px, 5vw, 56px); }
.interview-verlauf + .chakra-sprache { margin-top: clamp(48px, 6vw, 72px); }

/* ============================================================
   RECHTSSEITEN (Datenschutz, Impressum) – kompaktes Text-Intro
   Kein Bild, daher keine volle Bildschirmhöhe. Oval bleibt links
   (60px sichtbar) mit mind. 28px Abstand zum Text; bis 800px aus.
   ============================================================ */
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) { --oval-sichtbar: 60px; --oval-abstand: 28px; min-height: 0; }
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_)::before { top: 50%; left: calc(var(--oval-sichtbar) - 172px); height: 240px; transform: translateY(-50%); }
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) .intro-innenbereich {
  min-height: 0;
  padding-top: calc(var(--header-hoehe, 95px) + clamp(48px, 6vw, 88px));
  padding-bottom: clamp(48px, 6vw, 88px);
  /* Text rückt nur so weit ein, wie das Oval es verlangt */
  padding-left: max(0px, calc(var(--oval-sichtbar) + var(--oval-abstand) - (100% - min(var(--content), 100% - 40px)) / 2));
}
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) .intro-textbereich { width: auto; max-width: 760px; padding: 0; }
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) h1 { font-size: clamp(36px, 11.5vw, 72px); }
:is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) .intro-einleitung { margin-bottom: 0; }
@media (max-width: 800px) {
  :is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_)::before { display: none; }
  :is(body.datenschutzseite, body.impressumsseite) .seiten-intro:not(#_) .intro-innenbereich { padding-left: 0; padding-top: calc(var(--header-hoehe, 95px) + 40px); padding-bottom: 48px; }
}
/* Inhaltsverzeichnis auf dem Handy etwas kompakter */
@media (max-width: 760px) {
  .datenschutz-inhaltsverzeichnis { padding: 24px 22px 12px; }
  .datenschutz-text h2 { font-size: clamp(30px, 8vw, 40px); }
}

/* ============================================================
   STIMMEN – responsive Ergänzungen
   Gespiegelte Abschnitte verhalten sich wie die Startseite:
   ab 761px zweispaltig, bis 760px einspaltig mit Bild im Querformat.
   ============================================================ */
@media (min-width: 761px) and (max-width: 900px) {
  .gaststimme-grid-gespiegelt { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
  .gaststimme-grid-gespiegelt .gaststimme-textbereich { order: 2; }
  .gaststimme-grid-gespiegelt .gaststimme-bild { order: 1; }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .ablauf-grid-gespiegelt { grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); }
}
@media (max-width: 760px) {
  .ablauf-grid-gespiegelt { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   STIMMEN – Bildausschnitte und KI-Zeichen
   Mann im Intro immer sichtbar (wie Blog), Hemd immer ganz im
   Bild, unten rechts keine Rundung, damit das KI-Zeichen bleibt.
   ============================================================ */
.stimmen-seite .seiten-intro .intro-bild img.stimmen-hero { object-position: 70% 15% !important; }
@media (max-width: 1020px) {
  .stimmen-seite .seiten-intro .intro-bild img.stimmen-hero { object-position: 85% 15% !important; }
}
@media (max-width: 800px) {
  .stimmen-seite .seiten-intro .intro-bild img.stimmen-hero { object-position: 66% 15% !important; }
}
@media (max-width: 500px) {
  .stimmen-seite .seiten-intro .intro-bild img.stimmen-hero { object-position: 68% 15% !important; }
  .stimmen-seite .seiten-intro:not(#_) .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .96) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .88) 34%,
      rgba(var(--intro-weichzeichner, 255,250,240), .55) 52%, rgba(var(--intro-weichzeichner, 255,250,240), .15) 68%,
      rgba(var(--intro-weichzeichner, 255,250,240), 0) 80%);
  }
}
.stimmen-ablauf .ablauf-bildgestaltung { border-radius: var(--radius-large) 0 0 var(--radius-large); }
.gaststimme-grid-gespiegelt .gaststimme-bild { border-radius: 0 var(--radius-medium) 0 var(--radius-medium); }
.ablauf-grid-gespiegelt.stimmen-ablauf .ablauf-bildgestaltung img { object-position: 90% 50%; }
@media (max-width: 760px) {
  .ablauf-grid-gespiegelt.stimmen-ablauf .ablauf-bildgestaltung { aspect-ratio: 4 / 5; width: min(100%, 440px); }
  .ablauf-grid-gespiegelt.stimmen-ablauf .ablauf-bildgestaltung img { object-position: 90% 45%; }
}
/* Stimmen bis 760px: Bild erst nach der ersten Stimme, damit nach dem
   Intro (bzw. nach einem Bildabschnitt) nicht zwei Bilder aufeinanderfolgen */
@media (max-width: 760px) {
  .stimmen-ablauf .ablauf-textbereich-artikel { order: 3; }
  .stimmen-ablauf .ablauf-textbereich-artikel:first-child { order: 1; }
  .stimmen-ablauf .ablauf-bildgestaltung { order: 2; margin: 8px 0 36px; }
}
/* Stimmen: kein Zusatzabstand vor der ersten und nach der letzten Stimme,
   damit oben und unten derselbe Abstand wie bei den übrigen Abschnitten gilt */
.stimmen-ablauf .ablauf-textbereich-artikel:first-child { padding-top: 0; }
.stimmen-ablauf .ablauf-textbereich-artikel:last-child { padding-bottom: 0; }

/* ============================================================
   FAQ – Intro-Motiv und Suchfeld
   Mann immer ganz bzw. mit Gesicht rechts neben dem Text sichtbar.
   ============================================================ */
.faq-seite .seiten-intro .intro-bild img { object-position: 80% 0 !important; }
@media (max-width: 420px) {
  .faq-seite .seiten-intro .intro-bild img { object-position: 70% 0 !important; }
}
/* Suchfeld: nur der eigene „Suche löschen“-Knopf, in einer Zeile */
.faq-suchfeld input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
@media (max-width: 600px) {
  .faq-suchfeld { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 0 14px; }
  .faq-suche-loeschen { grid-column: auto; justify-self: end; margin: 0; font-size: 11px; white-space: nowrap; }
  .faq-suchfeld input { font-size: 16px; }
}

/* ============================================================
   FAQ – Suche, Themen und Fragen (Überarbeitung)
   - Suchfeld hell und prominent, die Kachel darum zurückhaltend
   - Themen als Kacheln mit Nummer und Anzahl der Fragen
   - Fragen in der Grundschrift, damit die Liste leichter wirkt
   - Kapitelüberschrift bleibt ab 901px beim Scrollen stehen
   ============================================================ */
.faq-suche { background: rgba(255, 255, 255, .28); box-shadow: none; }
.faq-suchfeld { min-height: 66px; border-color: rgba(116, 83, 13, .28); background: #fff; box-shadow: 0 12px 30px rgba(111, 68, 45, .10); }
.faq-suchfeld:focus-within { background: #fff; }

.faq-themen { margin-top: 44px; }
.faq-themen-label { margin-bottom: 16px; }
.faq-themen-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: none; margin: 0; }
.faq-themen-navigation a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 0 var(--radius-medium) 0 var(--radius-medium);
  background: var(--kachel-hintergrund); box-shadow: 0 14px 34px rgba(111, 68, 45, .08);
  color: var(--ink); font-size: 16px; line-height: 1.3;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.faq-themen-navigation a:nth-child(even) { border-radius: var(--radius-medium) 0 var(--radius-medium) 0; }
.faq-themen-navigation a:hover, .faq-themen-navigation a:focus-visible { transform: translateY(-3px); border-color: var(--line); background: #fff; color: var(--ink); box-shadow: 0 20px 40px rgba(111, 68, 45, .13); }
.faq-thema-nr { color: var(--cognac); font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1; }
.faq-thema-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.faq-thema-titel { font-weight: 500; }
.faq-thema-anzahl { color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.faq-thema-pfeil { color: var(--textlink-farbe); font-size: 18px; transition: transform 200ms ease; }
.faq-themen-navigation a:hover .faq-thema-pfeil { transform: translateY(3px); }

.faq-frage { font-family: "Manrope", system-ui, sans-serif; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; line-height: 1.45; padding-top: 20px; padding-bottom: 20px; }
.faq-eintrag[open] .faq-frage { color: var(--cognac-deep); }
.faq-antwort { font-size: 15.5px; line-height: 1.75; }

@media (min-width: 901px) {
  .faq-themenbereich .faq-themenkopf { position: sticky; top: 120px; }
}
@media (max-width: 1020px) {
  .faq-themen-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .faq-themen-navigation { grid-template-columns: 1fr; gap: 10px; }
  .faq-themen-navigation a { padding: 14px 18px; gap: 14px; }
  .faq-thema-nr { font-size: 26px; }
}

/* ============================================================
   GOOGLE-REZENSION – Überarbeitung
   - Intro: Textregeln wie Blog/Angebot, Mann bleibt rechts sichtbar
   - „Du bestimmst …“: Text links, Hinweis-Kachel rechts, oben bündig
   - „Danach“ bis 760px: Überschrift → Bild → Text → Buttons
   - KI-Zeichen unten rechts sichtbar (keine Rundung an dieser Ecke)
   ============================================================ */
.rezensionsseite .seiten-intro .intro-bild img { object-position: 62% 30%; }
.rezensionsseite .rezension-einstieg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.rezensionsseite .rezension-einstieg .begruessung-text { display: block; }
.rezensionsseite .rezension-einstieg .section-einleitung { margin-bottom: 0; }
.rezensionsseite .rezension-abschluss .ablauf-bildgestaltung { border-radius: var(--radius-large) 0 0 var(--radius-large); }
@media (max-width: 800px) {
  .rezensionsseite .seiten-intro .intro-text { margin: 18px 0 0; max-width: 21em; font-size: 15px; line-height: 1.6; }
  .rezensionsseite .seiten-intro .intro-bild img { object-position: 72% 30%; }
}
@media (max-width: 760px) {
  .rezensionsseite .rezension-einstieg { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rezensionsseite .rezension-abschluss .ablauf-textbereich > * { order: 3; }
  .rezensionsseite .rezension-abschluss .ablauf-textbereich > :is(.ueberzeile, h2) { order: 0; }
  .rezensionsseite .rezension-abschluss .ablauf-bildgestaltung { order: 1; margin: 8px 0 32px; }
  .rezensionsseite .rezension-abschluss .ablauf-bildgestaltung img { object-position: 60% 40%; }
}
@media (max-width: 500px) {
  .rezensionsseite .seiten-intro:not(#_) .intro-bild img { object-position: 80% 30%; }
  .rezensionsseite .seiten-intro:not(#_) .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .97) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .93) 45%,
      rgba(var(--intro-weichzeichner, 255,250,240), .75) 62%, rgba(var(--intro-weichzeichner, 255,250,240), .3) 80%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 94%);
  }
  .rezensionsseite .seiten-intro:not(#_) h1 { max-width: 7.5em; }
}

/* ============================================================
   TERMINSEITE – Intro in den gemeinsamen Regeln, Motiv so, dass
   der Mann (Kopf, Hand, Schuh) rechts neben dem Text sichtbar ist.
   Kontakt wie überall in Salbei (Sonderfarben entfernt).
   ============================================================ */
.terminseite .seiten-intro .intro-bild img.termin-hero { object-position: 80% 0 !important; }
@media (max-width: 500px) {
  .terminseite .seiten-intro .intro-bild img.termin-hero { object-position: 63% 0 !important; }
  .terminseite .seiten-intro:not(#_) .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 250,246,238), .95) 0%, rgba(var(--intro-weichzeichner, 250,246,238), .85) 36%,
      rgba(var(--intro-weichzeichner, 250,246,238), .45) 52%, rgba(var(--intro-weichzeichner, 250,246,238), .1) 66%, rgba(var(--intro-weichzeichner, 250,246,238), 0) 78%);
  }
}

/* ============================================================
   TERMINSEITE – Kalender-Kachel, wenn Text und Kalender
   untereinander stehen (bis 1050px): Eckdaten als kompaktes
   Raster statt einer langen, weit gespreizten Liste; weniger
   Luft zwischen Text und Kalender.
   ============================================================ */
@media (max-width: 1050px) {
  .termin-kalender-textbereich { padding-bottom: 20px; }
  .termin-kalender-textbereich h2 { margin-bottom: 24px; }
  .termin-daten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
  .termin-daten > div { display: block; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .termin-daten dt { margin-bottom: 6px; }
  .termin-fussnote { margin-top: 20px; }
}
@media (max-width: 760px) {
  .termin-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .termin-daten > div { padding: 14px 0; }
}
@media (max-width: 380px) {
  .termin-daten { grid-template-columns: 1fr; }
}

/* ============================================================
   ÜBER MICH – responsive Ergänzungen
   - Intro in den gemeinsamen Regeln (.ueber-mich-seite)
   - bis 760px: Überzeile + Überschrift + Einleitung → Bild (4:3)
     → restlicher Text („Mein Weg“ und „Was ich mitbringe“)
   - „Ich arbeite ausschließlich mit Männern“: Überschrift oben
   - Leitgedanke bis 900px zwischen Einleitung und Langtext
   ============================================================ */
.ueber-mich-weg-bild, .ueber-mich-profil-bild { background: var(--kachel-hintergrund); }
.ueber-mich-weg-bild img, .ueber-mich-profil-bild img { object-position: 50% 30%; }
@media (max-width: 900px) {
  .ueber-mich-langtext-grid { gap: 48px; }
  .ueber-mich-leitgedanke { order: -1; }
}
@media (max-width: 760px) {
  .ueber-mich-weg-grid, .ueber-mich-profil-grid { row-gap: 0; }
  .ueber-mich-weg-text, .ueber-mich-profil-text { display: contents; }
  .ueber-mich-weg-text > *, .ueber-mich-profil-text > * { order: 3; }
  .ueber-mich-weg-text > :is(.ueberzeile, h2, .section-einleitung),
  .ueber-mich-profil-text > :is(.ueberzeile, h2, .section-einleitung) { order: 1; }
  .ueber-mich-weg-bild, .ueber-mich-profil-bild { order: 2; width: min(100%, 560px); aspect-ratio: 4 / 3; margin: 0 0 36px; }
  .ueber-mich-weg-text .section-einleitung, .ueber-mich-profil-text .section-einleitung { margin-bottom: 32px; }
  .ueber-mich-seite .inhaltsaufteilung-gespiegelt { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ueber-mich-seite .inhaltsaufteilung-gespiegelt > :last-child { order: -1; }
  .ueber-mich-seite .inhaltsaufteilung-gespiegelt h2 { margin-bottom: 0; }
}

/* Über mich – „Aus Verletzlichkeit …“: Überschrift und Langtext bilden
   eine Einheit; die Leitgedanke-Kachel beginnt neben der Überschrift
   und läuft von dort beim Scrollen mit (ab 901px). */
@media (min-width: 901px) {
  .ueber-mich-lebensweg .section-innenbereich {
    display: grid;
    grid-template-columns: minmax(0, var(--text)) minmax(270px, 340px);
    justify-content: space-between;
    column-gap: clamp(56px, 8vw, 112px);
    align-items: start;
  }
  .ueber-mich-lebensweg .ueber-mich-kopfbereich { grid-column: 1; grid-row: 1; margin-bottom: 48px; }
  .ueber-mich-lebensweg .ueber-mich-langtext-grid { display: contents; }
  .ueber-mich-lebensweg .ueber-mich-langtext-grid > article { grid-column: 1; grid-row: 2; }
  .ueber-mich-lebensweg .ueber-mich-leitgedanke { grid-column: 2; grid-row: 1 / span 2; margin-top: 8px; }
  .ueber-mich-lebensweg .inhaltsabschnitt:first-child h3 { margin-top: 0; }
}
@media (max-width: 900px) {
  .ueber-mich-lebensweg .ueber-mich-kopfbereich { margin-bottom: 40px; }
}

/* ============================================================
   WARUM NUR MÄNNER – Intro in den gemeinsamen Regeln; bis 500px
   Motiv so gesetzt, dass der Mann rechts neben dem Text steht.
   Kontakt als Standard-Formular (Salbei).
   ============================================================ */
@media (max-width: 500px) {
  :is(.warum-seite, .maenner-seite) .seiten-intro:not(#_) .intro-bild img { object-position: 58% 20%; }
  :is(.warum-seite, .maenner-seite) .seiten-intro:not(#_) .intro-bild::before {
    background: linear-gradient(90deg,
      rgba(var(--intro-weichzeichner, 255,250,240), .95) 0%, rgba(var(--intro-weichzeichner, 255,250,240), .85) 38%,
      rgba(var(--intro-weichzeichner, 255,250,240), .45) 55%, rgba(var(--intro-weichzeichner, 255,250,240), .1) 70%, rgba(var(--intro-weichzeichner, 255,250,240), 0) 82%);
  }
}

/* ============================================================
   WARUM NUR MÄNNER (neu, Body-Klasse .maenner-seite)
   Aufbau mit den Artikel-Bausteinen (.chakra-…). Die alten
   .warum-…-Regeln weiter oben werden nicht mehr genutzt.
   ============================================================ */
.maenner-seite .seiten-intro .intro-bild img { object-position: center center; }
.maenner-zitat .chakra-zitatband { margin: 0 auto; text-align: center; }
.maenner-zitat .chakra-zitatband::before { margin: 0 auto; }
.maenner-seite .chakra-zitatband p em { color: var(--cognac-deep); }
.maenner-themen { max-width: 900px; margin: 0; padding: 0; list-style: none; }
.maenner-thema { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 32px; padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.maenner-thema:first-child { padding-top: 0; border-top: 0; }
.maenner-thema:last-child { padding-bottom: 0; }
.maenner-thema-nr { color: var(--cognac); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(38px, 3.4vw, 52px); line-height: 1; }
.maenner-thema-text h3 { margin: 4px 0 16px; }
.maenner-thema-text > p:last-child { margin-bottom: 0; }
.maenner-thema-text .chakra-randnotiz { margin-top: 24px; }
@media (max-width: 760px) {
  .maenner-thema { grid-template-columns: 1fr; }
  .maenner-thema-nr { margin-bottom: 10px; font-size: 34px; }
}

/* ============================================================
   FARBWELTEN (Entwurf B, 29.09.) – eine Grundfarbe je Seite
   Klasse .farbwelt-NAME auf der Section = Stufe „satt“,
   zusätzlich .stufe-hell oder .stufe-heller für die Abstufungen.
   Kontakt bleibt immer .farbschema-salbei, Footer unverändert.
   Test zuerst auf Startseite und Ausbildung.
   ============================================================ */
.farbwelt-gold {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #f6e5c6;
  --kachel-hintergrund: #fef9f1;
  --kachel-hervorgehoben: #f2dcb0;
  --element-farbe: #d9a526;
  --element-hover: #6f4e3b;
  --element-text: #241f1a;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(217, 165, 38, 0.20);
  --element-fokus: rgba(217, 165, 38, 0.40);
  --deko-farbe: rgba(217, 165, 38, 0.84);
  --secondary-text: #46382e;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(70, 56, 46, 0.55);
  --textlink-farbe: #74530d;
  --textlink-hover: #bd8b18;
  --textlink-fokus: rgba(116, 83, 13, 0.32);
}
.farbwelt-gold.stufe-hell { --section-hintergrund: #f9edd7; --kachel-hintergrund: #fefaf3; }
.farbwelt-gold.stufe-heller { --section-hintergrund: #fcf5e8; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.farbwelt-kupfer {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #f1d6c8;
  --kachel-hintergrund: #fdf7f1;
  --kachel-hervorgehoben: #e3c2b4;
  --element-farbe: #8a4a36;
  --element-hover: #302a23;
  --element-text: #fffaf0;
  --element-hover-text: #fffaf0;
  --element-schatten: rgba(138, 74, 54, 0.20);
  --element-fokus: rgba(138, 74, 54, 0.40);
  --deko-farbe: rgba(138, 74, 54, 0.84);
  --secondary-text: #7a4130;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(122, 65, 48, 0.55);
  --textlink-farbe: #7a4130;
  --textlink-hover: #302a23;
  --textlink-fokus: rgba(122, 65, 48, 0.32);
}
.farbwelt-kupfer.stufe-hell { --section-hintergrund: #f6e3d8; --kachel-hintergrund: #fef9f3; }
.farbwelt-kupfer.stufe-heller { --section-hintergrund: #fbf1e9; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.farbwelt-cognac {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #e9d5bb;
  --kachel-hintergrund: #fcf7f0;
  --kachel-hervorgehoben: #d5bfa6;
  --element-farbe: #5c3a24;
  --element-hover: #302a23;
  --element-text: #fffaf2;
  --element-hover-text: #fffaf2;
  --element-schatten: rgba(92, 58, 36, 0.20);
  --element-fokus: rgba(92, 58, 36, 0.40);
  --deko-farbe: rgba(92, 58, 36, 0.84);
  --secondary-text: #5c3a24;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(92, 58, 36, 0.55);
  --textlink-farbe: #5c3a24;
  --textlink-hover: #80543c;
  --textlink-fokus: rgba(92, 58, 36, 0.32);
}
.farbwelt-cognac.stufe-hell { --section-hintergrund: #f1e3d0; --kachel-hintergrund: #fdf9f2; }
.farbwelt-cognac.stufe-heller { --section-hintergrund: #f8f0e5; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.farbwelt-salbei {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #e2e9e1;
  --kachel-hintergrund: #fcfaf4;
  --kachel-hervorgehoben: #ced9d0;
  --element-farbe: #567568;
  --element-hover: #486358;
  --element-text: #fffdf7;
  --element-hover-text: #fffdf7;
  --element-schatten: rgba(86, 117, 104, 0.20);
  --element-fokus: rgba(86, 117, 104, 0.40);
  --deko-farbe: rgba(86, 117, 104, 0.84);
  --secondary-text: #486358;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(72, 99, 88, 0.55);
  --textlink-farbe: #486358;
  --textlink-hover: #324a40;
  --textlink-fokus: rgba(72, 99, 88, 0.32);
}
.farbwelt-salbei.stufe-hell { --section-hintergrund: #ecf0e9; --kachel-hintergrund: #fdfaf5; }
.farbwelt-salbei.stufe-heller { --section-hintergrund: #f6f6f0; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.farbwelt-aubergine {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #ecdfe5;
  --kachel-hintergrund: #fdf9f5;
  --kachel-hervorgehoben: #dcccd4;
  --element-farbe: #795568;
  --element-hover: #513a46;
  --element-text: #fffaf7;
  --element-hover-text: #fffaf7;
  --element-schatten: rgba(121, 85, 104, 0.20);
  --element-fokus: rgba(121, 85, 104, 0.40);
  --deko-farbe: rgba(121, 85, 104, 0.84);
  --secondary-text: #674858;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(103, 72, 88, 0.55);
  --textlink-farbe: #704d5e;
  --textlink-hover: #4c3440;
  --textlink-fokus: rgba(112, 77, 94, 0.32);
}
.farbwelt-aubergine.stufe-hell { --section-hintergrund: #f3e9eb; --kachel-hintergrund: #fdfaf6; }
.farbwelt-aubergine.stufe-heller { --section-hintergrund: #f9f3f2; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.farbwelt-sand {
  --section-aufhellung: rgba(255, 253, 247, 0.72);
  --section-hintergrund: #e5e0d7;
  --kachel-hintergrund: #fcf9f3;
  --kachel-hervorgehoben: #d4cfc6;
  --element-farbe: #6e645a;
  --element-hover: #4a423a;
  --element-text: #fffaf3;
  --element-hover-text: #fffaf3;
  --element-schatten: rgba(110, 100, 90, 0.20);
  --element-fokus: rgba(110, 100, 90, 0.40);
  --deko-farbe: rgba(110, 100, 90, 0.84);
  --secondary-text: #5f564d;
  --secondary-hintergrund: rgba(255, 252, 247, 0.5);
  --secondary-border: rgba(95, 86, 77, 0.55);
  --textlink-farbe: #5f564d;
  --textlink-hover: #3e3730;
  --textlink-fokus: rgba(95, 86, 77, 0.32);
}
.farbwelt-sand.stufe-hell { --section-hintergrund: #eeeae2; --kachel-hintergrund: #fdfaf4; }
.farbwelt-sand.stufe-heller { --section-hintergrund: #f7f4ed; --section-aufhellung: rgba(255, 253, 247, 0.5); --kachel-hintergrund: #fffdf9; }
.section-grundaufbau:is(.farbwelt-gold, .farbwelt-kupfer, .farbwelt-cognac, .farbwelt-salbei, .farbwelt-aubergine, .farbwelt-sand) {
  background: radial-gradient(circle at 12% 9%, var(--section-aufhellung), transparent 32%), var(--section-hintergrund);
}

/* ------------------------------------------------------------
   FARBWELTEN IM INTRO – Stufe „satt“
   Die Weichzeichner aller Intro-Regeln nutzen
   rgba(var(--intro-weichzeichner, 255, 250, 240), …).
   Ohne Farbwelt bleibt es beim bisherigen Creme.
   ------------------------------------------------------------ */
.farbwelt-gold { --intro-weichzeichner: 246, 229, 198; }
.farbwelt-kupfer { --intro-weichzeichner: 241, 214, 200; }
.farbwelt-cognac { --intro-weichzeichner: 233, 213, 187; }
.farbwelt-salbei { --intro-weichzeichner: 226, 233, 225; }
.farbwelt-aubergine { --intro-weichzeichner: 236, 223, 229; }
.farbwelt-sand { --intro-weichzeichner: 229, 224, 215; }
.seiten-intro:is(.farbwelt-gold, .farbwelt-kupfer, .farbwelt-cognac, .farbwelt-salbei, .farbwelt-aubergine, .farbwelt-sand):not(#_) { background: rgb(var(--intro-weichzeichner)); }
.seiten-intro:is(.farbwelt-gold, .farbwelt-kupfer, .farbwelt-cognac, .farbwelt-salbei, .farbwelt-aubergine, .farbwelt-sand):not(#_)::before { background: var(--deko-farbe); mix-blend-mode: multiply; }
.seiten-intro:is(.farbwelt-gold, .farbwelt-kupfer, .farbwelt-cognac, .farbwelt-salbei, .farbwelt-aubergine, .farbwelt-sand):not(#_) .intro-einleitung { color: var(--textlink-farbe); }

/* ------------------------------------------------------------
   FARBWELTEN – Überzeilen in der Farbe der Farbwelt
   Stufen: hell = 35 % Richtung #fffcf7, heller = 70 %
   ------------------------------------------------------------ */
.farbwelt-gold { --ueberzeile-farbe: var(--cognac); }
.farbwelt-kupfer { --ueberzeile-farbe: #a4583f; }
.farbwelt-cognac { --ueberzeile-farbe: #80543c; }
.farbwelt-salbei { --ueberzeile-farbe: #5b7a6d; }
.farbwelt-aubergine { --ueberzeile-farbe: #8a6278; }
.farbwelt-sand { --ueberzeile-farbe: #857868; }
:is(.farbwelt-gold, .farbwelt-kupfer, .farbwelt-cognac, .farbwelt-salbei, .farbwelt-aubergine, .farbwelt-sand) :is(.ueberzeile, .page-ueberzeile) { color: var(--ueberzeile-farbe); }
.seiten-intro.farbschema-salbei .ueberzeile { color: #5b7a6d; }

/* ============================================================
   CHAKREN-SERIE (29.09.) – fünf Teile + Übersicht (chakren.php)
   Navigation .chakra-serie baut auf .chakra-leseweg auf.
   ============================================================ */
.chakra-serie { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.chakra-serie .chakra-leseweg-teil { padding: 24px 22px 22px; }
.chakra-serie .chakra-leseweg-nummer { font-size: 44px; color: var(--ueberzeile-farbe, var(--cognac)); }
.chakra-serie .chakra-leseweg-teil strong { font-size: clamp(21px, 1.7vw, 25px); }
.chakra-serie .chakra-leseweg-teil[aria-current="page"] { background: var(--kachel-hervorgehoben); box-shadow: none; transform: none; cursor: default; }
.chakra-serie-weiter { margin-top: clamp(36px, 4vw, 52px); }
@media (max-width: 1279px) {
  .chakra-serie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .chakra-serie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chakra-serie .chakra-leseweg-teil:last-child { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .chakra-serie { grid-template-columns: 1fr; }
}

/* ============================================================
   E-BOOK-SEITE (/e-book/)
   ============================================================ */
.ebookseite .ebook-punkte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,48px);align-items:stretch}
.ebookseite .ebook-punkt{background:var(--kachel-hintergrund);border-radius:0 var(--radius-medium) 0 var(--radius-medium);padding:clamp(28px,3.5vw,42px);box-shadow:0 18px 42px rgba(111,68,45,.08)}
.ebookseite .ebook-punkt:nth-child(2){border-radius:var(--radius-medium) 0 var(--radius-medium) 0}
.ebookseite .ebook-punkt h3{margin:0 0 14px}
.ebookseite .ebook-punkt>:last-child{margin-bottom:0}
.ebookseite .ebook-nummer{margin:0 0 16px;color:var(--textlink-farbe);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ebookseite .ebook-details{margin:18px 0 0;font-size:14px;opacity:.75}
.ebookseite .ebook-ohne-haken{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);gap:clamp(48px,7vw,100px);align-items:center}
.ebookseite .ebook-ohne-haken-text .section-einleitung{max-width:620px;margin-bottom:22px}
.ebookseite .ebook-haltung{max-width:620px;margin:0 0 36px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(21px,1.8vw,25px);line-height:1.45;color:var(--ink);padding-left:22px;border-left:2px solid var(--textlink-farbe)}
.ebookseite .ebook-ohne-haken-text .ebook-details{max-width:560px}
.ebookseite .hinweis-kachel{margin:0}
@media(max-width:900px){.ebookseite .ebook-punkte{grid-template-columns:1fr}}
@media(max-width:760px){.ebookseite .ebook-ohne-haken{grid-template-columns:1fr;gap:40px}}
@media(max-width:560px){.ebookseite .ebook-punkt{padding:28px 24px}.ebookseite .intro-buttons .button{width:100%}}