/* CHAUN Studio · Kundenportal v3 (14.10.2026). Gleiche Sprache wie das Studio:
   variable Archivo (400/500/600/700), ruhige Flächen, eine Hauptaktion, Symbole,
   auf dem Handy Tab-Leiste unten. Wird als letzte Datei geladen. */
:root{
  --granit:#1c1d1a;--tanne:#2f3b2f;--kalk:#efebe3;--fels:#8a8578;--signal:#e4572e;
  --signal-strong:#c4421c;--signal-hover:#a8381a;--signal-soft:#fcece6;--signal-text:#9a3414;
  --tanne-soft:#e9eee6;--tanne-text:#2f4a2f;--warn-soft:#fbf0dc;--warn-text:#7a4b0c;--fels-soft:#eeebe5;
  --bg:#f6f5f1;--surface:#fff;--subtle:#faf9f6;--hover:#f2f0eb;
  --line:#e6e3dc;--line-strong:#d6d2c8;--text:#1c1d1a;--text-2:#3b3a36;--muted:#5f5d56;
  --night:#1c1d1a;--bone:#efebe3;--orange:#e4572e;
  --radius:12px;--radius-sm:8px;--ease:cubic-bezier(.2,.7,.2,1);
  --shadow-xs:0 1px 1px rgba(28,29,26,.04);
  --shadow:0 1px 2px rgba(28,29,26,.05),0 1px 3px rgba(28,29,26,.04);
  --shadow-md:0 4px 12px rgba(28,29,26,.07),0 1px 3px rgba(28,29,26,.05);
  --shadow-lg:0 12px 32px rgba(28,29,26,.12),0 2px 6px rgba(28,29,26,.06);
  --ring:0 0 0 3px var(--signal-text);
}
body{background:var(--bg);color:var(--text);font:400 15px/1.55 Archivo,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3{font-weight:700;color:var(--text)}
h1{font-size:30px;letter-spacing:-.015em;line-height:1.15}
h2{font-size:20px;letter-spacing:-.01em;line-height:1.3}
h3{font-size:16px;letter-spacing:-.012em;line-height:1.35;font-weight:650}
strong,b{font-weight:600}
.i{width:18px;height:18px;flex:none;vertical-align:-3px}
.portal-eyebrow,.portal-label{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.45 Archivo,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
.portal-eyebrow .i{width:16px;height:16px}
.portal-small{color:var(--muted)}
@keyframes portal-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.portal-main>*{animation:portal-in .2s var(--ease) both}
@media(prefers-reduced-motion:reduce){.portal-main>*,#portal-notice{animation:none!important}*{transition:none!important}}

/* Knöpfe & Felder */
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:500 15px/1.2 Archivo,Arial,sans-serif;box-shadow:var(--shadow-xs);transition:background-color .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .1s var(--ease)}
button .i{width:17px;height:17px}
button:hover{background:var(--hover)}
button:active{transform:translateY(1px) scale(.99)}
button.portal-primary{background:var(--signal-strong);border-color:var(--signal-strong);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(150,45,15,.3),inset 0 1px 0 rgba(255,255,255,.14)}
button.portal-primary:hover{background:var(--signal-hover);border-color:var(--signal-hover);box-shadow:0 3px 8px rgba(150,45,15,.25)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--ring)}
label{font-size:14px;font-weight:500;color:var(--text-2);gap:6px;margin:14px 0}
input:not([type=checkbox]),textarea,select{min-height:42px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs);font:400 15px Archivo,Arial,sans-serif;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--signal);outline:none;box-shadow:var(--ring)}
input[type=checkbox]{accent-color:var(--signal-strong)}

/* Kopf & Rahmen */
.portal-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding:10px max(24px,calc((100vw - 1040px)/2 + 24px));position:sticky;top:0;z-index:20}
.portal-brand img{width:26px;height:26px}
.portal-brand span{font-size:15px;font-weight:650}
.portal-brand small{font:500 12px Archivo,Arial,sans-serif;letter-spacing:0;color:var(--muted);margin-top:1px}
.portal-account{display:flex;align-items:center;gap:10px}
.portal-header button{min-height:36px;padding:6px 12px;font-size:14px;border-color:transparent;box-shadow:none;background:transparent;color:var(--text-2)}
.portal-header button:hover{background:var(--hover);color:var(--text)}
.avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font:650 12px/1 Archivo,sans-serif;background:var(--tanne-soft);color:var(--tanne-text)}
.avatar.tone-1{background:var(--signal-soft);color:var(--signal-text)}
.avatar.tone-2{background:var(--kalk);color:var(--granit)}
.avatar.tone-3{background:var(--fels-soft);color:#58544b}
.avatar.tone-4{background:var(--tanne);color:var(--kalk)}
.portal-main{max-width:1040px;padding:32px 24px 64px}
.portal-welcome{padding:0 0 20px}
.portal-welcome h1{margin:4px 0}
.portal-welcome p{font-size:15px;color:var(--muted)}
.portal-footer{max-width:1040px;font:400 12px Archivo,Arial,sans-serif;border-color:var(--line)}

/* Bereiche: Pills oben, auf dem Handy Tab-Leiste unten */
.portal-nav{display:flex;flex-wrap:wrap!important;overflow:visible!important;gap:4px;border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:28px}
.portal-nav button{background:transparent;border:0;border-radius:999px;box-shadow:none;color:var(--text-2);padding:6px 12px;min-height:34px;font:500 14px Rubik,Archivo,sans-serif;flex:none}
.portal-nav button:hover{background:var(--hover);color:var(--text)}
.portal-nav button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(28,29,26,.1),0 0 0 1px var(--line)}
.portal-tabbar{display:none}
.portal-section-head{margin-bottom:18px}
@media(min-width:751px){.portal-section-head{align-items:flex-end}}
.portal-section-head h2{margin:2px 0 0}
.portal-section-head small{font-size:13px}

/* Nächster Termin und Überblick */
.portal-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;margin:0 0 16px;border-radius:16px;background:radial-gradient(120% 140% at 100% 0,#3a4a3a 0,var(--tanne) 55%,#263026 100%);color:var(--kalk);box-shadow:var(--shadow-md)}
.portal-hero .portal-eyebrow{color:#c5d0bf}
.portal-hero h2{color:#fff;font-size:22px;margin:6px 0 10px}
.portal-hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;color:#dfe5da;font-size:14px}
.portal-hero-meta span{display:inline-flex;align-items:center;gap:6px}
.portal-hero-meta .i{width:16px;height:16px;color:#ffb39a}
.portal-hero .portal-badge{background:rgba(255,255,255,.14);color:#fff}
.portal-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 28px}
.portal-stat{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-content:stretch;gap:4px 12px;text-align:left;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-weight:400;color:var(--muted);font-size:13px}
.portal-stat:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);background:var(--surface)}
.portal-stat>.i{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--tanne-soft);color:var(--tanne-text);grid-row:span 2}
.portal-stat strong{display:block;font-size:18px;font-weight:650;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.portal-meter{display:block;grid-column:2;height:6px;border-radius:999px;background:#ecebe5;overflow:hidden}
.portal-meter b{display:block;height:100%;border-radius:inherit;background:var(--tanne);transition:width .4s var(--ease)}
.portal-progress{display:grid;grid-template-columns:auto 1fr;align-items:baseline;justify-items:start;gap:2px 6px;min-width:200px;font-size:13px;color:var(--muted)}
.portal-progress .portal-meter{justify-self:stretch}
.portal-progress strong{font-size:18px;color:var(--text);font-weight:650}
.portal-progress .portal-meter{grid-column:1/-1;margin-top:4px}

/* Karten */
.portal-meetings,.portal-series{gap:16px}
.portal-card,.portal-confirm{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
.portal-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md)}
.portal-card h3{margin:10px 0 8px;font-size:17px}
.portal-card p{font-size:14px}
.portal-meeting-date{font-weight:600}
.portal-card-actions{gap:8px;margin-top:16px}
.portal-badge{border-radius:999px;font-size:12px;font-weight:500;padding:4px 10px;background:var(--tanne-soft);color:var(--tanne-text)}
.portal-badge.portal-warn{background:var(--warn-soft);color:var(--warn-text)}
.portal-credit{font-size:36px;font-weight:650;letter-spacing:-.03em;margin:12px 0;font-variant-numeric:tabular-nums}
.portal-series-price{font-size:22px;font-weight:650;letter-spacing:-.02em;margin:10px 0}
.portal-series-dates{border-color:var(--line)}
.portal-series-dates li{border-color:var(--line)}
.portal-available{border-color:var(--line);margin-top:32px;padding-top:24px}
.portal-available>h2{font-size:18px}
.portal-preferences{background:var(--subtle);border:1px solid var(--line);border-radius:var(--radius-sm)}
.portal-empty{background:var(--subtle);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:28px}
.portal-empty h3{font-size:17px}
.empty-state{display:grid;justify-items:center;text-align:center;gap:6px;padding:36px 24px;background:var(--subtle);border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);grid-column:1/-1}
.empty-state .empty-icon{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--surface);color:var(--signal-strong);box-shadow:0 0 0 1px var(--line),var(--shadow-xs);margin-bottom:8px}
.empty-state h3{font-size:16px;font-weight:650;margin:0;color:var(--text)}
.empty-state p{margin:0 0 6px;max-width:46ch;font-size:14px}
.empty-state>button{margin-top:6px}
.portal-error{background:var(--signal-soft);color:var(--signal-text);border:0;border-radius:var(--radius-sm)}
#portal-notice{left:auto;right:24px;bottom:24px;transform:none;background:var(--granit);color:#fff;border-radius:12px;box-shadow:var(--shadow-lg);font:500 14px/1.45 Archivo,sans-serif;padding:12px 16px;animation:portal-in .2s var(--ease)}
.portal-history{border-color:var(--line)}
.portal-history>summary,.portal-card-ledger>summary{font-weight:600}
.makeup-panel article,.makeup-panel details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Anmeldung */
.portal-auth{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface)}
.portal-auth>aside{background:radial-gradient(120% 90% at 100% 0,#3a4a3a 0,var(--tanne) 45%,#232c23 100%);padding:48px 56px}
.portal-auth aside .portal-brand span{color:var(--kalk)}
.portal-auth aside .portal-brand small{color:#c5d0bf}
.portal-auth aside h1{font-size:clamp(32px,3.4vw,48px);line-height:1.08;letter-spacing:-.03em;color:var(--kalk);font-weight:700}
.portal-auth aside h1 em{color:#ff8a63}
.portal-auth aside p{color:#cfd6ca}
.portal-login form{max-width:400px;background:transparent;border:0;box-shadow:none;padding:0}
.portal-login h2{font-size:30px;letter-spacing:-.03em;margin:4px 0 8px}
.portal-login form>button{width:100%;min-height:44px;margin:8px 0 14px}
.portal-login p{font-size:14px}

@media(max-width:750px){
  body{font-size:15px}
  .portal-header{padding:8px 16px}
  .portal-header button{min-height:44px;padding:6px 8px}
  .portal-header button span{display:none}
  .portal-brand{min-height:44px}
  .portal-main{padding:20px 16px 96px}
  .portal-main .portal-welcome{padding:0 0 16px}
  .portal-main .portal-welcome h1{font-size:26px;letter-spacing:-.025em}
  .portal-section-head h2{font-size:19px}
  .portal-hero{padding:18px;flex-direction:column}
  .portal-overview{grid-template-columns:1fr;margin-bottom:22px}
  .portal-card{padding:16px}
  button,input:not([type=checkbox]),select,textarea{min-height:44px}
  .portal-card-actions>button{flex:1 1 auto}
  .portal-main .portal-tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .portal-tabbar button,.portal-tabbar .portal-section-picker{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;margin:0;padding:0 4px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font:500 11px Archivo,Arial,sans-serif}
  .portal-tabbar .i{width:22px;height:22px}
  .portal-tabbar button[aria-pressed=true],.portal-tabbar .portal-section-picker.is-current{color:var(--signal-text);font-weight:600}
  .portal-tabbar button[aria-pressed=true] .i,.portal-tabbar .portal-section-picker.is-current .i{color:var(--signal-strong)}
  .portal-tabbar button[aria-pressed=true]::before,.portal-tabbar .portal-section-picker.is-current::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--signal)}
  .portal-main .portal-tabbar .portal-section-picker{display:flex}
  .portal-tabbar .portal-section-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .portal-tabbar .portal-section-picker>b{display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:inherit;position:relative}
  .portal-dot{position:absolute;top:-1px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px #fff}
  .portal-tabbar .portal-section-picker select{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer;border:0;padding:0}
  .portal-tabbar .portal-section-picker:focus-within{box-shadow:inset var(--ring)}
  #portal-notice{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}
  .portal-auth{grid-template-columns:1fr}
  .portal-auth>aside{padding:24px;min-height:0}
  .portal-auth aside h1{font-size:28px;padding-top:24px}
  .portal-login{padding:28px 20px 32px}
  .portal-login h2{font-size:26px}
}
@media print{.portal-tabbar{display:none!important}}
.portal-card[role=status]::after{content:"";display:block;height:56px;margin-top:12px;border-radius:6px;background:linear-gradient(90deg,#efede8 25%,#f7f6f2 50%,#efede8 75%) 0 0/200% 100%;animation:portal-shimmer 1.3s linear infinite}
@keyframes portal-shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.portal-card[role=status]::after{animation:none}}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--signal-text);outline-offset:3px}
.portal-tabbar button:focus-visible,.portal-tabbar .portal-section-picker:focus-within{outline:3px solid var(--signal-text);outline-offset:-4px}

/* Login UI review: readable entry fields on narrow devices (including iOS). */
@media(max-width:750px){
 .portal-login input:not([type=checkbox]),.pricing-page input:not([type=checkbox]),.pricing-page select,body[data-school] input:not([type=checkbox]),body[data-school] select{font-size:16px}
 /* Keep the compact logout icon named for assistive technology. */
 .portal-header button[data-portal-logout] span{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}