/* Nur für die Übersichtsseite. */
body.portal { min-height: 100%; display: flex; flex-direction: column; }

.portal-inhalt {
  flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 22px 16px 40px;
}
.portal-einleitung {
  font-size: 15px; line-height: 1.6; color: var(--grau);
  max-width: 70ch; margin: 0 0 22px;
}
.portal-einleitung b { color: var(--tinte); }

.werkzeug-raster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.werkzeug-karte {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
  padding: 14px 16px 16px; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.werkzeug-karte:hover {
  border-color: var(--akzent); box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.werkzeug-kopf { display: flex; align-items: center; gap: 10px; }
.werkzeug-symbol { font-size: 26px; line-height: 1; }
.werkzeug-karte h2 { margin: 0; font-size: 16px; letter-spacing: .3px; }
.werkzeug-marke {
  margin-left: auto; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--grau); border: 1px solid var(--rand); border-radius: 999px; padding: 2px 8px;
}
.werkzeug-marke.arbeit { color: var(--akzent); border-color: var(--akzent-hell); }
.werkzeug-karte p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grau); }
.werkzeug-karte ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--grau); }
.werkzeug-oeffnen { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--akzent); }

.portal-abschnitt { margin-top: 30px; }
.portal-abschnitt h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--grau); margin: 0 0 10px;
}
.portal-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-fuss {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--rand);
  font-size: 12.5px; line-height: 1.6; color: var(--grau);
}
.portal-fuss code {
  background: #ece5d9; border-radius: 3px; padding: 1px 5px; font-size: 12px;
}

/* --- Rahmenseite: Werkzeug im Portal --- */
body.rahmen { height: 100vh; display: flex; flex-direction: column; margin: 0; }
body.rahmen .kopf { flex: none; }
body.rahmen .kopf-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.werkzeug-rahmen { flex: 1; width: 100%; border: 0; display: block; background: var(--papier); }
.portal-leer {
  font-size: 14px; line-height: 1.6; color: var(--grau);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 6px;
  padding: 16px 18px;
}
.portal-leer code { background: #ece5d9; border-radius: 3px; padding: 1px 5px; }

/* --- Selbstprüfung --- */
.pruefliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pruefliste li {
  background: var(--flaeche); border: 1px solid var(--rand); border-left-width: 4px;
  border-radius: 5px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--grau);
}
.pruefliste li b { color: var(--tinte); }
.pruefliste li.gut { border-left-color: #4a7a41; }
.pruefliste li.schlecht { border-left-color: var(--akzent); }