/* EASTKAP · Wasser (November 2026) · Grundlage für alle Seiten: Schriften, Farben, Kopf, Bühne, Fuß */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/newsreader-var.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/instrument-sans-var.woff2') format('woff2')}
:root{--w-paper:#f3f1ea;--w-white:#fbfaf6;--w-ink:#0a1416;--w-mu:#566364;--w-line:rgba(10,20,22,.15);--w-deep:#051a1e;--w-petrol:#0a2c31;--w-sand:#e9c9ab;--w-fg:#eef3f0;--w-fgm:#aec2bf;--w-light:#9fd3c9;--w-pad:clamp(20px,4vw,60px);--w-hd:76px;
 --w-serif:'Newsreader',Georgia,'Times New Roman',serif;--w-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
html{scroll-behavior:smooth}
.w-wrap{max-width:1380px;margin:0 auto;padding-inline:var(--w-pad)}
.w-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--w-white);color:var(--w-ink);padding:12px 18px;font:500 15px var(--w-sans)}
.w-skip:focus{left:12px;top:12px}
.w-btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:13px 22px;border:0;border-radius:2px;font:540 15.5px/1.2 var(--w-sans);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;background:var(--w-fg);color:var(--w-deep);transition:transform .2s,background .2s,color .2s}
.w-btn:hover{transform:translateY(-2px);color:var(--w-deep)}
.w-btn.w-line{background:transparent;color:var(--w-fg);box-shadow:inset 0 0 0 1px var(--w-fg)}
.w-btn.w-line:hover{background:var(--w-fg);color:var(--w-deep)}
.w-label{display:inline-block;font:500 12.5px/1.2 var(--w-sans);letter-spacing:.07em;text-transform:uppercase;border:1px solid currentColor;padding:7px 12px 6px;color:var(--w-fgm)}
:where(.w-top,.w-hero,.w-foot,.w-onpage) a:focus-visible,.w-menu:focus-visible{outline:2px solid var(--w-light);outline-offset:4px}

/* Kopf: über dem Wasser hell, danach auf Papier */
.w-top{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--w-hd);color:var(--w-fg);font-family:var(--w-sans);border-bottom:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.w-top .w-wrap{display:flex;align-items:center;gap:34px;height:100%}
.w-logo{display:block;flex:none}
.w-logo img{display:block;height:28px;width:auto;filter:invert(1) brightness(1.7);transition:filter .3s}
.w-nav{margin-left:auto;display:flex;gap:30px;font-size:15.5px}
.w-nav a{color:inherit;text-decoration:none;opacity:.82;padding:13px 0;transition:opacity .2s}
.w-nav a:hover,.w-nav a[aria-current="page"]{opacity:1}
.w-top .w-btn{min-height:44px;padding:11px 18px;font-size:15px;background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.w-top .w-btn:hover{background:var(--w-fg);color:var(--w-deep);transform:none}
.w-top.w-solid{background:rgba(243,241,234,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--w-ink);border-color:var(--w-line)}
.w-top.w-solid .w-logo img{filter:none}
.w-top.w-solid .w-btn:hover{background:var(--w-ink);color:var(--w-white)}
.w-menu{display:none;appearance:none;background:none;border:0;color:inherit;font:540 15.5px var(--w-sans);min-height:44px;padding:0 0 0 14px;cursor:pointer}

/* Bühne mit Wasser */
.w-hero{position:relative;overflow:hidden;background:var(--w-deep);color:var(--w-fg);font-family:var(--w-sans);padding:calc(var(--w-hd) + clamp(52px,8vw,116px)) 0 clamp(44px,6vw,84px)}
.w-hero.w-home{display:flex;align-items:flex-end;height:min(100vh,920px);min-height:620px;padding:0}
.w-hero.w-home .w-copy{width:100%;padding-bottom:clamp(44px,9vh,96px)}
.w-water{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(.6px) contrast(1.08)}
.w-shade{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 30%,rgba(5,26,30,0) 30%,rgba(5,26,30,.6) 100%),linear-gradient(90deg,rgba(5,26,30,.9) 0%,rgba(5,26,30,.6) 34%,rgba(5,26,30,0) 62%),linear-gradient(0deg,rgba(5,26,30,.5),rgba(5,26,30,0) 30%)}
.w-grain{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.w-copy{position:relative;z-index:3}
.w-crumb{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:14.5px;line-height:1.5;color:var(--w-fgm)}
.w-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(238,243,240,.4)}
.w-crumb a:hover{color:var(--w-fg)}
.w-hero h1{margin:20px 0 0;max-width:19ch;font-family:var(--w-serif);font-weight:400;font-style:normal;font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.06;letter-spacing:-.02em;text-transform:none;text-wrap:balance;color:inherit}
.w-hero.w-home h1{font-size:clamp(2.6rem,5.3vw,5.3rem);line-height:1.05}
.w-hero h1.w-long{max-width:28ch;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.12}
.w-hero h1 em{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--w-sand)}
.w-lede{max-width:54ch;margin:26px 0 0;color:#c3d2cf;font-size:clamp(1.04rem,1.25vw,1.2rem);line-height:1.6}
.w-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.w-trust{max-width:62ch;margin:22px 0 0;color:var(--w-fgm);font-size:14.5px;line-height:1.55}
.w-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,6vw,110px);align-items:end}
.w-fig img{display:block;width:100%;max-width:400px;margin-left:auto;aspect-ratio:4/4.9;object-fit:cover;object-position:50% 8%;border-radius:3px}

/* Wegweiser: Auf dieser Seite */
.w-onpage{position:sticky;top:var(--w-hd);z-index:30;background:rgba(243,241,234,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--w-line);font-family:var(--w-sans)}
.w-onpage .w-wrap{display:flex;align-items:stretch;gap:30px;height:56px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:15px}
.w-onpage .w-wrap::-webkit-scrollbar{display:none}
.w-onpage span,.w-onpage a{display:flex;align-items:center;color:var(--w-mu);text-decoration:none}
.w-onpage span{padding-right:6px;font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.w-onpage a{border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.w-onpage a:hover{color:var(--w-ink)}
.w-onpage a.w-on{color:var(--w-ink);border-color:var(--w-ink)}
[id]{scroll-margin-top:calc(var(--w-hd) + 72px)}

/* Fuß */
.w-foot{background:var(--w-deep);color:var(--w-fg);font-family:var(--w-sans)}
.w-fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-top:40px;border-top:1px solid rgba(238,243,240,.18);font-size:15px;line-height:1.5}
.w-fcols b{display:block;margin-bottom:14px;font-size:12.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--w-fgm)}
.w-fcols a,.w-fcols span{display:block;padding:5px 0;color:#dbe4e1;text-decoration:none}
.w-fcols a:hover{color:var(--w-sand)}
.w-legal{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding:34px 0 30px;font-size:13.5px;color:var(--w-fgm)}
.w-legal nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.w-legal a{color:inherit;text-decoration:none}
.w-legal a:hover{color:var(--w-fg)}

@media (max-width:980px){
 .w-menu{display:block;margin-left:auto}
 .w-top .w-btn{display:none}
 .w-nav{display:none;position:fixed;top:var(--w-hd);left:0;right:0;bottom:0;margin:0;flex-direction:column;gap:0;padding:8px var(--w-pad) 40px;overflow:auto;background:var(--w-paper);color:var(--w-ink);font-family:var(--w-serif);font-size:1.7rem;letter-spacing:-.01em}
 .w-nav a{opacity:1;padding:18px 0;border-bottom:1px solid var(--w-line)}
 .w-top.w-open{background:var(--w-paper);color:var(--w-ink);border-color:var(--w-line)}
 .w-top.w-open .w-logo img{filter:none}
 .w-top.w-open .w-nav{display:flex}
 .w-hero.w-home h1{font-size:12vw}
 .w-split{grid-template-columns:1fr}
 .w-fig img{margin:0;max-width:340px}
 .w-fcols{grid-template-columns:1fr 1fr}
 .w-fcols a,.w-fcols span{padding:9px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.w-top,.w-top *,.w-btn,.w-onpage a{transition:none!important}}
