/* Der Portalkopf (vorlagen/portal_kopf.html) — steht auch über den Seiten der Agentur.
   Deshalb nur eigene Klassen (pk-…), feste Werte statt Variablen und keine Regeln für fremde
   Elemente: er darf den Stil der Seite darunter nicht ändern und nicht von ihm abhängen. */
.portal-kopf { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: 0; padding: 12px 20px; background: #178F26; color: #FFFFFF;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.3; }
.portal-kopf * { box-sizing: border-box; }
.portal-kopf a { color: #FFFFFF; text-decoration: none; }
.portal-kopf .pk-marke { font-weight: 800; letter-spacing: 0.12em; font-size: 14px; }
.portal-kopf .pk-menue { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 500; }
.portal-kopf .pk-menue a, .portal-kopf .pk-konto a { opacity: 0.88; padding: 4px 0;
  border-bottom: 2px solid transparent; }
.portal-kopf a:hover { opacity: 1; }
.portal-kopf a[aria-current="page"] { opacity: 1; border-bottom-color: #FFF34F; }
.portal-kopf .pk-konto { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.portal-kopf .pk-konto form { margin: 0; }
.portal-kopf .pk-konto button { background: none; border: 1px solid #FFFFFF; color: #FFFFFF; font: inherit;
  font-size: 14px; padding: 5px 12px; border-radius: 3px; cursor: pointer; }
.portal-kopf .pk-konto button:hover { background: #FFFFFF; color: #178F26; }
.portal-kopf a:focus-visible, .portal-kopf button:focus-visible { outline: 3px solid #FFF34F; outline-offset: 2px; }
@media (max-width: 560px) {
  .portal-kopf { padding: 10px 14px; gap: 6px 14px; font-size: 14px; }
  .portal-kopf .pk-konto { margin-left: 0; width: 100%; justify-content: space-between; }
}