@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
:root{
    --cream:#F8F5F0;--dark:#1C1A17;--olive:#4A5240;--olive-light:#8A9478;
    --accent:#C8A96E;--accent-light:#F0E4C8;--white:#FFFFFF;
    --border:#E2DDD5;--text-muted:#8A8478;--red:#C0392B;
}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--dark);}
a{text-decoration:none;color:inherit;}

/* LOGIN */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;}
.login-wrap{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;}
.logo-mark{width:56px;height:56px;background:var(--olive);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.logo-mark svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.5;}
.praxis-name{font-family:'DM Serif Display',serif;font-size:22px;text-align:center;}
.praxis-sub{font-size:12px;color:var(--olive-light);letter-spacing:0.15em;text-transform:uppercase;text-align:center;margin-top:4px;margin-bottom:2rem;}
.login-card{background:var(--white);border:0.5px solid var(--border);border-radius:16px;padding:2rem;width:100%;}
.login-card h2{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:4px;}
.login-card p{font-size:13px;color:var(--text-muted);margin-bottom:1.5rem;line-height:1.6;}
.field{margin-bottom:1rem;}
.field label{display:block;font-size:12px;font-weight:500;color:var(--olive);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:6px;}
.field input{width:100%;padding:10px 12px;border:0.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;background:var(--cream);color:var(--dark);outline:none;transition:border 0.2s;}
.field input:focus{border-color:var(--olive);}
.btn-login{width:100%;padding:12px;background:var(--olive);color:var(--white);border:none;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;letter-spacing:0.04em;margin-top:0.5rem;transition:background 0.2s;}
.btn-login:hover{background:var(--dark);}
.alert-error{background:#fdf0ef;border:0.5px solid var(--red);color:var(--red);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:1rem;}
.login-hint{font-size:12px;color:var(--text-muted);text-align:center;margin-top:1.5rem;}

/* TOPBAR */
.topbar{background:var(--white);border-bottom:0.5px solid var(--border);padding:0.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;}
.topbar-logo{display:flex;align-items:center;gap:10px;}
.topbar-logo .dot{width:32px;height:32px;background:var(--olive);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.topbar-logo .dot svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.5;}
.topbar-logo span{font-family:'DM Serif Display',serif;font-size:16px;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.patient-badge{font-size:12px;color:var(--text-muted);background:var(--cream);border:0.5px solid var(--border);border-radius:20px;padding:4px 12px;}
.btn-out{font-size:12px;color:var(--olive);background:none;border:0.5px solid var(--border);border-radius:6px;padding:5px 12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
.btn-out:hover{background:var(--cream);}

/* DASHBOARD */
.dash-body{background:var(--cream);min-height:100vh;}
.dash-body-inner{padding:1.5rem;}
.greeting{margin-bottom:1.5rem;}
.greeting h1{font-family:'DM Serif Display',serif;font-size:24px;}
.greeting p{font-size:13px;color:var(--text-muted);margin-top:4px;}
.progress-bar-wrap{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;}
.prog-label{font-size:12px;color:var(--text-muted);white-space:nowrap;}
.prog-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.prog-fill{height:100%;background:var(--olive);border-radius:3px;transition:width 0.5s ease;}
.prog-num{font-size:13px;font-weight:500;color:var(--olive);white-space:nowrap;}
.section-label{font-size:11px;font-weight:500;color:var(--olive-light);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.75rem;}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.vcard{background:var(--white);border:0.5px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;display:block;}
.vcard:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.vthumb{height:100px;background:var(--olive);position:relative;display:flex;align-items:center;justify-content:center;}
.vthumb.done{background:var(--olive-light);}
.vthumb svg{width:32px;height:32px;fill:none;stroke:rgba(255,255,255,0.8);stroke-width:1.5;}
.vdone-badge{position:absolute;top:8px;right:8px;background:var(--accent);color:var(--dark);font-size:10px;font-weight:500;padding:2px 8px;border-radius:10px;}
.vnum{position:absolute;bottom:8px;left:10px;font-size:11px;color:rgba(255,255,255,0.7);}
.vinfo{padding:10px 12px;}
.vinfo h3{font-size:13px;font-weight:500;line-height:1.3;margin-bottom:4px;}
.vinfo p{font-size:11px;color:var(--text-muted);}
.keine-videos{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:2rem;text-align:center;font-size:14px;color:var(--text-muted);}

/* VIDEO PLAYER */
.player-body{background:var(--dark);min-height:100vh;}
.player-top{padding:1rem 1.5rem;display:flex;align-items:center;gap:12px;border-bottom:0.5px solid rgba(255,255,255,0.08);}
.btn-back{background:none;border:0.5px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:6px;padding:6px 14px;font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;}
.btn-back:hover{background:rgba(255,255,255,0.08);}
.player-top-title{font-family:'DM Serif Display',serif;font-size:16px;color:var(--white);}
.video-stage{background:#000;position:relative;padding-bottom:56.25%;height:0;}
.video-stage iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.player-meta{padding:1.25rem 1.5rem;}
.player-meta h2{font-family:'DM Serif Display',serif;font-size:20px;color:var(--white);margin-bottom:8px;}
.meta-tags{display:flex;gap:8px;margin-bottom:1rem;flex-wrap:wrap;}
.tag{font-size:11px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);}
.desc-box{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);border-radius:10px;padding:1rem;margin-bottom:1rem;}
.desc-box h4{font-size:11px;font-weight:500;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;}
.desc-box p{font-size:13px;color:rgba(255,255,255,0.75);line-height:1.7;}
.therapist-note{background:rgba(200,169,110,0.1);border:0.5px solid rgba(200,169,110,0.3);border-radius:10px;padding:1rem;margin-bottom:1rem;}
.therapist-note h4{font-size:11px;color:var(--accent);letter-spacing:0.1em;text-transform:uppercase;margin-bo

/* MOBILE OPTIMIERUNG PATIENTEN */
@media (max-width: 768px) {

    /* Login */
    .login-body{padding:1.5rem 1rem;}
    .login-card{padding:1.5rem;}

    /* Topbar */
    .topbar{padding:0.75rem 1rem;}
    .topbar-logo span{font-size:14px;}
    .patient-badge{display:none;}

    /* Dashboard */
    .dash-body-inner{padding:1rem;}
    .greeting h1{font-size:20px;}
    .progress-bar-wrap{flex-wrap:wrap;gap:0.5rem;}
    .prog-label{width:100%;}

    /* Video Grid – 2 Spalten auf Tablet, 1 auf klein */
    .video-grid{grid-template-columns:repeat(2,1fr);gap:10px;}

    /* Video Player */
    .player-top{padding:0.75rem 1rem;}
    .player-meta{padding:1rem;}
    .player-meta h2{font-size:18px;}
    .meta-tags{flex-wrap:wrap;}
}

@media (max-width: 480px) {
    .video-grid{grid-template-columns:1fr 1fr;}
    .vthumb{height:85px;}
}
/* NACHRICHTEN */
.nachrichten-box{background:var(--accent-light);border:0.5px solid var(--accent);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;}
.nachrichten-header{font-size:13px;font-weight:500;color:var(--dark);margin-bottom:0.75rem;}
.nachricht-item{background:var(--white);border-radius:8px;padding:0.75rem 1rem;margin-bottom:0.5rem;}
.nachricht-item strong{font-size:13px;display:block;margin-bottom:2px;}
.nachricht-item span{font-size:11px;color:var(--text-muted);}
.nachricht-item p{font-size:13px;color:var(--dark);margin-top:6px;line-height:1.6;}

/* PLAN BUTTON */
.btn-plan{background:var(--olive);color:var(--white);border:none;border-radius:8px;padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:12px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.btn-plan:hover{background:var(--dark);}

/* TERMINE PATIENT */
.termine-box{background:var(--white);border:0.5px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1.5rem;}
.termine-header{font-size:13px;font-weight:500;color:var(--dark);margin-bottom:0.75rem;}
.termin-patient-item{display:flex;align-items:center;gap:1rem;padding:0.6rem 0;border-bottom:0.5px solid var(--border);}
.termin-patient-item:last-child{border-bottom:none;}
.termin-patient-datum{min-width:100px;}
.termin-patient-datum strong{font-size:13px;display:block;}
.termin-patient-datum span{font-size:12px;color:var(--olive);}
.termin-patient-info{font-size:13px;color:var(--dark);}