.syngbar{max-width:720px;margin:0 auto;font-size:17px;line-height:1.55}
.syngbar h2{margin:0 0 .4em}
.syngbar h3{margin:1.6em 0 .4em}
.syngbar h3 small{font-weight:400;opacity:.6;font-size:.7em;margin-left:.5em}
.syngbar-intro{opacity:.85}

.syngbar-form label,.syngbar-blok label{display:block;margin:0 0 1em;font-weight:600}
.syngbar-form input,.syngbar-form select,.syngbar-form textarea,
.syngbar-blok textarea{width:100%;padding:.6em .7em;font-size:1em;font-weight:400;
  border:1px solid #c8c8c8;border-radius:6px;box-sizing:border-box}
.syngbar-form small{display:block;font-weight:400;opacity:.7;margin-top:.3em}
.syngbar-to{display:flex;gap:1em}
.syngbar-to label{flex:1}
.paakraevet{color:#c0392b}

.syngbar-knap{display:inline-block;padding:.75em 1.4em;background:#2f6f4f;color:#fff;
  border:0;border-radius:6px;font-size:1em;font-weight:600;cursor:pointer;text-decoration:none}
.syngbar-knap:hover{background:#255a40;color:#fff}
.syngbar-knap.sekundaer{background:#6b6b6b}
.syngbar-knap.sekundaer:hover{background:#555}
.syngbar-link{background:none;border:0;padding:0;color:#2f6f4f;text-decoration:underline;
  cursor:pointer;font-size:.95em}
.syngbar-valg{display:flex;gap:.8em;flex-wrap:wrap;margin:.8em 0}

.syngbar-vers{list-style:none;counter-reset:l;padding:0;margin:1em 0}
.syngbar-vers li{counter-increment:l;display:flex;align-items:center;gap:.6em;
  padding:.22em 0}
.syngbar-vers li::before{content:counter(l);width:1.4em;opacity:.35;font-size:.8em;
  text-align:right;flex:none}
.syngbar-vers .linje{flex:1}
.syngbar-vers.redigerbar input[type=text]{flex:1;padding:.45em .6em;font-size:1em;
  border:1px solid #ddd;border-radius:5px}
.syngbar-vers .tal{flex:none;min-width:3.2em;text-align:right;font-size:.8em;
  font-variant-numeric:tabular-nums}
.syngbar-vers .tal.ok{color:#2f6f4f}
.syngbar-vers .tal.afvig{color:#c0392b;font-weight:700}

.syngbar-lyd{background:#f4f2ec;border-radius:8px;padding:1em 1.2em;margin:1.4em 0}
.syngbar-lyd-titel{margin:0 0 .5em;font-weight:600}
.syngbar-lyd audio{width:100%}
.syngbar-nedtaelling{margin:.5em 0 0;font-size:.9em}
.syngbar-tael{margin-left:.3em;opacity:.7}
.syngbar-tael.nu{color:#2f6f4f;font-weight:700;opacity:1}

.syngbar-blok{background:#fff;border:1px solid #e2e0da;border-radius:10px;
  padding:1.1em 1.3em;margin:1.2em 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.syngbar-blok h3{margin:0 0 .2em;display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.syngbar-blok h3 .status{margin-left:auto;font-size:.62em;font-weight:600;
  padding:.25em .7em;border-radius:99px;letter-spacing:.02em}
.status.god{background:#e7f3ec;color:#1f6b43}
.status.afvig{background:#fdeeec;color:#a5342c}
.syngbar-vershandling{display:flex;gap:.8em;flex-wrap:wrap;align-items:center;
  margin-top:.9em;padding-top:.8em;border-top:1px solid #f0efec}
.syngbar-naeste{background:#f9f8f5;border:1px solid #e2e0da}
.syngbar-koeb{background:#f4f2ec;border-radius:8px;padding:1.4em;margin:1.8em 0}
.syngbar-garanti{margin:.8em 0 0;font-size:.9em;opacity:.8}
.syngbar-note{font-size:.9em;opacity:.75;margin:.5em 0}
.syngbar-vent{font-size:.85em;opacity:.65;margin:.6em 0 0}
.syngbar-fejl{background:#fdeeec;border-left:3px solid #c0392b;padding:.7em 1em;
  border-radius:4px}
.syngbar-melodi-note{font-size:.9em;opacity:.7}
.syngbar-udskrift{width:100%;font-family:inherit;font-size:1em;padding:.8em;
  border:1px solid #ddd;border-radius:6px;box-sizing:border-box}
.syngbar-ret,.syngbar-igen{margin:0}

@media(max-width:540px){.syngbar-to{display:block}}

@media print{
  .syngbar-lyd,.syngbar-koeb,.syngbar-naeste,.syngbar-valg,.syngbar-note,
  .syngbar-vent,.syngbar-fejl,.syngbar-ret button,.syngbar-igen,
  .syngbar-udskrift,.syngbar-intro{display:none!important}
  .syngbar .tal{display:none!important}
  .syngbar-vers.redigerbar input[type=text]{border:0;padding:0;font-size:1em}
  .syngbar-blok{border:0;page-break-inside:avoid}
  .syngbar{max-width:none;font-size:12pt}
}

/* Valgblokken bryder ud af de 720px, saa tre bud kan staa ved siden af hinanden */
.syngbar-valgblok{background:#f4f8f5;border-color:#cfe0d5;box-sizing:border-box;
  position:relative;left:50%;transform:translateX(-50%);
  width:min(1180px,94vw);max-width:none}
.syngbar-budliste{display:grid;gap:.9em;margin:.9em 0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media(min-width:900px){.syngbar-budliste{grid-template-columns:repeat(3,1fr)}}
@media(max-width:899px){.syngbar-valgblok{left:auto;transform:none;width:auto}}
.syngbar-bud{background:#fff;border:1px solid #e2e0da;border-radius:8px;
  padding:.9em 1em;display:flex;flex-direction:column}
.syngbar-bud .budnr{font-size:.75em;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6b7a70;margin:0 0 .3em}
.syngbar-bud .syngbar-vers{margin:.2em 0 .8em;font-size:.95em;flex:1}
.syngbar-bud .syngbar-vers li{padding:.12em 0;gap:.35em;align-items:flex-start}
.syngbar-bud .syngbar-vers .linje{line-height:1.35}
.syngbar-bud .syngbar-vers li::before{width:1em;font-size:.72em}
.syngbar-bud .syngbar-vers .tal{min-width:2.6em;font-size:.72em}
.syngbar-bud .syngbar-knap{padding:.5em 1em;font-size:.9em;width:100%;text-align:center}
@media print{.syngbar-valgblok{display:none!important}}

/* Venteboks under generering */
.syngbar-vent-overlay{position:fixed;inset:0;z-index:99999;display:flex;
  align-items:center;justify-content:center;padding:1.5em;
  background:rgba(28,32,30,.72);backdrop-filter:blur(2px)}
.syngbar-vent-overlay[hidden]{display:none}
.syngbar-vent-boks{background:#fff;border-radius:14px;padding:2em 2.2em;
  max-width:460px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.syngbar-vent-boks h3{margin:.2em 0 .5em}
.syngbar-vent-boks p{margin:.4em 0;font-size:.95em;opacity:.85}
.syngbar-vent-status{font-size:.88em!important;opacity:.7!important;margin-top:1.1em!important;
  font-variant-numeric:tabular-nums}
.syngbar-skriver{width:150px;height:112px;margin:0 auto .4em;display:block}
.syngbar-skriver .bord{fill:#d9d4c7}
.syngbar-skriver .papir{fill:#f7f5ef;stroke:#ddd8cc;stroke-width:1}
.syngbar-skriver .hoved{fill:#2f6f4f}
.syngbar-skriver .krop,.syngbar-skriver .arm,.syngbar-skriver .pen{
  fill:none;stroke:#2f6f4f;stroke-width:4;stroke-linecap:round}
.syngbar-skriver .arm{transform-origin:78px 46px;animation:syngbar-arm 1.6s ease-in-out infinite}
.syngbar-skriver .pen{transform-origin:58px 56px;animation:syngbar-arm 1.6s ease-in-out infinite}
.syngbar-skriver .skrift{fill:none;stroke:#2f6f4f;stroke-width:2;opacity:.8;
  stroke-dasharray:80;stroke-dashoffset:80;animation:syngbar-skriv 4s linear infinite}
@keyframes syngbar-arm{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-7deg)}}
@keyframes syngbar-skriv{0%{stroke-dashoffset:80}70%{stroke-dashoffset:0}
  85%{stroke-dashoffset:0;opacity:.8}100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){
  .syngbar-skriver .arm,.syngbar-skriver .pen,.syngbar-skriver .skrift{animation:none}}
@media print{.syngbar-vent-overlay{display:none!important}}

/* Bland bud */
.syngbar-bland{margin:1em 0;border-top:1px solid #dfe6e1;padding-top:.8em}
.syngbar-bland summary{cursor:pointer;font-weight:600;color:#2f6f4f}
.syngbar-blandtabel{width:100%;border-collapse:collapse;margin:.6em 0 1em}
.syngbar-blandtabel th{text-align:left;vertical-align:top;padding:.5em .8em .5em 0;
  white-space:nowrap;font-size:.9em}
.syngbar-blandtabel td{padding:.5em 0;border-bottom:1px solid #eceae5}
.syngbar-blandvalg{display:inline-flex;align-items:baseline;gap:.35em;
  margin:0 1.2em .3em 0;font-size:.92em}
.syngbar-blandvalg small{opacity:.6}
@media print{.syngbar-bland{display:none!important}}

/* Verset som ren tekst - kundens visning */
.syngbar-verstekst{margin:.6em 0 .9em;font-size:1.06em;line-height:1.75}
.syngbar-verstekst div{padding:.04em 0}
.syngbar-retboks{margin:0 0 .4em}
.syngbar-retboks summary{cursor:pointer;color:#2f6f4f;font-size:.92em}
.syngbar-retboks[open] summary{margin-bottom:.5em}
.syngbar-retboks .syngbar-vers{margin:.4em 0 .8em}
@media print{
  .syngbar-retboks{display:none!important}
  .syngbar-verstekst{font-size:12pt}
}

.syngbar-bud .budtekst{font-size:.97em;line-height:1.6;flex:1;margin:.3em 0 .8em}

/* Lille melodiafspiller inde i versblokken */
.syngbar-lyd.mini{background:#f7f6f2;border-radius:8px;padding:.5em .7em;margin:.7em 0 0;
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.syngbar-lyd.mini audio{width:230px;max-width:100%;height:32px}
.syngbar-lydtekst{font-size:.85em;opacity:.7}
@media(max-width:540px){.syngbar-lyd.mini audio{width:100%}}
@media print{.syngbar-lyd.mini{display:none!important}}

/* Leveringsvalg */
.syngbar-levering{display:grid;gap:.9em;margin:1em 0;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.syngbar-lvalg{background:#fff;border:1px solid #e2e0da;border-radius:10px;
  padding:1em 1.1em;display:flex;flex-direction:column}
.syngbar-lvalg.fremhaevet{border-color:#2f6f4f;box-shadow:0 0 0 2px rgba(47,111,79,.12)}
.syngbar-lvalg h4{margin:0 0 .2em;font-size:1.02em}
.syngbar-lvalg .pris{margin:0 0 .5em;font-weight:700;color:#2f6f4f}
.syngbar-lvalg p{margin:0 0 .8em;font-size:.9em;opacity:.85;flex:1}
.syngbar-lvalg .syngbar-knap{text-align:center}
.syngbar-lvalg .antal{display:block;font-size:.85em;margin:0 0 .6em;font-weight:600}
.syngbar-lvalg .antal input{width:5em;padding:.35em .5em;margin-left:.4em;
  border:1px solid #ccc;border-radius:5px}
.syngbar-opgrader{background:#f4f2ec;border-radius:8px;padding:1.1em 1.3em;margin:1.2em 0}
.syngbar-opgrader h4{margin:0 0 .3em}
@media print{.syngbar-levering,.syngbar-opgrader{display:none!important}}

/* Velkomst lige efter betaling */
.syngbar-velkomst{background:#f4f8f5;border:1px solid #cfe0d5;border-radius:10px;
  padding:1.2em 1.4em;margin:1.2em 0}
.syngbar-velkomst h3{margin:0 0 .4em}
.syngbar-velkomst p{margin:.4em 0}
@media print{.syngbar-velkomst{display:none!important}}

/* Bestilling af hele sangen */
.syngbar-bestilvers{display:flex;gap:.8em;align-items:flex-start;margin:0 0 .8em;
  padding:0 0 .8em;border-bottom:1px solid #eceae5}
.syngbar-bestilvers label{flex:1;margin:0}
.syngbar-bestilvers .nr{display:block;font-size:.85em;opacity:.7;margin:0 0 .25em}
.syngbar-bestilvers select{width:auto;min-width:9em;margin-top:1.55em}
@media(max-width:600px){
  .syngbar-bestilvers{display:block}
  .syngbar-bestilvers select{margin-top:.4em;width:100%}
}

/* Fremdrift mens sangen skrives */
.syngbar-fremdrift{background:#e2e0da;border-radius:99px;height:10px;overflow:hidden;
  margin:1em auto;max-width:340px}
.syngbar-fremdrift span{display:block;height:100%;background:#2f6f4f;
  transition:width .4s ease}

/* Statusside der viser at der arbejdes */
.syngbar-arbejder .syngbar-skriver{width:150px;height:112px;margin:0 auto .4em;display:block}
.syngbar-puls{background:#e2e0da;border-radius:99px;height:6px;overflow:hidden;
  margin:1.2em auto;max-width:340px;position:relative}
.syngbar-puls span{position:absolute;top:0;bottom:0;width:35%;border-radius:99px;
  background:#2f6f4f;animation:syngbar-puls 1.8s ease-in-out infinite}
@keyframes syngbar-puls{
  0%{left:-35%} 100%{left:100%}
}
.syngbar-arbejder .syngbar-vent-status{font-size:.9em;opacity:.75;
  font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.syngbar-puls span{animation:none;left:0;width:100%}}

/* Slutverset staar for sig selv */
.syngbar-bestilvers.slutvers{border-bottom:none;border-top:2px solid #cfe0d5;
  padding-top:1em;margin-top:.4em}
.syngbar-bestilvers.slutvers .nr{color:#2f6f4f;font-weight:600}

/* Buddene paa proeveverset side om side. To vers under hinanden kan ikke
   sammenlignes - man skal kunne loebe linje for linje ned ad begge paa én gang.
   Kolonnerne falder af sig selv sammen til én paa telefonen, hvor der ikke er
   bredde til to. */
.syngbar-bud-raekke.syngbar-flere {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2em 2em;
    align-items: start;
    margin-top: .6em;
}
.syngbar-bud-raekke.syngbar-flere .syngbar-verstekst { margin-top: 0; }

.syngbar-budnr {
    margin: 0 0 .5em;
    font-size: .95em;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
}

/* Det valgte bud paa et faerdigt vers */
.syngbar-bud.er-valgt {
    outline: 2px solid currentColor;
    outline-offset: .5em;
    opacity: .95;
}
.syngbar-bud-raekke.syngbar-flere .budtekst { margin-bottom: .6em; }
.syngbar-bud-raekke.syngbar-flere .syngbar-knap { margin-top: 0; }

/* Blokvalg direkte i teksten: hver blok er en klikbar flade */
.syngbar-blandform .syngbar-bud { padding: 0; }
.syngbar-blandblok {
    display: block;
    position: relative;
    padding: .5em .7em .5em 2.1em;
    margin-bottom: .35em;
    border: 1px solid transparent;
    border-radius: .4em;
    cursor: pointer;
}
.syngbar-blandblok:hover { background: rgba(0,0,0,.04); }
.syngbar-blandblok input {
    position: absolute;
    left: .7em;
    top: .8em;
}
.syngbar-blandblok .budtekst { display: block; margin: 0; }
.syngbar-blandblok .budtekst span { display: block; }
.syngbar-blandblok:has(input:checked) {
    border-color: currentColor;
    background: rgba(0,0,0,.03);
}
.syngbar-blandform > .syngbar-knap { margin-top: .8em; }

/* ---- Print: kun sangen paa papiret ---------------------------------- */
.syngbar-print{display:none}

/* Under print flyttes printblokken op som direkte barn af <body>, og alt andet
   paa den plads slaas fra med display:none. visibility:hidden var ikke nok:
   usynlige elementer FYLDER stadig, og derfor kom der ni tomme ark ud. */
html.syngbar-printer body > *{display:none!important}
html.syngbar-printer body > .syngbar-print{display:block!important}

/* Under print flyttes printblokken op som direkte barn af <body>, og alt andet
   paa den plads slaas fra med display:none. visibility:hidden var ikke nok:
   usynlige elementer FYLDER stadig, og derfor kom der ni tomme ark ud. */
html.syngbar-printer body > *{display:none!important}
html.syngbar-printer body > .syngbar-print{display:block!important}

@media print{
  /* Arket fyldes ud: teksten skal staa som en sangbogsside, ikke klumpe sig
     sammen oeverst med en tom nederste halvdel. Afsenderen skubbes ned i
     bunden af arket. */
  .syngbar-print{
    display:flex!important;flex-direction:column;
    min-height:calc(100vh - 32mm);
    font-size:13.5pt;line-height:1.62;color:#000;
    border:0;background:none}
  .syngbar-print *{border:0!important;background:none!important;
    box-shadow:none!important}

  /* Temaets groenne overskriftsfarve hoerer ikke til paa papir - den koster
     farvepatron og ser ud som et link. */
  .syngbar-print h1{font-size:19pt;margin:0 0 .15em;text-align:center;
    color:#000!important;font-weight:700}
  .syngbar-print .p-melodi{font-size:11.5pt;font-style:italic;text-align:center;
    color:#000!important;margin:0 0 2.2em}

  /* Versene i to spalter, som fylder den plads der er tilbage. */
  .syngbar-print .p-spalter{
    flex:1;
    column-count:2;column-gap:16mm;
    orphans:8;widows:8}
  .syngbar-print .p-vers{
    margin:0 0 1.9em;
    break-inside:avoid;page-break-inside:avoid}
  .syngbar-print .p-nr{display:block;font-weight:700;margin-bottom:.35em}
  .syngbar-print .p-afsender{margin:2.2em 0 0;font-style:italic;text-align:center}

  /* Venstremargen er nu markant stoerre end hoejre, saa baade venstre og
     hoejre spalte staar godt inde paa arket. */
  @page{margin:16mm 14mm 16mm 34mm}
}


/* "Sangen er klar": teksten til venstre, knapperne til hoejre, og tekstboksen
   straekker sig ned i samme hoejde som den nederste knap. */
.syngbar-faerdigto{display:flex;gap:1.6em;align-items:stretch;margin-top:.6em}
.syngbar-faerdigtekst{flex:1 1 55%;display:flex;flex-direction:column;min-width:0}
.syngbar-faerdigtekst h4{margin:0 0 .5em}
.syngbar-faerdigtekst .syngbar-udskrift{flex:1;min-height:16em;resize:vertical}
.syngbar-faerdigknapper{flex:0 1 38%;display:flex;flex-direction:column;
  justify-content:flex-start;gap:.6em}
.syngbar-faerdigknapper .syngbar-valg{display:flex;flex-direction:column;gap:.6em}
.syngbar-faerdigknapper .syngbar-knap{width:100%;text-align:center;box-sizing:border-box}
@media(max-width:700px){
  .syngbar-faerdigto{display:block}
  .syngbar-faerdigtekst .syngbar-udskrift{min-height:14em}
  .syngbar-faerdigknapper{margin-top:1.2em}
}
@media print{.syngbar-faerdigto{display:none!important}}

/* Knappen under blokvalget er kun til dem uden JavaScript */
.syngbar-blandform.auto > .syngbar-knap{display:none}
.syngbar-blandkvit{display:inline-block;margin-top:.6em;opacity:.7}

/* Den faerdige sang: almindelig blok, ikke leveringskortenes grid */
.syngbar-faerdig{margin:1em 0}
.syngbar-faerdig h3{margin-top:0}
@media print{.syngbar-faerdig{display:none!important}}

/* Fra-pris og taalmodighedsteksten paa proeveverssiden */
.syngbar-fra{margin:1.2em 0;padding:.9em 1.1em;border:1px solid #cfe0d5;
  border-radius:8px;background:#f4f8f5}
.syngbar-fra .pris{margin:0 0 .25em;font-size:1.12em}
.syngbar-fra p:last-child{margin:0;font-size:.92em;opacity:.85}
.syngbar-taalmod{margin:1.2em 0;padding:.9em 1.1em;border-left:3px solid #cfe0d5}
.syngbar-taalmod h4{margin:0 0 .4em;font-size:1em}
.syngbar-taalmod p{margin:0 0 .6em;font-size:.92em;opacity:.9}
.syngbar-taalmod p:last-child{margin:0}
@media print{.syngbar-fra,.syngbar-taalmod{display:none!important}}