:root {
  --wvs-orange: #f28c00;
  --wvs-orange-dark: #c86f00;
  --ink: #1f2933;
  --muted: #5c6b7a;
  --line: #d8e0e8;
  --soft: #f5f7fa;
  --cream: #fff3df;
  --code-bg: #eef3f8;
  --danger: #9b1c1c;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f2f5f8;
  line-height: 1.55;
}

.site-header {
  background: #fff;
  border-bottom: 5px solid var(--wvs-orange);
  padding: 30px 26px 28px;
}
.header-inner, main {
  max-width: 1180px;
  margin: 0 auto;
}
.kicker {
  color: var(--wvs-orange-dark);
  font-weight: 700;
  margin: 0 0 8px;
}
h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.04;
  margin: 0 0 14px;
  letter-spacing: -0.04em;
}
.subtitle {
  font-size: 1.15rem;
  color: #344452;
  margin: 0;
  max-width: 860px;
}
.version {
  float: right;
  background: var(--wvs-orange);
  color: #111827;
  border-radius: 999px;
  font-weight: 800;
  padding: 8px 14px;
  margin-left: 18px;
}

main { padding: 24px 22px 46px; }
.card, .notice, .result-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 5px rgba(31, 41, 51, 0.07);
}
.notice {
  background: var(--cream);
  border-left: 8px solid var(--wvs-orange);
  padding: 20px 24px;
  margin-bottom: 18px;
}
.notice h2, .card h2, .result-box h2 { margin-top: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.card { padding: 20px; }
.full { grid-column: 1 / -1; }

code, .code-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--code-bg);
  border: 1px solid #dbe5ef;
  color: #1f2933;
  border-radius: 5px;
  padding: 1px 5px;
}
pre {
  margin: 12px 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #17212b;
  color: #f7fafc;
  border-radius: 10px;
  border: 1px solid #101820;
  font-size: 0.95rem;
}
pre code { background: transparent; border: 0; color: inherit; padding: 0; }

.table-label { color: var(--muted); font-weight: 650; margin: 12px 0 6px; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: #eef2f6; }
.table-scroll { overflow-x: auto; }

.example-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
button {
  border: 1px solid #cbd6e2;
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 13px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button:hover { border-color: var(--wvs-orange); }
button.active {
  background: var(--wvs-orange);
  border-color: var(--wvs-orange);
  color: #111827;
}
.result-box { padding: 20px; margin-bottom: 18px; }
.result-meta, .muted { color: var(--muted); }
.error { color: var(--danger); font-weight: 700; }
.schema-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.schema-item { background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.schema-item h3 { margin: 0 0 8px; }
.schema-item p { margin: 0; color: var(--muted); }
.footer-note { color: var(--muted); font-size: .95rem; }

@media (max-width: 780px) {
  .grid, .schema-list { grid-template-columns: 1fr; }
  .version { float: none; display: inline-block; margin: 0 0 14px; }
  .site-header { padding: 22px 18px 24px; }
  main { padding: 18px 14px 34px; }
}

/* v0.2.1: leichtere SQL-Darstellung und klarere Bedingungszuordnung */
pre.sql-light {
  background: #f8fafc;
  color: #1f2933;
  border: 1px solid #d8e0e8;
  border-left: 5px solid var(--wvs-orange);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
pre.sql-light code {
  color: inherit;
}
.sql-keyword {
  color: #b35f00;
  font-weight: 800;
}
.sql-string {
  color: #146c43;
  font-weight: 650;
}
.condition-card p {
  margin-bottom: 12px;
}
.condition-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.condition-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.condition-box h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.condition-box p {
  color: var(--muted);
  margin: 0 0 10px;
}
.link-condition {
  border-top: 4px solid var(--wvs-orange);
}
.filter-condition {
  border-top: 4px solid #64748b;
}
.assembled-sql {
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.assembled-sql summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--ink);
}
.assembled-sql pre {
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .condition-pair { grid-template-columns: 1fr; }
}

/* v0.2.2: Terra3-Info als Vollbreitenblock und gestufte Mini-Aufgabe */
.schema-card {
  margin-bottom: 18px;
}
.condition-card {
  margin-bottom: 18px;
}
.condition-card .mini-task {
  background: #fffaf2;
  border: 1px solid #f4d7a8;
  border-left: 6px solid var(--wvs-orange);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 14px 0 16px;
}
.mini-task h3 {
  margin: 0 0 8px;
}
.task-prompt {
  color: var(--muted);
  margin-bottom: 0;
}
.compact-sql {
  max-width: 720px;
}
.solution-steps {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.hint-box {
  background: #f8fafc;
}
.solution-box {
  background: #fff;
}
.solution-box pre {
  margin-bottom: 8px;
}

/* v0.2.3: Mini-Aufgabe nach der Begriffsklärung, Lösung nur innerhalb des Hinweises */
.nested-disclosure {
  margin-top: 14px;
  background: #f8fafc;
}
.inner-solution {
  margin-top: 12px;
  background: #fff;
}
.inner-solution pre {
  margin-bottom: 8px;
}
.solution-steps {
  display: block;
}

/* v0.3: Schrittfolge und kontrollierte SQL-Eingabe */
.step-card {
  margin-bottom: 18px;
}
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.step-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-top: 4px solid var(--wvs-orange);
  border-radius: 12px;
  padding: 14px;
}
.step-box h3 {
  margin: 0 0 8px;
}
.step-box p {
  color: var(--muted);
}
.sql-workbench {
  border-left: 6px solid var(--wvs-orange);
}
.editor-label {
  display: block;
  font-weight: 800;
  margin: 12px 0 6px;
}
#sql-editor {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  border: 1px solid var(--line);
  border-left: 5px solid var(--wvs-orange);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
  padding: 14px 16px;
  font: 0.98rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
#sql-editor:focus {
  outline: 3px solid rgba(242, 140, 0, .22);
  border-color: var(--wvs-orange);
}
.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
button.primary-action {
  background: var(--wvs-orange);
  border-color: var(--wvs-orange);
  color: #111827;
}
#own-sql-executed:empty {
  display: none;
}

@media (max-width: 900px) {
  .step-grid { grid-template-columns: 1fr; }
}


/* v0.3.1: Schrittfolge untereinander und kompaktere Ergebnisanzeige */
.step-grid {
  display: block;
}
.step-panel {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 5px solid var(--wvs-orange);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 14px;
}
.step-panel h3 {
  margin: 0 0 8px;
}
.step-panel p {
  color: var(--muted);
  margin: 0 0 10px;
}
.mini-editor-label {
  display: block;
  font-weight: 800;
  margin: 10px 0 6px;
}
.step-sql {
  margin-bottom: 10px;
}
.result-scroll-area .table-scroll,
.result-box .table-scroll {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.result-scroll-area table,
.result-box .table-scroll table {
  margin: 0;
}
.result-scroll-area th,
.result-box .table-scroll th {
  position: sticky;
  top: 0;
  z-index: 1;
}


/* v0.3.2: didaktischer Feinschliff der Schrittfolge */
.step-panel .work-note,
.step-panel .observation-note {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d8e0e8;
  background: #fff;
  color: var(--ink);
}
.step-panel .work-note {
  border-left: 4px solid var(--wvs-orange);
}
.step-panel .observation-note {
  border-left: 4px solid #64748b;
}
.step-warning {
  background: #fffaf2;
}
.result-scroll-area .table-scroll,
.result-box .table-scroll {
  max-height: 360px;
}


/* v0.3.5: Unterrichtsversion ohne Ausbauhinweise */
.step-editor {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--wvs-orange);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.98rem;
  line-height: 1.45;
  resize: vertical;
}
.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 12px;
}
.step-result-title {
  margin: 12px 0 6px;
  font-size: 1.02rem;
}
.step-panel .result-scroll-area:empty {
  display: none;
}

/* v0.3.7: Datenbankschema als eingebundene Abbildung */
.dbschema-card {
  margin-bottom: 18px;
}
.dbschema-card details {
  margin: 0;
}
.dbschema-card summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.schema-figure {
  margin: 12px 0 0;
  overflow-x: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.schema-figure img {
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 0 auto;
}

/* v0.3.8: Datenbankschema auf eigene Seite ausgelagert */
.schema-link-card {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 6px solid var(--wvs-orange);
}
.schema-link-text h2 {
  margin: 0 0 6px;
}
.schema-link-text p {
  margin: 0;
  color: var(--muted);
}
.schema-button,
.small-schema-link,
.schema-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #cbd6e2;
  background: var(--wvs-orange);
  color: #111827;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  white-space: nowrap;
}
.schema-button:hover,
.small-schema-link:hover,
.schema-nav a:hover {
  border-color: var(--wvs-orange-dark);
  background: #ffa31a;
}
.section-headline-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}
.section-headline-row h2 {
  margin-top: 0;
}
.section-headline-row p {
  margin-top: 0;
}
.small-schema-link {
  background: #fff;
  border-color: #cbd6e2;
  color: var(--ink);
  margin-top: 2px;
}
.schema-page-main {
  max-width: 1280px;
}
.schema-page-card {
  padding: 16px;
}
.schema-nav {
  margin: 0 0 14px;
}
.schema-figure-large {
  margin: 0;
  overflow: auto;
  max-height: calc(100vh - 230px);
}
.schema-figure-large img {
  width: min(1180px, 100%);
  min-width: 760px;
}

@media (max-width: 780px) {
  .schema-link-card,
  .section-headline-row {
    display: block;
  }
  .schema-button,
  .small-schema-link {
    margin-top: 12px;
  }
}