/* Interner Bereich lichtbreust.de/intern - dunkel, ruhig, gut lesbar auch am Handy. */
:root { --bg:#1F1820; --bg2:#2A222C; --bg3:#352c38; --gold:#B0A489; --text:#e9e4da; --leise:#a59d90; --gut:#8fc58f; --schlecht:#e08a7a; --linie:#4a4050; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.intern { margin:0; background:var(--bg); color:var(--text); font-family:UniversLTPro-55Roman, system-ui, sans-serif; font-size:17px; line-height:1.55; }
body.intern a { color:var(--gold); }
body.intern h1 { font-family:UniversLTPro-45Light, UniversLTPro-55Roman, sans-serif; font-weight:normal; font-size:30px; color:#fff; margin:26px 0 18px; }
body.intern h2 { font-weight:normal; font-size:21px; color:#fff; margin:30px 0 10px; }
body.intern h3 { font-weight:normal; font-size:17px; color:var(--gold); margin:18px 0 6px; }
.kopf { display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; padding:12px 20px; background:var(--bg2); border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:5; }
.kopf .logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gold); }
.kopf .logo img { height:26px; width:auto; }
.kopf nav { display:flex; flex-wrap:wrap; gap:4px 16px; flex:1; }
.kopf nav a { text-decoration:none; color:var(--text); padding:4px 0; border-bottom:2px solid transparent; }
.kopf nav a:hover, .kopf nav a.aktiv { border-bottom-color:var(--gold); color:#fff; }
.wer { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-size:15px; color:var(--leise); }
.wer form { margin:0; display:inline; }
button.link, .link { background:none; border:0; color:var(--gold); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
main { max-width:860px; margin:0 auto; padding:6px 20px 80px; }
main.breit { max-width:1180px; }
.knopf, button.knopf, a.knopf { display:inline-block; background:var(--gold); color:#1F1820 !important; border:0; border-radius:3px; padding:10px 20px; font:inherit; cursor:pointer; text-decoration:none; }
.knopf:hover { background:#c5ba9f; }
.knopf.zweit { background:transparent; color:var(--gold) !important; border:1px solid var(--gold); }
.knopf.zweit:hover { background:var(--bg3); }
.leiste { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:16px 0; }
.leise, small { color:var(--leise); font-size:15px; }
.hinweis { padding:12px 16px; border-left:4px solid var(--gold); background:var(--bg2); margin:14px 0; }
.hinweis.gut { border-left-color:var(--gut); }
.hinweis.fehler { border-left-color:var(--schlecht); color:#f4c9c0; }
.bau { font-size:14px; color:var(--leise); margin:6px 0 14px; }
.kacheln { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:14px 0 22px; }
.kachel { background:var(--bg2); border:1px solid var(--linie); border-radius:4px; padding:14px 16px; display:flex; flex-direction:column; text-decoration:none; color:var(--text); }
.kachel b { font-weight:normal; font-size:30px; color:#fff; line-height:1.2; }
.kachel span { color:var(--leise); font-size:15px; }
a.kachel:hover { border-color:var(--gold); }
.delta { font-size:13px !important; } .delta.plus { color:var(--gut) !important; } .delta.minus { color:var(--schlecht) !important; }
.liste { list-style:none; margin:10px 0; padding:0; }
.liste li { padding:9px 0; border-bottom:1px solid var(--linie); }
.spalten, .zweispaltig { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:10px 36px; }
.gruppe { margin:22px 0; }
.seitenliste { list-style:none; margin:8px 0; padding:0; }
.seitenliste li { padding:8px 0; border-bottom:1px solid var(--linie); display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; }
.f { display:block; margin:16px 0; }
.f.breit { max-width:none; }
.f > span, .f > label { display:block; color:var(--gold); font-size:15px; margin-bottom:4px; }
.f small { display:block; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=search], select, textarea {
  width:100%; background:var(--bg2); color:var(--text); border:1px solid var(--linie); border-radius:3px; padding:10px 12px; font:inherit; }
textarea { min-height:110px; resize:vertical; line-height:1.5; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--gold); outline-offset:0; }
input[type=file] { color:var(--leise); }
.haken { display:flex; gap:10px; align-items:center; margin:10px 0; }
.haken input { width:20px; height:20px; accent-color:var(--gold); }
.reihe { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; }
.reihe > * { flex:1 1 140px; }
.bilder { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin:12px 0; }
.bilder figure { margin:0; background:var(--bg2); padding:6px; border-radius:3px; font-size:13px; color:var(--leise); }
.bilder figure img { width:100%; height:110px; object-fit:cover; display:block; }
.bilder figure.weg img { opacity:.35; }
.hochladen { border:1px dashed var(--gold); padding:16px; border-radius:4px; margin:14px 0; }
.werkzeug { background:var(--bg2); border:1px solid var(--linie); padding:10px 14px; border-radius:4px; margin:10px 0; }
pre.diff { background:#150f16; padding:14px; overflow:auto; font-size:14px; line-height:1.45; white-space:pre-wrap; border-radius:3px; }
table { border-collapse:collapse; width:100%; margin:10px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--linie); vertical-align:top; }
th { color:var(--gold); font-weight:normal; font-size:15px; }
td.zahl, th.zahl { text-align:right; white-space:nowrap; }
table.zeiten td { padding:6px 8px; } table.zeiten input { padding:7px 8px; }
table.stat td.balkenzelle { width:38%; } .balken { display:block; height:10px; background:var(--gold); border-radius:2px; }
.zeitwahl { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; }
.zeitwahl a { padding:5px 14px; border:1px solid var(--linie); border-radius:20px; text-decoration:none; color:var(--text); }
.zeitwahl a.aktiv { background:var(--gold); color:#1F1820; border-color:var(--gold); }
svg.verlauf { width:100%; height:auto; max-height:260px; display:block; margin:8px 0; }
svg.verlauf text { fill:var(--leise); font-size:11px; }
svg.verlauf .s { fill:var(--gold); } svg.verlauf .we { fill:#7d745f; } svg.verlauf .ax { stroke:var(--linie); stroke-width:1; }
.anmeldung { max-width:420px; margin:70px auto; padding:0 20px; }
.schnell { display:flex; flex-wrap:wrap; gap:10px; }
.msg { white-space:pre-wrap; background:var(--bg2); padding:12px 14px; border-radius:3px; }
form { margin:0; }
@media (max-width:640px) { body.intern { font-size:16px; } .kopf { position:static; } main { padding:0 16px 70px; } }

/* ---- Anmeldung: Auswahl der Person ---- */
.anmeldung fieldset.wahl { border: 0; margin: 0 0 8px; padding: 0; }
.anmeldung legend { color: var(--gold); font-size: 15px; padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: block; padding: 10px 20px; border: 1px solid var(--linie); border-radius: 22px; background: var(--bg2); color: var(--text); transition: background-color .2s, border-color .2s; }
.chip:hover span { border-color: var(--gold); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: #1F1820; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Blog-Maske: sieht aus wie der leuchtblog ---- */
main.blogseite { max-width: 1060px; }
.blog-hilfe { max-width: 62ch; margin: 0 0 30px; }
h2.nur-lesbar { position: absolute; left: -9999px; }
h2.trenner { font-size: 15px; letter-spacing: .08em; text-transform: lowercase; color: var(--leise); margin: 56px 0 26px; padding-top: 22px; border-top: 1px solid var(--linie); }
.blog-eintrag { margin: 0 0 40px; scroll-margin-top: 90px; }
.blog-eintrag > form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.bildfeld { position: relative; display: block; cursor: pointer; border-radius: 12px; overflow: hidden; background: #3a3438; min-height: 120px; }
.bildfeld.leer { aspect-ratio: 4 / 3; background: linear-gradient(150deg, #403a43, #2f2a32); border: 1px dashed rgba(255,255,255,.28); }
.bildfeld img { display: block; width: 100%; height: auto; }
.bildfeld .datei { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.bildfeld .platz { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--leise); font-size: 17px; letter-spacing: .03em; text-transform: lowercase; }
.bildfeld.leer .platz { display: flex; }
.bildfeld .platz b { font-weight: normal; font-size: 44px; line-height: 1; color: var(--gold); }
.bildfeld .wechseln { position: absolute; left: 12px; bottom: 12px; padding: 6px 14px; border-radius: 16px; background: rgba(31,24,32,.82); color: #fff; font-size: 14px; opacity: 0; transition: opacity .2s; text-transform: lowercase; }
.bildfeld:hover .wechseln, .bildfeld:focus-within .wechseln { opacity: 1; }
.bildfeld.leer .wechseln { display: none; }
.bildfeld:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.panel { background: linear-gradient(150deg, rgba(255,255,255,.115), rgba(255,255,255,.04) 42%, rgba(255,255,255,.075)); border: 1px solid rgba(255,255,255,.13); border-top-color: rgba(255,255,255,.3);
  border-radius: 5px; padding: 30px 34px 24px; box-shadow: 0 14px 44px rgba(0,0,0,.38); }
.panel .titel, .panel .freitext, .panel .credits { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; padding: 2px 0; margin: 0; color: inherit; font-family: inherit; }
.panel .titel { font-size: 32px; line-height: 38px; color: #B0A489; text-transform: lowercase; margin-bottom: 14px; }
.panel .freitext { font-size: 19px; line-height: 28px; color: #e9e4da; min-height: 150px; resize: none; overflow: hidden; }
.panel .credits { font-size: 12px; line-height: 16px; letter-spacing: .03em; color: #8a8a8a; margin-top: 12px; padding: 5px 0; }
.panel .titel::placeholder, .panel .freitext::placeholder, .panel .credits::placeholder { color: rgba(255,255,255,.3); }
.panel input:hover, .panel textarea:hover { border-bottom-color: rgba(255,255,255,.18); }
.panel input:focus, .panel textarea:focus { outline: 0; border-bottom-color: var(--gold); background: rgba(255,255,255,.04); }
.panel .aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; }
.panel .marke { color: var(--schlecht); font-size: 13px; letter-spacing: .04em; }
.blog-eintrag.verborgen { opacity: .6; }
.blog-eintrag.neu .panel { border-color: var(--gold); }
#neu .panel { border-color: rgba(176,164,137,.5); }
@media (max-width: 760px) { .blog-eintrag > form { grid-template-columns: 1fr; } .panel { padding: 22px 20px 20px; } .panel .titel { font-size: 24px; line-height: 30px; } .panel .freitext { font-size: 18px; line-height: 26px; } }

/* ---- Fragen der Startseite: Kacheln verschieben ---- */
main.fragenseite { max-width: 1100px; }
.faqraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 12px 0 26px; }
.faq { position: relative; background: linear-gradient(150deg, rgba(255,255,255,.1), rgba(255,255,255,.035) 42%, rgba(255,255,255,.07)); border: 1px solid rgba(255,255,255,.13);
  border-top-color: rgba(255,255,255,.28); border-radius: 5px; padding: 14px 20px 18px; transition: transform .2s, box-shadow .2s, opacity .2s; }
.faq.zieht { opacity: .45; }
.faq.ziel { box-shadow: 0 0 0 2px var(--gold); }
.faq .ctrl { display: flex; align-items: center; gap: 6px; margin: 0 -6px 6px; color: var(--leise); }
.faq .griff { cursor: grab; font-size: 22px; line-height: 1; padding: 4px 8px; user-select: none; }
.faq .pfeil { background: transparent; border: 1px solid var(--linie); color: var(--gold); border-radius: 14px; width: 36px; height: 28px; cursor: pointer; font: inherit; line-height: 1; }
.faq .pfeil:hover { border-color: var(--gold); background: var(--bg3); }
.faq textarea { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #e9e4da; font-family: inherit; padding: 3px 0; resize: none; overflow: hidden; border-radius: 0; }
.faq textarea.kopf { font-size: 21px; line-height: 27px; color: #B0A489; margin-bottom: 6px; }
.faq textarea.korpus { font-size: 17px; line-height: 26px; }
.faq textarea:hover { border-bottom-color: rgba(255,255,255,.18); }
.faq textarea:focus { outline: 0; border-bottom-color: var(--gold); background: rgba(255,255,255,.04); }
.faq .festtitel { margin: 0 0 6px; font-size: 21px; line-height: 27px; color: #B0A489; text-transform: lowercase; }
@media (max-width: 760px) { .faqraster { grid-template-columns: 1fr; } }
.blog-hilfe summary { cursor: pointer; display: inline-block; color: var(--gold); margin-top: 6px; }
.blog-hilfe details { margin-top: 4px; }
main:has(> .anmeldung) > h1 { max-width: 420px; margin: 56px auto 0; padding: 0 20px; }
main:has(> .anmeldung) > .anmeldung { margin-top: 24px; }