/* Taktfink Care: gemeinsame Oberfläche des Betriebsportals (Kopfzeile, Reiter, Karten) */

.portal-seite {
  background-color: var(--hintergrund, #fbf8f4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%234f8f5a' fill-opacity='0.30'%3E%3Cpath d='M30 40 q18-26 46-10 q-8 30-46 10z'/%3E%3Cpath d='M160 120 q20-24 48-8 q-10 30-48 8z'/%3E%3Cpath d='M70 190 q16-22 40-8 q-8 26-40 8z'/%3E%3Cpath d='M190 30 q12-18 34-6 q-6 22-34 6z'/%3E%3C/g%3E%3Cg fill='none' stroke='%234f8f5a' stroke-opacity='0.32' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M200 250 q6-36-10-62'/%3E%3Cpath d='M212 250 q-2-30 12-56'/%3E%3Cpath d='M12 110 q4-28-8-46'/%3E%3Cpath d='M120 255 q-4-26 6-44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 340px 340px;
  font-family: var(--schrift, var(--font-body)); font-family: var(--schrift, var(--font-body)); zoom: var(--zoom, 1); }

.portal-kopf-leiste {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--marke, #147f94); color: #fff;
}
.portal-marke { display: flex; align-items: center; gap: 10px; font: 600 16px var(--font-body); }
.portal-logo { height: 96px; width: auto; max-width: 280px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px 14px; }
.portal-reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-reiter a {
  color: #fff; font: 600 14px var(--font-body); padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
.portal-reiter a.aktiv { background: #fff; color: var(--marke, #147f94); }
.portal-reiter a.abmelden { background: transparent; text-decoration: underline; }

.konto h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 20px 0 14px; }
.karte { background: #fff; border: 2px solid var(--marke, #147f94); border-radius: 18px; padding: 18px; margin-bottom: 16px; }
.karte h2 { font: 600 18px var(--font-body); margin-bottom: 12px; }
.feld { display: grid; gap: 6px; margin-bottom: 16px; }
.feld label { font-weight: 600; font-size: 14px; }
.feld input[type="color"] { width: 64px; height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.logo-vorschau { width: 100%; max-width: 360px; height: auto; max-height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: #fff; }
a.chip { text-decoration: none; display: inline-block; }
.chip.haupt-chip { background: #fff; color: var(--marke, #147f94); box-shadow: inset 0 0 0 2px var(--marke, #147f94); }
.chip.haupt-chip[aria-current="page"] { background: var(--marke, #147f94); color: #fff; box-shadow: none; }
.bereiche-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bereich-karte { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 12px; font: 600 15px var(--font-body); }
@media (min-width: 720px) { .bereiche-liste { grid-template-columns: repeat(3, 1fr); } }
.aufklappen summary { list-style: none; cursor: pointer; font: 600 18px var(--font-body); display: flex; justify-content: space-between; align-items: center; }
.aufklappen summary::-webkit-details-marker { display: none; }
.aufklappen summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--marke, #147f94); }
.aufklappen[open] summary::after { content: "–"; }
.aufklappen[open] summary { margin-bottom: 14px; }
.hinweis { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }
.hinweis.gut { background: #e3f4ea; }
.hinweis.schlecht { background: #fbe9e6; }
.portal .btn-primary { background: var(--marke, #147f94); }

/* Knopfreihe der Küche und der Ansichten: gleiche Stelle auf jeder Seite */
.menue-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; min-height: 44px; align-items: center; }
.menue-nav a { font: 600 14px var(--font-body); padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--marke, #147f94); box-shadow: inset 0 0 0 2px var(--marke, #147f94); text-decoration: none; }
.menue-nav a.aktiv { background: var(--marke, #147f94); color: #fff; }
/* Rubriken-Chips: eigene Farbe und Symbol */
.chip.kat { background: var(--bg); color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); display: inline-flex; align-items: center; gap: 6px; }
.chip.kat[aria-pressed="true"] { background: var(--c); color: #fff; box-shadow: none; }
.chip-icon { display: inline-flex; width: 18px; height: 18px; }
.chip-icon svg { width: 18px; height: 18px; }
.rubrik-band { display: inline-block; color: #fff; font: 600 15px var(--font-body); padding: 6px 16px; border-radius: 999px; margin: 0 0 14px; }
.rubrik-band[hidden] { display: none; }
.kopf-rubrik { display: inline-flex; margin-left: 6px; color: #fff; opacity: .95; }
.kopf-rubrik svg { width: 22px; height: 22px; }
.passwort-feld { position: relative; }
.passwort-feld input { padding-right: 52px; }
.auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted-fg, #6b6460); cursor: pointer; }
.auge:hover, .auge[aria-pressed="true"] { color: var(--marke, #147f94); }
.auge svg { width: 22px; height: 22px; }
.zurueck { color: #fff; font: 600 14px var(--font-body); padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.zurueck:hover { background: rgba(255, 255, 255, .28); }
.portal-marke-gruppe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zurueck-leiste { margin: 0 0 12px; }
.zurueck-leiste .zurueck { color: var(--marke, #147f94); background: #fff; box-shadow: inset 0 0 0 1px var(--border); }


.meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--fg, #2a2320); color: #fff; padding: 12px 18px; border-radius: 12px;
  font: 500 15px var(--font-body); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100% - 32px); text-align: center; z-index: 50;
}
.meldung.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 520px) {
  .portal-kopf-leiste { padding: 10px 12px; }
  .portal-reiter a { padding: 7px 10px; font-size: 13px; }
}

/* Handy (bis 520 Pixel): alles etwas kleiner, damit die Übersicht auf einen Blick passt.
   Mit body.portal-seite davor, damit diese Regeln die Stile der einzelnen Seiten übersteuern. */
@media (max-width: 520px) {
  .portal-kopf-leiste { position: static; gap: 8px; padding: 8px 12px; }
  .portal-logo { height: 52px; max-width: 150px; padding: 4px 8px; border-radius: 10px; }
  .portal-marke { font-size: 14px; }
  .portal-reiter a { padding: 6px 9px; font-size: 12px; }
  body.portal-seite .portal { padding: 12px 12px 72px; }
  body.portal-seite .portal h1 { font-size: 22px; margin: 4px 0 10px; }
  body.portal-seite .spruch { margin: 8px 0 14px; padding-top: 14px; }
  body.portal-seite .spruch p { font-size: 22px; }
  body.portal-seite .spruch-linie { width: min(200px, 60%); height: 16px; }
  body.portal-seite .info-reihe { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  body.portal-seite .info-karte { padding: 10px 12px; font-size: 13px; }
  body.portal-seite .info-karte strong { font-size: 13px; }
  body.portal-seite .info-karte .wert { font-size: 18px; }
  body.portal-seite .home-kacheln { gap: 10px; }
  body.portal-seite .home-reihe { gap: 10px; }
  body.portal-seite .home-reihe .versetzt { margin-left: 0; }
  body.portal-seite .home-feld { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 18px; }
  body.portal-seite .home-feld .feld-titel { font-size: 12px; }
  body.portal-seite .kachel { aspect-ratio: auto; min-height: 0; padding: 10px 6px; gap: 6px; font-size: 13px; line-height: 1.2; border-radius: 14px; }
  body.portal-seite .home-reihe .kachel, body.portal-seite .home-feld.pflege .kachel { min-height: 0; padding: 12px 8px; gap: 6px; font-size: 14px; }
  body.portal-seite .kachel svg, body.portal-seite .home-reihe .kachel svg, body.portal-seite .home-feld.pflege .kachel svg { width: 22px; height: 22px; }
  body.portal-seite .heute-karte { grid-template-columns: 1fr; padding: 12px; font-size: 14px; gap: 10px; }
  body.portal-seite .heute-karte strong { font-size: 14px; }
  body.portal-seite .gruppe-kopf { padding: 8px 12px; font-size: 14px; }
  body.portal-seite .bereiche { padding: 8px; gap: 5px; }
  body.portal-seite .bereich { min-height: 32px; padding: 4px 10px 4px 8px; font-size: 13px; }
  body.portal-seite .ordner summary { min-height: 40px; padding: 6px 10px 6px 12px; font-size: 13px; }
  body.portal-seite .ordner a { margin: 0 8px 6px; padding: 6px 10px; font-size: 13px; }
  body.portal-seite .karte { padding: 12px; margin-bottom: 12px; }
  body.portal-seite .karte h2 { font-size: 16px; }
  body.portal-seite .feld { gap: 3px; margin-bottom: 10px; }
  body.portal-seite .feld label { font-size: 13px; }
  body.portal-seite .feld input, body.portal-seite .feld select, body.portal-seite .feld textarea { min-height: 0; padding: 6px 8px; font-size: 14px; }
  body.portal-seite .knopf { padding: 8px 14px; font-size: 14px; }
  body.portal-seite .menue-nav a { padding: 6px 11px; font-size: 13px; }
  body.portal-seite .zurueck-home, body.portal-seite .zurueck-knopf { padding: 7px 12px; font-size: 13px; }
  body.portal-seite .aufklappen summary { font-size: 16px; }
  body.portal-seite .bereich-karte { padding: 10px; font-size: 14px; }
  body.portal-seite .wochenmenue { padding: 12px; }
  body.portal-seite .wochenmenue summary { font-size: 18px; }
  body.portal-seite .wm-tabelle td, body.portal-seite .wm-tabelle th { padding: 5px; font-size: 13px; }
  body.portal-seite .kal th { font-size: 11px; padding: 4px 2px; }
  body.portal-seite .kal td { height: auto; min-height: 56px; padding: 3px; }
  body.portal-seite .kal-eintrag { font-size: 11px; padding: 1px 4px; }
}