/* send.sommon.de · Richtung „The product performs“ (tasteskill, Seed 1214203286).
   Farben aus der Welt der Luftpost: Tintenblau als Grund, Papiergrau als Feld, Rot nur auf der Aktion. */
@font-face{font-family:"Schibsted";src:url(/static/schibsted-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted";src:url(/static/schibsted-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted";src:url(/static/schibsted-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --bg:#0f1a30;--surface:#18253f;--surface-2:#22314f;--ink:#f3f5f9;--muted:#aab4c8;
  --accent:#d92d25;--accent-ink:#fff;--field:#eceff4;--field-2:#dfe4ec;--field-ink:#0f1a30;--field-muted:#39445a;
  --paper:#fff;--window:#dbe6f5;
  --small:.875rem;--body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);--head:clamp(2rem,1.3rem + 3.2vw,4rem);--display:clamp(2.6rem,1.2rem + 5.2vw,5.4rem);
  --m:clamp(1rem,.4rem + 2vw,2rem);--r:6px;--gap:8px;--sec:clamp(5rem,3rem + 8vw,11rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--body)/1.4 "Schibsted",system-ui,sans-serif;letter-spacing:-.01em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.hell :focus-visible{outline-color:var(--field-ink)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2{font-weight:800;letter-spacing:-.05em;line-height:.92}
h1{font-size:var(--display)}h2{font-size:var(--head)}
h3{font-size:var(--body);font-weight:600;letter-spacing:-.01em}
.lead{font-size:var(--lead);line-height:1.3}
.leise{color:var(--muted)}.hell .leise{color:var(--field-muted)}.hell .buehne .leise{color:var(--muted)}
.fuss > p{max-width:60ch}
.klein{font-size:var(--small)}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--m)}
.abschnitt{padding-block:var(--sec)}
.hell{background:var(--field);color:var(--field-ink)}
.balken{height:10px;background:var(--accent)}
/* Kopf */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem var(--m)}
.wortmarke{font-weight:800;font-size:var(--body);letter-spacing:-.04em;text-decoration:none}
.kopf nav{display:flex;gap:1.6rem;align-items:center;font-weight:600;font-size:var(--body)}
.kopf nav a{text-decoration:none}.kopf nav a:hover{text-decoration:underline}
.knopf{display:inline-block;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;padding:.85em 1.3em;border:0;border-radius:var(--r);
  text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.knopf:hover{background:#b9241d}.knopf:active{transform:scale(.97)}
.kopf .knopf{padding:.6em 1em}
/* Hero */
.hero{padding-top:clamp(2rem,6vh,5rem);padding-bottom:clamp(3rem,8vh,6rem);align-items:start}
.hero .wort{grid-column:1/6}.hero h1{margin-bottom:1.6rem}
.hero .lead{max-width:24em;margin-bottom:2rem}
.hero .aktionen{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;font-weight:600}
.hero .buehne{grid-column:7/13}
/* Fragmente der Oberfläche */
[data-ui]{font-size:var(--small);line-height:1.35;letter-spacing:0}
.buehne{background:var(--surface);border-radius:var(--r);padding:clamp(1rem,2.4vw,2rem)}
.sendung{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:1.6rem}
.sendung fieldset{border:0;padding:0;margin:0 0 1.2rem;min-width:0}
.sendung legend{padding:0;margin-bottom:.45rem;color:var(--muted)}
.wahl{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:var(--r)}
.wahl label{flex:1;text-align:center;cursor:pointer}
.wahl input{position:absolute;opacity:0;pointer-events:none}
.wahl span{display:block;padding:.6em .4em;border-radius:4px;font-weight:600;transition:background-color .15s ease}
.wahl label:hover span{background:var(--surface)}
.wahl input:checked + span{background:var(--ink);color:var(--bg)}
.wahl input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.ergebnis{background:var(--bg);border-radius:var(--r);padding:1.1rem 1.2rem}
.ergebnis .produkt{font-weight:600;min-height:2.7em}
.ergebnis .porto{color:var(--ink);font-size:var(--head);font-weight:800;letter-spacing:-.05em;line-height:1;margin:.3rem 0 .5rem}
.ergebnis p{color:var(--muted)}
/* Der Briefbogen: Maße nach DIN 5008, Fensterfeld 85 × 45 mm */
.bogen{background:var(--paper);color:#0f1a30;border-radius:3px;aspect-ratio:210/235;position:relative;container-type:inline-size;overflow:hidden}
.bogen .kopfzeile{position:absolute;left:9.5%;top:6%;font-weight:800;font-size:0.84rem;font-size:4.2cqw;letter-spacing:-.03em}
.bogen .fenster{position:absolute;left:9.5%;top:21.4%;width:48%;background:var(--window);padding:3% 3.5% 4%;font-size:0.70rem;font-size:3.5cqw;line-height:1.32}
.bogen .rueck{font-size:0.46rem;font-size:2.3cqw;color:#4a556b;margin-bottom:5%;white-space:nowrap;overflow:hidden}
.bogen .frank{display:flex;align-items:center;gap:5%;margin-bottom:6%;font-size:0.48rem;font-size:2.4cqw;line-height:1.25;color:#4a556b}
.bogen .r{font-weight:800;font-size:1.60rem;font-size:8cqw;line-height:.8;color:#0f1a30}
.bogen .matrix{width:17%;flex:none}
.bogen .text{position:absolute;left:9.5%;right:10%;top:64%;font-size:0.62rem;font-size:3.1cqw;line-height:1.4}
.bogen .text b{display:block;font-size:0.76rem;font-size:3.8cqw;margin-bottom:3%}
[hidden]{display:none!important}
/* Ablauf: festgehaltenes Fragment */
.ablauf h2{grid-column:1/8;margin-bottom:clamp(2rem,5vw,4rem)}
.ablauf .saetze{grid-column:1/6}
.ablauf .satz{padding-block:2rem;color:var(--field-muted)}
.ablauf .satz p + p{max-width:28em}
.ablauf .satz p:first-child{font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin-bottom:.7rem;color:inherit}
.ablauf .satz.aktiv,.ablauf .satz.aktiv p{color:var(--field-ink)}
.js .ablauf .satz{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.ablauf .halter{grid-column:7/13;grid-row:2}
.ablauf .buehne{background:var(--bg);color:var(--ink);position:sticky;top:12vh}
.zustand + .zustand{margin-top:var(--gap)}
.js .zustand{display:none;margin:0}.js .zustand.aktiv{display:block;animation:ein .45s ease both}
pre{margin:0;font:400 var(--small)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;letter-spacing:0}
.aufruf{background:var(--surface);border-radius:var(--r);padding:1.1rem 1.2rem}
.aufruf .name{font-weight:600;margin-bottom:.6rem}
.zeile{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--surface);border-radius:4px;margin-top:4px}
.zeile b{font-weight:600}.zeile span:last-child{color:var(--muted);text-align:right}
.freigabe .summe{font-size:var(--head);font-weight:800;letter-spacing:-.05em;line-height:1;margin:1rem 0 .3rem}
.freigabe .knopf{display:block;text-align:center;margin-top:1rem}
/* Zwei Wege: Bilder */
.wege h2{grid-column:1/9;margin-bottom:clamp(2rem,5vw,4rem)}
.weg{position:relative}
.weg-a{grid-column:1/6}.weg-b{grid-column:6/13;margin-top:clamp(2rem,8vw,7rem)}
.weg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.weg-b img{aspect-ratio:16/10}
.weg h3{font-size:var(--lead);font-weight:600;letter-spacing:-.03em;margin:1.1rem 0 .4rem}
.weg p{max-width:30em}
figcaption{margin-top:.5rem}
/* Preis */
.preis{align-items:center;min-height:80svh}
.preis .wort{grid-column:1/5;align-self:start}
.preis .wort h2{margin-bottom:1.2rem}
.preis .zahl{grid-column:6/13;position:relative}
.preis .ziffer{font-size:clamp(7.5rem,16vw,15rem);font-weight:800;letter-spacing:-.07em;line-height:.85;white-space:nowrap}
.preis .ziffer small{font-size:.5em;vertical-align:.72em;letter-spacing:-.04em;margin-left:.08em}
.preis .marke{position:absolute;right:0;top:46%;width:min(15rem,42%);background:var(--paper);color:#0f1a30;padding:.9rem 1rem;border-radius:3px;transform:rotate(3deg);font-size:var(--small);line-height:1.3}
.preis .marke .frank{display:flex;gap:.7rem;align-items:center}
.preis .marke .matrix{width:3rem;flex:none}
.preis .inbegriffen{list-style:none;padding:0;margin:2rem 0;font-size:var(--body)}
.preis .inbegriffen li{padding:.2rem 0}
table{border-collapse:collapse;width:100%;font-size:var(--body);font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--surface-2);vertical-align:top}
.hell th,.hell td{border-color:var(--field-2)}
th{font-weight:600}td.zahl,th.zahl{text-align:right;padding-right:0;white-space:nowrap}
.tabelle{grid-column:1/13;margin-top:clamp(3rem,6vw,5rem)}
.tabelle p{max-width:60ch}
th code{font:inherit;word-break:break-word}
.tabelle caption{text-align:left;font-weight:600;font-size:var(--lead);letter-spacing:-.03em;margin-bottom:1rem}
/* Leistungen: versetzte Zellen */
.leistung h2{grid-column:1/10;margin-bottom:3.5rem}
.zellen{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.zelle{background:var(--field-2);border-radius:var(--r);min-height:27rem;display:flex;flex-direction:column;overflow:hidden}
.zelle .wort{padding:1.5rem}
.zelle .wort p{margin-top:.5rem;line-height:1.45}
.zelle .stueck{margin-top:auto;padding:0 0 0 1.5rem}
.zelle.um{flex-direction:column-reverse}.zelle.um .stueck{margin:0 0 auto;padding:0 1.5rem 0 0}
.stueck [data-ui]{background:var(--bg);color:var(--ink);padding:1rem;border-radius:var(--r) 0 0 0}
.zelle.um .stueck [data-ui]{border-radius:0 0 var(--r) 0}
.stueck .zeile{background:var(--surface)}
.stueck .zeile.an{background:var(--ink);color:var(--bg)}.stueck .zeile.an span:last-child{color:var(--bg)}
.punkt{display:flex;gap:.8rem;align-items:baseline;padding:.5rem 0}
.punkt i{width:.6rem;height:.6rem;border-radius:50%;background:var(--surface-2);flex:none;transform:translateY(-.05rem)}
.punkt.an i{background:var(--accent)}.punkt span{color:var(--muted);margin-left:auto;white-space:nowrap}
.laender{display:flex;flex-wrap:wrap;gap:4px}.laender span{background:var(--surface);padding:.3em .55em;border-radius:4px;font-weight:600}
.stueck img{border-radius:var(--r) 0 0 0;width:100%;height:13rem;object-fit:cover}
/* Anbindung */
.anbindung h2{grid-column:1/7}.anbindung .wort{grid-column:1/6;margin-top:1.5rem}
.anbindung .wort p + p{margin-top:1rem}
.anbindung .technik{grid-column:7/13;grid-row:1/3}
.adresse{background:var(--surface);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:var(--gap)}
.adresse pre{font-size:var(--body);margin-top:.3rem}
/* Fragen */
.fragen h2{grid-column:1/5;position:sticky;top:6rem;align-self:start}
.fragen .liste{grid-column:5/13;display:grid;gap:var(--gap)}
details{background:var(--field-2);border-radius:var(--r)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;min-height:72px;padding:1rem 1.5rem;font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.15}
summary::-webkit-details-marker{display:none}
.plus{position:relative;width:16px;height:16px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;background:currentColor;transition:transform .2s ease}
.plus::after{transform:rotate(90deg)}
details[open]{background:var(--bg);color:var(--ink)}
details[open] .plus::after{transform:rotate(0)}
details p{padding:0 1.5rem 1.5rem;max-width:52ch}
/* Schluss und Fuß */
.schluss .satz{grid-column:1/11;max-width:30em;font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-bottom:2rem}
.schluss .aktion{grid-column:1/11}
.fuss{padding:var(--gap);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.kachel{background:var(--surface);border-radius:var(--r);padding:1.4rem;min-height:13.5rem;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.k1{grid-column:1/5}.k2{grid-column:5/8}.k3{grid-column:8/10}.k4{grid-column:10/13}
.k5{grid-column:1/9;min-height:20rem;background:var(--field);color:var(--field-ink);justify-content:center;align-items:center}
.k5 span{font-size:clamp(2.4rem,8.6vw,9rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.k6{grid-column:9/13;min-height:20rem;background:var(--accent);color:var(--accent-ink);font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.1;transition:background-color .15s ease}
.k6:hover{background:#b9241d}.k6 svg{align-self:flex-end;width:3.5rem;height:3.5rem}
.kachel ul{list-style:none;padding:0}.kachel li{padding:.15rem 0}
.kachel .gross{font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.15}
/* Textseiten */
.textseite{grid-column:1/13;padding-block:clamp(2rem,6vw,5rem) var(--sec)}
.textseite .spalte{max-width:44rem}
.textseite h1{font-size:var(--head);margin-bottom:2rem}
.textseite h2{font-size:var(--lead);font-weight:600;letter-spacing:-.03em;line-height:1.15;margin:2.5rem 0 .7rem}
.textseite p,.textseite li{line-height:1.5;margin-bottom:.8rem}
.textseite ul{padding-left:1.2rem}
.vorab{background:var(--field-2);padding:1rem 1.2rem;border-radius:var(--r);margin-bottom:2rem}
/* Bewegung */
@keyframes ein{from{opacity:0;transform:translateY(14px)}}
.js .tritt{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .tritt.da{opacity:1;transform:none}
.blende{position:relative}.blende img + img{position:absolute;inset:0;height:100%;opacity:0;transition:opacity 1.6s ease}
.blende.zwei img + img{opacity:1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .tritt{opacity:1;transform:none;transition:none}.js .zustand.aktiv{animation:none}.blende img + img{transition:none}}
/* Schmal */
@media (max-width:60rem){
  .hero .wort,.hero .buehne,.ablauf h2,.ablauf .saetze,.ablauf .halter,.wege h2,.weg-a,.weg-b,.preis .wort,.preis .zahl,.leistung h2,
  .anbindung h2,.anbindung .wort,.anbindung .technik,.fragen h2,.fragen .liste,.schluss .satz,.schluss .aktion{grid-column:1/13}
  .hero .buehne{margin-top:2.5rem}
  .ablauf .halter{grid-row:auto;margin-top:1.5rem}
  .ablauf .buehne{position:static}
  .js .ablauf .satz{min-height:0;display:block}.ablauf .satz,.ablauf .satz p{color:var(--field-ink)}
  .js .zustand{display:block;margin-top:var(--gap)}.js .zustand.aktiv{animation:none}
  .weg-b{margin-top:3rem}.preis{min-height:0}.preis .zahl{margin-top:3rem}.preis .ziffer{font-size:34vw}
  .preis .marke{position:static;transform:none;width:auto;margin-top:1.5rem;max-width:16rem}
  table{font-size:var(--small)}th,td{padding-right:.5rem}
  summary{font-size:var(--body)}
  .zellen{grid-template-columns:1fr}.zelle,.zelle.um{flex-direction:column;min-height:0}.zelle.um .stueck{margin:auto 0 0;padding:0 0 0 1.5rem}
  .zelle.um .stueck [data-ui]{border-radius:var(--r) 0 0 0}
  .anbindung .technik{grid-row:auto;margin-top:2.5rem}
  .fragen h2{position:static;margin-bottom:2rem}summary{min-height:64px;padding:1rem 1.25rem}details p{padding:0 1.25rem 1.25rem}
  .k1,.k2,.k3,.k4,.k5,.k6{grid-column:span 12}.k2,.k4{grid-column:span 6}.k6{order:-2;min-height:11rem}.k5{order:5;min-height:10rem}.fuss > p{order:6}
  .kopf nav a:not(.knopf){display:none}
}
@media (max-width:36rem){.sendung{grid-template-columns:1fr}.bogen{aspect-ratio:210/200}.bogen .text{top:70%}
  .preise thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .preise tr{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;padding:1rem 0;border-bottom:1px solid var(--field-2)}
  .preise th{grid-column:1/3;border:0;padding:0 0 .5rem;font-size:var(--body)}
  .preise td{border:0;padding:.2rem 0;display:flex;justify-content:space-between;gap:.5rem;font-size:var(--small)}
  .preise td::before{content:attr(data-l);color:var(--field-muted);white-space:normal;text-align:left}}