/* Letzte Cleaning Prüfung: 23.09.2026 */
/* Letztes Cleaning: 27.08.2026 */

.factory-mini-toolbar [data-editor-mode=design]{
color:#ff7188}
.factory-image-media canvas[data-banner-designer-active="1"]{
width:100%;
height:auto;
cursor:move;
touch-action:none}
.banner-designer{
display:grid;
gap:18px;
padding:20px;
border-top:1px solid #2f3441;
background:#11141c}
.banner-designer>header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px}
.banner-designer header span{
color:#ff4965;
font-size:9px;
font-weight:900;
letter-spacing:.16em}
.banner-designer h4{
margin:5px 0 4px;
color:#f7f8fb;
font-size:17px}
.banner-designer p{
margin:0;
color:#8f98aa;
font-size:10px}
.banner-designer-pane{
display:grid;
gap:15px}
.banner-designer-layer-row{
display:flex;
align-items:stretch;
gap:8px}
.banner-designer-layer-row>button{
padding:0 13px;
border:1px solid #343b4b;
background:#181d27;
color:#aeb6c7;
font:inherit;
font-size:10px;
cursor:pointer}
.banner-designer-controls{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px}
.banner-designer-controls label,.banner-designer-message,.banner-designer-text-grid>label{
display:grid;
gap:7px;
color:#aeb6c7;
font-size:10px}
.banner-designer-controls label>span{
display:flex;
justify-content:space-between}
.banner-designer-controls output{
color:#ff7188}
.banner-designer input[type=range]{
width:100%;
accent-color:#ff304f}
.banner-designer-message textarea,.banner-designer-text-grid select{
padding:11px 12px;
border:1px solid #343b4b;
background:#0c0f15;
color:#fff;
font:inherit;
resize:vertical}
.banner-designer-layer-row [data-designer-text-layers]{
display:flex;
flex:1;
gap:5px;
overflow:auto}
.banner-designer-layer-row [data-designer-text-id]{
padding:9px 12px;
border:1px solid #303747;
background:#121620;
color:#8f98aa;
font:inherit;
font-size:9px;
cursor:pointer}
.banner-designer-layer-row [data-designer-text-id].active{
border-color:#ff4965;
color:#fff}
.banner-designer-text-grid{
display:grid;
grid-template-columns:1fr 90px 1fr;
gap:12px}
.banner-designer-text-grid input[type=color]{
width:100%;
height:39px;
padding:3px;
border:1px solid #343b4b;
background:#0c0f15}
.banner-designer-align{
display:grid;
grid-template-columns:repeat(3,1fr)}
.banner-designer-align button{
height:39px;
border:1px solid #343b4b;
background:#121620;
color:#8f98aa;
cursor:pointer}
.banner-designer-align button.active{
border-color:#ff4965;
background:rgba(255,48,79,.12);
color:#fff}
.banner-designer-effects{
display:flex;
gap:8px}
.banner-designer-effects label{
display:flex;
align-items:center;
gap:6px;
padding:8px 11px;
border:1px solid #303747;
background:#121620;
color:#aeb6c7;
font-size:9px;
cursor:pointer}
.banner-designer-effects input{
accent-color:#ff304f}
.banner-designer>footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding-top:14px;
border-top:1px solid #292f3b}
.banner-designer>footer>div{
display:flex;
align-items:center;
gap:12px}
.banner-designer>footer>div>span{
color:#8f98aa;
font-size:9px}
.banner-designer-position-grid{
display:grid;
grid-template-columns:repeat(3,14px);
gap:3px}
.banner-designer-position-grid button{
position:relative;
width:14px;
height:14px;
padding:0;
border:1px solid #3b4353;
background:#161b25;
cursor:pointer}
.banner-designer-position-grid button span{
position:absolute;
inset:4px;
border-radius:50%;
background:#ff4965}
.banner-designer>footer p{
display:flex;
align-items:center;
gap:6px}
.banner-designer>footer p i{
color:#ff4965}

/* Kompakter Direkteditor: Die Symbole tragen native Tooltips; die sichtbare
   Flaeche bleibt fuer Vorschau und Texteingabe frei. */
.banner-designer-compact{
gap:10px;
padding:12px 14px;
/* Im Editor ist das Panel so hoch wie die Bildvorschau (Rasterzeile). Als
   Grid mit auto-Zeilen verteilte es den ueberzaehligen Platz zwischen Kopf,
   Reitern, Textfeld und Reglern - grosse Luecken (07.09.2026). Der Inhalt
   sitzt oben, der Rest bleibt leer. Gilt fuer beide Fenster, in denen der
   Editor liegt (Werkzeugfenster und Thumbnail-Editor). */
align-content:start}
.banner-designer-compact>header{
align-items:center}
.banner-designer-compact h4{
margin:2px 0 0;
font-size:14px}
.banner-designer-compact .banner-designer-pane{
gap:8px;
align-content:start}
.banner-designer-compact .banner-designer-layer-row{
align-items:center;
min-height:30px}
.banner-designer-compact .banner-designer-layer-row [data-designer-text-layers]{
flex:0 1 auto}
.banner-designer-compact .banner-designer-layer-row [data-designer-text-id],
.banner-designer-compact .banner-designer-layer-row>button{
display:grid;
place-items:center;
min-width:30px;
height:30px;
padding:0 8px;
border-radius:6px}
.banner-designer-compact .banner-designer-message{
gap:4px}
.banner-designer-compact .banner-designer-message textarea{
min-height:44px;
max-height:82px;
padding:9px 10px;
resize:vertical}
/* Die Werkzeuge stehen in beschrifteten Gruppen nebeneinander - so machen es
   Canva, Figma und Google Docs. Eine Reihe gleich aussehender Symbole war
   nicht zu lesen (Befund des Betreibers, 19.09.2026). */
.banner-designer-compact .banner-designer-text-grid{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:flex-end}
.banner-designer-gruppe{
display:grid;
gap:5px;
position:relative}
.banner-designer-gruppe+.banner-designer-gruppe{
padding-left:14px}
/* Feiner Trenner statt Rahmen um jede Gruppe. */
.banner-designer-gruppe+.banner-designer-gruppe::before{
content:"";
position:absolute;
top:16px;
bottom:2px;
left:0;
width:1px;
background:#262c38}
.banner-designer-gruppe-titel{
color:#7d8697;
font-size:9px;
font-weight:700;
letter-spacing:.09em;
text-transform:uppercase}
.banner-designer-gruppe>div{
display:flex;
gap:6px;
align-items:center}
.banner-designer-compact>header .banner-designer-layer-row{
margin-left:auto;
gap:6px}
.banner-designer-compact .banner-designer-layer-row .banner-designer-neu{
color:#e8ecf4;
display:inline-flex;
gap:6px;
align-items:center;
white-space:nowrap;
flex:0 0 auto;
width:auto;
height:30px;
padding:0 11px;
border-radius:6px;
font-size:11px;
font-weight:600}
.banner-designer-compact .banner-designer-font{
display:flex;
align-items:center;
height:34px;
padding:0 4px 0 10px;
border:1px solid #343b4b;
border-radius:6px;
background:#0c0f15}
.banner-designer-compact .banner-designer-font select{
min-width:132px;
width:auto;
height:30px;
padding:0;
border:0;
background:transparent;
color:#eef1f6;
font-size:12px}
/* Der Farbpunkt zeigt die eingestellte Farbe, ohne dass man ihn oeffnen muss. */
.banner-designer-compact .banner-designer-color{
display:grid;
place-items:center;
width:34px;
height:34px;
padding:0;
border:1px solid #343b4b;
border-radius:6px;
background:#0c0f15;
cursor:pointer}
.banner-designer-compact .banner-designer-color input{
width:20px;
height:20px;
padding:0;
border:0;
border-radius:50%;
background:none;
cursor:pointer}
.banner-designer-compact .banner-designer-color input::-webkit-color-swatch-wrapper{padding:0}
.banner-designer-compact .banner-designer-color input::-webkit-color-swatch{
border:1px solid rgba(255,255,255,.35);
border-radius:50%}
.banner-designer-compact .banner-designer-align{
display:flex;
gap:2px;
padding:2px;
border:1px solid #343b4b;
border-radius:7px;
background:#0c0f15}
.banner-designer-compact .banner-designer-align button{
width:30px;
height:28px;
border:0;
border-radius:5px;
background:transparent}
.banner-designer-compact .banner-designer-align button.active{
background:rgba(255,48,79,.16);
color:#fff}
.banner-designer-compact .banner-designer-effects{
display:flex;
gap:4px}
.banner-designer-compact .banner-designer-schalter{
display:inline-flex;
gap:6px;
align-items:center;
height:34px;
margin:0;
padding:0 10px;
border:1px solid #343b4b;
border-radius:6px;
background:#0c0f15;
color:#aab2c2;
font-size:11px;
cursor:pointer}
.banner-designer-compact .banner-designer-schalter:has(input:checked){
border-color:#ff4965;
background:rgba(255,48,79,.12);
color:#fff}
.banner-designer-compact .banner-designer-schalter input{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0)}
.banner-designer-compact .banner-designer-opacity{
display:flex;
align-items:center;
gap:8px;
height:34px;
margin:0;
padding:0 10px;
border:1px solid #343b4b;
border-radius:6px;
background:#0c0f15;
font-size:11px}
.banner-designer-compact .banner-designer-opacity input{
width:88px;
margin:0}
.banner-designer-compact .banner-designer-opacity output{
min-width:34px;
color:#c9d0de;
text-align:right;
font-variant-numeric:tabular-nums}
.banner-designer-compact>footer{
gap:10px;
padding-top:8px}
.banner-designer-compact>footer>div{
gap:7px}
.banner-designer-compact>footer>div>i{
color:#ff4965}
.banner-designer-compact>footer p{
font-size:9px}
@media(max-width:760px){
.banner-designer>header,.banner-designer>footer{
align-items:stretch;
flex-direction:column}
.banner-designer-controls,.banner-designer-text-grid{
grid-template-columns:1fr}
.banner-designer-effects{
flex-wrap:wrap}
.banner-designer-compact .banner-designer-text-grid{
grid-template-columns:minmax(0,1fr) 40px 108px}
.banner-designer-compact .banner-designer-effects{
grid-column:1/-1}
}

/* === Dunkles Schriftarten-Dropdown, 28.08.2026 ===========================
   Das native Auswahlfenster des Schrift-Selects erbte die helle
   Systemdarstellung, die Eintraege blieben aber hell - weiss auf weiss.
   color-scheme:dark laesst den Browser die Liste dunkel zeichnen; die
   option-/optgroup-Farben decken Browser ab, die die Liste selbst stylen. */
.banner-designer select,
.banner-designer-text-grid select,
.banner-designer-font select { color-scheme: dark; }
.banner-designer select option,
.banner-designer select optgroup {
  background: #171a23;
  color: #f5f6fa;
}

/* === Kompaktes Werkzeugleisten-Layout, 28.08.2026 ========================
   Das Panel soll wie eine Werkzeugleiste eines Grafikeditors wirken:
   Kopfzeile flach, links das Textfeld, rechts oben Schrift, Farbe,
   Ausrichtung und Effekte, rechts unten Ebenen und Deckkraft, der
   Gestenhinweis dezent in der Fusszeile. Vorher lief jede Zeile ueber die
   volle Panelbreite (~1000px). Auf Telefonen bleibt alles untereinander. */
@media (min-width: 701px) {
  .banner-designer-compact { gap: 6px; padding: 10px 14px 8px; }
  .banner-designer-compact h4 { font-size: 12px; }
  .banner-designer-compact > header { min-height: 0; }

  .banner-designer-compact .banner-designer-pane[data-designer-pane="text"] {
    display: grid;
    /* Das Textfeld nimmt seit dem 19.09.2026 weniger Platz: sonst brach die
       vierte Werkzeuggruppe in eine zweite Zeile um. */
    grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
    grid-template-rows: auto;
    gap: 8px 18px;
    align-items: start;
  }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-message { grid-column: 1; grid-row: 1; margin: 0; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-message textarea { height: 100%; min-height: 62px; max-height: 96px; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-text-grid { grid-column: 2; grid-row: 1; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-layer-row { grid-column: 2; grid-row: 2; margin: 0; min-height: 0; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-controls { grid-column: 3; grid-row: 2; margin: 0; max-width: none; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-controls label { margin: 0; gap: 3px; }


  .banner-designer-compact > footer { margin-top: 2px; padding-top: 6px; }
  .banner-designer-compact > footer p { margin: 0; font-size: 9px; opacity: .7; }

  /* Alles auf einer Linie: die Mini-Beschriftung "Text" schob das Feld
     tiefer als die Schriftzeile, die Ebenen-Chips waren 4px flacher und
     beim Deckkraft-Regler stand der Wert ueber dem Slider - zusammen
     ergab das einen Treppeneffekt. */
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-message > span { display: none; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-message textarea { min-height: 76px; max-height: none; }
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-layer-row [data-designer-text-id],
  .banner-designer-compact [data-designer-pane="text"] .banner-designer-layer-row > button { min-width: 34px; height: 34px; }
  .banner-designer-compact .banner-designer-controls label { display: flex; align-items: center; gap: 8px; height: 34px; }
  .banner-designer-compact .banner-designer-controls label > span { display: flex; align-items: center; gap: 5px; flex: none; margin: 0; }
  .banner-designer-compact .banner-designer-controls label input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; }
}

/* Im Hochformat-Modal ist der Editor neben der senkrechten Werkzeugleiste nur
   rund 230px breit. Die Desktop-Werkzeugzeile darf dort nicht mit ihren drei
   Spalten weiterlaufen, sonst werden Bedienelemente rechts abgeschnitten. */
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait > .factory-editor-shell > .banner-designer-compact {
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  max-height: var(--portrait-preview-height);
  overflow-x: hidden;
  overflow-y: auto;
  /* Das Panel ist so hoch wie die Vorschau (Rasterzeile des Editors). Als
     Grid mit auto-Zeilen verteilte es den ueberzaehligen Platz zwischen
     Kopf, Reitern, Textfeld und Reglern - daher die grossen Luecken
     (07.09.2026). Der Inhalt sitzt jetzt oben, der Rest bleibt leer. */
  align-content: start;
  gap: 8px;
  padding: 10px 12px 8px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact > header {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact .banner-designer-pane[data-designer-pane] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  min-width: 0;
  align-content: start;
  align-items: start;
  gap: 6px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact > header {
  gap: 6px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact > footer {
  margin-top: 4px;
  padding-top: 6px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact [data-designer-pane="text"] > * {
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact [data-designer-pane="text"] .banner-designer-message textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact [data-designer-pane="text"] .banner-designer-text-grid {
  grid-template-columns: minmax(0, 1fr) 40px;
}
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact [data-designer-pane="text"] .banner-designer-align,
.thumbnail-editor-modal-content .image-result-finished.is-image-portrait .banner-designer-compact [data-designer-pane="text"] .banner-designer-effects {
  grid-column: 1 / -1;
}
.banner-designer-compact .banner-designer-neu>i{color:#ff4965}