/* Gemeinsames Stilblatt für UG-Startseite, Lösungsseiten, Kontakt und die neuen
   Rechtsseiten. Farben und Schrift wie auf der App-Seite. Urbanist wird selbst
   gehostet, kein Google-Fonts-CDN. Schrift steht unter OFL 1.1. */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/urbanist-latin.woff2') format('woff2');
}

:root {
  --papier: #F3EFE6;
  --karte: #E9E4D8;
  --tinte: #2B2B30;
  --grau: #6b6b72;
  --salbei: #718563;
  --salbei-hell: #8FA485;
  --salbei-mark: #7C946E;
  --salbei-dunkel: #4F5F47;
  --salbei-text: #5F7157;
  --rand: rgba(79, 95, 71, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--papier);
  color: var(--salbei-text);
  font-family: Urbanist, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--salbei); text-decoration: none; }
a:hover { color: var(--salbei-dunkel); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--salbei);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Rahmen ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem);
}
.marke { display: flex; align-items: center; gap: 9px; color: var(--salbei-mark); text-decoration: none; }
.marke:hover { text-decoration: none; color: var(--salbei-mark); }
.marke i { display: block; width: 30px; height: 30px; border-radius: 9px; background: var(--salbei-hell); }
.marke b { font: 800 18px Urbanist; letter-spacing: -.03em; }
.kopf nav .menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; font: 600 .95rem Urbanist; }
.kopf nav a[aria-current] { color: var(--salbei-dunkel); }
/* Untermenü bei Lösungen. Öffnet bei Hover und bei Tastaturfokus, per Tipp geht der Link auf /loesungen/. */
.menue { position: relative; }
.menue > a { display: inline-block; padding: .35rem 0; }
.menue .unter {
  display: none; position: absolute; top: 100%; left: -.9rem; z-index: 20; min-width: 13rem; list-style: none;
  background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: .45rem;
  box-shadow: 0 10px 28px rgba(43, 43, 48, .1);
}
.menue:hover .unter, .menue:focus-within .unter { display: block; }
.menue .unter a { display: block; padding: .5rem .8rem; border-radius: 9px; }
.menue .unter a:hover { background: var(--karte); text-decoration: none; }
main { flex: 1; width: 100%; }
.fuss {
  max-width: 1100px; width: 100%; margin: 0 auto;
  padding: 2rem clamp(1.25rem, 5vw, 3rem) 2.2rem;
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: space-between;
  border-top: 1px solid var(--rand);
  font: 300 .85rem Urbanist; color: var(--salbei-hell);
}
.fuss nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Inhalt ---------- */
.spalte { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.augenbraue { font: 600 .72rem Urbanist; letter-spacing: .22em; text-transform: uppercase; color: var(--salbei-hell); }
h1.gross {
  margin-top: 1rem;
  font: 700 clamp(2.4rem, 6.4vw, 4.6rem)/1.04 Urbanist; letter-spacing: -.04em; color: var(--salbei-dunkel);
}
.lead { margin-top: 1.4rem; font: 300 clamp(1.05rem, 1.7vw, 1.3rem)/1.6 Urbanist; color: var(--salbei-text); max-width: 40ch; }
.held { padding: clamp(3rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
h2.titel { font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 Urbanist; letter-spacing: -.03em; color: var(--salbei-dunkel); }
.abschnitt { padding: 2.2rem 0; }
.abschnitt p { margin-top: .9rem; font: 300 1.05rem/1.7 Urbanist; max-width: 62ch; }

.knopf {
  display: inline-block; font: 600 .95rem Urbanist; color: #fff; background: var(--salbei);
  border: 0; border-radius: 999px; padding: .65rem 1.5rem; cursor: pointer;
}
.knopf:hover { color: #fff; background: var(--salbei-dunkel); text-decoration: none; }
.knopf.leise { color: var(--salbei-text); background: transparent; border: 1px solid rgba(79, 95, 71, .3); }
.knopf.leise:hover { color: var(--salbei-dunkel); background: var(--karte); }
.knopf.aus, .knopf.aus:hover { color: var(--salbei-text); background: var(--karte); cursor: default; }
.pille {
  display: inline-block; font: 600 .82rem Urbanist; color: var(--salbei-dunkel);
  background: var(--karte); border-radius: 999px; padding: .36rem .95rem;
}

/* ---------- Kacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; }
.kachel {
  display: flex; flex-direction: column; gap: .7rem;
  background: #fff; border: 1px solid var(--rand); border-radius: 20px;
  padding: 1.8rem 1.9rem; color: var(--salbei-text); text-decoration: none;
  box-shadow: 0 2px 12px rgba(43, 43, 48, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kachel:hover { text-decoration: none; color: var(--salbei-text); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(43, 43, 48, .09); }
.kachel .art { font: 700 .7rem Urbanist; letter-spacing: .18em; text-transform: uppercase; color: var(--salbei-hell); }
.kachel h2 { font: 700 1.9rem/1.1 Urbanist; letter-spacing: -.03em; color: var(--salbei-dunkel); }
.kachel p { font: 300 1.02rem/1.6 Urbanist; flex: 1; }
.kachel .unten { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.kachel .weiter { font: 600 .95rem Urbanist; color: var(--salbei); }

/* ---------- Funktionsliste ---------- */
.funktionen { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; margin-top: 1.4rem; }
.funktionen li {
  background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 1.3rem 1.4rem;
  font: 300 1rem/1.6 Urbanist;
}
.funktionen strong { display: block; font: 700 1.05rem Urbanist; color: var(--salbei-dunkel); margin-bottom: .3rem; letter-spacing: -.01em; }
.band {
  background: var(--karte); border-radius: 20px; padding: 1.6rem 1.8rem; margin-top: 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; justify-content: space-between;
}
.band p { margin: 0; max-width: 46ch; }

/* ---------- Formular ---------- */
.formular { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; margin-top: 1.6rem; }
.formular label { display: flex; flex-direction: column; gap: .35rem; font: 700 .78rem Urbanist; letter-spacing: .08em; text-transform: uppercase; color: var(--salbei-dunkel); }
.formular input, .formular select, .formular textarea {
  width: 100%; border: 1px solid rgba(79, 95, 71, .25); border-radius: 14px; background: #fff;
  padding: .75rem 1rem; font: 400 1rem Urbanist; color: var(--salbei-dunkel); text-transform: none; letter-spacing: 0;
}
.formular textarea { min-height: 10rem; resize: vertical; }
.formular .hinweis { font: 300 .85rem/1.55 Urbanist; color: var(--salbei-text); max-width: 44ch; }
.formular .senden { align-self: flex-start; }
/* Fangfeld gegen Spam. Nicht per display:none, sonst füllt es mancher Bot nicht. */
.fangfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meldung {
  display: none; margin-top: 1.2rem; max-width: 34rem; padding: .8rem 1.1rem; border-radius: 12px;
  background: rgba(143, 164, 133, .14); border: 1px solid rgba(143, 164, 133, .4); color: var(--salbei-text); font-size: .95rem;
}
.meldung:target { display: block; }

/* ---------- Rechtsseiten (wie bisher) ---------- */
body.recht main { display: flex; justify-content: center; padding: 1rem 1.25rem 2rem; }
body.recht article {
  color: var(--tinte); line-height: 1.65;
  background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(43, 43, 48, .06);
  width: 100%; max-width: 720px; padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
}
body.recht h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
body.recht h2 { font-size: 1.2rem; font-weight: 650; color: var(--salbei); margin: 2.25rem 0 .75rem; }
body.recht p { margin: .75rem 0; }
body.recht ul, body.recht ol { margin: .75rem 0 .75rem 1.4rem; }
body.recht li { margin: .35rem 0; }
body.recht strong { font-weight: 650; }
body.recht address { font-style: normal; margin: .75rem 0; }
body.recht code { background: var(--karte); padding: .05rem .3rem; border-radius: 5px; font-size: .88em; }
.draft-note {
  margin: 1rem 0 .5rem; padding: .7rem 1rem; border-radius: 12px;
  background: rgba(143, 164, 133, .14); border: 1px solid rgba(143, 164, 133, .4);
  color: var(--salbei-text); font-size: .9rem;
}
.ph { font-style: italic; color: var(--salbei-hell); }
.table-wrap { overflow-x: auto; margin: 1rem 0; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 560px; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--papier); }
.table-wrap th { color: var(--salbei); font-weight: 650; border-bottom: 2px solid var(--karte); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel { transition: none; }
  .kachel:hover { transform: none; }
}