/* RIDA optimum — lokale Startseite. Gemeinsame Markentokens: ../styles.css */
:root {
  --start-ground: #f6f6f3;
  --start-ink: #08364e;
  --start-muted: #53616b;
  --start-line: #dadfdf;
  --start-red: #af2926;
}
html { min-width: 320px; background: var(--start-ground); }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--start-ground); color: var(--start-ink); font-family: var(--font-ui), Arial, sans-serif; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid #007dad; outline-offset: 5px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; background: white; color: var(--start-ink); padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.topbar { min-height: 88px; padding: 24px 40px; background: #003456; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: flex-end; gap: 12px; color: white; text-decoration: none; flex-shrink: 0; }
.logo:hover { color: white; }
.logo img { display: block; width: auto; height: 28px; }
.logo span { font-family: var(--font-prose), Georgia, serif; font-size: 22px; line-height: 1; font-weight: 600; transform: translateY(2px); }
.trial-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; color: white; border: 1px solid #8ba9bb; border-radius: 3px; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.trial-link:hover { background: rgba(255,255,255,.1); border-color: white; color: white; }
.trial-link:focus-visible { outline-color: white; }
main { width: min(1200px, calc(100% - 96px)); margin: 0 auto; padding: 56px 0 64px; flex: 1; }
main:focus { outline: none; }
.intro { margin-bottom: 36px; }
.eyebrow { margin: 0; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--start-muted); }
.intro > .eyebrow { color: var(--start-red); margin-bottom: 12px; }
h1 { font-family: var(--font-prose), Georgia, serif; font-size: clamp(28px, 2.5vw, 34px); line-height: 1.25; font-weight: 500; letter-spacing: -.025em; margin: 0 0 12px; }
.intro-copy { color: var(--start-muted); font-size: 18px; line-height: 1.6; margin: 0; max-width: 760px; }
.research-grid { grid-auto-rows: 1fr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.research-card { display: flex; flex-direction: column; padding: 30px 32px 28px; background: white; border: 1px solid var(--start-line); border-radius: 4px; text-decoration: none; color: var(--start-ink); transition: border-color .15s ease, box-shadow .15s ease; }
a.research-card:hover, .compact-card:hover { border-color: #8eabb9; box-shadow: 0 4px 16px rgba(0,57,94,.05); color: var(--start-ink); }
.card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.module-icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--start-ink); }
.research-card h2 { font-family: var(--font-prose), Georgia, serif; font-size: 25px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; margin: 0 0 12px; }
.research-card > p { font-size: 16px; line-height: 1.65; color: var(--start-muted); max-width: 420px; margin: 0 0 28px; }
.card-bottom { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; }
.action { display: inline-flex; justify-content: space-between; align-items: center; gap: 26px; min-height: 46px; padding: 10px 18px; border: 1px solid var(--start-ink); border-radius: 3px; font-size: 15px; font-family: inherit; font-weight: 600; line-height: 1.5; }
.action span { font-size: 19px; line-height: 1; }
.action-primary { color: white; background: var(--start-ink); }
a.research-card:hover .action-primary { background: #004f70; }
.action-secondary { color: var(--start-muted); background: #f7f8f8; border-color: #d1d8db; }
.action:disabled { cursor: not-allowed; }
.card-detail { color: var(--start-muted); font-size: 13px; }
.knowledge { margin-top: 36px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
.section-heading h2 { font-size: 17px; font-weight: 600; margin: 0; }
.section-heading > span { color: var(--start-muted); font-size: 13px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compact-card { display: flex; align-items: flex-start; gap: 20px; background: white; border: 1px solid var(--start-line); border-radius: 4px; padding: 26px 28px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.compact-card > .module-icon { width: 28px; height: 28px; margin-top: 3px; }
.compact-content { min-width: 0; }
.title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.title-line h3 { font-family: var(--font-prose), Georgia, serif; font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 5px; background: #155675; color: #fff; font-size: 12px; line-height: 1.35; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.compact-content p { color: var(--start-muted); font-size: 15px; line-height: 1.6; margin: 10px 0 16px; }
.text-action { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.compact-card:hover .text-action { text-decoration: underline; text-underline-offset: 4px; }
.footer { min-height: 74px; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 30px; border-top: 1px solid var(--start-line); font-size: 13px; color: var(--start-muted); }
.footer-separator { margin: 0 12px; color: #98a3aa; }
.footer nav { display: flex; flex-wrap: wrap; gap: 26px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--start-ink); }
@media (min-width: 1600px) { main { padding-top: 68px; } }
@media (max-width: 1000px) { main { width: calc(100% - 64px); padding-top: 40px; } .research-card { padding: 26px; } .compact-card { padding: 24px; gap: 15px; } .title-line h3 { font-size: 19px; } }
@media (max-width: 760px) {
  .topbar { min-height: 76px; padding: 22px 24px; }
  .topbar { gap: 12px; flex-wrap: wrap; }
  .trial-link { padding: 8px 12px; font-size: 14px; }
  main { width: calc(100% - 40px); padding: 32px 0 40px; }
  .intro { margin-bottom: 28px; }
  h1 { max-width: 520px; }
  .intro-copy { font-size: 16px; }
  .desktop-break { display: none; }
  .research-grid, .knowledge-grid { grid-template-columns: 1fr; gap: 16px; }
  .research-card { padding: 24px; }
  .card-top { margin-bottom: 18px; }
  .research-card h2 { font-size: 23px; }
  .research-card > p { max-width: none; margin-bottom: 24px; }
  .knowledge { margin-top: 28px; }
  .section-heading > span { display: none; }
  .compact-card { padding: 22px; }
  .footer { padding: 20px 24px; font-size: 12px; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Dezente juristische Wasserzeichen; rein dekorativ und ohne Interaktion. */
.research-card, .compact-card { position: relative; isolation: isolate; overflow: hidden; }
.research-card::before, .compact-card::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 160px; height: 160px; top: 10px; right: -18px;
  background-repeat: no-repeat; background-size: contain; opacity: .095;
}
.compact-card::before { width: 142px; height: 142px; top: 8px; right: -20px; opacity: .075; }
.compact-card:first-child::before { opacity: .045; width: 136px; height: 136px; top: -6px; right: -12px; }
.research-card:first-child::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%2308364e%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M60%2019v79M40%20105h40M47%2098h26M24%2037h72M60%2023l-7%209h14l-7-9ZM24%2038%209%2070h30L24%2038Zm72%200L81%2070h30L96%2038Z%22%2F%3E%3Cpath%20d%3D%22M9%2070c2%2018%2028%2018%2030%200M81%2070c2%2018%2028%2018%2030%200%22%2F%3E%3C%2Fsvg%3E"); }
.research-card:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%2308364e%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M24%20106H12V10h54l18%2018v24M66%2010v18h18M25%2041h43M25%2052h26M25%2064h18M25%2076h16%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2278%22%20r%3D%2224%22%2F%3E%3Cpath%20d%3D%22m87%2095%2022%2022M59%2072h22M59%2081h15%22%2F%3E%3C%2Fsvg%3E"); }
.comments-card::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%2308364e%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ctext%20x%3D%2260%22%20y%3D%2297%22%20text-anchor%3D%22middle%22%20fill%3D%22%2308364e%22%20stroke%3D%22none%22%20font-family%3D%22Georgia%2CTimes%20New%20Roman%2Cserif%22%20font-size%3D%22110%22%20font-weight%3D%22400%22%3E%C2%A7%3C%2Ftext%3E%3C%2Fsvg%3E"); }
.amendments-card::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%2308364e%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2037%2060%2010l48%2027H12Zm5%207h86M17%20100h86M10%20107h100M7%20113h106%22%2F%3E%3Cpath%20d%3D%22M24%2046v51m7-51v51m15-51v51m7-51v51m15-51v51m7-51v51m15-51v51m7-51v51%22%2F%3E%3Cpath%20d%3D%22M54%2029h12%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 760px) { .research-card::before { width: 132px; height: 132px; } .compact-card::before { width: 116px; height: 116px; opacity: .06; } }

@media (max-width: 760px) { .compact-card:first-child::before { opacity: .04; } }


/* Zusatzfunktionen: kompakter und visuell nachgeordnet. */
.extras { margin-top: 26px; }
.extras > h2 { margin: 0 0 12px; color: var(--start-muted); font-size: 14px; font-weight: 600; }
.extras-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.extra-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border: 1px solid var(--start-line); border-radius: 4px; background: #fafbf9; color: var(--start-ink); }
.extra-icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; color: var(--start-muted); }
.extra-content { min-width: 0; }
.extra-content h3 { margin: 0; font-family: var(--font-ui), Arial, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; }
.extra-content p { margin: 5px 0 4px; color: var(--start-muted); font-size: 14px; line-height: 1.5; }
.extra-status { color: var(--start-muted); font-size: 11px; line-height: 1.4; }
@media (max-width: 760px) { .extras-grid { grid-template-columns: 1fr; gap: 12px; } .extra-card { padding: 15px 18px; } }

a.extra-card { text-decoration: none; }
a.extra-card:hover { border-color: #8eabb9; color: var(--start-ink); background: white; }
a.extra-card .extra-status { color: #285c78; }

/* Einheitliche Hauptkacheln und dezente Startaktionen. */
.action { min-height:38px; padding:7px 14px; gap:18px; border-color:#9aafb9; background:#f2f6f7; color:var(--start-ink); font-size:14px; font-weight:600; text-decoration:none; }
.action span { font-size:17px; }
.action:hover, a.research-card:hover .action { background:#e5eef2; border-color:#60869a; }
.comments-card::before { opacity:.045; }
.extra-card { background:white; }
.extra-content h3 { font-family:var(--font-prose),Georgia,serif; font-weight:500; }
.extra-status { font-size:13px; font-weight:600; }
.start-links { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:16px 20px; }
.start-links a { display:inline-flex; align-items:center; gap:12px; font-size:15px; text-decoration:underline; text-underline-offset:4px; }
.start-links a:hover { color:#005c8c; }

/* RIDA Startseite: Schriftfarben Variante 1B, 19.10.2026. */
.research-card #ki-title { color: #2459cf; }
.research-card #search-title { color: #00845c; }
.research-card #comments-title { color: #ba2860; }
.research-card #amendments-title { color: #983fc2; }
