/* =========================================================
   EINSTELLUNGEN
   Datei: content-einstellungen.css
========================================================= */

/* =========================================================
   Card
========================================================= */
          .settings-card{
            position: relative; /* für Toast */
            padding: 14px;

            background: var(--color-box-bg);
            border: 1px solid var(--color-box-border);
            border-radius: var(--radius-sm);
            backdrop-filter: blur(2px);
          }

          .settings-card:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }


/* =========================================================
   Rows / Text
========================================================= */
          .setting-row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;

            padding: 12px 0;
            border-top: 1px solid rgba(255,255,255,0.12);

            transition: background 160ms ease, border-color 160ms ease;
            border-radius: calc(var(--radius-sm) - 2px);
          }

          .setting-row:hover{
            background: rgba(255,255,255,0.06);
          }

          .setting-row:first-child{
            border-top: 0;
            padding-top: 0;
          }

          .setting-row:last-child{
            padding-bottom: 0;
          }

          .setting-text{
            min-width: 0;
          }

          .setting-text strong{
            display: block;

            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-sub);
            line-height: var(--line-height-headline-sm);
            color: var(--color-font-primary);
          }

          .setting-text small{
            display: block;
            margin-top: 4px;
            max-width: 70ch;

            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.92);
            line-height: calc(var(--line-height-text) * 0.95);
            color: rgba(255,255,255,0.90);
          }


/* =========================================================
   Controls (Select)
   - Pfeil nur bei Select über .select-wrap
   - KEIN ::after auf .setting-control (sonst Pfeil beim Switch)
========================================================= */
          .setting-control{
            position: relative;
            flex: 0 0 auto;

            display: inline-flex;
            align-items: center;
            justify-content: flex-end;

            min-height: 44px; /* sauberes Vertikal-Align */
          }

          .setting-control::after{
            content: none !important;
          }

          /* UI-Controls bewusst fix lassen */
          .settings-card select{
            font-size: 0.95rem; /* fix */
            line-height: 1.2;   /* fix */
            font-family: var(--font-style-ui);
          }

          .select-wrap{
            position: relative;
            display: inline-block;
            width: min(260px, 100%);
          }

          .select-wrap select{
            width: 100%;
            min-width: 200px;

            padding: 0.65rem 2.2rem 0.65rem 0.9rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-weight: 900;
            letter-spacing: 0.03em;
            text-transform: uppercase;

            color: var(--color-font-primary);
            background: var(--color-content-box-bg);
            border: 1px solid var(--color-content-box-border);

            backdrop-filter: blur(2px);
            appearance: none;
            -webkit-appearance: none;
          }

          .select-wrap::after{
            content: "▾";
            position: absolute;
            right: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            opacity: 0.9;
            font-weight: 900;
            color: var(--color-font-primary);
          }

          .select-wrap select:hover{
            border-color: var(--color-content-box-border-strong);
            background: var(--color-content-box-bg-strong);
          }

          .select-wrap select:focus-visible{
            outline: 2px solid rgba(100,160,255,0.95);
            outline-offset: 3px;
          }


/* =========================================================
   Switch (role="switch")
   - Knob bleibt IM Track
   - UMGEDREHTE LOGIK: AN=links, AUS=rechts
========================================================= */
          .ui-switch{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;

            line-height: 0;
          }

          .ui-switch:focus-visible{
            outline: 2px solid rgba(100,160,255,0.95);
            outline-offset: 4px;
            border-radius: 10px;
          }

          .ui-switch-track{
            width: 46px;
            height: 22px;
            border-radius: 7px;

            position: relative;
            display: block;

            overflow: hidden;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);

            transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
          }

          .ui-switch-knob{
            width: 18px;
            height: 18px;
            border-radius: 7px;

            position: absolute;
            top: 50%;
            left: 2px;

            transform: translateY(-50%) translateX(24px); /* AUS = rechts */
            transition: transform 160ms ease;

            background: rgba(255,255,255,0.95);
            border: 1px solid rgba(255,255,255,0.20);
          }

          .ui-switch[aria-checked="true"] .ui-switch-knob{
            transform: translateY(-50%) translateX(0); /* AN = links */
          }

          .ui-switch[aria-checked="true"] .ui-switch-track{
            background: linear-gradient(
              135deg,
              rgba(0, 200, 120, 0.9),
              rgba(0, 160, 90, 0.9)
            );
            border-color: rgba(0, 255, 160, 0.6);
            box-shadow:
              0 0 0 1px rgba(0,255,150,0.25),
              0 4px 12px rgba(0, 200, 120, 0.35);
          }


/* =========================================================
   UI Choice (Radio/Check im Box-Look)
========================================================= */
          .ui-choice{
            display: inline-flex;
            gap: 10px;
            align-items: center;
            border: 0;
            padding: 0;
            margin: 0;
          }

          .ui-check{
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;

            padding: 0.65rem 0.9rem;
            border-radius: var(--radius-sm);

            background: var(--color-content-box-bg);
            border: 1px solid var(--color-content-box-border);
            backdrop-filter: blur(2px);

            font-family: var(--font-style-text);
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: none;
            color: var(--color-font-primary);

            cursor: pointer;
            user-select: none;
          }

          .ui-check:hover{
            background: var(--color-content-box-bg-strong);
            border-color: var(--color-content-box-border-strong);
          }

          .ui-check input{
            position: absolute;
            opacity: 0;
            pointer-events: none;
          }

          .ui-check-box{
            width: 18px;
            height: 18px;
            border-radius: 6px;

            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(0,0,0,0.25);

            display: grid;
            place-items: center;
          }

          .ui-check input:checked + .ui-check-box{
            background: rgba(100,160,255,0.35);
            border-color: rgba(100,160,255,0.75);
            box-shadow: 0 0 0 1px rgba(100,160,255,0.25);
          }

          .ui-check input:checked + .ui-check-box::after{
            content: "✓";
            font-size: 14px;
            line-height: 1;
            color: rgba(255,255,255,0.95);
          }

          .ui-check:focus-within{
            outline: none;
          }


/* =========================================================
   Reset Button
========================================================= */
          .btn-reset{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0.65rem 1rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-size: var(--font-size-action-buttons-footer);
            font-weight: 900;
            letter-spacing: 0.05em;
            text-transform: uppercase;

            color: var(--color-font-primary);
            background: rgba(255, 0, 76, 0.12);
            border: 1px solid rgba(255,255,255,0.18);

            cursor: pointer;
            backdrop-filter: blur(2px);
          }

          .btn-reset:hover{
            background: rgba(255, 0, 76, 0.18);
            border-color: rgba(255,255,255,0.28);
          }

          .btn-reset:focus-visible{
            outline: 2px solid var(--color-link);
            outline-offset: 3px;
          }

          .btn-reset:disabled{
            opacity: 0.5;
            cursor: not-allowed;
          }

/* =========================================================
   SETTINGS – Info Hinweis
========================================================= */
          .settings-note{
            margin-top: calc(var(--menu-gap) * 1.25);
            padding: calc(var(--menu-gap) * 0.9);

            border-radius: var(--radius-sm);
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(0,0,0,0.18);
          }

          .settings-note strong{
            display: block;
            margin-bottom: 0.5rem;
            font-family: var(--font-style-ui);
            font-size: var(--font-size-headline-minor);
            letter-spacing: 0.05em;
            text-transform: uppercase;
          }

          .settings-note p{
            margin: 0;
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            opacity: 0.85;
          }


/* =========================================================
   Screenreader helper
========================================================= */
          .sr-only{
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
          }


/* =========================================================
   SETTINGS – Statuszeile unter Breadcrumb
========================================================= */
          .settings-status{
            min-height: 28px;
            margin-top: 6px;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.95);
            line-height: 1.4;

            color: rgba(255,255,255,0.85);

            opacity: 0;
            transition: opacity 180ms ease;
          }

          .settings-status.is-visible{
            opacity: 1;
          }


/* =========================================================
   EINSTELLUNGEN – UX Upgrades (Add-on)
   (nur wenn du Toast wirklich nutzt)
========================================================= */
          .settings-toast{
            position: sticky;
            top: 0;
            margin: 0 0 12px 0;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            padding: 10px 12px;
            border-radius: var(--radius-sm);

            background: rgba(0,0,0,0.35);
            border: 1px solid rgba(255,255,255,0.18);
            backdrop-filter: blur(6px);

            opacity: 0;
            transform: translateY(-6px);
            pointer-events: none;

            transition: opacity 180ms ease, transform 180ms ease;
          }

          .settings-toast.is-visible{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
          }

          .settings-toast strong{
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.95);
            letter-spacing: 0.02em;
          }

          .settings-toast small{
            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.9);
            opacity: 0.9;
          }

          .settings-toast button{
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            color: var(--color-font-primary);

            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
          }

          .settings-toast button:hover{
            background: rgba(255,255,255,0.12);
          }


/* =========================================================
   Mobile
========================================================= */
@media (max-width: 760px){

          .settings-actions{
            gap: 10px;
          }

          .settings-back{
            width: 100%;
          }

          .setting-row{
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
          }

          .setting-control{
            width: 100%;
            justify-content: flex-start;
          }

          .select-wrap{
            width: 100%;
          }

          .select-wrap select{
            width: 100%;
            min-width: 0;
          }

          .select-wrap::after{
            right: 1rem;
          }
}