/* ============================================================
   Körperkompetenz entwickeln — Landingpage
   Karuna Lifeforce · crossfortune | Net-Manufaktur
   Stand: 10.09.2026 (elfte Fassung)

   Neu in dieser Fassung:
   - Das !important ist raus. In der ersten Spalte der
     Modulzeilen steht nur noch das Bild-Widget, also gibt es
     keinen Widget-Abstand mehr zu überschreiben. Die Datei
     kommt jetzt ohne ein einziges !important aus.
   - Die Regeln für den gezeichneten Punkt und die Modulnummer
     unter dem Icon sind entfernt, beides gibt es nicht mehr.

   Aus der zehnten Fassung:
   - Die Modulnummer steht jetzt in der Kicker-Zeile statt als
     eigenes Element unter dem Icon, und trägt die Modulfarbe.
     Damit hängt keine Ziffer mehr frei im Raum.
   - Icon 64 statt 56 Pixel, Modulzeilen etwas kompakter

   Aus der neunten Fassung:
   - Der 30-Pixel-Abstand zwischen Icon und Modulnummer wird
     jetzt wirklich aufgehoben. Die achte Fassung hatte ihn nur
     als Klassenregel überschrieben — SiteOrigin setzt ihn aber
     über die Zeilen-IDs der Seite, und dagegen kommt keine
     Klasse an.

   Aus der siebten Fassung:
   - Die Modul-Icons kommen als SiteOrigin-Bild-Widget in die
     erste Spalte. Das CSS gibt ihnen nur noch die Größe. Der
     farbige Punkt bleibt als Rückfall stehen, falls in einer
     Zeile kein Bild liegt.

   Aus der sechsten Fassung:
   - Schriftgrößen für die rund zwanzig Elemente, für die der
     Customizer keinen Schalter hat. Alle in em, ausgehend von
     den 17 px aus Typography → Paragraph. Verstellst du die
     dort, wächst hier alles mit.
   - Die Zeile .content-area li kommt zurück. Ich hatte geraten,
     sie zu löschen — das war falsch, siehe Abschnitt 16.
   - Modulfarben auf die Werte aus den echten Icons korrigiert

   Aus der fünften Fassung:
   - Buttons in der Theme-Farbe #719C22 mit schwarzer Schrift,
     wie im Customizer unter Other Styles hinterlegt
   - Häkchen und Akzente ebenfalls in diesem Grün statt im
     Salbei des Flyers — zwei verschiedene Grüntöne auf einer
     Seite fallen auf
   - Überschriften, Fließtext und Listen bekommen hier keine
     Größen — die kommen aus dem Customizer unter Typography.

   Was hier bleibt: Farben, Abstände, Rahmen, Flächen, Versalien
   und Sperrung der Kleinlabels. Also alles, wofür der Customizer
   keinen Schalter hat.

   Wird UNTEN AN DAS BESTEHENDE CSS ANGEHÄNGT, an derselben
   Stelle, an der der bisherige Block schon liegt. Nicht auf
   zwei Orte verteilen — sonst sucht man beim nächsten Umbau.
   ACHTUNG: Diese Stelle speichert pro Theme. Wechselt das
   Theme, ist das CSS weg — diese Datei ist die Sicherung.

   Auf Konflikte mit dem bestehenden CSS geprüft: keine.
   .content-area li, table, .post-navigation a, #main-container,
   .widget h5 und .text-center greifen an anderen Stellen.

   Gestaltungsentscheidung: Die Seite folgt dem bestehenden
   Website-CD. Vom grünen Flyer bleiben nur die fünf Modulfarben
   als Punkte vor den Modulnummern.
   Es wird KEIN neuer Webfont geladen.

   Magenta ist die Linkfarbe des Themes und wird hier nur noch
   für das Empfehlungs-Etikett in der Preisspalte verwendet.

   Im Customizer stehen unter Typography eigene Abschnitte für
   All Text, Paragraph, H1 bis H6, Links, Blockquote, List Items,
   Page Title, Page Subtitle und Main Menu. Dort werden Größen
   und Schriftschnitte eingestellt — nicht in dieser Datei.
   ============================================================ */


/* --- 1. Farb- und Maßwerte ---------------------------------- */

:root {
  --kk-aubergine:        #816D91;  /* Kopfleiste der Website */
  --kk-aubergine-dunkel: #4B2973;  /* Violett aus dem bestehenden CSS */
  --kk-magenta:          #BD4A95;  /* Linkfarbe der Website */
  --kk-magenta-dunkel:   #A03B7E;  /* abgedunkelt, nur für Hover */

  --kk-text-weich:       #6A6470;

  --kk-flaeche:          #F7F4F8;  /* abgesetzte Abschnitte */
  --kk-flaeche-warm:     #FBF8F3;
  --kk-linie:            #E4DEE8;

  /* Buttonfarbe des Themes, aus dem Customizer übernommen.
     Die schwarze Schrift ist kein Versehen: Weiß auf diesem
     Grün hat ein Kontrastverhältnis von 2,0 und ist damit
     unlesbar, Schwarz kommt auf 10,5. */
  --kk-gruen:            #719C22;
  --kk-gruen-dunkel:     #5E8420;

  /* Modulfarben, direkt aus den Icon-Dateien der Kundin
     ausgelesen, nicht aus dem Flyer geschätzt. */
  --kk-m1:               #C47B7A;
  --kk-m2:               #8CA479;
  --kk-m3:               #6192B5;
  --kk-m4:               #A45C7E;
  --kk-m5:               #AC9D7C;
}


/* --- 2. Bausteine, die überall vorkommen -------------------- */

/* Kleines Label über einer Überschrift. */
.kk-eyebrow {
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kk-aubergine);
}

.kk-sub {
  margin: 0 0 .8em;
  color: var(--kk-aubergine-dunkel);
}

/* Nur Breite und Farbe. Die Breitenbegrenzung bleibt, weil
   Fließtext über die volle Spaltenbreite schlecht zu lesen ist. */
.kk-lead {
  max-width: 46em;
  color: var(--kk-text-weich);
}

/* Handschriftlicher Claim. Bewusst kein Schreibschrift-Webfont:
   ein zusätzlicher Font kostet Ladezeit und müsste über OMGF
   lokal gehostet werden. */
.kk-script {
  margin: 1.4em 0 0;
  font-style: italic;
  color: var(--kk-aubergine);
}

.kk-claim {
  margin: 2.2em 0 0;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--kk-aubergine);
}


/* --- 3. Buttons --------------------------------------------- */

.kk-cta {
  margin-top: 1.7em;
  margin-bottom: 0;
}

.kk-cta .kk-btn {
  margin: 0 .7em .7em 0;
}

.kk-btn {
  display: inline-block;
  padding: .85em 1.9em;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Das .entry-content davor ist nötig, nicht schmückend: Das Theme
   färbt mit ".entry-content a" alle Links magenta. Ohne diesen
   Vorsatz gewinnt das Theme und färbt auch die Buttonschrift. */
.entry-content .kk-btn-primary,
.entry-content .kk-btn-primary:visited {
  background: var(--kk-gruen);
  border: 1px solid var(--kk-gruen);
  color: #000;
}

.entry-content .kk-btn-primary:hover,
.entry-content .kk-btn-primary:focus {
  background: var(--kk-gruen-dunkel);
  border-color: var(--kk-gruen-dunkel);
  color: #000;
}

.entry-content .kk-btn-ghost,
.entry-content .kk-btn-ghost:visited {
  background: transparent;
  border: 1px solid var(--kk-linie);
  color: var(--kk-aubergine-dunkel);
}

.entry-content .kk-btn-ghost:hover,
.entry-content .kk-btn-ghost:focus {
  border-color: var(--kk-aubergine);
  color: var(--kk-aubergine);
}

/* Sichtbarer Fokusrahmen für Tastaturbedienung.
   Ohne das ist die Seite mit der Tab-Taste nicht benutzbar. */
.kk-btn:focus-visible {
  outline: 2px solid var(--kk-aubergine-dunkel);
  outline-offset: 3px;
}


/* --- 4. Häkchenlisten --------------------------------------- */

/* Auch hier braucht es .entry-content — das Theme setzt für
   Listen im Inhalt einen eigenen Punkt und einen Einzug. */
.entry-content .kk-check {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-content .kk-check li {
  position: relative;
  margin-bottom: .75em;
  padding-left: 1.9em;
  list-style: none;
}

.entry-content .kk-check li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .35em;
  width: .45em;
  height: .85em;
  border: solid var(--kk-gruen);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* --- 5. Zeile 1: Einleitung unter dem Kopfbereich ------------ */

.kk-hero {
  padding: 3.5em 0 2.5em;
}

.kk-def {
  padding: 1.6em 1.8em;
  background: var(--kk-flaeche);
  border-left: 3px solid var(--kk-gruen);
}

.kk-def p {
  margin: 0;
  color: var(--kk-text-weich);
}

.kk-def strong {
  color: var(--kk-aubergine-dunkel);
}


/* --- 6. Zeile 2: Auf einen Blick ---------------------------- */

.kk-fakten {
  padding: 2.6em 0;
  background: var(--kk-flaeche);
}

.kk-fakt-label {
  margin: 0 0 .5em;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kk-text-weich);
}

.kk-fakt-wert {
  margin: 0;
  line-height: 1.1;
  color: var(--kk-aubergine-dunkel);
}

.kk-fakt-zusatz {
  margin: .45em 0 0;
  color: var(--kk-text-weich);
}


/* --- 7. Zeile 3: Für wen ------------------------------------ */

.kk-fuerwen {
  padding: 3.5em 0;
}


/* --- 8. Zeilen 4 bis 9: die fünf Module --------------------- */

.kk-module-kopf {
  padding: 3.5em 0 1.5em;
}

.kk-modul {
  padding: 1.9em 0;
  border-top: 1px solid var(--kk-linie);
}

.kk-modul .panel-grid-cell img {
  display: block;
  width: 64px;
  height: auto;
  margin-bottom: 0;
}

.kk-modul .panel-grid-cell img {
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .kk-modul .panel-grid-cell img { width: 52px; }
}


.kk-modul-kicker {
  margin: 0 0 .35em;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kk-aubergine);
}

/* Die Modulnummer sitzt im Kicker und trägt die Modulfarbe.
   So ist das Farbsystem am Text verankert und nicht an einem
   Element, das für sich allein im Raum steht. */
.kk-modul-kicker span {
  margin-right: .5em;
  color: var(--kk-aubergine);
}

.kk-m1 .kk-modul-kicker span { color: var(--kk-m1); }
.kk-m2 .kk-modul-kicker span { color: var(--kk-m2); }
.kk-m3 .kk-modul-kicker span { color: var(--kk-m3); }
.kk-m4 .kk-modul-kicker span { color: var(--kk-m4); }
.kk-m5 .kk-modul-kicker span { color: var(--kk-m5); }

.kk-modul h3 {
  margin: 0 0 .5em;
}

.kk-modul p:last-child {
  margin-bottom: 0;
  color: var(--kk-text-weich);
}

/* Preis rechts. Das span sorgt dafür, dass "als PDF" unter dem
   Betrag steht und nicht direkt daran klebt. */
.kk-modul-preis {
  margin: 0;
  text-align: right;
  line-height: 1.2;
  color: var(--kk-aubergine-dunkel);
}

.kk-modul-preis span {
  display: block;
  margin-top: .5em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kk-text-weich);
}


/* --- 9. Zeilen 10 und 11: die drei Formate ------------------ */

.kk-formate-kopf {
  padding: 3.8em 0 1.5em;
  border-top: 1px solid var(--kk-linie);
}

.kk-formate {
  padding-bottom: 1em;
}

.kk-formate .panel-grid-cell {
  padding: 2em 1.9em;
  background: var(--kk-flaeche-warm);
  border: 1px solid var(--kk-linie);
}

.kk-formate h3 {
  margin: 0 0 .6em;
  color: var(--kk-aubergine-dunkel);
}

.kk-formate p {
  color: var(--kk-text-weich);
}

.kk-formate-preis {
  margin: 1.2em 0 0;
  padding-top: 1.1em;
  border-top: 1px solid var(--kk-linie);
  font-weight: 600;
  color: var(--kk-aubergine);
}


/* --- 10. Zeilen 12 bis 14: die Preise ----------------------- */

.kk-preise-kopf {
  padding: 3.8em 0 1.5em;
}

.kk-preise .panel-grid-cell {
  padding: 2.2em 1.9em;
  background: #fff;
  border: 1px solid var(--kk-linie);
}

/* Mittlere Spalte, hervorgehoben.
   SiteOrigin hängt eine Spaltenklasse nicht an die Zelle selbst,
   sondern an einen Kasten INNERHALB der Zelle. Färbt man diesen
   Kasten, sieht man zwei Rahmen ineinander. Deshalb wird hier
   die Zelle eingefärbt, die die Klasse enthält. */
.kk-preise .panel-grid-cell:has(.kk-preis-hervor) {
  background: var(--kk-flaeche);
  border-color: var(--kk-aubergine);
  box-shadow: 0 2px 18px rgba(75, 41, 115, .10);
}

.kk-preis-badge {
  display: inline-block;
  margin: 0 0 1em;
  padding: .35em 1em;
  border-radius: 2px;
  background: var(--kk-magenta);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.kk-preis-label {
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kk-text-weich);
}

.kk-preis-wert {
  margin: 0;
  line-height: 1.1;
  color: var(--kk-aubergine-dunkel);
}

.kk-preis-wert span {
  color: var(--kk-text-weich);
}

.kk-preis-zusatz {
  margin: .5em 0 1.6em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid var(--kk-linie);
  color: var(--kk-text-weich);
}

.kk-preise-fuss {
  padding: 1.6em 0 3.5em;
}

.kk-preise-fuss p {
  margin: 0;
  color: var(--kk-text-weich);
}


/* --- 11. Zeile 15: Über Gabriele ---------------------------- */

.kk-about {
  padding: 3.5em 0;
  background: var(--kk-flaeche);
}

.kk-about img {
  border-radius: 3px;
}

.kk-about .kk-lead {
  font-style: italic;
  color: var(--kk-aubergine-dunkel);
}

.kk-about h2 {
  margin: 0 0 .5em;
}


/* --- 12. Zeilen 16 und 17: FAQ ------------------------------ */

.kk-faq-kopf {
  padding: 3.8em 0 1.2em;
}

.kk-faq {
  padding-bottom: 3em;
}

/* Das Akkordeon-Widget bringt eigene Klassen mit. Die stylen wir
   in einem eigenen Durchgang, wenn wir sie im Quelltext der
   fertigen Seite geprüft haben — geraten wird hier nichts. */


/* --- 13. Zeilen 18 bis 20: Anmeldung ------------------------ */

.kk-anmeldung-kopf {
  padding: 3.5em 0 1.5em;
  border-top: 1px solid var(--kk-linie);
}

.kk-schritte {
  padding-bottom: 2.5em;
}

/* Aubergine statt Grün: Das Theme-Grün hat auf Weiß als Schrift
   zu wenig Kontrast. Als Fläche hinter schwarzer Schrift geht es,
   als Schrift auf Weiß nicht. */
.kk-schritt-num {
  margin: 0 0 .5em;
  line-height: 1;
  color: var(--kk-aubergine);
}

.kk-schritte h3 {
  margin: 0 0 .5em;
  color: var(--kk-aubergine-dunkel);
}

.kk-schritte p {
  color: var(--kk-text-weich);
}

.kk-formular {
  padding: 2.5em 0 3.5em;
}


/* --- 14. Zeile 21: Abschluss -------------------------------- */

.kk-abschluss {
  padding: 3.5em 0 4em;
  background: var(--kk-flaeche);
  text-align: center;
}

.kk-abschluss h2 {
  margin: 0 0 .5em;
}

.kk-abschluss .kk-lead {
  margin-left: auto;
  margin-right: auto;
}


/* --- 15. Kleine Bildschirme --------------------------------- */

@media (max-width: 780px) {

  .kk-hero,
  .kk-fuerwen,
  .kk-about,
  .kk-abschluss          { padding: 2.5em 0; }

  .kk-module-kopf,
  .kk-formate-kopf,
  .kk-preise-kopf,
  .kk-anmeldung-kopf     { padding-top: 2.5em; }

  /* Der Modulpreis rutscht unter den Text, deshalb wieder
     linksbündig — rechtsbündig sieht einspaltig falsch aus. */
  .kk-modul-preis        { text-align: left; margin-top: 1.2em; }

  .kk-def                { margin-top: 2em; }

  .kk-cta .kk-btn        { display: block; text-align: center; margin-right: 0; }
}


/* --- 16. Korrektur am Theme --------------------------------- */

/* Das Theme setzt in seiner eigenen style.css
   ".content-area li { font-size: 0.8em }". Der Customizer kommt
   dagegen nicht an — die Einstellung unter Typography → List
   Items bleibt wirkungslos, Listen stehen weiter auf 13,6 px.
   Deine alte Zeile hat genau das geflickt. Mein Rat, sie zu
   löschen, war falsch; hier steht sie wieder. */
.content-area li {
  font-size: 1em;
}


/* --- 17. Schriftgrößen ------------------------------------- */

/* Nur für Elemente, die es im Theme nicht gibt und für die der
   Customizer deshalb keinen Schalter hat. Überschriften,
   Fließtext und Listen bleiben unangetastet.
   Alle Werte in em, bezogen auf die 17 px aus dem Customizer. */

.kk-eyebrow        { font-size: .80em; }
.kk-sub            { font-size: 1.35em; }
.kk-script         { font-size: 1.15em; }
.kk-claim          { font-size: .85em; }

.kk-btn            { font-size: .90em; }

.kk-fakt-label     { font-size: .78em; }
.kk-fakt-wert      { font-size: 2.00em; }
.kk-fakt-zusatz    { font-size: .90em; }

.kk-modul-kicker   { font-size: .78em; }
.kk-modul-preis    { font-size: 1.35em; }
.kk-modul-preis span { font-size: .62em; }

.kk-formate-preis  { font-size: .92em; }

.kk-preis-label    { font-size: .80em; }
.kk-preis-badge    { font-size: .72em; }
.kk-preis-wert     { font-size: 2.40em; }
.kk-preis-wert span { font-size: .42em; }
.kk-preis-zusatz   { font-size: .90em; }
.kk-preise-fuss p  { font-size: .90em; }

.kk-schritt-num    { font-size: 2.40em; }

@media (max-width: 780px) {
  .kk-fakt-wert    { font-size: 1.60em; }
  .kk-preis-wert   { font-size: 2.00em; }
  .kk-schritt-num  { font-size: 2.00em; }
}