/* spipp.com – Glas-Designsystem (Light/Dark). Markenfarben kommen aus brand.css. */
:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-elevated: #ffffff;
  --text: #0b1220;
  --text-secondary: #4a5468;
  --text-tertiary: #536076;
  --border: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
  --glass-shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.12);
  --mark-bg: rgba(var(--brand-rgb), 0.16);
  --link-visited: #6b3fc4;
  --ambient-a: rgba(var(--brand-rgb), 0.20);
  --ambient-b: rgba(120, 180, 255, 0.16);
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --blur: saturate(180%) blur(22px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #05070c;
    --bg-elevated: #0e131c;
    --text: #eef2f8;
    --text-secondary: #a9b3c4;
    --text-tertiary: #8e99ac;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --glass: rgba(22, 28, 40, 0.55);
    --glass-strong: rgba(26, 33, 47, 0.78);
    --glass-highlight: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    --glass-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 52px rgba(0, 0, 0, 0.5);
    --mark-bg: rgba(var(--brand-rgb), 0.28);
    --link-visited: #b39dff;
    --ambient-a: rgba(var(--brand-rgb), 0.22);
    --ambient-b: rgba(40, 90, 200, 0.18);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #05070c;
  --bg-elevated: #0e131c;
  --text: #eef2f8;
  --text-secondary: #a9b3c4;
  --text-tertiary: #8e99ac;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(22, 28, 40, 0.55);
  --glass-strong: rgba(26, 33, 47, 0.78);
  --glass-highlight: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  --glass-shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 52px rgba(0, 0, 0, 0.5);
  --mark-bg: rgba(var(--brand-rgb), 0.28);
  --link-visited: #b39dff;
  --ambient-a: rgba(var(--brand-rgb), 0.22);
  --ambient-b: rgba(40, 90, 200, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--brand-strong); color: var(--on-brand-strong); z-index: 10; }
.skip:focus { top: 12px; }

/* Weiche Lichtflächen im Hintergrund (statisch, keine Animation) */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 15% -10%, var(--ambient-a), transparent 60%),
    radial-gradient(50vmax 40vmax at 100% 10%, var(--ambient-b), transparent 60%),
    radial-gradient(60vmax 50vmax at 50% 120%, var(--ambient-b), transparent 65%);
}

/* Glas-Oberflächen */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}
.glass-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  color: var(--text); font: inherit; font-size: 15px; cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.glass-btn:hover { background: var(--glass-strong); text-decoration: none; }
.glass-btn:active { transform: scale(0.97); }
.glass-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .32em; color: var(--text); }
.logo-mark { width: 1.05em; height: 1.05em; flex: none; color: var(--brand); }
.logo-word { font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.logo-lg { font-size: clamp(52px, 13vw, 84px); }
.logo-sm { font-size: 28px; }

/* Kopfzeile Startseite */
.topbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 0; }
.lang-menu { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); }
.lang-menu a { padding: 8px 12px; border-radius: var(--radius-pill); color: var(--text-secondary); font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; }
.lang-menu a[aria-current="true"] { color: var(--text); background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.lang-menu a:hover { text-decoration: none; color: var(--text); }
.theme-label { font-size: 14px; }

/* Startseite */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px 12vh; gap: 10px; text-align: center; }
.home-logo { margin: 0; line-height: 1; }
.tagline { margin: 0 0 18px; color: var(--text-secondary); font-size: 17px; }
.index-info { margin: 14px 0 0; color: var(--text-tertiary); font-size: 13px; }

/* Suchleiste */
.search { position: relative; width: 100%; }
.search-lg { max-width: 680px; }
.search-sm { max-width: 720px; flex: 1; min-width: 0; }
.search-field { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
  padding: 6px 6px 6px 18px; transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.search-lg .search-field { min-height: 62px; box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow-lift); }
.search-sm .search-field { min-height: 50px; }
/* Fokus deutlich sichtbar (≥ 3:1): durchgehender Rand in Markenfarbe, darum ein weicher Schein. */
.search-field:focus-within { border-color: var(--brand-strong); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 2px var(--brand-strong), 0 0 0 6px var(--focus-ring), var(--glass-shadow-lift); }
.search-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--text-tertiary); stroke-width: 2; stroke-linecap: round; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 17px; padding: 10px 4px; }
.search-field input::placeholder { color: var(--text-tertiary); }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field input:focus-visible { outline: 0; }
.clear-btn { border: 0; background: transparent; color: var(--text-tertiary); font-size: 22px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.clear-btn:hover { background: var(--glass-strong); }
.search-submit { flex: none; border: 0; border-radius: var(--radius-pill); padding: 0 22px; min-height: 48px;
  background: var(--brand-strong); color: var(--on-brand-strong); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: background-color .2s var(--ease), transform .15s var(--ease); }
.search-sm .search-submit { min-height: 40px; padding: 0 16px; font-size: 15px; }
.search-submit:hover { background: var(--brand-active); }
.search-submit:active { transform: scale(0.97); }

/* Vorschläge */
.suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px;
  list-style: none; border-radius: var(--radius-m); text-align: left; background: var(--glass-strong); }
.suggestions li { padding: 11px 14px; border-radius: var(--radius-s); cursor: pointer; display: flex; gap: 10px; align-items: center; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: rgba(var(--brand-rgb), 0.12); }
.suggestions svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-tertiary); stroke-width: 2; stroke-linecap: round; }

/* Ergebnisseite */
.results-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 14px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border); }
.home-link { flex: none; }
.home-link:hover { text-decoration: none; }
.header-actions { margin-left: auto; display: flex; gap: 8px; }
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; max-width: 100vw; }
.categories::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--glass);
  color: var(--text-secondary); font-size: 14px; white-space: nowrap; }
.chip:hover { text-decoration: none; color: var(--text); background: var(--glass-strong); }
.chip[aria-current="page"] { background: var(--brand-strong); border-color: transparent; color: var(--on-brand-strong); font-weight: 600; }
.chip-disabled { opacity: .6; cursor: not-allowed; }
.chip-disabled small { font-size: 11px; color: var(--text-tertiary); }
.results-main { width: 100%; max-width: 760px; padding: 8px 16px 40px; margin-left: clamp(0px, calc((100vw - 1100px) / 2 + 120px), 240px); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.result-meta { margin: 0; color: var(--text-tertiary); font-size: 13px; }
.filters { display: flex; gap: 8px; }
.filters select { min-height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--glass); color: var(--text); padding: 0 12px; font: inherit; font-size: 14px; }
.correction { margin: 4px 0 12px; font-size: 16px; color: var(--text-secondary); }
.correction a { font-weight: 600; font-style: italic; }
.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.result { padding: 14px 16px; border-radius: var(--radius-m); transition: background-color .2s var(--ease); }
.result:hover { background: var(--glass); }
.result-link { display: block; color: inherit; }
.result-link:hover { text-decoration: none; }
.result-link:hover .result-title { text-decoration: underline; text-underline-offset: 3px; }
.result-link:visited .result-title { color: var(--link-visited); }
.result-source { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.favicon { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--border); flex: none; }
.result-host { color: var(--text); font-weight: 500; }
.result-url { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.result-title { margin: 6px 0 4px; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--brand-text); overflow-wrap: anywhere; }
.result-snippet { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.result-snippet time { color: var(--text-tertiary); }
mark { background: var(--mark-bg); color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 600; }
.image-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.image-result { border-radius: var(--radius-m); padding: 8px; overflow: hidden; }
.image-link { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-s); overflow: hidden; background: var(--glass-strong); }
.image-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-caption { margin: 8px 4px 2px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-source { margin: 0 4px; font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice { border-radius: var(--radius-m); padding: 18px 20px; color: var(--text-secondary); }
.notice p { margin: 0 0 6px; }
.notice p:first-child { color: var(--text); font-weight: 600; }
.pager { display: flex; align-items: center; gap: 12px; margin: 24px 0 8px; }
.page-no { color: var(--text-tertiary); font-size: 14px; }
.related { margin-top: 28px; }
.related h2 { font-size: 16px; margin: 0 0 10px; }
.related div { display: flex; flex-wrap: wrap; gap: 8px; }

/* Textseiten */
.page-prose main { width: calc(100% - 32px); max-width: 760px; margin: 24px auto 40px; padding: 24px; border-radius: var(--radius-l); }
.prose h1 { margin-top: 0; letter-spacing: -0.02em; }
.prose h2 { font-size: 18px; margin: 22px 0 6px; }
.prose p { color: var(--text-secondary); }

.site-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); font-size: 13px; }
.site-footer a { color: var(--text-tertiary); }

@media (max-width: 640px) {
  .results-header { flex-wrap: wrap; gap: 10px; }
  .results-header .search { order: 3; flex-basis: 100%; }
  .header-actions .theme-label { display: none; }
  .theme-toggle { padding: 0 12px; }
  .result-title { font-size: 18px; }
  .search-lg .search-submit { padding: 0 16px; }
  .results-main { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-contrast: more) {
  :root { --border: rgba(0, 0, 0, 0.45); --text-tertiary: var(--text-secondary); }
}