/* ══ Tailwind (statically generated, see CLAUDE.md) ══ */
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.flex{display:flex}.hidden{display:none}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.flex-wrap{flex-wrap:wrap}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-full{border-radius:9999px}.object-cover{-o-object-fit:cover;object-fit:cover}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-16{padding-bottom:4rem}.pt-14{padding-top:3.5rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (min-width:768px){.md\:block{display:block}.md\:hidden{display:none}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}

/* ══ Custom CSS ══ */

/* ── Color scheme "cool client" (both views) ────
   All text colors ≥ 4.5:1 against their backgrounds ✓
   (contrast ratios verified, see REVIEW.md 1.1, scheme B) */
:root {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-alt: #e4eaf2;
  --border: #d9e1ea;
  --text: #16202b;
  --text-body: #3a4653;
  --text-secondary: #4d5a68;
  --accent: #2563eb;
  /* Shared by .btn-primary and favicon.svg (SVG can't read CSS vars — hex duplicated there) */
  --brand: #41546d;
  --active-bg: #e4ecf8;
  --on-dark: #ffffff;
  --focus: #1a56db;
  /* Two radius tiers: surfaces and pills */
  --radius: 16px;
  --radius-pill: 9999px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Without JS: hide chat and email views, the text version remains */
html:not(.js) .js-view { display: none; }
.js #stations-static { display: none; }

/* ── Skip navigation ───────────────────────── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 10px 20px;
  background: var(--text);
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  z-index: 200;
  border-radius: 0 0 6px 0;
}
.skip-nav:focus {
  top: 0;
}

/* ── Focus indicators (always visible, not device-gated) ── */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.email-item:focus-visible {
  outline-offset: -3px;
}
/* On the dark skip-nav box the blue outline would lack contrast.
   Use an inset white outline instead */
.skip-nav:focus-visible {
  outline-color: var(--on-dark);
  outline-offset: -4px;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline-offset: 4px;
}

/* ── Hero ──────────────────────────────────── */
.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--text);
}
/* From md up: text on the left, large portrait on the right  */
.hero-inner picture {
  flex-shrink: 0;
  /* Nudge the portrait down so it does not rise above the
     cap height of the "Oliver Smitkowski" heading */
  margin-top: 12px;
}
.hero-photo {
  display: none;
  width: 216px;
  height: auto;
  border-radius: var(--radius);
}
@media (min-width: 768px) {
  .hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
  .hero-photo {
    display: block;
  }
}
/* Fixed dimensions in CSS: the Tailwind preflight (img{height:auto})
   overrides height attributes — without these rules the non-square
   source images would distort into pill shapes */
.hero-avatar {
  width: 88px;
  height: 88px;
}
.profile-avatar {
  width: 80px;
  height: 80px;
}
.hero-label { color: var(--text-secondary); }
.hero-tagline { color: var(--text-body); }
/* Visibly separate the two tagline statements */
.hero-tagline p + p { margin-top: 5px; }

/* ── Static text version (no-JS fallback) ── */
#stations-static article { margin-bottom: 32px; }
#stations-static h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
#stations-static p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 12px;
}
#stations-static a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#stations-static strong {
  color: var(--text);
  font-weight: 600;
}
#stations-static .station-period {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Chat (mobile) ─────────────────────────── */
.chat-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 14px;
}
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
/* Dimensions only; shape/cropping come uniformly from
   the rounded-full + object-cover classes everywhere */
.chat-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-avatar-spacer {
  width: 28px;
  flex-shrink: 0;
}
.chat-bubble {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  max-width: 78%;
  line-height: 1.45;
  font-size: 0.9375rem;
  color: var(--text-body);
}
.chat-bubble strong {
  color: var(--text);
  font-weight: 600;
}
.chat-bubble a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Station subject: bold, but not larger than the bubble text */
.chat-bubble-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.chat-tag-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 14px;
}
.chat-tag {
  background-color: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  display: inline-block;
}
/* ── Email client (desktop) ────────────────── */
.email-client-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  min-height: 420px;
  /* one alignment axis with hero/footer (max-w-4xl) */
  max-width: 56rem;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.email-list-panel {
  width: 300px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.profile-head {
  padding: 28px 20px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.profile-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  text-align: center;
}
.profile-loc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 3px;
  text-align: center;
}
.email-list-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.email-list {
  overflow-y: auto;
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.email-item {
  appearance: none;
  background: none;
  font-family: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  display: block;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.1s;
}
.email-item.active {
  background-color: var(--active-bg);
  border-left-color: var(--accent);
}
.email-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.email-item-from {
  flex: 1;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-item-date {
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.email-item-subject {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 3px;
}
.email-item-preview {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.email-content-panel {
  flex: 1;
  background: var(--surface);
  overflow-y: auto;
  padding: 36px 44px;
}
.email-content-from {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.email-content-subject {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.25;
}
.email-content-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}
.email-content-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-body);
}
.email-content-body p {
  margin-bottom: 16px;
}
.email-content-body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.email-content-body strong {
  color: var(--text);
  font-weight: 600;
}

/* ── Shared ────────────────────────────────── */
/* Passive label like .chat-tag (surface-alt, borderless) */
.keyword-chip {
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 6px 15px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.btn-primary {
  background-color: var(--brand);
  color: var(--on-dark);
  text-decoration: none;
}
.btn-secondary {
  color: var(--text);
  border: 1px solid var(--text-secondary);
  text-decoration: none;
}
.footer-text { color: var(--text-secondary); }
/* <address> renders italic by default — reset to match the footer text */
.footer-address {
  font-style: normal;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.link-footer {
  color: var(--text-secondary);
  text-decoration: none;
  /* larger touch target without any visible layout change */
  display: inline-block;
  padding: 8px 6px;
  margin: -8px -6px;
}
.site-footer { border-top: 1px solid var(--border); }

/* ── Legal page (datenschutz.html) ──────────── */
.legal-page h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 24px;
}
.legal-page h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}
.legal-page p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 12px;
}
/* Restore bullets + indent removed by the Tailwind preflight */
.legal-page ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-body);
}
.legal-page a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-stand {
  margin-top: 32px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.legal-page .back-link {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 28px;
  /* larger touch target without any visible layout change */
  padding: 8px 6px;
  margin-left: -6px;
}

/* .sr-only comes from the generated Tailwind CSS */

/* ── Hover (only real pointer + hover devices) ──
   Static colors before color-mix() = fallback for browsers
   without color-mix support (< Chrome 111 / Safari 16.2) */
@media (any-hover: hover) and (any-pointer: fine) {
  .btn-primary:hover {
    background-color: #5e6e83;
    background-color: color-mix(in srgb, var(--brand) 85%, #fff);
  }
  .btn-secondary:hover  { border-color: var(--text); }
  .link-footer:hover    { color: var(--text); }
  .chat-bubble a:hover  { color: var(--text-secondary); }
  .email-item:hover:not(.active) {
    background-color: #f3f4f6;
    background-color: color-mix(in srgb, var(--surface) 60%, var(--bg));
  }
  .email-content-body a:hover { color: var(--text-secondary); }
  .legal-page a:hover { color: var(--text-secondary); }
  .legal-page .back-link:hover { color: var(--text); }
}

/* ── Print: text version instead of the interactive views ── */
@media print {
  .js-view, .skip-nav { display: none !important; }
  .js #stations-static { display: block; }
  #stations-static a[href^="http"]::after { content: " (" attr(href) ")"; }
}