/* KI-Werkstatt Konto. Every value is taken from the approved pen frames in
   mavens-workshop.pen ("Konto · … · Desktop · Entwurf Claude 14.10.2026"), which copy
   "Navigation Journey", "Footer Journey" and the elements of "Buchung · Einstieg".
   Mobile (<= 650px) follows src/site/werkstatt/journey/journey.css of the website.
   pen variables: bg #F7F6F3, ink #101012, muted #6E6C66, line #E6E3DC, green #16874E,
   green-soft #E9F2EB, surface #FFFFFF, font-head Plus Jakarta Sans, font-body Inter. */

@font-face { font-family: "Inter"; src: url("/konto/assets/fonts/Inter-VF.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/konto/assets/fonts/PlusJakartaSans-VF.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/konto/assets/fonts/JetBrainsMono-VF.ttf") format("truetype"); font-weight: 100 800; font-display: swap; }

*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #f7f6f3; color: #101012; font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 22px; }
p, h1, h2 { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #16874e; outline-offset: 4px; }

/* Navigation Journey: 76px, padding 22 64, bg, bottom line; logo 28 + 125 x 28, gap 5. */
.nav-journey { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 64px; background: #f7f6f3; border-bottom: 1px solid #e6e3dc; }
.logo { display: flex; align-items: center; gap: 5px; }
.logo img { display: block; height: 28px; object-fit: contain; }

/* Buttons: "Termin vereinbaren" (secondary) and "Weiter" (primary); nav button 12 20 / 15px. */
.btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 16px 24px; border: 1px solid #e6e3dc; border-radius: 999px; background: #f7f6f3; color: #101012; font: 600 16px/normal Inter, system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: #101012; }
.btn-nav { align-self: center; padding: 12px 20px; font-size: 15px; }
.btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; padding: 18px 24px; border-radius: 999px; background: #16874e; color: #fff; font: 600 17px/normal Inter, system-ui, sans-serif; text-decoration: none; }
form { margin: 0; display: flex; flex-direction: column; }

/* Konto · Inhalt: padding 56 96 64, gap 36. Kopf: 1000 wide, gap 18. */
.inhalt { display: flex; flex-direction: column; gap: 36px; padding: 56px 96px 64px; min-height: calc(100vh - 76px - 89px); }
.kopf { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }
h1 { font: 800 48px/54px "Plus Jakarta Sans", system-ui, sans-serif; }
.beschreibung { color: #6e6c66; font-size: 21px; line-height: 30px; }
.bereiche { display: flex; gap: 24px; padding: 12px 0; color: #6e6c66; font-weight: 500; white-space: nowrap; }
.bereiche a { color: #6e6c66; text-decoration: none; }
.bereiche a[aria-current="page"] { color: #101012; font-weight: 600; }
.bereiche a:hover { color: #101012; }
.hinweis { align-self: flex-start; padding: 12px 18px; border-radius: 14px; background: #e9f2eb; }

/* Umfang und Erklärung: 1000 wide, gap 56. Card "Ihr Paket": 380, padding 32, gap 22. */
.zeile { display: flex; align-items: flex-start; gap: 56px; max-width: 1000px; }
.karte { display: flex; flex-direction: column; gap: 22px; flex: none; width: 380px; padding: 32px; border-radius: 14px; background: #e9f2eb; }
.kicker { color: #6e6c66; font-size: 14px; font-weight: 600; line-height: 20px; }
.wert { font-size: 54px; font-weight: 700; line-height: 76px; }
.von { font-size: 20px; line-height: 28px; }
.text { line-height: 22px; }
/* "Folgepreis" in "Ihr Paket": 18/600. */
.folgepreis { font-size: 18px; font-weight: 600; line-height: 25px; }
.balken { height: 8px; border-radius: 999px; background: #e6e3dc; overflow: hidden; }
.balken span { display: block; height: 100%; border-radius: 999px; background: #16874e; }
.balken-low span { background: #f2c14e; }
.balken-empty span { background: #a12b22; }

/* Divider sections: top line 1px, padding-top 20 (card) / 22 (column), gap 14. */
.divider { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid #e6e3dc; }
.spalte .divider { padding-top: 22px; }
.reihe { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; }
/* "Erklärung Monatsumfang": divider section with title, gap 22 like the column. */
.spalte .abschnitt { gap: 22px; }

/* Erklärung: flex 1, padding 24 0, gap 22. Titel 28/600, Absatz 16 muted, Label 16/600. */
.spalte { display: flex; flex-direction: column; gap: 22px; flex: 1; min-width: 0; padding: 24px 0; }
h2 { font-size: 28px; font-weight: 600; line-height: 39px; }
.absatz { color: #6e6c66; }
.label { font-weight: 600; }
.warnung { color: #a12b22; }

/* Balkendiagramm (Verlauf): 140 high, gap 6, bottom line; empty days in line color. */
.diagramm { display: flex; align-items: flex-end; gap: 6px; height: 140px; border-bottom: 1px solid #e6e3dc; }
.tag { flex: 1; min-width: 2px; border-radius: 4px 4px 0 0; background: #16874e; }
.tag-leer { background: #e6e3dc; }
.tag:hover { filter: brightness(1.15); }

/* Formular (Bestätigung): Label 16/600, field like "E-Mail Eingabe". */
.formular { gap: 10px; }
.formular label { font-weight: 600; }
.feld { display: flex; padding: 6px; border: 1px solid #e6e3dc; border-radius: 10px; background: #fff; }
.feld input { flex: 1; padding: 12px 18px; border: 0; background: transparent; font: inherit; color: #101012; }
.knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Footer Journey (logo removed): padding 30 64, top line; links 14 muted, gap 28. */
/* Without the logo (Mark, 14.10.2026): links only, right-aligned. */
.footer-journey { display: flex; align-items: center; justify-content: flex-end; gap: 32px; padding: 30px 64px; border-top: 1px solid #e6e3dc; }
.footer-journey nav { display: flex; gap: 28px; }
.footer-journey nav a { color: #6e6c66; font-size: 14px; text-decoration: none; }
.footer-journey nav a:hover { color: #101012; text-decoration: underline; }

/* Coaching: element "Buchung" of the appointment page (pen), steps 02 + 03 in one form. */
.termin { display: flex; align-items: flex-start; gap: 24px; width: 100%; }
.termin-form { display: contents; }
.schritt { display: flex; flex-direction: column; gap: 18px; flex: 1 1 0; min-width: 0; padding: 28px; border: 1px solid #e6e3dc; border-radius: 20px; background: #fff; }
.schritt-kopf { display: flex; align-items: center; gap: 12px; }
.schritt-nr { color: #16874e; font: 600 13px/normal "JetBrains Mono", monospace; }
.schritt h2 { font: 800 22px/normal "Plus Jakarta Sans", system-ui, sans-serif; }
.zone { color: #6e6c66; font: 500 10px/15px "JetBrains Mono", monospace; letter-spacing: 1.4px; }
.monat { display: flex; align-items: center; justify-content: space-between; }
.monat strong { font: 700 20px/30px "Plus Jakarta Sans", system-ui, sans-serif; }
.monat-nav { display: flex; }
.monat-pfeil { display: grid; place-items: center; width: 32px; height: 44px; font-size: 20px; color: #101012; text-decoration: none; }
span.monat-pfeil { color: #b9b6ae; }
.wochentage, .woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wochentage span { text-align: center; color: #6e6c66; font: 400 10px/normal "JetBrains Mono", monospace; }
.tag-k { display: grid; place-items: center; height: 38px; border-radius: 8px; font-size: 14px; text-decoration: none; }
.tag-k.aus { color: #b9b6ae; }
.tag-k.frei { background: #e9f2eb; color: #101012; font-weight: 600; }
.tag-k.frei[aria-current] { background: #16874e; color: #fff; }
.tag-titel { font: 700 18px/27px "Plus Jakarta Sans", system-ui, sans-serif; }
.zeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zeit { position: relative; display: grid; place-items: center; height: 44px; border: 1px solid #e6e3dc; border-radius: 10px; background: #f7f6f3; font-size: 15px; font-weight: 600; cursor: pointer; }
.zeit input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.zeit:has(input:checked) { background: #101012; border-color: #101012; color: #fff; }
.zeit:has(input:focus-visible) { outline: 2px solid #16874e; outline-offset: 2px; }
.zeit.belegt { color: #b9b6ae; cursor: default; }
.eingabe { width: 100%; padding: 14px 16px; border: 1px solid #e6e3dc; border-radius: 10px; background: #f7f6f3; color: #101012; font: 400 15px/normal Inter, system-ui, sans-serif; }
.eingabe::placeholder { color: #6e6c66; }
.nachricht { height: 96px; resize: vertical; }
.btn-dunkel { width: 100%; padding: 16px 22px; border: 0; border-radius: 999px; background: #101012; color: #fff; font: 600 13px/normal "JetBrains Mono", monospace; cursor: pointer; }
.btn-dunkel:disabled { opacity: 0.5; cursor: not-allowed; }
.hinweis-klein { color: #6e6c66; font-size: 13px; line-height: 1.5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Mobile, values from journey.css (@media max-width 650px). */
@media (max-width: 1100px) {
  .termin { flex-direction: column; }
  .schritt { width: 100%; }
  .zeile { flex-direction: column; gap: 20px; }
  .karte { width: 100%; }
  .spalte { width: 100%; }
}
@media (max-width: 650px) {
  .nav-journey, .footer-journey { padding-left: 16px; padding-right: 16px; }
  .inhalt { padding: 40px 16px; }
  h1 { font-size: 36px; line-height: 42px; }
  h2 { font-size: 26px; line-height: 34px; }
  .beschreibung { font-size: 18px; line-height: 26px; }
  .bereiche { gap: 10px; flex-wrap: wrap; font-size: 13px; }
  .karte { padding: 20px 16px; gap: 16px; }
  .wert { font-size: 44px; line-height: 60px; }
  .footer-journey { justify-content: flex-start; }
  .reihe { flex-direction: column; gap: 4px; }
  .schritt { padding: 20px 0; border: 0; border-top: 1px solid #e6e3dc; border-radius: 0; background: transparent; }
  .tag-k { height: 44px; }
}