/* Letzte Cleaning Prüfung: 23.09.2026
   Letztes Cleaning: 13.09.2026 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#080a0f;--panel:#10131b;--panel2:#151925;--line:#262b3a;--text:#f5f6fa;--muted:#969daf;--lime:#c8ff32;--purple:#9d6cff;--pink:#ff4db8;--red:#ff4655;--sidebar:240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif}.factory-shell{min-height:100vh}.factory-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:24px 14px 18px;display:flex;flex-direction:column;background:#0b0d13;border-right:1px solid #1c202b;z-index:10;overflow:hidden}.factory-brand{display:flex;align-items:center;gap:11px;padding:0 6px;color:#fff;text-decoration:none;font-family:'Space Grotesk';font-size:18px;flex:none}.factory-brand strong{color:var(--lime)}.factory-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--lime);color:#090b0f;font-size:22px;box-shadow:0 0 30px #c8ff3233}.factory-nav{display:grid;gap:4px;margin-top:28px;padding-bottom:18px;border-bottom:1px solid #1d212b;flex:none}.factory-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#858c9c;text-decoration:none;font-weight:600;font-size:13px}.factory-nav a i{font-size:19px}.factory-nav a:hover,.factory-nav a.active{background:#171b25;color:#fff}.factory-nav a.active i{color:var(--lime)}
.factory-sidebar-tools{min-height:0;display:flex;flex:1;flex-direction:column;padding-top:17px}.factory-sidebar-tools-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px 8px;color:#697080;font:700 10px/1 'Space Grotesk';letter-spacing:.12em;text-transform:uppercase}.factory-sidebar-tools-head b{display:grid;place-items:center;min-width:21px;height:18px;padding:0 5px;border-radius:8px;background:#171b24;color:#9299a8;font-size:9px}.factory-sidebar-tool-list{min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 3px 10px;scrollbar-width:thin;scrollbar-color:#333846 transparent}.factory-sidebar-tool-list::-webkit-scrollbar{width:4px}.factory-sidebar-tool-list::-webkit-scrollbar-thumb{background:#333846;border-radius:4px}.factory-sidebar-tool-group{margin:0 0 13px}.factory-sidebar-tool-group h3{margin:0;padding:6px 8px;color:#555d6d;font:700 9px/1 'Space Grotesk';letter-spacing:.12em;text-transform:uppercase}.factory-sidebar-tool{position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:#8c93a2;text-align:left;cursor:pointer;font:600 11px/1.25 'DM Sans';transition:background .16s,color .16s}.factory-sidebar-tool:hover,.factory-sidebar-tool.active{background:#181b24;color:#fff}.factory-sidebar-tool.active{box-shadow:inset 2px 0 #ff304f}.factory-sidebar-tool i{width:19px;flex:none;color:#707888;font-size:17px;text-align:center}.factory-sidebar-tool:hover i,.factory-sidebar-tool.active i{color:#ff304f}.factory-sidebar-tool span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.factory-sidebar-tool em{width:5px;height:5px;margin-left:auto;flex:none;border-radius:50%;background:#424855}.factory-sidebar-tool em.live{background:#ff304f;box-shadow:0 0 8px #ff304f80}.engine-badge{margin-top:12px;display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #252a35;border-radius:12px;background:#11141b;flex:none}.engine-badge div{display:grid}.engine-badge strong{font-size:12px}.engine-badge small{font-size:11px;color:#7d8494;margin-top:2px}.engine-pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px #c8ff3215}.back-link{margin:18px 10px 0;color:#737a89;text-decoration:none;font-size:12px}.factory-main{margin-left:var(--sidebar);min-height:100vh}.factory-topbar{height:76px;display:flex;align-items:center;justify-content:flex-end;padding:0 5vw;border-bottom:1px solid #171b24;background:#080a0fdd;backdrop-filter:blur(14px);position:sticky;top:0;z-index:8}.factory-mobile-brand{display:none}.factory-top-actions{display:flex;align-items:center;gap:20px}.factory-status{font-size:12px;color:#969dac}.factory-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:7px}.factory-top-actions button{border:1px solid #303544;width:36px;height:36px;border-radius:50%;background:#181c27;color:#fff;font-weight:700}.factory-content{max-width:1440px;margin:auto;padding:0 5vw}.factory-hero{min-height:530px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;border-bottom:1px solid #1c202a;overflow:hidden}.hero-copy{position:relative;z-index:2}.eyebrow,.section-kicker{color:var(--lime);font-size:11px;letter-spacing:.16em;font-weight:700}.eyebrow i{font-size:15px;margin-right:6px}.hero-copy h1{font:700 clamp(42px,5.2vw,78px)/.98 'Space Grotesk';letter-spacing:-.055em;margin:22px 0}.hero-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #b5bbc8}.hero-copy p{max-width:620px;color:#9da4b4;font-size:17px;line-height:1.6}.hero-cta{display:inline-flex;gap:12px;align-items:center;margin-top:18px;background:var(--lime);color:#0a0c10;text-decoration:none;font-weight:700;border-radius:10px;padding:14px 20px}.hero-orbit{height:420px;position:relative;display:grid;place-items:center}.orbit-ring{position:absolute;border:1px solid #383e50;border-radius:50%}.ring-one{width:260px;height:260px}.ring-two{width:390px;height:390px;border-style:dashed;opacity:.55}.orbit-core{display:grid;place-items:center;width:104px;height:104px;border-radius:30px;background:linear-gradient(135deg,var(--lime),#71ff88);color:#090b0e;font-size:52px;box-shadow:0 0 80px #c8ff3230;transform:rotate(-5deg)}.orbit-core i{transform:rotate(5deg)}.orbit-chip{position:absolute;padding:9px 13px;background:#171b25;border:1px solid #33394a;border-radius:20px;font-size:12px;box-shadow:0 10px 30px #0008}.orbit-chip i{color:var(--lime);margin-right:5px}.chip-script{top:64px;left:5%}.chip-short{right:0;top:145px}.chip-publish{left:3%;bottom:65px}.factory-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#252a35;border:1px solid #252a35;border-radius:16px;overflow:hidden;margin:-1px 0 90px}.factory-overview article{padding:24px;background:#10131a;display:grid;gap:5px}.factory-overview span{color:#858c9c;font-size:12px}.factory-overview strong{font:600 32px 'Space Grotesk'}.factory-overview small{color:#646b7a;font-size:11px}.factory-overview .credit-card strong{color:var(--lime)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.section-heading h2{font:600 clamp(27px,3vw,40px) 'Space Grotesk';margin:8px 0 0}.section-heading p{color:#7e8594;font-size:13px}.pipeline-section,.tools-section{scroll-margin-top:100px;margin-bottom:100px}.pipeline-track{display:flex;align-items:center;padding:28px;background:#10131a;border:1px solid #242936;border-radius:16px}.pipeline-step{min-width:78px;text-align:center;display:grid;gap:8px;justify-items:center}.pipeline-step b{color:#555d6d;font-size:10px}.pipeline-step i{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#1a1f2a;color:var(--lime);font-size:25px}.pipeline-step span{font-size:12px;font-weight:600}.pipeline-line{height:1px;flex:1;background:linear-gradient(90deg,#4a5262,var(--lime),#4a5262);opacity:.45}.factory-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tool-card{position:relative;min-height:300px;padding:24px;border:1px solid #282d3a;border-radius:16px;background:linear-gradient(150deg,#151925,#0e1118);overflow:hidden;display:flex;flex-direction:column;transition:.25s}.tool-card:before{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:var(--accent);filter:blur(90px);opacity:.14;right:-50px;top:-50px}.tool-card:hover{transform:translateY(-5px);border-color:#444b5d}.tool-card-head{display:flex;justify-content:space-between;position:relative}.tool-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:color-mix(in srgb,var(--accent) 18%,#171b25);color:var(--accent);font-size:25px}.tool-state{font-size:10px;color:#858d9d;border:1px solid #313746;border-radius:15px;padding:5px 9px;height:max-content}.tool-state.live{color:var(--lime);border-color:#c8ff3244}.tool-card h3{font:600 20px 'Space Grotesk';margin:24px 0 10px;position:relative}.tool-card p{color:#8c93a3;font-size:13px;line-height:1.55;margin:0 0 18px}.tool-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}.tool-tags span{font-size:10px;background:#1c202a;color:#a5acb9;border-radius:5px;padding:5px 7px}.tool-action{margin-top:auto;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-size:13px;font-weight:700;border-top:1px solid #282d38;padding-top:17px}.tool-action i{color:var(--accent);font-size:20px}.factory-loading{grid-column:1/-1;text-align:center;color:#8f96a5;padding:70px}.factory-message{padding:15px;border:1px solid #ff465577;background:#ff465511;color:#ff9ba3;border-radius:10px;margin-bottom:18px}footer{border-top:1px solid #1d212b;padding:28px 0 40px;display:flex;justify-content:space-between;color:#666d7c;font-size:11px}footer b{background:#282d39;padding:2px 5px;border-radius:4px;color:#aaa}footer strong{color:#9ba2b1}@media(max-width:1050px){.factory-tools{grid-template-columns:repeat(2,1fr)}.factory-hero{grid-template-columns:1fr}.hero-orbit{display:none}}@media(max-width:700px){.factory-sidebar{display:none}.factory-main{margin:0}.factory-topbar{justify-content:space-between}.factory-mobile-brand{display:block;font-family:'Space Grotesk';font-weight:700}.factory-mobile-brand i{color:var(--lime)}.factory-content{padding:0 20px}.factory-hero{min-height:500px}.factory-overview{grid-template-columns:repeat(2,1fr);margin-bottom:65px}.factory-tools{grid-template-columns:1fr}.pipeline-track{overflow-x:auto}.pipeline-line{min-width:28px}.section-heading{display:block}.section-heading p{line-height:1.5}.hero-copy h1{font-size:45px}footer{gap:20px}}
.factory-brand{display:block;padding:0}.factory-brand-logo{display:block;width:212px;height:100px;object-fit:cover;object-position:center;mix-blend-mode:screen}.factory-mobile-brand{align-items:center}.factory-mobile-brand-logo{display:block;width:158px;height:52px;object-fit:cover;object-position:center;mix-blend-mode:screen}@media(max-width:700px){.factory-mobile-brand-logo{width:142px;height:47px}}
.factory-sidebar-tool .factory-sidebar-tool-running{position:relative;display:grid;place-items:center;width:19px;height:19px;min-width:19px!important;flex:none;margin-left:auto;border:1px solid #ff304f;border-radius:50%;background:#28131b;color:#fff;overflow:visible;font-size:10px;line-height:1;z-index:0}.factory-sidebar-tool .factory-sidebar-tool-running::after{content:"";position:absolute;inset:-4px;border:2px solid transparent;border-top-color:#ff304f;border-right-color:rgba(255,48,79,.35);border-radius:50%;animation:factory-sidebar-run-spin .85s linear infinite;pointer-events:none}.factory-sidebar-tool .factory-sidebar-tool-running b{position:relative;z-index:1;color:#fff;font-size:10px;font-weight:800;line-height:1}.factory-sidebar-tool .factory-sidebar-tool-running+em{display:none}@keyframes factory-sidebar-run-spin{to{transform:rotate(360deg)}}
.factory-sidebar-control .factory-sidebar-tool-running{position:relative;display:grid;place-items:center;width:19px;height:19px;min-width:19px!important;flex:none;margin-left:auto;border:1px solid #ff304f;border-radius:50%;background:#28131b;color:#fff;overflow:visible;font-size:10px;line-height:1;z-index:0}.factory-sidebar-control .factory-sidebar-tool-running::after{content:"";position:absolute;inset:-4px;border:2px solid transparent;border-top-color:#ff304f;border-right-color:rgba(255,48,79,.35);border-radius:50%;animation:factory-sidebar-run-spin .85s linear infinite;pointer-events:none}.factory-sidebar-control .factory-sidebar-tool-running b{position:relative;z-index:1;color:#fff;font-size:10px;font-weight:800;line-height:1}.factory-sidebar-control .factory-sidebar-tool-running+em{display:none}
html,body{overflow-x:clip}

/* Compact Creator Studio dashboard: keep the production tools visible sooner. */
@media (min-width:701px){
  .factory-content{padding-left:4vw;padding-right:4vw}
  .factory-hero{min-height:380px;grid-template-columns:1.1fr .9fr}
  .hero-copy h1{font-size:clamp(38px,4.2vw,62px);margin:12px 0}
  .hero-copy p{max-width:560px;font-size:14px;line-height:1.45}
  .hero-orbit{height:300px}
  .ring-one{width:210px;height:210px}
  .ring-two{width:315px;height:315px}
  .orbit-core{width:82px;height:82px;border-radius:23px;font-size:40px}
  .orbit-chip{padding:7px 10px;font-size:10px}
  .chip-script{top:40px}.chip-short{top:105px}.chip-publish{bottom:35px}
  .factory-overview{margin:-1px 0 48px}
  .factory-overview article{padding:16px 18px;gap:3px}
  .factory-overview span{font-size:10px}
  .factory-overview strong{font-size:26px}
  .factory-overview small{font-size:9px}
  .section-heading{margin-bottom:18px}
  .section-heading h2{font-size:30px}
  .pipeline-section,.tools-section{margin-bottom:55px}
  .tool-card{min-height:230px;padding:18px}
  .tool-card h3{font-size:17px;margin:16px 0 8px}
  .tool-card p{font-size:11px;margin-bottom:12px}
  .tool-tags{margin-bottom:14px}
}

@media (min-width:701px){
  .factory-hero{min-height:285px}
  .hero-copy h1{font-size:clamp(34px,3.5vw,52px);margin:8px 0}
  .hero-copy p{font-size:12px;max-width:500px}
  .hero-orbit{height:220px}
  .ring-one{width:160px;height:160px}
  .ring-two{width:240px;height:240px}
  .orbit-core{width:64px;height:64px;border-radius:18px;font-size:30px}
  .orbit-chip{padding:5px 8px;font-size:9px}
  .chip-script{top:25px}.chip-short{top:75px}.chip-publish{bottom:24px}
  .factory-overview{margin-bottom:32px}
  .factory-overview article{padding:12px 15px}
  .factory-overview strong{font-size:22px}
  .section-heading h2{font-size:26px}
  .control-tool-group{margin-bottom:18px}
  .control-tool-group>header{min-height:28px;padding-bottom:6px;margin-bottom:5px}
  .control-tool-group .control-tool{min-height:72px;padding:10px 12px}
  .control-tool-group .control-tool>i{width:30px;height:30px;flex-basis:30px;margin-right:10px;font-size:16px}
  .control-tool-group .control-tool strong{font-size:11px;margin-bottom:3px}
  .control-tool-group .control-tool small{font-size:9px}
}
/* confacAI logo sizing: preserve the full wordmark in expanded and collapsed sidebars. */
.factory-brand-logo{width:212px!important;height:72px!important;object-fit:contain!important;object-position:left center!important}
.factory-mobile-brand-logo{width:158px!important;height:54px!important;object-fit:contain!important;object-position:left center!important}
@media(max-width:1050px){.factory-brand-logo{width:55px!important;height:58px!important}.factory-brand{overflow:hidden!important}}
@media(max-width:700px){.factory-mobile-brand-logo{width:142px!important;height:48px!important}}

/* Raster confacAI mark: use the cropped icon asset and a crisp text wordmark. */
.factory-brand{display:flex!important;align-items:center;gap:9px!important;padding:0 6px!important}
.factory-brand-logo{width:38px!important;height:38px!important;object-fit:contain!important;object-position:center!important;mix-blend-mode:normal!important;filter:drop-shadow(0 0 12px rgba(255,48,79,.28))}
.factory-brand-wordmark{display:block;color:#f5f6fa;font:700 18px/1 'Space Grotesk',sans-serif;white-space:nowrap;letter-spacing:-.03em}
.factory-brand-wordmark{width:156px!important;height:auto!important;object-fit:contain!important;mix-blend-mode:normal!important}
.factory-brand-wordmark b,.factory-mobile-brand span b{color:#ff304f}
.factory-mobile-brand{display:flex!important;align-items:center;gap:8px!important}
.factory-mobile-brand-logo{width:34px!important;height:34px!important;object-fit:contain!important;mix-blend-mode:normal!important}
.factory-mobile-brand span{font:700 16px/1 'Space Grotesk',sans-serif;color:#f5f6fa;white-space:nowrap}
.factory-mobile-brand-wordmark{width:132px!important;height:auto!important;object-fit:contain!important;mix-blend-mode:normal!important}
@media(max-width:700px){
  .factory-topbar{padding:0 12px!important;gap:12px!important}
  .factory-mobile-brand{min-width:0;flex:1;gap:10px!important;padding-right:12px}
  .factory-mobile-brand-logo{width:34px!important;height:34px!important;flex:none}
  .factory-mobile-brand-wordmark{width:140px!important;max-width:100%;flex:none}
  .factory-top-actions{gap:12px!important;flex:none}
  .factory-top-actions>.factory-credit-float{min-width:94px!important;justify-content:center;white-space:nowrap}
}


/* In the manually collapsed sidebar show only the compact C/AI mark. */
body.factory-sidebar-collapsed .factory-brand{width:38px!important;height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;overflow:hidden!important}
body.factory-sidebar-collapsed .factory-brand-logo{content:url("../../images/confacai-logo-icon.png")!important;width:38px!important;height:38px!important;display:block!important;flex:none!important;object-fit:contain!important}
body.factory-sidebar-collapsed .factory-brand-wordmark{display:none!important;width:0!important;height:0!important;visibility:hidden!important}

/* === Veröffentlichungskalender, 26.08.2026 ===============================
   Planideen, Publisher-Aufträge und Kanalvideos teilen sich ein Raster. Die
   Oberfläche bleibt flach wie ein Arbeitskalender; Details erscheinen erst
   nach einer bewussten Auswahl im Dialog. */
.content-calendar-history {
  /* Eine Breite für alles: Kopfzeile samt Trennlinie, Monatssteuerung,
     Raster und den Bereich darunter. So endet die Linie genau an der
     Kalenderkante. Formel siehe .content-calendar-month. */
  --kalender-breite: clamp(660px, calc((100vh - 150px) / 6 * 7 * 4 / 3), 2400px);
  margin: 20px 0 42px;
  color: #f4f5f8;
}
.content-calendar-history .tool-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  width: var(--kalender-breite);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 16px;
  border-bottom: 1px solid #252a35;
}
.content-calendar-history .tool-history-head h3 { margin: 5px 0 4px; font: 650 25px/1.1 'Space Grotesk', sans-serif; }
.content-calendar-history .tool-history-head p { max-width: 620px; margin: 0; color: #858c9d; font-size: 12.5px; }
.calendar-head-actions { display: flex; align-items: center; gap: 18px; }
.calendar-facts { display: flex; align-items: center; }
.calendar-facts > span { display: grid; grid-template-columns: auto auto; column-gap: 6px; padding: 0 15px; border-right: 1px solid #252a35; }
.calendar-facts > span:first-child { padding-left: 0; }
.calendar-facts i { grid-row: 1 / 3; align-self: center; color: #ff3d5d; font-size: 16px; }
.calendar-facts b { color: #f5f6f9; font-size: 14px; line-height: 1; }
.calendar-facts small { color: #71798a; font-size: 8.5px; }
.content-calendar-months { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Das Raster wird so breit, wie 6 Zeilen aus 7 Zellen im 16:10-Format hoch
   sein dürfen, damit der Monat im eingerasteten Zustand komplett sichtbar
   ist: die 150px sind Topbar, kompakte Monatssteuerung und Wochentagszeile
   plus Luft - mehr klebt auf der Kalenderseite nicht mehr über dem Raster.
   Auf breiten Monitoren deckelt sonst die Seitenbreite; dafür bekommt die
   Kalenderseite unten die volle Panelbreite statt des 1440px-Korsetts.
   Wichtig ist die explizite width: mit einer reinen max-width plus
   margin:auto fiele das Raster im Grid-Wrapper auf seine Minimalbreite
   zusammen, weil auto-Ränder das automatische Strecken abschalten. */
.content-calendar-month { min-width: 0; width: var(--kalender-breite); max-width: 100%; margin: 0 auto; }

/* Volle Panelbreite für die Kalenderseite: im 1440px-Korsett der übrigen
   Werkzeugseiten blieben die 16:10-Zellen deutlich zu klein. Die
   ID-Selektor-Spezifität schlägt die allgemeine workspace-body-Regel in
   ai-contentfactory-pages.css. */
body.factory-page-active #workspace-body[data-tool="creator-content-calendar"] {
  width: 100%;
  max-width: none;
  padding-left: 30px;
  padding-right: 30px;
}

/* Auf der Kalenderseite klebt der Seitenkopf mit der Produktionskarte nicht
   über dem Panel: eingerastet gehört die volle Höhe dem Monat, die Karte
   erreicht man am Seitenanfang. relative statt static, denn die Karte ist
   im Kopf absolut zentriert - ohne positionierten Kopf hinge sie in der
   Panel-Mitte und verschwände hinter dem Kalender. Der ID-Selektor schlägt
   die Sticky-Regel aus ai-contentfactory-control-center.css. */
body.factory-page-active #factory-workspace .workspace-panel:has(#workspace-body[data-tool="creator-content-calendar"]) .workspace-header { position: relative; }
.calendar-weekdays,
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { color: #687084; font-size: 9px; font-weight: 750; text-align: center; text-transform: uppercase; letter-spacing: .12em; }
.calendar-weekdays span { padding: 0 0 5px; }

/* Jede Zelle hat ein ausgewogenes 4:3-Querformat und alle Zellen sind gleich groß: pro
   Tag steht genau ein Video, weitere sind über die Blätterpunkte
   erreichbar. Oben steht die Datumszeile, darunter folgt mit etwas Abstand
   das Vorschaubild. */
.calendar-day { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 3; padding: 7px 7px 8px; border-top: 1px solid #242a35; border-right: 1px solid #242a35; background: #0b0e14; overflow: hidden; }
.calendar-day:nth-child(7n+1) { border-left: 1px solid #242a35; }
.calendar-grid .calendar-day:nth-last-child(-n+7) { border-bottom: 1px solid #242a35; }
.calendar-day.is-empty { background: #090b10; }
.calendar-day.has-events { background: linear-gradient(150deg, rgba(255,48,79,.045), #0b0e14 48%); }
.calendar-date { flex: none; margin-bottom: 5px; font-size: 11.5px; }

.calendar-event { display: block; width: 100%; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #fff; text-align: left; cursor: pointer; }
.calendar-event:hover { background: transparent; }

/* Die Kachel im Videoformat. Ohne echtes Bild ein Farbverlauf mit dem
   Plattformsymbol - das sieht nach Absicht aus, nicht nach fehlendem Bild. */
.calendar-event-tile {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 48, 79, .34);
  border-radius: 8px;
  background: linear-gradient(140deg, #3a1420, #16181f 72%);
  transition: border-color .16s, transform .16s;
}
.calendar-event-tile > i { color: #ff5570; font-size: 22px; }
.calendar-event-tile > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.calendar-event:hover .calendar-event-tile { border-color: #ff304f; transform: translateY(-2px); }
.calendar-event:focus-visible .calendar-event-tile { outline: 2px solid #ff4b68; outline-offset: 2px; }

/* Shorts stehen hochkant - das Format soll man der Kachel ansehen. */
.calendar-event.ist-short .calendar-event-tile { background: linear-gradient(140deg, #2a1636, #16181f 72%); border-color: rgba(160, 92, 255, .34); }
.calendar-event.ist-short .calendar-event-tile > i { color: #b98cff; }
.calendar-event.ist-short:hover .calendar-event-tile { border-color: #a05cff; }

/* Bereits veröffentlicht: echtes Vorschaubild, ruhigerer Rahmen und ein
   Häkchen in der Ecke. */
.calendar-event.veroeffentlicht .calendar-event-tile { border-color: #37613f; background: #0c0e13; }
.calendar-event.veroeffentlicht .calendar-event-tile::after {
  content: "\F5E0";
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(9, 12, 8, .82);
  color: #8fd18a;
  font-family: 'Material Design Icons';
  font-size: 11px;
  z-index: 2;
}

/* Ein Eintrag, für den noch recherchiert werden muss, ist gedämpft. */
.calendar-event.needs_research .calendar-event-tile { border-style: dashed; opacity: .82; }

/* Ohne Vorschaubild kein Bildrahmen.
   Eine Planidee ist noch kein Video und hat deshalb kein Bild. Bis zum
   13.09.2026 bekam sie trotzdem denselben leeren 16:9-Rahmen mit einem
   kleinen Symbol in der Mitte - das sah nicht nach Absicht aus, sondern nach
   einem Bild, das nicht lädt ("wieso werden die Bilder hier nicht geladen?").
   Jetzt steht dort ein kleines Zeichen, und der Titel bekommt den Platz. */
.calendar-event-tile.ohne-bild { background: #12141b; border-color: rgba(255, 48, 79, .2); }
.calendar-event.ist-short .calendar-event-tile.ohne-bild { background: #141320; border-color: rgba(160, 92, 255, .2); }
.calendar-event-tile.ohne-bild > i { position: absolute; top: 6px; left: 7px; font-size: 13px; opacity: .9; }

.calendar-event-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: #e7eaf1;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.calendar-event small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #838a99;
  font-size: 8.5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Im Raster füllt die Kachel die Zelle unter der Datumszeile - mit etwas
   Luft nach oben. Titel und Status liegen als Schriftband auf dem Bild,
   statt die Zelle in die Höhe zu drücken. */
.calendar-day .calendar-event { position: relative; display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; margin-top: 4px; }
.calendar-day .calendar-event-tile { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.calendar-day .calendar-event-tile::before { content: ""; position: absolute; inset: 34% 0 0 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(4,6,10,.92)); pointer-events: none; }
.calendar-day .calendar-event-title { position: absolute; left: 0; right: 0; bottom: 15px; z-index: 2; margin: 0; padding: 0 7px; font-size: 9.5px; -webkit-line-clamp: 1; }
.calendar-day .calendar-event small { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 2; margin: 0; padding: 0 7px; color: #9aa1b0; font-size: 8px; }
.calendar-day .calendar-event.veroeffentlicht .calendar-event-tile::after { top: 4px; bottom: auto; }


/* Mehrere Videos an einem Tag: dezente Blätterpunkte rechts neben dem
   Datum wechseln, welches Video vorn steht. */
.calendar-day-wechsel { position: absolute; top: 8px; right: 8px; z-index: 4; display: flex; align-items: center; border-radius: 8px; background: rgba(5, 7, 11, .72); }
.calendar-day-wechsel button { display: grid; place-items: center; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.calendar-day-wechsel button::before { content: ""; width: 5px; height: 5px; border-radius: 3px; background: #4a5162; transition: background .15s, width .15s; }
.calendar-day-wechsel button:hover::before { background: #aab1c2; }
.calendar-day-wechsel button.aktiv::before { width: 11px; background: #ff5570; }
.calendar-day-wechsel button:focus-visible { outline: 2px solid #ff4b68; outline-offset: 1px; }

@media (max-width: 760px) {
  .content-calendar-months { grid-template-columns: 1fr; }
  .calendar-event-title { -webkit-line-clamp: 1; }
}

/* Die Vorschau sitzt bewusst unter dem Raster. Oben bleibt nur die
   Monatssteuerung; dadurch beginnt der eigentliche Kalender sofort. */
.calendar-lower { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .7fr); gap: 34px; width: var(--kalender-breite); max-width: 100%; margin: 30px auto 0; padding-top: 26px; border-top: 1px solid #252a35; }
.calendar-upcoming { min-width: 0; margin: 0; }
.calendar-upcoming > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.calendar-upcoming > header small { color: #6b7183; font-size: 10.5px; }
.calendar-upcoming-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.calendar-upcoming-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid #232834;
  border-radius: 0;
  background: transparent;
  color: #eef0f5;
  text-align: left;
  cursor: pointer;
  transition: background .16s, padding .16s;
}
.calendar-upcoming-item:hover { padding-left: 10px; background: rgba(255,255,255,.025); }
.calendar-upcoming-item:focus-visible { outline: 2px solid #ff4b68; outline-offset: 2px; }
.calendar-upcoming-item .calendar-event-tile { width: 74px; }
.calendar-upcoming-copy { display: grid; gap: 3px; min-width: 0; }
.calendar-upcoming-copy small { color: #ff5570; font: 700 9px/1 'DM Sans', sans-serif; letter-spacing: .06em; }
.calendar-upcoming-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.calendar-upcoming-copy > span { overflow: hidden; color: #838a99; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-upcoming-leer { margin: 18px 0 0; color: #8b91a1; font-size: 12px; }

/* --- Monatssteuerung ---------------------------------------------------- */
/* Das magnetische Einrasten auf die Trennlinie über der Monatssteuerung
   übernimmt ausschließlich der scrollend-Magnet in ai-contentfactory.js.
   CSS-scroll-snap ist hier bewusst tabu: Chromium rastet damit auch beim
   Seitenaufbau und nach jedem Neuzeichnen des Kalenders ein - die Ansicht
   sprang dann ohne jedes Zutun des Kunden. */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: var(--kalender-breite); max-width: 100%; margin: 0 auto; padding: 8px 0 6px; }
.calendar-monat-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.calendar-monat-kopf > strong { min-width: 170px; color: #f2f4f8; font: 650 16px/1 'Space Grotesk', sans-serif; text-transform: capitalize; }
.calendar-monat-schritt {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #2a2e39;
  border-radius: 9px;
  background: #12151c;
  color: #c6ccd9;
  font-size: 17px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.calendar-monat-schritt:hover { border-color: #ff304f; background: #1c1119; }
.calendar-monat-schritt:focus-visible { outline: 2px solid #ff4b68; outline-offset: 2px; }
.calendar-monat-leer { color: #6b7183; font-size: 10.5px; }
.calendar-today {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #2a2e39;
  border-radius: 9px;
  background: transparent;
  color: #9ca3b2;
  font: 700 10px/1 'DM Sans', sans-serif;
  cursor: pointer;
}
.calendar-today:hover { border-color: #4a5060; color: #fff; }
.calendar-filter { display: flex; align-items: center; padding: 3px; border: 1px solid #252a35; border-radius: 10px; background: #0d1016; }
.calendar-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: #858c9c; font: 700 10px/1 'DM Sans', sans-serif; cursor: pointer; }
.calendar-filter button span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1a1e27; color: #aeb4c1; font-size: 8px; }
.calendar-filter button.aktiv { background: #20242d; color: #fff; }
.calendar-filter button.aktiv span { background: #3a1720; color: #ff8a9c; }
/* Unten derselbe Abstand wie oben: vorher stand die Zeile ohne Luft auf den
   Wochentagen (CFAI-20260922-035). */
.calendar-sync-state { display: flex; align-items: center; gap: 6px; width: var(--kalender-breite); max-width: 100%; margin: 9px auto; color: #697184; font-size: 9px; }
.calendar-sync-state i { color: #50c878; }
/* Der Kalender sagt, warum keine Videobilder da sind. Die Zeile steht an der
   Stelle der Erfolgsmeldung und ist deshalb groesser als diese - sie ist kein
   Randvermerk, sondern der Grund fuer eine leere Ansicht (13.09.2026). */
.calendar-sync-state.ist-warnung,
.calendar-sync-state.ist-hinweis { gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; }
.calendar-sync-state.ist-warnung { border: 1px solid #6d2a3c; background: #23151c; color: #f0d3da; }
.calendar-sync-state.ist-hinweis { border: 1px solid #4a4326; background: #1f1c12; color: #ece2c4; }
.calendar-sync-state.ist-warnung i { color: #ff6b8a; font-size: 16px; }
.calendar-sync-state.ist-hinweis i { color: #e5b955; font-size: 16px; }
.calendar-sync-state.ist-warnung span { flex: 1; min-width: 0; }
.calendar-sync-state .youtube-connect { flex: none; }
@media (max-width: 650px) {
  .calendar-sync-state.ist-warnung { flex-wrap: wrap; }
  .calendar-sync-state.ist-warnung span { flex-basis: 100%; }
}

.calendar-quick-tools { min-width: 0; padding-left: 28px; border-left: 1px solid #252a35; }
.calendar-quick-tools header { margin-bottom: 9px; }
.calendar-quick-tools h4 { margin: 5px 0 0; font: 650 16px/1.2 'Space Grotesk', sans-serif; }
.calendar-quick-tools > button { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #232834; background: transparent; color: #e9ebf0; text-align: left; cursor: pointer; }
.calendar-quick-tools > button > i:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #28121a; color: #ff3d5d; font-size: 17px; }
.calendar-quick-tools > button > i:last-child { color: #5f687b; }
.calendar-quick-tools > button span { display: grid; gap: 2px; min-width: 0; }
.calendar-quick-tools > button b { font-size: 10.5px; }
.calendar-quick-tools > button small { overflow: hidden; color: #737b8d; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-quick-tools > button:hover b,
.calendar-quick-tools > button:hover > i:last-child { color: #ff6b82; }
.calendar-quick-tools > .calendar-best-time { margin: 2px 0 8px; padding: 11px 12px; border: 1px solid rgba(255, 48, 79, .34); border-radius: 11px; background: linear-gradient(135deg, rgba(255, 48, 79, .12), rgba(255, 48, 79, .025)); }
.calendar-quick-tools > .calendar-best-time > i:first-child { background: #ff304f; color: #fff; box-shadow: 0 8px 22px rgba(255, 48, 79, .22); }
.calendar-quick-tools > .calendar-best-time span { gap: 1px; }
.calendar-quick-tools > .calendar-best-time span small { color: #ff6b82; font-size: 7.5px; font-weight: 800; letter-spacing: .11em; }
.calendar-quick-tools > .calendar-best-time span b { color: #fff; font-size: 11px; }
.calendar-quick-tools > .calendar-best-time span em { overflow: hidden; color: #858da0; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.calendar-best-time.is-loading { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; margin: 2px 0 8px; color: #8991a3; }

.calendar-event.geplant .calendar-event-tile { border-color: rgba(58,158,255,.5); background: linear-gradient(140deg,#10243a,#14171e 70%); }
.calendar-event.geplant .calendar-event-tile > i { color: #5db2ff; }
.calendar-event.privat .calendar-event-tile,
.calendar-event.nicht_gelistet .calendar-event-tile { border-color: #454b57; filter: saturate(.72); }
.calendar-event.fehler .calendar-event-tile { border-color: #b74559; background: linear-gradient(140deg,#34131c,#15171d 70%); }

body.calendar-detail-open { overflow: hidden; }
.calendar-detail-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 34px));
  padding: 0;
  border: 1px solid #353b48;
  border-radius: 16px;
  background: #11141a;
  color: #f4f5f8;
  box-shadow: 0 28px 90px rgba(0,0,0,.7), 0 0 45px rgba(255,48,79,.08);
}
.calendar-detail-dialog::backdrop { background: rgba(3,5,9,.84); backdrop-filter: blur(8px); }
.calendar-detail-dialog article { display: grid; min-height: 0; }
.calendar-detail-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; border-bottom: 1px solid #292e39; }
.calendar-detail-dialog header h3 { max-width: 650px; margin: 5px 0 0; font: 650 22px/1.18 'Space Grotesk', sans-serif; }
.calendar-detail-dialog header button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #343a47; border-radius: 9px; background: #171b23; color: #aab0bc; cursor: pointer; }
.calendar-detail-main { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); gap: 26px; padding: 26px; }
.calendar-detail-main figure { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; margin: 0; border: 1px solid #303642; border-radius: 12px; background: radial-gradient(circle at 35% 35%,#451522,#161920 68%); }
.calendar-detail-main figure img { width: 100%; height: 100%; object-fit: cover; }
.calendar-detail-main figure > span i { color: #ff3d5d; font-size: 42px; }
.calendar-detail-copy { display: flex; min-width: 0; flex-direction: column; }
.calendar-detail-status { display: inline-flex; align-items: center; align-self: flex-start; gap: 3px; padding: 5px 9px; border-radius: 12px; background: #20141a; color: #ff7389; font-size: 9px; font-weight: 800; }
.calendar-detail-status.veroeffentlicht { background: #102218; color: #75d895; }
.calendar-detail-status.geplant { background: #10243a; color: #6ab9ff; }
.calendar-detail-copy dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 20px 0 0; }
.calendar-detail-copy dl div { min-width: 0; padding-top: 12px; border-top: 1px solid #2a2f3a; }
.calendar-detail-copy dt { color: #737b8d; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.calendar-detail-copy dd { margin: 5px 0 0; color: #e4e7ed; font-size: 11px; line-height: 1.4; }
.calendar-detail-copy > p { display: -webkit-box; overflow: hidden; margin: 18px 0 0; color: #949baa; font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.calendar-detail-copy .calendar-detail-warning { display: flex; gap: 7px; color: #f0b04c; }
.calendar-detail-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 26px 22px; border-top: 1px solid #292e39; }
.calendar-detail-secondary,
.calendar-detail-primary { display: flex; align-items: center; gap: 8px; }
.calendar-detail-dialog footer a,
.calendar-detail-dialog footer button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border: 1px solid #343a47; border-radius: 9px; background: #171b23; color: #d6dae2; text-decoration: none; font: 700 9.5px/1 'DM Sans', sans-serif; cursor: pointer; }
.calendar-detail-primary button { border-color: #ff3657 !important; background: #ff2f50 !important; color: #fff !important; }
.calendar-detail-dialog footer a:hover,
.calendar-detail-dialog footer button:hover { border-color: #ff4b68; color: #fff; }
/* Entfernen ist nicht umkehrbar - der Knopf sieht deshalb anders aus als die
   uebrigen und wechselt bei der Nachfrage sichtbar die Farbe. */
.calendar-detail-dialog footer button.calendar-detail-danger { border-color: #4a2530; color: #ff8296; }
.calendar-detail-dialog footer button.calendar-detail-danger:hover { border-color: #ff4b68; background: #26161c; color: #ffb7c3; }
.calendar-detail-dialog footer button.is-confirming { border-color: #ff3657; background: #ff2f50; color: #fff; }
.calendar-detail-feedback { margin: 0; padding: 0 26px 4px; color: #949baa; font-size: 10.5px; line-height: 1.5; }
.calendar-detail-feedback:empty { display: none; }
.calendar-detail-feedback.is-error { color: #ff8296; }
.calendar-detail-copy .calendar-detail-hinweis { display: flex; gap: 7px; margin: 14px 0 0; color: #8f97a8; font-size: 10.5px; line-height: 1.5; }
.calendar-detail-copy .calendar-detail-hinweis i { color: #ff6b82; }

@media (max-width: 980px) {
  .content-calendar-history .tool-history-head { align-items: flex-start; flex-direction: column; }
  .calendar-head-actions { width: 100%; justify-content: space-between; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .calendar-lower { grid-template-columns: 1fr; }
  .calendar-quick-tools { padding: 22px 0 0; border-top: 1px solid #252a35; border-left: 0; }
}

@media (max-width: 760px) {
  .content-calendar-history { margin: 22px 0 32px; }
  .calendar-head-actions { align-items: flex-start; flex-direction: column; }
  .calendar-facts > span { padding: 0 10px; }
  /* Ein Monatskalender muss auf dem Telefon vollständig sichtbar bleiben.
     Die vorherige Mindestbreite von 760px schnitt vier Wochentage ab und
     ließ die Video-Karten wie kaputte, zu kleine Fragmente wirken. */
  .content-calendar-month { width: 100%; overflow: visible; }
  .calendar-weekdays,
  .calendar-grid { min-width: 0; }
  .calendar-weekdays { font-size: 7px; letter-spacing: .04em; }
  .calendar-weekdays span { padding-bottom: 3px; }
  .calendar-day { aspect-ratio: 4 / 3; min-height: 0; padding: 3px; }
  .calendar-date { position: relative; z-index: 3; margin: 0; font-size: 9px; line-height: 1; }
  .calendar-day .calendar-event { margin-top: 2px; }
  .calendar-day .calendar-event-tile { border-radius: 5px; }
  .calendar-day .calendar-event-title,
  .calendar-day .calendar-event small { display: none; }
  .calendar-day .calendar-event.veroeffentlicht .calendar-event-tile::after {
    top: 2px;
    right: 2px;
    width: 11px;
    height: 11px;
    font-size: 7px;
  }
  .calendar-day-wechsel { top: 2px; right: 2px; transform: scale(.72); transform-origin: top right; }
  .calendar-upcoming-list { grid-template-columns: 1fr; }
  .calendar-filter { max-width: 100%; overflow-x: auto; }
  .calendar-detail-main { grid-template-columns: 1fr; }
  .calendar-detail-dialog footer { align-items: stretch; flex-direction: column; }
  .calendar-detail-secondary,
  .calendar-detail-primary { flex-wrap: wrap; }
}

/* === Mobile Nachbesserungen Kalender, 28.08.2026 =========================
   Nur additive Regeln fuer sehr schmale Telefone (<=480px); die Bloecke bei
   980px und 760px oben bleiben unveraendert. */
@media (max-width: 480px) {
  /* Die Faktenzeile (drei Kennzahlen mit Trennstrichen) lief als starre
     Flexzeile ueber den Rand. */
  .calendar-facts { flex-wrap: wrap; row-gap: 8px; }
  .calendar-facts > span { padding: 0 8px; }

  .content-calendar-history .tool-history-head h3 { font-size: 20px; }
  .calendar-monat-kopf > strong { min-width: 0; font-size: 14px; }

  /* Detaildialog: schmaler Rand, kompaktere Innenabstaende, Angaben
     untereinander statt in zwei Spalten. */
  .calendar-detail-dialog { width: calc(100vw - 16px); }
  .calendar-detail-dialog header { padding: 16px 16px 12px; }
  .calendar-detail-dialog header h3 { font-size: 18px; }
  .calendar-detail-main { gap: 16px; padding: 16px; }
  .calendar-detail-copy dl { grid-template-columns: 1fr; gap: 10px; }
  .calendar-detail-dialog footer { padding: 14px 16px 16px; }
}

/* === Mobiler Kalender, 28.08.2026 ========================================
   Die Kalenderbreite wird aus der Fensterhoehe berechnet (min. 660px) und
   lief auf Telefonen als abgeschnittener 1200px-Block aus dem Panel. Unter
   760px gilt die Panelbreite; das Raster behaelt seine 760px-Mindestbreite
   und wird im Monat horizontal gewischt (overflow-x:auto steht oben im
   760px-Block). */
@media (max-width: 760px) {
  .content-calendar-history { --kalender-breite: 100%; }
}

/* Text to Speech: Hinweis auf die Stimmprobe aus dem Creator-Profil (11.09.2026). */
.speech-profile-voice-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border: 1px solid #262b3a; border-radius: 10px; background: #12151d; }
.speech-profile-voice-box audio { flex: 1 1 240px; max-width: 420px; height: 36px; }
.speech-profile-voice-box small { color: #969daf; font-size: 12px; }
.speech-profile-voice-box a { color: #ff5470; font-size: 12px; font-weight: 600; text-decoration: none; }
.speech-profile-voice-box a:hover { text-decoration: underline; }