/* Anbieter-Portal (07.11.2026).
 *
 * Dieselben Farben und dieselbe Schrift wie momsmatch.de (web/momsmatch.de/
 * stil.css) - wer von der Website herueberkommt, soll nicht glauben,
 * woanders gelandet zu sein. Die Schrift liegt auf unserem Server.
 *
 * Gebaut fuer den Laptop: Seitenleiste, breite Formulare, Vorschau
 * daneben. Auf dem Handy rutscht alles untereinander.
 */

@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url(/portal/a/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url(/portal/a/poppins-700.woff2) format('woff2'); }

:root {
  --papier: #FFF8F5;
  --weiss: #FFFFFF;
  --feld: #F6EEF0;
  --tinte: #2A1A20;
  --leise: #7A5C66;
  --blass: #A08890;
  --linie: #F0DDE3;
  --beere: #B0335C;
  --beere-hover: #9A2A50;
  --tiefbeere: #6E1A38;
  --rosa: #F3A6C4;
  --blush: #FDEAF0;
  --mint: #2F7D60;
  --mint-blass: #E7F6EF;
  --apricot: #B5541F;
  --apricot-blass: #FFF3E9;
  --fehler: #C23B3B;
  --fehler-blass: #FCEBEB;
  --schatten: 0 1px 2px rgba(110, 26, 56, .06), 0 8px 24px rgba(110, 26, 56, .06);
  --rund: 14px;
}

* { box-sizing: border-box; }
html { background: var(--papier); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 19px; letter-spacing: -.01em; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--beere); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }

/* --- Wortmarke wie auf der Website -------------------------------- */
.logo { display: inline-flex; align-items: baseline; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 23px; letter-spacing: -.04em; line-height: 1; }
.logo .moms { color: #fff; }
.logo .match { color: var(--rosa); margin-left: .2em; }
.logo svg { height: .8em; width: .58em; fill: currentColor; vertical-align: -.02em; margin: 0 .01em; }
.logo-zusatz { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 10px; }

/* --- Rahmen -------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--tiefbeere);
  color: #fff;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
}
.kopf .betrieb { margin-left: auto; font-size: 14px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf .knopf-hell { background: rgba(255,255,255,.12); color: #fff; }
.kopf .knopf-hell:hover { background: rgba(255,255,255,.22); }

.rahmen { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.leiste { border-right: 1px solid var(--linie); padding: 20px 12px; background: var(--weiss); }
.leiste nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.leiste a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--leise); text-decoration: none; font-weight: 700; font-size: 14px;
}
.leiste a:hover { background: var(--blush); color: var(--tiefbeere); }
.leiste a[aria-current="page"] { background: var(--blush); color: var(--beere); }
.leiste svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zahl { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--beere); color: #fff; font-size: 11.5px; text-align: center; line-height: 20px; }

.inhalt { padding: 28px 32px 64px; min-width: 0; }
.inhalt-schmal { max-width: 880px; }
.kopfzeile { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kopfzeile .unter { color: var(--leise); font-size: 14px; margin-top: 4px; }
.kopfzeile .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 820px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { border-right: 0; border-bottom: 1px solid var(--linie); padding: 8px 12px; overflow-x: auto; }
  .leiste nav { flex-direction: row; position: static; }
  .leiste a { white-space: nowrap; }
  .inhalt { padding: 20px 16px 48px; }
  .kopf { padding: 12px 16px; }
  .logo-zusatz, .kopf .betrieb { display: none; }
}

/* --- Bausteine ----------------------------------------------------- */
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); }
.karte-innen { padding: 22px 24px; }
.stapel { display: flex; flex-direction: column; gap: 16px; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.mini { font-size: 12px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 99px; border: 0;
  background: var(--beere); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf:hover { background: var(--beere-hover); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-leise { background: var(--blush); color: var(--beere); }
.knopf-leise:hover { background: #F9DCE6; }
.knopf-rand { background: transparent; color: var(--beere); box-shadow: inset 0 0 0 1.5px var(--beere); }
.knopf-rand:hover { background: var(--blush); }
.knopf-gefahr { background: transparent; color: var(--fehler); box-shadow: inset 0 0 0 1.5px #EBC2C2; }
.knopf-gefahr:hover { background: var(--fehler-blass); }
.knopf-klein { padding: 7px 13px; font-size: 13px; }
.knopf-gross { padding: 13px 24px; font-size: 15px; }

.schild { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--feld); color: var(--leise); }
.schild-mint { background: var(--mint-blass); color: var(--mint); }
.schild-beere { background: var(--blush); color: var(--beere); }
.schild-apricot { background: var(--apricot-blass); color: var(--apricot); }
.schild-rot { background: var(--fehler-blass); color: var(--fehler); }

.hinweis { padding: 14px 18px; border-radius: 12px; background: var(--apricot-blass); color: #5A2410; font-size: 14px; display: flex; gap: 12px; align-items: flex-start; }
.hinweis-mint { background: var(--mint-blass); color: #08301F; }
.hinweis-rot { background: var(--fehler-blass); color: #6B1B1B; }
.hinweis strong { display: block; margin-bottom: 2px; }

/* --- Formulare ----------------------------------------------------- */
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld > span, .abschnitt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--blass);
}
.abschnitt { display: block; margin-bottom: 10px; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--tinte);
  padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid transparent; background: var(--feld);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rosa); background: var(--weiss); }
.feld .hilfe { font-size: 12.5px; color: var(--leise); line-height: 1.45; }
.feld .fehler { font-size: 12.5px; color: var(--fehler); }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.raster-3 { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 14px; }
@media (max-width: 620px) { .raster-2, .raster-3 { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--feld); color: var(--leise);
}
.chip:hover { background: #F0E2E6; }
.chip[aria-pressed="true"] { background: var(--beere); color: #fff; }

.schalter { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.schalter input { appearance: none; flex: none; width: 40px; height: 24px; border-radius: 99px; background: #E6D3D9; position: relative; cursor: pointer; margin: 2px 0 0; transition: background .15s; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.schalter input:checked { background: var(--beere); }
.schalter input:checked::after { transform: translateX(16px); }
.schalter b { display: block; font-size: 14px; }
.schalter small { display: block; color: var(--leise); font-size: 12.5px; line-height: 1.45; }

.formular-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.formular-raster .vorschau-spalte { position: sticky; top: 80px; }
@media (max-width: 1100px) { .formular-raster { grid-template-columns: 1fr; } .formular-raster .vorschau-spalte { position: static; } }
.formular-teil { padding: 22px 24px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 14px; }
.formular-teil:first-child { border-top: 0; }
.formular-fuss { padding: 18px 24px; border-top: 1px solid var(--linie); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; background: #FFFBFA; border-radius: 0 0 var(--rund) var(--rund); }

/* --- Anmeldung ----------------------------------------------------- */
.tor { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.tor-band {
  background: linear-gradient(150deg, #6E1A38 0%, #A52F55 55%, #DE836F 100%);
  color: #fff; padding: 48px 56px; display: flex; flex-direction: column; gap: 28px;
}
.tor-band h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; max-width: 14ch; margin-top: auto; }
.tor-band ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgba(255,255,255,.9); max-width: 44ch; margin-bottom: auto; }
.tor-band li { display: flex; gap: 12px; }
.tor-band li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); margin-top: 8px; }
.tor-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.tor-form .karte { width: 100%; max-width: 420px; }
@media (max-width: 860px) { .tor { grid-template-columns: 1fr; } .tor-band { padding: 28px 20px; } .tor-band h1 { margin-top: 12px; } }

/* --- Kursliste ------------------------------------------------------ */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.reiter button { font: inherit; font-weight: 700; font-size: 14px; color: var(--leise); background: none; border: 0; padding: 10px 14px; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.reiter button[aria-selected="true"] { color: var(--beere); border-bottom-color: var(--beere); }

.kursliste { display: flex; flex-direction: column; gap: 10px; }
.kurs { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; }
.datum { text-align: center; border-radius: 12px; background: var(--blush); color: var(--tiefbeere); padding: 8px 0; line-height: 1.1; }
.datum b { display: block; font-size: 22px; }
.datum span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.kurs.vorbei .datum { background: var(--feld); color: var(--blass); }
.kurs h3 { font-size: 16px; margin-bottom: 3px; overflow-wrap: anywhere; }
.kurs .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--leise); font-size: 13px; align-items: center; }
.kurs .aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.belegung { display: inline-flex; align-items: center; gap: 8px; }
.balken { width: 70px; height: 6px; border-radius: 99px; background: var(--feld); overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--mint); border-radius: 99px; }
@media (max-width: 760px) { .kurs { grid-template-columns: 56px minmax(0,1fr); } .kurs .aktionen { grid-column: 1 / -1; justify-content: flex-start; } }

.leer { text-align: center; padding: 48px 24px; color: var(--leise); }
.leer h2 { color: var(--tinte); margin-bottom: 6px; }
.leer .knopf { margin-top: 16px; }

/* --- Vorschau wie in der App --------------------------------------- */
.handy { border-radius: 26px; background: var(--weiss); border: 1px solid var(--linie); box-shadow: var(--schatten); overflow: hidden; }
.handy-kopf { height: 120px; background: linear-gradient(135deg, #FFD9C7, #F7B8C6); background-size: cover; background-position: center; position: relative; }
.handy-kopf .typ { position: absolute; left: 14px; bottom: 12px; }
.handy-innen { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.handy h3 { font-size: 17px; overflow-wrap: anywhere; }
.handy .von { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--leise); }
.handy .von img, .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--blush); flex: none; }
.handy .fakt { display: flex; gap: 10px; font-size: 13px; align-items: flex-start; }
.handy .fakt svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--beere); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.handy .text { font-size: 13px; color: var(--leise); white-space: pre-line; max-height: 140px; overflow: hidden; }
.handy .knopf { width: 100%; }

/* --- Teilnehmerinnen ----------------------------------------------- */
.personen { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--linie); }
.person:first-child { border-top: 0; }
.person .avatar { width: 40px; height: 40px; }
.person .wer { min-width: 0; flex: 1; }
.person .wer b { display: block; }

/* --- Nachrichten --------------------------------------------------- */
.post { display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 57px); min-height: 460px; overflow: hidden; }
.post-liste { border-right: 1px solid var(--linie); overflow-y: auto; }
.post-liste h3 { padding: 14px 18px 6px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--blass); }
.unterhaltung { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.unterhaltung:hover { background: #FFF6F8; }
.unterhaltung[aria-current="true"] { background: var(--blush); }
.unterhaltung .avatar { width: 40px; height: 40px; }
.unterhaltung .mitte { min-width: 0; flex: 1; }
.unterhaltung b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unterhaltung small { display: block; color: var(--leise); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unterhaltung .ungelesen b, .unterhaltung.ungelesen small { color: var(--tinte); font-weight: 700; }
.verlauf-spalte { display: flex; flex-direction: column; min-width: 0; }
.verlauf-kopf { padding: 14px 22px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 12px; }
.verlauf { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; background: #FFFBFA; }
.blase { max-width: min(70%, 560px); padding: 9px 14px; border-radius: 16px; background: var(--weiss); border: 1px solid var(--linie); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; align-self: flex-start; }
.blase.meine { align-self: flex-end; background: var(--beere); color: #fff; border-color: var(--beere); }
.blase .wann { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.blase .absender { display: block; font-size: 12px; font-weight: 700; color: var(--beere); }
.blase img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin: 2px 0; }
.blase.system { align-self: center; background: var(--feld); border: 0; font-size: 12.5px; color: var(--leise); }
.tagestrenner { align-self: center; font-size: 12px; color: var(--blass); margin: 10px 0 4px; }
.verfassen { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linie); align-items: flex-end; }
.verfassen textarea { min-height: 46px; max-height: 180px; resize: none; overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 860px) { .post { grid-template-columns: 1fr; height: auto; } .post-liste { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--linie); } .verlauf { min-height: 360px; } }

/* --- Profil -------------------------------------------------------- */
.banner-vorschau { height: 150px; border-radius: 12px; background: linear-gradient(135deg, #FFD9C7, #F7B8C6); background-size: cover; background-position: center; position: relative; }
.logo-vorschau { width: 84px; height: 84px; border-radius: 50%; background: var(--blush); object-fit: cover; border: 3px solid #fff; box-shadow: var(--schatten); }
.ablage { border: 2px dashed #E7C9D3; border-radius: 12px; padding: 14px; text-align: center; color: var(--leise); font-size: 13px; cursor: pointer; }
.ablage.drueber { border-color: var(--beere); background: var(--blush); }
.angebotsgruppe + .angebotsgruppe { margin-top: 14px; }
.angebotsgruppe h4 { margin: 0 0 8px; font-size: 13px; color: var(--leise); }
.standort { display: grid; grid-template-columns: 1.3fr 1.6fr .7fr 1fr auto; gap: 8px; align-items: center; }
@media (max-width: 760px) { .standort { grid-template-columns: 1fr 1fr; } }

/* --- Toast und Dialog ---------------------------------------------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; background: var(--tinte); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; max-width: min(560px, calc(100vw - 32px)); transition: opacity .2s, transform .2s; z-index: 60; }
#toast.an { opacity: 1; transform: translateX(-50%); }
#toast.fehler { background: var(--fehler); }
dialog { border: 0; border-radius: var(--rund); padding: 0; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(42, 26, 32, .25); color: var(--tinte); }
dialog::backdrop { background: rgba(42, 26, 32, .4); }
dialog .karte-innen { display: flex; flex-direction: column; gap: 12px; }
dialog .zeile { justify-content: flex-end; margin-top: 6px; }

.lade { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--linie); border-top-color: var(--beere); animation: drehen .8s linear infinite; vertical-align: middle; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: 0s !important; } }

/* --- Erweiterung 07.11.2026: Registrieren, Kommentare, Gruppen, Hinweise, Konto */
.tor-form .karte-breit { max-width: 600px; }
.wahlkarte { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--linie); background: var(--weiss); cursor: pointer; }
.wahlkarte:hover { border-color: var(--rosa); background: #FFF9FB; }
.wahlkarte b { font-size: 15px; }
.punkte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--leise); line-height: 1.5; cursor: pointer; }
.haken input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--beere); flex: none; }
.trenner { height: 1px; background: var(--linie); margin: 4px 0; }
.aufklapp summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--beere); padding: 4px 0; }
.aufklapp[open] summary { margin-bottom: 10px; }

.kommentar { display: flex; gap: 12px; align-items: flex-start; }
.kommentar .avatar { width: 34px; height: 34px; }
.kommentar .mitte { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.kommentar.antwort { margin-left: 46px; }
.angepinnt { box-shadow: inset 3px 0 0 var(--apricot), var(--schatten); }
.kommentar.angepinnt { box-shadow: none; }
.vorgabe { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

.hinweiszeile { text-decoration: none; color: inherit; align-items: flex-start; }
.hinweiszeile:hover { background: #FFF6F8; }
.hinweiszeile .wer { display: flex; flex-direction: column; gap: 2px; }
.hinweiszeile.ungelesen b { color: var(--tiefbeere); }
.punkt { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; margin-top: 7px; }
.punkt.an { background: var(--beere); }

.gruppenzeile { text-decoration: none; color: inherit; }
.gruppenzeile:hover { border-color: var(--rosa); }
.person .wer { display: flex; flex-direction: column; gap: 2px; }
label.person { cursor: pointer; }
label.person input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--beere); flex: none; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--feld); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

.antwortleiste { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 22px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--leise); background: var(--blush); }
.blase .zitat { display: block; font-size: 12px; padding: 4px 8px; margin-bottom: 4px; border-left: 3px solid var(--rosa); background: rgba(0,0,0,.04); border-radius: 4px; opacity: .85; }
.blase .zeile { margin-top: 6px; }
.blase-aktionen { display: flex !important; gap: 10px; margin-top: 4px; }
.blase-aktionen button { font: inherit; font-size: 11.5px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: .7; text-decoration: underline; }
.blase-aktionen button:hover { opacity: 1; }
.verfassen .knopf-leise { padding: 10px 14px; }
.verlauf-kopf .rechts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.ausschnitt { height: 160px; border-radius: 12px; overflow: hidden; background: var(--feld); }
.ausschnitt-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
input[type=range] { width: 100%; accent-color: var(--beere); }
.qr { width: 160px; height: 160px; border-radius: 12px; border: 1px solid var(--linie); background: #fff; padding: 6px; flex: none; }
dialog .karte-innen > input, dialog .karte-innen > textarea, dialog .karte-innen > select { width: 100%; }