/* =============================================================
   Nils Kochan - Projektboard
   Komplett neue Farbwelt, hell und dunkel.
   ============================================================= */

:root {
  color-scheme: light;

  --bg: #f5f4f1;
  --bg-deep: #ebe9e4;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --ink: #16181d;
  --ink-soft: #454a54;
  --muted: #71767f;
  --line: #e2e0da;
  --line-strong: #d0cdc5;

  /* Taetigkeitsfelder - tragen die Farbe auf dem Board */
  --cat-software: #2563d8;
  --cat-herausgeber: #b0472a;
  --cat-medien: #a03090;

  /* Status - bewusst neutral, damit die Feldfarben allein sprechen */
  --idee: var(--line-strong);
  --arbeit: var(--muted);
  --live: var(--ink);
  --erledigt: var(--line-strong);

  --accent: var(--ink);
  --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.05), 0 1px 3px rgba(20, 22, 28, 0.04);
  --shadow-2: 0 10px 24px -8px rgba(20, 22, 28, 0.18), 0 2px 6px rgba(20, 22, 28, 0.06);
  --shadow-3: -24px 0 60px -20px rgba(20, 22, 28, 0.35);

  --radius: 12px;
  --radius-lg: 18px;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --gutter: clamp(1rem, 4vw, 3.5rem);
}

/* Systemeinstellung dunkel - gilt, solange nicht ausdruecklich hell gewaehlt wurde */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0d0e12;
    --bg-deep: #08090c;
    --surface: #16181e;
    --surface-2: #1c1f26;
    --ink: #e9eaee;
    --ink-soft: #b9bdc6;
    --muted: #868c98;
    --line: #262a33;
    --line-strong: #333845;

    --cat-software: #7fa9ff;
    --cat-herausgeber: #ff8a63;
    --cat-medien: #e98ad4;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 12px 28px -10px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-3: -24px 0 70px -20px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d0e12;
  --bg-deep: #08090c;
  --surface: #16181e;
  --surface-2: #1c1f26;
  --ink: #e9eaee;
  --ink-soft: #b9bdc6;
  --muted: #868c98;
  --line: #262a33;
  --line-strong: #333845;

  --cat-software: #7fa9ff;
  --cat-herausgeber: #ff8a63;
  --cat-medien: #e98ad4;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 12px 28px -10px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-3: -24px 0 70px -20px rgba(0, 0, 0, 0.8);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Karten sind Buttons mit display:flex - das UA-[hidden] allein reicht nicht */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------ Kopf ------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
  border-bottom: 2px solid var(--line);
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand-mark {
  width: 44px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.brand-tag {
  font-size: 0.8125rem;
  color: var(--muted);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.theme-toggle:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}

.theme-toggle-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  border: 2px solid var(--ink);
}

/* ------------------------------ Lede ------------------------------ */

.lede {
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(1.75rem, 4vw, 2.5rem);
  max-width: 44rem;
}

.lede h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.lede p {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

/* ------------------------------ Filterleiste ------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 var(--gutter);
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.filter[data-category="software"]    { --cat: var(--cat-software); }
.filter[data-category="herausgeber"] { --cat: var(--cat-herausgeber); }
.filter[data-category="medien"]      { --cat: var(--cat-medien); }

.filter-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cat);
  flex-shrink: 0;
}

.filter:hover {
  border-color: var(--cat, var(--ink-soft));
  color: var(--ink);
}

.filter[aria-pressed="true"] {
  color: var(--cat, var(--ink));
  border-color: var(--cat, var(--ink));
  background: var(--surface-2);
  background: color-mix(in srgb, var(--cat, var(--ink)) 12%, var(--surface));
  font-weight: 600;
}

.filter--all[aria-pressed="true"] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.filter:focus-visible {
  outline: 2px solid var(--cat, var(--ink));
  outline-offset: 2px;
}

.filter-status {
  margin: 0.75rem 0 0;
  padding: 0 var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ------------------------------ Board ------------------------------ */

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem var(--gutter) clamp(3rem, 8vw, 5rem);
  align-items: start;
}

.column {
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  padding: 1rem 0.875rem 1.125rem;
  position: relative;
  overflow: hidden;
}

.column::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--col);
}

.column[data-status="idee"]   { --col: var(--idee); }
.column[data-status="arbeit"] { --col: var(--arbeit); }
.column[data-status="live"]   { --col: var(--live); }
.column[data-status="erledigt"]   { --col: var(--erledigt); }

/* "Ruht" unterscheidet sich durch die Form, nicht nur durch den Grauwert */
.column[data-status="erledigt"] .column-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--muted);
}

/* Die Ueberschrift traegt nur den Knopf - alles Sichtbare steckt im Knopf */
.column-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.column-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.column-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
}

/* schiebt Zaehler und Pfeil nach rechts */
.column-label { margin-right: auto; }

.column-head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col);
  flex-shrink: 0;
}

.column-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--bg-deep);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  line-height: 1.5;
}

.column-panel {
  margin-top: 0.35rem;
}

/* Zugeklappt braucht die Spalte unten keinen Platz mehr */
.column:has(.column-head[aria-expanded="false"]) {
  padding-bottom: 0.875rem;
}

.column-note {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.column-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.column-empty {
  margin: 0;
  padding: 1.25rem 0.75rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Aufklapper ab der 6. Karte */
.column-more {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.column-more::before {
  content: "▾ ";
}

.column-more[aria-expanded="true"]::before {
  content: "▴ ";
}

.column-more:hover {
  background: var(--surface);
  border-color: var(--ink-soft);
  color: var(--ink);
}

.column-more:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ------------------------------ Anfragekarte ------------------------------ */

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 1rem 0.9rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
  border-color: var(--ink-soft);
  border-style: solid;
  background: var(--surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.contact-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.contact-card-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
}

.contact-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.contact-card-text {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.contact-card-cta {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

.contact-card:hover .contact-card-cta { color: var(--ink); }

/* ------------------------------ Karten ------------------------------ */

.card {
  background: var(--surface);
  /* Erst neutral - Browser ohne color-mix bleiben dabei */
  border: 2px solid var(--line);
  /* Die Kategoriefarbe steckt im ganzen Rahmen, gedaempft gemischt.
     Voll gesaettigt waere sie bei 31 Karten zu laut; die volle Farbe
     kommt beim Ueberfahren und im aufgeklappten Zustand. */
  border-color: color-mix(in srgb, var(--cat) 45%, var(--line));
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.card[data-category="software"]    { --cat: var(--cat-software); }
.card[data-category="herausgeber"] { --cat: var(--cat-herausgeber); }
.card[data-category="medien"]      { --cat: var(--cat-medien); }

/* ------------------------------ Hover ------------------------------

   Der Rahmen nimmt die volle Kategoriefarbe an und bekommt einen
   weichen Ring in derselben Farbe - als wuerde die Karte kurz
   aufleuchten. Zusammen mit dem leichten Anheben wirkt sie greifbar,
   ohne dass sich das Layout verschiebt (der Ring ist ein Schatten,
   kostet also keinen Platz).
   ------------------------------------------------------------------ */

.card:hover,
.card:focus-within {
  border-color: var(--cat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 15%, transparent),
              var(--shadow-2);
}

/* Angehoben wird nur die zugeklappte Karte - eine lange aufgeklappte
   Karte, die beim Drueberfahren springt, wirkt unruhig. */
.card:not(:has(.card-head[aria-expanded="true"])):hover {
  transform: translateY(-2px);
}

/* Logo und Pfeil ziehen mit */
.card-head:hover .card-logo {
  transform: scale(1.06);
}

.card-head:hover .chevron {
  border-color: var(--cat);
}

/* Aufgeklappt bleibt die Karte hervorgehoben */
.card:has(.card-head[aria-expanded="true"]) {
  border-color: var(--cat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 12%, transparent),
              var(--shadow-2);
}

.card-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  /* Fingerfreundlich: mindestens 44 px hoch */
  min-height: 44px;
  padding: 0.75rem 0.8rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.card-head:focus-visible {
  outline: 2px solid var(--cat);
  outline-offset: -2px;
}

/* ------------------------------ Ausgeklappter Bereich ------------------------------ */

.card-panel {
  padding: 0 0.8rem 0.9rem;
  border-top: 2px solid var(--line);
  padding-top: 0.9rem;
}

.card-image {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 0 0.9rem;
  border: 2px solid var(--line);
  border-radius: 8px;
}

.card-role {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.card-facts {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  border-top: 2px solid var(--line);
}

.card-facts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--line);
  font-size: 0.8125rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  transition: opacity 0.15s;
}

.card-link:hover { opacity: 0.85; }
.card-link:focus-visible { outline: 2px solid var(--cat); outline-offset: 3px; }

/* ------------------------------ Pfeil ------------------------------ */

.chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform 0.18s ease;
}

[aria-expanded="true"] > .chevron { transform: rotate(-135deg); }

.card-headtext {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  /* fuellt den Platz zwischen Logo und Pfeil */
  flex: 1;
}

/* Logos kommen von verschiedenen Websites: manche haben einen eigenen
   Hintergrund, andere sind dunkle Strichzeichnung auf transparent. Eine
   helle Kachel in BEIDEN Themes ist das einzige, was für alle funktioniert -
   sonst verschwindet das Sagenpfad-Gespenst im Dunkelmodus. */
.card-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 3px;
  object-fit: contain;
  background: #ffffff;
  border: 2px solid var(--line);
  border-radius: 8px;
  transition: transform 0.2s ease;
}

/* Projektbilder sind Hochformat (Poster, Screenshots). Ein Breitbild-
   Zuschnitt würde Titelzeilen abschneiden, darum eine hochkante Vorschau
   auf der Karte - gross und vollstaendig gibt es das Bild im Detailpanel. */
.card-logo--thumb {
  width: 50px;
  height: 64px;
  padding: 0;
  object-fit: cover;
  background: var(--surface-2);
  border-radius: 6px;
}

.card-logo--mono {
  background: var(--surface-2);
  border-color: var(--cat);
  color: var(--cat);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0;
}

.card-logo--mono { font-size: 1rem; }

.card-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cat);
}

.card-cat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat);
  flex-shrink: 0;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.card-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.tag {
  font-size: 0.6875rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
}

/* ------------------------------ Drawer ------------------------------ */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 11, 14, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.drawer-scrim.is-open { opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(26rem, 100%);
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-left: 2px solid var(--line);
  box-shadow: var(--shadow-3);
  padding: 1.75rem clamp(1.25rem, 4vw, 2rem) 2.5rem;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.drawer.is-open { transform: translateX(0); }

.drawer[data-category="software"]    { --cat: var(--cat-software); }
.drawer[data-category="herausgeber"] { --cat: var(--cat-herausgeber); }
.drawer[data-category="medien"]      { --cat: var(--cat-medien); }

.drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.drawer-close:hover { color: var(--ink); border-color: var(--line-strong); }

.drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-right: 2.5rem;
}

.drawer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  border: 2px solid;
}

.drawer-status {
  color: var(--muted);
  border-color: var(--line-strong);
}

.drawer-title {
  margin: 0.6rem 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  /* Trennung regelt der Silbentrennungs-Block am Dateiende */
}

.drawer-role {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.fact-key {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fact-value {
  color: var(--ink);
  text-align: right;
}

/* ------------------------------ Anfrageformular ------------------------------ */

.form {
  margin-top: 1.5rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 1rem;
}

.form-row label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.req { color: var(--cat-herausgeber); }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.15s, background-color 0.15s;
}

.form textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

.form input::placeholder { color: var(--muted); }

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
  background: var(--surface);
}

.form input:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.form-check input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--ink);
}

.form-check a { color: var(--ink-soft); }

/* Honigtopf gegen Bots - fuer Menschen unsichtbar, aber nicht display:none,
   damit Bots ihn fuer ein echtes Feld halten. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.3rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.form-submit:hover:not(:disabled) { opacity: 0.85; }

.form-submit:disabled {
  opacity: 0.5;
  cursor: progress;
}

.form-note {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.form-note:empty { display: none; }

.form-note--ok {
  color: var(--ink);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--line-strong);
  background: var(--surface-2);
}

.form-note--error { color: var(--cat-herausgeber); }

/* ------------------------------ Rechtstexte ------------------------------ */

.legal {
  max-width: 46rem;
  padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
}

.legal h1 {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.legal h2 {
  margin: 2rem 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.legal p,
.legal li {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.legal ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}

.legal li { margin-bottom: 0.35rem; }

.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.legal code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--ink);
}

.legal-address {
  font-style: normal;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.legal-source {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Auf den Rechtstexten führt der Knopf oben rechts zurück zum Board */
a.theme-toggle { text-decoration: none; }

/* ------------------------------ Fuss ------------------------------ */

.site-footer {
  border-top: 2px solid var(--line);
  padding: 1.75rem var(--gutter) 2.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.site-footer p { margin: 0 0 0.35rem; }
.site-footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.site-footer a:hover { color: var(--ink); }
.site-footer-legal { color: var(--muted); }

/* ------------------------------ Schmale Fenster ------------------------------ */

/* Ab hier passen keine vier Spalten mehr nebeneinander. Fruener wurde
   waagerecht gescrollt - auf dem Handy war das die schlechteste Loesung:
   man musste seitlich wischen, um ueberhaupt zu sehen, dass es weitere
   Spalten gibt. Jetzt stehen sie untereinander und lassen sich einzeln
   zuklappen, so bleibt das ganze Board mit einem Blick ueberschaubar. */
@media (max-width: 1040px) {
  .board {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 560px) {
  .site-header { padding-block: 0.875rem; }
  .brand-tag { display: none; }

  .drawer { width: 100%; border-left: none; }

  .lede { padding-top: 2rem; }

  /* Spaltenrahmen schmaler, damit den Karten mehr Breite bleibt */
  .column { padding: 0.875rem 0.625rem 1rem; }
  .card-head { padding: 0.75rem 0.65rem; }
  .card-panel { padding-left: 0.65rem; padding-right: 0.65rem; }

  /* Die Filterleiste soll nicht die halbe Seite fuellen */
  .filter { padding: 0.4rem 0.75rem; }

  /* Bild im aufgeklappten Bereich darf die volle Kartenbreite nutzen */
  .card-image { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Auf den Rechtstexten ist die Wortmarke ein Link zurueck zum Board */
a.brand {
  text-decoration: none;
  color: inherit;
}

/* =============================================================
   Silbentrennung

   Deutsche Komposita werden lang ("Online-Streitbeilegungs-
   Verordnung", 34 Zeichen) und sprengen schmale Spalten. Der
   Browser trennt sie korrekt mit Bindestrich - aber nur, wenn
   er die Sprache kennt. Dafuer steht lang="de" im HTML; ohne
   das passiert hier gar nichts.

   hyphenate-limit-chars verhindert haessliche Kurzfragmente:
   erst ab 6 Zeichen trennen, mindestens 3 davor und 3 danach.
   Also "Bestands-verwaltung", nicht "Be-standsverwaltung".
   ============================================================= */

.lede p,
.column-note,
.card-title,
.card-desc,
.contact-card-title,
.contact-card-text,
.drawer-title,
.drawer-role,
.fact-value,
.form-check,
.legal h1,
.legal h2,
.legal p,
.legal li,
.legal-address {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  /* Notnagel fuer Ungetrenntes wie lange URLs oder Domainnamen */
  overflow-wrap: break-word;
}

/* Die Schlagzeile bleibt ungetrennt - in 3rem-Typografie sieht
   ein Trennstrich schlecht aus. Nur Ueberlauf wird abgefangen. */
.lede h1 {
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Kurze Auszeichnungen nie trennen: Feldnamen, Schlagworte,
   Spaltenkoepfe, Knoepfe. Die sind kurz genug und wuerden
   getrennt nur unruhig wirken. */
.column-label,
.column-count,
.card-cat,
.drawer-status,
.fact-key,
.filter,
.brand-name,
.tag {
  -webkit-hyphens: manual;
  hyphens: manual;
}