/* Off-Canvas Menü (rechts) */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;           /* stabiler als 100vh auf Mobil */
    min-height: 100vh;        /* Fallback */
    width: 55vw;              /* Vorgabe: 60% der Breite */
    background: #fff;
    z-index: 400;             /* über Intro (250) & Header (200) */
    transform: translateX(100%); /* vollständig rechts raus */
    transition: transform 280ms ease;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2vw, 28px);
}

/* Inhalt im Panel */
.offcanvas-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.offcanvas-nav li + li { margin-top: clamp(10px, 1.4vh, 18px); }
.offcanvas-nav a {
    display: block;
    text-decoration: none;
    color: #003763;
    font-family: 'Henriette', serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.2vw + .6rem, 1.6rem);
    padding: .25rem 0;
}
.offcanvas-nav a:hover,
.offcanvas-nav a:focus { text-decoration: underline; }

/* Sichtbarer Zustand */
.offcanvas-menu.open { transform: translateX(0); }

/* Dunkles Overlay hinter dem Panel */
.menu-backdrop {
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 350;
}
.menu-backdrop.show { opacity: 1; }
[hidden] { display: none !important; }

/* Body-Scroll verhindern wenn offen */
body.no-scroll { overflow: hidden; }

/* Optional: Auf sehr schmalen Screens lieber Vollbreite nutzen */
@media (max-width: 768px) {
    .offcanvas-menu { width: 100vw; }
}

/* Bewegungen für Nutzer mit reduzierter Bewegung abschalten */
@media (prefers-reduced-motion: reduce) {
    .offcanvas-menu { transition: none; }
    .menu-backdrop { transition: none; }
}

/* === Shared spacing: identisch zum Logo-Rand === */
:root {
  /* wie dein bisheriges "margin-right: max(2%, 50px)" am Logo */
  --logo-gap: max(2%, 50px);
}

/* Logo rechts mit derselben Variable (überschreibt vorhandenen Wert elegant) */
.logo-container { margin-right: var(--logo-gap) !important; }

/* === Off-Canvas Nav: linker Innenabstand = Logo-Rand === */
.offcanvas-nav {
  padding-left: var(--logo-gap);
}

/* UL-Defaults neutralisieren, damit nichts "doppelt" addiert wird */
.offcanvas-nav ul {
  list-style: none;
  margin: 120px 0 0 20px;
  padding-left: 0;
}

/* Menülinks: größer, mit vw skalierend, ohne Unterstreichung */
.offcanvas-nav a {
  text-decoration: none;
  font-family: 'Henriette', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.3vw + 0.9rem, 2.1rem);
  line-height: 1.35;
  display: block;                     /* größerer Klickbereich */
  padding: 0.25rem 0;                 /* vertikaler Rhythmus */
}

/* Offcanvas-Links: nie unterstrichen – in allen Zuständen */
.offcanvas-nav a,
.offcanvas-nav a:link,
.offcanvas-nav a:visited,
.offcanvas-nav a:hover,
.offcanvas-nav a:active,
.offcanvas-nav a:focus,
.offcanvas-nav a:focus-visible {
    text-decoration: none !important;
}

/* Abstand zwischen Einträgen mit Viewport-Scaling */
.offcanvas-nav li + li {
  margin-top: clamp(1rem, 1vh, 1.4rem);
}

/* Sanft ausblenden, wenn das Menü offen ist */
.intro-text-container {
    transition: opacity .2s ease, visibility .2s ease;
}

.offcanvas-menu[aria-hidden="false"] ~ .intro-container .intro-text-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Platz unten schaffen, damit die Social-Icons nichts überdecken */
.offcanvas-nav {
  padding-bottom: clamp(56px, 6vh, 88px);
}

/* === gleiche rechte Kante wie der Hamburger === */
:root{
  /* entspricht deiner Header-Breite: 70% Desktop, 85% mobil */
  --container-w: 70vw;
  --hamburger-right: calc((100vw - var(--container-w)) / 2);
}

@media (max-width: 768px){
  :root{ --container-w: 85vw; }
}


/* Social-Icons: rechtsbündig auf Linie des Hamburgers, 100px vom unteren Rand */
.offcanvas-social{
  position: absolute;
  right: var(--hamburger-right);
  bottom: 30px;
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: center;
}