/* Gestaltungs-Grundlagen — an Instagram angelehnt.
   Dunkel, hoher Kontrast, Verlauf als einziger Farbakzent. */

:root {
  /* Flaechen */
  --bg:          #000000;
  --flaeche:     #121212;
  --flaeche-2:   #1c1c1e;
  --flaeche-3:   #262626;
  --rand:        #262626;
  --rand-hell:   #363636;

  /* Text */
  --text:        #fafafa;
  --text-2:      #a8a8a8;
  --text-3:      #737373;

  /* Akzente */
  --blau:        #0095f6;
  --blau-dunkel: #1877f2;
  --rot:         #ed4956;
  --gruen:       #2ecc71;
  --gelb:        #ffb700;

  /* Bereichsfarben */
  --f-routinen:  #bc1888;
  --f-training:  #0095f6;
  --f-nutrition: #f09433;
  --f-recovery:  #a855f7;
  --f-journal:   #22c3a6;
  --f-studium:   #ffd166;
  --f-trading:   #ffb700;

  --verlauf: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --verlauf-blau: linear-gradient(135deg, #0095f6, #833ab4);

  /* Masse */
  --r-klein:  8px;
  --r-mittel: 12px;
  --r-gross:  18px;
  --r-rund:   999px;

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;

  --kopf-hoehe: 50px;
  --nav-hoehe:  52px;

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             system-ui, Roboto, "Helvetica Neue", sans-serif;

  --sicher-oben:  env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  padding-top: calc(var(--kopf-hoehe) + var(--sicher-oben));
  padding-bottom: calc(var(--nav-hoehe) + var(--sicher-unten) + 12px);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; letter-spacing: -0.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p  { margin: 0 0 var(--abstand-3); }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

svg.ikon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
svg.ikon.klein { width: 18px; height: 18px; stroke-width: 2; }
svg.ikon.gross { width: 30px; height: 30px; stroke-width: 1.6; }

/* Hilfsklassen */
.verlauf-text {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gedaempft { color: var(--text-2); }
.leise     { color: var(--text-3); font-size: 13px; }
.mono      { font-variant-numeric: tabular-nums; }
.versteckt { display: none !important; }
.zentriert { text-align: center; }