@font-face { font-family: "Syne"; src: url("/assets/fonts/syne-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Questrial"; src: url("/assets/fonts/questrial-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } :root { --blau: #0057FF; --blau-text: #0050EB; --blau-tief: #003FC0; --blau-hauch: #EEF3FF; --nacht: #162D3D; --nacht-tief: #0F2230; --nacht-linie: #2A4456; --grund: #FFFFFF; --flaeche: #F4F7FB; --text: #0C1822; --text-2: #4A5A67; --linie: #DDE4EB; --globus-grund: #FFFFFF; --globus-tinte: #0057FF; --auf-blau: #FFFFFF; --auf-nacht: #EAF1F7; --auf-nacht-2: #A9BCCB; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px; --s10: 160px; --rand: 16px; --breit: 1320px; --r-bild: 18px; --r-feld: 12px; --kurve: cubic-bezier(0.16, 1, 0.3, 1); --f-titel: "Syne", "Helvetica Neue", Arial, sans-serif; --f-text: "Questrial", "Helvetica Neue", Arial, sans-serif; --f-daten: "Sora", "Helvetica Neue", Arial, sans-serif; color-scheme: light; } @media (min-width: 700px) { :root { --rand: 32px; } } @media (min-width: 1100px) { :root { --rand: 48px; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blau: #1E63F0; --blau-text: #7FA8FF; --blau-tief: #174FC4; --blau-hauch: #0F2236; --grund: #08131B; --flaeche: #0D1C27; --text: #E8EFF5; --text-2: #A3B4C2; --linie: #1F3444; --globus-grund: #0B1924; --globus-tinte: #6E9BFF; --nacht: #0F2230; --nacht-tief: #0A1922; --nacht-linie: #24404F; color-scheme: dark; } } :root[data-theme="dark"] { --blau: #1E63F0; --blau-text: #7FA8FF; --blau-tief: #174FC4; --blau-hauch: #0F2236; --grund: #08131B; --flaeche: #0D1C27; --text: #E8EFF5; --text-2: #A3B4C2; --linie: #1F3444; --globus-grund: #0B1924; --globus-tinte: #6E9BFF; --nacht: #0F2230; --nacht-tief: #0A1922; --nacht-linie: #24404F; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; } body { margin: 0; background: var(--grund); color: var(--text); font: 400 1.0625rem/1.62 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } ::selection { background: var(--blau); color: #fff; } :focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; } h1, h2, h3 { font-family: var(--f-titel); font-weight: 500; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 5.6vw, 5.25rem); line-height: 1.02; color: var(--blau-text); } h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.04; } h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; } p { margin: 0; text-wrap: pretty; } .rahmen { width: 100%; max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); } .ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; } .klein { font-size: 0.875rem; color: var(--text-2); } .sprung { position: absolute; left: var(--rand); top: -60px; z-index: 100; background: var(--blau); color: #fff; padding: 10px 16px; border-radius: 999px; transition: top .2s; } .sprung:focus { top: 12px; } html { scrollbar-color: color-mix(in srgb, var(--blau) 55%, transparent) transparent; } .knopf { --k-grund: var(--blau); --k-text: #fff; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px 0 26px; border-radius: 999px; border: 0; background: var(--k-grund); color: var(--k-text); font: 600 0.95rem/1 var(--f-daten); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform .5s var(--kurve), background-color .3s; } .knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blau-tief); transform: translateY(101%); transition: transform .55s var(--kurve); border-radius: inherit; } .knopf:hover::before { transform: translateY(0); } .knopf .ic { transition: transform .5s var(--kurve); } .knopf:hover .ic { transform: translateX(4px); } .knopf:active { transform: scale(0.98); } .knopf--hell { --k-grund: #fff; --k-text: var(--blau); } .knopf--hell::before { background: var(--blau-hauch); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf--hell { --k-text: #0047D6; } :root:not([data-theme="light"]) .knopf--hell::before { background: #E3ECFF; } } .textlink { display: inline-flex; align-items: center; gap: 10px; color: var(--blau-text); font: 600 0.95rem/1.3 var(--f-daten); text-decoration: none; margin-top: var(--s5); } .textlink span, .textlink { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--kurve); padding-bottom: 3px; } .textlink:hover { background-size: 100% 1px; } .textlink .ic { transition: transform .5s var(--kurve); } .textlink:hover .ic { transform: translateX(4px); } .textlink--hell { color: #fff; } .kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 12px 0; } .kopf-innen { max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; padding-inline: calc(var(--rand) - 8px); display: flex; align-items: center; gap: var(--s5); } .kopf-innen > .marke, .kopf-innen > .menue { position: relative; } .kopf::before { content: ""; position: absolute; inset: 8px max(calc(var(--rand) - 16px), 8px); max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; border-radius: 999px; background: color-mix(in srgb, var(--grund) 84%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent); opacity: 0; transition: opacity .4s; z-index: -1; } .kopf--gescrollt::before, .menue-offen .kopf::before { opacity: 1; } .marke { display: block; color: var(--blau); padding: 10px 8px; } .marke svg { width: 104px; height: auto; } .marke--hell { color: #fff; padding: 0; } .marke--hell svg { width: 132px; } .nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); } .nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .nav > ul > li > a, .nav-auf { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; text-decoration: none; font: 500 0.92rem/1 var(--f-daten); color: var(--text); background: none; border: 0; cursor: pointer; transition: background-color .25s, color .25s; } .nav > ul > li > a:hover, .nav-auf:hover, .nav a[aria-current="page"] { background: var(--blau-hauch); color: var(--blau-text); } .nav-auf .ic { width: 14px; height: 14px; transition: transform .3s var(--kurve); } .nav-auf[aria-expanded="true"] .ic { transform: rotate(180deg); } .nav-gruppe { position: relative; } .nav-liste { position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; flex-direction: column; align-items: stretch !important; padding: 8px !important; border-radius: 22px; background: var(--grund); box-shadow: 0 24px 60px -24px rgba(12, 24, 34, .26); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--kurve), visibility .25s; } .nav-auf[aria-expanded="true"] + .nav-liste, .nav-gruppe:hover .nav-liste, .nav-gruppe:focus-within .nav-liste { opacity: 1; visibility: visible; transform: none; } .nav-liste a { display: block; padding: 12px 16px; border-radius: 14px; text-decoration: none; font: 500 0.95rem/1.2 var(--f-daten); } .nav-liste a:hover, .nav-liste a[aria-current="page"] { background: var(--blau-hauch); color: var(--blau-text); } .knopf--nav { min-height: 44px; padding: 0 16px 0 20px; font-size: 0.86rem; } .menue { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); background: var(--grund); color: var(--text); font: 600 0.9rem/1 var(--f-daten); cursor: pointer; } .menue-striche { width: 18px; height: 10px; position: relative; } .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--kurve), top .4s var(--kurve); } .menue-striche::before { top: 0; } .menue-striche::after { top: 8px; } .menue[aria-expanded="true"] .menue-striche::before { top: 4px; transform: rotate(45deg); } .menue[aria-expanded="true"] .menue-striche::after { top: 4px; transform: rotate(-45deg); } @media (max-width: 1099px) { .menue { display: inline-flex; } .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s6); padding: 96px var(--rand) var(--s7); background: var(--grund); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .45s var(--kurve), visibility .3s; } .menue-offen .nav { opacity: 1; visibility: visible; transform: none; } .menue-offen body { overflow: hidden; } .nav ul { flex-direction: column; align-items: stretch; gap: 0; } .nav > ul > li { border-bottom: 1px solid var(--linie); } .nav > ul > li > a, .nav-auf { width: 100%; justify-content: space-between; padding: 18px 4px; border-radius: 0; font: 500 1.5rem/1.1 var(--f-titel); } .nav > ul > li > a:hover, .nav-auf:hover, .nav a[aria-current="page"] { background: none; } .nav-liste { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 12px !important; display: none; background: none; } .nav-auf[aria-expanded="true"] + .nav-liste { display: flex; } .nav-gruppe:hover .nav-liste { opacity: 1; } .knopf--nav { align-self: flex-start; min-height: 52px; font-size: 0.95rem; } } .flug { position: relative; } .buehne { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; } .buehne-poster, .buehne-globus, .buehne-marken { position: absolute; } .buehne-globus, .buehne-marken { inset: 0 0 0 40%; } .buehne-poster { width: min(60vw, 100svh); aspect-ratio: 1; height: auto; left: calc(40% + (60% - min(60vw, 100svh)) / 2); top: calc((100svh - min(60vw, 100svh)) / 2); transition: opacity .9s; } .buehne-globus canvas { width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--kurve); } .buehne-globus.ist-bereit canvas { opacity: 1; } .globus-an .buehne-poster { opacity: 0; } .buehne-marken { overflow: hidden; } .gm { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; font: 600 0.7rem/1 var(--f-daten); letter-spacing: 0.06em; color: var(--blau-text); white-space: nowrap; will-change: transform, opacity; transition: opacity .35s; opacity: 0; } .gm-dreieck { width: 13px; height: 11px; margin-left: -6.5px; margin-top: -11px; fill: var(--grund); stroke: var(--blau); stroke-width: 1.6; position: relative; top: 5px; } .gm-code { padding: 3px 5px; border: 1px solid currentColor; border-radius: 4px; background: color-mix(in srgb, var(--grund) 86%, transparent); } .gm-name { font-weight: 500; letter-spacing: 0.02em; color: var(--text); } .gm-km { font-weight: 400; color: var(--text-2); } .gm-name, .gm-km { display: none; } .gm--fokus .gm-name, .gm--fokus .gm-km { display: inline; } .gm--fokus .gm-code { background: var(--blau); color: #fff; border-color: var(--blau); } .gm--ab { color: var(--text-2); font-weight: 500; } .gm--ab .gm-code { display: none; } .gm--ab[data-code="FRA"] .gm-code { display: inline; border: 0; background: none; padding: 0; } .gm-kreis { width: 9px; height: 9px; border-radius: 50%; margin-left: -4.5px; border: 2px solid var(--blau); background: var(--grund); } .gm-puls { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--blau); opacity: 0; transform: scale(.3); pointer-events: none; } .gm--puls .gm-puls { animation: puls 1.6s var(--kurve); } @keyframes puls { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } } @media (max-width: 899px) { .gm:not(.gm--fokus) .gm-code { font-size: 0.62rem; } .gm--ab { display: none; } } .flug-inhalt { position: relative; } .panel { min-height: 100svh; display: flex; align-items: center; position: relative; } .panel--held { padding: 112px 0 var(--s8); } .held { position: relative; } .held-titel { max-width: 13ch; font-weight: 500; font-size: clamp(2.6rem, 5.2vw, 5rem); } .held-titel .zeile { display: inline-block; } .held-titel .zeile--leise { color: var(--text); } .held-text { max-width: 40ch; margin-top: var(--s5); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--text-2); } .held-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); margin-top: var(--s6); } .takt { display: flex; align-items: center; gap: 12px; max-width: 30ch; font: 500 0.88rem/1.35 var(--f-daten); color: var(--text-2); } .takt-ring { width: 40px; height: 40px; transform: rotate(-90deg); flex: none; } .takt-spur { fill: none; stroke: var(--linie); stroke-width: 2.5; } .takt-lauf { fill: none; stroke: var(--blau); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; } .takt--blitz .takt-ring { animation: blitz .9s var(--kurve); } @keyframes blitz { 30% { transform: rotate(-90deg) scale(1.18); } } .panel--ziel { min-height: 92svh; } .panel-karte { width: min(440px, calc(100% - 2 * var(--rand))); margin-left: max(var(--rand), calc((100vw - var(--breit)) / 2)); padding: var(--s5); border-radius: 24px; background: color-mix(in srgb, var(--grund) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 70px -40px rgba(12, 24, 34, .32); } .panel-bild { margin: 0 0 var(--s5); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; } .panel-bild img { width: 100%; height: 100%; object-fit: cover; } .panel-karte h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin: var(--s3) 0 var(--s3); color: var(--blau-text); } .panel-karte p:not(.kennung) { color: var(--text-2); } .panel-karte .textlink { margin-top: var(--s4); } .kennung { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 0.72rem/1 var(--f-daten); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .kennung-code { padding: 4px 6px; border-radius: 4px; background: var(--blau); color: #fff; } .kennung-km { font-weight: 400; letter-spacing: 0.03em; } @media (max-width: 899px) { .buehne-globus, .buehne-marken { inset: 7svh -25% 45svh -25%; } .buehne-poster { width: 48svh; left: calc(50% - 24svh); top: 7svh; } .panel--held { align-items: flex-start; padding: 0 0 var(--s7); min-height: 100svh; } .held { padding-top: 54svh; } .held-titel { font-size: clamp(2.4rem, 11vw, 3.6rem); max-width: none; } .panel--ziel { align-items: flex-end; padding-bottom: 8svh; } .panel-karte { margin-inline: auto; } } .kunden { position: relative; background: var(--grund); padding: var(--s8) 0 var(--s7); border-top: 1px solid var(--linie); } .kunden-titel { font: 500 1rem/1.4 var(--f-daten); letter-spacing: 0; color: var(--text-2); max-width: none; } .kunden-logos { list-style: none; margin: var(--s6) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6) clamp(28px, 5vw, 72px); } .kunden-logos img { height: 34px; width: auto; max-width: 210px; object-fit: contain; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kunden-logos li { background: #F4F7FB; padding: 10px 14px; border-radius: 10px; } } .strecke { position: relative; background: var(--grund); padding: var(--s9) 0; } .strecke-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6) var(--s8); align-items: start; } .strecke-kopf { grid-column: 1 / -1; max-width: 44rem; } .strecke-kopf h2 { color: var(--blau-text); } .strecke-kopf p { margin-top: var(--s5); font-size: 1.15rem; color: var(--text-2); max-width: 54ch; } .strecke-karte { position: sticky; top: 18vh; padding: var(--s6); border-radius: 26px; background: var(--nacht); color: var(--auf-nacht); box-shadow: 0 40px 80px -50px rgba(12, 24, 34, .5); } .sk-kopf { display: flex; justify-content: space-between; align-items: center; font: 600 0.75rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: var(--auf-nacht-2); } .sk-beispiel { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--nacht-linie); letter-spacing: 0.04em; } .strecke-karte dl { margin: var(--s5) 0 0; } .sk-zeile { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s4); padding: 15px 0; border-top: 1px solid var(--nacht-linie); align-items: baseline; } .sk-zeile dt { font: 500 0.82rem/1.3 var(--f-daten); color: var(--auf-nacht-2); } .sk-zeile dd { position: relative; margin: 0; font: 500 1.06rem/1.3 var(--f-daten); color: #fff; min-height: 1.3em; } .js .sk-wert { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--kurve); } .js .sk-zeile dd::before { content: ""; display: inline-block; width: 7rem; height: 0.7em; border-radius: 3px; background: var(--nacht-linie); vertical-align: middle; position: absolute; transition: opacity .4s; } .js .sk-zeile.an dd::before { opacity: 0; } .js .sk-zeile.an .sk-wert { clip-path: inset(0 0 0 0); } .sk-fuss { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--nacht-linie); font-size: 0.88rem; color: var(--auf-nacht-2); } .strecke-schritte { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; display: grid; gap: clamp(64px, 14vh, 140px); padding-block: var(--s6) 30vh; } .strecke-linie { position: absolute; left: 11px; top: 0; width: 2px; height: 100%; overflow: visible; } .strecke-linie line { stroke: var(--blau); stroke-width: 2; stroke-dasharray: 1; } .js .strecke-linie line { stroke-dashoffset: 1; } .schritt { position: relative; max-width: 34rem; opacity: .38; transition: opacity .6s var(--kurve); } .schritt.an { opacity: 1; } .schritt-punkt { position: absolute; left: -44px; top: 2px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--blau); background: var(--grund); transition: background-color .4s, transform .5s var(--kurve); } .schritt.an .schritt-punkt { background: var(--blau); transform: scale(1.1); box-shadow: 0 0 0 6px var(--blau-hauch); } .schritt-feld { font: 600 0.75rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau-text); } .schritt h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.12; margin: var(--s3) 0; } .schritt p:last-child { color: var(--text-2); } .no-js .schritt, html:not(.js) .schritt { opacity: 1; } @media (max-width: 899px) { .strecke-raster { grid-template-columns: 1fr; } .strecke-karte { position: relative; top: 0; order: 3; padding: var(--s5); } .strecke-schritte { padding-block: var(--s4) var(--s4); gap: var(--s7); } .sk-zeile { grid-template-columns: 7.5rem 1fr; } } .tafel { position: relative; background: var(--nacht); color: var(--auf-nacht); padding: var(--s9) 0; overflow: hidden; } .tafel-kopf h2, .tafel-kopf h1 { color: #fff; max-width: 16ch; font-size: clamp(2.2rem, 4.4vw, 4rem); } .tafel-kopf p { margin-top: var(--s5); font-size: 1.15rem; color: var(--auf-nacht-2); max-width: 52ch; } .tafel-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s8); } .kz-wert { font: 600 clamp(2.6rem, 5vw, 4.6rem)/1 var(--f-daten); color: #fff; } .kz-name { margin-top: var(--s4); font: 600 0.78rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: #8FB4FF; } .kz-text { margin-top: var(--s3); font-size: 0.95rem; color: var(--auf-nacht-2); max-width: 30ch; } .flap { display: inline-flex; gap: 0.06em; font-variant-numeric: tabular-nums; } .fz { display: inline-block; min-width: 0.62em; text-align: center; position: relative; } .flap--gross .fz { padding: 0.06em 0.04em; border-radius: 6px; background: linear-gradient(to bottom, #1F3A4D 0 50%, #1A3446 50% 100%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); } .flap--gross .fz::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(8, 20, 30, .65); } .fz--klapp { animation: klapp .11s ease-in; } @keyframes klapp { 0% { transform: rotateX(0); } 50% { transform: rotateX(-80deg); } 100% { transform: rotateX(0); } } .tafel-tabelle-wrap { margin-top: var(--s8); overflow-x: auto; } .tafel-tabelle { width: 100%; border-collapse: collapse; font-family: var(--f-daten); } .tafel-tabelle caption { text-align: left; font: 600 0.78rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: #8FB4FF; padding-bottom: var(--s4); } .tafel-tabelle th, .tafel-tabelle td { text-align: left; padding: 16px 12px 16px 0; border-top: 1px solid var(--nacht-linie); font-weight: 500; vertical-align: baseline; } .tafel-tabelle thead th { font-size: 0.78rem; color: var(--auf-nacht-2); border-top: 0; padding-top: 0; font-weight: 500; } .tafel-tabelle tbody th { font-size: 1.02rem; color: #fff; } .tafel-tabelle td { font-size: 1.15rem; color: #fff; white-space: nowrap; text-align: right; } .tafel-tabelle thead th:not(:first-child) { text-align: right; } .tafel-tabelle td .flap { color: #fff; } .tafel-roas td { color: var(--auf-nacht-2); font-size: 1rem; } .tafel-leer { font-size: 0.85rem; color: var(--auf-nacht-2); } .tafel-roas td .flap { font-size: 1.15rem; margin-right: 6px; color: #fff; } .tafel-quelle { margin-top: var(--s5); font-size: 0.82rem; line-height: 1.5; color: var(--auf-nacht-2); max-width: 90ch; } .tafel--seite { padding-top: 140px; } .text-spalte .tafel-tabelle-wrap { background: var(--nacht); border-radius: var(--r-bild); padding: var(--s5); margin: var(--s5) 0; color: var(--auf-nacht); } @media (max-width: 899px) { .tafel-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); } .tafel-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tafel-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--nacht-linie); } .tafel-tabelle th, .tafel-tabelle td { border: 0; padding: 0; text-align: left; white-space: normal; } .tafel-tabelle tbody th { grid-column: 1 / -1; font-size: 1rem; } .tafel-tabelle td::before { content: attr(data-label); display: block; font-size: 0.72rem; color: var(--auf-nacht-2); margin-bottom: 4px; } .tafel-roas td { grid-column: 1 / -1; } .text-spalte .tafel-tabelle-wrap { padding: var(--s4); } } .faelle { padding: var(--s9) 0; background: var(--grund); } .faelle h2 { max-width: 14ch; color: var(--blau-text); } .faelle-raster { margin-top: var(--s7); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s7) var(--s5); align-items: start; } .fall { margin: 0; } .fall-bild { border-radius: var(--r-bild); overflow: hidden; background: var(--flaeche); transform-style: preserve-3d; will-change: transform; } .fall-bild img { width: 100%; height: auto; } .fall:nth-child(1) { grid-column: 1 / span 4; } .fall:nth-child(2) { grid-column: 6 / span 7; margin-top: var(--s9); } .fall:nth-child(3) { grid-column: 1 / span 7; } .fall:nth-child(4) { grid-column: 9 / span 4; margin-top: var(--s8); } .fall figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: var(--s4); font-family: var(--f-daten); } .fall-kunde { width: 100%; font: 600 0.78rem/1.2 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .fall-zahl { font-size: 1.4rem; font-weight: 600; color: var(--blau-text); } .fall-kosten { font-size: 1rem; color: var(--text); } @media (max-width: 899px) { .faelle-raster { grid-template-columns: 1fr; gap: var(--s7); } .fall:nth-child(n) { grid-column: 1; margin-top: 0; } .fall--hoch { width: 78%; } .fall--hoch:nth-child(4) { margin-left: auto; } .fall-zahl { font-size: 1.15rem; } } .leistungen { padding: var(--s9) 0; background: var(--flaeche); } .leistungen--seite { background: var(--grund); padding-top: 0; } .leistungen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } .leistungen-kopf { position: sticky; top: 120px; } .leistungen-kopf h2 { color: var(--blau-text); } .leistungen-kopf p { margin-top: var(--s5); color: var(--text-2); } .leistungsliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); } .leistung { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s5); padding: var(--s6) var(--s5); border-bottom: 1px solid var(--linie); text-decoration: none; isolation: isolate; overflow: hidden; border-radius: 0; transition: color .45s var(--kurve), border-radius .45s; } .leistung::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blau); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--kurve); } .leistung:hover, .leistung:focus-visible { color: #fff; border-radius: var(--r-bild); } .leistung:hover::before, .leistung:focus-visible::before { clip-path: inset(0 0 0 0); } .leistung-kurz { grid-column: 1; font: 600 0.75rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau-text); transition: color .45s; } .leistung-name { grid-column: 1; font: 500 clamp(1.7rem, 3vw, 2.6rem)/1.08 var(--f-titel); letter-spacing: -0.02em; } .leistung-satz { grid-column: 1; color: var(--text-2); max-width: 52ch; transition: color .45s; } .leistung .ic { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 30px; height: 30px; color: var(--blau-text); transition: transform .5s var(--kurve), color .45s; } .leistung:hover .leistung-kurz, .leistung:hover .leistung-satz, .leistung:hover .ic, .leistung:focus-visible .leistung-kurz, .leistung:focus-visible .leistung-satz, .leistung:focus-visible .ic { color: #fff; } .leistung:hover .ic { transform: translateX(6px); } @media (max-width: 899px) { .leistungen-raster { grid-template-columns: 1fr; gap: var(--s6); } .leistungen-kopf { position: static; } .leistung { padding: var(--s5) var(--s3); } } .plan { padding: var(--s9) 0; background: var(--grund); overflow: hidden; } .plan h2 { color: var(--blau-text); } .plan-bahn { position: relative; margin-top: var(--s7); } .plan-route { width: 100%; height: 160px; overflow: visible; } .plan-route path { fill: none; stroke: var(--blau); stroke-width: 2; stroke-dasharray: 1; } .js .plan-route path { stroke-dasharray: 1; stroke-dashoffset: 1; } .plan-flieger { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: var(--blau); color: #fff; opacity: 0; box-shadow: 0 0 0 6px var(--blau-hauch); } .ic-flieger { width: 20px; height: 20px; transform: rotate(-45deg); } .plan-liste { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); } .plan-schritt { position: relative; padding-top: var(--s5); border-top: 1px solid var(--linie); transition: opacity .5s; } .js .plan-schritt { opacity: .4; } .js .plan-schritt.an { opacity: 1; } .plan-wegpunkt { display: block; width: 16px; height: 14px; margin-bottom: var(--s4); background: var(--blau); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .plan-schritt h3 { font-size: 1.5rem; color: var(--blau-text); } .plan-schritt p { margin-top: var(--s3); color: var(--text-2); } @media (max-width: 899px) { .plan-route, .plan-flieger { display: none; } .plan-liste { grid-template-columns: 1fr; gap: 0; margin-top: 0; } .plan-schritt { padding: var(--s5) 0 var(--s5) 36px; border-top: 0; border-left: 2px solid var(--linie); } .plan-schritt.an { border-left-color: var(--blau); } .plan-wegpunkt { position: absolute; left: -9px; top: var(--s5); } } .vorteile { padding: var(--s9) 0; background: var(--flaeche); } .vorteile-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); align-items: center; } .vorteile-bild { margin: 0; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 4 / 5; } .vorteile-bild img { width: 100%; height: 100%; object-fit: cover; } .vorteile-text h2 { color: var(--blau-text); max-width: 12ch; } .vorteile-text dl { margin: var(--s7) 0 0; display: grid; gap: var(--s6); } .vorteil dt { font: 500 1.35rem/1.2 var(--f-titel); } .vorteil dd { margin: var(--s2) 0 0; color: var(--text-2); max-width: 48ch; } @media (max-width: 899px) { .vorteile-raster { grid-template-columns: 1fr; gap: var(--s7); } .vorteile-bild { aspect-ratio: 4 / 3; } } .stimmen { padding: var(--s9) 0; background: var(--grund); } .stimmen h2 { color: var(--blau-text); } .stimmen-raster { margin-top: var(--s7); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s7) var(--s6); } .stimme { margin: 0; } .stimme--0 { grid-column: 1 / span 7; } .stimme--1 { grid-column: 8 / span 5; margin-top: var(--s9); } .stimme--2 { grid-column: 3 / span 7; } .stimme blockquote { margin: 0; } .stimme blockquote p { font: 400 clamp(1.3rem, 2.2vw, 1.9rem)/1.32 var(--f-titel); letter-spacing: -0.01em; } .stimme--0 blockquote p { font-size: clamp(1.5rem, 2.8vw, 2.4rem); } .stimme blockquote p::before { content: "„"; } .stimme blockquote p::after { content: "“"; } .stimme figcaption { margin-top: var(--s5); display: flex; gap: 10px; align-items: baseline; font-family: var(--f-daten); } .stimme-name { font-weight: 600; color: var(--blau-text); } .stimme-rolle { color: var(--text-2); font-size: 0.92rem; } @media (max-width: 899px) { .stimmen-raster { grid-template-columns: 1fr; gap: var(--s7); } .stimme--0, .stimme--1, .stimme--2 { grid-column: 1; margin-top: 0; } } .angebot { position: relative; background: var(--blau); color: var(--auf-blau); padding: var(--s9) 0; overflow: hidden; isolation: isolate; } .angebot-rose { position: absolute; right: -14vw; top: 50%; width: min(78vw, 980px); aspect-ratio: 1; transform: translateY(-50%); z-index: -1; opacity: .2; } .angebot-rose svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1; } .angebot-rose text { fill: #fff; stroke: none; font: 600 9px var(--f-daten); letter-spacing: 0.08em; } .angebot-rose path { fill: #fff; stroke: none; } .angebot-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: end; } .angebot h1, .angebot h2 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.9rem); max-width: 17ch; } .angebot-text > p { margin-top: var(--s5); font-size: 1.15rem; max-width: 50ch; color: rgba(255, 255, 255, .88); } .angebot-liste { list-style: none; margin: var(--s6) 0 var(--s6); padding: 0; display: grid; gap: var(--s4); max-width: 58ch; } .angebot-liste li { position: relative; padding-left: 30px; color: rgba(255, 255, 255, .92); } .angebot-liste li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 12px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .angebot .textlink { margin-left: var(--s5); } .garantie { padding: var(--s6); border-radius: 26px; background: #fff; color: var(--nacht); } .garantie-titel { font: 600 0.78rem/1 var(--f-daten); letter-spacing: 0.1em; text-transform: uppercase; color: #0047D6; } .garantie-text { margin-top: var(--s4); font: 500 clamp(1.35rem, 2.1vw, 1.75rem)/1.28 var(--f-titel); letter-spacing: -0.01em; color: #0C1822; } .garantie-fuss { margin-top: var(--s5); font-size: 0.92rem; color: #4A5A67; } .angebot--kopf { padding-top: 150px; } @media (max-width: 899px) { .angebot-raster { grid-template-columns: 1fr; gap: var(--s7); } .angebot .textlink { margin-left: 0; display: flex; width: max-content; } .angebot-rose { right: -50vw; width: 130vw; opacity: .14; } } .fragen { padding-block: var(--s9); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); } .fragen > h2 { color: var(--blau-text); } .fragen-liste { border-top: 1px solid var(--linie); } .frage { border-bottom: 1px solid var(--linie); } .frage summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); padding: var(--s5) 0; cursor: pointer; } .frage summary::-webkit-details-marker { display: none; } .frage summary h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); } .ic-plus { width: 26px; height: 26px; color: var(--blau-text); transition: transform .45s var(--kurve); } .frage[open] .ic-plus { transform: rotate(45deg); } .frage summary:hover h3 { color: var(--blau-text); } .antwort { padding: 0 var(--s7) var(--s5) 0; color: var(--text-2); max-width: 70ch; } @media (max-width: 899px) { .fragen { grid-template-columns: 1fr; gap: var(--s5); } .antwort { padding-right: 0; } } .kontakt { padding: var(--s9) 0; background: var(--flaeche); } .kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } .kontakt-text h2 { color: var(--blau-text); } .kontakt-text > p { margin-top: var(--s5); color: var(--text-2); max-width: 46ch; } .kontakt-ablauf { margin: var(--s6) 0 0; padding: 0; list-style: none; counter-reset: k; display: grid; gap: var(--s4); } .kontakt-ablauf li { counter-increment: k; position: relative; padding-left: 44px; color: var(--text-2); } .kontakt-ablauf li::before { content: counter(k); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 0.85rem/1 var(--f-daten); background: var(--blau); color: #fff; } .kontakt-ablauf strong { color: var(--text); font-weight: 400; font-family: var(--f-daten); } .formular { padding: var(--s6); border-radius: 26px; background: var(--grund); border: 1px solid var(--linie); display: grid; gap: var(--s4); } .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } .feld { display: grid; gap: 6px; } .feld label { font: 500 0.88rem/1.2 var(--f-daten); color: var(--text); } .feld label span { color: var(--blau-text); margin-left: 2px; } .feld input, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r-feld); border: 1px solid color-mix(in srgb, var(--text-2) 45%, transparent); background: var(--grund); color: var(--text); font: 400 1rem/1.4 var(--f-text); caret-color: var(--blau); transition: border-color .2s, box-shadow .2s; } .feld textarea { resize: vertical; min-height: 120px; } .feld input:focus, .feld textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blau) 18%, transparent); } .feld [aria-invalid="true"] { border-color: #C42B1C; } .fehler:empty { display: none; } .fehler { font-size: 0.85rem; color: #B42318; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fehler { color: #FF8A80; } :root:not([data-theme="light"]) .feld [aria-invalid="true"] { border-color: #FF8A80; } } .hilfe { font-size: 0.82rem; color: var(--text-2); } .einwilligung { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 0.9rem; color: var(--text-2); } .einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blau); } .knopf--senden { justify-self: start; margin-top: var(--s2); } .knopf.laedt { opacity: .7; pointer-events: none; } .formular-status { font-size: 0.92rem; color: var(--text-2); min-height: 1.4em; } .formular-status--fehler { color: #B42318; } .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .danke { padding: var(--s6) 0; outline: none; } .danke-titel { font: 500 1.8rem/1.15 var(--f-titel); color: var(--blau-text); margin-bottom: var(--s3); } @media (max-width: 899px) { .kontakt-raster { grid-template-columns: 1fr; gap: var(--s7); } .formular { padding: var(--s5); } } @media (max-width: 560px) { .feld-paar { grid-template-columns: 1fr; } } .band { background: var(--blau); color: #fff; padding: var(--s7) 0; } .band-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); } .band-text { font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.2 var(--f-titel); max-width: 30ch; } .krumen { padding-top: 104px; } .krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 0.82rem/1.4 var(--f-daten); color: var(--text-2); } .krumen li + li::before { content: "/"; margin-right: 6px; color: var(--linie); } .krumen a { text-decoration: none; } .krumen a:hover { color: var(--blau-text); } .seitenkopf { padding: var(--s6) 0 var(--s9); } .seitenkopf--schmal { padding-bottom: var(--s7); } .seitenkopf--schmal h1 { margin-top: var(--s4); } .seitenkopf-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s8); align-items: center; } .seitenkopf h1 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); } .seitenkopf .lead { margin: var(--s5) 0 var(--s6); font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 52ch; } .seitenkopf--schmal .lead { margin-bottom: 0; } .foto-kopf { position: relative; margin: 0; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 4 / 3; } .foto-kopf img { width: 100%; height: 100%; object-fit: cover; } .foto-kopf .kennung { position: absolute; left: 14px; bottom: 14px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--grund) 90%, transparent); } .karten-kopf { border-radius: var(--r-bild); background: var(--blau-hauch); padding: var(--s5); } .routenkarte { width: 100%; height: auto; overflow: visible; } .rk-netz { stroke: color-mix(in srgb, var(--blau) 22%, transparent); stroke-width: 1; } .rk-bogen { fill: none; stroke: var(--blau); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 0; } .rk-wegpunkt { fill: var(--grund); stroke: var(--blau); stroke-width: 2; } .rk-herkunft { fill: var(--blau); } .rk-herkunft-ring { fill: none; stroke: var(--blau); stroke-width: 1.5; } .rk-code { font: 600 15px var(--f-daten); fill: var(--blau-text); letter-spacing: 0.06em; } .rk-km { font: 400 12px var(--f-daten); fill: var(--text-2); } .text-spalte { max-width: calc(48rem + 2 * var(--rand)); padding-bottom: var(--s9); } .abschnitt + .abschnitt { margin-top: var(--s8); } .abschnitt h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); color: var(--blau-text); margin-bottom: var(--s5); } .abschnitt p + p { margin-top: var(--s4); } .abschnitt a { color: var(--blau-text); } .liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); } .liste li { position: relative; padding-left: 26px; } .liste li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 10px; background: var(--blau); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .recht { max-width: calc(48rem + 2 * var(--rand)); } .recht h2 { font-size: 1.4rem; color: var(--blau-text); margin: var(--s6) 0 var(--s3); } .recht p + p { margin-top: var(--s3); } .recht a { color: var(--blau-text); word-break: break-word; } .querverweise { padding-block: var(--s8); } .querverweise h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--blau-text); } .querverweise ul { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); } .querverweise a { height: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s4); padding: var(--s5); border-radius: var(--r-bild); border: 1px solid var(--linie); text-decoration: none; transition: border-color .3s, background-color .3s; } .querverweise a:hover { border-color: var(--blau); background: var(--blau-hauch); } .qv-name { font: 500 1.2rem/1.2 var(--f-titel); color: var(--blau-text); } .qv-satz { grid-column: 1; font-size: 0.92rem; color: var(--text-2); } .querverweise .ic { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--blau-text); } @media (max-width: 899px) { .seitenkopf-raster { grid-template-columns: 1fr; gap: var(--s6); } .krumen { padding-top: 92px; } .seitenkopf { padding-bottom: var(--s7); } } .fuss { background: var(--nacht-tief); color: var(--auf-nacht-2); padding: var(--s8) 0 var(--s5); } .fuss-raster { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--s7); } .fuss-marke p { margin: var(--s5) 0 var(--s5); max-width: 36ch; } .fuss-titel { font: 600 0.75rem/1 var(--f-daten); letter-spacing: 0.08em; text-transform: uppercase; color: #8FB4FF; margin-bottom: var(--s4); } .fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .fuss a { text-decoration: none; color: var(--auf-nacht); } .fuss a:hover { color: #fff; text-decoration: underline; } .fuss .knopf { color: var(--blau); text-decoration: none; } .fuss-unten { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--nacht-linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); font-size: 0.88rem; } .fuss-unten ul { display: flex; gap: var(--s5); } @media (max-width: 899px) { .fuss-raster { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js .sk-wert { clip-path: none; } .js .sk-zeile dd::before { display: none; } .js .plan-route path { stroke-dashoffset: 0; } }