/* stil.css — gemeinsame Editor-Styles (index.html + hilfe.html) */
  :root {
    --navy: #1e3a5f; --rot: #a03028; --gold: #c8b57e;
    --flaeche: #f7f5f0; --hairline: #d9dde4; --text: #2a3340; --grau: #5c6675;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; font-family: 'Alegreya Sans', system-ui, sans-serif; color: var(--text);
    display: flex; flex-direction: column; height: 100vh; background: #eceae4;
  }
  header {
    background: var(--navy); color: #fdfcf9; padding: 8px 14px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  header h1 { font-size: 15px; margin: 0 12px 0 0; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; }
  header h1 span { color: var(--gold); }
  #meldung { flex: 1; font-size: 12.5px; color: #dfe6ef; min-width: 120px; }
  #meldung.fehler { color: #ffb3ab; font-weight: 700; }
  #ueberlauf {
    background: #a03028; color: #fff; font-size: 12.5px; font-weight: 700;
    padding: 5px 14px; display: none;
  }
  main { flex: 1; display: flex; min-height: 0; }
  /* Editorspalte füllt dynamisch ~55 % der Breite (per Griff unten rechts anpassbar) */
  #links { flex: 1 1 55%; min-width: 340px; display: flex; flex-direction: column; border-right: 1px solid var(--hairline); background: #fff; resize: horizontal; overflow: hidden; }
  nav { display: flex; border-bottom: 1px solid var(--hairline); }
  .gb-tab {
    flex: 1; border: none; background: none; padding: 9px 4px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--grau);
    border-bottom: 3px solid transparent;
  }
  .gb-tab.aktiv { color: var(--navy); border-bottom-color: var(--rot); }
  #panel { flex: 1; overflow: auto; padding: 12px; }
  #rechts { flex: 1 1 45%; display: flex; flex-direction: column; min-width: 0; }
  #vorschau { flex: 1; border: none; width: 100%; background: #f5f5f4; }

  /* Editor-Bausteine */
  .gb-panel h3 { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
  .gb-panel h3:first-child { margin-top: 0; }
  .gb-hinweis { font-size: 12px; color: var(--grau); margin: 4px 0 10px; line-height: 1.45; }
  .gb-feld { display: block; margin: 0 0 8px; flex: 1; }
  .gb-feld.klein { flex: 0 0 110px; }
  .gb-feld > span { display: block; font-size: 11px; font-weight: 700; color: var(--grau); margin-bottom: 2px; }
  .gb-input { width: 100%; font: inherit; font-size: 13.5px; padding: 5px 7px; border: 1px solid var(--hairline); border-radius: 4px; background: #fff; }
  .gb-input:focus { outline: 2px solid #b9c7d8; border-color: var(--navy); }
  textarea.gb-input { resize: vertical; font-family: ui-monospace, monospace; font-size: 12.5px; }

  /* Rich-Text-Felder (Formatierung klickbar wie in Word) */
  .gb-rich { min-height: 34px; cursor: text; line-height: 1.5; }
  .gb-rich.einzeilig { min-height: 28px; }
  .gb-rich:empty::before { content: attr(data-placeholder); color: #a8a29a; pointer-events: none; }
  .gb-rich a { color: var(--rot); }
  .gb-werkzeuge { display: none; gap: 3px; margin: 0 0 3px; align-items: center; flex-wrap: wrap; }
  .gb-richfeld:focus-within .gb-werkzeuge { display: flex; }
  .gb-werkzeuge .gb-knopf { min-width: 26px; padding: 2px 6px; }
  .gb-farbe { width: 20px; height: 20px; min-width: 20px !important; padding: 0 !important; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--hairline); }

  /* Zeitfeld (Uhrzeit-Wähler + Freitext-Umschalter) */
  .gb-zeitfeld { flex: 0 0 152px; }
  .gb-zeitzeile { display: flex; gap: 3px; align-items: center; }
  .gb-zeitzeile input[type="time"] { width: 112px; }

  /* Kalender-Eintrag: Zeit + Text auf einer Linie, darunter grün + Aktionen */
  .eintrag { position: relative; border: 1px solid var(--hairline); border-radius: 7px; background: #fff; padding: 8px 10px; margin: 0 0 8px; }
  .eintrag-haupt { display: flex; gap: 10px; align-items: flex-end; }
  .eintrag-haupt .gb-feld { margin: 0; }
  .eintrag-haupt .gb-richfeld { flex: 1; min-width: 0; }
  .eintrag-fuss { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
  .eintrag-fuss .gb-check { padding-bottom: 0; }
  .eintrag-fuss .gb-aktionen { margin-left: auto; padding-bottom: 0; }

  /* Verschieben: dezente Griffleiste einheitlich am linken Rand jeder Karte */
  .gb-ziehbar { position: relative; }
  /* doppelte Klasse = höhere Spezifität, überstimmt die padding-Kurzform der Karten */
  .gb-ziehbar.gb-ziehbar { padding-left: 24px; }
  .gb-griff {
    position: absolute; left: 3px; top: 7px; width: 15px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; user-select: none; border-radius: 4px;
    color: #cbc5b7; font-size: 13px; line-height: 1;
    transition: color .15s ease, background .15s ease;
  }
  .gb-griff::before { content: "⠿"; }
  .gb-griff:hover { color: var(--navy); background: rgba(30,58,95,.07); }
  .gb-griff:active { cursor: grabbing; }

  /* Ziehen: sanftes Anheben statt hartem Ausblenden */
  .ziehend { opacity: .8; box-shadow: 0 10px 26px rgba(30,58,95,.17); transform: scale(.997); }
  /* Einfügemarke: weiche goldene Linie mit Schimmer statt harter roter Kante */
  .gb-ziehbar.drop-oben::after, .gb-ziehbar.drop-unten::after {
    content: ""; position: absolute; left: 22px; right: 3px; height: 3px;
    background: linear-gradient(90deg, var(--gold), #e4d6a8, var(--gold));
    border-radius: 3px; box-shadow: 0 0 7px rgba(200,181,126,.75); pointer-events: none;
  }
  .gb-ziehbar.drop-oben::after { top: -6px; }
  .gb-ziehbar.drop-unten::after { bottom: -6px; }
  @media (prefers-reduced-motion: reduce) { .ziehend { transform: none; } }
  .gb-reihe { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 8px; }
  .gb-reihe .gb-feld { margin: 0; }
  .gb-check { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; padding-bottom: 6px; white-space: nowrap; }
  .gb-knopf {
    font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    border: 1px solid var(--hairline); background: var(--flaeche); color: var(--navy);
    padding: 5px 10px; border-radius: 4px;
  }
  .gb-knopf:hover { background: #efece3; }
  .gb-knopf.breit { width: 100%; margin-top: 6px; }
  .gb-knopf.mini { padding: 2px 7px; font-size: 12px; }
  .gb-knopf.rot { color: var(--rot); }
  .gb-aktionen { display: flex; gap: 3px; padding-bottom: 4px; margin-left: auto; }
  .gb-karte { border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; background: #fbfaf7; }
  .gb-karte.tag { background: #fff; }
  .gb-karte summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--navy); margin: -2px 0 6px; }
  .gb-typ { display: inline-block; background: var(--navy); color: #fff; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; padding: 1px 6px; margin-right: 4px; }
  .gb-unter { border-left: 3px solid var(--hairline); padding-left: 8px; margin: 0 0 8px; }
  .gb-add { border-top: 1px dashed var(--hairline); padding-top: 10px; }
  .gb-add select { flex: 1; }
  .gb-bildzeile { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #eee9df; font-size: 13px; }
  .gb-bildname { flex: 1; }
  .gb-bildname code { font-size: 10.5px; color: var(--grau); }
  .gb-status.ok { color: #3f7a52; } .gb-status.leer { color: #b9b3a6; }
  .gb-dpi { font-size: 11.5px; color: var(--grau); white-space: nowrap; }
  .gb-dpi.warn { color: var(--rot); font-weight: 700; }
  header .gb-knopf { background: rgba(255,255,255,0.12); color: #fdfcf9; border-color: rgba(255,255,255,0.25); }
  header .gb-knopf:hover { background: rgba(255,255,255,0.22); }
  header .gb-knopf.primaer { background: var(--gold); color: #2a3340; border-color: var(--gold); font-weight: 800; }

  /* Hilfe: Bausteine als echte gerenderte Beispiele im Musterdesign */
  .gb-hilfe-block { margin: 0 0 18px; }
  .gb-hilfe-block .gb-hinweis { margin-top: 4px; }
  .gb-beispiel {
    background: #fff; border: 1px solid var(--hairline); border-radius: 6px;
    padding: 14px 16px; overflow-x: auto;
    font-family: 'Alegreya', Georgia, serif; color: #2a3340;
  }
  /* Bild-Platzhalter andeuten (die echte Komponente läuft nur im Dokument) */
  .gb-beispiel image-slot {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; box-sizing: border-box;
    background: #f7f5f0; border: 1.5px dashed #cfc9bb; border-radius: 2px;
    color: #8a8477; font-family: 'Alegreya Sans', sans-serif; font-size: 12px;
  }
  .gb-beispiel image-slot::after { content: attr(placeholder); padding: 6px; text-align: center; }

  /* Mess-Container: exakt die Seiten-Innenbreite, unsichtbar, aber mit Layout */
  #messen {
    position: absolute; left: -10000px; top: 0; visibility: hidden;
    font-family: 'Alegreya', Georgia, serif; color: #2a3340;
  }
  #messen image-slot { display: block; width: 100%; height: 100%; }

  /* Mobil: Panels über der Vorschau stapeln */
  @media (max-width: 800px) {
    main { flex-direction: column; }
    #links { width: 100%; max-width: none; max-height: 45vh; resize: none; border-right: none; border-bottom: 1px solid var(--hairline); }
  }

/* ── Hilfe-Popup (Dialog) ── */
.gb-dialog { border: none; border-radius: 10px; padding: 0; width: min(780px, 94vw); max-height: 88vh; box-shadow: 0 24px 70px rgba(20, 25, 35, 0.35); }
.gb-dialog[open] { display: flex; flex-direction: column; }
.gb-dialog::backdrop { background: rgba(24, 32, 44, 0.45); }
.gb-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--navy); color: #fdfcf9; padding: 10px 14px; flex: none; }
.gb-dialog-kopf .gb-knopf { background: rgba(255,255,255,0.12); color: #fdfcf9; border-color: rgba(255,255,255,0.25); }
.gb-dialog-kopf .gb-knopf:hover { background: rgba(255,255,255,0.22); }
.gb-dialog-knoepfe { display: flex; gap: 6px; }
#hilfe-inhalt { padding: 14px 18px; overflow: auto; }

/* ── Hilfe als eigene Seite (hilfe.html) ── */
body.hilfe-seite { display: block; height: auto; min-height: 100vh; overflow: auto; background: #eceae4; }
.hilfe-rahmen { max-width: 780px; margin: 0 auto 48px; background: #fff; box-shadow: 0 2px 16px rgba(30, 58, 95, 0.1); }
.hilfe-rahmen .gb-panel { padding: 18px 22px; }