/* Gemeinsame Gestaltung der Unterseiten (Danke, Impressum, Datenschutz) */
:root {
  color-scheme: light;
  --deep:#04467C; --blue:#0476AE; --cyan:#0F99BB; --teal:#057779; --green:#3FA89B; --mint:#5FC3B2;
  --bg:#F5F9F9; --surface:#FFFFFF;
  --ink:#0B1A20; --ink-soft:#33474F; --muted:#5D7178;
  --line:#DBE6E8; --line-soft:#E8F0F1;
  --accent:var(--teal); --accent-ink:#0B6A61;
  --grad:linear-gradient(115deg,var(--deep) 0%,var(--blue) 28%,var(--cyan) 54%,var(--teal) 78%,var(--green) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#071318; --surface:#0D2027;
    --ink:#E9F2F3; --ink-soft:#C2D4D8; --muted:#8EA5AC;
    --line:#1D363E; --line-soft:#162B32;
    --accent:var(--mint); --accent-ink:#7FD6BC;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#071318; --surface:#0D2027;
  --ink:#E9F2F3; --ink-soft:#C2D4D8; --muted:#8EA5AC;
  --line:#1D363E; --line-soft:#162B32;
  --accent:var(--mint); --accent-ink:#7FD6BC;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Outfit","IBM Plex Sans",sans-serif;line-height:1.2;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700}
h2{font-size:1.25rem;font-weight:600;margin-top:36px}
p{margin:14px 0}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:760px;margin-inline:auto;padding-inline:20px}
header.site{border-bottom:1px solid var(--line-soft);background:var(--surface)}
.bar{display:flex;align-items:center;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .mark{width:32px;height:37px}
.brand-name{font-family:"Outfit",sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:.035em;line-height:1;display:block;padding-top:.22em}
.di{position:relative}
.di::after{content:"";position:absolute;left:50%;top:-.28em;width:.16em;height:.16em;margin-left:-.08em;border-radius:50%;background:currentColor}
.brand-sub{display:block;font-size:.64rem;color:var(--muted);letter-spacing:.16em;line-height:1;margin-top:5px}

main{padding-block:clamp(40px,6vw,72px)}
.lede{color:var(--ink-soft);font-size:1.06rem}
.muted{color:var(--muted);font-size:.9rem}

.todo{
  border:2px dashed #C2410C; border-radius:12px;
  background:color-mix(in srgb, #C2410C 8%, var(--surface));
  padding:18px 20px; margin-bottom:32px;
}
.todo strong{color:#C2410C}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .todo{border-color:#FB923C;background:color-mix(in srgb,#FB923C 12%,var(--surface))}
  :root:not([data-theme="light"]) .todo strong{color:#FB923C}
}
.ph{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:5px; padding:1px 6px;
}

.btn{display:inline-block;font-family:"Outfit",sans-serif;font-weight:600;font-size:.95rem;text-decoration:none;padding:11px 20px;border-radius:9px;background:var(--grad);color:#fff;margin-top:12px}

footer.site{border-top:1px solid var(--line);padding-block:30px 40px;color:var(--muted);font-size:.875rem;margin-top:48px}
footer.site a{color:var(--muted)}
.foot-grid{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}