/* Startseiten der abgeschalteten Projekt-Sites.
   Farbtoken und Squircle-Maske stammen aus godlaya.de (assets/css/style.css),
   damit die Seiten sichtbar zur selben Familie gehoeren. Bewusst knapp: eine
   Karte, sonst nichts. */
:root {
  --font-round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --base: #FBFBFD;
  --ink: #14161C;
  --ink-2: #4B5162;
  --ink-3: #767D90;
  --glass: rgba(255, 255, 255, 0.60);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(19, 24, 40, 0.07);
  --shadow-2: 0 14px 34px -12px rgba(19, 24, 40, 0.16);
  --blue: rgba(74, 118, 255, 0.34);
  --violet: rgba(163, 106, 255, 0.28);
  --peach: rgba(255, 158, 120, 0.30);
  --accent: #3B6DF5;
  --radius-card: 24px;
  --squircle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M50 0C89.1 0 100 10.9 100 50s-10.9 50-50 50S0 89.1 0 50 10.9 0 50 0Z"/></svg>');
}
@media (prefers-color-scheme: dark) {
  :root {
    --base: #0F1115;
    --ink: #F2F3F7;
    --ink-2: #AEB5C4;
    --ink-3: #838B9C;
    --glass: rgba(255, 255, 255, 0.055);
    --glass-line: rgba(255, 255, 255, 0.11);
    --glass-edge: rgba(0, 0, 0, 0.45);
    --shadow-2: 0 16px 40px -14px rgba(0, 0, 0, 0.65);
    --peach: rgba(255, 140, 100, 0.20);
    --accent: #7FA2FF;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  display: grid; place-items: center; padding: 24px;
  font-family: var(--font-text); font-size: 17px; line-height: 1.55;
  color: var(--ink); background: var(--base);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Farbschleier wie auf godlaya.de -- nur gedaempft, damit die eine Karte
   nicht in einer leeren Flaeche schwimmt. */
body::before {
  content: ""; position: fixed; inset: -30vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 22% 18%, var(--blue), transparent 62%),
    radial-gradient(34vmax 34vmax at 82% 26%, var(--violet), transparent 62%),
    radial-gradient(30vmax 30vmax at 60% 88%, var(--peach), transparent 62%);
  filter: blur(28px);
}
.karte {
  width: min(100%, 34rem); padding: 32px;
  background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-2);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  outline: 1px solid var(--glass-edge); outline-offset: -1px;
  text-align: center;
}
.ikon { display: block; width: 112px; height: 112px; margin: 0 auto 20px; }
.ikon > * {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: var(--squircle); mask-image: var(--squircle);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
h1 {
  font-family: var(--font-round); font-size: 1.9rem; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 10px;
}
.kurz { margin: 0 0 14px; font-size: 1.06rem; color: var(--ink-2); }
.mehr { margin: 0 0 22px; font-size: .95rem; color: var(--ink-3); }
.hinweis {
  margin: 0 0 22px; padding-top: 18px; border-top: 1px solid var(--glass-edge);
  font-size: .9rem; color: var(--ink-3);
}
.zurueck {
  display: inline-block; font-weight: 600; font-size: .95rem;
  color: var(--accent); text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .karte { animation: auf .5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes auf { from { opacity: 0; transform: translateY(10px); } }
}