/* ThaiTel Kundenbereich – Styling */
:root{
  --lime:#84b816; --green:#437f0a; --green-bg:#edf4dc;
  --teal:#177991; --teal-hover:#115d70;
  --bg:#f4f6f0; --white:#fff; --text:#3a3a3a; --muted:#6b7280;
  --border:#dde6cf; --red:#cc3333; --amber:#d97706;
  --shadow:0 2px 12px rgba(0,0,0,.07); --radius:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}

.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:14px 24px;box-shadow:var(--shadow);flex-wrap:wrap;gap:10px}
.brand{font-size:26px;font-weight:300;color:var(--lime);letter-spacing:-.5px}
.brand b{font-weight:800}
.brand small{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600}
.topnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topnav a{padding:8px 14px;border-radius:8px;color:var(--text);font-weight:600;font-size:14px}
.topnav a:hover{background:var(--green-bg);text-decoration:none}
.topnav a.active{background:var(--teal);color:#fff}
.userbox{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}

.wrap{max-width:920px;margin:24px auto;padding:0 18px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:23px;font-weight:700;color:var(--green)}

.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:9px;transition:.15s;text-decoration:none;background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-hover);text-decoration:none;transform:translateY(-1px)}
.btn.lime{background:var(--lime)}.btn.lime:hover{background:var(--green)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--green-bg)}
.btn.sm{padding:7px 13px;font-size:13px}

.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:22px}
.flash{padding:13px 18px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:500}
.flash.success{background:#e3f3d6;color:var(--green);border:1px solid #c4e3a3}
.flash.error{background:#fbecec;color:var(--red);border:1px solid #f0caca}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:13px;font-weight:600}
.field input{padding:11px 13px;border:1px solid var(--border);border-radius:9px;font-size:14px}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(23,121,145,.12)}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:38px;width:100%;max-width:400px}
.login-box .brand{text-align:center;margin-bottom:6px;font-size:34px}
.login-box .sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:24px}

/* Kalender Tag + Slots */
.cal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cal-bar .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-bar h2{font-size:19px;color:var(--green);font-weight:700}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.dot.free{background:#fff;border:1px solid var(--border)}
.dot.blocked{background:var(--red)}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.slot{padding:14px 6px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;
  text-align:center;font-weight:600;font-size:15px;transition:.12s;user-select:none}
.slot:hover{border-color:var(--teal);transform:translateY(-1px)}
.slot.blocked{background:var(--red);color:#fff;border-color:var(--red)}
.slot.blocked::after{content:" gesperrt";font-size:11px;display:block;font-weight:500;opacity:.9}
.slot.free::after{content:" frei";font-size:11px;display:block;font-weight:500;color:var(--muted)}
.slot.busy{opacity:.55;cursor:not-allowed}

/* Chat */
.chat{display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.chat-day{text-align:center;margin:8px 0}
.chat-day span{background:var(--green-bg);color:var(--green);font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px}
.bubble{max-width:78%;padding:11px 15px;border-radius:14px;box-shadow:var(--shadow);position:relative}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:5px}
.bubble.termin{align-self:flex-start;background:#fff;border:1px solid var(--border);border-top-left-radius:4px}
.bubble.notiz{align-self:flex-start;background:var(--green-bg);border:1px solid #d6e8bf;border-top-left-radius:4px}
.bubble .tt{font-weight:700;color:var(--green);font-size:13px;margin-bottom:3px}
.bubble .tt.t{color:var(--teal)}

table.tbl{width:100%;border-collapse:collapse;background:#fff}
table.tbl th,table.tbl td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);font-size:14px}
table.tbl th{background:var(--green-bg);color:var(--green);font-weight:700;font-size:12.5px;text-transform:uppercase}
table.tbl tr:last-child td{border-bottom:none}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase}
.badge.bezahlt{background:#e3f3d6;color:var(--green)}
.badge.offen{background:#fdeccf;color:var(--amber)}
.empty{text-align:center;padding:46px 20px;color:var(--muted)}

@media(max-width:600px){
  .slots{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .bubble{max-width:90%}
}

/* Businesscard-Editor */
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:20px;background:#fff}
fieldset legend{font-weight:700;color:var(--green);padding:0 8px;font-size:15px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.full{grid-column:1 / -1}
.field textarea{padding:11px 13px;border:1px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;min-height:80px;resize:vertical}
.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(23,121,145,.12)}
.repeat-row{display:grid;gap:8px;align-items:start;margin-bottom:10px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:10px}
.repeat-row.service{grid-template-columns:2fr 1fr 1fr 2fr auto}
.repeat-row.faq{grid-template-columns:1fr 2fr auto}
.repeat-row input,.repeat-row textarea{padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:13.5px;font-family:inherit;width:100%}
.repeat-row textarea{min-height:42px;resize:vertical}
.repeat-row .del{background:#fff;border:1px solid #f0caca;color:var(--red);border-radius:8px;cursor:pointer;padding:9px 12px;font-weight:700}
.repeat-row .del:hover{background:#fbecec}
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
  .repeat-row.service,.repeat-row.faq{grid-template-columns:1fr}
}