/* SKG Meldeformular – WCAG 2.1 AA. Helles, kontrastreiches Theme. */

:root{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --ink:#1a1d24;        /* 14:1 auf surface */
  --muted:#54596b;      /* 6.8:1 auf surface */
  --line:#c3c8d4;
  --primary:#1d4ed8;    /* 6.3:1 auf weiss; per Config ueberschreibbar */
  --primary-ink:#ffffff;
  /* Hover wird aus der (ggf. konfigurierten) Primaerfarbe abgeleitet */
  --primary-hover:color-mix(in srgb, var(--primary), #000 14%);
  --focus:#b54708;      /* kraeftiger Fokusring */
  --req:#b42318;
  --ok-bg:#e7f6ec;
  --ok-ink:#1a5e34;
  --err-bg:#fdecea;
  --err-ink:#b42318;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px;}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;
  padding:8px 14px;z-index:100;
}
.skip-link:focus{left:8px;top:8px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}

#kopf{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
#kopf-brand{display:flex;align-items:center;gap:10px;min-width:0;}
#kopf-logo{height:28px;width:auto;max-width:160px;object-fit:contain;}
#kopf-titel{font-weight:700;}
#kopf-melder{color:var(--muted);font-size:14px;}

#main{flex:1;display:flex;flex-direction:column;min-height:0;}
.screen{flex:1;display:flex;flex-direction:column;}
.screen[hidden]{display:none;}

/* Boxen-Layout (Login, Mode, Form, Done) */
#screen-login,#screen-mode,#screen-form,#screen-preview,#screen-done{
  align-items:center;justify-content:flex-start;overflow-y:auto;padding:32px 20px;
}
.box{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:28px;width:100%;max-width:520px;
}
.box.wide{max-width:760px;}
.box-titel{font-size:24px;margin-bottom:8px;}
.box-text{color:var(--muted);margin-bottom:18px;}

/* Felder */
.feld{margin-bottom:16px;min-width:0;}
.feld label{display:block;font-weight:600;margin-bottom:6px;}
.feld input,.feld textarea,.feld select{
  width:100%;padding:10px 12px;font-size:16px;font-family:inherit;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;
}
.feld textarea{resize:vertical;min-height:84px;}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--focus);}
.feld input.invalid,.feld textarea.invalid{border-color:var(--req);background:var(--err-bg);}
.feld .hilfe{color:var(--muted);font-size:13px;margin-top:4px;}
.feld-check .check-label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;}
.feld-check input[type=checkbox]{width:18px;height:18px;flex:none;}

/* SKG-Suche & Verknüpfung (Veranstalter/Ort) */
.link-search{margin-bottom:14px;}
.link-search input[type=search]{width:100%;padding:10px 12px;font-size:16px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);}
.link-search input[type=search]:focus{border-color:var(--focus);}
.link-results{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.link-result{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;}
.link-result:hover{border-color:var(--primary);background:var(--bg);}
.link-result-name{font-weight:600;}
.link-result-sub{font-size:13px;color:var(--muted);}
.link-hint{font-size:13px;color:var(--muted);padding:6px 2px;}
.linked-card{border:1px solid var(--ok-ink);background:var(--ok-bg);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.linked-badge{font-size:13px;font-weight:600;color:var(--ok-ink);}
.linked-name{font-weight:700;}
.linked-sub{font-size:14px;color:var(--ink);}
.linked-card .btn-sek{align-self:flex-start;margin-top:6px;}

/* Bild-Upload (Bestätigungsscreen) */
.upload-h{font-size:18px;margin:22px 0 6px;}
.upload-list{display:flex;flex-direction:column;gap:16px;margin:12px 0;}
.upload-card{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface);}
.upload-card .feld{margin-bottom:10px;}
.upload-card select{width:100%;padding:9px 10px;font-size:16px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);}
.feld-stack{display:flex;flex-direction:column;gap:6px;}
.lizenz-hilfe{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 12px;}
.lizenz-hilfe summary{cursor:pointer;color:var(--primary);font-weight:600;}
.lizenz-hilfe p{margin:8px 0;font-size:14px;}
.lizenz-hilfe .lizenz-hilfe-h{font-weight:700;color:var(--ink);margin-top:10px;}
.lizenz-dl{margin:6px 0 2px;}
.lizenz-dl dt{font-weight:600;margin-top:8px;}
.lizenz-dl dd{margin:0;font-size:14px;color:var(--muted);}
.upload-status{margin-top:8px;font-size:14px;}
.upload-status.ok{color:var(--ok-ink);font-weight:600;}
.upload-status.err{color:#b42318;font-weight:600;}

.btn-wand{margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;
  font-weight:600;color:var(--primary);background:var(--surface);border:1px solid var(--primary);
  border-radius:8px;cursor:pointer;}
.btn-wand:hover:not(:disabled){background:var(--primary);color:#fff;}
.btn-wand:disabled{opacity:.6;cursor:default;}
.ki-hinweis{margin-top:6px;font-size:13px;color:var(--muted);}
.ki-hinweis.ok{color:var(--ok-ink);font-weight:600;}
.ki-hinweis.err{color:#b42318;}

.req{color:var(--req);margin-left:2px;}
.opt{color:var(--muted);font-weight:400;font-size:13px;}
.fehler{color:var(--err-ink);font-size:14px;margin-top:6px;}
.zaehler{color:var(--muted);font-size:12px;margin-top:4px;text-align:right;}
.zaehler.over{color:var(--err-ink);font-weight:600;}
.zaehler.ok{color:var(--ok-ink);font-weight:600;}

/* Formular-Sektionen + mehrspaltiges Layout (breite Schirme) */
#screen-form .box{max-width:880px;}
.form-section{border:0;padding:0;margin:0 0 22px;min-width:0;}
.form-legend{
  font-size:15px;font-weight:700;color:var(--ink);width:100%;
  padding:0 0 6px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.form-row{display:grid;gap:0 16px;}
.form-row.cols-2{grid-template-columns:1fr 1fr;}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:600px){
  .form-row.cols-2,.form-row.cols-3{grid-template-columns:1fr;}
}

/* Buttons */
.btn-primary{
  background:var(--primary);color:var(--primary-ink);border:0;border-radius:8px;
  padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;
}
.btn-primary:hover{background:var(--primary-hover);}
.btn-primary:disabled{background:#9aa3b8;cursor:not-allowed;}
button{font-family:inherit;}
.btn-sek{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;cursor:pointer;font-size:14px;
}
.btn-sek:hover{border-color:var(--muted);}

/* Wechsel zwischen KI-Dialog und Formular */
.mode-switch{margin-bottom:14px;}
.mode-switch .btn-sek{font-size:13px;}

/* Variantenwahl */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mode-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--surface);border:2px solid var(--line);border-radius:12px;
  padding:20px;cursor:pointer;
}
.mode-card:hover{border-color:var(--primary);}
.mode-card-titel{font-size:18px;font-weight:700;}
.mode-card-text{color:var(--muted);font-size:14px;}

/* KI-Dialog Split-Layout */
.split{flex-direction:row;min-height:0;}
.ki-main{flex:1;display:flex;flex-direction:column;min-width:0;padding:16px;}
#chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px;}
.bubble{max-width:80%;padding:10px 14px;border-radius:12px;}
.bubble.user{align-self:flex-end;background:var(--primary);color:#fff;}
.bubble.assistant{align-self:flex-start;background:#eef1f6;color:var(--ink);}
.bubble.thinking{color:var(--muted);font-style:italic;}
.bubble.thinking .dots::after{content:'';animation:thinking-dots 1.2s steps(1,end) infinite;}
@keyframes thinking-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
@media (prefers-reduced-motion: reduce){.bubble.thinking .dots::after{content:'…';animation:none;}}
#ki-eingabe{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;}
#import-row{display:flex;gap:8px;flex-wrap:wrap;}
#import-row input[type=url]{flex:1;min-width:180px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;}
#text-row{display:flex;gap:8px;}
#text-row textarea{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;resize:vertical;font-family:inherit;font-size:16px;}
#send-btn{width:48px;font-size:20px;background:var(--primary);color:#fff;border:0;border-radius:8px;cursor:pointer;}
#file-status{align-self:center;color:var(--muted);font-size:13px;}

.ki-side{
  width:340px;border-left:1px solid var(--line);background:var(--surface);
  padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}

/* Fortschritt */
.progress h2{font-size:15px;margin-bottom:8px;}
.progress ul{list-style:none;display:flex;flex-direction:column;gap:4px;}
.progress li{display:flex;align-items:center;gap:8px;font-size:14px;}
.progress .mark{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.progress li.done .mark{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff;}
.progress li.done{color:var(--muted);}
.badge-ok{display:inline-block;background:var(--ok-bg);color:var(--ok-ink);padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin-top:8px;}

/* eventSchedule – Karten mit Einzelfeldern */
.sched h2{font-size:16px;margin-bottom:4px;}
.sched-hint{color:var(--muted);font-size:13px;margin-bottom:12px;}
.sched-card{
  border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:var(--surface);
}
.sched-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;}
.sched-card-titel{font-size:15px;font-weight:700;padding:0;}
.sched-allday{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.sched-allday label{font-weight:600;font-size:14px;}
.sched-allday input{width:18px;height:18px;}
.sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.sched-field{display:flex;flex-direction:column;gap:4px;}
.sched-field-wide{grid-column:1 / -1;}
.sched-field label{font-size:13px;font-weight:600;color:var(--muted);}
.sched-field input,.sched-field select{
  padding:8px 10px;font-size:15px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.sched-field input:focus,.sched-field select:focus{border-color:var(--focus);}
.sched-recur{margin-top:12px;display:flex;flex-direction:column;gap:4px;}
.sched-recur > label{font-size:13px;font-weight:600;color:var(--muted);}
.sched-recur > select{
  padding:8px 10px;font-size:15px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.sched-recur > select:focus{border-color:var(--focus);}
.sched-recur-custom{
  margin-top:10px;padding:12px;background:var(--bg);border-radius:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
}

@media (max-width:520px){
  .sched-grid,.sched-recur-custom{grid-template-columns:1fr;}
}
/* In der schmalen KI-Sidebar immer einspaltig (haengt an Container-, nicht Fensterbreite) */
#schedule-ki .sched-grid,#schedule-ki .sched-recur-custom{grid-template-columns:1fr;}

/* Vorschau vor dem Absenden */
.pv-block{margin-bottom:22px;}
.pv-h{font-size:16px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--line);}
.pv-dl{display:flex;flex-direction:column;gap:7px;}
.pv-row{display:grid;grid-template-columns:170px 1fr;gap:2px 14px;}
.pv-row dt{font-weight:600;color:var(--muted);}
.pv-row dd{margin:0;overflow-wrap:anywhere;}
.pv-termin{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:var(--bg);}
.pv-th{font-size:14px;font-weight:700;margin-bottom:8px;}
#preview-captcha:not(:empty){margin:18px 0;}
.preview-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;}

dl#done-detail{margin:8px 0 16px;}
dl#done-detail dt{font-weight:600;}
dl#done-detail dd{margin:0 0 10px;color:var(--muted);}
dl#done-detail dd.dd-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
dl#done-detail dd.dd-id code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink);overflow-wrap:anywhere;}
.btn-copy{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:13px;}
.btn-copy:hover{border-color:var(--primary);}

.banner-err{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-ink);border-radius:8px;padding:10px 14px;margin-bottom:14px;}

@media (max-width:760px){
  .mode-grid{grid-template-columns:1fr;}
  /* KI-Dialog: gesamter Screen scrollt, Chat begrenzt -> nichts wird abgeschnitten */
  .split{flex-direction:column;overflow-y:auto;}
  .ki-main{flex:none;padding:12px;}
  #chat{flex:none;min-height:200px;max-height:48vh;}
  .ki-side{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible;}
  /* Kompaktere Abstaende auf kleinen Screens */
  #screen-login,#screen-mode,#screen-form,#screen-preview,#screen-done{padding:18px 12px;}
  .box{padding:18px;border-radius:10px;}
  .box-titel{font-size:21px;}
  #kopf{padding:10px 14px;}
  #kopf-melder{font-size:13px;}
  /* Aktionen volle Breite und gut tippbar */
  .preview-actions{flex-direction:column-reverse;}
  .preview-actions .btn-primary,.preview-actions .btn-sek{width:100%;padding:13px 16px;}
  .btn-primary{width:100%;}
  .pv-row{grid-template-columns:1fr;gap:0;}
  .pv-row dt{margin-top:2px;}
}