/**
 * MEISTERHILFE - Flat-Design "Ruhige Werkbank" (nur öffentliche Seiten)
 * Developed by Toni Sciacca - mail@tonisciacca.com
 * Wird NUR von index.php / login.php / register.php geladen und ist unter
 * .mh-flat gescopet -> die App-Oberfläche bleibt vollständig unberührt.
 * Harte Regeln: keine Gradienten, keine Deko-Schatten, kein Blur, kein Hover-Lift.
 * Struktur nur über 1px-Haarlinien, Weißraum und Vollfarb-Flächen. Immer hell.
 */

.mh-flat{
  --primary:#f6a200; --primary-press:#e09500; --primary-active:#cc8600;
  --primary-wash:#fff3df; --primary-line:#ffe0a6;
  --ink:#1c1917; --ink-soft:#44403c; --muted:#6b6b6b; --faint:#a8a29e;
  --line:#ebe7e2; --line-strong:#ddd8d1; --bg:#ffffff; --surface:#faf8f5;
  --gelb:#ffd900;
  --ok:#16a34a; --danger:#dc2626; --info:#2563eb; --slate:#475569;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --focus:0 0 0 3px rgba(246,162,0,.24);
  background:var(--bg); color:var(--ink-soft);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  margin:0; padding-bottom:0;   /* überschreibt body{padding-bottom:50px} aus style.css -> kein weißer Streifen unten */
}
.mh-flat *{box-shadow:none;}
.mh-flat a{color:inherit;}

/* ---------- Buttons (flat) ---------- */
.mh-flat .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border:1px solid #e3e5e8;border-radius:999px;
  font:600 15px/1 'Inter',sans-serif;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.mh-flat .btn svg{width:16px;height:16px;}
.mh-flat .btn:focus-visible{outline:none;box-shadow:var(--focus);}
.mh-flat .btn-accent{background:var(--primary);color:#fff;border-color:#e3e5e8;}
.mh-flat .btn-accent:hover{background:var(--primary-press);transform:none;}
.mh-flat .btn-accent:active{background:var(--primary-active);}
.mh-flat .btn-outline{background:#fff;border-color:#e3e5e8;color:var(--ink);}
.mh-flat .btn-outline:hover{background:#f6f7f8;border-color:#c9cdd3;color:var(--ink);}
.mh-flat .btn-ghost{background:#fff;color:var(--muted);}
.mh-flat .btn-ghost:hover{color:var(--ink);background:#f6f7f8;border-color:#c9cdd3;}
.mh-flat .btn-lg{height:44px;padding:0 30px;font-size:16px;}
.mh-flat .btn-dark{background:var(--ink);color:#fff;}
.mh-flat .btn-dark:hover{background:#292524;}

/* ---------- Inputs ---------- */
.mh-flat .form-group{margin-bottom:18px;}
.mh-flat .form-label{display:block;margin-bottom:6px;font:600 12px/1 'Inter',sans-serif;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.mh-flat .form-label.required::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-left:6px;vertical-align:middle;}
.mh-flat .form-input,.mh-flat .form-select,.mh-flat select,.mh-flat textarea{
  width:100%;height:46px;padding:0 14px;background:#fff;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:10px;font-size:15px;
  font-family:inherit;transition:border-color .15s,box-shadow .15s;appearance:none;}
.mh-flat textarea{height:auto;padding:12px 14px;}
.mh-flat .form-input::placeholder{color:var(--faint);}
.mh-flat .form-input:hover{border-color:#c9c3ba;}
.mh-flat .form-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus);}
.mh-flat .password-wrapper{position:relative;}
.mh-flat .password-wrapper .form-input{padding-right:46px;}
.mh-flat .password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;background:none;border:none;color:var(--muted);cursor:pointer;}
.mh-flat .password-toggle:hover{color:var(--ink);}

/* ---------- Alert ---------- */
.mh-flat .alert{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;font-size:.9rem;margin-bottom:18px;}
.mh-flat .alert-error{background:var(--primary-wash);border:1px solid var(--primary-line);border-left:3px solid var(--danger);color:#b45309;}

/* ================= AUTH ================= */
.mh-flat .auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#fff;}
.mh-flat .auth-form-side{display:flex;align-items:center;justify-content:center;padding:48px 44px;overflow-y:auto;}
.mh-flat .auth-form-box{width:100%;max-width:410px;}
.mh-flat .logo{display:flex;width:fit-content;align-items:center;gap:10px;font:700 1.15rem/1 'Inter',sans-serif;color:var(--ink);text-decoration:none;margin-bottom:30px;}
.mh-flat .logo .logo-badge{width:32px;height:32px;border-radius:8px;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;color:#fff;}
.mh-flat .auth-form-box form{margin:0;}
.mh-flat .form-hint{display:block;margin-top:7px;font-size:.8rem;line-height:1.4;color:var(--faint);}

/* Auth-Tabs = klare Text-Tabs mit Orange-Unterstrich (KEINE schwarze Fläche) */
.mh-flat .auth-tabs{display:flex;gap:24px;margin-bottom:26px;padding:0;background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;}
.mh-flat .auth-tab{flex:0 0 auto;padding:12px 2px;font:600 15px/1 'Inter',sans-serif;color:var(--muted);
  background:none;border:none;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;text-decoration:none;transition:color .15s,border-color .15s;}
.mh-flat .auth-tab:hover{color:var(--ink);background:none;border-bottom-color:var(--primary);}
.mh-flat .auth-tab.active{color:var(--ink);background:none;border-bottom-color:var(--primary);}

.mh-flat .auth-head{margin-bottom:24px;}
.mh-flat .auth-head h1{font:800 28px/1.15 'Inter',sans-serif;letter-spacing:-.02em;color:var(--ink);margin:0 0 7px;}
.mh-flat .auth-head p{color:var(--muted);font-size:15px;line-height:1.5;margin:0;}
.mh-flat .form-btn{width:100%;height:44px;margin-top:10px;}
/* Vorführbetrieb auf der Anmeldeseite: Zugangsdaten zum Übernehmen */
.mh-flat .auth-demo{margin-top:20px;padding:14px 16px;border:1px solid var(--primary-line);border-radius:12px;background:var(--surface);}
.mh-flat .auth-demo-kopf{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;color:var(--ink);}
.mh-flat .auth-demo-kopf svg{color:var(--primary);}
.mh-flat .auth-demo-text{margin:4px 0 10px;font-size:.84rem;color:var(--muted);line-height:1.45;}
.mh-flat .auth-demo-btn{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border:1px solid #e3e5e8;border-radius:16px;
  background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.mh-flat .auth-demo-btn:hover,.mh-flat .auth-demo-btn:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-wash);outline:none;}
.mh-flat .auth-demo-btn span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mh-flat .auth-demo-btn small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.mh-flat .auth-demo-btn b{font-weight:600;font-size:.9rem;overflow-wrap:anywhere;}
.mh-flat .auth-demo-btn > svg{margin-left:auto;flex:none;color:var(--muted);}
.mh-flat .auth-demo-btn.eingetragen{border-color:var(--primary);}
.mh-flat .auth-demo-btn.eingetragen > svg{color:var(--primary);}
@media (max-width:480px){.mh-flat .auth-demo-btn{flex-wrap:wrap;gap:8px 18px;}.mh-flat .auth-demo-btn > svg{display:none;}}
.mh-flat .auth-alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);}
.mh-flat .auth-alt a{color:var(--primary);font-weight:600;text-decoration:none;}
.mh-flat .auth-alt a:hover{text-decoration:underline;}

/* Markenseite = Vollfarb-Orange, dunkler Ink-Text (AA-lesbar), kein Verlauf */
.mh-flat .auth-visual-side{display:flex;align-items:center;justify-content:center;padding:56px;background:var(--primary);position:relative;overflow:hidden;}
.mh-flat .auth-visual{position:relative;max-width:440px;color:var(--ink);}
.mh-flat .auth-visual h2{font:800 32px/1.1 'Inter',sans-serif;letter-spacing:-.02em;margin:0 0 22px;color:var(--ink);}
/* Lucide-Workflow-Konstellation */
.mh-flat .mh-constell{display:flex;align-items:center;gap:8px;margin:0 0 26px;flex-wrap:wrap;}
.mh-flat .mc-node{width:54px;height:54px;border-radius:12px;background:#fff;border:2px solid rgba(28,25,23,.10);display:grid;place-items:center;color:var(--ink);flex:none;cursor:pointer;transition:border-color .15s,color .15s,transform .15s;}
.mh-flat .mc-node svg{width:26px;height:26px;}
.mh-flat .mc-node:hover,.mh-flat .mc-node.hot{border-color:var(--primary);color:var(--primary);transform:translateY(-2px);}
.mh-flat .mc-arrow{color:rgba(28,25,23,.35);display:grid;place-items:center;flex:none;}
.mh-flat .mc-arrow svg{width:16px;height:16px;}
/* Wechselnde Bildunterschrift (folgt dem gehoverten Icon) */
.mh-flat .mc-caption{min-height:78px;}
.mh-flat .mc-cap-title{font:800 18px/1.2 'Inter',sans-serif;color:var(--ink);margin:0 0 5px;}
.mh-flat .mc-cap-desc{font-size:15px;line-height:1.55;color:var(--ink);opacity:.9;max-width:400px;margin:0;}
/* Vorteils-Liste (Legacy) */
.mh-flat .auth-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.mh-flat .auth-feats li{display:flex;align-items:center;gap:12px;font:600 15px/1.3 'Inter',sans-serif;color:var(--ink);}
.mh-flat .auth-feats .fi{width:40px;height:40px;border-radius:10px;background:#fff;color:var(--primary);display:grid;place-items:center;flex:none;}
.mh-flat .auth-feats .fi svg{width:18px;height:18px;}

/* ================= LANDING ================= */
.mh-flat .header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);padding:0;}
.mh-flat .header-card{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:none;border-radius:0;box-shadow:none;}
.mh-flat .nav{display:flex;gap:26px;}
.mh-flat .nav-link{color:var(--ink);font-weight:500;font-size:.95rem;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.mh-flat .nav-link:hover{color:var(--primary);border-bottom-color:var(--primary);}
.mh-flat .nav-actions{display:flex;align-items:center;gap:10px;}

/* Hero – flach, linksbündig, warmes Band */
.mh-flat .hero{background:var(--surface);padding:92px 24px 64px;text-align:left;}
.mh-flat .hero::before{display:none;}
.mh-flat .hero-content{max-width:1200px;margin:0 auto;}
.mh-flat .hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 12px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:18px;}
.mh-flat .hero-eyebrow::before{content:'';width:40px;height:3px;background:var(--primary);display:inline-block;}
.mh-flat .hero h1{font:800 clamp(2.5rem,6vw,4.5rem)/1.0 'Inter',sans-serif;letter-spacing:-.03em;color:var(--ink);margin:0 0 18px;}
.mh-flat .hero h1 .accent{color:var(--primary);}
.mh-flat .hero-sub{color:var(--muted);font-size:17px;max-width:540px;margin:0 0 28px;line-height:1.6;}
.mh-flat .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.mh-flat .trust-row{display:flex;align-items:center;gap:0;flex-wrap:wrap;}
.mh-flat .trust-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:0 18px;border-left:1px solid var(--line-strong);}
.mh-flat .trust-item:first-child{padding-left:0;border-left:none;}
.mh-flat .trust-item svg{width:15px;height:15px;color:var(--primary);}

/* Sections */
.mh-flat .section{padding:80px 24px;}
.mh-flat .section-inner{max-width:1200px;margin:0 auto;}
.mh-flat .section-title{font:800 32px/1.15 'Inter',sans-serif;letter-spacing:-.02em;color:var(--ink);margin:0 0 32px;}

/* Feature-Cards */
.mh-flat .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.mh-flat .feat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;transition:border-color .15s;}
.mh-flat .feat-card:hover{border-color:var(--primary);}
.mh-flat .feat-card h4{font:700 18px/1.3 'Inter',sans-serif;color:var(--ink);margin:16px 0 8px;}
.mh-flat .feat-card p{color:var(--muted);font-size:15px;line-height:1.6;margin:0;}
.mh-flat .badge-cat{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;}
.mh-flat .badge-cat svg{width:22px;height:22px;}
.mh-flat .cat-orange{background:var(--primary);}
.mh-flat .cat-blau{background:var(--info);}
.mh-flat .cat-gruen{background:var(--ok);}
.mh-flat .cat-slate{background:var(--slate);}

/* Prozess-Stepper */
.mh-flat .prozess{background:var(--surface);}
.mh-flat .stepper{display:flex;align-items:flex-start;gap:0;}
.mh-flat .st-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;position:relative;}
.mh-flat .st-step .badge-cat{margin-bottom:14px;}
.mh-flat .st-title{font:600 15px/1.2 'Inter',sans-serif;color:var(--ink);margin-bottom:4px;}
.mh-flat .st-desc{font-size:13px;color:var(--muted);line-height:1.4;max-width:170px;}
.mh-flat .st-arrow{align-self:center;margin-top:12px;color:var(--faint);flex:none;padding:0 4px;}
.mh-flat .st-arrow svg{width:20px;height:20px;}

/* CTA-Band – der eine bewusste Vollfarb-Block */
.mh-flat .cta-band{background:var(--primary);padding:72px 24px;text-align:center;}
.mh-flat .cta-band h2{font:800 clamp(1.8rem,4vw,2.4rem)/1.15 'Inter',sans-serif;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em;}
.mh-flat .cta-band p{color:rgba(28,25,23,.8);font-size:16px;max-width:600px;margin:0 auto 26px;}

/* Footer */
.mh-flat .footer{background:#fff;border-top:1px solid var(--line);padding:40px 24px 28px;}
.mh-flat .footer-inner{max-width:1200px;margin:0 auto;}
.mh-flat .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:13px;}
.mh-flat .footer-bottom a{color:var(--muted);text-decoration:none;}
.mh-flat .footer-bottom a:hover{color:var(--ink);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .mh-flat .auth-layout{grid-template-columns:1fr;}
  .mh-flat .auth-visual-side{display:none;}
  .mh-flat .nav{display:none;}
  .mh-flat .stepper{flex-direction:column;align-items:stretch;gap:0;}
  .mh-flat .st-step{flex-direction:row;text-align:left;gap:14px;padding:14px 0;border-left:2px solid var(--line);margin-left:24px;padding-left:22px;}
  .mh-flat .st-step .badge-cat{margin-bottom:0;}
  .mh-flat .st-desc{max-width:none;}
  .mh-flat .st-arrow{display:none;}
}
/* Sprachumschalter auf den Anmeldeseiten */
.mh-flat .mh-sprachen{display:inline-flex;gap:6px;}
.mh-flat .mh-sprachen a,.mh-flat .mh-sprachen b{font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:6px;text-decoration:none;color:var(--muted);border:1px solid var(--line);}
.mh-flat .mh-sprachen b{color:var(--ink);background:var(--primary-wash);border-color:var(--primary-line);}
.mh-flat .mh-sprachen a:hover{color:var(--ink);border-color:var(--line-strong);}