@layer landing {
  :root { --container-max: 1200px; }
  html { scroll-behavior: smooth; }

  .landing-header .container, main .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(12px, 3vw, 24px);
  }

  .landing-header{ position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.05) blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .landing-header .bar{ display:grid; grid-template-columns: auto 1fr; align-items:center; padding:12px 0; gap:16px; }
  .brand{ display:flex; align-items:center; gap:12px; color: var(--fg); text-decoration:none; }
  .brand .brand-icon{ width:28px; height:28px; display:block; }
  .wordmark{ display:grid; gap:2px; }
  .brand-title{ font-weight:800; letter-spacing:-0.01em; line-height:1; white-space: nowrap; }
  .brand-claim{ font-size:.9rem; color: var(--muted); white-space: nowrap; }

  .landing-nav{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    width:100%;
    gap: 24px;
  }
  .nav-links{ justify-self:center; display:flex; gap:24px; align-items:center; }
  .nav-actions{ justify-self:end; display:flex; gap:10px; align-items:center; }

  .nav-links a{ color: var(--fg); text-decoration:none; font-weight:650; }
  .nav-links a:hover, .nav-links a:focus{ text-decoration:none; }
  .nav-links a.active{ position:relative; }
  .nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--brand); border-radius:2px; }

  .pill{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--border);
         background: var(--panel); border-radius: var(--radius-lg); padding:2px; }
  .pill .segbtn{ display:inline-flex; align-items:center; justify-content:center;
                 padding:.38rem .75rem; border-radius: calc(var(--radius-lg) - 4px);
                 color: var(--fg); text-decoration:none; font-weight:700; min-width:2.1rem; }
  .pill .segbtn:hover{ background: color-mix(in srgb, var(--panel) 86%, var(--brand) 14%); }
  .pill .segbtn.active{ background: var(--brand); color:#fff; border-color: transparent; }

  .section { margin: clamp(28px, 5.2vw, 56px) 0; }
  .card.hero-card{ padding: clamp(18px, 4.5vw, 28px); }
  .mt-2{ margin-top: var(--space-2); }
  .mt-4{ margin-top: var(--space-4); }

  .trust-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
  .trust-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem;
               border-radius:999px; border:1px solid var(--border); background: var(--panel);
               color: var(--fg); font-weight:600; font-size:.9rem; }

  html[data-mode="university"]{
    --bg: #0e1726; --fg: #e8f1ff; --muted: #a8b3c6; --panel: #0e2230; --border: rgba(255,255,255,.12);
    --input-bg: #0e2230; --input-border: rgba(255,255,255,.18);
  }

  .section-card .cards-4{ display:grid; grid-template-columns:1fr; gap: clamp(12px, 2.5vw, 20px); }
  @media (min-width: 640px){ .section-card .cards-4{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px){ .section-card .cards-4{ grid-template-columns: repeat(4, 1fr); } }
  .section-card .card{ padding: clamp(12px, 2.2vw, 18px); }
  .section-card .card h3{ margin-bottom:.35rem; }

  .lab-preview{ margin:.75rem 0 0; border-radius:.75rem; overflow:hidden; background: var(--panel);
                border:1px solid var(--border); box-shadow: var(--shadow-1); position:relative; }
  .peek-carousel{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
  .peek-track{ display:flex; width:100%; height:100%; transition: transform .45s ease; }
  .peek-slide{ flex:0 0 100%; width:100%; height:100%; display:grid; place-items:center; position:relative; overflow:hidden; }
  .peek-slide video, .peek-slide img{ width:100%; height:100%; object-fit:cover; display:block;
    transform: scale(var(--zoom, 1)); transform-origin: var(--origin, 50% 50%); }
  .peek-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px;
               border-radius: var(--radius-lg); border:1px solid var(--border);
               background: color-mix(in srgb, var(--panel) 94%, #fff);
               display:grid; place-items:center; font-weight:700; color: var(--fg); cursor:pointer; }
  .peek-arrow:hover{ background: color-mix(in srgb, var(--panel) 80%, var(--brand) 20%); color:#fff; }
  .peek-prev{ left:10px; } .peek-next{ right:10px; }
  .peek-dots{ position:absolute; bottom:8px; left:50%; transform: translateX(-50%);
              display:flex; gap:8px; padding:.2rem .4rem; border-radius:999px;
              background: color-mix(in srgb, var(--panel) 84%, #fff); border:1px solid var(--border); }
  .peek-dot{ width:8px; height:8px; border-radius:999px; border:1px solid var(--border); background: transparent; }
  .peek-dot.active{ background: var(--brand); border-color: transparent; }

  .legal { font-size: var(--step--1); line-height:1.55; }
  .legal h3 { margin-top: var(--space-6); }
}

/* === Globe icon button (Landing Nav) =============================== */
.landing-nav .iconbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-left:8px;
  background: var(--surface-elev, #fff);
  border:1px solid var(--line-soft, rgba(0,0,0,.08));
  border-radius:999px; box-shadow:0 1px 0 rgba(0,0,0,.02);
  color: var(--text, #0f172a);
  text-decoration:none; transition:filter .2s, transform .06s;
}
.landing-nav .iconbtn:hover { filter:brightness(0.97); }
.landing-nav .iconbtn:active { transform:translateY(1px); }
.landing-nav .iconbtn:focus-visible {
  outline:2px solid var(--brand, #2EC27E); outline-offset:2px;
}
.landing-nav .iconbtn svg { width:20px; height:20px; display:block; }


/* ========== Responsive Header ========== */
@media (max-width: 1000px) {
  .landing-header .nav-links {
    display: none;
  }
}
/* Standard: nur die lange Version zeigen */
.wordmark-short {
  display: none;
}

/* Ab max. 680px: lange ausblenden, kurze einblenden */
@media (max-width: 680px) {
  .wordmark-long {
    display: none;
  }
  .wordmark-short {
    display: block;
  }
}

/* Wordmark-Logik */
.wordmark-short { display: none; }

@media (max-width: 680px) {
  .wordmark-long { display: none; }
  .wordmark-short { display: block; }
}

/* < 500 px: beide Wordmarks ausblenden (Icon bleibt allein) */
/* Streng „weniger als 500 px“: 499.98px statt 500px verwenden */
@media (max-width: 499.98px) {
  .wordmark-long,
  .wordmark-short {
    display: none;
  }
}

/* ===== Global min width lock for phones ===== */
:root { --min-phone-width: 360px; }

html, body {
  min-width: var(--min-phone-width);
}

/* Falls doch jemand mit 320px kommt: sauber scrollen statt Layoutbruch */
body { overflow-x: auto; }

/* 680px: kurze Wordmark einblenden */
@media (max-width: 680px) {
  .wordmark-long { display: none; }
  .wordmark-short { display: block; }
}

/* <500px: beide Wordmarks aus (Icon solo) */
@media (max-width: 499.98px) {
  .wordmark-long,
  .wordmark-short { display: none; }
}

/* === University mode: Globe-Button ohne weißen Kreis === */
html[data-mode="university"] .landing-header .iconbtn.globe{
  background: transparent;                         /* weißen Kreis entfernen */
  color: rgba(255,255,255,.88);                    /* Icon-Farbe (Stroke) */
  border: 1.5px solid rgba(255,255,255,.18);       /* dezenter Ring */
  box-shadow: none;
}

html[data-mode="university"] .landing-header .iconbtn.globe svg{
  stroke: currentColor;                            /* Icon folgt Textfarbe */
}

html[data-mode="university"] .landing-header .iconbtn.globe:hover{
  background: rgba(255,255,255,.06);               /* sanftes Hover */
  border-color: rgba(255,255,255,.28);
}

html[data-mode="university"] .landing-header .iconbtn.globe:active{
  background: rgba(255,255,255,.10);
}

html[data-mode="university"] .landing-header .iconbtn.globe:focus-visible{
  outline: 2px solid var(--focus-uni, #00C6FF);    /* Brand-Fokus, falls Token fehlt: #00C6FF */
  outline-offset: 2px;
}

:root{
  --ribbon-w: 168px;          /* width */
  --ribbon-h: 28px;           /* visual thickness */
  --ribbon-top: 8px;          /* offset from rail top */
  --ribbon-alpha: .92;
}

/* === Sticky Ribbon (Announcement) ======================= */
/* Header-Höhe definieren (für Platz unter der Kopfzeile) */
:root { --header-h: 60px; }                  /* Desktop-Headerhöhe */
@media (max-width: 680px){ :root { --header-h: 64px; } }  /* Mobile ggf. höher */

.ribbon {
  position: sticky;
  top: var(--header-h);          /* klebt direkt UNTER dem Header */
  z-index: 9;                    /* unter dem Header (der hat z-index 10), über dem Content */
  text-align: center;
  background: var(--brand);      /* School = Grün, Uni = Blau (aus Tokens) */
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* README/Code-Preview */
#preview pre {
  white-space: pre-wrap;      /* erzwingt Umbrüche */
  word-wrap: break-word;      /* lange Wörter umbrechen */
  overflow-wrap: anywhere;    /* moderne Variante für responsive Umbrüche */
  max-width: 100%;            /* Container nicht sprengen */
  box-sizing: border-box;
}
#preview code {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.4;
}