/* Globales Styling & Zentrierung */
    body {
      font-family: sans-serif;
      font-size: 11pt;
      background-color: #f0f0f0;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
    }

    /* Haupt-App-Card */
    .app-card {
      background-color: rgb(220, 220, 220);
      padding: 15px;
      border-radius: 4px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      max-width: 1300px;
      width: 100%;
    }

    /* Header */
    .app-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .app-header h2 { margin: 0; }

    /* Flex-Grid: Schaltet zwischen Nebeneinander (Desktop) und Untereinander (Mobil) um */
    .emulator-layout {
      display: flex;
      flex-wrap: wrap;
	  align-items: stretch; /* WICHTIG: Macht beide Spalten exakt gleich hoch! */
      gap: 15px;
      align-items: flex-start;
	  justify-content: center;
    }

    /* Linke Spalte: Screen + Regler */
    .screen-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #c0c0c0;
      padding: 10px;
      border-radius: 4px;
    }

    .canvas-wrapper {
      padding: 3px;
      background-color: white;
      display: inline-block;
    }

    #screen {
      padding: 2px;
      background-color: white;
      caret-color: transparent;
      display: block;
    }

    .speed-control {
      margin-top: 10px;
      display: flex;
      align-items: left;
      gap: 8px;
	  width:100%;
    }

    /* Rechte Spalte: Steuerung, Editor, Einstellungen */
    .controls-column {
      flex: 1;
      min-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Inline-Formularzeilen */
    .control-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.4);
      padding: 8px;
      border-radius: 4px;
    }

    /* Editor Bereich mit Buttons daneben */
    .editor-container {
      display: flex;
      gap: 10px;
    }

    #paste {
      white-space: nowrap;
      flex: 1;
      height: 240px;
      resize: vertical;
    }

    .editor-buttons {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 120px;
    }

    .editor-buttons input[type="button"],
    .editor-buttons select {
      width: 100%;
    }

    /* System / Version Buttons unten */
    .system-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      padding-top: 8px;
      border-top: 1px solid #aaa;
    }

    /* Dialoge */
    dialog {
      border: none;
      border-radius: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      font-family: sans-serif;
      font-size: 11pt;
    }