/* alpai – "Bald verfügbar". Farben und Logo aus werkstatt/website/2026-11-10-kitz-automation.
   Nur Systemschrift, keine externen Ressourcen, kein JavaScript. */
:root {
  --bg: #f4f3f1;
  --fg: #34363a;
  --leise: #4a4c52;
  --akzent: #b4a9c9;
  --rand: clamp(16px, 4vw, 56px);
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.6 var(--text); }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

/* Lavendel-Fläche, die sich wie der Übergang als Kreis aus der Mitte des Bildschirms öffnet.
   Mitte = 50vh (nicht 50%), sonst liegt sie bei langen Seiten weit unter dem Bildschirm.
   Nur "backwards": nach der Animation fällt clip-path weg, damit lange Seiten
   (Datenschutz am Handy) oben und unten nicht abgeschnitten bleiben. */
.buehne {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--akzent);
  display: flex;
  flex-direction: column;
  padding: var(--rand);
  animation: kreis .9s cubic-bezier(.7, 0, .2, 1) .1s backwards;
}
@keyframes kreis {
  from { clip-path: circle(0 at 50% 50vh); }
  to   { clip-path: circle(150vmax at 50% 50vh); }
}

/* Startseite */
.mitte { flex: 1; display: grid; place-content: center; justify-items: center; gap: clamp(20px, 4vh, 36px); text-align: center; }
.mitte h1 { margin: 0; }
.logo { width: min(260px, 44vw); height: auto; display: block; }
.bald { margin: 0; font-size: clamp(14px, 1.6vw, 16px); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--leise); animation: auf .8s ease .9s both; }
@keyframes auf { from { opacity: 0; } to { opacity: 1; } }

.fuss { font-size: 14px; color: var(--leise); text-align: center; animation: auf .8s ease 1.1s both; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.fuss li + li::before { content: "·"; margin: 0 .6em; }

/* Unterseiten (Impressum, Datenschutz) */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.kopf .logo { width: clamp(96px, 18vw, 140px); }
.kopf a { font-size: 15px; }
.text { flex: 1; width: 100%; max-width: 680px; margin: clamp(32px, 7vh, 72px) auto; overflow-wrap: anywhere; }
.text h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .8em; }
.text h2 { font-size: 19px; font-weight: 600; margin: 2em 0 .4em; }
.text p, .text ul { margin: 0 0 1em; }
.text ul { padding-left: 1.2em; }
.hinweis { background: #ffffff59; border-radius: 10px; padding: 12px 16px; }
.platzhalter { background: #ffffff8c; padding: 0 .3em; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .buehne, .bald, .fuss { animation: none; }
}