/* mkehl.one – Stylesheet nach dem Designsystem mk.design (Kehl · Hasui Nacht).
   Token-Werte unverändert aus tokens/colors.css, typography.css, shape.css und fonts.css übernommen.
   Immer dunkel, kein Hellmodus. */

/* Schriften lokal (Latin-Subset von Google Fonts, OFL – Lizenzen in fonts/). */
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ShipporiMincho-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ShipporiMincho-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ZenKakuGothicNew-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ZenKakuGothicNew-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ZenKakuGothicNew-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme:dark;
  /* Farben – Basis */
  --night-950:#0A0D26; /* Nachthimmel – Hintergrund */
  --night-900:#131A3D; /* Schneeschatten – Flächen */
  --midnight:#191970;  /* Mitternachtsblau – erhöhte Flächen, nur unter heller Schrift */
  --night-line:#6672AE; /* Ast – Linien */
  --snow:#EEF1FA;      /* Schnee – Text */
  --haze:#A6AECF;      /* Dunst – gedämpfter Text */
  --moon:#F3E2B3;      /* Mondlicht – Akzent */
  /* Farben – Semantik */
  --bg:var(--night-950);
  --surface:var(--night-900);
  --surface-raised:var(--midnight);
  --text:var(--snow);
  --text-muted:var(--haze);
  --accent:var(--moon);
  --on-accent:var(--night-950);
  --line:var(--night-line);
  --focus:var(--moon);

  /* Typografie */
  --font-display:'Shippori Mincho','Hiragino Mincho ProN',Georgia,serif;
  --font-ui:'Zen Kaku Gothic New','Hiragino Sans',-apple-system,system-ui,sans-serif;
  --fs-display:34px; --lh-display:1.15;
  --fs-heading:20px; --lh-heading:1.3;
  --fs-body:16px;    --lh-body:1.5;
  --fs-body-sm:14px; --lh-body-sm:1.45;
  --fs-caption:12px; --lh-caption:1.4;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  --ls-overline:.14em;
  --type-display:var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-display);
  --type-heading:var(--fw-medium) var(--fs-heading)/var(--lh-heading) var(--font-display);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui);
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-ui);
  --type-label:var(--fw-medium) var(--fs-body-sm)/1.2 var(--font-ui);
  --type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui);

  /* Abstände, Ecken, Linien */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-14:56px;
  --gutter:20px; --hit:44px;
  --radius-chip:14px; --radius-card:20px; --radius-pill:999px;
  --stroke-hair:1px;

  /* Bewegung */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:160ms;
}

*{box-sizing:border-box}

/* Basis (tokens/base.css) */
html,body{background:var(--bg);color:var(--text);font:var(--type-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--surface-raised);color:var(--text)}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.icon{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.wrap{
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:0 var(--gutter);
}

/* Kopf mit Wortmarke */
.top{
  padding-top:var(--space-5);
  padding-bottom:var(--space-2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-height:calc(var(--hit) + var(--space-5));
}

.brand{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:18px;
  letter-spacing:.42em;
  margin-right:-.42em;
  color:var(--text);
  text-decoration:none;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  min-height:var(--hit);
  font:var(--type-label);
  color:var(--text-muted);
  text-decoration:none;
}
.back:hover{color:var(--text)}

main{flex:1;padding-bottom:var(--space-10)}

h1{
  font:var(--type-display);
  margin:var(--space-8) 0 var(--space-2);
}

.lead{color:var(--text-muted);margin:0 0 var(--space-6)}

h2{
  font:var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--font-ui);
  text-transform:uppercase;
  letter-spacing:var(--ls-overline);
  color:var(--text-muted);
  margin:var(--space-8) 0 var(--space-3);
}

/* Große Knöpfe auf der Startseite: Karten ohne Rahmen und Schatten */
.tiles{display:grid;gap:var(--space-3)}

.tile{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  min-height:112px;
  padding:var(--space-5);
  border-radius:var(--radius-card);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);
}
.tile:hover{filter:brightness(1.08)}
.tile:active{transform:scale(.97)}

.tile-icon{
  flex:none;
  width:var(--space-14);
  height:var(--space-14);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--surface-raised);
  color:var(--accent);
}
.tile-icon .icon{width:26px;height:26px}

.tile-title{display:block;font:var(--type-heading);font-weight:var(--fw-bold)}
.tile-sub{display:block;font:var(--type-body-sm);color:var(--text-muted)}

.tile-arrow{margin-left:auto;color:var(--text-muted)}

/* Listen in den Bereichen */
.list{display:grid;gap:var(--space-2)}

.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  min-height:var(--space-14);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-card);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);
}
a.item:hover{filter:brightness(1.08)}
a.item:active{transform:scale(.97)}

.item-title{font-weight:var(--fw-medium)}
.item-sub{display:block;font:var(--type-body-sm);color:var(--text-muted)}

/* Zustand als Kapsel auf Mitternachtsblau */
.badge{
  flex:none;
  font:var(--type-caption);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  color:var(--text-muted);
  white-space:nowrap;
}

.note{
  margin:0;
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-card);
  background:var(--surface);
  color:var(--text-muted);
}

/* Fuß mit About Me */
.foot{
  border-top:var(--stroke-hair) solid var(--line);
  padding:var(--space-3) 0 var(--space-6);
  font:var(--type-body-sm);
  color:var(--text-muted);
}
.foot .wrap{display:flex;flex-wrap:wrap;gap:0 var(--space-5);align-items:center}
.foot a{display:inline-flex;align-items:center;min-height:var(--hit)}
.foot .copy{margin-left:auto}