:root {
  --brand-primary: #6ec1ff;
  --brand-secondary: #ffd166;
  --brand-dark: #040b16;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sky-horizon-rgb: 5,11,22;
  /* Daytime tint for hills/trees (driven by JS). */
  --horizon-tint-rgb: 128,168,96;
  --horizon-tint-alpha-back: 0;  /* 0..1 */
  --horizon-tint-alpha-front: 0; /* 0..1 */
}

body {
  font-family: var(--font-body);
  background-color: #030610;
  color: #f5f7ff;
}

body.sky-scroll-lock {
  overflow: hidden;
  touch-action: none;
}

body.sky-overlay-active {
  overflow: hidden;
}

.sky-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(4, 8, 18, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

@supports (padding: max(1rem, env(safe-area-inset-top))) {
  .sky-overlay {
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
}

.sky-overlay__body {
  position: relative;
  width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: auto;
  padding: 0.25rem;
}

.sky-overlay__close {
  position: absolute;
  top: max(0.5rem, env(safe-area-inset-top));
  right: max(0.5rem, env(safe-area-inset-right));
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 0.4rem 0.65rem;
  background: rgba(5, 14, 28, 0.8);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

.sky-overlay__close:hover,
.sky-overlay__close:focus-visible {
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  outline: none;
}

.content-area,
.content-panel,
.content-panel p,
.content-panel h1,
.content-panel h2,
.content-panel h3,
.content-panel h4,
.content-panel a {
  color: #f5f7ff;
}

.content-panel {
  background: rgba(5, 9, 18, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.bb-article {
  background: rgba(5, 9, 18, 0.92);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  padding: 1.5rem;
  color: #f5f7ff;
}

.bb-article a {
  color: var(--brand-secondary);
}

.bb-article a:hover,
.bb-article a:focus {
  color: #fff;
}

.site-header {
  background: linear-gradient(90deg, rgba(4,11,22,0.95), rgba(12,32,51,0.95)), url('/site-assets/image/night/sternverlauf.webp') center/cover;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .site-title {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.site-header nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f5f7ff;
}

.site-header nav a:hover,
.site-header nav a:focus {
  color: var(--brand-secondary);
}

.hero {
  background: linear-gradient(180deg, rgba(6,13,27,0.9), rgba(5,10,18,0.95)), url('/site-assets/image/night/hintergrundwald.webp') center/cover;
  color: #e9f1ff;
}

.hero .btn {
  background: linear-gradient(90deg, #6ec1ff, #8ef0ff);
  color: #021021;
  border: none;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.home-card {
  background: rgba(6, 12, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.home-card h3 {
  margin-top: 0;
  color: var(--brand-secondary);
}

.home-card .btn {
  display: inline-flex;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}

.sky-wrapper {
  position: relative;
  margin-top: 1.5rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #050b16;
  padding-bottom: 72px;
}

.sky-stage {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.sky-wrapper:fullscreen,
.sky-wrapper.sky-wrapper--fullscreen {
  border-radius: 0;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.sky-wrapper.sky-wrapper--fullscreen:not(:fullscreen) {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1100;
}

@supports (height: 100dvh) {
  .sky-wrapper.sky-wrapper--fullscreen:not(:fullscreen) {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.sky-wrapper.sky-wrapper--overlay {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: min(100dvh, 680px);
  max-width: none;
  border-radius: 22px;
  overflow: hidden;
}

@supports not (height: 100dvh) {
  .sky-wrapper.sky-wrapper--overlay {
    min-height: 90vh;
  }
}

.sky-wrapper:fullscreen .sky-toolbar,
.sky-wrapper.sky-wrapper--fullscreen .sky-toolbar {
  top: 1.5rem;
}

.sky-stage canvas {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}

.sky-wrapper:fullscreen .sky-stage,
.sky-wrapper.sky-wrapper--fullscreen .sky-stage {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Bottom safety overlay in fullscreen to mask any residual horizon glow
   behind the compass area. Sits above horizon (z=2) and below compass (z=4). */
.sky-wrapper:fullscreen::after,
.sky-wrapper.sky-wrapper--fullscreen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: #0a111d;
  z-index: 3;
  pointer-events: none;
}

.sky-horizon {
  position: absolute;
  bottom: var(--horizon-offset, 0);
  left: 0;
  right: 0;
  height: 150px;
  pointer-events: none;
  z-index: 2;
  --horizon-shift: 0px;
  --horizon-tile: 1600px;
  background: none;
}

.sky-horizon::before,
.sky-horizon::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-position: var(--horizon-shift) bottom;
  background-size: var(--horizon-tile) 160%;
  transform: translateZ(0);
}

.sky-horizon::before {
  background-image:
    linear-gradient(0deg, rgba(var(--horizon-tint-rgb, 128,168,96), var(--horizon-tint-alpha-back, 0))),
    url('/site-assets/image/night/horizon-back-noglow.svg');
  z-index: 1;
  filter: var(--horizon-back-filter, brightness(0.9) saturate(0.95));
  background-blend-mode: screen, normal;
  /* Clip the tint strictly to the hill shapes to avoid any full-width haze */
  -webkit-mask-image: url('/site-assets/image/night/horizon-back-noglow.svg');
  mask-image: url('/site-assets/image/night/horizon-back-noglow.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: var(--horizon-shift) bottom;
  mask-position: var(--horizon-shift) bottom;
  -webkit-mask-size: var(--horizon-tile) 160%;
  mask-size: var(--horizon-tile) 160%;
}

.sky-horizon::after {
  background-image:
    linear-gradient(0deg, rgba(var(--horizon-tint-rgb, 128,168,96), var(--horizon-tint-alpha-front, 0))),
    url('/site-assets/image/night/horizon-front.svg');
  z-index: 2;
  filter: var(--horizon-front-filter, drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.35)));
  background-blend-mode: screen, normal;
  /* Clip tint to front hills/trees only */
  -webkit-mask-image: url('/site-assets/image/night/horizon-front.svg');
  mask-image: url('/site-assets/image/night/horizon-front.svg');
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: var(--horizon-shift) bottom;
  mask-position: var(--horizon-shift) bottom;
  -webkit-mask-size: var(--horizon-tile) 160%;
  mask-size: var(--horizon-tile) 160%;
}

/* Experimental toggle: hide horizon layer completely when requested */
/* Horizon visibility modes:
   - data-horizon="off"        => hide entire horizon layer (debug)
   - data-horizon="landscape"  => show only hills/trees (no background fill)
*/
.sky-wrapper[data-horizon="off"] .sky-horizon { display: none !important; }
.sky-wrapper[data-horizon="landscape"] .sky-horizon { display: block; }
.sky-wrapper[data-horizon="landscape"] .sky-horizon { background: none !important; }

.sky-toolbar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.sky-toolbar button {
  background: rgba(5, 12, 24, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e9f1ff;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  cursor: pointer;
}

.sky-toolbar [data-sky-fullscreen].is-active {
  background: rgba(255, 209, 102, 0.2);
  border-color: rgba(255, 209, 102, 0.5);
  color: var(--brand-secondary);
}

.sky-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.sky-icon--exit {
  display: none;
}

.sky-fullscreen-toggle.is-active .sky-icon--enter {
  display: none;
}

.sky-fullscreen-toggle.is-active .sky-icon--exit {
  display: block;
}

.sky-fullscreen-toggle {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: none;
  border: none;
  color: #f5f7ff;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* Ensure high contrast in callout/text containers */
.content-panel .text-container,
.content-panel .text-container * {
  color: #000 !important;
}
/* Ensure heading icons/pseudo-markers inside callouts are legible */
.content-panel .text-container .bbcode-bgcolor h3::before,
.content-panel .text-container .bbcode-bgcolor h4::before,
.content-panel .text-container h3::before,
.content-panel .text-container h4::before {
  color: #000 !important;
  fill: #000 !important;
}
/* Ensure inline SVGs or icon elements in text containers are dark */
.content-panel .text-container svg {
  color: #000 !important;
  fill: #000 !important;
}
.content-panel .text-container .bb-icon,
.content-panel .text-container .bb-icon::before,
.content-panel .text-container .bb-icon__svg {
  color: #000 !important;
  fill: #000 !important;
}

.sky-fullscreen-toggle:hover,
.sky-fullscreen-toggle:focus-visible {
  color: var(--brand-secondary);
  outline: none;
}

.sky-fullscreen-toggle.is-active {
  color: var(--brand-secondary);
}

.sky-wrapper:fullscreen .sky-fullscreen-toggle,
.sky-wrapper.sky-wrapper--fullscreen .sky-fullscreen-toggle {
  top: 1rem;
  right: 1rem;
}

/* Lift compass slightly in fullscreen so box-shadow ring stays inside wrapper (overflow hidden). */
.sky-wrapper:fullscreen .sky-bearing,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing {
  bottom: 0.75rem;
}

.sky-bearing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.75rem;
  pointer-events: none;
  z-index: 4;
  isolation: isolate;
}

.sky-bearing__rail {
  position: relative;
  height: 26px;
  border-radius: 999px;
  background: rgba(5,12,24,0.68);
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  isolation: isolate; /* keep blending from underlying layers out */
  z-index: 1;
}

/* Local backplate behind the entire compass area in fullscreen */
.sky-wrapper:fullscreen .sky-bearing::before,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 100%;
  height: 44px;
  background: #0a111d;
  border-radius: 999px;
  z-index: 0;
}

/* Keep compass rail dark/neutral in fullscreen (avoid underlying landscape shine) */
.sky-wrapper:fullscreen .sky-bearing__rail,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing__rail {
  background: #0a111d; /* solid, no shine-through */
  border-color: #0e1a2a; /* neutral dark, non-yellow */
  /* outer dark ring to ensure no ambient background bleeds around the rail */
  box-shadow: 0 0 0 8px #0a111d;
  outline: none;
}

/* Solid backplate inside rail in fullscreen to avoid any shine-through */
.sky-wrapper:fullscreen .sky-bearing__rail::before,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing__rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0a111d;
  z-index: 0;
}

.sky-bearing__markers { z-index: 1; }

/* Ticks less yellow in fullscreen to avoid “gelbe Fläche” Eindruck */
.sky-wrapper:fullscreen .sky-bearing__marker::before,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing__marker::before {
  background: rgba(255,255,255,0.9);
}

.sky-bearing__markers {
  position: absolute;
  inset: 0;
}

.sky-bearing__marker {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
}

.sky-bearing__marker::before {
  content: '';
  display: block;
  width: 2px;
  height: 12px;
  margin: 0 auto 3px;
  background: var(--brand-secondary);
  border-radius: 999px;
}

.sky-clock {
  background: rgba(2, 6, 16, 0.8);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.sky-tooltip {
  position: absolute;
  background: rgba(2,6,16,0.9);
  color: #fff;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 0.85rem;
  z-index: 3;
}

.sky-note {
  margin: 0.3rem 1rem 1.2rem;
  font-size: 0.85rem;
  color: rgba(229, 235, 255, 0.7);
}

.site-footer {
  background: #020508;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.site-footer a {
  color: #d5dcf5;
}

.site-footer a:hover {
  color: var(--brand-secondary);
}

.footer-highlight__title,
.footer-highlight__subtitle {
  color: #f5f7ff;
}

.footer-highlight__legal {
  color: rgba(245,247,255,0.75);
}

.footer-highlight {
  background: rgba(6, 12, 22, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.08);
}

.table-weather {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  background: rgba(6, 10, 20, 0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}

.table-weather th,
.table-weather td {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.9rem 1rem;
  color: #f5f7ff;
}

.table-weather .status {
  font-weight: 600;
}

.table-weather th {
  text-align: left;
  background: rgba(12, 18, 34, 0.9);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table-weather tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.table-weather tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

.table-weather small {
  color: rgba(229,235,255,0.75);
}

.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.badge-icon[data-icon="clear"] { background: rgba(110,193,255,0.2); color: #8eddff; }
.badge-icon[data-icon="partly"] { background: rgba(255,209,102,0.2); color: #ffd166; }
.badge-icon[data-icon="mixed"] { background: rgba(255,161,102,0.2); color: #ffb37b; }
.badge-icon[data-icon="overcast"] { background: rgba(255,255,255,0.15); color: #d7d7d7; }
.badge-icon[data-icon="rain"] { background: rgba(110,165,255,0.2); color: #9fbfff; }

.smart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.smart-card {
  padding: 1.3rem;
  background: rgba(8, 12, 22, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.form-body,
.form-panel {
  background: rgba(5, 9, 18, 0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  padding: 1.5rem;
  color: #f5f7ff;
}

.form-body {
  display: grid;
  gap: 1rem;
}

.form-body label {
  font-weight: 600;
  color: #f5f7ff;
}

.form-body input,
.form-body textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(2, 6, 14, 0.85);
  color: #f5f7ff;
}

.form-body input:focus,
.form-body textarea:focus {
  outline: none;
  border-color: var(--brand-secondary);
  box-shadow: 0 0 0 2px rgba(255,209,102,0.25);
}

.form-check label {
  color: rgba(245,247,255,0.85);
}

.form-actions input[type="submit"] {
  background: linear-gradient(90deg, #6ec1ff, #8ef0ff);
  color: #021021;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 2rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 640px) {
  .sky-toolbar {
    flex-wrap: wrap;
    top: 0.5rem;
  }

  .sky-bearing {
    bottom: 0.45rem;
  }

  .sky-fullscreen-toggle {
    top: 0.6rem;
    right: 0.6rem;
  }
}
.sky-wrapper:fullscreen .sky-bearing,
.sky-wrapper:fullscreen .sky-bearing *,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing,
.sky-wrapper.sky-wrapper--fullscreen .sky-bearing * {
  mix-blend-mode: normal !important;
}

/* Navigation breakpoint override: keep desktop nav until 900px */
@media (max-width: 1024px) and (min-width: 901px) {
  body[data-theme="sterneschauen_noctis"] .site-header__inner {
    flex-wrap: nowrap;
  }

  body[data-theme="sterneschauen_noctis"] .menu-toggle,
  body[data-theme="sterneschauen_noctis"] .nav-subtoggle,
  body[data-theme="sterneschauen_noctis"] .site-nav__close,
  body[data-theme="sterneschauen_noctis"] .site-nav__mobile-header,
  body[data-theme="sterneschauen_noctis"] .site-nav__overlay {
    display: none !important;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    margin-left: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__list {
    flex-direction: row;
    width: auto;
    gap: 1rem;
    padding-right: 0;
    overflow: visible;
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item {
    width: auto;
    scroll-snap-align: unset;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item .nav-link {
    width: auto;
    padding: 0;
    font-size: inherit;
    letter-spacing: inherit;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav a.nav-link::after {
    display: block;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__parent-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
    align-items: center;
    width: auto;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children > .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin-top: .35rem;
    padding: 1rem;
    flex-direction: column;
    gap: .45rem;
    background: var(--nav-submenu-bg, var(--color-surface-alt, rgba(12,16,27,0.95)));
    color: var(--nav-submenu-color, #f5f7ff);
    border-radius: var(--radius-nav, .9rem);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .18);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    max-height: none;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children.is-open > .site-nav__submenu,
  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children:hover > .site-nav__submenu,
  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children:focus-within > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children .nav-link .site-nav__caret {
    display: inline-block;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__submenu .nav-link {
    font-size: .95rem;
    padding-bottom: 0;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__footer {
    width: auto;
    margin-top: 0;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__footer .language-switch {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-top: 0;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__footer .language-switch a {
    padding: .2rem .6rem;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__overlay {
    display: none;
  }

  body[data-theme="sterneschauen_noctis"].nav-open {
    overflow: auto;
  }

  body[data-theme="sterneschauen_noctis"] .content-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  body[data-theme="sterneschauen_noctis"] .content-block--hero {
    grid-column: span 2;
  }

  body[data-theme="sterneschauen_noctis"] .content-columns {
    flex-direction: row;
  }

  body[data-theme="sterneschauen_noctis"] .header-controls {
    width: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  body[data-theme="sterneschauen_noctis"] .site-nav {
    background: linear-gradient(160deg, rgba(4, 11, 22, 0.98), rgba(10, 24, 42, 0.95));
    color: #f5f7ff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 35px 80px rgba(2, 6, 18, 0.75);
    --color-text: #f5f7ff;
    --color-muted: rgba(255, 255, 255, 0.6);
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__mobile-header,
  body[data-theme="sterneschauen_noctis"] .site-nav__footer {
    color: inherit;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__mobile-kicker {
    color: rgba(255, 255, 255, 0.6);
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__mobile-home {
    color: #ffd166;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__list {
    color: inherit;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item .nav-link {
    color: rgba(247, 249, 255, 0.98);
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item .nav-link:hover,
  body[data-theme="sterneschauen_noctis"] .site-nav__item .nav-link.is-active,
  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children .nav-link[aria-expanded="true"] {
    color: #ffd166;
  }

  body[data-theme="sterneschauen_noctis"] .nav-subtoggle {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
  }

  body[data-theme="sterneschauen_noctis"] .nav-subtoggle[aria-expanded="true"] {
    background: rgba(255, 209, 102, 0.18);
    border-color: rgba(255, 209, 102, 0.6);
    color: #ffd166;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__item.has-children > .site-nav__submenu {
    background: rgba(5, 13, 27, 0.92);
    color: rgba(247, 249, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__submenu .nav-link {
    color: rgba(249, 251, 255, 0.98) !important;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__submenu .nav-link:hover,
  body[data-theme="sterneschauen_noctis"] .site-nav__submenu .nav-link.is-active {
    color: #ffd166 !important;
  }

  body[data-theme="sterneschauen_noctis"] .site-nav__overlay {
    background: rgba(2, 6, 12, 0.85);
  }
}