:root {

  --navy-tief: #0F2032;
  --akzent:    #2F6099;
  --sand:      #F1F4F9;
  --sand-tief: #E8EDF4;
  --papier:    #FFFFFF;
  --flaeche:   #F3F6FB;
  --leise-2:   #8494A8;
  --schatten-s: 0 1px 2px rgba(20,41,63,.04), 0 4px 16px rgba(20,41,63,.05);
  --schatten-m: 0 2px 4px rgba(20,41,63,.04), 0 18px 44px rgba(20,41,63,.09);
  --kopfhoehe: 60px;

  --fusshoehe: 56px;
  --leistenbreite: 274px;

  --navy:      #1E3A5F;
  --karmesin:  #922B3E;
  --grund:     #FEFEFE;
  --text:      #1F2933;
  --leise:     #52637A;
  --linie:     #E2E8F0;
  --schrift:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: "Literata", Georgia, "Times New Roman", serif;
  --rundung:   10px;

  --gruen:     #2E7D5B;

  --auf-navy:     #FFFFFF;
  --auf-karmesin: #FFFFFF;
  --auf-akzent:   #FFFFFF;
}

a { color: var(--akzent); }

body { overflow-wrap: anywhere; }
h1, h2, h3, .titel, .ktext, .ftitel { hyphens: auto; }

* { box-sizing: border-box; }

html { font-size: 14px; }
body {
  margin: 0;
  padding: 2rem 1.25rem 4rem;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.blatt {
  max-width: 34rem;
  margin: 0 auto;
}

h1 {
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 .75rem;
}

.lead {
  color: var(--leise);
  margin: 0 0 1.75rem;
}

.meldung {
  border-left: 3px solid var(--navy);
  background: #F4F7FA;
  border-radius: 0 var(--rundung) var(--rundung) 0;
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
}
.meldung.hinweis { border-left-color: var(--karmesin); }

.anmeldung { display: flex; flex-direction: column; gap: .5rem; }

.anmeldung label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy);
}

.anmeldung input[type="email"],
.anmeldung input[type="tel"],
.anmeldung input[type="password"],
.anmeldung input[type="text"],
.anmeldung input[type="number"],
.anmeldung input:not([type]) {
  font: inherit;
  font-size: 14px;
  padding: .6rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
}
.anmeldung input[type="email"]:focus,
.anmeldung input[type="tel"]:focus,
.anmeldung input[type="password"]:focus,
.anmeldung input[type="text"]:focus,
.anmeldung input[type="number"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}

.anmeldeknoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

.anmeldung button {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  align-self: start;
  margin-top: 0;
  padding: .62rem 1.35rem;

  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--navy);
  color: var(--auf-navy);
  cursor: pointer;
}
.anmeldung button:hover { background: #16304f; }

.anmeldung button.zweitrangig {
  margin-top: 0;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--linie);
}
.anmeldung button.zweitrangig:hover { background: #F4F7FA; }

.leise { font-weight: 400; color: var(--leise); }

.zaehler {
  margin: .1rem 0 0;
  font-size: .88rem;
  color: var(--leise);
}
.zaehler.kurz { color: var(--karmesin); }
.zaehler.gut  { color: #1B7A4B; }

.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.meldung li { margin: .15rem 0; }
.meldung p  { margin: 0; }

.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vorspann { margin-top: -.2rem; }
.vkachel .vmerk {
  display: inline-block; margin-bottom: .45rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--sand-tief); color: var(--leise);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.vkachel .vteaser {
  display: block; margin-top: .4rem;
  color: var(--leise); font-size: .85rem; line-height: 1.45;
}

.vkachel .deckel.mitbild img { filter: saturate(.75); }

.vkachel .vpreis {
  display: block; margin-top: .6rem;
  font-weight: 700; font-size: .95rem; color: var(--akzent);
}
.veckdaten { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: .8rem 0 0; }
.veckdaten div { min-width: 0; }
.veckdaten dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.veckdaten dd { margin: .1rem 0 0; font-weight: 650; overflow-wrap: anywhere; }

.blicke { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .9rem; }
.blick {
  display: flex; gap: .85rem; align-items: flex-start; min-width: 0;
  padding: 1rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--rundung);
  background: var(--flaeche); color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.blick:hover, .blick:focus-visible { border-color: var(--akzent); box-shadow: 0 4px 16px rgb(0 0 0 / .06); }
.blick .kreis {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--sand); color: var(--akzent);
}
.blick .kreis svg { width: 1.2rem; height: 1.2rem; }
.blicktext { min-width: 0; }
.blick .titel { display: block; font-weight: 700; overflow-wrap: anywhere; }
.blickzeile { display: block; margin-top: .25rem; color: var(--leise); font-size: .85rem; line-height: 1.45; }

.vkopf { display: flex; gap: 1.4rem; align-items: flex-start; margin: 1rem 0 1.6rem; }
.vkopf .vbild {
  display: block; flex: none; width: 19rem; aspect-ratio: 2.36;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(140deg, var(--navy), var(--navy-tief));
}
.vkopftext { min-width: 0; }
.vkopftext h1 { margin: .3rem 0 0; }
.vinhalt { margin: 1.6rem 0; }
.vinhalt h2 { margin-bottom: .5rem; }
.vliste { list-style: none; margin: .6rem 0 0; padding: 0; }
.vliste li {
  padding: .7rem .9rem; margin-bottom: .5rem;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--papier); line-height: 1.5;
}
.vliste strong { color: var(--akzent); margin-right: .35rem; }

.mit-rahmen .anmeldung { max-width: 30rem; }

.vform {
  margin: 2rem 0 1rem; padding: 1.2rem 1.3rem;
  border: 1px solid var(--linie); border-left: 5px solid var(--akzent);
  border-radius: 12px; background: var(--papier);
}
.vform label { display: block; margin: .9rem 0 .35rem; font-size: .9rem; color: var(--leise); }
.vform textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--linie);
  border-radius: 9px; background: var(--flaeche); color: var(--text);
  font: inherit; resize: vertical;
}
.vform button { margin-top: .9rem; }
.vquelle { margin-top: 2rem; color: var(--leise-2); font-size: .82rem; }

.seite .hinaus { margin-left: .3rem; opacity: .55; font-size: .8em; }

@media (max-width: 760px) {
  .vkopf { flex-direction: column; gap: .9rem; }
  .vkopf .vbild { width: 100%; }
}

.angebote {
  list-style: none; margin: 1.5rem 0 0; padding: .6rem 0 0;
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(to bottom, transparent, var(--papier) 35%);
}

.angebote li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  margin-bottom: .6rem;
}
.angebote span { color: var(--leise); font-size: .9rem; }
.angebote .zu   { color: var(--karmesin); }

.mailkarte .mailbau {
  margin: .9rem 0 .6rem; padding: .8rem;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
}
.mailkarte .mailbau .fest {
  display: block; padding: .35rem .1rem;
  color: var(--leise-2); font-size: .85rem; font-style: italic;
}
.mailkarte .mailbau label { display: block; margin: .5rem 0 .25rem; color: var(--leise); }
.mailkarte textarea, .mailkarte input[type="text"] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--linie);
  border-radius: 9px; background: var(--papier); color: var(--text);
  font: inherit; resize: vertical;
}
.mailkarte label { display: block; margin: .7rem 0 .3rem; color: var(--leise); font-size: .9rem; }

.stoerband {
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem 0 .2rem; padding: .8rem 1rem;
  border: 1px solid var(--karmesin); border-left: 5px solid var(--karmesin);
  border-radius: 10px; background: var(--papier);
  color: var(--karmesin); font-weight: 600; text-decoration: none;
}
.stoerband .z { width: 20px; height: 20px; flex: none; }
.stoerband .pfeil { margin-left: auto; display: flex; }

.vreiter {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: 1rem 0 1.4rem; border-bottom: 1px solid var(--linie);
}
.vreiter a {
  padding: .6rem .95rem; border-radius: 9px 9px 0 0;
  color: var(--leise); text-decoration: none; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.vreiter a:hover { color: var(--text); }

.vreiter a.jetzt {
  color: var(--text); background: var(--papier);
  border-color: var(--linie); border-bottom: 1px solid var(--papier);
}
.vreiter .zahl {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  border-radius: 999px; background: var(--karmesin); color: var(--auf-karmesin);
  font-size: .72rem; font-weight: 700;
}

.vsuche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.vsuche input[type="search"] { flex: 1; min-width: 12rem; }
.vsuche input, .vsuche select {
  padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 9px;
  background: var(--flaeche); color: var(--text); font: inherit;
}
.vsuche .zuruecksetzen { color: var(--leise); font-size: .85rem; }

.vtabelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: 12px; }
.vtabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vtabelle th {
  text-align: left; padding: .7rem .8rem; background: var(--sand);
  color: var(--leise); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap;
}
.vtabelle td { padding: .7rem .8rem; border-top: 1px solid var(--linie); vertical-align: top; }
.vtabelle .rechts { text-align: right; }
.vtabelle .mail { word-break: break-all; }
.vtabelle tr.vz.gesperrt { opacity: .55; }

.vtabelle tr.vwerkzeug > td { border-top: none; padding-top: 0; }
.vtabelle details > summary { cursor: pointer; color: var(--akzent); font-size: .85rem; }
.vtabelle .werkzeuge { padding-top: .6rem; }

.werkzeuge .reihe.loeschen {
  margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--linie);
}

@media (max-width: 640px) {
  .vreiter a { padding: .55rem .7rem; font-size: .9rem; }
  .vsuche input[type="search"] { min-width: 100%; }
}

h2 {
  color: var(--navy);
  font-size: 16px;
  margin: 2.25rem 0 .75rem;
}

.anmeldung select,
.reihe select,
.reihe input {
  font: inherit;
  font-size: 14px;
  padding: .5rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
  color: var(--text);
}

.anmeldung input[type="email"],
.anmeldung input[type="tel"],
.anmeldung input[type="password"],
.anmeldung input[type="text"],
.anmeldung input[type="number"],
.anmeldung select {
  min-height: 3.45rem;
  box-sizing: border-box;
}

.ankreuz {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  color: var(--text);
  margin-top: .4rem;
}
.ankreuz input { width: 1.1rem; height: 1.1rem; }

.karte {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
}
.karte.gesperrt { border-color: var(--karmesin); }

.karte .kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}

.karte .kopf > strong { min-width: 0; }
.karte .rolle {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--leise);
}
.klein { font-size: .85rem; }
.warn  { color: var(--karmesin); }

.zugaenge { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .92rem; }
.zugaenge li { padding: .15rem 0; }

details { margin-top: .6rem; }
summary {
  cursor: pointer;
  color: var(--navy);
  font-size: .9rem;
}
.werkzeuge { margin-top: .6rem; display: flex; flex-direction: column; gap: .5rem; }

.reihe { display: flex; flex-wrap: wrap; gap: .4rem; }
.reihe input, .reihe select { flex: 1 1 8rem; min-width: 0; }
.reihe button {
  font: inherit;
  font-size: .92rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.reihe button:hover { background: #F4F7FA; }
.reihe button.warnknopf { color: var(--karmesin); border-color: var(--karmesin); }

.weg { margin-bottom: 2rem; }
.weg h2 { margin-top: 1.5rem; }

.station {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: .7rem .9rem;
  margin-bottom: .6rem;
}
.station > summary {
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
  list-style: none;
}
.station > summary::-webkit-details-marker { display: none; }
.station > summary::before { content: "▸ "; color: var(--leise); }
.station[open] > summary::before { content: "▾ "; }

.nuggets { list-style: none; margin: .5rem 0 0; padding: 0; }
.nuggets li {
  padding: .5rem 0;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.nuggets li:first-child { border-top: 0; }
.nuggets a { color: var(--text); text-decoration: none; font-weight: 500; }
.nuggets a:hover { color: var(--navy); text-decoration: underline; }
.nuggets .leise { font-size: .82rem; }

.zurueck { margin: 0 0 1rem; font-size: .9rem; }
.zurueck a { color: var(--navy); }

.beschreibung {
  color: var(--text);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--karmesin);
  border-radius: 16px;
  box-shadow: var(--schatten-s);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.75rem;
}
.beschreibung p:first-child { margin-top: 0; }
.beschreibung p:last-child  { margin-bottom: 0; }

.baustein { margin-bottom: 2rem; }

.clip {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  border-radius: var(--rundung);
  margin: 0 0 1rem;
}

.baustein h3 {
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 .6rem;
}

.rumpf p { margin: 0 0 .9rem; }
.rumpf h3 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--text); }
.rumpf ul, .rumpf ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
.rumpf li { margin: .25rem 0; }

.rumpf table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
  font-size: .93rem;
}

.rumpf td, .rumpf th {
  border: 1px solid var(--linie);
  padding: .55rem .7rem;
  vertical-align: top;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: auto;
}
.rumpf tr:first-child td { background: #F4F7FA; font-weight: 600; }

@media (max-width: 640px) {
  .rumpf table, .rumpf tbody, .rumpf tr, .rumpf td, .rumpf th { display: block; width: 100%; }
  .rumpf table { border: 0; }

  .rumpf thead, .rumpf tr:first-child { display: none; }
  .rumpf tr {
    border: 1px solid var(--linie); border-radius: 12px;
    overflow: hidden; margin: 0 0 .7rem;
  }
  .rumpf td { border: 0; border-top: 1px solid var(--linie); padding: .5rem .7rem; }
  .rumpf tr td:first-child { border-top: 0; }
  .rumpf td[data-spalte]::before {
    content: attr(data-spalte);
    display: block; margin-bottom: .15rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--leise-2); font-weight: 600;
  }
}

.rumpf a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.rumpf a:hover { text-decoration-thickness: 2px; }
.rumpf .hinaus { margin-left: .25rem; opacity: .55; font-size: .8em; }

.rumpf .wohin { color: var(--leise-2); font-size: .82em; margin-left: .35rem; }

.rumpf blockquote {
  margin: 1.2rem 0;
  padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--karmesin);
}
.rumpf blockquote p { margin: 0 0 .3rem; }

.baustein-auftrag .rumpf,
.baustein-selbstpruefung .rumpf {
  background: #F4F7FA;
  border-radius: var(--rundung);
  padding: 1rem 1.1rem;
}

.fussnote {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  color: var(--leise);
  font-size: .9rem;
}
.fussnote a { color: var(--navy); }

.balken {
  height: 6px;
  border-radius: 3px;
  background: var(--linie);
  overflow: hidden;
  margin: 0 0 .3rem;
}
.balken span {
  display: block;
  height: 100%;
  background: var(--navy);
  border-radius: 3px;
}
.balkentext { margin: 0 0 1.25rem; }

.nuggets li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  grid-template-areas: "haken titel" ". stand";
  column-gap: .1rem;
  row-gap: .1rem;
}
.nuggets .haken { grid-area: haken; color: #1B7A4B; font-weight: 700; }
.nuggets a      { grid-area: titel; }
.nuggets .leise { grid-area: stand; }
.nuggets li.fertig a { color: var(--leise); }

.station.fertig > summary { color: var(--leise); }

.baustein {
  border-left: 3px solid transparent;
  padding-left: .9rem;
  margin-left: -1.2rem;
}
.baustein.gesehen { border-left-color: #C9E0D2; }

.werkzeugleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 1rem 0 .5rem;
}
.werkzeugleiste button {
  font: inherit;
  font-size: .82rem;
  line-height: 1.2;
  padding: .45rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  cursor: pointer;
}
.werkzeugleiste button:hover { background: #F4F7FA; color: var(--navy); }
.werkzeugleiste button.an {
  border-color: var(--navy);
  color: var(--navy);
  background: #F4F7FA;
  font-weight: 600;
}
.werkzeugleiste .zahl { color: var(--leise); font-weight: 400; }
.werkzeugleiste button.merken { margin-left: auto; }

.notizfeld > summary,
.kommentare > summary {
  font-size: .85rem;
  color: var(--leise);
  padding: .2rem 0;
}
.notizfeld textarea,
.kommentare textarea,
.kommentare input[type="text"] {
  font: inherit;
  font-size: 14px;
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
  color: var(--text);
  margin-top: .4rem;
  resize: vertical;
}
.notizfeld button,
.kommentare button {
  font: inherit;
  font-size: .88rem;
  margin-top: .4rem;
  padding: .55rem .9rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.notizfeld button:hover,
.kommentare button:hover { background: #F4F7FA; }

.kommentar {
  border-left: 2px solid var(--linie);
  padding: .1rem 0 .1rem .8rem;
  margin: .6rem 0;
}
.kommentar.antwort { margin-left: 1.2rem; }

.kommentar.intern { border-left-color: var(--karmesin); }
.kommentar .wer  { margin: 0; font-size: .85rem; font-weight: 600; color: var(--navy); }
.kommentar .was  { margin: .15rem 0 .2rem; }
.kommentar.weg   { color: var(--leise); font-style: italic; font-size: .88rem; }

.marke {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--karmesin);
  font-weight: 600;
}

.wegform { display: inline; }

.kommentare .wegknopf {
  font: inherit;
  font-size: .78rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--leise);
  text-decoration: underline;
  cursor: pointer;
  margin: 0;
}
.kommentare .wegknopf:hover { background: none; color: var(--karmesin); }

.antwortauf > summary {
  font-size: .8rem;
  color: var(--leise);
  margin-left: 1.2rem;
  padding: .2rem 0 .5rem;
}
.antwortform { display: flex; gap: .35rem; margin: .1rem 0 .9rem 1.2rem; }
.antwortform input[type="text"] { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.antwortform button { margin-top: 0; white-space: nowrap; }

.suchform { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.75rem; }
.suchform label { flex: 1 0 100%; }
.suchform input[type="search"] {
  font: inherit;
  font-size: 14px;
  flex: 1 1 12rem;
  min-width: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
  color: var(--text);
}
.suchform button {
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: var(--rundung);
  background: var(--navy);
  color: var(--auf-navy);
  cursor: pointer;
}

.treffer { margin-bottom: 1.6rem; }
.treffer h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.treffer h2 a { color: var(--navy); text-decoration: none; }
.treffer h2 a:hover { text-decoration: underline; }

.fundstelle {
  border-left: 2px solid var(--linie);
  padding-left: .8rem;
  margin: .5rem 0;
}
.fundstelle > a { color: var(--text); font-size: .92rem; }
.fundstelle p { margin: .15rem 0 0; }

mark {
  background: #FFF1A8;
  color: inherit;
  padding: 0 .1em;
  border-radius: 2px;
}

.quiz {
  background: #F4F7FA;
  border-radius: var(--rundung);
  padding: 1rem 1.1rem;
  margin: 1.2rem 0;
}
.quizstand { margin: 0 0 .8rem; font-size: .95rem; }

.quizknopf {
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  display: inline-block;
  padding: .75rem 1.2rem;
  border: 0;
  border-radius: var(--rundung);
  background: var(--navy);
  color: var(--auf-navy);
  text-decoration: none;
  cursor: pointer;
}
.quizknopf:hover { background: #16304f; }

.quiz fieldset.frage {
  border: 0;
  border-top: 1px solid var(--linie);
  padding: 2rem 0 .3rem;
  margin: 0;
}
.quiz fieldset.frage:first-of-type { border-top: 0; padding-top: 0; }

.quiz .mehrfach {
  margin: -.4rem 0 .7rem; font-size: .85rem; font-weight: 600;
  color: var(--karmesin);
}
.quiz .glueckwunsch {
  margin: 0 0 1rem; padding: 1rem 1.1rem;
  border-left: 3px solid #1B7A4B; border-radius: 10px;
  background: rgba(27,122,75,.08);
}
.quiz .glueckwunsch h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.quiz .glueckwunsch p { margin: 0; }
.quizknopf.zweitrangig {
  background: transparent; color: var(--navy);
  border: 1px solid var(--linie);
}
.quiz legend {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--leise);
  padding: 0;
}
.quiz .wortlaut { margin: .2rem 0 .7rem; font-weight: 500; }

.quiz .antwort {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .7rem;
  margin-bottom: .35rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: #fff;
  cursor: pointer;
  font-size: .95rem;
}
.quiz .antwort:hover { border-color: var(--navy); }
.quiz .antwort input { margin-top: .2rem; flex: 0 0 auto; }

.quiz.ergebnis .frage { border-top: 1px solid var(--linie); padding: .8rem 0 .2rem; }
.quiz.ergebnis .frage:first-of-type { border-top: 0; }
.quiz.ergebnis .stimmt .wortlaut { color: #1B7A4B; }
.quiz.ergebnis .stimmt-nicht .wortlaut { color: var(--karmesin); }
.quiz.ergebnis p { margin: .1rem 0; }

.nachweis { margin-bottom: 2rem; }
.nachweiskarte { border-color: var(--navy); }

.nachweiskarte .lead {
  color: var(--navy);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: .6rem;
}
.nachweiskarte.gilt { border-left: 4px solid #1B7A4B; }

.nummer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--navy);
  word-break: break-all;
}

.pruefung { margin: .8rem 0 0; }
.pruefung dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--leise);
  margin-top: .7rem;
}
.pruefung dd { margin: .1rem 0 0; }

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12181F;
    --text:  #E8EDF2;
    --leise: #9AAABC;
    --linie: #2A3542;
    --navy:  #7FA9D4;

    --papier:    #1A222C;
    --flaeche:   #0F141A;
    --sand:      #232D3A;
    --sand-tief: #2A3542;
    --leise-2:   #8A9BB0;

    --akzent:    #5C93D6;

    --gruen:     #5FBF92;

    --karmesin:  #DB7E8F;

    --auf-navy:     #10161C;
    --auf-karmesin: #1A0A0F;

    --auf-akzent:   #10161C;
  }

  .weiterband .knopf, .knopf.voll, .wunschform button, .wunschredaktion button {
    color: #10161C;
  }
  .kachel .deckel { background: linear-gradient(140deg, #26415F, #0F2032); }
  .kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, #2F6099, #1E3A5F); }
  .meldung { background: #1A222C; }
  .anmeldung input[type="email"],
  .anmeldung input[type="tel"],

  .anmeldung input[type="text"],
  .anmeldung input[type="password"] { background: #1A222C; color: var(--text); }
  .anmeldung button { color: #10161C; }
  .anmeldung button.zweitrangig { background: transparent; color: var(--navy); }
  .anmeldung button.zweitrangig:hover { background: #1A222C; }
  .anmeldung select,
  .reihe select,
  .reihe input { background: #1A222C; color: var(--text); }
  .reihe button:hover { background: #1A222C; }
  .zaehler.gut { color: #5FD19A; }
  .rumpf tr:first-child td { background: #1A222C; }
  .baustein-auftrag .rumpf,
  .baustein-selbstpruefung .rumpf { background: #1A222C; }

  .balken { background: #2A3542; }
  .baustein.gesehen { border-left-color: #2F5C46; }
  .werkzeugleiste button:hover { background: #1A222C; }
  .werkzeugleiste button.an { background: #1A222C; }
  .notizfeld textarea,
  .kommentare textarea,
  .kommentare input[type="text"],
  .suchform input[type="search"] { background: #1A222C; color: var(--text); }
  .notizfeld button:hover,
  .kommentare button:hover { background: #1A222C; }
  .suchform button { color: #10161C; }
  .nuggets .haken { color: #5FD19A; }
  .marke { color: #E08A9B; }
  .kommentar.intern { border-left-color: #E08A9B; }
  mark { background: #55491C; color: #F6EFD5; }

  .quiz { background: #1A222C; }
  .quiz .antwort { background: #12181F; }
  .quizknopf { color: #10161C; }
  .quiz.ergebnis .stimmt .wortlaut { color: #5FD19A; }
  .quiz.ergebnis .stimmt-nicht .wortlaut { color: #E08A9B; }
  .nachweiskarte.gilt { border-left-color: #5FD19A; }
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(inter-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(inter-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(literata-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(literata-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(inter-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(inter-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(literata-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(literata-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;;
}

body.mit-rahmen { padding: 0; background: var(--flaeche); }

body.mit-rahmen .blatt { max-width: 112rem; margin: 0; }

.appkopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 1rem;
  background: var(--navy-tief); color: #fff;
}

.appkopf .hubmarke { display: flex; align-items: center; gap: .7rem; text-decoration: none;
  flex: 0 1 auto; min-width: 0; }

.appkopf .hubmarke img { display: block; height: 34px; width: auto; max-width: 100%; }
.appkopf .teiler { width: 1px; height: 26px; background: rgba(255,255,255,.22); }
.appkopf .produkt { color: #fff; font-weight: 600; font-size: 15px; }

.appkopf .by { color: rgba(255,255,255,.45); font-size: 11px; }

.appkopf .hubmarke img.produktbild { height: 34px; }

.rechtsfuss .fussmarke {
  display: inline-flex; align-items: center;
  margin-left: auto; text-decoration: none;
}

.rechtsfuss .fusszeichen {
  display: block; height: 22px; aspect-ratio: 2616 / 572;
  background: var(--leise-2);
  -webkit-mask: url(/marke-wissenshub-dunkelschrift.png) center / contain no-repeat;
          mask: url(/marke-wissenshub-dunkelschrift.png) center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .rechtsfuss .fusszeichen { background: rgba(255,255,255,.7); }
}
.rechtsfuss .fussmarke:hover, .rechtsfuss .fussmarke:focus-visible { text-decoration: none; }
.rechtsfuss .fussmarke:hover .fusszeichen, .rechtsfuss .fussmarke:focus-visible .fusszeichen { background: var(--akzent); }

@media (max-width: 620px) {
  .rechtsfuss .fussmarke { margin-left: 0; }
}
.kopfwerkzeug { display: flex; align-items: center; gap: .35rem; }
.kw {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border-radius: 9px;
  color: rgba(255,255,255,.85); text-decoration: none;
}
.kw.feld { background: rgba(255,255,255,.10); min-width: 14rem; flex: 0 1 24rem; }
.kw.feld input {
  border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px;
  width: 100%; outline: none;
}
.kw.feld input::placeholder { color: rgba(255,255,255,.55); }

.kw.rund.nurschmal { display: none; }
.kw.rund {
  width: 38px; height: 38px; flex: none; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center;
}
.kw .z, .avatar { flex: none; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%; margin-left: .3rem;
  background: linear-gradient(140deg, #4A7FBF, #26507F);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
.leistenkippe { display: none; }

.ichmenue {
  position: relative;
  display: flex; align-items: center; align-self: center;

  margin: 0;
}
.ichmenue > summary { list-style: none; cursor: pointer; }
.ichmenue > summary::-webkit-details-marker { display: none; }
.ichklappe {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40;
  min-width: 12rem; padding: .35rem;
  background: var(--papier); color: var(--text);
  border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: var(--schatten-m);
  display: flex; flex-direction: column;
}
.ichklappe a {
  padding: .5rem .6rem; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: .92rem;
}
.ichklappe a:hover { background: var(--sand); }

.z { width: 18px; height: 18px; flex: none; }
.z, .z * { stroke-linecap: round; }

.hubrumpf {
  display: flex; align-items: flex-start;
  min-height: calc(100vh - var(--kopfhoehe) - var(--fusshoehe));
}
.seite {

  display: flex; flex-direction: column;
  position: sticky; top: var(--kopfhoehe);
  width: var(--leistenbreite); flex: none;
  padding: 1rem .75rem; background: var(--papier);
  border-right: 1px solid var(--linie);
  min-height: calc(100vh - var(--kopfhoehe) - var(--fusshoehe));

  max-height: calc(100vh - var(--kopfhoehe));
  overflow-y: auto; overscroll-behavior: contain;
  font-size: 13px;
}
.seite .nav {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem .55rem; border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.seite .nav:hover { background: var(--sand); }
.seite .nav.aktiv { background: var(--sand); font-weight: 600; }
.seite .kreis {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--sand); color: var(--leise);
  display: flex; align-items: center; justify-content: center;
}
.seite .nav.aktiv .kreis { background: var(--akzent); color: var(--auf-akzent); }
.seite .wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gruppe {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--leise-2); font-weight: 600; padding: 0 .6rem; margin: 1.2rem 0 .4rem;
}
.seitenfuss a { color: var(--leise); }
.seitenfuss {
  margin-top: 1.2rem; padding: .8rem .6rem 0;
  border-top: 1px solid var(--linie);
  color: var(--leise-2); font-size: 13px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.einklappen {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .4rem; padding: .5rem .55rem;
  border: 0; background: none; border-radius: 9px;
  color: var(--leise-2); font: inherit; font-size: 13px; cursor: pointer;
}
.einklappen:hover { background: var(--sand); }

.inhalt { flex: 1; min-width: 0; padding: 1.6rem 1.5rem 4rem; }

body.leiste-zu .seite { width: 62px; padding: 1rem .5rem; }
body.leiste-zu .seite .nav { justify-content: center; padding: .45rem 0; }
body.leiste-zu .gruppe,
body.leiste-zu .seitenfuss,
body.leiste-zu .seite .wort,
body.leiste-zu .einklappen span { display: none; }
body.leiste-zu .seite .nav > *:not(.kreis) { display: none; }
body.leiste-zu .einklappen { justify-content: center; }

@media (max-width: 860px) {
  .appkopf { padding: 0 .7rem; gap: .5rem; }
  .kw.feld { min-width: 0; }
  .kw.feld input { display: none; }

  .appkopf .by, .appkopf .produkt, .appkopf .teiler { display: none; }
  .appkopf .hubmarke img.produktbild { display: none; }

  .kw.feld { display: none; }
  .kw.rund.nurschmal { display: flex; }
  .leistenkippe {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; margin-right: .2rem;
    border: 0; border-radius: 9px; background: rgba(255,255,255,.10);
    color: #fff; cursor: pointer;
  }
  .seite {
    position: fixed; top: var(--kopfhoehe); left: 0; bottom: 0; z-index: 15;
    width: 82vw; max-width: 20rem;
    transform: translateX(-102%); transition: transform .18s ease;
    box-shadow: var(--schatten-m);
    overflow-y: auto;
  }
  body.leiste-offen .seite { transform: none; }
  body.leiste-zu .seite { width: 82vw; max-width: 20rem; padding: 1rem .75rem; }
  body.leiste-zu .gruppe, body.leiste-zu .seitenfuss, body.leiste-zu .seite .wort,
  body.leiste-zu .seite .nav > *:not(.kreis) { display: revert; }
  body.leiste-zu .seite .nav { justify-content: flex-start; padding: .45rem .55rem; }
  .einklappen { display: none; }
  .inhalt { padding: 1.2rem 1rem 4rem; }
  body.mit-rahmen .blatt { max-width: none; }
}

h1, h2, h3, .appkopf .produkt { font-family: var(--schrift-titel); }
.appkopf .produkt { font-weight: 600; letter-spacing: -.01em; }

.abschnitt {
  display: flex; align-items: center; gap: .6rem;
  margin: 2rem 0 .9rem; font-size: 1.2rem;
}
.abschnitt::before {
  content: ""; width: 3px; height: 1.1em; border-radius: 2px;
  background: var(--karmesin); flex: none;
}

.weiterband {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 1.4rem 0 0; padding: 1rem 1.1rem;
  background: var(--papier); color: var(--text); text-decoration: none;
  border: 1px solid var(--linie);
  border-left: 5px solid var(--karmesin);
  border-bottom: 3px solid var(--karmesin);
  border-radius: 14px; box-shadow: var(--schatten-m);
}
.weiterband .bild {
  width: 92px; height: 56px; border-radius: 9px; flex: none;
  background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.weiterband .bild .z { width: 20px; height: 20px; }

.weiterband .bild.mitbild { display: block; background: none; }
.weiterband .bild.mitbild .kiecke { display: none; }
.weiterband .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.weiterband .ober {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--leise-2);
}
.weiterband .titel { font-family: var(--schrift-titel); font-size: 1.1rem; font-weight: 600; margin-top: .2rem; }
.weiterband .meta { color: var(--leise); font-size: .85rem; margin-top: .25rem; }

.weiterband .knopf {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem; border-radius: 10px;
  background: var(--akzent); color: var(--auf-akzent); font-weight: 600; font-size: .95rem;
}

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: 1.1rem; }
.kachel {
  display: block; text-decoration: none; color: var(--text);
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-s);
}
.kachel .deckel {

  display: block; aspect-ratio: 2.36; height: auto;
  background: linear-gradient(140deg, var(--navy), var(--navy-tief));
}
.kachel:nth-child(2n) .deckel { background: linear-gradient(140deg, var(--akzent), var(--navy)); }
.kachel:nth-child(3n) .deckel { background: linear-gradient(140deg, #5C6B7E, #2A3A4C); }
.kachel .rumpf2 { display: block; padding: .8rem .9rem 1rem; }
.kachel .titel { display: block; font-weight: 600; line-height: 1.35; }

.kachel .unterzeile {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--leise); font-size: .84rem; line-height: 1.35; margin: .3rem 0 0;
  overflow-wrap: anywhere;
}
.kachel .dauer { display: block; color: var(--leise-2); font-size: .8rem; margin: .35rem 0 .7rem; }
.balkenzeile { display: flex; align-items: center; gap: .6rem; }
.spur { flex: 1; height: 6px; background: var(--sand-tief); border-radius: 4px; overflow: hidden; }
.spur i { display: block; height: 100%; background: var(--akzent); border-radius: 4px; }
.prozent { font-size: .8rem; font-weight: 600; color: var(--akzent); }
.prozent.aus { color: var(--leise-2); font-weight: 500; }
.prozent.fertig { color: #2E7D5B; }

.kachel .zugang {
  display: block; margin-top: .5rem;
  color: var(--leise-2); font-size: .78rem;
}
.kachel .prozent.fertig ~ .spur i, .kachel .spur i { }

@media (max-width: 640px) {
  .weiterband { flex-wrap: wrap; }
  .weiterband .knopf { width: 100%; justify-content: center; }
}

.pfad {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .85rem; color: var(--leise-2); margin: 0 0 1rem;
}
.pfad .stufe {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--leise); text-decoration: none;
}
.pfad .stufe.jetzt { color: var(--text); font-weight: 500; }
.pfad .stufe .z { width: 15px; height: 15px; color: var(--leise-2); }
.pfad .trenn .z { width: 13px; height: 13px; color: #B6C2D2; }

.kurskopf {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 4px solid var(--karmesin);
  border-radius: 14px; box-shadow: var(--schatten-m);
}

.kurskopf .kbild {

  width: 320px; aspect-ratio: 2.36; height: auto; border-radius: 12px; flex: none;
  background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.kurskopf .ktext { flex: 2 1 18rem; min-width: min(14rem, 100%); }
.kurskopf .ober {
  display: block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--leise-2);
}
.kurskopf h1 { font-size: 20px; margin: .15rem 0 .2rem; }

.kurskopf .kunterzeile {
  color: var(--leise); font-size: .95rem; line-height: 1.4;
  margin: 0 0 .4rem; max-width: 44ch; overflow-wrap: anywhere;
}

.kurskopf p { margin: 0; }

.kurskopf .krechts {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  flex: 1 1 18rem; min-width: min(15rem, 100%);
}
.kurskopf .kstand { flex: 1 1 8rem; min-width: 0; }
.kurskopf .kstand p { margin: .45rem 0 0; }
.kurskopf .kprozent {
  font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; flex: none;
}

.segment { display: flex; gap: 4px; }
.segment i { flex: 1; height: 9px; border-radius: 3px; background: var(--sand-tief); display: block; }
.segment i.voll { background: var(--akzent); }
.segment i.halb { background: linear-gradient(90deg, var(--akzent) 50%, var(--sand-tief) 50%); }

.fokus {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: var(--schatten-s);
  margin-bottom: .8rem; overflow: hidden;
}

.fokus > summary {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 1rem;
  padding: .7rem .75rem; cursor: pointer; list-style: none;
}
.fokus > summary::-webkit-details-marker { display: none; }

.fhandgriffe { display: flex; align-items: center; gap: .5rem; flex: none; }
.fokus .mknopf { text-decoration: none; }
.fokus > summary:hover .mknopf {
  background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent);
}

.fokus[open] > summary .manriss { display: none; }

.fbeschreibung { margin: .2rem .75rem 1rem; }
.fziel {
  margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise-2); font-weight: 600;
}
.fokus > summary:hover { background: var(--flaeche); }
.fokus > summary:hover .ftitel { color: var(--akzent); }

.fokus .fbild {

  width: 280px; height: 119px; border-radius: 11px; flex: none;
  overflow: hidden;
  background: var(--sand); color: var(--akzent);
  display: flex; align-items: center; justify-content: center;
}

.fokus .ftitel { font-weight: 600; min-width: 0; font-size: 15px; }

.fvorsatz { color: var(--leise-2); font-weight: 600; }
.fokus .fstand { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.fokus .fpfeil {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--papier);
  position: relative; transition: background .15s;
}
.fokus .fpfeil::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; transform: translateY(-2px) rotate(45deg);
  border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise);
  transition: transform .18s;
}
.fokus[open] .fpfeil::after { transform: translateY(2px) rotate(-135deg); }
.fokus > summary:hover .fpfeil { background: var(--sand); }

.fokus .fnr, .modul .mnr {
  flex: none; width: 1.6rem; text-align: right;
  color: var(--leise-2); font-size: .85rem; font-variant-numeric: tabular-nums;
}

.fokus .fstand { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.fokus .fstand .spur { width: 5rem; }
.fokus.einzeln { padding: 0; }

.modulliste { border-top: 1px solid var(--linie); padding: .3rem .6rem .6rem; }

.modul {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 1rem;
  padding: .7rem .75rem; border-radius: 14px;
  text-decoration: none; color: var(--text);
}

.modul:hover { background: var(--flaeche); }

.mbild img, .fbild img, .kbild img, .nbild img, .mkbild img, .nkbild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.modul:hover .mbild img,
.fokus > summary:hover .fbild img,
.naechstes:hover .nbild img,
.merkkarte:hover .mkbild img { transform: scale(1.07); }
.modul.aktiv { background: var(--sand); }
.modul .marke2 {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--linie); color: #B6C2D2;
  display: flex; align-items: center; justify-content: center;
}
.modul .marke2 .z { width: 14px; height: 14px; }
.modul .marke2.fertig { border-color: #2E7D5B; background: rgba(46,125,91,.10); color: #2E7D5B; }
.modul .marke2.laeuft { border-color: var(--akzent); color: var(--akzent); }
.modul .mbild {

  width: 178px; height: 119px; border-radius: 11px; flex: none;
  overflow: hidden; position: relative; display: block; background: var(--sand);
}
.modul .mbild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mmitte { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mkopfzeile { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.mtitel { font-weight: 600; min-width: 0; }

.manriss {
  color: var(--leise); font-size: .88rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.modul .art {
  display: flex; align-items: center; gap: .5rem;
  color: var(--leise-2); font-size: .82rem;
}
.modul .art .z { width: 16px; height: 16px; }

.mknopf {
  flex: none; padding: .3rem .75rem; border-radius: 20px;
  border: 1px solid var(--linie); background: var(--papier);
  color: var(--akzent); font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.modul:hover .mknopf { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

@media (max-width: 640px) {
  .kurskopf { gap: .8rem; }
  .kurskopf .kbild { width: 100%; aspect-ratio: 2.36; height: auto; }

  .fokus .fbild { width: 100%; aspect-ratio: 2.36; height: auto; }

  .modul, .fokus > summary {
    position: relative;
    grid-template-columns: 1fr; gap: .55rem;
  }
  .modul .mbild { width: 100%; height: 150px; }
  .fokus .fbild { width: 100%; }
  .modul .mnr, .fokus > summary .mnr {
    position: absolute; top: .55rem; left: .55rem; z-index: 2;
    width: auto; min-width: 1.6rem; height: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    padding: 0 .4rem; border-radius: 999px;
    background: rgba(15,32,50,.72); color: #fff;
    font-size: .78rem; font-weight: 600; text-align: center;
  }

  .modul .art span { display: revert; }
  .fhandgriffe { justify-content: flex-start; margin-top: .3rem; }
  .modul .mknopf { display: none; }
  .kurskopf .kprozent { margin-left: auto; }
  .fokus .fstand .spur { display: none; }

}

.modulkopf {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.modulkopf h1 { flex: 1; min-width: 12rem; margin: 0; }
.modulkopf .mstand { display: flex; align-items: center; gap: .8rem; flex: none; }
.modulkopf .mstand .spur { width: 6rem; }
.knopf.rand {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--papier); color: var(--text); text-decoration: none; font-size: .9rem;
}

.zwei { display: flex; align-items: flex-start; gap: 1.3rem; justify-content: space-between; }

.linkespalte { flex: 1; min-width: 0; max-width: 68rem; }

.baustein {
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 3px solid var(--karmesin);
  border-radius: 16px; box-shadow: var(--schatten-s);
  padding: 1.1rem 1.2rem; margin: 0 0 1rem;

  scroll-margin-top: calc(var(--kopfhoehe) + 1rem);
}
.baustein.gesehen { border-left-color: var(--karmesin); }
.baustein.gesehen .bkopf::after {
  content: "gelesen"; color: #1B7A4B; font-weight: 600; margin-left: auto;
}
.baustein .bkopf {
  display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--leise-2); margin-bottom: .4rem;
}
.baustein .bkopf .z { width: 15px; height: 15px; }
.baustein h3 { margin: 0 0 .6rem; font-size: 1.35rem; }
.baustein .clip {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border-radius: 12px; display: block; background: var(--navy-tief);
}
.mvideo { position: relative; margin: 0 0 .2rem; }
.abspielen {
  position: absolute; inset: 0; margin: auto;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(15,32,50,.72);
  display: flex; align-items: center; justify-content: center;
}
.abspielen:hover { background: var(--karmesin); }

.abspielen span {
  display: block; margin-left: .35rem;
  border-style: solid; border-width: .8rem 0 .8rem 1.35rem;
  border-color: transparent transparent transparent #fff;
}
.mvideo.laeuft .abspielen { display: none; }

@media (hover: none) and (pointer: coarse) {

  input, select, textarea { font-size: 16px !important; }
  .abspielen { display: none; }

  .mausschnitt .abspielen { display: flex; }
}

.mausschnitt { position: relative; margin: 0 0 .2rem; }
.mausschnitt .aplatz,
.mausschnitt iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: 12px; display: block;
  background: var(--navy-tief);
}
.mausschnitt .aplatz { position: relative; }

.mausschnitt .aspanne {
  position: absolute; top: .9rem; left: 1rem; margin: 0;
  font-size: .8rem; letter-spacing: .04em;
  color: #fff; opacity: .82;
}

.mausschnitt .ahinweis {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; margin: 0;
  font-size: .78rem; line-height: 1.4; text-align: center;
  color: #fff; opacity: .72;
}

.mausschnitt.laedt .abspielen { opacity: .45; cursor: progress; }
.mausschnitt.laeuft .abspielen { display: none; }

@media (max-width: 560px) {
  .mausschnitt .ahinweis { font-size: .72rem; left: .6rem; right: .6rem; }
  .mausschnitt .aspanne  { top: .6rem; left: .7rem; }
}

.bfuss {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .7rem; color: var(--leise-2); font-size: .82rem;
}
.bfuss form { margin: 0; }
.bfuss .merken, .bfuss .kommentarzeile {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--leise-2); font: inherit; font-size: .82rem; text-decoration: none;
}
.bfuss .merken.an { color: var(--akzent); font-weight: 600; }
.bfuss .z { width: 15px; height: 15px; }

.zitat {
  display: flex; align-items: flex-start; gap: .9rem;
  margin: .2rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--karmesin);
}
.zitat .gross {
  font-family: var(--schrift-titel); font-size: 2.5rem; line-height: 1;
  color: var(--karmesin); opacity: .34; flex: none; margin-top: -.5rem;
}
.zitat .ztext { flex: 1; min-width: 0; }

.zitat .zaussage { font-family: var(--schrift-titel); font-size: 1.15rem; line-height: 1.55; }
.zitat .zaussage p { margin: 0; }
.zitat .quelle { color: var(--leise-2); font-size: .85rem; margin-top: .5rem; }

.rueckmeldung {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 16px; box-shadow: var(--schatten-s);
  padding: 1.1rem 1.2rem; margin: 1.4rem 0 0;
}
.rueckmeldung .frage { font-size: 1rem; font-family: var(--schrift); font-weight: 600; margin: 0 0 .8rem; }

.reakreihe { display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; }

.meldereihe {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linie);
}
.meldereihe .reakreihe { flex: none; }
.meldereihe .reak { font-size: .82rem; padding: .35rem .7rem; }
.reakreihe .reak { flex: none; }
.reak {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 22px;
  background: var(--papier); color: var(--leise); font: inherit; font-size: .9rem; cursor: pointer;
}
.reak.an { border-color: var(--akzent); color: var(--akzent); background: rgba(47,96,153,.07); font-weight: 600; }
.reak .em { font-size: 1.05rem; line-height: 1; }

.reak .em.seit { display: inline-block; transform: rotate(-90deg) scaleY(-1); }
.reak .zaehler { color: var(--leise-2); font-size: .8rem; }

.naechstes {
  display: flex; align-items: center; gap: .9rem;
  margin-top: 1rem; padding: .8rem 1rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: var(--schatten-s);
  text-decoration: none; color: var(--text);
}

.naechstes .nbild {
  width: 112px; height: 70px; border-radius: 10px; flex: none;
  overflow: hidden; position: relative; display: block;
  background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.naechstes .nbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.naechstes .ntext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.naechstes .ober {
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise-2);
}
.naechstes .titel { font-weight: 600; margin-top: .15rem; }
.naechstes .knopf.hell {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .55rem 1rem; border-radius: 10px; background: var(--akzent); color: var(--auf-akzent);
  font-weight: 600; font-size: .9rem;
}

.vkurs { display: block; }

.vstand { padding: .6rem 0 .2rem; display: flex; flex-wrap: wrap; gap: 1.4rem; }
.vkursstand { min-width: 15rem; }
.vmodule { list-style: none; margin: .35rem 0 0; padding: 0; }
.vmodule li {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .12rem 0; font-size: .88rem;
}

.vmodule .vhaken { flex: 0 0 1rem; text-align: center; font-size: .8rem; }
.vmodule li.durch .vhaken { color: #2E7D5B; }
.vmodule li.dabei .vhaken { color: var(--akzent); }
.vmodule li.offen { color: var(--leise); }
.vmodule li.offen .vhaken { color: var(--leise-2); }
.vkurs + .vkurs { margin-top: .25rem; }
.vkurs.warn { color: var(--karmesin); }

.antwortfeld { margin: .2rem 0 0; }
.antwortfeld textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .6rem .7rem; font: inherit; font-size: .95rem;
  background: var(--papier); color: var(--text); resize: vertical;
}
.antwortfeld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.antwortfeld .notizfuss {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .45rem;
}
.antwortfeld .notizfuss .klein { flex: 1; min-width: 10rem; }
.antwortfeld button {
  border: 0; border-radius: 9px; padding: .45rem .95rem; cursor: pointer;
  background: var(--akzent); color: var(--auf-akzent); font: inherit; font-weight: 600; font-size: .88rem;
}

.abschlusskarte {
  display: flex; align-items: center; gap: .9rem;
  margin: 1rem 0 1.4rem; padding: .8rem 1rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: var(--schatten-s);
}
.abschlusskarte .nbild {
  width: 112px; height: 70px; border-radius: 10px; flex: none;
  overflow: hidden; position: relative; display: block;
  background: linear-gradient(140deg, var(--akzent), var(--navy-tief));
}
.abschlusskarte .nbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abschlusskarte .ntext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.abschlusskarte .ober {
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--leise-2);
}
.abschlusskarte .titel { font-weight: 600; margin-top: .15rem; }
.abschlusskarte #fussstand { margin-top: .2rem; }
.abschlusskarte .knopf.hell {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .55rem 1rem; border-radius: 10px; background: var(--akzent); color: var(--auf-akzent);
  font-weight: 600; font-size: .9rem; border: 0; cursor: pointer; font-family: inherit;
}
.abschlusskarte .knopf.hell .z { width: 17px; height: 17px; }

.weiterkopf { margin: 0 0 1.2rem; }

.hinweis {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .9rem; color: var(--leise-2); font-size: .82rem;
}
.hinweis .z { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .naechstes, .abschlusskarte {
    flex-direction: column; align-items: stretch; gap: .7rem; padding: .8rem;
  }
  .naechstes .nbild, .abschlusskarte .nbild { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .naechstes .knopf.hell, .abschlusskarte .knopf.hell {
    justify-content: center; padding: .7rem 1rem;
  }
}

.rleiste {
  width: 21rem; flex: none;
  position: sticky; top: calc(var(--kopfhoehe) + 1rem);
}
.rkachel {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 16px; box-shadow: var(--schatten-s); overflow: hidden;
}
.rleiste > .rkopfknopf { border-bottom: 0; padding-right: .2rem; }

.rkachel + .rkachel { margin-top: .7rem; }
.rreiter {
  display: flex; border-bottom: 1px solid var(--linie);
  overflow-x: auto; scrollbar-width: none;
}
.rreiter::-webkit-scrollbar { display: none; }
.rreiter button {
  flex: none; display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .75rem .7rem; border: 0; background: none; cursor: pointer;
  white-space: nowrap;
  color: var(--leise-2); font: inherit; font-size: .8rem;
}
.rreiter button.an { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.rreiter button b { font-weight: 600; }
.rreiter .z { width: 15px; height: 15px; }

.rtafel { padding: .9rem 1rem 1rem; }

.rtafel[data-tafel="transkript"] { max-height: 22rem; overflow-y: auto; }
.tsuchzeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.tsuchzeile input {
  flex: 1; min-width: 0; border: 1px solid var(--linie); border-radius: 999px;
  padding: .4rem .8rem; font: inherit; font-size: .85rem; background: #FCFDFE;
}
.tsuchzeile span { flex: none; white-space: nowrap; }
.transkripttext mark { background: #FDECC8; color: inherit; border-radius: 3px; }

.notizform textarea {
  width: 100%; border: 1px solid var(--linie); border-radius: 11px;
  padding: .7rem .8rem; font: inherit; font-size: .9rem; line-height: 1.6;
  background: #FCFDFE; color: var(--text); resize: vertical;
}

.notizform textarea::placeholder { color: var(--leise-2); font-style: italic; }
.notizfuss { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; }
.notizfuss span { flex: 1; }

.notizfuss .notizstand { flex: 0 0 auto; min-width: 0; text-align: right; }
.antwortfeld .notizfuss .notizstand { flex: 0 0 auto; min-width: 0; }
.notizfuss button {
  border: 0; border-radius: 9px; padding: .45rem .9rem;
  background: var(--akzent); color: var(--auf-akzent); font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer;
}

.notizfuss button.sichern {
  min-width: 8.5rem; display: inline-flex; align-items: center;
  justify-content: center; gap: .35rem;
  transition: background-color .15s ease;
}
.notizfuss button.sichern .fertigwort { display: none; align-items: center; gap: .35rem; }
.notizfuss button.sichern .fertigwort .z { width: 1.05em; height: 1.05em; }
.notizfuss button.sichern.gesichert { background: var(--gruen); }
.notizfuss button.sichern.gesichert .wort { display: none; }
.notizfuss button.sichern.gesichert .fertigwort { display: inline-flex; }

.kommentar .kart, .rkomm .kart {
  margin: -.15rem 0 .35rem; font-size: .75rem; color: var(--leise-2);
}

.kommentar .kfreiform { margin: .4rem 0 0; }
.kommentar .kknoepfe .kfreiform { margin: 0; }
.kommentar .kfreiknopf {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .25rem .7rem; border: 1px solid var(--navy);
  border-radius: 999px; background: var(--navy); color: var(--auf-navy); cursor: pointer;
}
.kommentar .kfreiknopf:hover { filter: brightness(1.1); }

.kommentar .kfreiknopf.ist-frei {
  background: transparent; color: var(--leise); border-color: var(--linie);
}
.rkomm .kart { display: block; margin: 0 0 .15rem; }

.kommentar .kaendern { display: block; margin-right: 0; }
.kaendern > summary {
  list-style: none; cursor: pointer; display: block; padding: .1rem 0;
}
.kommentar .kaendern > summary .was { display: block; margin: .15rem 0 .2rem; }
.kommentar .kaendern[open] > summary .was { display: none; }
.kaendern[open] > summary .nkaendern { display: none; }

.kknoepfe { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .35rem; }
.kknoepfe .wegform, .kknoepfe .kfreiform { display: inline-flex; margin: 0; }
.kaenderfuss { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.kaendern > summary::-webkit-details-marker { display: none; }
.kaendern > summary:hover { color: var(--akzent); }
.kaenderform { display: flex; flex-direction: column; gap: .4rem; margin: .3rem 0 .5rem; }
.kaenderform textarea {
  width: 100%; border: 1px solid var(--linie); border-radius: 10px;
  padding: .5rem .6rem; font: inherit; font-size: .9rem; background: #FCFDFE;
  color: var(--text); resize: vertical;
}
.kaenderform button {
  align-self: start; border: 0; border-radius: 9px; padding: .35rem .9rem;
  background: var(--akzent); color: var(--auf-akzent); font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer;
}

.modulfuss {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin: 1rem 0 1.4rem;
}

.fertigform { margin: 0; display: inline-flex; }
.fertigform .knopf.rand { cursor: pointer; font: inherit; font-size: .9rem; }
#fussstand, .fussrede { max-width: 34rem; line-height: 1.5; }

.rabschnitt {
  display: block; position: relative; padding: .5rem .1rem .5rem 1.45rem;
  border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none; font-size: .9rem;
}
.rabschnitt:last-child { border-bottom: 0; }
.rabschnitt:hover { color: var(--akzent); }
.rabschnitt::before {
  content: "○"; position: absolute; left: 0; top: .5rem;
  color: var(--leise-2); font-size: .95rem; line-height: 1.4;
}
.rabschnitt.gesehen::before { content: "✓"; color: #1B7A4B; }
.rabschnitt.gesehen { color: var(--leise); }

.rstand {
  margin: 0 0 .6rem; font-size: .8rem; line-height: 1.5; color: var(--leise);
  border-bottom: 1px solid var(--linie); padding-bottom: .6rem;
}

.rkomm {
  display: block; padding: .55rem 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: var(--text);
}
.rkomm:last-child { border-bottom: 0; }
.rkomm .wer { display: block; font-weight: 600; font-size: .82rem; }
.rkomm .was { display: block; color: var(--leise); font-size: .85rem; margin-top: .15rem; }
.transkripttext { font-size: .88rem; line-height: 1.65; color: var(--leise); margin: 0 0 .8rem; }

.rkopfknopf {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem; width: 100%;
  padding: .55rem 1rem; border: 0; border-bottom: 1px solid var(--linie);
  background: none; color: var(--leise-2); font: inherit; font-size: .8rem; cursor: pointer;
}
.rkopfknopf:hover { color: var(--text); background: var(--sand); }
.rkopfknopf .z { width: 15px; height: 15px; }

.randstreifen[hidden] { display: none; }
.randstreifen {
  width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .6rem 0; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 16px; box-shadow: var(--schatten-s);
  position: sticky; top: calc(var(--kopfhoehe) + 1rem);
}
.randstreifen .kn {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--flaeche); color: var(--leise); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.randstreifen .kn:hover { background: var(--sand); color: var(--akzent); }

.randstreifen .zurueckkn {
  background: var(--navy); color: var(--auf-navy);
  margin-bottom: .35rem; padding-bottom: 0;
}
.randstreifen .zurueckkn:hover { background: var(--akzent); color: var(--auf-akzent); }

@media (max-width: 900px) {

  .zwei { flex-direction: column; align-items: stretch; }
  .linkespalte { max-width: none; width: 100%; }
  .rleiste { width: 100%; position: static; }
  .randstreifen { display: none; }
  .rkopfknopf { display: none; }
  .modulkopf .mstand .spur { display: none; }
}

.mitbild { position: relative; overflow: hidden; display: block; }
.mitbild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kiecke {
  position: absolute; right: .25rem; bottom: .25rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,32,50,.55); color: #fff;
  font-size: .48rem; font-weight: 600; letter-spacing: .02em;
}

.mbild.platzhalter, .fbild.platzhalter, .kbild.platzhalter,
.nbild.platzhalter, .mkbild.platzhalter, .nkbild.platzhalter {
  display: flex; align-items: center; justify-content: center;
}
.phkurz {
  color: rgba(255,255,255,.82); font-weight: 700;
  letter-spacing: .08em; font-size: 1.05rem;
}
.nbild .phkurz, .mkbild .phkurz, .nkbild .phkurz { font-size: .8rem; }

.fbild.mitbild { border-radius: 11px; }
.fbild.mitbild .kiecke { display: none; }
.bbild {
  display: block; position: relative; overflow: hidden;
  border-radius: 12px; margin-bottom: .8rem; max-height: 26rem;
}
.bbild img { width: 100%; height: auto; }

.wunschliste { margin-top: 1.2rem; }

.wunsch {
  display: flex; gap: 1.1rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; box-shadow: var(--schatten-s);
  padding: 1.1rem 1.2rem; margin-bottom: .75rem;
}

.wunsch.offen {
  border: 0; box-shadow: none; background: transparent;
  padding: 0; margin-bottom: 1.4rem;
}
.wunschtext { flex: 1; min-width: 0; }
.wunschtext h1 { margin: 0 0 .3rem; }
.wunschtext h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.wunschtext h3 a { color: var(--text); text-decoration: none; }
.wunschtext h3 a:hover { color: var(--navy); text-decoration: underline; }
.wunschtext p { margin: 0 0 .6rem; color: var(--leise); }

.stimmform { flex: none; margin: 0; }
.stimme {
  font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  width: 4rem; padding: .55rem 0;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--papier); color: var(--text);
}
.stimme .z { width: 18px; height: 18px; color: var(--akzent); }
.stimme .n { font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.stimme .wort { font-size: .68rem; color: var(--leise-2); }
.stimme:hover { border-color: var(--akzent); }
.stimme.an { border-color: var(--akzent); background: rgba(47,96,153,.07); }
.stimme.an .wort { color: var(--akzent); }

.wunschmarker { margin: 0 0 .6rem; }
.wunschmarker .schild {
  display: inline-block; padding: .2rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  background: var(--sand); color: var(--navy);
}
.wunschmarker.arbeit .schild { background: rgba(47,96,153,.12); color: var(--akzent); }
.wunschmarker.gebaut .schild { background: rgba(46,125,91,.14); color: #2E7D5B; }
.wunschmarker .dazu { font-size: .82rem; color: var(--leise); }

.wunschfuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  color: var(--leise-2); font-size: .82rem;
}
.wunschfuss span { display: inline-flex; align-items: center; gap: .35rem; }
.wunschfuss .z { width: 15px; height: 15px; }

.wunschform > summary,
.wunschredaktion > summary {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .5rem .9rem; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--papier); color: var(--navy); font-size: .9rem; font-weight: 600;
}
.wunschform > summary:hover,
.wunschredaktion > summary:hover { background: #F4F7FA; }
.wunschform > summary::marker,
.wunschredaktion > summary::marker { content: ""; }
.wunschform form,
.wunschredaktion form {
  margin-top: .8rem; padding: 1rem 1.1rem;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--papier);
}
.wunschform label,
.wunschredaktion label { display: block; font-size: .85rem; color: var(--leise); }
.wunschform label + label { margin-top: .8rem; }
.wunschform input[type="text"],
.wunschform textarea,
.wunschredaktion input[type="text"] {
  font: inherit; font-size: 14px;
  width: 100%; margin-top: .3rem; padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  background: #fff; color: var(--text); resize: vertical;
}
.wunschform button,
.wunschredaktion button {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  margin-top: .9rem; padding: .6rem 1.1rem; border: 0; border-radius: 10px;
  background: var(--akzent); color: var(--auf-akzent);
}
.zustandswahl { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.zustandswahl label {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--text); font-size: .92rem;
}

@media (max-width: 640px) {
  .wunsch { gap: .8rem; padding: .9rem 1rem; }
  .stimme { width: 3.4rem; }

  .wunschfuss { gap: .3rem .9rem; }
}

@media (prefers-color-scheme: dark) {
  .wunschform input[type="text"],
  .wunschform textarea,
  .wunschredaktion input[type="text"] { background: #1A222C; color: var(--text); }
  .wunschform > summary:hover,
  .wunschredaktion > summary:hover { background: #1A222C; }
  .wunschmarker.gebaut .schild { background: rgba(95,209,154,.16); color: #5FD19A; }
}

.wunschbeispiel {
  background: var(--sand); border-radius: 14px;
  padding: 1rem 1.2rem; margin: 0 0 1.2rem;
}
.wunschbeispiel p { margin: 0 0 .6rem; }
.wunschbeispiel p:last-child { margin-bottom: 0; font-weight: 600; color: var(--navy); }
.stimme.still { cursor: default; }
.stimme.still:hover { border-color: var(--linie); }

.zugangshinweis { max-width: 40rem; padding-top: .5rem; }
.zugangshinweis .lead { margin-bottom: 1.2rem; }

.stoerknopf {
  display: flex; align-items: center; gap: .6rem;
  margin: auto .75rem .2rem; padding: .45rem .55rem;
  border-radius: 8px; text-decoration: none;
  color: var(--leise-2); font-size: .82rem;
}
.stoerknopf:hover { background: var(--sand); color: var(--karmesin); }
.stoerknopf .z { width: 16px; height: 16px; flex: none; }
body.leiste-zu .stoerknopf .wort { display: none; }
body.leiste-zu .stoerknopf { justify-content: center; }

.stoerdialog {
  width: min(38rem, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: 16px;
  background: var(--papier); color: var(--text);
  box-shadow: var(--schatten-m);
}
.stoerdialog::backdrop { background: rgba(15,32,50,.45); }

.stoerdialog[open] { display: flex; flex-direction: column; max-height: calc(100vh - 4rem); }
.stoerdialog form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dialogkopf { flex: none; padding: 1.3rem 1.4rem .2rem; }
.dialogkopf h3 { margin: 0; font-size: 1.2rem; }
.dialogkopf p { margin: .4rem 0 0; color: var(--leise); font-size: .9rem; }
.dialogrumpf { flex: 1; min-height: 0; padding: 1rem 1.4rem 1.2rem; overflow-y: auto; }
.dialogfuss {
  flex: none;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .9rem 1.4rem; border-top: 1px solid var(--linie); background: var(--flaeche);
  border-radius: 0 0 16px 16px;
}
.dialogfuss .empfaenger { flex: 1; min-width: 10rem; color: var(--leise); font-size: .8rem; }

.dialogrumpf label,
.stoerform label { display: block; margin-top: .9rem; font-size: .85rem; color: var(--leise); }
.dialogrumpf label:first-child,
.stoerform label:first-child { margin-top: 0; }
.dialogrumpf textarea, .dialogrumpf input[type="url"],
.stoerform textarea,   .stoerform input[type="url"] {
  font: inherit; font-size: 14px;
  width: 100%; margin-top: .3rem; padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  background: #fff; color: var(--text); resize: vertical;
}
.knopf.voll {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.2rem; border: 0; border-radius: 10px;
  background: var(--akzent); color: var(--auf-akzent);
}
.dialogfuss .knopf.rand { cursor: pointer; font: inherit; font-size: .92rem; }
.stoerform .knopf.voll { margin-top: 1.2rem; }

.bildablage {
  margin-top: .35rem; padding: 1rem; text-align: center;
  border: 1px dashed var(--linie); border-radius: 12px; background: var(--flaeche);
}
.bildablage.drueber { border-color: var(--akzent); background: rgba(47,96,153,.06); }
.bildablage .z { width: 22px; height: 22px; color: var(--leise-2); }
.bildablage b { display: block; margin: .3rem 0 .15rem; font-size: .9rem; }

.dateifeld {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.dateiknopf {
  display: inline-block; margin-top: .7rem; cursor: pointer;
  padding: .4rem .8rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--papier); color: var(--navy); font-size: .82rem; font-weight: 600;
}
.dateiknopf:hover { background: #F4F7FA; }
.dateifeld:focus-visible + .dateiknopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.bildablage .dabei { display: block; margin-top: .5rem; color: #2E7D5B; font-weight: 600; }

.mitgeschickt {
  margin-top: 1.1rem; padding: .8rem .9rem;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche);
}
.mitgeschickt .t {
  display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--leise-2);
}
.mitgeschickt .t .z { width: 15px; height: 15px; }
.mitgeschickt table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mitgeschickt td { padding: .18rem 0; vertical-align: top; word-break: break-word; }
.mitgeschickt td:first-child { width: 6.5rem; color: var(--leise-2); }

.stoerkarte.neu { border-left: 3px solid var(--karmesin); }
.stoerkarte.erledigt { opacity: .62; }
.stoerkarte p { margin: .4rem 0; }

.stoerkarte a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--navy); font-size: .85rem; font-weight: 600;
}
.stoerkarte a .z { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .stoerdialog { width: 100vw; max-width: none; border-radius: 16px 16px 0 0; margin: auto 0 0; }
  .dialogfuss { border-radius: 0; }
  .dialogfuss .knopf.rand, .dialogfuss .knopf.voll { flex: 1; justify-content: center; }
}

@media (prefers-color-scheme: dark) {

  .notizform textarea,
  .suchform input[type="search"],
  .anmeldung input[type="password"],
  .reihe input,
  .kommentare input[type="text"],
  .quiz .antwort { background: #12181F; color: var(--text); }
  .quiz .antwort:hover { background: #1A222C; }

  .stoerdialog { background: #1A222C; }
  .dateiknopf { background: transparent; }
  .dateiknopf:hover { background: #12181F; }
  .dialogrumpf textarea, .dialogrumpf input[type="url"],
  .stoerform textarea,   .stoerform input[type="url"] { background: #12181F; color: var(--text); }
  .stoerknopf:hover { background: #1A222C; }
}

.kw.schalter {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 .8rem; height: 38px; border-radius: 19px;
  background: rgba(255,255,255,.08); color: #E8EDF2;
  text-decoration: none; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.kw.schalter:hover { background: rgba(255,255,255,.16); }
.kw.schalter .z { width: 16px; height: 16px; }

.mitgliedszeile { margin: -.4rem 0 1.1rem; color: var(--leise); font-size: .92rem; }

.pflege { list-style: none; margin: .6rem 0 0; padding: 0; }
.pflege li {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem 0; border-top: 1px solid var(--linie);
}
.pflege li:first-child { border-top: 0; }
.pflege a { flex: 1; min-width: 12rem; color: var(--text); text-decoration: none; font-weight: 500; }
.pflege a:hover { color: var(--navy); text-decoration: underline; }
.pmarken { display: flex; gap: .5rem; flex-wrap: wrap; }
.pmarke {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .78rem; background: var(--sand); color: var(--leise);
}

.pmarke.veraltet { background: rgba(146,43,62,.10); color: var(--karmesin); }
.pmarke b { font-weight: 700; }

@media (max-width: 860px) {
  .kw.schalter .wort { display: none; }
  .kw.schalter { padding: 0; width: 38px; justify-content: center; }
}

@media (prefers-color-scheme: dark) {
  .pmarke.veraltet { background: rgba(224,138,155,.14); color: #E08A9B; }
}

.mvideo { margin: 0 0 .2rem; }
.vleiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-top: .6rem;
}
.vleiste .tl {
  margin-left: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--leise-2);
}
.vleiste button {
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  padding: .3rem .6rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--papier); color: var(--leise); white-space: nowrap;
}
.vleiste button:hover { background: var(--sand); color: var(--text); }
.vleiste button.an { background: var(--navy); border-color: var(--navy); color: var(--auf-navy); }

.vleiste .vsprung { color: var(--navy); }

.vleiste .ut { margin-left: auto; }
@media (max-width: 560px) { .vleiste .ut { margin-left: 0; } }

@media (prefers-color-scheme: dark) {
  .vleiste button { background: transparent; }
  .vleiste button:hover { background: #1A222C; }
  .vleiste button.an { background: var(--akzent); border-color: var(--akzent); color: #10161C; }
}

.seite .bildkreis { padding: 0; overflow: hidden; }

.seite .bildkreis img {
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
  display: block;
}

.seite .bildkreis .kiecke { display: none; }

.tfuss { display: none; }

@media (max-width: 860px) {
  .tfuss {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; justify-content: space-around;
    padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
    background: var(--papier); border-top: 1px solid var(--linie);
    box-shadow: 0 -2px 14px rgba(20,41,63,.07);
  }
  .tfuss a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .3rem 0; border-radius: 10px;
    color: var(--leise-2); text-decoration: none; font-size: .66rem;
  }
  .tfuss a.an { color: var(--akzent); font-weight: 600; }
  .tfuss .z { width: 21px; height: 21px; }

  body.mit-rahmen .inhalt { padding-bottom: 5.5rem; }

  .angebote { position: static; background: none; padding-top: 0; }

  .stoerdialog { margin-bottom: 0; }
}

@media (prefers-color-scheme: dark) {
  .tfuss { box-shadow: 0 -2px 14px rgba(0,0,0,.35); }
}

.pf-karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--rundung); padding: 1.4rem 1.5rem; margin: 0 0 1.1rem;
}
.pf-karte > h2 {
  margin: 0 0 .3rem; font-family: var(--schrift-titel);
  font-size: 1.22rem; color: var(--navy);
}
.pf-karte > .pf-unter { margin: 0 0 1.1rem; color: var(--leise); font-size: .93rem; }

.pf-du { display: flex; gap: 1.6rem; align-items: flex-start; }
.pf-bildspalte { flex: 0 0 auto; text-align: center; }
.pf-bild {
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--sand-tief); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--linie); overflow: hidden;
}
.pf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-bildwahl { margin: 0; }

.pf-felder { flex: 1 1 auto; min-width: 0; }
.pf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.pf-feld { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pf-feld label { font-weight: 600; font-size: .9rem; color: var(--navy); }

.pf-feld input {
  font: inherit; font-size: 14px; padding: .5rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  background: var(--papier); color: var(--text); width: 100%;
}
.pf-feld input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }

.pf-fest {
  font-size: 14px; padding: .5rem .7rem; border: 1px dashed var(--linie);
  border-radius: var(--rundung); background: var(--flaeche); color: var(--leise);
  overflow-wrap: anywhere;
}

.pf-hinweis { margin: .9rem 0 0; font-size: .88rem; color: var(--leise); }
.pf-hinweis.kurz { color: var(--karmesin); }
.pf-hinweis.gut  { color: var(--gruen); }

.pf-schritte { margin: .2rem 0 0; padding-left: 1.3rem; color: var(--text); font-size: .95rem; }
.pf-schritte li { margin: .35rem 0; }
.pf-schritte b { color: var(--navy); }

.pf-tun { margin: 1.2rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.pf-tun button {
  font: inherit; font-weight: 600; padding: .8rem 1.1rem; border: 0;
  border-radius: var(--rundung); background: var(--navy); color: var(--auf-navy); cursor: pointer;
}
.pf-tun button:hover { filter: brightness(1.1); }

.pf-tun button.pf-ruhig {
  background: transparent; color: var(--navy); border: 1px solid var(--linie);
}

.pf-zeile {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--linie);
}
.pf-zeile:first-of-type { border-top: 0; }
.pf-zeile .pf-was { flex: 1 1 auto; min-width: 0; }
.pf-zeile .pf-was b { display: block; font-weight: 600; }
.pf-zeile .pf-was span { color: var(--leise); font-size: .9rem; }
.pf-jetzt {
  font-size: .78rem; font-weight: 600; color: var(--navy);
  background: var(--sand-tief); border-radius: 99px;
  padding: .15rem .55rem; margin-left: .4rem; white-space: nowrap;
}
.pf-weg {
  font: inherit; font-size: .9rem; background: transparent;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  padding: .45rem .8rem; color: var(--navy); cursor: pointer; white-space: nowrap;
}
.pf-weg:hover { background: var(--flaeche); }

.pf-post {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 0; border-top: 1px solid var(--linie); cursor: pointer;
}
.pf-post:first-of-type { border-top: 0; }
.pf-post input { width: 20px; height: 20px; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.pf-post .pf-was b { display: block; font-weight: 600; }
.pf-post .pf-was span { color: var(--leise); font-size: .9rem; }

.pf-weiss { margin: 0; padding-left: 1.1rem; color: var(--text); }
.pf-weiss li { margin: .3rem 0; }

@media (max-width: 760px) {
  .pf-karte { padding: 1.15rem 1.1rem; }

  .pf-du { flex-direction: column; align-items: center; gap: 1.1rem; }
  .pf-felder { width: 100%; }
  .pf-zwei { grid-template-columns: 1fr; }
  .pf-zeile { align-items: flex-start; gap: .7rem; }
  .pf-tun button { flex: 1 1 auto; }
}

.mldart { border: 0; padding: 0; margin: 0 0 1rem; }
.mldart legend {
  padding: 0; margin: 0 0 .5rem; font-weight: 600; font-size: .95rem; color: var(--navy);
}
.mldwahl {
  display: flex; align-items: flex-start; gap: .7rem; padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  margin-bottom: .4rem; cursor: pointer; background: var(--papier);
}
.mldwahl:has(input:checked) { border-color: var(--navy); background: var(--flaeche); }
.mldwahl input { width: 20px; height: 20px; margin: .1rem 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.mldwahl > span { display: block; min-width: 0; }
.mldwahl b { display: block; font-weight: 600; }

.mldschild {
  display: inline-block; margin: 0 0 .5rem; padding: .15rem .6rem;
  border-radius: 99px; font-size: .78rem; font-weight: 600;
  background: var(--sand-tief); color: var(--navy);
}

.mldschild.schoenheit { background: transparent; border: 1px solid var(--linie); color: var(--leise); }

@media (max-width: 380px) {
  .appkopf .by,
  .appkopf .teiler { display: none; }

  .appkopf .hubmarke img { height: 18px; }
}

.merkliste { display: grid; gap: .7rem; }
.merkkarte {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem .9rem; border-radius: 14px;
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 3px solid var(--karmesin);
  text-decoration: none; color: var(--text);
}
.merkkarte:hover { box-shadow: var(--schatten-s); }
.merkkarte .mkbild {
  width: 56px; height: 56px; border-radius: 10px; flex: none;
  background: var(--sand); overflow: hidden; position: relative; display: block;
}
.merkkarte .mkbild img { width: 100%; height: 100%; object-fit: cover; }
.merkkarte .mktext { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.merkkarte .mktitel { font-weight: 600; }

.notizfuhr { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.notizkarte {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: .9rem 1rem; margin: 0 0 .7rem; border-radius: 14px;
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 3px solid var(--karmesin);
  cursor: pointer;
}

.notizkarte > input[type="checkbox"] { width: 18px; height: 18px; margin-top: .25rem; flex: none; }
.notizkarte .nkbild {
  width: 56px; height: 56px; border-radius: 10px; flex: none;
  background: var(--sand); overflow: hidden; position: relative; display: block;
}
.notizkarte .nkbild img { width: 100%; height: 100%; object-fit: cover; }
.notizkarte .nktext { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.notizkarte .nktitel { font-weight: 600; }

.notizkarte .nkkurs { margin-bottom: -.2rem; }
.notizkarte .nkwas { white-space: pre-wrap; margin: .2rem 0; }

.fokus.einzeln.offen { border: 0; background: none; box-shadow: none; padding: 0; }

.leiseblock { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.leiseblock h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--leise); }
.offenliste > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: .82rem; color: var(--leise-2); padding: .2rem 0;
}
.offenliste > summary::-webkit-details-marker { display: none; }
.offenliste > summary:hover { color: var(--akzent); }

.wfrage { font-size: .8rem; color: var(--leise-2); margin: .7rem 0 -.5rem; font-weight: 600; }

.unterlagenkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.unterlagenkopf h1 { margin: .1rem 0; }
.unterlagenkopf .ober {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leise-2);
}
.blattschau {
  width: 100%; height: min(78vh, 900px); border: 1px solid var(--linie);
  border-radius: 14px; background: var(--sand); display: block;
}
.blattschau.klein { height: 30rem; }
.unterlage { margin: .2rem 0 0; }
.unterlagenfuss {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem;
}
.unterlagenfuss span { flex: 1; min-width: 8rem; }

.uliste {
  display: grid; gap: .7rem; margin: 1.1rem 0 .4rem;
}
.uzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; padding: .7rem .9rem;
  box-shadow: var(--schatten-s);
}

.uzeile .ubild {
  flex: 0 0 8.5rem; width: 8.5rem; aspect-ratio: 16 / 9;
  display: block; border-radius: 10px; overflow: hidden;
  background: linear-gradient(140deg, var(--navy), var(--navy-tief));
}
.uzeile .ubild .kiecke { display: none; }

.uzeile .urumpf {
  flex: 1 1 13rem; min-width: 0;
  display: flex; flex-direction: column; gap: .25rem;
}

.uzeile .uname {
  font-weight: 600; line-height: 1.3; font-size: 1rem;

  overflow-wrap: anywhere;
}
.uzeile .uwofuer { font-size: .86rem; line-height: 1.4; color: var(--leise); }
.uzeile .uher {
  font-size: .78rem; color: var(--leise-2); overflow-wrap: anywhere;
}
.uzeile .uwege { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .45rem; }

.uknopf, .rumpf .uknopf {
  font: inherit; font-weight: 600; font-size: .85rem;
  display: inline-block; padding: .45rem .8rem; border: 1px solid var(--navy);
  border-radius: 9px; background: var(--navy); color: var(--auf-navy);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.uknopf:hover, .rumpf .uknopf:hover { background: #16304f; border-color: #16304f; }
.uknopf.zweitrangig, .rumpf .uknopf.zweitrangig {
  background: transparent; color: var(--navy); border-color: var(--linie);
}
.uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover {
  border-color: #C8D4E4; background: #F4F7FA;
}

@media (prefers-color-scheme: dark) {
  .uzeile { background: #16202C; border-color: #2A3846; }

  .uknopf, .rumpf .uknopf { color: #10161C; }
  .uknopf.zweitrangig, .rumpf .uknopf.zweitrangig {
    color: var(--text); border-color: #3A4A5C;
  }
  .uknopf:hover, .rumpf .uknopf:hover { background: #9FC0DF; border-color: #9FC0DF; }
  .uknopf.zweitrangig:hover, .rumpf .uknopf.zweitrangig:hover {
    background: #1D2836; border-color: #4A5C70;
  }
}

@media (max-width: 30rem) {
  .uzeile .ubild { flex-basis: 5.5rem; width: 5.5rem; }
  .uknopf, .rumpf .uknopf { padding: .45rem .65rem; }
}

@media (max-width: 640px) {
  .blattschau { height: 60vh; }
  .blattschau.klein { height: 20rem; }
  .notizkarte .nkbild, .merkkarte .mkbild { display: none; }
}

.anmeldemarke {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 0 0 1.4rem; padding: 1.4rem 1.5rem;
  background: var(--navy-tief, #16273D); border-radius: 14px;
}

.anmeldemarke .kundenzeichen { display: block; height: 46px; width: auto; }

@media (max-width: 480px) {
  .anmeldemarke { gap: .9rem; padding: 1.1rem; }
  .anmeldemarke .kundenzeichen { height: 34px; }
}

.rechtsfuss {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  justify-content: center; align-items: center;
  padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--papier);
  font-size: .82rem;
}
.rechtsfuss a { color: var(--leise-2); text-decoration: none; }
.rechtsfuss a:hover, .rechtsfuss a:focus-visible { color: var(--akzent); text-decoration: underline; }

@media (max-width: 640px) {
  .reakreihe { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 860px) {

  .rechtsfuss { padding-bottom: calc(5.9rem + env(safe-area-inset-bottom)); }

  :root { --fusshoehe: 134px; }
}

.hinausseite { max-width: 54rem; }
.hkopf { margin-bottom: 1.4rem; }
.hueber {
  margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--karmesin);
}
.hkopf h1 { margin-bottom: .4rem; }

.hbild {
  display: block; border-radius: var(--rundung); overflow: hidden;
  border: 1px solid var(--linie); box-shadow: var(--schatten-m); margin-bottom: 1.4rem;
}
.hbild img { display: block; width: 100%; height: auto; }
.hbild:hover { box-shadow: 0 6px 12px rgba(20,41,63,.10), 0 26px 60px rgba(20,41,63,.14); }
.hpunkte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .8rem; margin-bottom: 1.6rem;
}
.hpunkt {
  background: var(--papier); border: 1px solid var(--linie); border-left: 3px solid var(--karmesin);
  border-radius: var(--rundung); padding: .85rem 1rem;
}
.hpunkt .hober {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leise-2); margin-bottom: .25rem;
}
.hpunkt b { display: block; font-size: .98rem; margin-bottom: .2rem; }
.hpunkt span:not(.hober) { display: block; font-size: .88rem; line-height: 1.55; color: var(--leise); }
.hraus { margin-bottom: 1.6rem; }
.hraus p { margin: .6rem 0 0; }
.quizknopf.gross { font-size: 1.05rem; padding: .95rem 1.6rem; }
.hinausbox { margin-bottom: 0; border-left-color: var(--karmesin); }
.hinausbox b { display: block; font-size: 1.15rem; margin-bottom: .35rem; color: var(--karmesin); }
.hinausbox p { margin: 0 0 .5rem; line-height: 1.6; }
.hinausziel {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem; color: var(--leise); word-break: break-all;
}
.hinaustun { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }

.willkommen { max-width: 52rem; }
.willkommen h1 { margin-bottom: .3rem; }
.willkommen .lead { margin-bottom: 1.6rem; }
.willkommen .pf-karte { margin-bottom: 1.2rem; }
.willkommen h2 { display: flex; align-items: center; gap: .6rem; }
.wnr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--navy); color: var(--auf-navy); font-size: .85rem; font-weight: 700;
}

.wtun { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.wtun .knopf.rand { cursor: pointer; font: inherit; font-size: .9rem; }

.neuenotiz {
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rundung);
  padding: .9rem 1rem; margin: 0 0 1.6rem; box-shadow: var(--schatten-s);
}
.neuenotiz label { display: block; margin-bottom: .35rem; }
.neuenotiz textarea,
.freiform textarea {
  width: 100%; border: 1px solid var(--linie); border-radius: 11px;
  padding: .7rem .8rem; font: inherit; font-size: .95rem; line-height: 1.6;
  background: #FCFDFE; color: var(--text); resize: vertical;
}
.neuenotiz textarea::placeholder { color: var(--leise-2); font-style: italic; }
.nnfuss { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.nnfuss span { flex: 1; min-width: 12rem; }
.freiform { margin-top: .7rem; }
.freiform button {
  border: 1px solid var(--linie); border-radius: 10px; background: var(--papier);
  padding: .4rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--text);
}
.freiform .wegknopf { color: var(--karmesin); border-color: transparent; }
.freiform .wegknopf:hover { border-color: var(--karmesin); }
.notizkarte.frei { align-items: flex-start; }
.freiaendern > summary { cursor: pointer; list-style: none; }
.freiaendern > summary::-webkit-details-marker { display: none; }
.freiaendern > summary:hover .nkwas { color: var(--akzent); }
.freiaendern[open] > summary .nkwas { color: var(--leise); }
.nkaendern { display: inline-block; margin-top: .35rem; text-decoration: underline; }
.freiaendern[open] .nkaendern { display: none; }

.geraeteliste { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.geraeteliste li {
  padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: var(--rundung);
  background: var(--papier); margin-bottom: .5rem;
}
.geraeteliste li span { display: block; margin-top: .15rem; }

.rueckmeldung .dankzeile { margin: .7rem 0 0; min-height: 1.15em; }

.fragefeld { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.fragefeld textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .6rem .7rem; font: inherit; font-size: .95rem;
  background: var(--papier); color: var(--text); resize: vertical;
}
.fragefeld textarea::placeholder { color: var(--leise-2); font-style: italic; }
.fragefeld textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.fragefeld .notizfuss span { max-width: none; }
.fragefeld .notizfuss button {
  border: 0; border-radius: 9px; padding: .45rem .9rem;
  background: var(--akzent); color: var(--auf-akzent); font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer;
}

.schongefragt { margin: 0 0 .8rem; }
.schongefragt .gefragt {
  margin: .3rem 0 0; padding: .5rem .7rem;

  border-left: 3px solid var(--karmesin); border-radius: 0 8px 8px 0;
  background: var(--flaeche); font-size: .92rem; line-height: 1.55;
}
.rueckmeldung[aria-busy="true"],
.kommentarplatz[aria-busy="true"],
.bfuss[aria-busy="true"] { opacity: .55; }

.pf-bildstand { display: block; margin-top: .45rem; }
.bildablage .dabei .vorschaubild {
  display: block; max-width: 180px; max-height: 130px;
  margin: .45rem auto .35rem; border-radius: 6px; border: 1px solid var(--linie);
}

.feldruf {
  margin: 0 0 .5rem; font-size: .92rem; line-height: 1.5; color: var(--navy);
  font-weight: 600;
}

.antwortfeld .notizfuss span { max-width: none; }

.kurskopf .kweiter {
  flex: 0 1 auto; display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: .12rem; text-align: left; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; text-decoration: none;
  padding: .55rem 1rem; border-radius: 10px;
  background: var(--akzent); color: var(--auf-akzent); font-weight: 600; font-size: .9rem;
}
.kurskopf .kweiter:hover { filter: brightness(1.08); }
.kurskopf .kweiter .z { width: 17px; height: 17px; }

.kurskopf .kweiter .kweitertitel {
  font-size: .78rem; font-weight: 400; opacity: .9; line-height: 1.35; color: inherit;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 720px) {

  .kurskopf .kweiter { flex-basis: 100%; }
}

.beschreibung .quellenhinweis {
  margin-top: 1rem; font-size: .74rem; line-height: 1.45; color: var(--leise-2);
}

.mailzeile td a.mailname { font-weight: 600; text-decoration: none; }
.mailzeile td a.mailname:hover { text-decoration: underline; }
.mailbau .platzhalter { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .8rem; }
.mailbau .platzhalter button {
  font: inherit; font-size: .82rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--linie); background: #fff; color: var(--akzent); cursor: pointer;
}
.mailbau .platzhalter button:hover { background: #F4F7FA; }
.mailbau .platzhalter .leise { font-size: .82rem; align-self: center; }
.mailvorschau {
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie); border-radius: 12px; padding: 1rem 1.2rem;
  background: #fff; margin: .6rem 0 1rem;
}
.mailvorschau .kopf { color: var(--leise); font-size: .85rem; margin-bottom: .8rem; }
.mailvorschau .kopf b { color: inherit; }
.mailvorschau .betreff { font-weight: 600; margin-bottom: .8rem; }
.mailvorschau .fuss { color: var(--leise); font-size: .85rem; margin-top: .8rem; }
.mailbau textarea.text { min-height: 16rem; width: 100%; box-sizing: border-box; }
.vpost { margin: .4rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--leise); }
.vpost li { margin: .15rem 0; }
.werkzeuge .reihe.schreiben select { flex: 1 1 12rem; }
@media (max-width: 600px) {
  .mailvorschau { padding: .8rem; }
}

body.mit-rahmen .anmeldung input[type="email"],
body.mit-rahmen .anmeldung input[type="password"],
body.mit-rahmen .anmeldung input[type="text"],
body.mit-rahmen .anmeldung input[type="number"],
body.mit-rahmen .anmeldung select {
  min-height: 2.4rem; padding: .4rem .7rem;
}
body.mit-rahmen .anmeldung button { padding: .5rem 1rem; }
body.mit-rahmen .anmeldung label { margin: .7rem 0 .25rem; }

.vtabelle th.sortiert a, .vtabelle th a { color: inherit; text-decoration: none; }
.vtabelle th a:hover { text-decoration: underline; }
.vtabelle a.vname { font-weight: 600; color: var(--akzent); text-decoration: none; }
.vtabelle a.vname:hover { text-decoration: underline; }
.vtabelle tr.vz.offen > td { background: var(--flaeche); border-bottom: none; }
.vtabelle tr.vperson > td { background: var(--flaeche); border-top: none; padding: 0 .8rem 1rem; }
.vpreiter { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--linie); margin: 0 0 .9rem; }
.vpreiter a {
  padding: .45rem .8rem; color: var(--leise); text-decoration: none; font-weight: 600; font-size: 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vpreiter a.jetzt { color: var(--navy); border-bottom-color: var(--navy); }
.vpanel { max-width: 56rem; }
.vpanel h3 { font-size: 14px; margin: 1.2rem 0 .5rem; }
.vfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem .8rem; }
.vfelder label { display: block; font-size: 12px; color: var(--leise); }
.vfelder input, .vfelder select {
  display: block; width: 100%; margin-top: .2rem; font: inherit; font-size: 14px; color: var(--text);
  padding: .4rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff;
}
.vstamm .reihe { margin-top: .6rem; }
.vtabelle.innen { margin: 0 0 .6rem; background: var(--papier); }
.vtabelle.innen td .reihe { gap: .3rem; }
.vtabelle.innen td .reihe input[type="number"] { flex: 0 1 5rem; }
.vkursliste { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .35rem; }
.vkursliste li { display: flex; align-items: center; gap: .6rem; }
.vkursliste li .ankreuz { flex: 1 1 14rem; margin: 0; }
.vkursliste li input[type="number"] {
  flex: 0 0 8rem; font: inherit; font-size: 14px; padding: .3rem .5rem;
  border: 1px solid var(--linie); border-radius: 8px;
}
.anmeldung .vfelder { margin: .6rem 0; }
.anmeldung .vkursliste li input[type="number"] { min-height: 2.2rem; }

.vpanel { max-width: none; }
.vpanel button, .vpanel .reihe button, .mailkarte .reihe button, .karte.einladen button, .reihe.zurueck button {
  font-size: 13px; padding: .35rem .8rem;
}
.vpanel .vfelder input, .vpanel .vfelder select, .vtabelle.innen td .reihe input[type="number"],
.vkursliste li input[type="number"] { font-size: 13px; padding: .3rem .5rem; }
.vtabelle a.vmail { color: var(--text); text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.vtabelle a.vmail:hover { text-decoration-color: var(--akzent); }
.vstamm .ankreuz.klein { display: block; margin: .6rem 0 .2rem; font-size: 12px; color: var(--leise); }
.karte.einladen { margin: .5rem 0 1.6rem; }
.karte.einladen h2 { margin-top: 0; }
body.mit-rahmen .karte.einladen .anmeldung { max-width: none; }
body.mit-rahmen .karte.einladen .anmeldung input[type="email"],
body.mit-rahmen .karte.einladen .anmeldung input[type="text"],
body.mit-rahmen .karte.einladen .anmeldung select { min-height: 2.1rem; padding: .3rem .6rem; font-size: 13px; }
body.mit-rahmen .karte.einladen .anmeldung #e_mail { max-width: 32rem; }
.reihe.zurueck { margin: 0 0 .8rem; }
.reihe.knoepfe { align-items: center; gap: .6rem; margin-top: .6rem; }
.reihe.knoepfe form { display: inline; }
.mailkarte .vfelder { margin: .4rem 0 .6rem; }
.mailkarte textarea.text { min-height: 5rem; }

.vtabelle.innen.kurse th:first-child, .vtabelle.innen.kurse td:first-child { width: 34%; }
.vtabelle.innen.kurse td { vertical-align: middle; }
.reihe.eng { flex-wrap: nowrap; gap: .3rem; }
.reihe.eng input[type="number"] { flex: 0 0 5.5rem; }
.vtabelle.innen.kurse tr.einschreiben td { background: var(--flaeche); }
.vtabelle.innen.kurse tr.einschreiben select {
  width: 100%; font: inherit; font-size: 13px; padding: .3rem .5rem; border: 1px solid var(--linie); border-radius: 8px; background: #fff;
}
.vtabelle.innen.kurse tr.einschreiben input[type="number"] {
  width: 100%; font: inherit; font-size: 13px; padding: .3rem .5rem; border: 1px solid var(--linie); border-radius: 8px;
}
.vkursstand details > summary { cursor: pointer; list-style: none; padding: .4rem 0; }
.vkursstand details > summary::-webkit-details-marker { display: none; }
.vkursstand .vdetails { color: var(--akzent); font-size: 12px; margin-left: .4rem; }
.vkursstand details[open] .vdetails::after { content: " ▴"; }
.vkursstand details:not([open]) .vdetails::after { content: " ▾"; }
.vstand { flex-direction: column; gap: .2rem; }
.vkursstand { min-width: 0; border-bottom: 1px solid var(--linie); }
.vkursstand:last-child { border-bottom: none; }
.karte.einladen .vfelder.drei { grid-template-columns: 9rem minmax(14rem, 1fr) 11rem; }
.karte.einladen .vkursliste li { justify-content: flex-start; }
.karte.einladen .vkursliste li .ankreuz { flex: 0 1 auto; }
.karte.einladen .vkursliste li input[type="number"] { flex: 0 0 7rem; }
.vfelder.zwei { grid-template-columns: 1fr 1fr; }
.vfelder.zwei textarea { display: block; width: 100%; margin-top: .2rem; font: inherit; font-size: 13px; padding: .4rem .6rem; border: 1px solid var(--linie); border-radius: 8px; }
form.reihe[action="/verwaltung/mails/neu"] { margin: .8rem 0 1.6rem !important; }

.vtabelle.innen.kurse button { white-space: nowrap; }
.vtabelle.innen.kurse td:first-child { width: auto; }

.reihe.knoepfe { gap: .5rem; }
.reihe.knoepfe form { display: inline-flex; margin: 0; }
.reihe.knoepfe > span.klein { flex: 1 1 100%; margin-top: .2rem; }
.reihe.knoepfe.zweiseitig > span.klein { flex: none; }
.reihe.knoepfe .rechtsbuendig { margin-left: auto; }
body.mit-rahmen .karte.einladen .anmeldung #e_name { max-width: 20rem; }

.karte.einladen .vfelder.vier { grid-template-columns: 9rem minmax(10rem, 1.2fr) minmax(14rem, 1.6fr) 10rem; margin: .4rem 0 .6rem; }
.karte.einladen .vfelder.vier input, .karte.einladen .vfelder.vier select { width: 100%; max-width: none; min-height: 2.1rem; }
@media (max-width: 760px) { .karte.einladen .vfelder.vier { grid-template-columns: 1fr 1fr; } }

body.mit-rahmen .karte.einladen .anmeldung .vfelder.vier #e_mail,
body.mit-rahmen .karte.einladen .anmeldung .vfelder.vier #e_name { max-width: none; width: 100%; }
.karte.einladen .vfelder.vier { grid-template-columns: 9rem 1fr 1.4fr 10rem; gap: .5rem .6rem; }

.vsortieren { display: none; }

@media (max-width: 640px) {

  .vtabelle { overflow-x: visible; border: 0; border-radius: 0; }
  .vtabelle table, .vtabelle tbody, .vtabelle tr, .vtabelle td { display: block; width: 100%; }
  .vtabelle thead { display: none; }

  .vtabelle tr {
    border: 1px solid var(--linie); border-radius: 12px;
    margin: 0 0 .7rem; background: var(--papier); overflow: hidden;
  }
  .vtabelle td { border: 0; border-top: 1px solid var(--linie); padding: .5rem .8rem; }
  .vtabelle tr > td:first-child { border-top: 0; }

  .vtabelle td:empty { display: none; }

  .vtabelle td[data-spalte]::before {
    content: attr(data-spalte);
    display: block; margin-bottom: .15rem;
    font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--leise-2); font-weight: 600;
  }

  .vtabelle td.vtitel { font-size: 15px; font-weight: 600; padding-top: .7rem; }

  .vtabelle .rechts { text-align: left; }

  .vtabelle tr.vz.offen { border-radius: 12px 12px 0 0; border-bottom: 0; margin-bottom: 0; }
  .vtabelle tr.vperson { border-radius: 0 0 12px 12px; border-top: 0; margin: 0 0 .7rem; }
  .vtabelle tr.vperson > td { padding: .2rem .8rem 1rem; }

  .vtabelle.innen tr { background: var(--papier); }
  .vtabelle.innen { margin-bottom: .9rem; }

  .vsortieren {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
    margin: 0 0 .7rem;
  }
  .vsortieren a {
    padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 999px;
    color: var(--leise); text-decoration: none; font-size: .82rem;
    background: var(--papier); white-space: nowrap;
  }
  .vsortieren a.jetzt { color: var(--auf-akzent); background: var(--akzent); border-color: var(--akzent); }
}

@media (max-width: 760px) {
  .karte.einladen .vfelder.vier { grid-template-columns: 1fr 1fr; }
  .karte.einladen .vfelder.vier > * { min-width: 0; }
}
@media (max-width: 480px) {
  .karte.einladen .vfelder.vier { grid-template-columns: 1fr; }
}

.webseite {
  --ws-tr:        var(--akzent);
  --ws-tr-bg:     color-mix(in srgb, var(--akzent) 11%, var(--papier));
  --ws-tn:        #8A5108;
  --ws-tn-bg:     #F5E9D8;
  --ws-signal:    #A3251C;
  --ws-signal-bg: #F6E2DE;
  --ws-mono:      ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  max-width: 78rem;
  margin: 0 auto;
  padding: .4rem 0 2rem;
  color: var(--text);
}
@media (prefers-color-scheme: dark) {
  .webseite {
    --ws-tr-bg:     color-mix(in srgb, var(--akzent) 16%, var(--papier));
    --ws-tn:        #DFA85A;
    --ws-tn-bg:     #33270F;
    --ws-signal:    #E88A7C;
    --ws-signal-bg: #3A201C;
  }
}
.webseite [hidden] { display: none !important; }
.webseite h1, .webseite h2, .webseite h3 { font-family: var(--schrift-titel); margin: 0; text-wrap: balance; }
.ws-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.ws-kopf {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem;
  align-items: flex-end; justify-content: space-between;
  border-bottom: 2px solid var(--text);
  padding-bottom: 1.1rem;
}
.ws-kopftext { flex: 1 1 32rem; min-width: 0; }
.ws-kicker {
  margin: 0 0 .45rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ws-tr);
}
.webseite .ws-kopf h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.015em;
}
.ws-lead { margin: .7rem 0 0; max-width: 60ch; color: var(--leise); font-size: 1.05rem; line-height: 1.55; }
.ws-meta {
  display: flex; flex-direction: column; gap: .3rem; margin: 0;
  font-family: var(--ws-mono); font-size: .8rem; color: var(--leise);
}
.ws-meta div { display: flex; gap: .5rem; }
.ws-meta dt { min-width: 5.8rem; white-space: nowrap; overflow-wrap: normal; }
.ws-meta dd { margin: 0; color: var(--text); font-weight: 500; max-width: 26rem; }

.ws-sprung {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0;
}
.ws-sprung a {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .32rem .75rem; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--papier); color: var(--text); text-decoration: none; font-size: .88rem;
}
.ws-sprung a:hover { border-color: var(--ws-tr); color: var(--ws-tr); }
.ws-sprung .ws-nr { font-family: var(--ws-mono); font-size: .75rem; color: var(--ws-tr); }
.ws-seite-tn .ws-sprung a:hover { border-color: var(--ws-tn); color: var(--ws-tn); }
.ws-seite-tn .ws-sprung .ws-nr { color: var(--ws-tn); }

.ws-strahl { gap: .4rem 0; }
.ws-strahl a + a::before {
  content: "→"; color: var(--leise-2); margin: 0 .55rem 0 -.2rem;
}
.ws-strahl a { border: 0; background: none; padding: .3rem .4rem; }

.ws-legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center;
  margin: 1rem 0 1.6rem; font-size: .86rem; color: var(--leise);
}
.ws-schluessel { display: inline-flex; align-items: center; gap: .45rem; }
.ws-chip {
  display: inline-flex; align-items: center; border-radius: 4px; padding: .05rem .45rem;
  font-family: var(--ws-mono); font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap; flex: none;
}
.ws-chip-jahr { background: var(--ws-signal-bg); color: var(--ws-signal); }
.ws-chip-tr   { background: var(--ws-tr-bg); color: var(--ws-tr); }
.ws-chip-tn   { background: var(--ws-tn-bg); color: var(--ws-tn); }

.ws-raster { display: grid; gap: 1rem; }

.ws-raster-tn { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
@media (min-width: 1000px) { .ws-raster-tn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1320px) { .ws-raster-tn { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ws-raster-tr { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.5rem), 1fr)); }

@media (min-width: 1320px) { .ws-raster-tr { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-kasten {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 6px;
  border-top: 3px solid var(--ws-tr); padding: 1rem 1.05rem 1.1rem;
  box-shadow: var(--schatten-s); scroll-margin-top: calc(var(--kopfhoehe) + 1rem);
}
.ws-kasten.ws-tn { border-top-color: var(--ws-tn); }
.ws-kastenkopf { display: flex; align-items: baseline; gap: .6rem; }
.ws-kastenkopf .ws-nr {
  font-family: var(--ws-mono); font-size: .8rem; font-weight: 500; color: var(--ws-tr); flex: none;
}
.ws-tn .ws-kastenkopf .ws-nr { color: var(--ws-tn); }
.webseite .ws-kasten h3 { font-size: 1.12rem; line-height: 1.25; }
.ws-recht {
  margin: .2rem 0 .8rem; padding-left: 1.85rem;
  font-family: var(--ws-mono); font-size: .75rem; color: var(--leise-2);
}
.ws-kasten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ws-kasten li { position: relative; padding-left: .95rem; font-size: .93rem; line-height: 1.42; }
.ws-kasten li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--linie);
}
.ws-kasten li.ws-j::before { background: var(--ws-signal); }
.ws-kasten li em { font-style: normal; color: var(--leise); }
.ws-kasten li strong { color: var(--ws-signal); font-weight: 600; }
.ws-kasten:target, .ws-zeile.ws-ziel { animation: ws-blitz 1.6s ease-out; }
@keyframes ws-blitz { from { box-shadow: 0 0 0 3px var(--ws-tr); } to { box-shadow: 0 0 0 3px transparent; } }

.ws-vorher {
  max-width: 52rem; margin: 1.6rem 0 0; padding: 1rem 1.25rem 1.1rem;
  background: var(--ws-tr-bg); border-radius: 6px;
}
.webseite .ws-vorher h2 { font-size: 1.2rem; margin-bottom: .55rem; color: var(--ws-tr); }
.ws-vorher ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 2.2rem; }
.ws-vorher li { margin-bottom: .3rem; break-inside: avoid; font-size: .95rem; line-height: 1.45; }
@media (max-width: 640px) { .ws-vorher ul { columns: 1; } }

.ws-ablauf { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 52rem; }
.ws-schritt {
  position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: 0 1rem; padding-bottom: 2.6rem;
}
.ws-schritt:last-child { padding-bottom: 0; }
.ws-schritt-nr {
  position: relative; z-index: 1; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ws-tr); color: var(--auf-akzent);
  font-family: var(--schrift-titel); font-size: 1.4rem; line-height: 1;
}

.ws-schritt:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.35rem - 1px); top: 2.7rem; bottom: .9rem;
  width: 2px; background: color-mix(in srgb, var(--ws-tr) 40%, transparent);
}
.ws-schritt:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.35rem - 7px); bottom: .35rem;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--ws-tr);
}
.ws-schritt-inhalt {
  min-width: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: 6px;
  padding: .85rem 1.1rem 1rem; box-shadow: var(--schatten-s);
}
.webseite .ws-schritt-inhalt h3 { font-size: 1.2rem; line-height: 1.25; margin: .15rem 0 .55rem; }
.ws-schritt-inhalt ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.ws-schritt-inhalt li { font-size: .95rem; line-height: 1.45; }
.ws-schritt-inhalt strong { color: var(--ws-signal); font-weight: 600; }
.ws-hinweis {
  margin: .75rem 0 0; padding: .55rem .85rem; font-size: .9rem; line-height: 1.45;
  border-left: 3px solid var(--ws-tr); background: var(--ws-tr-bg); border-radius: 0 4px 4px 0;
}

.ws-auto { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 52rem;
  display: flex; flex-direction: column; gap: .8rem; scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.ws-auto-zeile {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0 .9rem;
  background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--ws-tr);
  border-radius: 6px; padding: .85rem 1.1rem .95rem .9rem; box-shadow: var(--schatten-s);
}
.ws-auto-zeile.ws-auto-teil { border-left-color: var(--ws-tn); }
.ws-auto-zeile.ws-auto-hand { border-left-color: var(--leise-2); }
.ws-auto-nr {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 2px solid var(--ws-tr); color: var(--ws-tr);
  font-family: var(--schrift-titel); font-size: 1.1rem; line-height: 1;
}
.ws-auto-teil .ws-auto-nr { border-color: var(--ws-tn); color: var(--ws-tn); }
.ws-auto-hand .ws-auto-nr { border-color: var(--leise-2); color: var(--leise-2); }
.ws-auto-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: .2rem 0 .55rem; }
.webseite .ws-auto-kopf h3 { font-size: 1.15rem; line-height: 1.25; }
.ws-chip-hand { background: var(--sand); color: var(--leise); }
.ws-auto-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.4rem; }
@media (max-width: 640px) { .ws-auto-vergleich { grid-template-columns: 1fr; } }
.ws-auto-vergleich p { margin: 0; font-size: .93rem; line-height: 1.45; }
.ws-auto-vergleich p.ws-auto-wann {
  margin-bottom: .15rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--leise-2);
}
.ws-legende-auto { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: .8rem 0 0; font-size: .88rem; color: var(--leise); }
.ws-legende-auto span { display: inline-flex; align-items: center; gap: .4rem; }

.ws-jahr {
  margin: 2rem 0 0; background: var(--ws-signal-bg); border-radius: 6px; padding: 1.1rem 1.25rem;
}
.webseite .ws-jahr h2 { font-size: 1.1rem; color: var(--ws-signal); }
.ws-jahr p { margin: .35rem 0 .8rem; max-width: 70ch; font-size: .92rem; }
.ws-jahr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-jahr li {
  background: var(--papier); border-radius: 999px; padding: .2rem .7rem; font-size: .86rem;
  border: 1px solid color-mix(in srgb, var(--ws-signal) 25%, transparent);
}

.ws-kacheln {
  display: grid; gap: .8rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.ws-kachel {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 6px;
  padding: .85rem 1rem; box-shadow: var(--schatten-s);
}
.ws-zahl {
  font-family: var(--schrift-titel); font-size: 2rem; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ws-was { margin-top: .35rem; font-size: .82rem; color: var(--leise); line-height: 1.3; }
.ws-k-fehlt .ws-zahl { color: var(--ws-signal); }
.ws-k-teilweise .ws-zahl { color: var(--ws-tn); }
.ws-k-vorhanden .ws-zahl { color: var(--ws-tr); }
.ws-k-unklar .ws-zahl { color: var(--leise); }

.ws-hebel {
  background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--ws-tn);
  border-radius: 6px; padding: 1.2rem 1.35rem; margin-bottom: 2rem;
}
.webseite .ws-hebel h2 { font-size: 1.2rem; }
.ws-hebel-lead { margin: .25rem 0 1rem; color: var(--leise); font-size: .9rem; max-width: 74ch; }
.ws-hebel-raster { display: grid; gap: 1.1rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

@media (min-width: 1100px) { .ws-hebel-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.webseite .ws-hebel-eins h3 { font-size: .98rem; color: var(--ws-tn); margin-bottom: .2rem; font-family: var(--schrift); font-weight: 600; }
.ws-hebel-eins p { margin: 0; font-size: .88rem; color: var(--leise); line-height: 1.48; }
.ws-kennungen { margin-top: .4rem !important; display: flex; flex-wrap: wrap; gap: .3rem; }
.ws-kennung {
  font-family: var(--ws-mono); font-size: .74rem; text-decoration: none;
  color: var(--ws-tr); background: var(--ws-tr-bg); border-radius: 4px; padding: .05rem .4rem;
}
.ws-kennung:hover { text-decoration: underline; }

.ws-steuerung {
  position: sticky; top: var(--kopfhoehe); z-index: 5; background: var(--flaeche);
  padding: .65rem 0; border-bottom: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center;
}
.ws-gruppe { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ws-gruppe > span {
  font-size: .72rem; color: var(--leise-2); text-transform: uppercase; letter-spacing: .07em; margin-right: .15rem;
}
.ws-f {
  font: inherit; font-size: .84rem; border: 1px solid var(--linie); background: var(--papier);
  color: var(--leise); border-radius: 999px; padding: .2rem .7rem; cursor: pointer;
}
.ws-f:hover { border-color: var(--leise-2); }
.ws-f[aria-pressed="true"] { background: var(--text); color: var(--papier); border-color: var(--text); }
.ws-f:focus-visible, #ws-suche:focus-visible { outline: 2px solid var(--ws-tr); outline-offset: 1px; }
#ws-suche {
  font: inherit; font-size: .9rem; padding: .3rem .7rem; border: 1px solid var(--linie);
  border-radius: 999px; background: var(--papier); color: var(--text); flex: 1 1 11rem; max-width: 19rem;
}
.ws-treffer { font-family: var(--ws-mono); font-size: .8rem; color: var(--leise); margin-left: auto; }

.ws-bereich {
  margin-top: 1.4rem; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 6px; box-shadow: var(--schatten-s); padding: 1rem 1.2rem .3rem;
}
.ws-bereich .ws-zeile:last-child { border-bottom: 0; }
.webseite .ws-bereich h2 {
  font-size: 1.12rem; color: var(--ws-tr); display: flex; align-items: baseline; gap: .6rem;
  margin-bottom: .45rem;
}
.ws-anzahl { font-family: var(--ws-mono); font-size: .76rem; color: var(--leise-2); font-weight: 400; }
.ws-zeile {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1.15fr) minmax(0, 1fr) 6rem 6.8rem;
  gap: 1rem; padding: .7rem .3rem; border-bottom: 1px solid var(--linie); align-items: start;
  scroll-margin-top: calc(var(--kopfhoehe) + 4.5rem); border-radius: 4px;
}
.ws-zeilenkopf {
  padding-top: .45rem; padding-bottom: .45rem;
  font-size: .72rem; color: var(--leise-2); text-transform: uppercase; letter-spacing: .06em;
}
.ws-id { font-family: var(--ws-mono); font-size: .78rem; color: var(--leise-2); padding-top: .15rem; }
.ws-anf { font-size: .95rem; font-weight: 500; line-height: 1.38; }
.ws-warum { font-size: .88rem; color: var(--leise); line-height: 1.42; }
.ws-quelle { display: block; margin-top: .25rem; font-family: var(--ws-mono); font-size: .74rem; color: var(--leise-2); }
.ws-tag {
  display: inline-block; border-radius: 4px; padding: .1rem .5rem; white-space: nowrap;
  font-family: var(--ws-mono); font-size: .76rem; font-weight: 500;
}
.ws-p-muss, .ws-s-fehlt       { background: var(--ws-signal-bg); color: var(--ws-signal); }
.ws-p-soll, .ws-s-teilweise   { background: var(--ws-tn-bg); color: var(--ws-tn); }
.ws-p-kann, .ws-s-unklar      { background: var(--sand); color: var(--leise); }
.ws-s-vorhanden               { background: var(--ws-tr-bg); color: var(--ws-tr); }
.ws-leer { margin: 2rem 0; color: var(--leise); }

.ws-methode {
  margin: 2.2rem 0 0; border-top: 1px solid var(--linie); padding-top: 1rem;
  font-size: .86rem; color: var(--leise); line-height: 1.55; max-width: 84ch;
}
.ws-methode strong { color: var(--text); }

.ws-siehe { margin-top: 2.6rem; }
.webseite .ws-siehe h2 { font-size: 1rem; color: var(--leise); font-family: var(--schrift); font-weight: 600; margin-bottom: .6rem; }
.ws-siehe-raster { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ws-siehe-karte {
  display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.05rem;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 6px;
  color: var(--text); text-decoration: none; box-shadow: var(--schatten-s);
}
.ws-siehe-karte strong { color: var(--ws-tr); }
.ws-siehe-karte strong::after { content: " →"; }
.ws-siehe-karte span { font-size: .86rem; color: var(--leise); }
.ws-siehe-karte:hover { border-color: var(--ws-tr); }

.ws-dokgruppe { margin-top: 2rem; scroll-margin-top: calc(var(--kopfhoehe) + 1rem); }
.webseite .ws-dokgruppe h2 { font-size: 1.25rem; }
.ws-dokgruppe-lead { margin: .2rem 0 .9rem; color: var(--leise); font-size: .92rem; }
.ws-dokraster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.ws-dok {
  display: flex; flex-direction: column; background: var(--papier);
  border: 1px solid var(--linie); border-top: 3px solid var(--ws-tr); border-radius: 6px;
  padding: 1rem 1.05rem; box-shadow: var(--schatten-s);
}
.ws-dok-ueber { margin: 0 0 .35rem; font-family: var(--ws-mono); font-size: .74rem; color: var(--leise-2); }
.webseite .ws-dok h3 { font-size: 1.1rem; line-height: 1.25; }
.ws-dok-text { margin: .45rem 0 1rem; font-size: .9rem; color: var(--leise); line-height: 1.48; flex: 1; }
.ws-dok-fuss { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.ws-dok-knopf {
  display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .9rem;
  border-radius: 999px; background: var(--akzent); color: var(--auf-akzent);
  font-weight: 600; font-size: .88rem; text-decoration: none;
}
.ws-dok-knopf:hover { filter: brightness(1.08); }
.ws-dok-knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ws-dok-adresse { font-family: var(--ws-mono); font-size: .74rem; color: var(--leise-2); }
.ws-seite-dok .ws-sprung .ws-nr { color: var(--ws-tr); }

.gl-steuerung {
  position: sticky; top: var(--kopfhoehe); z-index: 5; background: var(--flaeche);
  padding: .9rem 0 .7rem; margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem;
}
.gl-suchzeile { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.gl-suchzeile input {
  flex: 1 1 14rem; max-width: 26rem; font: inherit; font-size: 1rem; padding: .6rem 1rem;
  border-radius: 999px; border: 1px solid var(--linie); background: var(--papier); color: var(--text);
}
.gl-suchzeile input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.gl-zahl { font-size: .82rem; color: var(--leise); }
.gl-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.gl-chips button {
  font: inherit; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie); background: var(--papier); color: var(--leise);
}
.gl-chips button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.gl-abc { display: flex; gap: .25rem; flex-wrap: wrap; }
.gl-abc a {
  min-width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: .88rem; font-weight: 700; text-decoration: none;
  background: var(--papier); border: 1px solid var(--linie); color: var(--akzent);
}
.gl-abc a:hover { border-color: var(--akzent); }
.gl-abc a.gl-aus { background: none; border-color: transparent; color: var(--linie); pointer-events: none; }
.webseite .gl-buchst {
  font-size: 1.7rem; color: var(--akzent); margin: 1.6rem 0 .7rem; padding-bottom: .35rem;
  border-bottom: 2px solid var(--linie); scroll-margin-top: calc(var(--kopfhoehe) + 9.5rem);
}
.gl-raster { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.gl-kachel {
  display: flex; flex-direction: column; gap: .35rem; min-height: 9rem; padding: 1rem 1rem .9rem;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 12px;
  color: var(--text); text-decoration: none; box-shadow: var(--schatten-s);
  transition: transform .12s, border-color .12s;
}
.gl-kachel:hover { transform: translateY(-2px); border-color: var(--akzent); }
.gl-kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.gl-kachel .gl-st, .gl-karte .gl-st, .gl-dialog .gl-st { font-size: .7rem; color: var(--leise-2); text-transform: uppercase; letter-spacing: .06em; }
.gl-kachel strong { font-size: 1.1rem; line-height: 1.22; hyphens: auto; overflow-wrap: anywhere; }
.gl-kurz {
  font-size: .86rem; color: var(--leise); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gl-leer { color: var(--leise); padding: 2rem 0; }
.gl-karten { margin-top: 2.5rem; }
.gl-karte { padding: 1rem 0; border-top: 1px solid var(--linie); }
.webseite .gl-karte h3, .gl-dialog h3 { font-size: 1.6rem; line-height: 1.15; margin: .3rem 0 .7rem; hyphens: auto; overflow-wrap: anywhere; }
.gl-karte p, .gl-dialog p { margin: 0; font-size: 1rem; line-height: 1.6; }
.gl-teil { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.gl-teil h4 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise-2); }
.gl-modul {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .55rem .85rem; margin-bottom: .35rem; border: 1px solid var(--linie); border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: .92rem;
}
a.gl-modul:hover { border-color: var(--akzent); color: var(--akzent); }
.gl-modul span { color: var(--akzent); white-space: nowrap; font-size: .85rem; }
.gl-verw { display: flex; gap: .35rem; flex-wrap: wrap; }
.gl-verw a {
  font-size: .86rem; padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
  background: color-mix(in srgb, var(--akzent) 11%, var(--papier)); color: var(--akzent);
}
.gl-dialog {
  border: 0; border-radius: 16px; padding: 0; width: min(40rem, calc(100vw - 2rem));
  max-height: 88vh; background: var(--papier); color: var(--text); box-shadow: var(--schatten-s);
}
.gl-dialog::backdrop { background: rgb(0 0 0 / .45); }
.gl-dialog [data-gl-inhalt] { padding: 1.5rem 1.6rem 1.6rem; overflow: auto; max-height: 88vh; }
.gl-zu {
  position: sticky; float: right; top: .6rem; margin: .6rem .6rem 0 0; font: inherit; font-size: 1.5rem;
  line-height: 1; border: 0; background: none; color: var(--leise); cursor: pointer;
}
.gl-quellen {
  margin: 2.5rem 0 0; border-top: 1px solid var(--linie); padding-top: 1rem;
  font-size: .86rem; color: var(--leise); line-height: 1.55; max-width: 84ch;
}
.gl-quellen summary { cursor: pointer; color: var(--text); font-weight: 600; }
.gl-quellen ul { padding-left: 1.1rem; margin: .5rem 0 0; }
@media (max-width: 760px) {
  .gl-steuerung { position: static; }
  .gl-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .gl-chips button { flex: none; }
  .webseite .gl-buchst { scroll-margin-top: calc(var(--kopfhoehe) + .8rem); }
  .gl-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .6rem; }
  .gl-kachel { min-height: 7.5rem; padding: .8rem; }
  .gl-kachel strong { font-size: 1rem; }
  .gl-kurz { -webkit-line-clamp: 2; }
}

@media (max-width: 760px) {
  .ws-meta dt { min-width: 5.8rem; }
  .ws-zeilenkopf { display: none; }

  .ws-zeile {
    grid-template-columns: 2.6rem auto minmax(0, 1fr); gap: .25rem .5rem;
    grid-template-areas: "id anf anf" ". warum warum" ". prio pilot";
  }
  .ws-id { grid-area: id; } .ws-anf { grid-area: anf; } .ws-warum { grid-area: warum; }
  .ws-prio { grid-area: prio; margin-top: .3rem; }
  .ws-pilot { grid-area: pilot; margin-top: .3rem; justify-self: start; }
  .ws-pilot .ws-vh { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .ws-steuerung { position: static; }
  .ws-bereich { padding: .85rem .8rem .2rem; }
  .ws-treffer { margin-left: 0; }
  .ws-strahl a + a::before { margin-right: .35rem; }
}

@media print {
  .ws-steuerung, .ws-siehe, .ws-sprung { display: none !important; }
  .ws-kasten, .ws-zeile { break-inside: avoid; box-shadow: none; }
}

.beschreibung.einstieg {
  background: color-mix(in srgb, var(--akzent) 7%, var(--papier));
  border: 1px solid color-mix(in srgb, var(--akzent) 22%, var(--linie));
  border-left: 4px solid var(--akzent);
  padding: 1.15rem 1.4rem 1.2rem;
}
.beschreibung.einstieg > p { font-size: 1.06rem; line-height: 1.6; }
.beschreibung.einstieg > p.einstiegszeile {
  margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--akzent);
}
.beschreibung.einstieg > p.einstiegszeile + p { font-weight: 600; }
.beschreibung.einstieg > p.quellenhinweis { font-size: .74rem; font-weight: 400; }

.baustein > .feldruf {
  margin: .2rem 0 1rem; padding: .85rem 1.05rem;
  font-size: 1.2rem; line-height: 1.45; font-style: italic; font-weight: 600;
  color: var(--navy); background: var(--papier);
  border: 2px solid var(--akzent); border-radius: var(--rundung);
}

.quellenzeichen { color: var(--karmesin); font-weight: 700; font-size: .72em; margin-left: .05em; }
.rumpf .quellen {
  margin-top: .9rem; padding-top: .55rem; border-top: 1px solid var(--linie);
  font-size: .76rem; line-height: 1.45; color: var(--leise);
}
.rumpf .quellen p { margin: .15rem 0; }
.rumpf .quellen sup { color: var(--karmesin); font-weight: 700; margin-right: .15rem; }

.zurueckzeile { margin: 0 0 .9rem; }
.quizknopf.zurueck { display: inline-flex; gap: .45rem; align-items: center; }

.hinausseite { max-width: 92rem; }
.hbuehne { display: grid; gap: 1.4rem 2.6rem; margin-bottom: 2.2rem; }
.hbuehne .hbild { margin-bottom: 0; border-radius: 16px; }
.hbuehne .hbild img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.hseite { align-self: center; }
.hseite .hkopf h1 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; }
.hseite .hkopf .lead { font-size: 1.08rem; }
.hseite .hraus { margin-bottom: 0; }
@media (min-width: 1100px) {
  .hbuehne.mitbild { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.hpunktetitel { font-size: 1.3rem; margin: 0 0 .9rem; }
.hinausseite .hpunkte {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.1rem; margin-bottom: 1.8rem;
}
.hinausseite .hpunkt {
  border: 1px solid var(--linie); border-top: 4px solid var(--akzent);
  border-radius: 14px; padding: 1.15rem 1.2rem 1.3rem; box-shadow: var(--schatten-s);
}
.hinausseite .hpunkt:nth-child(4n+2) { border-top-color: var(--karmesin); }
.hinausseite .hpunkt:nth-child(4n+3) { border-top-color: var(--gruen); }
.hinausseite .hpunkt:nth-child(4n+4) { border-top-color: var(--navy-tief); }
.hinausseite .hpunkt .hober {
  display: inline-block; padding: .18rem .6rem; border-radius: 99px;
  background: color-mix(in srgb, var(--akzent) 10%, var(--papier)); color: var(--akzent);
  margin-bottom: .55rem;
}
.hinausseite .hpunkt b { font-size: 1.1rem; margin-bottom: .45rem; }
.hinausleise { font-size: .84rem; line-height: 1.55; color: var(--leise); max-width: 60rem; }
.hinausleise b { color: var(--text); }

.nachweisblatt {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr);
  padding: 0; overflow: hidden; background: var(--papier);
  border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten-s);
}
.nwband {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .8rem; padding: 1.6rem 1rem; background: var(--navy-tief); color: #FFFFFF;
}
.nwband img { width: min(9.5rem, 100%); height: auto; }
.nwhaken {
  display: flex; align-items: center; justify-content: center;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--gruen); color: #FFFFFF; font-size: 2rem; font-weight: 700;
}
.nwwort { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.nwtext { padding: 1.5rem 1.8rem 1.6rem; }
.nwtext h2 { margin-top: 0; }
.nachweisblatt .lead { color: var(--gruen); }
.nwueber { margin: .6rem 0 .2rem; font-weight: 600; }
.nwinhalt { margin: 0 0 .9rem; padding-left: 1.15rem; }
.nwinhalt li { margin: .15rem 0; }
@media (max-width: 640px) {
  .nachweisblatt { grid-template-columns: 1fr; }
  .nwband { flex-direction: row; padding: 1rem 1.2rem; justify-content: flex-start; }
  .nwband img { width: min(8rem, 45%); }
  .nwhaken { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; margin-left: auto; }
  .nwwort { display: none; }
  .nwtext { padding: 1.2rem 1.1rem 1.3rem; }
}

.auftraege {
  background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: var(--schatten-s); padding: 1.2rem 1.4rem 1.1rem; margin: 0 0 1.6rem;
}
.auftraege h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.auftraege h3 { margin: 1rem 0 .2rem; font-size: .95rem; }
.auftraege h3 .leise, .beantwortetliste summary .leise { font-weight: 400; margin-left: .3rem; }
.auftragsliste { list-style: none; margin: 0; padding: 0; }
.auftragzeile {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem;
  padding: .75rem 0; border-top: 1px solid var(--linie);
}
.apunkt {
  width: 1.35rem; height: 1.35rem; margin-top: .1rem; border-radius: 50%;
  border: 2px solid var(--karmesin);
  display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
}
.auftragzeile.beantwortet .apunkt { background: var(--gruen); border-color: var(--gruen); color: #FFFFFF; }
.atext { display: flex; flex-direction: column; gap: .1rem; }
.atitel { font-weight: 600; text-decoration: none; }
.atitel:hover { text-decoration: underline; }
.aantwort {
  margin: .4rem 0 0; padding: .45rem .7rem; border-radius: 8px;
  background: var(--flaeche); font-style: italic; font-size: .92rem;
}
.beantwortetliste { margin-top: 1rem; }
.beantwortetliste summary { cursor: pointer; font-weight: 600; font-size: .95rem; }

.wunschgebaut { margin: 2.2rem 0 .3rem; font-size: 1.2rem; }

@media (prefers-color-scheme: dark) {
  .nwhaken, .auftragzeile.beantwortet .apunkt { color: #10161C; }

  .prozent.fertig { color: var(--gruen); }
}

.reg-fehler {
  margin: .3rem 0 .2rem; font-size: .88rem; font-weight: 600; color: var(--karmesin);
}
.anmeldung input[aria-invalid="true"] { border-color: var(--karmesin); }
.reg-einwilligung {
  align-items: flex-start; margin-top: 1.1rem; font-size: .9rem; line-height: 1.45;
  font-weight: 400;
}
.reg-einwilligung input { flex: none; margin-top: .2rem; }

.reg-zusatz { margin-top: .7rem; }
.reg-zusatz .freiwillig { font-style: normal; color: var(--leise); }
.reg-hinweis a { font-weight: 600; }
.pf-konto { border-color: var(--karmesin); }
.pf-konto .reihe { margin-top: .8rem; }
.vregistrierung {
  margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid var(--linie);
  border-radius: 12px; background: var(--flaeche);
}
.vregistrierung h3 { margin: 0 0 .5rem; font-size: 1rem; }
.vregistrierung dl {
  display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: .3rem 1rem; margin: 0 0 .6rem;
}
.vregistrierung dt { color: var(--leise); font-size: .9rem; }
.vregistrierung dd { margin: 0; overflow-wrap: anywhere; }
.vregistrierung summary { cursor: pointer; font-size: .9rem; color: var(--leise); }

.kommentar.experte { border-left-color: var(--akzent); }
.kommentar.entwurf { border-left: 2px dashed var(--karmesin); padding-bottom: .4rem; }
.kommentar.entwurf textarea { width: 100%; }
.ohnename { display: flex; align-items: flex-start; gap: .4rem; margin: .4rem 0; font-size: .85rem; color: var(--leise); font-weight: 400; }
.ohnename input { width: auto; margin: .2rem 0 0; flex: 0 0 auto; }
.antwortform { flex-wrap: wrap; }
.antwortform .ohnename { flex: 1 1 100%; margin: 0; }
.zurfrage a { font-weight: 600; }

.assistentverlauf { margin-bottom: 1.25rem; }
.kommentar.assistentfrage { border-left-color: var(--leise); }
.kommentar.assistentantwort { border-left-color: var(--akzent); }
.kommentar.assistentantwort .was p,
.kommentar.assistentantwort .was ul { margin: 0 0 .7rem; }
.kommentar.assistentantwort .was ul { padding-left: 1.2rem; }
.kommentar.assistentantwort .was a { overflow-wrap: anywhere; }
.assistentform textarea { width: 100%; }
.assistentform button[disabled] { opacity: .6; }
.assistentkarte { display: block; text-decoration: none; }
.assistenthinweis { margin-top: 2rem; }