/*!
 * OnePageArrangement – © 2025 Nis Nöhring. Alle Rechte vorbehalten.
 * SPDX-License-Identifier: All-Rights-Reserved
 */




.opa {
  /* nix, was die Maße ändert */
  padding: 0;
  max-width: 210mm; /*210mm */
  min-height: 0mm; /* 297mm; */
  background: white;
  margin: 0 auto;
  color: inherit;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  /* font: inherit;           übernimm Theme-Schrift, falls du nicht bewusst setzen willst */
}

.opa .controls-wrapper {
    /* border: 1px dashed rgb(60, 0, 255); */
    max-width: 210mm; /*210mm */
    min-height: 0mm; /* 297mm; */
    margin: 0 auto;
    padding: 12px;
    justify-content: center;
    box-sizing: border-box;
    /* background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);   */
  }

  .opa .print-wrapper {
    /* border: 1px dashed rgb(255, 0, 0); */
    display: block;
    width: 190mm; /*210mm - 15mm links - 5mm rechts*/
    min-height: 0mm; /* 297mm;  */  
    margin-left: 15mm;
    margin-right: 5mm;
    padding-top: 5mm; 
    box-sizing: border-box;
    background: white;
    /* box-shadow: 0 0 5px rgba(0,0,0,0.1);  */
  }


.opa #fileNameInput {
    width: 250px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 18px;
    border: 1px solid black;
    padding: 0 4px;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    resize: none;  
    border-radius: 2px; 
}

.opa #fileNameDisplay {
    display: block;       
    text-align: center;   
    font-weight: bold;   
    font-size: 16px;      
    /* margin-bottom: 8px; */
}

.opa .button-container {
    /*border: 1px dashed rgb(200, 255, 0);*/
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 5px 0px;
    border-color: #000;
}

.opa .button-subgroup {
    display: flex;
    align-items: center;
    min-height: 22px;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid black;
    border-radius: 6px;
    background-color: #e3daaeb4;
}


/* Akkordfolge-Subgroup */
.opa .button-subgroup.chord-sequencer { 
  gap: 6px; 
  display: grid;
  grid-template-columns: max-content 1fr auto;
  gap: 8px 10px;
  align-items: center;
  /* padding: 4px 8px; */
  /* border-top: 1px solid #ddd; */
  margin-top: 5px;
  /* margin-bottom: 20px; */
  /* width: 210mm; */
}
.opa .chord-seq-inputs { display:flex; flex-wrap:wrap; gap:8px; }
.opa .chord-seq-inputs .chord-seq-select {
  width: 60px;               /* C#maj7 passt sicher */
  height: 22px;
  font-size: 12px;
  font-family: 'Segoe UI Condensed','Arial Narrow', Arial, sans-serif;
  box-sizing: border-box;
}

.opa .chord-seq-head{ font-weight: 600; }
.opa .chord-seq-body{ grid-column: 2 / -1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.opa .chord-seq-inputs select{ min-width: 30px; }
.opa .chord-seq-controls button{ min-width: 20px; }









/* === Haupt Akkordteil === */
.opa .whole-chordrow-container {
    /* border: 1px solid rgb(0, 0, 0); */
    /* background: rgba(223, 203, 30, 0.873); */
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}




        /* === Chord Block === */
     
        /* === Piano: robuste, konfliktfreie Regeln === */
/* === Piano: plastischere Gestaltung === */
.opa .piano {
  position: relative;
  display: block;
  height: 75px;  /* Höhe weiße Taste 90px*/
  margin-left: 2px;
}

/* Weiße Taste */
.opa .piano .key {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  height: 80px; /*90 */
  margin: 0;
  /* background: linear-gradient(to bottom, #fff 0%, #f4f4f4 100%); */
  border: 1px solid #3d3d3d;
  cursor: pointer;
  /* transition: background-color .2s, transform .05s; */
}

/* Schwarze Taste */
.opa .piano .key.black {
  z-index: 2;
  width: 9px;
  height: 43px;
  background: linear-gradient(to bottom, #333 0%, #000 100%);
  border: 1px solid #111;
  border-radius: 0 0 2px 2px;
}

/* Basis: aktiver Key bekommt einen Marker-Dot */
.opa .piano .key.active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);  /* nur horizontal zentrieren */
  width: 7px;      /* Durchmesser Dot */
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
}

/* Dot-Farbe abhängig von Tastentyp */
.opa .piano .key:not(.black).active::after {
  background: #000;   /* schwarze Punkte für weiße Taste */
}
.opa .piano .key.black.active::after {
  background: #fff;   /* weiße Punkte für schwarze Taste */
}




/* Gitarre */
.opa .firstfret {
    width: 12px;
    height: 3px;
    background-color: black;
    border: 1px black;
    position: relative;
}

.opa .fret {
    width: 12px;
    height: 1px;
    background-color: black;
    border: 1px black;
    position: relative;
}

.opa .string {
    width: 1px;
    height: 15px;
    background-color: black;
    border: 1px black;
    position: relative;
}

.opa .string .dot {
    width: 8px;
    height: 8px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
}

.opa .string.active .dot {
    display: block;
}

.opa .string::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  z-index: 2;
    cursor: pointer;
} 

.opa .guitar-diagram {
    /* border: 1px dashed #1900ff; */
    /* background: rgba(255, 0, 0, 0.1);  */
    display: grid;
    grid-template-columns: repeat(6, 11px);
    grid-template-rows: repeat(5, 14px);
    gap: 0px;
    padding: 0px;
    position: relative;
    margin-right: -5px;
    margin-top: 0px;
    margin-left: 4px;
    transform: translateY(-4px);
}

.opa .x-row {
    /* border: 1px solid #1900ff;  */
    display: grid;
    grid-template-columns: repeat(6, 11px);
    gap: 0px;
    height: 14px;
    margin-left: -8px;
    margin-top: 0px; 
    /* position: relative;   neu */
    z-index: 2;
    transform: translateX(+3px);  
    
}

.opa .x-toggle {
    /* border: 1px solid red;  */
    width: 12px;
    height: 14px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    /* transform: translateY(-10px); */
    
}

.opa .x-toggle.active::after {
    content: "x";
    font-weight: bold;
    font-size: 12pt;
    color: black;
    line-height: 1;
    vertical-align: top;

    /* position: static;  */
}        


/* TAB */
.opa .tab-diagram {
    /* border: 1px dashed #1900ff; 
    background: rgba(255, 0, 0, 0.1); */
    /* height: 90px; */
    display: grid;
    grid-template-columns: repeat(7, 14px);
    grid-template-rows: repeat(6, 12px);
    gap: 0px;
    /* padding: 5px; */
    margin-top: 13px;
    margin-right: 5px;
    position: relative; 
    text-align: center; 
    align-items: center;
    font-size: 13px;    
}

.opa .tab-input {
    width: 15px;
    height: 12px;
    text-align: center;
    border: none;
    font-size: 10px;
    font-weight: bold;
    background: transparent;
    outline: none;
    margin-top: 2px;
    
}

.opa .bass-tab-diagram {
    /* border: 1px dashed #1900ff; 
    background: rgba(255, 0, 0, 0.1); */
    /* height: 61px; */
    display: grid;
    grid-template-columns: repeat(7, 14px);
    grid-template-rows: repeat(4, 12px);
    gap: 0px;
    /* padding: 5px; */
    margin-top: 2px;
    position: relative; 
    text-align: center; 
    align-items: center;
    font-size: 13px;          
}

.opa .bass-tab-input {
    width: 15px;
    height: 12px;
    margin-top: 0px;
    text-align: center;
    border: none;
    font-size: 10px;
    background: transparent;
    outline: none;
}

.row-grab {
  border: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent; /* mobil: kein Tap-Highlight */
}

/* Mehr Trefferfläche + sauberes Touch-Verhalten */
.row-grab,
.perc-grabber {
  touch-action: none;              /* verhindert Scroll/Pinch auf dem Handle, damit Drag sofort greift */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  /* Optional: die Fläche vergrößern, ohne Layout zu zerstören */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;  /* gern anpassen */
  min-height: 20px; /* gern anpassen */
}

.row-grab:active,
.perc-grabber:active {
  cursor: grabbing;
}

/* iOS: wirklich NICHT selektierbar, auch nicht verschachtelte Kindelemente */
.row-grab, .row-grab * ,
.perc-grabber, .perc-grabber * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* doppelt hält besser, falls Kind den Hit bekommt */
}

/* Mobile Trash für markierte Row */
.row-mobile-trash{
  position: fixed;
  z-index: 999999;                 /* sicher über Inputs */
  width: 28px; height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Schwebende 2-Button-Leiste */
.row-mobile-actions{
  position: fixed;
  z-index: 999999;
  display: none;
  align-items: center;
  gap: 6px;
}

.row-mobile-action-btn{
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: none;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.row-mobile-action-btn .opa-icon {
  width: 16px;
  height: 16px;
  display: block;       /* kein Text-Baseline-Offset */
}


/* Override: wenn Trash innerhalb der 2-Button-Leiste steckt, normale Inline-Buttons */
.row-mobile-actions .row-mobile-trash {
  position: static;
  display: inline-flex;
}

/* Der Duplizieren-Button soll sichtbar sein (falls irgendwas ihn versteckt) */
.row-mobile-actions .row-mobile-dup {
  display: inline-flex;
}


@media print{
  .row-mobile-actions{ display: none !important; }
}

/* Beim Druck niemals anzeigen (sicherheitshalber doppelt) */
@media print{
  .row-mobile-trash{ display: none !important; }
}

.row-grab, .perc-grabber { outline: none !important; border: none !important; }
.row-grab:focus, .perc-grabber:focus { outline: none !important; }


/* Mausklick-Fokus entfernen */
/* .row-grab:focus:not(:focus-visible) { outline: none; } */

/* Optional: auch bei Tastatur keinen Ring (nicht empfohlen) */
/* .row-grab:focus-visible { outline: none; } */

/* === Buttons === */
.opa .prev-piano-btn, 
.opa .next-piano-btn,
.opa .prev-guitar-btn,
.opa .next-guitar-btn,
.opa .TAB-btn,
.opa .fret-control-block button {
  width: 18px;
  height: 13px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 8px;            
  cursor: pointer;
  text-align: center;         
  text-size-adjust: none;  /* verhindert automatische Schriftvergrößerung auf mobilen Geräten */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px;               
  line-height: 1;  /* verhindert vertikale Verschiebung durch zu große line-height */
  font-weight: bold;
}
/* Varianten-Buttons optisch sperren wie beim Percussion-Lock */
.opa .prev-piano-btn:disabled,
.opa .next-piano-btn:disabled,
.opa .prev-guitar-btn:disabled,
.opa .next-guitar-btn:disabled,
.opa .TAB-btn:disabled,
.opa .chordVariantControls .variant-button:disabled {
  opacity: .4;
  cursor: default;
}

/* === Varianten Info Zeile === */
.opa .variant-info {
  /*font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  Schriftart für Code-ähnliche Darstellung */
  opacity: .85; /* etwas transparenter */
  /* margin: 4px 0 6px; /* Abstand nach oben und unten */
  margin-left: 63px; /* Abstand zum linken Rand */
  display: grid;
  grid-template-columns: 365px 100px 105px 110px; /* feste Breiten */
  align-items: center;
  font-size: 10px; 
  font-weight:normal;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 0px;
}
.opa .piano-info  { text-align: left; }
.opa .guitar-info { text-align: left; }
.opa .gtab-info   { text-align: left; }
.opa .btab-info   { text-align: left; }


.opa .variant-toggle {
  margin-left: 0px;
  font-size: 12px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0px;
}







/* Tabellenschriftgröße */
.opa table td input {
    font-size: 12px;
}

.opa .taktende {
border-right: 2px solid black !important; /* fette Linie am Ende jedes Taktes */
}

.opa  #percussion-container{ display:flex; align-items:flex-start; gap:8px; }
.opa  #presetSidePanel{ width:160px; font-size:12px; }
.opa  #presetSidePanel .title{ font-size:12px; margin-bottom:4px; opacity:.7; }
.opa  #presetSidePanel .name{ font-weight:bold; margin-bottom:6px; }
.opa  #presetSidePanel button{ width:100%; height:22px; font-size:12px; }

.opa  #presetBlocksList { position: relative; min-height: 10px; }
.opa  .preset-block-item { position: absolute; left: 0; right: 0; }


.opa .preset-block-name[contenteditable="true"]:focus {
  outline: 1px dashed #888;
}


/* Side Panel */
/* Container */
.opa .preset-block-layout {
    /* border: 1px dashed #1900ff; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 2px;
    margin-top: 0px;
    justify-items: center;
    align-items: center;

}

/* Button-Container */
.opa .preset-btns {
    /* border: 1px dashed #ff0080; */
    display: flex;
    flex-direction: flex-start;
    gap: 4px;
    align-items: flex-end;
}


.opa .preset-block-prev,
.opa .preset-block-next {
    width: 18px !important;
    height: 13px !important;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 8px;            
    cursor: pointer;
    text-align: center;
    text-size-adjust: none;  /* verhindert automatische Schriftvergrößerung auf mobilen Geräten */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;               
    line-height: 1;  /* verhindert vertikale Verschiebung durch zu große line-height */
    font-weight: bold;
}

  .opa .preset-block-trash {
    width: 18px !important;
    height: 13px !important;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 7px;            
    cursor: pointer;
    text-align: center;
    text-size-adjust: none;  /* verhindert automatische Schriftvergrößerung auf mobilen Geräten */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;               
    line-height: 1;  /* verhindert vertikale Verschiebung durch zu große line-height */
    font-weight: bold;
}


.opa #percussion-table .perc-text-cell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  text-align: center;
  font: inherit;
  padding: 2px 0;
}


/* Erste Zelle als Positionierungs-Referenz (robust, mit/ohne .opa) */
.opa #percussion-table td:first-child,
.opa #percussion-table th:first-child,
#percussion-table td:first-child,
#percussion-table th:first-child {
  position: relative;
  overflow: visible; /* wichtig, damit der Griff außerhalb sichtbar bleibt */
}

/* Grabber links außerhalb zeigen, über dem Inhalt klickbar */
.opa #percussion-table .perc-grabber,
#percussion-table .perc-grabber{
  position: absolute;
  top: 0; bottom: 0;
  left: 0;                     /* Start an Zellkante … */
  transform: translateX(-16px);/* … und 16px nach links raus */
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  opacity: .3;
  font-size: 12px;
  line-height: 1;
  font-weight: 300;
  z-index: 3;                  /* über Inputs/Labels */
  pointer-events: auto;        /* sicherstellen, dass Klicks ankommen */
}

/* Auswahl-/Drag-Feedback */
/* .opa #percussion-table tr.perc-selected,
#percussion-table tr.perc-selected{
  outline: 2px solid #409eff; outline-offset: -2px;
} */


.opa #percussion-table tr.perc-dragging,
#percussion-table tr.perc-dragging{
  opacity: .6;
}

/* Im Druck nicht zeigen */
@media print{
  .opa #percussion-table .perc-grabber,
  #percussion-table .perc-grabber{ display: none !important; }
}











/* PDF EXPORT */
  .opa .pdf-hidden {
    visibility: hidden !important; 
}  

.opa .pdf-none {
    display: none !important; 
}  

.opa .pdf-no-border {
    border: none !important;
}


/* notfalls-override */
.row-comment,
.global-comment-input,
.tab-part-input,
.part-input 
.chord-spacer-input {
  font-family: system-ui, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: normal !important;
  padding: 0, 4px;
}

.opa-selected { outline: 2px dashed #0a84ff; outline-offset: -2px; }
.row-dragging { opacity: .6; }
.drag-placeholder { border: 2px dashed #0a84ff; border-radius: 12px; margin: 6px 0; height: var(--ph-h, 48px); }
#percussion-table .drag-placeholder-row td { border: 2px dashed #0a84ff; height: var(--ph-h, 28px); }
@media print { .row-grab { display: none !important; } }


/* Auto-Modus: Interaktion gesperrt, Anzeige bleibt erlaubt */
.opa .chord-row.is-locked .piano .key { pointer-events: none; }
.opa .chord-row.is-locked .x-toggle { pointer-events: none; }
.opa .chord-row.is-locked .guitar-diagram .string::before { pointer-events: none; }
.opa .chord-row.is-locked .fret-input { pointer-events: none; }

.opa .chord-row.is-locked .tab-input,
.opa .chord-row.is-locked .bass-tab-input {
  pointer-events: none;
}


/* OPA Rhythm – Styling-Variablen (Defaultwerte) */





/* Seitenumbruch-Zeichen */
@media screen {
  .print-wrapper{
    position: relative;
    /* von JS gesetzt: --page-ch (Kachelhöhe) */
    --tick-thick: 1px;             /* Strichdicke */
    --tick-len: 10px;              /* horizontale Länge */
    --tick-col: rgba(0,0,0,.55);   /* Farbe */
    --page-phase: 0px;             /* optionaler Feinoffset */
  }

  /* Links & rechts: jeweils EIN kurzer Tick pro Content-Seite */
  .print-wrapper::before,
  .print-wrapper::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width: var(--tick-len);
    pointer-events:none;

    /* EIN Layer: Linie am unteren Rand jeder Kachel (= Schnittlinie).
       Da die nächste Kachel oben beginnt, reicht EIN Tick. */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--page-ch) - var(--tick-thick)),
      var(--tick-col) calc(var(--page-ch) - var(--tick-thick)),
      var(--tick-col) var(--page-ch)
    );
    background-size:     100% var(--page-ch);
    background-position: center var(--page-phase);
    background-repeat:   repeat-y;
  }

  /* deine Offsets */
  .print-wrapper::before { left:  -55px; }
  .print-wrapper::after  { right: -17px; }
}

@media print {
  .print-wrapper::before,
  .print-wrapper::after { display:none !important; }
}







@media print {
  /* @page {
    size: A4 portrait;
    margin: var(--print-margin); 
    margin-bottom: 16mm;
  } */

  /* ALLES an UI weg – ohne Platzhalter */
  .no-print,
  .button-container,
  .button-subgroup,
  .chord-sequencer,
  .opa .preset-btns { display: none !important; }



  /* Wrapper an die verbleibende Fläche anpassen (keine 210mm mehr!) */
  /* .opa .print-wrapper{
    padding-bottom: 18mm !important;
    transform: none !important;
  } */

  /* (optional) Wasserzeichen in den Rand einpassen */
/*  .print-wrapper::after{
    bottom: calc(var(--print-margin) - 2mm) !important;
    right:  calc(var(--print-margin) + 2mm) !important;
  } */


/* === WP-sicheres Zentrieren nur im Druck === */
  html, body {
    /* margin: 0 !important; */
    padding: 0 !important;
    width: 100% !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Block-Theme-Variablen killen (Padding/Gaps) */
  :root {
    --wp--style--root--padding-left: 0 !important;
    --wp--style--root--padding-right: 0 !important;
    --wp--style--root--gap: 0 !important;
  }

  /* Typische WP-Wrapper neutralisieren (Padding/Margins/Transforms/Columns) */
  .wp-site-blocks, .site, .site-content, .content-area, .wrap,
  main, .container, .entry-content, .page, .page-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: auto !important;
    position: static !important;
    float: none !important;
    transform: none !important;
    display: block !important;
    columns: auto !important;
    column-gap: normal !important;
  }

  /* Adminbar, Header, Footer etc. ausblenden */
  #wpadminbar, header, footer, nav, aside,
  .site-header, .site-footer, .page-header, .entry-header, .entry-footer,
  .sidebar, .widget-area, .breadcrumbs, .comments-area, .site-branding,
  .site-navigation { display: none !important; }

  /* WP-Blöcke vor dem Wrapper im Druck ausblenden */
/* --- Nur den Shortcode (#opa-root) drucken, sauber & ohne Layout-Versatz --- */

/* 1) Alles ausblenden, was NICHT der Shortcode ist,
      NICHT in ihm liegt und NICHT sein Vorfahre ist */
body *:not(#opa-root):not(#opa-root *):not(:has(#opa-root)) {
  display: none !important;
}

/* 2) Den Vorfahren-Chain über dem Shortcode „entboxen“,
      damit deren Margin/Padding/Border keinen Abstand erzeugen */
body:has(#opa-root),
body *:has(#opa-root) {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
}

/* 3) Innerhalb des Shortcodes wirklich nur den print-wrapper lassen */
#opa-root > *:not(.print-wrapper) {
  display: none !important;
}

/* 4) Wrapper exakt auf Seitenrand einstellen (hier: 8 mm rundum) */
:root { --page-gap: 8mm; --pdf-bottom: 18mm; }
@page { size: A4 portrait; margin: 0; }

.print-wrapper {
  margin-left: 15mm !important;
  margin-right: 5mm !important;
  width: 195mm !important;
  height: auto !important;
  min-height: 0 !important;                   
  /* padding: 0 0 var(--pdf-bottom) 0 !important; */
  box-shadow: none !important;
  background: #fff !important;
  transform: none !important;
  display: block !important;
} 


  /* „Zeile zusammenhalten“ passt zu deiner Struktur */
  .opa .whole-chordrow-container,
  .opa .chord-row-container,
  .opa .chord-row,
  .opa .variant-info {
    break-inside: avoid;
    page-break-inside: avoid;
  }


  /* 1) Hidden (Platz behalten) — nur unsichtbar machen */
  .opa .TAB-variant-controls,
  .opa .chordVariantControls,       /* Piano-Var.-Leiste */
  .opa .prev-piano-btn,
  .opa .next-piano-btn,
  .opa .prev-guitar-btn,
  .opa .next-guitar-btn,
  .opa .TAB-btn,
  .opa .variant-button {            /* der "anpassen"-Button */
    visibility: hidden !important;  /* unsichtbar, Box bleibt */
  }

  /* 2) None (vollständig entfernen) — alles, was oben/unten UI ist */
  .opa .row-grab,
  .opa .no-print,
  .opa .button-container,
  .opa .button-subgroup,
  .opa .controls-wrapper,
  .opa .chord-sequencer,     
  .opa .preset-block-lock,
  .opa .checkBoxLabel,
  .opa .fret-control-block .labels {
  display: none !important;
  }

  /* Borders im Chordblock (nur im Print) */
  .opa .chord-block select,
  .opa .chord-block input,
  .opa .chord-block textarea,
  .opa .comment-row input,
  .opa .comment-row textarea {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Dropdown-Pfeil im Chord-Select entfernen */
  .opa .chord-block select.chord-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    padding: 0 4px !important;
  }

  /* Placeholder im Spacer + „sel.“ im Chord-Select (wenn ausgewählt) verbergen */
  .opa .chord-spacer-row input::placeholder,
  .opa .chord-spacer-row textarea::placeholder { color: transparent !important; }

  .opa .chord-block select.chord-input:has(option:checked[value=""]) {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
  }


  /* Footer auf jeder Seite – unten mittig */
  body::after {
    content: "© Nis Nöhring – OnePageArrangement";
    position: fixed;
    left: 0; right: 0; 
    bottom: 5mm;
    text-align: center;
    font-size: 9pt;
    line-height: 1.2;
    color: #666;
    z-index: 9999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

}