/* Pricing: one-time website projects vs. optional monthly FORMLAYER plans.
   FORMLAYER surfaces derive from --secondary, so a secondary colour change in the demo recolours them.
   Mix ratios keep AA contrast for dark ink on the surface and light ink on the deep variant for any secondary colour. */
:root{
 --layer-surface:color-mix(in oklab,var(--secondary) 34%,#e7e9e2);
 --layer-card:color-mix(in oklab,var(--layer-surface) 55%,#fbfbf7);
 --layer-deep:color-mix(in oklab,var(--secondary) 34%,#0e120c);
 --layer-ink:#111210;
 --layer-muted:color-mix(in oklab,#111210 74%,var(--secondary));
 --layer-line:color-mix(in oklab,#111210 17%,transparent);
 --layer-on-deep:#f1f1e9;
 --layer-on-deep-muted:color-mix(in oklab,#f1f1e9 78%,var(--secondary));
 --layer-deep-line:color-mix(in oklab,#f1f1e9 22%,transparent);
}

/* Frequency label: the one signal that must never be missed. */
.freq{display:inline-flex;align-items:center;gap:6px;font-size:11px;line-height:1;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;padding:6px 10px 5px;border-radius:999px;border:1px solid #ffffff38;color:#dfe3d6}
.price-card-top .freq{margin-left:auto;align-self:center}
.price-card{container-type:inline-size}
@container (max-width:340px){.price-card-top{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:20px;row-gap:16px}.price-card-top .freq{grid-column:1/-1;grid-row:1;justify-self:start;margin:0}}

/* Two-track overview (homepage teaser + /pakete/ hero) */
.price-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.price-track{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 30px 26px;background:#181b15;border:1px solid var(--line);color:#f1f1e9}
.track-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.track-index{font-size:12px;color:#a4a69d;letter-spacing:1.2px}
.price-track :is(h2,h3){font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.04em;margin:34px 0 0;color:inherit}
.track-desc{font-size:15px;line-height:1.6;color:#b2baa6;margin:10px 0 0;max-width:34ch}
.track-price{font-family:var(--display);font-size:clamp(42px,4.4vw,64px);line-height:1;letter-spacing:-.045em;white-space:nowrap;margin-top:34px}
.track-price small{font-family:var(--font);font-size:15px;letter-spacing:0}
.track-meta{font-size:13px;line-height:1.5;color:#aab39d;margin:12px 0 0}
.track-link{align-self:flex-start;margin-top:28px;padding:10px 0;font-size:14px;border-bottom:1px solid #ffffff55;transition:color .2s,border-color .2s}
.track-link:after{content:'';position:absolute;inset:0}
.price-track:hover .track-link{color:var(--accent);border-color:var(--accent)}
.track-link:focus-visible{outline:none}
.price-track:has(.track-link:focus-visible){outline:2px solid var(--accent);outline-offset:4px}

/* FORMLAYER track: its own surface in the secondary colour */
.price-track.is-layer{background:var(--layer-surface);border-color:transparent;color:var(--layer-ink)}
.price-track.is-layer .freq{background:var(--layer-deep);border-color:var(--layer-deep);color:var(--layer-on-deep)}
.price-track.is-layer .track-index{color:var(--layer-muted)}
.price-track.is-layer .track-desc,.price-track.is-layer .track-meta{color:var(--layer-muted)}
.price-track.is-layer .track-link{border-color:var(--layer-ink)}
.price-track.is-layer:hover .track-link{color:var(--layer-deep);border-color:var(--layer-deep)}
.price-track.is-layer:has(.track-link:focus-visible){outline-color:var(--secondary)}

.price-legal{font-size:13px;line-height:1.6;color:#a9b39c;margin:22px 0 0;max-width:760px}

/* Homepage teaser */
.pricing-teaser{background:var(--ink)}
.teaser-head{display:grid;grid-template-columns:1.5fr .7fr;align-items:end;gap:8%;margin-bottom:50px}
.teaser-head h2{font-size:clamp(44px,4.6vw,72px);letter-spacing:-.055em;line-height:1.05;margin:0}
.teaser-head p{font-size:17px;line-height:1.7;color:#b1b4a9;margin:0;max-width:470px}
.teaser-independent{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.6;color:#d6dacd;margin:30px 0 0}
.teaser-independent span{color:var(--secondary)}
.teaser-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-top:30px}
.admin-open .teaser-head{grid-template-columns:1fr;gap:25px}

/* /pakete/ hero overview */
.packages-hero .price-tracks{margin-top:46px}
.packages-hero>.price-legal{font-size:13px;line-height:1.6;color:#a9b39c;margin:22px 0 0;max-width:760px}
.packages-hero .price-track :is(h2,h3){margin-top:28px}
.packages-hero .track-price{font-size:clamp(40px,3.8vw,56px);margin-top:26px}

/* /pakete/ website projects */
.pricing-heading{align-items:end}
.pricing-heading p{font-size:16px;line-height:1.65;color:#b1b4a9;margin:0;max-width:420px}
.project-pricing .freq{color:#dfe3d6}

/* /pakete/ FORMLAYER plans: light secondary surface, clear cut from the dark project section */
.packages-page .layer-pricing{--line:var(--layer-line);background:var(--layer-surface);color:var(--layer-ink);padding-bottom:100px}
.packages-page .layer-pricing .section-kicker{color:var(--layer-deep);border-color:color-mix(in oklab,var(--layer-deep) 30%,transparent)}
.packages-page .layer-pricing .intro-grid h2{color:var(--layer-ink)}
.packages-page .layer-pricing .intro-grid h2 span{color:var(--layer-deep)}
.packages-page .layer-pricing .intro-grid p{color:var(--layer-muted)}
.packages-page .layer-pricing .price-card{background:var(--layer-card);border-color:var(--layer-line);color:var(--layer-ink)}
.packages-page .layer-pricing .price-card-top>span:first-child{color:var(--layer-muted)}
.packages-page .layer-pricing .freq{background:var(--layer-deep);border-color:var(--layer-deep);color:var(--layer-on-deep)}
.packages-page .layer-pricing .price-desc,.packages-page .layer-pricing .price-cadence{color:var(--layer-muted)}
.packages-page .layer-pricing .price-card li:before{color:var(--layer-deep)}
.packages-page .layer-pricing .text-button{border-bottom-color:var(--layer-ink)}
.packages-page .layer-pricing .text-button:hover{color:var(--layer-deep);border-color:var(--layer-deep)}
.packages-page .layer-pricing :is(a,button):focus-visible{outline-color:var(--layer-ink)}
.packages-page .layer-pricing .pricing-note{color:var(--layer-muted)}
.packages-page .layer-pricing .price-legal{color:var(--layer-muted);margin-top:10px}
.price-setup{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:18px 0 0;padding:12px 14px;border:1px dashed var(--layer-line);font-size:14px;line-height:1.4}
.price-setup span{display:flex;flex-direction:column;gap:3px}
.price-setup small{font-size:12px;color:var(--layer-muted)}
.price-setup b{font-weight:600;white-space:nowrap}
@container (max-width:290px){.price-setup{flex-direction:column;align-items:flex-start;gap:8px}}

/* Featured plan on the deep variant */
.packages-page .layer-pricing .price-card.featured{--line:var(--layer-deep-line);background:var(--layer-deep);border-color:var(--layer-deep);color:var(--layer-on-deep)}
.packages-page .layer-pricing .price-card.featured :is(.price-desc,.price-cadence,.price-card-top>span:first-child,.price-setup small){color:var(--layer-on-deep-muted)}
.packages-page .layer-pricing .price-card.featured .freq{background:var(--layer-surface);border-color:var(--layer-surface);color:var(--layer-ink)}
.packages-page .layer-pricing .price-card.featured li:before{color:var(--layer-surface)}
.packages-page .layer-pricing .price-card.featured .text-button{border-bottom-color:var(--layer-on-deep)}
.packages-page .layer-pricing .price-card.featured .text-button:hover{color:var(--layer-surface);border-color:var(--layer-surface)}
.packages-page .layer-pricing .price-card.featured :is(a,button):focus-visible{outline-color:var(--layer-on-deep)}
.packages-page .layer-pricing .price-card.featured .price-setup{border-color:var(--layer-deep-line)}

@media(max-width:1100px){
 .teaser-head{grid-template-columns:1fr;gap:25px}
}
@media(max-width:760px){
 .price-tracks{grid-template-columns:1fr;gap:16px}
 .price-track{padding:24px 22px 20px}
 .price-track :is(h2,h3),.packages-hero .price-track :is(h2,h3){font-size:30px;margin-top:24px}
 .track-price,.packages-hero .track-price{font-size:46px;margin-top:22px}
 .track-link{margin-top:20px}
 .teaser-head{margin-bottom:32px}
 .teaser-head h2{font-size:44px}
 .teaser-head p{font-size:15px}
 .teaser-independent{font-size:14px;margin-top:24px}
 .teaser-actions{margin-top:24px}
 .price-legal,.packages-hero>.price-legal{font-size:12px}
 .packages-hero .price-tracks{margin-top:34px}
 .packages-hero .price-track :is(h2,h3){font-size:27px;margin-top:18px}
 .packages-hero .track-price{font-size:40px;margin-top:18px}
 .packages-hero .track-link{margin-top:14px}
 .pricing-heading p{font-size:15px}
 .packages-page .layer-pricing{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.track-link{transition:none}}