/* styles2.css — Lehrkräfte-Design (Blau) */

/* === Farb-Setup (blau, ruhig) === */
:root{
  --bg:#0b1220;           /* Grundhintergrund */
  --card:#0f1b34;         /* Karten/Paneele */
  --card-2:#0d1730;       /* dunklere Flächen */
  --ink:#e9f0ff;          /* Primärtext */
  --muted:#b7c5e6;        /* Sekundärtext */
  --accent:#5a86ff;       /* Akzent / aktive Tabs / Buttons */
  --accent-ink:#fff;      /* Text auf Akzent */
  --border:#22325a;       /* Standardrahmen */
  --border-strong:#2c4170;/* betonter Rahmen */
  --ok:#44d07b;           /* OK */
  --warn:#f2c94c;         /* Warnung */
  --bad:#ef7070;          /* Fehler */
}

/* Grundlayout */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

/* Header & Tabs */
.app-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky; top:0; z-index:10;
}
.app-header h1{ margin:0; font-size:1.3rem; letter-spacing:.3px; }
.app-header nav{ display:flex; gap:8px; flex-wrap:wrap; }

/* große Tabs (Navigation oben) */
.tab{
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--ink);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.tab:hover{ filter:brightness(1.05); }
.tab.active, .tab[aria-current="page"]{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}

/* Buttons allgemeiner Art */
button,.btn{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--ink);
  cursor:pointer;
}
button:hover,.btn:hover{ filter:brightness(1.05); }
button:active,.btn:active{ filter:brightness(.98); }

/* Inline-Buttons im Fließtext (für Anleitungen) */
.btn-inline{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--ink);
  text-decoration:none;
  line-height:1.1;
  white-space:nowrap;
  vertical-align:baseline;
}
.btn-inline:hover{ filter:brightness(1.05); }
.btn-inline:active{ filter:brightness(.98); }

/* Seitenaufbau */
main{ max-width:1100px; margin:0 auto; padding:20px; display:block; }

/* Paneele/Karten */
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  margin:14px 0;
  padding:14px 16px;
}
.panel h2{ margin:0 0 8px 0; font-size:1.1rem; }

/* Grid für Formulareingaben */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

/* Form & Inputs */
label{ font-size:.92rem; color:var(--muted); }
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card-2);
  color:var(--ink);
}
input::placeholder,textarea::placeholder{ color:#aab8da; }

/* Links */
a{ color:#9fc1ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Sichtbarkeiten (SPA) */
.view{ display:none; }
.view.visible{ display:block; }

/* Ergebnis-Karten etc. */
#results .card{
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:16px; padding:12px; margin:10px 0;
}
.card h3{ margin:0 0 4px 0; }

/* Badges */
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 2px; }
.badge{
  font-size:.75rem;
  border:1px solid var(--border);
  padding:2px 8px; border-radius:999px; color:#dfe8ff;
}

/* Key-Value in Karten */
.kv{ display:grid; grid-template-columns:150px 1fr; gap:6px; font-size:.9rem; }
.kv span{ color:#dfe8ff; }

/* Hinweise/Notes */
.note{
  border-left:3px solid var(--border);
  padding-left:10px; margin:8px 0; color:#dae4ff;
}
.adv.hidden{ display:none; }
.adv{
  margin-top:10px; padding:12px; border:1px dashed var(--border);
  border-radius:12px; background:var(--card);
}

/* Ratings */
.rating{
  display:grid; grid-template-columns:140px auto; align-items:start; gap:8px;
  border-bottom:1px dashed var(--border);
  padding:8px 0;
}
.rating:last-child{ border-bottom:none; }
.rb-head{ font-weight:600; }
.rb-options{ display:flex; gap:6px; flex-wrap:wrap; }
.rb-options label{ display:flex; align-items:center; gap:6px; }

/* Phrasen */
.rb-phrases{ margin:10px 0 0 0; display:flex; flex-direction:column; align-items:stretch; }
.rb-phrases label{
  display:grid; grid-template-columns:20px 1fr; gap:8px;
  align-items:flex-start; justify-content:flex-start; text-align:left;
}
.rb-phrases .phrase-text{ display:block; white-space:normal; line-height:1.35; }

/* Details-Boxen */
.details.hidden{ display:none; }
.details{
  margin-top:8px; padding:10px; border:1px dashed var(--border);
  border-radius:12px; background:var(--card);
}
.pr-head{ font-weight:600; margin:6px 0 4px 0; color:#e7efff; }
.pr-block{ margin-bottom:8px; }
.btn-details{
  margin-top:6px; border:1px solid var(--border);
  background:var(--card-2); color:var(--ink);
  padding:6px 10px; border-radius:8px; cursor:pointer; text-decoration:none;
}
.btn-details:hover{ background:var(--accent); color:var(--accent-ink); }

/* Fehlerdarstellung */
.error-input{ border-color:var(--bad) !important; box-shadow:0 0 0 2px rgba(239,112,112,.25); }
.rating.error{ border-color:var(--bad); background:rgba(239,112,112,.06); }
.rating.error .rb-head{ color:#ffc0c0; }

/* Meta & Kommentar */
.note-list{ margin:8px 0; padding-left:22px; color:#dae4ff; list-style-position:outside; }
.note-list li{ margin:4px 0; }
.pr-meta{ font-size:.88rem; color:#d6e2ff; margin:2px 0 6px 0; }
.pr-comment{
  margin:6px 0 10px 0; padding:8px;
  background:var(--card-2); border:1px solid var(--border);
  border-radius:8px; color:#e6eeff;
}
.pr-comment:before{
  content:"Kommentar:"; display:block; font-weight:600; margin-bottom:4px; color:#f0f6ff;
}

/* Footer */
.app-footer{ padding:20px; text-align:center; color:var(--muted); }

/* Utility */
.hidden{ display:none !important; }
	/* Merge-Option: Checkbox + Text links nebeneinander ausrichten */
.merge-option,
label[for="onlyPublicMerge"], label[for="onlyPublicUpdate"]{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:.25rem 0;
}

/* Falls die Checkbox/Label gerade in einem Grid steckt: 
   Setz diesen Block auf volle Breite und blockiere das Grid-Layout */
.merge-option{ width:100%; }

/* Einheitliche Checkbox-Optik + Akzentfarbe */
#onlyPublicMerge, #onlyPublicUpdate{
  width:18px; height:18px;
  margin:0;
  accent-color: var(--accent);
}

/* Verhindere, dass eine übergeordnete Grid-Zeile die Elemente auseinanderzieht */
#onlyPublicMerge, #onlyPublicUpdate, label[for="onlyPublicMerge"], label[for="onlyPublicUpdate"]{
  grid-column:auto !important;
  justify-self:start;
}


/* Datenbank-Editor */
.editor-toolbar{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr);gap:14px;align-items:start}
#companySelect{min-height:230px;padding:6px}
#companySelect option{padding:7px 8px;border-bottom:1px solid var(--border)}
.company-editor{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.editor-actions,.editor-downloads{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.editor-actions button,.editor-downloads button{width:auto;min-width:230px}
@media(max-width:720px){.editor-toolbar{grid-template-columns:1fr}.editor-actions button,.editor-downloads button{width:100%}}

/* Gefahrenaktion: vollständiges Löschen eines Betriebs */
.btn-danger{
  width:auto;
  min-width:230px;
  margin-top:6px;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--bad);
  background:rgba(239,112,112,.12);
  color:#ffd6d6;
  font-weight:700;
}
.btn-danger:hover{background:var(--bad);color:#1b0b0b;}
@media(max-width:720px){.btn-danger{width:100%;}}