html {
  
    --sfd-masterhead: 94px; 
    --sfd-container-max-width: 100vw;
    
    --sfd-margin-2x: 6px;
    --sfd-margin-4x: 12px; 
    --sfd-margin-8x: 24px;
    --sfd-margin-16x: 48px;
    --sfd-watch-flexy-width-ratio: 1;
    --sfd-watch-flexy-height-ratio: 0.5625;
}

.sfd-container {
    max-width: var(--sfd-container-max-width);
    margin: 0 var(--sfd-margin-8x);
}


.sfd-container-mobile {
    max-width: var(--sfd-container-max-width);
    margin: var(--sfd-margin-4x);
}

.ql-editor {
    font-size: 1rem;
    background-color: var(--sf-input-bg);
}

.ql-editor ol,
.ql-editor ul { 
    padding-left: 0 !important;
}

#progress-dynamic-container {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
}
#progress-bar-dynamic-container {
  width: 0%;
  height: 100%;
  background: #3498db;
}


#dynamic-content {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
#dynamic-content.hidden {
  opacity: 0;
}


/* 1) Container unten rechts positionieren und Inhalt ans Ende ausrichten */
#connection-toast-container {
    position: fixed;
    bottom: 1rem;        /* statt top */
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;  /* stapelt Toasts am rechten Rand */
    pointer-events: none;    /* Klicks durchlassen, falls nötig */
    max-width: 100%;         /* sorgt dafür, dass sich die Toasts selbst begrenzen */
}

/* 2) Basis für jedes Toast: inline-block, max-width begrenzen */
.connection-toast {
    display: inline-block;   /* nicht full-width */
    min-width: auto;
    max-width: 320px;        /* typische Toast-Breite */
    pointer-events: auto;     /* erlaubt, den Toast selbst zu interagieren */
}

/* 3) Animation: verschieben von unten statt oben (optional) */
.connection-toast {
    transform: translateY(10px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.connection-toast.show {
    transform: translateY(0);
    opacity: 1;
}

#cookieBanner {
    border-radius: 0;
    z-index:1;
}