/** Shopify CDN: Minification failed

Line 509:0 Unexpected "<"

**/
/* ====================================================== */
/* === CSS (V2.33 - Text Button mit "Abc" statt Icon) === */
/* ====================================================== */

/* Basis Modal Stile (unverändert) */
.modal { display: none; position: fixed; inset: 0; z-index: 1050; background-color: rgba(0, 0, 0, .5); align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.modal.is-visible {
  display: flex;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-content { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, .2); width: 100%; max-width: 1100px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }

/* Desktop: Größerer Canvas-Bereich */
@media (min-width: 1200px) {
  .modal-content { max-width: 1400px !important; }
}

@media (min-width: 1600px) {
  .modal-content { max-width: 1600px !important; }
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-bottom: 1px solid #e9ecef; flex-shrink: 0; }
.modal-title { margin: 0; font-size: 1.2rem; font-weight: 600; }
.modal-close-btn { background: none; border: none; font-size: 1.6rem; line-height: 1; color: #6c757d; cursor: pointer; padding: 0; }
.modal-close-btn:hover { color: #000; }
.modal-body { overflow: hidden; flex-grow: 1; display: flex; flex-direction: column; }
.editor-dynamic-controls { padding: 15px; border: 1px solid #eee; border-radius: 5px; background-color: #f9f9f9; margin-bottom: 15px; flex-shrink: 0; width: 100%; box-sizing: border-box; }

/* Text Controls (unverändert) */
.text-controls label { display: block; margin-bottom: 5px; font-weight: 700; font-size: .9em; }
.text-controls-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 15px; }
@media (min-width: 576px) { .text-controls-grid { grid-template-columns: 1fr 1fr; } }
.text-controls input[type=text], .text-controls select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: #fff; font-size: 1em; min-height: 38px; }
.text-controls button { margin-right: 10px; margin-top: 5px; }

/* Icon Controls (unverändert) */
.icon-selection-controls p { margin-top: 0; margin-bottom: 10px; font-weight: 700; font-size: .9em; text-align: center; }
.icon-selection-controls { display: flex; flex-direction: column; align-items: center; }
.icon-previews-grid { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: repeat(4, auto); gap: 10px; width: 300px; height: 300px; border: 1px solid #ccc; padding: 10px; margin-bottom: 15px; box-sizing: border-box; margin-left: auto; margin-right: auto; justify-content: center; align-content: center; overflow: hidden; background-color: #fff; }
.icon-preview-img { width: 60px; height: 60px; margin: auto; cursor: pointer; opacity: 0.8; transition: opacity 0.2s ease-in-out, border-color 0.2s ease-in-out; border: 1px solid transparent; object-fit: contain; display: block; background-color: #f8f8f8; border-radius: 4px; }
.icon-preview-img:hover { opacity: 1; border-color: #999; }
.icon-navigation { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0; }
.icon-nav-btn { min-width: 30px; padding: 5px 10px !important; font-size: 1em !important; line-height: 1 !important; text-align: center; }
#icon-page-indicator { margin: 0 10px; font-size: 0.9em; white-space: nowrap; color: #555; }
#cancel-icon-selection-btn { margin-left: 15px; padding: 5px 10px !important; font-size: .8em !important; line-height: 1.2 !important; }
.icon-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; background-color: #e9ecef !important; border-color: #ced4da !important; color: #6c757d !important; }

/* Draw Controls (unverändert) */
#draw-controls { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; width: 100%; box-sizing: border-box; overflow: hidden; }
#draw-controls label { margin-bottom: 0; font-weight: 700; font-size: .9em; flex-shrink: 0; white-space: nowrap; }
#draw-controls input[type=range] { cursor: pointer; flex-grow: 1; flex-shrink: 1; min-width: 80px; max-width: 250px; }
#draw-controls span[id="draw-width-value"] { font-size: 0.9em; min-width: 35px; text-align: right; font-weight: bold; flex-shrink: 0; white-space: nowrap; }
#draw-controls #cancel-draw-btn { flex-shrink: 0; padding-left: 8px; padding-right: 8px; font-size: 0.75em; line-height: 1.3; min-width: auto; }

/* Canvas Container & Overlays (unverändert) */
.design-editor-canvas-container { position: relative; width: 100%; overflow: hidden; border: 1px dashed #ccc; background-color: #f8f8f8; cursor: default; flex-grow: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.design-editor-canvas-container.is-drawing .lower-canvas { cursor: crosshair; }
.design-editor-canvas-container.is-drawing.is-erasing .lower-canvas { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='rgba(0,0,0,0.8)' viewBox='0 0 16 16'><path d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm.66 11.59L3.417 8.536l2.13-2.131L9.191 9.95l-2.445 2.445z'/><rect x='3' y='6' width='8' height='3' rx='0.5' ry='0.5' transform='rotate(-45 7 7.5)' fill='white'/></svg>") 10 10, cell; }
.canvas-container { margin-left: auto !important; margin-right: auto !important; }
#designCanvas { display: block; }
.canvas-controls-overlay { position: absolute; top: 10px; right: 10px; z-index: 10; display: flex; flex-direction: column; gap: 5px; }
.canvas-control-btn { padding: 6px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, fill 0.2s ease, outline 0.2s ease, opacity 0.2s ease; width: 32px; height: 32px; color: #333; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.canvas-control-btn svg { display: block; transition: fill 0.2s ease; fill: currentColor; }
.canvas-control-btn:hover:not(:disabled):not(.active) { background-color: #e0e0e0; border-color: #bbb; color: #333; }
.canvas-control-btn:disabled { background-color: #e9ecef; border-color: #ced4da; color: #adb5bd; cursor: not-allowed; opacity: 0.6; }
.canvas-control-btn:disabled:hover { background-color: #e9ecef; border-color: #ced4da; }
.eraser-toggle-btn.active { background-color: var(--color-primary-button-bg, #115E16); border-color: var(--color-primary-button-border-hover, #09380C); outline: 2px solid var(--color-primary-button-bg-hover, #0D4A11); outline-offset: 1px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); color: #ffffff; }
.eraser-toggle-btn.active svg { fill: #ffffff; }
.info-btn { position: absolute; top: 10px; left: 10px; z-index: 10; }
.info-tips-popup { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 99999 !important; display: flex; align-items: center; justify-content: center; padding: 20px; }
.info-tips-popup[style*="display: block"], .info-tips-popup[style*="display: flex"] { display: flex !important; }
.info-tips-popup__content { background-color: #fff; padding: 20px 25px; border-radius: 8px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); position: relative; }
.info-tips-popup__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; }
.info-tips-popup__title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.info-tips-popup__close {
  background-color: #e9ecef; /* Passend zu .button--secondary */
  border: 1px solid #ced4da;   /* Passend zu .button--secondary */
  color: #343a40;             /* Passend zu .button--secondary */
  font-size: 0.9em;            /* Kleinere, passendere Schriftgröße */
  line-height: 1.4;          /* Besserer Zeilenabstand für Text */
  padding: 6px 12px;         /* Innenabstand für den Text */
  border-radius: 4px;          /* Abgerundete Ecken, wie andere Buttons */
  cursor: pointer;
  font-weight: normal;         /* Normale Schriftstärke */
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.info-tips-popup__close:hover {
  background-color: #dee2e6; /* Passend zu .button--secondary:hover */
  border-color: #adb5bd;      /* Passend zu .button--secondary:hover */
  color: #000;                /* Beibehaltung oder Anpassung der Hover-Textfarbe */
}
.info-tips-popup__body { font-size: 0.9rem; }
.info-tips-popup__body ul { list-style: disc; padding-left: 20px; margin: 0; }
.info-tips-popup__body li { margin-bottom: 8px; line-height: 1.4; }
.zoom-controls { position: absolute; bottom: 10px; right: 10px; z-index: 5; display: flex; flex-direction: column; gap: 5px; }
.zoom-btn { background-color: rgba(255, 255, 255, 0.85); color: #333; border: 1px solid #ccc; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; font-weight: bold; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.zoom-btn:hover, .zoom-btn:focus { background-color: #f5f5f5; border-color: #aaa; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); outline: none; }
.pan-controls { position: absolute; bottom: 10px; left: 10px; z-index: 5; display: grid; gap: 2px; background-color: rgba(255, 255, 255, 0.7); padding: 3px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.pan-btn { background-color: rgba(255, 255, 255, 0.85); color: #333; border: 1px solid #ccc; border-radius: 3px; width: 22px; height: 22px; font-size: 12px; font-weight: bold; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease; }
.pan-btn:hover, .pan-btn:focus { background-color: #f5f5f5; border-color: #aaa; outline: none; }
#resetViewBtn { grid-area: center; }
#resetViewBtn svg { display: block; margin: auto; }

/* Footer Stile (unverändert) */
.modal-footer { display: flex; justify-content: flex-end; align-items: center; padding: 15px 25px; border-top: 1px solid #e9ecef; gap: 10px; flex-shrink: 0; background-color: #f8f9fa; }

/* Basis Button Stile */
.button, button.toolbar-btn, .modal-footer .button, #add-text-btn, #cancel-text-btn, #cancel-draw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border: 1px solid #e0e0e0; border-radius: 4px; background-color: #f5f5f5; color: #333333; font-size: 1em; font-weight: normal; text-align: center; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; line-height: 1.4; box-sizing: border-box; margin: 2px; vertical-align: middle; text-decoration: none; }

/* Basis-Styling für Toolbar-Buttons (Icon ODER Text) */
#designEditorToolbar .toolbar-btn {
  width: 100%;  /* Basis für Desktop (vertikal gestapelt) */
  height: 44px;
  padding: 0;    /* Standardmäßig kein Padding für Icon-zentrierung */
  font-size: 0;  /* Standardmäßig Text verstecken (wird für #toolbarTextBtn überschrieben) */
  line-height: 1;
  border-radius: 8px;
  margin: 0;
  /* display: inline-flex, align-items: center, justify-content: center von .button geerbt */
}

/* Versteckt den optionalen Text-Span in ALLEN Toolbar-Buttons */
#designEditorToolbar .toolbar-btn .toolbar-btn-text {
  display: none !important;
}

/* Stile für SVGs in Toolbar-Buttons (außer Text-Button) */
#designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* NEU: Spezifische Stile für den Text-Button (#toolbarTextBtn) */
#designEditorToolbar #toolbarTextBtn {
  font-size: 1.1em;   /* Schriftgröße für "Abc" wieder sichtbar machen, anpassen nach Bedarf */
  line-height: 1;   /* Zur vertikalen Zentrierung anpassen */
  font-weight: 600; /* Etwas fetter */
  padding: 8px 10px;/* Optional: Etwas Padding wieder hinzufügen */
  /* Behält width: 100%, height: 44px etc. von oben bei */
}
/* Verhindern, dass die SVG-Regel auf den Text-Button angewendet wird */
#designEditorToolbar #toolbarTextBtn svg {
  display: none;
}
/* ENDE NEU */

.button:hover, button.toolbar-btn:hover, .modal-footer .button:hover, #add-text-btn:hover, #cancel-text-btn:hover, #cancel-draw-btn:hover { background-color: #e8e8e8; border-color: #d8d8d8; color: #333333; outline: none; }
.button:focus, button.toolbar-btn:focus, .modal-footer .button:focus, #add-text-btn:focus, #cancel-text-btn:focus, #cancel-draw-btn:focus { outline: none; border-color: var(--color-accent, #115E16); box-shadow: 0 0 0 2px rgba(17, 94, 22, 0.2); }
.button--primary, #modalConfirmBtn, #add-text-btn { background-color: var(--color-primary-button-bg, #115E16); color: var(--color-primary-button-text, #ffffff); border-color: var(--color-primary-button-border, #0D4A11); }
.button--primary:hover, #modalConfirmBtn:hover, #add-text-btn:hover { background-color: var(--color-primary-button-bg-hover, #0D4A11); border-color: var(--color-primary-button-border-hover, #09380C); color: var(--color-primary-button-text-hover, #ffffff); }
.button--primary:disabled, #modalConfirmBtn:disabled { background-color: #a3cca5 !important; border-color: #8fc492 !important; color: #ffffff !important; opacity: .7; cursor: not-allowed; }
.button--secondary, .modal-footer .modal-cancel-btn, #cancel-text-btn, #cancel-draw-btn { background-color: #e9ecef; color: #343a40; border-color: #ced4da; }
.button--secondary:hover, .modal-footer .modal-cancel-btn:hover, #cancel-text-btn:hover { background-color: #dee2e6; border-color: #adb5bd; color: #343a40; }
#draw-controls #cancel-draw-btn:hover { background-color: #dee2e6; border-color: #adb5bd; }
.canvas-control-btn.button--danger:not(:disabled) { background-color: #FEF0F1; border-color: #FCE6E8; color: #DC3545; }
.canvas-control-btn.button--danger:not(:disabled):hover { background-color: #FCE6E8; border-color: #FADDE1; color: #c82333; }
.button--danger, #toolbarDeleteBtn { background-color: #FEF0F1; color: #DC3545; border-color: #FCE6E8; }
.button--danger:disabled, #toolbarDeleteBtn:disabled,
.canvas-control-btn.button--danger:disabled { background-color: #f5f5f5; border-color: #e0e0e0; color: #aaaaaa; opacity: 0.7; cursor: not-allowed; }
.button--small { padding: 5px 12px; font-size: .8em; line-height: 1.2; }
#draw-controls #cancel-draw-btn { padding-left: 8px; padding-right: 8px; font-size: 0.75em; line-height: 1.3; min-width: auto; }

/* Layout */
.editor-layout-container { display: flex; gap: 0; flex-grow: 1; overflow: hidden; }
.editor-sidebar { flex: 0 0 180px; display: flex; flex-direction: column; overflow-y: auto; padding: 15px; box-sizing: border-box; border-right: 1px solid #e0e0e0; background-color: #fdfdfd; flex-shrink: 0; }
.editor-main-area { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; position: relative; padding: 15px; box-sizing: border-box; }

/* Desktop Toolbar Layout (Buttons UNTEREINANDER) */
#designEditorToolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Buttons füllen die Breite */
  gap: 10px;
}

/* ======= RESPONSIVE ANPASSUNG mit !important ======= */
@media (min-width: 769px) and (max-width: 1199px) {
  .modal-content { max-width: 1100px; }
}

@media (max-width: 768px) {
  .modal-content { max-width: 95%; max-height: 95vh; }
  .modal-body { padding: 0; }
  .editor-layout-container { flex-direction: column !important; overflow: auto !important; }
  .editor-sidebar { flex-basis: auto !important; width: 100% !important; order: 1 !important; overflow: visible !important; padding: 10px !important; border-right: none !important; border-bottom: 1px solid #e0e0e0 !important; background-color: #fdfdfd; flex-shrink: 0 !important; }
  .editor-main-area { order: 2 !important; padding: 10px !important; }

  /* Mobile Toolbar Layout (HORIZONTALE Reihe) */
  #designEditorToolbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 5px !important;
  }

  /* Mobile Toolbar Buttons: Feste quadratische Größe überschreibt Basis */
  #designEditorToolbar .toolbar-btn {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
  }
  /* Mobile: SVG sichtbar (außer im Text-Button) */
  #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important; /* Sicherstellen, dass es sichtbar ist */
  }
  /* Mobile: Text-Button mit angepasster Schriftgröße */
  #designEditorToolbar #toolbarTextBtn {
      font-size: 0.9em !important; /* Kleinere Schrift für kleinen Button */
      padding: 0 !important; /* Kein Padding im kleinen Button */
      /* Behält 48x48px von oben */
  }
  /* Mobile: Sicherstellen, dass im Text-Button kein SVG angezeigt wird */
   #designEditorToolbar #toolbarTextBtn svg {
      display: none !important;
   }

  /* Restliche mobile Stile... */
  .text-controls-grid { grid-template-columns: 1fr; }
  .editor-dynamic-controls { margin-bottom: 10px; }
  #draw-controls { flex-wrap: wrap; }
  #draw-controls input[type=range] { min-width: 120px; }
  #draw-controls #cancel-draw-btn { margin-left: 0; }
  .design-editor-canvas-container { min-height: 250px; }
  .canvas-controls-overlay { top: 8px; right: 8px; gap: 4px; }
  .canvas-control-btn { width: 28px; height: 28px; padding: 4px; }
  .info-btn { top: 8px; left: 8px; }
  .zoom-controls { bottom: 8px; right: 8px; }
  .zoom-btn { width: 28px; height: 28px; font-size: 16px; }
  .pan-controls { bottom: 8px; left: 8px; gap: 1px; padding: 2px; border-radius: 3px; }
  .pan-btn { width: 20px; height: 20px; font-size: 11px; border-radius: 3px; }
  .icon-previews-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 60px); gap: 10px; padding: 10px; width: 100%; max-width: 300px; height: auto; border: 1px solid #ccc; box-sizing: border-box; margin-left: auto; margin-right: auto; margin-bottom: 15px; justify-content: center; align-content: center; overflow: hidden; background-color: #fff; }
  .icon-navigation { flex-wrap: wrap; gap: 5px; }
  #cancel-icon-selection-btn { margin-left: 0; flex-grow: 1; }
  .info-tips-popup__content { width: 95%; padding: 15px 20px; }
  .info-tips-popup__title { font-size: 1rem; }
  .info-tips-popup__body { font-size: 0.85rem; }
  .modal-header { padding: 10px 15px; }
  #toggleFullscreenBtn { margin-right: 5px; }
}

/* Tip Container (unverändert) */
#tip-container { display: none; font-size: 0.8em; text-align: center; color: #666; margin-top: 10px; flex-shrink: 0; min-height: 1.2em; position: relative; overflow: hidden; padding: 5px; }
.tip-item { margin: 0; transition: opacity 0.5s ease-in-out; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; display: none; }
.tip-item:first-child { opacity: 1; display: block; position: relative; }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Font Faces (unverändert) */
@font-face { font-family: 'JosefinSlab'; src: url('/cdn/shop/files/JosefinSlab-VariableFont_wght.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IrishGrover'; src: url('/cdn/shop/files/IrishGrover-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Creepster'; src: url('/cdn/shop/files/Creepster-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sacramento'; src: url('/cdn/shop/files/Sacramento-Regular.woff2?v=1746605778') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ConcertOne'; src: url('/cdn/shop/files/ConcertOne-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DancingScript'; src: url('/cdn/shop/files/DancingScript-VariableFont_wght.woff2?v=1746605778') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tangerine'; src: url('/cdn/shop/files/Tangerine-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IndieFlower'; src: url('/cdn/shop/files/IndieFlower-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('/cdn/shop/files/Bangers-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Tagesschrift'; src: url('/cdn/shop/files/Tagesschrift-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'EduQLDBeginner'; src: url('/cdn/shop/files/EduQLDBeginner-VariableFont_wght.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IMFellEnglishSC'; src: url('/cdn/shop/files/IMFellEnglishSC-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Editor Lato Regular'; src: url('/cdn/shop/files/Lato-Regular.woff2?v=1745819191') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barriecito-Regular'; src: url('/cdn/shop/files/Barriecito-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lobster'; src: url('/cdn/shop/files/Lobster-Regular.woff2?v=1746605779') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/cdn/shop/files/Inter-VariableFont_opsz_wght.woff2?v=1746605781') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Editor ComicRelief-Regular'; src: url('/cdn/shop/files/ComicRelief-Regular.woff2?v=1745819191') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Editor Cascadia Mono'; src: url('/cdn/shop/files/CascadiaMono-VariableFont_wght.woff2?v=1745819191') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* Fullscreen Button & Modal im Vollbild (unverändert) */
.modal-header > div { display: flex; align-items: center; gap: 10px; }
#toggleFullscreenBtn { padding: 4px 8px !important; line-height: 1; font-size: 0.8em !important; min-height: auto; }
#toggleFullscreenBtn svg { vertical-align: middle; width: 14px; height: 14px; }
#designEditorModal:-webkit-full-screen { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-color: #fff !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#designEditorModal:-moz-full-screen { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-color: #fff !important; padding: 0 !important; backdrop-filter: none !important; }
#designEditorModal:-ms-fullscreen { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-color: #fff !important; padding: 0 !important; backdrop-filter: none !important; }
#designEditorModal:fullscreen { max-width: none !important; max-height: none !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; background-color: #fff !important; padding: 0 !important; backdrop-filter: none !important; }
#designEditorModal:fullscreen .modal-content, #designEditorModal:-webkit-full-screen .modal-content, #designEditorModal:-moz-full-screen .modal-content, #designEditorModal:-ms-fullscreen .modal-content { height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
#designEditorModal:fullscreen .modal-body, #designEditorModal:-webkit-full-screen .modal-body, #designEditorModal:-moz-full-screen .modal-body, #designEditorModal:-ms-fullscreen .modal-body { height: 100%; overflow: hidden; }
#designEditorModal:fullscreen .editor-layout-container, #designEditorModal:-webkit-full-screen .editor-layout-container, #designEditorModal:-moz-full-screen .editor-layout-container, #designEditorModal:-ms-fullscreen .editor-layout-container { height: 100%; }

/* ... Am Ende deiner bestehenden CSS-Datei ... */

.video-container-infopopup {
  width: 100%;
  margin-bottom: 15px; /* Abstand zur folgenden Liste */
  background-color: #000; /* Optional: Schwarzer Hintergrund für Letterboxing, falls Video-Seitenverhältnis nicht passt */
  border-radius: 4px; /* Passt zum Popup-Design */
  overflow: hidden; /* Stellt sicher, dass das Video die abgerundeten Ecken nicht durchbricht */
}

.video-container-infopopup video {
  display: block; /* Verhindert unerwünschten Leerraum unter dem Video */
  max-width: 100%; /* Stellt sicher, dass das Video nicht überläuft */
  height: auto;    /* Behält das Seitenverhältnis bei, wenn die Breite 100% ist */
  border-radius: 4px; /* Passt zum Popup-Design */
}

/* Anpassung, damit das Popup bei Bedarf etwas mehr Höhe bekommen kann */
.info-tips-popup__content {
  max-height: 90vh; /* Erwäge, dies bei Bedarf anzupassen, falls das Video viel Platz benötigt */
}

.font-select-preview-wrapper {
  display: flex;
  align-items: center; /* Wichtig für vertikale Ausrichtung */
  gap: 8px; /* Abstand zwischen Select und Button */
}

/* Anpassung für das Select-Element im Wrapper */
.font-select-preview-wrapper #font-select {
  flex-grow: 1; /* Lässt das Select den verfügbaren Platz einnehmen */
  /* width: auto; entfernt die feste Breite von 100%, falls vorhanden, 
     damit der Button daneben Platz hat. Die Basisregel .text-controls select 
     hat width: 100%, was wir hier anpassen müssen. */
  width: auto; /* Oder explizit min-width setzen, falls es zu klein wird */
}

/* Der #font-preview-btn erbt die .button Stile, was gut ist.
   Ggf. spezifische Anpassungen, falls es nicht perfekt aussieht.
   z.B. min-width, damit der Text nicht umbricht, oder Höhe anpassen. */
.font-select-preview-wrapper #font-preview-btn {
  flex-shrink: 0; /* Verhindert, dass der Button schrumpft */
}

/* NEU: Stile für Schriftarten-Vorschaufenster */
#font-preview-window {
  /* Wird im Liquid per style-Attribut initial versteckt und per JS angezeigt */
  max-height: 300px; /* Maximale Höhe, damit es nicht zu lang wird */
  overflow-y: auto; /* Scrollbar, falls viele Schriftarten */
}

#font-preview-container {
  display: flex; /* Ermöglicht das Umbrechen der Elemente */
  flex-wrap: wrap; /* Elemente brechen in die nächste Zeile um */
  gap: 8px; /* Abstand zwischen den Vorschau-Elementen */
  justify-content: flex-start; /* Elemente am Anfang der Zeile ausrichten */
}

.font-preview-item {
  padding: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #ffffff;
  white-space: nowrap; /* Verhindert, dass der Text innerhalb eines Items umbricht */
  font-size: 16px; /* Basisgröße, wird von der jeweiligen Schriftart überschrieben */
  /* Die Schriftart wird per JavaScript direkt auf das Element angewendet */
}

/* Button "Auswahl" - hier keine dynamische Schriftart mehr */
#font-preview-btn {
  min-width: auto; /* Oder eine feste Breite, falls gewünscht, z.B. 80px */
  text-align: center;
  /* Die Schriftart wird hier nicht mehr dynamisch geändert */
}

/* NEU: Stile für das Span-Element, das die ausgewählte Schriftart anzeigt */
.selected-font-display-span {
  /* font-family wird per JS gesetzt */
  font-size: 1em; /* Ähnlich wie Button-Text oder Label-Text */
  padding: 6px 0; /* Vertikales Padding anpassen, um Höhe an Button anzugleichen */
  line-height: 1.4; /* Ähnlich wie .button, für vertikale Ausrichtung */
  /* min-height: 38px; Falls eine exakte Höhe wie Buttons benötigt wird, über padding steuern */
  white-space: nowrap; /* Verhindert Umbruch bei langen Schriftnamen, falls gewünscht */
  overflow: hidden; /* Falls sehr lange Namen, mit text-overflow kombinieren */
  text-overflow: ellipsis; /* Zeigt "..." an, wenn Text zu lang ist und overflow:hidden */
  max-width: 150px; /* Beispiel: Maximale Breite, bevor "..." erscheint, anpassen! */
  display: inline-block; /* Damit max-width und text-overflow greifen */
  vertical-align: middle; /* Hilft bei der Ausrichtung mit dem Button */
}

#close-font-preview-btn {
  font-size: 0.8em !important; /* Kleinerer Text für den Schließen-Button */
  padding: 4px 8px !important; /* Kleineres Padding */
}

#font-select {
  display: none !important; /* Visuell ausblenden, aber für JS funktionsfähig halten */
}
/* ... restliche CSS ... */

/* Responsive Anpassungen für Vollbild */
@media (max-width: 768px) {
    #designEditorModal:fullscreen .modal-header,
    #designEditorModal:-webkit-full-screen .modal-header,
    #designEditorModal:-moz-full-screen .modal-header,
    #designEditorModal:-ms-fullscreen .modal-header
    { padding: 10px 15px; }
    #designEditorModal:fullscreen .modal-footer,
    #designEditorModal:-webkit-full-screen .modal-footer,
    #designEditorModal:-moz-full-screen .modal-footer,
    #designEditorModal:-ms-fullscreen .modal-footer
    { padding: 10px 15px; }
    #designEditorModal:fullscreen .modal-body,
    #designEditorModal:-webkit-full-screen .modal-body,
    #designEditorModal:-moz-full-screen .modal-body,
    #designEditorModal:-ms-fullscreen .modal-body
    { padding: 0; }

    #designEditorModal:fullscreen .editor-layout-container,
    #designEditorModal:-webkit-full-screen .editor-layout-container,
    #designEditorModal:-moz-full-screen .editor-layout-container,
    #designEditorModal:-ms-fullscreen .editor-layout-container {
      flex-direction: row !important;
      overflow: hidden !important;
    }
    #designEditorModal:fullscreen .editor-sidebar,
    #designEditorModal:-webkit-full-screen .editor-sidebar,
    #designEditorModal:-moz-full-screen .editor-sidebar,
    #designEditorModal:-ms-fullscreen .editor-sidebar {
        flex-basis: 180px !important;
        width: auto !important;
        order: 0 !important;
        overflow-y: auto !important;
        padding: 15px !important;
        border-right: 1px solid #e0e0e0 !important;
        border-bottom: none !important;
        flex-shrink: 0 !important;
    }
    #designEditorModal:fullscreen .editor-main-area,
    #designEditorModal:-webkit-full-screen .editor-main-area,
    #designEditorModal:-moz-full-screen .editor-main-area,
    #designEditorModal:-ms-fullscreen .editor-main-area {
        order: 0 !important;
        padding: 15px !important;
    }

    /* Toolbar im VOLLBILD auf Mobilgeräten: Vertikal, volle Breite */
    #designEditorModal:fullscreen #designEditorToolbar,
    #designEditorModal:-webkit-full-screen #designEditorToolbar,
    #designEditorModal:-moz-full-screen #designEditorToolbar,
    #designEditorModal:-ms-fullscreen #designEditorToolbar {
        flex-direction: column !important; /* Vertikal */
        align-items: stretch !important;   /* Buttons füllen Breite */
        gap: 10px !important;
    }
    /* Toolbar-Buttons im VOLLBILD auf Mobil: Behalten volle Breite bei */
    #designEditorModal:fullscreen #designEditorToolbar .toolbar-btn,
    #designEditorModal:-webkit-full-screen #designEditorToolbar .toolbar-btn,
    #designEditorModal:-moz-full-screen #designEditorToolbar .toolbar-btn,
    #designEditorModal:-ms-fullscreen #designEditorToolbar .toolbar-btn {
        width: 100% !important;   /* Volle Breite */
        height: 44px !important;
        /* Icon-Buttons behalten Padding 0 */
    }
     /* Text-Button im VOLLBILD auf Mobil: Text sichtbar, Padding wiederherstellen */
    #designEditorModal:fullscreen #designEditorToolbar #toolbarTextBtn,
    #designEditorModal:-webkit-full-screen #designEditorToolbar #toolbarTextBtn,
    #designEditorModal:-moz-full-screen #designEditorToolbar #toolbarTextBtn,
    #designEditorModal:-ms-fullscreen #designEditorToolbar #toolbarTextBtn {
        font-size: 1em !important; /* Normale Schriftgröße */
        padding: 8px 10px !important; /* Normales Padding */
    }
    /* Icon-Buttons (nicht Text) im VOLLBILD auf Mobil: Icon zentriert */
    #designEditorModal:fullscreen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn),
    #designEditorModal:-webkit-full-screen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn),
    #designEditorModal:-moz-full-screen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn),
    #designEditorModal:-ms-fullscreen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) {
        padding: 0 !important; /* Sicherstellen, dass Icons zentriert bleiben */
    }
     #designEditorModal:fullscreen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg,
     #designEditorModal:-webkit-full-screen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg,
     #designEditorModal:-moz-full-screen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg,
     #designEditorModal:-ms-fullscreen #designEditorToolbar .toolbar-btn:not(#toolbarTextBtn) svg {
        width: 20px !important; /* Größe für Vollbild-Sidebar */
        height: 20px !important;
     }
  .font-select-preview-wrapper {
    display: flex !important; /* Erzwingt Flexbox-Verhalten */
    align-items: center !important; /* Vertikale Ausrichtung in der Mitte */ 
    gap: 8px !important; /* Abstand zwischen Select und Button */
  }

  .font-select-preview-wrapper #font-select {
    flex-grow: 1 !important; /* Select soll den verfügbaren Platz einnehmen */
    width: auto !important; /* Überschreibt width: 100% von allgemeinen mobilen .text-controls select Regeln */
    min-width: 100px; /* Verhindert, dass das Select zu schmal wird und unbrauchbar ist */
    /* Die Standardhöhe von .text-controls select (min-height: 38px) sollte passen. */
  }

  .font-select-preview-wrapper #font-preview-btn {
    flex-shrink: 0 !important; /* Verhindert, dass der Button schrumpft */
    /* Stellen Sie sicher, dass die Höhe des Buttons zur Höhe des Selects passt.
       Die Standard .button Stile haben line-height: 1.4 und padding, 
       was zu einer passenden Höhe führen sollte. Ggf. explizit:
       height: 38px; 
       padding-top: 8px;
       padding-bottom: 8px;
       Anpassen an die exakte Höhe von #font-select falls nötig.
    */
  }

  

}
</style>