/* ============================================================
   VARIABLEN & BASIS
   ============================================================ */
:root{
  --sidebar-w: 280px;
  --text: #000;
  --divider: #000;

  /* Mobile */
  --burger-w: 32px;
  --burger-gap: 6px;
}

/* =============================================
   FIX: Volles Scrollen & saubere Höhe global
   ============================================= */
html, body {
  height: auto;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;  /* kein horizontales Scrollen */
  overflow-y: auto;    /* vertikales Scrollen erlauben */
}

@supports (-webkit-touch-callout: none) {
  html, body { min-height: 100dvh; }
}

body{
  background-image: url('img/bg-fixed.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Lora', serif;
}



/* ============================================================
   GRUNDLAYOUT (DESKTOP)
   ============================================================ */

.nav-toggle{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  appearance:none !important;
  background:transparent !important;
  pointer-events:none !important;
}

.hamburger{
  display:none !important;
}

.layout{
  display: flex;
  min-height: 100dvh;
}

@supports not (height: 100dvh){
  .layout{ min-height: 100vh; }
}

.content{
  position: relative;
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  padding: 32px 24px 64px;
  overflow: auto;
  background: transparent;
}

/* Sidebar */
.sidebar{
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 25px 40px 20px 5px;
  gap: 12px;
  background: transparent;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 3;
}

.logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 25px;
}

.logo img{
  width: 75px;
  height: auto;
  object-fit: contain;
  margin-right: 2px;
}

.nav{
  display: grid !important;
  gap: 10px;
  width: 100%;
  justify-items: end;
  margin-left: 20px;
}

.nav a, .cta{
  display: inline-block;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 16px);
  border: 1px solid var(--text);
  padding: 8px 10px;
}

.nav a:hover, .cta:hover,
.nav a.active, .cta.active{
  background: rgba(255,255,255,.52);
}

.sidebar .divider{
  height: 1px;
  background: var(--divider);
  width: 80%;
  margin: 8px 0 8px auto;
}

.cta{
  padding: 12px 14px;
  line-height: 1.4;
  text-align: right;
  width: max-content;
}

.cta .line{ display: block; }
.cta strong{ font-weight: 700; }
.cta em{ font-style: italic; }

/* ============================================================
   HINTERGRÜNDE & SEITEN
   ============================================================ */

/* Kontakt */
body.page-kontakt{
  background-image: url('img/bg-kontakt.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Krone */
html:has(body.page-krone){ overflow:auto; }
body.page-krone{
  overflow:auto;
  background:none;
  --img-ratio: 1.52;
  --crop-factor: 1.10;
  --x-bias: 0%;
  --bg-h: calc(var(--img-ratio) * var(--crop-factor) * 100vw);
}
.page-krone .layout{
  position: relative;
  min-height: max(100vh, var(--bg-h));
}
.page-krone .layout::before{
  content:"";
  position: absolute;
  top:0; left:0;
  width:100%;
  height: var(--bg-h);
  background: url('img/bg-krone.png') no-repeat;
  background-size: cover;
  background-position: calc(50% + var(--x-bias)) center;
  z-index: 0;
}
.page-krone .sidebar, .page-krone .content{ position: relative; z-index: 1; }

/* Formate */
html:has(body.page-formate){ overflow:auto; }
body.page-formate{
  overflow:auto;
  background:none;
  --img-ratio: 1.52;
  --crop-factor: 1.10;
  --x-bias: 0%;
  --bg-h: calc(var(--img-ratio) * var(--crop-factor) * 100vw);
}
.page-formate .layout{
  position: relative;
  min-height: max(100vh, var(--bg-h));
}
.page-formate .layout::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height: var(--bg-h);
  background: url('img/bg-formate.png') no-repeat;
  background-size: cover;
  background-position: calc(50% + var(--x-bias)) center;
  z-index: 0;
}
.page-formate .sidebar, .page-formate .content{ position: relative; z-index: 1; }

/* Impressum */
html:has(body.page-impressum-datenschutz){ overflow:auto; }
body.page-impressum-datenschutz{
  overflow:auto;
  background:none;
  --img-ratio: 1.7701;
  --crop-factor: 1.10;
  --x-bias: 0%;
  --bg-h: calc(var(--img-ratio) * var(--crop-factor) * 100vw);
}
.page-impressum-datenschutz .layout{
  position:relative;
  min-height:max(100vh, var(--bg-h));
}
.page-impressum-datenschutz .layout::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height: var(--bg-h);
  background: url('img/bg-impressum-datenschutz.png') no-repeat;
  background-size: cover;
  background-position: calc(50% + var(--x-bias)) center;
  z-index: 0;
}

/* Leserbrief */
html:has(body.page-leserbrief){ overflow:auto; }
body.page-leserbrief{
  overflow:auto;
  background:none;
  --img-ratio: 1.52;
  --crop-factor: 1.10;
  --x-bias: 0%;
  --bg-h: calc(var(--img-ratio) * var(--crop-factor) * 100vw);
}
.page-leserbrief .layout{
  position:relative;
  min-height:max(100vh, var(--bg-h));
}
.page-leserbrief .layout::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height: var(--bg-h);
  background: url('img/bg-leserbrief.png') no-repeat;
  background-size: cover;
  background-position: calc(50% + var(--x-bias)) center;
  z-index: 0;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px){
  :root{ --sidebar-w: 240px; }
  .content{ margin-left: var(--sidebar-w); }
  .sidebar{ width: var(--sidebar-w); padding: 16px 12px; }
  .logo img{ width: 110px; }
  .nav{ gap: 8px; }
  .nav a, .cta{ font-size: clamp(13px, 1.5vw, 17px); }
}

/* ============================================================
   MOBILE (<=767px): Logo & Burger fix, Pulldown = eine weiße Fläche
   ============================================================ */
@media screen and (max-width: 767px){

  :root{ --sidebar-w: 100%; }

  .sidebar{
    position: fixed !important;
    top: 0; left: 0;
    width: 100%;
    z-index: 50 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 0 0 0 !important;
  }

  .logo{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:0 0 6px 0 !important;
  }

  .logo img{
    width:70px !important;
    height:auto !important;
  }

  .hamburger{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:36px !important;
    height:26px !important;
    cursor:pointer !important;
    margin:0 0 10px 0 !important;
  }

  .hamburger span{
    display:block !important;
    width:100% !important;
    height:2px !important;
    background:#000 !important;
    border-radius:2px !important;
  }

  .nav-toggle:checked + .hamburger span:nth-child(1){
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nav-toggle:checked + .hamburger span:nth-child(2){
    opacity: 0 !important;
  }
  .nav-toggle:checked + .hamburger span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .nav, .divider, .cta{
    display: none !important;
  }

  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #nav-toggle:checked ~ .nav{
    margin:0 !important;
    padding:0 !important;
  }

  #nav-toggle:checked ~ .nav a{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:12px 0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#000 !important;
    font-weight:400 !important;
    transition:background-color .2s ease, font-weight .2s ease;
  }

  #nav-toggle:checked ~ .nav a:hover{
    background:rgba(0,0,0,.05) !important;
    font-weight:600 !important;
  }

  #nav-toggle:checked ~ .nav a.active,
  #nav-toggle:checked ~ .nav a[aria-current="page"]{
    background:rgba(0,0,0,.08) !important;
    font-weight:700 !important;
  }

  #nav-toggle:checked ~ .divider{
    height:1px !important;
    background:#000 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  #nav-toggle:checked ~ .cta{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:12px 0 !important;
    margin:0 !important;
    border:0 !important;
    background:#fff !important;
    color:#000 !important;
    white-space:nowrap !important;
    font-weight:500 !important;
    transition:background-color .2s ease, font-weight .2s ease;
  }

  #nav-toggle:checked ~ .cta:hover{
    background:rgba(0,0,0,.05) !important;
    font-weight:600 !important;
  }

  body.page-kontakt #nav-toggle:checked ~ .cta{
    background:rgba(0,0,0,.08) !important;
    font-weight:700 !important;
  }

  .content{
    padding-top:140px !important;
    margin-left:0 !important;
    width:100% !important;
  }
}

/* ============================================================
   CTA-Markierung auf der Kontaktseite (DESKTOP)
   ============================================================ */
body.page-kontakt .sidebar .cta{
  background: rgba(255, 255, 255, 0.52);
  border-color: #000;
}

body.page-kontakt .sidebar .cta strong{
  font-weight: 700;
}

/* ============================================================
   MOBILE FIX – CTA als Teil der Nav-Links auf weißer Fläche
   ============================================================ */
@media screen and (max-width: 767px){

  /* sicherstellen, dass alles 100 % breit und weiß bleibt */
  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Links und CTA identisch formatieren */
  #nav-toggle:checked ~ .nav a,
  #nav-toggle:checked ~ .cta{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font-weight: 400 !important;
    transition: background-color 0.2s ease, font-weight 0.2s ease;
  }

  /* Hover / aktive Markierung */
  #nav-toggle:checked ~ .nav a:hover,
  #nav-toggle:checked ~ .cta:hover{
    background: rgba(0, 0, 0, 0.05) !important;
    font-weight: 600 !important;
  }

  #nav-toggle:checked ~ .nav a.active,
  #nav-toggle:checked ~ .nav a[aria-current="page"],
  #nav-toggle:checked ~ .cta.active,
  #nav-toggle:checked ~ .cta[aria-current="page"],
  body.page-kontakt #nav-toggle:checked ~ .cta{
    background: rgba(0, 0, 0, 0.08) !important;
    font-weight: 700 !important;
  }

  /* Eine saubere Trennlinie zwischen letzter Nav und CTA */
  #nav-toggle:checked ~ .divider{
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* Pulldown als EIN Panel: weiß, lückenlos */
@media (max-width: 767px){
  .pulldown{ display:none; }
  #nav-toggle:checked ~ .pulldown{
    display:block !important;
    width:100% !important;
    background:#fff !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    box-shadow:none !important;
  }

  /* Links im Panel */
  .pulldown .nav{ margin:0 !important; padding:0 !important; }
  .pulldown .nav a{
    display:block !important; width:100% !important; text-align:center !important;
    padding:12px 0 !important; margin:0 !important; border:0 !important;
    background:transparent !important; color:#000 !important; font-weight:400 !important;
    transition:background-color .2s ease, font-weight .2s ease;
  }
  .pulldown .nav a:hover{ background:rgba(0,0,0,.05) !important; font-weight:600 !important; }
  .pulldown .nav a.active,
  .pulldown .nav a[aria-current="page"]{ background:rgba(0,0,0,.08) !important; font-weight:700 !important; }

  /* genau 1 Trennlinie im Panel */
  .pulldown .divider{ height:1px !important; background:#000 !important; margin:0 !important; }

  /* CTA wie ein Link im Panel (einzeilig) */
  .pulldown .cta{
    display:block !important; width:100% !important; text-align:center !important;
    padding:12px 0 !important; margin:0 !important; border:0 !important;
    background:transparent !important; color:#000 !important; white-space:nowrap !important;
    font-weight:500 !important; transition:background-color .2s ease, font-weight .2s ease;
  }
  .pulldown .cta:hover{ background:rgba(0,0,0,.05) !important; font-weight:600 !important; }

  /* Kontaktseite aktiv = wie aktiver Link */
  body.page-kontakt .pulldown .cta{ background:rgba(0,0,0,.08) !important; font-weight:700 !important; }
}


/* ============================================================
   Mobile: EIN durchgehender Weiß-Hintergrund per Overlay
   (keine HTML-Änderung nötig)
   ============================================================ */
@media (max-width: 767px){

  /* Weißes Overlay unter dem Pulldown, nur wenn geöffnet */
  .sidebar::after{ content: none; }
  .sidebar:has(#nav-toggle:checked)::after{
    content:"";
    position: fixed; /* über dem Bild, unter den Menüpunkten */
    inset: 0;        /* volle Viewport-Fläche */
    background: #fff;
    z-index: 49;     /* unter nav/divider/cta, über dem Seiteninhalt */
  }

  /* Menüpunkte vor das Overlay holen und bündig darstellen */
  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    position: relative;
    z-index: 50;       /* über dem weißen Overlay */
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important; /* das Weiß kommt vom Overlay */
  }

  /* Links und CTA identisch wie Menüeinträge */
  #nav-toggle:checked ~ .nav a,
  #nav-toggle:checked ~ .cta{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font-weight: 400 !important;
    transition: background-color .2s ease, font-weight .2s ease;
    white-space: nowrap; /* „Nehmen Sie Kontakt auf“ einzeilig */
  }

  /* Hover / active identisch */
  #nav-toggle:checked ~ .nav a:hover,
  #nav-toggle:checked ~ .cta:hover{
    background: rgba(0,0,0,.05) !important;
    font-weight: 600 !important;
  }
  #nav-toggle:checked ~ .nav a.active,
  #nav-toggle:checked ~ .nav a[aria-current="page"],
  #nav-toggle:checked ~ .cta.active,
  #nav-toggle:checked ~ .cta[aria-current="page"],
  body.page-kontakt #nav-toggle:checked ~ .cta{
    background: rgba(0,0,0,.08) !important;
    font-weight: 700 !important;
  }

  /* genau 1 Trennlinie */
  #nav-toggle:checked ~ .divider{
    height: 1px !important;
    background: #000 !important;
  }
}


/* ============================================================
   Mobile: Weißes Overlay – leicht transparent & kleiner
   ============================================================ */
@media (max-width: 767px){

  /* Halbtransparentes Overlay, etwas schmaler */
  .sidebar:has(#nav-toggle:checked)::after{
    content:"";
    position: fixed;
    top: 0;
    left: 5%;              /* etwas Rand links */
    right: 5%;             /* etwas Rand rechts */
    bottom: 0;
    background: rgba(255,255,255,0.92); /* leicht transparent */
    border-radius: 12px;   /* sanfte Rundung */
    z-index: 49;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }

  /* Menüpunkte bleiben wie gehabt */
  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    position: relative;
    z-index: 50;
    width: 100% !important;
    background: transparent !important;
  }

  #nav-toggle:checked ~ .nav a,
  #nav-toggle:checked ~ .cta{
    text-align: center !important;
    display: block !important;
    padding: 12px 0 !important;
    color: #000 !important;
    background: transparent !important;
  }

  #nav-toggle:checked ~ .divider{
    height: 1px !important;
    background: #000 !important;
  }
}


/* ============================================================
   MOBILE: dezentes, verkürztes Overlay + angepasste Markierungen
   ============================================================ */
@media (max-width: 767px){

  /* halbtransparentes, etwas kleineres Overlay */
  .sidebar:has(#nav-toggle:checked)::after{
    content:"";
    position: fixed;
    top: 5%;                /* oben etwas Abstand */
    left: 8%;
    right: 8%;
    bottom: 5%;             /* unten Abstand */
    background: rgba(255,255,255,0.92);
    border-radius: 14px;
    z-index: 49;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }

  /* Inhalte im Overlay */
  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    position: relative;
    z-index: 50;
    width: 84%;              /* bündig mit Overlay */
    margin: 0 auto;          /* zentriert */
    background: transparent !important;
  }

  /* Links + CTA identisch formatiert */
  #nav-toggle:checked ~ .nav a,
  #nav-toggle:checked ~ .cta{
    display:block !important;
    text-align:center !important;
    padding:12px 0 !important;
    color:#000 !important;
    background:transparent !important;
    font-weight:400 !important;
    transition:background-color .2s ease, font-weight .2s ease;
    border-radius:8px; /* Markierung folgt Form der weißen Fläche */
  }

  #nav-toggle:checked ~ .nav a:hover,
  #nav-toggle:checked ~ .cta:hover{
    background:rgba(0,0,0,.05) !important;
    font-weight:600 !important;
  }

  #nav-toggle:checked ~ .nav a.active,
  #nav-toggle:checked ~ .nav a[aria-current="page"],
  #nav-toggle:checked ~ .cta.active,
  #nav-toggle:checked ~ .cta[aria-current="page"],
  body.page-kontakt #nav-toggle:checked ~ .cta{
    background:rgba(0,0,0,.08) !important;
    font-weight:700 !important;
  }

  /* kurzer Trennstrich, zentriert */
  #nav-toggle:checked ~ .divider{
    height:1px !important;
    width:80% !important;   /* Länge ≈ längster Link */
    max-width:230px !important;
    background:#000 !important;
    margin:8px auto !important;
  }
}

/* ===== FIX: Sidebar auf den Bild-Seiten wieder fix links (Desktop/Tablet) ===== */
@media (min-width: 768px){
  .page-formate .sidebar,
  .page-krone .sidebar,
  .page-impressum-datenschutz .sidebar,
  .page-leserbrief .sidebar{
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    z-index: 3;
  }

  .page-formate .content,
  .page-krone .content,
  .page-impressum-datenschutz .content,
  .page-leserbrief .content{
    margin-left: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
  }
}

/* Optional: falls „bg-stage“ mal drüber liegt, sicher unter die Sidebar legen */
.page-formate .bg-stage,
.page-krone .bg-stage{ position: relative; z-index: 0; }


/* ============================================================
   Hintergrundbilder für Desktop und Mobile
   ============================================================ */

/* Desktop-Version */
body.page-home {
  background-image: url("img/bg-fixed.png"); /* dein aktuelles Bild */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Mobile-Version */
@media (max-width: 1024px) {
  body.page-home {
    background-image: url("img/bg-home-mobile.png");
    background-size: cover;
    background-position: center top;
    background-attachment: scroll; /* kein Parallax auf Mobile */
  }
}





/* ============================================================
   FIX: Impressum/Datenschutz – Mobilansicht sichtbar + scrollbar
   ============================================================ */

body.page-impressum-datenschutz,
.page-impressum-datenschutz .layout,
.page-impressum-datenschutz .content {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

.page-impressum-datenschutz .layout {
  display: block !important;
  position: relative !important;
}

.page-impressum-datenschutz .content {
  padding-top: 6rem !important;
  padding-bottom: 4rem !important;
}

/* Safari iOS-Support */
@supports (-webkit-touch-callout: none) {
  body.page-impressum-datenschutz,
  .page-impressum-datenschutz .layout,
  .page-impressum-datenschutz .content {
    min-height: 100dvh !important;
  }
}


/* ============================================================
   MOBIL-HEADER (Override): Logo links, Burger rechts
   ============================================================ */
@media (max-width: 767px){
  :root{
    --mobile-header-h: 72px;   /* Höhe der fixen Kopfzeile */
    --mobile-pad-x: 14px;      /* seitlicher Innenabstand */
  }

  /* Sidebar als fixe Kopfzeile */
  .sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobile-header-h) !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
    z-index: 60 !important;
  }

  /* Logo links, etwas kleiner & leicht nach unten */
  .logo{
    position: absolute !important;
    top: 10px !important; /* leicht nach unten geschoben */
    left: var(--mobile-pad-x) !important;
    height: calc(var(--mobile-header-h) - 10px) !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .logo img{
    width: 60px !important;   /* kleineres Logo */
    height: auto !important;
  }

  /* Burger-Menü rechts */
  .hamburger{
    position: absolute !important;
    top: calc((var(--mobile-header-h) - 26px)/2) !important; /* vertikal mittig */
    right: var(--mobile-pad-x) !important;
    width: 36px !important;
    height: 26px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    cursor: pointer !important;
    z-index: 61 !important;
  }

  .hamburger span{
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #000 !important;  /* schwarze Linien */
    border-radius: 2px !important;
  }

  /* Content unter den Header schieben */
  .content{
    margin-left: 0 !important;
    width: 100% !important;
    padding-top: calc(var(--mobile-header-h) + 60px) !important;
  }

  /* Geöffnetes Panel unter dem Header anzeigen */
  #nav-toggle:checked ~ .nav,
  #nav-toggle:checked ~ .divider,
  #nav-toggle:checked ~ .cta{
    position: relative;
    z-index: 59 !important;
    margin-top: var(--mobile-header-h) !important;
  }

  /* Weißes Overlay (falls aktiv) korrekt unter Header positionieren */
  .sidebar:has(#nav-toggle:checked)::after{
    top: var(--mobile-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
  }

  /* Unsichtbare Checkbox bleibt */
  .nav-toggle{
    position: absolute !important;
    top: 0; left: 0;
    width: 40px !important;
    height: var(--mobile-header-h) !important;
    pointer-events: none !important;
  }
}

/* === PATCH: Krone exakt wie Formate (nur anderes Bild) === */
@media (min-width: 1025px){
  /* Gleiches Bühnen-Setup wie bei .page-formate */
  .page-krone .layout{
    position: relative;
    min-height: max(100vh, var(--bg-h)); /* wie Formate */
    display: block;                      /* kein Grid-Centering */
    overflow: visible;
    isolation: auto;
  }

  .page-krone .layout::before{
    content:"";
    position:absolute;
    top:0; left:0;
    width:100%;
    height: var(--bg-h);                 /* wie Formate */
    background-image: url('img/bg-krone.png'); /* nur das Bild ist anders */
    background-size: cover;
    background-position: calc(50% + var(--x-bias)) center;
    background-repeat: no-repeat;
    z-index: 0;                          /* wie Formate */
  }

  /* Keine weiße Box in der Mitte */
  .page-krone .content{
    max-width: none;
    padding: 32px 24px 64px;             /* wie dein Standard */
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
  }
}