/* Gemeinschaftsgetragen — Mockup. Design: Claude-Design-Projekt "Gemeinschaftsgetragen
   Container Webseite" (Papier #f0eee9, Tinte #2A2620, Ocker/Ziegel-Sektoren, harte 3px-Rahmen). */

@font-face { font-family: 'InterFallback'; src: local('Inter'), local('Segoe UI'), local('system-ui'); }

:root {
  --tinte: #2A2620;
  --papier: #f0eee9;
  --creme: #FFFCF3;
  --gelb: #F4C430;
  --ocker: #D9720C;
  --ziegel: #B5490C;
  --gold: #E8A93D;
  --gruen: #2A6B3D;
  --offen: #D98E5C;
  --rand: #F0EDE4;
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--papier); color: var(--tinte); }

/* ---------- Kopf ---------- */
.kopf { background: var(--tinte); color: #FFFDF7; padding: 20px 34px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.kopf .gruss { font: 400 13px Inter, system-ui, sans-serif; opacity: .75; }
.kopf .titel { font: 700 21px Inter, system-ui, sans-serif; }
.kopf .aktionen { display: flex; gap: 10px; align-items: center; }
.kopf a.knopf { border: 1.5px solid #FFFDF7; color: #FFFDF7; text-decoration: none; padding: 8px 14px; font: 600 10.5px Inter, system-ui, sans-serif; letter-spacing: .04em; }
.kopf a.knopf:hover { background: #FFFDF7; color: var(--tinte); }

/* ---------- Fragezeichen ---------- */
.fz { width: 30px; height: 30px; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center;
      font: 700 14px Inter, system-ui, sans-serif; flex: none; cursor: pointer; background: none; color: inherit; padding: 0; }
.fz:hover { background: currentColor; }
.fz:hover::after { content: '?'; color: var(--tinte); }
.fz:hover { color: #fff; }
.fz.klein { width: 22px; height: 22px; font-size: 12px; }

/* ---------- Sektor ---------- */
.sektor { padding: 20px 34px 26px; border-bottom: 3px solid #fff; }
.sektor.s1 { background: var(--ocker); }
.sektor.s2 { background: var(--ziegel); }
.sektor.s3 { background: var(--gold); border-bottom: none; }
.sektor-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.sektor-titel { font: 800 20px Inter, system-ui, sans-serif; color: #fff; }
.sektor.s3 .sektor-titel { color: var(--tinte); }
.sektor .fz { color: #fff; }
.sektor.s3 .fz { color: var(--tinte); }
.sektor-status { font: 700 10.5px Inter, system-ui, sans-serif; letter-spacing: .08em; margin-bottom: 10px; }
.sektor.s1 .sektor-status { color: #FFE3C2; }
.sektor.s2 .sektor-status { color: #F5D2BC; }
.sektor.s3 .sektor-status { color: #5C4614; }
.karten { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Karte ---------- */
.karte { background: #fff; border: 3px solid var(--tinte); box-shadow: 0 2px 0 rgba(0,0,0,.15); width: fit-content; max-width: 100%; }
.karte-zeile { display: flex; min-height: 112px; flex-wrap: wrap; }
.seg { border-right: 2px solid var(--tinte); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.seg:last-child { border-right: none; }
.seg-lbl { font: 700 8px Inter, system-ui, sans-serif; letter-spacing: .07em; color: var(--tinte); opacity: .5; }
.seg-owner { background: var(--gelb); width: 130px; flex: none; }
.seg-topic { background: var(--creme); width: 150px; flex: none; }
.seg-opt { background: #fff; width: 230px; flex: none; }
.seg-wert { font: 700 13px Inter, system-ui, sans-serif; color: var(--tinte); }
.seg-thema { font: 700 14px Inter, system-ui, sans-serif; color: var(--tinte); }
.seg-klick { cursor: pointer; text-decoration: none; }
.seg-klick:hover { filter: brightness(.95); }

/* Personen-Link (klickbarer Name) */
.person-link { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; background: none; border: none; padding: 0; font: inherit; text-align: left; }
.person-link:hover { background: var(--tinte); color: var(--gelb); text-decoration: none; }

.bar { height: 13px; border: 1.5px solid var(--tinte); background: var(--rand); position: relative; flex: 1; min-width: 60px; }
.bar i { position: absolute; inset: 0 auto 0 0; display: block; }
.bar-zeile { display: flex; align-items: center; gap: 10px; }
.bar-text { font: 600 11px Inter, system-ui, sans-serif; color: var(--tinte); white-space: nowrap; }
.haken { width: 13px; height: 13px; background: var(--gruen); border: 1.5px solid var(--tinte); flex: none; }

.fuss { display: flex; border-top: 2px solid var(--tinte); }
.fuss > div { flex: 1; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
              font: 600 9.5px Inter, system-ui, sans-serif; color: var(--tinte); }
.fuss > div:first-child { border-right: 2px solid var(--tinte); }

/* ---------- Einzelansicht ---------- */
.einzel { position: fixed; inset: 0; z-index: 2000; overflow: auto; display: none; }
.einzel.offen { display: block; }
.einzel-innen { max-width: 1100px; margin: 0 auto; padding: 44px 40px 90px; }
.einzel-hinweis { font: 600 13px Inter, system-ui, sans-serif; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.zurueck { border: 1.5px solid var(--tinte); background: #fff; color: var(--tinte); padding: 8px 14px; font: 700 11px Inter, system-ui, sans-serif; cursor: pointer; }
.zurueck:hover { background: var(--tinte); color: #fff; }
.block { border-top: 2px solid var(--tinte); padding: 22px 26px; }
.block h3 { font: 700 13px Inter, system-ui, sans-serif; margin: 0 0 10px; }
.leer { font: 500 13px Inter, system-ui, sans-serif; opacity: .5; margin-bottom: 10px; }
.eingabefeld { border: 1.5px solid var(--tinte); background: var(--creme); padding: 10px 12px; font: 400 13px Inter, system-ui, sans-serif; opacity: .55; }
.doc { border: 1.5px solid var(--tinte); padding: 8px 12px; font: 600 13px Inter, system-ui, sans-serif; margin-bottom: 8px; }
.kommentar { font: 500 14px/1.4 Inter, system-ui, sans-serif; margin-bottom: 8px; }
.geld-zeile { border: 1.5px solid var(--tinte); background: var(--creme); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.geld-zeile b { font: 800 20px Inter, system-ui, sans-serif; }
.eingabe-zeile { border: 1.5px solid var(--tinte); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.eingabe-zeile input { width: 84px; border: 1.5px solid var(--tinte); padding: 7px 8px; font: 700 14px Inter, system-ui, sans-serif; text-align: right; background: #fff; color: var(--tinte); }
.geschafft { border: 1.5px solid var(--gruen); background: #E4F2E7; padding: 10px 14px; font: 700 13px Inter, system-ui, sans-serif; color: #215C34; margin-bottom: 12px; }
.fussnote { font: 400 11.5px/1.5 Inter, system-ui, sans-serif; opacity: .6; }

/* ---------- Personen-Seite ---------- */
.seite { max-width: 1100px; margin: 0 auto; padding: 30px 34px 80px; }
.intro { font: 500 15px/1.6 Inter, system-ui, sans-serif; max-width: 680px; margin-bottom: 26px; }
.personen { display: flex; flex-wrap: wrap; gap: 14px; }
.person { background: #fff; border: 3px solid var(--tinte); box-shadow: 0 2px 0 rgba(0,0,0,.15); width: 280px; }
.person-kopf { background: var(--gelb); padding: 14px 16px; border-bottom: 2px solid var(--tinte); }
.person-name { font: 800 17px Inter, system-ui, sans-serif; }
.person-rollen { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.rolle { font: 600 12px Inter, system-ui, sans-serif; border: 1.5px solid var(--tinte); padding: 4px 8px; width: fit-content; background: var(--creme); }
.person-fuss { border-top: 2px solid var(--tinte); padding: 8px 16px; font: 600 10.5px Inter, system-ui, sans-serif; }
.person.aktiv .person-fuss { background: var(--tinte); color: #fff; cursor: pointer; }
.person.aktiv .person-fuss:hover { background: var(--ziegel); }
.person.passiv .person-fuss { opacity: .5; }

/* ---------- Summen-Leiste ---------- */
.summe { background: var(--tinte); color: #fff; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; border: 3px solid var(--tinte); }
.summe .zahl { font: 800 26px Inter, system-ui, sans-serif; }
.summe .lbl { font: 600 10px Inter, system-ui, sans-serif; letter-spacing: .07em; opacity: .7; }
.summe .balken { flex: 1 1 240px; }
.summe .bar { height: 18px; border-color: #fff; background: rgba(255,255,255,.15); }

/* ---------- Modal (Fragezeichen-Hilfe) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(42,38,32,.6); z-index: 4000; display: none; }
.overlay.offen { display: block; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4001; width: 480px; max-width: 90vw; max-height: 80vh;
         overflow: auto; background: #fff; border: 3px solid var(--tinte); box-shadow: 0 6px 0 rgba(0,0,0,.2); display: none; }
.modal.offen { display: block; }
.modal-kopf { display: flex; justify-content: space-between; align-items: center; background: var(--tinte); padding: 14px 18px; }
.modal-kopf .t { font: 800 16px Inter, system-ui, sans-serif; color: #fff; }
.modal-kopf .x { width: 26px; height: 26px; border: 1.5px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center;
                 font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; flex: none; background: none; }
.modal-kopf .x:hover { background: #fff; color: var(--tinte); }
.modal-text { padding: 20px 22px; font: 500 13px/1.6 Inter, system-ui, sans-serif; }
.modal-text p { margin: 0 0 10px; }
.modal-text p:last-child { margin: 0; }

/* ---------- Begriffs-Lexikon ---------- */
.lexikon { padding: 26px 34px 60px; background: var(--papier); }
.lexikon h2 { font: 800 18px Inter, system-ui, sans-serif; margin: 0 0 4px; }
.lexikon .unter { font: 500 13px Inter, system-ui, sans-serif; opacity: .6; margin-bottom: 16px; }
.begriffe { display: flex; flex-wrap: wrap; gap: 10px; }
.begriff { border: 2px solid var(--tinte); background: #fff; padding: 8px 12px; font: 700 12px Inter, system-ui, sans-serif; cursor: pointer; }
.begriff:hover { background: var(--gelb); }

.mockup-band { background: var(--gelb); border-bottom: 3px solid var(--tinte); padding: 8px 34px; font: 600 11px Inter, system-ui, sans-serif; color: var(--tinte); }

@media (max-width: 700px) {
  .seg-owner, .seg-topic, .seg-opt { width: 100%; border-right: none; border-bottom: 2px solid var(--tinte); }
  .karte-zeile { min-height: 0; }
  .sektor, .seite, .lexikon { padding-left: 16px; padding-right: 16px; }
  .einzel-innen { padding: 24px 16px 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .karte, .person { transition: transform .12s ease; }
  .karte:hover, .person:hover { transform: translateY(-2px); }
}