/* MATIS LABS — Kontakt-Modal („Shield Ledger, hell" / Variante 2b)
   ==========================================================================
   Ein 3-Schritt-Wizard als Hover-Overlay: Klick auf einen Kontakt-Link
   oeffnet das Formular, der Rest der Seite tritt verschwommen in den
   Hintergrund. Das Schild fuellt sich mit jeder Angabe; ist es voll, wird
   der Sendeknopf gruen.

  _palette: angepasst an die Site-Tokens (Navy + Gold, --color-gold-text
   #8a6d33 als Text-Gold auf hellem Grund, 4.6:1). Das Mockup verwendete
   #a67c00/#7a5c00 — dasselbe Gold, hier an die bestehenden Variablen
   gebunden, damit die Seite eine Stimme behaelt.
   ========================================================================== */

/* === Keyframes (alle km- praefixiert, kein Clash mit animations.css) ====== */
@keyframes kmRise  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kmSpin  { to { transform: rotate(360deg); } }
@keyframes kmPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kmDraw  { to { stroke-dashoffset: 0; } }
@keyframes kmShimmer { 0% { background-position: -220% 0; } 100% { background-position: 220% 0; } }
@keyframes kmWave  { from { transform: translateX(0); }    to { transform: translateX(-40px); } }
@keyframes kmWaveB { from { transform: translateX(0); }    to { transform: translateX(40px); } }
@keyframes kmFlare { 0% { transform: translateX(-60%) skewX(-18deg); opacity: 0; } 12% { opacity: .5; } 30% { opacity: .5; } 45% { transform: translateX(160%) skewX(-18deg); opacity: 0; } 100% { transform: translateX(160%) skewX(-18deg); opacity: 0; } }
@keyframes kmRing  { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes kmSweep { 0% { transform: translateY(-120%); } 100% { transform: translateY(720%); } }
@keyframes kmErscheint { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .km-huelle.km-offen .km-karte { animation: none; }
    .km-welle-a, .km-welle-b, .km-flare, .km-ring-puls,
    .km-sendet-sweep, .km-sendeknopf { animation: none !important; }
}

/* === Hintergrund: Seite verschwimmt, wenn das Modal offen ist ============= */
body.km-offen { overflow: hidden; }
body.km-offen > *:not(.km-huelle) {
    filter: blur(7px);
    transition: filter .3s ease;
}
/* Der fixierte Header ist ein direktes Kind von body und wird mitgeblurred. */
.km-huelle {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.km-huelle[hidden] { display: none; }
/* Durchsetzt das hidden-Attribut fuer alle Kindelemente: etliche KM-Boxen
   stehen per display:flex — das schlaegt sonst das UA-[hidden]{display:none}
   (gleiche Spezifitaet, Autor gewinnt) und Elemente bleiben sichtbar, die
   versteckt sein sollten (Versand-Overlay, Schild-Prozent, -Haken). */
.km-huelle [hidden] { display: none !important; }

.km-dimmung {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 0%, rgba(5,6,15,.32), rgba(5,6,15,.58));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: kmErscheint .28s ease-out both;
}

/* === Karte (560 px, Papierweiß, gedämpftes Gold) ========================= */
.km-karte {
    position: relative;
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 3rem);
    background: #ffffff;
    border: 1px solid rgba(5,6,15,.1);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px -34px rgba(5,6,15,.45), 0 8px 30px -12px rgba(5,6,15,.25);
    display: flex;
    flex-direction: column;
    animation: kmErscheint .32s cubic-bezier(.2,.7,.3,1) both;
}

/* === Schließen-Knopf ===================================================== */
.km-schliessen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,.8);
    color: var(--text-secondary);
    font-size: .95rem;
    cursor: pointer;
    transition: all .2s ease;
}
.km-schliessen:hover { border-color: var(--color-gold-text); color: var(--color-gold-text); background: #fff; }

/* === Kopf: Marke, Titel, Schild, Stepper ================================= */
.km-kopf {
    position: relative;
    padding: 20px 26px 18px;
    background: radial-gradient(130% 150% at 100% -30%, rgba(196,162,97,.15), transparent 60%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: none;
}
.km-marke {
    display: flex;
    align-items: center;
    gap: 9px;
}
.km-marke img { width: 20px; height: 20px; object-fit: contain; }
.km-marke span {
    font: 600 11px/1 var(--font-heading);
    letter-spacing: .18em;
    color: var(--text-primary);
}
.km-titel-zeile { display: flex; align-items: center; gap: 18px; }
.km-titel-text { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.km-titel-text h2 {
    font: 600 19px/1.2 var(--font-heading);
    letter-spacing: -.02em;
    color: var(--text-primary);
    margin: 0;
}
.km-untertitel {
    font: 400 12px/1.55 var(--font-body);
    color: var(--text-secondary);
    margin: 0;
}

/* Schild (Fortschritts-Anzeige) */
.km-schild {
    position: relative;
    flex: none;
    width: 78px;
    height: 90px;
    transition: filter .6s ease;
}
.km-schild.km-voll { filter: drop-shadow(0 0 10px rgba(196,162,97,.75)); }
.km-schild svg { position: absolute; inset: 0; }
.km-schild-fuell { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.km-welle-a { animation: kmWaveB 5.5s linear infinite; }
.km-welle-b { animation: kmWave 3.4s linear infinite; }
.km-schild.km-voll .km-welle-a,
.km-schild.km-voll .km-welle-b { animation: none; }
.km-schild-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 21px/1 var(--font-mono);
    letter-spacing: -.02em;
    color: var(--text-secondary);
    transition: color .5s ease;
}
.km-schild-pct.km-auf-gold { color: #1b1608; text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.km-schild-haken { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.km-schild-haken .km-ring-puls {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.85);
    animation: kmRing 1.9s ease-out infinite;
}

/* Stepper */
.km-stepper { display: flex; align-items: center; gap: 0; padding-top: 2px; }
.km-step { display: flex; align-items: center; gap: 9px; flex: 1; }
.km-step:last-child { flex: none; }
.km-step-kreis {
    flex: none;
    width: 24px; height: 24px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font: 700 11px/1 var(--font-mono);
    color: var(--text-muted);
    background: transparent;
    transition: all .4s cubic-bezier(.2,.7,.3,1);
}
.km-step-aktiv .km-step-kreis { border-color: var(--color-gold); background: var(--color-gold); color: #1a1301; box-shadow: 0 0 0 4px rgba(196,162,97,.16); }
.km-step-fertig .km-step-kreis { border-color: var(--color-success); background: var(--color-success); color: #fff; }
.km-step-label {
    font: 500 11.5px/1.2 var(--font-body);
    white-space: nowrap;
    color: var(--text-muted);
    transition: color .35s ease;
}
.km-step-aktiv .km-step-label { color: var(--text-primary); font-weight: 600; }
.km-step-fertig .km-step-label { color: var(--text-secondary); }
.km-step-balken {
    flex: 1;
    min-width: 12px;
    margin-right: 9px;
    height: 2px;
    border-radius: 99px;
    background: var(--color-border);
    transition: background .45s ease;
}
.km-step-fertig .km-step-balken { background: var(--color-success); }

/* === Body: Formular-Schritte ============================================= */
.km-body {
    padding: 4px 26px 24px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
}
.km-body::-webkit-scrollbar { width: 5px; }
.km-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; }

.km-schritt { display: none; flex-direction: column; gap: 14px; padding-top: 12px; }
.km-schritt.km-aktiv { display: flex; animation: kmRise .45s cubic-bezier(.2,.7,.3,1) both; }

/* Themen-Chips (Pillen) */
.km-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.km-status-chips { margin: -2px 0 0; min-height: 14px; }
.km-chip {
    cursor: pointer;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--text-secondary);
    font: 500 11.5px/1 var(--font-body);
    transition: all .3s cubic-bezier(.2,.7,.3,1);
}
.km-chip:hover { transform: translateY(-2px); border-color: var(--color-gold-text); color: var(--color-gold-text); }
.km-chip.km-gewaehlt {
    background: rgba(196,162,97,.12);
    border-color: var(--color-gold);
    color: var(--color-gold-text);
}

/* Anliegen-Textarea mit Zaehler */
.km-nachricht-wrap {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: border-color .3s ease;
}
.km-nachricht-wrap.km-fehler { border-color: var(--color-danger); }
.km-nachricht-wrap.km-ok { border-color: var(--color-success); }
.km-nachricht {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 14px 15px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font: 400 13px/1.6 var(--font-body);
    min-height: 7rem;
}
.km-nachricht:focus { outline: none; }
.km-zaehler {
    position: absolute;
    right: 12px;
    bottom: 9px;
    font: 400 10px/1 var(--font-mono);
    color: var(--text-muted);
}

/* Eingabefelder */
.km-feld { display: flex; flex-direction: column; gap: 6px; }
.km-feld > span { /* kein sichtbares Label hier: Placeholder uebernimmt */ }
.km-eingabe {
    padding: 14px 15px;
    border-radius: 10px;
    background: #fdfcfa;
    color: var(--text-primary);
    font: 400 13.5px/1.2 var(--font-body);
    border: 1px solid var(--color-border);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
    width: 100%;
    box-sizing: border-box;
}
.km-eingabe::placeholder { color: var(--text-muted); }
.km-eingabe:focus {
    outline: none;
    border-color: var(--color-gold);
    background: rgba(196,162,97,.06);
}
.km-eingabe.km-fehler { border-color: var(--color-danger); }
.km-eingabe.km-ok { border-color: var(--color-success); }

.km-status {
    font: 400 10.5px/1.3 var(--font-body);
    min-height: 14px;
    color: var(--text-muted);
}
.km-status.km-fehler-text { color: var(--color-danger); }
.km-status.km-ok-text { color: var(--color-success); }

/* Auswahl-Reihen (Groesse / Zeitrahmen) */
.km-auswahl-gruppe { display: flex; flex-direction: column; gap: 9px; }
.km-auswahl-gruppe > .km-auswahl-label {
    font: 500 10.5px/1 var(--font-body);
    color: var(--text-secondary);
}
.km-auswahl-reihe { display: flex; gap: 6px; }
.km-auswahl {
    flex: 1;
    cursor: pointer;
    padding: 11px 4px;
    border-radius: 9px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--text-secondary);
    font: 500 11px/1 var(--font-body);
    transition: all .3s cubic-bezier(.2,.7,.3,1);
}
.km-auswahl:hover { transform: translateY(-2px); border-color: var(--color-gold-text); }
.km-auswahl.km-gewaehlt {
    background: rgba(196,162,97,.12);
    border-color: var(--color-gold);
    color: var(--color-gold-text);
}

/* Verifikation (Mathe-Prüfung) */
.km-verify {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: #fdfcfa;
    transition: all .4s ease;
}
.km-verify.km-ok { border-color: rgba(47,158,99,.42); background: rgba(47,158,99,.06); }
.km-verify.km-fehler { border-color: var(--color-danger); }
.km-verify-icon {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px/1 var(--font-body);
    background: rgba(196,162,97,.12);
    color: var(--color-gold-text);
    transition: all .4s ease;
}
.km-verify.km-ok .km-verify-icon { background: rgba(47,158,99,.14); color: var(--color-success); }
.km-verify-text { flex: 1; font: 500 11.5px/1.35 var(--font-body); color: #3c4252; }
.km-verify-eingabe {
    width: 56px;
    text-align: center;
    padding: 9px 6px;
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    font: 600 13px/1 var(--font-mono);
    border: 1px solid var(--color-border);
    transition: all .3s ease;
}
.km-verify-eingabe:focus { outline: none; border-color: var(--color-gold); }

/* Einwilligung */
.km-einwilligung {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}
.km-einwilligung input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--color-gold); cursor: pointer; }
.km-einwilligung span {
    font: 400 11px/1.5 var(--font-body);
    color: var(--text-secondary);
}
.km-einwilligung a {
    color: var(--color-gold-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(138,109,51,.4);
}
.km-honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}

/* === Done-View (Ledger) =================================================== */
.km-fertig { display: none; flex-direction: column; gap: 14px; padding: 18px 0 6px; animation: kmRise .5s cubic-bezier(.2,.7,.3,1) both; }
.km-fertig.km-aktiv { display: flex; }
.km-fertig-titel {
    font: 600 15px/1.3 var(--font-heading);
    color: var(--text-primary);
    text-align: center;
}
.km-ledger {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(5,6,15,.1);
    border-radius: 10px;
    overflow: hidden;
}
.km-ledger-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(5,6,15,.06);
}
.km-ledger-zeile:last-child { border-bottom: none; }
.km-ledger-zeile .km-hk { font: 600 11px/1 var(--font-mono); color: var(--color-success); }
.km-ledger-zeile .km-lbl { flex: 1; font: 400 11.5px/1.3 var(--font-body); color: #3c4252; }
.km-ledger-zeile .km-meta { font: 400 10px/1 var(--font-mono); color: var(--text-muted); }
.km-reset {
    align-self: center;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--text-secondary);
    font: 500 11.5px/1 var(--font-body);
    transition: all .25s ease;
}
.km-reset:hover { border-color: var(--color-gold-text); color: var(--color-gold-text); }

/* === Navigation (Zurück / Senden) ======================================= */
.km-navi { display: flex; flex-direction: column; gap: 11px; padding-top: 18px; margin-top: auto; }
.km-navi.km-versteckt { display: none; }
.km-sendeknopf {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #8a6a1c;
    border-top-color: #e8cd8e;
    background: linear-gradient(180deg, #efd68c 0%, #d9b453 40%, #c79c33 54%, #d3a93f 100%);
    color: #1a1301;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
    font: 700 14px/1 var(--font-body);
    letter-spacing: .01em;
    transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, filter .22s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 1px rgba(5,6,15,.14), 0 8px 18px -8px rgba(122,92,0,.55);
}
.km-sendeknopf::before {
    content: '';
    position: absolute;
    top: -40%; bottom: -40%; left: 0;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    filter: blur(6px);
    animation: kmFlare 7s ease-in-out infinite;
    pointer-events: none;
}
.km-sendeknopf:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 2px rgba(5,6,15,.14), 0 12px 24px -8px rgba(122,92,0,.6); }
.km-sendeknopf:active { transform: translateY(1px); filter: brightness(.97); }
.km-sendeknopf:disabled { opacity: .65; cursor: progress; }
/* Schild voll + Schritt 3 → grüner Sende-Knopf */
.km-sendeknopf.km-bereit {
    border-color: #186238;
    border-top-color: #8fdcae;
    background: linear-gradient(180deg, #4fbb7d 0%, #2f9c5e 40%, #22834c 54%, #2b9257 100%);
    color: #f2fbf5;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 1px rgba(5,6,15,.14), 0 8px 18px -8px rgba(21,128,61,.6);
}

.km-navi-unten { display: flex; align-items: center; gap: 12px; }
.km-zurueck {
    cursor: pointer;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: 500 11.5px/1 var(--font-body);
    transition: color .25s ease;
    opacity: .35;
}
.km-zurueck.km-sichtbar { opacity: 1; }
.km-zurueck:hover { color: var(--text-primary); }
.km-rate {
    margin-left: auto;
    font: 400 10px/1.3 var(--font-mono);
    color: var(--color-success);
}
.km-rate.km-warn { color: var(--color-danger); }

/* === Trust-Bar am Fuß der Karte ========================================== */
.km-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 26px;
    border-top: 1px solid rgba(5,6,15,.08);
    background: #fbfaf7;
    flex: none;
}
.km-trust-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid rgba(5,6,15,.1);
    border-radius: 999px;
    font: 400 10px/1.3 var(--font-body);
    color: var(--text-secondary);
}

/* === Versand-Overlay ==================================================== */
.km-sendet {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 5;
    overflow: hidden;
}
.km-sendet-sweep {
    position: absolute;
    left: 0; right: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent, rgba(196,162,97,.16), transparent);
    animation: kmSweep 1.7s linear infinite;
}
.km-schild-anim { position: relative; width: 80px; height: 92px; }
.km-schild-anim svg { position: absolute; inset: 0; }
.km-sendet-stufe {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .14em;
    color: var(--text-primary);
}
.km-sendet-cipher {
    width: 300px;
    max-width: 70%;
    font: 400 10.5px/1.6 var(--font-mono);
    color: var(--text-muted);
    word-break: break-all;
    text-align: center;
    min-height: 34px;
}
.km-sendet-balken {
    width: 200px;
    height: 3px;
    border-radius: 99px;
    background: rgba(5,6,15,.08);
    overflow: hidden;
}
.km-sendet-balken > div {
    height: 100%;
    background: linear-gradient(90deg, #d9b453, #8a6d33);
    transition: width .12s linear;
    width: 0%;
}

/* === Mobile ============================================================== */
@media (max-width: 600px) {
    .km-huelle { padding: 0; align-items: flex-end; }
    .km-karte { border-radius: 14px 14px 0 0; max-height: 100vh; width: 100%; }
    .km-kopf { padding: 18px 18px 14px; }
    .km-titel-text h2 { font-size: 17px; }
    .km-schild { width: 64px; height: 74px; }
    .km-body { padding: 4px 18px 20px; }
    .km-trust { padding: 12px 18px; }
    .km-step-label { font-size: 10.5px; }
}