/* =========================================================================
   "Mein Konto" client area — uses the site design tokens from style.css.
   Loaded only on /mein-konto.html.
   ========================================================================= */
.konto { width: min(100% - 0rem, 560px); margin-inline: auto; }
.konto-card {
  background: var(--offwhite); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 5vw, 2.8rem); box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--clay) 45%, transparent);
  animation: fadeRise .4s ease both;
}
@media (prefers-reduced-motion: reduce) { .konto-card { animation: none; } }
/* silent-login loading state — prevents the login form flashing for signed-in users */
.konto-loading { display: grid; place-items: center; min-height: 240px; }
.konto-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--forest) 18%, transparent); border-top-color: var(--accent);
  animation: konto-spin .7s linear infinite;
}
@keyframes konto-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .konto-spinner { animation-duration: 1.6s; } }
html.no-js .konto-loading { display: none; } /* no-JS falls through to the <noscript> message */

.konto-eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-deep); display: inline-block; margin-bottom: .7rem;
}
.konto-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 4.4vw, 2.4rem); color: var(--forest); line-height: 1.1; outline: none; }
.konto-sub { color: color-mix(in srgb, var(--ink) 85%, var(--forest)); margin: .6rem 0 1.4rem; max-width: 44ch; }

.konto-fields { display: grid; gap: 1rem; margin-bottom: .3rem; }
.konto-hint { font-size: .8rem; color: color-mix(in srgb, var(--ink) 62%, var(--cream)); margin-top: .1rem; }
.konto-err { color: #9A2B17; font-weight: 600; font-size: .9rem; min-height: 1.2em; margin: .6rem 0 .2rem; }
.konto-login, .konto-admin { margin-top: .6rem; }

/* sign-in options */
.konto-google { justify-content: center; gap: .6rem; background: var(--offwhite); color: var(--forest); border-color: color-mix(in srgb, var(--forest) 30%, transparent); }
.konto-google:hover { background: var(--cream); border-color: var(--forest); color: var(--forest); }
.konto-google svg { flex: 0 0 auto; }
.konto-emailcode { justify-content: center; gap: .6rem; margin-top: .7rem; }
.konto-emailcode svg { flex: 0 0 auto; }
.konto-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: color-mix(in srgb, var(--ink) 55%, var(--cream)); font-size: .82rem; }
.konto-or::before, .konto-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--forest) 15%, transparent); }
.konto-magic { display: block; margin: .9rem auto 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem; color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; padding: .3rem; }
.konto-magic:hover { color: var(--forest); }

/* sessions view */
.konto-list { display: grid; gap: 1rem; margin: .4rem 0 1.2rem; }
.konto-pkg {
  background: var(--cream); border: 1px solid color-mix(in srgb, var(--clay) 40%, transparent);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.konto-pkg__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.konto-pkg__name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--forest); }
.konto-pill {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sage-l) 55%, var(--offwhite)); color: var(--forest-d); white-space: nowrap;
}
.konto-big { display: flex; align-items: baseline; gap: .5rem; }
.konto-big b { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 8vw, 3.4rem); color: var(--accent-deep); line-height: 1; }
.konto-big span { font-size: 1rem; color: color-mix(in srgb, var(--ink) 80%, var(--forest)); }
.konto-meta { font-size: .85rem; color: color-mix(in srgb, var(--ink) 62%, var(--cream)); margin-top: .5rem; }
.konto-none { color: color-mix(in srgb, var(--ink) 80%, var(--forest)); margin: .6rem 0 1.2rem; }

/* visits history */
.konto-past { margin: .4rem 0 1.4rem; }
.konto-past__title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--forest); margin-bottom: .6rem; }
.konto-past__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.konto-past__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--forest) 10%, transparent); }
.konto-past__date { font-weight: 600; color: var(--forest); font-size: .95rem; }
.konto-past__meta { font-size: .82rem; color: color-mix(in srgb, var(--ink) 62%, var(--cream)); }

.konto-buy { justify-content: center; background: transparent; color: var(--forest); border-color: var(--forest); margin-bottom: 1.2rem; }
.konto-buy:hover { background: var(--forest); color: var(--offwhite); border-color: var(--forest); }

.konto-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--forest) 14%, transparent); }
.konto-help { font-size: .88rem; color: color-mix(in srgb, var(--ink) 70%, var(--cream)); }
.konto-help a { color: var(--accent-deep); }
.konto-foot-actions { display: inline-flex; gap: 1rem; align-items: center; }
.konto-logout, .konto-edit-btn { background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; color: color-mix(in srgb, var(--forest) 70%, var(--cream)); text-decoration: underline; text-underline-offset: 3px; padding: .3rem; }
.konto-logout:hover, .konto-edit-btn:hover { color: var(--accent-deep); }
.konto-top { margin-bottom: .4rem; }
.konto-back { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem; color: color-mix(in srgb, var(--forest) 70%, var(--cream)); padding: .3rem .1rem; display: inline-flex; align-items: center; gap: .35rem; }
.konto-back:hover { color: var(--accent-deep); }
.konto-save { margin-top: 1rem; }