/* Slayper Website: Papier-Look (freigegeben 20.10.2026 an der Preisseite, für alle Seiten übernommen).
   Gemeinsame Grundlage: Schriften, Farben, Texturen (Korn, Faser, Guilloche als kleine data-URI-SVGs)
   und Bausteine: Bühne (Karton), Bogen (weißes Papier), Urkunde (blaues Urkundenpapier), Einlage,
   Knopf, Knopf-Haupt, Schalter, Eyebrow, Linie, Siegel, Kopf- und Fußzeile.
   Alles gerade ausgerichtet; nur das Siegel darf schräg stehen. */
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("Manrope.ttf") format("truetype"); }
@font-face { font-family: "Sora"; font-weight: 100 800; font-display: swap; src: url("Sora.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; font-display: swap; src: url("JetBrainsMono.ttf") format("truetype"); }

:root{
 /* Papier und Karton */
 --grund:#E9ECF3;--papier:#FFFEFB;--papier2:#F3F1EA;--karton:#ECEFF6;--rand-p:#E4E1D8;
 /* Marke */
 --blau:#2F5BFF;--blauD:#1E44C4;--tinte:#0E1A3A;--tinte2:#0F1729;--ink2:#33405C;--ink3:#5A6782;--ink3d:#4A5672;--gruen:#0E8A54;--gruenD:#0E6B43;--gruenL:#E3F5EC;
 --font:"Manrope","Helvetica Neue",Arial,sans-serif;--marke:"Sora","Manrope","Helvetica Neue",Arial,sans-serif;--mono:"JetBrains Mono",Menlo,monospace;
 /* Texturen */
 --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 --fasern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.47 0 0 0 0 0.4 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
 --guilloche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='1'%3E%3Ccircle cx='80' cy='80' r='20'/%3E%3Ccircle cx='80' cy='80' r='36'/%3E%3Ccircle cx='80' cy='80' r='52'/%3E%3Ccircle cx='80' cy='80' r='68'/%3E%3Ccircle cx='0' cy='0' r='44'/%3E%3Ccircle cx='160' cy='0' r='44'/%3E%3Ccircle cx='0' cy='160' r='44'/%3E%3Ccircle cx='160' cy='160' r='44'/%3E%3Ccircle cx='0' cy='0' r='60'/%3E%3Ccircle cx='160' cy='0' r='60'/%3E%3Ccircle cx='0' cy='160' r='60'/%3E%3Ccircle cx='160' cy='160' r='60'/%3E%3C/g%3E%3C/svg%3E");
 --korn-nacht:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 /* Flächen und Kanten der Bausteine */
 --f-buehne:var(--fasern),var(--korn),linear-gradient(180deg,#F1EEE6,#E9E5DB);
 --s-buehne:0 1px 0 #fff inset,0 -1px 0 rgba(0,0,0,.04) inset,0 2px 0 var(--rand-p),0 4px 0 #DDD9CE,0 6px 0 #D5D1C5,0 22px 50px rgba(14,26,58,.16),0 50px 90px rgba(14,26,58,.10);
 --f-bogen:var(--fasern),var(--korn),var(--papier);
 --s-bogen:0 1px 0 #fff inset,0 2px 0 var(--rand-p),0 3px 0 #DCD8CC,0 14px 28px rgba(14,26,58,.10);
 --s-blatt:0 1px 0 #fff inset,0 2px 0 var(--rand-p),0 4px 0 #DDD9CE,0 18px 40px rgba(14,26,58,.10);
 --f-einlage:var(--korn),var(--papier2);
 --s-einlage:0 1px 0 #fff inset,0 2px 0 #DCD8CC;
 --f-urkunde:var(--guilloche),var(--korn),linear-gradient(160deg,#3D67FF,#2F5BFF 45%,#2650EE);
 --s-urkunde:0 1px 0 rgba(255,255,255,.3) inset,0 2px 0 #2347D6,0 4px 0 #1E3FC0,0 6px 0 #1A37A8,0 26px 50px rgba(30,68,196,.38);
 --f-nacht:var(--korn-nacht),linear-gradient(170deg,#18213A,#0F1729 55%,#0B1222);
 --s-nacht:0 1px 0 rgba(255,255,255,.08) inset,0 2px 0 #080D19,0 4px 0 #060A14,0 6px 0 #04070F,0 22px 50px rgba(14,26,58,.28),0 50px 90px rgba(14,26,58,.16);
 --f-knopf:var(--korn),#ECE9E1;
 --s-knopf:0 1px 0 #fff inset,0 2px 0 #D8D4C8,0 4px 10px rgba(14,26,58,.08);
 --f-knopf-haupt:var(--korn),var(--blau);
 --s-knopf-haupt:0 1px 0 rgba(255,255,255,.25) inset,0 2px 0 var(--blauD),0 4px 0 #1A37A8,0 10px 22px rgba(47,91,255,.32);
 --gestrichelt:repeating-linear-gradient(90deg,rgba(14,26,58,.14) 0 6px,transparent 6px 11px);
}

body{background:var(--grund)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:var(--korn);opacity:.5;mix-blend-mode:multiply;z-index:0}

/* Eyebrow: Mono, Großbuchstaben, blauer Punkt */
.eb{margin:0;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:12px}
.eb i{width:9px;height:9px;border-radius:50%;background:var(--blau);display:block;flex:none}

/* Bühne: dicker Karton mit mehreren Lagen und gestrichelter Prägelinie */
.buehne{position:relative;isolation:isolate;border-radius:40px;padding:44px 40px 46px;background:var(--f-buehne);box-shadow:var(--s-buehne)}
.buehne::after{content:"";position:absolute;inset:14px;border-radius:30px;border:1.5px dashed rgba(14,26,58,.10);pointer-events:none;z-index:-1}

/* Bogen: weißes Papier mit Lagenkante */
.bogen{position:relative;border-radius:26px;background:var(--f-bogen);box-shadow:var(--s-bogen)}
/* Blatt: großer Papierbogen für Inhalte */
.blatt{border-radius:30px;padding:40px 44px;background:var(--f-bogen);box-shadow:var(--s-blatt)}
/* Einlage: eingelegtes, leicht getöntes Papier innerhalb eines Bogens */
.einlage{border-radius:20px;background:var(--f-einlage);box-shadow:var(--s-einlage)}

/* Urkunde (Bogen blau): blaues Urkundenpapier mit Guilloche und weißem Innenrahmen */
.urkunde,.bogen.top{background:var(--f-urkunde);color:#fff;box-shadow:var(--s-urkunde)}
.urkunde::before,.bogen.top::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1.5px solid rgba(255,255,255,.28);pointer-events:none}
.urkunde{position:relative}

/* Nacht: dunkles Papier bzw. Karton (#0F1729 mit feinem Korn) */
.nacht{position:relative;background:var(--f-nacht);color:#fff;box-shadow:var(--s-nacht)}

/* Knöpfe wie aufgeklebter Karton */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:16px;font-weight:800;font-size:16.5px;color:var(--tinte);text-decoration:none;
 background:var(--f-knopf);box-shadow:var(--s-knopf);transition:transform .15s,box-shadow .15s}
.knopf-haupt{background:var(--f-knopf-haupt);color:#fff;box-shadow:var(--s-knopf-haupt)}
.urkunde .knopf,.bogen.top .knopf{background:var(--korn),#fff;color:var(--blau);box-shadow:0 2px 0 #C9D4FF,0 8px 18px rgba(14,26,58,.25)}

/* Schalter: eingelassene Papierrille, aktive Seite als blaue Papierlage */
.schalter{position:relative;z-index:2;margin:0 auto;width:max-content;display:flex;gap:4px;padding:6px;border-radius:999px;background:var(--korn),#E7E4DB;box-shadow:inset 0 2px 4px rgba(14,26,58,.14),0 1px 0 #fff}
.schalter button{font:inherit;font-size:18px;font-weight:700;border:0;cursor:pointer;height:54px;padding:0 30px;border-radius:999px;background:transparent;color:var(--ink3);display:flex;align-items:center;gap:10px}
.schalter button[aria-pressed=true]{background:var(--korn),var(--blau);color:#fff;box-shadow:0 2px 0 var(--blauD),0 8px 18px rgba(47,91,255,.35),inset 0 1px 0 rgba(255,255,255,.25)}

/* Gestrichelte Trennlinie */
.linie{margin:18px 0;height:2px;background:var(--gestrichelt)}
.urkunde .linie,.bogen.top .linie{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 11px)}

/* Prägesiegel (darf schräg stehen) */
.siegel{position:relative;width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
 font-family:var(--marke);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blau);line-height:1.15;transform:rotate(12deg);
 background:radial-gradient(circle,#fff 52%,transparent 53%),repeating-conic-gradient(#fff 0 6deg,#EEF2FF 6deg 12deg);box-shadow:0 6px 14px rgba(14,26,58,.25)}
.siegel span{position:relative;z-index:1}
.siegel::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1.5px dashed rgba(47,91,255,.5)}

/* ── Grundlagen für alle Seiten ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--tinte2);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p{margin:0}
h1,h2,h3{font-family:var(--marke)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
main,footer{position:relative;z-index:1}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.urkunde :focus-visible,.nacht :focus-visible,.bogen.top :focus-visible{outline-color:#fff}

/* Knöpfe der Seiten (Kopfzeile, Startseite): Karton, Haupt-Knopf blau mit Lagenkante */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;font-weight:800;font-size:16px;white-space:nowrap;color:var(--tinte);
 background:var(--f-knopf);box-shadow:var(--s-knopf);transition:transform .15s,box-shadow .15s,color .15s}
.btn:hover{transform:translateY(-1px);color:var(--blau);box-shadow:0 1px 0 #fff inset,0 2px 0 #D8D4C8,0 3px 0 #CFCABD,0 8px 16px rgba(14,26,58,.12)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #fff inset,0 1px 0 #D8D4C8}
.btn-p{background:var(--f-knopf-haupt);color:#fff;box-shadow:var(--s-knopf-haupt)}
.btn-p:hover{color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 0 var(--blauD),0 4px 0 #1A37A8,0 5px 0 #16308F,0 14px 26px rgba(47,91,255,.36)}
.btn-p:active{box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 0 var(--blauD)}
.btn-w{background:var(--korn),#fff;color:var(--blau);box-shadow:0 2px 0 #C9D4FF,0 4px 0 #B5C4FF,0 10px 22px rgba(14,26,58,.28)}
.btn-w:hover{color:var(--blauD);box-shadow:0 2px 0 #C9D4FF,0 4px 0 #B5C4FF,0 14px 26px rgba(14,26,58,.32)}
.btn-g{background:rgba(255,255,255,.10);color:#fff;box-shadow:none;border:1.5px dashed rgba(255,255,255,.55)}
.btn-g:hover{color:#fff;background:rgba(255,255,255,.18);box-shadow:none}
.btn-s,.hd .btn{height:42px;padding:0 18px;font-size:15px;border-radius:12px}

/* Kopfzeile: Papierstreifen mit Lagenkante */
header{position:sticky;top:0;z-index:50;background:var(--korn),rgba(255,254,251,.94);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
 box-shadow:0 1px 0 var(--rand-p),0 2px 0 #DDD9CE,0 10px 24px rgba(14,26,58,.06)}
header .wrap,footer .wrap{max-width:1320px}
.hd{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.zl{display:block;height:34px;width:auto;color:var(--tinte);flex:none}
.hd .act{margin-left:auto;display:flex;align-items:center;gap:10px}
/* Sprachwahl als eingelassene Papierrille */
.lang{display:flex;height:42px;padding:4px;gap:2px;border-radius:999px;flex:none;background:var(--korn),#E7E4DB;box-shadow:inset 0 2px 4px rgba(14,26,58,.14),0 1px 0 #fff}
.lang a{display:flex;align-items:center;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink3d)}
.lang a:hover{color:var(--blau)}
.lang a[aria-current]{background:var(--korn),var(--blau);color:#fff;box-shadow:0 2px 0 var(--blauD),0 4px 10px rgba(47,91,255,.30)}

/* Fußzeile: Kartonband mit Prägelinie */
footer{margin-top:72px;padding:64px 0 36px;background:var(--f-buehne);box-shadow:0 -1px 0 var(--rand-p),0 -2px 0 #fff inset,inset 0 2px 0 rgba(255,255,255,.7)}
footer::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--gestrichelt);opacity:.8}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ft p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink2);font-weight:500;max-width:320px}
.ft h5{margin:0;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3d);display:flex;align-items:center;gap:10px}
.ft h5::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blau);flex:none}
.ft ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px;font-size:15px;font-weight:600;color:var(--ink2)}
.ft a:hover{color:var(--blau)}
.fb{margin-top:44px;padding-top:22px;background:var(--gestrichelt) top/100% 2px no-repeat;display:flex;justify-content:space-between;gap:20px;font-size:13.5px;color:var(--ink3d);font-weight:600}

@media (max-width:860px){.ft{grid-template-columns:1fr 1fr}.ft > :first-child{grid-column:1/-1}}
@media (max-width:640px){.buehne{padding:28px 16px}.blatt{padding:28px 20px}}
@media (max-width:560px){.wrap{padding:0 16px}.ft{grid-template-columns:1fr}.fb{flex-direction:column}footer{margin-top:48px;padding-top:48px}}
@media (max-width:420px){.zl{height:26px}.hd .act{gap:8px}.lang{height:38px;padding:3px}.lang a{padding:0 8px;font-size:12px}.hd .btn-s,.hd .btn{height:38px;padding:0 12px;font-size:13.5px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.knopf{transition:none}.btn:hover,.btn:active{transform:none}}