.elementor-kit-4{--e-global-color-primary:#C6A25A;--e-global-color-secondary:#CBBBA6;--e-global-color-text:#2A2521;--e-global-color-accent:#E7D8B4;--e-global-color-8adaab8:#F6F1E9;--e-global-color-771ca1b:#E2D9CD;--e-global-color-507bdca:#867B6E;--e-global-color-fdwbg:#F6F1E9;--e-global-color-fdwink:#2A2521;--e-global-color-fdwmut:#E7D8B4;--e-global-color-fdwline:#C6A25A;--e-global-color-fdwaccent:#C6A25A;--e-global-color-fdwaccent2:#CBBBA6;--e-global-color-fdwonaccent:#F6F1E9;--e-global-color-fdwonaccent2:#2A2521;--e-global-typography-primary-font-family:"Raleway";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Raleway";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Comfortaa";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-540bae0-font-family:"Comfortaa";--e-global-typography-540bae0-font-size:18px;--e-global-typography-540bae0-font-weight:300;--e-global-typography-540bae0-line-height:1.6em;background-color:var( --e-global-color-8adaab8 );color:var( --e-global-color-text );font-family:"Comfortaa", Sans-serif;font-size:17px;font-weight:400;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-primary );}.elementor-kit-4 h1{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:96px;font-weight:300;line-height:1em;letter-spacing:-0.03em;}.elementor-kit-4 h2{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:64px;font-weight:300;line-height:1.05em;letter-spacing:-0.025em;}.elementor-kit-4 h3{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:24px;font-weight:600;line-height:1.2em;letter-spacing:-0.01em;}.elementor-kit-4 h4{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:20px;font-weight:600;line-height:1.25em;letter-spacing:-0.01em;}.elementor-kit-4 h5{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:17px;font-weight:600;line-height:1.3em;letter-spacing:0em;}.elementor-kit-4 h6{color:var( --e-global-color-text );font-family:"Raleway", Sans-serif;font-size:15px;font-weight:600;line-height:1.3em;letter-spacing:0em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4 h1{font-size:64px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4 h1{font-size:42px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Highlight-Marker (Design-Kit "Antikgold x Sandstein")
   Technik wie final.html: Gradient-Band, 0.36em hoch, sitzt bei 82% der Zeilenhöhe */
.highlight {
  --hlc: rgba(198, 162, 90, .46);              /* Antikgold #C6A25A mit 46% Deckung */
  background-image: linear-gradient(var(--hlc), var(--hlc));
  background-repeat: no-repeat;
  background-position: 0 82%;
  background-size: 100% .36em;
  padding: 0 .05em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;                  /* Band läuft bei Zeilenumbruch sauber weiter */
}

/* Kicker/Eyebrow mit Goldstrich davor (Werte aus final.html) */
/* .kicker traegt nur Strich+Layout. Die Kanon-Typo kommt aus dem Eyebrow-Block weiter unten,
   der .kicker seit 07/2026 mitfaengt (in .kwm-sec-Sektionen). Frueher brauchte man
   "kicker kick" zusammen, sonst gab es den Strich ohne Typo — still und unauffaellig. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker:before {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: #C6A25A;
}

/* Highlight-Aufzieh-Animation (Script: Elementor > Benutzerdefinierter Code) */
.highlight.kwm-mk { background-size: 0 .36em; }
.highlight.kwm-mk.kwm-drawn {
  background-size: 100% .36em;
  transition: background-size .66s cubic-bezier(.32, .7, .26, 1);
}

/* Icon-Widgets: SVG ohne Baseline-Luecke -> echte vertikale Mitte */
.elementor-icon svg { display: block; margin: 0 auto; }
.elementor-icon-wrapper { line-height: 0; }

/* Button-Pfeile: gleiten beim Hover 4px nach rechts (Original-Animation) */
.elementor-button .elementor-button-icon { transition: transform .3s; }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* Buttons: schweben beim Hover 2px nach oben (Original .btn:hover) */
.elementor-button { transition: transform .3s ease, opacity .3s ease; }
.elementor-button:hover { transform: translateY(-2px); }

/* Kicker: Goldstrich mittig zur Textzeile (p-Margin raus) */
.kicker p { margin: 0; }

/* KATAI Timeline: Punkte immer voll deckend, Linie haarscharf 1px */
.kt-tl[data-kt-fill] .kt-item .kt-dot, .kt-tl .kt-item .kt-dot { opacity: 1; box-shadow: 0 0 0 4px #F6F1E9; background: #E3D2AB; transition: background .3s; }
.kt-tl .kt-item.is-active .kt-dot { background: #C6A25A; }
.kt-lay-right .kt-line { left: 5px; transform: none; border-radius: 0; }

/* Markierte Etappe (Der Abschied): dunkler Punkt mit Gold-Kontur */
#kt-tl-1 .kt-item:last-of-type .kt-dot { background: #2A2521; border: 2px solid #C6A25A; }

/* Buttons: rechteckig, Outline hinter der Flaeche, Raleway 700, Hover C: Farbe umkehren + Outline legt sich an (13.07.2026) */
.elementor-button,
.elementor-element-gs00007 .e-n-accordion-item-title {
  position: relative; z-index: 0; isolation: isolate; border-radius: 0 !important;
}
.elementor-button,
.elementor-button .elementor-button-text,
.elementor-element-gs00007 .e-n-accordion-item-title,
.elementor-element-gs00007 .e-n-accordion-item-title-text {
  font-family: "Raleway", sans-serif !important; font-weight: 700 !important;
}
.elementor-element-gs00007 .e-n-accordion-item-title,
.elementor-element-gs00007 .e-n-accordion-item-title-text {
  text-transform: uppercase !important;
}
.elementor-button::before,
.elementor-element-gs00007 .e-n-accordion-item-title::before {
  content: ""; position: absolute; inset: 0; background: inherit; z-index: -1; pointer-events: none;
  transition: background .35s ease;
}
.elementor-button::after,
.elementor-element-gs00007 .e-n-accordion-item-title::after {
  content: ""; position: absolute; top: 6px; left: 6px; right: -6px; bottom: -6px;
  border: 1px solid #C6A25A; z-index: -2; pointer-events: none;
  transition: top .35s cubic-bezier(.2,.7,.2,1), left .35s cubic-bezier(.2,.7,.2,1), right .35s cubic-bezier(.2,.7,.2,1), bottom .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
}
/* Hover C: Outline legt sich sauber aussen an die Flaeche */
.elementor-button:hover::after,
.elementor-element-gs00007 .e-n-accordion-item-title:hover::after {
  top: -2px; left: -2px; right: -2px; bottom: -2px; border-color: #C6A25A;
}
/* Hover C: Farbe umkehren — Gold-Button wird dunkel */
.elementor-button:hover { color: #F6F1E9 !important; }
.elementor-button:hover::before { background: #2A2521; }
/* Hover C: dunkler Button wird gold (Klasse kwm-btn-dark kommt aus dem Snippet) */
.elementor-button.kwm-btn-dark:hover { color: #2A2521 !important; }
.elementor-button.kwm-btn-dark:hover::before { background: #C6A25A; }

/* Akkordeon-Button (gs00007) wie Buttons: Antikgold + Hover-Umkehr */
.elementor-element-gs00007 .e-n-accordion-item-title{background:#C6A25A !important;color:#2A2521 !important}
.elementor-element-gs00007 .e-n-accordion-item-title .e-n-accordion-item-title-text{color:#2A2521 !important}
.elementor-element-gs00007 .e-n-accordion-item-title-icon svg,.elementor-element-gs00007 .e-n-accordion-item-title-icon i{color:#2A2521 !important;fill:#2A2521 !important}
.elementor-element-gs00007 .e-n-accordion-item-title:hover,.elementor-element-gs00007 .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{color:#F6F1E9 !important}
.elementor-element-gs00007 .e-n-accordion-item-title:hover::before{background:#2A2521}
.elementor-element-gs00007 .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg,.elementor-element-gs00007 .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon i{color:#F6F1E9 !important;fill:#F6F1E9 !important}

/* Stimmen-Bubbles (nativ, erweiterbar) */
.kwm-h .elementor-heading-title{font-family:'Raleway',sans-serif;font-weight:300;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.025em;line-height:1.08;color:#F6F1E9}
.kwm-bubbles{gap:14px}
.kwm-bub{border-radius:50%;overflow:hidden;aspect-ratio:1;flex:0 0 auto;align-items:center;justify-content:center;text-align:center;padding:16px!important;animation:kwmbob 6.6s ease-in-out infinite;transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s,border-color .38s}
@keyframes kwmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.kwm-bub:hover{transform:scale(1.13);z-index:6;box-shadow:0 30px 62px -22px rgba(0,0,0,.75);animation-play-state:paused}
.kwm-bub:nth-child(2n){animation-duration:7.4s;animation-delay:-1.6s}
.kwm-bub:nth-child(3n){animation-duration:6.8s;animation-delay:-3.1s}
.kwm-bub:nth-child(4n){animation-duration:8s;animation-delay:-2.3s}
.kwm-quote{width:88%!important}
.kwm-src{width:94%!important}
.kwm-name{width:90%!important}
.kwm-text{border:1.5px solid rgba(198,162,90,.6);background:radial-gradient(circle at 50% 26%,#3f3327,#2a231b)}
.kwm-text:hover{border-color:#C6A25A}
.kwm-q{margin-bottom:6px}
.kwm-q img{width:34px;height:auto;display:block;margin:0 auto}
.kwm-quote p{font-family:'Comfortaa',sans-serif;font-size:12px;line-height:1.45;color:#F6F1E9;margin:0}
.kwm-src p{font-family:'Raleway',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:9px;color:#C6A25A;margin:8px 0 0}
.kwm-photo{border:2px solid rgba(198,162,90,.55);justify-content:flex-end;background-size:cover;background-position:center}
.kwm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,37,33,0) 30%,rgba(42,37,33,.92) 100%);z-index:0;pointer-events:none}
.kwm-photo>.elementor-element{position:relative;z-index:1}
.kwm-pquote p{font-family:'Comfortaa',sans-serif;font-size:11px;line-height:1.42;color:rgba(246,241,233,.9);margin:0}
.kwm-name p{font-family:'Raleway',sans-serif;font-weight:700;font-size:14px;color:#fff;margin:7px 0 0;line-height:1.2}
.kwm-name span{display:block;font-weight:400;font-size:.72em;color:rgba(246,241,233,.75);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.kwm-acc{border:1.5px solid rgba(198,162,90,.55);background:#332a20}
.kwm-big .elementor-heading-title{font-family:'Raleway',sans-serif;font-weight:300;font-size:30px;color:#F6F1E9;letter-spacing:2px;line-height:1}
.kwm-lb p{font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,241,233,.62);margin:4px 0 0}
@media(max-width:600px){.kwm-bub{transform:scale(.82)}}

/* == KWM Typo-System (einheitlich, Steph) == */
/* ACHTUNG: greift NICHT von allein fuer jede neue Sektion.
   NEUE HTML-Sektion? -> dem Wrapper zusaetzlich class="kwm-sec" geben
   (bei dunklem Grund zusaetzlich "kwm-sec--dark"). Dann sitzen Eyebrow/Headline/Lead
   automatisch richtig, OHNE dass das Kit angefasst werden muss.
   Die namentlichen Wrapper unten sind Altbestand und bleiben aus Kompatibilitaet stehen. */

/* Eyebrow: Raleway 12px / 600 / Gold / .16em / uppercase */
.elementor-element-892f2096, .elementor-element-892f2096 *,
.elementor-element-5673305, .elementor-element-5673305 *,
.elementor-element-d5e7cf9, .elementor-element-d5e7cf9 *,
.elementor-element-f79ef31, .elementor-element-f79ef31 *,
.kwm-sec .kick, .kwm-sec .kick *,
.kwm-sec .kicker, .kwm-sec .kicker *,
.kwmcl .kick, .kwmcta .kick, .kwmuni .kick, .kwmkae .kick{
  font-family:'Raleway',sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  color:var(--kwm-gold-ctx,#C6A25A)!important;
}
/* Section-Headline: Raleway clamp(34-64) / 300 / -.025em */
.elementor-element-f8fbcb2 .elementor-heading-title,
.elementor-element-7a5bbc7 .elementor-heading-title,
.elementor-element-c6d0029 .elementor-heading-title,
.kwm-sec h1, .kwm-sec .kwm-h1, .kwm-sec .kwm-h1 .elementor-heading-title,
.kwm-sec h2, .kwm-sec .kwm-h2, .kwm-sec .kwm-h2 .elementor-heading-title,
.kwmcl h2, .kwmcta h2, .kwmuni h2, .kwmkae h2{
  font-family:'Raleway',sans-serif!important;
  font-size:clamp(34px,5vw,64px)!important;
  font-weight:300!important;
  letter-spacing:-.025em!important;
  line-height:1.08!important;
}
/* Ueberschriften-FARBE folgt dem Kontext (--kwm-ink). Luecke von Fork 4 gefunden, 07/2026:
   Die Headline-Regel oben setzt Schrift/Groesse/Gewicht, aber KEINE Farbe -> die kam von Elementor
   und war Onyx. Auf einer dunklen Sektion stand die H2 damit auf Kontrast 1,00, also unsichtbar.
   Nicht aufgefallen, weil dunkle Sektionen bisher nur Goldkarten/Goldgitter enthielten — die bringen
   ihre Farben selbst mit. Eine nackte Ueberschrift auf dunklem Grund gab es noch nie.
   Gemessen war auch .kwm-sec--mid-dark betroffen (2,23) — Fork 4s Verdacht stimmte.
   BEWUSST OHNE !important: so gewinnt eine in Elementor bewusst gesetzte Ueberschriften-Farbe
   (0,3,0) weiterhin. Die Regel faengt nur die Ueberschriften ab, die gar keine Farbe haben. */
.kwm-sec h1,.kwm-sec h2,.kwm-sec h3,.kwm-sec h4,.kwm-sec h5,.kwm-sec h6,
.kwm-sec .kwm-h1 .elementor-heading-title,.kwm-sec .kwm-h2 .elementor-heading-title,
.kwmcl h2,.kwmcta h2,.kwmuni h2,.kwmkae h2{color:var(--kwm-ink,#2A2521)}
/* Fliesstext / Lead: Comfortaa 18px / 300. Farbe kommt aus dem Kontext (--kwm-fg). */
/* :not(.kwm-kl) — sonst faerbt das * der Lead-Regel [0,2,0] die Klammern mit und schlaegt
   .kwm-kl [0,1,0]; beide haben !important, also entscheidet die Spezifitaet. Die Klammer sah
   dann LAUTLOS wie normaler Text aus. Gefunden von Fork 4 07/2026 auf Ratgeber 515.
   LEHRE: eine Farbregel gegen fuenf UNTERGRUENDE zu testen reicht nicht — sie muss auch gegen
   die BAUSTEINE getestet werden, in denen sie vorkommt [.lead, .kick, Karten-Typo, Listen]. */
.kwm-sec .lead, .kwm-sec .lead *:not(.kwm-kl),
.kwmcl .lead, .kwmcta .lead, .kwmuni .lead, .kwmkae .lead{
  font-family:'Comfortaa',sans-serif!important;
  font-size:18px!important;
  font-weight:300!important;
  line-height:1.7!important;
  color:var(--kwm-fg,#2A2A28)!important;
}
/* Kontext-Farbe: hell = dunkler Text, dunkel = heller Text.
   Die Werte stehen NICHT hier, sondern zusammen mit --kwm-gold-ctx in der EINEN Kontext-Leiter
   weiter unten [Marker: KONTEXT-LEITER]. Warum zusammengelegt: 07/2026 waren es zwei getrennte
   Leitern und sie sind auseinandergelaufen — --kwm-gold-ctx stand auf 7 Selektoren, --kwm-fg nur
   auf 2. Ergebnis waren drei Durchfaller [Lead in dunkler Karte 1,05 · Lead in heller Karte auf
   dunkler Sektion 1,07 · Lead auf Sandstein-800 2,11]. NIE WIEDER TRENNEN: wer eine neue
   Kontextstufe oder eine neue Insel baut, setzt BEIDE Variablen in derselben Zeile. */

/* Content-Box: gleiche Rand-Abstaende wie native Sektionen (Text bei ~120px @1440) */
.kwm-sec .wrap,.kwmuni .wrap,.kwmcta .inner,.kwmkae .wrap{max-width:1240px!important;padding-left:20px!important;padding-right:20px!important}

/* == KWM Button-Muster "GOLDBUTTON" (verbindlich, Steph) == */
/* Sagt Stephi "als Goldbutton" -> genau dieses Muster. Kanonisch fuer ALLE Seiten/Forks.
   FEST: Form (kantig), Typo, der versetzte Gold-Rahmen und das Hover-Verhalten.
   Ruhe : Gold-Flaeche, Onyx-Text, Rahmen 6px nach unten rechts versetzt.
   Hover: Karte hebt 3px, Flaeche wird Onyx, Text Porzellan, Rahmen schnappt buendig um den Button.
   Pfeil optional: <svg class="ar" viewBox="0 0 24 12"><path d="M2 6h18M15 1.5 20.5 6 15 10.5"/></svg>
   Der Pfeil folgt per currentColor immer der Textfarbe -> bleibt auf jedem Grund sichtbar. */
.kwm-btn{position:relative;z-index:0;isolation:isolate;display:inline-flex;align-items:center;gap:11px;
  padding:15px 26px;border-radius:0;text-decoration:none;border:none;cursor:pointer;
  font-family:'Raleway',sans-serif;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:#2A2521!important;background:transparent;   /* !important: schlaegt .elementor-kit-4 a */
  transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s}
.kwm-btn::before{content:"";position:absolute;inset:0;background:#C6A25A;z-index:-1;transition:background .35s}
.kwm-btn::after{content:"";position:absolute;inset:6px -6px -6px 6px;border:1px solid #C6A25A;z-index:-2;
  transition:inset .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.kwm-btn:hover{transform:translateY(-3px);color:#F6F1E9!important}
.kwm-btn:hover::before{background:#2A2521}
.kwm-btn:hover::after{inset:-2px;border-color:#C6A25A}
/* Variante fuer helle/champagne Flaechen: Onyx-Button, Gold-Rahmen schnappt beim Hover um */
.kwm-btn--dark::before{background:#2A2521}
.kwm-btn--dark::after{border-color:#2A2521}
.kwm-btn--dark,.kwm-btn--dark:hover{color:#F6F1E9!important}
.kwm-btn--dark:hover::before{background:#2A2521}
.kwm-btn--dark:hover::after{inset:-2px;border-color:#C6A25A}
/* Pfeil */
.kwm-btn .ar{width:19px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;flex:none}
.kwm-btn:hover .ar{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.kwm-btn,.kwm-btn::after{transition:none}.kwm-btn:hover{transform:none}}

/* Altbestand: CTA-Button im kwmcta-Widget (bis auf .kwm-btn migriert) */
.kwmcta .btn{background:#C6A25A!important;color:#2A2521!important}
.kwmcta .btn::before{background:#C6A25A!important}
.kwmcta .btn::after{border-color:#C6A25A!important}
.kwmcta .btn:hover{color:#F6F1E9!important}
.kwmcta .btn:hover::before{background:#2A2521!important}
.kwmcta .btn:hover::after{border-color:#C6A25A!important}

/* === KATAI Wissen Content-Bausteine === */
/* FAQ-Akkordeon: Details-Block, eckig, Titel vertikal zentriert */
.elementor-widget-theme-post-content{counter-reset:kwm-schritt}
.elementor-widget-theme-post-content details{border:1px solid #E2D9CD;background:#FCFAF6;margin:0 0 12px;overflow:hidden}
.elementor-widget-theme-post-content summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:58px;font-family:Raleway,sans-serif;font-weight:600;font-size:15px;line-height:1.35;color:#2A2521;padding:8px 52px 8px 20px;position:relative;transition:background .3s}
.elementor-widget-theme-post-content summary::-webkit-details-marker{display:none}
.elementor-widget-theme-post-content summary:hover{background:#F5EEE1}
.elementor-widget-theme-post-content details[open]>summary{background:#F5EEE1;border-bottom:1px solid #E2D9CD}
.elementor-widget-theme-post-content summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid #C6A25A;border-bottom:2px solid #C6A25A;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.elementor-widget-theme-post-content details[open]>summary::after{transform:translateY(-30%) rotate(225deg)}
.elementor-widget-theme-post-content details>*:not(summary){padding-left:20px;padding-right:20px;margin:0 0 12px!important}
.elementor-widget-theme-post-content details>summary+*{margin-top:18px!important}
.elementor-widget-theme-post-content details>*:not(summary):last-child{margin-bottom:18px!important}
.elementor-widget-theme-post-content details :is(p,div):empty{display:none}
/* Ablauf-Variante: Details mit Klasse "ablauf" -> nummerierte Schritte */
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf{counter-increment:kwm-schritt}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf>summary{padding-left:68px}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf>summary::before{content:counter(kwm-schritt);position:absolute;left:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#C6A25A;color:#fff;font-family:Raleway,sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf>*:not(summary){padding-left:68px}
/* Hinweisbox: Zitat-Block */
.elementor-widget-theme-post-content blockquote{background:#F5EEE1;border-left:2px solid #C6A25A;margin:18px 0;padding:18px 22px;font-style:normal}
.elementor-widget-theme-post-content blockquote p{margin:0 0 8px}
.elementor-widget-theme-post-content blockquote p:last-child{margin:0}
.elementor-widget-theme-post-content blockquote cite{font-family:Raleway,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#836B3B;font-style:normal}
/* Sicherung: Inline-SVGs ohne Größenangabe bleiben Icon-groß statt Containerbreite */
.elementor-widget-theme-post-content svg:not([width]):not([height]){width:1.1em;height:1.1em;display:inline-block;vertical-align:-0.15em;fill:currentColor}
/* === /KATAI Wissen === */

/* === KATAI Forms Kiwu === */
/* Felder, Labels, Abstände */
.kf-form .kf-field{margin:0 0 26px}
.kf-form .kf-field>label{display:block;font-family:Raleway,sans-serif;font-weight:600;font-size:15px;line-height:1.55;color:#2A2521;margin:0 0 14px}
.kf-form .kf-desc{display:block;font-family:Comfortaa,sans-serif;font-size:12.5px;color:#867B6E;margin:-8px 0 12px}
.kf-form .kf-step-title{font-family:Raleway,sans-serif;font-weight:500;font-size:22px;color:#2A2521;margin:4px 0 20px}
.kf-form .kf-error{color:#A94438;font-family:Raleway,sans-serif;font-size:12px}
/* Einordnungs-Text als Hinweisbox */
.kf-form .kf-html{background:#F5EEE1;border-left:2px solid #C6A25A;padding:16px 20px;font-size:14px;line-height:1.7;color:#3F382F;margin:0 0 24px}
.kf-form .kf-html p{margin:0 0 10px}
.kf-form .kf-html p:last-child{margin:0}
/* Auswahl: gold statt Browser-Blau, luftige Listen */
.kf-form input[type=radio],.kf-form input[type=checkbox]{accent-color:#C6A25A}
.kf-form .kf-choices{display:flex;flex-direction:column;gap:10px}
.kf-form .kf-choice{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;cursor:pointer}
.kf-form .kf-choice input{margin-top:3px;flex:0 0 auto}
/* Karten-Auswahl: filigran, 1px, Auswahl per Fläche statt dickem Rahmen */
.kf-form .kf-choices-cards .kf-choice{border:1px solid #E2D9CD!important;background:#FCFAF6;padding:13px 18px;transition:border-color .25s,background .25s,transform .25s}
.kf-form .kf-choices-cards .kf-choice:hover{border-color:#C6A25A!important;transform:translateY(-1px)}
.kf-form .kf-choices-cards .kf-choice:has(input:checked){border-color:#C6A25A!important;background:#F5EEE1}
/* Buttons exakt wie Site-Buttons (Hover C, 13.07.): Gold, Outline 6px versetzt, Hover: Umkehr + Outline legt sich an */
.kf-form .kf-next,.kf-form .kf-submit{position:relative;z-index:0;isolation:isolate;background:#C6A25A;color:#2A2521!important;border:none;border-radius:0;font-family:Raleway,sans-serif!important;font-weight:700!important;font-size:13px!important;letter-spacing:.4px;text-transform:uppercase;padding:15px 26px!important;cursor:pointer;transition:transform .3s ease,color .35s ease}
.kf-form .kf-next::before,.kf-form .kf-submit::before{content:"";position:absolute;inset:0;background:inherit;z-index:-1;pointer-events:none;transition:background .35s ease}
.kf-form .kf-next::after,.kf-form .kf-submit::after{content:"";position:absolute;top:6px;left:6px;right:-6px;bottom:-6px;border:1px solid #C6A25A;z-index:-2;pointer-events:none;transition:top .35s cubic-bezier(.2,.7,.2,1),left .35s cubic-bezier(.2,.7,.2,1),right .35s cubic-bezier(.2,.7,.2,1),bottom .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease}
.kf-form .kf-next:hover,.kf-form .kf-submit:hover{transform:translateY(-2px);color:#F6F1E9!important}
.kf-form .kf-next:hover::before,.kf-form .kf-submit:hover::before{background:#2A2521}
.kf-form .kf-next:hover::after,.kf-form .kf-submit:hover::after{top:-2px;left:-2px;right:-2px;bottom:-2px;border-color:#C6A25A}
.kf-form .kf-prev{background:transparent!important;border:1px solid #E2D9CD;border-radius:0;color:#867B6E;font-family:Raleway,sans-serif;font-weight:600;font-size:12px!important;letter-spacing:1px;text-transform:uppercase;padding:14px 22px!important;cursor:pointer;transition:border-color .25s,color .25s,transform .3s ease}
.kf-form .kf-prev:hover{border-color:#2A2521;color:#2A2521;transform:translateY(-2px)}
/* Zurück + Absenden in einer Zeile (Absenden rechts) */
.kf-form .kf-step-nav{display:flex;gap:12px;margin-top:10px}
.kf-form .kf-actions{display:flex;justify-content:flex-end;margin-top:-49px;pointer-events:none}
.kf-form .kf-actions .kf-submit{pointer-events:auto}
/* Schritt-Punkte: etwas Luft nach unten */
.kf-form .kf-steps-nav{margin-bottom:24px}
/* Einwilligung dezent */
.kf-form .kf-consent .kf-consent-text{font-family:Comfortaa,sans-serif;font-size:12.5px;line-height:1.65;color:#867B6E}
.kf-form .kf-consent a{color:#836B3B}
.kf-form .kf-message{font-family:Raleway,sans-serif}
/* === /KATAI Forms Kiwu === */

/* == KWM Karten-Muster (verbindlich, Steph) == */
/* ============================================================================
   NAME: "GOLDKARTE".  Sagt Stephi "gestalte das als Goldkarte" -> genau dieses Muster.
   Kanonisch fuer ALLE Seiten/Templates/Forks. Nicht nachbauen, diese Klassen benutzen.

   FEST (Identitaet der Goldkarte, NICHT veraendern):
     Flaeche #FCFAF6 · Gold-Haarlinie 1px #E2D9CD · border-radius:0 (kantig!)
     Hover: Karte wandert -4px nach oben links, Gold-Rahmen #C6A25A blendet ein und
     wandert +11px nach unten rechts. Timing .35s cubic-bezier(.2,.7,.2,1).
     Technik: Karte deckend (::before, z-index:-1), Rahmen DAHINTER (::after, z-index:-2),
     darum sieht man nur die versetzte Kante. isolation:isolate ist Pflicht.

   FREI (Inhalt und Format, pro Einsatz anpassbar):
     Inhalt beliebig: Text, Bild, Icon, Buttons, Listen.
     Spaltenzahl : style="--kwm-cols:3"        an .kwm-cards
     Abstand     : style="--kwm-gap:24px"      an .kwm-cards
     Innenabstand: style="--kwm-px:32px"       an .kwm-card  (pt/px/pb)
     Icon-Groesse: style="--kwm-ic:56px"       an .kwm-card-ic
     Format      : .kwm-card--square (quadratisch) · .kwm-card--flush (ohne Innenabstand)
     Ausrichtung : .kwm-card--center
     Bild randlos: <div class="kwm-card-media"><img …></div>
   ============================================================================ */

/* --- Raster: Spaltenzahl frei, Umbruch fest --- */
.kwm-cards{--kwm-cols:4;--kwm-gap:16px;display:grid;grid-template-columns:repeat(var(--kwm-cols),1fr);gap:var(--kwm-gap)}
/* !important: schlaegt Inline-Spaltenzahl (style="--kwm-cols:5", z.B. Startseite kwmwas) */
@media(max-width:900px){.kwm-cards{--kwm-cols:2!important}}
@media(max-width:520px){.kwm-cards{--kwm-cols:1!important}}

/* --- Die Karte: Design FEST, Innenabstand frei --- */
.kwm-card,
.kwm-cards--posts .elementor-post{--kwm-card-bg:#FCFAF6;--kwm-card-line:#E2D9CD;--kwm-pt:30px;--kwm-px:24px;--kwm-pb:28px;
  position:relative;z-index:0;isolation:isolate;
  background:var(--kwm-card-bg);border:1px solid var(--kwm-card-line);border-radius:0;
  padding:var(--kwm-pt) var(--kwm-px) var(--kwm-pb);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)!important}
.kwm-card::before,
.kwm-cards--posts .elementor-post::before{content:"";position:absolute;inset:0;background:var(--kwm-card-bg);z-index:-1}
.kwm-card::after,
.kwm-cards--posts .elementor-post::after{content:"";position:absolute;inset:0;border:1px solid #C6A25A;opacity:0;z-index:-2;transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1)!important}
.kwm-card:hover,
.kwm-cards--posts .elementor-post:hover{transform:translate(-4px,-4px)!important}
.kwm-card:hover::after,
.kwm-cards--posts .elementor-post:hover::after{opacity:1!important;transform:translate(11px,11px)!important}
/* Karte als Link: kein Unterstrich, Farbe erben */
/* display:block gehoert an .kwm-card [0,1,0], NICHT an a.kwm-card [0,1,1]. Ein <a> ist von Haus aus
   inline und braucht es; die hoehere Spezifitaet von a.kwm-card schlug aber alles, was danach kommt:
   - .kwm-card--square{display:flex} [0,1,0] -> eine QUADRATISCHE KARTE ALS LINK verlor ihr Flex und
     damit die vertikale Zentrierung. Gemessen 07/2026, war live kaputt.
   - .e-con.e-flex{display:flex} [0,2,0] -> ein Elementor-Container als Link waere geplatzt [Fork 1].
   Auf .kwm-card [0,1,0] gestellt gewinnt jede zweiklassige Regel automatisch, und --square gewinnt,
   weil es spaeter steht. Kein :not()-Wettruesten noetig, das mit jeder neuen Ausnahme waechst.
   Ein <div class="kwm-card"> ist ohnehin block -> keine Wirkung, kein Risiko. */
.kwm-card{display:block}
a.kwm-card{text-decoration:none;color:inherit}

/* --- Format-Varianten --- */
.kwm-card--square{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center}
.kwm-card--center{text-align:center}
.kwm-card--flush{--kwm-pt:0;--kwm-px:0;--kwm-pb:0}

/* --- Bild: randlos bis an die Kante, zieht den Innenabstand zurueck --- */
.kwm-card-media{margin:calc(-1 * var(--kwm-pt)) calc(-1 * var(--kwm-px)) 20px;display:block;overflow:hidden}
.kwm-card-media img{display:block;width:100%;height:auto}
.kwm-card-media--4x3 img{aspect-ratio:4/3;object-fit:cover}
.kwm-card-media--1x1 img{aspect-ratio:1/1;object-fit:cover}
.kwm-card-media--16x9 img{aspect-ratio:16/9;object-fit:cover}

/* --- Icon: optional und austauschbar (jedes SVG), Groesse frei --- */
.kwm-card-ic{--kwm-ic:46px;width:var(--kwm-ic);height:var(--kwm-ic);margin:0 auto 20px;color:#C6A25A;display:block;overflow:visible}
.kwm-card-ic *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Nativer Fall: sitzt .kwm-card-ic am Elementor-Widget-Wrapper, liegt das SVG DARIN -> ausfuellen lassen. */
.kwm-card-ic svg{width:100%;height:100%;display:block}
/* gefuellte Icons: <svg class="kwm-card-ic kwm-card-ic--fill"> */
.kwm-card-ic--fill *{fill:currentColor;stroke:none}

/* --- Typo als Vorgabe (Inhalt bleibt frei) --- */
.kwm-card h3{font-family:'Raleway',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.25;margin:0 0 10px;color:#2A2521}
.kwm-card p{font-family:'Comfortaa',sans-serif;font-size:12.5px;color:#867B6E;line-height:1.62;margin:0}
/* Mobil (1-spaltig, volle Breite): 16/12.5px sind dort zu klein (Gabor 21.08.) */
@media(max-width:767px){.kwm-card h3{font-size:19px}.kwm-card p{font-size:14.5px}}

/* --- Variante: DUNKLE Goldkarte (Gegenstueck zu .kwm-btn--dark) ---
   <div class="kwm-card kwm-card--dark">   Anlass: CTA-Kachel auf Onyx-Grund (Fork 1, 07/2026).
   Warum eine Variante und kein Nachbau: die Karte malt ihre Flaeche im ::before UEBER den eigenen
   Hintergrund des Elements — ein background am Element hilft also nicht, die Karte uebermalt es.
   Flaeche und Haarlinie laufen darum ueber zwei Regler; Hover und Gold-Outline werden unveraendert
   geerbt, genau das ist der Sinn. --kwm-card-bg ist frei: style="--kwm-card-bg:linear-gradient(...)".
   Die Karte setzt ihren Eyebrow-Kontext selbst (dunkle Insel, siehe GOLD-REGEL). */
.kwm-card--dark{--kwm-card-bg:#2A2521;--kwm-card-line:rgba(246,241,233,.14);color:#F6F1E9}
.kwm-card--dark h1,.kwm-card--dark h2,.kwm-card--dark h3,
.kwm-card--dark h4,.kwm-card--dark h5,.kwm-card--dark h6{color:#F6F1E9}   /* 13,49 */
.kwm-card--dark p{color:rgba(246,241,233,.72)}

/* --- Variante: STATISCHE Goldkarte, Rahmen dauerhaft sichtbar, kein Hover ---
   <div class="kwm-card kwm-card--static">   Fuer Karten, die NICHT verlinken (Fork 4, 07/2026).
   Vorher bauten das zwei Vorlagen lokal mit fast identischem CSS nach (CTA-Karte Wissen 541,
   zwei Karten Ratgeber 530).
   MUSS NACH den Hover-Regeln stehen: .kwm-card--static:hover und .kwm-card:hover sind gleich
   spezifisch (0,2,0), da entscheidet allein die Reihenfolge.
   Der Hover-Zustand wird MIT aufgefuehrt, obwohl er dieselben Werte setzt: sonst gewinnt
   .kwm-card:hover::after (0,2,1) ueber .kwm-card--static::after (0,1,1) und es faellt nur deshalb
   nicht auf, weil beide zufaellig translate(11px,11px) sagen. Aendert jemand den Hover-Versatz,
   springt die statische Karte. Also nicht auf den Zufall verlassen. */
.kwm-card--static::after,
.kwm-card--static:hover::after{opacity:1!important;transform:translate(11px,11px)!important}
.kwm-card--static:hover{transform:none!important}                            /*  7,52 */

/* --- Icon-Animationen beim Karten-Hover. Klasse an das SVG-Teil setzen. --- */
@keyframes kwm-card-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.kwm-card .kwm-card-ic .path,.kwm-card .kwm-card-ic .check{stroke-dasharray:1;stroke-dashoffset:0}
.kwm-card:hover .kwm-card-ic .path{animation:kwm-card-draw 1.4s ease-in-out}   /* zeichnet sich, braucht pathLength="1" */
.kwm-card:hover .kwm-card-ic .check{animation:kwm-card-draw 1s ease-in-out}    /* dito, kuerzer */
.kwm-card .kwm-card-ic .beat,.kwm-card .kwm-card-ic .ring,.kwm-card .kwm-card-ic .ripple{transform-box:fill-box;transform-origin:center}
@keyframes kwm-card-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.18)}42%{transform:scale(1)}}
.kwm-card:hover .kwm-card-ic .beat{animation:kwm-card-beat 1.3s ease-in-out infinite}   /* pulsiert */
@keyframes kwm-card-ring{0%{transform:scale(.5);opacity:.9}70%{opacity:0}100%{transform:scale(1.6);opacity:0}}
.kwm-card:hover .kwm-card-ic .ring{animation:kwm-card-ring 1.7s ease-out infinite}      /* Kreis SICHTBAR, geht auf */
.kwm-card .kwm-card-ic .ripple{opacity:0}
@keyframes kwm-card-rip{0%{transform:scale(.4);opacity:.7}70%{opacity:0}100%{transform:scale(1.8);opacity:0}}
.kwm-card:hover .kwm-card-ic .ripple{animation:kwm-card-rip 1.6s ease-out infinite}     /* Kreis UNSICHTBAR, erscheint */

@media(prefers-reduced-motion:reduce){
  .kwm-card,.kwm-card::after,
.kwm-cards--posts .elementor-post::after{transition:none!important}
  .kwm-card:hover,.kwm-cards--posts .elementor-post:hover{transform:none!important}
  .kwm-card:hover .kwm-card-ic *{animation:none!important}
}

/* == KWM Leseseiten-Variante (Steph) == */
/* Fuer Wissensseiten, Ratgeber und andere Textseiten: class="kwm-sec kwm-sec--text" an den Wrapper.
   Eyebrow (.kick), Fliesstext (.lead) und Content-Box bleiben identisch zum Rest der Seite —
   NUR die Headline-Skala wird ruhiger.
   Grund (Stephi, 07/2026): clamp(34-64px) ist die Marketing-Stimme der Startseite. Leseseiten brauchen
   eine ruhige Hierarchie, und der Kunde mag ausdruecklich keinen Magazin-Look.
   Doppelte Klasse (.kwm-sec.kwm-sec--text) = hoehere Spezifitaet, gewinnt unabhaengig von der Reihenfolge. */
.kwm-sec.kwm-sec--text h1,
.kwm-sec.kwm-sec--text .kwm-h1,
.kwm-sec.kwm-sec--text .kwm-h1 .elementor-heading-title{
  font-family:'Raleway',sans-serif!important;
  font-size:clamp(30px,3.4vw,44px)!important;
  font-weight:300!important;letter-spacing:-.02em!important;line-height:1.15!important}
.kwm-sec.kwm-sec--text h2,
.kwm-sec.kwm-sec--text .kwm-h2,
.kwm-sec.kwm-sec--text .kwm-h2 .elementor-heading-title{
  font-family:'Raleway',sans-serif!important;
  font-size:clamp(21px,1.9vw,24px)!important;
  font-weight:600!important;letter-spacing:-.01em!important;line-height:1.3!important}
.kwm-sec.kwm-sec--text h3,
.kwm-sec.kwm-sec--text .kwm-h3,
.kwm-sec.kwm-sec--text .kwm-h3 .elementor-heading-title{
  font-family:'Raleway',sans-serif!important;
  font-size:17px!important;font-weight:600!important;letter-spacing:0!important;line-height:1.35!important}

/* == KWM GOLD-REGEL (verbindlich, Steph) ==
   ============================================================================
   Es gibt GENAU ZWEI Goldtoene. Welcher gilt, entscheidet der UNTERGRUND.
   Das ist keine Geschmacksfrage, sondern gerechnet (Kontrast nach WCAG).

   #C6A25A  ANTIKGOLD   = das Marken-Gold. Standard fuer ALLES auf dunklem Grund
                          (Onyx #2A2521): Text, Icons, Rahmen, Flaechen.  -> 6,29:1  ok
                          NICHT als Lesetext auf hellem Grund:            -> 2,14:1  faellt durch

   #836B3B  GOLD-700    = NUR fuer kleinen Lesetext auf hellem Grund (Porcelain #F6F1E9),
                          wo Antikgold unlesbar waere.                    -> 4,52:1  ok (knapp)
                          NICHT auf dunklem Grund:                        -> 2,98:1  faellt durch

   KEIN drittes Gold. Gold-600 #A6884C wurde 07/2026 geprueft und verworfen:
   auf Porcelain 2,99:1, faellt ebenfalls durch -> kauft keine Lesbarkeit.
   Rechnerisch ist Gold-700 der HELLSTE Goldton, der auf hellem Grund die Norm noch
   schafft (Grenz-Luminanz 0,1575 / Gold-700 0,1566). Nach oben ist kein Spielraum.

   FAUSTREGEL FUER FORKS:
     Dekoratives (Rahmen, Linien, Flaechen, Icons, Hover-Rahmen) -> IMMER Antikgold.
     Nur echter kleiner LESETEXT auf hellem Grund                -> Gold-700.
   Achtung: auf Champagne #E7D8B4 schafft selbst Gold-700 nur Grosstext (3,60:1)
   -> kleinen Lesetext dort besser in Onyx setzen, nicht in Gold.
   ============================================================================ */
:root{--kwm-gold:#C6A25A;--kwm-gold-ink:#836B3B}
/* Hilfsklassen: .kwm-gold = Standard-Gold · .kwm-gold-ink = Lesevariante auf hellem Grund */
.kwm-gold{color:var(--kwm-gold)}
.kwm-gold-ink{color:var(--kwm-gold-ink)}

/* -- Gold nach Untergrund: Eyebrow-Kontext -- */
/* Die Eyebrow-Farbe folgt automatisch dem Untergrund (siehe GOLD-REGEL oben):
   dunkler Grund -> Antikgold (6,29:1) · heller Grund -> Gold-700 (4,52:1).
   Neue Sektionen sind automatisch richtig, sobald der Wrapper kwm-sec traegt.

   Modifier (Vorschlag Fork 4, uebernommen):
     kwm-sec--light  -> heller Untergrund (ist zugleich der Standard von kwm-sec)
     kwm-sec--dark   -> dunkler Untergrund
   Der --light-Modifier ist NICHT nur Symmetrie: er ist der Kontext-RESET fuer helle Inseln in
   dunklen Sektionen. Beispiel: eine Goldkarte (helle Flaeche) in einer dunklen Sektion — ohne Reset
   wuerde alles darin Antikgold erben und auf der hellen Karte auf 2,14:1 fallen.
   Darum traegt .kwm-card den hellen Kontext gleich selbst. */
/* ============================ KONTEXT-LEITER ============================
   Zwei Variablen, EINE Leiter, immer gemeinsam gesetzt:
     --kwm-gold-ctx = Akzentfarbe [Eyebrow, Goldpfad-Nummer, Klammern, Akzentzahl]
     --kwm-fg       = Fliesstext-/Lead-Farbe
     --kwm-ink      = Ueberschriften-Farbe [h1-h6]
   Reihenfolge ist Absicht: hell -> dunkel -> Akzentflaechen. Gleiche Spezifitaet,
   spaeter gewinnt — ein Element traegt ja beides ["kwm-sec kwm-sec--dark",
   "kwm-card kwm-card--dark"]. Wer eine Sprosse einfuegt, beachtet die Reihenfolge. */
:root{--kwm-gold-ctx:#C6A25A;--kwm-fg:#2A2A28;--kwm-ink:#2A2521}
/* heller Untergrund: kwm-sec (Standard), expliziter Modifier, die Alt-Widgets,
   die vier nativen Eyebrows der Startseite und jede Goldkarte (= helle Insel) */
.kwm-sec,.kwm-sec--light,.kwmcta,.kwmkae,.kwm-card,.elementor-widget-theme-post-content,
.elementor-element-892f2096,.elementor-element-5673305,
.elementor-element-d5e7cf9,.elementor-element-f79ef31{--kwm-gold-ctx:#836B3B;--kwm-fg:#2A2A28;--kwm-ink:#2A2521}
/* dunkler Untergrund. MUSS nach der hellen Gruppe stehen: gleiche Spezifitaet, spaeter gewinnt
   (ein Element traegt ja beides: "kwm-sec kwm-sec--dark"). */
.kwm-sec--dark,.kwmcl,.kwmuni,.kwm-card--dark{--kwm-gold-ctx:#C6A25A;--kwm-fg:rgba(246,241,233,.85);--kwm-ink:#F6F1E9}
/* --- AKZENTFLAECHEN: dort kann Gold nicht lesbar werden -> Eyebrow wird neutral ---
   (Luecke von Fork 1 gefunden, 07/2026. Das Modell kannte nur "hell"/"dunkel" und meinte damit
   stillschweigend nur Porcelain und Onyx. Auf den Toenen DAZWISCHEN faellt JEDES Gold durch:
   Champagne  #E7D8B4 -> bestes Gold (Gold-700)  3,60  durchgefallen
   Sandstein  #CBBBA6 -> bestes Gold (Gold-700)  2,71  durchgefallen
   Sandstein800 #615A50 -> bestes Gold (Antikgold) 2,82 durchgefallen
   Ein drittes Gold hilft NICHT (siehe GOLD-REGEL: Gold-700 ist bereits der hellste moegliche Ton).
   Also gibt der Eyebrow dort das Gold auf und nimmt die neutrale Gegenfarbe:
   Onyx auf Champagne 10,74 · Onyx auf Sandstein 8,08 · Porcelain auf Sandstein800 6,05.
   MUSS nach hell/dunkel stehen (gleiche Spezifitaet, spaeter gewinnt). */
.kwm-sec--mid{--kwm-gold-ctx:#2A2521;--kwm-fg:#2A2A28;--kwm-ink:#2A2521}        /* helle Akzentflaeche [Champagne, Sandstein] -> Onyx */
.kwm-sec--mid-dark{--kwm-gold-ctx:#F6F1E9;--kwm-fg:rgba(246,241,233,.85);--kwm-ink:#F6F1E9}   /* dunkle Akzentflaeche [Sandstein-800] -> Porcelain.n   Lead stand hier vorher auf 2,11 — die Sektion erbte den hellen Text von .kwm-sec. */
/* Hinweis: Die vier IDs bleiben. Sie stehen nicht nur hier, sondern auch in der Typo-Regel —
   diese nativen Eyebrows haben weder .kick noch einen .kwm-sec-Vorfahren. Sie hier zu entfernen
   waere Kosmetik: die ID-Kopplung bliebe in der Typo-Regel ohnehin bestehen. */

/* -- Bruecke: Elementor Posts-Widget als Goldkarte -- */
/* Fuer "Weiterlesen"-Listen: dem Posts-Widget die Klasse kwm-cards--posts geben (Erweitert > CSS-Klassen).
   Dann sehen seine Artikel wie Goldkarten aus - deklarativ, ohne JS und ohne Nachbau.
   Grund gegen JS: kein Aufblitzen ungestylter Karten, keine Abhaengigkeit von laufendem Skript.
   Die Flaechen-/Rahmen-/Hover-Regeln teilt sich das Widget oben direkt mit .kwm-card (eine Quelle).
   Nur die Innentypo muss gespiegelt werden, weil Elementor andere Elemente rendert als h3/p. */
.kwm-cards--posts .elementor-post__title,
.kwm-cards--posts .elementor-post__title a{font-family:'Raleway',sans-serif;font-weight:600;font-size:16px;
  letter-spacing:-.01em;line-height:1.25;color:#2A2521;text-decoration:none}
.kwm-cards--posts .elementor-post__excerpt p{font-family:'Comfortaa',sans-serif;font-size:12.5px;
  color:#867B6E;line-height:1.62;margin:0}
.kwm-cards--posts .elementor-post{--kwm-gold-ctx:#836B3B;--kwm-fg:#2A2A28;--kwm-ink:#2A2521}   /* helle Flaeche = helle Insel */

/* == KWM Schritt-Muster "GOLDPFAD" (verbindlich, Steph) ==
   ============================================================================
   NAME: "GOLDPFAD". Nummerierte Schrittfolge an einer goldenen Haarlinie.
   VORLAGE IST RAMONA. Werte 1:1 aus dem Eigenen CSS von dx00001/ra0008d (Post 421) uebernommen,
   nachdem Stephi 07/2026 entschieden hat: "exakt so wie aktuell bei Ramona, auch das Anfuehlen,
   auch die +- Zeichen". Nichts hiervon ist Auslegung. Nicht nachbauen, nicht abweichen.

   BENUTZUNG — zwei Einstiege, EIN Aussehen und EIN Verhalten:
   a) Elementor-Akkordeon -> dem Widget die Klasse **kwm-steps** geben (Erweitert > CSS-Klassen)
   b) Artikeltext        -> <details class="ablauf"> im Post-Content, kein Wrapper noetig

   DIE ANIMATION LIEGT IM SNIPPET (Post 502, Marker "KWM GOLDPFAD Akkordeon"), nicht hier:
   Elementors Widget animiert selbst, nackte <details> koennen es nicht. Der CSS-Weg
   (::details-content + interpolate-size) wurde durchgemessen und faellt aus. Details dort.

   DAS PLUS-ZEICHEN (Stephis "schoener"): geschlossen ein goldenes Plus im duennen Ring.
   Beim Oeffnen dreht es 45 Grad zum Kreuz, der Ring fuellt sich mit Antikgold, das Zeichen wird Onyx.
   Beim Elementor-Einstieg ist es Elementors SVG-Glyph, im Artikeltext per CSS gezeichnet —
   gleiche Groesse, Farbe, Ring, Drehung und Fuellung.

   RESPONSIV: Einzug clamp(42px,6vw,88px), unter 768px faellt er auf 0 und die Linie wird ausgeblendet.
   (Meine erste Fassung hatte feste 88px — das war schon ein Unterschied zu Ramona.)
   ============================================================================ */

/* --- Zaehler --- */
.kwm-steps,.elementor-widget-theme-post-content{counter-reset:kwm-step}

/* --- a) Akkordeon-Einstieg: Linie am Wrapper (Ramonas Mechanik) --- */
.kwm-steps{position:relative;padding-left:clamp(42px,6vw,88px)}
.kwm-steps::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,#C6A25A 0%,#C6A25A 82%,transparent 100%)}

/* --- b) Artikel-Einstieg: Linie je Item, letztes verlaeuft --- */
/* Im Post-Content gibt es keinen Wrapper um NUR die Schritte -> jedes Item traegt sein Segment,
   die stossen dank margin:0 nahtlos aneinander. */
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf{position:relative;padding-left:clamp(42px,6vw,88px)}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf::before{content:"";position:absolute;left:5px;
  top:0;bottom:0;width:1px;background:#C6A25A}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf:last-of-type::before{
  background:linear-gradient(to bottom,#C6A25A 0%,#C6A25A 82%,transparent 100%)}

/* Der letzte Absatz im geoeffneten Schritt traegt margin-bottom:28px. Ohne eigenen
   Formatierungskontext faellt dieser Abstand aus dem <details> heraus (Margin-Collapsing):
   die Linie (::before, bottom:0) endet 28px zu frueh und es klafft eine Luecke bis zum
   naechsten Schritt - sichtbar nur im geoeffneten Zustand. flow-root haelt den Abstand innen. */
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf{display:flow-root}

/* --- Item: keine Flaeche, kein Rahmen, kein Abstand --- */
.kwm-steps .e-n-accordion-item,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf{
  background:transparent!important;border:none!important;border-radius:0!important;margin:0!important;
  overflow:visible!important;counter-increment:kwm-step}

/* --- Kopfzeile --- */
.kwm-steps .e-n-accordion-item-title,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary{
  display:flex!important;align-items:center!important;gap:18px!important;
  padding:22px 0!important;min-height:0!important;cursor:pointer;
  background:transparent!important;border:none!important;list-style:none}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary::-webkit-details-marker{display:none}
.kwm-steps .e-n-accordion-item-title-header{flex:1 1 auto;min-width:0}

/* --- Ordnungszahl: FEST Antikgold, siehe Kommentar unten --- */
.kwm-steps .e-n-accordion-item-title::before,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary::before{
  content:"0" counter(kwm-step);
  font-family:'Raleway',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:#C6A25A;
  position:static!important;opacity:1!important;flex:none;
  width:auto!important;height:auto!important;background:none!important;border:none!important;
  transform:none!important;border-radius:0!important}
/* FARBE DER NUMMER: FEST Antikgold #C6A25A. Von Stephi 07/2026 so entschieden ["Ramonas Ton fuer
   Akkordeons"], in Kenntnis der Zahlen. Begruendung: die Ordnungszahl ist ein DEKORATIVES
   Ordnungszeichen wie ein Listenpunkt, kein Lesetext — die Reihenfolge sieht man ohnehin, die
   Bedeutung traegt der Titel daneben. Damit greift die Faustregel der GOLD-REGEL: Dekoratives ist
   immer Antikgold [wie .kwm-card-ic, ebenfalls fest].
   Bewusst in Kauf genommen: auf hellem Grund 2,14:1. Der Titel daneben steht bei 13,49.
   NICHT auf var(--kwm-gold-ctx) zurueckdrehen — das war eine fruehere Auslegung, Stephi hat sie
   nach Vorlage der Kontrastwerte bewusst verworfen. Gilt NUR fuer die Ordnungszahl; Eyebrows,
   Leads und Klammern folgen weiterhin dem Kontext. */

/* --- Titel: wird beim Hover gold (Ramonas Detail, gehoert zum Anfuehlen) --- */
.kwm-steps .e-n-accordion-item-title-text,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary{
  font-family:'Raleway',sans-serif;font-size:22px;font-weight:600;line-height:1.3;
  color:var(--kwm-ink,#2A2521);transition:color .4s ease}
.kwm-steps .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary:hover{color:#C6A25A}

/* --- Plus-Zeichen: Ring 32px, goldenes Plus 14px. Offen: 45 Grad gedreht, Ring gold gefuellt --- */
.kwm-steps .e-n-accordion-item-title-icon,
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary::after{
  width:32px;height:32px;border-radius:50%;border:1px solid rgba(42,37,33,.22);
  display:grid;place-items:center;flex:none;margin-left:auto;background-color:transparent;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
.kwm-steps .e-n-accordion-item-title-icon svg{width:14px;height:14px;fill:#C6A25A;transition:fill .3s}
.kwm-steps .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon{
  transform:rotate(45deg);background-color:#C6A25A;border-color:#C6A25A}
.kwm-steps .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon svg{
  fill:#2A2521}

/* Artikel-Variante: kein Icon-Element vorhanden -> Plus per CSS zeichnen, gleiche Optik.
   Zwei Verlaeufe bilden das Kreuz, der dritte ist die Fuellung [zuerst genannt = obenauf]. */
/* FALLE: Kit-Zeile ~247 (FAQ-Chevron) setzt am selben Pseudo transform:translateY(-70%) rotate(45deg).
   Wer hier transform NICHT zurueckstellt, hat das Kreuz schon im Ruhezustand quer stehen und die
   Drehung beim Oeffnen faellt aus. Gemessen 07/2026. Deshalb transform/position/inset explizit neutral. */
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary::after{
  content:"";position:static;transform:none;top:auto;right:auto;
  background-image:linear-gradient(#C6A25A,#C6A25A),linear-gradient(#C6A25A,#C6A25A);
  background-size:14px 2px,2px 14px;background-position:center,center;background-repeat:no-repeat}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf[open] > summary::after{
  transform:rotate(45deg);border-color:#C6A25A;
  background-image:linear-gradient(#2A2521,#2A2521),linear-gradient(#2A2521,#2A2521),
                   linear-gradient(#C6A25A,#C6A25A);
  background-size:14px 2px,2px 14px,100% 100%;
  background-position:center,center,center;background-repeat:no-repeat}

/* --- Inhalt --- */
.kwm-steps .e-n-accordion-item > .e-con{padding:0 0 28px 34px;border:none;background:transparent;
  box-shadow:none}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > *:not(summary){
  padding-left:34px!important;padding-right:0!important;margin:0 0 12px!important}
:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > *:not(summary):last-child{
  margin-bottom:28px!important}

/* --- Mobil: Einzug faellt weg, Linie verschwindet (Ramonas Umbruch) --- */
@media(max-width:767px){
  .kwm-steps,:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf{padding-left:0}
  .kwm-steps::before,:is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf::before{display:none}
}
/* --- Bewegung reduzieren --- */
@media(prefers-reduced-motion:reduce){
  .kwm-steps .e-n-accordion-item-title-icon,
  .kwm-steps .e-n-accordion-item-title-icon svg,
  .kwm-steps .e-n-accordion-item-title-text,
  :is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary,
  :is(.elementor-widget-theme-post-content,.kwm-ablauf) details.ablauf > summary::after{transition:none!important}
}
/* == KWM Bild-Muster "GOLDRAHMEN" (verbindlich, Steph) ==
   ============================================================================
   NAME: "GOLDRAHMEN". Goldene Haarlinie, 18px nach unten rechts versetzt, hinter dem Bild.
   Werte 1:1 aus Ramonas Hero (pf00017, Post 421) gemessen. Nicht nachbauen.

   BENUTZUNG: dem Bild-Widget die Klasse **kwm-frame** geben (Erweitert > CSS-Klassen). Fertig.

   VERSATZ IST FIX bei 18px — er skaliert NICHT mit der Bildgroesse (Entscheidung 07/2026, s.u.).
   Kleines Bild, wo 18px proportional zu viel waeren:  style="--kwm-frame-off:10px"
   Sparsam benutzen. Der gemeinsame Wert IST das Muster.

   STAPELUNG (aus dem Original uebernommen, bitte so lassen): Rahmen z-index:0, Bild z-index:1.
   Beide nicht-negativ -> es braucht KEIN isolation:isolate und nichts kann durch einen Vorfahren
   durchfallen. Bewusst anders als die Goldkarte, die mit z-index:-1/-2 arbeitet und darum
   isolation:isolate zwingend braucht. Siehe KWM Karten-Muster.

   FALLE 1 — DEM BILD KEINE EIGENE BREITE GEBEN. Der Rahmen haengt am WIDGET-Kasten, nicht am Bild.
   Solange das Bild sein Widget ausfuellt (Elementors Standard: width:100%), sind beide deckungsgleich.
   Setzt man in Elementor die Bild-„Breite" (= max-width am img), ist das Widget weiter als das Bild und
   der Rahmen steht daneben — bei 800px Widget / 300px Bild gemessene 500px daneben, ohne jede Fehlermeldung.
   RICHTIG: Breite am Widget/an der Spalte einstellen, nie am Bild.
   (Faellt im Bestand nicht auf: Ramonas Widget ist zufaellig genau so breit wie sein Bild, 526/526.)

   FALLE 2 — KEIN overflow:hidden AM VORFAHREN. Der Rahmen ragt 18px nach unten rechts heraus.
   Eine Spalte mit overflow:hidden schneidet ihn ab.
   ============================================================================ */
.kwm-frame{--kwm-frame-off:18px;position:relative}
.kwm-frame::after{content:"";position:absolute;
  top:var(--kwm-frame-off);left:var(--kwm-frame-off);
  right:calc(-1 * var(--kwm-frame-off));bottom:calc(-1 * var(--kwm-frame-off));
  border:1px solid #C6A25A;z-index:0;pointer-events:none}
.kwm-frame img{position:relative;z-index:1}
/* Variante mit feiner Kontur direkt am Bild: fuer die Artikel-Heros (Experten-Artikel und
   Kinderwunsch-Wissen) und Bilder auf Inhaltsseiten. Gleiche Linie wie an den Fliesstext-Bildern.
   Die Kaempferinnen-Fotos nutzen kwm-frame bewusst ohne diese Variante. */
.kwm-frame--linie img{border:1px solid #E2D9CD}

/* == KWM Klammer-Regel (verbindlich, Steph) ==
   ============================================================================
   ZWEI TEILE. Beide gelten fuer LIEFERTEXTE auf der Seite, NICHT fuer Code,
   URLs, CSS/JS in Widgets oder Elementor-Einstellungen. Dort bleiben () wie sie sind.

   1) SCHREIBWEISE: runde Klammern () werden zu eckigen []. Ausnahmslos, in jedem Fliesstext.
   2) FARBE: Klammern UND Inhalt tragen die Akzentfarbe des jeweiligen Untergrunds.

   ANWENDUNG — Klammern LITERAL mitschreiben, die Klasse faerbt nur:

       Wir begleiten dich <span class="kwm-kl">[und zwar wirklich]</span> durch alles.

   Bewusst KEIN content:"[" per ::before/::after: generierter Inhalt laesst sich nicht kopieren,
   und wer die Klammern aus Reflex mitschreibt, bekaeme [[doppelte]]. Literal ist die
   fehlerarme Variante — sichtbar falsch statt lautlos falsch.

   FARBE laeuft ueber var(--kwm-gold-ctx), folgt also automatisch dem Untergrund
   [hell Gold-700 4,52 · dunkel Antikgold 6,29 · Akzentflaeche neutral]. Siehe GOLD-REGEL.
   !important ist noetig, weil .elementor-kit-4 a{color:...} sonst jede Klammer IN einem Link
   ueberschreibt — derselbe Spezifitaets-Konflikt wie beim GOLDBUTTON.

   BEKANNTE FOLGE, bewusst so: Auf Akzentflaechen [kwm-sec--mid, Champagne/Sandstein] haelt
   --kwm-gold-ctx kein Gold, sondern Onyx — dort ist die Klammer also NICHT farblich abgesetzt.
   Das ist kein Fehler, sondern die Gold-Regel: auf diesen Toenen faellt jedes Gold durch.
   Kein Sonderton erfinden. Wenn dort ein Akzent gebraucht wird, Stephi fragen.
   ============================================================================ */
.kwm-kl{color:var(--kwm-gold-ctx,#836B3B)!important}

/* == KWM Zahlen-Muster "GOLDGITTER" (verbindlich, Steph) ==
   ============================================================================
   NAME: "GOLDGITTER". Offenes Liniengitter: Linie oben und unten, senkrechte Trenner
   zwischen den Zellen, links und rechts OFFEN. Werte 1:1 aus Ramonas „Ihre Reise in Zahlen"
   (rt00020, Post 421) gemessen. Nicht nachbauen.

   GESTALTUNG FEST [Linien, Trenner, offene Seiten, Zahl- und Label-Typo].
   INHALT FREI — Zellenanzahl beliebig, und in die Zelle darf, was passt:
   Zahlen mit Label [Ramona] ODER Icon + Label + Wert [Ratgeber-Kopfzeile]. Gleiche Philosophie
   wie die GOLDKARTE.

   HELL IST STANDARD, DUNKEL IST EINE VARIANTE — Stephi entscheidet den Untergrund:
       <div class="kwm-stats">          … heller Grund
       <div class="kwm-stats kwm-stats--dark">   … dunkler Grund [= Ramonas Original]

   Die dunkle Variante setzt ihren Eyebrow-Kontext selbst [dunkle Insel, siehe GOLD-REGEL],
   damit Akzentzahl und Klammern darin automatisch Antikgold werden.

   ZWEI ZELLEN-BAUARTEN:

   a) Zahl  [Ramona]                        b) Icon  [Ratgeber-Kopfzeile]
   <div class="kwm-stats kwm-stats--dark">  <div class="kwm-stats">
     <div class="kwm-stat">                   <div class="kwm-stat kwm-stat--icon">
       <div class="kwm-stat-num">8</div>        <svg class="kwm-stat-ic" viewBox="0 0 24 24">…</svg>
       <p class="kwm-stat-lbl">Jahre unterwegs</p>   <div>
     </div>                                        <p class="kwm-stat-lbl">Lesezeit</p>
     <div class="kwm-stat kwm-stat--accent">       <p class="kwm-stat-val">2 Min.</p>
       <div class="kwm-stat-num">1</div>         </div>
       <p class="kwm-stat-lbl">kleines Wunder</p> </div>
     </div>                                  </div>
   </div>

   kwm-stat--accent faerbt die Zahl in die Akzentfarbe des Untergrunds [var(--kwm-gold-ctx)]:
   dunkel Antikgold 6,29 · hell Gold-700 4,52. Fest Antikgold waere auf hell 2,14 und fiele durch —
   bei 52px zwar Grosstext, aber selbst dessen Grenze von 3:1 reisst es. Siehe GOLD-REGEL.

   MOBIL: unter 820px stapeln die Zellen und die Trenner werden waagerecht. Bewusst so — ein
   umbrechendes Flex-Gitter haette am Zeilenende Trennstriche ins Leere gezogen.

   FALLE: Die erste Zelle hat padding-left:0, damit die erste Zahl exakt unter dem Eyebrow steht.
   Wer die Reihenfolge aendert, verschiebt diese Kante. Detail aus dem Original, bitte lassen.
   ============================================================================ */
.kwm-stats{--kwm-stats-line:rgba(42,37,33,.16);--kwm-stats-ink:#2A2521;--kwm-stats-lbl:rgba(42,37,33,.72);
  /* flex-direction vorsorglich erzwungen, gleiche Fehlerklasse wie oben: native Elementor-Container
     stehen per Default auf SPALTE. Das Goldgitter ist eine Reihe = feste Gestaltung. */
  display:flex;flex-direction:row!important;
  border-top:1px solid var(--kwm-stats-line);border-bottom:1px solid var(--kwm-stats-line)}
.kwm-stats--dark{--kwm-stats-line:rgba(246,241,233,.16);--kwm-stats-ink:#F6F1E9;
  --kwm-stats-lbl:rgba(246,241,233,.7);--kwm-gold-ctx:#C6A25A;--kwm-fg:rgba(246,241,233,.85);--kwm-ink:#F6F1E9}

/* Variante: OHNE die waagerechten Linien. Fuer den Fall "das Gitter steht ohnehin auf einer
   abgesetzten Flaeche, die Abgrenzung ist schon da" (Fork 4, 07/2026). Die senkrechten Trenner
   bleiben — die sind das Muster, die Rahmenlinien sind die Einfassung.
   Frei kombinierbar: class="kwm-stats kwm-stats--dark kwm-stats--offen". */
.kwm-stats--offen{border-top:0;border-bottom:0}

/* FALLE — NATIVE ELEMENTOR-CONTAINER [Fork 4, 07/2026]: Auf einem nativen Container traegt die Zelle
   .e-con.e-flex. Elementors Regel dafuer hat ZWEI Klassen und schlaegt jede einklassige Kit-Regel:
   die Zelle landet auf flex-basis:auto und bekommt aus --width ein width:100% -> alle stapeln.
   flex:1 1 0!important loest es mit einer Zeile, weil flex-basis bei Flex-Items das width schlaegt.
   Ein Fork kann das NICHT selbst ueberbruecken: Elementors Container-UI bietet nur grow+shrink,
   kein basis -> bestenfalls flex:1 1 auto, also weiterhin 100% breit.
   MERKE: Das Muster wurde gegen ein HTML-Widget gemessen, wo kein .e-con.e-flex dagegenhaelt.
   Jedes neue Muster gegen BEIDES pruefen: HTML-Widget UND nativen Container. */
.kwm-stat{flex:1 1 0!important;min-width:0;padding:34px 18px;border-right:1px solid var(--kwm-stats-line)}
.kwm-stat:first-child{padding-left:0}
.kwm-stat:last-child{border-right:0}

.kwm-stat-num{font-family:'Raleway',sans-serif;font-size:52px;font-weight:300;line-height:52px;
  letter-spacing:-1px;color:var(--kwm-stats-ink)}
.kwm-stat-lbl{font-family:'Raleway',sans-serif;font-size:10px;font-weight:600;line-height:15px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--kwm-stats-lbl);margin:0}
.kwm-stat-val{font-family:'Comfortaa',sans-serif;font-size:13.5px;font-weight:400;line-height:1.5;
  color:var(--kwm-stats-ink);margin:2px 0 0}
/* --accent wirkt auf BEIDE Bauarten: Zahl [Ramona] und Wert [Icon-Zelle].
   Nur .kwm-stat-num zu faerben hiesse: auf einer Icon-Zelle passiert lautlos nichts. */
.kwm-stat--accent .kwm-stat-num,
.kwm-stat--accent .kwm-stat-val{color:var(--kwm-gold-ctx)}

/* Icon-Bauart: Icon links, Label + Wert rechts. Icon fest Antikgold wie .kwm-card-ic [dekorativ]. */
.kwm-stat--icon{display:flex;align-items:center;gap:14px}
.kwm-stat-ic{--kwm-stat-ic:22px;width:var(--kwm-stat-ic);height:var(--kwm-stat-ic);flex:0 0 auto;
  color:#C6A25A;display:block;overflow:visible}
.kwm-stat-ic *{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kwm-stat-ic svg{width:100%;height:100%;display:block}
.kwm-stat-ic--fill *{fill:currentColor;stroke:none}

@media(max-width:820px){
  .kwm-stats{display:block}
  .kwm-stat{padding:22px 0;border-right:0;border-bottom:1px solid var(--kwm-stats-line)}
  .kwm-stat:last-child{border-bottom:0}
}


/* === KATAI Artikelkarten: Read-more-Pfeil wie kae-go (Kaempferinnen) === */
.kwm-cards--posts .elementor-post__read-more{display:inline-flex;align-items:center;gap:9px;line-height:1}
.kwm-cards--posts .elementor-post__read-more::after{content:"";width:19px;height:10px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M2%206h18M15%201.5%2020.5%206%2015%2010.5'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2012'%3E%3Cpath%20d='M2%206h18M15%201.5%2020.5%206%2015%2010.5'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s}
.kwm-cards--posts .elementor-post:hover .elementor-post__read-more::after{transform:translateX(4px)}


/* Pagination filigran (27.07.2026, wie KWIA): schlanke Zahlenreihe statt Kaesten. Aktuelle Seite Onyx
   mit Goldstrich darunter, Zurueck/Weiter als leise Textlinks. Gilt fuer alle Archive/Grids. */
.elementor-pagination{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:34px;font-family:'Raleway',sans-serif;font-weight:600;font-size:13.5px}
.elementor-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0;margin:0;border:0;background:transparent;color:#867B6E;text-decoration:none;line-height:1;transition:color .2s}
.elementor-pagination a.page-numbers:hover{color:#2A2521;background:transparent}
.elementor-pagination .page-numbers.current{background:transparent;color:#2A2521;box-shadow:inset 0 -2px 0 #C6A25A}
.elementor-pagination .page-numbers.prev,.elementor-pagination .page-numbers.next{min-width:0;padding:0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#836B3B}
.elementor-pagination .page-numbers.prev:hover,.elementor-pagination .page-numbers.next:hover{color:#2A2521}
.elementor-pagination .page-numbers.dots{color:#B4A99A}


/* ===== Heller Footer auf einzelnen Seiten =====
 Der Footer ist standardmäßig onyx. Auf hellen Seiten (z. B. Rezensionen) wird er umgekehrt:
 Angebote/Begleitung 1297 wieder dunkel (Stephi 30.08.2026); dabei kaputten Selektor entfernt,
 der versehentlich den Body von 1297 einfaerbte statt des Footers.
 heller Grund wie der Header, dunkle Schrift, Icons bleiben Gold. Stephi hatte das ursprünglich
 im HTML-Widget der Rezensionen-Seite stehen; die Klasse kwm-foot-hell setzt die Bridge per Seiten-Haken, damit eine weitere
 Seite nur noch ihre ID in die Liste bekommt und nichts doppelt gepflegt wird. */
.page-id-1332 .elementor-location-footer,.kwm-foot-hell .elementor-location-footer,
.page-id-1332 .elementor-location-footer .e-con,.kwm-foot-hell .elementor-location-footer .e-con,
.page-id-1332 .elementor-location-footer .e-con-inner,.kwm-foot-hell .elementor-location-footer .e-con-inner{background-color:#F6F1E9 !important;background-image:none !important}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer,
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer :is(h1,h2,h3,h4,h5,h6,p,span,li,a){color:#2A2521 !important}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer a:hover{color:#836B3B !important}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer svg{fill:#C6A25A !important}
.elementor-location-footer .fdw-logo-hellgrund{display:none}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer .fdw-logo-dunkelgrund{display:none}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer .fdw-logo-hellgrund{display:block}
:is(.page-id-1332,.kwm-foot-hell) .elementor-location-footer :is(hr,.elementor-divider-separator){border-color:rgba(42,37,33,.18) !important;background-color:rgba(42,37,33,.18) !important}
/* kwm-footer-hell */

/* ===== Goldene Haarlinie ueber dem Footer =====
 Trennt den Footer von der letzten Sektion, wichtig wenn dunkle Sektion auf dunklen Footer
 trifft (z. B. Begleitung). Gleiche Liniensprache wie der Bekannt-aus-Ticker. Gilt global,
 auch im hellen Footer als ruhige Abschlusskante. Stephi 30.08.2026. Suchwort: kwm-footer-haarlinie */
.elementor-location-footer .fdw-footer{border-top:1px solid rgba(198,162,90,.45)}


/* ===== Artikeltext: Experten-Artikel und Kinderwunsch-Wissen =====
 Stand 06.08.2026. Lag vorher doppelt im Widget-CSS beider Vorlagen (530/b1023f und 541/a20169).
 Beim Bearbeiten einer Vorlage im Elementor wurde der Datensatz neu geschrieben und die
 Gestaltung war weg - deshalb steht sie jetzt hier, an einer Stelle fuer beide.
 Enthaelt: Ueberschriften-Abstaende, Aufzaehlungen mit Goldpunkt, Bilder mit feiner Kontur,
 Goldrahmen der beim Hover aufploppt (Werte wie die Archivkarten) und den Vergroessern-Hinweis.
 Suchwort: kwm-artikeltext */
.elementor-widget-theme-post-content > *:first-child{margin-top:0}.elementor-widget-theme-post-content h2{font-family:Raleway,sans-serif;font-weight:600;font-size:24px;line-height:1.25;color:#2A2521;margin:32px 0 18px}.elementor-widget-theme-post-content h3{font-family:Raleway,sans-serif;font-weight:600;font-size:18px;color:#836B3B;margin:24px 0 10px}.elementor-widget-theme-post-content p{margin:0 0 16px}.elementor-widget-theme-post-content > p:first-of-type{font-size:18px;line-height:1.7;color:#2A2521}.elementor-widget-theme-post-content :is(ul,ol){margin:0 0 18px;padding-left:0;list-style:none}.elementor-widget-theme-post-content :is(ul,ol) li{padding:6px 0 6px 28px;position:relative;border-bottom:1px solid #E2D9CD}.elementor-widget-theme-post-content :is(ul,ol) li:last-child{border-bottom:0}.elementor-widget-theme-post-content :is(ul,ol) li::before{content:"";position:absolute;left:4px;top:14px;width:7px;height:7px;border-radius:50%;background:#C6A25A}.elementor-widget-theme-post-content img{height:auto;max-width:100%}.elementor-widget-theme-post-content figure{margin:34px 0;position:relative}.elementor-widget-theme-post-content figure img{display:block;width:100%;height:auto;border:1px solid #E2D9CD;position:relative;z-index:1}.elementor-widget-theme-post-content figure::after{content:"";position:absolute;inset:0;border:1px solid #C6A25A;z-index:0;opacity:0;transform:translate(0,0);transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}.elementor-widget-theme-post-content figure:hover::after{opacity:1;transform:translate(11px,11px)}.elementor-widget-theme-post-content figure > a,.elementor-widget-theme-post-content figure > img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.elementor-widget-theme-post-content figure:hover > a,.elementor-widget-theme-post-content figure:hover > img{transform:translate(-4px,-4px)}.elementor-widget-theme-post-content figure > a,.elementor-widget-theme-post-content figure > img{position:relative;z-index:1}.elementor-widget-theme-post-content figure a{display:block;position:relative;cursor:zoom-in}.elementor-widget-theme-post-content .kwm-infografik a::after{content:"Vergrößern";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);background:#C6A25A;color:#2A2521;font-family:Raleway,sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:14px 26px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:2}.elementor-widget-theme-post-content .kwm-infografik a:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ============================================================================
   KWM KI-HINWEIS  ·  Kennzeichnung KI-generierter Bilder
   11.08.2026 (Steph). Variante "die Marke oeffnet sich selbst".

   WOFUER: Stehen auf einer Seite KI-Bilder statt echter Fotos, muessen die Bilder
   gekennzeichnet und der Grund genannt werden.

   1) GROSSES BILD  ·  Marke im Bild, die sich aufklappt
      Der Halter DIREKT um das Bild bekommt  kwm-ki-bild  und darf KEIN Padding haben
      (sonst sitzt die Marke daneben, gemessen an Marias Hero: 24px rechts/unten).
      Darin, als Geschwister des Bildes, ein HTML-Widget mit:
      <details class="kwm-ki"><summary>
         <span class="kwm-ki-t">KI-generiert</span><span class="kwm-ki-w">Warum?</span>
       </summary>
       <div class="kwm-ki-txt"><p>… ein bis zwei Saetze …</p></div></details>
      Zugeklappt eine schmale Leiste am Bildfuss, beim Klick waechst sie nach OBEN auf.

   2) KLEINE / ZWEITRANGIGE BILDER  ·  nur die stille Marke, ohne Klappe
      Elementor-Bild-Widget:   CSS-Klasse  kwm-ki-mark
      Bild in HTML/Zeitstrahl: <span class="kwm-ki-mark" style="max-width:560px"><img …></span>
      kwm-ki-mark--kurz  nur "KI" (kleine Karten, z.B. Uebersicht 504)
      kwm-ki-mark--eng   wenn der Widget-Kasten BREITER ist als das Bild und rechts sitzt
                         (Briefmarke auf der Postkarte). Sonst haengt die Marke daneben.

   ACHTUNG beim Text: unten auf den Kaempferin-Seiten stehen die Weiterreisen-Karten mit
   ECHTEN Fotos anderer Frauen. Nie "alle Bilder auf dieser Seite", sondern
   "alle Bilder in ihrer Geschichte".
   ============================================================================ */
.kwm-ki-mark{position:relative;display:block}
.kwm-ki-mark::before{content:"KI-generiert";position:absolute;left:12px;bottom:12px;z-index:2;
  font-family:Raleway,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#F6F1E9;background:rgba(42,37,33,.86);
  border-left:2px solid #C6A25A;padding:6px 10px;pointer-events:none}
.kwm-ki-mark--kurz::before{content:"KI";left:9px;bottom:9px;font-size:9px;padding:5px 8px}
/* Kasten breiter als das Bild und rechtsbuendig: aufs Bild schrumpfen, Lage halten.
   Gemessen an der Postkarte: Kasten 432px, Bild 86px, Marke saesse 346px daneben. */
.kwm-ki-mark--eng{width:fit-content;margin-left:auto}

/* Aufklappbare Marke IM Bild. Sie ist an der Unterkante verankert, waechst also nach oben
   auf und laesst den Goldrahmen (18px versetzt) unberuehrt. */
.kwm-ki-bild,
/* Halter automatisch erkennen: Elementor gibt einem per Skript erzeugten Container die
   CSS-Klasse nicht aus. Darum zusaetzlich ueber :has(). Wer im Editor arbeitet, kann
   dem Halter einfach die Klasse kwm-ki-bild geben, dann greift die erste Zeile. */
.e-con:has(> .elementor-widget-html > .kwm-ki){position:relative}
.kwm-ki{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  background:rgba(42,37,33,.93);border-left:2px solid #C6A25A}
.kwm-ki summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:7px 11px}
.kwm-ki summary::-webkit-details-marker{display:none}
.kwm-ki-t{font-family:Raleway,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#F6F1E9}
.kwm-ki-w{font-family:Raleway,sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#C6A25A;margin-left:auto;padding-right:2px;transition:opacity .3s ease}
.kwm-ki summary:hover .kwm-ki-w{opacity:.7}
.kwm-ki[open] .kwm-ki-w{opacity:.55}
.kwm-ki-txt{padding:0 12px 13px 11px;max-width:46ch}
.kwm-ki-txt p{margin:0;font-size:12.5px;line-height:1.68;color:rgba(246,241,233,.93)}
@media(max-width:600px){.kwm-ki-txt p{font-size:12px}.kwm-ki-txt{padding-bottom:11px}}
@media(prefers-reduced-motion:reduce){.kwm-ki-w{transition:none}}

/* Mobil-Pass 09/2026: das geschlossene Burger-Dropdown ragt ~43px ueber den rechten Rand
   und macht die Seite seitlich schiebbar -> horizontales Ueberlaufen global kappen.
   clip statt hidden, damit position:sticky intakt bleibt. */
html,body{overflow-x:clip}/* End custom CSS */