/* Original shared navigation and footer from youb-so-funktionierts.html. Styles apply only to shell nav/footer; page content is untouched. */ .yb-reference-shell > :is(nav, footer), .yb-reference-shell > :is(nav, footer) :where(*:not(svg):not(svg *)) { all:revert; box-sizing:border-box; }@font-face{ font-family:'TWK Everett Mono'; src:url("/redesign/reference/assets/embedded-9aac910c50879551.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }@font-face{ font-family:'TWK Everett Mono'; src:url("/redesign/reference/assets/embedded-d99f3d67f4fab800.woff2") format('woff2'); font-weight:500 600; font-style:normal; font-display:swap; }@font-face{ font-family:'TWK Everett Mono'; src:url("/redesign/reference/assets/embedded-b28f6106e50cfcf4.woff2") format('woff2'); font-weight:700; font-style:normal; font-display:swap; }@font-face{ font-family:'Everett'; src:url("/redesign/reference/assets/embedded-9a016e14cd25fcc5.woff2") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }@font-face{ font-family:'Avory'; src:url("/redesign/reference/assets/embedded-7ffc93cce3da99c9.woff2") format('woff2'); font-weight:600; font-style:normal; font-display:swap; }@font-face{ font-family:'Avory'; src:url("/redesign/reference/assets/embedded-f7249bebbee41d35.woff2") format('woff2'); font-weight:700; font-style:normal; font-display:swap; }@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-Hairline.woff2") format('woff2');font-weight:100;font-style:normal;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-HairlineItalic.woff2") format('woff2');font-weight:100;font-style:italic;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-Book.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-BookItalic.woff2") format('woff2');font-weight:400;font-style:italic;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-Bold.woff2") format('woff2');font-weight:700;font-style:normal;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-BoldItalic.woff2") format('woff2');font-weight:700;font-style:italic;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-Extrabold.woff2") format('woff2');font-weight:800;font-style:normal;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-ExtraboldItalic.woff2") format('woff2');font-weight:800;font-style:italic;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-Black.woff2") format('woff2');font-weight:900;font-style:normal;font-display:swap;}@font-face{font-family:'TWK Everett';src:url("/redesign/reference/assets/TWKEverett-BlackItalic.woff2") format('woff2');font-weight:900;font-style:italic;font-display:swap;}.yb-reference-shell > nav,.yb-reference-shell > footer{ --cream:#FFFFFF; --beige:#F8F5EE; --white:#FFFFFF; --paper:#EFEAE0; --ink:#353129; --ink-soft:#5B564C; --black:#1c1a16; /* Fixed color pairs — never mix across pairs when combining bg + text: yellow <-> olive · lavender <-> terracotta */ --yellow:#FCF666; --olive:#5F6146; --lavender:#C9A0F0; --terracotta:#D2603C; --mint:#FCF666; --indigo:#5F6146; --line: rgba(28,26,22,0.14); /* Headline-Schrift — umschaltbar über den Font-Switcher unten links */ --font-display:'TWK Everett','Everett','Switzer',sans-serif; --disp-weight:400; --disp-track:-0.025em; --font-mono:'TWK Everett Mono','Roboto Mono',monospace; --font-btn:'TWK Everett','Everett',sans-serif; --btn-weight:700; --btn-track:0.01em; --btn-vf:normal; --disp-vf:normal; --radius-s: 2px; --radius-m: 2px; --radius-l: 2px; }.yb-reference-shell > nav,.yb-reference-shell > footer{ margin:0; background:var(--cream); color:var(--ink); font-family:'TWK Everett','Everett',sans-serif; font-weight:400; font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; }.yb-reference-shell > nav a,.yb-reference-shell > footer a{color:inherit;}.yb-reference-shell > nav img,.yb-reference-shell > footer img{max-width:100%;display:block;}.yb-reference-shell > nav .wrap,.yb-reference-shell > footer .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}.yb-reference-shell > footer .mono-em{color:var(--white);}.yb-reference-shell > nav{ position:absolute; top:0; left:0; right:0; z-index:100; background:transparent; border-bottom:1px solid transparent; color:var(--white); transition:background .25s ease, border-color .25s ease, color .25s ease; }.yb-reference-shell > nav.is-fixed{position:fixed;}.yb-reference-shell > nav.is-scrolled{ background:rgba(248,245,238,0.92); backdrop-filter:blur(10px); border-bottom:1px solid transparent; color:var(--black); }.yb-reference-shell > nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:22px 32px; max-width:none; margin:0; transition:padding .25s ease; }.yb-reference-shell > nav.is-scrolled .nav-inner{padding:14px 32px;}.yb-reference-shell > nav .logo-mark{display:inline-flex; align-items:center; color:currentColor; transition:color .25s ease;}.yb-reference-shell > nav .logo-mark svg{height:26px; width:auto; display:block; fill:currentColor;}.yb-reference-shell > nav .logo-mark.inverted{color:var(--cream);}.yb-reference-shell > nav .logo-mark.inverted svg{height:30px;}.yb-reference-shell > nav .nav-links{display:flex; gap:28px; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; color:currentColor;}.yb-reference-shell > nav .nav-links a{text-decoration:none; opacity:0.85; color:currentColor; padding:3px 5px; margin:0 -5px; transition:background .15s ease, color .15s ease;}.yb-reference-shell > nav .nav-links a:hover{opacity:1; background:var(--nav-hover-bg, var(--yellow)); color:var(--nav-hover-fg, var(--olive));}.yb-reference-shell > nav .nav-cta{display:flex; gap:10px; align-items:center;}.yb-reference-shell > nav .btn-light{border-color:rgba(255,255,255,0.55); color:var(--white); background:var(--btn-light-bg, rgba(206,199,186,0.4)); backdrop-filter:blur(6px);}.yb-reference-shell > nav.is-scrolled .btn-light{border-color:currentColor; color:currentColor; background:var(--btn-light-bg, transparent);}.yb-reference-shell > nav .btn,.yb-reference-shell > footer .btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-btn); font-weight:var(--btn-weight); font-variation-settings:var(--btn-vf); font-size:14px; letter-spacing:var(--btn-track); text-transform:lowercase; padding:12px 24px; border-radius:999px; border:1px solid transparent; text-decoration:none; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }.yb-reference-shell > nav .btn:hover,.yb-reference-shell > footer .btn:hover{transform:translateY(-1px);}.yb-reference-shell > nav .btn-dark,.yb-reference-shell > footer .btn-dark{background:var(--black); color:var(--white); box-shadow:0 6px 18px rgba(28,26,22,0.18);}.yb-reference-shell > nav .btn-dark:hover,.yb-reference-shell > footer .btn-dark:hover{box-shadow:0 10px 22px rgba(28,26,22,0.24);}.yb-reference-shell > nav .btn-dark{border:1.5px solid var(--btn-border, var(--black));}.yb-reference-shell > nav .btn-light,.yb-reference-shell > footer .btn-light{background:transparent; color:var(--black); border-color:var(--line);}.yb-reference-shell > nav .btn-light:hover,.yb-reference-shell > footer .btn-light:hover{border-color:var(--ink);}.yb-reference-shell > nav .btn-sm,.yb-reference-shell > footer .btn-sm{padding:9px 18px; font-size:13px;}.yb-reference-shell > footer{ --yellow:#EFEAE0; --olive:#1c1a16; --lavender:#EFEAE0; --terracotta:#1c1a16; --mint:#EFEAE0; --indigo:#1c1a16; }.yb-reference-shell > footer .hl-line{color:var(--black) !important;}.yb-reference-shell > footer h5{color:var(--black) !important;}.yb-reference-shell > footer .mono-em{color:var(--black) !important;}.yb-reference-shell > footer .foot-bottom{border-top-color:var(--line) !important; color:var(--ink-soft) !important;}.yb-reference-shell > footer{min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; background:var(--cream); color:var(--ink-soft); padding:120px 0 32px; font-size:13px;}.yb-reference-shell > footer .foot-grid{display:grid; grid-template-columns:1.6fr repeat(5,1fr); gap:28px;}.yb-reference-shell > footer h5{color:var(--white); font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px;}.yb-reference-shell > footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}.yb-reference-shell > footer a{text-decoration:none; opacity:.85;}.yb-reference-shell > footer a:hover{opacity:1; text-decoration:underline;}.yb-reference-shell > footer .foot-bottom{margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:rgba(255,255,255,.5);}@media (max-width: 880px){ .yb-reference-shell > footer .foot-grid{grid-template-columns:1fr;} .yb-reference-shell > nav .nav-links{display:none;} .yb-reference-shell > footer .foot-grid{grid-template-columns:1fr 1fr;} }.yb-reference-shell > nav,.yb-reference-shell > footer{font-size:15px; line-height:1.6;}.yb-reference-shell > nav .wrap,.yb-reference-shell > footer .wrap{max-width:none; margin:0; padding:0 32px;}.yb-reference-shell > nav .nav-links{ font-size:9.5px !important; letter-spacing:0.22em !important; font-weight:700; }.yb-reference-shell > nav .btn,.yb-reference-shell > footer .btn{border-radius:0; text-transform:uppercase; font-size:10.5px; letter-spacing:0.2em; padding:16px 30px; box-shadow:none;}.yb-reference-shell > nav .btn:hover,.yb-reference-shell > footer .btn:hover{transform:none;}.yb-reference-shell > nav .btn-dark,.yb-reference-shell > footer .btn-dark{box-shadow:none;}.yb-reference-shell > nav .btn-dark:hover,.yb-reference-shell > footer .btn-dark:hover{background:var(--ink);}.yb-reference-shell > nav .btn-sm,.yb-reference-shell > footer .btn-sm{padding:8px 14px; font-size:9px; letter-spacing:0.2em; line-height:1.6;}.yb-reference-shell > nav .btn-sm{border-radius:999px;}.yb-reference-shell > footer h5{font-size:9.5px !important; letter-spacing:0.22em !important;}.yb-reference-shell > footer, .yb-reference-shell > footer a{font-size:12.5px;}.yb-reference-shell > footer{background:var(--black) !important; color:rgba(255,255,255,.7) !important;}.yb-reference-shell > footer h5, .yb-reference-shell > footer .mono-em, .yb-reference-shell > footer .hl-line{color:var(--white) !important;}.yb-reference-shell > footer .foot-bottom{border-top-color:rgba(255,255,255,.15) !important; color:rgba(255,255,255,.5) !important;}.yb-reference-shell > footer .btn-light{border-color:rgba(255,255,255,0.55); color:var(--white);}@media (max-width:860px){ .yb-reference-shell > nav .wrap,.yb-reference-shell > footer .wrap{padding:0 20px;} .yb-reference-shell > nav .nav-inner, .yb-reference-shell > nav.is-scrolled .nav-inner{padding-left:20px; padding-right:20px;} }@media (max-width:860px){ .yb-reference-shell > footer{min-height:0 !important; padding:64px 0 24px !important;} }.yb-reference-shell > nav{position:fixed !important;}.yb-reference-shell > nav.pr-solid{background:rgba(248,245,238,0.82) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#1c1a16 !important;}.yb-reference-shell > nav.pr-solid .btn-light{border-color:#1c1a16; color:#1c1a16; background:transparent;} /* nav link hover (design: