/* ===== Julia & Niklas — Hochzeitsplanung ==============================
   Farbkonzept nach Bridebook-Vorlage:
   Creme #FFEFE1 · Terrakotta #E68D55 · Graubraun #55504F · Blaugrau #1A2C40
   Schriften: Sacramento (Zier), Lora (Text)
======================================================================== */

:root{
  --bg:#fff3e7;
  --bg-soft:#ffefe1;
  --card:#fffdfa;
  --line:#f0dcc9;
  --line-strong:#e3c9ae;
  --ink:#3a4451;
  --ink-deep:#1a2c40;
  --heading:#55504f;
  --muted:#9a8b7e;
  --accent:#e68d55;
  --accent-dark:#cf7440;
  --accent-soft:#fbe3d2;
  --green:#3a6b4d;
  --green-soft:#e6efe4;
  --amber:#c98b1f;
  --amber-soft:#f8ecd2;
  --red:#b23b2e;
  --red-soft:#f6ddd8;
  --shadow:0 2px 10px rgba(85,80,79,.07);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Lora', Georgia, serif;
  font-size:15.5px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* ---------- Kopfbereich ---------- */
.topbar{
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  padding:14px 20px 0;
  text-align:center;
}
.brand{
  font-family:'Sacramento', cursive;
  font-size:34px;
  color:var(--heading);
  line-height:1.1;
  text-decoration:none;
  display:inline-block;
}
.brand .amp{color:var(--accent)}
.brand-sub{
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); font-family:'Lora',serif; margin-top:-2px;
}
.userline{
  font-size:13px; color:var(--muted); text-align:right;
}
.userline a{color:var(--accent-dark); text-decoration:none; margin-left:10px}
.userline a:hover{text-decoration:underline}
.topwrap{position:relative}
@media(min-width:1000px){
  .userline{position:absolute; right:18px; top:14px}
}

nav.mainnav{
  display:flex; gap:4px; justify-content:center; flex-wrap:wrap;
  padding:10px 4px 12px;
}
nav.mainnav a{
  padding:7px 15px; border-radius:999px; text-decoration:none;
  color:var(--heading); font-size:14.5px; white-space:nowrap;
  border:1px solid transparent;
}
nav.mainnav a:hover{background:var(--accent-soft)}
nav.mainnav a.active{
  background:var(--accent); color:#fff; border-color:var(--accent);
}

/* ---------- Inhalt ---------- */
main.content{max-width:1100px; margin:0 auto; padding:24px 18px 70px}
main.wide{max-width:1360px}

h1.pagetitle{
  font-family:'Sacramento', cursive; font-weight:400;
  font-size:44px; color:var(--heading); margin:4px 0 2px; text-align:center;
}
.pagesub{text-align:center; color:var(--muted); font-size:14px; margin:0 0 26px}

h2{font-family:'Lora',serif; font-size:19px; color:var(--heading); margin:0 0 10px}
h2 .script{font-family:'Sacramento',cursive; font-size:28px; font-weight:400}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px;
}
.card h2:first-child{margin-top:0}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:860px){ .grid2,.grid3{grid-template-columns:1fr} }

/* ---------- Buttons & Formulare ---------- */
.btn{
  display:inline-block; border:1px solid var(--line-strong); background:#fff;
  color:var(--heading); padding:8px 18px; border-radius:999px; cursor:pointer;
  font-family:'Lora',serif; font-size:14px; text-decoration:none;
}
.btn:hover{border-color:var(--accent); color:var(--accent-dark)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-dark); color:#fff}
.btn.small{padding:4px 12px; font-size:13px}
.btn.danger{color:var(--red)}
.btn.danger:hover{border-color:var(--red)}

input[type=text],input[type=password],input[type=time],input[type=email],
input[type=number],select,textarea{
  width:100%; padding:8px 11px; border:1px solid var(--line-strong);
  border-radius:10px; font-family:'Lora',serif; font-size:14.5px;
  background:#fff; color:var(--ink);
}
textarea{min-height:90px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
label{font-size:12.5px; color:var(--muted); display:block; margin:10px 0 3px}
.formrow{display:flex; gap:12px; flex-wrap:wrap}
.formrow > div{flex:1; min-width:130px}
.checkline{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:14px}
.checkline input{width:auto}

/* ---------- Status-Pillen ---------- */
.pill{
  display:inline-block; padding:2px 11px; border-radius:999px;
  font-size:12.5px; white-space:nowrap;
}
.pill.geklaert,.pill.fix,.pill.zusage{background:var(--green-soft); color:var(--green)}
.pill.in_klaerung,.pill.angefragt{background:var(--amber-soft); color:var(--amber)}
.pill.offen,.pill.absage{background:var(--red-soft); color:var(--red)}
.pill.neutral{background:var(--bg-soft); color:var(--muted)}
.pill.bereich{background:var(--accent-soft); color:var(--accent-dark)}

/* ---------- Tabellen ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--card)}
table.liste{width:100%; border-collapse:collapse; font-size:14px}
table.liste th{
  text-align:left; padding:10px 12px; color:var(--muted); font-weight:600;
  font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.liste td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.liste tr:last-child td{border-bottom:none}
table.liste tr.klick{cursor:pointer}
table.liste tr.klick:hover td{background:var(--bg-soft)}

/* ---------- Dashboard ---------- */
.hero{
  text-align:center; padding:26px 16px 20px; margin-bottom:22px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:20px;
}
.hero .datum{font-size:14px; letter-spacing:2px; color:var(--muted); text-transform:uppercase}
.hero .tage{
  font-family:'Sacramento',cursive; font-size:58px; color:var(--accent-dark); line-height:1.05;
}
.hero .ort{color:var(--heading); font-size:15px}
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 8px; text-align:center;
}
.stat .zahl{font-size:26px; color:var(--accent-dark); font-weight:600}
.stat .lbl{font-size:12px; color:var(--muted); letter-spacing:.5px}

ul.changelog{list-style:none; margin:0; padding:0; font-size:13.5px}
ul.changelog li{padding:7px 0; border-bottom:1px dashed var(--line)}
ul.changelog li:last-child{border-bottom:none}
ul.changelog .wer{color:var(--accent-dark); font-weight:600}
ul.changelog .wann{color:var(--muted); font-size:12px; white-space:nowrap}

/* ---------- Timeline (Ablauf) ---------- */
.timeline{position:relative; margin:8px 0 8px 8px; padding-left:26px}
.timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px;
  width:2px; background:var(--line-strong); border-radius:2px;
}
.tl-item{position:relative; padding:7px 0 14px}
.tl-item::before{
  content:""; position:absolute; left:-25px; top:14px; width:12px; height:12px;
  border-radius:50%; background:var(--accent); border:2.5px solid var(--bg);
}
.tl-item.kirche::before{background:var(--green)}
.tl-item.feier::before{background:var(--accent-dark)}
.tl-item.allgemein::before{background:var(--muted)}
.tl-zeit{font-weight:700; color:var(--heading); font-size:15px; margin-right:8px}
.tl-titel{font-weight:600; color:var(--ink-deep)}
.tl-meta{font-size:13px; color:var(--muted); margin-top:1px}
.tl-meta a{color:var(--accent-dark)}
.tl-item .bearb{visibility:hidden; font-size:12px; margin-left:8px}
.tl-item:hover .bearb{visibility:visible}

/* ---------- Aufgaben ---------- */
.taskcard{border-left:4px solid var(--red); }
.taskcard.in_klaerung{border-left-color:var(--amber)}
.taskcard.geklaert{border-left-color:var(--green)}
.taskhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.taskhead h3{margin:0; font-size:16.5px; color:var(--ink-deep); flex:1; min-width:200px}
.taskbody{font-size:14px; margin-top:6px}
.taskbody .frage{color:var(--muted); font-style:italic}
.taskmeta{font-size:12px; color:var(--muted); margin-top:8px}
.kommentare{margin-top:10px; border-top:1px dashed var(--line); padding-top:8px}
.kommentar{font-size:13.5px; padding:4px 0}
.kommentar .wer{font-weight:600; color:var(--accent-dark)}
.kommentar .wann{color:var(--muted); font-size:11.5px}
.kform{display:flex; gap:8px; margin-top:8px}
.kform input{flex:1}

.filterbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px}
.filterbar select,.filterbar input{width:auto}

/* Aufgaben auf Handy/Tablet zugeklappt — Kopfzeile antippen klappt auf */
.klappzeiger{display:none}
@media(max-width:860px){
  .taskcard .taskbody, .taskcard .taskmeta, .taskcard .kommentare{display:none}
  .taskcard.auf .taskbody, .taskcard.auf .taskmeta, .taskcard.auf .kommentare{display:block}
  .taskcard .taskhead{cursor:pointer}
  .klappzeiger{display:inline-block; color:var(--muted); font-size:13px;
    transition:transform .15s; margin-right:-2px}
  .taskcard.auf .klappzeiger{transform:rotate(90deg)}
}

/* ---------- Dienstleister ---------- */
.vcard h3{margin:0 0 2px; font-size:17px; color:var(--ink-deep)}
.vcard .vkat{font-size:12.5px; color:var(--muted); letter-spacing:.5px; text-transform:uppercase}
.vcard .vzeile{font-size:14px; margin-top:6px}
.vcard .vzeile a{color:var(--accent-dark)}
.vcard .vnotiz{font-size:13.5px; color:var(--ink); background:var(--bg-soft);
  border-radius:10px; padding:8px 12px; margin-top:10px}

/* ---------- Modal ---------- */
.ov{position:fixed; inset:0; background:rgba(85,80,79,.45); z-index:400;
  display:none; align-items:flex-start; justify-content:center; padding:30px 14px; overflow:auto}
.ov.open{display:flex}
.modal{background:var(--card); border-radius:18px; max-width:640px; width:100%;
  padding:20px 22px; box-shadow:0 12px 40px rgba(0,0,0,.18)}
.modal h2{margin-top:0}
.mfoot{display:flex; justify-content:space-between; gap:10px; margin-top:16px}
.mfoot .rechts{display:flex; gap:10px; margin-left:auto}

/* ---------- Meldungen ---------- */
.flash{padding:10px 16px; border-radius:12px; margin-bottom:14px; font-size:14px}
.flash.ok{background:var(--green-soft); color:var(--green)}
.flash.error{background:var(--red-soft); color:var(--red)}

/* ---------- Login ---------- */
body.loginpage{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:var(--bg-soft);
}
.loginbox{text-align:center; max-width:380px; width:100%; padding:20px}
.loginbox .willkommen{font-family:'Sacramento',cursive; font-size:30px; color:var(--muted); margin:0}
.loginbox h1{font-family:'Sacramento',cursive; font-weight:400; font-size:52px;
  color:var(--heading); margin:0 0 6px; line-height:1.15}
.loginbox .sub{color:var(--muted); font-size:14px; margin-bottom:26px}
.loginbox input{margin-bottom:12px; text-align:center}
.loginbox .btn{width:100%; font-family:'Sacramento',cursive; font-size:22px; padding:9px}
.zweig{color:var(--accent); font-size:22px; letter-spacing:6px; margin:18px 0 0}

/* ---------- Dokumente ---------- */
.doclist a.doctitel{color:var(--ink-deep); text-decoration:none; font-weight:600}
.doclist a.doctitel:hover{color:var(--accent-dark)}

/* ---------- Raumplaene ---------- */
.plangalerie{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.plangalerie a{display:block; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.plangalerie img{width:100%; display:block}
.plangalerie .cap{font-size:12.5px; color:var(--muted); padding:6px 10px}

/* ---------- Bearbeiten-Stifte & klickbare Statistiken ---------- */
.editbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
  background:#fff; text-decoration:none; font-size:14px; cursor:pointer;
  vertical-align:middle;
}
.editbtn:hover{border-color:var(--accent); background:var(--accent-soft)}
.editcell{width:36px}
.editbtn-sum{cursor:pointer; color:var(--accent-dark); font-size:13.5px}
.editbtn-sum:hover{text-decoration:underline}
a.stat{text-decoration:none; display:block}
a.stat:hover{border-color:var(--accent); box-shadow:0 2px 12px rgba(230,141,85,.18)}
a.pill{text-decoration:none}
a.pill:hover{outline:2px solid currentColor; outline-offset:1px}
table.liste td.notizen, table.liste th.notizen{min-width:280px; white-space:normal}

/* ---------- Passwort-Auge ---------- */
.pwwrap{position:relative; display:block}
.pwwrap input{padding-right:40px}
.loginpage .pwwrap input{padding-left:40px} /* zentrierter Text bleibt mittig */
.pwauge{
  position:absolute; right:7px; top:6px; width:28px; height:28px;
  border:none; background:transparent; cursor:pointer; font-size:15px;
  line-height:1; padding:0; opacity:.65;
}
.pwauge:hover{opacity:1}

/* ---------- Kleinkram ---------- */
.muted{color:var(--muted)}
.small{font-size:13px}
.right{text-align:right}
.mt0{margin-top:0}
.trenner{border:none; border-top:1px solid var(--line); margin:16px 0}
details.editor summary{cursor:pointer; color:var(--accent-dark); font-size:13px; margin-top:8px}
.secmeta{font-size:11.5px; color:var(--muted); margin-top:8px}

@media(max-width:700px){
  h1.pagetitle{font-size:36px}
  main.content{padding:16px 10px 60px}
  .card{padding:14px}
}