/* ==========================================================================
TuffPuff satellite — design tokens
Harvested from https://tuffpuff1.com/de on 2026-09-07.
Every colour, font, radius and button dimension below comes from the brand
site. Do not add values that are not here.
========================================================================== */
/* self-hosted brand type — Barlow / Barlow Semi Condensed, latin subset (covers de-AT incl. äöüß).
Files in assets/fonts/, fetched 2026-09-10. No runtime request to fonts.googleapis.com or
fonts.gstatic.com — self-hosted only. */
@font-face{
font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/barlow-400.woff2") format("woff2");
}
@font-face{
font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;
src:url("fonts/barlow-500.woff2") format("woff2");
}
@font-face{
font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/barlow-600.woff2") format("woff2");
}
@font-face{
font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;
src:url("fonts/barlow-800.woff2") format("woff2");
}
@font-face{
font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/barlow-semicondensed-600.woff2") format("woff2");
}
@font-face{
font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;
src:url("fonts/barlow-semicondensed-800.woff2") format("woff2");
}
:root{
/* grounds */
--bg:#18143B;
--surface:#221E42;
--surface-2:#2B2749;
--surface-3:#454260;
--surface-4:#373354; /* theme-color der Marke */
--bg-deep:#161039;
--panel:#514D72;
/* text */
--ink:#FFFFFF;
--ink-2:#C9C6DC; /* raised from #9894B3 — brand value was 3.6:1 on --surface */
--muted:#9894B3;
--line:rgba(255,255,255,.10);
--line-2:#6E698B;
/* accent: brand primary CTA, green -> yellow, black label */
--accent-from:#59FF8B;
--accent-to:#FDF45B;
--accent-grad:linear-gradient(90deg,#59FF8B 0%,#FDF45B 100%);
--accent-ink:#000000;
--accent-solid:#59FF8B;
/* promo: brand secondary CTA, violet -> magenta, white label */
--promo-grad:linear-gradient(90deg,#8D1CFF 0%,#8D1CFF 50%,#FF33EB 100%);
--promo-ink:#FFFFFF;
/* type */
--font-body:Barlow,-apple-system,"Segoe UI",sans-serif;
--font-display:"Barlow Semi Condensed",Barlow,sans-serif;
--step-h1:clamp(38px,6vw,72px);
--step-h2:clamp(26px,3.4vw,36px);
--step-h3:20px;
--step-body:16px;
--step-small:14px;
--step-micro:12px;
/* geometry */
--radius-pill:9999px;
--radius-card:12px;
--radius-panel:24px;
--radius-input:6px;
--container:1200px;
--gap-block:64px;
--gap-inline:16px;
/* primary button, copied 1:1 from the brand header button */
--cta-height:48px;
--cta-weight:600;
--cta-size:16px;
--cta-transform:uppercase;
--cta-inset:inset 0 2px 0 rgba(255,255,255,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
font-size:var(--step-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-solid)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent-solid);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* --- type ------------------------------------------------------------- */
h1,h2,h3,.eyebrow,.btn,th,.tab,.stat .v{font-family:var(--font-display)}
h1{font-size:var(--step-h1);line-height:1.02;font-weight:800;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
h2{font-size:var(--step-h2);line-height:1.1;font-weight:800;margin:0 0 14px;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
h3{font-size:var(--step-h3);line-height:1.25;font-weight:600;margin:0 0 8px}
p{margin:0 0 14px;color:var(--ink-2)}
p strong,li strong{color:var(--ink);font-weight:600}
.eyebrow{display:inline-block;font-size:var(--step-micro);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--accent-solid);margin:0 0 12px}
.lede{font-size:19px;line-height:1.5;color:var(--ink)}
.small{font-size:var(--step-small);color:var(--muted)}
/* --- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--cta-height);padding:0 26px;border:0;border-radius:var(--radius-pill);
font-size:var(--cta-size);font-weight:var(--cta-weight);text-transform:var(--cta-transform);
text-decoration:none;cursor:pointer;box-shadow:var(--cta-inset);white-space:nowrap}
.btn-primary{background:var(--accent-grad);color:var(--accent-ink)}
.btn-promo{background:var(--promo-grad);color:var(--promo-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
.btn-ghost{background:var(--surface-3);color:var(--ink);box-shadow:none}
.btn-sm{min-height:40px;font-size:var(--step-small);padding:0 18px}
.btn:hover{filter:brightness(1.06)}
/* --- header ----------------------------------------------------------- */
.hdr{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30}
.hdr .row{display:flex;align-items:center;gap:16px;height:64px}
.hdr .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
font-family:var(--font-display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.02em}
.hdr .logo img{height:28px;width:auto}
.hdr nav{display:none;gap:22px;margin-left:12px}
.hdr nav a{color:var(--ink-2);text-decoration:none;font-size:var(--step-small);font-weight:500}
.hdr nav a:hover,.hdr nav a[aria-current="page"]{color:var(--ink)}
.hdr .acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;background:var(--surface-3);
border:0;border-radius:var(--radius-pill);cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--surface-2);padding:12px 0 18px}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-size:17px}
.mnav a:last-child{border-bottom:0}
@media(min-width:980px){
.hdr{position:static}
.hdr nav{display:flex}
.burger{display:none}
.mnav{display:none!important}
}
@media(max-width:979px){
.hdr{position:sticky;top:0}
.hdr .row{height:56px}
.hdr .acts .btn-ghost{display:none}
}
/* --- hero ------------------------------------------------------------- */
.hero{padding:52px 0 44px;background:
radial-gradient(120% 120% at 85% 0%,rgba(141,28,255,.28) 0%,rgba(24,20,59,0) 60%),var(--bg)}
.hero .grid{display:grid;gap:28px;align-items:center}
.hero .copy p{max-width:60ch}
.hero .offer{font-family:var(--font-display);font-weight:800;line-height:1;margin:0 0 8px;
display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.hero .offer .pct{font-size:clamp(44px,7vw,80px);background:var(--accent-grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .offer .rest{font-size:clamp(20px,2.6vw,30px);color:var(--ink)}
.hero .terms{font-size:var(--step-small);color:var(--muted);margin:0 0 22px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.hero .facts3 .v{overflow-wrap:anywhere}
.hero .visual{border-radius:var(--radius-panel);overflow:hidden;background:var(--surface-2);
border:1px solid var(--line);min-height:220px;display:grid;place-items:center;padding:24px}
.hero .visual svg{width:100%;height:auto;display:block;border-radius:var(--radius-panel)}
.hero .visual{padding:0;border:0;background:transparent;min-height:0}
.hero .visual .badge{font-family:var(--font-display);text-transform:uppercase;text-align:center}
.hero .visual .badge b{display:block;font-size:clamp(30px,5vw,52px);font-weight:800;
background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.hero .visual .badge span{display:block;color:var(--ink-2);font-size:var(--step-small);letter-spacing:.1em;margin-top:8px}
.facts3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.facts3 .f{background:var(--surface);padding:12px 16px}
.facts3 .l{font-size:var(--step-micro);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
font-family:var(--font-display);font-weight:600}
.facts3 .v{font-size:17px;font-weight:600;color:var(--ink)}
@media(min-width:640px){.facts3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.hero{padding:70px 0 60px}.hero .grid{grid-template-columns:1.15fr .85fr;gap:44px}}
.hero.slim{padding:44px 0 34px}
.hero.slim h1{font-size:clamp(30px,4.2vw,50px)}
.hero.slim .terms{font-size:17px;color:var(--ink-2);max-width:62ch}
.hero.slim .grid{grid-template-columns:1fr}
/* --- trust strip ------------------------------------------------------ */
.trust{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust .row{display:flex;align-items:center;gap:26px;min-height:64px;overflow-x:auto;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.trust .item{display:flex;align-items:center;gap:9px;white-space:nowrap;scroll-snap-align:start;
font-size:var(--step-small);color:var(--ink-2)}
.trust .item b{color:var(--ink);font-weight:600}
.trust .rate{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--ink)}
.trust .pill{border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:4px 12px;
font-family:var(--font-display);font-weight:600;font-size:var(--step-small);color:var(--ink);text-decoration:none}
.trust .prov{display:flex;gap:14px;align-items:center;margin-left:auto}
.trust .prov span{font-size:var(--step-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* --- sections and tables ---------------------------------------------- */
.sec{padding:var(--gap-block) 0;border-top:1px solid var(--line)}
.sec > .wrap > p, .sec > .wrap > ul{max-width:72ch}
.tbl{border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--surface);margin:0 0 18px}
table{border-collapse:collapse;width:100%;font-size:15px}
caption{caption-side:bottom;text-align:left;font-size:var(--step-small);color:var(--ink-2);padding:10px 16px}
th{text-align:left;font-size:var(--step-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
/* ink-2, not muted: table text needs 7:1, muted only clears 4.85:1 on --surface-2 (see Site_Build_Logic gate 11-22) */
color:var(--ink-2);padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
tbody th{background:var(--surface-2);color:var(--ink);text-transform:none;letter-spacing:0;font-size:15px;
font-family:var(--font-body);font-weight:600;white-space:normal}
tr:last-child td,tr:last-child th{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.hl{color:var(--ink);font-weight:600}
tr.first td,tr.first th{background:rgba(89,255,139,.07)}
@media(max-width:639px){
.rtbl thead{display:none}
.rtbl tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}
.rtbl tr:last-child{border-bottom:0}
.rtbl td,.rtbl tbody th{display:flex;justify-content:space-between;gap:16px;border:0;padding:7px 16px;text-align:left}
.rtbl td::before{content:attr(data-l);color:var(--ink-2);font-size:var(--step-micro);letter-spacing:.07em;
text-transform:uppercase;font-family:var(--font-display);font-weight:600;flex:0 0 42%}
.rtbl tbody th{background:transparent}
}
/* --- cards, games, steps --------------------------------------------- */
.cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px}
.card h3{margin-bottom:6px}
.card p{margin:0;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tile{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-card);
overflow:hidden;text-decoration:none;color:var(--ink)}
.tile:hover{border-color:var(--accent-solid)}
.tile .art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
background:linear-gradient(140deg,var(--panel),var(--surface-3));
font-family:var(--font-display);font-size:12px;color:var(--ink-2);padding:6px}
.tile .t{display:block;padding:9px 11px;font-size:var(--step-small);font-weight:600;line-height:1.25}
.tile .p{display:block;padding:0 11px 10px;font-size:var(--step-micro);color:var(--muted)}
ol.steps{counter-reset:s;list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2);max-width:72ch}
ol.steps li{counter-increment:s;position:relative;padding:0 0 26px 46px}
ol.steps li:last-child{padding-bottom:0}
ol.steps li::before{content:counter(s);position:absolute;left:-16px;top:0;width:32px;height:32px;
border-radius:var(--radius-pill);background:var(--accent-grad);color:var(--accent-ink);
font-family:var(--font-display);font-weight:800;font-size:15px;display:grid;place-items:center}
ol.steps h3{margin-bottom:4px}
ol.steps p{margin:0;font-size:15px}
ul.ticks{list-style:none;margin:0 0 16px;padding:0;max-width:72ch}
ul.ticks li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--ink-2)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--accent-solid)}
.note{border-left:3px solid var(--accent-solid);background:var(--surface);padding:14px 16px;border-radius:0 var(--radius-input) var(--radius-input) 0;margin:0 0 18px;max-width:72ch}
.note p{margin:0;font-size:15px}
/* --- phone mock, faq, footer, sticky --------------------------------- */
.phone{background:var(--surface-2);border:1px solid var(--line-2);border-radius:26px;padding:12px;max-width:280px}
.phone .screen{background:var(--bg);border-radius:18px;aspect-ratio:9/17;display:grid;place-items:center;padding:18px;text-align:center}
.phone svg{width:100%;height:auto;display:block;border-radius:18px}
.phone .screen b{font-family:var(--font-display);font-size:26px;font-weight:800;background:var(--accent-grad);
-webkit-background-clip:text;background-clip:text;color:transparent}
.faq{max-width:78ch}
.faq details{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);margin-bottom:10px}
.faq summary{cursor:pointer;padding:15px 46px 15px 18px;font-weight:600;color:var(--ink);position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:22px;width:9px;height:9px;
border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 18px 16px;color:var(--ink-2);font-size:15px}
.ftr{background:var(--surface-2);border-top:1px solid var(--line);padding:44px 0 96px;margin-top:0}
.ftr .logo{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:12px}
.ftr .logo img{height:26px;width:auto;display:block}
.ftr .cols{display:grid;gap:26px;grid-template-columns:1fr}
/* auto-fit + 1fr tracks give N equal-width columns for whatever N children a page
actually has (3 on tuffpuffaustria.at: Marke/Seiten/Rechtliches; 2 on
tuffpuffcasinos.at: Marke/Rechtliches, no Seiten column there). Measured in a real
browser (Playwright) at 1440px: the old fixed 1.4fr/1fr/1fr ratio made the brand
column's grid TRACK 456px wide against 326px for the other two -- the literal CSS
gap between tracks was always a uniform 26px, but a 456px-wide column holding two
short paragraphs reads as "brand takes a third, then a dead zone, then two columns
squeezed together on the right" purely from the width imbalance, not from the
first-child max-width below (checked: at this breakpoint 56ch resolves to ~506px in
the site's font, wider than the 456px track, so it wasn't even the thing binding).
Equal auto-fit tracks (369/369/369px at the same width) remove that imbalance. */
@media(min-width:900px){.ftr .cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.ftr h4{font-family:var(--font-display);font-size:var(--step-micro);letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);margin:0 0 10px;font-weight:600}
.ftr p,.ftr li{font-size:var(--step-small);color:var(--ink-2)}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:7px}
.ftr a{color:var(--ink-2);text-decoration:none}
.ftr a:hover{color:var(--ink)}
/* Seiten/Rechtliches columns are bare tags with no whitespace between them in the
markup ("CasinoBonus…"), so without an explicit display they render as
one unbroken inline run that only breaks between links at random, looking scrambled
at every width. Give each link its own row like a real list. Excludes .logo, which
keeps its own inline-flex layout above. */
.ftr .cols > div > a:not(.logo){display:block;margin:0 0 9px;font-size:var(--step-small)}
.ftr .cols > div > a:not(.logo):last-child{margin-bottom:0}
/* Column headings ("Seiten"/"Rechtliches") were plain 14px text, visually identical to
the links below them — reuse the existing (until now unused) .ftr h4 treatment so the
heading reads as a label, not another list item. */
.ftr .cols h3.small{font-family:var(--font-display);font-size:var(--step-micro);
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;
font-weight:600}
/* The operator paragraph has no natural line-length limit below 900px, where .cols is
single-column and the text spans the full container edge to edge. Cap it like other
body copy (.sec > p is 72ch) so it stays readable instead of stretching. Only applied
below 900px: at the grid breakpoint each column is now an equal auto-fit track (see
above), and capping just the first column's width there recreates the exact bug this
fixes -- a column that stops short of its own track, reading as an uneven gap next to
the other columns that fill theirs. */
.ftr .cols > div:first-child{max-width:56ch}
@media(min-width:900px){.ftr .cols > div:first-child{max-width:none}}
.ftr .rg{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.ftr .age{border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:3px 11px;
font-family:var(--font-display);font-weight:800;font-size:var(--step-small);color:var(--ink)}
.ftr .btm{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:var(--step-micro);color:var(--muted)}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);
border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
display:flex;align-items:center;gap:14px;transform:translateY(110%);visibility:hidden}
.sticky.on{transform:translateY(0);visibility:visible}
.sticky .fig{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.1;color:var(--ink)}
.sticky .fig span{display:block;font-size:var(--step-micro);font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sticky .btn{flex:1;min-height:56px}
@media(min-width:980px){.sticky{display:none}}
@media (prefers-reduced-motion:no-preference){.sticky{transition:transform .15s ease,visibility .15s}}
/* ---------- Blöcke der Struktur v2 ---------------------------------- */
.age{font-size:var(--step-small);color:var(--muted);margin:0 0 18px}
.age b{color:var(--ink-2);font-weight:600}
.tzone{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.tzone .g{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
@media(min-width:640px){.tzone .g{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.tzone .g{grid-template-columns:repeat(3,1fr)}}
.tzone .i{background:var(--surface);padding:13px 16px}
.tzone .l{font-family:var(--font-display);font-size:var(--step-micro);font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted)}
.tzone .v{font-size:15.5px;color:var(--ink);font-weight:600}
.tzone .stamp{margin-top:12px;font-size:var(--step-micro);color:var(--muted)}
.prods{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.prods{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.prods{grid-template-columns:repeat(4,1fr)}}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
padding:18px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.prod:hover{border-color:var(--accent-solid)}
.prod .k{font-family:var(--font-display);font-size:var(--step-micro);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-solid)}
.prod h3{margin:0}
.prod p{margin:0;font-size:14.5px}
.prod .go{margin-top:auto;font-family:var(--font-display);font-size:var(--step-small);font-weight:600;
text-transform:uppercase;color:var(--ink-2)}
.pc{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:760px){.pc{grid-template-columns:1fr 1fr}}
.pc .box{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);padding:18px}
.pc .box.plus{border-left:3px solid var(--accent-solid)}
.pc .box.minus{border-left:3px solid #FF33EB}
.pc h3{font-family:var(--font-display);text-transform:uppercase;font-size:15px;letter-spacing:.06em;margin-bottom:10px}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:22px;margin-bottom:9px;font-size:15px;color:var(--ink-2)}
.pc .plus li::before{content:"+";position:absolute;left:0;color:var(--accent-solid);font-weight:700}
.pc .minus li::before{content:"–";position:absolute;left:0;color:#FF33EB;font-weight:700}
.final{border-top:1px solid var(--line);background:
radial-gradient(90% 140% at 50% 0%,rgba(141,28,255,.30) 0%,rgba(24,20,59,0) 70%),var(--bg-deep);
padding:56px 0;text-align:center}
.final h2{margin-bottom:10px}
.final p{max-width:56ch;margin:0 auto 22px}
.probs{display:grid;gap:12px;grid-template-columns:1fr;margin:0 0 18px}
@media(min-width:760px){.probs{grid-template-columns:repeat(2,1fr)}}
.prob{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:15px 17px}
.prob b{display:block;font-family:var(--font-display);font-size:15px;margin-bottom:4px}
.prob span{font-size:14.5px;color:var(--ink-2)}
.brand-mark{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-display);
font-weight:800;font-size:22px;letter-spacing:.01em;text-transform:uppercase;line-height:1}
.brand-mark i{font-style:normal;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;letter-spacing:-.01em}
/* ---------- Провайдери, добірка слотів, картки розділів ------------- */
.provs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;margin:0 0 14px}
@media(min-width:560px){.provs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.provs{grid-template-columns:repeat(5,1fr)}}
.prov{background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;
align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.prov:hover{background:var(--surface-2)}
.prov .mark{width:100%;max-width:120px;height:34px;display:block;line-height:0}
.prov .mark svg,.prov .mark img{width:100%;height:100%;object-fit:contain;display:block}
.prov .nm{font-size:var(--step-small);font-weight:600;text-align:center;line-height:1.25}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 14px}
@media(min-width:760px){.slots{grid-template-columns:repeat(4,1fr)}}
.slot{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.slot:hover{border-color:var(--accent-solid)}
.slot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
background:linear-gradient(140deg,var(--panel),var(--surface-3));font-size:12px;color:var(--ink-2);padding:6px}
.slot .in{padding:11px 12px 13px;display:flex;flex-direction:column;gap:4px;flex:1}
.slot .nm{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.2}
.slot .pv{font-size:var(--step-micro);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.slot .ft{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.slot .go{margin-top:auto;font-family:var(--font-display);font-size:var(--step-small);font-weight:600;
text-transform:uppercase;color:var(--accent-solid)}
.secs{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.secs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.secs{grid-template-columns:repeat(4,1fr)}}
.sec-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.sec-card:hover{border-color:var(--accent-solid)}
.sec-card .ill{height:96px;display:grid;place-items:center;font-family:var(--font-display);
font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);
background:var(--accent-grad)}
.sec-card .ill.alt{background:var(--promo-grad);color:#fff}
.sec-card .bd2{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.sec-card h3{margin:0;font-size:17px}
.sec-card p{margin:0;font-size:14.5px}
.sec-card .go{margin-top:auto;font-family:var(--font-display);font-size:var(--step-small);
font-weight:600;text-transform:uppercase;color:var(--ink-2)}
.stamp-line{font-size:var(--step-micro);color:var(--muted);margin:10px 0 0}
/* ---------- Cover: Platzhalter-Grafik hinter dem echten Bild -------- */
.cover{position:relative;display:block;width:100%;aspect-ratio:4/3;background-position:center;background-size:cover;
background-repeat:no-repeat;overflow:hidden;line-height:0}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover img.failed{display:none}
/* ---------- Hero-Banner im Markenstil ------------------------------- */
.bnr{position:relative;border-radius:var(--radius-panel);overflow:hidden;
background:var(--promo-grad);display:grid;grid-template-columns:1fr;gap:8px;
padding:22px 24px;min-height:236px;align-content:center}
.bnr::after{content:"";position:absolute;inset:0;
background:radial-gradient(120% 90% at 85% 20%,rgba(255,255,255,.18),transparent 60%);pointer-events:none}
.bnr-lb{font-family:var(--font-display);font-size:var(--step-micro);font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:rgba(255,255,255,.85)}
.bnr-pct{font-family:var(--font-display);font-weight:800;line-height:.9;
font-size:clamp(52px,7vw,84px);color:var(--accent-from);
text-shadow:0 2px 0 rgba(0,0,0,.18)}
.bnr-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.bnr-pill{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);
padding:5px 13px;font-family:var(--font-display);font-weight:700;font-size:var(--step-small);color:#fff}
.bnr-max{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff}
.bnr .btn{margin-top:14px;align-self:start;position:relative;z-index:2}
.bnr-art{position:absolute;right:10px;bottom:10px;width:38%;max-width:180px;aspect-ratio:1/1;opacity:.92;
line-height:0;pointer-events:none}
.bnr-art svg,.bnr-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom right}
.bnr-art img.failed{display:none}
.bnr-art img{border:0}
.bnr-txt{position:relative;z-index:2;max-width:66%}
@media(max-width:520px){.bnr-txt{max-width:100%}.bnr-art{position:static;width:100%;max-width:none;aspect-ratio:16/9;margin-top:8px}
.bnr-art svg,.bnr-art img{position:relative}}
.prov-logo{position:relative;aspect-ratio:auto;height:34px;width:100%;max-width:120px;background:none}
.prov-logo svg,.prov-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* ==========================================================================
v3 · CTA-Hervorhebung und Markt-Umschalter
Vom Wettbewerb uebernommen: Wert im Button-Label, zwei Gewichte im Header,
ruhige Pulsation. Nicht uebernommen: Countdown, Zaehler, Review-Popup.
========================================================================== */
/* Header bleibt auf allen Breiten stehen — der CTA verschwindet nie */
.hdr{position:sticky;top:0;backdrop-filter:saturate(1.2) blur(8px);
background:color-mix(in srgb,var(--surface) 88%,transparent)}
@media(min-width:980px){.hdr{position:sticky;top:0}}
@supports not (backdrop-filter:blur(1px)){.hdr{background:var(--surface)}}
.hdr.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.42)}
/* --- Button-Hierarchie: genau drei Stufen ------------------------------ */
/* 1. Primaer — die einzige Akzentflaeche im Blickfeld */
.btn-cta{min-height:56px;padding:0 34px;font-size:19px}
@media(min-width:980px){.btn-cta{min-width:260px;font-size:20px}}
.btn-glow,.btn-cta{box-shadow:var(--cta-inset),0 10px 26px -8px rgba(89,255,139,.55)}
.btn-pulse{animation:ctaPulse 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ctaPulse{
0% {box-shadow:var(--cta-inset),0 10px 26px -8px rgba(89,255,139,.55),0 0 0 0 rgba(89,255,139,.42)}
70% {box-shadow:var(--cta-inset),0 10px 26px -8px rgba(89,255,139,.55),0 0 0 18px rgba(89,255,139,0)}
100%{box-shadow:var(--cta-inset),0 10px 26px -8px rgba(89,255,139,.55),0 0 0 0 rgba(89,255,139,0)}
}
.btn:active{transform:scale(.98)}
.btn-primary:hover{filter:brightness(1.04)}
/* 2. Ruhig — zweiter Zweck, gleiche Geometrie, keine Akzentflaeche */
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-quiet:hover{background:var(--surface-3);filter:none}
.btn-cta-2{min-height:56px;padding:0 26px;font-size:17px}
/* 3. Sektionsweise — Textlink mit Chevron, in .go / .more schon vorhanden */
.cta-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.cta-wrap .ctas{margin-bottom:0}
.cta-note{margin:0;font-size:var(--step-small);color:var(--ink-2);display:flex;align-items:center;gap:8px}
.cta-note::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent-solid)}
/* Nur eine Akzentflaeche im ersten Bildschirm: der Banner-Button wird ruhig */
.bnr .btn-primary{box-shadow:var(--cta-inset)}
/* --- Sticky-Leiste ----------------------------------------------------- */
.sticky{gap:12px}
.sticky-x{flex:none;width:34px;height:34px;border:0;border-radius:var(--radius-pill);
background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.sticky-x:hover{background:var(--surface-3);color:var(--ink)}
.sticky.dismissed{transform:translateY(120%)!important;visibility:hidden!important}
/* --- Markt-Umschalter -------------------------------------------------- */
.lsw{position:relative;flex:none}
.lsw>summary{list-style:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;
border-radius:var(--radius-pill);cursor:pointer;color:var(--ink-2);
box-shadow:inset 0 0 0 1px var(--line);font-size:var(--step-small)}
.lsw>summary::-webkit-details-marker{display:none}
.lsw>summary:hover{color:var(--ink);background:var(--surface-3)}
.lsw>summary b{font-weight:600;color:var(--ink)}
.lsw>summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lsw[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.lsw-code{font-size:var(--step-micro);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.lsw-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:272px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-card);
box-shadow:0 18px 44px rgba(0,0,0,.5);padding:8px;display:grid;gap:2px}
.lsw-h{font-family:var(--font-display);font-size:var(--step-micro);letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}
.lsw-i{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:var(--radius-input);
text-decoration:none;color:var(--ink);font-size:15px;font-weight:600}
.lsw-i i{font-style:normal;font-size:var(--step-micro);font-weight:500;color:var(--muted)}
a.lsw-i:hover{background:var(--surface-3)}
.lsw-i.is-cur{box-shadow:inset 0 0 0 1px var(--accent-solid)}
.lsw-i.is-cur i{color:var(--accent-solid)}
.lsw-i.is-off{opacity:.5;cursor:not-allowed}
.mnav-loc{padding-top:12px}
.mnav-loc .lsw{width:100%}
.mnav-loc .lsw>summary{height:46px}
.mnav-loc .lsw-pop{position:static;box-shadow:none;margin-top:8px}
@media(max-width:979px){.hdr .acts .lsw{display:none}}
@media(min-width:980px){.mnav-loc{display:none}}
/* --- Bewegung aus, wenn das System es verlangt ------------------------- */
@media(prefers-reduced-motion:reduce){
.btn-pulse{animation:none}
.btn:active{transform:none}
.sticky{transition:none}
.hdr{backdrop-filter:none}
}
/* --- v3.1 · mobile Leiste mit zwei Knoepfen ---------------------------- */
.sticky{flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px 12px}
.sticky-top{display:flex;align-items:center;gap:12px}
.sticky .fig{flex:1;min-width:0}
.sticky .fig span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-btns{display:grid;grid-template-columns:1fr 1.45fr;gap:10px}
/* .btn sets white-space:nowrap globally (base rule ~line 110), and a grid item's default
min-width is auto (= its min-content size), so the nowrap label "Konto eröffnen" forced
this cell's min-content wider than its 1fr track at narrow widths -- the browser grew
the grid track past the viewport to fit it, overflowing .sticky (position:fixed;
left:0;right:0) sideways and causing 320px horizontal scroll even though the hero
itself never overflowed (measured: 24px). min-width:0 lets the track shrink to the fr
value again; white-space:normal lets the label wrap to a 2nd line inside min-height
instead of forcing width, so both button labels stay fully visible with no cropping. */
.sticky-btns .btn{min-height:52px;padding:0 14px;font-size:16px;width:100%;
min-width:0;white-space:normal;text-align:center;line-height:1.15}
.sticky-btns .btn-quiet{box-shadow:inset 0 0 0 1px var(--line-2)}
@media(max-width:359px){.sticky-btns{grid-template-columns:1fr 1fr}}
/* --- v3.2 · genau eine Akzentflaeche je Bildschirm -------------------- */
/* Vor dem Scrollen tragt der Hero den Akzent; der Header-Knopf ist ruhig.
Nach dem Scrollen ist der Hero weg und der Header uebernimmt den Akzent. */
.btn-hdr{background:transparent;color:var(--accent-solid);
box-shadow:inset 0 0 0 1.5px var(--accent-solid)}
.btn-hdr:hover{background:rgba(89,255,139,.12);filter:none}
.hdr.scrolled .btn-hdr{background:var(--accent-grad);color:var(--accent-ink);
box-shadow:var(--cta-inset),0 8px 22px -8px rgba(89,255,139,.5)}
.btn-hdr .lb-s{display:none}
@media(max-width:979px){
.hdr .acts .btn-quiet{display:none}
.btn-hdr .lb-l{display:none}
.btn-hdr .lb-s{display:inline}
}
/* Knopf im Marken-Banner: ruhig, damit der Hero-CTA allein Akzent bleibt */
.btn-onbnr{background:rgba(255,255,255,.14);color:#fff;
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-onbnr:hover{background:rgba(255,255,255,.24);filter:none}
/* --- v3.2 · Pulsation als Ring, nicht als Schatten -------------------- */
.btn-cta{position:relative;isolation:isolate}
.btn-cta::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
box-shadow:0 0 0 2px var(--accent-solid);opacity:0;pointer-events:none}
.btn-pulse::after{animation:ctaRing 2.6s cubic-bezier(.35,0,.25,1) infinite}
@keyframes ctaRing{
0% {opacity:.55;transform:scale(1)}
65% {opacity:0;transform:scale(1.075)}
100%{opacity:0;transform:scale(1.075)}
}
.btn-pulse{animation:none}
/* --- v3.2 · Tabellenkarten: Label nicht doppelt ----------------------- */
@media(max-width:719px){
.rtbl tr:has(> th) td::before{display:none}
.rtbl tbody th{font-family:var(--font-display);font-size:var(--step-micro);
letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-weight:600;padding-bottom:0}
.rtbl tr:has(> th) td{padding-top:2px}
}
/* --- v3.3 · Hero-CTA auf schmalen Schirmen ueber die volle Breite ------ */
@media(max-width:719px){
.hero .ctas{display:grid;grid-template-columns:1fr;gap:10px}
.hero .ctas .btn{width:100%}
.cta-wrap{margin-bottom:22px}
.bnr-txt{max-width:100%}
.bnr-art{width:46%;max-width:150px;opacity:.85}
}
.bnr-lb,.bnr-pct{display:block}
@media(max-width:719px){.bnr{min-height:0}.bnr-art{position:relative;right:auto;bottom:auto;margin:10px 0 0}}
/* ==========================================================================
v3.4 — Erster Bildschirm auf echten Markenassets
web-designer, 2026-09-10. Regel: [[Brand_Mimicry_Spec]] (90 %).
Was sich aendert: die freihaendig gezeichnete SVG-Komposition in der
Promo-Tafel (Halo-Ringe + skaliertes Logo) weicht dem **offiziellen
Maskottchen der Marke** (assets/img/mascot.webp — Zuschnitt aus
tuffpuff1.com/403/403.webp, Pfade und Pixel unveraendert).
Die Tafel wird zur Buehne dafuer: die Figur steht auf der Unterkante,
dahinter ein Halo aus dem Akzentverlauf der Marke (#59FF8B -> #FDF45B).
Reichweite: ausschliesslich .bnr / .bnr-art im Hero. Grund, Palette,
Typo-Skala und Knopfgeometrie der Marke bleiben unangetastet — auch der
Hero-Verlauf selbst, der 1:1 von der Markenseite stammt.
Rueckbau: diesen Block loeschen.
========================================================================== */
/* Tafel: etwas mehr Hoehe, damit die Figur ganz hineinpasst und nicht
am oberen Rand abgeschnitten wird. Kein Layoutsprung: die Figur liegt
absolut, die Hoehe steht vorher fest. */
/* --- Ersatzschrift mit angeglichenen Metriken ------------------------- */
/* Gemessen am 2026-09-10 im headless Chrome, nicht geschaetzt: bei 100 px
ist Barlow Semi Condensed 800 nur 73,55 % so breit wie Arial 800, Barlow
400 nur 94,10 %. Solange die Markenschrift laedt, setzt der Systemstack
also deutlich breiter — auf 1440 px kippte dadurch ".rest" im Angebots-
block in eine zweite Zeile und sprang beim Schriftwechsel zurueck:
ein einzelner Layoutsprung von CLS 0,084.
Die Ersatzfamilien unten tragen dieselben Metriken wie Barlow, damit der
Wechsel keine Zeile mehr umbricht. Kein zusaetzlicher Request: src ist
eine bereits installierte Systemschrift. */
@font-face{font-family:"Barlow Metric Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
font-weight:400;size-adjust:94.82%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
@font-face{font-family:"Barlow Metric Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
font-weight:800;size-adjust:98.47%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
@font-face{font-family:"Barlow SC Metric Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
font-weight:600;size-adjust:88.14%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
@font-face{font-family:"Barlow SC Metric Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
font-weight:800;size-adjust:90.35%;ascent-override:100%;descent-override:20%;line-gap-override:0%}
/* Zuerst nur im Hero umdefiniert — dann gemessen, dass der Restsprung von
der Kopfzeile kommt: .acts ruckte beim Schriftwechsel von x 991 auf 1041
und schob den Hero um 4 px. Der Ersatzstack gilt deshalb global. Er nimmt
nichts weg und aendert kein Aussehen, sobald Barlow da ist — er sorgt nur
dafuer, dass die Sekunde davor gleich breit setzt. */
:root{
--font-body:Barlow,"Barlow Metric Fallback",-apple-system,"Segoe UI",sans-serif;
--font-display:"Barlow Semi Condensed","Barlow SC Metric Fallback",Barlow,sans-serif;
}
/* .hero .visual ist ein Grid mit place-items:center — das schrumpft die Tafel
auf ihre Inhaltsbreite (auf 1440 px waren es 282 statt 474). Dann laeuft die
Zahl 240 % in die Figur. Die Tafel nimmt ihre Spalte jetzt ganz ein. */
.hero .visual .bnr{width:100%}
.bnr{min-height:252px}
@media(min-width:980px){.bnr{min-height:330px}}
.bnr-lb{color:#FFFFFF} /* 5,61:1 auf dem Promo-Verlauf — §3.5 Kontrastregel */
/* --- Figur ------------------------------------------------------------ */
/* Ueber die Hoehe bemasst, nicht ueber die Breite: so passt die Figur bei
jeder Spaltenbreite in die Tafel, statt bei schmalen Desktops oben
wegzuschneiden. aspect-ratio haelt die Breite fest -> CLS bleibt 0. */
.bnr-art{
position:absolute; right:0; bottom:0; left:auto; top:auto;
z-index:1; margin:0; opacity:1; line-height:0; pointer-events:none;
height:calc(100% - 26px); width:auto; aspect-ratio:267/442; max-width:none;
}
/* Gruener Saum aus dem Markenakzent: drop-shadow folgt der Alpha-Silhouette,
also der Figur selbst — nicht ihrem Rechteck. Darunter der Fallschatten,
der die Figur vom hellen Verlauf trennt. */
.bnr-art img{
position:relative; z-index:1; inset:auto;
width:100%; height:100%; object-fit:contain; object-position:bottom right;
filter:drop-shadow(0 0 9px rgba(89,255,139,.55)) drop-shadow(0 12px 20px rgba(11,8,19,.5));
}
/* Spot hinter der Figur. Bewusst im Markengrund #18143B und nicht im
Akzentgruen: gruener Schein auf dem hellen Promo-Verlauf wird stumpf,
ein dunkler Spot dagegen hebt die violette Figur vom Magenta ab. */
.bnr-art::before{
content:""; position:absolute; z-index:0;
left:50%; top:44%; width:124%; aspect-ratio:1;
transform:translate(-50%,-50%);
background:radial-gradient(closest-side,
rgba(24,20,59,.42) 0%, rgba(24,20,59,.20) 46%, rgba(24,20,59,0) 72%);
animation:tp-halo 7s ease-in-out infinite;
}
/* Standschatten: trennt die Figur vom Verlauf und laesst sie auf der
Unterkante der Tafel aufsetzen statt darin zu schweben. */
.bnr-art::after{
content:""; position:absolute; z-index:0; pointer-events:none;
left:50%; bottom:-2px; width:86%; height:13%;
transform:translateX(-50%);
background:radial-gradient(closest-side, rgba(24,20,59,.55) 0%, rgba(24,20,59,0) 78%);
}
@keyframes tp-halo{
0%,100%{opacity:.68; transform:translate(-50%,-50%) scale(.96)}
50% {opacity:1; transform:translate(-50%,-50%) scale(1.06)}
}
/* Nur Opazitaet und Skalierung, beides auf dem Compositor — kein Reflow,
kein Layoutsprung. Wer weniger Bewegung will, bekommt den Halo statisch. */
@media(prefers-reduced-motion:reduce){
.bnr-art::before{animation:none; opacity:.84; transform:translate(-50%,-50%) scale(1)}
}
/* Textspalte weicht der Figur aus. */
@media(min-width:560px){
.bnr-txt{max-width:64%}
}
/* Schmale Telefone: die Figur steht unter dem Text statt daneben — bei
320 px waere die Zahl 240 % sonst breiter als die verbleibende Spalte.
Sie liegt ohnehin unter dem CTA, die Falz bleibt davon unberuehrt.
Sie bleibt aber rechts buendig: der Zuschnitt hat eine gerade Kante am
Ruecken (dort sass im Original die Grenzschranke), und an der Tafelkante
liest sich die als gewollt, in der Mitte als Beschnitt. */
@media(max-width:559px){
.bnr{padding-bottom:0}
.bnr-txt{max-width:100%}
.bnr-art{
position:relative; right:auto; bottom:auto;
height:clamp(196px,54vw,240px); width:auto; aspect-ratio:267/442;
margin:8px -24px 0 auto; /* -24px hebt das rechte Innenmass der Tafel auf */
}
.bnr-art::before{top:46%; width:132%}
}
/* ==========================================================================
v3.5 — T3 · Bannerkopf, Ankermenue, dichteres Layout
web-designer, 2026-09-10. Regel: [[Brand_Mimicry_Spec]] (90 %).
Quelle ist ab jetzt die **echte Markenseite**, nicht mehr eine Rekonstruktion:
der Auftraggeber hat die lebende Seite als HTML gesichert
(C:/BrandProtection/TuffPuff Online Casino ... .html + _files/).
Uebernommen wurde daraus der Erstbildschirm-Baustein der Marke,
app-welcome-pack-banner / .welcome-pack-banner--main:
Radius 1.5rem · Polster 1rem/1.25rem mobil, 1.5rem 2.5rem ab Tablet ·
Mindesthoehe 204 px mobil / 268 px Desktop (Variante --solo) ·
Grund #221E42 + zwei Verlaufsschichten
linear-gradient(180deg, rgba(43,39,73,0) 0%, #2B2749 133.21%),
linear-gradient(85.59deg, #8800FF 3.62%, rgba(36,0,255,.6) 92.32%)
Typo im Banner: Barlow, kursiv, Versalien —
Name 18/20 px 800, Zahl 56 px mobil / 80 px Desktop 900 in #59FF8B mit
text-shadow 0 2px 0 rgba(0,0,0,.3), Freispiel-Pille weiss auf schwarz,
"bis zu"-Zeile 18/24 px kursiv.
Figur: .welcome-pack-banner__tizer, absolut rechts, ueber die Tafelkante
hinaus, overflow:hidden schneidet sie an.
Was hier absichtlich abweicht (und warum):
- Die Hintergrundfotografie der Marke liegt nicht vor (Origin geo-gesperrt,
nur die Verlaufsschichten sind aus dem gespeicherten style-Attribut
bekannt). Also nur die Verlaeufe — kein erfundener Ersatzhintergrund.
- Die Freispiel-Pille bleibt auf allen Breiten eine Pille; die Marke loest
sie ab Tablet in weissen Fliesstext auf. Auf einer Bonusseite ist die
Pille der Anker fuer die zweite Zahl und traegt 21:1 Kontrast.
Reichweite: .wpb, Kopfzeile, .hero-bnr, Kartenraster, Tabellen-Summenzeile,
.sticky-lite. Grund, Akzent, Knopfgeometrie, Schriftfamilie unangetastet.
Rueckbau: diesen Block loeschen.
========================================================================== */
/* Barlow Black Italic — die Bannertypo der Marke. Self-hosted wie die anderen
sechs Schnitte (latin-Subset, deckt aeoeue und ss). Kein Laufzeit-Request. */
@font-face{
font-family:"Barlow";font-style:italic;font-weight:900;font-display:swap;
src:url("fonts/barlow-900-italic.woff2") format("woff2");
}
/* Metrisch angeglichener Ersatz, gemessen am 2026-09-10 im headless Chromium:
Barlow 900 kursiv setzt fuer die Bannerzeile nur 89,71 % so breit wie
synthetisch kursives Arial 900 (erster Anlauf mit 70,75 % war an einer zu
kurzen Testzeile kalibriert und liess die "bis zu"-Zeile um 35 px springen —
gemessener Wert am echten Bannertext, nicht am Modellstring).
Ohne Angleich springt die Zeile beim Schriftwechsel um -> CLS.
src ist eine installierte Systemschrift, also kein zusaetzlicher Request. */
@font-face{
font-family:"Barlow Italic Metric Fallback";
src:local("Arial"),local("Helvetica"),local("Liberation Sans");
font-style:italic;font-weight:900;
size-adjust:89.71%;ascent-override:100%;descent-override:20%;line-gap-override:0%;
}
/* --- Kopfzeile: Ankermenue statt Seitenmenue -------------------------- */
/* Der Knopf links ist bei der Marke der Schubladenschalter — er steht dort
VOR dem Logo, nicht rechts aussen. T3 uebernimmt diese Seite; der andere
Bau im selben Markt (T1) haelt ihn rechts. */
.hdr .burger{margin-left:0;margin-right:2px;order:-1;background:transparent;
box-shadow:inset 0 0 0 1px var(--line)}
.hdr .burger:hover{background:var(--surface-3)}
.hdr nav a{white-space:nowrap}
/* Ankerziele duerfen nicht unter der stehenden Kopfzeile landen */
#stufen,#umsatz,#bedingungen,#faq{scroll-margin-top:76px}
@media(min-width:980px){#stufen,#umsatz,#bedingungen,#faq{scroll-margin-top:84px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Genau eine Akzentflaeche je Bildschirm: unterhalb 980 px uebernimmt die
Leiste unten den Akzent, der Kopfknopf bleibt deshalb dort immer ruhig. */
@media(max-width:979px){
.hdr.scrolled .btn-hdr{background:transparent;color:var(--accent-solid);
box-shadow:inset 0 0 0 1.5px var(--accent-solid)}
}
/* --- Hero: Banner ueber die volle Breite, Text darunter ---------------- */
.hero-bnr{padding:20px 0 34px}
@media(min-width:980px){.hero-bnr{padding:28px 0 48px}}
.hero-bnr .hero-under{max-width:64ch;margin-top:22px}
.hero-bnr h1{font-size:clamp(30px,4.2vw,50px);margin-bottom:12px}
.hero-bnr .lede{max-width:62ch}
.hero-bnr .cta-wrap{margin:0 0 16px}
.hero-bnr .age{margin-bottom:0}
/* --- Willkommenspaket-Banner (Markenbaustein) -------------------------- */
.wpb{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);
border-radius:var(--radius-panel);padding:16px 16px 20px;min-height:204px;
display:flex;align-items:center}
.wpb::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
linear-gradient(180deg,rgba(43,39,73,0) 0%,#2B2749 133.21%),
linear-gradient(85.59deg,#8800FF 3.62%,rgba(36,0,255,.6) 92.32%)}
.wpb-in{position:relative;z-index:3;display:flex;flex-direction:column;
align-items:flex-start;gap:6px;width:100%}
.wpb-info{display:flex;flex-direction:column;gap:4px;max-width:62%;
font-family:Barlow,"Barlow Italic Metric Fallback",-apple-system,"Segoe UI",sans-serif;
font-style:italic;text-transform:uppercase;font-weight:900;color:var(--ink)}
/* Farbe explizit: die Basisregel `p{color:var(--ink-2)}` schlaegt die Vererbung
von .wpb-info und faerbte den Paketnamen grau — auf dem Violett gemessene
4,06:1 statt der 6,77:1, die Weiss dort traegt. */
.wpb-name{margin:0;font-size:18px;line-height:20px;letter-spacing:.01em;color:var(--ink)}
.wpb-amount,.wpb-name{-webkit-text-size-adjust:100%}
.wpb-amount{margin:0;font-size:clamp(48px,15vw,56px);line-height:1;color:var(--accent-from);
text-shadow:0 2px 0 rgba(0,0,0,.3)}
.wpb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.wpb-fs{background:#FFFFFF;color:#000000;border-radius:var(--radius-pill);
padding:4px 10px;font-size:15px;line-height:20px}
.wpb-max{font-size:18px;line-height:24px}
.wpb-max i{font-style:italic;font-weight:800;opacity:.86}
.wpb .btn{margin-top:12px;position:relative;z-index:3}
/* Figur: das offizielle Willkommenspaket-Tizer der Marke
(WP_tizer_400x360....webp aus der gesicherten Markenseite, 800x720, unveraendert).
Absolut gesetzt -> sie kann das Layout nicht verschieben, CLS bleibt 0. */
.wpb-art{position:absolute;z-index:1;pointer-events:none;max-width:none;
object-fit:contain;right:-42px;bottom:-6px;height:170px;width:auto}
@media(min-width:480px){.wpb-art{right:-24px;height:196px}}
@media(min-width:768px){
.wpb{padding:24px 40px;min-height:268px}
.wpb-in{gap:8px}
.wpb-info{max-width:400px}
.wpb-name{font-size:20px;line-height:24px}
.wpb-amount{font-size:clamp(60px,7vw,80px)}
.wpb-fs{font-size:16px;padding:5px 12px}
.wpb-max{font-size:24px;line-height:32px}
.wpb-art{right:8px;bottom:-14px;height:300px}
}
@media(min-width:1080px){.wpb-art{right:56px;height:330px}}
/* --- Kernzahlen-Band zwischen Hero und erstem Abschnitt ---------------- */
.tzone .g{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.tzone .g{grid-template-columns:repeat(3,1fr)}}
.tzone .v{font-family:var(--font-display);font-size:19px;line-height:1.2}
.tzone .l{margin-bottom:2px}
/* --- Bedingungen als Karten statt als Fliesstextkolonne ---------------- */
/* .card p hat margin:0 (Basisregel) — bei zwei Absaetzen je Karte klebten sie
sonst aneinander. */
.card p + p{margin-top:11px}
.cards.c2{grid-template-columns:1fr}
@media(min-width:900px){.cards.c2{grid-template-columns:repeat(2,1fr)}}
.card.cond{padding:20px 22px 22px;border-left:3px solid var(--line-2)}
.card.cond.key{border-left-color:var(--accent-solid)}
.card.cond h3{font-family:var(--font-display);text-transform:uppercase;
letter-spacing:.03em;font-size:17px;margin-bottom:10px}
/* --- Tabelle: Summenzeile war als tr.hl ausgezeichnet, aber nirgends
gestaltet — die wichtigste Zeile sah aus wie jede andere. ---------- */
.rtbl tr.hl td,.rtbl tr.hl th{background:rgba(89,255,139,.09);color:var(--ink);font-weight:600}
@media(max-width:639px){.rtbl tr.hl{background:rgba(89,255,139,.09)}}
/* --- Leichte Leiste: ein Knopf, keine Angebotszahl --------------------- */
.sticky-lite{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.sticky-lite .sticky-top{gap:8px}
.sticky-lite .sticky-top .btn{flex:1;min-width:0;min-height:52px;font-size:17px;padding:0 18px}
/* --- v3.5a · gemessen, nicht geschaetzt -------------------------------- */
/* Gemessen im headless Chromium auf 320/390/768/1440. Drei Befunde: */
/* 1. Unter 768 px kreuzte die Figur den Knopf — auf 320 px stand der Gorilla
zur Haelfte hinter der Pille. Sie sitzt dort jetzt oben rechts in einer
eigenen Spur, der Knopf haengt am unteren Rand der Tafel. */
@media(max-width:767px){
.wpb{align-items:stretch}
.wpb-in{flex:1;justify-content:space-between}
.wpb-art{top:4px;bottom:auto;right:-28px;height:clamp(132px,40vw,204px)}
.wpb-info{max-width:calc(100% - 118px)}
}
@media(max-width:399px){
.wpb{min-height:236px}
.wpb-amount{font-size:44px}
.wpb-art{right:-30px;height:124px}
.wpb-info{max-width:calc(100% - 100px)}
}
/* 2. Ab 1080 px stand die Figur zu klein und zu weit rechts, die Tafelmitte
lief leer (die Marke fuellt sie mit einer Hintergrundfotografie, die uns
nicht vorliegt). Groessere Figur, naeher an der Textspalte. */
@media(min-width:1080px){
.wpb{min-height:300px}
.wpb-art{right:40px;bottom:-18px;height:390px}
}
/* 3. Tap-Targets unter 44 px: Kopfknopf 40, Menuepunkte 22, Fusszeilenlinks 22,
Schliesskreuz 34. Die Trefferflaechen wachsen, die Optik bleibt. */
.hdr .logo,.ftr .logo{min-height:44px}
.hdr nav a{display:inline-flex;align-items:center;min-height:44px}
.hdr .acts .btn-sm{min-height:44px}
.mnav a{padding:12px 0}
.ftr .cols > div > a:not(.logo){padding:11px 0;margin:0}
.ftr .cols > div > a:not(.logo):last-child{margin-bottom:0}
.sticky-x{width:44px;height:44px}
/* --- v3.5b · ch-Einheiten raus, sonst bleibt CLS nie null --------------- */
/* Gemessen: mit der Ersatzschrift ist 1ch = 8,44 px, mit Barlow 9,04 px.
Jede ch-Breite aendert sich also beim Schriftwechsel — .hero-under sprang
von 540 auf 579 px, der Lead brach neu um, die Seite darunter ruckte 28 px
nach oben (CLS 0,015 auf 768 px, 0,099 auf 390 px).
Ein einzelner size-adjust kann das nicht loesen: fuer Fliesstext passt
94,82 %, fuer Ziffern (und ch ist die Ziffernbreite) waeren 101,59 % noetig.
Also feste px-Breiten mit demselben Wert, den ch bei geladener Marke ergibt:
1ch = 9,04 px bei 16 px Grundkegel. */
.hero-bnr .hero-under{max-width:579px}
.hero-bnr .lede{max-width:560px}
.sec > .wrap > p,.sec > .wrap > ul{max-width:651px}
.note{max-width:651px}
.faq{max-width:705px}
.final p{max-width:506px}
.ftr .cols > div:first-child{max-width:506px}
@media(min-width:900px){.ftr .cols > div:first-child{max-width:none}}
/* ===== tuffpuffoesterreich.at — Abweichungen vom T3-Grundgeruest =====
Kopfzeile in der Markenhoehe 64/48, Kurzurteil als Band direkt unter
dem Banner, Pruefpunkt-Tabelle mit breiterer erster Spalte. */
.hdr .row{height:48px}
@media(min-width:980px){.hdr .row{height:64px}}
.verdict{padding:22px 0 6px}
.verdict .pc{margin-top:0}
.verdict .pc h3{font-size:14px}
.verdict .pc li{font-size:14.5px}
.hero-bnr .hero-under .age{margin:14px 0 10px}
.rtbl.chk th[scope="row"]{min-width:150px}
.rtbl.chk td:last-child{color:var(--ink-2)}
.xp h3{margin:26px 0 8px}
.xp h3:first-of-type{margin-top:8px}
/* --- tpo · Abnahme 2026-09-21 (web-designer), gemessen im headless Chrome
auf 320/390/768/1440. Nur diese Seite; Texte unveraendert. --------- */
/* 1. Banner-CTA war auf 320 px 328 px breit bei 248 px Innenmass — der Knopf
wurde von overflow:hidden der Tafel abgeschnitten ("PAKET HO").
Unter 400 px darf das Label umbrechen statt ueberzustehen. */
@media(max-width:399px){
.wpb .btn-cta{max-width:100%;white-space:normal;text-align:center;line-height:1.15;
padding:10px 20px;font-size:17px}
}
/* 2. Anker der Kopfzeile landeten unter der stehenden Kopfzeile: die
scroll-margin-Regel des Grundgeruests kennt nur die Anker der
Bonusseite (#stufen, #umsatz ...). */
#kurzurteil,#pruefpunkte,#alltag,#fragen{scroll-margin-top:60px}
@media(min-width:980px){#kurzurteil,#pruefpunkte,#alltag,#fragen{scroll-margin-top:76px}}
/* 3. Eine Akzentflaeche je Bildschirm, auch am Desktop: das Grundgeruest
fuellt den Kopfknopf schon ab 8 px Scroll, waehrend der Banner-CTA noch
im Bild steht (gemessen: zwei Akzentflaechen bei 1440/150 px). Gefuellt
wird er jetzt erst, wenn weder Banner- noch End-CTA sichtbar sind
(Klasse .hot aus site.js). */
@media(min-width:980px){
.hdr.scrolled:not(.hot) .btn-hdr{background:transparent;color:var(--accent-solid);
box-shadow:inset 0 0 0 1.5px var(--accent-solid)}
}
/* 4. Tabelle mobil: die Label-Unterdrueckung des Grundgeruests ist fuer
Zweispalter gebaut. Hier gibt es drei Spalten, und die "Einordnung"
stand ohne Kennzeichnung direkt unter der "Angabe" wie deren Fortsetzung. */
@media(max-width:719px){
.rtbl.chk tr:has(> th) td:last-child{display:block;padding-top:6px;padding-bottom:10px;font-size:14px}
.rtbl.chk tr:has(> th) td:last-child::before{display:block;content:attr(data-l);
font-family:var(--font-display);font-size:var(--step-micro);letter-spacing:.07em;
text-transform:uppercase;color:var(--muted);margin-bottom:1px}
}
/* 5. Unterscheidung vom Nachbarbau tuffpuffcasinos.at, ohne die Marke zu
verlassen — jeweils die Markenvariante statt unserer Abweichung:
a) Logo in Markengroesse 91/121 px Breite (Brand_Design, Kopfzeile);
der Nachbar setzt 70 px. */
.hdr .logo img{height:36px}
@media(min-width:980px){.hdr .logo img{height:48px}}
/* b) Menue mittig: bei der Marke sitzt in der Mitte die Suchpille; der
Nachbar haengt das Menue links ans Logo. */
@media(min-width:980px){
.hdr nav{margin-left:auto;margin-right:auto;gap:30px}
.hdr .acts{margin-left:0}
}
/* c) Banner mobil wie bei der Marke: Freispiele als weisser Text ohne
Pille, "bis zu" direkt unter dem Paketnamen (<768 px). Ab 768 px die
weisse Pille mit dem Markenviolett #7045ED statt Schwarz. Der Nachbar
haelt bewusst ueberall die schwarze Pille. Nur Reihenfolge per order,
der Text bleibt, wie er ist. */
@media(max-width:767px){
.wpb-row{display:contents}
.wpb-name{order:0}
.wpb-max{order:1;font-size:18px;line-height:22px}
.wpb-amount{order:2;margin-top:2px}
.wpb-fs{order:3;background:transparent;color:var(--ink);padding:0;border-radius:0;
font-size:18px;line-height:24px}
}
@media(min-width:768px){.wpb-fs{color:#7045ED}}
/* d) Unter dem Banner am Desktop zweispaltig: Eyebrow und H1 links, Lede,
Altershinweis und Mikrokopie rechts. Beim Nachbarn steht alles in einer
linken Spalte, rechts bleibt die halbe Breite leer. DOM-Reihenfolge
unveraendert. px statt ch (CLS, siehe v3.5b). */
@media(min-width:1080px){
.hero-bnr .hero-under{max-width:none;display:grid;column-gap:56px;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:30px}
.hero-bnr .hero-under .eyebrow{grid-column:1;grid-row:1;justify-self:start}
.hero-bnr .hero-under h1{grid-column:1;grid-row:2 / span 3;align-self:start;margin:0}
.hero-bnr .hero-under .lede{grid-column:2;grid-row:1 / span 2;max-width:none;margin:0}
.hero-bnr .hero-under .age{grid-column:2;grid-row:3;margin:14px 0 8px}
.hero-bnr .hero-under .cta-note{grid-column:2;grid-row:4}
}
/* 6. 404: der ruhige Knopf "Zur Übersicht mit allen Prüfpunkten" war auf
320 px breiter als die Spalte (Dokumentbreite 342 px). */
.sec p > .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-top:10px;padding-bottom:10px}
/* Abnahme T-1: Ring des CTA ohne negativen Inset (Site_Templates, CLS-Falle 2).
Negativer Inset bleibt nur fuer .btn-pulse. */
.btn-cta:not(.btn-pulse)::after{inset:0}
/* toc: Inhaltsverzeichnis direkt unter H1/Mikrokopie (Owner-Entscheid
2026-09-21, zweiter Durchgang "besser als die Klone"). Eigenstaendige
Ankerliste, unabhaengig von der Kopfzeilen-Navigation. Im Zwei-Spalten-
Grid des Banner-Heros (Abschnitt 6.d oben, ab 1080px) bekommt sie eine
eigene volle Zeile unter Lede/Alter/Mikrokopie statt in den Grid-Autoflow
zu rutschen. */
.toc{display:flex;flex-wrap:wrap;gap:8px 10px;margin:18px 0 0;padding:0;list-style:none}
.toc a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--line);
color:var(--ink-2);text-decoration:none;font-size:var(--step-small);font-weight:500}
.toc a:hover,.toc a:focus-visible{color:var(--ink);border-color:var(--line-2)}
@media(min-width:1080px){
.hero-bnr .hero-under .toc{grid-column:1 / -1;grid-row:5;margin-top:22px}
}
/* --- tpo · Abnahme v2 (web-designer, 2026-09-21) ---------------------- */
/* Zahlungstabelle mobil: die Grundregel blendet td-Labels aus, sobald die
Zeile ein th hat — bei vier Spalten stand dann "möglich / möglich / 20 €"
ohne Bezug. Hier Label links, Wert rechts. */
@media(max-width:719px){
#zahlungsmethoden .rtbl tr:has(> th) td::before{display:block}
#zahlungsmethoden .rtbl tr:has(> th) td{padding-top:5px}
}
/* Neuer Anker ohne scroll-margin landete unter der stehenden Kopfzeile. */
#zahlungsmethoden{scroll-margin-top:60px}
@media(min-width:980px){#zahlungsmethoden{scroll-margin-top:76px}}
/* TOC-Pillen: Trefferflaeche 44 px (war 34), Optik gleich schlank. */
.toc a{min-height:44px}
@media(min-width:980px){.toc a{min-height:38px}}
/* TOC unter 1080 px als festes Raster statt Flex-Umbruch: der Umbruch hing
an der Textbreite, Ersatzschrift und Barlow brachen verschieden um —
gemessen CLS 0,13–0,15 auf 768 px (dritte Pille sprang eine Zeile tiefer).
Spaltenzahl haengt jetzt nur an der Viewportbreite; zweizeilige Labels
passen in die 44 px Mindesthoehe, die Pillenhoehe bleibt also konstant. */
@media(max-width:1079px){
.toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.toc a{justify-content:center;text-align:center;line-height:1.15;padding:4px 10px}
}
@media(min-width:560px) and (max-width:1079px){.toc{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* TOC ab 1080 px: in Zeile 5 ueber die volle Breite blieb unter der H1 ein
~150 px hohes Loch in der linken Spalte. Die TOC fuellt jetzt genau dieses
Loch (linke Spalte unter der H1, unten buendig mit der Mikrokopie), als
festes 3er-Raster — Hoehe haengt nicht an der Textbreite, also kein CLS. */
@media(min-width:1080px){
.hero-bnr .hero-under h1{grid-row:2}
.hero-bnr .hero-under .toc{grid-column:1;grid-row:3 / span 2;align-self:end;margin:18px 0 0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.toc a{justify-content:center}
}
@media(min-width:1080px){
/* Ueberhang des Lede (Zeilen 1–2) in die flexible Zeile 2 leiten, damit
die Eyebrow nicht aufgeblaeht wird und die H1 direkt darunter steht. */
.hero-bnr .hero-under{grid-template-rows:auto 1fr auto auto}
.hero-bnr .hero-under h1{align-self:start}
}