/* ═══ Tiefe — 3D-Wirkung fuer alles mit Rahmen (2026-10-01, 2. Fassung) ════
 *
 * Jedes umrandete Element ist eine kleine Platte mit sichtbarer Dicke:
 * gestapelte 1-px-Kanten nach unten (jede etwas dunkler = Seitenflaeche),
 * Licht an der Oberkante, weicher Schatten auf dem Grund.
 *
 * BEWEGUNG: keine Neigung, kein Anheben beim Zeigen (auf Wunsch entfernt,
 * tiefe.js geloescht). Nur der Druck: beim Klicken sinkt die Platte um ihre
 * Dicke ein und die Kante verschwindet — wie ein echter Knopf. Nur bei
 * anklickbaren Dingen. Bei «Bewegung reduzieren» auch das nicht; die Tiefe
 * selbst bleibt.
 * ════════════════════════════════════════════════════════════════════════ */
:root{
  /* helle Platten */
  --t-licht:inset 0 1px 0 rgba(255,255,255,1);
  --t-rand:0 0 0 1px rgba(8,26,43,.07);
  --t-flaeche:linear-gradient(180deg,#ffffff 0%,#fafbfc 50%,#eef0f3 100%);
  --t-dick5:0 1px 0 #e9ecf0,0 2px 0 #e1e4e9,0 3px 0 #d9dde3,0 4px 0 #d1d6dd,0 5px 0 #c8cdd5,0 6px 3px rgba(8,26,43,.18),0 12px 22px -8px rgba(8,26,43,.30),0 34px 64px -24px rgba(8,26,43,.48);
  --t-dick3:0 1px 0 #e3e6eb,0 2px 0 #d8dce2,0 3px 0 #ccd1d8,0 4px 3px rgba(8,26,43,.16),0 10px 18px -8px rgba(8,26,43,.28);
  --t-dick2:0 1px 0 #dfe3e8,0 2px 0 #cfd4db,0 3px 2px rgba(8,26,43,.14),0 6px 10px -6px rgba(8,26,43,.28);
  --t-gedrueckt:0 1px 0 #d1d6dd,0 2px 4px rgba(8,26,43,.16);
  /* dunkle Platten */
  --t-dunkel-licht:inset 0 1px 0 rgba(255,255,255,.12);
  --t-dunkel5:0 1px 0 #15171b,0 2px 0 #121417,0 3px 0 #0f1114,0 4px 0 #0c0e10,0 5px 0 #090a0c,0 8px 6px rgba(0,0,0,.35),0 30px 60px -22px rgba(0,0,0,.6);
  --t-dunkel3:0 1px 0 #14161a,0 2px 0 #101215,0 3px 0 #0b0c0e,0 6px 10px -4px rgba(0,0,0,.5);
  --t-navy3:0 1px 0 #050d17,0 2px 0 #040a12,0 3px 0 #02060b,0 6px 12px -4px rgba(5,13,23,.55);
}

/* ── Grosse helle Platten (Karten, Kaesten) ─────────────────────────────── */
body .service-card,
body .os-fn,
body .wachstum-pont,
body .price-card:not(.popular),
body .platform-plan-grid>article,
body .wissen-karte,
body .company-person,
body .kb-karte-platz,
body .ref-punkte>article,
body .ck-hinweis{
  position:relative;
  background:var(--t-flaeche);
  border-color:transparent;
  box-shadow:var(--t-licht),var(--t-rand),var(--t-dick5);
}

/* 3. Fassung (2026-10-01): kleine Elemente (Knoepfe, Reiter, Pillen,
   Etiketten) und mittlere Kaesten wieder FLACH — als alles erhaben war, stach
   nichts mehr heraus. 3D-Dicke nur fuer die Karten oben und die Symbol-
   Kacheln unten. Der Druck-Effekt bleibt fuer Karten und Knoepfe. */
body .kb-person img{box-shadow:0 0 0 2px #fff,0 8px 18px -6px rgba(8,26,43,.35)}
/* Die drei Schritte im Kontakt-Block: Karten wie in der 1. Fassung. */
body .kb-ablauf li{background:var(--t-flaeche);border-color:transparent;box-shadow:var(--t-licht),var(--t-rand),var(--t-dick3)}

/* ── Dunkle Platten ─────────────────────────────────────────────────────── */
body .price-card.popular,
body .ep-modell,
body .ep-feld{
  position:relative;
  box-shadow:var(--t-dunkel-licht),var(--t-dunkel5);
}

/* ── Symbole als gepraegte Kacheln ──────────────────────────────────────── */
body .service-cat-sym,
body .result-icon{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(150deg,#ffffff 0%,#f1f3f6 60%,#e4e8ee 100%);
  box-shadow:var(--t-licht),inset 0 -2px 3px rgba(8,26,43,.07),0 1px 0 #dde1e6,0 2px 0 #d2d7de,0 3px 0 #c6ccd4,0 4px 3px rgba(8,26,43,.2),0 10px 18px -6px rgba(8,26,43,.35);
  line-height:1;margin-right:10px;vertical-align:middle;
}
body .result-icon{width:52px;height:52px;border-radius:14px;font-size:24px;margin:0 0 20px;color:var(--red)}
body .ep-ikon{
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:12px;font-size:1.1rem;
  background:linear-gradient(150deg,#3a3d44 0%,#25272c 100%);
  box-shadow:var(--t-dunkel-licht),inset 0 -2px 3px rgba(0,0,0,.4),var(--t-dunkel3);
}
body .kb-ablauf-nr{
  background:radial-gradient(circle at 32% 28%,#ff6a61 0%,#e2302a 42%,#b5160f 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.22),0 1px 0 #8f120c,0 2px 0 #7a0f0a,0 4px 8px -2px rgba(181,22,15,.55);
}
body .kr-betu,
body .dst-szam{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 3px rgba(0,0,0,.25),0 1px 0 #03080f,0 2px 0 #02060b,0 5px 10px -3px rgba(8,26,43,.45);
}
body .kr-betu{background:radial-gradient(circle at 32% 28%,#2d4766 0%,#0b1d31 60%,#050d17 100%)}
body .eyebrow .dot,
body .dot{
  background:radial-gradient(circle at 35% 30%,#ff8a82 0%,#e2302a 45%,#a8130d 100%);
  box-shadow:0 1px 2px rgba(168,19,13,.45);
}

/* Weisse Karten in dunklen Abschnitten erben sonst die helle Schrift. */
body .dunkel .os-fn p{color:#3d4b5c}
body .dunkel .os-fn small{color:#4a5666;border-top-color:rgba(8,26,43,.1)}
body .dunkel .os-fn h4{color:#0b1524}

/* ── Keine Bewegung beim Zeigen (frueheres Anheben aufgehoben) ─────────── */
body .service-card:hover,body .os-fn:hover,body .wissen-karte:hover,body .rs-karte:hover,
body .button:hover,body .primary:hover,body .service-group:hover{transform:none}

/* ── Druck: anklickbare Platten sinken beim Klicken ein ───────────────── */
@media (prefers-reduced-motion:no-preference){
  body .service-card,body .wissen-karte,body .price-card,body .platform-plan-grid>article,
  body .button,body .real-os-controls button,body .kb-karte-knopf,body .rs-bild{
    transition:transform .09s ease-out,box-shadow .09s ease-out;
  }
  body .service-card:active,body .wissen-karte:active,
  body .price-card:not(.popular):active,body .platform-plan-grid>article:active{
    transform:translateY(5px);
    box-shadow:var(--t-licht),var(--t-rand),var(--t-gedrueckt);
  }
  body .price-card.popular:active{
    transform:translateY(5px);
    box-shadow:var(--t-dunkel-licht),0 1px 0 #0f1114,0 3px 6px rgba(0,0,0,.4);
  }
  body .button:active,body .real-os-controls button:active,body .kb-karte-knopf:active{transform:translateY(2px)}
  body .rs-bild:active{transform:translateY(3px)}
}