/*
Theme Name: Klar und Kraftvoll
Theme URI: https://www.agneswuellenweber.de
Author: Agnès Wüllenweber
Description: Theme für agneswuellenweber.de – Coaching für berufstätige Mütter mit Ambitionen. Farben und Schriften nach der Markenvorlage.
Version: 1.1.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: klar-und-kraftvoll
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
strong, b { font-weight: 700; }
.kk-hl { color: var(--wp--preset--color--framboise); font-weight: 700; }
.kk-hl-dark { color: var(--wp--preset--color--bordeaux); font-weight: 700; }

/* Überschrift „Schreibschrift + GROSSBUCHSTABEN“ */
.kk-script {
  font-family: var(--wp--preset--font-family--schrift);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wp--preset--color--pourpre);
  font-size: 1.35em;
  line-height: 0.8;
  margin-right: 0.08em;
  display: inline-block;
  transform: translateY(-0.12em);
}
.kk-title { text-align: center; margin-top: var(--wp--preset--spacing--50) !important; }
.kk-sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--large);
  text-align: center;
  margin-top: 0.3rem !important;
}

/* Nummern 01 / 02 / 03 */
.kk-num {
  font-family: var(--wp--preset--font-family--schrift);
  color: var(--wp--preset--color--rose);
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0 !important;
}

/* ---------- Formen ---------- */
.kk-shape { padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.8rem) !important; border-radius: 28px; }
.kk-shape-rose { background: var(--wp--preset--color--rose-pale); }
.kk-shape-sand { background: var(--wp--preset--color--sand); }
.kk-shape-flash { background: var(--wp--preset--color--vert-flash); }
.kk-slant-right { clip-path: polygon(0 0, 100% 6%, 92% 100%, 0 100%); }
.kk-slant-left { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 94%); }
.kk-tilt { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); border-radius: 0; }
@media (max-width: 781px) {
  .kk-slant-right, .kk-slant-left { clip-path: none; }
}

/* Bänder über die ganze Breite */
.kk-band-sand { background: var(--wp--preset--color--sand); }
.kk-band-rose { background: var(--wp--preset--color--rose-pale); }

/* Porträt mit Form dahinter */
.kk-photo { position: relative; max-width: 440px; margin-inline: auto; }
.kk-photo img { border-radius: 40px 40px 40px 120px; position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.kk-photo::before {
  content: ""; position: absolute; inset: 6% -6% -5% 8%;
  background: var(--wp--preset--color--sand); border-radius: 40px;
  transform: rotate(4deg); z-index: 0;
}
.kk-photo.is-flash::before { background: var(--wp--preset--color--vert-flash); transform: rotate(-4deg); inset: 8% 6% -5% -6%; }

/* ---------- Zitate ---------- */
.kk-quote {
  text-align: center; color: var(--wp--preset--color--pourpre);
  font-size: 1.2rem; max-width: 560px; margin-inline: auto;
  padding: 1.6rem 0 !important; position: relative;
}
.kk-quote::before, .kk-quote::after {
  content: "“"; display: block; color: var(--wp--preset--color--sand);
  font-family: var(--wp--preset--font-family--titel); font-size: 2.2rem; line-height: 0.6;
  background: linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand)) left 50% / 38% 1px no-repeat,
              linear-gradient(var(--wp--preset--color--sand), var(--wp--preset--color--sand)) right 50% / 38% 1px no-repeat;
}
.kk-quote::after { content: "”"; margin-top: 0.8rem; }
.kk-quote::before { margin-bottom: 0.8rem; }
.kk-quote p { margin: 0; }
.kk-quote cite, .kk-quote .kk-cite { display: block; font-size: 0.9rem; color: var(--wp--preset--color--bordeaux); margin-top: 0.4rem; font-style: normal; }

/* ---------- Listen ---------- */
.kk-list { list-style: none; padding-left: 0 !important; }
.kk-list li { position: relative; padding-left: 2.1rem; margin-bottom: 0.9rem; }
.kk-list li::before {
  content: "✺"; position: absolute; left: 0; top: -0.05em;
  color: var(--wp--preset--color--framboise); font-size: 1.35rem; line-height: 1;
  text-shadow: 0 0 0 var(--wp--preset--color--vert-flash);
}
.kk-list.is-check li::before { content: "✔"; color: var(--wp--preset--color--framboise); font-size: 1.1rem; top: 0.1em; }
.kk-list.is-heart li::before { content: "❯"; color: var(--wp--preset--color--pourpre); font-weight: 700; font-size: 1.1rem; top: 0.05em; }
.kk-dash { list-style: none; padding-left: 0 !important; }
.kk-dash li { padding-left: 1.3rem; position: relative; margin-bottom: 0.3rem; }
.kk-dash li::before { content: "—"; position: absolute; left: 0; color: var(--wp--preset--color--framboise); }

/* ---------- Karten ---------- */
.kk-card { background: var(--wp--preset--color--rose-pale); border: 2px solid var(--wp--preset--color--vert-flash); border-radius: 18px; padding: 1.3rem !important; height: 100%; }
.kk-card h3 { font-family: var(--wp--preset--font-family--schrift); color: var(--wp--preset--color--framboise); font-weight: 400; font-size: 2rem; }
.kk-card-sand { background: var(--wp--preset--color--sand); border: 0; }

/* Kundenstimmen */
.kk-voice { border-left: 3px solid var(--wp--preset--color--pourpre); padding-left: 1rem !important; }
.kk-voice .kk-voice-title { color: var(--wp--preset--color--bordeaux); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.2rem; }
.kk-stars { color: var(--wp--preset--color--pourpre); letter-spacing: 0.15em; font-size: 0.95rem; margin: 0 0 0.5rem !important; }
.kk-voice .kk-who { font-size: 0.9rem; color: #555; }

/* ---------- FAQ ---------- */
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--sand); padding: 0.9rem 0; }
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--bordeaux); cursor: pointer; font-size: 1.15rem; }
.wp-block-details[open] summary { margin-bottom: 0.6rem; }

/* ---------- Kopfzeile ---------- */
.kk-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .kk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .kk-header { top: 46px; } }
.kk-logo a { text-decoration: none; }
.kk-logo {
  font-family: var(--wp--preset--font-family--titel) !important;
  font-weight: 800; color: var(--wp--preset--color--bordeaux) !important;
  background: var(--wp--preset--color--rose-pale); border-radius: 10px;
  padding: 0.3rem 0.6rem !important; font-size: 1.6rem !important; letter-spacing: -0.05em; line-height: 1;
}
.kk-logo a { color: inherit; }
.kk-header .wp-block-navigation a { color: var(--wp--preset--color--bordeaux); }
.kk-header .wp-block-navigation a:hover { color: var(--wp--preset--color--framboise); }
.kk-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--sand); }

/* ---------- Fußzeile ---------- */
.kk-footer a { color: var(--wp--preset--color--bordeaux); }
.kk-footer .kk-sign { font-family: var(--wp--preset--font-family--schrift); color: var(--wp--preset--color--pourpre); font-size: 1.8rem; line-height: 1; margin: 0; }

/* ---------- Formular (Quiz) ---------- */
.kk-form { background: var(--wp--preset--color--rose-pale); border-radius: 22px; padding: 1.8rem !important; }
.kk-form label { display: block; font-weight: 700; color: var(--wp--preset--color--bordeaux); margin: 0.8rem 0 0.3rem; }
.kk-form input[type=email], .kk-form input[type=text], .kk-form select {
  width: 100%; padding: 0.7rem 0.9rem; border: 1px solid var(--wp--preset--color--sand); border-radius: 10px;
  font: inherit; background: #fff; box-sizing: border-box;
}
.kk-form .kk-small { font-size: 0.85rem; color: #555; }

/* Abstände auf dem Handy */
@media (max-width: 600px) {
  .kk-title { margin-top: 2.2rem !important; }
  .kk-num { font-size: 2.1rem; }
}

/* Hero: Schreibschrift in der Hauptüberschrift kleiner, eigene Zeile */
h1:not(.kk-title) .kk-script { font-size: 0.72em; display: block; line-height: 1.05; transform: none; margin-top: 0.15em; }
.kk-title .kk-script { font-size: 1.25em; }
/* Lesbare Zeilenlänge für einzelne Absätze */
.entry-content > p, .wp-block-post-content > p { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }

.kk-plain { font-family: var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--wp--preset--color--noir) !important; font-weight: 700; }
.kk-plain .kk-hl { color: var(--wp--preset--color--framboise); }
.kk-title { margin-bottom: 0 !important; }
.wp-block-buttons + .kk-title, .kk-quote + .kk-title { margin-top: var(--wp--preset--spacing--60) !important; }

/* Zweigeteilte Titel: zweiter Teil tiefer (wie im Canva-Design) */
.kk-split { line-height: 1; padding-bottom: 0.45em; }
.kk-split .kk-script { transform: none; }
.kk-split.kk-script-last .kk-script { position: relative; top: 0.42em; margin-left: 0.05em; }
.kk-split.kk-script-first .kk-script { position: relative; top: -0.3em; margin-right: 0.1em; }
.kk-split.kk-script-first { padding-top: 0.35em; padding-bottom: 0.1em; }