/* Social-Media-Paket: nutzt die Theme-Variablen (Dunkel/Hell/Retro). Vorschau links, Bedienung rechts, passt in ein Fenster. */
.social{max-width:1080px;margin:0 auto;padding:20px 24px 32px}
.social-head{margin-bottom:16px}
.social-head h1{font-size:28px;margin:0 0 .2em}
.social-event{margin:0;color:var(--muted);overflow-wrap:anywhere}
.social-empty{padding:16px;background:var(--surface);border:1px solid var(--divider)}
.social-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.social-preview{display:flex;justify-content:center}
.social-stage-wrap{position:relative;width:min(100%,max(260px,calc((100dvh - var(--header-height) - var(--footer-height) - 150px) * var(--ratio))))}
.social-stage{position:relative;width:100%;overflow:hidden;background:var(--bg);border:1px solid var(--divider);user-select:none;-webkit-user-select:none}
.social-stage.has-photo{cursor:grab;touch-action:none}
.social-stage.dragging{cursor:grabbing}
.social-stage-inner{position:absolute;left:0;top:0;transform-origin:0 0}
.social-panel{display:flex;flex-direction:column;gap:16px}
.social-seg{border:0;margin:0;padding:0;min-width:0}
.social-seg legend{padding:0;margin-bottom:6px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.social-seg>div{display:flex}
.social-seg label{flex:1;display:block;margin-left:-1px}
.social-seg label:first-child{margin-left:0}
.social-seg span{display:block;padding:8px 10px;text-align:center;border:1px solid var(--steel);cursor:pointer;font-weight:500}
.social-seg input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.social-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.social-drop{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;background:var(--surface);border:1px dashed var(--steel);cursor:pointer}
.social-drop:hover,.social-drop.is-over{border-color:var(--accent)}
.social-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.social-drop .button{pointer-events:none}
.social-drop small{color:var(--muted);line-height:1.4}
.social-tools,.social-zoombox{display:flex;flex-direction:column;gap:10px}
.social[data-photo="0"] .social-tools,.social[data-photo="0"] .social-zoombox{display:none}
.social-zoom{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.social-zoom input{flex:1;padding:0;border:0;background:none;accent-color:var(--accent)}
.social-hint{margin:0;color:var(--muted);font-size:12px}
.social-buttons{display:flex;flex-wrap:wrap;gap:8px}
.social-status{min-height:20px;margin:0;color:var(--muted);font-size:13px}
.social[data-state=error] .social-status{color:var(--text);border-left:3px solid #f72585;padding-left:10px}
@media(hover:none){.social-pointer{display:none}}
@media(max-width:760px){
  .social{padding:12px 16px 40px}
  .social-head{margin-bottom:10px}
  .social-head h1{font-size:22px}
  .social-event{font-size:13px;line-height:1.4}
  .social-stage-wrap{width:min(100%,max(220px,calc((100dvh - var(--header-height) - var(--footer-height) - 190px) * var(--ratio))))}
  .social-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .social-panel{display:contents}
  .social-preview{order:0}
  .social-zoombox{order:1;margin-top:-10px;gap:6px}
  .social-panel>:not(.social-zoombox){order:2}
}