/* Pflegaris – Coming soon. Eigenständig, unabhängig von der Website.
   Schrift lokal (General Sans, ITF Free Font License) – keine Verbindung zu fremden Servern. */
@font-face { font-family: "General Sans"; src: url("general-sans-variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }

:root {
  --tief: #06141B; --nacht: #11212D; --schiefer: #253745; --stahl: #4A5C6A; --nebel: #9BA8AB; --hell: #CCD0CF;
  --linie: rgba(204,208,207,.24); --text: rgba(204,208,207,.92); --leise: rgba(204,208,207,.74);
  --rand: clamp(16px, 4vw, 56px); --innen: calc(var(--rand) + 22px);
  --ease: cubic-bezier(.16, 1, .3, 1); --weich: cubic-bezier(.32, .72, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--tief); }
body { margin: 0; background: var(--tief); color: var(--hell); font-family: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, p { margin: 0; font-weight: 400; }

/* ---------- Licht und Kugel liegen fest hinter der Seite ---------- */
.buehne { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.aurora i { position: absolute; display: block; border-radius: 50%; }
.aurora .a1 { width: 70vw; height: 46vh; left: -20vw; top: -16vh; background: radial-gradient(closest-side, rgba(74,92,106,.62), rgba(74,92,106,0)); animation: treiben1 26s ease-in-out infinite alternate; }
.aurora .a2 { width: 84vw; height: 48vh; right: -24vw; bottom: -18vh; background: radial-gradient(closest-side, rgba(155,168,171,.3), rgba(74,92,106,.24) 60%, rgba(74,92,106,0)); animation: treiben2 32s ease-in-out infinite alternate; }
.aurora .a3 { width: 56vw; height: 40vh; left: 30vw; top: -24vh; background: radial-gradient(closest-side, rgba(37,55,69,.8), rgba(37,55,69,0)); animation: treiben3 38s ease-in-out infinite alternate; }
@keyframes treiben1 { to { transform: translate(10vw, 12vh) scale(1.2); } }
@keyframes treiben2 { to { transform: translate(-14vw, -8vh) scale(1.15); } }
@keyframes treiben3 { to { transform: translate(-22vw, 10vh) scale(.9); } }

/* ---------- Startseite ---------- */
.soon { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; padding: 28px var(--innen) clamp(20px, 3svh, 32px); overflow: hidden; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { height: 34px; width: auto; }
.kontakt { padding: 8px 18px; border-radius: 999px; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(204,208,207,.4); transition: background-color .4s var(--weich), color .4s var(--weich); }
.kontakt:hover { background: var(--hell); color: var(--tief); }

h1 { margin-top: clamp(24px, 4.2svh, 40px); font-weight: 300; font-size: clamp(38px, min(4.4vw, 7.4svh), 84px); line-height: 1.04; letter-spacing: -.028em; }

.kugel-logo { position: absolute; left: 50%; top: 50%; width: auto; height: calc(var(--kugel, min(30svh, 26vw)) * .62); transform: translate(-50%, -50%); }

.notiz { position: absolute; top: 56%; width: min(25vw, 310px); font-size: 12px; font-weight: 500; letter-spacing: .05em; line-height: 1.45; text-transform: uppercase; }
.notiz-links { left: var(--innen); padding-top: 10px; border-top: 1px solid var(--linie); }
.notiz-rechts { right: var(--innen); }

.fuss { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.recht { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--leise); }
.recht a { transition: color .3s; }
.recht a:hover { color: var(--hell); text-decoration: underline; text-underline-offset: 4px; }

/* Glaspille mit eingesetztem rundem Feld für das Zeichen */
.knopf {
  display: inline-flex; align-items: center; gap: 16px; padding: 7px 7px 7px 26px; border-radius: 999px;
  color: var(--hell); font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  background: linear-gradient(135deg, rgba(204,208,207,.2), rgba(204,208,207,.05) 45%, rgba(204,208,207,.12)), rgba(17,33,45,.42);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(204,208,207,.42), inset 0 -1px 1px rgba(204,208,207,.1), 0 0 0 1px rgba(204,208,207,.2), 0 14px 36px -12px rgba(6,20,27,.7);
  transition: transform .5s var(--weich), box-shadow .5s var(--weich), background-color .5s var(--weich);
}
.knopf-text { display: block; }
.knopf-marke {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(204,208,207,.13); box-shadow: inset 0 1px 1px rgba(204,208,207,.36), 0 0 0 1px rgba(204,208,207,.12);
  transition: transform .6s var(--weich), background-color .5s var(--weich);
}
.knopf-marke img { width: 22px; height: auto; }
.knopf:hover { box-shadow: inset 0 1px 1px rgba(204,208,207,.6), inset 0 -1px 1px rgba(204,208,207,.14), 0 0 0 1px rgba(204,208,207,.36), 0 16px 42px -12px rgba(6,20,27,.8); }
.knopf:hover .knopf-marke { transform: translate(3px, -1px) scale(1.06); background: rgba(204,208,207,.24); }
.knopf:active { transform: scale(.98); }
.stand .knopf { -webkit-backdrop-filter: none; backdrop-filter: none; }  /* nur fürs Vorschaubild */

/* 404: Die Zahl steht als Text da und wird unsichtbar, sobald die Punkte sie zeichnen */
.ziffern { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: clamp(120px, 26vw, 400px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--stahl); }
.gl .ziffern { opacity: 0; pointer-events: none; }
.fehler h1 { position: relative; z-index: 1; }

/* Einblenden */
.kommt { opacity: 0; transform: translateY(26px); animation: kommt 1.2s var(--ease) forwards; }
.kommt[data-d="1"] { animation-delay: .12s; } .kommt[data-d="2"] { animation-delay: .24s; } .kommt[data-d="3"] { animation-delay: .36s; }
@keyframes kommt { to { opacity: 1; transform: none; } }
.kugel-logo.kommt { transform: translate(-50%, -50%); animation: logo-ein 1.6s var(--ease) both .25s; }
@keyframes logo-ein { from { opacity: 0; transform: translate(-50%, -50%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- Rechtstexte: Glaskarte ---------- */
.seite { position: relative; z-index: 1; min-height: 100svh; padding: 28px var(--rand) var(--rand); }
.seite .kopf { padding: 0 22px; margin-bottom: clamp(28px, 5svh, 56px); }
.zurueck { font-size: 15px; }
.zurueck:hover { text-decoration: underline; text-underline-offset: 4px; }
.karte {
  position: relative; isolation: isolate; max-width: 880px; margin: 0 auto; padding: clamp(24px, 4vw, 56px);
  border-radius: clamp(22px, 2.4vw, 36px);
  background: linear-gradient(135deg, rgba(204,208,207,.13), rgba(204,208,207,.03) 40%, rgba(204,208,207,.08)), rgba(17,33,45,.5);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 1px rgba(204,208,207,.34), inset 0 -1px 1px rgba(204,208,207,.08), 0 0 0 1px rgba(204,208,207,.1), 0 26px 70px rgba(6,20,27,.5);
}
.karte .marke { display: block; margin-bottom: 18px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.karte h1 { margin: 0 0 28px; font-size: clamp(36px, 4.4vw, 60px); }
.karte h2 { margin: 30px 0 8px; font-size: 18px; font-weight: 500; }
.karte p { color: var(--text); max-width: 42em; }
.karte a { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kommt { animation: none; opacity: 1; transform: none; }
  .kugel-logo.kommt { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .aurora i { animation: none; }
}
@media (max-width: 899px) {
  :root { --innen: calc(var(--rand) + 8px); }
  .soon { padding-top: 22px; }
  .logo { height: 28px; }
  h1 { font-size: clamp(38px, 10.6vw, 72px); }
  .kugel-logo, .kugel-logo.kommt { top: 59%; }  /* Kugel sitzt hier tiefer, siehe kugel.js */
  .notiz { position: static; width: auto; max-width: 24em; margin-top: 14px; }
  .notiz-rechts { display: none; }
  .fuss { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .seite .kopf { padding: 0 8px; }
}
/* Sehr kleine Handys: Kugel und Text brauchen den Platz */
@media (max-width: 899px) and (max-height: 700px) { .notiz { display: none; } }