/* Theme Name: KANTAERA Child Theme URI: https://www.kantaera.com/ Description: Child-Theme für KANTAERA® auf Basis von Hello Elementor. Enthält das KANTAERA-Design-System (.kan-* / --kan-*) und selbst gehostete Schriften (Exo, Teachers) – DSGVO-konform. Author: KANTAERA Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* ===================================================================== KANTAERA® — style.css Design-System aus dem Moodboard (v1.0) --------------------------------------------------------------------- • Alle Klassen mit Präfix .kan- • Alle Tokens als eigene CSS-Variablen in :root (--kan-*) • SVG-Assets (Logo, Bögen, Texturen) liegen als separate Dateien vor und werden über Elementor-Bild-Widgets eingebunden (nicht hier). ELEMENTOR V4 (Atomic) — Einbindung: • Diese Datei über das CHILD-THEME laden (hello-elementor-child). Grund: das element-scoped „Custom CSS"-Panel ist Pro-only; das Child-Theme-Stylesheet greift auch in Free und lädt nach Elementor. • V4 rendert Global-Klassen mit ECHTEM Namen im DOM. Lege die Klassen (kan-btn, kan-btn--solid, …) als Global Classes an bzw. trage sie im Klassen-Feld des Elements ein — diese Regeln stylen sie dann direkt. • Variables Manager (optional): Farb-/Font-/Size-Variablen anlegen und via --kan-orange: var(--deine-variable) brücken — ODER einfach die :root-Werte hier als Single Source of Truth nutzen (self-contained). • Diese Datei ist bewusst KLASSEN-gescoped: kein globaler *-Reset, keine nackten Element-Selektoren -> kollidiert nicht mit Atomic-Widgets. • Schriften: in Elementor global laden ODER @import (Abschnitt 00) nutzen. ===================================================================== INHALT 00 Fonts (@import) 01 Design-Tokens (:root) — Farben, Skalen, Typo, Schatten 02 Reset / Basis-Helfer 03 Typografie-Utilities .kan-display / -h1 / -body / -eyebrow … 04 Layout .kan-section / -wrap / -grid 05 Flächen- & Text-Utilities .kan-bg-* / .kan-text-* 06 Farbwelt-Bausteine .kan-swatch 07 Buttons .kan-btn / --solid / --arc / --ghost 08 Cards .kan-card / .kan-pcard 09 Chips, Tags, Notizen .kan-chip / .kan-tag / .kan-note 10 Bögen & Trenner (CSS) .kan-arc-* / .kan-arc-photo 11 Gürtel-System .kan-belt-track / .kan-badge 12 Schatten-Utilities .kan-shadow-* 13 Sichtbarkeit / Responsive-Helfer ===================================================================== */ /* == 00 · FONTS (selbst gehostet · DSGVO-konform) =================== */ /* Variable Fonts: eine Datei deckt die ganze Gewichtsachse. Dateien im Child-Theme unter /fonts/. In Elementor Google-Fonts DEAKTIVIEREN (Einstellungen > Features/Erweitert), damit nichts von Google nachgeladen wird. */ @font-face { font-family: 'Exo'; src: url('./fonts/Exo-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Exo'; src: url('./fonts/Exo-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Teachers'; src: url('./fonts/Teachers-VariableFont_wght.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Teachers'; src: url('./fonts/Teachers-Italic-VariableFont_wght.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; } /* == 01 · DESIGN-TOKENS ============================================= */ :root { /* --- Marken-Kernfarben ---------------------------------------- */ --kan-orange: #EC6621; /* Primär – CTAs, Akzente, Logo */ --kan-ember: #C0410F; /* Tiefe / Hover / Ränder (= Shade 600) */ --kan-ink: #1C1A17; /* Dojo Ink – Autorität, dunkle Flächen */ --kan-ink-soft: #2E2A25; /* --- Flächen -------------------------------------------------- */ --kan-cream: #FFF7ED; /* Warm Cream – helle Basisfläche */ --kan-sand: #F3E7D8; /* abgesetzte Panels / Cards */ --kan-sand-line: #E7D7C4; /* Rahmen / Trennlinien */ --kan-white: #FFFFFF; /* --- Text ----------------------------------------------------- */ --kan-taupe: #6D6459; /* Sekundärtext (warm) */ --kan-taupe-soft: #9A9086; /* Meta / Hilfstexte */ /* --- Orange-Skala: Tints -> Base -> Shades -------------------- */ --kan-orange-50: #FCEAE0; --kan-orange-100: #F9CEB8; --kan-orange-200: #F5AC87; --kan-orange-300: #F18E5B; --kan-orange-400: #EE783C; --kan-orange-500: #EC6621; /* = Base = --kan-orange */ --kan-orange-600: #C0410F; /* = Ember (exakt) */ --kan-orange-700: #9C4316; --kan-orange-800: #6D2F0F; /* --- Warme Neutral-Skala ------------------------------------- */ --kan-neutral-900: #1C1A17; /* Dojo Ink */ --kan-neutral-800: #2E2A25; /* Ink-Soft */ --kan-neutral-500: #6D6459; /* Taupe */ --kan-neutral-400: #9A9086; /* Taupe-Soft */ --kan-neutral-200: #F3E7D8; /* Sand */ --kan-neutral-100: #FFF7ED; /* Warm Cream */ --kan-neutral-0: #FFFFFF; /* White */ /* --- Gürtel-Skala (Akademie-Stufen) -------------------------- */ --kan-belt-white: #EFE7DB; /* Stufe 1 – Certified */ --kan-belt-orange: #EC6621; /* Stufe 2 – Advanced */ --kan-belt-brown: #6B4423; /* Reserve */ --kan-belt-black: #1C1A17; /* Stufe 3 – Professional*/ /* --- Typografie ---------------------------------------------- */ --kan-font-display: 'Exo', system-ui, -apple-system, sans-serif; /* Headlines/Wortmarke */ --kan-font-body: 'Teachers', system-ui, -apple-system, sans-serif; /* Fließtext */ --kan-fs-display: clamp(2.4rem, 6vw, 4.4rem); --kan-fs-h1: clamp(2rem, 4.4vw, 3rem); --kan-fs-h2: clamp(1.5rem, 3.4vw, 2.1rem); --kan-fs-h3: 1.25rem; --kan-fs-h4: 1.125rem; --kan-fs-h5: 1rem; --kan-fs-h6: 0.875rem; --kan-fs-lead: 1.0625rem; /* 17px */ --kan-fs-body: 1rem; /* 16px */ --kan-fs-small: 0.875rem; /* 14px */ --kan-fs-meta: 0.75rem; /* 12px */ --kan-fw-regular: 400; --kan-fw-medium: 500; --kan-fw-semibold: 600; --kan-fw-bold: 700; --kan-fw-black: 800; --kan-lh-tight: 1.05; --kan-lh-normal: 1.6; /* --- Radien --------------------------------------------------- */ --kan-radius-sm: 8px; --kan-radius: 14px; --kan-radius-pill: 999px; /* --- Schatten (warm, RGBA auf Dojo Ink; Glow = Orange) -------- */ --kan-shadow-sm: 0 1px 2px rgba(28,26,23,.05), 0 2px 6px rgba(28,26,23,.06); --kan-shadow-md: 0 2px 8px rgba(28,26,23,.07), 0 12px 28px rgba(28,26,23,.06); --kan-shadow-lg: 0 10px 24px rgba(28,26,23,.12), 0 22px 48px rgba(28,26,23,.10); --kan-shadow-glow: 0 4px 16px rgba(236,102,33,.30); /* --- Layout --------------------------------------------------- */ --kan-container: 1080px; --kan-section-y: 66px; --kan-gap: 18px; /* --- Übergänge ------------------------------------------------ */ --kan-transition: .15s ease; } /* == 02 · RESET / BASIS-HELFER ====================================== */ /* Bewusst minimal – Elementor bringt eigenes Reset mit. .kan-base auf einen Wrapper setzen, um Font/Textfarbe zu erben. */ .kan-base, .kan-body-font { font-family: var(--kan-font-body); color: var(--kan-ink); line-height: var(--kan-lh-normal); } .kan-base *, .kan-base *::before, .kan-base *::after { box-sizing: border-box; } /* == 03 · TYPOGRAFIE-UTILITIES ====================================== */ .kan-display { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: var(--kan-fs-display); line-height: .98; letter-spacing: -.02em; } .kan-h1 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: var(--kan-fs-h1); line-height: var(--kan-lh-tight); letter-spacing: -.02em; } .kan-h2 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: var(--kan-fs-h2); line-height: 1.15; letter-spacing: -.015em; } .kan-h3 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: var(--kan-fs-h3); line-height: 1.3; letter-spacing: -.01em; } .kan-h4 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: var(--kan-fs-h4); line-height: 1.35; letter-spacing: -.01em; } .kan-h5 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: var(--kan-fs-h5); line-height: 1.4; } .kan-h6 { font-family: var(--kan-font-display); font-weight: var(--kan-fw-semibold); font-size: var(--kan-fs-h6); line-height: 1.4; letter-spacing: .02em; } .kan-body { font-family: var(--kan-font-body); font-weight: var(--kan-fw-regular); font-size: var(--kan-fs-body); line-height: var(--kan-lh-normal); } .kan-lead { font-family: var(--kan-font-body); font-size: var(--kan-fs-lead); line-height: 1.55; color: var(--kan-taupe); } .kan-small { font-size: var(--kan-fs-small); } /* Bildunterschrift / Caption */ .kan-caption { font-family: var(--kan-font-body); font-weight: var(--kan-fw-regular); font-size: var(--kan-fs-small); line-height: 1.45; color: var(--kan-taupe); } /* Wortmarke (Text) – kursiv, für nicht-SVG-Kontexte */ .kan-wordmark { font-family: var(--kan-font-display); font-style: italic; font-weight: var(--kan-fw-black); letter-spacing: -.02em; color: var(--kan-ink); } /* Eyebrow / Rubrik über Headlines */ .kan-eyebrow { font-family: var(--kan-font-display); font-weight: var(--kan-fw-semibold); font-size: var(--kan-fs-meta); line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--kan-orange); } /* Meta / Label – Versal gesperrt */ .kan-meta { font-family: var(--kan-font-display); font-weight: var(--kan-fw-semibold); font-size: var(--kan-fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--kan-taupe); } /* == 04 · LAYOUT ==================================================== */ .kan-section { padding: var(--kan-section-y) 0; position: relative; } .kan-wrap { max-width: var(--kan-container); margin: 0 auto; padding: 0 24px; } /* Sektions-Kopf */ .kan-section-num { display: block; font-family: var(--kan-font-display); font-size: 13px; font-weight: var(--kan-fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--kan-orange); margin-bottom: 14px; } .kan-section-title { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: var(--kan-fs-h2); letter-spacing: -.015em; color: var(--kan-ink); margin-bottom: 8px; } .kan-section-intro { font-size: var(--kan-fs-lead); color: var(--kan-taupe); max-width: 660px; margin-bottom: 34px; } /* Grid */ .kan-grid { display: grid; gap: var(--kan-gap); } .kan-grid--2 { grid-template-columns: repeat(2, 1fr); } .kan-grid--3 { grid-template-columns: repeat(3, 1fr); } .kan-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 820px) { .kan-grid--2, .kan-grid--3, .kan-grid--4 { grid-template-columns: 1fr; } .kan-grid--keep2 { grid-template-columns: 1fr 1fr; } } /* == 05 · FLÄCHEN- & TEXT-UTILITIES ================================= */ .kan-bg-cream { background: var(--kan-cream); } .kan-bg-sand { background: var(--kan-sand); } .kan-bg-white { background: var(--kan-white); } .kan-bg-ink { background: var(--kan-ink); color: var(--kan-cream); } .kan-bg-orange { background: var(--kan-orange); color: #fff; } .kan-text-orange { color: var(--kan-orange); } .kan-text-ember { color: var(--kan-ember); } .kan-text-ink { color: var(--kan-ink); } .kan-text-cream { color: var(--kan-cream); } .kan-text-taupe { color: var(--kan-taupe); } .kan-text-white { color: #fff; } /* == 06 · FARBWELT-BAUSTEINE (Swatch) ============================== */ .kan-swatch { border-radius: var(--kan-radius-sm); overflow: hidden; border: 1px solid var(--kan-sand-line); background: var(--kan-white); } .kan-swatch__block { height: 88px; } .kan-swatch__info { padding: 11px 12px; border-top: 1px solid var(--kan-sand-line); } .kan-swatch__name { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: 14px; } .kan-swatch__hex { font-family: monospace; font-size: 11px; color: var(--kan-taupe-soft); margin-top: 2px; } .kan-swatch__role { font-size: 11.5px; color: var(--kan-taupe); margin-top: 6px; line-height: 1.45; } /* Tag-Chip auf dem Farbblock (z. B. „Primär", „Anker", „Basis") */ .kan-swatch__tag { font-family: var(--kan-font-display); font-size: 10px; font-weight: var(--kan-fw-bold); letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.85); color: var(--kan-ink); } /* == 07 · BUTTONS =================================================== */ .kan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--kan-font-display); font-weight: var(--kan-fw-semibold); font-size: var(--kan-fs-small); letter-spacing: .01em; padding: 12px 24px; border: none; border-radius: var(--kan-radius-pill); cursor: pointer; text-decoration: none; transition: all var(--kan-transition); } /* Primär – gefüllt mit Orange-Glow */ .kan-btn--solid { background: var(--kan-orange); color: #fff; box-shadow: var(--kan-shadow-glow); } .kan-btn--solid:hover { background: var(--kan-ember); } /* Bogen – dunkel mit angeschnittener Ecke (unten rechts) */ .kan-btn--arc { background: var(--kan-ink); color: var(--kan-cream); border-radius: 999px 999px 999px 4px; } .kan-btn--arc:hover { background: var(--kan-ink-soft); } /* Ghost – umrandet */ .kan-btn--ghost { background: transparent; color: var(--kan-ember); border: 1.5px solid var(--kan-orange); } .kan-btn--ghost:hover { background: var(--kan-orange-50); } /* Bogen-Pfeil (kleines Zeichen im Button) */ .kan-btn__arrow { width: 15px; height: 15px; border: 2px solid currentColor; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); } /* == 08 · CARDS ==================================================== */ .kan-card { background: var(--kan-white); border: 1px solid var(--kan-sand-line); border-radius: var(--kan-radius); padding: 24px; box-shadow: var(--kan-shadow-sm); } .kan-card--md { box-shadow: var(--kan-shadow-md); } .kan-card--warm { background: var(--kan-sand); } .kan-card--ink { background: var(--kan-ink); color: var(--kan-cream); border: none; } .kan-card--hover { transition: transform var(--kan-transition), box-shadow var(--kan-transition); } .kan-card--hover:hover { transform: translateY(-2px); box-shadow: var(--kan-shadow-lg); } /* Prinzip-Karte (nummeriert) */ .kan-pcard { background: var(--kan-white); border: 1px solid var(--kan-sand-line); border-radius: var(--kan-radius); padding: 26px; } .kan-pcard__idx { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: 30px; color: var(--kan-orange); line-height: 1; } .kan-pcard__title { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: 18px; margin: 14px 0 8px; letter-spacing: -.01em; } .kan-pcard__text { font-size: .9rem; color: var(--kan-taupe); } /* == 09 · CHIPS, TAGS, NOTIZEN ===================================== */ /* Fusion-/Info-Chip (Pill mit Rahmen) */ .kan-chip { display: inline-block; font-family: var(--kan-font-display); font-weight: var(--kan-fw-semibold); font-size: 13px; letter-spacing: .04em; padding: 9px 16px; border: 1px solid var(--kan-sand-line); border-radius: var(--kan-radius-pill); color: var(--kan-ink); } .kan-chip--on-dark { border-color: rgba(255,247,237,.28); color: var(--kan-cream); } /* Tag / Kategorie-Label */ .kan-tag { display: inline-block; font-family: var(--kan-font-display); font-size: 10px; font-weight: var(--kan-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--kan-ember); background: var(--kan-orange-50); padding: 3px 9px; border-radius: var(--kan-radius-pill); margin-bottom: 10px; } /* Hinweis-Box */ .kan-note { font-size: .85rem; color: var(--kan-taupe); background: var(--kan-sand); border-inline-start: 3px solid var(--kan-orange); padding: 12px 16px; border-radius: 0 8px 8px 0; line-height: 1.6; } .kan-note strong, .kan-note b { color: var(--kan-ember); } /* == 10 · BÖGEN & TRENNER (reines CSS) ============================= */ /* Wichtig: Kantaera-Bögen folgen einer ELLIPSE (nie Kreis) und sind asymmetrisch. Diese CSS-Bögen sind flache Ellipsen-Trenner. Für die echten, asymmetrischen Kalligrafie-Bögen die SVG-Dateien nutzen (bogen-rechtsschwung.svg / -linksschwung.svg / sweep.svg). */ /* Kuppel-Abschluss (Fläche endet nach oben in flachem Ellipsenbogen) */ .kan-arc-cap { height: 66px; border-radius: 100% 100% 0 0 / 66px 66px 0 0; } /* Übergang: Bogen nach oben (auf Folgefläche, füllt in deren Farbe) */ .kan-arc-up { height: 56px; border-radius: 100% 100% 0 0 / 56px 56px 0 0; margin-top: -1px; } /* Übergang: Bogen nach unten */ .kan-arc-down { height: 56px; border-radius: 0 0 100% 100% / 0 0 56px 56px; margin-bottom: -1px; } /* Bogen-maskiertes Bild – ASYMMETRISCHE Oberkante (Scheitel links) */ .kan-arc-photo { position: relative; overflow: hidden; border-radius: 62% 38% 12px 12px / 80px 50px 12px 12px; } /* Variante: nur oben gerundet (z. B. Bild am unteren Card-Rand) */ .kan-arc-photo--top { border-radius: 64% 36% 0 0 / 82px 46px 0 0; } /* Opt-in: diagonale Bewegungs-/Licht-Linien (NICHT Standard – nur bei Bedarf) */ .kan-arc-photo--lines::after { content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 2px, transparent 2px 24px); } /* Bewegungsspuren als dekorativer Hintergrund (Opt-in, Elementor-Container/Flexbox). Farbe: --kan-trace-color · Deckkraft: --kan-trace-opacity. Liegt via ::before hinter dem Inhalt. */ .kan-bewegungsspuren { position: relative; isolation: isolate; --kan-trace-color: var(--kan-orange); --kan-trace-opacity: .5; } .kan-bewegungsspuren::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--kan-trace-color); opacity: var(--kan-trace-opacity); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 200%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M-20%2C200 C 30%2C70 95%2C60 240%2C200%22 stroke-width=%222%22 opacity=%22.9%22/%3E%3Cpath d=%22M-20%2C200 C 34%2C95 102%2C86 240%2C200%22 stroke-width=%222%22 opacity=%22.55%22/%3E%3Cpath d=%22M-20%2C200 C 38%2C118 110%2C110 240%2C200%22 stroke-width=%222%22 opacity=%22.3%22/%3E%3Cpath d=%22M-20%2C200 C 42%2C140 118%2C133 240%2C200%22 stroke-width=%222%22 opacity=%22.16%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / cover; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 220 200%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M-20%2C200 C 30%2C70 95%2C60 240%2C200%22 stroke-width=%222%22 opacity=%22.9%22/%3E%3Cpath d=%22M-20%2C200 C 34%2C95 102%2C86 240%2C200%22 stroke-width=%222%22 opacity=%22.55%22/%3E%3Cpath d=%22M-20%2C200 C 38%2C118 110%2C110 240%2C200%22 stroke-width=%222%22 opacity=%22.3%22/%3E%3Cpath d=%22M-20%2C200 C 42%2C140 118%2C133 240%2C200%22 stroke-width=%222%22 opacity=%22.16%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / cover; } /* == 11 · GÜRTEL-SYSTEM (Akademie-Stufen) ========================= */ /* Linearer Fortschrittspfad */ .kan-belt-track { display: flex; border-radius: var(--kan-radius-pill); overflow: hidden; box-shadow: var(--kan-shadow-md); } .kan-belt-seg { flex: 1; padding: 26px 24px; color: #fff; } .kan-belt-seg--white { background: var(--kan-belt-white); color: var(--kan-ink); } .kan-belt-seg--orange { background: var(--kan-belt-orange); } .kan-belt-seg--brown { background: var(--kan-belt-brown); } .kan-belt-seg--black { background: var(--kan-belt-black); } .kan-belt-seg__step { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } .kan-belt-seg--white .kan-belt-seg__step { color: var(--kan-ember); opacity: 1; } .kan-belt-seg__name { font-family: var(--kan-font-display); font-weight: var(--kan-fw-bold); font-size: 15px; margin-top: 3px; } .kan-belt-seg__desc { font-size: 11.5px; margin-top: 6px; opacity: .9; line-height: 1.4; } /* Rundes Siegel/Badge – kumulative Ringe (Ringe = erreichte Stufe) */ .kan-badge { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; } .kan-badge__core { width: 80px; height: 80px; border-radius: 50%; background: var(--kan-belt-white); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .kan-badge__core b { font-family: var(--kan-font-display); font-weight: var(--kan-fw-black); font-size: 15px; color: var(--kan-ink); line-height: 1; } .kan-badge__core small { font-family: var(--kan-font-display); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--kan-taupe); margin-top: 4px; } /* Stufe 1 – Certified (Creme-Ring) */ .kan-badge__core--1 { box-shadow: 0 0 0 7px var(--kan-belt-white), 0 0 0 8px rgba(28,26,23,.10); } /* Stufe 2 – Advanced (+ Orange-Ring) */ .kan-badge__core--2 { box-shadow: 0 0 0 7px var(--kan-belt-white), 0 0 0 15px var(--kan-belt-orange), 0 0 0 16px rgba(28,26,23,.10); } /* Stufe 3 – Professional (+ Schwarz-Ring) */ .kan-badge__core--3 { box-shadow: 0 0 0 7px var(--kan-belt-white), 0 0 0 15px var(--kan-belt-orange), 0 0 0 23px var(--kan-belt-black), 0 0 0 24px rgba(28,26,23,.10); } /* == 12 · SCHATTEN-UTILITIES ====================================== */ .kan-shadow-sm { box-shadow: var(--kan-shadow-sm); } .kan-shadow-md { box-shadow: var(--kan-shadow-md); } .kan-shadow-lg { box-shadow: var(--kan-shadow-lg); } .kan-shadow-glow { box-shadow: var(--kan-shadow-glow); } /* == 13 · SICHTBARKEIT / RESPONSIVE-HELFER ======================== */ .kan-hide { display: none !important; } @media (max-width: 820px) { .kan-hide\@mobile { display: none !important; } } @media (min-width: 821px) { .kan-hide\@desktop { display: none !important; } } /* =================================================================== Ende style.css — Fragen/Erweiterungen jederzeit möglich. =================================================================== */