@font-face {
font-family: "Red Hat Display";
src: url("fonts/red-hat-display-latin.woff2") format("woff2");
font-weight: 500 800;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: light;
--bg: #f7f5f1;
--surface: #fffdf9;
--ink: #173021;
--muted: #5b6a5f;
--accent: #006b25;
--accent-ink: #ffffff;
--line: #e4e0d7;
--line-strong: #c9c3b6;
--accent-line: #b7cfbf;
--accent-soft: #ecf2ed;
--panel: #0c1a12;
--needle-tail: #b3b7ab;
--brass: #9a9488;
--brass-soft: rgba(23, 48, 33, 0.22);
--brass-line: rgba(23, 48, 33, 0.16);
--brass-wash: rgba(23, 48, 33, 0.04);
--veil: rgba(247, 245, 241, 0.86);
--grid: rgba(23, 48, 33, 0.03);
--grid-major: rgba(23, 48, 33, 0.06);
--sheen: rgba(255, 255, 255, 0.42);
--sheen-flank: rgba(23, 48, 33, 0.03);
--sheen-tap: rgba(255, 255, 255, 0.22);
--sheen-tap-flank: rgba(23, 48, 33, 0.015);
--edge: rgba(255, 255, 255, 0.85);
--shadow: 0 1px 2px rgba(23, 48, 33, 0.04), 0 5px 14px rgba(23, 48, 33, 0.05),
0 16px 38px rgba(23, 48, 33, 0.055);
--shadow-lift: 0 1px 2px rgba(23, 48, 33, 0.05), 0 8px 20px rgba(23, 48, 33, 0.08),
0 26px 54px rgba(23, 48, 33, 0.1);
--radius: 14px;
--radius-sm: 8px;
--tape: 9px;
--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
--dur-1: 240ms;
--dur-2: 480ms;
--dur-3: 720ms;
--stagger: 80ms;
--dur-sheen: 2640ms;
--rise: 10px;
--dur-reveal: var(--dur-1);
--wf-track: 155vh;
--nav-h: 2.65rem;
--felt-focus: 50% 40%;
--felt-light: rgba(150, 205, 172, 0.072);
--felt-vignette: rgba(0, 0, 0, 0.66);
--felt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)' opacity='0.055'/%3E%3Crect width='320' height='320' filter='url(%23f)' opacity='0.17'/%3E%3C/svg%3E");
--felt:
radial-gradient(112% 96% at var(--felt-focus), transparent 28%, var(--felt-vignette) 100%),
radial-gradient(74% 56% at var(--felt-focus), var(--felt-light), transparent 78%),
var(--felt-grain);
--display-sans: "Red Hat Display", "Segoe UI Variable Display", system-ui, sans-serif;
--display-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
Georgia, "Times New Roman", serif;
--font-display: var(--display-serif);
--font-ui: "Red Hat Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
--t-mark: 0.68rem;
--t-eyebrow: 0.72rem;
--t-micro: 0.8rem;
--t-small: 0.88rem;
--t-body: 1rem;
--t-lead: 1.15rem;
--t-h4: 1.3rem;
--t-h3: 1.5rem;
--t-h2: 1.75rem;
--t-h1: 2.1rem;
--measure: 62ch;
--measure-intro: 72ch;
--shell: 46rem;
--gutter: 1.15rem;
}
.band,
.panel,
.person-mono {
--ink: #f2f4f0;
--muted: #b3bbb4;
--accent: #a8dcbc;
--accent-ink: #10261a;
--accent-line: rgba(168, 220, 188, 0.42);
--accent-soft: rgba(168, 220, 188, 0.12);
--surface: rgba(255, 255, 255, 0.05);
--line: rgba(255, 255, 255, 0.14);
--line-strong: rgba(255, 255, 255, 0.26);
--edge: rgba(255, 255, 255, 0.07);
--brass: #c2a878;
--brass-soft: rgba(194, 168, 120, 0.3);
--brass-line: rgba(194, 168, 120, 0.4);
--brass-wash: rgba(194, 168, 120, 0.07);
--needle-tail: #5f5a51;
--sheen: rgba(255, 255, 255, 0.055);
--sheen-flank: rgba(194, 168, 120, 0.028);
--sheen-tap: rgba(255, 255, 255, 0.032);
--sheen-tap-flank: rgba(194, 168, 120, 0.016);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.22);
--shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.34), 0 10px 26px rgba(0, 0, 0, 0.3);
background: var(--panel);
color: var(--ink);
position: relative;
isolation: isolate;
}
.band::before,
.panel::after,
.wf-stage::before,
.person-mono::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
border-radius: inherit;
background-image: var(--felt);
background-repeat: no-repeat, no-repeat, repeat;
}
.intermezzo,
.wf-stage,
.person-mono {
--felt-focus: 50% 50%;
}
.panel {
--felt-focus: 50% 46%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0 0 3rem;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
overflow-wrap: break-word;
}
.skip-link {
position: absolute;
top: -100vh;
left: 1rem;
z-index: 60;
padding: 0.55rem 1rem;
background: var(--ink);
color: var(--bg);
border-radius: 999px;
font-family: var(--font-ui);
font-weight: 600;
text-decoration: none;
}
.skip-link:focus-visible {
top: 1rem;
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 56px),
repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 56px),
repeating-linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px 224px),
repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 224px);
}
[hidden] {
display: none !important;
}
img {
max-width: 100%;
height: auto;
}
::selection {
background: var(--accent);
color: var(--accent-ink);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
[id] {
scroll-margin-top: 4.6rem;
}
:is(section, div)[tabindex="-1"]:focus {
outline: none;
}
h1,
h2,
h3,
h4,
h5 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.005em;
margin: 0 0 0.5rem;
text-wrap: balance;
overflow-wrap: normal;
word-break: normal;
}
h1 {
font-size: clamp(2.1rem, 8vw, 2.9rem);
letter-spacing: -0.02em;
}
h2 {
font-size: var(--t-h3);
margin-bottom: 0.9rem;
}
h3 {
font-size: var(--t-h4);
}
h4 {
font-size: var(--t-body);
}
p {
margin: 0 0 0.9rem;
max-width: var(--measure);
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--accent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
strong {
font-weight: 700;
}
.intro {
color: var(--muted);
}
.kicker {
margin: 0 0 0.45rem;
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.section-nav a,
.stand,
.flag,
.tile-sub,
.wf-kind,
.header-meta,
.promo-badge,
.rec-plan {
font-family: var(--font-ui);
}
.stand,
.header-meta,
.rec-cost,
.price-main,
.price-note,
.price-eur,
.plan-eur,
.plan-price,
.wf-num,
.wf-cost,
.provider-limits {
font-variant-numeric: tabular-nums;
}
.promo-badge,
.flag,
.wf-kind {
white-space: nowrap;
}
.wrap {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding-inline: var(--gutter);
}
.chapter {
margin-block: 3rem;
}
.chapter.band {
margin-block: 3.5rem;
padding-block: 2.15rem 2.4rem;
}
.sec-rail {
margin-bottom: 1.35rem;
}
.intermezzo {
margin-block: 2.6rem;
padding-block: 1.3rem 1.4rem;
}
.intermezzo .sec-rail {
margin-bottom: 0.5rem;
}
.intermezzo .kicker {
margin-bottom: 0;
}
.intermezzo-line {
margin: 0;
max-width: 52ch;
font-family: var(--font-display);
font-size: var(--t-body);
line-height: 1.5;
color: var(--ink);
text-wrap: balance;
}
#task-details > .chapter {
margin-top: 3.6rem;
}
#task-details > .chapter:first-child {
margin-top: 0;
}
.chapter-rule {
position: relative;
height: 1.5px;
margin-bottom: 2rem;
border-radius: 2px;
background: var(--line);
}
.chapter-rule-fill {
position: relative;
display: block;
height: 100%;
width: calc(var(--p, 0) * 100%);
border-radius: inherit;
background: var(--accent);
}
.chapter-rule-fill::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 5px;
height: 5px;
margin: -2.5px -2.5px 0 0;
border-radius: 50%;
background: var(--accent);
}
.site-header .wrap::after,
body > footer .wrap::before {
content: "";
display: block;
height: 11px;
background-image:
repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 8px),
repeating-linear-gradient(90deg, var(--brass-soft) 0 1px, transparent 1px 40px);
background-size: 100% 5px, 100% 10px;
background-position: left bottom, left bottom;
background-repeat: no-repeat;
opacity: 0.9;
}
.site-header {
padding-top: 1.1rem;
}
.site-header .wrap {
position: relative;
}
.hero {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 108px;
object-fit: contain;
margin-bottom: 1.35rem;
}
.site-header h1 {
margin-bottom: 0.35rem;
}
.site-header .subtitle {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--t-lead);
line-height: 1.4;
color: var(--muted);
margin-bottom: 0.7rem;
text-wrap: balance;
}
.header-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: baseline;
gap: 0 0.45rem;
max-width: none;
margin: 1.5rem 0 0.55rem;
font-size: var(--t-mark);
line-height: 1.4;
letter-spacing: 0.03em;
color: var(--muted);
}
.meta-checked,
.meta-by {
white-space: nowrap;
}
.meta-by::before {
content: "";
display: inline-block;
width: 0.75rem;
height: 1px;
margin-right: 0.45rem;
vertical-align: 0.28em;
background: var(--brass-line);
}
.header-cta {
max-width: none;
margin: 1.05rem 0 0.9rem;
}
.cta-primary {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0 0.8rem;
width: 100%;
min-height: 3rem;
padding: 0.7rem 0.95rem 0.75rem;
border: 1px solid var(--brass-line);
border-radius: 3px;
background: transparent;
color: var(--ink);
text-decoration: none;
transition: border-color var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease);
}
.cta-mark {
display: grid;
place-items: center;
color: var(--muted);
}
.cta-compass {
display: block;
overflow: visible;
}
.cta-compass-ring,
.cta-compass-ticks {
opacity: 0.4;
}
.cta-needle-n {
fill: var(--accent);
}
.cta-needle-s {
fill: var(--needle-tail);
}
.cta-text {
display: block;
min-width: 0;
}
.cta-lead {
display: block;
margin-bottom: 0.18rem;
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
}
.cta-main {
display: block;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--t-lead);
line-height: 1.3;
color: var(--ink);
text-wrap: balance;
}
.cta-arrow {
align-self: center;
padding-left: 0.4rem;
font-size: var(--t-lead);
line-height: 1;
color: var(--accent);
transition: transform var(--dur-1) var(--ease);
}
.cta-primary:hover,
.cta-primary:focus-visible {
border-color: var(--brass-soft);
background-color: var(--brass-wash);
}
.cta-primary:hover .cta-arrow,
.cta-primary:focus-visible .cta-arrow {
transform: translateX(3px);
}
.site-header .wrap::before {
content: "";
position: absolute;
left: var(--gutter);
bottom: 0;
width: 2px;
height: 11px;
background: var(--accent);
z-index: 1;
}
.section-nav {
position: sticky;
top: 0;
z-index: 30;
background: var(--veil);
border-bottom: 1px solid var(--line-strong);
box-shadow: 0 10px 20px -18px rgba(23, 48, 33, 0.5);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
isolation: isolate;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.section-nav {
background: var(--bg);
}
}
.section-nav-inner {
display: flex;
gap: 0.3rem;
width: 100%;
max-width: var(--shell);
margin-inline: auto;
padding: 0.3rem calc(var(--gutter) - 0.85rem);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
}
.section-nav-inner::-webkit-scrollbar {
display: none;
}
.section-nav a {
flex: none;
padding: 0.55rem 1rem;
border-radius: 999px;
background: var(--surface);
box-shadow: inset 0 0 0 1px var(--line-strong);
color: var(--ink);
font-size: var(--t-small);
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.section-nav a:hover {
color: var(--accent);
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent-line);
}
.section-nav a.is-here {
color: var(--accent-ink);
background: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
@media (max-width: 479px) {
.section-nav-inner {
gap: 0.35rem;
}
.section-nav a {
padding-inline: 0.8rem;
font-size: var(--t-mark);
letter-spacing: 0.01em;
}
}
summary {
cursor: pointer;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
.dtl {
margin-top: 0.85rem;
}
.dtl > summary {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 2.75rem;
padding: 0.7rem 0;
font-family: var(--font-ui);
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
transition: color var(--dur-1) var(--ease);
}
.dtl > summary:hover,
.dtl > summary:focus-visible {
color: var(--accent);
}
.dtl > summary::after,
.provider-card > summary::after,
.promo > summary::after {
content: "";
width: 0.42rem;
height: 0.42rem;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.dtl[open] > summary::after,
.provider-card[open] > summary::after,
.promo[open] > summary::after {
transform: translateY(1px) rotate(225deg);
}
.dtl-body {
padding-top: 0.15rem;
}
.dtl > .dtl-body > p,
.dtl > .dtl-body > .rec-cost > p {
margin: 0;
font-size: var(--t-small);
color: var(--muted);
}
.rec .dtl-body {
text-align: center;
}
.rec .dtl-body .daten-liste {
display: inline-grid;
text-align: left;
}
.rec-cost > p + p,
.rec-cost > p + ul,
.rec-cost > ul + p {
margin-top: 0.5rem;
}
details[open] > .dtl-body {
animation: tk-reveal var(--dur-1) var(--ease) both;
}
@keyframes tk-reveal {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: none; }
}
.tile,
.to-top,
.rec-link,
.section-nav a {
position: relative;
overflow: hidden;
}
.tile::before,
.to-top::before,
.rec-link::before,
.section-nav a::before {
content: "";
position: absolute;
top: -25%;
bottom: -25%;
left: 0;
width: 48%;
pointer-events: none;
z-index: 2;
background: linear-gradient(
100deg,
transparent 0%,
var(--sheen-flank) 30%,
var(--sheen) 50%,
var(--sheen-flank) 70%,
transparent 100%
);
transform: translateX(-190%);
opacity: 0;
will-change: transform, opacity;
}
@media (hover: hover) and (pointer: fine) {
.tiles .tile:hover::before,
.tiles .tile:focus-visible::before,
.rec-link:hover::before,
.rec-link:focus-visible::before,
.section-nav a:hover::before,
.section-nav a:focus-visible::before {
animation: tk-sheen var(--dur-sheen) var(--ease) both;
}
}
.is-tapped::before {
width: 38%;
background: linear-gradient(
100deg,
transparent 0%,
var(--sheen-tap-flank) 30%,
var(--sheen-tap) 50%,
var(--sheen-tap-flank) 70%,
transparent 100%
);
animation: tk-sheen var(--dur-sheen) var(--ease) both;
}
.to-top:hover::before,
.to-top:focus-visible::before {
animation: tk-sheen var(--dur-sheen) var(--ease) both;
}
@keyframes tk-sheen {
0%   { transform: translateX(-190%); opacity: 0; }
20%  { opacity: 1; }
80%  { opacity: 1; }
100% { transform: translateX(330%); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
.js .reveal {
opacity: 0;
transform: translateY(var(--rise));
}
.js .reveal.is-in {
opacity: 1;
transform: none;
transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .recs > .rec:nth-child(2).is-in { transition-delay: var(--stagger); }
.js .recs > .rec:nth-child(3).is-in { transition-delay: calc(var(--stagger) * 2); }
.js .persons > .person:nth-child(2).is-in { transition-delay: var(--stagger); }
.js .wf-chain .wf-step .wf-num {
opacity: 0;
transform: scale(0.8);
}
.js .wf-chain .wf-step.is-lit .wf-num {
opacity: 1;
transform: none;
transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .wf-chain .wf-step > a,
.js .wf-chain .wf-step > .wf-tools,
.js .wf-chain .wf-step .wf-cost,
.js .wf-chain .wf-step .dtl {
opacity: 0;
transform: translateY(var(--rise));
}
.js .wf-chain .wf-step.is-lit > a,
.js .wf-chain .wf-step.is-lit > .wf-tools,
.js .wf-chain .wf-step.is-lit .wf-cost,
.js .wf-chain .wf-step.is-lit .dtl {
opacity: 1;
transform: none;
transition: opacity var(--dur-reveal) var(--ease) var(--stagger),
transform var(--dur-reveal) var(--ease) var(--stagger);
}
.js .chapter-head.reveal .chapter-icon {
transform: scale(1.06);
}
.js .chapter-head.reveal.is-in .chapter-icon {
transform: none;
transition: transform var(--dur-reveal) var(--ease) var(--stagger);
}
}
.panel {
position: relative;
overflow: hidden;
border-radius: var(--radius);
padding: 1.35rem 1.15rem 1.3rem;
box-shadow: var(--shadow);
}
.panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
}
.panel h2 {
font-size: var(--t-h4);
margin-bottom: 0.35rem;
color: var(--ink);
}
.panel .intro {
font-size: var(--t-small);
margin-bottom: 0.85rem;
}
.promo-list {
display: grid;
gap: 0.6rem;
}
.promo {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: inset 0 1px 0 var(--edge);
}
.promo > summary {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.7rem 0.9rem;
min-height: 2.9rem;
}
.promo-tool {
font-family: var(--font-ui);
font-weight: 700;
flex: 1 1 auto;
line-height: 1.3;
}
.promo-kind {
margin-left: 0.5rem;
font-family: var(--font-ui);
font-size: var(--t-micro);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--brass);
}
.promo-abgelaufen .promo-kind {
color: var(--muted);
}
.promo-badge {
padding: 0.14rem 0.55rem;
border-radius: 999px;
background: var(--accent);
color: var(--accent-ink);
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.02em;
}
.promo-stufe-endspurt .promo-badge {
background: var(--brass);
color: #1b1206;
}
.promo-stufe-endspurt {
box-shadow: inset 3px 0 0 var(--brass);
}
.promo-stufe-endspurt .promo-kind {
color: var(--brass);
}
.promo-stufe-abgelaufen {
opacity: 0.62;
box-shadow: inset 3px 0 0 var(--line);
}
.promo-stufe-abgelaufen .promo-badge {
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.promo-dauerhaft .promo-badge {
background: transparent;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--muted);
font-weight: 600;
}
.promo > .dtl-body {
padding: 0 0.9rem 0.9rem;
font-size: var(--t-small);
}
.promo-until {
display: block;
margin-top: 0.6rem;
font-size: var(--t-micro);
color: var(--muted);
}
.promo-abgelaufen .promo-tool {
color: var(--muted);
}
.promo-abgelaufen .promo-badge {
background: transparent;
box-shadow: inset 0 0 0 1px var(--line);
color: var(--muted);
}
.promo-empty {
margin: 0;
font-size: var(--t-small);
color: var(--muted);
}
.promo-hint {
margin: 0.9rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--accent-line);
font-size: var(--t-small);
color: var(--muted);
}
.promo-hint a {
color: var(--accent);
font-weight: 600;
text-decoration: none;
border-bottom: 1.5px solid var(--accent-line);
}
.promo-hint a:hover,
.promo-hint a:focus-visible {
border-bottom-color: var(--accent);
}
.tiles {
display: grid;
gap: 0.7rem;
}
.tile {
display: flex;
align-items: center;
gap: 0.85rem;
min-height: 4.25rem;
padding: 0.7rem 2.1rem 0.7rem 0.8rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
text-decoration: none;
box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tile-title {
font-family: var(--font-ui);
font-weight: 700;
min-width: 0;
font-size: var(--t-body);
line-height: 1.25;
letter-spacing: -0.01em;
hyphens: manual;
}
.tile::after {
content: "";
position: absolute;
right: 1rem;
top: 50%;
width: 0.5rem;
height: 0.5rem;
margin-top: -0.3rem;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tile:hover,
.tile:focus-visible {
border-color: var(--accent-line);
box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge);
transform: translateY(-1px);
}
.tile:hover::after,
.tile:focus-visible::after {
border-color: var(--accent);
transform: rotate(-45deg) translate(2px, 2px);
}
.tile-radar {
grid-column: 1 / -1;
gap: 1rem;
padding: 0.95rem 2.4rem 1rem 1rem;
border-color: var(--brass-line);
background: linear-gradient(180deg, var(--brass-wash), transparent 65%), var(--surface);
box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
}
.tile-radar:hover,
.tile-radar:focus-visible {
border-color: var(--brass);
box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge);
}
.tile-radar::after,
.tile-radar:hover::after,
.tile-radar:focus-visible::after {
border-color: var(--brass);
}
.tile-text {
display: grid;
gap: 0.1rem;
min-width: 0;
}
.tile-radar .tile-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-h4);
letter-spacing: -0.005em;
}
.tile-sub {
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.tile-icon-radar {
width: 2.9rem;
height: 2.9rem;
border: 0;
background: none;
border-radius: 0;
color: var(--muted);
}
.tile-icon-radar::before,
.tile-icon-radar::after {
content: none;
}
.tile-icon-radar svg {
display: block;
width: 100%;
height: 100%;
}
.tile-icon {
position: relative;
flex: none;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line);
background-size: cover;
background-position: center;
}
.tile-icon::before {
content: "";
position: absolute;
inset: 4px;
background-image:
linear-gradient(var(--line), var(--line)),
linear-gradient(var(--line), var(--line)),
linear-gradient(var(--line), var(--line)),
linear-gradient(var(--line), var(--line));
background-repeat: no-repeat;
background-size: 1px 4px, 1px 4px, 4px 1px, 4px 1px;
background-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
}
.tile-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 2px;
height: 1.35rem;
margin: -0.675rem 0 0 -1px;
border-radius: 1px;
background: linear-gradient(180deg, var(--accent) 0 50%, var(--needle-tail) 50% 100%);
transform: rotate(var(--bearing, 45deg));
transform-origin: 50% 50%;
transition: transform var(--dur-2) var(--ease);
}
.tile:hover .tile-icon::after,
.tile:focus-visible .tile-icon::after {
transform: rotate(calc(var(--bearing, 45deg) + 14deg));
}
.tile-icon[data-icon="avatar-erstellen"] { --bearing: 0deg; }
.tile-icon[data-icon="bild-zu-video"]    { --bearing: 52deg; }
.tile-icon[data-icon="avatar-sprechen"]  { --bearing: 103deg; }
.tile-icon[data-icon="stimme-klonen"]    { --bearing: 154deg; }
.tile-icon[data-icon="musik"]            { --bearing: 205deg; }
.tile-icon[data-icon="schneiden"]        { --bearing: 256deg; }
.tile-icon[data-icon="prompts"]          { --bearing: 307deg; }
.tile-icon.has-img::before,
.tile-icon.has-img::after {
content: none;
}
.tile-icon.has-img {
width: 44px;
height: 44px;
border: 0;
background: none;
border-radius: 0;
}
.tile-icon.has-img img {
display: block;
width: 100%;
height: 100%;
}
.chapter.wf-pin {
padding-block: 0;
}
.wf-pin::before {
content: none;
}
.wf-track {
position: relative;
}
.wf-stage {
position: relative;
isolation: isolate;
padding-block: 2.6rem 3rem;
}
.wf-pin .chapter-rule {
margin-bottom: 0.7rem;
}
.wf-pin .sec-rail {
margin-bottom: 0.8rem;
}
.wf-pin .sec-rail h2 {
margin-bottom: 0.35rem;
font-size: var(--t-h4);
}
.wf-pin .sec-rail .intro {
margin-bottom: 0;
font-size: var(--t-small);
line-height: 1.5;
}
.wf-chain {
list-style: none;
margin: 0;
padding: 0 0 0 3.4rem;
position: relative;
--spine-top: 0.9rem;
--spine-bottom: 1.4rem;
}
.wf-chain::before {
content: "";
position: absolute;
z-index: 0;
left: 1.2rem;
top: var(--spine-top);
bottom: var(--spine-bottom);
width: var(--tape);
background-image:
linear-gradient(var(--line), var(--line)),
repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 9px);
background-repeat: no-repeat;
background-size: 1px 100%, var(--tape) 100%;
background-position: left top, left top;
}
.wf-chain::after {
content: "";
position: absolute;
z-index: 0;
left: 1.2rem;
top: var(--spine-top);
bottom: var(--spine-bottom);
width: 2px;
margin-left: -0.5px;
background: var(--accent);
transform: scaleY(var(--spine, 1));
transform-origin: 50% 0;
}
.wf-step {
position: relative;
display: grid;
justify-items: start;
gap: 0.06rem;
padding: 0 0 0.7rem;
}
.wf-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.05rem 0.8rem;
}
.wf-meta > .dtl[open] {
flex: 1 0 100%;
}
.wf-step:last-child {
padding-bottom: 0;
}
.wf-num {
position: absolute;
z-index: 1;
left: -3.4rem;
top: -0.1rem;
width: 2.4rem;
height: 2.4rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--panel);
border: 1.5px solid var(--accent-line);
box-shadow: 0 0 0 5px var(--panel);
color: var(--accent);
font-family: var(--font-ui);
font-weight: 800;
font-size: var(--t-body);
}
.wf-step > a {
display: inline-block;
color: var(--ink);
text-decoration: none;
font-size: var(--t-body);
line-height: 1.26;
text-wrap: balance;
padding-block: 0.36rem;
margin-block: -0.36rem;
}
.wf-step > a strong {
font-family: var(--font-ui);
font-weight: 700;
border-bottom: 1.5px solid var(--accent-line);
}
.wf-step > a:hover strong,
.wf-step > a:focus-visible strong {
border-bottom-color: var(--accent);
}
.wf-tools {
display: flex;
flex-wrap: wrap;
gap: 0.12rem 0.95rem;
margin-top: 0.22rem;
font-size: var(--t-small);
}
.wf-tool {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
}
.wf-kind {
font-size: var(--t-mark);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--accent);
padding: 0.05rem 0.4rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--accent-line);
}
.wf-kind-paid {
color: var(--muted);
box-shadow: inset 0 0 0 1px var(--line);
}
.wf-cost {
font-size: var(--t-micro);
color: var(--muted);
}
.wf-step .dtl {
margin-top: 0;
}
.wf-step .dtl > summary {
padding-block: 0.15rem;
}
@media (max-width: 389px) {
.wf-chain {
padding-left: 2.85rem;
}
.wf-num {
left: -2.85rem;
width: 2.1rem;
height: 2.1rem;
font-size: var(--t-body);
}
.wf-chain::before,
.wf-chain::after {
left: 1.05rem;
}
.wf-tools {
font-size: var(--t-micro);
gap: 0.12rem 0.75rem;
}
.wf-pin .sec-rail .intro {
font-size: var(--t-small);
}
}
.chapter-head {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.75rem;
}
.chapter-head > h3 {
margin: 0;
font-size: clamp(1.4rem, 5.6vw, 1.6rem);
}
.chapter-icon {
flex: none;
display: grid;
place-items: center;
width: 3.1rem;
height: 3.1rem;
padding: 0.3rem;
border: 1px solid var(--brass-line);
border-radius: 11px;
background: var(--brass-wash);
box-shadow: inset 0 1px 0 var(--edge);
}
.chapter-icon img {
display: block;
width: 100%;
height: 100%;
}
.recs {
display: grid;
gap: 0.85rem;
}
.rec {
position: relative;
overflow: hidden;
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1rem 1.05rem 1.1rem;
box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
}
.rec-label {
display: inline-block;
margin: 0 0 0.75rem;
padding: 0.24rem 0.68rem;
border-radius: 999px;
background: transparent;
box-shadow: inset 0 0 0 1px var(--line-strong);
color: var(--ink);
font-family: var(--font-ui);
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.rec-best {
padding-top: 1.15rem;
box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge);
}
.rec-best::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent);
z-index: 1;
}
.rec-best .rec-label {
background: var(--accent);
box-shadow: none;
color: var(--accent-ink);
}
.rec-free .rec-label {
box-shadow: inset 0 0 0 1px var(--accent-line);
color: var(--accent);
}
.rec-tool {
font-family: var(--font-ui);
font-weight: 800;
font-size: var(--t-h4);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
}
.rec-plan {
display: block;
margin-top: 0.15rem;
font-weight: 600;
font-size: var(--t-eyebrow);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.rec-reason {
margin-bottom: 0.85rem;
font-size: var(--t-body);
}
.rec-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.6rem;
margin: 0;
padding-top: 0.75rem;
border-top: 1px solid var(--line);
}
.price-main {
font-family: var(--font-ui);
font-weight: 800;
font-size: var(--t-lead);
letter-spacing: -0.01em;
color: var(--ink);
}
.price-num {
display: inline-block;
text-align: right;
}
.price-eur {
font-weight: 700;
color: var(--ink);
cursor: help;
}
.price-sep {
color: var(--muted);
}
.plan-eur,
.upgrade-eur {
color: var(--muted);
font-weight: 500;
}
.plan-eur::before,
.upgrade-eur::before {
content: " · ";
}
.price-note {
flex: 1 0 100%;
font-size: var(--t-micro);
color: var(--muted);
}
.rec-cost {
font-size: var(--t-small);
color: var(--muted);
}
.rec-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.rec-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.55rem 1rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
color: var(--ink);
font-family: var(--font-ui);
font-weight: 700;
font-size: var(--t-small);
line-height: 1.25;
text-align: center;
text-decoration: none;
transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.rec-link-lead {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.rec-link:hover,
.rec-link:focus-visible {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.rec-link-lead:hover,
.rec-link-lead:focus-visible {
background: var(--ink);
border-color: var(--ink);
color: var(--bg);
}
.rec-link:active {
transform: none;
}
.stand {
display: block;
margin-top: 0.8rem;
font-size: var(--t-mark);
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
}
.stand::before {
content: "";
display: inline-block;
width: 0.6rem;
height: 1px;
margin-right: 0.45rem;
vertical-align: 0.25em;
background: currentColor;
}
.radar {
display: grid;
gap: 0.6rem;
align-items: start;
}
.radar-head {
display: none;
}
.provider-card {
min-width: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
background-color var(--dur-1) var(--ease);
}
.provider-card[open] {
border-color: var(--accent-line);
box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge);
}
.provider-card > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: baseline;
gap: 0.15rem 0.6rem;
padding: 0.7rem 0.85rem 0.75rem;
}
.provider-name {
grid-column: 1;
grid-row: 1;
font-family: var(--font-ui);
font-weight: 700;
font-size: var(--t-body);
line-height: 1.25;
}
.provider-from {
grid-column: 2;
grid-row: 1;
font-family: var(--font-ui);
font-size: var(--t-micro);
font-weight: 700;
color: var(--muted);
white-space: nowrap;
}
.from-key {
font-weight: 600;
letter-spacing: 0.02em;
}
.from-key::after {
content: " ";
}
.provider-card > summary::after {
grid-column: 3;
grid-row: 1;
align-self: center;
color: var(--muted);
}
.provider-gist {
grid-column: 1 / -1;
font-size: var(--t-small);
line-height: 1.4;
color: var(--muted);
}
.provider-flags {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.4rem;
}
.flag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--line);
font-size: var(--t-mark);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--muted);
}
.flag::before {
content: "";
flex: none;
width: 0.4rem;
height: 0.4rem;
transform: rotate(45deg);
border: 1px solid var(--muted);
}
.flag[data-on="ja"] {
box-shadow: inset 0 0 0 1px var(--accent-line);
color: var(--accent);
}
.flag[data-on="ja"]::before {
background: var(--accent);
border-color: var(--accent);
}
.provider-card > .dtl-body {
padding: 0 0.85rem 0.9rem;
border-top: 1px solid var(--line);
margin-top: 0.15rem;
padding-top: 0.9rem;
}
.radar-detail {
display: grid;
gap: 1.1rem;
}
.provider-card .radar-col h3 {
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.45rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--line);
}
.provider-limits {
font-size: var(--t-small);
line-height: 1.5;
margin: 0;
}
.paid-plans {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.55rem;
font-size: var(--t-small);
}
.paid-plans li {
padding-left: 0.85rem;
border-left: 2px solid var(--accent-line);
}
.plan-name {
font-family: var(--font-ui);
font-weight: 700;
}
.plan-price {
color: var(--accent);
font-weight: 600;
}
.plan-name::after {
content: " · ";
color: var(--muted);
font-weight: 400;
}
.plan-adds {
display: block;
color: var(--muted);
line-height: 1.45;
}
.radar-foot {
margin-top: 1.1rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line);
}
.radar-foot .stand {
margin-top: 0.55rem;
}
.sources {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
font-size: var(--t-micro);
}
.sources a {
text-decoration: none;
border-bottom: 1px solid var(--accent-line);
}
.gloss {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted var(--brass);
padding-bottom: 1px;
transition: color var(--dur-1) var(--ease), border-bottom-color var(--dur-1) var(--ease);
}
.gloss:hover,
.gloss:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
}
#glossar dl {
margin: 0;
}
#glossar .gloss-item {
break-inside: avoid;
padding-bottom: 1.4rem;
margin-bottom: 1.4rem;
border-bottom: 1px solid var(--line);
}
#glossar .gloss-item:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
#glossar dt {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-body);
margin: 0;
}
#glossar dd {
margin: 0.35rem 0 0;
color: var(--muted);
max-width: var(--measure);
}
.persons {
display: grid;
gap: 1.9rem;
}
.person {
max-width: 13.5rem;
margin-inline: auto;
text-align: center;
}
.person-shot {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius);
margin-bottom: 0.8rem;
container-type: inline-size;
}
.person-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.person-shot::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--brass-line);
pointer-events: none;
}
.person-mono-mark {
position: absolute;
top: 50%;
left: 50%;
width: 46%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border: 1px solid var(--brass);
border-radius: 50%;
font-family: var(--font-display);
font-size: 19cqi;
line-height: 1;
color: var(--ink);
padding-bottom: 0.06em;
}
.person-name {
font-size: var(--t-lead);
margin: 0;
}
.person-role {
margin: 0.3rem 0 0;
font-size: var(--t-small);
color: var(--muted);
}
.persons-note {
margin: 1.9rem 0 0;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
font-size: var(--t-small);
color: var(--muted);
}
body > footer {
margin-top: 3rem;
}
body > footer .wrap::before {
margin-bottom: 1.75rem;
}
body > footer .footer-inner {
text-align: center;
}
body > footer .footer-mark {
display: inline-block;
width: 1.4rem;
height: 1.4rem;
margin-bottom: 1rem;
color: var(--muted);
}
body > footer .footer-mark svg {
display: block;
width: 100%;
height: 100%;
}
body > footer p {
max-width: none;
font-size: var(--t-small);
color: var(--muted);
}
body > footer .footer-money {
max-width: 46ch;
margin-inline: auto;
font-size: var(--t-micro);
}
body > footer .footer-legal {
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
font-size: var(--t-micro);
}
body > footer .footer-legal a {
color: var(--muted);
text-underline-offset: 0.2em;
}
body > footer .footer-legal a:hover,
body > footer .footer-legal a:focus-visible {
color: var(--accent);
}
.achtung {
position: relative;
max-width: 52ch;
margin: 1.1rem auto 0;
padding: 0.75rem 0.9rem 0.75rem 2.5rem;
border-left: 2px solid var(--brass);
border-radius: 0 var(--radius-sm, 0.5rem) var(--radius-sm, 0.5rem) 0;
background: var(--brass-wash);
font-size: var(--t-small);
line-height: 1.55;
text-align: left;
}
.achtung-mark {
position: absolute;
left: 0.85rem;
top: 0.72rem;
display: grid;
place-items: center;
width: 1.15rem;
height: 1.15rem;
border: 1px solid var(--brass);
border-radius: 50%;
color: var(--brass);
font-family: var(--font-ui);
font-size: var(--t-eyebrow);
font-weight: 700;
line-height: 1;
}
.band .achtung {
background: rgba(255, 255, 255, 0.05);
border-left-color: var(--brass);
}
.daten-liste {
margin: 0.5rem 0 0.7rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.25rem;
}
.daten-liste li {
padding-left: 0.9rem;
text-indent: -0.9rem;
}
.daten-liste li::before {
content: "–";
margin-right: 0.45rem;
opacity: 0.5;
}
.dtl-body p + p {
margin-top: 0.55rem;
}
@supports not (aspect-ratio: 9 / 16) {
.proof-frame {
height: 15rem;
}
.clip-cover img {
height: auto;
}
}
.faq {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.faq-frage {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.faq-frage > summary {
min-height: 2.75rem;
padding: 0.75rem 0.95rem;
font-family: var(--font-display);
font-size: var(--t-body);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
}
.faq-frage[open] > summary {
border-bottom: 1px solid var(--line);
}
.faq-frage > .dtl-body {
padding: 0.85rem 0.95rem 0.95rem;
text-align: left;
}
.faq-antwort {
max-width: 62ch;
font-size: var(--t-small);
line-height: 1.6;
}
.faq-antwort > p {
margin: 0;
}
.faq-antwort > p + p,
.faq-antwort > p + ul,
.faq-antwort > ul + p {
margin-top: 0.6rem;
}
.faq-weg {
margin: 0.75rem 0 0;
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 700;
}
.faq-weg a {
color: var(--accent);
text-decoration: none;
}
.faq-weg a:hover,
.faq-weg a:focus-visible {
text-decoration: underline;
text-underline-offset: 0.18em;
}
.faq-antwort .stand {
margin-top: 0.7rem;
}
.panel-split {
display: grid;
gap: 1.2rem;
}
.panel-head > :last-child {
margin-bottom: 0;
}
.proof {
display: grid;
gap: 0.6rem;
justify-items: center;
margin: 0;
text-align: center;
}
.proof-frame {
position: relative;
width: 100%;
max-width: 15rem;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.14);
background: #0b0f0c;
}
.proof-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.proof-zoom {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
min-height: 2.4rem;
padding: 0.35rem 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(8, 13, 10, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
}
.proof-zoom:hover,
.proof-zoom:focus-visible {
background: rgba(8, 13, 10, 0.85);
}
.proof-text {
display: grid;
gap: 0.15rem;
max-width: 15rem;
color: rgba(255, 255, 255, 0.62);
font-size: var(--t-mark);
line-height: 1.5;
}
.proof-title {
font-family: var(--font-display);
font-size: var(--t-small);
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.proof-lightbox {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
max-width: 100vw;
max-height: 100vh;
padding: 1.2rem;
border: 0;
background: rgba(8, 13, 10, 0.94);
}
.proof-lightbox video {
max-width: 100%;
max-height: 90vh;
border-radius: var(--radius);
}
.proof-close {
position: fixed;
top: max(0.9rem, env(safe-area-inset-top));
right: 0.9rem;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(8, 13, 10, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.proof-close:hover,
.proof-close:focus-visible {
background: rgba(8, 13, 10, 0.92);
border-color: rgba(255, 255, 255, 0.6);
}
.proof-lightbox::backdrop {
background: rgba(8, 13, 10, 0.94);
}
@media (max-width: 719px) {
.proof {
grid-template-columns: 8.5rem minmax(0, 1fr);
align-items: center;
gap: 0.9rem;
justify-items: stretch;
text-align: left;
}
.proof-frame {
max-width: none;
}
.proof-text {
max-width: none;
}
}
.rec-alt {
display: grid;
justify-items: center;
text-align: center;
gap: 0.5rem 1.6rem;
margin-top: 1.1rem;
padding: 1rem 1.15rem;
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
background: var(--surface);
}
.rec-alt .kicker {
margin-bottom: 0.2rem;
}
.alt-headline {
margin: 0;
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: 600;
line-height: 1.25;
color: var(--ink);
}
.alt-punkte {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.12rem;
font-size: var(--t-small);
line-height: 1.4;
}
.alt-punkte li {
padding-left: 1rem;
text-indent: -1rem;
}
.alt-punkte li::before {
content: "–";
margin-right: 0.5rem;
color: var(--accent);
font-weight: 700;
}
.alt-text {
margin: 0.45rem 0 0;
font-size: var(--t-mark);
line-height: 1.5;
color: var(--muted);
}
.alt-weg {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.9rem;
}
.alt-weg .stand {
margin-top: 0;
}
.alt-weg .rec-link {
margin: 0;
}
.alt-weg .stand {
margin-top: 0;
}
@media (min-width: 720px) {
.rec-alt {
justify-items: stretch;
text-align: left;
grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr) auto;
align-items: start;
}
.alt-punkte {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 2rem;
}
.alt-weg {
flex-direction: column;
align-items: flex-end;
text-align: right;
}
}
.float-dock {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 40;
display: grid;
justify-items: center;
transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
visibility var(--dur-1) var(--ease);
}
.to-top {
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
color: var(--muted);
box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease);
}
.compass {
display: block;
overflow: visible;
}
.compass-ring,
.compass-ticks {
opacity: 0.4;
}
.compass-needle {
transform: rotate(calc(var(--tk-progress, 0) * 1turn));
transform-box: fill-box;
transform-origin: 50% 50%;
}
.needle-n {
fill: var(--accent);
}
.needle-s {
fill: var(--needle-tail);
}
.to-top:hover,
.to-top:focus-visible {
color: var(--accent);
border-color: var(--accent-line);
box-shadow: var(--shadow-lift), inset 0 1px 0 var(--edge);
transform: translateY(-1px);
}
.js .float-dock {
opacity: 0;
visibility: hidden;
transform: translateY(0.6rem);
}
.js .float-dock.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
@media (min-width: 720px) {
.panel-split {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"kopf video"
"haupt video";
grid-template-rows: min-content 1fr;
align-content: start;
align-items: start;
column-gap: 5.5rem;
row-gap: 0.4rem;
}
.panel-head { grid-area: kopf; }
.proof { grid-area: video; align-self: start; }
.panel-main {
grid-area: haupt;
align-self: start;
}
.proof-frame {
max-width: none;
width: 14.5rem;
}
.proof-text {
max-width: 14.5rem;
}
:root {
--shell: 50rem;
--gutter: 1.6rem;
--wf-track: 148vh;
--nav-h: 3rem;
}
body {
padding-bottom: 4rem;
}
.site-header {
padding-top: 1.6rem;
}
.cta-primary {
width: auto;
align-self: flex-start;
max-width: 32rem;
padding: 0.8rem 1.25rem 0.85rem;
}
.cta-main {
font-size: var(--t-lead);
}
.header-cta {
display: flex;
margin-top: 1.05rem;
}
.hero {
max-height: 168px;
margin-bottom: 1.9rem;
}
.tile-icon.has-img {
width: 56px;
height: 56px;
}
h2 {
font-size: var(--t-h2);
}
.chapter {
margin-block: 4.25rem;
}
.chapter.band {
margin-block: 4.5rem;
padding-block: 2.8rem 3.1rem;
}
#task-details > .chapter {
margin-top: 5.5rem;
}
.chapter-rule {
margin-bottom: 2.6rem;
}
.chapter-head {
gap: 1.05rem;
margin-bottom: 0.95rem;
}
.chapter-icon {
width: 3.6rem;
height: 3.6rem;
}
.section-nav-inner {
mask-image: none;
-webkit-mask-image: none;
gap: 0.4rem;
padding: 0.36rem calc(var(--gutter) - 1.05rem);
}
.section-nav a {
padding: 0.55rem 1.05rem;
font-size: var(--t-body);
}
.panel {
padding: 1.4rem 1.5rem 1.5rem;
}
.tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.recs {
grid-template-columns: 1fr 1fr;
}
.rec-best {
grid-column: 1 / -1;
}
.rec-best .rec-tool {
font-size: var(--t-h3);
}
.rec-best .price-main {
font-size: var(--t-h4);
}
.wf-step {
padding-bottom: 0.95rem;
}
.wf-chain {
padding-left: 3.9rem;
}
.wf-num {
left: -3.9rem;
width: 2.7rem;
height: 2.7rem;
}
.wf-chain::before,
.wf-chain::after {
left: 1.35rem;
}
.float-dock {
right: 1.6rem;
bottom: 1.6rem;
}
.to-top {
width: 3.1rem;
height: 3.1rem;
}
.tile-radar {
padding: 1.2rem 2.6rem 1.25rem 1.25rem;
gap: 1.25rem;
}
.tile-radar .tile-title {
font-size: var(--t-h3);
}
.tile-icon-radar {
width: 3.4rem;
height: 3.4rem;
}
.persons {
grid-template-columns: repeat(2, minmax(0, 15rem));
gap: 2.5rem;
justify-content: start;
}
.person {
max-width: none;
margin-inline: 0;
text-align: left;
}
}
@media (min-width: 1080px) {
:root {
--shell: 70rem;
--gutter: 2rem;
--rise: 32px;
--dur-reveal: var(--dur-3);
}
h2 {
font-size: var(--t-h1);
line-height: 1.12;
}
h3 {
font-size: var(--t-h3);
}
.kicker {
font-size: var(--t-mark);
margin-bottom: 0.6rem;
}
.site-header .wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
align-items: center;
gap: 2.5rem;
}
.site-header .hero {
grid-column: 2;
grid-row: 1;
max-height: 176px;
margin: 0;
}
.header-text {
grid-column: 1;
grid-row: 1;
}
.site-header .wrap::after {
grid-column: 1 / -1;
}
.header-meta {
justify-content: flex-start;
margin-top: 1.2rem;
}
.site-header h1 {
font-size: 4.6rem;
line-height: 1.02;
letter-spacing: -0.028em;
margin-bottom: 0.5rem;
}
.site-header .subtitle {
font-size: var(--t-h4);
max-width: 30ch;
}
.sec-grid {
display: grid;
grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
gap: 3.25rem;
align-items: start;
}
.sec-rail {
margin-bottom: 0;
container-type: inline-size;
}
.sec-rail h2 {
font-size: clamp(1.35rem, 12.8cqi, 2.1rem);
}
.sec-rail > :last-child {
margin-bottom: 0;
}
.task-detail .sec-grid {
grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
gap: 2.75rem;
}
.band .sec-rail {
position: static;
}
.wf-pin .sec-rail {
position: static;
}
.wf-stage {
padding-block: 3.5rem 3.8rem;
}
.chapter {
margin-block: 5.5rem;
}
.chapter.band {
margin-block: 5.5rem;
padding-block: 3.5rem 3.8rem;
}
#task-details > .chapter {
margin-top: 6rem;
}
.chapter-rule {
margin-bottom: 3rem;
}
.chapter-head {
display: block;
margin-bottom: 1rem;
}
.chapter-icon {
width: 5rem;
height: 5rem;
padding: 0.45rem;
border-radius: 15px;
margin-bottom: 0.95rem;
}
.chapter-head > h3 {
font-size: var(--t-h2);
}
.recs {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.rec {
padding: 1.15rem 1.15rem 1.25rem;
}
.rec-label {
font-size: var(--t-mark);
letter-spacing: 0.06em;
}
.rec-best {
grid-column: auto;
padding-top: 1.3rem;
}
.rec-best .rec-tool {
font-size: var(--t-h3);
}
.rec-best .price-main {
font-size: var(--t-h4);
}
.tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.tile {
min-height: 5.4rem;
padding: 1rem 2.4rem 1rem 1.1rem;
gap: 1.1rem;
}
.tile-icon.has-img {
width: 64px;
height: 64px;
}
.tile-title {
font-size: var(--t-lead);
}
#radar .sec-grid {
grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
gap: 2rem;
}
.wf-chain {
padding-left: 4.6rem;
}
.wf-num {
left: -4.6rem;
width: 3rem;
height: 3rem;
font-size: var(--t-lead);
}
.wf-chain::before,
.wf-chain::after {
left: 1.5rem;
}
.wf-step {
grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
column-gap: 2rem;
align-items: baseline;
padding-bottom: 1.2rem;
}
.wf-meta {
display: contents;
}
.wf-step > a {
grid-column: 1;
font-size: var(--t-lead);
}
.wf-tools {
grid-column: 1;
font-size: var(--t-small);
}
.wf-cost {
grid-column: 2;
grid-row: 1;
text-align: right;
font-size: var(--t-small);
}
.wf-step .dtl {
grid-column: 1 / -1;
}
#glossar dl {
columns: 2;
column-gap: 3.25rem;
}
#glossar dt {
font-size: var(--t-lead);
}
.panel {
padding: 1.8rem 2rem 1.9rem;
}
}
@media (min-width: 1360px) {
:root {
--shell: 76rem;
}
.sec-grid {
grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
gap: 4rem;
}
.task-detail .sec-grid {
grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
gap: 3rem;
}
#radar .sec-grid {
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: 2.5rem;
}
.site-header h1 {
font-size: 5.2rem;
}
.site-header .hero {
max-height: 196px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
.tile::before,
.is-tapped::before,
.to-top::before,
.rec-link::before,
.section-nav a::before {
display: none;
animation: none !important;
}
.compass-needle {
transform: none;
}
.chapter-rule-fill {
width: 0;
}
.wf-chain::after {
transform: none;
}
}
.clip {
margin: 1.7rem auto 2.2rem;
max-width: 13.5rem;
}
.clip-cover {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
background: var(--ink);
box-shadow: var(--shadow);
color: var(--brass);
}
.clip-cover img {
display: block;
width: 100%;
height: auto;
}
.clip-dial {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.clip-dial svg {
transition: transform var(--dur-1) var(--ease);
}
.clip-cover:hover .clip-dial svg,
.clip-cover:focus-visible .clip-dial svg {
transform: scale(1.08);
}
.clip-cover:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.clip-meta {
position: absolute;
right: 0.55rem;
bottom: 0.55rem;
display: flex;
gap: 0.35rem;
align-items: center;
}
.clip-sound,
.clip-dur {
font-family: var(--font-ui, inherit);
font-size: var(--t-eyebrow);
letter-spacing: 0.02em;
color: #fff;
background: rgba(17, 26, 20, 0.62);
border-radius: 999px;
padding: 0.14rem 0.5rem;
}
.clip video {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--ink);
box-shadow: var(--shadow);
}
.clip figcaption {
margin-top: 0.7rem;
font-size: var(--t-small);
line-height: 1.5;
color: var(--muted);
text-align: center;
}
.clip figcaption .kicker {
display: block;
margin-bottom: 0.25rem;
}
@media (min-width: 720px) {
.clip {
display: grid;
grid-template-columns: 11.5rem minmax(0, 30ch);
gap: 1.7rem;
align-items: end;
margin: 0 0 2.2rem;
max-width: none;
}
.clip figcaption {
margin: 0 0 0.45rem;
text-align: left;
}
}
@media (min-width: 1080px) {
.task-detail .sec-grid {
grid-template-columns: minmax(0, 1fr);
gap: 1.6rem;
}
.task-detail .intro {
max-width: var(--measure-intro);
text-wrap: balance;
}
.task-detail .sec-body {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.task-detail .rec {
display: flex;
flex-direction: column;
align-items: stretch;
}
.task-detail .rec-price {
margin-top: auto;
min-height: 4.4rem;
}
.task-detail .rec-links {
min-height: 6.1rem;
align-content: flex-start;
}
.task-detail .rec:not(:has(.rec-links)) > .stand {
margin-top: auto;
}
.task-detail .recs {
display: contents;
}
.task-detail .rec-alt {
grid-column: 1 / -1;
}
.clip {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
max-width: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 0.8rem 0.8rem 1rem;
}
.clip-cover,
.clip video {
flex: 1 1 auto;
min-height: 0;
height: 100%;
}
.clip-cover {
box-shadow: none;
border-radius: calc(var(--radius) - 6px);
}
.clip-cover img {
height: 100%;
object-fit: cover;
object-position: top;
}
.clip video {
border-radius: calc(var(--radius) - 6px);
box-shadow: none;
object-fit: cover;
object-position: center;
}
.clip figcaption {
margin: 0.7rem 0 0;
text-align: left;
}
}
.tile-thumb {
flex: none;
margin-left: auto;
margin-right: 1.35rem;
width: 2.05rem;
border-radius: 5px;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tile-thumb img {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
object-position: top;
}
.rec-label {
display: block;
margin: -1rem -1.05rem 0.95rem;
padding: 0.44rem 0.75rem 0.4rem;
border-radius: 0;
text-align: center;
box-shadow: inset 0 -1px 0 var(--line);
background: var(--bg);
color: var(--muted);
}
.rec-best .rec-label {
background: var(--accent);
color: var(--accent-ink);
box-shadow: none;
}
.rec-free .rec-label {
background: var(--accent-soft);
color: var(--accent);
box-shadow: inset 0 -1px 0 var(--accent-line);
}
@media (min-width: 1080px) {
.rec-label {
margin: -1.15rem -1.15rem 1rem;
}
.task-detail .chapter-head {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0.9rem;
}
.task-detail .chapter-head::after {
content: "";
flex: 0 0 auto;
width: 3.4rem;
}
.wf-pin .sec-rail h2 {
font-size: var(--t-h1);
margin-bottom: 0.6rem;
}
.wf-pin .sec-rail .intro {
font-size: var(--t-body);
}
.task-detail .chapter-icon {
width: 3.4rem;
height: 3.4rem;
padding: 0.3rem;
}
.task-detail .intro {
text-align: center;
margin-inline: auto;
}
}
.radar-legend {
font-family: var(--font-ui);
font-size: var(--t-micro);
color: var(--muted);
margin: 0 0 0.9rem;
}
.radar-legend .legend-good {
color: var(--accent);
}
.radar-legend span::before {
content: "";
display: inline-block;
width: 0.4rem;
height: 0.4rem;
transform: rotate(45deg);
border: 1px solid currentColor;
margin-right: 0.4rem;
vertical-align: 0.05rem;
}
.radar-legend .legend-good::before {
background: currentColor;
}
.radar-legend span {
white-space: nowrap;
}
.provider-card > summary {
transition: background-color var(--dur-1) var(--ease);
}
.provider-card > summary:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.provider-from {
justify-self: end;
text-align: right;
}
.rec {
text-align: center;
}
.rec-links {
justify-content: center;
}
.rec-price {
justify-content: center;
}
.clip figcaption,
.task-detail .clip figcaption {
text-align: center;
}
@media (min-width: 1080px) {
.chapter:not(.wf-pin) .sec-grid,
#radar .sec-grid {
grid-template-columns: minmax(0, 1fr);
gap: 1.6rem;
}
.chapter:not(.wf-pin) .sec-rail {
text-align: center;
}
.chapter:not(.wf-pin) .sec-rail p,
.chapter:not(.wf-pin) .sec-rail h2 {
margin-inline: auto;
}
.chapter:not(.wf-pin) .sec-rail .intro {
max-width: var(--measure-intro);
text-wrap: balance;
}
.persons {
justify-content: center;
}
.tiles > .tile:last-child:nth-child(even) {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - 0.5rem);
}
}
@media (max-width: 1079px) {
.site-header .header-text,
.sec-rail,
.intermezzo .wrap {
text-align: center;
}
.chapter-head {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
text-align: center;
}
.sec-rail p,
.site-header .header-text p,
.intermezzo .wrap p {
margin-inline: auto;
}
.site-header .header-meta {
justify-content: center;
}
}
@media (min-width: 1080px) {
.task-detail .rec-reason {
margin-top: auto;
}
.rec-label {
margin-bottom: 1.15rem;
}
.task-detail .rec-reason,
.task-detail .rec-cost {
text-align: center;
text-wrap: balance;
}
}
.tile-radar {
justify-content: center;
text-align: center;
}
.panel {
text-align: center;
}
.panel p {
margin-inline: auto;
}
.panel .promo {
text-align: left;
}
#glossar dl {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
}
#glossar .gloss-item {
margin: 0;
padding: 1.05rem 1.15rem 1.15rem;
border: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
@media (min-width: 720px) {
#glossar dl {
columns: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
@media (min-width: 1080px) {
#glossar dl {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.provider-gist {
color: rgba(255, 255, 255, 0.92);
}
.from-val {
font-weight: 700;
color: #fff;
}
.persons-note {
text-align: center;
margin-inline: auto;
}
.changelog {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.85rem;
}
.changelog > li {
margin: 0;
}
.changelog > li > .dtl {
height: 100%;
margin-top: 0;
padding: 1.05rem 1.15rem 1.15rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.changelog > li:has(> .dtl[open]) {
grid-column: 1 / -1;
}
@media (min-width: 640px) {
.changelog {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
@media (min-width: 1080px) {
.changelog {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.changelog-date > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
text-transform: none;
letter-spacing: normal;
font-family: var(--font-display);
font-size: var(--t-body);
font-weight: 700;
color: var(--ink);
}
.changelog-date > summary:hover,
.changelog-date > summary:focus-visible {
color: var(--accent);
}
.changelog-date .dtl-body,
.changelog-more > .dtl > .dtl-body {
text-align: left;
max-width: none;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line);
}
.changelog > li.changelog-more > .dtl {
border-style: dashed;
border-color: var(--line-strong);
background: transparent;
box-shadow: none;
}
.changelog-more > .dtl > summary {
display: flex;
width: 100%;
justify-content: center;
font-family: var(--font-ui);
font-size: var(--t-small);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--accent);
}
.changelog > li.changelog-more > .dtl[open] {
border-style: solid;
background: var(--surface);
box-shadow: var(--shadow);
}
.changelog-more .dtl-body > .changelog {
gap: 0.85rem;
}
.changelog-item {
margin-top: 0.9rem;
}
.changelog-item:first-child {
margin-top: 0;
}
.changelog-item dt {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--t-small);
color: var(--accent);
margin: 0;
}
.changelog-item dd {
margin: 0.2rem 0 0;
color: var(--muted);
font-size: var(--t-small);
}
@media (min-width: 1080px) {
.radar {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius);
padding: 1.1rem 1.4rem 0.9rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.22);
}
.radar-legend {
margin-bottom: 1.1rem;
}
.provider-card > summary {
padding: 1rem 0.9rem;
border-radius: 8px;
}
.provider-card:nth-child(odd) > summary {
background-color: rgba(255, 255, 255, 0.025);
}
.provider-card:nth-child(odd) > summary:hover,
.provider-card > summary:hover {
background-color: rgba(255, 255, 255, 0.06);
}
.provider-name {
font-size: var(--t-lead);
}
}
.flag[data-on="ja"] {
background: rgba(168, 220, 188, 0.14);
border-radius: 999px;
padding: 0.12rem 0.55rem;
}
.flag[data-on="nein"] {
opacity: 0.75;
}
.radar-detail,
.promo .dtl-body,
.provider-limits,
.paid-plans {
text-align: left;
}
.rec .dtl-body {
max-width: 34ch;
margin-inline: auto;
}
.radar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
background: none;
border: 0;
padding: 0;
box-shadow: none;
}
.provider-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
overflow: hidden;
}
.provider-card > summary {
display: block;
position: relative;
padding: 1.05rem 2.3rem 1.05rem 1.15rem;
border-radius: 0;
background: none;
}
.provider-card > summary::after {
position: absolute;
right: 1.05rem;
top: 1.35rem;
}
.provider-card:nth-child(odd) > summary {
background: none;
}
.provider-card > summary:hover,
.provider-card:nth-child(odd) > summary:hover {
background-color: rgba(255, 255, 255, 0.045);
}
.provider-name {
display: block;
font-size: var(--t-body);
margin-bottom: 0.55rem;
}
.provider-hero {
display: block;
font-family: var(--font-ui);
font-size: var(--t-h3);
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
line-height: 1.15;
}
.hero-unit {
font-size: var(--t-body);
font-weight: 600;
color: rgba(255, 255, 255, 0.66);
}
.provider-hero.hero-nofree {
font-size: var(--t-body);
font-weight: 600;
color: rgba(255, 255, 255, 0.62);
}
.provider-note {
display: block;
margin-top: 0.35rem;
font-size: var(--t-small);
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
}
.provider-card .provider-flags {
margin-top: 0.7rem;
}
.provider-upgrade {
display: block;
margin-top: 0.75rem;
padding-top: 0.65rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-family: var(--font-ui);
font-size: var(--t-eyebrow);
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.55);
}
.provider-nofree {
background: rgba(255, 255, 255, 0.02);
border-style: dashed;
border-color: rgba(255, 255, 255, 0.2);
}
.provider-nofree .provider-name {
color: rgba(255, 255, 255, 0.75);
}
.provider-card > .dtl-body {
padding: 0 1.15rem 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 0.9rem;
margin-top: 0;
}
@media (min-width: 720px) {
.radar {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.provider-card[open] {
grid-column: 1 / -1;
}
}
@media (min-width: 1080px) {
.radar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.provider-name {
font-family: var(--font-display);
font-size: var(--t-h4);
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 0.6rem;
padding-right: 4rem;
}
.free-badge {
position: absolute;
top: 1.05rem;
right: 1.1rem;
font-family: var(--font-ui);
font-size: var(--t-mark);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brass);
border: 1px solid rgba(194, 168, 120, 0.55);
border-radius: 999px;
padding: 0.22rem 0.62rem;
}
.provider-card > summary {
padding-right: 1.15rem;
}
.provider-card > summary::after {
top: auto;
bottom: 1.15rem;
right: 1.1rem;
}
.radar {
align-items: stretch;
}
.provider-card {
display: flex;
flex-direction: column;
}
.provider-card:not([open]) > summary {
display: flex;
flex-direction: column;
flex: 1;
}
.provider-name {
min-height: calc(2 * 1.3rem * 1.18);
min-height: 2lh;
}
.provider-hero {
min-height: calc(1.5rem * 1.15);
}
.provider-note {
min-height: calc(2 * 0.86rem * 1.5);
min-height: 2lh;
margin-bottom: 0.7rem;
}
.provider-card .provider-flags {
margin-top: auto;
}
.provider-card > summary {
padding: 1.05rem 0 0;
}
.provider-card > summary > *:not(.provider-upgrade):not(.free-badge) {
padding-inline: 1.15rem;
}
.provider-card:not(.provider-nofree) > summary > .provider-name {
padding-right: 5.2rem;
}
.upgrade-hint {
display: block;
margin-top: 0.15rem;
font-size: var(--t-eyebrow);
color: rgba(255, 255, 255, 0.42);
}
.provider-upgrade {
width: 100%;
min-height: 3.8rem;
margin: 0.85rem 0 0;
padding: 0.6rem 2.6rem 0.6rem 1.15rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.035);
}
.provider-card > summary::after {
bottom: 0.85rem;
}
@media (min-width: 720px) {
.provider-card[open] .radar-detail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2.2rem;
}
.provider-card[open] .provider-limits {
max-width: none;
}
}