/* ==========================================================================
   Hokaido Night – Designschema abgeleitet aus hokaido.jpg
   Motiv: Sternenhimmel mit Milchstraße über violetter Brandung,
   Silhouetten in Schwarzindigo, ein einziger roter Klippen-Akzent.
   Standalone: nur Google-Fonts-Import, keine weiteren Abhängigkeiten.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* --- Palette: Nachthimmel & Wasser ------------------------------------ */
  --night-950: #05040f;   /* Vordergrund-Silhouetten, Strand */
  --night-900: #0b0a24;   /* Himmel oben */
  --night-800: #131039;   /* Himmel Mitte */
  --night-700: #1c1850;   /* Horizontnähe */
  --night-600: #2a2568;   /* Wasserfläche */
  --cloud-500: #3d3873;   /* Wolkenkörper */
  --surf-400:  #6f66b8;   /* Wellenkämme */
  --surf-300:  #9a92d6;   /* Brandung */
  --surf-200:  #c4bfea;   /* Gischt */

  /* --- Palette: Licht & Akzent ------------------------------------------ */
  --star-100:  #fff6e0;   /* Hauptsterne, warmes Weiß */
  --star-gold: #e6d5a0;   /* kleine goldene Sterne */
  --cliff-600: #7d1a2b;   /* Klippe im Schatten */
  --cliff-500: #b02a40;   /* Klippe, Hauptakzent */
  --cliff-400: #d9536a;   /* Akzent auf dunklem Grund (Hover, Fokus) */

  /* --- Palette: Dämmerung (Scroll-Fortschritt) --------------------------- */
  --dawn-top:    var(--night-800);
  --dawn-mid:    var(--cliff-600);
  --dawn-low:    var(--cliff-500);
  --dawn-horizon: var(--star-gold);

  /* --- Semantische Rollen (dunkles Thema ist Standard) ------------------ */
  --bg:            var(--night-900);
  --bg-elevated:   var(--night-800);
  --bg-sunken:     var(--night-950);
  --surface:       color-mix(in srgb, var(--night-700) 70%, transparent);
  --border:        color-mix(in srgb, var(--surf-300) 28%, transparent);
  --text:          var(--star-100);
  --text-muted:    var(--surf-200);
  --text-subtle:   var(--surf-300);
  --link:          var(--surf-200);
  --link-hover:    var(--star-gold);
  --accent:        var(--cliff-500);
  --accent-hover:  #c2354d;   /* Kontrast 4,99:1 mit --on-accent */
  --on-accent:     var(--star-100);
  --focus-ring:    var(--star-gold);
  --glow:          0 0 24px color-mix(in srgb, var(--star-100) 45%, transparent);

  /* --- Verläufe ---------------------------------------------------------- */
  --gradient-sky: linear-gradient(180deg,
    var(--night-900) 0%, var(--night-800) 45%, var(--night-700) 78%, var(--night-600) 100%);
  --gradient-shore: linear-gradient(180deg,
    transparent 0%, color-mix(in srgb, var(--surf-300) 22%, transparent) 60%, var(--night-950) 100%);
  --gradient-star: radial-gradient(circle,
    var(--star-100) 0%, color-mix(in srgb, var(--star-100) 35%, transparent) 30%, transparent 70%);

  /* --- Typografie -------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --text-xl:  clamp(1.4rem, 1.25rem + 0.8vw, 1.85rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);

  /* --- Abstände, Radien, Schatten --------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2.5rem;  --space-7: 4rem;

  --radius-sm: 6px;
  --radius-md: 14px;      /* weiche, wolkenartige Formen */
  --radius-lg: 28px;

  --shadow-soft: 0 10px 40px -12px rgb(5 4 15 / 0.8);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Optionales helles Thema: Dämmerung statt Nacht */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg:          #f1eefb;
    --bg-elevated: #ffffff;
    --bg-sunken:   #e3def5;
    --surface:     rgb(255 255 255 / 0.7);
    --border:      color-mix(in srgb, var(--night-600) 25%, transparent);
    --text:        var(--night-900);
    --text-muted:  #3d3873;
    --text-subtle: #5a52a0;
    --link:        #4a3fa3;
    --link-hover:  var(--cliff-500);
    --accent:      var(--cliff-500);
    --accent-hover: var(--cliff-600);
    --focus-ring:  var(--night-600);
    --glow:        none;
  }
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text);
  background: var(--gradient-sky) fixed, var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  color: var(--text);
}
h1 { font-size: var(--text-2xl); font-weight: 400; text-shadow: var(--glow); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-style: italic; color: var(--text-muted); }

p  { margin: 0 0 var(--space-4); color: var(--text-muted); max-width: 66ch; }
small, .caption { font-size: var(--text-xs); color: var(--text-subtle); letter-spacing: 0.04em; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }

::selection { background: var(--cliff-500); color: var(--star-100); }

hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: var(--space-6) 0; }

/* --- Komponenten ---------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 600 var(--text-sm)/1 var(--font-body);
  letter-spacing: 0.03em;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 24px -8px var(--cliff-500); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); border-color: var(--surf-300); box-shadow: none; }

input, textarea, select {
  font: inherit; color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:focus, textarea:focus, select:focus { border-color: var(--surf-300); }

/* Brandung als Trennlinie / Fußbereich */
.shore { height: 120px; background: var(--gradient-shore); }

/* Leuchtender Stern als Dekoration */
.star {
  width: 64px; aspect-ratio: 1; border-radius: 50%;
  background: var(--gradient-star);
}

/* Sternenfeld ohne Bilddatei */
/* Scroll-driven dawn: --scroll-progress (0..1) is written by dawn-scroll.js
   and fades a warm sunrise gradient in behind the stars as the reader
   scrolls towards the end of the page. */
.sky-dawn {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--dawn-top) 0%, var(--dawn-mid) 45%, var(--dawn-low) 75%, var(--dawn-horizon) 100%);
  opacity: var(--scroll-progress, 0);
  transition: opacity 0.2s linear;
}


.starfield {
  /* Star layer lives on a fixed pseudo-element so it never overrides the
     host's own background-image (e.g. the sky gradient on <body>). */
  position: relative;
}

.starfield::before,
.starfield::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(1px 1px at 12% 18%, var(--star-100) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 62%, var(--star-gold) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 28%, var(--star-100) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 74%, var(--star-gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 12%, var(--star-100) 50%, transparent 51%);
  background-size: 320px 320px;
  animation: twinkle 6s ease-in-out infinite;
}

.starfield::after {
  background-position: 45px 70px;
  background-size: 260px 260px;
  animation-duration: 8s;
  animation-delay: -3s;
  opacity: 0.6;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

/* --- Prose elements not yet covered above ---------------------------------- */

blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--text-subtle);
  font-style: italic;
}

ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.4em;
  color: var(--text-muted);
}

li { margin-bottom: var(--space-2); }

/* --- Page layout (generated essay pages) ------------------------------------
   Shared shell for standalone reading pages: header, article card, index
   grid. Designed for comfortable reading on mobile, tablet and laptop.
   ---------------------------------------------------------------------------- */

.container {
  width: min(100% - var(--space-5) * 2, 72rem);
  margin-inline: auto;
}

.site-header { padding-block: var(--space-6) var(--space-5); }
.site-header h1 { margin-bottom: var(--space-2); }

.tagline { color: var(--text-subtle); font-size: var(--text-sm); max-width: 60ch; }

.back-link {
  display: inline-block;
  margin-block: var(--space-5);
  color: var(--text-subtle);
  text-decoration: none;
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
}
.back-link:hover { color: var(--link-hover); }

.article { padding-block: 0 var(--space-7); }
.article .card { padding: var(--space-6); }
.article .card h1 { margin-bottom: var(--space-5); }

.article .card > * {
  max-width: 66ch;
  margin-left: auto;
  margin-right: auto;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-7);
}

.index-card {
  display: block;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.index-card:hover {
  transform: translateY(-3px);
  border-color: var(--surf-300);
  box-shadow: 0 14px 40px -14px var(--cliff-500);
}
.index-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.index-card p { font-size: var(--text-sm); margin: 0; }

.site-footer { padding-block: var(--space-5) var(--space-6); }

@media (max-width: 480px) {
  .article .card { padding: var(--space-5) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .starfield::before, .starfield::after { animation: none !important; opacity: 0.6; }
}