/* ==========================================================
   KP – kristina-peters.com · Custom CSS  (v20 · konsolidiert)
   Datei: child-theme/assets/kp-custom.css
   --------------------------------------------------------
   OVERRIDE-REGEL:
   Deine manuellen Elementor-Einstellungen (post-*.css / kit)
   laden NACH dieser Datei und GEWINNEN automatisch.
   !important steht bewusst NUR bei globalen Marken-Regeln:
   Montserrat, Button-Stil, Mobil-Menue-Struktur, Footer,
   und beim Karten-Grid (muss Elementor-Spaltenbreite ueberschreiben).
   --------------------------------------------------------
   CHANGELOG:
   v12 -> v13: Glas-Shimmer entschaerft (warm, halbe Deckkraft, langsamer).
   v13 -> v14: NEU .kp-cardgrid = wiederverwendbares Karten-Raster.
     - Gleichmaessiger, EINSTELLBARER Abstand (eine Zahl: --kp-gap).
     - Innenpolster fuer die Karten inklusive -> keine Zusatz-Spalten,
       kein Innen-Abschnitt-Gefrickel, responsiv (4 -> 2 -> 1).
     - Zusaetzlich .kp-glass-pad als frei nutzbares Innenabstand-Utility.
     Anwendung: Klasse "kp-cardgrid" auf den 4-spaltigen (inneren)
     Abschnitt; "kp-glass" bleibt auf den Spalten. Fertig.
   v14 -> v15: NEU .kp-glass-ink = fuellt die GANZE Karte mit leichtem Ink
     (als Glas-Fuellung, nicht ueber Elementor -> kein Padding-Rand mehr).
     Staerke ueber --kp-ink-fill justierbar. Elementor-"Hintergrund"
     der Spalte dafuer NICHT benutzen (landet im inneren Wrap).
   v15 -> v16: NEU Section-Schalter .kp-ink -> faerbt ALLE Karten des
     Rasters auf einmal ein. Klasse einfach neben "kp-cardgrid" auf den
     Abschnitt setzen ("kp-cardgrid kp-ink"). Kein Pro-Spalte-Klassen mehr.
   v16 -> v17: FIX Doppel-Ink. Elementor faerbt zusaetzlich den inneren
     Spalten-Wrap (innerhalb des Paddings) -> dunklerer Innenkasten.
     Innerer Wrap im Raster wird jetzt transparent erzwungen; die Karte
     hat genau EINE Fuellung. Robust, egal was in Elementor gesetzt ist.
   v17 -> v18: Feinschliff Karten-Raster: Ink-Saettigung leicht runter
     (.45 -> .38) und Schatten mintig/heller statt schwarz. Scope bleibt
     strikt .kp-cardgrid -> Homepage-Glas unveraendert (kein Drift).
   v18 -> v19: NEU .kp-legal = Formatierung der Rechtstexte (Impressum,
     Datenschutz, AGB, Widerruf, Disclaimer). Klasse auf den Text-Editor-
     Widget-Wrapper bzw. als umschliessendes <div class="kp-legal"> im
     HTML. Kein Eingriff in bestehende Komponenten (kein Drift).
   v19 -> v20: NEU Footer-Zeilen [kp_footer_copy]/[kp_footer_note]:
     .kp-footer-copy einen Tick heller; .kp-footer-note kleiner,
     zentriert, reduzierte Deckkraft, max. Lesebreite, ruhige
     Abstaende. Scope strikt auf die beiden Klassen (kein Drift).
   ========================================================== */
:root{
  --kp-mint:#9bf5e8; --kp-soft:#a7e0d8; --kp-ink:#0b1f1d; --kp-bg:#060d0c;
  --kp-txt:rgba(244,255,253,.98); --kp-txt-soft:rgba(226,255,250,.84);
  --kp-glass-bg:rgba(155,245,232,.12); --kp-glass-border:rgba(155,245,232,.38);
  --kp-ease:cubic-bezier(.22,.61,.36,1);
  --kp-gap:24px;      /* <-- Karten-Abstand global justierbar */
  --kp-pad:28px 26px; /* <-- Karten-Innenpolster */
  --kp-ink-fill:rgba(11,31,29,.38); /* <-- Ink-Fuellung der Karten (0.3-0.7) */
}

/* ---------- GLOBAL: Montserrat (Marke, ueberall) ---------- */
body,button,input,select,textarea,p,span,a,li,blockquote,small,strong,em,figcaption,
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif !important}
[class*="eicon"],i[class*="fa-"]{font-family:eicons,'Font Awesome 5 Free','Font Awesome 5 Brands' !important}

/* ---------- Header ---------- */
.kp-header{position:sticky;top:0;z-index:999;
  border-bottom:1px solid rgba(155,245,232,.14)}
.kp-logo{display:inline-flex;line-height:0}
.kp-logo-svg{width:44px;height:44px;transition:opacity .4s var(--kp-ease)}
.kp-logo:hover .kp-logo-svg{opacity:.8}
.elementor-location-header .elementor-nav-menu a.elementor-item{
  text-transform:uppercase;letter-spacing:2px;font-size:13px;
  padding:.55em .9em;border-radius:8px;transition:background .4s var(--kp-ease)}
.elementor-location-header .elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu a.elementor-item:focus{
  background:rgba(155,245,232,.14)}
.elementor-location-header .elementor-nav-menu a.elementor-item.elementor-item-active{color:var(--kp-mint)}
.kp-header .elementor-nav-menu--main .elementor-nav-menu{justify-content:flex-end}

/* Sprachumschalter */
.kp-lang{display:flex;align-items:center;gap:.4em;
  font:500 14px/1 "Montserrat",sans-serif;letter-spacing:2px;
  text-transform:uppercase;justify-content:flex-end;
  padding-left:1.3em;border-left:1px solid rgba(155,245,232,.22)}
.kp-lang a{color:rgba(226,255,250,.55);text-decoration:none;padding:.55em .35em;
  transition:color .35s var(--kp-ease)}
.kp-lang a:hover{color:rgba(226,255,250,.9)}
.kp-lang a.is-active{color:var(--kp-mint)}
.kp-lang span{color:rgba(155,245,232,.3);margin:0 .1em}

/* ---------- Glas-Karten (sanfter Warm-Shimmer) ---------- */
.kp-glass{position:relative;overflow:hidden;
  background:var(--kp-glass-bg);border:1px solid var(--kp-glass-border);
  border-radius:20px;backdrop-filter:blur(3px);
  box-shadow:0 16px 40px rgba(0,0,0,.18),0 2px 10px rgba(0,0,0,.10)}
.kp-glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,
    rgba(239,233,221,.045) 45%,rgba(239,233,221,.085) 50%,
    rgba(239,233,221,.045) 55%,transparent 70%);
  background-size:260% 100%;background-position:130% 0;opacity:0;
  transition:opacity .8s var(--kp-ease)}
.kp-glass:hover::after{opacity:1;animation:kp-water 4s var(--kp-ease) forwards}
@keyframes kp-water{from{background-position:130% 0}to{background-position:-40% 0}}

/* Frei nutzbares Innenabstand-Utility (fuer solche Hintergruende) */
.kp-glass-pad{padding:var(--kp-pad)}

/* Ink-Fuellung: liegt auf .kp-glass selbst -> fuellt die GANZE Karte.
   Variante A (pro Spalte): "kp-glass-ink" neben "kp-glass".
   Variante B (empfohlen, 1 Stelle): "kp-ink" neben "kp-cardgrid"
   auf den Abschnitt -> alle Karten auf einmal. NICHT Elementor-Hintergrund. */
.kp-glass-ink{background:var(--kp-ink-fill)}
.kp-cardgrid.kp-ink .kp-glass{background:var(--kp-ink-fill)}

/* ---------- Karten-Raster (wiederverwendbar, responsiv) ----------
   Klasse "kp-cardgrid" auf den mehrspaltigen (inneren) Abschnitt.
   Ersetzt Elementors Spaltenfluss durch ein Grid mit echtem Gap,
   damit der Abstand sichtbar UND ueber --kp-gap einstellbar ist.
   "kp-glass" bleibt auf den Spalten; Innenpolster kommt automatisch. */
.kp-cardgrid > .elementor-container > .elementor-row{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--kp-gap)}
.kp-cardgrid > .elementor-container > .elementor-row > .elementor-column{
  width:auto !important;margin:0 !important}
.kp-cardgrid .kp-glass{padding:var(--kp-pad);
  box-shadow:0 16px 40px rgba(155,245,232,.10),0 2px 12px rgba(155,245,232,.07)}
.kp-cardgrid .kp-glass > .elementor-widget-wrap,
.kp-cardgrid .kp-glass .elementor-column-wrap{padding:0}
/* nur EINE Fuellung: innerer Wrap transparent (verhindert Doppel-Ink) */
.kp-cardgrid .kp-glass > .elementor-element-populated,
.kp-cardgrid .kp-glass > .elementor-widget-wrap{background:transparent !important}
@media(max-width:1024px){
  .kp-cardgrid > .elementor-container > .elementor-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .kp-cardgrid > .elementor-container > .elementor-row{grid-template-columns:1fr}
}

/* ---------- Buttons (Marke) ---------- */
.elementor-button{text-transform:uppercase !important;font-weight:500 !important;letter-spacing:1.5px !important}
.kp-btn .elementor-button{
  background:linear-gradient(180deg,#b9f7ee,#9bf0e2) !important;color:var(--kp-ink) !important;
  border:1px solid rgba(155,245,232,.8);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px rgba(0,0,0,.14);
  transition:background .45s var(--kp-ease),box-shadow .45s var(--kp-ease),transform .45s var(--kp-ease)}
.kp-btn .elementor-button:hover{
  background:linear-gradient(180deg,rgba(196,240,233,.9),rgba(172,228,220,.88)) !important;
  transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 24px rgba(0,0,0,.16)}
.kp-btn-ghost .elementor-button{background:rgba(155,245,232,.08);color:var(--kp-txt);
  border:1px solid rgba(155,245,232,.24);border-radius:999px;
  transition:background .45s var(--kp-ease),border-color .45s var(--kp-ease)}
.kp-btn-ghost .elementor-button:hover{background:rgba(155,245,232,.16);border-color:rgba(155,245,232,.5)}

/* ---------- Hero ---------- */
.kp-hero-sub p{font-size:19px;font-weight:300;max-width:640px;margin-inline:auto}
.kp-trust-hint,.kp-trust-hint *{font-family:'Montserrat',sans-serif !important}
.kp-trust-hint{text-align:center;font-size:13.5px;font-weight:400;line-height:1.6;
  color:var(--kp-mint);letter-spacing:.5px;margin-top:6px}

/* ---------- Social Proof ---------- */
.kp-stats{display:flex;justify-content:center;gap:56px;margin:34px 0 8px;flex-wrap:wrap}
.kp-stats div{text-align:center}
.kp-stats strong{display:block;font:600 34px/1.1 "Montserrat",sans-serif;color:var(--kp-mint)}
.kp-stats span{font:400 12.5px/1 "Montserrat",sans-serif;letter-spacing:2px;
  text-transform:uppercase;color:var(--kp-txt-soft)}
.kp-stats-src{text-align:center;font-size:12px;color:rgba(226,255,250,.5);margin-bottom:40px}
.kp-tst p{font-size:16px;line-height:1.7;font-style:italic}
.kp-tst-src{font-size:12.5px;font-style:normal;letter-spacing:1px;
  text-transform:uppercase;color:var(--kp-mint);margin-top:14px}

/* ---------- CTA Wald ---------- */
.kp-cta-forest .elementor-heading-title{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.kp-cta-forest p{text-shadow:0 1px 12px rgba(0,0,0,.4)}

/* ---------- Papierweiss-Sektionen (Klasse "kp-paper") ---------- */
.kp-paper{background:#efe9dd !important;color:#2b322f}
.kp-paper h1,.kp-paper h2,.kp-paper h3,.kp-paper .elementor-heading-title{color:#233530}
.kp-paper p,.kp-paper li{color:#3a423e}
.kp-paper .kp-glass{background:#f6f2e9;border:1px solid #ddd5c4;backdrop-filter:none;
  box-shadow:0 12px 32px rgba(43,50,47,.08),0 2px 8px rgba(43,50,47,.05)}
.kp-paper .kp-glass::after{background:linear-gradient(100deg,transparent 30%,rgba(255,253,247,.22) 45%,
  rgba(255,253,247,.32) 50%,rgba(255,253,247,.22) 55%,transparent 70%);background-size:260% 100%}
.kp-paper .kp-btn-ghost .elementor-button{background:rgba(31,71,64,.06);color:#233530;border-color:rgba(31,71,64,.28)}
.kp-paper .kp-btn-ghost .elementor-button:hover{background:rgba(31,71,64,.12);border-color:rgba(31,71,64,.5)}
.kp-paper .kp-tst-src{color:#1f4740}
.kp-paper .kp-stats strong{color:#1f4740}
.kp-paper .kp-stats span,.kp-paper .kp-stats-src{color:#5a635e}

/* ---------- Footer ---------- */
.kp-footer{border-top:1px solid rgba(155,245,232,.14)}
.kp-footer-logo{width:36px;margin:0 auto 18px;opacity:.85}
.kp-footer .elementor-menu-toggle{display:none !important}
.kp-footer nav.elementor-nav-menu--dropdown{display:none !important}
.kp-footer nav.elementor-nav-menu--main{display:block !important}
.kp-footer .elementor-nav-menu--main .elementor-nav-menu{display:flex;flex-wrap:wrap;justify-content:center}
.kp-footer .elementor-nav-menu a.elementor-item{
  text-transform:uppercase;letter-spacing:2px;font-size:11px;padding:.4em .7em;background:transparent}
.kp-footer .elementor-nav-menu a.elementor-item:hover{color:var(--kp-mint)}
.kp-footer-copy{text-align:center;font-size:12px;color:rgba(226,255,250,.45);margin-top:20px}

/* ---------- Scroll-Reveal (via .kp-reveal) ---------- */
.kp-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--kp-ease),transform .6s var(--kp-ease)}
.kp-reveal.is-visible{opacity:1;transform:none}

/* ========================= RESPONSIV ========================= */
@media (max-width:1024px){
  /* Header-Layout + Mobil-Menue: KEINE Overrides -> Elementor steuert nativ */
  .kp-lang{border-left:0;padding-left:0;font-size:13px;letter-spacing:1.5px}
}
@media (max-width:767px){
  .kp-cards{flex-direction:column !important}
  .kp-stats{gap:32px}
  .kp-logo-svg{width:38px;height:38px}
  .kp-footer .elementor-nav-menu a.elementor-item{font-size:10px;padding:.35em .55em}
  .kp-lang{gap:.25em}
  .kp-lang a{padding:.2em .05em}
  .kp-lang span{font-size:10px;margin:0 .05em}
}
@media (prefers-reduced-motion:reduce){
  .kp-reveal{opacity:1;transform:none;transition:none}
  .kp-glass:hover::after{animation:none;opacity:0}
  .kp-glass,.kp-btn .elementor-button{transition:none}
}

/* ---------- Rechtstexte (.kp-legal) ---------- */
.kp-legal{max-width:760px;margin:0 auto;color:var(--kp-txt-soft);
  font-size:15px;line-height:1.75;text-align:left}
.kp-legal h2{font-size:19px;font-weight:600;letter-spacing:.5px;
  color:var(--kp-txt);margin:2.2em 0 .7em;padding-bottom:.35em;
  border-bottom:1px solid rgba(155,245,232,.18)}
.kp-legal h2:first-child{margin-top:0}
.kp-legal h3{font-size:16px;font-weight:600;color:var(--kp-txt);margin:1.6em 0 .5em}
.kp-legal p{margin:0 0 1em}
.kp-legal ul{margin:0 0 1em 1.2em;padding:0}
.kp-legal li{margin:.35em 0}
.kp-legal a{color:var(--kp-mint);text-decoration:none;
  border-bottom:1px solid rgba(155,245,232,.35);transition:border-color .35s var(--kp-ease)}
.kp-legal a:hover{border-bottom-color:var(--kp-mint)}
.kp-legal strong{color:var(--kp-txt);font-weight:600}
.kp-legal .kp-legal-note{background:var(--kp-glass-bg);
  border:1px solid var(--kp-glass-border);border-radius:14px;
  padding:16px 20px;margin:0 0 1.8em}
.kp-legal blockquote{background:var(--kp-glass-bg);
  border:1px solid var(--kp-glass-border);border-radius:14px;
  padding:18px 22px;margin:1.2em 0;font-style:normal}
.kp-legal .kp-legal-meta{font-size:13px;color:rgba(226,255,250,.5);margin-top:2.4em}
@media(max-width:767px){
  .kp-legal{font-size:14.5px}
  .kp-legal h2{font-size:17px}}

/* ---------- Footer-Zeilen ([kp_footer_copy] / [kp_footer_note]) ---------- */
.kp-footer-copy{
  margin:26px 0 6px;text-align:center;
  font-size:13.5px;letter-spacing:.4px;
  color:rgba(226,255,250,.72)}
.kp-footer-note{
  max-width:640px;margin:0 auto;padding:0 16px;
  text-align:center;
  font-size:12px;line-height:1.7;letter-spacing:.3px;
  color:rgba(226,255,250,.45)}
@media(max-width:767px){
  .kp-footer-copy{margin-top:20px;font-size:12.5px}
  .kp-footer-note{font-size:11px;max-width:92%}}