/* Teamportal Haargalerie Patricia Pump
   Gestaltung übernommen aus Sammys Prototyp (Version 10, ressources/), zusammengeführt
   aus dessen Schichten (Grundform, Salonauftritt, Version 7 Typografie, Version 8 Hinweisbox). */

:root{
  --tinte:#21201e;--grund:#f9f8f6;--linie:#eae7e2;--linie2:#ded8d0;--gedaempft:#6f6963;
  --dunkel:#262422;--gold:#987c64;--gold2:#b9a078;--sand:#f1ede8;--hinweis:#fdf9ef;
  --rot:#a12b26;--rotgrund:#fbe5e3;--gruen:#28653b;--gruengrund:#e1f1e5;
  font-family:"Avenir Next",Avenir,"Century Gothic","Trebuchet MS",Arial,sans-serif;
  font-size:15px;line-height:1.6;color:var(--tinte);background:var(--grund);-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{margin:0;background:linear-gradient(180deg,#fff 0,#faf9f7 370px,#f9f8f6 100%)}
body,input,select,textarea,button{font-family:inherit}
a{color:var(--gold)}

.top{background:#fff;color:#181716;padding:24px max(18px,calc((100vw - 1150px)/2));border-bottom:1px solid #e9e6e1;box-shadow:0 2px 8px #00000008;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-size:10px;letter-spacing:3.6px;font-weight:600;line-height:1.6;text-decoration:none;color:inherit}
.brand strong{display:block;font-size:26px;font-weight:500;letter-spacing:2.8px}
.brand .logo{display:block;height:46px;width:auto}
.logo-gross{display:block;width:100%;max-width:300px;height:auto;margin:0 0 22px}
.pill{background:#232221;color:#fff;letter-spacing:2px;font-size:10px;font-weight:500;padding:11px 15px}
main{max-width:1150px;margin:0 auto 40px;padding:0 16px}

.hero{position:relative;background:linear-gradient(115deg,#eeeae4,#faf8f4 64%,#e6ded5);margin:26px 0 20px;padding:36px 48px 26px;overflow:hidden;min-height:200px}
.hero:after{content:"";position:absolute;width:340px;height:340px;border:1px solid #b7aa9a88;border-radius:50%;right:-90px;top:-165px;box-shadow:0 0 0 60px #ffffff22,0 0 0 120px #ffffff18}
.eyebrow{font-size:11px;letter-spacing:3.6px;color:#6c6052;font-weight:600;text-transform:uppercase}
h1{font-size:40px;font-weight:400;letter-spacing:.2px;line-height:1.32;margin:12px 0}
h1 em{font-style:normal;font-weight:500;color:#97765e}
.hero p{font-size:15px;max-width:535px;line-height:1.75;color:#625e59;margin:0}
.hero_rule{width:85px;height:1px;background:#a88d73;margin-top:22px;margin-bottom:12px}
.hero_bottom{font-size:10px;letter-spacing:1.4px;color:#71695f}.hero_bottom span{padding:0 9px}

.notice{background:var(--hinweis);border:1px solid #eee1c8;border-left:3px solid var(--gold2);padding:13px 17px;line-height:1.6;font-size:14px;margin:18px 0}
.notice.ok{background:#f3f8f2;border-color:#d5e6d2;border-left-color:#5b8a55}
.notice.fehler{background:#fdf3f2;border-color:#f0d2cf;border-left-color:#ae4949}

.card{background:#fff;border:1px solid var(--linie);border-radius:3px;box-shadow:0 3px 20px #11111106;padding:24px;margin-bottom:18px}
.welcome-card{background:linear-gradient(120deg,#fff,#f8f3eb);border:1px solid #ebe4da}
.welcome-card h2{font-size:27px;font-weight:500;margin:7px 0}
h2{font-size:22px;font-weight:500;letter-spacing:.4px;line-height:1.2;margin:0 0 14px}
h3{font-size:15px;font-weight:600;letter-spacing:.2px;margin:18px 0 8px}
.muted{font-size:13px;color:var(--gedaempft);line-height:1.6}

.row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.7px;color:#615b55;margin-bottom:4px}
input,select,textarea{font-size:16px;line-height:1.5;border:1px solid var(--linie2);border-radius:2px;padding:11px 12px;max-width:100%;background:#fff;color:#252525}
input[type=date]{min-width:160px}
.feld{margin-bottom:14px}.feld input,.feld textarea{width:100%}
.check{display:flex;gap:8px;align-items:center;font-weight:400;letter-spacing:0;font-size:14px;color:#56504b}
.check input{width:auto}

button,.knopf{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.7px;border:0;background:var(--dunkel);color:#fff;border-radius:2px;padding:11px 18px;cursor:pointer;text-decoration:none;text-align:center}
button.gold,.knopf.gold{background:var(--gold)}
button.light,.knopf.light{background:var(--sand);color:#302c28}
button:disabled{opacity:.5;cursor:not-allowed}
button.klein{padding:7px 12px;font-size:12px}
.voll{width:100%}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:22px 0}
.stat{background:#fff;border:1px solid #e5dfd7;border-left:2px solid #bba38b;border-radius:2px;padding:17px 16px}
.stat b{display:block;font-size:30px;font-weight:500;margin-top:5px}
.stat span{font-size:12px;color:#70695f;letter-spacing:.3px}

.tabs{display:flex;gap:1px;border-bottom:1px solid #ded8d1;margin:0 0 16px;overflow-x:auto;flex-wrap:nowrap}
.tabs a{white-space:nowrap;text-decoration:none;color:#655f59;padding:14px 17px;font-size:13px;font-weight:600;letter-spacing:.7px}
.tabs a.active{background:#3c332e;color:#fff;border-radius:8px 8px 0 0}
.tabs .badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--gold);color:#fff;font-size:11px;text-align:center}

.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6}
td,th{padding:10px 9px;border-bottom:1px solid #eeeae5;text-align:left;vertical-align:middle}
th{background:#f5f3f0;color:#4a4239;text-transform:uppercase;letter-spacing:.5px;font-size:10px}
.tag{display:inline-block;border-radius:2px;background:#eee9e1;color:#594b34;padding:4px 7px;font-size:11px;line-height:1.3}
.tag.red{background:var(--rotgrund);color:var(--rot)}.tag.green{background:var(--gruengrund);color:var(--gruen)}

.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.weekday{text-align:center;font-weight:700;color:#7c7267;padding:8px 0;font-size:12px}
.cell{border:1px solid #e8e3dc;border-radius:2px;min-height:83px;padding:8px;background:#fff;font-size:12px;line-height:1.4;overflow:hidden}
.cell.off{opacity:.22}.cell.weekend{background:#f8f5f1}.cell.feiertag{background:#f3efe9}
.cell.risk{border:2px solid #ca564c;background:#fff5f3}.cell.warn{border:2px solid #d7ab4d;background:#fff9e9}
.cell.mein{box-shadow:inset 0 -3px 0 var(--gold)}
.num{font-weight:700;font-size:15px}
.count{display:block;margin-top:6px;color:#6a6258}
.namen{display:block;color:#8a8076;font-size:11px;word-break:break-word}
.feiertagname{display:block;color:var(--gold);font-size:11px}
.monatnav{display:flex;gap:10px;align-items:center}

/* Vorschau beim Antrag: Tag für Tag, wer schon frei hat */
.tagliste{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.tagzeile{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:8px 10px;border:1px solid #eee8e0;background:#fff;font-size:13px}
.tagzeile.frei{opacity:.5}.tagzeile.voll{border-color:#d7ab4d;background:#fff9e9}
.tagzeile b{font-weight:600}

.balance-alert{display:flex;gap:14px;align-items:flex-start;background:#f7f5f1;border-left:3px solid #b6976c;border-radius:12px;padding:17px 18px;margin:15px 0 10px;color:#39342f;font-size:14px;line-height:1.55}
.balance-alert-icon{width:24px;height:24px;min-width:24px;border-radius:50%;background:#dfd1bd;color:#564632;font-weight:700;text-align:center;line-height:24px;font-size:14px;margin-top:2px}
.balance-alert-title{font-size:15px;font-weight:650;margin-bottom:4px}

.doks{list-style:none;margin:0;padding:0}
.doks li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #eeeae5}
.doks .neu{color:var(--gold);font-weight:700;font-size:11px;letter-spacing:1px;margin-left:6px}

.loginveil{min-height:100vh;display:grid;place-items:center;padding:20px;background:#f7f5f1}
.loginbox{width:min(430px,100%);background:#fff;padding:35px;border:1px solid #e6ded5;box-shadow:0 15px 55px #0001}
.loginbox h1{font-size:30px}
.loginerr{color:#9b2e22;font-size:13px;min-height:20px}

.foot{font-size:12px;color:#77706a;margin:20px 0 35px;border-top:1px solid #e2ded7;padding-top:16px}
.abmelden{display:flex;gap:10px;align-items:center}
.abmelden form{margin:0}

@media(max-width:670px){
  .top{padding:16px 18px}.brand .logo{height:32px}.brand strong{font-size:20px;letter-spacing:1.4px}.brand{letter-spacing:2px}.pill{display:none}
  .hero{margin:12px 0 18px;padding:24px 22px;min-height:0}.hero:after{opacity:.35}h1{font-size:30px}.hero p{font-size:14px}
  .card{padding:16px}.stats{grid-template-columns:repeat(2,1fr)}
  /* Handy: alle vier Reiter sichtbar (2 × 2), kein seitliches Wischen */
  .tabs{position:sticky;top:0;z-index:10;background:#faf8f4;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-bottom:0;padding:6px 0}
  .tabs a{padding:10px 8px;font-size:12px;text-align:center;background:#f1ede8;border-radius:6px}
  .tabs a.active{border-radius:6px}
  .cell{min-height:58px;padding:4px}.count{font-size:10px}.namen{display:none}
  .feiertagname{font-size:0}.feiertagname::after{content:"Feiertag";font-size:9px}
  td,th{padding:7px 6px}.loginbox{padding:26px}.loginbox h1{font-size:27px}
  .row>div{flex:1 1 140px}
}