.center-align {
    text-align: center;
    margin-top: 20px;
}
/* The 5 top-right launcher buttons are position:fixed at hand-tuned `right` offsets - that
   places their left edge a CONSTANT distance from the viewport's right edge regardless of
   viewport width, so reserving that same fixed distance as padding here keeps the (still
   text-align:center, just centering within the narrower remaining box) title clear of them at
   any width, not just below the narrow-viewport breakpoint further down this file. */
h3.center-align {
    padding-right: 570px;
    /* The floating timer (top-left, position:fixed, ~124px wide) is the mirror-image problem -
       without this, centering within the now-narrower box (thanks to padding-right above)
       shifts the title far enough left to run under the timer instead. */
    padding-left: 160px;
    box-sizing: border-box;
}
body {
    position: relative;
}
.notizen-container {
    position: sticky;
    /* Stuck offset clears the fixed Historie/Rechner launcher buttons (10px top +
       36px tall + 10px gap = 56px), so once sticky it sits below them on the y-axis
       instead of being covered by their higher z-index. Height is shortened by the
       same 46px added to top, so the bottom edge lands where it always did. */
    top: 56px !important;
    width: 400px;
    height: calc(100vh - 15vh - 46px); /* Adjust height to fit within viewport */
    padding: 10px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    z-index: 2;
}
/* Straddles the sidebar's left border (position:sticky above still establishes a containing
   block for this) so it's grabbable without eating into the notes area's own padding. */
.notizen-resize-handle {
    position: absolute;
    top: 0;
    left: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
}
.notizen-resize-handle:hover,
.notizen-resize-handle.resizing {
    background: rgba(38, 166, 154, 0.25);
}
.zielgruppe-table-container {
    flex: 0 0 auto;
    margin-top: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    box-sizing: border-box;
}
.zt-row-zielgruppe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.zt-label {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: #757575;
    white-space: nowrap;
}
.zt-row-zielgruppe .zt-input {
    flex: 1;
    min-width: 0;
}
/* Arbeit/Doku/Präsentation together take 2/3 of the row (2fr each = 6fr), the
   remaining 1/3 goes to Präsentationszeit (3fr) - see the user's explicit ratio. */
.zt-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 3fr;
    column-gap: 6px;
    row-gap: 4px;
}
.zt-col-label {
    font-size: 0.75rem;
    color: #78909c;
    white-space: nowrap;
}
/* Matches the answer textarea look (.answer-text-input) rather than the larger
   question-level fields, since the Zielgruppe table sits in the same compact family.
   Materialize's `input[type=text/number]:not(.browser-default)` outranks a single
   class on specificity (same issue as .compact-range/.weight-input above), so it
   must be overridden explicitly here. */
.zt-input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 1.9rem !important;
    padding: 0 0.5rem !important;
    font-size: 0.88rem !important;
    border: 1px solid #9e9e9e !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background-color: #fff !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    margin: 0 !important;
    outline: none;
}
.zt-input:focus {
    border-color: #26a69a !important;
    box-shadow: 0 1px 0 0 #26a69a !important;
    outline: none;
}
#zt-arbeit,
#zt-doku,
#zt-praesentation,
#pateArbeitPunkte,
#pateDokuPunkte,
#patePraesentationPunkte {
    -moz-appearance: textfield;
    appearance: textfield;
}
#zt-arbeit::-webkit-outer-spin-button,
#zt-arbeit::-webkit-inner-spin-button,
#zt-doku::-webkit-outer-spin-button,
#zt-doku::-webkit-inner-spin-button,
#zt-praesentation::-webkit-outer-spin-button,
#zt-praesentation::-webkit-inner-spin-button,
#pateArbeitPunkte::-webkit-outer-spin-button,
#pateArbeitPunkte::-webkit-inner-spin-button,
#pateDokuPunkte::-webkit-outer-spin-button,
#pateDokuPunkte::-webkit-inner-spin-button,
#patePraesentationPunkte::-webkit-outer-spin-button,
#patePraesentationPunkte::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.zt-praesentation-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}
.zt-input-with-suffix {
    position: relative;
    flex: 1;
    min-width: 0;
}
.zt-praesentation-cell .zt-input-with-suffix .zt-input {
    width: 100% !important;
    padding-right: 34px !important;
}
.zt-input-suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #9e9e9e;
    pointer-events: none;
}
/* Sized like .answer-delete-btn (26px), but permanently teal like the Rechner/Historie/
   Hilfe launcher buttons (Materialize's default .btn color) instead of a neutral grey. */
.zt-import-btn {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: #26a69a;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.zt-import-btn:hover {
    background: #2bbbad;
}
.zt-import-btn:active {
    background: #1f8f84;
}
.zt-import-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: currentColor;
}
.btn {
    margin-top: 5px;
}
/* Reusable "secondary utility action" sizing (Historie's Löschen/Exportieren/Importieren,
   Fragenkataloge's Neue Vorlage/Aus Datei/Importieren) - smaller and quieter than the app's
   normal full-size buttons, distinguishing "utility" rows from primary/destructive actions. */
.btn-compact {
    height: 34px !important;
    line-height: 34px !important;
    font-size: 0.82rem !important;
    padding: 0 14px !important;
    margin: 0 !important;
    /* The fixed height above only looks right paired with a single line of text - without this,
       a label that's a bit too long for its column wraps to 2 lines and the second one just
       gets silently clipped by the fixed height instead of visibly overflowing. */
    white-space: nowrap !important;
}
.main-content {
    display: flex;
    justify-content: space-between;
}
.form-container {
    flex: 1;
    min-width: 0; /* Without this, a flex item won't shrink below its content's
       min-content width, so wide rows (e.g. multiple answer sliders) would overflow
       and render underneath the sticky Notizen sidebar instead of wrapping. */
    margin-right: 20px; /* Space between form and notizen */
}
.row {
    margin-bottom: 10px; /* Reduce the spacing between rows */
}
.range-field {
    margin-top: 0; /* Reduce the spacing above the range input */
    margin-bottom: 0; /* Reduce the spacing below the range input */
}
.headerinfo {
    margin-bottom: -10px; /* Reduce the spacing below the header info */
}
.button {
    margin-left: 10px;
}
.disclaimer {
    margin-left: 10px;
}
.copyright {
    position: fixed;
    bottom: 10px;
    right: 10px;
    opacity: 0.5;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    font-size: small;
    z-index: 99999;
}
.materialize-textarea {
    /* No fixed height here on purpose - height is fully owned by autoResizeTextarea() (see
       form.js), which sets an inline style right after every value change. With rows="1" set in
       the markup, the intrinsic (un-resized) height is already exactly one line, so there's
       nothing left for CSS to get wrong before JS runs. */
    /* Materialize's own `textarea.materialize-textarea` rule (higher specificity: element+class)
       sets padding: .8rem 0 .8rem 0 and min-height: 3rem, both of which fight
       autoResizeTextarea()'s scrollHeight-based measurement - inflating every auto-grown textarea
       regardless of actual content. !important is the only way to win against that higher-
       specificity rule here. */
    padding: 4px 0.75rem !important;
    min-height: 0 !important;
    font-size: 1rem;
    /* A normal reading line-height (not the old single-line-box-matching 2.4rem/1.9rem) - those
       only made sense back when the box was always exactly one line tall; once it can grow to
       several lines, that line-height reads as huge gaps between lines of the same paragraph.
       Unitless so question/answer textareas each scale it off their own font-size. Materialize's
       own rule sets line-height: normal at the same higher specificity as padding/min-height
       above, so this still needs !important to win. */
    line-height: 1.35 !important;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.materialize-textarea:focus {
    border-color: #26a69a;
    box-shadow: 0 1px 0 0 #26a69a;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    right: 0;
    left: auto;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
/* Bewertungshilfen widget in Notizen header */
.bewertungshilfen-widget {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 12px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.bewertungshilfen-widget .bh-legend {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 6px;
    font-size: 0.72rem;
    color: #888;
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.bewertungshilfen-widget .bh-btn {
    height: 30px;
    line-height: 30px;
    font-size: 0.78rem;
    padding: 0 10px;
    margin: 0;
}

/* ==================== NOTIZEN HEADER / TOOLBAR ==================== */
.notizen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
}
.notizen-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 8px;
}
.notizen-fontsize-control {
    display: flex;
    align-items: center;
    gap: 2px;
}
.fs-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    line-height: 24px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    background: #f0f0f0;
    color: #444;
    cursor: pointer;
}
.fs-btn:nth-child(2) { font-size: 0.9rem; }
.fs-btn:nth-child(3) { font-size: 1.05rem; }
.fs-btn:hover {
    background: #e2e2e2;
}
.fs-btn.active {
    background: #26a69a;
    border-color: #26a69a;
    color: #fff;
}
.pate-modus-btn {
    height: 30px;
    line-height: 30px;
    font-size: 0.78rem;
    padding: 0 12px;
    margin: 0;
    background-color: #78909c !important;
}
.pate-modus-btn.active {
    background-color: #26a69a !important;
}

/* ==================== NOTIZEN PANELS ==================== */
.notizen-panels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
    overflow-y: auto;
}
.notizen-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.notizen-panel:not(.collapsed) {
    flex: 1 1 0;
    min-height: 60px;
}
.notizen-panel.collapsed {
    flex: 0 0 auto;
}
/* Pate-Modus off (default): only the "Notizen" panel exists/is visible. */
#notizenPanels .notizen-panel[data-panel="doku"],
#notizenPanels .notizen-panel[data-panel="arbeit"] {
    display: none;
}
#notizenContainer.pate-modus-active #notizenPanels .notizen-panel[data-panel="doku"],
#notizenContainer.pate-modus-active #notizenPanels .notizen-panel[data-panel="arbeit"] {
    display: flex;
}
.notizen-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #f5f6f7;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    flex: 0 0 auto;
    user-select: none;
}
.notizen-panel.collapsed .notizen-panel-header {
    border-bottom: none;
}
.notizen-panel-caret {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: #757575;
    transition: transform 0.15s ease-in-out;
    transform: rotate(0deg);
}
.notizen-panel.collapsed .notizen-panel-caret {
    transform: rotate(-90deg);
}
.notizen-panel-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: #333;
}
.pate-punkte-input {
    /* Materialize's `input[type=number]:not(.browser-default)` outranks a single class on
       specificity (same issue as .zt-input/.weight-input elsewhere), so override explicitly. */
    width: 52px !important;
    height: 24px !important;
    margin: 0 0 0 auto !important;
    padding: 0 6px !important;
    font-size: 0.8rem !important;
    text-align: center;
    border: 1px solid #9e9e9e !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    background-color: #fff !important;
}
.notizen-panel.collapsed .notizen-panel-body {
    display: none;
}
.notizen-panel-body {
    display: flex;
    /* Column, not the row default: in row direction, the textarea's height only comes from
       align-items:stretch on the cross axis, and browsers don't reliably stretch a <textarea>
       that way - it stays at its intrinsic rows="2" height instead of filling the panel, so
       multi-paragraph notes (e.g. imported ones) end up clipped to a couple of visible lines
       with no visible indication there's more below. In column direction, height becomes the
       textarea's own main-axis flex-grow size, which always fills the remaining space. */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px;
}
.notizen-textarea {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    resize: none;
    border: none;
    outline: none;
    padding: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
    background: transparent;
    box-sizing: border-box;
}

.draggable-row {
    cursor: move;
}
.drag-handle {
    cursor: default;
    margin-right: 8px;
    font-size: 1.5em;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: stretch
}
.drag-handle[draggable="true"] {
    cursor: grab;
}
.row.draggable-row {
  cursor: default;
}
/* CSS for group containers and controls */
.question-group {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 10px 10px 40px 10px;
  background: #fafbfc;
  position: relative;
  margin-left: 12px !important;
}
.group-header {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.group-name-input {
  font-size: 1.1em;
  font-weight: bold;
  border: none;
  background: transparent;
  outline: none;
  width: 180px;
  margin-right: 10px;
}
.add-question-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
}
.add-group-btn {
  margin: 20px 0 0 0;
  width: 100%;
}
.button-container .button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.button-container .btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: 38px;
  line-height: 38px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
.button-container .btn.add-group-btn {
  min-width: 180px;
  flex: 1 1 180px;
}
.button-container .btn:not(.add-group-btn) {
  flex: 1 1 160px;
  min-width: 140px;
}
/* This one label is a lot longer than any other button here ("Im Cache speichern & als .tpl
   exportieren") - the shared fixed height/line-height above only look right for a single line,
   so at the shared 160px basis it wrapped and silently clipped its second line. A wider flex
   basis lets it sit inline with its siblings (this button row lives in the wide form-container,
   not the narrow Fragenkataloge dialog, so there's ample room) while auto height + normal
   white-space still lets the label wrap safely onto two lines instead of clipping. */
.fragenkatalog-export-save-btn {
  flex: 1 1 320px !important;
  min-width: 280px;
  height: auto !important;
  min-height: 38px;
  line-height: 1.3 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  white-space: normal !important;
}
.delete-group-btn, .delete-question-btn {
  font-weight: normal !important;
}
/* Compact question/answer layout */
.row.draggable-row .col.s12 {
  padding: 8px 10px;
}
.row.draggable-row {
  margin-bottom: 6px;
}
.question-main-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.q-checkbox-label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  margin: 0;
  cursor: pointer;
  padding-left: 4px;
  position: relative;
  min-height: 24px;
}
.question-text-input {
  flex: 1 1 220px;
  min-width: 160px;
  margin: 0 !important;
}
.main-score-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  flex: 0 1 auto;
  max-width: 100%;
  box-sizing: border-box;
}
.compact-range {
  /* Materialize's `input[type=range]{width:100%}` outranks a single class on specificity, so it
     must be overridden explicitly here. Flexible (not a fixed width) so it actually shrinks on
     narrow viewports instead of forcing the row to overflow/clip - flex-basis 120px is the normal
     size, but it can give up space down to 60px before anything else in the row has to. */
  width: auto !important;
  flex: 1 1 120px;
  min-width: 60px;
  max-width: 120px;
}
.slider-value {
  min-width: 24px;
  text-align: right;
  font-size: 0.9rem;
}
/* Weight controls: short "Gew." label + legible "-"/"+" buttons + value, still the
   least space-hungry control in the row (text input > slider > weight in priority). */
.weight-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.weight-label {
  font-size: 0.72rem;
  color: #78909c;
  white-space: nowrap;
}
.weight-controls .weight-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  line-height: 20px;
  padding: 0;
  margin: 0 !important;
  font-size: 0.85rem;
  font-weight: normal !important;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
  background: #f0f0f0;
  color: #444;
  cursor: pointer;
}
.weight-controls .weight-btn:hover {
  background: #e2e2e2;
}
.weight-controls .weight-btn:active {
  background: #d0d0d0;
}
.weight-input {
  /* Materialize's `input[type=text]:not(.browser-default){width:100%}` outranks a
     single class on specificity, so it must be overridden explicitly here. */
  width: 26px !important;
  height: 22px !important;
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.8rem;
  padding: 0;
  margin: 0 !important;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.bewertung-label {
  font-size: 0.85rem;
  color: #757575;
  white-space: nowrap;
}
/* "Large" weight-control variant: classic look for the single-answer question row
   (full "Gewichtung:" label + bigger teal Materialize-style square buttons). */
.weight-controls-lg {
  gap: 6px;
}
.weight-label-lg {
  font-size: 0.85rem;
  color: #444;
  font-weight: 500;
  white-space: nowrap;
}
.weight-controls-lg .weight-btn-lg {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  line-height: 28px;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: #26a69a;
  color: #fff;
}
.weight-controls-lg .weight-btn-lg:hover {
  background: #2bbbad;
}
.weight-controls-lg .weight-btn-lg:active {
  background: #1f8f84;
}
.weight-input-lg {
  width: 32px !important;
  height: 30px !important;
  font-size: 0.9rem;
}
.agg-weight-display {
  font-size: 0.85rem;
  color: #607076;
  white-space: nowrap;
}
.question-score-badge {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: #e0f2f1;
  color: #00796b;
  white-space: nowrap;
}
/* Unasked questions don't count toward the result, so their badge shouldn't look like
   a real (colourful) score - see refreshQuestionAggregation(). */
.question-score-badge.is-unasked {
  background: #eeeeee;
  color: #757575;
}
.answers-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 4px 12px;
  padding-left: 10px;
  border-left: 2px solid #e0e0e0;
}
.answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 8px;
  border-bottom: 1px solid #e3e7ea;
}
.answer-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.answer-type-select {
  display: inline-block !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  flex: 0 0 auto;
  height: 30px;
  font-size: 0.82rem;
  width: auto;
  margin: 0 !important;
  padding: 0 6px;
  border: 1px solid #9e9e9e;
  border-radius: 4px;
  background: #fff;
}
.answer-text-input {
  flex: 1 1 160px;
  min-width: 120px;
  /* Height and line-height are inherited from .materialize-textarea (rows="1" + line-height:1.35
     intrinsic sizing, height owned entirely by autoResizeTextarea() in form.js) - overriding
     either here would reintroduce the old fixed single-line-box look that fights multi-line
     growth. */
  font-size: 0.88rem !important;
  margin: 0 !important;
}
.answer-score-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  /* An explicit flex-basis (not "auto") covering the one-line width of slider(180) + value(~24)
     + weight controls(~107) + gaps/padding: browsers don't reliably compute "auto" as this box's
     true one-line content width once it's nested inside another flex-wrap row next to a growing
     sibling (answer-text-input) - it was ending up ~47px narrower than its own content needed,
     wrapping the slider row for no reason even with plenty of width to spare. flex-grow:0 keeps
     it from fighting answer-text-input for extra space; flex-shrink:1 (not the old 0) is what
     actually fixes narrow viewports - when this box's own line genuinely doesn't have room, it
     can shrink instead of overflowing - min-width:0 removes the implicit content-based floor
     that would otherwise block that shrink. */
  flex: 0 1 352px;
  min-width: 0;
  box-sizing: border-box;
  background: #eef2f4;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  padding: 4px 8px;
}
.answer-score-controls .compact-range {
  flex-basis: 180px;
  max-width: 180px;
}
.answer-delete-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  line-height: 26px;
  padding: 0;
  margin: 0 !important;
  font-size: 0.95rem;
  font-weight: normal !important;
}
.add-answer-btn {
  margin: 4px 0 2px 34px !important;
  height: 28px;
  line-height: 28px;
  font-size: 0.8rem;
  padding: 0 10px;
}
.delete-question-btn {
  flex: 0 0 auto;
}
/* Add CSS for drag-insert indicator */
.drag-insert-above {
  border-top: 3px solid #2196f3 !important;
}
.drag-insert-below {
  border-bottom: 3px solid #2196f3 !important;
}
/* .drag-handle-svg {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 8px;
  user-select: none;
}*/
.row.draggable-row {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.drag-handle svg {
  height: 100%;
  width: auto;
  display: block;
}
/* Add CSS for group drag indicator */
.drag-insert-above-group {
  border-top: 3px solid #ff9800 !important;
}
.drag-insert-below-group {
  border-bottom: 3px solid #ff9800 !important;
}
.group-drag-handle {
  cursor: grab;
  user-select: none;
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s;
}
.group-drag-handle:active {
  cursor: grabbing;
  background: #f5f5f5;
}
        .summary-group {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            margin-bottom: 18px;
            padding: 10px 10px 12px 10px;
            background: #fafbfc;
            position: relative;
            margin-left: 12px !important;
        }
        .summary-group .summary-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .summary-group .summary-title {
            font-weight: bold;
            font-size: 1.1em;
        }
        .summary-group .summary-percentage {
            font-weight: bold;
            font-size: 1.1em;
            white-space: nowrap;
        }
        .summary-group .summary-body {
            display: flex;
            flex-direction: column;
            gap: 4px;
            font-size: 1rem;
        }
        /* Sizing/position now come from .launcher-bar/.launcher-btn (see LAUNCHER BAR section) -
           nothing button-specific left to say here. */
        .history-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.25);
            z-index: 1200;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .history-dialog {
            width: min(640px, calc(100vw - 24px));
            max-height: min(70vh, 640px);
            overflow: auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
            padding: 20px;
        }
        .history-dialog h5 {
            margin: 0 0 12px 0;
        }
        .history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin: 0;
            padding: 0;
        }
        .history-item {
            border: 1px solid #dfe3e8;
            border-radius: 8px;
            padding: 10px 12px;
            background: #fafbfc;
        }
        .history-item.is-selected {
            background: #eef7ef;
            border-color: #66bb6a;
            box-shadow: inset 0 0 0 1px rgba(102, 187, 106, 0.18);
        }
        .history-item-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .history-item label {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            flex: 1;
            min-width: 0;
        }
        .history-delete-btn {
            flex: 0 0 auto;
            background: transparent;
            border: none;
            color: #b71c1c;
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .history-delete-btn:hover {
            background: rgba(183, 28, 28, 0.08);
        }
        .history-item .history-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .history-item .history-title {
            font-weight: 600;
        }
        .history-item .history-subtitle {
            font-size: 0.92rem;
            color: #666;
        }
        /* Two deliberate rows instead of one 5-button flex row that used to wrap unpredictably
           (3 buttons dropping to their own ragged half-empty lines depending on dialog width):
           utility actions (löschen/exportieren/importieren) on top, the dialog's actual
           footer (Schließen/Wiederherstellen) on its own row below, right-aligned like a
           standard modal footer. */
        .history-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid #eee;
        }
        .history-actions-left {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .history-actions-right {
            display: flex;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 10px;
        }

/* ==================== STATISTIK DIALOG ==================== */
.statistik-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.statistik-dialog {
    width: min(1000px, calc(100vw - 24px));
    max-height: min(92vh, 880px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 20px 24px 24px;
}
.statistik-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.statistik-dialog-header h5 {
    margin: 0;
}
#statistik-empty-state {
    color: #666;
    padding: 20px 4px;
}
.statistik-scope-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
.statistik-scope-tabs {
    display: inline-flex;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    overflow: hidden;
}
.statistik-scope-tab {
    background: #f5f6f7;
    border: none;
    border-right: 1px solid #cfd8dc;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #444;
}
.statistik-scope-tab:last-child {
    border-right: none;
}
.statistik-scope-tab:hover {
    background: #e9ebec;
}
.statistik-scope-tab.active {
    background: #26a69a;
    color: #fff;
}
.statistik-scope-select {
    max-width: 320px;
    display: inline-block !important;
    width: auto !important;
}
.statistik-scope-count {
    font-size: 0.85rem;
    color: #777;
    margin-left: auto;
}
.statistik-kpi-section {
    margin-bottom: 18px;
}
.statistik-kpi-section h6 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
}
.statistik-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.statistik-kpi-card {
    border: 1px solid #e3e7ea;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fafbfc;
}
.statistik-kpi-label {
    font-size: 0.72rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.statistik-kpi-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #222;
    line-height: 1.15;
}
.statistik-kpi-sub {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}
.statistik-charts-unavailable {
    font-size: 0.85rem;
    color: #a05a00;
    background: #fff6e5;
    border: 1px solid #ffe0a3;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.statistik-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.statistik-chart-block h6 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}
.statistik-chart-canvas-wrap {
    position: relative;
    height: 220px;
}
.statistik-source-hint {
    font-size: 0.78rem;
    color: #777;
    margin: -2px 0 10px;
}
.statistik-source-badge {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
}
.statistik-source-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 0.75rem;
    color: #777;
}
.statistik-source-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.statistik-source-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.statistik-table-block {
    margin-bottom: 20px;
}
.statistik-table-block h6 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
}
.statistik-table-wrap {
    max-height: 260px;
    overflow: auto;
    border: 1px solid #e3e7ea;
    border-radius: 8px;
}
.statistik-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.statistik-table th,
.statistik-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
}
.statistik-table th {
    position: sticky;
    top: 0;
    background: #f5f6f7;
    font-weight: 600;
}
.statistik-table tbody tr:last-child td {
    border-bottom: none;
}
.statistik-table-number {
    color: #888;
    font-size: 0.8rem;
}
.statistik-table-empty {
    color: #888;
    text-align: center;
    padding: 14px;
}
.statistik-comparison-block {
    border-top: 1px solid #eee;
    padding-top: 16px;
}
.statistik-comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.statistik-comparison-header h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
}
.statistik-comparison-hint {
    font-size: 0.78rem;
    color: #888;
    margin: 6px 0 12px;
}
.statistik-comparison-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.statistik-comparison-empty {
    font-size: 0.85rem;
    color: #888;
}
.statistik-comparison-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e3e7ea;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fafbfc;
}
.statistik-comparison-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.statistik-comparison-label-input {
    flex: 1 1 160px;
    min-width: 0;
    height: 30px !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid #b0b0b0 !important;
    border-radius: 4px;
    box-shadow: none !important;
}
.statistik-comparison-meta {
    flex: 2 1 220px;
    font-size: 0.78rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.statistik-comparison-remove-btn {
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px;
}
@media (max-width: 700px) {
    .statistik-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Make the floating timer draggable */
#floating-timer {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 124px;
    padding: 8px 9px 7px 9px;
    background: #fafbfc;
    color: #222;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

#floating-timer:active {
    cursor: grabbing;
}

#floating-timer #timer-display {
    width: 100%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #222;
    font-size: 13px;
    line-height: 1.1;
}

#floating-timer .timer-controls {
    display: flex;
    gap: 4px;
    width: 100%;
}

#floating-timer .btn {
    flex: 1 1 0;
    width: auto;
    margin-top: 0 !important;
    background-color: #f0f0f0 !important;
    color: #222 !important;
    box-shadow: none !important;
    text-transform: none;
    border: 1px solid #d0d0d0;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
    padding: 0 4px;
}

#floating-timer .btn:hover,
#floating-timer .btn:focus,
#floating-timer .btn:focus-visible,
#floating-timer .btn:active {
    background-color: #f0f0f0 !important;
    color: #222 !important;
    box-shadow: none !important;
    outline: none;
}

#floating-timer .btn.red {
    background-color: #f0f0f0 !important;
    color: #222 !important;
}

#floating-timer .timer-pin-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    padding: 2px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a3a3a;
    opacity: 0.9;
    z-index: 2;
    transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}

#floating-timer .timer-pin-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transform: rotate(45deg);
}

#floating-timer .timer-pin-btn:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
}

#floating-timer .timer-pin-btn.pin-engaged {
    color: #cfcfcf;
    opacity: 1;
}

/* ==================== RECHNER LAUNCHER + OVERLAY ==================== */
/* Sizing/position come from .launcher-bar/.launcher-btn (see LAUNCHER BAR section). */
.rechner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.rechner-dialog {
    width: min(900px, calc(100vw - 24px));
    max-height: min(90vh, 800px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 24px;
}
.rechner-dialog h5 {
    margin: 0 0 16px 0;
    font-size: 1.2rem;
    font-weight: 600;
}
.rechner-dialog .rechner-subtitle {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 16px;
}
/* Excel-style table */
.rechner-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}
.rechner-table th, .rechner-table td {
    border: none;
    border-bottom: 1px solid #e4eaed;
    padding: 7px 10px;
    vertical-align: middle;
}
.rechner-table th {
    background: #e0f2f1;
    color: #00796b;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #bfd9d5;
}
.rechner-table .section-row td {
    background: #f6f8f9;
    font-weight: 600;
    color: #334;
    border-top: 1px solid #cfd8dc;
    border-bottom: 1px solid #dbe3e6;
}
.rechner-table .result-row td {
    background: #eef8ef;
    font-weight: 700;
    border-top: 1px solid #7abf86;
    border-bottom: 1px solid #d5e7d8;
}
.rechner-table .sub-label {
    padding-left: 24px;
    color: #555;
}
.rechner-table .rechner-op {
    white-space: nowrap;
    text-align: center;
    color: #60717a;
    font-weight: 600;
}
.rechner-table .rechner-label-right {
    text-align: right;
    color: #4a5a63;
    white-space: nowrap;
}
.rechner-table input[type="number"] {
    width: 70px;
    text-align: center;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.88rem;
    outline: none;
}
.rechner-table input[type="number"]:focus {
    border-color: #26a69a;
}
.rechner-table .calc-val {
    font-weight: 600;
    color: #00796b;
    text-align: center;
    background: #f9fcfc;
    border: 1px solid #d7e2e5;
    border-radius: 6px;
}
.rechner-table .note-val {
    text-align: center;
    background: #fbfcfd;
    border: 1px solid #d7e2e5;
    border-radius: 6px;
}
.rechner-table td:empty {
    border-bottom-color: transparent;
}
/* A deliberate small visual break between the "Planen und Umsetzen..."/"Summe" row and
   "Ergebnis Teil 2" below it - at the shared 7px/10px cell padding, a fully empty row reads as
   an accidental gap (same height as a real content row, no visual cue it's intentional); this
   collapses it down to a thin, clearly-on-purpose sliver instead. */
.rechner-table .rechner-spacer-row td {
    padding: 3px 0;
    border-bottom: none;
}
.rechner-grade-1 { color: #2e7d32; font-weight: 700; }
.rechner-grade-2 { color: #558b2f; font-weight: 700; }
.rechner-grade-3 { color: #f9a825; font-weight: 700; }
.rechner-grade-4 { color: #ef6c00; font-weight: 700; }
.rechner-grade-5 { color: #d84315; font-weight: 700; }
.rechner-grade-6 { color: #b71c1c; font-weight: 700; }
.rechner-warning {
    background: #fff3e0;
    border: 1px solid #ff9800;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #e65100;
    display: none;
}
.rechner-result-status {
    text-align: center;
    margin-top: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    display: none;
}
.rechner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* ==================== FRAGENKATALOG LAUNCHER + OVERLAY ==================== */
/* Purple (#6a48ad) throughout - the visual signature for anything Fragenkatalog-related,
   distinguishing it at a glance from the app's normal teal (#26a69a). Sizing/position come from
   .launcher-bar/.launcher-btn (see LAUNCHER BAR section) - only the color is button-specific. */
.fragenkatalog-launcher {
    background-color: #6a48ad !important;
}
.fragenkatalog-launcher:hover,
.fragenkatalog-launcher:focus,
.fragenkatalog-launcher:active {
    background-color: #5c3d99 !important;
}
.fragenkatalog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.fragenkatalog-dialog {
    width: min(640px, calc(100vw - 24px));
    max-height: min(85vh, 820px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 20px;
    border-top: 5px solid #6a48ad;
}
.fragenkatalog-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.fragenkatalog-dialog-header h5 {
    margin: 0;
    color: #6a48ad;
}
.fragenkatalog-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
}
/* flex:1 1 Npx (not each button's own intrinsic width) is what actually fixes the ragged wrap -
   two buttons on a row grow to evenly fill it instead of hugging their own text width, and if
   the third wraps alone it stretches to the row's full width instead of sitting short and
   lopsided on the left. */
.fragenkatalog-actions-row .fragenkatalog-btn {
    flex: 1 1 180px;
    text-align: center;
}
.fragenkatalog-btn,
.fragenkatalog-purple-btn {
    background-color: #6a48ad !important;
    color: #fff !important;
    margin: 0 !important;
}
.fragenkatalog-btn:hover,
.fragenkatalog-purple-btn:hover {
    background-color: #5c3d99 !important;
}
#fragenkatalog-empty-state {
    color: #777;
    font-size: 0.92rem;
    padding: 8px 0;
}
.fragenkatalog-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fragenkatalog-item {
    border: 1px solid #dfd5ee;
    border-radius: 8px;
    padding: 10px 12px;
    background: #faf7fd;
}
.fragenkatalog-item.is-selected {
    border-color: #6a48ad;
    box-shadow: inset 0 0 0 1px rgba(106, 72, 173, 0.25);
}
.fragenkatalog-item-meta {
    min-width: 0;
}
.fragenkatalog-item-title {
    font-weight: 600;
    color: #4a2f7a;
}
.fragenkatalog-item-subtitle {
    font-size: 0.85rem;
    color: #777;
    margin-top: 2px;
}
/* Meta sits on its own row above; this row is just the actions, primary on the left and
   secondary pushed all the way to the right (space-between) - so Export/Delete are always at
   the far right edge of the box, never wrapping in next to Auswählen/Bearbeiten regardless of
   the template name's length or the dialog's width. */
.fragenkatalog-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.fragenkatalog-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.fragenkatalog-item-actions .btn {
    height: 32px;
    line-height: 32px;
    font-size: 0.8rem;
    padding: 0 12px;
    /* .fragenkatalog-purple-btn already zeroes this out - without repeating it here too,
       "Bearbeiten" (plain .grey.lighten-1, no purple class) falls back to the global
       .btn{margin-top:5px} and sits a few px lower than "Auswählen" next to it. */
    margin: 0 !important;
}
/* Export/Delete deliberately live in their own cluster at the opposite end of the row from
   Auswählen/Bearbeiten, and rendered as small muted icons rather than full buttons - both the
   distance and the smaller/quieter target make them much harder to hit by accident while
   reaching for the everyday actions on the other side. */
.fragenkatalog-item-actions-secondary {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding-left: 8px;
    border-left: 1px solid #e3d9f5;
}
.fragenkatalog-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #a794cf;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
}
.fragenkatalog-icon-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
/* The export icon uses an explicit tray-shape "download" icon rather than a plain downward
   arrow/chevron - at this button's small 16px render size, a bare arrow reads too much like a
   dropdown-menu indicator and got confused for one. Stroke-based (not filled) so the arrow and
   the tray it drops into stay visually distinct as separate strokes instead of blending into one
   filled blob at this size - same selector specificity as the shared rule above, so it must
   come after it in source order to actually win the cascade. */
.fragenkatalog-export-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.fragenkatalog-export-btn:hover,
.fragenkatalog-export-btn:focus,
.fragenkatalog-export-btn:active {
    background: rgba(106, 72, 173, 0.1);
    color: #6a48ad;
    outline: none;
}
.fragenkatalog-delete-btn {
    color: #c48a8a;
}
.fragenkatalog-delete-btn:hover,
.fragenkatalog-delete-btn:focus,
.fragenkatalog-delete-btn:active {
    background: rgba(183, 28, 28, 0.08);
    color: #b71c1c;
    outline: none;
}
/* Amber, distinct from export's purple and delete's red - this isn't destructive to the
   template's content, just its revision counter, but it does have its own real (if narrower)
   consequence explained in the confirm dialog, so it reads as "caution", not "safe" or "danger". */
.fragenkatalog-reset-revision-btn {
    color: #b08a4a;
}
.fragenkatalog-reset-revision-btn:hover,
.fragenkatalog-reset-revision-btn:focus,
.fragenkatalog-reset-revision-btn:active {
    background: rgba(230, 145, 0, 0.12);
    color: #b3720a;
    outline: none;
}
.fragenkatalog-selection-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.fragenkatalog-selection-title {
    font-weight: 600;
    color: #4a2f7a;
    margin-bottom: 10px;
}
.fragenkatalog-group-block {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fcfbfe;
    overflow: hidden;
}
.fragenkatalog-group-block.is-group-excluded {
    opacity: 0.55;
}
.fragenkatalog-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 10px;
}
.fragenkatalog-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
}
.fragenkatalog-group-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #6a48ad;
    flex: 0 0 auto;
}
.fragenkatalog-group-name {
    font-weight: 600;
}
.fragenkatalog-group-count {
    font-size: 0.8rem;
    color: #777;
    flex: 1 1 auto;
}
.fragenkatalog-count-stepper {
    flex: 0 0 auto;
}
.fragenkatalog-question-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eee;
}
.fragenkatalog-question-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 0.86rem;
    border-bottom: 1px solid #f1ecf9;
}
.fragenkatalog-question-item:last-child {
    border-bottom: none;
}
.fragenkatalog-question-item.is-imported {
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #cfc3e6;
}
.fragenkatalog-question-star {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: #cfc3e6;
}
.fragenkatalog-question-star.is-favorite {
    fill: #6a48ad;
}
.fragenkatalog-question-item.is-imported .fragenkatalog-question-star {
    fill: #ddd;
}
.fragenkatalog-question-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}
.fragenkatalog-question-imported-tag {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-style: normal;
    text-decoration: none;
    color: #8a67cf;
    background: #f1ecf9;
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
}
.fragenkatalog-question-empty {
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
}
#fragenkatalog-take-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 6px !important;
}

/* ==================== LAUNCHER BAR ==================== */
/* Every top-right launcher (Rechner/Historie/Fragenkataloge/Dark Mode/Einstellungen/Hilfe) lives
   in one flex row instead of each being independently `position:fixed` at its own hand-tuned
   `right` offset - the old approach needed re-calibrating by hand every time a button was
   added/removed/resized, and still produced real overlaps that were hard to predict (the title's
   own text-wrap point shifts non-linearly with viewport width, so a hardcoded padding-right
   guess could never reliably clear it - see main.js's reserveTitleSpaceForLauncherBar(), which
   measures this bar's actual rendered width at runtime instead). Flexbox means the buttons can
   never overlap each other or clip regardless of viewport width, scroll position, or how many
   buttons exist - and a button that's `display:none` (see body.template-mode below) is cleanly
   removed from the row, no leftover gap. All six are now the same 36px icon-only footprint -
   consistent instead of some full-label/some icon-only - order (left to right): Rechner,
   Fragenkataloge, Historie, Dark Mode, Einstellungen, Hilfe. */
.launcher-bar {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px;
}
.launcher-btn {
    position: relative; /* anchors the ::after tooltip below */
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.launcher-btn:hover,
.launcher-btn:focus,
.launcher-btn:active {
    outline: none;
}
.launcher-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}
/* Instant custom tooltip, deliberately NOT the native `title` attribute - browsers delay that by
   ~500ms-1.5s before showing it, which reads as sluggish for a row of otherwise-unlabeled icon
   buttons where the name is the whole point of hovering. content:attr(data-tooltip) means each
   button only needs that one attribute (see index_v7.html / updateDarkModeButton() in
   darkmode.js for the one button whose label changes dynamically) - no separate tooltip element
   to keep in sync. Deliberately no opacity transition at all - even a short fade measurably
   delays when the tooltip is fully visible, and "immediately" was the explicit point. */
.launcher-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 44px;
    right: 0;
    background: #262626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1150;
}
.launcher-btn:hover::after,
.launcher-btn:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
.einstellungen-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.einstellungen-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: min(85vh, 720px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 20px;
}
.einstellungen-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.einstellungen-dialog-header h5 {
    margin: 0;
}
/* Dense list of label/control rows - deliberately NOT a card layout, to match the rest of the
   app's utilitarian density instead of reading as a separate visual language. */
.einstellungen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.einstellungen-row:last-child {
    border-bottom: none;
}
.einstellungen-label {
    font-size: 0.9rem;
    color: #333;
    flex: 1 1 auto;
}
.einstellungen-row .answer-type-select {
    flex: 0 0 auto;
    max-width: 260px;
}
.einstellungen-checkbox-label {
    flex: 0 0 auto;
    padding-left: 0;
    min-height: 0;
}
.einstellungen-slider-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
/* Standalone copy of .fs-btn's visuals for the Notizen-font-size row - NOT the same class,
   since setNotizenFontSize() in notizen.js blanket-selects every .fs-btn on the page (including
   the real Notizen toolbar's) and toggles 'active' on it - sharing the class would make this
   settings-only control silently fight over its own 'active' state with that listener. */
.settings-fs-control {
    display: flex;
    align-items: center;
    gap: 2px;
}
.settings-fs-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    line-height: 24px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    background: #f0f0f0;
    color: #444;
    cursor: pointer;
}
.settings-fs-btn:nth-child(2) { font-size: 0.9rem; }
.settings-fs-btn:nth-child(3) { font-size: 1.05rem; }
.settings-fs-btn:hover {
    background: #e2e2e2;
}
.settings-fs-btn.active {
    background: #26a69a;
    border-color: #26a69a;
    color: #fff;
}

/* ==================== AUTO-REPLACE (TAB) KÜRZEL-LISTE ==================== */
/* A block-flow variant of .einstellungen-row for content that needs its own full-width area
   (the Kürzel list + its "add" button) instead of the usual single label/control pair. */
.einstellungen-row-block {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.autoreplace-scopes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    width: 100%;
}
.autoreplace-scope-option {
    font-size: 0.85rem;
}
.autoreplace-rules-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.autoreplace-rules-empty {
    font-size: 0.85rem;
    color: #888;
    padding: 4px 0;
}
.autoreplace-rule-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.autoreplace-short-input,
.autoreplace-long-input {
    flex: 1 1 0;
    min-width: 0;
    height: 32px !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid #b0b0b0 !important;
    border-radius: 4px;
    box-shadow: none !important;
}
.autoreplace-short-input {
    flex: 1 1 100px;
}
.autoreplace-long-input {
    flex: 2 1 180px;
}
.autoreplace-arrow {
    flex: 0 0 auto;
    color: #999;
    font-size: 0.85rem;
}
.autoreplace-rule-row .autoreplace-delete-btn {
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px;
}
.autoreplace-add-btn {
    align-self: flex-start;
}

/* ==================== TEMPLATE-FAVORITE STAR ==================== */
/* Only meaningful inside a Fragenkatalog - hidden in the exam form, shown while
   body.template-mode is active (see below). */
.template-favorite-btn {
    display: none;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #b0a2cc;
    flex: 0 0 auto;
}
.template-favorite-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.template-favorite-btn.is-favorite {
    color: #6a48ad;
}
/* Materialize's global button:focus{background-color:#2ab7a9} rule (a bare element+pseudo-
   class selector, so it matches ANY <button> lacking a more specific focus style of its own)
   paints a teal square behind this star on click, which then only clears once focus moves
   elsewhere - clashing with the rest of the purple template UI in the meantime. Overriding
   :focus/:active back to transparent here removes it without touching Materialize's default
   focus style on other, unrelated buttons that never had this problem reported. */
.template-favorite-btn:focus,
.template-favorite-btn:active {
    background-color: transparent;
    outline: none;
}
body.template-mode .template-favorite-btn {
    display: inline-flex;
}

/* ==================== TEMPLATE-EDITING MODE ==================== */
/* Reuses the exam's whole group/question/answer editor (see form.js) - only the scoring-
   specific bits are hidden, and a purple identity replaces the teal exam theme throughout. */
body.template-mode .q-checkbox-label,
body.template-mode .main-score-controls,
body.template-mode .answer-score-controls,
body.template-mode .weight-controls,
body.template-mode .agg-weight-display,
body.template-mode .question-score-badge,
body.template-mode #live-summary-group,
body.template-mode .notizen-container,
body.template-mode #floating-timer,
body.template-mode .rechner-launcher,
body.template-mode .history-launcher,
body.template-mode .fragenkatalog-launcher {
    display: none !important;
}
body.template-mode .question-group {
    border-color: #6a48ad;
    background: #faf7fd;
}
body.template-mode .group-name-input {
    color: #4a2f7a;
}
body.template-mode .row.draggable-row {
    border-color: #e2d7f2;
}
/* Materialize's teal focus styling (border-color/box-shadow #26a69a) on question/answer
   textareas, plus its built-in underline focus style on plain text inputs like
   .group-name-input (input[type=text]:not(.browser-default):focus - a Materialize rule this
   app never overrode itself, since it normally just fits the exam's own teal theme), both need
   to become purple here so they match the rest of the template-mode UI instead of clashing
   with it. Selector specificity is bumped (type + class chain) to reliably beat Materialize's
   own focus rules regardless of stylesheet load order. */
body.template-mode textarea.materialize-textarea:focus {
    border-color: #6a48ad;
    box-shadow: 0 1px 0 0 #6a48ad;
}
body.template-mode input.group-name-input:focus {
    border-bottom: 1px solid #6a48ad;
    box-shadow: 0 1px 0 0 #6a48ad;
}
/* Materialize also auto-tags any textarea.validate that currently has content with a plain
   (non-focus) .valid class, which carries its OWN green underline+shadow
   (textarea.materialize-textarea.valid, no :focus needed) - this is what actually stays green
   even after clicking away, since the :focus override above only affects the moment the field
   is focused. Question textareas carry the "validate" class (answers don't), so this is the one
   that needs the same purple treatment. */
body.template-mode textarea.materialize-textarea.valid {
    border-color: #6a48ad;
    box-shadow: 0 1px 0 0 #6a48ad;
}
body.template-mode .add-question-btn,
body.template-mode .add-answer-btn,
body.template-mode .add-group-btn {
    background-color: #6a48ad !important;
}
body.template-mode .delete-group-btn,
body.template-mode .delete-question-btn,
body.template-mode .answer-delete-btn {
    background-color: #b0a2cc !important;
}
.template-mode-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #6a48ad;
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    /* Matches .question-group's own margin-left, so the banner lines up with the groups below
       it instead of sitting flush against the left edge while everything under it is inset. */
    margin-left: 12px;
}
.template-mode-banner-title {
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.template-name-input {
    flex: 1 1 220px;
    height: 32px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    /* Keep Materialize's own transparent-background underline-style input look (consistent
       with every other plain text field in the app) - only the text color needed changing,
       from its default near-black to white so it actually reads against the purple banner. */
    color: #fff !important;
}
.template-name-input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}
body.template-mode .button-container .btn.grey.lighten-1 {
    color: #333 !important;
}

/* ==================== DARKMODE LAUNCHER ==================== */
/* Sizing/position come from .launcher-bar/.launcher-btn (see LAUNCHER BAR section). */
/* Icon shows the mode a click would switch INTO, not the current one. */
.darkmode-launcher .icon-sun {
    display: none;
}
html.dark-mode .darkmode-launcher .icon-moon {
    display: none;
}
html.dark-mode .darkmode-launcher .icon-sun {
    display: block;
}

/* ==================== HILFE LAUNCHER + OVERLAY ==================== */
/* Sizing/position come from .launcher-bar/.launcher-btn (see LAUNCHER BAR section). */
.hilfe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.hilfe-dialog {
    width: min(820px, calc(100vw - 24px));
    max-height: min(88vh, 900px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 24px;
}
.hilfe-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: sticky;
    top: -24px;
    background: #fff;
    padding: 8px 0 12px 0;
    margin: -24px -24px 8px -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: 1px solid #eee;
}
.hilfe-dialog-header h5 {
    margin: 0;
}
/* Styled to match the collapsible Notizen panels (.notizen-panel / -header / -caret / -title in
   the NOTIZEN PANELS block above) - same card border/radius, same grey header bar, same caret
   behavior, so a collapsed Hilfe section reads as the same kind of UI element a user already
   knows from the Notizen sidebar. */
.hilfe-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
}
.hilfe-section:last-child {
    margin-bottom: 0;
}
.hilfe-section h6 {
    font-weight: 600;
    font-size: 0.88rem;
    color: #333;
    margin: 0;
}
.hilfe-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: #f5f6f7;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 10px;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.hilfe-section:not(.expanded) .hilfe-section-header {
    border-bottom: none;
}
/* Materialize's global button:focus{background-color:#2ab7a9} rule (a bare element+pseudo-class
   selector, matches ANY <button> without a more specific focus style) paints a teal bar behind
   this header on click, which then only clears once focus moves elsewhere - same recurring issue
   as .template-favorite-btn/.launcher-btn elsewhere. Override back to the header's own resting
   background (not transparent) so the grey bar itself stays put instead of flashing. */
.hilfe-section-header:focus,
.hilfe-section-header:active {
    background-color: #f5f6f7;
    outline: none;
}
.hilfe-section-caret {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: #757575;
    transition: transform 0.15s ease-in-out;
    transform: rotate(-90deg);
}
.hilfe-section.expanded .hilfe-section-caret {
    transform: rotate(0deg);
}
.hilfe-section-body {
    display: none;
    padding: 12px;
}
.hilfe-section.expanded .hilfe-section-body {
    display: block;
}
.hilfe-section p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}
.hilfe-section p:last-child {
    margin-bottom: 0;
}
.hilfe-section ul {
    margin: 0 0 8px 0;
    padding-left: 20px;
    line-height: 1.6;
}
.hilfe-section ul li {
    margin-bottom: 4px;
}
.hilfe-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 10px;
}

/* ==================== DARK MODE ==================== */
html.dark-mode {
    color-scheme: dark;
}
html.dark-mode body {
    background-color: #121212;
    color: #e4e4e4;
}
html.dark-mode h3.center-align,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode #result {
    color: #f0f0f0;
}
html.dark-mode .disclaimer {
    color: #aaa;
}
html.dark-mode .copyright {
    color: #ccc;
}

/* Materialize's default underline-style text inputs (Prüflingsname/-nummer) */
html.dark-mode input[type="text"].validate {
    color: #e4e4e4;
    border-bottom: 1px solid #666;
    background-color: transparent;
}
html.dark-mode .input-field label {
    color: #9e9e9e;
}
html.dark-mode .input-field label.active {
    color: #4db6ac;
}

/* Cards: groups, question rows, live-summary card */
html.dark-mode .question-group,
html.dark-mode .summary-group {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
html.dark-mode .row.draggable-row {
    background: #232323;
    border-color: #3a3a3a;
}
html.dark-mode .group-name-input,
html.dark-mode .question-text-input,
html.dark-mode .answer-text-input {
    color: #f0f0f0;
}
html.dark-mode .group-name-input {
    background: transparent;
}
html.dark-mode .question-text-input,
html.dark-mode .answer-text-input,
html.dark-mode .zt-input,
html.dark-mode .weight-input,
html.dark-mode .weight-input-lg,
html.dark-mode .answer-type-select,
html.dark-mode .rechner-table input[type="number"] {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #eee !important;
}
html.dark-mode input::placeholder,
html.dark-mode .zt-input::placeholder {
    color: #888;
}
html.dark-mode .weight-controls .weight-btn {
    background: #333;
    border-color: #555;
    color: #ddd;
}
html.dark-mode .weight-controls .weight-btn:hover {
    background: #3d3d3d;
}
html.dark-mode .weight-controls .weight-btn:active {
    background: #454545;
}
html.dark-mode .weight-label,
html.dark-mode .weight-label-lg,
html.dark-mode .bewertung-label,
html.dark-mode .zt-label,
html.dark-mode .zt-col-label,
html.dark-mode .zt-input-suffix,
html.dark-mode .agg-weight-display,
html.dark-mode .slider-value {
    color: #a9b7ba;
}
html.dark-mode .answers-container {
    border-left-color: #3a3a3a;
}
html.dark-mode .answer-row {
    border-bottom-color: #333;
}
html.dark-mode .answer-score-controls {
    background: #262b2c;
    border-color: #3a4143;
}
html.dark-mode .question-score-badge {
    background: #123a35;
    color: #4dd0c4;
}
html.dark-mode .question-score-badge.is-unasked {
    background: #2b2b2b;
    color: #9e9e9e;
}
html.dark-mode .group-drag-handle:active {
    background: #333;
}
html.dark-mode .bewertungshilfen-widget {
    border-color: #444;
}
html.dark-mode .bewertungshilfen-widget .bh-legend {
    background: #1a1a1a;
    color: #aaa;
}

/* Notizen sidebar + Zielgruppe table */
html.dark-mode .notizen-container {
    background-color: #1a1a1a;
    border-color: #3a3a3a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
html.dark-mode .zielgruppe-table-container {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
html.dark-mode .notizen-panel {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
html.dark-mode .notizen-panel-header {
    background: #232323;
    border-color: #3a3a3a;
    color: #e4e4e4;
}
html.dark-mode .notizen-panel-title {
    color: #e4e4e4;
}
html.dark-mode .notizen-panel-caret {
    fill: #aaa;
}
html.dark-mode .notizen-textarea {
    background-color: #1a1a1a;
    color: #e4e4e4;
}
html.dark-mode .fs-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #ddd;
}
html.dark-mode .fs-btn.active {
    background: #26a69a;
    border-color: #26a69a;
    color: #fff;
}
html.dark-mode .pate-modus-btn.active {
    background-color: #1f8f84 !important;
}
html.dark-mode .pate-punkte-input {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #eee !important;
}
html.dark-mode .settings-fs-btn {
    background: #2a2a2a;
    border-color: #555;
    color: #ddd;
}
html.dark-mode .settings-fs-btn.active {
    background: #26a69a;
    border-color: #26a69a;
    color: #fff;
}

/* Launcher overlays / dialogs (Historie, Rechner, Hilfe, Einstellungen) */
html.dark-mode .history-overlay,
html.dark-mode .rechner-overlay,
html.dark-mode .hilfe-overlay,
html.dark-mode .einstellungen-overlay,
html.dark-mode .statistik-overlay {
    background: rgba(0, 0, 0, 0.55);
}
html.dark-mode .history-dialog,
html.dark-mode .rechner-dialog,
html.dark-mode .hilfe-dialog,
html.dark-mode .einstellungen-dialog,
html.dark-mode .statistik-dialog {
    background: #1e1e1e;
    color: #e4e4e4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
html.dark-mode .einstellungen-row {
    border-bottom-color: #333;
}
html.dark-mode .einstellungen-label {
    color: #e4e4e4;
}
html.dark-mode .autoreplace-rules-empty {
    color: #999;
}
html.dark-mode .autoreplace-short-input,
html.dark-mode .autoreplace-long-input {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #eee !important;
}
html.dark-mode .autoreplace-arrow {
    color: #777;
}
html.dark-mode .hilfe-dialog-header {
    background: #1e1e1e;
    border-bottom-color: #333;
}
html.dark-mode .hilfe-section {
    background: #1e1e1e;
    border-color: #3a3a3a;
}
html.dark-mode .hilfe-section-header {
    background: #232323;
    border-color: #3a3a3a;
}
html.dark-mode .hilfe-section-header:focus,
html.dark-mode .hilfe-section-header:active {
    background-color: #232323;
}
html.dark-mode .hilfe-section h6 {
    color: #e4e4e4;
}
html.dark-mode .hilfe-section-caret {
    fill: #aaa;
}
html.dark-mode .hilfe-img {
    border-color: #3a3a3a;
}
html.dark-mode #history-empty-state {
    color: #aaa;
}
html.dark-mode .history-item {
    background: #232323;
    border-color: #3a3a3a;
}
html.dark-mode .history-item.is-selected {
    background: #1d2e1f;
    border-color: #5aa860;
}
html.dark-mode .history-item .history-subtitle {
    color: #aaa;
}

/* Statistik dialog */
html.dark-mode #statistik-empty-state {
    color: #aaa;
}
html.dark-mode .statistik-scope-row {
    border-bottom-color: #333;
}
html.dark-mode .statistik-scope-tabs {
    border-color: #444;
}
html.dark-mode .statistik-scope-tab {
    background: #232323;
    border-right-color: #444;
    color: #ccc;
}
html.dark-mode .statistik-scope-tab:hover {
    background: #2a2a2a;
}
html.dark-mode .statistik-scope-tab.active {
    background: #26a69a;
    color: #fff;
}
html.dark-mode .statistik-scope-count {
    color: #999;
}
html.dark-mode .statistik-kpi-section h6,
html.dark-mode .statistik-chart-block h6,
html.dark-mode .statistik-table-block h6,
html.dark-mode .statistik-comparison-header h6 {
    color: #e4e4e4;
}
html.dark-mode .statistik-kpi-card {
    background: #232323;
    border-color: #3a3a3a;
}
html.dark-mode .statistik-kpi-label {
    color: #999;
}
html.dark-mode .statistik-kpi-value {
    color: #f0f0f0;
}
html.dark-mode .statistik-kpi-sub {
    color: #aaa;
}
html.dark-mode .statistik-source-hint,
html.dark-mode .statistik-source-legend {
    color: #999;
}
html.dark-mode .statistik-charts-unavailable {
    color: #ffcc80;
    background: #3a2e1a;
    border-color: #5c4620;
}
html.dark-mode .statistik-table-wrap {
    border-color: #3a3a3a;
}
html.dark-mode .statistik-table th,
html.dark-mode .statistik-table td {
    border-bottom-color: #333;
}
html.dark-mode .statistik-table th {
    background: #232323;
    color: #e4e4e4;
}
html.dark-mode .statistik-table-number,
html.dark-mode .statistik-table-empty {
    color: #999;
}
html.dark-mode .statistik-comparison-block {
    border-top-color: #333;
}
html.dark-mode .statistik-comparison-hint,
html.dark-mode .statistik-comparison-empty {
    color: #999;
}
html.dark-mode .statistik-comparison-item {
    background: #232323;
    border-color: #3a3a3a;
}
html.dark-mode .statistik-comparison-label-input {
    background-color: #2a2a2a !important;
    border-color: #555 !important;
    color: #eee !important;
}
html.dark-mode .statistik-comparison-meta {
    color: #999;
}

/* Rechner table */
html.dark-mode .rechner-table th,
html.dark-mode .rechner-table td {
    border-bottom-color: #333;
}
html.dark-mode .rechner-table th {
    background: #123a35;
    color: #4dd0c4;
    border-bottom-color: #1a5049;
}
html.dark-mode .rechner-table .section-row td {
    background: #242424;
    color: #ddd;
    border-color: #3a3a3a;
}
html.dark-mode .rechner-table .result-row td {
    background: #123a1a;
    border-color: #2f6b3c;
}
html.dark-mode .rechner-table .sub-label {
    color: #aaa;
}
html.dark-mode .rechner-table .rechner-op,
html.dark-mode .rechner-table .rechner-label-right {
    color: #a9b7ba;
}
html.dark-mode .rechner-table .calc-val {
    background: #202b2b;
    color: #4dd0c4;
    border-color: #37484a;
}
html.dark-mode .rechner-table .note-val {
    background: #202020;
    border-color: #3a3a3a;
    color: #eee;
}
html.dark-mode .rechner-dialog .rechner-subtitle {
    color: #999;
}
html.dark-mode .rechner-warning {
    background: #3a2a10;
    border-color: #c77b00;
    color: #ffb74d;
}

/* Custom confirm/info/import dialogs (JS-generated, see form.js/import-export.js) */
html.dark-mode .app-dialog-box {
    background: #1e1e1e !important;
    color: #e4e4e4;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ==================== FRAGENKATALOG + TEMPLATE MODE (DARK MODE) ==================== */
html.dark-mode .fragenkatalog-overlay {
    background: rgba(0, 0, 0, 0.55);
}
html.dark-mode .fragenkatalog-dialog {
    background: #1e1e1e;
    color: #e4e4e4;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    border-top-color: #8a67cf;
}
html.dark-mode .fragenkatalog-dialog-header h5 {
    color: #b79bee;
}
html.dark-mode .fragenkatalog-actions-row {
    border-bottom-color: #333;
}
html.dark-mode #fragenkatalog-empty-state {
    color: #aaa;
}
html.dark-mode .fragenkatalog-item {
    background: #24202c;
    border-color: #4a3a6e;
}
html.dark-mode .fragenkatalog-item-actions-secondary {
    border-left-color: #4a3a6e;
}
html.dark-mode .fragenkatalog-icon-btn {
    color: #6b5a8f;
}
html.dark-mode .fragenkatalog-export-btn:hover,
html.dark-mode .fragenkatalog-export-btn:focus,
html.dark-mode .fragenkatalog-export-btn:active {
    background: rgba(183, 155, 238, 0.15);
    color: #b79bee;
}
html.dark-mode .fragenkatalog-delete-btn {
    color: #9e6f6f;
}
html.dark-mode .fragenkatalog-delete-btn:hover,
html.dark-mode .fragenkatalog-delete-btn:focus,
html.dark-mode .fragenkatalog-delete-btn:active {
    background: rgba(220, 100, 100, 0.15);
    color: #e07a7a;
}
html.dark-mode .fragenkatalog-reset-revision-btn {
    color: #b09a6f;
}
html.dark-mode .fragenkatalog-reset-revision-btn:hover,
html.dark-mode .fragenkatalog-reset-revision-btn:focus,
html.dark-mode .fragenkatalog-reset-revision-btn:active {
    background: rgba(230, 175, 90, 0.18);
    color: #e0b360;
}
html.dark-mode .fragenkatalog-item.is-selected {
    border-color: #8a67cf;
}
html.dark-mode .fragenkatalog-item-title {
    color: #cbb6f5;
}
html.dark-mode .fragenkatalog-item-subtitle {
    color: #aaa;
}
html.dark-mode .fragenkatalog-selection-panel {
    border-top-color: #333;
}
html.dark-mode .fragenkatalog-selection-title {
    color: #cbb6f5;
}
html.dark-mode .fragenkatalog-group-block {
    background: #221e2c;
    border-color: #3a3448;
}
html.dark-mode .fragenkatalog-group-count {
    color: #aaa;
}
html.dark-mode .fragenkatalog-question-list {
    border-top-color: #3a3448;
}
html.dark-mode .fragenkatalog-question-item {
    border-bottom-color: #2c283a;
}
html.dark-mode .fragenkatalog-question-item.is-imported {
    color: #888;
    text-decoration-color: #4a3a6e;
}
html.dark-mode .fragenkatalog-question-star {
    fill: #4a3a6e;
}
html.dark-mode .fragenkatalog-question-star.is-favorite {
    fill: #b79bee;
}
html.dark-mode .fragenkatalog-question-item.is-imported .fragenkatalog-question-star {
    fill: #3a3448;
}
html.dark-mode .fragenkatalog-question-imported-tag {
    color: #b79bee;
    background: #2c2438;
}
html.dark-mode .fragenkatalog-question-empty {
    color: #888;
}
html.dark-mode .template-favorite-btn {
    color: #6b5a8f;
}
html.dark-mode .template-favorite-btn.is-favorite {
    color: #b79bee;
}
html.dark-mode body.template-mode .question-group {
    background: #241f2e;
    border-color: #8a67cf;
}
html.dark-mode body.template-mode .group-name-input {
    color: #cbb6f5;
}
html.dark-mode body.template-mode .row.draggable-row {
    background: #221f2a;
    border-color: #4a3a6e;
}
html.dark-mode body.template-mode textarea.materialize-textarea:focus {
    border-color: #8a67cf;
    box-shadow: 0 1px 0 0 #8a67cf;
}
html.dark-mode body.template-mode input.group-name-input:focus {
    border-bottom: 1px solid #8a67cf;
    box-shadow: 0 1px 0 0 #8a67cf;
}
html.dark-mode body.template-mode textarea.materialize-textarea.valid {
    border-color: #8a67cf;
    box-shadow: 0 1px 0 0 #8a67cf;
}
html.dark-mode .template-mode-banner {
    background: #4a2f7a;
}

/* ==================== NARROWER VIEWPORTS ==================== */
/* All six launcher buttons are already a uniform, compact 36px icon each (see LAUNCHER BAR
   section) - nothing there needs further shrinking at narrow widths any more. The title's
   reserved space is also handled dynamically at any width by
   reserveTitleSpaceForLauncherBar() in main.js (measuring .launcher-bar's actual rendered width
   at runtime), not a hardcoded guess here - so the only thing left to adjust for narrow screens
   is the title's own font size, purely for readability, unrelated to avoiding the buttons. */
@media (max-width: 1300px) {
    h3.center-align {
        font-size: 1.8rem;
    }

    /* A few extra px back for the (now tighter) question row - see .drag-handle below. */
    .drag-handle {
        margin-right: 4px;
    }
}