@scope (.onepager) { /* Shared typography and content layout; also used without landing-page components. */
@layer layout {
:scope{
  --sz-siena:var(--sz-color-ink);
  --sz-paper:var(--sz-color-paper);
  --sz-header:var(--sz-color-header);
  --sz-cyan:var(--sz-color-cyan);
  --sz-cyan-dark:var(--sz-color-action);
  --sz-cyan-deep:var(--sz-color-action-dark);
  --sz-cyan-wash:var(--sz-color-wash);
  --sz-orange:var(--sz-color-orange);
  --sz-line:#dedfdd;
  --sz-muted:#605b59;
  --sz-audience:#f8f7f3;
  --sz-audience-line:#cbc8c3;
  --sz-footer:#222222;
  --sz-book-line:#abd9df;
  --sz-photo:#ebece9;
  --sz-head:"Montserrat","Ubuntu",sans-serif;
  --sz-body:"Ubuntu",Arial,sans-serif;
  --sz-mono:"Ubuntu Mono",monospace;
  --sz-quote:Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
:scope{scroll-behavior:smooth}
:scope{margin:0;background:var(--sz-paper);color:var(--sz-siena);font:400 17px/1.62 var(--sz-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sz-orange);outline-offset:4px}
:where(p,li,blockquote,td,figcaption) a:not(.button){color:var(--sz-cyan-deep);text-decoration-line:underline;text-decoration-color:rgba(8,97,114,.55);text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-skip-ink:auto;transition:color .18s ease,text-decoration-color .18s ease}
:where(p,li,blockquote,td,figcaption) a:not(.button):hover{color:var(--sz-siena);text-decoration-color:var(--sz-orange)}
button{font:inherit}
.wrap{width:min(calc(100% - var(--sz-content-gutter,64px)),var(--sz-content-max,1160px));margin-inline:auto}
h1{font:600 clamp(2.55rem,5.25vw,5rem)/1.08 var(--sz-head);letter-spacing:-.045em;margin:0 0 28px;max-width:12.6ch}
h2{font:600 clamp(2rem,3.6vw,3.75rem)/1.16 var(--sz-head);letter-spacing:-.035em;margin:0 0 25px}
h3{font:600 clamp(1.17rem,1.6vw,1.48rem)/1.16 var(--sz-head);letter-spacing:-.025em}
h3,p,blockquote{margin-top:0}
p{margin-bottom:16px}
.lead{font-size:clamp(1.18rem,1.55vw,1.42rem);line-height:1.52}
.small{font-size:15px;line-height:1.55}
.muted{color:var(--sz-muted)}
nav{display:flex;gap:26px;align-items:center;font:500 11px/1.3 var(--sz-mono);letter-spacing:.08em;text-transform:uppercase}
nav a:hover,.text-link:hover{color:var(--sz-cyan-dark)}
.hero{padding:clamp(72px,8.5vw,124px) 0 90px;background:var(--sz-paper)}
.hero-grid{display:grid;grid-template-columns:1.13fr .87fr;gap:clamp(45px,7vw,115px);align-items:start}
.hero .eyebrow{margin-bottom:24px}
.hero .lead{max-width:46ch;margin-bottom:32px}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:12px 21px;border:1px solid var(--sz-cyan-dark);background:var(--sz-cyan-dark);color:#fff;font:700 12px/1.25 var(--sz-head);letter-spacing:.045em;text-transform:uppercase;transition:background .2s,color .2s}
.button:hover{background:var(--sz-cyan-deep);border-color:var(--sz-cyan-deep)}
.button-outline{background:transparent;color:var(--sz-cyan-deep)}
.button-outline:hover{color:#fff}
.button-orange{background:var(--sz-orange);border-color:var(--sz-orange)}
.button-orange:hover{background:var(--sz-siena);border-color:var(--sz-siena)}
.hero-caption{border-left:3px solid var(--sz-cyan-dark);margin:18px 0 0;padding-left:17px;color:var(--sz-muted);font-size:15px;line-height:1.55}
.hero-caption span{display:block}
/* Text and image share the same top edge; content determines the section height. */
.hero-visual{position:relative;aspect-ratio:1;min-width:0;margin:0}
.photo{display:block;width:100%;height:100%;overflow:hidden;background:var(--sz-photo);box-shadow:0 8px 24px rgba(34,12,16,.15)}
.section{padding:clamp(82px,10vw,138px) 0}
.section-tight{padding:clamp(72px,8vw,108px) 0}
.text-link{text-decoration:underline;text-underline-offset:4px;color:var(--sz-cyan-deep)}
@media(max-width:900px){.wrap{width:min(100% - 44px,1160px)}
.hero-grid{gap:36px}}
@media(max-width:700px){.hero{padding:68px 0 76px}
.hero-visual{width:min(100%,490px);margin-top:10px}
.hero .lead{max-width:54ch}
.hero-side{transform:none;margin-top:26px}}
@media(max-width:520px){:scope{font-size:16px}
.wrap{width:min(100% - 36px,1160px)}}
@media(prefers-reduced-motion:reduce){:scope{scroll-behavior:auto}
.button{transition:none}}
.hero h1{line-height:1.08}
nav{gap:26px}
#idee,#dozent,#arbeitgeber{background:var(--sz-cyan-wash)}
}
 }