/* Additions to konto.css (copy of werkstatt-konto/public/konto.css) for the customer gateway pages.
   Same tokens: bg #F7F6F3, ink #101012, muted #6E6C66, line #E6E3DC, green #16874E, green-soft #E9F2EB. */
button.btn, button.btn-primary { cursor: pointer; font-family: inherit; }
button.btn-primary { border: 0; }
.btn-gruen { background: #16874e; border-color: #16874e; color: #fff; }
.btn-gruen:hover { border-color: #16874e; filter: brightness(1.08); }
.knoepfe { margin-top: 0; }
.rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.personzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.person { display: flex; flex-direction: column; gap: 2px; }
.person .adresse { color: #6e6c66; font-size: 14px; line-height: 20px; }
.aktionen { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.aktionen form { display: inline-flex; flex-direction: row; }
.linkbtn { padding: 0; border: 0; background: none; color: #16874e; font: 600 14px/20px Inter, system-ui, sans-serif; cursor: pointer; }
.punkt { color: #6e6c66; }
.linkbox { margin: 0; padding: 10px 12px; border: 1px solid #e6e3dc; border-radius: 10px; background: #fff; font: 13px/18px "JetBrains Mono", monospace; word-break: break-all; }
.hinweis.fehler { background: #fbe9e7; }
.kleiner { font-size: 14px; line-height: 20px; }
.fehlerseite .kopf { max-width: 640px; }
.fehlerseite .absatz { font-size: 18px; line-height: 27px; }
.landing .formular { max-width: 420px; }

/* Buttons are 44px high everywhere (Mark, 19.10.2026). */
.btn, .btn-primary, .btn-nav { height: 44px; padding-top: 0; padding-bottom: 0; }
/* Team page: one column; invitations below the people list, laid out like the onboarding step. */
.einspaltig { max-width: 1000px; }
.einladen { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid #e6e3dc; }
.einladen .adressen { display: flex; flex-direction: column; gap: 8px; }
.einladen details.mehr { display: flex; flex-direction: column; gap: 8px; }
.einladen details.mehr summary { display: flex; align-items: center; min-height: 44px; color: #16874e; font-weight: 600; cursor: pointer; }
.einladen details.mehr[open] summary { display: none; }
.einladen .btn-primary { width: auto; align-self: flex-start; min-width: 220px; height: 44px; padding: 0 24px; }
/* Team page, condensed: one line per person, tighter spacing, compact fields. */
.einspaltig { gap: 10px; padding: 12px 0; }
.einspaltig h2 { font-size: 22px; line-height: 28px; }
.einspaltig .absatz { font-size: 15px; line-height: 22px; }
.einspaltig .divider { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 10px 0; }
.einspaltig .personzeile { flex: 1 1 320px; align-items: baseline; justify-content: flex-start; gap: 16px; }
.einspaltig .person { flex-direction: row; align-items: baseline; gap: 10px; }
.einspaltig .personzeile > .absatz { margin-left: auto; font-size: 14px; white-space: nowrap; }
.einspaltig .aktionen { gap: 6px; }
.einladen { gap: 10px; padding-top: 16px; }
.einladen h2 { font-size: 20px; line-height: 26px; }
.einladen .absatz { font-size: 14px; line-height: 20px; }
.einladen .adressen { gap: 6px; }
.einladen details.mehr { gap: 6px; }
.einladen details.mehr summary { min-height: 36px; font-size: 14px; }
.einladen .btn-primary { min-width: 200px; font-size: 15px; }
@media (max-width: 650px) { .einspaltig .personzeile { flex-wrap: wrap; gap: 2px 12px; } .einspaltig .personzeile > .absatz { margin-left: 0; white-space: normal; } }


/* Konnektoren */
.k-leiste { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 8px 0 20px; flex-wrap: wrap; }
.k-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #e6e3dc; border-radius: 12px; background: #fff; }
.k-tabs a { padding: 8px 16px; border-radius: 9px; color: #6b6b66; text-decoration: none; font: 600 14px/20px Inter, system-ui, sans-serif; }
.k-tabs a[aria-current="page"] { background: #efede7; color: #1b1b19; }
.k-suche { width: 280px; max-width: 100%; padding: 10px 14px; border: 1px solid #e6e3dc; border-radius: 10px; background: #fff; font: 14px/20px Inter, system-ui, sans-serif; }
.k-tabelle { border-top: 1px solid #e6e3dc; }
.k-kopf, .k-zeile { display: grid; grid-template-columns: 1fr 160px 200px; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid #e6e3dc; font: 14px/20px Inter, system-ui, sans-serif; }
.k-kopf { color: #6b6b66; }
.k-name { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.k-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff; font-weight: 700; }
.k-ok { color: #16874e; font-weight: 600; }
.k-grau { color: #8a8a84; }
.k-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.k-karte { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid #e6e3dc; border-radius: 14px; background: #fff; font: 14px/20px Inter, system-ui, sans-serif; }
.k-karte .k-icon { width: 48px; height: 48px; flex: none; border-radius: 10px; font-size: 18px; }
.k-info { flex: 1; min-width: 0; }
.k-info p { margin: 0; }
.k-titel { font-weight: 600; }
.k-text { color: #1b1b19; }
.k-von { color: #8a8a84; margin-top: 8px !important; }
.k-aktion { flex: none; }
.k-plus, .k-haken { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px; background: #efede7; color: #1b1b19; font: 600 20px/1 Inter, system-ui, sans-serif; text-decoration: none; }
.k-haken { background: #e3f3e9; color: #16874e; }
@media (max-width: 640px) { .k-raster { grid-template-columns: 1fr; } .k-kopf, .k-zeile { grid-template-columns: 1fr 1fr; } .k-kopf span:nth-child(2), .k-zeile > span:nth-child(2) { display: none; } }
.k-link { color: inherit; text-decoration: none; }
.k-link:hover { text-decoration: underline; }
.k-zurueck { color: #6b6b66; text-decoration: none; font: 600 14px/20px Inter, system-ui, sans-serif; }
.k-detail-kopf { display: flex; gap: 20px; align-items: center; margin: 16px 0 24px; }
.k-detail-kopf h2 { margin: 0 0 4px; }
.k-detail-kopf p { margin: 0; }
.k-icon.k-gross { width: 72px; height: 72px; flex: none; border-radius: 14px; font-size: 28px; }
.k-beschreibung { max-width: 720px; margin: 0 0 32px; font: 16px/26px Inter, system-ui, sans-serif; }
.k-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding-top: 24px; border-top: 1px solid #e6e3dc; }
.k-fakt { margin-bottom: 24px; font: 15px/22px Inter, system-ui, sans-serif; }
.k-fakt p { margin: 0; }
.k-label { color: #8a8a84; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px !important; }
.k-fakt a { color: #1b1b19; }
@media (max-width: 640px) { .k-infos { grid-template-columns: 1fr; gap: 0; } .k-detail-kopf { flex-wrap: wrap; } }
.k-gruppe { margin: 32px 0 12px; font: 600 16px/24px Inter, system-ui, sans-serif; }
.k-zahl { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #efede7; color: #6b6b66; font-size: 12px; }
.k-fakt code { font-size: 13px; word-break: break-all; }
.k-icon img { width: 58%; height: 58%; object-fit: contain; }
.k-hinweis { max-width: 720px; margin: -16px 0 28px; color: #6b6b66; font: 14px/22px Inter, system-ui, sans-serif; }
.k-status .loesen-link, .absatz .textlink { padding: 0; border: 0; background: none; color: #6b6b66; font: inherit; text-decoration: underline; cursor: pointer; }
.k-status .loesen-link:hover, .absatz .textlink:hover { color: #1b1b19; }
.status-aktiv { color: #16874e; font-weight: 600; }
.schluessel-karte { width: 720px; max-width: 100%; box-sizing: border-box; gap: 12px; padding: 18px 22px; }
.schluessel-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.schluessel-status h2 { margin: 0; }
.schluessel-status .etikett { padding: 4px 12px; border: 1px solid #e6e3dc; border-radius: 999px; background: #fff; color: #6e6c66; font-size: 13px; line-height: 18px; font-weight: 600; }
.schluessel-status .etikett.gruen { border-color: #16874e; background: #16874e; color: #fff; }
.schluessel-status form.inline { display: inline; }
.schluessel-status .linkbtn { font-size: 14px; }
.schluessel-karte .schluessel-form { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
.schluessel-karte input.eingabe { flex: 1; min-width: 0; }
.pulldown { position: relative; flex: none; width: 150px; }
.pulldown summary { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 40px; padding: 0 12px; background: #fff; cursor: pointer; list-style: none; user-select: none; }
.pulldown summary::-webkit-details-marker { display: none; }
.pulldown summary::after { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6c66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pulldown[open] summary { border-color: #16874e; }
.pulldown .liste { position: absolute; z-index: 2; top: 44px; left: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 4px; background: #fff; border: 1px solid #e6e3dc; border-radius: 10px; }
.pulldown .eintrag { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.pulldown .eintrag:hover { background: #f4f2ec; }
.pulldown .eintrag input { position: absolute; opacity: 0; pointer-events: none; }
.pulldown .eintrag:has(input:checked) { background: #e9f2eb; font-weight: 600; }
.pulldown .eintrag:has(input:checked)::after { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316874e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.schluessel-karte:has(details[open]) { padding-bottom: 110px; }
.schluessel-karte .btn-primary { flex: none; width: 130px; }
.schluessel-karte .absatz { margin: 0; font-size: 13px; line-height: 18px; }
@media (max-width: 650px) { .schluessel-karte .schluessel-form { flex-wrap: wrap; } .pulldown, .schluessel-karte input.eingabe { flex: 1 1 100%; width: 100%; } }
.k-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-filter { padding: 8px 16px; border: 1px solid #e6e3dc; border-radius: 999px; background: #fff; color: #6b6b66; text-decoration: none; font: 600 14px/20px Inter, system-ui, sans-serif; }
.k-filter:hover { border-color: #101012; }
.k-filter[aria-pressed="true"] { background: #e3f3e9; border-color: #16874e; color: #0f6b3a; }
button:disabled, .btn-primary:disabled, .btn-dunkel:disabled { background: #e6e3dc; border-color: #e6e3dc; color: #8a8a84; cursor: not-allowed; }
/* Einheitliches Formularfeld (Skill werkstatt-design): Höhe 44, Radius 10, Innenabstand 14, Schrift 15, weiß mit Linie. Gilt für Eingaben, Auswahl und Pulldown. */
.eingabe, .pulldown summary { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e6e3dc; border-radius: 8px; background: #fff; color: #101012; font: 400 14px/20px Inter, system-ui, sans-serif; }
textarea.eingabe { height: auto; min-height: 40px; padding: 10px 12px; }
.pulldown summary { width: 100%; }
.schluessel-karte input.eingabe { flex: 1 1 auto; width: auto; min-width: 0; }

/* Kompakte Skala (Skill werkstatt-design, pen: „Konto · Bausteine · kompakt“): Seitentitel 32, Titel 18, Bedienelemente 14, Nebeninfo 12, Felder und Knöpfe 40. */
h1 { font: 700 32px/40px "Plus Jakarta Sans", system-ui, sans-serif; }
.kopf { gap: 12px; }
.beschreibung { font-size: 14px; line-height: 20px; }
.bereiche { gap: 20px; padding: 4px 0; font-size: 14px; }
h2 { font: 600 18px/26px Inter, system-ui, sans-serif; }
.karte { gap: 12px; padding: 20px; border-radius: 12px; }
.btn-primary { height: 40px; padding: 0 20px; font: 600 14px/20px Inter, system-ui, sans-serif; }
.btn:not(.btn-nav) { height: 40px; padding: 0 18px; font-size: 14px; }
.einladen .btn-primary { min-width: 200px; }
/* Coaching */
.termin { gap: 12px; max-width: 1000px; }
.schritt { gap: 12px; padding: 20px; border-radius: 12px; }
.termin > .schritt:first-child { flex: 0 0 320px; }
.termin-form .schritt:first-child { flex: 0 0 280px; }
.termin-form .schritt:last-child { flex: 1 1 0; }
.schritt-kopf { gap: 8px; }
.schritt-nr { font: 600 11px/16px "JetBrains Mono", monospace; }
.schritt h2 { margin: 0; font: 600 18px/26px Inter, system-ui, sans-serif; }
.zone { font-size: 10px; line-height: 14px; letter-spacing: 0; }
.monat strong, .tag-titel { font: 600 14px/20px Inter, system-ui, sans-serif; }
.monat-pfeil { width: 24px; height: 28px; font-size: 16px; }
.wochentage, .woche { gap: 2px; }
.tag-k { height: 30px; font-size: 13px; }
.zeiten { gap: 6px; }
.zeit { height: 32px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; }
.zeit.belegt { background: #f7f6f3; }
.schritt .absatz, .hinweis-klein { margin: 0; font-size: 12px; line-height: 16px; color: #6e6c66; }
.schritt .label { margin: 0; font-size: 14px; }
.einwilligung { display: flex; flex-direction: column; gap: 8px; }
.zustimmung { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 16px; color: #6e6c66; }
.zustimmung input { margin: 1px 0 0; flex: none; }
[hidden] { display: none !important; }
.inhalt { gap: 18px; padding: 40px 64px 48px; }
/* Konnektoren, kompakt (pen: „Strecke · 22 Konto Konnektoren“) */
.k-leiste { margin: 0 0 12px; gap: 12px; }
.k-tabs { padding: 3px; border-radius: 9px; }
.k-tabs a { padding: 5px 12px; border-radius: 7px; font-size: 13px; line-height: 18px; }
.k-filter { padding: 5px 12px; font-size: 13px; line-height: 18px; }
.k-filter[aria-pressed="true"] { background: #e9f2eb; }
.k-suche { width: 240px; height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; box-sizing: border-box; }
.k-gruppe { margin: 18px 0 8px; font: 600 14px/20px Inter, system-ui, sans-serif; }
.k-zahl { margin-left: 4px; padding: 1px 7px; font-size: 11px; }
.k-raster { gap: 10px; }
.k-karte { gap: 12px; padding: 12px 14px; border-radius: 10px; align-items: center; }
.k-icon { width: 24px; height: 24px; border-radius: 6px; }
.k-karte .k-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.k-titel { font-size: 14px; line-height: 20px; }
.k-text { margin: 0; font-size: 12px; line-height: 16px; color: #6e6c66; }
.k-plus, .k-haken { width: 28px; height: 28px; border-radius: 8px; font-size: 16px; }
.k-kopf, .k-zeile { padding: 10px 4px; font-size: 13px; line-height: 18px; }
.k-detail-kopf { margin: 12px 0 16px; gap: 14px; }
.k-icon.k-gross { width: 48px; height: 48px; border-radius: 10px; }
.k-beschreibung { margin: 0 0 20px; font-size: 14px; line-height: 20px; }
.k-fakt { margin-bottom: 14px; font-size: 14px; line-height: 20px; }
.k-hinweis { margin: -8px 0 18px; font-size: 13px; line-height: 18px; }
/* Hinweis von oben (wie in der App): erscheint kurz, blendet sich selbst aus. */
.toast { position: fixed; top: 8px; left: 50%; z-index: 100; display: flex; align-items: flex-start; gap: 8px; box-sizing: border-box; width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 8px 12px; border: 1px solid #02855e; border-radius: 6px; background: #02855e; color: #fff; font: 700 16px/24px Inter, system-ui, sans-serif; text-align: left; white-space: pre-wrap; transform: translateX(-50%); animation: toast 4.5s ease forwards; pointer-events: none; }
.toast svg { flex: none; width: 16px; height: 16px; margin-top: 4px; }
.toast.fehler { border-color: #e02f1f; background: #e02f1f; animation-duration: 7s; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -14px); } 7% { opacity: 1; transform: translate(-50%, 0); } 90% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .toast { animation-name: toast-ein; } @keyframes toast-ein { 0%, 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } }

/* Phone: the e-mail field and the page columns use the full width (the desktop padding of .inhalt above had overridden the phone rule). */
@media (max-width: 650px) {
  .inhalt { padding: 32px 16px 40px; }
  .landing .formular { max-width: none; }
  .landing .feld { padding: 4px; }
  .landing .feld input { padding: 16px 18px; font-size: 17px; }
  .landing .knoepfe .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 17px; }
}

/* Name of the product behind the logo (pen: Navigation Journey · Konto, 27.10.2026). */
.logo-sub { margin-left: 10px; font: 600 20px/28px "Plus Jakarta Sans", system-ui, sans-serif; color: #101012; white-space: nowrap; text-decoration: none; }

.logo-wrap { display: flex; align-items: center; }