.hero--page{padding:76px 0 84px}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}
.hero--page h1{text-align:center}
.hero--page .lead{text-align:center}
.hero--page .eyebrow-row{text-align:center}
.hero--page .wrap{max-width:1140px}
.hero--page h1{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .lead{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .eyebrow-row{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page h1{margin-bottom:20px}
.hero--page .lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto 26px;max-width:660px}
@media (max-width:430px){
.hero .lead{font-size:16px}
}
/* ============================================================
   The journey of an article (first section)
   Deliberately markup rather than SVG: that way real Sora/Inter are
   used, the text can be translated and selected, and the components
   are the same as on the rest of the page (2px outline, 5px shadow,
   icon in a box).
   ============================================================ */
.weg{list-style:none;margin:0;padding:0}
.weg li{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;align-items:center;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:17px 22px}
.weg li + li{margin-top:34px}
/* Connector between the steps: a line plus an arrowhead, centred above the number */
.weg li + li::before{content:"";position:absolute;left:40px;top:-30px;width:2px;height:20px;background:var(--black)}
.weg li + li::after{content:"";position:absolute;left:35.5px;top:-19px;width:11px;height:11px;border-right:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(45deg)}
.weg-nr{width:38px;height:38px;flex:none;border:var(--bd);border-radius:var(--r);display:grid;place-content:center;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:17px;line-height:1}
.weg-ic{width:44px;height:44px;flex:none;border:var(--bd);border-radius:var(--r);background:var(--ground);display:grid;place-content:center}
.weg h3{font-size:17px;font-weight:800;letter-spacing:-.2px;line-height:1.25}
.weg p{font-size:14.5px;color:var(--muted);line-height:1.5;margin-top:3px}

/* The comparison, previously a table on the right, now a strip below both columns */
.ucr{max-width:1060px;margin:52px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);background:var(--white);overflow:hidden}
.ucr-k{padding:20px 22px;border-right:2px solid var(--black)}
.ucr-k:last-child{border-right:none}
.ucr-k span{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.ucr-k b{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.2px;margin-top:9px}
.ucr-k small{display:block;font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:4px}

/* Checklist in the security card (instead of the table of figures) */
.se-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.se-list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.se-list .chk{margin-top:2px}
.se-list b{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.3px}
/* Target only the subline. A bare ".se-list span" also catches the tick box (that
   is a span too) and turns it into display:block - the tick then sat at the top
   left instead of centred. */
.se-list div span{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:3px}

/* ============================================================
   Timeline, horizontal across two rows
   Sits on the white card (.uc) so that it joins the card family of
   the page. The connecting line is drawn per entry and switched off
   at the end of a row - that way it adapts to the column count of
   every breakpoint.
   ============================================================ */
/* Centred head above a full-width block - the same pattern as
   "This is why we are better" on the home page. */
.us--time .txt{max-width:700px;margin:0 auto;text-align:center}
.us--time .txt .go{margin-top:6px}
.tlh{margin-top:52px}
.tlh-bahn{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px}
.tlh-bahn li{position:relative}
.tlh-bahn li::before{content:"";position:absolute;left:26px;right:-30px;top:20px;height:2px;background:#D9D3C4}
.tlh-bahn li:nth-child(3n)::before{display:none}
/* fit-content, otherwise the box stretches across the whole column and the
   connecting line has no room left. */
.tlh-bahn .y{position:relative;z-index:1;display:grid;place-items:center;width:fit-content;min-width:56px;height:42px;padding:0 10px;border:var(--bd);border-radius:10px;background:var(--green-soft);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.2px}
.tlh-bahn h3{font-family:'Sora','Sora Fallback',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.3px;margin:16px 0 6px}
.tlh-bahn p{font-size:14px;color:var(--muted);line-height:1.55}

@media (max-width:1000px){
.hero--page{padding:56px 0 64px}
}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}

/* --- Erste Schritte --- */
.band{background:var(--plansbg);padding:0 0 104px}
.band .box{max-width:1060px;margin:0 auto;background:var(--orange-soft);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:28px 34px 30px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.band h3{font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.2}
.band p{font-size:16px;color:var(--muted);line-height:1.6;margin-top:8px}
.band .btn{flex:none;background:var(--orange-soft)}
.band .btn:hover{background:#FFBE5F}
@media (max-width:1000px){
.band .box{padding:24px 22px 26px}
.band h3{font-size:21px}
}
/* --- Usenet --- */
.us{background:var(--ground);padding:84px 0 92px}
.us .in{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;position:relative}
.us .kick{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text);margin-bottom:16px;padding:3px 7px}
.us .kick::before{content:"";position:absolute;left:-8px;right:-8px;top:2%;bottom:-6%;background:var(--mkc,var(--yellow));transform:skewX(-13deg) rotate(-1.4deg);border-radius:3px 8px 4px 7px;z-index:-1}
.us h2{font-size:36px;font-weight:800;letter-spacing:-1.2px;line-height:1.1}
.us .txt>p{font-size:17px;color:var(--muted);line-height:1.6;margin-top:14px}
.us .txt>p b{color:var(--text);font-weight:800}
.us .go{display:inline-block;margin-top:22px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:16px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.uc{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:24px 26px 26px}
.uc .cap{display:flex;justify-content:space-between;gap:14px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);padding-bottom:14px;border-bottom:var(--bd)}
.uc .ufoot{margin-top:16px;padding-top:14px;border-top:2px solid var(--black);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.3px}
.usw{background:var(--plansbg);padding:84px 0 92px}
.usw .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1060px;margin:0 auto}
.usw .t{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:26px 26px 28px;transition:transform .16s ease,box-shadow .16s ease}
.usw .t:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 0 var(--black)}
.usw .t .ic{width:44px;height:44px;border:var(--bd);border-radius:10px;display:grid;place-items:center}
.usw .t h3{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:16px 0 8px}
.usw .t p{font-size:15px;color:var(--muted);line-height:1.6}
.usw .t p b{color:var(--text);font-weight:800}
@media (max-width:1000px){
.us .in{grid-template-columns:minmax(0,1fr);gap:34px}
.ucr{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
.ucr-k:nth-child(2n){border-right:none}
.ucr-k:nth-child(-n+2){border-bottom:2px solid var(--black)}
.us{padding:56px 0 60px}
.usw{padding:56px 0 60px}
.us h2{font-size:27px;letter-spacing:-1.2px}
.usw .trio{grid-template-columns:1fr}
}

@media (max-width:720px){
.weg li{gap:13px;padding:15px 16px}
.weg-ic{width:40px;height:40px}
.weg li + li{margin-top:30px}
.weg li + li::before{left:34px;top:-27px;height:18px}
.weg li + li::after{left:29.5px;top:-17px}
.weg h3{font-size:16px}
.ucr{grid-template-columns:1fr}
.ucr-k,.ucr-k:nth-child(2n){border-right:none;border-bottom:2px solid var(--black)}
.ucr-k:last-child{border-bottom:none}
}

@media (max-width:1000px){
.tlh{margin-top:40px}
.tlh-bahn{gap:30px 24px}
.tlh-bahn li::before{right:-24px}
}
@media (max-width:720px){
/* On a phone the paragraphs become five or six lines - centred, that reads badly.
   The heading stays centred. */
.us--time .txt>p{text-align:left}
/* two columns: the line now stops after every second entry */
.tlh{margin-top:32px}
.tlh-bahn{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
.tlh-bahn li::before{right:-20px}
/* The 3n switch-off above has two classes and beats a bare li::before - hence
   reset here explicitly at the same specificity. */
.tlh-bahn li:nth-child(3n)::before{display:block}
.tlh-bahn li:nth-child(2n)::before{display:none}
.tlh-bahn h3{font-size:15.5px;margin-top:14px}
.tlh-bahn p{font-size:13.5px}
}
@media (max-width:430px){
/* in a single column a horizontal line no longer makes sense */
.tlh-bahn{grid-template-columns:1fr;gap:22px}
.tlh-bahn li::before{display:none}
}