/* ---------------------------------------------------------------------------
Erscheinungsbild der Praxis Tim Becker Physiotherapie.
Die Farben und Schriften stammen aus dem Farbschema von
timbecker-physiotherapie.de, damit App und Website zusammenpassen:
#101727 Navy - Haupttextfarbe, dunkler Hintergrund
#366E70 Petrol - Aktionsfarbe (Schaltflaechen, Verweise)
#7ECECC Mint - Hervorhebungen
#F8FAFB Hell - Seitenhintergrund
Die Schriften Outfit (Ueberschriften) und Inter (Fliesstext) liegen im
Ordner fonts/ auf dem eigenen Server. Sie werden bewusst NICHT von einem
fremden Anbieter geladen: sonst wuerde bei jedem Aufruf die IP-Adresse der
Patientin oder des Patienten dorthin uebermittelt (DSGVO).
Beide Schriften stehen unter der SIL Open Font License.
--------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url('fonts/inter-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
src: url('fonts/outfit-600.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap;
src: url('fonts/outfit-700.woff2') format('woff2');
}
:root {
/* Markenfarben (unveraendert aus dem Farbschema der Website) */
--marke-navy: #101727;
--marke-petrol: #366E70;
--marke-mint: #7ECECC;
--marke-hell: #F8FAFB;
--bg: #f2f6f7;
--surface: #ffffff;
--surface-2: #F8FAFB;
--border: #dde5e6;
--text: #101727;
--muted: #5f7276;
--accent: #366E70;
--accent-dark: #2a5759;
--accent-soft: #ddf0ef;
/* Schriftfarbe auf der Aktionsfarbe. Hell auf Petrol - im dunklen Modus
umgekehrt, weil dort Mint die Aktionsfarbe ist. */
--accent-contrast: #ffffff;
--green: #2f7d68;
--green-soft: #dcf0ea;
--red: #DF1B41;
--radius: 14px;
--shadow: 0 1px 2px rgba(16, 23, 39, .06), 0 8px 24px rgba(16, 23, 39, .07);
--font-text: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-head: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
/* Im dunklen Modus wird das Navy der Marke zum Hintergrund,
Mint uebernimmt die Rolle der Aktionsfarbe (heller Kontrast). */
--bg: #0b1120;
--surface: #101727;
--surface-2: #161f33;
--border: #263143;
--text: #eef4f5;
--muted: #93a5ab;
--accent: #7ECECC;
--accent-dark: #9adcda;
--accent-soft: #1d3a3b;
--accent-contrast: #101727;
--green: #6fc9ae;
--green-soft: #17342e;
--red: #ff7089;
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-text);
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
/* Spaltenaufbau, damit die Fusszeile immer unten sitzt - auch wenn der
Inhalt kurz ist und die Seite nicht bis zum Bildschirmrand reicht. */
min-height: 100vh;
display: flex;
flex-direction: column;
}
#authView, #appView { flex: 1 0 auto; }
.hidden, [hidden] { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-family: var(--font-head); letter-spacing: -.01em; }
p { margin: 0; }
/* ---------------- Login ---------------- */
/* ---------------- Anmeldeseite ----------------
Geteilter Bildschirm: links das Formular, rechts ein Praxisbild.
Auf kleinen Geraeten faellt die Bildhaelfte weg, damit das Formular
sofort sichtbar ist und nicht erst weggescrollt werden muss. */
.auth-wrap {
display: grid;
grid-template-columns: 1fr 1.1fr;
min-height: 100vh;
}
.auth-panel {
display: flex; align-items: center; justify-content: center;
background: var(--surface);
padding: 40px 28px;
}
.auth-panel-inner { width: 100%; max-width: 372px; }
.brand-logo {
display: block; height: 42px; width: auto; max-width: 100%;
margin-bottom: 34px;
}
#authTitle { font-size: 27px; letter-spacing: -.02em; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 7px 0 26px; line-height: 1.5; }
/* Rechte Bildhaelfte.
Der Farbschleier ist bewusst schwach: er gibt dem Bild Tiefe und bindet es
an die Markenfarben, laesst das Foto aber wirken. Faellt die Bilddatei aus,
bleibt das Marken-Navy als Flaeche stehen - gewollt statt kaputt. */
.auth-media {
background-color: var(--marke-navy);
background-image:
linear-gradient(160deg, rgba(16,23,39,.28) 0%, rgba(16,23,39,.08) 45%, rgba(54,110,112,.20) 100%),
url('img/praxis.jpg');
background-size: cover;
background-position: 50% 45%;
background-repeat: no-repeat;
}
/* Passwortfeld mit Auge zum Sichtbarmachen */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border: 0; border-radius: 8px;
background: transparent; color: var(--muted); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle.on { color: var(--accent); }
.forgot { margin: -4px 0 18px; text-align: right; }
.linklike {
border: 0; background: transparent; padding: 0; cursor: pointer;
font: inherit; font-size: 13.5px; color: var(--muted); text-decoration: underline;
text-underline-offset: 3px;
}
.linklike:hover { color: var(--text); }
.linklike.strong { color: var(--accent); font-weight: 600; text-decoration: none; }
.linklike.strong:hover { text-decoration: underline; }
.auth-switch { margin: 20px 0 0; font-size: 14px; color: var(--muted); text-align: center; }
.auth-legal {
margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--border);
display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
font-size: 12.5px;
}
.auth-legal a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover { color: var(--accent); text-decoration: underline; }
/* Schmale Bildschirme: Bildhaelfte weg, Formular ueber die volle Breite.
Ein Foto oberhalb des Formulars wuerde die Eingabefelder nach unten
druecken - auf dem Handy die haeufigste Ursache fuer Ratlosigkeit. */
@media (max-width: 900px) {
.auth-wrap { grid-template-columns: 1fr; }
.auth-media { display: none; }
}
.field { display: block; margin-bottom: 14px; }
/* Ueberschrift ueber einer Gruppe von Knoepfen - sieht aus wie eine
Feldbeschriftung, gehoert aber zu keinem einzelnen Feld. */
.feld-titel { display: block; font-size: 13px; font-weight: 600;
color: var(--muted); margin: 14px 0 8px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=date], input[type=time],
textarea, select {
width: 100%;
padding: 11px 12px;
font-size: 15px;
font-family: inherit;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; min-height: 70px; }
.error { color: var(--red); font-size: 14px; margin: 4px 0 12px; line-height: 1.5; }
/* Sachliche Rueckmeldung, im Gegensatz zur roten Fehlermeldung */
.hinweis {
color: var(--accent-dark); background: var(--accent-soft);
font-size: 13.5px; line-height: 1.55; margin: 4px 0 14px;
padding: 11px 13px; border-radius: 10px;
}
.error a { color: inherit; font-weight: 600; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 16px; text-align: center; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
/* ---------------- Buttons ---------------- */
.btn {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
padding: 10px 16px;
border-radius: 10px;
font-size: 14.5px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.danger { color: var(--red); border-color: transparent; background: transparent; }
.btn.danger:hover { background: rgba(220, 38, 38, .1); }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
/* ---------------- Topbar ---------------- */
.topbar {
position: sticky; top: 0; z-index: 20;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.topbar-inner {
max-width: 860px; margin: 0 auto; padding: 10px 16px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { display: block; height: 40px; width: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
/* Die Symbole gehoeren zur Handy-Leiste unten und bleiben sonst aus. */
.nav-icon { display: none; }
.nav-btn {
border: 0; background: transparent; color: var(--muted);
padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.nav-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-btn.active { background: var(--accent-soft); color: var(--accent-dark); }
.user { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.container { max-width: 860px; margin: 0 auto; padding: 22px 16px 80px; }
/* ---------------- Karten ---------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px;
margin-bottom: 16px;
}
.card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card-head h2 { font-size: 17px; }
.card-head .spacer { margin-left: auto; }
.section-title {
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); margin: 26px 0 10px;
}
.section-title:first-child { margin-top: 0; }
.badge {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent-dark);
}
.badge.green { background: var(--green-soft); color: var(--green); }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }
.exercise-list { list-style: none; margin: 0; padding: 0; }
/* Übungsname oben, darunter die Parameter mit ausgeschriebenem Begriff.
Nebeneinander waere es auf dem Handy zu eng, sobald die Woerter dabeistehen. */
.exercise-list li {
display: flex; flex-direction: column; gap: 5px;
padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14.5px;
}
.exercise-list li:last-child { border-bottom: 0; }
.ex-name { font-weight: 600; line-height: 1.35; }
/* Ein Parameter je Kaestchen: Begriff klein und zurueckhaltend, Wert kraeftig.
So bleibt die Zahl das, was ins Auge faellt. */
.ex-parameter { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ex-parameter > span {
font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ex-parameter i {
font-style: normal; color: var(--muted); font-size: 12px; margin-right: 3px;
}
.ex-beschreibung-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.empty {
text-align: center; padding: 40px 20px; color: var(--muted);
border: 1px dashed var(--border); border-radius: var(--radius);
}
/* Fortschritt im laufenden Training */
.fortschritt { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.fortschritt-balken {
flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2);
overflow: hidden;
}
.fortschritt-balken > div {
height: 100%; border-radius: 999px; background: var(--green);
transition: width .25s ease;
}
.fortschritt-text {
font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------------- Training ---------------- */
.workout-head {
position: sticky; top: 53px; z-index: 10;
background: var(--bg); padding: 6px 0 12px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.workout-head h2 { font-size: 20px; }
.workout-head .spacer { margin-left: auto; }
.ex-card { padding: 16px 18px; }
.ex-card h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-meta {
display: flex; flex-wrap: wrap; gap: 4px 16px;
margin: 6px 0 10px; font-size: 13.5px; color: var(--text);
font-variant-numeric: tabular-nums;
}
.ex-meta i { font-style: normal; color: var(--muted); font-size: 12px; margin-right: 3px; }
.set-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.set-table th {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
text-align: left; font-weight: 700; padding-bottom: 6px;
}
.set-table th.num, .set-table td.num { text-align: center; }
.set-table td { padding: 4px 0; }
.set-table td.idx { width: 34px; color: var(--muted); font-weight: 700; font-size: 14px; }
.set-table td.prev { color: var(--muted); font-size: 12.5px; padding-left: 10px; white-space: nowrap; }
.set-table td.act { width: 40px; text-align: right; }
.set-table col.w { width: 96px; }
.set-input { text-align: center; font-variant-numeric: tabular-nums; padding: 9px 6px; }
.set-row.done .set-input { background: var(--green-soft); border-color: transparent; }
.check {
width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
background: var(--surface-2); cursor: pointer; font-size: 15px; line-height: 1;
color: var(--muted);
/* mittig, damit die Vektorgrafik sauber sitzt */
display: inline-flex; align-items: center; justify-content: center;
}
.check.on { background: var(--green); border-color: var(--green); color: #fff; }
.sep { display: inline-block; width: 18px; text-align: center; color: var(--muted); }
.save-state { font-size: 12.5px; color: var(--muted); }
/* ---------------- Editor ---------------- */
.ex-edit-row {
display: grid; grid-template-columns: 48px 1fr 58px 74px 70px 64px 34px; gap: 8px;
align-items: center; margin-bottom: 10px;
}
/* Beschreibung läuft unter der Zeile über die volle Breite - sie ist optional
und soll die Zahlenspalten nicht schmaler machen. */
.ex-beschreibung { grid-column: 2 / -1; font-size: 13px; }
/* Blockkennung wie A1 oder B2: kleines Schild vor dem Übungsnamen. */
.block {
display: inline-block; margin-right: 8px; padding: 1px 7px;
border-radius: 6px; background: var(--surface-2); color: var(--muted);
font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
vertical-align: 1px;
}
.ex-edit-head {
display: grid; grid-template-columns: 48px 1fr 58px 74px 70px 64px 34px; gap: 8px;
font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
font-weight: 700; margin-bottom: 6px;
}
.icon-btn {
width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 15px;
display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--red); border-color: var(--red); }
/* ---------------- Verlauf ---------------- */
.hist-item { cursor: pointer; }
.hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hist-head .spacer { margin-left: auto; }
.hist-detail { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.hist-ex { margin-bottom: 10px; font-size: 14px; }
.hist-ex b { display: block; margin-bottom: 2px; }
.hist-ex span { color: var(--muted); font-variant-numeric: tabular-nums; }
/* ---------------- Toast ---------------- */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
background: var(--text); color: var(--bg);
padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
box-shadow: var(--shadow); z-index: 50; max-width: 90vw;
}
/* Hinweisband für Praxis-Adressen, deren Bestätigung noch aussteht. */
.praxis-banner {
background: var(--accent-soft);
border-bottom: 1px solid var(--border);
}
.praxis-banner-inner {
max-width: 860px; margin: 0 auto; padding: 12px 16px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 13.5px; color: var(--accent-dark);
}
.praxis-banner-inner span { flex: 1 1 260px; line-height: 1.5; }
/* ---------------- Praxisbereich ---------------- */
/* Suchfeld mit Lupe.
Safari zeichnet input[type=search] mit eigenem Erscheinungsbild und
ueberginge sonst Rahmen, Rundung und Hintergrund - daher appearance:none. */
.suchzeile { position: relative; margin-bottom: 14px; }
.suchzeile input[type=search] {
-webkit-appearance: none;
appearance: none;
padding-left: 42px;
padding-right: 36px;
height: 44px;
}
.suchzeile input[type=search]::-webkit-search-decoration,
.suchzeile input[type=search]::-webkit-search-results-button { display: none; }
/* Safaris eigenes Loeschkreuz passt farblich nicht - eigenes Zeichen nutzen. */
.suchzeile input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 18px; height: 18px; cursor: pointer;
background: var(--muted);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.such-lupe {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--muted); pointer-events: none;
display: flex;
}
.patient-karte { cursor: pointer; }
.patient-karte:hover { border-color: var(--accent); }
.patient-zahlen { text-align: right; line-height: 1.6; }
/* Kennzeichnet Pläne, die aus der Praxis kommen - der Patient sieht damit
sofort, was von der Therapeutin stammt und was er selbst angelegt hat. */
.badge.praxis { background: var(--accent); color: var(--accent-contrast); }
.footer-note .linklike { margin-left: 6px; font-size: 12.5px; }
/* ---------------- Verlauf ---------------- */
.tabs-klein { display: flex; gap: 6px; }
.verlauf-hinweis { margin: 0 0 14px; }
/* Kennzahl rechts in der Kopfzeile einer Uebungskarte */
.kennzahl { text-align: right; }
.kennzahl b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.trend {
display: inline-block; margin-top: 3px; font-size: 12.5px; font-weight: 600;
}
.trend.hoch { color: var(--green); }
.trend.runter { color: var(--red); }
.trend.gleich { color: var(--muted); }
/* Kurve der Gewichtsentwicklung.
Die Linie traegt die Markenfarbe, jede Beschriftung dagegen Textfarben -
eine helle Markenfarbe waere als Schrift kaum lesbar. Hilfslinien liegen
nur eine Stufe neben der Flaeche und sind durchgezogen; gestrichelte
Linien lesen sich faelschlich als Schwellenwert. */
.kurve { display: block; width: 100%; height: auto; margin: 14px 0 2px; overflow: visible; }
.kurve-raster { stroke: var(--border); stroke-width: 1; }
.kurve-flaeche { fill: var(--accent); opacity: .10; }
.kurve-linie {
fill: none; stroke: var(--accent); stroke-width: 2;
stroke-linejoin: round; stroke-linecap: round;
}
/* Der Ring in Flaechenfarbe haelt Punkte lesbar, wo sie die Linie kreuzen. */
.kurve-punkt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.kurve-punkt.letzter { fill: var(--accent-dark); }
/* Unsichtbare, grosszuegige Trefferflaeche - 4 px waeren mit dem Finger
nicht zu treffen. */
.kurve-ziel { fill: transparent; cursor: help; }
.kurve-achse { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.kurve-wert {
fill: var(--text); font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ---------------- Tempo und Pause je Uebung ---------------- */
/* Tempoangaben sind Ziffernfolgen - mit gleichen Ziffernbreiten stehen sie
in Listen sauber untereinander. */
.tempo { font-variant-numeric: tabular-nums; }
.ex-meta .tempo { font-weight: 600; }
.ziel .tempo, .ziel .pausewert {
display: inline-block; margin-right: 10px;
font-size: 12px; color: var(--muted); font-weight: 600;
}
.ziel .pausewert { border-bottom: 0; }
.tempo-hilfe { margin: 14px 0 0; line-height: 1.65; }
/* ---------------- Pausenuhr ---------------- */
.pause-setup {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pause-setup-text { flex: 1 1 200px; }
.pause-setup-text p { margin: 3px 0 0; }
.pause-setup-wahl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
padding: 7px 12px; border-radius: 999px; font: inherit; font-size: 13.5px;
font-weight: 600; cursor: pointer;
}
.chip:hover { color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.pause-eigen { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.pause-eigen input { width: 62px; text-align: center; padding: 7px 6px; }
/* Die laufenden Uhren liegen fest am unteren Rand - beim Training scrollt man
staendig, sie muessen trotzdem immer sichtbar bleiben. Bei mehreren
gleichzeitig Trainierenden steht je Person eine Zeile untereinander. */
.pause-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 20px rgba(16, 23, 39, .10);
padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
max-height: 46vh; overflow-y: auto;
}
.pause-inner { max-width: 860px; margin: 0 auto; }
.pause-zeile {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.pause-zeile:last-child { border-bottom: 0; }
/* Die Uhr zum gerade geoeffneten Training wird hervorgehoben - sonst waere bei
mehreren Personen nicht erkennbar, welche gerade bedient wird. */
.pause-zeile.aktuell .pause-time { color: var(--accent); }
.pause-zeile:not(.aktuell) { opacity: .72; }
.pause-time {
font-family: var(--font-head); font-size: 26px; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
min-width: 68px;
}
.pause-mid { flex: 1 1 160px; min-width: 130px; }
.pause-label { font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.pause-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pause-fill {
height: 100%; border-radius: 999px; background: var(--accent);
transition: width .25s linear;
}
.pause-acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* Abgelaufen: deutlich sichtbar, ohne zu schreien. */
.pause-zeile.fertig .pause-time { color: var(--green); }
.pause-zeile.fertig .pause-label { color: var(--green); font-weight: 600; }
.pause-zeile.fertig .pause-fill { background: var(--green); }
.pause-zeile.fertig { opacity: 1; }
/* Die Kurzmeldung muss ueber die Uhr rutschen, sonst verdeckt sie diese. */
body.pause-aktiv .toast { bottom: 104px; }
/* Zusaetzlicher Platz unten, damit die Uhr nicht die letzte Uebung verdeckt. */
body.pause-aktiv .container { padding-bottom: 200px; }
@media (max-width: 620px) {
.pause-zeile { gap: 10px 12px; }
.pause-time { font-size: 23px; min-width: 60px; }
.pause-acts { width: 100%; }
.pause-acts .btn { flex: 1; }
.pause-setup-wahl { width: 100%; }
}
/* ---------------- Termine ----------------
Zwei Bausteine: die Liste der eigenen Termine und der Buchungsplan aus
Stundenknoepfen. Die Knoepfe sind bewusst gross genug fuer den Daumen -
gebucht wird meistens am Handy. */
.termin-zeile {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 12px 0; border-bottom: 1px solid var(--border);
}
.termin-zeile:last-of-type { border-bottom: 0; }
.termin-zeit {
min-width: 92px; display: flex; flex-direction: column; line-height: 1.3;
}
.termin-zeit b {
font-family: var(--font-head); font-size: 21px; color: var(--accent);
font-variant-numeric: tabular-nums;
}
.termin-zeit span { font-size: 12.5px; color: var(--muted); }
.termin-mid { flex: 1 1 180px; min-width: 0; line-height: 1.4; }
.termin-mid b { font-size: 14.5px; }
.termin-mid span { display: block; font-size: 12.5px; color: var(--muted); }
/* ---------------- Startbildschirm ----------------
Das erste, was Patienten von der App sehen. Zeichen, Schriftzug und
Anspruch aus dem Praxis-Logo auf Marken-Navy - dieselbe Formensprache wie
das Symbol auf dem Home-Bildschirm, damit beides als ein Stueck wirkt.
Alle Groessen haengen an der Bildschirmhoehe (svh statt vh: auf dem iPhone
zaehlt vh die Adressleiste mit, das Bild waere sonst unten angeschnitten).
So sitzt die Aufteilung auf einem kleinen SE genauso wie auf einem iPad. */
#startbild {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background:
radial-gradient(58% 38% at 50% 40%, rgba(126, 206, 204, .16), rgba(126, 206, 204, 0) 70%),
linear-gradient(160deg, #18233f 0%, #111a30 45%, #0a0f1e 100%);
/* Notbremse: Bleibt das Programm aus - kaputte Datei, abgebrochener
Download -, verschwindet das Bild nach drei Sekunden von allein.
Ohne sie saehen Patienten bei einer Stoerung nur noch dieses Bild.
Bewusst mit echter Laufzeit statt Dauer 0: eine Blende ueber null
Sekunden behandeln nicht alle Browser gleich. */
animation: start-notbremse .4s ease 2.6s forwards;
}
@keyframes start-notbremse {
from { opacity: 1; }
to { opacity: 0; visibility: hidden; }
}
#startbild.weg {
opacity: 0; visibility: hidden;
transition: opacity .4s ease, visibility 0s .4s;
}
.start-mitte { display: flex; flex-direction: column; align-items: center; }
.start-zeichen { height: 21svh; width: auto; display: block; }
/* Der Schriftzug darf nie breiter werden als das Handy - und auf dem Tablet
nicht ins Riesenhafte wachsen, deshalb zwei Grenzen. */
.start-schrift {
width: min(62vw, 30svh, 400px); height: auto;
margin-top: 5svh; display: block;
}
.start-linie {
position: absolute; bottom: 11.5svh; left: 50%; transform: translateX(-50%);
width: 54px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, rgba(126,206,204,0), #7ECECC, rgba(126,206,204,0));
}
.start-fuss {
position: absolute; bottom: 7svh; left: 0; right: 0; text-align: center;
padding: 0 16px;
color: rgba(244, 248, 249, .5);
/* Etwas enger gesperrt als zuvor: "DEIN GESUNDHEITSNAVIGATOR" ist doppelt
so lang wie das alte Wort und muss auch auf einem 320 Pixel breiten
Bildschirm in eine Zeile passen. */
font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
/* Wer im Geraet "Bewegung reduzieren" gesetzt hat, bekommt keine Blende. */
@media (prefers-reduced-motion: reduce) {
#startbild.weg { transition: none; }
}
.stufe-zeile.gewaehlt { border-color: var(--accent); background: var(--accent-soft); }
/* Sterne fuer die Rueckmeldung. Gross genug, um sie mit dem Daumen zu treffen. */
.sterne { display: flex; gap: 4px; margin-bottom: 14px; }
.stern {
border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
font-size: 30px; line-height: 1; color: var(--accent);
}
.stern:hover { transform: scale(1.08); }
/* Sechs Eintraege in der Leiste passen auf einem Handy nur, wenn die
Beschriftung mitschrumpft. Ab 400 Pixel ist wieder Platz. */
@media (max-width: 400px) {
.nav-btn span { font-size: 9.5px; letter-spacing: -.01em; }
.nav-btn { padding-left: 2px; padding-right: 2px; }
}
/* --- Taeglicher Check-In ---------------------------------------------
Die Skala laesst die 7 aus - Tims Entscheidung, siehe api/index.php.
Die Knoepfe sind so gross, dass man sie im Vorbeigehen trifft. */
.skala { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.skala-knopf {
flex: 1 1 40px; min-width: 40px; min-height: 46px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface-2); color: var(--text);
font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.skala-knopf:hover { border-color: var(--accent); }
.skala-knopf.aktiv {
border-color: var(--accent); background: var(--accent); color: var(--accent-contrast);
}
.skala-enden {
display: flex; justify-content: space-between; font-size: 12px;
color: var(--muted); margin-bottom: 16px;
}
.regionen { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.region-knopf {
border: 1px solid var(--border); border-radius: 999px;
background: var(--surface-2); color: var(--text);
padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer;
}
.region-knopf.aktiv { border-color: var(--accent); background: var(--accent-soft);
color: var(--accent-dark); font-weight: 600; }
/* Wochenziel und Serie. Bewusst ruhig gehalten: eine Serie soll tragen,
nicht antreiben. Keine Flammen, keine roten Zahlen. */
.serie-zahl { display: flex; align-items: baseline; gap: 9px; margin-bottom: 14px; }
.serie-zahl { flex-wrap: wrap; }
/* "3 von 3" darf nicht zwischen Zahl und Zahl umbrechen. */
.serie-zahl b { font-family: var(--font-head); font-size: 30px;
letter-spacing: -.02em; white-space: nowrap; }
.serie-zahl span { font-size: 14px; color: var(--muted); }
.serie-streifen { display: flex; gap: 5px; margin-bottom: 12px; }
.serie-woche {
flex: 1 1 auto; height: 26px; border-radius: 5px;
background: var(--surface-2); border: 1px solid var(--border);
}
/* Teilweise trainiert, aber Ziel nicht erreicht - sichtbar, aber nicht
als Versagen markiert. */
.serie-woche.teil { background: var(--accent-soft); border-color: var(--accent-soft); }
.serie-woche.voll { background: var(--accent); border-color: var(--accent); }
.serie-woche.laufend { box-shadow: inset 0 0 0 2px var(--accent-dark); }
/* Geschaetzte Dauer eines Plans. Bewusst unauffaellig neben dem Namen -
sie ist eine Hilfe bei der Frage "schaffe ich das jetzt noch?", nicht
die Hauptsache. */
.plan-dauer {
display: flex; align-items: center; gap: 6px; margin-top: 7px;
font-size: 13px; color: var(--muted);
}
.plan-dauer svg { flex: 0 0 auto; }
/* --- Noch nicht freigeschaltet ---------------------------------------
Ein gesperrter Bereich soll nach "kommt bald" aussehen, nicht nach
kaputt. Deshalb kein graues Nichts, sondern der Name, was er koennen
wird, und ein Knopf - denn wer draufdrueckt, sagt uns, was als
Naechstes gebraucht wird. */
.bald {
max-width: 460px; margin: 30px auto; text-align: center;
padding: 34px 24px 30px;
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--surface);
}
.bald-schloss {
width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--surface-2); color: var(--muted);
}
.bald-marke {
display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent-dark); margin-bottom: 12px;
}
.bald h2 { font-family: var(--font-head); font-size: 22px; margin-bottom: 10px; }
.bald p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.bald-klein { font-size: 13px !important; margin-top: 14px; }
.bald .btn { margin-top: 22px; }
.bald-danke { margin-top: 22px; color: var(--accent-dark) !important; font-weight: 600; }
/* Gesperrte Eintraege in der Leiste: blass, mit kleinem Schloss NEBEN der
Beschriftung. Absolut positioniert lag es darueber - je nach Breite mal
neben dem Wort, mal mitten darin. */
.nav-btn.gesperrt { opacity: .5; }
.nav-btn.gesperrt span::after {
content: ' \1F512'; font-size: .78em; opacity: .8;
}
/* --- Wochenkalender der Praxis ---------------------------------------
Fuenf Spalten, senkrecht die Zeit, jeder Termin ein Block an seiner
Stelle. Auf dem Handy rollt das Raster waagerecht - fuenf Tage nebeneinander
passen auf kein Telefon, aber die Seite soll deswegen nicht wandern. */
.wo-rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.wo-raster {
display: grid; grid-template-columns: 52px repeat(5, minmax(120px, 1fr));
min-width: 660px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.wo-zeiten { border-right: 1px solid var(--border); }
.wo-stunde {
height: 56px; padding: 2px 6px 0 0; text-align: right;
font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
border-top: 1px solid var(--border);
}
.wo-spalte { border-left: 1px solid var(--border); }
.wo-spalte.heute { background: var(--accent-soft); }
.wo-kopf {
height: 52px; padding: 7px 6px; text-align: center;
border-bottom: 1px solid var(--border); line-height: 1.2;
}
.wo-kopf b { display: block; font-size: 11.5px; letter-spacing: .05em;
text-transform: uppercase; color: var(--muted); }
.wo-kopf span { display: block; font-size: 13.5px; font-weight: 600;
font-variant-numeric: tabular-nums; }
.wo-kopf em { font-style: normal; font-size: 10.5px; color: var(--muted); }
/* Die Hoehe setzt das Programm - sie haengt an der Zahl der Stunden. */
.wo-flaeche { position: relative; }
.wo-linie { height: 56px; border-top: 1px solid var(--border); }
/* Ein Termin. Die Hoehe ist die Dauer - kurze Termine sind kurze Bloecke. */
.wo-block {
position: absolute; left: 2px; right: 2px; overflow: hidden;
border: 0; border-left: 3px solid rgba(0,0,0,.28); border-radius: 5px;
padding: 3px 5px; font: inherit; text-align: left; cursor: pointer;
color: #10202c; line-height: 1.2;
/* Ein Viertelstundentermin waere nur 14 Pixel hoch - der Name passt dann
nicht mehr hinein. Die Hoehe bleibt sonst die Dauer. */
min-height: 28px;
}
.wo-block b { display: block; font-size: 11.5px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-block span { display: block; font-size: 10.5px; opacity: .8;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-block:hover { filter: brightness(.94); }
/* Sieben Terminarten, sieben Farben - dieselbe Reihenfolge wie im
Preisverzeichnis der Praxis. */
.wo-block.fa { background: #cfe3ea; }
.wo-block.fb { background: #d8e7cf; }
.wo-block.fc { background: #f0e3c4; }
.wo-block.fd { background: #f0d5c4; }
.wo-block.fe { background: #e8cfd8; }
.wo-block.ff { background: #b9e3dd; }
.wo-block.fg { background: #cdd6ea; }
/* Tagesansicht der Praxis: eine Zeile je Termin, Uhrzeit vorn. */
.tagwechsel {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 16px;
}
.tagwechsel b { font-family: var(--font-head); font-size: 16px; flex: 1 1 auto; }
.tagzeile {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 13px 4px; border: 0; border-bottom: 1px solid var(--border);
background: transparent; color: var(--text); font: inherit;
text-align: left; cursor: pointer;
}
.tagzeile:last-child { border-bottom: 0; }
.tagzeile:hover { background: var(--accent-soft); }
.tagzeile-zeit {
flex: 0 0 54px; font-family: var(--font-head); font-size: 17px;
font-variant-numeric: tabular-nums;
}
.tagzeile-mitte { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.tagzeile-mitte b { display: block; font-size: 15px; }
.tagzeile-mitte span { display: block; font-size: 12.5px; color: var(--muted); }
.neues {
border: 1px solid var(--accent); border-radius: var(--radius);
background: var(--accent-soft); padding: 14px 16px; margin-bottom: 24px;
}
.neues-marke {
display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--accent-dark); margin-bottom: 8px;
}
.neues-zeile {
display: flex; align-items: center; gap: 10px; width: 100%;
border: 0; background: transparent; color: var(--text);
font: inherit; font-size: 15px; text-align: left; cursor: pointer;
padding: 8px 0; line-height: 1.4;
}
.neues-zeile + .neues-zeile { border-top: 1px solid rgba(0,0,0,.07); }
.neues-zeile > span:first-child { flex: 1 1 auto; }
.neues-zeile:hover { color: var(--accent-dark); }
/* --- Check-In als Schrittfolge ---------------------------------------
Der erste Bildschirm der App. Er zeigt EINE Frage - sonst nichts. Wer
morgens die App oeffnet, soll nicht lesen, sondern antworten. */
.checkin-schritt { max-width: 520px; margin: 0 auto; padding: 8px 0 40px; }
.checkin-gruss {
font-family: var(--font-head); font-size: 26px; letter-spacing: -.02em;
margin-bottom: 26px;
}
.checkin-zaehler {
font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--accent-dark); margin-bottom: 6px;
}
.checkin-schritt h2 {
font-family: var(--font-head); font-size: 23px; line-height: 1.25;
letter-spacing: -.01em; margin-bottom: 20px;
}
.checkin-unter { color: var(--muted); font-size: 14px; margin: -12px 0 14px; }
.checkin-schritt textarea { width: 100%; margin-bottom: 18px; }
.btn.gross { min-height: 54px; font-size: 16px; }
/* Grosse Skala: fuenf Felder je Zeile, jedes gut zu treffen. */
.skala.gross { gap: 8px; }
.skala.gross .skala-knopf {
flex: 1 1 calc(20% - 8px); min-width: 56px; min-height: 60px; font-size: 19px;
}
.checkin-fertig { text-align: center; padding: 40px 16px 30px; max-width: 460px; margin: 0 auto; }
.haken-gross {
width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
background: var(--accent); color: var(--accent-contrast);
display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.checkin-fertig h2 { font-family: var(--font-head); font-size: 24px; margin-bottom: 6px; }
.checkin-fertig p { color: var(--muted); font-size: 15px; }
.checkin-satz { color: var(--accent-dark) !important; font-weight: 600; margin-top: 6px; }
.checkin-fertig .btn { margin-top: 22px; }
/* Verlaufsbalken: eine Zeile je Tag, Laenge = Wert. Bewusst keine Kurve -
ein Balken je Tag liest sich auch mit fuenf Eintraegen noch. */
.tagesliste { display: flex; flex-direction: column; gap: 7px; }
.tagesbalken { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tagesbalken > span:first-child { flex: 0 0 74px; color: var(--muted);
font-variant-numeric: tabular-nums; }
/* display:block ist noetig - ein span ist von Haus aus inline, und dann
greift weder Hoehe noch Breite. */
.balken-spur {
display: block; flex: 1 1 auto; height: 20px; border-radius: 6px;
background: var(--surface-2); overflow: hidden;
}
.balken-wert { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.tagesbalken > b { flex: 0 0 26px; text-align: right; font-variant-numeric: tabular-nums; }
/* Messtabelle: waagerecht scrollbar, weil dreizehn Spalten auf ein Handy
nie passen - aber nur die Tabelle, nicht die Seite. */
.mess-rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mess-tabelle { border-collapse: collapse; font-size: 13.5px; min-width: 100%; }
.mess-tabelle th, .mess-tabelle td {
padding: 7px 10px; text-align: right; white-space: nowrap;
border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.mess-tabelle th { font-size: 12px; color: var(--muted); font-weight: 600; }
.mess-tabelle td:first-child, .mess-tabelle th:first-child {
text-align: left; position: sticky; left: 0; background: var(--surface);
}
.mess-tabelle .summe { font-weight: 700; }
/* --- Unterreiter innerhalb eines Bereichs -----------------------------
Sichtbar getrennt von der Hauptleiste unten: das hier wechselt die
Ansicht INNERHALB von Training, nicht den Bereich. Deshalb Text statt
Symbole und ein Strich unter dem aktiven Reiter. */
/* Lange Namen duerfen umbrechen. Vorher lief die Reihe seitlich aus dem
Bild - der letzte Reiter war dann nicht mehr zu sehen, und dass man
schieben kann, sieht man einem Bildschirm nicht an. */
.unterreiter {
display: flex; flex-wrap: wrap; gap: 0 4px; margin-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.unterreiter-knopf {
flex: 0 0 auto; border: 0; background: transparent; color: var(--muted);
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
padding: 10px 14px 11px; border-bottom: 2px solid transparent;
margin-bottom: -1px; white-space: nowrap;
}
.unterreiter-knopf:hover { color: var(--text); }
.unterreiter-knopf.aktiv { color: var(--accent-dark); border-bottom-color: var(--accent); }
/* --- Buchungsfläche --------------------------------------------------- */
.buchung {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
/* --- Schritt-für-Schritt-Buchung -------------------------------------
Eine Frage auf dem Bildschirm, große Ziele zum Antippen. Alles ist eine
Liste von Zeilen - nichts scrollt seitwärts, nichts ist ein Raster, in
dem man die Ordnung erst erkennen muss. */
.stufen { padding: 14px clamp(14px, 3vw, 20px) 18px; }
.stufe-kopf { padding: 12px 4px 14px; }
.stufe-nr {
display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--accent-dark); margin-bottom: 4px;
}
.stufe-kopf h3 {
font-family: var(--font-head); font-size: 21px; letter-spacing: -.01em;
line-height: 1.25;
}
.stufe-hinweis { font-size: 13.5px; color: var(--muted); margin: -4px 4px 12px; }
.stufe-liste { display: flex; flex-direction: column; gap: 9px; }
/* Die Auswahlzeile. Mindestens 62 Pixel hoch: das ist die Größe, die auch
mit unruhiger Hand sicher zu treffen ist. */
.stufe-zeile {
display: flex; align-items: center; gap: 12px; width: 100%;
min-height: 62px; padding: 12px 14px;
border: 1px solid var(--border); border-radius: 12px;
background: var(--surface-2); color: var(--text);
font: inherit; text-align: left; cursor: pointer;
}
.stufe-zeile:hover { border-color: var(--accent); background: var(--accent-soft); }
.stufe-zeile-text { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.stufe-zeile-text b { display: block; font-size: 16px; font-weight: 600; }
.stufe-zeile-text span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.stufe-marke {
flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent-dark); white-space: nowrap;
}
.stufe-pfeil { flex: 0 0 auto; font-size: 22px; color: var(--muted); line-height: 1; }
/* Beantworteter Schritt: schmal, mit Haken, antippbar zum Zurückgehen. */
.stufe-fertig {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 10px 14px; margin-bottom: 8px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface); color: var(--text);
font: inherit; text-align: left; cursor: pointer;
}
.stufe-fertig:hover { border-color: var(--accent); }
.stufe-haken {
flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
background: var(--accent); color: var(--accent-contrast);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.stufe-antwort {
flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stufe-aendern {
flex: 0 0 auto; font-size: 13px; color: var(--muted);
text-decoration: underline; text-underline-offset: 3px;
}
.stufe-fertig:hover .stufe-aendern { color: var(--accent); }
/* "Weitere Tage anzeigen" - bewusst zurückhaltend: wer sechs Tage
durchgesehen hat und keinen passenden fand, sucht diesen Weg von selbst. */
.mehr {
display: block; width: 100%; margin-top: 10px;
border: 0; background: transparent; color: var(--muted);
font: inherit; font-size: 14px; padding: 11px 4px; cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.mehr:hover { color: var(--accent); }
/* Das Foto der Verordnung. Die Fläche ist bewusst groß und beschriftet -
ein kleines Kamerasymbol wird auf dem Handy übersehen. */
.foto-feld {
display: flex; align-items: center; justify-content: center;
min-height: 150px; margin-bottom: 14px; padding: 10px;
border: 2px dashed var(--border); border-radius: 12px;
background: var(--surface-2); cursor: pointer; overflow: hidden;
}
.foto-feld:hover { border-color: var(--accent); background: var(--accent-soft); }
.foto-feld img { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; }
.foto-leer { color: var(--muted); font-size: 14.5px; text-align: center; }
.foto-felder { margin-bottom: 14px; }
/* Eine Zeile je Heilmittel: Name, Einheiten, Doppelbehandlung - so wie das
Rezept aufgebaut ist. */
.mittel-zeile {
display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--surface-2);
}
.mittel-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; }
.mittel-zahl { flex: 0 0 72px; width: 72px; text-align: center; }
.mittel-doppel { flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--muted); cursor: pointer; }
.mittel-doppel input { width: 17px; height: 17px; }
@media (max-width: 420px) {
.mittel-zeile { flex-wrap: wrap; }
.mittel-name { flex: 1 1 100%; }
}
.foto-felder .field { margin-bottom: 12px; }
/* Verordnung im Konto und im Praxisbereich */
.vo-karte {
border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; margin-bottom: 10px; background: var(--surface);
}
.vo-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vo-kopf b { font-family: var(--font-head); font-size: 16px; }
.vo-zahlen { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
/* Der feste Trainingstermin: der Ablauf als Zeitleiste, damit man auf
einen Blick sieht, wie lange man tatsaechlich weg ist. */
/* Die Leiste fuer ein laufendes Training sitzt ueber der Navigation -
sichtbar, aber nicht im Weg. Wie die Abspielleiste in einer
Podcast-App. */
.laeuft-leiste {
position: fixed; left: 12px; right: 12px; z-index: 46;
bottom: calc(12px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 12px;
padding: 11px 16px; border: 0; cursor: pointer; font: inherit;
border-radius: 14px; background: var(--accent); color: #fff;
box-shadow: 0 6px 22px rgba(16, 23, 39, .22);
text-align: left;
}
.laeuft-punkt {
width: 9px; height: 9px; border-radius: 50%; background: #fff;
flex: 0 0 auto; animation: laeuft-blinken 1.8s ease-in-out infinite;
}
@keyframes laeuft-blinken { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) {
.laeuft-punkt { animation: none; }
}
.laeuft-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.laeuft-text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laeuft-text span { font-size: 12.5px; opacity: .85; }
.laeuft-weiter { font-size: 13.5px; font-weight: 700; flex: 0 0 auto; }
/* Solange die Leiste da ist, braucht die Seite unten Platz - sonst
verdeckt sie die letzte Karte. */
body.training-laeuft .container { padding-bottom: 84px; }
@media (max-width: 720px) {
/* Auf dem Handy steht die Navigation unten - die Leiste darueber. */
.laeuft-leiste { bottom: calc(64px + env(safe-area-inset-bottom)); }
body.training-laeuft .container { padding-bottom: 140px; }
}
/* "Profil vervollstaendigen": Balken, ein naechster Schritt, ein Knopf.
Nicht vier Felder auf einmal - die fuellt niemand aus. */
.vervoll { margin-bottom: 18px; }
.vervoll .balken-spur { height: 8px; margin: 8px 0 14px; }
.vervoll-zahl { color: var(--accent-dark); font-size: 14px; font-weight: 700; }
.vervoll-schritt { display: flex; flex-direction: column; gap: 3px; }
.vervoll-schritt b { font-size: 15px; }
.vervoll-schritt span { color: var(--muted); font-size: 14px; }
/* "Mehr": Name gross, Erklaerung klein darunter - eine Zeile Text sagt
mehr als ein Symbol mit sechs Buchstaben. */
.mehr-was { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.profil-zeile .profil-name b { font-size: 15.5px; }
/* Eine Auswahl, die sich vor die Seite legt. Bisher gab es dafuer nichts -
und ein confirm() des Browsers kann nur ja und nein, hier braucht es
zwei gleichwertige Wege. */
.wahl-schicht {
position: fixed; inset: 0; z-index: 80;
display: flex; align-items: center; justify-content: center;
padding: 20px; background: rgba(16, 23, 39, .45);
}
.wahl-kasten {
width: 100%; max-width: 420px;
background: var(--surface); border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(16, 23, 39, .3);
padding: 22px;
}
.wahl-kasten h2 { font-family: var(--font-head); font-size: 20px; margin-bottom: 2px; }
.wahl-kasten > p { margin-bottom: 16px; }
.wahl-zeile {
display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
background: none; color: var(--text);
border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; margin-bottom: 10px;
}
.wahl-zeile:hover { border-color: var(--accent); background: var(--accent-soft); }
.wahl-zeile b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.wahl-zeile span { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }
.wahl-kasten .row-actions { justify-content: flex-end; margin-top: 4px; }
/* ------------------------------------------------------------------ *
* Profil: Zeilen mit Symbol, Name und Pfeil - die Form, die jede App
* fuer Einstellungen benutzt. Man muss sie nicht lernen.
* ------------------------------------------------------------------ */
.profil-kopf { margin-bottom: 18px; }
.profil-gruppe {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
overflow: hidden; margin-bottom: 18px;
}
.profil-zeile {
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 15px 18px; border: 0; background: none; cursor: pointer;
font: inherit; color: var(--text); text-align: left;
}
.profil-zeile + .profil-zeile { border-top: 1px solid var(--border); }
.profil-zeile:hover { background: var(--surface-2); }
.profil-symbol { display: flex; color: var(--muted); flex: 0 0 auto; }
.profil-name { flex: 1 1 auto; font-size: 15.5px; }
.profil-wert {
color: var(--muted); font-size: 13.5px; max-width: 45%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profil-pfeil { color: var(--muted); font-size: 20px; line-height: 1; flex: 0 0 auto; }
/* Der Weg zurueck steht oben links, wie ueberall sonst auch. */
.zurueck-zeile {
border: 0; background: none; padding: 4px 0 10px; cursor: pointer;
font: inherit; font-size: 15.5px; font-weight: 600; color: var(--accent-dark);
}
.zurueck-zeile:hover { text-decoration: underline; }
/* Abmelden steht unten, rot, mit einem Satz darunter - damit klar ist,
dass dabei nichts verloren geht. */
.profil-fuss { margin-top: 26px; text-align: center; }
/* Abmelden ist rot, soll aber wie ein Knopf aussehen und nicht wie ein
Wort - deshalb die Karte darum, wie bei den anderen Zeilen auch. */
.profil-fuss .btn.danger {
background: var(--surface); border-color: var(--border);
box-shadow: var(--shadow); margin-bottom: 10px;
}
.profil-fuss p { margin-bottom: 4px; }
/* Videodatenbank: der Player wird erst eingebunden, wenn jemand tippt -
deshalb hat der Kasten keine feste Hoehe, sondern das uebliche
Seitenverhaeltnis, sobald er da ist. */
.spieler { position: relative; margin: 12px 0 4px; padding-top: 56.25%; }
.spieler iframe {
position: absolute; inset: 0; width: 100%; height: 100%;
border: 0; border-radius: var(--radius); background: #000;
}
.uebung-karte .start-karte-kopf { margin-bottom: 4px; }
/* "Wie geht das?" steht direkt hinter dem Uebungsnamen und soll ihn
nicht ueberstrahlen - klein, in der Akzentfarbe, ohne Rahmen. */
.wie-geht-das {
border: 0; background: none; padding: 0 0 0 10px; cursor: pointer;
color: var(--accent-dark); font: inherit; font-size: 13px; font-weight: 600;
white-space: nowrap;
}
.wie-geht-das:hover { text-decoration: underline; }
/* Die Buchung der Trainingsflaeche steht direkt unter dem Plan und
gehoert optisch dazu: nach oben angeschlossen, mit farbigem Rand. */
.platz-karte {
margin-top: -6px; border-top-left-radius: 4px; border-top-right-radius: 4px;
border-left: 3px solid var(--accent);
}
.platz-karte.gebucht { border-left-color: var(--green); }
.platz-zeile {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.platz-zeile b { font-family: var(--font-head); font-size: 17px; }
.platz-marke {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
background: var(--surface-2); color: var(--muted);
}
.platz-marke.frei { background: var(--accent-soft); color: var(--accent-dark); }
.platz-karte.gebucht .platz-marke { background: var(--green-soft); color: var(--green); }
/* Uebungsvideos: das Bild soll gross sein, aber nicht die halbe Seite
einnehmen - deshalb eine feste Hoehe statt freier Groesse. */
.video-karte .start-karte-kopf { margin-bottom: 4px; }
.video-feld {
width: 100%; max-height: 420px; margin: 12px 0 4px;
border-radius: var(--radius); background: #000; display: block;
}
.video-rueck {
margin-top: 10px; padding: 12px 14px;
background: var(--accent-soft); border-radius: 10px;
}
.video-rueck p { margin: 4px 0 6px; font-size: 14.5px; }
.sterne-fest { color: var(--accent-dark); font-size: 17px; letter-spacing: 2px; }
.video-bewerten { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.video-bewerten textarea { width: 100%; margin: 6px 0 10px; }
/* ------------------------------------------------------------------ *
* Startseite: Datum gross, darunter drei Karten. Jede Karte ist ein
* Knopf - man tippt sie an und ist im Bereich.
* ------------------------------------------------------------------ */
.start-kopf { padding: 8px 0 22px; }
.start-gruss { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.start-tag {
font-family: var(--font-head); font-size: 26px; line-height: 1.2;
margin: 0 0 4px; color: var(--text);
}
.start-uhr {
color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums;
}
/* "Donnerstag, 20. September 2026" ist der laengste Fall - auf schmalen
Geraeten passt er nur kleiner in eine Zeile. */
@media (max-width: 380px) { .start-tag { font-size: 22px; } }
.start-karten { display: flex; flex-direction: column; gap: 12px; }
.start-karte {
display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
padding: 16px 18px; color: var(--text);
}
.start-karte:hover { border-color: var(--accent); }
.start-karte-kopf {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.start-karte-kopf b { font-family: var(--font-head); font-size: 17px; }
.start-karte-text { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.start-karte-pfeil {
display: inline-block; margin-top: 10px; color: var(--accent-dark);
font-size: 14px; font-weight: 600;
}
.start-marke {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
background: var(--surface-2); color: var(--muted);
}
/* Eigene Vorsilbe, damit die Namen sich nicht mit denen anderer
Bausteine schlagen - ".bald" gibt es an anderer Stelle schon. */
.start-marke.m-dran { background: var(--accent-soft); color: var(--accent-dark); }
.start-marke.m-laeuft { background: var(--accent); color: #fff; }
.start-marke.m-fertig { background: var(--green-soft); color: var(--green); }
.trenner { border: 0; border-top: 1px solid var(--border); margin: 20px 0 4px; }
.schalter {
display: flex; align-items: center; gap: 9px;
margin: 4px 0 14px; font-size: 15px; cursor: pointer;
}
.schalter input { width: 18px; height: 18px; accent-color: var(--accent); }
.fahrt-ablauf {
list-style: none; margin: 4px 0 12px; padding: 0 0 0 4px;
border-left: 2px solid var(--accent-soft);
}
.fahrt-ablauf li {
display: flex; align-items: baseline; gap: 10px;
padding: 5px 0 5px 12px; position: relative;
}
.fahrt-ablauf li::before {
content: ''; position: absolute; left: -5px; top: 12px;
width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.fahrt-ablauf b {
font-variant-numeric: tabular-nums; font-size: 15px; min-width: 48px;
}
.fahrt-ablauf span { color: var(--muted); font-size: 14px; }
/* Vorher-Nachher: zwei Aufnahmen immer nebeneinander, auch auf dem Handy.
Untereinander waere der Vergleich weg - genau darum geht es hier. */
/* Zwei Felder nebeneinander - fuer die Datumsauswahl beim Vorher-Nachher
und fuer Hin- und Rueckfahrt beim Trainingstermin. */
.paar-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.paar-felder .field { margin-bottom: 0; }
.foto-wahl {
width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
}
.foto-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foto-seite { margin: 0; }
.foto-seite img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: 10px; background: var(--accent-soft); display: block;
}
.foto-seite figcaption {
display: flex; flex-direction: column; gap: 2px;
margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center;
}
.foto-seite figcaption b { color: var(--text); font-size: 14px; }
.foto-leer-feld {
aspect-ratio: 3 / 4; border: 1px dashed var(--line); border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 13.5px;
}
.foto-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.foto-klein { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.foto-klein img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border-radius: 8px; background: var(--accent-soft);
}
.foto-klein b { font-size: 13px; }
.vo-bild { margin-top: 10px; }
.vo-bild img {
max-width: 100%; max-height: 420px; border-radius: 8px;
border: 1px solid var(--border); display: block;
}
.vo-marke {
font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
padding: 3px 8px; border-radius: 999px; white-space: nowrap;
background: var(--accent-soft); color: var(--accent-dark);
}
.notiz-intern { border-left: 3px solid var(--border); padding-left: 10px; font-style: italic; }
.vo-karte.empfohlen { border-color: var(--accent); background: var(--accent-soft); }
/* Die Anrede oben im Check-In. Gross und allein - sie ist das Erste, was
Patienten von der App sehen. */
.anrede { margin-bottom: 30px; }
.anrede h1 {
font-family: var(--font-head); font-size: 28px; letter-spacing: -.02em;
line-height: 1.15; margin-bottom: 6px;
}
.anrede p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.vo-marke.offen { background: var(--surface-2); color: var(--muted); }
/* Uhrzeiten im letzten Schritt: größer als sonst, weil hier gebucht wird. */
.stufen .zeitraster { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.stufen .zeitchip { min-height: 56px; font-size: 17px; }
/* Frisch gebuchter Termin. Der kurze Farbwechsel beantwortet die Frage
"ist das angekommen?", ohne dass man die Liste absuchen muss. */
@keyframes termin-neu {
from { background: var(--accent-soft); }
to { background: transparent; }
}
.termin-zeile.neu { animation: termin-neu 2.4s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.termin-zeile.neu { animation: none; box-shadow: inset 3px 0 0 var(--accent); }
}
/* Zeitraster im letzten Schritt: gleich breite Felder, damit die Uhrzeiten
untereinander stehen und der Tag auf einen Blick erfassbar ist. */
.zeit-laden { color: var(--muted); font-size: 14px; padding: 10px 4px; }
.zeitraster { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.stufen .zeitchip { min-height: 56px; font-size: 17px; }
/* Frisch gebuchter Termin. Der kurze Farbwechsel beantwortet die Frage
"ist das angekommen?", ohne dass man die Liste absuchen muss. */
@keyframes termin-neu {
from { background: var(--accent-soft); }
to { background: transparent; }
}
.termin-zeile.neu { animation: termin-neu 2.4s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
.termin-zeile.neu { animation: none; box-shadow: inset 3px 0 0 var(--accent); }
}
/* Zeitraster: gleich breite Felder, damit die Uhrzeiten untereinander
stehen und sich der freie Tag auf einen Blick erfassen lässt. */
.zeitraster {
display: grid; gap: 7px;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.zeitchip {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 46px; padding: 6px 8px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface-2); color: var(--text);
font: inherit; font-size: 15px; font-weight: 600;
font-variant-numeric: tabular-nums; cursor: pointer;
}
.zeitchip em { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--muted); }
button.zeitchip:hover { border-color: var(--accent); background: var(--accent-soft); }
.zeitchip.belegt {
opacity: .38; cursor: default; background: transparent;
text-decoration: line-through; text-decoration-thickness: 1px;
}
/* Bereichsmarke an einem gebuchten Termin */
.bereich {
font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 4px 9px; border-radius: 999px; white-space: nowrap;
background: var(--accent-soft); color: var(--accent-dark);
}
.bereich.training { background: var(--green-soft); color: var(--green); }
/* ---------------- Einwilligung ----------------
Eigene Seite zwischen Anmeldung und App. Bewusst schlicht: hier soll
gelesen und nicht gestaltet werden. */
.einwilligung-wrap {
flex: 1 0 auto;
display: flex; align-items: center; justify-content: center;
padding: 40px 20px;
}
.einwilligung-karte {
width: 100%; max-width: 520px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 32px 30px 28px;
}
.einwilligung-karte h1 { font-size: 25px; letter-spacing: -.02em; }
.einwilligung-text {
font-size: 14.5px; line-height: 1.6;
border-top: 1px solid var(--border);
padding-top: 16px; margin-bottom: 20px;
display: flex; flex-direction: column; gap: 12px;
}
.einwilligung-text a { color: var(--accent); }
#einwilligungAuszug {
border: 1px solid var(--border); border-radius: 10px;
padding: 14px 16px; margin: -6px 0 16px; background: var(--surface-2);
}
/* Das Haekchen selbst - grosszuegige Trefferflaeche, weil es die
entscheidende Handlung auf dieser Seite ist. */
.haken {
display: flex; gap: 11px; align-items: flex-start;
font-size: 14px; line-height: 1.5; cursor: pointer;
margin-bottom: 16px;
}
.haken input[type=checkbox] {
flex: none; width: 20px; height: 20px; margin: 1px 0 0;
accent-color: var(--accent); cursor: pointer;
}
.haken span { flex: 1; }
/* ---------------- Eigenes Konto ---------------- */
.user-name {
border: 0; background: transparent; padding: 4px 6px; margin: -4px -6px;
font: inherit; color: var(--muted); cursor: pointer; border-radius: 7px;
max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-name:hover { background: var(--surface-2); color: var(--text); }
.konto-liste {
margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px;
font-size: 14.5px; align-items: baseline;
}
.konto-liste dt { color: var(--muted); font-size: 13px; }
.konto-liste dd { margin: 0; }
/* ---------------- Zweiter Faktor ---------------- */
.faktor-schritte {
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 12px; max-width: 480px;
font-size: 14.5px; line-height: 1.6;
}
/* Der Schluessel zum Abtippen: gleichbreite Ziffern, grosszuegig gesetzt.
Wer ihn von Hand uebertraegt, darf sich nicht vertun. */
.geheimnis {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 17px; letter-spacing: .06em; word-break: break-all;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
}
.notfall {
margin-top: 16px; padding: 16px 18px;
border: 1px solid var(--green); border-radius: 10px; background: var(--green-soft);
}
.notfall b { display: block; margin-bottom: 4px; }
.notfall p { margin-bottom: 10px; }
.notfall ol {
margin: 0 0 12px; padding-left: 22px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 4px 16px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 15px; letter-spacing: .04em;
}
/* ---------------- Stand der Datensicherung ----------------
Steht oben im Praxisbereich. Im Normalfall eine ruhige Zeile, die man
ueberliest; faellt die Sicherung aus, wird sie rot und laesst sich nicht
mehr uebersehen. Das ist der ganze Zweck. */
.sicherung {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
padding: 11px 14px; margin-bottom: 14px;
border-radius: 10px; border: 1px solid var(--border);
background: var(--surface); font-size: 13.5px; line-height: 1.5;
}
.sicherung b { font-weight: 600; }
.sicherung span { color: var(--muted); }
.sicherung.gut { border-color: var(--green-soft); background: var(--green-soft); }
.sicherung.gut b { color: var(--green); }
.sicherung.hinweis { border-color: #d8b26a; background: rgba(216, 178, 106, .12); }
.sicherung.hinweis b { color: #8a5e0e; }
.sicherung.warnung { border-color: var(--red); background: rgba(223, 27, 65, .07); }
.sicherung.warnung b { color: var(--red); }
.sicherung.warnung span { color: var(--text); }
/* ---------------- Uebungsauswahl ----------------
Fenster ueber der Seite, aus dem eine Uebung in den Plan uebernommen wird.
Am Schreibtisch eine Karte in der Mitte, auf dem Handy fuellt sie den
Bildschirm - eine kleine Karte waere dort nur unnoetig eng. */
.wahl { position: fixed; inset: 0; z-index: 80; display: flex; }
.wahl-hinter { position: absolute; inset: 0; background: rgba(16, 23, 39, .45); }
.wahl-fenster {
position: relative; z-index: 1;
margin: auto; width: min(620px, 100%); max-height: min(760px, 92vh);
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 24px 60px rgba(16, 23, 39, .28);
padding: 18px 20px 12px;
}
.wahl-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wahl-kopf h2 { font-size: 19px; }
.wahl-kopf .spacer { margin-left: auto; }
.wahl-hinweis { margin: 0 0 10px; line-height: 1.5; }
/* Nur die Liste rollt, Suchfeld und Kopf bleiben stehen. */
.wahl-liste { flex: 1 1 auto; overflow-y: auto; margin: 0 -20px; padding: 0 20px; }
.wahl-gruppe {
position: sticky; top: 0; z-index: 1;
background: var(--surface);
font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
color: var(--muted); padding: 12px 0 6px;
}
.wahl-eintrag {
display: block; width: 100%; text-align: left;
border: 0; border-top: 1px solid var(--border); background: transparent;
padding: 11px 4px; cursor: pointer; font: inherit; color: var(--text);
border-radius: 8px;
}
.wahl-eintrag:hover { background: var(--accent-soft); }
.wahl-eintrag b { display: block; font-weight: 600; line-height: 1.35; }
.wahl-eintrag span {
display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Solange das Fenster offen ist, soll die Seite darunter nicht mitrollen. */
body.wahl-offen { overflow: hidden; }
@media (max-width: 620px) {
.wahl-fenster {
width: 100%; max-height: none; height: 100%;
border: 0; border-radius: 0;
padding: 14px 16px calc(10px + env(safe-area-inset-bottom));
}
.wahl-liste { margin: 0 -16px; padding: 0 16px; }
.wahl-eintrag { padding: 13px 4px; }
}
/* ---------------- Fusszeile ---------------- */
.site-footer {
flex-shrink: 0;
background: var(--surface);
border-top: 1px solid var(--border);
padding: 30px 16px 26px;
}
.footer-inner {
max-width: 860px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.footer-col h2 {
font-family: var(--font-head);
font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.footer-col p { margin: 0; font-size: 13.5px; line-height: 1.75; }
.footer-col a { color: var(--accent); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-note {
max-width: 860px; margin: 22px auto 0;
padding-top: 16px; border-top: 1px solid var(--border);
font-size: 12.5px; color: var(--muted); line-height: 1.6;
}
/* ==========================================================================
Handy (bis 620 px)
Die App wird im Training benutzt - mit dem Telefon in einer Hand, oft
verschwitzt und in Eile. Deshalb:
* Die Navigation sitzt unten, wo der Daumen sie erreicht, nicht oben.
* Alles zum Antippen ist mindestens 44 px hoch (Apples Richtwert).
* Die Kopfleiste bleibt schmal - jeder Millimeter zaehlt auf 5 Zoll.
========================================================================== */
@media (max-width: 620px) {
.footer-inner { grid-template-columns: 1fr; gap: 20px; }
/* --- Kopfleiste: nur Logo und Abmelden --- */
.topbar-inner { gap: 10px; padding: 8px 14px; }
.logo img { height: 27px; }
.user { margin-left: auto; font-size: 13px; }
.user .user-name { max-width: 30vw; }
/* --- Navigation nach unten --- */
.nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
margin: 0; gap: 0;
background: var(--surface);
border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -2px 14px rgba(16, 23, 39, .07);
}
.nav-btn {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px;
min-height: 56px; padding: 7px 2px 6px;
border-radius: 0;
font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.nav-icon { display: block; width: 22px; height: 22px; }
.nav-btn.active { background: transparent; color: var(--accent); }
.nav-btn:hover { background: transparent; }
/* Kurzer Strich ueber dem aktiven Eintrag statt einer Farbflaeche -
ruhiger und leichter zu erfassen als eine gefuellte Pille. */
.nav-btn.active::before {
content: ''; position: absolute; top: 0; width: 34px; height: 3px;
border-radius: 0 0 3px 3px; background: var(--accent);
}
.nav-btn { position: relative; }
/* Platz fuer die Leiste unten - und fuer die Pausenuhr darueber. */
.container { padding: 16px 14px 96px; }
body.pause-aktiv .container { padding-bottom: 240px; }
.pause-bar { bottom: calc(56px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(72px + env(safe-area-inset-bottom)); }
body.pause-aktiv .toast { bottom: calc(184px + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(26px + 56px + env(safe-area-inset-bottom)); }
/* --- Grosszuegiger antippen --- */
.btn { min-height: 44px; padding: 11px 16px; }
.btn.small { min-height: 38px; padding: 8px 12px; }
/* Die Hauptaktion einer Karte ueber die volle Breite - "Training starten"
ist das, wofuer die App geoeffnet wird, und soll nicht zwischen zwei
gleich grossen Nebenknoepfen stehen. */
.row-actions .btn.primary { flex: 1 0 100%; }
.row-actions { gap: 10px; }
.card { padding: 16px 15px; }
.section-title { margin-top: 22px; }
/* --- Trainingsansicht --- */
.workout-head { top: 52px; }
/* Titel auf eine eigene Zeile, damit die Knoepfe darunter nebeneinander
stehen statt einer oben und einer unten. */
.workout-head > div:first-child { flex: 1 0 100%; }
.workout-head .spacer { display: none; }
.workout-head .btn { flex: 1; }
.set-table td.prev { display: none; }
/* Der Haken ist der Knopf, der beim Training am haeufigsten getroffen werden
muss - und der einzige, bei dem ein Fehlgriff aergerlich ist. */
.check { width: 44px; height: 44px; border-radius: 12px; }
.set-table td.act { width: 50px; }
.set-input { padding: 12px 6px; font-size: 16px; }
.set-table col.w { width: 84px; }
.ex-card h3 { font-size: 17px; }
/* Auf 16 px stellen, damit iOS beim Antippen nicht hineinzoomt. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], textarea { font-size: 16px; }
/* --- Pausenuhr --- */
.pause-zeile { gap: 10px 12px; }
.pause-time { font-size: 23px; min-width: 60px; }
.pause-acts { width: 100%; }
.pause-acts .btn { flex: 1; min-height: 40px; }
.pause-setup-wahl { width: 100%; }
.chip { min-height: 40px; display: inline-flex; align-items: center; }
/* --- Plan-Editor: sechs Spalten passen nicht nebeneinander --- */
.ex-edit-head { display: none; }
.ex-edit-row {
grid-template-columns: 52px repeat(3, 1fr) 40px;
gap: 6px; padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.ex-edit-row input { padding-left: 6px; padding-right: 6px; }
.ex-edit-row input[data-field="name"] { grid-column: 1 / -1; }
.ex-beschreibung { grid-column: 1 / -1; }
.icon-btn { width: 40px; height: 40px; }
/* --- Praxisbereich --- */
.patient-zahlen { text-align: left; margin-top: 8px; }
.hist-head { flex-direction: column; align-items: stretch; gap: 4px; }
.hist-head .spacer { display: none; }
}
/* ---------------- Druckansicht ----------------
Am Bildschirm unsichtbar. Beim Drucken das Einzige, was erscheint - der
Browser bietet im selben Dialog "Als PDF sichern" an. Deshalb braucht es
weder eine Zusatzbibliothek noch Arbeit auf dem Server.
Ausgelegt fuer A4 HOCHFORMAT. Ein Wunsch nach Querformat wird von Safari
nicht zuverlaessig befolgt - der Ausdruck kaeme dann gequetscht heraus.
Hochformat ist ausserdem das, was Patientinnen zu Hause erwarten.
Alle Farben bewusst dunkel auf weiss: die Markenfarben wuerden auf Papier
blass wirken, und viele Praxisdrucker sind Schwarzweiss. */
#druck { display: none; }
@media print {
@page { size: A4 portrait; margin: 14mm 12mm; }
/* Alles ausser der Druckansicht ausblenden - auch die feste Pausenleiste,
die sonst quer ueber der Seite laege. */
body > *:not(#druck) { display: none !important; }
body { display: block; background: #fff; }
#druck {
display: block;
color: #000;
font-size: 9.5pt;
line-height: 1.4;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Notfallcodes auf Papier: gross genug zum sicheren Abtippen, zweispaltig,
damit sie auf einen halben Zettel passen. */
.d-notfall {
columns: 2; column-gap: 12mm;
font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 13pt; letter-spacing: .04em; line-height: 2;
margin-top: 5mm; padding-left: 8mm;
}
.d-kopf {
display: flex; align-items: center; gap: 10mm;
padding-bottom: 4mm; margin-bottom: 5mm;
border-bottom: 0.5mm solid #111;
}
.d-logo { height: 13mm; width: auto; }
.d-kopf-text h1 { font-size: 15pt; margin: 0; }
.d-kopf-text p { font-size: 9.5pt; color: #444; margin-top: 1mm; }
.d-planhinweis { font-size: 9.5pt; color: #333; margin-bottom: 4mm; }
/* Feste Spaltenbreiten: sonst verteilt der Browser den Platz nach Textlaenge
und quetscht "Pause" so eng, dass "180 s" umbricht. */
.d-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Die Breiten setzt das Programm je Plan, weil die Zahl der
Eintragespalten von der hoechsten Satzzahl abhaengt. */
.d-tabelle th, .d-tabelle td {
border: 0.25mm solid #888;
padding: 1.8mm 1.5mm;
text-align: center;
vertical-align: middle;
}
.d-tabelle thead th {
background: #ececec;
font-size: 8pt; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em;
line-height: 1.25;
}
.d-tabelle .d-name { text-align: left; }
.d-tabelle th.d-name { padding-left: 2mm; }
.d-tabelle td.d-name { padding-left: 2mm; }
.d-tabelle .d-block { font-weight: 700; }
/* Zahlen nie umbrechen lassen - "180 s" gehoert in eine Zeile. */
.d-zahl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-notiz { display: block; font-size: 8pt; color: #555; margin-top: 0.6mm; }
/* Gewicht der letzten Einheit, klein oben links im Eintragefeld. Bewusst
hellgrau und schmal: es ist ein Anhalt, kein Eintrag - darunter bleibt
genug weisser Platz zum Schreiben. */
.d-leer { position: relative; }
.d-vorher {
position: absolute; top: 0.8mm; left: 0; right: 0;
text-align: center;
font-size: 6.5pt; color: #999; line-height: 1;
font-variant-numeric: tabular-nums;
/* Nie umbrechen: "12,5x13" gehoert in eine Zeile, auch im schmalsten Feld. */
white-space: nowrap;
}
.d-leer-kopf { font-size: 8pt; color: #555; }
/* Leere Felder zum Eintragen von Hand - genug Hoehe zum Schreiben. */
.d-leer { height: 12mm; }
/* Felder ueber die Satzzahl dieser Uebung hinaus: grau, damit klar ist,
dass dort nichts einzutragen ist. */
.d-entfaellt { background: #ededed; }
/* ---- Blatt fuer acht Trainingseinheiten ----
Links die Uebung, rechts acht schmale Spalten. In jeder Spalte je Satz
eine Schreiblinie - so weiss man beim Eintragen, wie viele Saetze noch
kommen, ohne links nachzusehen. */
.a-tabelle th, .a-tabelle td { padding: 1.4mm 1mm; }
.a-tabelle .a-name { text-align: left; padding-left: 2mm; }
.a-tabelle td.a-name { vertical-align: top; padding-top: 1.8mm; }
.a-tabelle td.a-name b { font-size: 9.5pt; }
.a-block {
display: inline-block; margin-right: 1.5mm;
font-size: 8pt; font-weight: 700; color: #555;
}
.a-vorgabe { display: block; font-size: 8pt; color: #555; margin-top: 0.6mm; }
/* Das Datumsfeld bleibt leer und wird von Hand ausgefuellt. */
.a-tabelle tr.a-datum th { background: #fff; height: 10mm; font-weight: 400; }
.a-feld { vertical-align: top; padding-top: 2mm; }
/* Eine Linie je Satz. Der Abstand ist so gewaehlt, dass "12,5 x 8" mit der
Hand darueber passt, ohne dass das Blatt zu lang wird. */
.a-linie {
display: block; height: 8mm; margin-bottom: 1.5mm;
border-bottom: 0.2mm solid #bbb;
}
.a-linie:last-child { margin-bottom: 0; }
/* Zeilen nicht ueber den Seitenumbruch zerreissen. */
.d-tabelle tr { page-break-inside: avoid; }
.d-tabelle thead { display: table-header-group; }
.d-fuss { margin-top: 5mm; font-size: 8.5pt; color: #333; line-height: 1.5; }
.d-adresse {
margin-top: 3mm; padding-top: 2mm; border-top: 0.25mm solid #bbb;
font-size: 8pt; color: #555;
}
}