/* Impressum/Datenschutz der Katzen-Seite – gleiche Tokens wie index.html (Design der slxt-Seiten). */
:root {
  --himmel-1: #dfe5ff; --himmel-2: #efe3f8; --himmel-3: #fde7da; --grund: #f4f1fb;
  --flaeche: rgba(255, 255, 255, .78); --flaeche-fest: #fff; --flaeche-2: rgba(30, 20, 60, .06);
  --text: #1d1d1f; --text-2: #54546a; --linie: rgba(30, 20, 60, .1); --akzent: #5b3df5;
  --verlauf: linear-gradient(100deg, #6d4aff, #3b82f6);
  --schatten: 0 1px 2px rgba(40, 20, 90, .05), 0 10px 30px rgba(60, 40, 120, .1);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --anzeige: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-modus="dunkel"] { color-scheme: dark;
    --himmel-1: #04050d; --himmel-2: #0b0e2a; --himmel-3: #1a1240; --grund: #0b0e2a;
    --flaeche: rgba(22, 22, 42, .7); --flaeche-fest: #17172a; --flaeche-2: rgba(255, 255, 255, .08);
    --text: #f2f2f7; --text-2: #aeb0c8; --linie: rgba(255, 255, 255, .11); --akzent: #a993ff;
    --verlauf: linear-gradient(100deg, #b9a6ff, #7cb4ff);
    --schatten: 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 34px rgba(0, 0, 0, .4);
  }
@media (prefers-contrast: more) { :root { --text-2: var(--text); --flaeche: var(--flaeche-fest); } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; color: var(--text); font: 400 1.0625rem/1.55 var(--schrift); -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%; background: linear-gradient(180deg, var(--himmel-1), var(--himmel-2) 55%, var(--himmel-3)) fixed var(--grund); }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 1.125rem var(--anzeige); letter-spacing: -.02em;
  color: var(--text); text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.accent { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--flaeche-2);
  color: var(--text); font-weight: 600; font-size: .9375rem; text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 32px max(16px, env(safe-area-inset-left)) 48px; }
article { padding: clamp(20px, 5vw, 40px); border-radius: 22px; background: var(--flaeche-fest); box-shadow: var(--schatten); }
h1 { margin: 0 0 8px; font: 800 clamp(2rem, 6vw, 2.6rem)/1.1 var(--anzeige); letter-spacing: -.03em; }
h2 { margin: 28px 0 6px; font: 700 1.25rem var(--anzeige); letter-spacing: -.02em; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 1.2em; }
li { margin-bottom: 6px; }
.klein { color: var(--text-2); font-size: .9375rem; }
footer { display: flex; justify-content: center; gap: 16px; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--text-2); }
footer a { color: var(--text-2); }

.zurueck-gruppe { display: flex; gap: 8px; align-items: center; }
.modus-knopf { width: 44px; height: 44px; border: 0; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: var(--flaeche-2); color: var(--text); }