/* =========================================================
   IAN-Therapieportal v8 – Styles mit DE/EN/AR + RTL Support
   FIXED MOBILE VERSION
   ========================================================= */

:root{
  --primary:#1a3c5e;--secondary:#2a9d8f;--primary-dark:#21867a;--accent:#e76f51;
  --bg:#f8f9fa;--card-bg:#ffffff;--text:#333333;--text-light:#666666;
  --border:#d1d5db;--danger:#e63946;--success:#2a9d8f;--warn:#f4a261;
  --transition:all .3s ease;--surface:#ffffff;--surface-2:#f1f5f9;
}
body.dark-mode{
  --primary:#224b75;--secondary:#31b0a0;--primary-dark:#2a9d8f;--accent:#f48263;
  --bg:#121824;--card-bg:#1e293b;--text:#f1f5f9;--text-light:#94a3b8;
  --border:#334155;--danger:#ff4d6d;--surface:#1e293b;--surface-2:#0f172a;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
body{background:var(--bg);color:var(--text);transition:var(--transition);line-height:1.6;display:flex;flex-direction:column;min-height:100vh;}
html[dir="rtl"] body{font-family:'Segoe UI',Tahoma,'Arial',sans-serif;}

/* HEADER */
header{background:var(--card-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:.75rem 4%;gap:1rem;flex-wrap:wrap;}
.logo{font-size:1.35rem;font-weight:800;color:var(--primary);cursor:pointer;letter-spacing:.5px;}
.logo span{color:var(--secondary);}
nav{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap;}
nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:.82rem;padding:.4rem .55rem;border-radius:5px;transition:var(--transition);cursor:pointer;}
nav a:hover{color:var(--secondary);background:rgba(42,157,143,.08);}
.nav-controls{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}

/* BUTTONS */
button.btn{background:var(--secondary);color:#fff;border:none;padding:.55rem 1rem;border-radius:6px;cursor:pointer;font-weight:600;transition:var(--transition);font-size:.88rem;}
button.btn:hover{opacity:.9;transform:translateY(-1px);}
button.btn:active{transform:translateY(0);}
button.btn-danger{background:var(--danger);}
button.btn-warning{background:var(--warn);color:#fff;}
button.btn-primary{background:var(--primary);}
button.btn-outline{background:transparent;border:2px solid var(--secondary);color:var(--secondary);}
button.btn-small{padding:.28rem .55rem;font-size:.78rem;}
button.btn-ghost{background:transparent;color:var(--text-light);border:1px solid var(--border);}
.btn-full{width:100%;}

select,input,textarea{padding:.6rem;border-radius:5px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);width:100%;margin:.35rem 0;font-size:.9rem;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--secondary);outline-offset:-1px;}

/* HERO */
.hero{text-align:center;padding:3.5rem 2rem;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;}
.hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin-bottom:.6rem;}
.hero p{max-width:720px;margin:.4rem auto 1.2rem;opacity:.95;}
.hero-hint{color:rgba(255,255,255,.9);margin-top:1rem;}
.cta-buttons{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem;}
.cta-buttons .btn{background:#fff;color:var(--primary);font-weight:700;}
.cta-buttons .btn-outline{background:transparent;color:#fff;border:2px solid #fff;}

.container{max-width:1200px;margin:2rem auto;padding:0 1rem;flex:1;width:100%;}

.section{margin-bottom:2rem;background:var(--card-bg);padding:2rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.05);border:1px solid var(--border);display:none;}
.section.active-section{display:block;animation:fadeUp .35s ease;}
.section h2{margin-bottom:1.25rem;color:var(--primary);border-bottom:2px solid var(--secondary);padding-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;}
.section h2.no-border{border:none;padding:0;margin:0;}
.section-subtitle{color:var(--text-light);font-size:.92rem;margin:-.75rem 0 1.25rem;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}

.card-item{border:1px solid var(--border);padding:1.5rem;border-radius:8px;background:var(--bg);margin-bottom:1rem;}
.card-item h3,.card-item h4{color:var(--primary);margin-bottom:.5rem;}
.card-top-secondary{border-top:4px solid var(--secondary);}
.card-top-primary{border-top:4px solid var(--primary);}
.card-top-accent{border-top:4px solid var(--accent);}
.card-desc{margin:.75rem 0;font-size:.9rem;}

table{width:100%;border-collapse:collapse;margin-top:1rem;}
th,td{border:1px solid var(--border);padding:.55rem;text-align:left;font-size:.88rem;vertical-align:top;}
th{background:var(--primary);color:#fff;}
tbody tr:hover{background:rgba(42,157,143,.06);}

.chat-box{border:1px solid var(--border);background:var(--card-bg);border-radius:8px;padding:1rem;height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.chat-msg{padding:.4rem .8rem;border-radius:6px;max-width:80%;font-size:.9rem;word-break:break-word;}
.chat-msg.sent{background:var(--secondary);color:#fff;align-self:flex-end;}
.chat-msg.received{background:var(--border);color:var(--text);align-self:flex-start;}
.chat-msg small{opacity:.75;font-size:.7rem;}
html[dir="rtl"] .chat-msg.sent{align-self:flex-start;}
html[dir="rtl"] .chat-msg.received{align-self:flex-end;}

.expandable-box{border:1px solid var(--border);border-radius:8px;background:var(--bg);margin-bottom:.8rem;overflow:hidden;}
.expandable-header{padding:.9rem 1.1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;background:var(--card-bg);transition:var(--transition);}
.expandable-header:hover{background:rgba(42,157,143,.06);}
.toggle-icon{font-size:1.1rem;font-weight:700;color:var(--secondary);}
.expandable-content{display:none;padding:1.1rem;border-top:1px solid var(--border);background:var(--bg);}

.tabs{display:flex;gap:.35rem;border-bottom:2px solid var(--border);margin-bottom:1.25rem;flex-wrap:wrap;}
.tab{padding:.5rem .95rem;cursor:pointer;border-radius:6px 6px 0 0;font-weight:600;font-size:.85rem;color:var(--text-light);transition:var(--transition);}
.tab:hover{background:rgba(42,157,143,.08);}
.tab.active{background:var(--secondary);color:#fff;}
.tab-pane{display:none;}
.tab-pane.active{display:block;animation:fadeUp .3s ease;}

.toast-wrap{position:fixed;top:90px;right:20px;z-index:10002;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;}
html[dir="rtl"] .toast-wrap{right:auto;left:20px;}
.toast{background:var(--card-bg);border-left:4px solid var(--secondary);padding:.8rem 1.2rem;border-radius:6px;min-width:240px;max-width:340px;box-shadow:0 10px 25px rgba(0,0,0,.18);font-size:.9rem;animation:slideIn .3s ease;border:1px solid var(--border);border-left-width:4px;color:var(--text);}
.toast.error{border-left-color:var(--danger);}
.toast.warn{border-left-color:var(--warn);}
@keyframes slideIn{from{opacity:0;transform:translateX(50px);}to{opacity:1;transform:none;}}
.toast.out{animation:slideOut .3s ease forwards;}
@keyframes slideOut{to{opacity:0;transform:translateX(50px);}}

.pill{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.74rem;font-weight:700;}
.pill.ok{background:rgba(42,157,143,.15);color:var(--secondary);}
.pill.wait{background:rgba(244,162,97,.18);color:#b06a2c;}
.pill.no{background:rgba(230,57,70,.15);color:var(--danger);}
.pill.info{background:rgba(26,60,94,.12);color:var(--primary);}

.mood-chart{display:flex;align-items:flex-end;gap:.35rem;height:130px;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);}
.mood-bar{flex:1;background:linear-gradient(180deg,var(--secondary),var(--primary));border-radius:4px 4px 0 0;min-height:5px;position:relative;transition:var(--transition);}
.mood-bar:hover{filter:brightness(1.2);}
.mood-bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--text-light);white-space:nowrap;}
.mood-legend{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-light);margin-top:1.4rem;}
.mood-value{text-align:center;font-weight:800;color:var(--secondary);font-size:1.4rem;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;}
.stat{background:var(--card-bg);border:1px solid var(--border);border-left:4px solid var(--secondary);border-radius:8px;padding:1rem;}
html[dir="rtl"] .stat{border-left:1px solid var(--border);border-right:4px solid var(--secondary);}
.stat b{display:block;font-size:1.6rem;color:var(--primary);line-height:1.2;}
.stat small{color:var(--text-light);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;}
.stat-warn{border-left-color:var(--warn);}
.stat-success{border-left-color:var(--success);}
.stat-accent{border-left-color:var(--accent);}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.25rem;text-align:center;}
.stat-item .stat-number{font-size:2rem;font-weight:800;color:var(--secondary);display:block;}
.stat-item p{font-size:.85rem;color:var(--text-light);}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;}
.feature-card{border:1px solid var(--border);border-radius:10px;padding:1.25rem;background:var(--bg);text-align:center;transition:var(--transition);}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.08);}
.feature-icon{font-size:2rem;margin-bottom:.5rem;}
.feature-card h3{color:var(--primary);font-size:1rem;margin-bottom:.4rem;}
.feature-card p{font-size:.85rem;color:var(--text-light);}
.feature-price{font-size:2rem;font-weight:800;color:var(--secondary);margin:.6rem 0;}
.feature-price small{font-size:.85rem;opacity:.7;}
.feature-list{list-style:none;text-align:left;margin:.5rem 0;font-size:.86rem;}
html[dir="rtl"] .feature-list{text-align:right;}
.feature-popular{border-color:var(--secondary);box-shadow:0 12px 30px rgba(42,157,143,.2);position:relative;}
.feature-badge{position:absolute;top:-10px;right:14px;background:var(--accent);color:#fff;padding:.2rem .7rem;border-radius:999px;font-size:.7rem;font-weight:800;}
html[dir="rtl"] .feature-badge{right:auto;left:14px;}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;}
.blog-img{width:100%;height:180px;object-fit:cover;display:block;}
.card-content{padding:1.1rem;}
.blog-tag{display:inline-block;background:rgba(42,157,143,.15);color:var(--secondary);padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;margin-bottom:.5rem;}
.blog-title{font-size:1.05rem;color:var(--primary);margin-bottom:.4rem;}
.blog-meta{font-size:.75rem;color:var(--text-light);margin-bottom:.5rem;}
.blog-excerpt{font-size:.87rem;margin-bottom:.75rem;}
.read-more-btn{background:none;border:none;color:var(--secondary);font-weight:700;cursor:pointer;font-size:.85rem;padding:0;}

.tips-section{display:none;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--border);}
.tips-section.open{display:block;animation:fadeUp .3s ease;}
.tips-list{list-style:none;font-size:.85rem;margin-top:.5rem;}
.tips-list li{display:flex;gap:.5rem;padding:.35rem 0;border-bottom:1px dashed var(--border);}
.tips-list .num{font-weight:800;color:var(--secondary);}

.filter-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0;}
.filter-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:.35rem .85rem;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer;}
.filter-btn.active{background:var(--secondary);color:#fff;border-color:var(--secondary);}

.reviews-hero{text-align:center;margin-bottom:1.5rem;}
.reviews-num{font-size:3rem;font-weight:800;color:var(--primary);line-height:1;}
.reviews-stars{font-size:1.6rem;color:#f5b301;letter-spacing:.1em;}
.reviews-based{color:var(--text-light);font-size:.9rem;}
.reviews-list-box{max-height:340px;overflow-y:auto;}

.package-options{display:flex;flex-direction:column;gap:.6rem;margin:.5rem 0 1rem;}
.package-option{border:1px solid var(--border);padding:.75rem 1rem;border-radius:8px;cursor:pointer;position:relative;background:var(--bg);transition:var(--transition);}
.package-option.selected{border-color:var(--secondary);box-shadow:0 0 0 2px rgba(42,157,143,.25);}
.po-header{display:flex;justify-content:space-between;align-items:baseline;}
.po-name{font-weight:700;color:var(--primary);}
.po-price{font-weight:800;color:var(--secondary);}
.po-price small{font-size:.75rem;color:var(--text-light);font-weight:500;}
.po-desc{font-size:.8rem;color:var(--text-light);margin-top:.25rem;}
.po-badge{position:absolute;top:-8px;right:12px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:800;padding:.15rem .55rem;border-radius:999px;}
html[dir="rtl"] .po-badge{right:auto;left:12px;}

.subscription-card{background:linear-gradient(135deg,rgba(42,157,143,.08),rgba(26,60,94,.08));border:1px solid var(--border);border-radius:12px;padding:2rem;}
.sub-badge{display:inline-block;padding:.25rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700;}
.sub-badge.active{background:rgba(42,157,143,.18);color:var(--secondary);}
.sub-badge.inactive{background:rgba(230,57,70,.15);color:var(--danger);}
.sub-price-box{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:1rem;margin-bottom:1rem;}
.sub-price-row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.92rem;}
.sub-price-row.total{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.75rem;font-size:1.05rem;}
.sub-note{font-size:.78rem;color:var(--text-light);margin-top:.5rem;}
.sub-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem;}
.sub-full{width:100%;}
.subtitle-light{color:var(--text-light);font-size:.9rem;}

.hidden{display:none!important;}

.booking-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;}
.therapist-list{display:flex;flex-direction:column;gap:.5rem;max-height:560px;overflow-y:auto;padding-right:.25rem;}
.therapist-chip{border:1px solid var(--border);border-radius:8px;padding:.65rem .9rem;background:var(--bg);cursor:pointer;transition:var(--transition);font-size:.88rem;display:flex;gap:.75rem;align-items:center;}
.therapist-chip:hover{border-color:var(--secondary);}
.therapist-chip.selected{border-color:var(--secondary);background:rgba(42,157,143,.08);}
.therapist-chip img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--border);}
.therapist-chip .chip-info{flex:1;min-width:0;}
.therapist-chip .chip-info b{display:block;color:var(--primary);}
.therapist-chip .chip-info small{color:var(--text-light);font-size:.78rem;display:block;overflow:hidden;text-overflow:ellipsis;}
.therapist-chip .chip-status{font-size:.7rem;padding:.1rem .5rem;}

.team-card{position:relative;overflow:hidden;padding:0;}
.team-card .team-img{width:100%;height:220px;object-fit:cover;display:block;background:var(--border);}
.team-card .team-body{padding:1.1rem 1.25rem 1.4rem;}
.team-card .team-body h3{margin-top:0;font-size:1.05rem;}
.team-card .team-body p{font-size:.85rem;margin:.2rem 0;}
.team-card .status-row{position:absolute;top:.75rem;right:.75rem;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:.2rem .6rem;border-radius:999px;}
html[dir="rtl"] .team-card .status-row{right:auto;left:.75rem;}
.team-search{max-width:260px;margin:0;}

.video-container{display:none;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;}
.video-container.active{display:grid;}
video{width:100%;background:#000;border-radius:8px;aspect-ratio:16/9;}

.portal-view{display:none;}
.portal-topbar{justify-content:space-between;margin-bottom:1rem;}
.text-secondary{color:var(--secondary);}
.text-primary{color:var(--primary);}
.text-danger{color:var(--danger);}
.text-success{color:var(--success);}
.crisis-box{border-left:4px solid var(--danger);background:rgba(230,57,70,.04);margin-bottom:1rem;}
html[dir="rtl"] .crisis-box{border-left:none;border-right:4px solid var(--danger);}
.crisis-line{font-size:.9rem;margin-top:.3rem;}
.card-video-info{background:rgba(42,157,143,.05);border-left:4px solid var(--secondary);}
html[dir="rtl"] .card-video-info{border-left:none;border-right:4px solid var(--secondary);}
.card-video-info-primary{background:rgba(26,60,94,.05);border-left:4px solid var(--primary);}
html[dir="rtl"] .card-video-info-primary{border-left:none;border-right:4px solid var(--primary);}
.card-status-box{background:rgba(42,157,143,.06);}

.section-admin{border:2px dashed var(--accent);}
.admin-status-locked{font-size:.9rem;color:var(--danger);}
.admin-search{max-width:220px;margin:0;}
.admin-search-sm{max-width:180px;margin:0;}
.admin-search-xs{max-width:120px;margin:0;}
.no-margin{margin:0;}
.no-padding{padding:0;}

footer{background:var(--card-bg);border-top:1px solid var(--border);padding:2rem 4%;font-size:.9rem;margin-top:auto;}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;}
.footer-links{display:flex;flex-direction:column;gap:.4rem;}
.footer-links a{color:var(--secondary);text-decoration:none;cursor:pointer;font-size:.85rem;}
.footer-links a:hover{text-decoration:underline;}
footer h3{color:var(--primary);font-size:1rem;margin-bottom:.5rem;}
.crisis-footer{margin-top:.75rem;padding:.5rem .75rem;background:rgba(230,57,70,.08);border-left:3px solid var(--danger);border-radius:4px;font-size:.82rem;}
html[dir="rtl"] .crisis-footer{border-left:none;border-right:3px solid var(--danger);}

#universalModal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;align-items:center;justify-content:center;padding:1rem;display:none;}
#universalModal.open{display:flex;}
.modal-inner{background:var(--card-bg);border-radius:12px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.4);}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);}
.modal-header h3{margin:0;color:var(--primary);}
.modal-body{padding:1.5rem;}
.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.5rem;border-top:1px solid var(--border);}

.hint{font-size:.82rem;color:var(--text-light);}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.spacer{flex:1;}
.mt{margin-top:1rem;}
.mt-sm{margin-top:.5rem;}
.mt-xs{margin-top:.3rem;}
.mt-lg{margin-top:1.25rem;}
.mb{margin-bottom:1rem;}
.promo-input{flex:2;min-width:180px;}
.promo-feedback{margin-top:.5rem;font-weight:700;}

.config-banner{background:rgba(244,162,97,.15);border-left:4px solid var(--warn);padding:.6rem 1rem;border-radius:6px;font-size:.82rem;margin-bottom:1rem;color:var(--text);}
html[dir="rtl"] .config-banner{border-left:none;border-right:4px solid var(--warn);}
.config-banner b{color:var(--warn);}

.stripe-cta{margin-top:.75rem;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;}

/* =========================================================
   🌍 SPRACH-WIDGET
   ========================================================= */
.lang-widget{
  position:fixed;top:20px;right:20px;z-index:10001;
  display:flex;align-items:center;gap:8px;
  background:rgba(15,20,32,.92);
  padding:6px 10px;border-radius:12px;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
}
html[dir="rtl"] .lang-widget{right:auto;left:20px;}

.lang-icon{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;font-size:1rem;cursor:pointer;
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
.lang-icon:hover{background:rgba(42,157,143,.35);}

.lang-selector{
  position:relative;
  display:flex;align-items:center;gap:6px;
  color:#fff;font-weight:800;font-size:.85rem;
  cursor:pointer;padding:6px 12px;border-radius:8px;
  background:rgba(42,157,143,.35);
  user-select:none;letter-spacing:.5px;
  transition:background .25s;
}
.lang-selector:hover{background:rgba(42,157,143,.55);}
.caret{font-size:.65rem;opacity:.85;}

.lang-dropdown{
  position:absolute;top:120%;right:0;
  background:#1e293b;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:6px;
  min-width:170px;
  box-shadow:0 15px 40px rgba(0,0,0,.55);
  animation:fadeUp .2s ease;
}
html[dir="rtl"] .lang-dropdown{right:auto;left:0;}
.lang-dropdown.hidden{display:none;}

.lang-option{
  padding:10px 14px;
  color:#f1f5f9;
  display:flex;align-items:center;gap:12px;
  border-radius:6px;
  cursor:pointer;font-size:.9rem;font-weight:600;
  transition:background .2s;
}
.lang-option:hover{background:rgba(42,157,143,.25);}
.lang-flag{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:22px;
  background:#2a9d8f;color:#fff;
  border-radius:4px;font-size:.7rem;font-weight:800;
  letter-spacing:.5px;
}
.lang-option[data-lang="de"] .lang-flag{background:#1a3c5e;}
.lang-option[data-lang="en"] .lang-flag{background:#0d3b66;}
.lang-option[data-lang="ar"] .lang-flag{background:#b8860b;}

/* =========================================================
   RTL Support (Arabisch)
   ========================================================= */
html[dir="rtl"] body{direction:rtl;text-align:right;}
html[dir="rtl"] .row{flex-direction:row-reverse;}
html[dir="rtl"] .section h2{flex-direction:row-reverse;}
html[dir="rtl"] .card-item{text-align:right;}
html[dir="rtl"] table th,html[dir="rtl"] table td{text-align:right;}
html[dir="rtl"] .sub-price-row{flex-direction:row-reverse;}
html[dir="rtl"] .po-header{flex-direction:row-reverse;}
html[dir="rtl"] .modal-footer{flex-direction:row-reverse;}
html[dir="rtl"] .nav-controls{flex-direction:row-reverse;}
html[dir="rtl"] .cta-buttons{flex-direction:row-reverse;}
html[dir="rtl"] .mood-legend{flex-direction:row-reverse;}
html[dir="rtl"] .tabs{flex-direction:row-reverse;}
html[dir="rtl"] .therapist-chip{flex-direction:row-reverse;text-align:right;}
html[dir="rtl"] .crisis-box,html[dir="rtl"] .card-video-info,html[dir="rtl"] .card-video-info-primary,html[dir="rtl"] .config-banner{border-left:none;border-right-width:4px;border-right-style:solid;}
html[dir="rtl"] .crisis-box{border-right-color:var(--danger);}
html[dir="rtl"] .card-video-info{border-right-color:var(--secondary);}
html[dir="rtl"] .card-video-info-primary{border-right-color:var(--primary);}
html[dir="rtl"] .config-banner{border-right-color:var(--warn);}
html[dir="rtl"] .feature-list{text-align:right;}
html[dir="rtl"] .toast{border-left:none;border-right:4px solid var(--secondary);}
html[dir="rtl"] .toast.error{border-right-color:var(--danger);}
html[dir="rtl"] .toast.warn{border-right-color:var(--warn);}

/* =========================================================
   📱 RESPONSIVE – Mobile-First-Optimierung
   ========================================================= */

/* ── Tablet / kleines Laptop (≤ 1024px) ───────────────── */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  nav a { font-size: .78rem; padding: .35rem .45rem; }
  header { padding: .65rem 3%; }
}

/* ── Tablet / großes Handy quer (≤ 900px) ─────────────── */
@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .booking-grid,
  .video-container.active { grid-template-columns: 1fr; }

  header {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: .6rem 4%;
  }

  .logo { text-align: center; font-size: 1.2rem; }

  nav {
    justify-content: center;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
  }

  nav a { white-space: nowrap; flex-shrink: 0; }

  .nav-controls { justify-content: center; }

  .hero { padding: 2.5rem 1.25rem; }
  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: .95rem; }

  .section { padding: 1.25rem; margin-bottom: 1.25rem; border-radius: 8px; }
  .section h2 { font-size: 1.15rem; }

  .container { padding: 0 .75rem; margin: 1rem auto; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .therapist-list { max-height: 340px; }
  .reviews-list-box { max-height: 280px; }

  .toast-wrap { right: 10px; left: 10px; top: 60px; }
  .toast { max-width: none; min-width: 0; font-size: .85rem; }

  .lang-widget { top: 8px; right: 8px; padding: 5px 8px; gap: 5px; }
  html[dir="rtl"] .lang-widget { right: auto; left: 8px; }
  .lang-selector { padding: 5px 9px; font-size: .78rem; }
  .lang-icon { width: 30px; height: 30px; font-size: .9rem; }

  table { font-size: .78rem; }
  th, td { padding: .4rem .35rem; }
}

/* ── Handy hochkant (≤ 640px) ──────────────────────────── */
@media (max-width: 640px) {
  /* Grundschrift & Abstände */
  body { font-size: 15px; line-height: 1.55; }

  /* Header: Platz für Sprach-Widget schaffen (Widget geht unten hin, s. unten) */
  header { padding: .55rem 3%; gap: .4rem; }
  .logo { font-size: 1.1rem; }

  nav {
    gap: .15rem;
    justify-content: flex-start;
    padding: .15rem 0 .35rem;
  }
  nav a {
    font-size: .74rem;
    padding: .35rem .55rem;
    border-radius: 4px;
  }

  .nav-controls {
    gap: .3rem;
    width: 100%;
    justify-content: space-between;
  }
  .nav-controls .btn { font-size: .75rem; padding: .4rem .6rem; flex: 1; }

  /* Hero – Buttons sauber gestapelt */
  .hero { padding: 2rem 1rem 2.5rem; }
  .hero h1 { font-size: 1.25rem; line-height: 1.3; }
  .hero p { font-size: .85rem; margin: .5rem auto 1rem; line-height: 1.5; }
  .cta-buttons {
    flex-direction: column;
    gap: .6rem;
    margin-top: 1.25rem;
  }
  .cta-buttons .btn {
    width: 100%;
    flex: 1 1 100%;
    font-size: .85rem;
    padding: .7rem 1rem;
    justify-content: center;
    text-align: center;
  }

  /* Sections */
  .section { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
  .section h2 { font-size: 1.05rem; flex-direction: column; align-items: flex-start; gap: .4rem; }
  .section-subtitle { font-size: .82rem; }

  .container { padding: 0 .6rem; margin: .75rem auto; }

  /* Cards */
  .card-item { padding: 1rem; border-radius: 6px; }
  .card-item h3 { font-size: 1rem; }
  .card-desc { font-size: .85rem; }

  /* Home-Bereich: 3 Karten ohne doppelte Abstände */
  #home-section .grid-3 { gap: 1rem; margin-bottom: 1rem !important; }
  #home-section .grid-3 .card-item {
    margin-bottom: 0;
    padding: 1.1rem;
    border-radius: 10px;
  }
  #home-section .grid-3 .card-item h3 { font-size: 1rem; }
  #home-section .grid-3 .card-desc { font-size: .85rem; margin: .5rem 0 .85rem; }

  /* Home-Transparent-Bereich */
  .home-transparent {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Statistik */
  .stat-grid, .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat { padding: .75rem; }
  .stat b { font-size: 1.25rem; }
  .stat small { font-size: .68rem; }
  .stat-item .stat-number { font-size: 1.5rem; }
  .stat-item p { font-size: .75rem; line-height: 1.3; }

  /* Buttons */
  button.btn { padding: .6rem .9rem; font-size: .85rem; }
  button.btn-small { padding: .35rem .55rem; font-size: .72rem; }

  /* Formulare – iOS zoomt bei < 16px nicht */
  select, input, textarea {
    font-size: 16px;
    padding: .65rem .55rem;
  }

  /* Therapeuten-Karten */
  .therapist-chip { padding: .6rem .7rem; font-size: .82rem; }
  .therapist-chip img { width: 42px; height: 42px; }
  .team-card .team-img { height: 180px; }

  /* Tabs – horizontal scrollbar */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .25rem;
    padding-bottom: .15rem;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    font-size: .76rem;
    padding: .5rem .75rem;
    white-space: nowrap;
  }

  /* Tabellen – horizontal scrollbar auf Handy */
  .tab-pane table,
  .payment-history-scroll table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  th, td { font-size: .72rem; padding: .4rem .5rem; }

  /* Stimmungs-Chart */
  .mood-chart { height: 100px; }
  .mood-bar span { font-size: .55rem; }

  /* Universal-Modal */
  .modal-inner { max-width: 100%; max-height: 95dvh; border-radius: 10px; }
  .modal-header { padding: .9rem 1rem; }
  .modal-header h3 { font-size: 1rem; }
  .modal-body { padding: 1rem; }
  .modal-footer {
    padding: .75rem 1rem;
    flex-direction: column-reverse;
  }
  .modal-footer .btn { width: 100%; }

  /* Portal-Modal (Patienten/Therapeuten/Admin) */
  .section.portal-modal {
    top: 0; left: 0;
    transform: none;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 2.8rem .8rem 1.2rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .section.portal-modal.active-section { animation: none; }
  .portal-close {
    top: .5rem; right: .5rem;
    width: 38px; height: 38px;
    font-size: 1.05rem;
  }
  html[dir="rtl"] .portal-close { right: auto; left: .5rem; }

  /* Legal-Modal */
  .legal-modal { padding: 0; }
  .legal-modal-inner {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 2.8rem .9rem 1.2rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .legal-modal-close {
    position: fixed;
    top: .55rem; right: .55rem;
    margin: 0;
  }
  html[dir="rtl"] .legal-modal-close { right: auto; left: .55rem; }

  /* Legal-Content */
  .legal-content { font-size: .9rem; line-height: 1.65; }
  .legal-content h1 { font-size: 1.3rem; }
  .legal-content h2 { font-size: 1rem; margin-top: 1.6rem; }
  .legal-content table { font-size: .78rem; }
  .legal-content .toc { padding: .75rem 1rem; font-size: .82rem; }

  /* Footer */
  footer { padding: 1.5rem 4%; }
  .footer-content { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Chat */
  .chat-box { height: 260px; padding: .75rem; }
  .chat-msg { max-width: 88%; font-size: .85rem; }

  /* Video */
  .video-container.active { grid-template-columns: 1fr; }
  #main-video-wrapper input,
  #main-video-wrapper .btn,
  #p-video-wrapper input,
  #p-video-wrapper .btn,
  #t-video-wrapper input,
  #t-video-wrapper .btn {
    width: 100%;
    margin-bottom: .35rem;
  }
  video { aspect-ratio: 4/3; }

  /* Payment */
  .payment-history-scroll { max-height: 260px; }
  .stripe-branding-row { flex-direction: column; align-items: flex-start; gap: .35rem; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-img { height: 160px; }

  /* Toast */
  .toast { font-size: .82rem; padding: .65rem 1rem; }
  .toast-wrap { top: 4.5rem; }

  /* Language-Widget: nach unten, damit es Hero/Header nicht verdeckt */
  .lang-widget {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    padding: 5px 8px;
    gap: 5px;
  }
  html[dir="rtl"] .lang-widget { right: auto; left: 1rem; }
  .lang-selector { padding: 5px 9px; font-size: .75rem; }
  .lang-icon { width: 30px; height: 30px; font-size: .85rem; }
  .lang-dropdown {
    top: auto;
    bottom: 120%;
    right: 0;
    min-width: 150px;
  }
  html[dir="rtl"] .lang-dropdown { right: auto; left: 0; }
  .lang-option { padding: 8px 10px; font-size: .82rem; }
  .lang-flag { width: 26px; height: 20px; font-size: .62rem; }

  /* Consent-Block */
  .consent-block label { font-size: .82rem; }
  .consent-block input[type="checkbox"] { width: 20px !important; height: 20px; }
}

/* ── Kleine Handys (≤ 400px) ──────────────────────────── */
@media (max-width: 400px) {
  .hero h1 { font-size: 1.15rem; }
  .stat-grid, .stats-grid { grid-template-columns: 1fr; }
  nav a { font-size: .7rem; padding: .3rem .45rem; }
  .nav-controls .btn { font-size: .7rem; padding: .35rem .45rem; }
  .tab { font-size: .7rem; padding: .45rem .6rem; }
  .section h2 { font-size: .95rem; }
}

/* ── Querformat-Handy (Höhe klein) ───────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 1.25rem 1rem; }
  .hero h1 { font-size: 1.1rem; }
  .hero p { display: none; }
  .section.portal-modal { padding-top: 1.5rem; }
  .lang-widget { top: .5rem; bottom: auto; right: .5rem; }
  html[dir="rtl"] .lang-widget { right: auto; left: .5rem; }
}

/* ── Touch-Geräte: größere Tap-Targets ───────────────── */
@media (hover: none) and (pointer: coarse) {
  button.btn,
  button.btn-small,
  nav a,
  .tab,
  .filter-btn,
  .therapist-chip,
  .lang-option,
  .package-option {
    min-height: 40px;
    touch-action: manipulation;
  }

  input, select, textarea { min-height: 42px; }

  .feature-card:hover { transform: none; box-shadow: none; }
  .therapist-chip:hover { border-color: var(--border); }
  button.btn:hover { transform: none; opacity: 1; }
  .lang-icon:hover { background: rgba(255,255,255,.06); }
  .lang-selector:hover { background: rgba(42,157,143,.35); }
}

/* ── Safe-Area für iPhone-Notch ──────────────────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  header {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  footer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  @media (max-width: 640px){
    .lang-widget {
      bottom: max(1rem, env(safe-area-inset-bottom));
      right: max(1rem, env(safe-area-inset-right));
    }
    html[dir="rtl"] .lang-widget {
      right: auto;
      left: max(1rem, env(safe-area-inset-left));
    }
  }
}

/* =========================================================
   💳 STRIPE PAYMENT MODULE
   ========================================================= */
.payment-info-box{
  background:linear-gradient(135deg,rgba(99,91,255,.08),rgba(42,157,143,.06));
  border-left:4px solid #635bff;
  margin-bottom:1rem;
}
html[dir="rtl"] .payment-info-box{
  border-left:none;
  border-right:4px solid #635bff;
}

.payment-therapist-info{
  background:rgba(42,157,143,.06);
  border:1px dashed var(--border);
  border-radius:8px;
  padding:.75rem 1rem;
  margin:.5rem 0;
  font-size:.88rem;
  display:none;
}
.payment-therapist-info.visible{display:block;}
.payment-therapist-info .pti-name{font-weight:800;color:var(--primary);font-size:1rem;}
.payment-therapist-info .pti-spec{color:var(--text-light);font-size:.82rem;margin:.15rem 0;}
.payment-therapist-info .pti-rate{font-weight:800;color:var(--secondary);font-size:1.05rem;}
.payment-therapist-info .pti-status{
  display:inline-block;margin-left:.5rem;
  font-size:.72rem;padding:.1rem .5rem;border-radius:999px;
}
html[dir="rtl"] .payment-therapist-info .pti-status{margin-left:0;margin-right:.5rem;}

.payment-history-scroll{max-height:420px;overflow-y:auto;}
.payment-history-scroll table{margin-top:0;}

.payment-status-pill{
  display:inline-block;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.3px;
}
.payment-status-pill.paid{background:rgba(42,157,143,.18);color:var(--secondary);}
.payment-status-pill.pending{background:rgba(244,162,97,.2);color:#b06a2c;}
.payment-status-pill.failed{background:rgba(230,57,70,.18);color:var(--danger);}
.payment-status-pill.demo{background:rgba(99,91,255,.15);color:#635bff;}

.stripe-branding-box{
  background:#fafbff;
  border:1px solid rgba(99,91,255,.2);
  margin-top:1.25rem;
  padding:1rem 1.25rem;
}
body.dark-mode .stripe-branding-box{background:#1a1f3a;border-color:rgba(99,91,255,.35);}
.stripe-branding-row{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;
}
.stripe-logo{
  font-size:.95rem;color:#3c4257;font-weight:600;letter-spacing:.3px;
}
body.dark-mode .stripe-logo{color:#e2e8f0;}
.stripe-logo b{color:#635bff;font-weight:900;}

#p-payment .btn-primary{
  background:linear-gradient(135deg,#635bff,#2a9d8f);
  font-weight:800;letter-spacing:.3px;
}
#p-payment .btn-primary:hover{filter:brightness(1.08);}

/* =========================================================
   🪟 PORTAL-MODALS
   ========================================================= */
.portal-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px);
  z-index:8999;
}
.portal-backdrop.open{display:block;animation:fadeIn .25s ease;}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes portalIn{
  from{opacity:0;transform:translate(-50%,-46%) scale(.96);}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1);}
}

.section.portal-modal{
  display:none !important;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9000;
  width:min(95vw,1200px);
  max-height:92vh;
  overflow-y:auto;
  margin:0;
  padding:2.5rem 2rem 2rem;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  border:1px solid var(--border);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.section.portal-modal.active-section{
  display:block !important;
  animation:portalIn .3s ease;
}

.portal-close{
  position:absolute;
  top:.75rem;right:.75rem;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--danger);
  color:#fff;border:none;
  font-size:1.25rem;font-weight:800;line-height:1;
  cursor:pointer;z-index:10;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:var(--transition);
}
.portal-close:hover{transform:scale(1.12) rotate(90deg);filter:brightness(1.12);}
.portal-close:active{transform:scale(1) rotate(90deg);}
html[dir="rtl"] .portal-close{right:auto;left:.75rem;}

/* =========================================================
   📧 E-MAIL-BESTÄTIGUNG
   ========================================================= */
.email-confirm-fallback{
  background:rgba(244,162,97,.12);
  border-left:4px solid var(--warn);
  padding:.75rem 1rem;
  border-radius:6px;
  margin-top:.75rem;
  font-size:.85rem;
  word-break:break-word;
}
html[dir="rtl"] .email-confirm-fallback{
  border-left:none;
  border-right:4px solid var(--warn);
}
.email-confirm-fallback a{
  color:var(--secondary);
  text-decoration:underline;
}
#emailConfirmationBox{
  animation:fadeUp .35s ease;
}
#emailConfirmationBox h3{
  color:var(--primary);
  margin-bottom:.25rem;
}
footer .btn-settings{
  margin-top:.75rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
html[dir="rtl"] footer .btn-settings{
  margin-left:0;
  margin-right:0;
}

/* ── DSGVO Consent-Block ───────────────────────────── */
.consent-block label {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .4rem 0;
  cursor: pointer;
  line-height: 1.4;
}
.consent-block input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px;
  margin: .15rem 0 0 0 !important;
  accent-color: var(--secondary);
  cursor: pointer;
}
.consent-block a {
  color: var(--secondary);
  text-decoration: underline;
}
.consent-block a:hover {
  color: var(--primary);
}
html[dir="rtl"] .consent-block label {
  flex-direction: row-reverse;
}

/* =========================================================
   ⚖️ LEGAL-MODAL (Popup für Impressum / Datenschutz / AGB / Widerruf)
   ========================================================= */
.legal-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.legal-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  animation:fadeIn .2s ease;
}
.legal-modal-inner{
  position:relative;
  background:var(--card-bg);
  border-radius:14px;
  max-width:920px;
  width:100%;
  max-height:92vh;
  overflow-y:auto;
  padding:2.5rem 2rem 2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  border:1px solid var(--border);
  animation:portalIn .28s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.legal-modal-close{
  position:sticky;
  top:0;
  float:right;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--danger);
  color:#fff;
  border:none;
  font-size:1.15rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:var(--transition);
  z-index:5;
  margin:-.5rem -.5rem .5rem .5rem;
}
.legal-modal-close:hover{transform:scale(1.1) rotate(90deg);filter:brightness(1.12);}
html[dir="rtl"] .legal-modal-close{float:left;margin:-.5rem .5rem .5rem -.5rem;}

/* Body-Scroll blockieren */
body.legal-modal-open{overflow:hidden;}

/* =========================================================
   📱 STARTSEITE – zusätzliche Feinheiten
   ========================================================= */
@media (max-width: 640px){
  /* Home-Section: Karten als eigenständige Blöcke */
  #home-section .grid-3 {
    gap: 1rem;
    margin-bottom: 1rem !important;
  }
  #home-section .grid-3 .card-item {
    margin-bottom: 0;
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
  }
}

/* =========================================================
   🌍 SPRACH-WIDGET IM HEADER – ERGÄNZUNGEN
   (vervollständigt / überschreibt die bestehenden Regeln)
   ========================================================= */

/* Das Widget sitzt jetzt inline im Header, nicht mehr fixed */
.lang-widget{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  padding:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  border:none;
  z-index:1;
}

/* Sicherstellen, dass der alte fixierte Modus überschrieben wird
   (auch falls noch Reste aus früheren Versionen im Cache sind) */
@media (min-width: 641px){
  .lang-widget{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
  }
}

/* Der alte Dark-Mode-Button (#darkToggleBtn2) ist raus – die Klasse bleibt
   versteckt, falls sie irgendwo noch referenziert wird */
.lang-icon{
  display:none !important;
}

/* Sprachauswahl-Button – sieht aus wie ein normaler Header-Button */
.lang-selector{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--primary);
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
  padding:.4rem .7rem;
  border-radius:6px;
  background:transparent;
  border:2px solid var(--secondary);
  user-select:none;
  letter-spacing:.4px;
  transition:var(--transition);
  line-height:1.2;
}
.lang-selector:hover{
  background:rgba(42,157,143,.12);
  color:var(--secondary);
}
body.dark-mode .lang-selector{
  color:var(--secondary);
  border-color:var(--secondary);
}
body.dark-mode .lang-selector:hover{
  background:rgba(42,157,143,.25);
}

/* Kleiner Pfeil rechts */
.lang-selector .caret{
  font-size:.6rem;
  opacity:.85;
}

/* Dropdown – öffnet nach unten, dunkler Hintergrund bleibt */
.lang-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:#1e293b;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:6px;
  min-width:170px;
  box-shadow:0 15px 40px rgba(0,0,0,.55);
  animation:fadeUp .2s ease;
  z-index:500;
}
html[dir="rtl"] .lang-dropdown{
  right:auto;
  left:0;
}
.lang-dropdown.hidden{
  display:none;
}

/* Einzelne Sprachoptionen */
.lang-option{
  padding:10px 14px;
  color:#f1f5f9;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:6px;
  cursor:pointer;
  font-size:.9rem;
  font-weight:600;
  transition:background .2s;
}
.lang-option:hover{
  background:rgba(42,157,143,.25);
}
.lang-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:22px;
  background:#2a9d8f;
  color:#fff;
  border-radius:4px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.5px;
}
.lang-option[data-lang="de"] .lang-flag{background:#1a3c5e;}
.lang-option[data-lang="en"] .lang-flag{background:#0d3b66;}
.lang-option[data-lang="ar"] .lang-flag{background:#b8860b;}

/* =========================================================
   📱 MOBIL – Sprach-Widget kompakter
   ========================================================= */
@media (max-width: 640px){
  .lang-widget{
    padding:0;
    gap:0;
    border:none;
    background:transparent;
  }
  .lang-selector{
    padding:.35rem .55rem;
    font-size:.72rem;
    gap:4px;
    border-radius:5px;
    border-width:2px;
  }
  .lang-selector .caret{
    font-size:.55rem;
  }
  .lang-dropdown{
    min-width:150px;
    top:calc(100% + 4px);
  }
  .lang-option{
    padding:8px 10px;
    font-size:.82rem;
    gap:8px;
  }
  .lang-flag{
    width:26px;
    height:20px;
    font-size:.62rem;
  }
}

/* ── Querformat-Handy ─────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape){
  .lang-dropdown{
    min-width:140px;
  }
}

/* =========================================================
   🎨 NAV-CONTROLS – saubere Ausrichtung
   ========================================================= */
.nav-controls{
  display:flex;
  gap:.4rem;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width: 900px){
  .nav-controls{
    justify-content:center;
    width:100%;
  }
}

@media (max-width: 640px){
  .nav-controls{
    gap:.3rem;
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
  }
  .nav-controls .btn{
    font-size:.75rem;
    padding:.4rem .6rem;
    flex:0 1 auto;
  }
}

/* =========================================================
   🌙 DARK-MODE – nur EIN Button im Header
   ========================================================= */
#darkToggleBtn{
  min-width:42px;
  text-align:center;
}

@media (max-width: 640px){
  #darkToggleBtn{
    min-width:36px;
    padding:.35rem .5rem;
    font-size:.85rem;
  }
}

/* =========================================================
   🪟 PORTAL-MODAL – 100dvh Fix (iOS)
   ========================================================= */
@media (max-width: 640px){
  .section.portal-modal{
    height:100dvh;
    max-height:100dvh;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .legal-modal-inner{
    height:100dvh;
    max-height:100dvh;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================
   🖼️ HOME-SECTION – Feinheiten mobil
   ========================================================= */
@media (max-width: 640px){
  #home-section .grid-3{
    gap:1rem;
    margin-bottom:1rem !important;
  }
  #home-section .grid-3 .card-item{
    margin-bottom:0;
    padding:1.1rem;
    border-radius:10px;
  }
  .home-transparent{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
  }
}

/* =========================================================
   🍎 SAFE-AREA – Sprach-Widget war nie fixed, daher nicht nötig.
   Nur zur Sicherheit für Header-Abstände.
   ========================================================= */
@supports (padding: max(0px)){
  .nav-controls{
    padding-right: max(0px, env(safe-area-inset-right));
    padding-left:  max(0px, env(safe-area-inset-left));
  }
}
/* =========================================================
   🚀 FINALER MOBILE-FIX – MUSS GANZ UNTEN STEHEN
   Mit !important, damit nichts mehr überschrieben wird.
   ========================================================= */

/* ─── SPRACH-WIDGET: kein fixed, inline im Header ─── */
.lang-widget{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  background:transparent !important;
  padding:0 !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  z-index:1 !important;
}

/* Der alte Dark-Mode-Button im Widget ist endgültig weg */
.lang-icon{
  display:none !important;
}

/* Sprachauswahl-Button – sieht aus wie "Patient" */
.lang-selector{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  color:var(--secondary) !important;
  font-weight:700 !important;
  font-size:.82rem !important;
  cursor:pointer !important;
  padding:.4rem .7rem !important;
  border-radius:6px !important;
  background:transparent !important;
  border:2px solid var(--secondary) !important;
  user-select:none !important;
  letter-spacing:.4px !important;
  transition:all .3s ease !important;
  line-height:1.2 !important;
  min-height:0 !important;
}
.lang-selector:hover{
  background:rgba(42,157,143,.12) !important;
}

.lang-selector .caret{
  font-size:.6rem !important;
  opacity:.85 !important;
}

/* Dropdown unter dem Button */
.lang-dropdown{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  right:0 !important;
  background:#1e293b !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:10px !important;
  padding:6px !important;
  min-width:170px !important;
  box-shadow:0 15px 40px rgba(0,0,0,.55) !important;
  z-index:5000 !important;
  left:auto !important;
}
html[dir="rtl"] .lang-dropdown{
  right:auto !important;
  left:0 !important;
}
.lang-dropdown.hidden{
  display:none !important;
}

.lang-option{
  padding:10px 14px !important;
  color:#f1f5f9 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border-radius:6px !important;
  cursor:pointer !important;
  font-size:.9rem !important;
  font-weight:600 !important;
}
.lang-option:hover{
  background:rgba(42,157,143,.25) !important;
}
.lang-flag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  height:22px !important;
  background:#2a9d8f !important;
  color:#fff !important;
  border-radius:4px !important;
  font-size:.7rem !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
}
.lang-option[data-lang="de"] .lang-flag{background:#1a3c5e !important;}
.lang-option[data-lang="en"] .lang-flag{background:#0d3b66 !important;}
.lang-option[data-lang="ar"] .lang-flag{background:#b8860b !important;}

/* ─── HANDY (≤ 640px) ─── */
@media (max-width: 640px){

  /* Header-Innenabstand */
  header{
    padding:.55rem 3% !important;
    gap:.4rem !important;
  }

  /* Navigation + Controls untereinander zentriert */
  .nav-controls{
    gap:.35rem !important;
    width:100% !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
  }

  .nav-controls .btn{
    font-size:.75rem !important;
    padding:.4rem .6rem !important;
    flex:0 1 auto !important;
  }

  /* Sprach-Widget kompakt */
  .lang-selector{
    padding:.35rem .55rem !important;
    font-size:.72rem !important;
    gap:4px !important;
  }
  .lang-selector .caret{
    font-size:.55rem !important;
  }
  .lang-dropdown{
    min-width:150px !important;
    top:calc(100% + 4px) !important;
  }
  .lang-option{
    padding:8px 10px !important;
    font-size:.82rem !important;
    gap:8px !important;
  }
  .lang-flag{
    width:26px !important;
    height:20px !important;
    font-size:.62rem !important;
  }

  /* Dark-Mode-Button kompakt */
  #darkToggleBtn{
    min-width:36px !important;
    padding:.35rem .5rem !important;
    font-size:.85rem !important;
  }

  /* Hero */
  .hero{
    padding:2rem 1rem 2.5rem !important;
  }
  .hero h1{
    font-size:1.25rem !important;
    line-height:1.3 !important;
  }
  .hero p{
    font-size:.85rem !important;
  }
  .cta-buttons{
    flex-direction:column !important;
    gap:.6rem !important;
  }
  .cta-buttons .btn{
    width:100% !important;
    flex:1 1 100% !important;
    font-size:.85rem !important;
    padding:.7rem 1rem !important;
  }

  /* Statistik: 2 Spalten */
  .stats-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:.6rem !important;
  }
  .stat-item .stat-number{
    font-size:1.5rem !important;
  }

  /* Home-Karten: kein Doppelabstand */
  #home-section .grid-3{
    gap:1rem !important;
    margin-bottom:1rem !important;
  }
  #home-section .grid-3 .card-item{
    margin-bottom:0 !important;
    padding:1.1rem !important;
    border-radius:10px !important;
  }

  /* Home-Transparent-Bereich */
  .home-transparent{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  /* Portal-Modal: 100dvh statt 100vh */
  .section.portal-modal{
    height:100dvh !important;
    max-height:100dvh !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Legal-Modal: 100dvh statt 100vh */
  .legal-modal-inner{
    height:100dvh !important;
    max-height:100dvh !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Tabellen scrollbar */
  .tab-pane table,
  .payment-history-scroll table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* ─── SEHR KLEINE HANDYS (≤ 400px) ─── */
@media (max-width: 400px){
  .stats-grid{
    grid-template-columns:1fr !important;
  }
  .hero h1{
    font-size:1.1rem !important;
  }
  nav a{
    font-size:.7rem !important;
    padding:.3rem .45rem !important;
  }
  .nav-controls .btn{
    font-size:.7rem !important;
    padding:.35rem .45rem !important;
  }
  .lang-selector{
    padding:.3rem .5rem !important;
    font-size:.68rem !important;
  }
}