

:root {
  --yellow:#FFD159; --green:#B2EAB1; --blue:#99D5FF; --pink:#FF99CC;
  --hint:#E0E0E0; --stone:#E2DCD2;
  --bg:#EFEFEF; --surface:#FFFFFF; --text:#14130F;
  
  --muted:rgba(20,19,15,0.70); --faint:rgba(20,19,15,0.60);
  --line:rgba(20,19,15,0.14);
  --ink:#000000; --shadow:1px 1px 0 var(--ink);
  
  --bw:0.5px;
  
  --creme:#EFEFEF; --r-sm:20px; --r-lg:25px;
  
  --dark:#282828; --dtext:#EDEBE7;
  
  --chip:rgba(20,19,15,0.075);
  --dmuted:rgba(237,235,231,0.76); --dfaint:rgba(237,235,231,0.34);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:'Montserrat', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
.wrap { width:100%; max-width:1140px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }

.sec { padding:clamp(38px,4.6vw,64px) 0; }
.sec + .sec { border-top:var(--bw) solid var(--line); }

.sec-white { background:var(--surface); }
.sec-white + .sec, .sec + .sec-white { border-top:var(--bw) solid var(--ink); }

.sec-dark { background:var(--dark); color:var(--dtext);
  --text:#EDEBE7; --muted:rgba(237,235,231,0.76); --faint:rgba(237,235,231,0.56);
  --line:rgba(237,235,231,0.22); --ink:#EDEBE7;
  --chip:rgba(237,235,231,0.16);
  border-top:var(--bw) solid var(--ink); }
.sec-dark + .sec { border-top:var(--bw) solid var(--ink); }

.nav + .sec-dark { border-top:0; }

.sec-dark .blk, .sec-dark .card, .sec-dark .panel, .sec-dark .btn,
.sec-dark .cs { --ink:#000000; }
.sec-dark .card, .sec-dark .panel { background:var(--surface);
  --text:#14130F; --muted:rgba(20,19,15,0.70); --faint:rgba(20,19,15,0.60);
  --line:rgba(20,19,15,0.14); --chip:rgba(20,19,15,0.075); color:var(--text); }

.panel { background:var(--surface); border:var(--bw) solid var(--ink);
  border-radius:16px; box-shadow:var(--shadow);
  padding:clamp(20px,2.8vw,34px); }
.panel + .panel { margin-top:clamp(14px,1.8vw,22px); }

:root { --micro-luft:clamp(16px,2vh,22px); }
.micro { font-size:11px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--faint); margin:0 0 var(--micro-luft); }
h1 { font-size:clamp(28px,3.5vw,48px); font-weight:700; letter-spacing:-.036em;
  line-height:1.05; margin:0 0 clamp(14px,1.7vw,20px); text-wrap:balance; max-width:16ch; }
h2 { font-size:clamp(21px,2.4vw,32px); font-weight:700; letter-spacing:-.032em;
  line-height:1.1; margin:0 0 clamp(10px,1.3vw,16px); max-width:20ch; text-wrap:balance; }
.lede { font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--muted);
  margin:0; max-width:52ch; }
.say { font-size:14.5px; line-height:1.68; color:var(--muted); margin:0 0 14px; max-width:56ch; }
.say b, .lede b { color:var(--text); font-weight:700; }
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,56px); align-items:start; }

.blk { display:inline-block; border-radius:.42em; box-shadow:var(--shadow);
  border:var(--bw) solid var(--ink); color:#000; padding:.08em .34em .14em;
  font-weight:700; line-height:1.25; white-space:nowrap; }
.b-nom{background:var(--yellow)} .b-acc{background:var(--green)}
.b-dat{background:var(--blue)}   .b-gen{background:var(--pink)}
.b-none{background:var(--hint)}  .b-form{background:#FFDC7A}

.b-creme{background:var(--creme)}
.pair { display:inline-flex; align-items:stretch; gap:3px; }

.cs { display:inline-block; border-radius:7px; padding:3px 8px 4px;
  font-size:.86em; font-weight:700; letter-spacing:.6px; white-space:nowrap; color:var(--ink); }
.cs-nom{background:rgba(255,209,89,.5)} .cs-acc{background:rgba(178,234,177,.55)}
.cs-dat{background:rgba(153,213,255,.55)} .cs-gen{background:rgba(255,153,204,.5)}
.sent { display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  font-size:clamp(15px,1.7vw,21px); margin:clamp(18px,2.2vw,26px) 0 0; }

.prog { font-style:italic; }

.fact b .prog { font-size:.56em; font-weight:500; color:var(--muted);
  letter-spacing:0; }
.brand { font-weight:200; } .brand b { font-weight:700; } .brand i { font-style:normal; font-weight:200; }

.card { position:relative; width:100%; max-width:var(--cw,100%); background:var(--surface);
  border:var(--bw) solid var(--ink); border-radius:16px; box-shadow:var(--shadow); }
.pad { padding:clamp(20px,2.6vw,32px); }
.btn { display:inline-block; font-size:14px; font-weight:700; letter-spacing:-.01em;
  padding:11px 20px 12px; border-radius:999px; border:var(--bw) solid var(--ink);
  background:var(--yellow); color:#000; box-shadow:var(--shadow); text-decoration:none; }
.lnk { font-size:14px; font-weight:600; color:var(--text); text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:.75px; }

.btn-dunkel { display:inline-block; font-size:15.5px; font-weight:600;
  padding:15px 30px 16px; border-radius:999px; border:0;
  background:var(--dark); color:var(--creme); text-decoration:none;
  transition:opacity .2s ease; }
.btn-dunkel:hover { opacity:.82; }

.btn-dunkel.bald, .gemein-knopf.bald, .btn.bald {
  background:rgba(20,19,15,.09); color:rgba(20,19,15,.42);
  border:var(--bw) solid rgba(20,19,15,.14); box-shadow:none;
  cursor:default; transform:none; }

.sec-dark .btn-dunkel.bald, .sec-dark .gemein-knopf.bald, .sec-dark .btn.bald {
  background:rgba(237,235,231,.14); color:rgba(237,235,231,.52); }
.gemein .btn-dunkel.bald, .gemein .gemein-knopf.bald,
.how .btn-dunkel.bald, .gemein .btn.bald, .how .btn.bald {
  background:rgba(237,235,231,.12); color:rgba(237,235,231,.52);
  border-color:rgba(237,235,231,.18); }

.how .how-tuer .btn-dunkel.bald {
  background:rgba(20,19,15,.09); color:rgba(20,19,15,.42);
  border-color:rgba(20,19,15,.14); }
.btn-dunkel.bald:hover, .gemein-knopf.bald:hover {
  transform:none; box-shadow:none; }

:is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
:is(a, button):not(.btn):active { opacity: .7; }

@media (max-width:860px) { .two { grid-template-columns:minmax(0,1fr); } }

@media (max-width:400px) { .sent { font-size:13px; gap:5px; } }
@media (max-width:340px) { .sent { font-size:11.5px; gap:4px; } }

.partners { text-align:center; padding-block:clamp(30px,3.2vw,44px); }
.partners .lede { margin-left:auto; margin-right:auto; max-width:52ch; }
.partners-row {
  --mark-h:52px;            
  --mark-w:200px;           
  list-style:none; margin:clamp(14px,1.7vw,21px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  column-gap:clamp(32px,5vw,72px); row-gap:clamp(22px,3vw,38px);
}
.partner { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  height:calc(var(--mark-h) * var(--optical, 1)); }
.partner-mark { max-height:100%; max-width:var(--mark-w); width:auto; height:auto;
  object-fit:contain;
  
  filter:grayscale(1); opacity:.78; }

.partners-row:not(:has(> :nth-child(2))) { --mark-h:84px; --mark-w:260px; }
.partners-row:has(> :nth-child(7)) { --mark-h:40px; --mark-w:156px;
  column-gap:clamp(24px,3.4vw,48px); }

.sec-dark .partner-mark { filter:grayscale(1) invert(1); opacity:.82; }

@media (max-width:520px) {
  .partners-row { --mark-h:44px; --mark-w:168px;
    column-gap:clamp(22px,7vw,34px); }
  .partners-row:not(:has(> :nth-child(2))) { --mark-h:64px; --mark-w:220px; }
}
