/* ============================================================ Vandro Token-Vertrag Die EINZIGE Datei mit Farbwerten. Alles andere greift nur ueber var(--…) zu. Ein Blick hier aendert die ganze Seite. Helle Fassung, warm statt kalt, bewusst nicht reinweiss. ============================================================ */ :root { /* --- Flaechen ------------------------------------------- */ --bg: #f7f6f3; /* Seitengrund, warmes Off-White */ --bg-soft: #f1efe9; /* abgesetzter Abschnitt */ --surface: #fdfcfa; /* Karte auf Grund */ --surface-2: #f4f2ec; /* Karte auf abgesetztem Grund */ --field-bg: #fdfcfa; /* Eingabefelder */ /* --- Schrift -------------------------------------------- */ --ink: #1a1a17; /* Ueberschriften */ --body: #4e4a43; /* Fliesstext */ --muted: #6e6858; /* Nebensache, AA-geprueft */ /* --- Linien --------------------------------------------- */ --line: #e4e0d7; --line-strong: #d3cec2; /* --- Handlung ------------------------------------------- */ --primary: #124f3c; /* Logo-Gruen, tief */ --primary-hover: #17654d; --on-primary: #f4faf7; --accent: #12654c; /* Logo-Gruen, AA-geprueft */ --accent-soft: #e6f1eb; --accent-line: #bcd9c9; --bg-mint: #e9f1ec; /* Preisflaeche, wie die Ziffern im Ablauf */ --glow-badge: 0 0 0 1px rgba(29, 140, 105, .55), 0 0 9px rgba(29, 140, 105, .55); --ember: #c1552c; /* Raute im Zeichen, sehr sparsam */ --danger: #a13a1c; /* --- Verlaeufe und Schatten ----------------------------- */ --wash: radial-gradient(120% 100% at 50% 0%, rgba(18, 101, 76, .11) 0%, rgba(18, 101, 76, .045) 38%, rgba(247, 246, 243, 0) 72%); --wash-soft: linear-gradient(180deg, rgba(241, 239, 233, .9) 0%, rgba(247, 246, 243, 0) 100%); --shadow-sm: 0 1px 2px rgba(26, 26, 23, .05); --shadow-md: 0 4px 14px -6px rgba(26, 26, 23, .10), 0 2px 4px -2px rgba(26, 26, 23, .05); --shadow-lg: 0 32px 64px -32px rgba(26, 26, 23, .22), 0 12px 24px -16px rgba(26, 26, 23, .10); --shadow-shot: 0 48px 80px -40px rgba(26, 26, 23, .30), 0 16px 32px -20px rgba(26, 26, 23, .12); --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236e6858' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); --ring: 0 0 0 3px rgba(18, 101, 76, .28); --glass: rgba(247, 246, 243, .82); /* --- Schriftfamilien ------------------------------------ */ --font-sans: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif; /* --- Groessen ------------------------------------------- */ --fs-display: clamp(1.875rem, 3.6vw, 2.5rem); --fs-h2: clamp(1.4375rem, 2.1vw, 1.75rem); --fs-h3: 1.125rem; --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem); --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .8125rem; --ls-display: -.032em; --ls-h2: -.026em; --ls-h3: -.014em; --measure: 64ch; --measure-head: 40ch; /* --- Radien --------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Symbolmasken fuer Aufzaehlungen. Einfarbige Strichzeichnungen, eingefaerbt ueber background, damit keine Farbe im Datei-Inhalt steht. */ --ic-preis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.5'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M4 6v4M12 6v4'/%3E%3C/svg%3E"); --ic-suche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.3 10.3 4 4'/%3E%3C/svg%3E"); --ic-anruf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 2.6h2.4l1.2 3-1.5 1.1a8 8 0 0 0 3.6 3.6l1.1-1.5 3 1.2v2.4a1 1 0 0 1-1.1 1A11.4 11.4 0 0 1 3.2 3.7a1 1 0 0 1 1-1.1Z'/%3E%3C/svg%3E"); --ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='13' height='9' rx='1.5'/%3E%3Cpath d='m2.2 4.6 5.8 4.2 5.8-4.2'/%3E%3C/svg%3E"); --ic-bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1.5'/%3E%3Ccircle cx='5.4' cy='6' r='1.2'/%3E%3Cpath d='m2.2 12 3.8-3.8 3 2.8 2.4-2.2 2.4 2.2'/%3E%3C/svg%3E"); --ic-system: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 1.6 6 3v6.8l-6 3-6-3V4.6z'/%3E%3Cpath d='m2 4.6 6 3 6-3M8 7.6v6.8'/%3E%3C/svg%3E"); --ic-zeit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.3V8l2.6 1.6'/%3E%3C/svg%3E"); --ic-leute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.4' r='2.6'/%3E%3Cpath d='M1.6 13.8c0-2.5 2-4.2 4.4-4.2s4.4 1.7 4.4 4.2'/%3E%3Cpath d='M11.2 3.4a2.6 2.6 0 0 1 0 4.6M12.2 10c1.5.5 2.2 1.9 2.2 3.8'/%3E%3C/svg%3E"); --ic-ort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14.4s5-4.2 5-8a5 5 0 1 0-10 0c0 3.8 5 8 5 8Z'/%3E%3Ccircle cx='8' cy='6.4' r='1.8'/%3E%3C/svg%3E"); --ic-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M.8 4h12M9.4 1 12.9 4l-3.5 3'/%3E%3C/svg%3E"); --ic-hinweis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.3 14.4 13.4H1.6z'/%3E%3Cpath d='M8 6.4v3.3M8 11.7h.01'/%3E%3C/svg%3E"); /* --- Raster --------------------------------------------- */ --wrap: 1160px; --wrap-narrow: 860px; --header-h: 56px; --section-pad: clamp(56px, 6.4vw, 84px); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* --- Bewegung ------------------------------------------- */ --t-fast: .16s; --t-base: .26s; --t-slow: .5s; --ease: cubic-bezier(.32, .72, 0, 1); /* Symmetrische Kurve fuer Drehungen. --ease ist stark vorgezogen und laesst kurze Drehungen wie einen Schnitt aussehen. */ --ease-inout: cubic-bezier(.62, .02, .34, 1); /* Feder mit leichtem Ueberschwingen, uebernommen von vandro.de. Nur fuer Symbole, nie fuer Layout: alles was springt, springt klein. */ --ease-spring: linear( 0, 0.0072, 0.0272 2.06%, 0.1024 4.3%, 0.5786 12.11%, 0.7458 15.15%, 0.8794 18.2%, 0.9808 21.51%, 1.0568 25.29%, 1.0864 28.55%, 1.1008 32.27%, 1.0958 37.09%, 1.0286 55.6%, 1.0064 65.9%, 0.9974 78.53%, 1 ); --t-turn: .42s; }