body.page-dubcard .dubcard-grid{
  max-width:none;
}

body.page-dubcard{
  --dubcard-ui-font:"IBM Plex Sans","Fira Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  /* 1920x1080 Title Safe: 192 px seitlich, 108 px oben/unten. */
  --dubcard-title-safe-x:10%;
  --dubcard-title-safe-y:5.625%;
}

body.page-dubcard .dubcard-page,
body.page-dubcard .dubcard-page *{
  font-family:var(--dubcard-ui-font);
}

.dubcard-toolbar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dubcard-editor-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.dubcard-editor-heading h2{
  margin:0 0 6px;
}

.dubcard-editor-heading p{
  margin:0;
}

.dubcard-editor-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dubcard-editor-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:12px;
  margin-top:16px;
}

.dubcard-editor-grid label,
.dubcard-meta-edit-row label,
.dubcard-role-edit-fields label{
  display:grid;
  gap:6px;
  min-width:0;
  font-weight:700;
}

.dubcard-meta-editor{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.dubcard-meta-edit-row{
  display:grid;
  grid-template-columns:minmax(180px, .8fr) minmax(260px, 1.5fr) auto;
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.07);
}

.dubcard-role-settings{
  margin:10px 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.dubcard-threshold-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-weight:700;
}

.dubcard-threshold-control input{
  width:84px;
  min-width:84px;
  text-align:center;
}

.dubcard-role-map{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(480px, 1fr));
  gap:12px;
  max-height:520px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 6px 2px 2px;
}

.dubcard-role-toggle{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 78px;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.10);
}

.dubcard-role-edit-fields{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:8px 10px;
  align-items:end;
  min-width:0;
}

.dubcard-role-edit-fields input{
  width:100%;
  min-width:0;
}

.dubcard-main-check{
  display:grid;
  justify-items:center;
  align-content:center;
  gap:5px;
  min-width:70px;
  font-size:12px;
  font-weight:700;
}

.dubcard-role-edit-fields .role-sub{
  grid-column:1 / -1;
  min-height:32px;
  padding-top:2px;
  line-height:1.25;
}

.dubcard-role-toggle.suggested-side{
  border-color:rgba(228,190,96,.34);
  background:rgba(228,190,96,.10);
}

.dubcard-role-toggle .role-title{
  font-weight:800;
}

.dubcard-role-toggle .role-sub{
  font-size:13px;
  color:#dce8ff;
}

.dubcard-role-toggle input{
  width:auto;
  min-width:20px;
  min-height:20px;
}

.dubcard-pages{
  display:grid;
  gap:16px;
}

.dubcard-page{
  width:100%;
  aspect-ratio:16 / 9;
  min-height:440px;
  box-sizing:border-box;
  padding:var(--dubcard-title-safe-y) var(--dubcard-title-safe-x);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 12% 14%, rgba(120,180,255,.30), rgba(120,180,255,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    #172a50;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px rgba(0,0,0,.30);
  overflow:auto;
}

.dubcard-page-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.dubcard-page-main,
.dubcard-page-side{
  display:flex;
  flex-direction:column;
}

.dubcard-page-head.only-logo{
  justify-content:center;
  margin-bottom:12px;
}

.dubcard-page-head.slim.single-title{
  justify-content:center;
  margin-bottom:20px;
}

.dubcard-logo{
  width:min(38%, 480px);
  max-height:180px;
  height:auto;
  object-fit:contain;
}

.dubcard-production-title{
  text-align:center;
  font-size:34px;
  font-weight:700;
  line-height:1.15;
  margin:6px 0 16px;
}

.dubcard-page-head h2{
  margin:0;
  font-size:30px;
  line-height:1.12;
  text-align:center;
  font-weight:700;
}

.dubcard-meta-list{
  margin:0 auto;
  width:min(86%, 1180px);
  display:grid;
  gap:10px;
  max-height:calc(100% - 150px);
  overflow:auto;
  padding-right:6px;
}

.dubcard-meta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.11);
}

.dubcard-meta-row .k{
  font-size:22px;
  font-weight:700;
  line-height:1.2;
}

.dubcard-meta-row strong{
  font-size:22px;
  line-height:1.2;
}

.dubcard-role-columns{
  margin-top:6px;
  min-height:0;
  max-height:clamp(220px, calc(100% - 120px), 560px);
  overflow:auto;
  padding-right:6px;
}

.dubcard-role-columns.main,
.dubcard-role-columns.side{
  column-count:2;
  column-gap:22px;
}

#dubcard-main-roles,
#dubcard-side-roles{
  flex:1 1 auto;
}

.dubcard-side-inline{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.20);
}

.dubcard-side-inline h3{
  margin:0 0 10px;
  text-align:center;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
}

.dubcard-side-inline .dubcard-role-columns{
  min-height:0;
  max-height:220px;
  overflow:auto;
}

.dubcard-role-item{
  break-inside:avoid;
  margin:0 0 8px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  text-align:center;
}

.dubcard-role-item .name{
  font-size:22px;
  font-weight:700;
  line-height:1.18;
}

.dubcard-role-item .role{
  margin-top:4px;
  font-size:22px;
  font-weight:700;
  line-height:1.18;
  color:#e9f2ff;
}

.dubcard-role-item.side-speaker .name{
  font-size:22px;
}

.dubcard-role-item.side-speaker.is-compact .name{
  font-size:24px;
}

.dubcard-empty{
  color:#dce8ff;
  font-size:20px;
  text-align:center;
  padding:16px;
  border:1px dashed rgba(255,255,255,.28);
  border-radius:12px;
}

.dubcard-direct-edit{
  border-radius:6px;
  outline:1px dashed transparent;
  outline-offset:3px;
  cursor:text;
  transition:outline-color .15s ease, background-color .15s ease;
}

.dubcard-direct-edit:hover{
  outline-color:rgba(255,255,255,.48);
  background:rgba(255,255,255,.06);
}

.dubcard-direct-edit:focus{
  outline:2px solid #e4be60;
  background:rgba(228,190,96,.12);
}

body.page-dubcard .dubcard-role-map,
body.page-dubcard .dubcard-meta-list,
body.page-dubcard .dubcard-role-columns{
  scrollbar-width:thin;
  scrollbar-color:rgba(210,225,255,.78) rgba(255,255,255,.08);
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar{
  width:10px;
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar-thumb,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar-thumb,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar-thumb{
  background:rgba(210,225,255,.70);
  border-radius:999px;
}

body.page-dubcard .dubcard-role-map::-webkit-scrollbar-track,
body.page-dubcard .dubcard-meta-list::-webkit-scrollbar-track,
body.page-dubcard .dubcard-role-columns::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

@media (max-width:1200px){
  .dubcard-editor-grid{
    grid-template-columns:1fr;
  }

  .dubcard-meta-edit-row{
    grid-template-columns:1fr;
  }

  .dubcard-page{
    padding:var(--dubcard-title-safe-y) var(--dubcard-title-safe-x);
    min-height:360px;
  }

  .dubcard-production-title{font-size:26px}
  .dubcard-page-head h2{font-size:24px}
  .dubcard-meta-row .k{font-size:17px}
  .dubcard-meta-row strong{font-size:17px}
  .dubcard-role-item .name{font-size:16px}
  .dubcard-role-item .role{font-size:16px}
  .dubcard-role-item.side-speaker .name{font-size:16px}
  .dubcard-side-inline h3{font-size:18px}
  .dubcard-role-columns{max-height:clamp(190px, calc(100% - 100px), 420px)}
}

@media (max-width:620px){
  .dubcard-role-map{
    grid-template-columns:1fr;
  }

  .dubcard-role-toggle{
    grid-template-columns:1fr;
  }

  .dubcard-main-check{
    grid-template-columns:auto auto;
    justify-content:start;
    justify-items:start;
  }
}

body.page-dubcard.dubcard-export-render{
  width:1920px;
  margin:0;
  padding:0;
  background:#000;
}

body.page-dubcard.dubcard-export-render .grid{
  display:block;
  width:1920px;
  margin:0;
  padding:0;
}

body.page-dubcard.dubcard-export-render .dubcard-pages{
  display:block;
  width:1920px;
  margin:0;
  padding:0;
}

body.page-dubcard.dubcard-export-render .dubcard-page{
  width:1920px;
  height:1080px;
  min-height:1080px;
  box-sizing:border-box;
  aspect-ratio:auto;
  margin:0;
  padding:108px 192px;
  border:0;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
}

body.page-dubcard.dubcard-export-render .dubcard-page.hidden{
  display:none !important;
}

body.page-dubcard.dubcard-export-render .dubcard-direct-edit{
  outline:none !important;
  background:transparent !important;
}

@media print{
  @page{
    size:1920px 1080px;
    margin:0;
  }

  body.page-dubcard{
    background:#000 !important;
    color:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    margin:0 !important;
    padding:0 !important;
  }

  body.page-dubcard .grid{
    padding:0 !important;
    margin:0 !important;
    display:block !important;
  }

  body.page-dubcard .card,
  body.page-dubcard .footer{
    display:none !important;
  }

  body.page-dubcard #dubcard-print{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    break-before:auto !important;
    page-break-before:auto !important;
  }

  body.page-dubcard .dubcard-page{
    width:1920px !important;
    height:1080px !important;
    box-sizing:border-box !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:108px 192px !important;
    border:none !important;
    border-radius:0 !important;
    background:#000 !important;
    color:#fff !important;
    box-shadow:none !important;
    overflow:hidden !important;
    break-before:auto !important;
    page-break-before:auto !important;
    break-after:page !important;
    page-break-after:always !important;
    page-break-inside:avoid;
    break-inside:avoid-page;
  }

  body.page-dubcard .dubcard-page:first-child{
    break-before:auto !important;
    page-break-before:auto !important;
  }

  body.page-dubcard .dubcard-page:last-child{
    break-after:auto !important;
    page-break-after:auto !important;
  }

  body.page-dubcard #dubcard-print .dubcard-page,
  body.page-dubcard #dubcard-print .dubcard-page *{
    color:#fff !important;
  }

  body.page-dubcard #dubcard-print.dubcard-combined .dubcard-page-main{
    break-after:auto !important;
    page-break-after:auto !important;
  }

  body.page-dubcard #dubcard-print.dubcard-combined #dubcard-page-side{
    display:none !important;
  }

  body.page-dubcard #dubcard-print .dubcard-side-inline{
    border-top:1px solid #9aa3b2 !important;
  }

  body.page-dubcard .dubcard-meta-row,
  body.page-dubcard .dubcard-role-item{
    color:#fff !important;
    background:#000 !important;
    border-color:#9aa3b2 !important;
  }

  body.page-dubcard .dubcard-role-item .role{
    color:#fff !important;
  }

  body.page-dubcard .dubcard-direct-edit{
    outline:none !important;
    background:transparent !important;
  }
}