@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/SourceSans3-400.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SourceSans3-500.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Newsreader-400.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#fff;color:#141414;font-family:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.display{font-family:Newsreader,"Times New Roman",serif;font-weight:400}

/* Startseite */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#111;color:#fff}
.bg,.shade{position:absolute;inset:0;width:100%;height:100%}
.bg{object-fit:cover}
.shade{background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 28%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.72) 100%)}
.hero header,.hero main{position:relative;width:100%;max-width:72rem;margin:0 auto;padding:0 1.5rem}
.hero header{padding-top:max(1.5rem,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hero header img{display:block;height:3.5rem;width:auto}
.hero main{margin-top:auto;padding-top:6rem;padding-bottom:2.5rem}
.eyebrow{margin:0 0 1.25rem;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)}
h1{margin:0;max-width:40rem;font-size:2rem;line-height:1.12;letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.5rem;white-space:nowrap;border-radius:999px;background:#fff;color:#111;font-size:.875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.btn:hover{opacity:.75}
.btn:focus-visible{outline-color:#fff}
.head-actions{display:flex;align-items:center;gap:1.25rem}
.head-link{display:inline-flex;align-items:center;min-height:2.75rem;color:#fff;font-size:1rem;font-weight:500;text-decoration:none}
.head-link:hover{opacity:.75}
.head-link:focus-visible{outline-color:#fff}

/* Footer */
footer{background:#000;color:#fff}
.foot{max-width:72rem;margin:0 auto;padding:2rem 1.5rem max(1.25rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1rem}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.foot-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem}
.foot-name strong{font-family:Newsreader,"Times New Roman",serif;font-weight:400;font-size:1.25rem;line-height:1;letter-spacing:-.01em}
.foot-name span{font-size:.875rem;color:rgba(255,255,255,.7)}
.icons{display:flex;gap:1.25rem}
.icons a{display:inline-flex}
.icons svg{width:1.75rem;height:1.75rem}
.legal{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:.75rem;line-height:1.25rem}
footer a{text-decoration:none}
footer a:hover{opacity:.6}
footer :focus-visible{outline-color:#fff}

/* Rechtliche Seiten */
.bar{max-width:48rem;width:100%;margin:0 auto;padding:1.5rem 1.5rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.bar .head-link{color:#141414}
.bar .head-link:focus-visible{outline-color:#141414}
.bar .btn{background:#111;color:#fff}
.bar .btn:focus-visible{outline-color:#111}
.bar img{display:block;height:3rem;width:auto;filter:brightness(0)}
article{flex:1;width:100%;max-width:48rem;margin:0 auto;padding:4rem 1.5rem}
article h1{color:#141414;font-size:2.25rem}
article h2{margin:2.5rem 0 0;font-family:Newsreader,"Times New Roman",serif;font-weight:400;font-size:1.5rem;letter-spacing:-.01em}
article p,article address{margin:1rem 0 0;color:#5c5c5c;font-size:1rem;line-height:1.75;font-style:normal}
article address p{margin:0}
article address p:first-child{color:#141414}
article p a{text-decoration:underline;text-decoration-color:rgba(20,20,20,.3);text-underline-offset:.3em}
article p a:hover{text-decoration-color:#141414}

@media(min-width:640px){
h1{font-size:3.25rem;line-height:1.08}
.hero main{padding-bottom:3rem}
.foot{padding-top:2.5rem;gap:1.25rem}
article{padding:6rem 1.5rem}
article h1{font-size:3rem}
}

/* Verlassen */
.leave{flex:1;width:100%;max-width:48rem;margin:0 auto;padding:4rem 1.5rem 5rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.leave h1{max-width:36rem;color:#141414;font-size:1.875rem}
.leave p{margin:2rem 0 0;color:#5c5c5c}
.preview{margin-top:2rem;width:100%;max-width:42rem;overflow:hidden;border:1px solid rgba(20,20,20,.2);border-radius:.5rem;position:relative;aspect-ratio:1280/800;background:#fff}
.preview iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:top left}
.leave-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2rem}
.leave-actions a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.875rem;color:#141414}
.leave-actions .go{text-decoration:underline;text-underline-offset:.3em}
.leave-actions .back-btn{padding:0 1.25rem;border:1px solid currentColor;border-radius:.375rem;text-decoration:none}
.leave-actions a:hover{opacity:.6}
@media(min-width:640px){.leave{padding-top:6rem}.leave h1{font-size:2.25rem}}

/* Hinweistext */
.note{background:#fff;color:#5c5c5c}
.note-in{max-width:72rem;margin:0 auto;padding:3.5rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.note-text{margin:0;max-width:36rem;font-size:1.0625rem;line-height:1.7}
.note-label{margin:0;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#5c5c5c}
.note-body{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
@media(min-width:768px){.note-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4rem;padding:5rem 1.5rem}.note-label{padding-top:.6rem}.note-text{font-size:1.1875rem}}
.btn-dark{background:#111;color:#fff;min-height:3rem;padding:0 2rem}
.btn-dark:focus-visible{outline-color:#111}

/* Hochformat-Video: im Querformat vollflächig, Ausschnitt so tief, dass das Boot im Bild bleibt */
.hero{isolation:isolate;background:#111 url(boot-clip-poster.jpg) center/cover no-repeat}
.bg-main.off{z-index:-1}
@media(min-aspect-ratio:1/1){.hero{background-image:url(boot-clip-poster-web.jpg);background-position:50% 76%}.bg-main{object-position:50% 76%}.hero h1{max-width:30rem}}

/* Querformat am Handy: links und rechts gleich viel weißer Abstand, nicht nur an der Kameraseite */
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){body{padding-inline:max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}.hero h1{font-size:2rem}}

/* Seitenwechsel: neue Seite schiebt sich von unten nach oben ein, beim Zurück wischt die alte nach unten weg */
@view-transition{navigation:auto}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:page-up .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes page-up{from{transform:translateY(100%)}to{transform:none}}
:active-view-transition-type(back)::view-transition-old(root){z-index:2;animation:page-down .6s cubic-bezier(.22,.61,.36,1) both}
:active-view-transition-type(back)::view-transition-new(root){z-index:1;animation:none}
@keyframes page-down{from{transform:none}to{transform:translateY(100%)}}
@media(prefers-reduced-motion:reduce){::view-transition-new(root){animation:none}}