/* Landing: define theme variables like sectioned, so containers/cards render consistently */
body.template-landing{
  /* Reset: remove browser default margin so 100vw == full content width */
  margin: 0;
  /* Prevent horizontal overflow from width:100vw on pages with scrollbars */
  overflow-x: hidden;
  /* alveos / VetterPlaces Farbwelt: tiefes Blauviolett, ruhiges Türkis als Hauptakzent */
  --bg:#050616;
  --text:#f5f7ff;
  --muted:#a9b0d0;
  --accent:#4fd1c5;      /* Primär-Akzent: Türkis (Trust, Fresh) */
  --accent2:#63b3ed;     /* Sekundär-Akzent: helles Blau für Gradients */
  --card:rgb(15 18 40 / 78%);
  --border:rgb(132 139 220 / 55%);
  --radius:18px;
  --shadow:0 18px 46px rgb(3 4 16 / 85%);
  --container:clamp(320px,92vw,1120px);
  --h1:clamp(2.2rem,1.4rem + 3vw,3.4rem);
  --h2:clamp(1.4rem,1rem + 1.8vw,2rem);
}

/* Ensure dark background and text override other bundles */
body.template-landing,
.site {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Bring landing containers in line with other pages */
.site .container {
  width: var(--container);
  margin: auto;
  padding: 0 16px;
}

.site .hero .wrap {
  width: var(--container);
  margin: auto;
  padding: 96px 16px 56px;
}

/* Circle menu container (original static) */
.menu-wrapper {
  --menu-center-nudge: 0px; /* no nudge: menu is a standalone full-width block, JS uses left:calc(50%+var(--menu-center-nudge)) */

  position: relative;
  width: 100vw;
  height: calc(100vh - 160px);
  /* Leichte Vignette um das Circle-Menü, ohne hartes Rechteck */
  background:
    radial-gradient(circle at 50% 40%, rgba(15,23,42,.45), rgba(5,6,22,0) 60%);
}

/* Landing hero spacing refinements */
.site .lead { max-width: 62ch; }

/* Cards spacing and chips look */
.site .section .container.grid { gap: 20px; }

.site .chip {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 6%);
}
.site .chips { margin-top: 12px; }

/* Card look in case sectioned.css order changes */
.site .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.site .card h3{font-size:var(--h2)}

#menu {
  position: relative;
  z-index: 10;
  /* ID-specificity (1,0,0) beats plugin .menu-wrapper rule (0,1,0) — guarantees centering */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Logo-Zentrum analog ready-4 IT, aber mit VP-Logo */
div#menu > div.logo-static {
  position:absolute;
  top:50%;
  left:50%;
  width:140px;
  height:140px;
  border-radius:50%;
  box-shadow:rgba(79, 209, 197, 0.6) 0 0 28px 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:15;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 30% 20%, rgba(99,179,237,.45), rgba(5,6,22,1));
  pointer-events:none;
}

div#menu > div.logo-static > img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

div#menu > div.logo-static .vp-wordmark {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:18px;
  font-family:Candara, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-style:italic;
  font-size:1.4rem;
  letter-spacing:.04em;
  color:#f9fafb;
  text-shadow:0 0 6px rgba(0,0,0,.85);
  pointer-events:none;
}

/* Legacy top-right flags (if any) — hide on landing; flags live in footer now */
.language-switcher {
  display: none !important;
}

/* (images rules suppressed along with container) */

.language-switcher img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgb(255 255 255 / 35%);
}

@media (width <= 520px) {
  .language-switcher {
    display: none !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;

  /* overflow: hidden; */
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* duplicate .logo-static removed */

/* Header now renders the language selector; do not override its position on landing */

/* .language-selector positioning removed to keep header consistent across pages */

/* Make room for footer by reducing menu wrapper height a bit */

/* zusätzliche Höhe für Footer bleibt implizit über min-height gesteuert */

/* Prose spacing: inherited from sectioned.css (loaded before this file) */

/* Provide gentle padding so content (headings / text) not clipped at mid widths */
@media (width <= 1320px) {
  .site .hero .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (width <= 1100px) {
  .site .hero .wrap {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (width <= 960px) {
  .site .hero .wrap {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Ensure SVG and labels stay below the logo without excessive specificity */
.menu-wrapper .menu-svg { z-index: 1; }
.menu-wrapper #labels-container { z-index: 2; }