/* ============================================================
   GEMEINSAME STILE — Simones Ferienhaus
   ============================================================ */
:root{
  --paper:#F4EFE3; --paper-warm:#FBF7EC; --paper-edge:#E7DFCC;
  --ink:#1A2A30; --ink-soft:#3B4F57; --ink-muted:#6E7D83;
  --ocean:#1F4D5E; --ocean-deep:#14323E; --tide:#6E97A2;
  --terracotta:#C2674A; --terracotta-d:#9C4B33; --moss:#5E6B49;
  --f-display:"Fraunces","Cormorant Garamond",Georgia,serif;
  --f-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1280px; --pad-x:clamp(20px,5vw,56px);
  --radius:4px; --radius-lg:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; border:0; background:transparent; cursor:pointer; color:inherit}
::selection{background:var(--terracotta); color:#fff}

/* Papier-Körnung */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  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='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.55; mix-blend-mode:multiply;
}

/* Typografie */
.display{font-family:var(--f-display); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 50; letter-spacing:-.02em; line-height:1.02}
.eyebrow{font-family:var(--f-mono); text-transform:uppercase; font-size:11px;
  letter-spacing:.22em; color:var(--ink-muted); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:24px; height:1px; background:currentColor; display:inline-block}
.lead{font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-soft); max-width:62ch}

.moin{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:24px; line-height:1; letter-spacing:-.01em;
  color:var(--terracotta); text-transform:none;
  margin-right:4px; padding-right:14px;
  border-right:1px solid var(--paper-edge); position:relative; top:-1px;
}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); position:relative; z-index:2}

/* Topbar */
.topbar{background:var(--ink); color:var(--paper-warm);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; position:relative; z-index:30}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center;
  padding-block:10px; flex-wrap:wrap; gap:6px 20px}
.topbar a{color:inherit; opacity:.85; transition:opacity .25s var(--ease)}
.topbar a:hover{opacity:1}
.topbar .dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--terracotta); margin-inline:10px 8px; box-shadow:0 0 0 3px rgba(194,103,74,.18); vertical-align:middle}

/* Navigation */
.nav{position:sticky; top:0; z-index:20;
  background:rgba(244,239,227,.78);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{border-bottom-color:var(--paper-edge); background:rgba(244,239,227,.92)}
.nav .wrap{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; padding-block:18px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:42px; height:42px; border-radius:50%; overflow:hidden;
  border:1px solid var(--paper-edge); background:#4FA8C7; flex-shrink:0}
.brand-mark img{width:100%; height:100%; object-fit:cover}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text b{font-family:var(--f-display); font-weight:500; font-size:18px; letter-spacing:-.01em}
.brand-text small{font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-muted); margin-top:3px}

.nav-links{display:flex; gap:6px; align-items:center; justify-self:center}
.nav-links a{position:relative; padding:10px 14px; font-size:14.5px; font-weight:500;
  color:var(--ink-soft); transition:color .25s var(--ease)}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink); font-weight:600}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap; cursor:pointer; border:0;
}
.btn-primary{background:var(--ink); color:var(--paper-warm)}
.btn-primary:hover{background:var(--ocean-deep); transform:translateY(-1px); box-shadow:0 10px 24px -10px var(--ocean-deep)}
.btn-ghost{border:1px solid var(--ink); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--paper-warm)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-back .arrow{transition:transform .25s var(--ease)}
.btn-back:hover .arrow{transform:translateX(-3px)}

.menu-toggle{display:none}
@media (max-width: 1100px){
  .nav .wrap{grid-template-columns:auto auto}
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
    background:var(--paper-warm); border-left:1px solid var(--paper-edge);
    flex-direction:column; align-items:stretch; gap:0;
    padding:90px 28px 40px; transform:translateX(110%); transition:transform .4s var(--ease);
    box-shadow: -20px 0 40px rgba(20,50,62,.08); z-index:25; justify-self:end;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:14px 0; font-size:18px; border-bottom:1px solid var(--paper-edge)}
  .nav-links a::after{display:none}
  .nav-links .btn{margin-top:18px; justify-content:center}
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; border:1px solid var(--paper-edge);
    background:var(--paper-warm); z-index:26}
  .nav .btn-desktop{display:none}
}

/* Page-Head */
.page-head{padding:clamp(40px,7vw,80px) 0 clamp(24px,4vw,40px); text-align:center; position:relative; overflow:hidden}
.page-head .eyebrow{margin-bottom:20px; justify-content:center}
.page-head .eyebrow::after{content:""; width:24px; height:1px; background:currentColor}
.page-head h1{
  font-family:var(--f-display); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(38px, 6vw, 78px); line-height:1.02; letter-spacing:-.025em; margin:0;
}
.page-head h1 em{font-style:italic; font-weight:300; color:var(--ocean);
  font-variation-settings:"opsz" 144, "SOFT" 100}
.page-head .sub{
  max-width:54ch; margin:22px auto 0; color:var(--ink-soft); font-size:17px; line-height:1.6;
}

/* Sektionen */
.section{padding:clamp(56px, 8vw, 110px) 0; position:relative}
.section-head{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap:48px 80px;
  align-items:end; margin-bottom:54px}
.section-head h2{font-family:var(--f-display); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 40;
  font-size:clamp(34px,4.6vw,58px); line-height:1.02; letter-spacing:-.02em; margin:0}
.section-head h2 em{font-style:italic; color:var(--ocean); font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 100}
.section-head p{margin:0; color:var(--ink-soft); font-size:17px; max-width:55ch}
@media (max-width: 800px){.section-head{grid-template-columns:1fr; gap:18px; margin-bottom:36px}}

/* Footer */
footer{background:var(--ocean-deep); color:var(--paper-warm); padding:60px 0 30px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start}
footer h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,239,227,.55); margin:0 0 18px; font-weight:500}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
footer ul a{font-size:15px; color:rgba(244,239,227,.85); transition:color .25s var(--ease)}
footer ul a:hover{color:#fff}
footer .footer-brand{font-family:var(--f-display); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:28px; line-height:1.1; letter-spacing:-.01em; margin-bottom:14px}
footer .footer-brand em{font-style:italic; color:var(--tide); font-weight:300}
footer .footer-tagline{font-size:14px; color:rgba(244,239,227,.7); max-width:36ch; line-height:1.6}
footer .footer-platt{margin-top:14px; font-family:var(--f-display); font-style:italic;
  font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:18px; color:var(--tide); line-height:1.4}
.copyright{margin-top:54px; padding-top:24px; border-top:1px solid rgba(244,239,227,.12);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,227,.55)}
@media (max-width:760px){
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .footer-intro{grid-column:span 2}
}

/* Reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
.reveal[data-delay="5"]{transition-delay:.4s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* Marquee */
.marquee{background:var(--ink); color:var(--paper-warm); padding:22px 0; overflow:hidden;
  position:relative; border-block:1px solid var(--ocean-deep)}
.marquee-track{
  display:flex; gap:64px; white-space:nowrap;
  animation: scroll 36s linear infinite;
  font-family:var(--f-display); font-weight:300; font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(20px,2.6vw,32px); letter-spacing:-.01em;
}
.marquee-track span{display:inline-flex; align-items:center; gap:64px}
.marquee-track span::after{content:"✦"; color:var(--terracotta); font-style:normal; font-size:.6em}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

/* Möwen */
.hero-gulls{position:absolute; top:60px; left:0; width:100%; max-width:1400px;
  height:auto; opacity:.12; color:var(--ocean); pointer-events:none; z-index:1}
.hero-gulls path{animation: gull-float 12s ease-in-out infinite; transform-origin: center}
.hero-gulls path:nth-child(2){animation-delay:-2s}
.hero-gulls path:nth-child(3){animation-delay:-5s}
.hero-gulls path:nth-child(4){animation-delay:-8s}
@keyframes gull-float{0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-8px)}}
@media (prefers-reduced-motion: reduce){.hero-gulls path{animation:none}}

/* Cards (allg.) */
.contact-cards{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.contact-card{padding:34px 32px; border:1px solid rgba(244,239,227,.16); border-radius:var(--radius-lg);
  background: rgba(244,239,227,.04);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  display:block; color:inherit;
}
.contact-card:hover{transform:translateY(-3px); background:rgba(244,239,227,.08); border-color:rgba(244,239,227,.3)}
.contact-card .eyebrow{color:rgba(244,239,227,.55); margin-bottom:16px}
.contact-card .eyebrow::before{background:var(--terracotta)}
.contact-card b{display:block; font-family:var(--f-display); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-size:clamp(22px,2.4vw,30px); letter-spacing:-.015em; line-height:1.2;
  word-break:break-word;
}
.contact-card small{display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em;
  color:rgba(244,239,227,.55); margin-top:14px}
@media (max-width:700px){.contact-cards{grid-template-columns:1fr}}