@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-variabel.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root { --fs-label: clamp(11.2px, 10.89px + 0.066vw, 11.8px); --fs-fein: clamp(12.6px, 12.29px + 0.075vw, 13.4px); --fs-klein: clamp(14.2px, 13.86px + 0.084vw, 15.1px); --fs-text: clamp(16.0px, 15.63px + 0.095vw, 17.0px); --fs-name: clamp(18.0px, 17.63px + 0.107vw, 19.2px); --fs-lead: clamp(18.0px, 16.72px + 0.341vw, 21.6px); --fs-zwischen: clamp(20.4px, 18.85px + 0.384vw, 24.4px); --fs-karte: clamp(23.0px, 19.96px + 0.768vw, 31.0px); --fs-h3: clamp(25.9px, 22.51px + 0.867vw, 35.0px); --fs-satz: clamp(29.2px, 16.33px + 3.300vw, 63.9px); --fs-h2: clamp(32.9px, 24.13px + 2.255vw, 56.6px); --fs-gross: clamp(41.9px, 33.73px + 2.092vw, 63.9px); }
:root { --raum-1: 8px; --raum-2: 13px; --raum-3: 21px; --raum-4: 34px; --raum-5: 55px; --raum-6: 89px; --raum-7: 144px; }
:root {
  --nacht: #161214;
  --nacht-2: #1f181b;
  --creme: #f7f0f1;
  --rose: #f2d0d8;
  --pink: #e5095d;
  --pink-hover: #c7074f;
  --tinte: #221a1e;
  --weiss: #ffffff;
  --auf-dunkel: #f6eef0;
  --linie-dunkel: #3a2e34;
  --linie-hell: #e3d1d7;
  --linie-rosa: color-mix(in srgb, var(--nacht) 16%, var(--rose));
  --pink-klein: color-mix(in srgb, var(--pink) 80%, var(--nacht));
  --pink-klein-dunkel: color-mix(in srgb, var(--pink) 84%, var(--weiss));
  --team-einzeln-b: 26rem;
  --team-klein-b: 112px;
  --pf-titel-min: 12rem;
  --held-breit-format: 16 / 9;
  --seitenwechsel: 0.35s;
  --bewegung-notfall: 2.5s;
  --icon-mini: 20px;
  --held-schatten-h: calc(var(--kopf-h) * 1.6);
  --font: "Syne", "Helvetica Neue", Arial, sans-serif;
  --leicht: 400;
  --fett: 700;
  --betont: 500;
  --satz-groesse: var(--fs-satz);
  --pille-luft: 0.2em;
  --rand-basis: clamp(28px, 5vw, 64px);
  --rand: max(var(--rand-basis), env(safe-area-inset-left, 0px));
  --rand-r: max(var(--rand-basis), env(safe-area-inset-right, 0px));
  --breite: 1440px;
  --abstand: clamp(var(--raum-7), 14vw, 224px);
  --abstand-klein: clamp(var(--raum-6), 8vw, 128px);
  --stern: 14px;
  --rund-pille: 999px;
  --plus-feld: 40px;
  --rund-bogen: var(--rund-bild);
  --rund-schild: 999px;
  --rund-karte: 12px;
  --tm-ueberlapp: clamp(24px, 9vw, 160px);
  --tm-karte-b: 46rem;
  --leiste-feld: 52px;
  --leiste-symbol: 20px;
  --leiste-abstand: 16px;
  --leiste-reiter-b: 44px;
  --hv-raus: -6%;
  --hv-raus-klein: -2%;
  --karte-b: clamp(270px, 29vw, 440px);
  --karte-b-mobil: 76vw;
  --karte-schein: color-mix(in srgb, var(--pink) 65%, transparent);
  --karte-schein-form: 130% 50%;
  --plus-strich: 14px;
  --pink-leise: color-mix(in srgb, var(--pink) 30%, var(--rose));
  --stern-gross: 18px;
  --icon-groesse: clamp(36px, 3vw, 44px);
  --icon-farbe: var(--pink);
  --icon-flaeche: color-mix(in srgb, var(--icon-farbe) 30%, transparent);
  --icon-klein: clamp(26px, 2.2vw, 32px);
  --icon-strich-fein: 1.5;
  --zeit-punkt: 13px;
  --icon-dauer: 0.9s;
  --icon-versatz: 0.12s;
  --kopf-h: 84px;
  --kopf-platz: 0px;
  --sperr-label: 0.2em;
  --sperr-link: 0.14em;
  --eng: -0.03em;
  --lauf: cubic-bezier(.16, 1, .3, 1);
  --team-b: 16;
  --team-h: 9;
  --hoch-b: 4;
  --hoch-h: 5;
  --team-kopf: 0.203;
  --team-kopf-mobil: 0.098;
  --team-ueberdeckung: 0.024;
  --team-ueberdeckung-mobil: 0.05;
  --gross-eng: -0.04em;
  --titel: var(--fs-h2);
  --titel-zeile: 1.04;
  --untertitel: var(--fs-h3);
  --untertitel-zeile: 1.1;
  --zwischentitel: var(--fs-zwischen);
  --sperr-versal: 0.02em;
  --kb-gross: 0.086;
  --kb-gross-mobil: 0.155;
  --kb-zeile: 0.8;
  --kb-verlauf-oben: 34%;
  --kb-verlauf-oben-frei: 8%;
  --kb-verlauf-unten: 30%;
  --kb-a1: color-mix(in srgb, var(--nacht) 10%, transparent);
  --kb-a2: color-mix(in srgb, var(--nacht) 35%, transparent);
  --kb-a3: color-mix(in srgb, var(--nacht) 65%, transparent);
  --kb-a4: color-mix(in srgb, var(--nacht) 90%, transparent);
  --kb-oben: clamp(18px, 2.4vw, 36px);
  --kb-fuss-zug: 12vw;
  --kb-unten-mobil: 44px;
  --rund-knopf: 0;
  --rund-bild: 0;
  --rund-mini: 6px;
  --knopf-h: 52px;
  --knopf-schrift: var(--fs-fein);
  --knopf-h-klein: 44px;
  --menue-knopf: 44px;
  --menue-knopf-klein: 36px;
  --menue-bild-b: clamp(280px, 62.5vw - 480px, 34vw);
  --fs-menue: clamp(30px, 22px + 1.7vw, 46px);
  --eg-logo-b: clamp(170px, 15vw, 230px);
  --strich-klein: 16px;
  --menue-strich: 16px;
  --menue-abstand: 3px;
  --strich-fein: 1.5px;
  --strich-lang: 30px;
  --strich-mittel: 24px;
  --strich-kurz: 18px;
  --strich-luft: 4px;
  --logo-gross: 200px;
  --logo-klein: 140px;
  --logo-b: var(--logo-gross);
  --kopf-luecke: clamp(24px, 2.8vw, 40px);
  --kb-ort-abstand: 20px;
  --kb-ort-h: 40px;
  --kicker-mobil: 10px;
  --sperr-knopf-mobil: 0.1em;
  --sperr-kicker-mobil: 0.14em;
  color-scheme: light;
}
:root { --pfeil-maske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2012%22%3E%3Cpath%20d%3D%22M1%206h37M33%201l5%205-5%205%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20stroke-width%3D%221.3%22/%3E%3C/svg%3E"); --pfeil-b: 34px; --pfeil-klein-b: 20px; --pfeil-klein-h: 6px; --menue-pfeil-b: 0.6em; --menue-pfeil-h: calc(var(--menue-pfeil-b) * 12 / 40); --pfeil-h: 12px; --pfeil-hover: translateX(5px); }
:root { --stern-maske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l2.9%206.9%207.1.6-5.4%204.7%201.7%207.3L12%2017.6l-6.3%203.9%201.7-7.3L2%209.5l7.1-.6z%22/%3E%3C/svg%3E"); }
:root { --bewerben-maske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21.5%202.5L2.5%2010.3l7.3%203%203%207.3z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M9.8%2013.3l11.7-10.8%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22/%3E%3C/svg%3E"); --tel-maske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.62%2010.79c1.44%202.83%203.76%205.14%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201-9.39%200-17-7.61-17-17%200-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.25.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%22/%3E%3C/svg%3E"); --kalender-maske: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%22%20stroke-linejoin%3D%22miter%22%20stroke-width%3D%221.6%22/%3E%3C/svg%3E"); }
:root { --auftritt-weg: 22px; --auftritt-takt: 80ms; }
:root { --us-rand: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand-basis))); --us-titel: var(--fs-gross); --us-titel-laengste: 7.9; }
:root { --badge-h: 28px; --badge-format: 163.2 / 50.6; }
:root { --anfahrt-h: clamp(640px, 92svh, 960px); --anfahrt-band: 540px; --anfahrt-text-b: 30rem; --karte-px-km: 45px; --karte-px-km-mobil: 24px; --karte-px-km-klein: 20px; --karte-cx-klein: 44%; --karte-cx: 68%; --karte-cx-mobil: 46%; --karte-cy: 50%; --karte-verlauf: linear-gradient(90deg, var(--nacht) 0%, color-mix(in srgb, var(--nacht) 88%, transparent) 30%, transparent 56%); --karte-verlauf-mobil: linear-gradient(180deg, transparent 0, transparent calc(var(--anfahrt-band) - 160px), var(--nacht) var(--anfahrt-band)); --karte-pin-b: 30px; --karte-land: var(--nacht); --karte-schrift: var(--auf-dunkel); --karte-schrift-leise: color-mix(in srgb, var(--auf-dunkel) 62%, transparent); --karte-halo: 0 0 2px var(--nacht), 0 0 3px var(--nacht), 0 0 4px var(--nacht), 0 0 6px var(--nacht); --karte-pin-rand: color-mix(in srgb, var(--pink) 70%, var(--tinte)); --karte-pin-schatten: color-mix(in srgb, var(--tinte) 35%, transparent); --karte-quelle-grund: color-mix(in srgb, var(--nacht) 72%, transparent); --karte-leise: color-mix(in srgb, var(--auf-dunkel) 60%, transparent); }
:root { --tiefe-1: clamp(14px, 2vw, 28px); --tiefe-2: clamp(30px, 4.2vw, 60px); --tiefe-3: clamp(48px, 6.6vw, 96px); --held-weg: 8%; --held-zoom: 0.1; --held-einstieg-zoom: 0.1; --kb-buehne-weg: 16%; --titel-weg: 0.3em; --titel-unschaerfe: 12px; --titel-blass: 0.12; --stapel-fuge: clamp(6px, 0.8vw, 12px); }
:root { --mk-format: 3 / 2; --mk-fokus: 50% 35%; --hoch-format: 4 / 5; --magazin-spalte: 42rem; --magazin-portraet: 36px; --magazin-autorin-bild: 96px; --tipp-bild: 72px; --mm-karte-b: clamp(220px, 21vw, 320px); --magazin-bild-zug: clamp(120px, 16vw, 260px); --magazin-stapel-b: 64rem; }