:root{
  --himmel:#E8F0F4;
  --himmel-tief:#89c2df;
  --schiefer:#22333D;
  --see:#2C6480;
  --schnabel:#E0A020;
  --messing:#A9853F;
  --weiss:#FBFCFC;
  --sans:"Avenir Next","Segoe UI",system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;
  background:linear-gradient(180deg,var(--weiss) 0%,var(--himmel) 70%,var(--himmel-tief) 100%);
  color:var(--schiefer);font-family:var(--sans);font-size:18px;line-height:1.6;
}
:focus-visible{outline:3px solid var(--schnabel);outline-offset:4px}

/* ---------- Kopf ---------- */
header{display:flex;align-items:baseline;gap:18px;padding:34px 40px 14px;position:relative;z-index:2}
.marke{font-family:var(--serif);font-size:27px;letter-spacing:.1em;text-decoration:none;color:var(--schiefer)}
header .ort{font-size:14px;letter-spacing:.16em;color:var(--see)}
header .tel{margin-left:auto;text-decoration:none;color:var(--schiefer);font-weight:600;font-size:19px}
header .tel:hover{color:var(--see)}

/* ---------- Band: die abgerollte Flugbahn ---------- */
.band{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:14px 40px 16px;border-top:1px solid rgba(34,51,61,.16);border-bottom:1px solid rgba(34,51,61,.16);
  background:rgba(251,252,252,.55);z-index:2;
}
.band::before{
  /* reicht exakt vom Mittelpunkt des ersten bis zum Mittelpunkt des letzten Punkts (5 Stationen, flex:1) */
  content:"";position:absolute;left:51px;right:calc(20% + 5px);top:22px;height:10px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='10'><path d='M0,5 C28,2.2 55,7.8 82,5 C91,3.6 101,6.4 110,5' fill='none' stroke='rgba(34,51,61,.45)' stroke-width='2' stroke-dasharray='3 6' stroke-linecap='round'/></svg>") repeat-x;
  background-size:110px 10px;
}
.knoten{
  position:relative;flex:1;text-decoration:none;color:var(--schiefer);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:10px;
}
.punkt{
  width:22px;height:22px;border-radius:50%;background:var(--weiss);
  border:2.5px solid var(--schiefer);display:block;position:relative;z-index:1;transition:background .15s;
}
.knoten:hover .punkt{background:var(--schnabel)}
.knoten[aria-current="page"] .punkt{background:var(--schiefer)}
.knoten b{font-weight:600;font-size:17px;line-height:1.2}
.knoten small{display:block;font-size:13px;color:#5B6C77;font-weight:400;margin-top:2px}
.knoten[aria-current="page"] b{color:var(--see)}

/* ---------- Mobiles Menü: Hamburger + Schublade ---------- */
.hamburger{
  display:none;margin-left:auto;width:42px;height:38px;flex:none;
  align-items:center;justify-content:center;background:none;
  border:1.5px solid var(--schiefer);cursor:pointer;padding:0;
}
.hamburger span,.hamburger span::before,.hamburger span::after{
  content:"";display:block;width:20px;height:2px;background:var(--schiefer);position:relative;
}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}

.schublade-hintergrund{
  position:fixed;inset:0;background:rgba(34,51,61,.35);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:18;
}
.schublade-hintergrund[data-offen="true"]{opacity:1;pointer-events:auto}

.schublade{
  position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);
  background:linear-gradient(180deg,var(--weiss) 0%,var(--himmel) 55%,var(--himmel-tief) 100%);
  border-left:1px solid rgba(34,51,61,.25);box-shadow:-10px 0 26px rgba(34,51,61,.2);
  transform:translateX(100%);transition:transform .28s ease;
  z-index:19;padding:70px 26px 26px;overflow-y:auto;
}
.schublade[data-offen="true"]{transform:translateX(0)}

.schublade-schliessen{
  position:absolute;top:16px;right:16px;width:38px;height:38px;
  border:1.5px solid var(--schiefer);background:none;color:var(--schiefer);
  font-size:22px;line-height:1;cursor:pointer;
}

.schublade-liste{position:relative;display:flex;flex-direction:column;gap:30px}
.schublade-liste::before{
  content:"";position:absolute;left:10px;top:6px;bottom:6px;
  border-left:2px dashed rgba(34,51,61,.45);
}
.schublade-knoten{position:relative;display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:var(--schiefer)}
.schublade-knoten .punkt{width:22px;height:22px;border-radius:50%;background:var(--weiss);border:2.5px solid var(--schiefer);flex:none;position:relative;z-index:1}
.schublade-knoten[aria-current="page"] .punkt{background:var(--schiefer)}
.schublade-knoten b{font-weight:600;font-size:18px;display:block}
.schublade-knoten small{display:block;font-size:14px;color:#5B6C77;margin-top:2px}
.schublade-knoten[aria-current="page"] b{color:var(--see)}

body.schublade-offen{overflow:hidden}

/* ---------- Fuß ---------- */
footer{padding:14px 40px 20px;font-size:15px;color:#5B6C77;display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(34,51,61,.16)}
footer a{color:#5B6C77}
footer a:hover{color:var(--see)}
footer .rechts{margin-left:auto;display:flex;gap:22px}

/* ---------- Möwe ---------- */
.moewe{position:fixed;left:0;top:0;z-index:9;pointer-events:none;will-change:transform}
.moewe img{display:block;width:58px;height:auto}
.moewe .sitzend{display:none;width:42px}
.moewe[data-sitzt="true"] .fliegend{display:none}
.moewe[data-sitzt="true"] .sitzend{display:block}

@media (max-width:900px){
  header{padding:32px 22px 12px;flex-wrap:wrap;gap:8px 14px}
  header .tel{margin-left:0;width:100%}
  .hamburger{display:flex;position:relative;z-index:21;margin-left:auto}
  .band{display:none}
  footer{padding:14px 22px 20px}
  footer .rechts{margin-left:0}
}