/* ==========================================================================
   Veredelung — Launcher-Design über style.css

   Liegt bewusst in einer eigenen Datei: Der Link in den Seiten lässt sich
   entfernen, dann steht wieder das ruhige Grunddesign.

   Haltung: fast schwarzer Grund mit Blauschimmer, jede App mit eigener
   Akzentfarbe (Clevero warm, Depot Check kühl), Vollbild-Cover wie in einer
   Spielebibliothek, ein Spotlight, das der Maus folgt, und ein Hintergrund,
   der die Farbe der App unter dem Zeiger annimmt.
   ========================================================================== */

@property --winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --glow   { syntax: "<color>"; inherits: true;  initial-value: rgba(70, 100, 255, .34); }

:root {
  --nacht:   #070912;
  --nacht-2: #0E1120;
  --glut:    #7C9BFF;
  --eis:     #AEB6CE;
  --glas:    rgba(255, 255, 255, .055);
  --glas-r:  rgba(255, 255, 255, .11);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius:  32px;
}

body { text-rendering: optimizeLegibility; }
::selection { background: var(--glut); color: #070912; }

/* ---------- Kopfzeile: schwebende Insel ---------- */

.masthead .wrap { min-height: 72px; }
.brand img { transition: opacity .3s var(--ease); }
.brand:hover img { opacity: .75; }

.masthead--auf-dunkel {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent !important; border: 0 !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
}
.masthead--auf-dunkel .wrap {
  pointer-events: auto;
  max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 16px auto 0; width: calc(100% - 2 * var(--gutter));
  min-height: 64px; padding: 8px 8px 8px 24px;
  background: rgba(10, 12, 24, .5);
  border: 1px solid var(--glas-r); border-radius: 999px;
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.7);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.masthead--auf-dunkel.is-scrolled .wrap { background: rgba(10, 12, 24, .82); border-color: rgba(255,255,255,.16); }

@media (min-width: 901px) {
  .masthead--auf-dunkel .mainnav { gap: 4px; }
  .masthead--auf-dunkel .mainnav a {
    padding: 10px 20px; border: 0; border-radius: 999px;
    font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.66);
    transition: background .3s var(--ease), color .3s var(--ease);
  }
  .masthead--auf-dunkel .mainnav a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .masthead--auf-dunkel .mainnav a[aria-current="page"] { background: #fff; color: #0B0D16; }
}
@media (max-width: 900px) {
  .masthead--auf-dunkel .wrap { position: relative; padding-right: 8px; }
  .masthead--auf-dunkel .navtoggle { border-radius: 999px; background: var(--glas); border-color: var(--glas-r); }
  .masthead--auf-dunkel .mainnav {
    top: calc(100% + 10px); left: 0; right: 0; border-radius: 28px;
    background: rgba(10, 12, 24, .92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glas-r); padding: 8px 24px 16px;
  }
}

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; letter-spacing: 0;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(5, 46, 124, .55); }

/* ---------- Bühne (Startseite) ---------- */

.katalogseite {
  --glow: rgba(70, 100, 255, .34);
  padding-block: 0;
  background: var(--nacht);
  transition: --glow .9s ease;
}
/* Filmkorn */
.katalogseite::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Spotlight, das der Maus folgt (site.js setzt --sx/--sy) */
.katalogseite::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px circle at var(--sx, 50%) var(--sy, 18%), rgba(255,255,255,.07), transparent 65%);
}

.hero-licht { position: absolute; left: 0; right: 0; top: 0; height: 100svh; min-height: 720px; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); }
/* Diese Farbe wechselt zur Akzentfarbe der App unter dem Zeiger */
.orb--1 { width: 58vw; height: 58vw; left: -14vw; top: -22vh; background: var(--glow); opacity: .9; animation: orb-1 24s ease-in-out infinite alternate; }
.orb--2 { width: 40vw; height: 40vw; right: -12vw; top: 6vh; background: #6B3CFF; opacity: .2; animation: orb-2 29s ease-in-out infinite alternate; }
.orb--3 { width: 30vw; height: 30vw; left: 42vw; top: 44vh; background: #FF8A3D; opacity: .08; animation: orb-3 33s ease-in-out infinite alternate; }
@keyframes orb-1 { to { transform: translate(12vw, 10vh) scale(1.12); } }
@keyframes orb-2 { to { transform: translate(-10vw, 14vh) scale(.9); } }
@keyframes orb-3 { to { transform: translate(-16vw, -8vh) scale(1.25); } }
/* Punktraster, zur Mitte hin sichtbar */
.hero-licht::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.3px);
  background-size: 30px 30px;
  mask-image: radial-gradient(60% 55% at 50% 32%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 32%, #000, transparent 78%);
  opacity: .5;
}

.sternbild { height: 100svh; min-height: 720px; opacity: .22; }

/* ---------- Hero ---------- */

.hero {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start;
  padding-block: 150px 8px;
}
.hero-inner { width: 100%; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 26px; padding: 8px 18px 8px 14px;
  border: 1px solid var(--glas-r); border-radius: 999px;
  background: var(--glas); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em; color: var(--eis);
}
.hero-kicker i {
  width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
  animation: kicker-puls 2.4s ease-out infinite;
}
@keyframes kicker-puls {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  100% { box-shadow: 0 0 0 12px rgba(74,222,128,0); }
}

.hero-titel {
  margin: 0 0 clamp(28px, 4vw, 48px); color: #fff; font-weight: 500;
  font-size: clamp(2.6rem, 7.2vw, 6.6rem);
  line-height: .96; letter-spacing: -.055em; text-wrap: balance;
}
.hero-titel .zeile { display: inline-block; overflow: hidden; padding: .04em 0 .12em; }
.hero-titel .zeile > span {
  display: inline-block; transform: translateY(108%);
  animation: zeile-hoch 1.25s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * .14s + .2s);
}
/* Verlauf aus den beiden App-Farben: kühles Blau zu warmem Pfirsich */
.hero-titel em {
  font-style: normal; font-weight: 300; padding-right: .06em;
  background: linear-gradient(95deg, #fff 0%, #A9B8FF 45%, #FFC08A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes zeile-hoch { to { transform: none; } }
@keyframes einblenden { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Suche (wie eine Befehlsleiste) ---------- */

.suche {
  display: flex; align-items: center; gap: 16px;
  width: 100%; height: 68px; padding: 0 20px 0 24px;
  border: 1px solid var(--glas-r); border-radius: 22px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--eis);
  opacity: 0; animation: einblenden 1.1s var(--ease-out) .55s forwards;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .4s var(--ease);
}
.suche:focus-within {
  border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 6px rgba(124,155,255,.16), 0 30px 80px -30px rgba(124,155,255,.55);
}
.suche svg { width: 22px; height: 22px; flex: none; }
.suche input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  color: #fff; font: inherit; font-size: 1.125rem; font-weight: 500;
}
.suche input::placeholder { color: rgba(174,182,206,.7); }
.suche input::-webkit-search-cancel-button { display: none; }
.suche kbd {
  flex: none; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px;
  border: 1px solid var(--glas-r); border-radius: 8px; background: var(--glas);
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--eis); letter-spacing: .04em;
  transition: opacity .2s var(--ease);
}
.suche:focus-within kbd { opacity: 0; }

/* ---------- Bibliothek ---------- */

.katalog-wrap { position: relative; z-index: 1; padding-block: clamp(36px, 4vw, 56px) clamp(80px, 10vw, 150px); }
.katalog-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; margin-bottom: clamp(20px, 3vw, 32px);
}
.katalog-kopf .katalog-label {
  margin: 0; color: rgba(255,255,255,.5); font-size: .8125rem; font-weight: 600;
  letter-spacing: .16em; line-height: 1.2; text-transform: uppercase;
}
.katalog-kopf .filter-pillen { margin: 0; }
.katalog-leer { margin: 40px 0 0; color: var(--eis); font-size: 1.125rem; text-align: center; }

.filter-pille {
  background: var(--glas); border-color: var(--glas-r);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.filter-pille:hover { border-color: rgba(255,255,255,.45); }
.filter-pille[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0B0D16; }
.filter-pille[aria-pressed="true"] .filter-pille-count { background: rgba(11,13,22,.12); }

/* ---------- Karten: Vollbild-Cover ---------- */

.katalog { display: grid; gap: clamp(16px, 2vw, 28px); counter-reset: kachel; }
@media (min-width: 720px) { .katalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kachel {
  --akzent: #7C9BFF; --kulisse: #1B2A66; --rx: 0deg; --ry: 0deg;
  counter-increment: kachel;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(500px, 46vw, 660px);
  border: 0; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: radial-gradient(110% 85% at 70% 0%, var(--kulisse), #0A0C16 78%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 40px 90px -50px rgba(0,0,0,.9);
  transform: perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .3s ease-out, box-shadow .5s var(--ease);
  animation: kachel-ein 1.1s var(--ease-out) backwards;
  will-change: transform;
}
.kachel:nth-child(1) { animation-delay: .7s; }
.kachel:nth-child(2) { animation-delay: .85s; }
@keyframes kachel-ein { from { opacity: 0; transform: perspective(1300px) translateY(50px) scale(.97); } }
.kachel:hover {
  transform: perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 50px 100px -40px rgba(0,0,0,.95),
              0 0 110px -30px color-mix(in srgb, var(--akzent) 55%, transparent);
}

/* Lichtschein der Maus, in der Akzentfarbe */
.kachel::before {
  z-index: 2;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--akzent) 26%, transparent), transparent 70%);
}
/* Kreisender Lichtrand beim Hover */
.kachel::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--winkel), transparent 0 55%, var(--akzent) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease);
}
.kachel:hover::after { opacity: 1; animation: kreisen 3.2s linear infinite; }
@keyframes kreisen { to { --winkel: 360deg; } }

.kachel-bildlink { position: absolute; inset: 0; z-index: 1; }
.kachel .kachel-bild { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: none; }
.kachel .kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.4s var(--ease-out); }
.kachel:hover .kachel-bild img { transform: scale(1.07); }
.kachel .kachel-bild::after,
.kachel:hover .kachel-bild::after {
  z-index: 1; transition: none;
  background: linear-gradient(to top, rgba(7,9,18,.97) 0%, rgba(7,9,18,.78) 30%, rgba(7,9,18,0) 64%);
}

/* Nummer (links) und Status (rechts) als Glaschips */
.kachel-bildlink::before {
  content: "0" counter(kachel);
  position: absolute; top: 22px; left: 22px; z-index: 3;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(7,9,18,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff; font-size: .75rem; font-weight: 600; letter-spacing: .14em;
}
.kachel .kachel-status {
  top: 22px; left: auto; right: 22px; z-index: 3;
  padding: 7px 14px 7px 12px; color: #fff; font-size: .75rem;
  background: rgba(7,9,18,.5); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.kachel .kachel-status--live { color: #fff; }

/* Play-Knopf mittig im Cover */
.kachel-hover-symbol {
  top: 40%; left: 50%; right: auto; bottom: auto; z-index: 3;
  width: 88px; height: 88px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, -50%) scale(.7);
}
.kachel-hover-symbol svg { width: 30px; height: 30px; }
.kachel:hover .kachel-hover-symbol, .kachel-bildlink:focus-visible .kachel-hover-symbol {
  transform: translate(-50%, -50%) scale(1); opacity: 1;
}

.kachel-info { position: relative; z-index: 3; padding: clamp(24px, 2.8vw, 38px); gap: 12px; flex: none; }
.kachel-kopfzeile { flex-wrap: wrap; align-items: center; gap: 10px 14px; justify-content: flex-start; }
.kachel-info h4 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -.045em; line-height: 1; }
.kachel-info h4 a { color: #fff; }
.kachel-kopfzeile .teaser-sektor {
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  color: rgba(255,255,255,.8); font-size: .6875rem; max-width: 100%;
}
.kachel-info p { flex: none; max-width: 40ch; font-size: 1.025rem; color: rgba(255,255,255,.72); line-height: 1.55; }

.kachel-cta { display: flex; gap: 12px; margin-top: 18px; }
.kachel-cta .btn { flex: 1; justify-content: center; padding-block: 18px; font-size: 1rem; }
.kachel-cta .btn--start {
  flex: 2.2; background: var(--akzent); border-color: var(--akzent); color: #0A0C16; font-weight: 600;
}
.kachel-cta .btn--start svg { width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.kachel-cta .btn--start:hover {
  background: color-mix(in srgb, var(--akzent) 78%, #fff); border-color: transparent; color: #0A0C16;
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--akzent) 80%, transparent);
}
.kachel-cta .btn--start:hover svg { transform: scale(1.25); }
.kachel-cta .btn--info { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kachel-cta .btn--info:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); color: #fff; box-shadow: none; }

@media (hover: none) { .kachel-hover-symbol { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 560px) {
  .hero { padding-top: 112px; }
  .hero .hero-kicker { display: none; }
  .suche { height: 60px; }
  .kachel { min-height: 520px; }
  .kachel-cta { flex-direction: column; }
}

/* ---------- Titelbänder der Unterseiten ---------- */

.leitbild { background: var(--nacht); }
.leitbild .bild { background: var(--nacht); }
.leitbild .bild img { opacity: .85; }
.leitbild-scrim {
  background:
    linear-gradient(to top, rgba(7,9,18,.95) 0%, rgba(7,9,18,.4) 55%, rgba(7,9,18,.6) 100%),
    radial-gradient(60% 70% at 15% 100%, rgba(70,100,255,.3), transparent 70%);
}
.leitbild-inhalt { min-height: min(88svh, 820px); padding-block: 170px clamp(56px, 8vw, 110px); }
.leitbild .display {
  max-width: 13ch; margin-bottom: 28px;
  font-size: clamp(3rem, 8.4vw, 8rem); line-height: .95; letter-spacing: -.055em; font-weight: 500;
  animation: einblenden 1.2s var(--ease-out) .15s both;
}
.leitbild .lead { max-width: 42ch; color: var(--eis); animation: einblenden 1.2s var(--ease-out) .4s both; }

/* ---------- Helle Abschnitte ---------- */

h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.045em; line-height: 1.04; }
.lead { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.012em; }
.section { padding-block: clamp(90px, 12vw, 190px); }
.section--tint { background: linear-gradient(180deg, #EEF2FB 0%, #F6F8FD 100%); }

@media (min-width: 900px) {
  .satz > :first-child { position: sticky; top: 130px; align-self: start; }
}
.satz .teaser-sektor {
  display: inline-block; margin-bottom: 18px; padding: 6px 14px;
  border: 1px solid var(--rule-2); border-radius: 999px; color: var(--blau);
  font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}

.projekt-bild {
  border-radius: var(--radius); margin-bottom: clamp(36px, 5vw, 64px);
  box-shadow: 0 50px 100px -50px rgba(5, 46, 124, .55);
}
.projekt-bild--kunst {
  max-width: none; aspect-ratio: 16 / 9;
  background: radial-gradient(60% 80% at 25% 20%, rgba(76,134,255,.5), transparent 65%), linear-gradient(160deg, #123A9A, var(--nacht));
}

.produkt-start { margin: 0 0 clamp(40px, 5vw, 64px); }
.produkt-start .btn { padding: 14px 26px; }

.rubrik-nav-band { border-bottom: 0; background: #fff; }
.rubrik-nav a { border-radius: 999px; padding: 10px 22px; transition: all .3s var(--ease); }
.rubrik-nav a:hover { background: var(--blau); border-color: var(--blau); color: #fff; }

.angaben > div { transition: padding-left .4s var(--ease-out); }
.angaben > div:hover { padding-left: 14px; }
.angaben dd { font-weight: 500; }

.schema-bar { height: 56px; border-radius: 16px; gap: 3px; }
.schema-bar span:nth-child(1) { background: linear-gradient(90deg, var(--blau), #1F5BFF); }
.schema-legende i { border-radius: 50%; }

.hinweis { border-radius: 0 16px 16px 0; }
.kontakt-block dd a { border-bottom: 1px solid var(--rule-2); transition: border-color .3s var(--ease); }
.kontakt-block dd a:hover { border-bottom-color: var(--blau); }

/* ---------- Schlussband (Projektseite) ---------- */

.schlussband {
  position: relative; overflow: hidden; background: var(--nacht);
  padding-block: clamp(90px, 13vw, 200px);
  border-top: 1px solid rgba(255,255,255,.06);
}
.schlussband::before {
  content: ""; position: absolute; width: 60vw; height: 60vw; left: 50%; top: 50%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70,100,255,.34), transparent); filter: blur(40px);
  pointer-events: none;
}
.schlussband .wrap { position: relative; }
.schlussband-kicker { margin: 0 0 24px; color: var(--eis); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.schlussband-link {
  display: inline-flex; align-items: center; gap: clamp(16px, 3vw, 44px); flex-wrap: wrap;
  color: #fff; font-weight: 500; letter-spacing: -.055em; line-height: .95;
  font-size: clamp(3rem, 11vw, 11rem);
}
.schlussband-link:hover { color: #fff; }
.schlussband-link span:first-child { background: linear-gradient(95deg, #fff 30%, #FFC08A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.schlussband-pfeil {
  display: grid; place-items: center; flex: none;
  width: clamp(64px, 9vw, 150px); height: clamp(64px, 9vw, 150px); border-radius: 50%;
  background: #fff; color: #0B0D16;
  transition: transform .6s var(--ease-out), background .4s var(--ease);
}
.schlussband-pfeil svg { width: 38%; height: 38%; }
.schlussband-link:hover .schlussband-pfeil { transform: rotate(45deg) scale(1.08); background: #FFC08A; }
.schlussband-adresse { margin: clamp(28px, 4vw, 52px) 0 0; color: var(--eis); font-size: clamp(1.05rem, 1.6vw, 1.35rem); }

/* ---------- Fusszeile ---------- */

.colophon { background: var(--nacht); border-top: 1px solid rgba(255,255,255,.06); padding-block: 88px 44px; }
.colophon a { transition: color .3s var(--ease); }
.colophon h4 { color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; font-weight: 600; }
.colophon-base { border-top-color: rgba(255,255,255,.1); }

/* ---------- Einblenden beim Scrollen ---------- */

.js .reveal { transform: translateY(44px); }
.js .reveal.reveal--sichtbar { transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; }
  .hero-titel .zeile > span { transform: none; }
  .suche { opacity: 1; }
  .orb { animation: none; }
  .kachel::after { animation: none !important; }
}

/* Illustrationen mit transparentem Rand nicht beschneiden: ganz zeigen,
   oben ausgerichtet, unter den Chips; der Verlauf darunter trägt den Text. */
.kachel .bild--kunst img { object-fit: contain; object-position: 50% 0; padding-top: 60px; }

/* ==========================================================================
   Wort-Automat in der Schlagzeile + schräge Bänder
   „Was möchten Sie lernen? / prüfen? / starten?“ — das Wort rollt durch,
   die passende App leuchtet in ihrer Farbe auf. Darunter laufen die
   Schlagworte (Applied AI, angewandte KI, eine Seite, alle Apps) als
   gegenläufige, schräge Bänder.
   ========================================================================== */

.slot {
  display: inline-block; position: relative; overflow: hidden; white-space: nowrap;
  vertical-align: top; padding: .04em 0 .16em; margin: -.04em 0 -.16em;
  transition: width .8s cubic-bezier(.34, 1.56, .64, 1);
}
.slot-wort {
  display: inline-block; font-weight: 300; padding-right: .06em;
  background-image: linear-gradient(95deg, #fff 0%, #A9B8FF 45%, #FFC08A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: 0 100%;
}
.slot-wort.raus { position: absolute; left: 0; top: .04em; }

/* Die Karte, zu der das Wort gerade gehört, leuchtet wie beim Hover */
.kachel.is-demo {
  transform: perspective(1300px) translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 50px 100px -40px rgba(0,0,0,.95),
              0 0 110px -30px color-mix(in srgb, var(--akzent) 55%, transparent);
}
.kachel.is-demo::after { opacity: 1; animation: kreisen 3.2s linear infinite; }
.kachel.is-demo .kachel-bild img { transform: scale(1.07); }

/* ---------- Schräge Bänder ---------- */

.baender { position: relative; z-index: 1; height: clamp(210px, 24vw, 320px); overflow: hidden; margin-top: -10px; }
.band {
  position: absolute; left: -6%; width: 112%;
  padding-block: clamp(10px, 1.4vw, 18px);
  font-size: clamp(1.05rem, 2.3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
}
.band--a { top: 22%; transform: rotate(-3deg); background: #fff; color: #0A0C16; z-index: 1; }
.band--b { top: 40%; transform: rotate(2.6deg); background: linear-gradient(90deg, #3D5BFF, #8B5CFF 45%, #FF8A3D); color: #fff; }
.band-spur { display: flex; width: max-content; animation: band-lauf 38s linear infinite; }
.band--b .band-spur { animation-direction: reverse; animation-duration: 46s; }
.band:hover .band-spur { animation-play-state: paused; }
.band-spur span { display: inline-flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); padding-right: clamp(20px, 2.6vw, 40px); white-space: nowrap; }
.band-spur i { font-style: normal; font-size: .8em; opacity: .85; }
@keyframes band-lauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-spur { animation: none; } }

/* ==========================================================================
   Logo: Schriftzug „aplai“ in League Spartan (selbst gehostet, SIL OFL)
   ========================================================================== */

@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/league-spartan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

.brand { color: #fff; }
.masthead:not(.masthead--auf-dunkel) .brand { color: var(--blau); }
.logo-text {
  font-family: "League Spartan", var(--sans);
  font-weight: 900; font-size: 3rem; line-height: 1;
  letter-spacing: -.045em; text-transform: none;
  padding-bottom: .08em; /* optischer Ausgleich: Grundlinie mittig zur Navigation */
}
.brand:hover { color: #fff; opacity: .8; }
.masthead:not(.masthead--auf-dunkel) .brand:hover { color: var(--blau); }
.colophon .logo-text { font-size: 4.4rem; }
@media (max-width: 560px) { .logo-text { font-size: 2.4rem; } .colophon .logo-text { font-size: 3.6rem; } }

/* ---------- Handy: Karte gestapelt statt Bild unter dem Text ---------- */
@media (max-width: 719px) {
  .kachel { min-height: 0; }
  .kachel-bildlink { position: relative; inset: auto; display: block; }
  .kachel .kachel-bild { position: relative; inset: auto; aspect-ratio: 5 / 4; }
  .kachel .kachel-bild::after,
  .kachel:hover .kachel-bild::after { background: linear-gradient(to top, rgba(10,12,22,1) 0%, rgba(10,12,22,0) 38%); }
  .kachel-hover-symbol { top: 46%; width: 72px; height: 72px; }
  .kachel-info { padding-top: 8px; }
}
/* Tastenkürzel-Hinweis nur mit Tastatur/Maus */
@media (hover: none) { .suche kbd { display: none; } }

@media (max-width: 719px) { .kachel .bild--kunst img { padding-top: 56px; } }
/* Auf Touch braucht es den Play-Knopf im Bild nicht - der Starten-Button ist direkt darunter */
@media (hover: none) { .kachel-hover-symbol { display: none; } }

/* ==========================================================================
   Unterseiten im Launcher-Look (Projekte, Kontakt, Impressum, Datenschutz)
   Dunkler Grund wie die Startseite, gleiches Titelband-Licht, Akzentfarbe
   je App (--akzent am Abschnitt), Glas statt Linien.
   ========================================================================== */

body.sub { background: var(--nacht); color: rgba(255,255,255,.72); }
.sub h1, .sub h2, .sub h3 { color: #fff; }
.sub strong { color: #fff; }
.sub a { color: var(--eis); }
.sub a:hover { color: #fff; }
.sub .lead { color: var(--eis); }
.sub .muted { color: rgba(255,255,255,.45); }
.sub .section { background: transparent; }
.sub .section--tint {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border-block: 1px solid rgba(255,255,255,.07);
}

/* Titelband: dieselbe Lichtstimmung wie die Startseite */
.sub .leitbild {
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 10% 0%, rgba(70,100,255,.42), transparent 62%),
    radial-gradient(50% 70% at 100% 20%, rgba(107,60,255,.28), transparent 66%),
    radial-gradient(40% 50% at 60% 100%, rgba(255,138,61,.10), transparent 70%),
    var(--nacht);
}
.sub .leitbild .bild { background: none; }
.sub .leitbild .bild img { opacity: .28; }
.sub .leitbild::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.3px);
  background-size: 30px 30px; opacity: .45;
  mask-image: radial-gradient(60% 70% at 50% 35%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 35%, #000, transparent 78%);
}
.sub .leitbild-scrim { z-index: 1; background: linear-gradient(to top, var(--nacht) 0%, rgba(7,9,18,0) 60%); }
.sub .leitbild-inhalt { z-index: 2; min-height: min(70svh, 640px); padding-block: 160px clamp(48px, 6vw, 88px); }
.sub .leitbild .display { font-size: clamp(3rem, 7.6vw, 7rem); max-width: 14ch; }
.sub .leitbild .display em,
.sub .legal h1 em {
  font-style: normal; font-weight: 300; padding-right: .05em;
  background: linear-gradient(95deg, #fff 0%, #A9B8FF 45%, #FFC08A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sprungmarken unter dem Titelband */
.sub .rubrik-nav-band { background: transparent; border: 0; }
.sub .rubrik-nav a {
  color: #fff; background: var(--glas); border: 1px solid var(--glas-r);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sub .rubrik-nav a:hover { background: #fff; border-color: #fff; color: #0B0D16; }

/* Projektabschnitte in der Akzentfarbe der jeweiligen App */
.sub .satz .teaser-sektor {
  border-color: color-mix(in srgb, var(--akzent, #7C9BFF) 55%, transparent);
  color: var(--akzent, #7C9BFF);
  background: color-mix(in srgb, var(--akzent, #7C9BFF) 10%, transparent);
}
.sub .satz h2 {
  background: linear-gradient(95deg, #fff 10%, var(--akzent, #fff) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: clamp(2.4rem, 5vw, 4.4rem); letter-spacing: -.05em;
}
.sub .projekt-bild {
  border: 1px solid var(--glas-r);
  box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--akzent, #4664FF) 55%, transparent);
}
.sub .produkt-start .btn {
  background: var(--akzent, #fff); border-color: var(--akzent, #fff); color: #0A0C16; font-weight: 600;
}
.sub .produkt-start .btn:hover {
  background: color-mix(in srgb, var(--akzent, #fff) 78%, #fff); border-color: transparent; color: #0A0C16;
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--akzent, #fff) 80%, transparent);
}
.sub .produkt-start .kachel-status--live { color: #7BF0A6; }

/* Angaben, Schema, Hinweise */
.sub .angaben > div { border-top-color: rgba(255,255,255,.1); }
.sub .angaben > div:last-child { border-bottom-color: rgba(255,255,255,.1); }
.sub .angaben dt { color: rgba(255,255,255,.5); }
.sub .angaben dd { color: #fff; }
.sub .angaben dd a { color: var(--akzent, var(--eis)); }

.sub .schema-bar span:nth-child(1) { background: linear-gradient(90deg, var(--akzent), color-mix(in srgb, var(--akzent) 60%, #fff)); }
.sub .schema-bar span:nth-child(2) { background: color-mix(in srgb, var(--akzent) 60%, transparent); }
.sub .schema-bar span:nth-child(3) { background: color-mix(in srgb, var(--akzent) 32%, transparent); }
.sub .schema-bar span:nth-child(4) { background: rgba(255,255,255,.18); }
.sub .schema-legende li { border-bottom-color: rgba(255,255,255,.1); }
.sub .schema-legende li:nth-child(1) i { background: var(--akzent); }
.sub .schema-legende li:nth-child(2) i { background: color-mix(in srgb, var(--akzent) 60%, transparent); }
.sub .schema-legende li:nth-child(3) i { background: color-mix(in srgb, var(--akzent) 32%, transparent); }
.sub .schema-legende li:nth-child(4) i { background: rgba(255,255,255,.18); }
.sub .schema-legende b { color: #fff; }
.sub .schema-fuss { color: rgba(255,255,255,.5); }

.sub .platzhalter { color: #FFC56B; border-bottom-color: rgba(255,197,107,.5); }
.sub .hinweis {
  background: var(--glas); color: var(--eis);
  border: 1px solid var(--glas-r); border-left: 2px solid var(--glut);
}

/* Kontakt: Angaben als Glaskarte */
.sub .satz-text .kontakt-block {
  padding: clamp(24px, 3vw, 40px); border: 1px solid var(--glas-r); border-radius: 28px; background: var(--glas);
}
.sub .kontakt-block dt { color: rgba(255,255,255,.5); }
.sub .kontakt-block dd { color: #fff; }
.sub .kontakt-block dd a { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.sub .kontakt-block dd a:hover { border-bottom-color: #fff; }

/* Rechtstexte: gleiches Kopfmuster, lesbare Spalte */
.sub .section--legal { padding-top: clamp(140px, 15vw, 200px); }
.sub .legal { max-width: 74ch; }
.sub .legal h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1;
  margin-bottom: 24px;
}
.sub .legal h2 { font-size: 1.5rem; letter-spacing: -.02em; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.sub .legal h3 { color: #fff; }
.sub .legal a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); }
.sub .legal a:hover { border-bottom-color: #fff; }
.sub .legal .platzhalter { border-bottom-style: dotted; }
.sub .section { padding-block: clamp(56px, 8vw, 120px); }
.sub .rubrik-nav-band .wrap { padding-block: 0 8px; }
.sub .section--legal {
  background:
    radial-gradient(60% 34% at 8% 0%, rgba(70,100,255,.34), transparent 66%),
    radial-gradient(40% 28% at 100% 4%, rgba(107,60,255,.22), transparent 70%);
}

/* ==========================================================================
   Projekte-Seite: zwei App-Karten nebeneinander, nur das Wesentliche
   ========================================================================== */

.projekte .leitbild-inhalt { min-height: 0; padding-block: 124px 28px; }
.projekte .leitbild .display { font-size: clamp(2.6rem, 6vw, 5rem); max-width: none; margin-bottom: 12px; }
.projekte .leitbild .lead { font-size: 1.05rem; max-width: 58ch; }
.projekte .projekt-seite { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 96px); }

.projekt-grid { display: grid; gap: clamp(16px, 2.4vw, 32px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .projekt-grid { grid-template-columns: 1fr; } }

.projekt-karte {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--glas-r); border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%);
  box-shadow: 0 50px 100px -60px color-mix(in srgb, var(--akzent) 55%, transparent);
}
.projekt-cover { aspect-ratio: 16 / 9; border-radius: 0; }
.projekt-cover img { width: 100%; height: 100%; object-fit: cover; }
.projekt-cover.bild--kunst img { object-fit: contain; }
.projekt-inhalt { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(20px, 2.4vw, 32px); }
.projekt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.projekt-karte .teaser-sektor {
  margin: 0; padding: 6px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent); color: var(--akzent);
  font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}
.projekt-karte .kachel-status { position: static; padding: 0; background: none; border: 0; font-size: .8125rem; color: #7BF0A6; }
.projekt-karte h2 {
  margin: 4px 0 0; font-size: clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(95deg, #fff 10%, var(--akzent) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.projekt-karte .lead { margin: 4px 0 0; font-size: 1.1rem; max-width: none; }
.projekt-karte p { font-size: .95rem; line-height: 1.6; margin: 0; }
.projekt-karte .angaben { margin: 8px 0 14px; }
.projekt-karte .angaben > div { display: block; padding-block: 9px; }
.projekt-karte .angaben dt { font-size: .75rem; letter-spacing: .04em; margin-bottom: 2px; }
.projekt-karte .angaben dd { font-size: .9rem; line-height: 1.4; }
.projekt-karte .btn {
  margin-top: auto; justify-content: center; padding-block: 16px;
  background: var(--akzent); border-color: var(--akzent); color: #0A0C16; font-weight: 600;
}
.projekt-karte .btn:hover {
  background: color-mix(in srgb, var(--akzent) 78%, #fff); border-color: transparent; color: #0A0C16;
  box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--akzent) 80%, transparent);
}