* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.5; }
a { color:var(--link); }
button, input, select, textarea { font-family:inherit; }

/* ---------- Kopfzeile ---------- */
.top { position:sticky; top:0; z-index:50; background:var(--hero); color:#fff; display:flex; align-items:center; gap:1rem; padding:.7rem 5%; box-shadow:0 2px 14px rgba(10, 50, 100, .25); }
.brand { flex:1; min-width:0; }
.title { font-size:1.5rem; font-weight:750; letter-spacing:-.01em; color:#fff; text-decoration:none; }
.claim { margin:.1rem 0 0; color:rgba(255, 255, 255, .85); font-size:.92rem; }
.claim a { color:#fff; }
.menu-btn { color:#fff; display:block; font-size:1.3rem; line-height:1; background:rgba(255, 255, 255, .14); border:1px solid rgba(255, 255, 255, .35); border-radius:10px; padding:.45rem .7rem; cursor:pointer; transition:background .15s; }
.menu-btn:hover { background:rgba(255, 255, 255, .26); }
#search { padding:.55rem 1rem; border:1px solid transparent; border-radius:999px; width:210px; font:inherit; background:rgba(255, 255, 255, .18); color:#fff; transition:background .15s, box-shadow .15s; }
#search::placeholder { color:rgba(255, 255, 255, .8); }
#search:focus { outline:none; background:var(--surface); color:var(--text); box-shadow:0 0 0 3px rgba(255, 255, 255, .35); }
#search:focus::placeholder { color:var(--muted); }
.logout { color:var(--primary); background:#fff; border:0; border-radius:999px; padding:.5rem 1.1rem; cursor:pointer; font:inherit; font-weight:600; transition:transform .12s, box-shadow .12s; }
.logout:hover { box-shadow:0 3px 10px rgba(0, 0, 0, .2); transform:translateY(-1px); }
.whoami { color:rgba(255, 255, 255, .92); font-size:.9rem; }

/* ---------- Aufbau ---------- */
.layout { display:flex; align-items:flex-start; width:90%; margin:0 auto; }
.nav { width:290px; flex:none; padding:1.25rem 1.25rem 1.25rem 0; }
.content { flex:1; min-width:0; background:var(--surface); margin:1.25rem 0; padding:2rem 2.25rem; min-height:60vh; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); line-height:1.6; }
footer { text-align:center; padding:1.2rem; font-size:.85rem; color:var(--muted); }
body.nav-collapsed .nav { display:none; }

/* ---------- Menü ---------- */
.nav h2 { font-size:.95rem; margin:.9rem 0 .35rem; color:var(--on-nav); background:var(--nav-bg); border-radius:10px; padding:0; box-shadow:var(--shadow); }
.nav h2:first-child { margin-top:0; }
.nav h2 button { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:0; color:inherit; font:inherit; font-weight:650; text-align:left; padding:.6rem .85rem; cursor:pointer; border-radius:10px; }
.nav h2 button:hover { background:rgba(255, 255, 255, .1); }
.nav h2 button::after { content:"▾"; opacity:.8; }
.nav h2 button[aria-expanded="false"]::after { content:"▸"; }
.nav h2 button .gt { display:inline-flex; align-items:center; gap:.6rem; }
.nav ul { list-style:none; margin:0 0 .3rem; padding:.3rem; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.nav ul[hidden] { display:none; }
.nav li a { display:block; padding:.45rem .7rem; text-decoration:none; color:var(--text); border-radius:7px; transition:background .12s, color .12s; }
.nav li a:hover { background:var(--hover); color:var(--link); }
.nav svg.icon { width:1.15rem; height:1.15rem; flex:none; }
.nav svg.icon.lock, .tile svg.icon.lock { width:.85rem; height:.85rem; margin-left:.4rem; vertical-align:-1px; opacity:.55; }

/* ---------- Inhalt ---------- */
.content h1 { margin:0 0 1.1rem; font-size:1.85rem; font-weight:750; letter-spacing:-.015em; color:var(--heading); line-height:1.2; }
.content h1::after { content:""; display:block; width:52px; height:4px; border-radius:4px; background:var(--accent); margin-top:.6rem; }
.content h2 { font-size:1.3rem; color:var(--heading); margin:1.6rem 0 .6rem; }
.content h3, .content h4 { color:var(--heading); }
.content img { max-width:100%; height:auto; border-radius:10px; }
.content table { border-collapse:collapse; width:100%; margin:1rem 0; border:1px solid var(--line); }
.content th, .content td { border:0; border-bottom:1px solid var(--line); padding:.65rem .9rem; text-align:left; vertical-align:top; }
.content th { background:var(--surface-2); color:var(--heading); }
.content td:first-child { white-space:nowrap; }
.content code { background:var(--surface-2); padding:.1rem .35rem; border-radius:6px; }
.content pre { background:var(--surface-2); padding:.9rem 1rem; overflow:auto; border-radius:10px; }
.content pre code { background:none; padding:0; }
.content blockquote { margin:1rem 0; padding:.4rem 1.1rem; border-left:4px solid var(--blue); background:var(--quote-bg); border-radius:0 10px 10px 0; }
.content hr { border:0; border-top:1px solid var(--line); }

/* ---------- Startseite ---------- */
.content.home { padding:0; overflow:hidden; }
.hero { position:relative; overflow:hidden; background:var(--hero); color:#fff; padding:2.4rem 2.25rem 2.6rem; }
.hero::before, .hero::after { content:""; position:absolute; border-radius:50%; background:rgba(255, 255, 255, .08); }
.hero::before { width:280px; height:280px; right:-70px; top:-90px; }
.hero::after { width:150px; height:150px; right:150px; bottom:-80px; background:rgba(255, 255, 255, .06); border:3px solid rgba(242, 145, 0, .55); background:transparent; }
.hero > * { position:relative; z-index:1; }
.content .hero h1 { color:#fff; margin:0 0 .5rem; font-size:2rem; max-width:34ch; line-height:1.15; }
.content .hero h1::after { display:none; }
.hero p { margin:0; font-size:1.08rem; opacity:.92; max-width:60ch; }
.greet { display:inline-block; background:rgba(255, 255, 255, .18); padding:.25rem .85rem; border-radius:999px; font-size:.9rem; margin-bottom:.9rem; }
.homebody { padding:1.6rem 2.25rem 2.25rem; }
.homebody h2:first-child { margin-top:0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:1rem; margin:.8rem 0 1.8rem; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem 1rem; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.content .tile h3 { display:flex; align-items:center; gap:.65rem; margin:0 0 .6rem; font-size:1.05rem; }
.tile .ico { display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:10px; background:var(--surface-2); color:var(--primary); flex:none; }
.tile .ico svg { width:1.3rem; height:1.3rem; }
.tile ul { list-style:none; margin:0; padding:0; }
.tile li a { display:block; padding:.28rem 0; color:var(--link); text-decoration:none; }
.tile li a:hover { text-decoration:underline; }
.tile .more { margin-top:.3rem; background:none; border:0; padding:.2rem 0; color:var(--muted); cursor:pointer; font:inherit; font-size:.88rem; }
.tile .more:hover { color:var(--link); }
.news { margin:0 0 1.8rem; padding:1.1rem 1.3rem; border-radius:14px; background:var(--quote-bg); border:1px solid var(--line); }
.content .news h2 { margin:0 0 .6rem; font-size:1.15rem; }
.news ul { list-style:none; margin:0; padding:0; }
.news li { display:flex; gap:.9rem; align-items:baseline; padding:.35rem 0; border-top:1px solid var(--line); }
.news li:first-child { border-top:0; }
.news time { color:var(--muted); font-size:.88rem; white-space:nowrap; }
.news a { font-weight:600; text-decoration:none; }
.news a:hover { text-decoration:underline; }
.news .all { display:inline-block; margin-top:.5rem; font-size:.92rem; }

/* ---------- Blog und eigenständige Seiten ---------- */
.blog { width:90%; margin:1.25rem auto; min-height:50vh; line-height:1.6; }
.blog h1 { margin:0 0 1rem; font-size:1.85rem; font-weight:750; letter-spacing:-.015em; color:var(--heading); }
.page { width:90%; margin:1.25rem auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 2.25rem; box-shadow:var(--shadow); min-height:50vh; line-height:1.6; }
.page h1 { margin-top:0; color:var(--heading); }
.post { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.5rem 1.75rem; margin:0 0 1.1rem; box-shadow:var(--shadow); transition:box-shadow .15s, transform .15s; }
.post:hover { box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.post h2 { margin:0 0 .2rem; font-size:1.4rem; color:var(--heading); }
.post time { color:var(--muted); font-size:.9rem; display:block; margin-bottom:.6rem; }
.blog img, .page img { max-width:100%; height:auto; border-radius:10px; }
.blog table { border-collapse:collapse; } .blog th, .blog td { border:1px solid var(--line); padding:.4rem .6rem; }
.loginbox { max-width:380px; margin:2rem auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem 1.8rem; box-shadow:var(--shadow); }
.loginbox h1 { font-size:1.5rem; }
.loginbox label { display:block; font-weight:600; margin:.7rem 0 .25rem; }
.loginbox input { width:100%; padding:.6rem .8rem; font:inherit; border:1px solid var(--line); border-radius:10px; background:var(--input-bg); color:var(--text); }
.loginbox input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--ring); }
.loginbox .go { margin-top:1rem; background:var(--primary); color:#fff; border:0; border-radius:10px; padding:.65rem 1.5rem; font:inherit; font-weight:600; cursor:pointer; transition:background .15s; }
.loginbox .go:hover { background:var(--primary-hover); }
.err { color:var(--err-text); min-height:1.3em; }

/* Tags */
.tagbar { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 1.2rem; }
.tags { display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 .7rem; }
.tag { font:inherit; font-size:.85rem; padding:.15rem .75rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--link); cursor:pointer; transition:background .12s; }
.tag small { margin-left:.4rem; color:var(--muted); }
.tag:hover { background:var(--hover); }
.tag.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.tag.on small { color:#fff; opacity:.85; }

/* ---------- Kalender ---------- */
.cal { margin:1rem 0; }
.cal-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem; }
.cal-bar button { font:inherit; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); padding:.35rem .8rem; cursor:pointer; transition:background .12s; }
.cal-bar button:hover { background:var(--hover); }
.cal-bar button.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.cal-bar .cal-nav { font-size:1.2rem; padding:.1rem .75rem; }
.cal-title { min-width:9rem; text-align:center; font-size:1.1rem; color:var(--heading); }
.cal-spacer { flex:1; }
.cal-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; font-size:.9rem; }
.cal-legend i { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; margin-right:.35rem; vertical-align:-1px; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:12px; overflow:hidden; }
.cal-dow { background:var(--surface-2); color:var(--heading); font-weight:650; text-align:center; padding:.45rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-cell { min-height:6.2rem; padding:.25rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.cal-cell.other { background:var(--surface-3); color:var(--muted); }
.cal-cell.today .cal-num { background:var(--accent); color:#1b1200; font-weight:700; border-radius:50%; }
.cal-num { display:inline-block; min-width:1.6rem; padding:.05rem 0; text-align:center; font-size:.85rem; }
.cal-chip { display:block; width:100%; text-align:left; margin-top:2px; padding:2px 6px; font:inherit; font-size:.78rem; border:0; border-left:3px solid var(--blue); border-radius:5px; background:var(--chip-bg); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:filter .12s; }
.cal-chip:hover { filter:brightness(.95); }
.cal-chip small { color:var(--muted-2); }
.cal-more { display:block; margin-top:2px; padding:0 4px; font:inherit; font-size:.75rem; color:var(--link); background:none; border:0; cursor:pointer; text-decoration:underline; }
.cal-list section { margin-bottom:.8rem; }
.cal-list h4 { margin:.9rem 0 .3rem; }
.cal-event { display:block; width:100%; text-align:left; font:inherit; border:0; border-left:4px solid var(--blue); border-radius:8px; background:var(--event-bg); color:var(--text); padding:.5rem .8rem; margin:.3rem 0; cursor:pointer; transition:background .12s; }
.cal-event:hover { background:var(--event-hover); }
.cal-when { margin-left:.7rem; color:var(--muted-2); }
.cal-error { color:var(--err-text); } .cal-empty { color:var(--muted); }
.ov-backdrop { position:fixed; inset:0; background:rgba(10, 30, 50, .55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:1000; }
.ov-modal { position:relative; background:var(--surface); color:var(--text); max-width:480px; width:100%; max-height:85vh; overflow:auto; padding:1.5rem 1.7rem 1.6rem; border-radius:var(--radius-lg); border-top:5px solid var(--primary); box-shadow:0 18px 50px rgba(0, 0, 0, .4); }
.ov-modal h3 { margin:0 2rem .9rem 0; color:var(--heading); font-size:1.25rem; overflow-wrap:anywhere; }
.ov-close { position:absolute; top:.5rem; right:.7rem; font-size:1.7rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--muted-2); padding:.1rem .45rem; border-radius:8px; }
.ov-close:hover { color:var(--text); background:var(--hover); }
.cal-facts { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; }
.cal-facts dt { font-weight:650; color:var(--muted-2); } .cal-facts dd { margin:0; overflow-wrap:anywhere; }
.cal-dayrows { min-width:min(100%, 320px); }

/* ---------- Ticket-Formular und Anmeldung ---------- */
.tf { max-width:720px; }
.tf h1, .tf h2 { margin-top:0; color:var(--heading); }
.tf-tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.tf-tabs button { font:inherit; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); padding:.45rem 1.1rem; cursor:pointer; transition:background .12s; }
.tf-tabs button:hover { background:var(--hover); }
.tf-tabs button.on { background:var(--primary); border-color:var(--primary); color:#fff; }
.tf-field { margin-bottom:1rem; }
.tf label { display:block; font-weight:600; margin-bottom:.3rem; }
.tf input:not([type=file]):not([type=hidden]), .tf select, .tf textarea { width:100%; padding:.6rem .8rem; font:inherit; border:1px solid var(--line); background:var(--input-bg); color:var(--text); border-radius:10px; transition:border-color .12s, box-shadow .12s; }
.tf input:focus, .tf select:focus, .tf textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--ring); }
.tf .invalid { border-color:var(--err-text) !important; }
.tf fieldset { border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; margin:1.1rem 0; }
.tf fieldset input[type=file] { display:block; margin:.35rem 0; }
.tf .hp { position:absolute; left:-9999px; }
.tf-send { background:var(--primary); color:#fff; border:0; border-radius:10px; padding:.75rem 1.8rem; font:inherit; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(11, 98, 168, .3); transition:background .15s, transform .12s; }
.tf-send:hover:not(:disabled) { background:var(--primary-hover); transform:translateY(-1px); }
.tf-send:disabled { opacity:.6; cursor:wait; }
.tf-msg { min-height:1.4em; margin:.4rem 0; }
.tf-err { color:var(--err-text); } .tf-ok { color:var(--ok-text); font-weight:700; }
.tf-embed { margin:1rem 0; }
.loginform { max-width:360px; }
.loginform input { margin-bottom:.4rem; }
svg.bigicon { width:1.5rem; height:1.5rem; margin-right:.5rem; vertical-align:-3px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:800px) {
  .top { position:static; flex-wrap:wrap; gap:.6rem .8rem; padding:.7rem 1rem; }
  .brand { flex:1 1 auto; }
  .title { font-size:1.25rem; }
  #search { order:5; flex:1 1 100%; width:100%; }
  .hero::before, .hero::after { display:none; }
  .layout { display:block; width:auto; }
  .nav { display:none; width:auto; padding:1rem 1rem 0; }
  .nav.open, body.nav-collapsed .nav.open { display:block; }
  .content, .page { margin:.75rem; padding:1.25rem; }
  .content.home { padding:0; }
  .hero { padding:1.6rem 1.25rem 1.8rem; }
  .content .hero h1 { font-size:1.6rem; }
  .homebody { padding:1.2rem 1.25rem 1.6rem; }
  .blog { width:auto; margin:.75rem; }
  .whoami { display:none; }
  .claim { display:none; }
}
@media (max-width:700px) { .cal-cell { min-height:4rem; } .cal-chip small { display:none; } }

/* ---------- Telefonliste ---------- */
.pb-bar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 1rem; }
.pb-search { flex:1 1 280px; max-width:520px; padding:.7rem 1rem; border:1px solid var(--line); border-radius:999px; font:inherit; background:var(--input-bg); color:var(--text); }
.pb-search:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--ring); }
.pb-count { color:var(--muted); font-size:.92rem; }
.pb-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.content .pb-table { width:100%; margin:0; border:0; border-collapse:collapse; font-size:.95rem; }
.pb-table th { padding:0; background:var(--surface-2); border-bottom:1px solid var(--line); text-align:left; vertical-align:bottom; }
.pb-sort { display:block; width:100%; text-align:left; padding:.65rem .75rem; border:0; background:none; color:var(--heading); font:inherit; font-weight:650; cursor:pointer; }
.pb-sort:hover { background:var(--hover); }
.pb-table th[aria-sort="ascending"] .pb-sort::after { content:"\a0▲"; font-size:.7em; }
.pb-table th[aria-sort="descending"] .pb-sort::after { content:"\a0▼"; font-size:.7em; }
.content .pb-table td { padding:.55rem .75rem; border:0; border-bottom:1px solid var(--line); white-space:normal; overflow-wrap:anywhere; vertical-align:top; }
.pb-table tbody tr:last-child td { border-bottom:0; }
.pb-table tbody tr:hover td { background:var(--hover); }
.pb-table td a { color:var(--link); text-decoration:none; }
.pb-table td a:hover { text-decoration:underline; }
.pb-table td:nth-child(3), .pb-table td:nth-child(4) { white-space:nowrap; }
.pb-empty { text-align:center; color:var(--muted); padding:1.5rem !important; }
.pb-note { color:var(--muted); font-size:.85rem; margin:.6rem 0 0; }
.pb-err { color:var(--err-text); }
@media (max-width:700px) {
  .pb-scroll { border:0; overflow:visible; }
  .pb-table thead { display:none; }
  .pb-table, .pb-table tbody, .pb-table tr, .pb-table td { display:block; width:100%; }
  .pb-table tr { border:1px solid var(--line); border-radius:12px; margin:0 0 .7rem; padding:.4rem .2rem; background:var(--surface); }
  .content .pb-table td { display:flex; gap:.8rem; padding:.3rem .8rem; border:0; white-space:normal; }
  .pb-table td:empty { display:none; }
  .pb-table td::before { content:attr(data-label); flex:0 0 7.5rem; color:var(--muted); font-size:.85rem; }
}
.login-hint { margin:0 0 .9rem; color:var(--text); }
.login-intro { margin:0 0 .5rem; color:var(--muted-2); }
.ov-modal .loginform { max-width:none; }

/* App installieren (Fußzeile) */
footer .linkbtn { margin-left:1rem; background:none; border:0; padding:0; color:var(--link); font:inherit; cursor:pointer; text-decoration:underline; }
footer .linkbtn[hidden] { display:none; }
.offline { margin-top:3rem; text-align:center; }
.tf-send.retry { display:inline-block; text-decoration:none; }
.top .logo { width:44px; height:44px; flex:none; }
@media (max-width:800px) { .top .logo { width:36px; height:36px; } }

/* Eingebettete externe Seiten */
.embed { margin:1rem 0; }
.embed-frame { display:block; width:100%; height:calc(100vh - 280px); min-height:480px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.embed-note { margin:.5rem 0 0; font-size:.88rem; color:var(--muted); }
.embed-placeholder { padding:.7rem 1rem; border:1px dashed var(--line); color:var(--muted); border-radius:10px; overflow-wrap:anywhere; }