/* GymRev Coaching identity · source: Brand Guidelines v1.0, 21 September 2026.
   Edit palette, type, spacing and radii here; styles.css owns screen layouts.
   PDF colour values win over older website near-black values. See BRAND.md. */
@font-face {
  font-family: Inter;
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}
:root {
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-graphite: #3A3A3A;
  --brand-strong-grey: #2A2A2A;
  --brand-silver: #EAE6E1;
  --brand-line: #D3D3D3;
  --brand-paper: #F5F5F5;
  --ink: var(--brand-black);
  --white: var(--brand-white);
  --muted: var(--brand-graphite);
  --soft: var(--brand-silver);
  --line: var(--brand-line);
  --paper: var(--brand-paper);
  --scrim: rgb(0 0 0 / 55%);
  --font-family: Inter, Arial, sans-serif;
  --weight-body: 400;
  --weight-subheading: 500;
  --weight-action: 600;
  --weight-heading: 700;
  --leading-heading: .9;
  --leading-subheading: 1;
  --leading-body: 1.3;
  --leading-reading: 1.5;
  --tracking-heading: -.03em;
  --tracking-subheading: -.02em;
  --tracking-body: -.01em;
  --text-micro: 11px;
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-subheading: 16px;
  --text-section: 18px;
  --text-large: 20px;
  --text-metric-small: 24px;
  --text-title-mobile: 30px;
  --text-metric: 36px;
  --text-title: 40px;
  --space-unit: 4px;
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --radius-chip: 8px;
  --radius-tile: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius: var(--radius-card);
  --shadow: none;
  --sidebar-width: 244px;
}
body { font-weight:var(--weight-body); }
h1,.client-main h1 {
  font-size:var(--text-title); font-weight:var(--weight-heading);
  line-height:var(--leading-heading); letter-spacing:var(--tracking-heading);
}
h2 { font-weight:var(--weight-heading); line-height:1.1; letter-spacing:var(--tracking-heading); }
h3 { font-weight:var(--weight-subheading); line-height:1.2; letter-spacing:var(--tracking-subheading); }
button,a,input,select,textarea { letter-spacing:var(--tracking-body); }
button { text-align:left; }
.eyebrow,.nav-label,th {
  text-transform:none; letter-spacing:var(--tracking-body);
  font-weight:var(--weight-subheading); line-height:var(--leading-body);
}
.eyebrow { display:flex; align-items:center; gap:var(--space-2); }
.eyebrow::before { content:''; width:5px; height:5px; background:currentColor; transform:rotate(45deg); flex:none; }
.brand { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5); padding:var(--space-4) var(--space-4) var(--space-10); }
.brand-logo { display:block; width:148px; height:auto; min-height:20px; }
.brand-sub { font-size:var(--text-micro); font-weight:var(--weight-body); color:var(--muted); letter-spacing:var(--tracking-body); }
.boot { text-align:left; }
.boot-logo { display:block; height:auto; margin-bottom:var(--space-4); }
.mobile-brand { display:none; }
.on-dark {
  --ink: var(--brand-white);
  --white: var(--brand-strong-grey);
  --muted: var(--brand-line);
  --paper: var(--brand-strong-grey);
  --soft: var(--brand-graphite);
  --line: var(--brand-graphite);
  color:var(--brand-white);
}
.shell { grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.sidebar { width:var(--sidebar-width); padding:var(--space-5); background:var(--brand-black); border-color:var(--brand-black); }
.sidebar .workspace-tag { padding:var(--space-3); margin-bottom:var(--space-8); border-color:var(--brand-graphite); }
.sidebar .nav-label { color:var(--brand-line); padding-left:var(--space-3); margin-bottom:var(--space-3); }
.sidebar .nav-link { color:var(--brand-line); min-height:44px; padding:var(--space-3); }
.sidebar .nav-link:hover { background:var(--brand-strong-grey); color:var(--brand-white); }
.sidebar .nav-link.active { background:var(--brand-white); color:var(--brand-black); }
.sidebar .nav-link .count { background:var(--brand-silver); color:var(--brand-black); }
.sidebar .avatar { background:var(--brand-strong-grey); border-color:var(--brand-graphite); color:var(--brand-white); }
.sidebar .avatar.dark { background:var(--brand-white); border-color:var(--brand-white); color:var(--brand-black); }
.sidebar .pilot-note { background:var(--brand-strong-grey); border-color:var(--brand-graphite); }
.sidebar .account { padding:var(--space-4) var(--space-2) 0; }
.topbar { background:var(--white); }
.main { padding-top:var(--space-10); }
.page-heading { align-items:center; margin-bottom:var(--space-8); }
.page-heading p { margin-top:var(--space-4); font-size:var(--text-small); max-width:64ch; line-height:var(--leading-body); }
.heading-copy .eyebrow { margin-bottom:var(--space-4); }
.stat,.card,.person-card { border-radius:var(--radius-card); box-shadow:none; }
.stat { padding:var(--space-5); }
.stat-top { gap:var(--space-2); align-items:flex-start; }
.stat-value { font-size:var(--text-metric); font-weight:var(--weight-heading); letter-spacing:var(--tracking-heading); }
.stat-foot { line-height:var(--leading-body); }
.card-head,.card-body { padding:var(--space-6); }
.card-head h2 { font-size:var(--text-section); }
.card-head p { line-height:var(--leading-body); margin-top:var(--space-2); }
.task-row { padding:var(--space-5) var(--space-6); }
.task-row p,.activity-row p { line-height:var(--leading-body); }
.person-card { text-align:left; }
.pill { border-radius:var(--radius-chip); }
.btn { min-height:44px; border-radius:var(--radius-chip); padding:10px 16px; }
.btn.primary { background:var(--ink); color:var(--white); }
.btn.primary:hover { background:var(--brand-strong-grey); color:var(--brand-white); }
.on-dark .btn { background:var(--brand-white); border-color:var(--brand-white); color:var(--brand-black); }
.on-dark .btn:hover { background:var(--brand-silver); border-color:var(--brand-silver); }
.btn.sm { min-height:36px; }
.btn.icon { min-width:38px; min-height:38px; }
.field { border-color:var(--line); line-height:var(--leading-reading); }
.field::placeholder { color:var(--muted); opacity:1; }
textarea.field,.note-box,.message,.meal-details p,.help { line-height:var(--leading-reading); }
.empty,.photo-upload { text-align:left; }
.empty p { margin-left:0; margin-right:0; }
.brand-surface { position:relative; isolation:isolate; overflow:hidden; }
.brand-surface::before { content:''; position:absolute; width:300px; height:218px; right:-45px; bottom:-65px; background:url('/brand/gymrev-symbol-white.svg') center/contain no-repeat; opacity:.045; pointer-events:none; z-index:-1; }
.insight { background:var(--brand-strong-grey); border-color:var(--brand-strong-grey); padding:var(--space-6); border-radius:var(--radius-card); }
.insight h3 { font-weight:var(--weight-heading); font-size:var(--text-section); line-height:1.1; letter-spacing:var(--tracking-heading); margin:var(--space-4) 0 var(--space-3); }
.insight p { color:var(--brand-white); font-size:var(--text-caption); line-height:var(--leading-reading); }
.client-header { padding-top:var(--space-8); padding-bottom:var(--space-8); }
.client-header .brand { padding:0; gap:var(--space-5); }
.client-header .brand-logo { width:148px; }
.client-header .brand-sub { font-size:var(--text-micro); }
.client-intro { margin-bottom:var(--space-8); }
.client-main h1 { max-width:680px; }
.client-intro p { font-size:var(--text-body); margin-top:var(--space-4); }
.client-hero { border-radius:var(--radius-card); background:var(--brand-black); border-color:var(--brand-black); padding:var(--space-6); }
.client-hero h2 { font-weight:var(--weight-heading); line-height:1.1; }
.client-hero p { color:var(--brand-white); }
.client-goal .goal-number { font-weight:var(--weight-heading); }
.day-btn { min-height:44px; }
.meal-art { background:var(--soft); color:var(--ink); border-color:var(--soft); }
.meal-title .eyebrow { letter-spacing:var(--tracking-body); }
.meal-title h3 { font-weight:var(--weight-action); line-height:1.3; }
.nutrition-summary { background:var(--paper); }
.client-nav,.mobile-nav { background:var(--brand-white); backdrop-filter:none; }
.client-nav a.active,.mobile-nav a.active { color:var(--brand-black); }
.client-nav a.active::after,.mobile-nav a.active::after { content:''; width:4px; height:4px; background:currentColor; transform:rotate(45deg); }
progress,progress::-webkit-progress-bar { background:var(--soft); }
progress::-webkit-progress-value { background:var(--ink); }
progress::-moz-progress-bar { background:var(--ink); }
.modal { border-radius:var(--radius-panel); box-shadow:none; }
.modal-backdrop { background:var(--scrim); backdrop-filter:none; }
.message.client { background:var(--brand-black); color:var(--brand-white); }
#toast { background:var(--brand-black); color:var(--brand-white); box-shadow:none; }
#toast.error { background:var(--brand-strong-grey); }
.demo-bar { background:var(--brand-silver); color:var(--brand-black); text-align:left; padding:var(--space-2) var(--space-10); font-size:var(--text-micro); letter-spacing:var(--tracking-body); }
@media (max-width:1150px) {
  :root { --sidebar-width:208px; }
  .sidebar { padding:var(--space-4); }
  .sidebar .brand { padding:var(--space-4) var(--space-2) var(--space-8); }
  .sidebar .brand-logo { width:128px; min-height:24px; }
  .sidebar .workspace-tag { padding:var(--space-2); }
  .sidebar .workspace-tag .avatar { width:30px; height:30px; }
}
@media (max-width:700px) {
  :root { --text-title:30px; --text-metric:32px; }
  .shell { display:block; }
  h1,.client-main h1 { font-size:var(--text-title); line-height:1; }
  .topbar { min-height:64px; height:auto; padding:var(--space-3) var(--space-5); }
  .breadcrumb { gap:var(--space-3); }
  .mobile-brand { display:block; width:29px; height:21px; margin-right:var(--space-2); }
  .breadcrumb>svg,.breadcrumb>span:not(:last-child) { display:none; }
  .top-actions .btn { min-height:36px; font-size:var(--text-micro); }
  .main { padding:var(--space-8) 18px 110px; }
  .page-heading { align-items:flex-start; margin-bottom:var(--space-6); }
  .page-heading p { font-size:var(--text-small); margin-top:var(--space-3); }
  .page-heading .actions .btn { min-height:38px; font-size:var(--text-micro); }
  .stat { padding:var(--space-4); }
  .stat-top { font-size:var(--text-micro); min-height:30px; }
  .stat-foot { font-size:var(--text-micro); }
  .stat-value { margin:var(--space-4) 0 var(--space-3); }
  .card-head,.card-body { padding:18px; }
  .card-head h2 { font-size:var(--text-subheading); }
  .task-row { padding:18px; align-items:flex-start; }
  .task-row .avatar { margin-top:2px; }
  .task-row .task-copy strong { font-size:var(--text-small); }
  .task-row .btn { min-height:40px; font-size:var(--text-micro); }
  .task-title .pill { font-size:var(--text-micro); }
  .client-header { padding:var(--space-6) var(--space-5); }
  .client-header .brand-logo { width:128px; min-height:24px; }
  .client-header .actions { gap:var(--space-2); }
  .client-header .avatar { width:30px; height:30px; }
  .client-header .pill { font-size:var(--text-micro); }
  .client-main { padding-top:var(--space-3); }
  .client-intro h1.section-gap { margin-top:var(--space-4); max-width:340px; }
  .client-hero { padding:var(--space-5); }
  .client-hero h2 { font-size:var(--text-subheading); }
  .client-hero .btn { min-height:42px; }
  .client-board .client-goal p { font-size:var(--text-micro); }
  .client-board .client-goal .goal-number { font-size:var(--text-large); }
  .client-shell .meal-actions .btn,.client-shell .meal-actions .btn.icon { min-height:44px; }
  .day-btn { min-height:44px; }
  .field,.search input { font-size:16px!important; }
  .demo-bar { padding:var(--space-2) var(--space-5); font-size:var(--text-micro); }
  .modal { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
}

@media (max-width:360px) {
  .client-board .client-goals { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
}

/* Audit-Korrekturen 20.10.2026: Touch-Ziele, Überbreite, Landmarken, neue Hinweisflächen. Nur Marken-Tokens, keine Farben/Verläufe/Schatten. */
.urgent-box{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);background:var(--brand-black);color:var(--brand-white);border-radius:var(--radius-card);padding:18px 22px;margin-bottom:22px}
.urgent-box p{margin-top:6px;font-size:var(--text-caption);line-height:var(--leading-reading)}
.urgent-box .btn.primary{background:var(--brand-white);color:var(--brand-black)}
.task-row.is-urgent{border-left:4px solid var(--brand-black)}
.photo-pending{aspect-ratio:3/4;background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius-tile)}
.photo-upload .help{display:block;margin-top:6px}
.client-shell.is-preview .demo-bar{background:var(--brand-black);color:var(--brand-white)}
.table-hint{display:none}
.task-copy,.table-person>div,.person-top>div{min-width:0}
.task-title strong,.person-top strong,.table-person strong,.profile-title{overflow-wrap:anywhere}
.char-limit{margin-top:4px}
.login-remember input,.checkbox-line input{width:20px;height:20px;flex:0 0 auto}
.checkbox-line{min-height:44px;align-items:center}
@media (min-width:701px){.topbar .access-logout{display:none}}
@media (max-width:950px){
 .table-hint{display:block;padding:10px 24px 0}
 .tabs{flex-wrap:wrap;column-gap:18px;row-gap:0;overflow:visible}
}
@media (max-width:700px),(pointer:coarse){
 .btn,.btn.sm,.top-actions .btn,.page-heading .actions .btn{min-height:44px}
 .btn.icon{min-width:44px;min-height:44px}
 .day-btn{min-width:44px;min-height:44px;flex:0 0 44px}
 .tab{min-height:44px}
 .text-link{display:inline-flex;align-items:center;min-height:44px}
 .j-step-actions .btn,.j-diary-day,.l-checkpoint{min-height:44px}
}
@media (max-width:700px){
 .urgent-box{flex-direction:column;align-items:flex-start}
 body:has(.client-nav) #toast,body:has(.mobile-nav) #toast{bottom:calc(88px + env(safe-area-inset-bottom))}
 .search input::placeholder{text-overflow:ellipsis}
}
@media (max-width:360px){
 .client-header .actions{gap:6px;flex-wrap:nowrap}
 .client-header .brand-logo{width:118px;height:auto}
 .client-header .avatar{display:none}
}
/* QA-Runde 2 (20.10.2026) */
.table-scroll{position:relative}
#toast:not(.show){visibility:hidden}
#toast:empty{display:none}
body:has(.client-nav) #toast{bottom:calc(88px + env(safe-area-inset-bottom))}
@media (max-width:700px),(pointer:coarse){.back-link{display:inline-flex;align-items:center;min-height:44px}.tab{min-width:44px}}
@media (max-width:430px){.day-picker{gap:4px;padding-left:12px;padding-right:12px}}