:root{color-scheme:dark;--bg:#081622;--fg:#eeeae1;--muted:#a2b0bc;--accent:#9ccbd6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 83% 32%,#1b344440,transparent 54%)}.page{position:relative;min-height:100svh;padding:48px 6.5vw 28px;display:flex;flex-direction:column;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;gap:16px}.name{font-size:13px;letter-spacing:.22em;text-transform:uppercase}.domain{font-size:11px;letter-spacing:.08em;color:var(--muted)}main{flex:1;display:flex;align-items:center;position:relative;padding:76px 0 70px}.copy{position:relative;z-index:1;width:100%}h1{font-weight:400;font-size:clamp(52px,7.8vw,126px);line-height:1.06;letter-spacing:-.065em;margin:0 0 37px;max-width:1050px}h1 span{color:var(--accent)}.intro{color:#b9c4ca;font-size:clamp(16px,1.45vw,21px);line-height:1.65;margin:0}.contact{margin-top:54px}.question{margin:0 0 12px;font-size:14px;color:var(--muted)}button,a{font:inherit}a{color:inherit;text-underline-offset:7px}button{color:inherit;cursor:pointer;background:none;border:0;padding:0}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.contact button{font-size:19px;border-bottom:1px solid #7a9aa6;padding-bottom:7px}.arrow{display:inline-block;margin-left:34px;color:var(--accent);transition:transform .2s}button:hover .arrow{transform:translate(3px,-3px)}.art{position:absolute;right:-15vw;top:50%;width:62vw;height:62vw;transform:translateY(-50%);opacity:.45;pointer-events:none}.art svg{width:100%;height:100%}footer{display:flex;justify-content:space-between;align-items:center;gap:22px;z-index:2}footer button{font-size:12px;color:var(--muted)}footer button:hover{color:var(--fg)}.legal{display:flex;gap:25px}.version{position:absolute;right:6.5vw;bottom:74px;font-size:9px;letter-spacing:.14em;color:#7e96a0}dialog{background:#0e2230;color:var(--fg);border:1px solid #34505c;max-width:580px;width:calc(100% - 40px);padding:38px;border-radius:2px;line-height:1.7}dialog::backdrop{background:#02080ed9;backdrop-filter:blur(6px)}dialog h2{font-size:28px;font-weight:400;letter-spacing:-.03em;margin:8px 0 18px}dialog p{color:#bdc9d0;font-size:15px}.close{float:right;font-size:24px;line-height:1;padding:4px 8px}.note{font-size:12px;color:var(--muted)}@media(max-width:650px){.page{padding:30px 7vw 24px}.domain{display:none}main{padding:80px 0 92px}h1{font-size:clamp(48px,10.5vw,68px);margin-bottom:30px}.intro{font-size:16px}.contact{margin-top:43px}.art{width:120vw;height:120vw;right:-75vw;opacity:.3}.version{bottom:65px;right:7vw;font-size:8px}.legal{gap:16px}footer{gap:10px}footer button{font-size:11px}}

/* Marineblau und fein geschliffenes Aluminium */
:root{--bg:#16334f;--fg:#f3f5f6;--muted:#b3c7d9;--accent:#c3d7e5}
body{background:linear-gradient(112deg,#142e49 0%,#1d4161 62%,#244e6b 100%)}
body:before{background:radial-gradient(ellipse at 78% 28%,#a6c6de14,transparent 57%)}
h1{font-size:clamp(52px,7.3vw,118px);letter-spacing:-.06em;max-width:1050px}
h1 span{color:#d7e2e9;background:repeating-linear-gradient(0deg,#ffffff00 0px,#ffffff00 1px,#ffffff18 1.3px,#ffffff00 1.7px),linear-gradient(172deg,#e6edf1 0%,#a6bac9 24%,#f4f8fa 39%,#d3dfe7 47%,#8fa8ba 51%,#dbe7ee 57%,#bbcdda 78%,#f0f5f7 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.intro{color:#c5d3df}.art{width:45vw;height:45vw;right:-8vw;opacity:.92;top:49%}.contact button{border-color:#a0bdcf}.question{color:#b3c7d9}.version{color:#acc3d3}footer button{color:#b3c7d9}dialog{background:#183852;border-color:#6f92ab}dialog p{color:#d0dce5}
@media(min-width:1700px){.art{right:0;width:40vw;height:40vw}}
@media(max-width:900px){.art{right:-20vw;width:65vw;height:65vw;opacity:.5}h1{font-size:clamp(48px,7.6vw,80px)}}
@media(max-width:650px){h1{font-size:clamp(43px,9.8vw,64px);line-height:1.12}h1 span{background:linear-gradient(175deg,#f1f5f7,#b1c6d6 48%,#e3edf3 63%,#c5d7e4);background-clip:text;-webkit-background-clip:text}.art{width:95vw;height:95vw;right:-57vw;top:58%;opacity:.32}main{padding:76px 0 96px}.intro{max-width:290px}.contact{margin-top:44px}}

body{background:#041b4b}body:before{display:none}.new-page{min-height:100svh;display:flex;flex-direction:column;background:linear-gradient(110deg,#021334,#062359 60%,#06377b)}.new-page main{display:block;flex:0;padding:0}.hero-image{display:block;width:100%;height:auto}picture{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.contact-bar{padding:22px 6.4vw 35px;display:flex;align-items:center;gap:35px;flex:1}.contact-bar p{color:#c6d7ec;font-size:15px;margin:0}.contact-bar button{font-size:17px;border-bottom:1px solid #9db6d1;padding-bottom:8px}.contact-bar button span{margin-left:30px}.new-page footer{padding:20px 6.4vw 27px}.new-page footer button{color:#bacde2}dialog{background:#071e49;border-color:#677e9e}@media(max-width:650px){.hero-image{aspect-ratio:2/3;object-fit:contain}.contact-bar{padding:28px 8vw 32px;display:block}.contact-bar p{margin-bottom:14px;font-size:15px}.new-page footer{padding:20px 8vw 28px;flex-wrap:wrap;row-gap:22px}.new-page footer button{font-size:12px}.legal{gap:22px}}

/* Einheitliche Abstände: Kontakt am Motiv, Fußzeile am Seitenende. */
.new-page{background:#051c48}.new-page main{width:100%;max-width:1942px;margin:0 auto}.new-page picture{position:relative}.new-page picture:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:44px;background:linear-gradient(transparent,#051c48);pointer-events:none}.contact-bar{flex:0;padding:26px 6.4vw 30px;gap:28px}.new-page footer{margin-top:auto;padding:22px 6.4vw 22px;min-height:72px}.new-page footer button{min-height:44px}.contact-bar button{min-height:44px;padding:8px 0}.legal{align-items:center}.new-page footer button,.contact-bar button{white-space:nowrap}dialog{max-height:calc(100svh - 32px);overflow:auto}
@media(min-width:1600px){.contact-bar,.new-page footer{width:100%;max-width:1942px;margin-left:auto;margin-right:auto}.contact-bar{padding-top:16px}}
@media(max-width:900px) and (min-width:651px){.contact-bar{padding-top:30px;padding-bottom:28px}.new-page{min-height:100svh}}
@media(max-width:650px){.contact-bar{padding:16px 8vw 20px}.contact-bar p{margin-bottom:6px}.new-page footer{padding:12px 8vw 18px;min-height:72px;gap:6px 16px}.new-page footer button{font-size:12px}.legal{gap:18px}.new-page picture:after{height:32px}}
@media(max-width:360px){.new-page footer{align-items:flex-start;flex-direction:column}.legal{gap:24px}}
@media(min-width:651px) and (max-width:900px){.hero-image{height:calc(100svh - 190px);min-height:480px;width:100%;object-fit:contain;object-position:center top}.new-page main{background:#041b4b}.new-page picture:after{height:24px}.contact-bar{padding-top:10px;padding-bottom:12px}.new-page footer{min-height:66px;padding-top:8px;padding-bottom:8px}}

.principle{padding:22px 6.4vw 40px;width:100%;max-width:1942px;margin:0 auto}.principle p{color:#b4d7b1;font-size:clamp(18px,1.65vw,25px);font-weight:400;line-height:1.65;letter-spacing:.005em;max-width:850px;margin:0;text-wrap:pretty}.contact-bar{padding-bottom:18px}@media(max-width:650px){.principle{padding:12px 8vw 30px}.principle p{font-size:18px;line-height:1.65}.contact-bar{padding-bottom:12px}}@media(min-width:651px) and (max-width:900px){.hero-image{height:calc(100svh - 310px);min-height:480px}.principle{padding-top:14px;padding-bottom:24px}.principle p{font-size:20px}}

/* Grundsatz: eigenständiger, mittiger Ruhepunkt zwischen Kontakt und Fußzeile. */
.principle{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 8vw 40px;min-height:150px}.principle p{color:#59a982;text-align:center;max-width:920px;font-size:clamp(19px,1.7vw,25px);line-height:1.7;text-wrap:balance}.new-page footer{margin-top:0}.contact-bar{padding-bottom:8px}@media(max-width:650px){.principle{min-height:0;padding:32px 8vw 38px;flex:0}.principle p{font-size:19px;line-height:1.65;max-width:440px}.contact-bar{padding-bottom:0}}@media(min-width:651px) and (max-width:900px){.principle{min-height:0;padding:26px 8vw 30px;flex:0}.principle p{font-size:21px;max-width:600px}.hero-image{height:calc(100svh - 340px)}}

.principle{padding:24px 6.4vw 30px;min-height:150px}.handwriting{display:block;width:min(100%,1100px);aspect-ratio:2048/540;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent)}.handwriting img{display:block;width:100%;height:auto;margin-top:-5.5%}.new-page .handwriting:after{display:none}@media(max-width:650px){.principle{padding:18px 5vw 24px;min-height:0}.handwriting{width:min(100%,440px);aspect-ratio:1}.handwriting img{margin-top:0}}@media(min-width:651px) and (max-width:900px){.principle{padding:18px 6.4vw 24px}.handwriting{width:100%;aspect-ratio:2048/570}}

.principle{padding:18px 6.4vw 24px;min-height:120px}.handwriting{width:min(100%,740px);aspect-ratio:2048/540}@media(max-width:650px){.principle{padding:24px 8vw 26px;min-height:0}.handwriting{width:min(100%,290px);aspect-ratio:1}}@media(min-width:651px) and (max-width:900px){.principle{padding:18px 8vw 24px}.handwriting{width:min(100%,600px)}}

.copyright{font-size:11px;line-height:1.5;color:#a5b9cf;white-space:nowrap}.new-page footer{flex-wrap:wrap;column-gap:24px;row-gap:2px}.new-page footer>button{margin-right:auto}.new-page footer .legal{margin-left:auto}@media(max-width:650px){.copyright{order:3;flex-basis:100%;text-align:center;margin-top:8px;font-size:10px}.new-page footer .legal{margin-left:auto}.new-page footer>button{margin-right:0}}@media(max-width:360px){.new-page footer{flex-direction:row;align-items:center}.copyright{text-align:left}.new-page footer .legal{margin-left:0}}
@media(max-width:420px){.copyright{white-space:normal}}
.projects-link{font-size:12px;color:#bacde2;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;margin-right:auto}.projects-link:hover{text-decoration:underline}.projects-link:focus-visible{outline:2px solid #c3d7e5;outline-offset:5px}