/* =====================================================================
   HVSZ Tools – gemeinsame Gestaltung und Steuerleiste
   Wird von jedem Tool geladen: <link rel="stylesheet" href="hvsz-tools.css">
   ===================================================================== */
@font-face{font-family:'HV Mori';src:url('/wp-content/uploads/2022/09/PPMori-Regular-2.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'HV Mori';src:url('/wp-content/uploads/2022/09/PPMori-SemiBold-2.otf') format('opentype');font-weight:600;font-display:swap}
:root{
  --hz-sans:'HV Mori','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --hz-pink:#fcbfd9;--hz-pink2:#fde4ee;--hz-coral:#ff6c5c;--hz-orange:#ff9b56;
  --hz-blue:#0707f7;--hz-off:#f4e9ee;--hz-mut:#4a4a4a;
  --hz-pad:32px;          /* gemeinsame linke Kante */
  --hz-hero-h:176px;      /* Kopf überall gleich hoch */
  --hz-tool:var(--hz-pink);
}
@media(max-width:700px){:root{--hz-pad:16px;--hz-hero-h:168px}}
html,body{background:#fff!important;color:#000}
body{font-family:var(--hz-sans)!important;margin:0}

/* ---------- Steuerleiste ---------- */
.hz-bar{position:sticky;top:0;z-index:60;font-family:var(--hz-sans);color:#000}
.hz-bar *{box-sizing:border-box}
.hz-tabs{display:flex;align-items:stretch;background:#fff}
.hz-tabs a{flex:1;display:flex;align-items:center;min-height:42px;padding:0 var(--hz-pad);font:600 13px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.55);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--c,#eee)}
.hz-tabs a:hover{color:#000}
.hz-tabs a.on{color:#000;box-shadow:inset 0 -4px 0 #000}
.hz-tabs a:focus-visible{outline:2px solid #000;outline-offset:-4px}
.hz-row{display:flex;align-items:center;gap:18px;background:#000;color:#fff;padding:7px var(--hz-pad);min-height:50px}
.hz-grp{display:flex;align-items:center;gap:2px}
.hz-par{flex:1 1 auto;min-width:0;gap:16px}
.hz-out{margin-left:auto}
.hz-b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;height:36px;min-width:36px;padding:0 9px;color:#fff;font:600 11px/1 var(--hz-sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;user-select:none}
.hz-b svg{width:18px;height:18px;flex:none}
.hz-b:hover{background:#2e2e2e}
.hz-b:focus-visible{outline:2px solid var(--hz-coral);outline-offset:1px}
.hz-b[disabled]{opacity:.4;cursor:not-allowed}
.hz-tr{background:#1e1e1e;padding:2px}
.hz-tr .hz-b:not(.lbl) .t{display:none}
.hz-tr .hz-b.play,.hz-tr .hz-b.on{background:var(--hz-coral);color:#000}
.hz-out .hz-b.pri{background:var(--hz-blue)}
.hz-bar label,.hz-ro{display:flex;flex-direction:column;gap:3px;font:600 9.5px/1 var(--hz-sans)!important;letter-spacing:.09em!important;text-transform:uppercase;color:#fff!important;margin:0!important;min-width:0}
.hz-bar label>span{display:flex;gap:4px}
.hz-bar select,.hz-bar input[type=number]{font:400 14px/1.2 var(--hz-sans)!important;color:#fff!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.7)!important;border-radius:0!important;padding:2px 0!important;min-height:0!important;height:24px;max-width:150px;width:auto}
.hz-bar select option{color:#000}
.hz-bar input[type=number]{width:58px!important}
.hz-bar input[type=range]{width:96px;min-height:18px;margin:0;accent-color:var(--hz-coral)}
.hz-bar output{font:400 9.5px var(--hz-sans)!important;color:#fff!important}
.hz-ro b{font:400 14px/24px var(--hz-sans);letter-spacing:0;text-transform:none}
.hz-moved-btn{all:unset;cursor:pointer;background:#1e1e1e;color:#fff;font:600 11px/1 var(--hz-sans)!important;letter-spacing:.06em;text-transform:uppercase;padding:9px 10px!important;white-space:nowrap}
.hz-moved-btn:hover{background:#2e2e2e}
.hz-proxied{display:none!important}

/* ---------- Kopf: Tool-Farbe, überall gleich hoch, linksbündig ---------- */
.hz-hero{box-sizing:border-box;height:var(--hz-hero-h);display:flex;flex-direction:column;justify-content:flex-end;background:var(--hz-tool);padding:24px var(--hz-pad) 24px;text-align:left;overflow:hidden}
.hz-hero h1{font-family:var(--hz-sans)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(24px,4.4vw,52px)!important;line-height:1!important;margin:0 0 10px!important;text-align:left}
.hz-hero .lead{color:#000!important;margin:0!important;max-width:68ch;text-align:left;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){.hz-hero .lead{-webkit-line-clamp:2;font-size:14px}}

/* ---------- Akkordeon: gleiche Höhe und Schrift wie die Reiter ---------- */
.hz-acc{margin:0!important;padding:0!important;border:0!important;border-radius:0!important}
.hz-acc>details{margin:0}
.hz-acc>details>summary,.hz-sum{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:0 var(--hz-pad);font:600 13px/1 var(--hz-sans)!important;letter-spacing:.08em!important;text-transform:uppercase;cursor:pointer;border-top:1px solid #000;user-select:none}
.hz-acc>details>summary::-webkit-details-marker,.hz-sum::-webkit-details-marker{display:none}
.hz-acc>details>summary::after,.hz-sum::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.hz-acc>details[open]>summary::after,details[open]>.hz-sum::after{transform:translateY(2px) rotate(-135deg)}
.hz-acc>details>summary:focus-visible,.hz-sum:focus-visible{outline:2px solid var(--hz-blue);outline-offset:-3px}
.hz-acc-body{padding:6px var(--hz-pad) 26px}

/* ---------- Handy ---------- */
@media(max-width:700px){
  .hz-tabs a{padding:0 var(--hz-pad);font-size:12px}
  .hz-row{flex-wrap:wrap;gap:8px 10px;padding:8px var(--hz-pad)}
  .hz-par{order:3;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .hz-par::-webkit-scrollbar{display:none}
  .hz-par>*{flex:none}
  .hz-out .hz-b .t{display:none}
  .hz-tr .hz-b.lbl{padding:0 7px;gap:4px}
  .hz-tr .hz-b.lbl .t{font-size:9.5px}
}

/* ---------- Seitlich verschiebbare Fläche (z. B. Song-Diagramm) ---------- */
.hz-scrub{display:none}
@media(max-width:700px){
  .hz-scroll{overflow-x:auto;scrollbar-width:none}
  .hz-scroll::-webkit-scrollbar{display:none}
  .hz-scrub{display:flex;align-items:center;gap:12px;padding:10px var(--hz-pad) 14px;background:var(--hz-pink2);font:600 10px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase}
  .hz-scrub input{flex:1;accent-color:var(--hz-blue)}
}

/* Abschnitte, die zu Akkordeons werden, ohne eigenen Innenabstand */
section.hz-acc,.card.hz-acc{padding:0!important;margin:0!important;border-radius:0!important}
.hz-acc .hz-acc-body>*:first-child{margin-top:0}

/* ---------- Export-Menü ---------- */
.hz-menu{position:relative}
.hz-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.hz-menu-list{display:none;position:absolute;right:0;top:calc(100% + 7px);min-width:180px;background:#000;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hz-menu-list.open{display:block}
.hz-mi{all:unset;box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:42px;padding:0 16px;color:#fff;font:600 13px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-top:1px solid #2e2e2e}
.hz-mi:first-child{border-top:0}
.hz-mi:hover,.hz-mi:focus-visible{background:var(--hz-blue)}
.hz-mi[disabled]{opacity:.4;cursor:not-allowed;background:none}

/* ---------- Fortschritt ---------- */
.hz-prog{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);padding:16px}
.hz-prog-box{width:min(420px,100%);background:#fff;padding:22px var(--hz-pad) 26px;font-family:var(--hz-sans)}
.hz-prog-l{display:block;font:600 13px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.hz-prog-track{height:6px;background:var(--hz-off)}
.hz-prog-fill{height:100%;width:0;background:#000;transition:width .2s linear}

/* ---------- Loop-Leiste (Drums) ---------- */
.hz-loop{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px;margin:0 0 16px}
.hz-loop>*,.hz-loop-len>*{min-height:42px;display:flex;align-items:center}
.hz-loop .hz-loop-l,.hz-loop .hz-loop-n,.hz-loop-len i{font:600 13px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase;font-style:normal;padding:0 14px 0 0}
.hz-loop .hz-loop-n{min-width:170px;padding:0 14px;background:var(--hz-off)}
.hz-loop button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:42px;min-width:42px;padding:0 14px;background:#000;color:#fff;font:600 13px/1 var(--hz-sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.hz-loop button:hover:not(:disabled){background:var(--hz-blue)}
.hz-loop button:disabled{opacity:.35;cursor:not-allowed}
.hz-loop button.on{background:var(--hz-coral);color:#000}
.hz-loop-len{display:flex;gap:2px;margin-left:12px}
.hz-loop-len i{padding:0 0 0 10px}
@media(max-width:700px){.hz-loop .hz-loop-n{flex:1;min-width:0;white-space:nowrap;font-size:12px}.hz-loop .hz-loop-l{display:none}.hz-loop [data-a=dup]{flex:1 1 100%}.hz-loop-len{margin-left:0;width:100%}.hz-loop-len button{flex:1}}

/* ---------- Hinweis „In Song“ ---------- */
.hz-tip{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:120;display:flex;align-items:stretch;background:#000;color:#fff;font:600 12px/1.25 var(--hz-sans);letter-spacing:.04em;opacity:0;pointer-events:none;transition:.2s;max-width:calc(100% - 32px)}
.hz-tip.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.hz-tip span{padding:13px 16px}
.hz-tip a{display:flex;align-items:center;padding:0 16px;background:var(--hz-pink);color:#000;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.hz-tip a:hover{background:var(--hz-blue);color:#fff}
.hz-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.hz-tip{width:calc(100% - 32px);bottom:16px}.hz-tip span{padding:11px 12px}}