/* Networking-App, Prototyp. Gestaltung nach der Internetseite des Netzwerks Sachsen-Anhalt:
   warmes Off-White, Dunkelblau als Grundfarbe, Orange als Akzent, Graublau für Ringe,
   weiße Karten mit großen Rundungen, Pillenknöpfe, Plus Jakarta Sans und Inter. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('/fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --grund: #f8f7f4;
  --karte: #ffffff;
  --navy: #0a2342;
  --navy-2: #1d3a63;
  --orange: #fda30c;
  --orange-hell: #fff3dc;
  --orange-text: #8a5300;
  --ring: #9fb0d8;
  --ring-hell: #e7ecf6;
  --text: #0a2342;
  --text-2: #4b5563;
  --mute: #6b7280;
  --linie: rgba(10, 35, 66, .1);
  --linie-2: rgba(10, 35, 66, .2);
  --flaeche: rgba(10, 35, 66, .05);
  --r-karte: 24px;
  --r-klein: 14px;
  --schatten: 0 1px 2px rgba(10, 35, 66, .04), 0 8px 24px rgba(10, 35, 66, .06);
  --kopf: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --breite: 1040px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4 { font-family: var(--kopf); font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
h3 { font-size: 1.08rem; }
p { margin: 0; }
a { color: var(--navy); }
button, input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.akzent { color: var(--orange); }
.mute { color: var(--mute); }
.klein { font-size: .875rem; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Vorschau-Leiste (Person wechseln) ---------- */
.demoleiste { background: var(--ring-hell); color: var(--navy); font-size: .88rem; }
.demoleiste .innen { max-width: var(--breite); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.demoleiste .wer { display: flex; align-items: center; gap: 8px; }
.demoleiste .wer .avatar { width: 26px; height: 26px; font-size: .7rem; }
.demoleiste .etikett-klein { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-2); background: #fff; border-radius: 999px; padding: 3px 9px; }
.demoleiste .knopf { padding: 7px 16px; font-size: .86rem; }

/* ---------- Kopfleiste wie auf der Netzwerk-Seite ---------- */
.kopf { position: sticky; top: 0; z-index: 40; padding: 12px 16px 0; background: linear-gradient(var(--grund) 70%, transparent); }
.kopf-balken { position: relative; max-width: var(--breite); margin: 0 auto; background: rgba(10, 35, 66, .96); border-radius: 999px; display: flex; align-items: center;
  gap: 8px; padding: 7px 7px 7px 22px; box-shadow: 0 10px 30px -12px rgba(10, 35, 66, .45); min-height: 64px; }
.logo { display: flex; align-items: center; flex: none; margin-right: auto; }
.logo img { height: 40px; width: auto; }
.seitenmenue { display: flex; gap: 2px; margin-right: 8px; }
.seitenmenue a, .seitenmenue .platzhalter { color: rgba(255, 255, 255, .75); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 9px 13px; border-radius: 999px; white-space: nowrap; transition: color .2s, background .2s; }
.seitenmenue a:hover { color: #fff; }
.seitenmenue a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.seitenmenue .platzhalter { cursor: default; user-select: none; }
.kopf .partner.platzhalter, .kopf .partner.platzhalter:hover { cursor: default; user-select: none; box-shadow: none; transform: none; }
.seitenmenue a[aria-current="page"]::after { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--orange); margin-left: 7px; vertical-align: 2px; }
.kopf .partner { padding: 13px 22px; flex: none; }
.menueknopf { display: none; place-items: center; width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 50%; padding: 0; cursor: pointer; }
.profilknopf { flex: none; display: flex; align-items: center; border-radius: 50%; text-decoration: none; padding: 2px; margin-left: 4px; }
.profilknopf .avatar { width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, .85); }
.profilknopf[aria-current="page"] .avatar { border-color: var(--orange); }
@media (max-width: 1080px) { .kopf .partner { display: none; } }
@media (max-width: 780px) {
  .kopf { padding: 10px 12px 0; }
  .kopf-balken { border-radius: 24px; padding: 7px 7px 7px 16px; min-height: 60px; flex-wrap: wrap; }
  .logo img { height: 34px; }
  .menueknopf { display: grid; }
  .kopf-balken { gap: 6px; }
  .seitenmenue { display: none; order: 9; width: 100%; flex-direction: column; margin: 6px 0 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .kopf-balken.offen .seitenmenue { display: flex; }
  .seitenmenue a { padding: 11px 10px; }
}

/* ---------- Tage-Reiter: Veranstaltungen, für die man freigeschaltet ist ---------- */
.tage { max-width: var(--breite); margin: 0 auto; width: 100%; padding: 16px 16px 0; }
.tage:empty { display: none; }
.tage-innen { display: flex; align-items: center; gap: 14px; }
.tage-titel { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--mute); white-space: nowrap; }
.tage-liste { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; overscroll-behavior-x: contain; }
.tage-liste::-webkit-scrollbar { display: none; }
.tag { flex: none; display: flex; align-items: center; gap: 12px; border: 1px solid var(--linie-2); background: #fff; color: var(--navy); border-radius: 18px;
  padding: 7px 16px 7px 7px; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s; }
.tag:hover { border-color: var(--navy); }
.tag .datum { display: grid; place-items: center; min-width: 54px; padding: 5px 6px; border-radius: 12px; background: var(--ring-hell); font-size: .7rem; font-weight: 600; text-transform: uppercase; line-height: 1.15; }
.tag .datum b { font-family: var(--kopf); font-size: 1rem; text-transform: none; }
.tag .was { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.tag.aktiv { border: 2px solid var(--orange); padding: 6px 15px 6px 6px; box-shadow: 0 8px 18px -12px rgba(253, 163, 12, .9); }
.tag.aktiv .datum { background: var(--orange); color: #fff; }
@media (max-width: 780px) {
  .tage { padding: 12px 12px 0; }
  .tage-titel { display: none; }
  .tag { padding: 5px 12px 5px 5px; gap: 9px; }
  .tag.aktiv { padding: 4px 11px 4px 4px; }
  .tag .datum { min-width: 46px; }
  .tag .was { font-size: .85rem; }
}
@media (max-width: 520px) {
  .demoleiste .innen { flex-wrap: nowrap; padding: 7px 12px; }
  .demoleiste .lang, .demoleiste .etikett-klein { display: none; }
  .demoleiste .knopf { padding: 6px 12px; font-size: .8rem; }
}
.tage-liste { position: relative; }
.anmelde-person .termine { margin-top: 3px; font-size: .74rem; font-weight: 600; color: var(--orange-text); letter-spacing: .02em; }

/* ---------- Reiter der Networking-App ---------- */
.app-reiter { position: sticky; top: 84px; z-index: 39; max-width: var(--breite); margin: 0 auto; width: 100%; display: flex; gap: 8px; padding: 14px 16px 8px; background: var(--grund); }
.app-reiter:empty { display: none; }
.app-reiter a { position: relative; text-decoration: none; color: var(--navy); background: #fff; border: 1px solid var(--linie-2); padding: 9px 18px;
  border-radius: 999px; font-size: .95rem; font-weight: 600; white-space: nowrap; text-align: center; }
.app-reiter a:hover { border-color: var(--navy); }
.app-reiter a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px;
  background: var(--orange); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: 1px; }
@media (max-width: 780px) {
  .app-reiter { top: 76px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 14px 12px 8px; gap: 8px; }
  .app-reiter a { padding: 9px 6px; font-size: clamp(.78rem, 3.5vw, .9rem); }
  .app-reiter .zahl { position: absolute; top: -7px; right: 2px; margin: 0; min-width: 19px; height: 19px; font-size: .68rem; box-shadow: 0 0 0 2px var(--grund); }
  .held-deko { display: none; }
  .abschnitt-kopf > .mute { display: none; }
}

/* ---------- Seitenrahmen ---------- */
.inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 22px 16px 40px; flex: 1; }
.hinweise { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 12px 16px 0; display: grid; gap: 10px; }
.hinweise:empty { display: none; }
.fuss { text-align: center; color: var(--mute); font-size: .78rem; padding: 18px 16px 28px; }
.laden { color: var(--mute); padding: 40px 0; text-align: center; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 18px; }
.seitenkopf p { color: var(--text-2); margin-top: 6px; }
.abschnitt { margin-top: 30px; }
.abschnitt > h2, .abschnitt > .abschnitt-kopf { margin-bottom: 14px; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .95rem; margin-bottom: 14px; }
.zurueck:hover { color: var(--navy); }

/* ---------- Karten ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); padding: 22px; }
.karte + .karte { margin-top: 14px; }
.karte.eng { padding: 16px; }
.raster { display: grid; gap: 14px; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .raster-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .raster-2, .raster-3 { grid-template-columns: 1fr; } }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px;
  padding: 11px 22px; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.knopf-orange { background: var(--orange); color: #fff; box-shadow: 0 8px 18px -10px rgba(253, 163, 12, .9); }
.knopf-orange:hover { box-shadow: 0 10px 22px -8px rgba(253, 163, 12, .9); }
.knopf-navy { background: var(--navy); color: #fff; }
.knopf-rand { background: #fff; color: var(--navy); border-color: var(--linie-2); }
.knopf-rand:hover { border-color: var(--navy); }
.knopf-leise { background: var(--flaeche); color: var(--navy); }
.knopf-klein { padding: 7px 14px; font-size: .88rem; }
.knopf-gefahr { background: #fff; color: #9b2c2c; border-color: rgba(155, 44, 44, .3); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Avatar, Chips, Status ---------- */
.avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--ring-hell); }
.avatar-initialen { display: grid; place-items: center; font-family: var(--kopf); font-weight: 700; color: var(--navy); background: var(--ring-hell); }
.avatar.gross { width: 132px; height: 132px; }
.avatar.mittel { width: 72px; height: 72px; }
.avatar.klein { width: 40px; height: 40px; font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linie-2); background: #fff; color: var(--navy);
  border-radius: 999px; padding: 6px 14px; font-size: .86rem; font-weight: 600; cursor: default; white-space: nowrap; }
button.chip { cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.weich { background: var(--ring-hell); border-color: transparent; font-weight: 500; }
.chipleiste { display: flex; gap: 8px; overflow-x: auto; padding: 2px 34px 6px 0; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.chipleiste::-webkit-scrollbar { display: none; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-bestaetigt { background: var(--navy); color: #fff; }
.status-ausstehend { background: var(--orange-hell); color: var(--orange-text); }
.status-neuer_vorschlag { background: var(--ring-hell); color: var(--navy-2); }
.status-abgelehnt, .status-abgesagt, .status-verfallen, .status-zurueckgezogen { background: #eef0f3; color: var(--mute); }

/* ---------- Hinweise ---------- */
.banner { display: flex; gap: 14px; align-items: flex-start; background: var(--navy); color: #fff; border-radius: 20px; padding: 14px 16px 14px 18px;
  box-shadow: 0 10px 24px -14px rgba(10, 35, 66, .6); }
.banner .banner-text { flex: 1; font-size: .95rem; }
.banner b { font-family: var(--kopf); }
.banner .x { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; }
.banner.orange { background: var(--orange-hell); color: var(--navy); box-shadow: none; border: 1px solid rgba(253, 163, 12, .45); }
.banner.orange .x { background: rgba(10, 35, 66, .08); color: var(--navy); }
.banner-symbol { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 700; }
.meldung { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 140%); background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 999px; font-weight: 500; font-size: .92rem; transition: transform .3s, opacity .3s; z-index: 60; max-width: calc(100% - 32px); text-align: center;
  opacity: 0; pointer-events: none; }
.meldung.zeigen { transform: translate(-50%, 0); opacity: 1; }
.meldung.fehler { background: #9b2c2c; }

/* ---------- Anmeldung ---------- */
.start { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 18px 0 8px; }
.start h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); line-height: 1.06; }
.start .lead { color: var(--text-2); font-size: 1.1rem; margin-top: 18px; max-width: 46ch; }
.start .lead b { color: var(--navy); }
.start .fakten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.start .fakten span { background: #fff; border: 1px solid var(--linie); border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 500; }
.startbild { position: relative; aspect-ratio: 1; max-width: 420px; justify-self: end; width: 100%; }
.startbild::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; border: 14px solid var(--ring); border-bottom-color: transparent; transform: rotate(-35deg); }
.startbild img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 8px solid #fff; box-shadow: var(--schatten); }
.startbild i { position: absolute; width: 38px; height: 38px; background: var(--orange); top: 4%; right: 2%; }
@media (max-width: 760px) {
  .start { grid-template-columns: 1fr; gap: 26px; }
  .startbild { max-width: 260px; justify-self: center; order: -1; }
}
.held { position: relative; overflow: hidden; }
.held h1 { max-width: 16ch; }
.held p { color: var(--text-2); max-width: 54ch; margin-top: 12px; font-size: 1.05rem; }
.held-deko { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 14px solid rgba(159, 176, 216, .55);
  border-left-color: transparent; transform: rotate(-20deg); pointer-events: none; }
.held-deko::after { content: ''; position: absolute; width: 30px; height: 30px; background: var(--orange); left: 20px; top: 70px; transform: rotate(20deg); }
.anmelde-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.anmelde-person { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--linie); background: #fff; border-radius: 18px;
  padding: 10px 14px 10px 10px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s; }
.anmelde-person:hover { border-color: var(--orange); box-shadow: 0 10px 22px -16px rgba(10, 35, 66, .5); transform: translateY(-1px); }
.anmelde-person b { display: block; font-weight: 600; }
.anmelde-person span { display: block; font-size: .82rem; color: var(--mute); }

/* ---------- Teilnehmerliste ---------- */
.suche { position: relative; }
.suche input { width: 100%; border: 1px solid var(--linie-2); background: #fff; border-radius: 999px; padding: 13px 18px 13px 46px; font-size: 1rem; }
.suche input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10, 35, 66, .08); }
.suche svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.passt-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .passt-raster { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; } }
.passt-karte { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; border: 2px solid transparent;
  background: #fff; border-radius: var(--r-karte); padding: 18px; box-shadow: var(--schatten); transition: border-color .2s, transform .15s; }
.passt-karte:hover { border-color: var(--orange); transform: translateY(-2px); }
.passt-kopf { display: flex; gap: 12px; align-items: center; }
.passt-kopf b { font-family: var(--kopf); display: block; line-height: 1.2; }
.passt-kopf span { font-size: .85rem; color: var(--mute); }
.grund { font-size: .85rem; color: var(--orange-text); background: var(--orange-hell); border-radius: 999px; padding: 4px 11px; font-weight: 600; }
.buchstabe { font-family: var(--kopf); font-weight: 700; color: var(--ring); font-size: .95rem; margin: 18px 0 8px 6px; }
.personen { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden; }
.personenzeile { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--linie); transition: background .15s; }
.personenzeile:first-child { border-top: 0; }
.personenzeile:hover { background: #fbfaf7; }
.personenzeile .wer { flex: 1; min-width: 0; }
.personenzeile b { font-weight: 600; display: block; }
.personenzeile .firma { font-size: .88rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pfeil { color: var(--ring); flex: none; }
.leer { text-align: center; color: var(--mute); padding: 30px 16px; }

/* ---------- Profilseite ---------- */
.profilkopf { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; position: relative; overflow: hidden; }
.profilkopf .avatar.gross { box-shadow: 0 0 0 6px #fff, 0 0 0 12px var(--ring-hell); }
.profilkopf h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.profilkopf .rolle { color: var(--text-2); margin-top: 6px; font-size: 1.02rem; }
.profilkopf .ort { color: var(--mute); font-size: .9rem; margin-top: 2px; }
.profilkopf .knopfreihe { margin-top: 18px; }
@media (max-width: 600px) { .profilkopf { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; } .profilkopf .knopfreihe { justify-content: center; } }
.kontaktliste { display: grid; gap: 2px; }
.kontaktliste a, .kontaktliste div { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--navy); text-decoration: none; border-top: 1px solid var(--linie); word-break: break-word; }
.kontaktliste > :first-child { border-top: 0; }
.kontaktliste .ico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ring-hell); display: grid; place-items: center; }
.etikett { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: 8px; display: block; }
.terminbox { display: flex; gap: 14px; align-items: center; background: var(--navy); color: #fff; border-radius: 18px; padding: 14px 18px; margin-top: 16px; }
.terminbox b { font-family: var(--kopf); font-size: 1.1rem; }
.terminbox .uhr { font-family: var(--kopf); font-size: 1.5rem; font-weight: 700; color: var(--orange); }
textarea.notiz { width: 100%; min-height: 110px; border: 1px dashed var(--linie-2); background: #fffdf8; border-radius: 16px; padding: 12px 14px; resize: vertical; }

/* ---------- Zeitfenster ---------- */
.fenster-gruppe + .fenster-gruppe { margin-top: 18px; }
.fenster-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 480px) { .fenster-raster { grid-template-columns: 1fr 1fr; } }
.fenster { border: 2px solid var(--linie); background: #fff; border-radius: 18px; padding: 14px 10px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.fenster b { display: block; font-family: var(--kopf); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fenster span { font-size: .78rem; color: var(--mute); }
.fenster:hover:not([disabled]) { border-color: var(--ring); }
.fenster[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-hell); }
.fenster[disabled] { cursor: not-allowed; background: #f3f2ef; color: var(--mute); }
.fenster[disabled] b { color: #a3a9b3; text-decoration: line-through; text-decoration-thickness: 1px; }
.feld { display: grid; gap: 6px; }
.feld label, .feld .etikett { font-weight: 600; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--navy); margin: 0; }
.feld input, .feld textarea, .feld select { width: 100%; border: 1px solid var(--linie-2); background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 1rem; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10, 35, 66, .08); }
.feld input[readonly] { background: #f3f2ef; color: var(--text-2); }
.feld .hilfe { font-size: .8rem; color: var(--mute); }
.formular { display: grid; gap: 16px; }

/* ---------- Mein Abend ---------- */
.abend-held { background: var(--navy); color: #fff; border-radius: 28px; padding: 26px; position: relative; overflow: hidden; }
.abend-held h1 { color: #fff; }
.abend-held .unter { color: rgba(255, 255, 255, .75); margin-top: 6px; }
.abend-held .fakten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; }
.abend-held .fakten span { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 7px 14px; font-size: .88rem; }
.abend-held .held-deko { border-color: rgba(159, 176, 216, .3); border-left-color: transparent; }
.abend-held .knopfreihe { margin-top: 18px; position: relative; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; position: relative; }
.kennzahlen div { background: rgba(255, 255, 255, .08); border-radius: 18px; padding: 12px 14px; }
.kennzahlen b { display: block; font-family: var(--kopf); font-size: 1.7rem; line-height: 1.1; color: var(--orange); }
.kennzahlen span { font-size: .8rem; color: rgba(255, 255, 255, .75); }
.anfrage { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.anfrage .oben { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.anfrage .zitat { color: var(--text-2); font-size: .94rem; margin-top: 6px; }
.anfrage .knopfreihe { margin-top: 12px; }
.ablauf { position: relative; display: grid; gap: 12px; }
.block { display: grid; grid-template-columns: 92px 1fr; gap: 16px; }
.block .zeit { font-family: var(--kopf); font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 18px; color: var(--navy); font-size: .98rem; }
.block .zeit span { display: block; color: var(--mute); font-weight: 500; font-size: .8rem; }
.block-karte { background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 16px 18px; }
.block-karte.programm, .block-karte.essen { background: transparent; border-style: dashed; }
.block-karte .titel { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.block-karte .titel b { font-family: var(--kopf); }
.block-karte.networking { border: 2px solid var(--orange); box-shadow: var(--schatten); }
@media (max-width: 560px) { .block { grid-template-columns: 1fr; gap: 4px; } .block .zeit { padding-top: 0; } .block .zeit span { display: inline; margin-left: 6px; } }
.slotzeile { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linie); }
.slotzeile:first-of-type { margin-top: 12px; }
.slotzeile .uhr { font-family: var(--kopf); font-weight: 700; font-variant-numeric: tabular-nums; }
.slotzeile .was { min-width: 0; display: flex; align-items: center; gap: 10px; }
.slotzeile .was b { font-weight: 600; display: block; }
.slotzeile .was small { color: var(--mute); display: block; }
.slotzeile.frei .was { color: var(--mute); }
.slotzeile .aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .slotzeile { grid-template-columns: 52px 1fr; } .slotzeile .aktionen { grid-column: 2; justify-content: flex-start; } }
.unterzeile { font-size: .82rem; color: var(--orange-text); margin-top: 2px; }

/* ---------- Nachrichten ---------- */
.gespraeche { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden; }
.gespraech { display: flex; gap: 14px; align-items: center; padding: 14px 18px 14px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--linie); }
.gespraech:first-child { border-top: 0; }
.gespraech:hover { background: #fbfaf7; }
.gespraech .wer { flex: 1; min-width: 0; }
.gespraech .zeile1 { display: flex; justify-content: space-between; gap: 10px; }
.gespraech b { font-weight: 600; }
.gespraech time { font-size: .78rem; color: var(--mute); white-space: nowrap; }
.gespraech .vorschau { font-size: .9rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.gespraech.ungelesen b, .gespraech.ungelesen .vorschau { color: var(--navy); font-weight: 700; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex: none; }
.chat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden;
  height: calc(100vh - 300px); min-height: 420px; }
@media (max-width: 860px) { .chat { height: calc(100vh - 290px); height: calc(100dvh - 290px); } }
.chat-kopf { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; }
.chat-kopf b { font-family: var(--kopf); display: block; }
.chat-kopf span { font-size: .84rem; color: var(--mute); }
.verlauf { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: #fbfaf7; overscroll-behavior: contain; }
.blase { max-width: 78%; padding: 10px 14px; border-radius: 18px; font-size: .96rem; white-space: pre-wrap; word-wrap: break-word; }
.blase time { display: block; font-size: .7rem; margin-top: 4px; opacity: .7; }
.blase.mir { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.blase.dir { align-self: flex-start; background: #fff; border: 1px solid var(--linie); border-bottom-left-radius: 6px; }
.ereignis { align-self: center; font-size: .8rem; color: var(--mute); background: var(--flaeche); border-radius: 999px; padding: 4px 12px; text-align: center; }
.treffkarte { align-self: center; width: min(100%, 420px); background: #fff; border: 2px solid var(--orange); border-radius: 20px; padding: 14px 16px; }
.treffkarte.erledigt { border-color: var(--linie); background: transparent; }
.treffkarte.erledigt .uhrzeit { color: var(--mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.treffkarte .oben { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.treffkarte .uhrzeit { font-family: var(--kopf); font-size: 1.35rem; font-weight: 700; margin-top: 6px; }
.treffkarte p { color: var(--text-2); font-size: .9rem; margin-top: 4px; }
.treffkarte .knopfreihe { margin-top: 12px; }
.eingabe { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--linie); background: #fff; }
.eingabe textarea { flex: 1; border: 1px solid var(--linie-2); border-radius: 22px; padding: 11px 16px; resize: none; height: 46px; font-size: 1rem; line-height: 1.4; overflow: hidden; }
.eingabe textarea:focus { outline: none; border-color: var(--navy); }
.eingabe .knopf { padding: 0 18px; }

/* ---------- Übersicht ---------- */
.zahlen-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .zahlen-raster { grid-template-columns: 1fr 1fr; } }
.zahlkarte { background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 18px; box-shadow: var(--schatten); }
.zahlkarte b { font-family: var(--kopf); font-size: 2.2rem; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.zahlkarte span { color: var(--mute); font-size: .86rem; display: block; margin-top: 6px; }
.zahlkarte.hervor { background: var(--navy); border-color: var(--navy); }
.zahlkarte.hervor b { color: var(--orange); }
.zahlkarte.hervor span { color: rgba(255, 255, 255, .75); }
.balkenzeile { display: grid; grid-template-columns: 90px 1fr 70px; gap: 12px; align-items: center; padding: 8px 0; }
.balkenzeile .uhr { font-family: var(--kopf); font-weight: 700; font-variant-numeric: tabular-nums; }
.balken { height: 14px; background: var(--ring-hell); border-radius: 999px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--orange); border-radius: inherit; }
.balkenzeile .wert { text-align: right; font-size: .86rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.liste-einfach { list-style: none; margin: 0; padding: 0; }
.liste-einfach li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie); }
.liste-einfach li:first-child { border-top: 0; }
.statusleiste { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Einstellungen ---------- */
.bildwahl { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.themenwahl .chips { margin-top: 8px; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 6px 0; }

/* ---------- Einverständnis ---------- */
.einverstaendnis { max-width: 720px; margin: 10px auto 0; padding: clamp(22px, 4vw, 40px); }
.einverstaendnis h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); margin-bottom: 14px; }
.einverstaendnis p { color: var(--text-2); margin-top: 10px; }
.haken { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 34px; font-weight: 500; }
.haken li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--orange-hell); color: var(--orange-text); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }

/* ---------- Nachricht löschen ---------- */
.loeschen { border: 0; background: none; color: inherit; font: inherit; font-size: inherit; padding: 0; cursor: pointer; text-decoration: underline; opacity: .85; }
.loeschen:hover { opacity: 1; }

/* ---------- Erklärung (Popup auf der Startseite) ---------- */
.erklaer-anker { position: relative; margin-top: 22px; }
.erklaer-anker .frage { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-weight: 800; font-size: .85rem; }
.erklaerung { position: absolute; top: calc(100% + 14px); left: 0; z-index: 50; width: min(580px, calc(100vw - 32px)); max-height: min(72vh, 680px); overflow-y: auto;
  overscroll-behavior: contain; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(10, 35, 66, .12); border-radius: 24px; box-shadow: 0 28px 60px -22px rgba(10, 35, 66, .5); padding: 22px 24px 24px;
  display: none; }
.erklaerung.offen { display: block; }
.erklaerung .x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--flaeche); color: var(--navy); cursor: pointer; }
.erklaerung .kurz { color: var(--navy); font-size: 1.02rem; line-height: 1.6; margin: 4px 30px 16px 0; }
.erklaerung .lang { display: none; margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 4px; }
.erklaerung.erweitert .lang { display: block; }
.erklaerung section { padding: 14px 0 4px; }
.erklaerung h4 { font-size: 1rem; margin-bottom: 6px; }
.erklaerung section p, .erklaerung li { color: var(--text-2); font-size: .94rem; }
.erklaerung ol { padding-left: 1.2em; margin: 4px 0 8px; }
.erklaerung .chips { margin-top: 10px; gap: 6px; }
@media (max-width: 760px) { .erklaerung { max-height: 64vh; } }

/* ---------- Sichtbarkeit: Aufklapper und Schalter ---------- */
.aufklapper { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; border: 1px solid var(--linie-2); background: #fff; color: var(--navy);
  border-radius: 999px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.aufklapper:hover { border-color: var(--navy); }
.aufklapper .zeichen { color: var(--orange); font-size: 1.2rem; line-height: 1; transition: transform .25s; }
.aufklapper[aria-expanded="true"] .zeichen { transform: rotate(45deg); }
.sicht-details { display: none; margin-top: 14px; background: var(--grund); border-radius: 18px; padding: 16px 18px; }
.sicht-details.offen { display: block; }
.sicht-details .etikett { margin-bottom: 4px; }
.sicht-details p { margin-top: 0; }
.schalterliste { display: grid; gap: 8px; margin-top: 6px; }
.schalter { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 10px 14px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .regler { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #cfd5df; transition: background .2s; }
.schalter .regler::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(10, 35, 66, .3); transition: transform .2s; }
.schalter input:checked + .regler { background: var(--navy); }
.schalter input:checked + .regler::after { transform: translateX(18px); }
.schalter input:focus-visible + .regler { outline: 3px solid var(--orange); outline-offset: 2px; }
.schalter-text { font-weight: 600; display: flex; flex-direction: column; line-height: 1.25; }
.schalter-text small { font-weight: 500; color: var(--mute); font-size: .8rem; }

/* ---------- Erklärung in der Kopfleiste ---------- */
.erklaer-anker.im-kopf { margin: 0; flex: none; position: static; }
.hilfeknopf { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff;
  font-family: var(--kopf); font-weight: 800; font-size: 1.15rem; cursor: pointer; transition: background .2s, border-color .2s; }
.hilfeknopf:hover, .hilfeknopf[aria-expanded="true"] { background: var(--orange); border-color: var(--orange); }
.im-kopf .erklaerung { top: calc(100% + 12px); left: auto; right: 0; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
@media (max-width: 780px) {
  .hilfeknopf { width: 40px; height: 40px; }
  .im-kopf .erklaerung { left: 0; right: 0; width: auto; }
}