/* Shared look for all SWE I lecture demos. Colours follow the TH Lübeck deck theme. */
:root {
  --rot: #e4003a;
  --rot-dunkel: #a8002b;
  --rot-hell: #fde6ec;
  --blau: #004261;
  --blau-hell: #e8eff4;
  --text: #222;
  --grau: #6b6b6b;
  --linie: #d9d9d9;
  --flaeche: #f6f6f6;
  --bg: #fff;
  --ok: #1b7f3b;
  --ok-hell: #e3f4e8;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.4;
}

/* Embedded on a slide (?embed): larger type, no page chrome. */
body.embed { font-size: 19px; }
body.embed .nur-seite { display: none !important; }
body:not(.embed) .nur-folie { display: none !important; }

.seitenkopf {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 3px solid var(--rot);
}
.seitenkopf h1 { font-size: 22px; margin: 0; }
.seitenkopf a { color: var(--grau); font-size: 14px; }

button, select {
  font: inherit; font-size: 0.9em;
  border: 2px solid var(--blau); border-radius: 8px;
  background: var(--bg); color: var(--blau);
  padding: 5px 12px; cursor: pointer;
}
button:hover { background: var(--blau-hell); }
button.primaer { background: var(--rot); border-color: var(--rot); color: #fff; }
button.primaer:hover { background: var(--rot-dunkel); }
button[aria-pressed="true"] { background: var(--blau); color: #fff; }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }

.panel {
  border: 2px solid var(--linie); border-radius: 10px; background: var(--bg);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel > .titel {
  font-size: 0.75em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau); padding: 6px 12px; border-bottom: 1px solid var(--linie); background: var(--flaeche);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}

code, pre, textarea.code { font-family: var(--mono); }

.hinweis { color: var(--grau); font-size: 0.85em; }

@media (max-width: 760px) {
  body { font-size: 15px; }
  .seitenkopf { padding: 10px 16px; }
}

/* The hidden attribute must win over display:flex above. */
.panel[hidden] { display: none; }