/* Torna – Website. Werte aus dem Design-System „Torna“ (Tinte, Stempelviolett, Journalpapier). */
@font-face{font-family:"Schibsted Grotesk";src:url("/marke/SchibstedGrotesk-Variable.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/marke/SourceSans3-Variable.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/marke/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/marke/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --tinte:#1B1F3B; --violett:#4B3DB8; --violett-stark:#3F3399; --violett-weich:#ECEAFB; --violett-hell:#A99CFF;
  --papier:#F3F5F0; --blatt:#FFFFFF; --linie:#DCE0D8; --leise:#5A5F78; --tinte-hell:#D9DCEA;
  --rand:clamp(16px,5vw,64px); --breit:1180px;
  --anzeige:"Schibsted Grotesk",system-ui,sans-serif; --text:"Source Sans 3",system-ui,sans-serif; --zahl:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.125rem/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--violett-stark)}
:focus-visible{outline:3px solid var(--violett);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--anzeige);margin:0;color:var(--tinte)}
p{margin:0}

.springen{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:8px 14px;z-index:9}
.springen:focus{left:8px}

/* Kopf */
.kopf{max-width:var(--breit);margin:0 auto;padding:22px var(--rand);display:flex;align-items:center;gap:28px}
.kopf nav{display:flex;gap:24px;margin-left:auto}
.kopf nav a,.anmelden{color:var(--tinte);text-decoration:none;font-weight:600;font-size:1rem}
.kopf nav a:hover,.anmelden:hover{color:var(--violett-stark);text-decoration:underline;text-underline-offset:4px}
.anmelden{border:1.5px solid var(--tinte);border-radius:8px;padding:7px 14px}
.anmelden:hover{border-color:var(--violett-stark)}

/* Held mit Journal */
main>section{width:min(calc(100% - 2 * var(--rand)),calc(var(--breit) - 2 * var(--rand)));margin:0 auto;padding:clamp(56px,8vw,104px) 0}
main>section+section{border-top:5px double var(--linie)}
.held{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(32px,5vw,64px)}
h1{font-weight:800;font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.025em;max-width:11ch}
.vorspann{margin-top:24px;font-size:clamp(1.125rem,1.6vw,1.3rem);color:var(--leise);max-width:34em}
.handlung{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center}
.knopf{display:inline-block;background:var(--violett);color:#fff;text-decoration:none;font:700 1.05rem/1 var(--anzeige);padding:16px 26px;border-radius:10px}
.knopf:hover{background:var(--violett-stark)}
.leise{color:var(--tinte);font-weight:600;text-underline-offset:5px}
.leise:hover{color:var(--violett-stark)}

.journal{position:relative;margin:0;background:var(--blatt);border:1px solid var(--linie);border-radius:6px;padding:22px 24px 30px;
  box-shadow:0 1px 0 var(--linie),0 18px 40px -24px rgba(27,31,59,.35)}
.journal figcaption{display:flex;justify-content:space-between;font:700 .95rem/1 var(--anzeige);padding-bottom:14px;border-bottom:2px solid var(--tinte)}
.journal figcaption span:last-child{font-weight:500;color:var(--leise)}
.journal table{width:100%;border-collapse:collapse;font-size:.95rem}
.journal th{text-align:left;font:600 .8rem/1.2 var(--text);color:var(--leise);padding:10px 8px 6px 0}
.journal th.zahl{text-align:right;font:600 .8rem/1.2 var(--text)}
.journal td{padding:9px 8px 9px 0;border-bottom:1px solid var(--linie);vertical-align:baseline}
.journal td:first-child{color:var(--leise);white-space:nowrap}
.journal .opt{color:var(--leise)}
.journal .kto{font:500 .88rem/1 var(--zahl);color:var(--violett-stark);margin-right:4px}
.journal .zahl{text-align:right;font:400 .95rem/1.2 var(--zahl);font-variant-numeric:tabular-nums;padding-right:0;white-space:nowrap}
.journal tfoot td{border-bottom:0;padding-top:12px;font-weight:700}
.journal .summe{font-weight:500;position:relative;padding-bottom:10px}
.journal .summe::after{content:"";position:absolute;right:0;bottom:0;width:100%;height:6px;
  border-top:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transform-origin:right}
.stempel{position:absolute;left:24px;bottom:-24px;transform:rotate(-7deg);border:3px solid var(--violett);color:var(--violett);
  background:rgba(255,255,255,.92);border-radius:8px;padding:8px 16px 7px;font:800 1.25rem/1.05 var(--anzeige);text-align:center;letter-spacing:.01em}
.stempel small{display:block;font:600 .78rem/1.3 var(--text);letter-spacing:0}

/* der eine Auftritt: Belege kommen, Summe zieht den Doppelstrich, Stempel */
@media (prefers-reduced-motion:no-preference){
  .journal tbody tr{opacity:0;animation:zeile .45s ease-out forwards}
  .journal tbody tr:nth-child(1){animation-delay:0.35s}
  .journal tbody tr:nth-child(2){animation-delay:0.57s}
  .journal tbody tr:nth-child(3){animation-delay:0.79s}
  .journal tbody tr:nth-child(4){animation-delay:1.01s}
  .journal tbody tr:nth-child(5){animation-delay:1.23s}
  .journal tbody tr:nth-child(6){animation-delay:1.45s}
  .journal tfoot td{opacity:0;animation:zeile .4s ease-out 1.8s forwards}
  .journal .summe::after{transform:scaleX(0);animation:strich .5s ease-in-out 2.15s forwards}
  .stempel{opacity:0;animation:stempel .38s cubic-bezier(.2,1.6,.4,1) 2.75s forwards}
}
@keyframes zeile{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes strich{to{transform:scaleX(1)}}
@keyframes stempel{from{opacity:0;transform:rotate(-7deg) scale(1.35)}to{opacity:1;transform:rotate(-7deg) scale(1)}}

/* Drei Seiten */
h2{font-weight:750;font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.015em;max-width:22ch}
.einleitung{margin-top:18px;max-width:40em;color:var(--leise)}
.drei{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.drei article{padding:4px clamp(18px,2.5vw,36px) 0}
.drei article:first-child{padding-left:0}
.drei article+article{border-left:1px solid var(--linie)}
h3{font-weight:700;font-size:1.25rem;line-height:1.25;margin-bottom:12px}
.drei p+p{margin-top:12px}
.zusatz{font-weight:600}

/* Ablauf eines Monats – tatsächlich eine Reihenfolge */
.ablauf{list-style:none;counter-reset:schritt;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ablauf li{counter-increment:schritt;position:relative;padding-top:64px}
.ablauf li::before{content:counter(schritt);position:absolute;top:0;left:0;font:800 2.6rem/1 var(--anzeige);color:var(--violett)}
.ablauf li::after{content:"";position:absolute;top:22px;left:44px;right:-14px;height:2px;background:var(--linie)}
.ablauf li:last-child::after{display:none}
.ablauf h3{font-size:1.1rem}
.ablauf p{color:var(--leise);font-size:1.02rem}

/* Daten */
.daten dl{margin:40px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.daten dt{font:700 1.15rem/1.3 var(--anzeige);margin-bottom:8px}
.daten dd{margin:0;color:var(--leise);max-width:34em}

/* Pilot und Fuß */
main>section.pilot{width:100%;background:var(--tinte);color:var(--tinte-hell);border-top:0}
.innen{width:min(calc(100% - 2 * var(--rand)),calc(var(--breit) - 2 * var(--rand)));margin:0 auto}
.pilot h2{color:#fff}
.pilot p{margin-top:18px;font-size:1.15rem;max-width:40em}
.knopf.hell{background:var(--papier);color:var(--tinte);margin-top:12px}
.knopf.hell:hover{background:#fff}
.fuss{background:var(--tinte);color:var(--tinte-hell);padding:28px 0 40px}
.fuss .innen{border-top:5px double #3A4068;padding-top:28px}
.fuss p{font-size:.92rem;margin-top:14px}
.fuss nav{display:flex;flex-wrap:wrap;gap:22px;margin-top:14px;font-size:.95rem}
.fuss a{color:#fff}

/* Rechtliches */
.recht{max-width:760px;margin:0 auto;padding:40px var(--rand) 80px}
.recht h1{font-size:clamp(2rem,4vw,2.8rem);max-width:none}
.recht h2{font-size:1.3rem;margin-top:36px;max-width:none}
.recht p,.recht ul{margin-top:12px}
.recht .offen{background:var(--violett-weich);padding:2px 6px;border-radius:4px}

@media (max-width:900px){
  .held{grid-template-columns:minmax(0,1fr)}
  .drei{grid-template-columns:minmax(0,1fr);gap:32px}
  .drei article{padding:0}
  .drei article+article{border-left:0;border-top:1px solid var(--linie);padding-top:28px}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
  .ablauf li::after{display:none}
  .daten dl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kopf nav{display:none}
  .anmelden{margin-left:auto}
  .journal{padding:18px 14px 30px}
  .journal .opt{display:none}
  .journal table{font-size:.88rem}
  .stempel{left:14px;font-size:1.1rem}
  .ablauf{grid-template-columns:minmax(0,1fr)}
}