/* Sanela: eine Oberfläche fürs Handy. Himmel aus den Farben des Logos, Glas darüber, Outfit als Schrift.
   Farben nur hier im :root, hell und dunkel über light-dark(); data-thema am html legt eine Darstellung fest. */

@layer basis, bauteile, seiten;

@font-face {
  font-family: "Outfit";
  src: url("schrift/outfit-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@layer basis {
  :root {
    color-scheme: light dark;
    &[data-thema="hell"] { color-scheme: light; }
    &[data-thema="dunkel"] { color-scheme: dark; }

    /* Die Farben des Logos */
    --mint: #33dab8;
    --tuerkis: #04bca7;
    --blau: #007db5;
    --orange: #fea737;
    --petrol: #015f66;

    /* Himmel: fast weiß mit Wolken in Mint und Blau; dunkel tiefes Petrol */
    --grund: light-dark(#eef7f8, #0d1416);
    --wolke-1: light-dark(#ffffff, color-mix(in oklab, var(--tuerkis) 10%, #101a1c));
    --wolke-2: light-dark(color-mix(in oklab, var(--mint) 28%, #ffffff), color-mix(in oklab, var(--blau) 26%, #0d1416));
    --wolke-3: light-dark(color-mix(in oklab, var(--blau) 18%, #ffffff), color-mix(in oklab, var(--petrol) 55%, #0d1416));
    --himmel:
      radial-gradient(40rem 30rem at 0% -10%, var(--wolke-1) 0%, transparent 60%),
      radial-gradient(36rem 28rem at 110% 0%, var(--wolke-2) 0%, transparent 62%),
      radial-gradient(32rem 30rem at -10% 100%, var(--wolke-2) 0%, transparent 60%),
      radial-gradient(40rem 34rem at 100% 110%, var(--wolke-3) 0%, transparent 64%),
      linear-gradient(160deg, var(--grund) 30%, color-mix(in oklab, var(--wolke-3) 70%, var(--grund)));

    /* Flächen, Glas, Linien */
    --karte-grund: light-dark(rgb(255 255 255 / 72%), rgb(24 34 37 / 78%));
    --glas: light-dark(rgb(255 255 255 / 62%), rgb(22 32 35 / 70%));
    --glas-dunkel: light-dark(rgb(10 30 33 / 90%), rgb(36 50 54 / 94%));
    --rand: light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 8%));
    --kante: light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 6%));
    --linie: light-dark(rgb(1 95 102 / 12%), rgb(255 255 255 / 12%));
    --linie-stark: light-dark(rgb(1 95 102 / 26%), rgb(255 255 255 / 26%));
    --tinte-flaeche: light-dark(rgb(1 95 102 / 6%), rgb(255 255 255 / 8%));
    --feld: light-dark(rgb(255 255 255 / 80%), rgb(255 255 255 / 6%));

    /* Text */
    --text: light-dark(#0e2326, #f3f8f8);
    --text-2: light-dark(#1f3c40, #dbe6e7);
    --text-leise: light-dark(#4f6b6f, #9fb5b8);
    --auf-dunkel: #f3f8f8;

    /* Akzent: Petrol im Hellen, Mint im Dunklen; der Verlauf bleibt der des Logos */
    --akzent: light-dark(var(--petrol), var(--mint));
    --akzent-text: light-dark(#ffffff, #07262a);
    --verlauf: linear-gradient(135deg, var(--mint), var(--tuerkis) 45%, var(--blau));
    --verlauf-weich: linear-gradient(135deg, color-mix(in oklab, var(--mint) 35%, transparent), color-mix(in oklab, var(--blau) 25%, transparent));
    --leuchten: 0 10px 28px -10px color-mix(in oklab, var(--blau) 70%, transparent);
    --leuchten-stark: 0 18px 44px -12px color-mix(in oklab, var(--blau) 75%, transparent);
    --warm: var(--orange);
    --warm-schein: color-mix(in oklab, var(--orange) 45%, transparent);

    --schatten-1: 0 1px 2px light-dark(rgb(1 40 44 / 5%), rgb(0 0 0 / 35%)), 0 14px 36px -14px light-dark(rgb(1 60 70 / 22%), rgb(0 0 0 / 60%));
    --schatten-2: 0 2px 6px light-dark(rgb(1 40 44 / 7%), rgb(0 0 0 / 45%)), 0 30px 70px -22px light-dark(rgb(1 60 70 / 35%), rgb(0 0 0 / 75%));

    --schrift: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --gr-12: 0.75rem;
    --gr-13: 0.8125rem;
    --gr-14: 0.875rem;
    --gr-15: 0.9375rem;
    --gr-16: 1rem;
    --gr-18: 1.125rem;
    --gr-20: 1.25rem;
    --gr-28: 1.75rem;
    --gr-34: 2.125rem;
    --gr-44: 2.75rem;

    --a2: 0.5rem;
    --a3: 0.75rem;
    --a4: 1rem;
    --a5: 1.5rem;
    --a6: 2rem;
    --rund-s: 12px;
    --rund: 18px;
    --rund-l: 26px;
    --pille: 999px;
    --fuss: 4.4rem;

    --dauer-kurz: 160ms;
    --dauer: 280ms;
    --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  *, ::before, ::after { box-sizing: border-box; }
  [hidden] { display: none !important; }

  html {
    font: 400 var(--gr-16) / 1.5 var(--schrift);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    &::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: var(--himmel);
    }
  }

  h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; letter-spacing: -0.02em; }
  h1 { font-size: var(--gr-34); font-weight: 650; }
  h2 { font-size: var(--gr-18); font-weight: 600; }
  h3 { font-size: var(--gr-16); font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; text-decoration-color: var(--linie-stark); text-underline-offset: 0.2em; }
  button, input, select { font: inherit; color: inherit; }
  strong { font-weight: 600; }
  .leise { font-size: var(--gr-14); color: var(--text-leise); }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .icon {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.3em;
  }
  .icon.akzent { color: var(--akzent); }

  :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

  .glas {
    background: var(--glas);
    border: 1px solid var(--rand);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
  }

  .karte {
    display: grid;
    gap: var(--a3);
    padding: var(--a4) var(--a4);
    background: var(--karte-grund);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
  }

  @keyframes herein { from { opacity: 0; translate: 0 0.8rem; } }
  @keyframes schweben { from { translate: 0 0; } to { translate: 0 -0.5rem; } }
  @keyframes drehen { to { rotate: 360deg; } }
  @keyframes atmen { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  }
}

@layer bauteile {
  /* Knöpfe */
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    font-size: var(--gr-15);
    color: var(--text);
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: var(--pille);
    box-shadow: inset 0 1px 0 var(--kante), 0 1px 2px light-dark(rgb(1 40 44 / 8%), rgb(0 0 0 / 40%));
    cursor: pointer;
    transition: transform var(--dauer-kurz), box-shadow var(--dauer-kurz), background var(--dauer-kurz);
    -webkit-tap-highlight-color: transparent;
    &:active { transform: scale(0.96); }
    & .icon { width: 1.2rem; height: 1.2rem; }
  }
  .knopf.haupt { color: #fff; background: var(--verlauf); border-color: transparent; box-shadow: var(--leuchten); }
  .knopf.zweit { color: var(--akzent); border-color: color-mix(in oklab, var(--akzent) 40%, transparent); background: color-mix(in oklab, var(--akzent) 8%, transparent); box-shadow: none; }
  .knopf.gross { width: 100%; padding: 0.95rem 1.25rem; font-size: var(--gr-16); }
  .knopf.rund { width: 2.9rem; height: 2.9rem; padding: 0; }
  .knopf.pille { justify-self: start; padding-block: 0.45rem; font-size: var(--gr-14); color: var(--text-2); }
  .knopf.pille.aktiv { color: var(--auf-dunkel); background: var(--glas-dunkel); border-color: transparent; }

  /* Chips: Zustand oben rechts */
  .chips { display: flex; flex-direction: column; align-items: end; gap: 0.35rem; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    font-size: var(--gr-13);
    font-weight: 500;
    color: var(--text-2);
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: var(--pille);
    white-space: nowrap;
    & .icon { width: 1rem; height: 1rem; color: var(--text-leise); }
    & .trenner { color: var(--text-leise); }
  }
  .punkt {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--linie-stark);
    transition: background var(--dauer);
  }
  body.verbunden .punkt { background: var(--mint); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint) 30%, transparent); }

  /* Eingaben */
  input[type="text"], select {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 0.95rem;
    font-size: var(--gr-16);
    color: var(--text);
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: var(--rund-s);
    box-shadow: inset 0 1px 2px light-dark(rgb(1 40 44 / 6%), rgb(0 0 0 / 35%));
    &:focus { outline: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--akzent) 25%, transparent); }
  }
  select {
    appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6b6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.1rem;
  }
  label { font-weight: 600; }

  /* Regler für die Lautstärke: der gefüllte Teil im Verlauf, der Knopf aus Glas */
  input[type="range"] {
    --p: 60%;
    flex: 1;
    min-width: 0;
    height: 2.2rem;
    margin: 0;
    appearance: none;
    background: none;
    cursor: pointer;
    &::-webkit-slider-runnable-track {
      height: 0.55rem;
      border-radius: var(--pille);
      background: linear-gradient(90deg, var(--mint), var(--blau) var(--p), var(--linie) var(--p));
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: 1.7rem;
      height: 1.7rem;
      margin-top: -0.575rem;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--blau);
      box-shadow: 0 2px 8px rgb(0 125 181 / 40%);
    }
    &::-moz-range-track { height: 0.55rem; border-radius: var(--pille); background: var(--linie); }
    &::-moz-range-progress { height: 0.55rem; border-radius: var(--pille); background: linear-gradient(90deg, var(--mint), var(--blau)); }
    &::-moz-range-thumb { width: 1.7rem; height: 1.7rem; border: 3px solid #fff; border-radius: 50%; background: var(--blau); box-shadow: 0 2px 8px rgb(0 125 181 / 40%); }
  }
  body.stumm input[type="range"]::-webkit-slider-runnable-track { background: var(--linie); }
  body.stumm input[type="range"]::-webkit-slider-thumb { background: var(--text-leise); box-shadow: none; }

  /* Schalter */
  .schalter {
    display: flex;
    align-items: center;
    gap: var(--a3);
    cursor: pointer;
    & .schalter-text { display: grid; flex: 1; gap: 0.15rem; }
    & small { font-weight: 400; font-size: var(--gr-14); color: var(--text-leise); }
    & input {
      flex: none;
      width: 3.1rem;
      height: 1.85rem;
      margin: 0;
      appearance: none;
      border-radius: var(--pille);
      background: var(--linie-stark);
      position: relative;
      cursor: pointer;
      transition: background var(--dauer);
      &::after {
        content: "";
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        width: 1.45rem;
        height: 1.45rem;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
        transition: left var(--dauer) var(--kurve);
      }
      &:checked { background: var(--verlauf); }
      &:checked::after { left: 1.45rem; }
    }
  }

  /* Karten mit Kopf */
  .karte-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    & h2 { flex: 1; }
    & .zahl { font-size: var(--gr-28); font-weight: 650; letter-spacing: -0.03em; color: var(--akzent); line-height: 1; }
    & .mehr { display: inline-flex; align-items: center; gap: 0.1rem; text-decoration: none; }
  }

  /* Listen: Szenen und Einträge */
  .liste { display: grid; gap: var(--a3); margin: 0; padding: 0; list-style: none; }
  .liste > li {
    display: flex;
    align-items: center;
    gap: var(--a3);
    padding: var(--a3) var(--a4) var(--a3) var(--a3);
    background: var(--karte-grund);
    border: 1px solid var(--rand);
    border-radius: var(--rund);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
    animation: herein var(--dauer) var(--kurve) backwards;
    cursor: pointer;
    transition: transform var(--dauer-kurz);
    &:active { transform: scale(0.985); }
    & .text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
    & .text p { font-size: var(--gr-14); color: var(--text-leise); }
    & .haken { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: var(--linie-stark); border: 1.5px solid var(--linie); transition: all var(--dauer); }
    & .haken .icon { width: 1rem; height: 1rem; }
    &.aktiv { border-color: color-mix(in oklab, var(--tuerkis) 55%, transparent); box-shadow: inset 0 1px 0 var(--kante), var(--leuchten); }
    &.aktiv .haken { color: #fff; background: var(--verlauf); border-color: transparent; }
  }
  .kachel {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    color: var(--akzent);
    background: var(--verlauf-weich);
    border-radius: 14px;
    & .icon { width: 1.4rem; height: 1.4rem; }
  }
  .aktiv > .kachel { color: #fff; background: var(--verlauf); box-shadow: var(--leuchten); }

  /* Szenen als Band zum Wischen */
  .szenen-band {
    display: flex;
    gap: var(--a2);
    margin: 0 calc(-1 * var(--a4));
    padding: 0.25rem var(--a4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    & button {
      display: grid;
      justify-items: center;
      gap: 0.4rem;
      flex: none;
      min-width: 5.4rem;
      padding: 0.75rem 0.6rem 0.6rem;
      font-size: var(--gr-13);
      font-weight: 500;
      color: var(--text-2);
      background: var(--feld);
      border: 1px solid var(--rand);
      border-radius: var(--rund);
      scroll-snap-align: start;
      cursor: pointer;
      transition: transform var(--dauer-kurz), background var(--dauer), color var(--dauer);
      -webkit-tap-highlight-color: transparent;
      &:active { transform: scale(0.95); }
      & .icon { width: 1.5rem; height: 1.5rem; color: var(--akzent); }
      &.aktiv { color: #fff; background: var(--verlauf); border-color: transparent; box-shadow: var(--leuchten); }
      &.aktiv .icon { color: inherit; }
    }
  }

  /* Gruppen in "Mehr": Reihen wie in den Einstellungen des Handys */
  .gruppe {
    display: grid;
    padding: 0.25rem var(--a4);
    background: var(--karte-grund);
    border: 1px solid var(--rand);
    border-radius: var(--rund-l);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
  }
  .reihe {
    display: flex;
    align-items: center;
    gap: var(--a3);
    min-height: 3.4rem;
    padding: 0.55rem 0;
    font-weight: 500;
    & + .reihe { border-top: 1px solid var(--linie); }
    & > .icon { color: var(--akzent); }
    & > span:first-of-type { flex: none; min-width: 5.2rem; }
    & input, & select { flex: 1; padding-block: 0.5rem; text-align: right; }
    & select { text-align: left; }
    & .chip { margin-left: auto; }
    & .knopf.gross { margin: 0.25rem 0; }
    &.leise { font-weight: 400; }
  }

  .thema {
    display: flex;
    margin-left: auto;
    padding: 0.2rem;
    background: var(--tinte-flaeche);
    border-radius: var(--pille);
    & button {
      display: grid;
      place-items: center;
      min-width: 2.6rem;
      height: 2rem;
      padding: 0 0.6rem;
      font-size: var(--gr-13);
      font-weight: 600;
      color: var(--text-leise);
      background: none;
      border: 0;
      border-radius: var(--pille);
      cursor: pointer;
      &[aria-pressed="true"] { color: var(--text); background: var(--feld); box-shadow: 0 1px 3px rgb(0 0 0 / 15%); }
      & .icon { width: 1.05rem; height: 1.05rem; }
    }
  }

  /* Toasts: dunkles Glas über der Leiste */
  .ecke {
    position: fixed;
    left: var(--a4);
    right: var(--a4);
    bottom: calc(var(--fuss) + var(--a4) + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    gap: var(--a2);
    pointer-events: none;
  }
  .toast {
    --frist: 3.5s;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    font-size: var(--gr-15);
    font-weight: 500;
    color: var(--auf-dunkel);
    background: var(--glas-dunkel);
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--rund);
    box-shadow: var(--schatten-2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    animation: herein var(--dauer) var(--kurve), weg var(--dauer) ease-in var(--frist) forwards;
    & .icon { color: var(--mint); }
  }
  @keyframes weg { to { opacity: 0; translate: 0 0.5rem; } }
}

@layer seiten {
  .seite {
    max-width: 30rem;
    margin: 0 auto;
    padding: calc(var(--a5) + env(safe-area-inset-top)) var(--a4) calc(var(--fuss) + var(--a6) + env(safe-area-inset-bottom));
    display: grid;
    gap: var(--a4);
    align-content: start;
    animation: herein var(--dauer) var(--kurve) backwards;
  }

  .kopf {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--a3);
    padding: 0 0.25rem;
    & h1 { overflow-wrap: anywhere; }
  }

  /* Einrichtung */
  .einrichtung { padding-top: calc(3rem + env(safe-area-inset-top)); gap: var(--a5); }
  .willkommen { text-align: center; display: grid; gap: 0.25rem; }
  .marke { display: block; width: 9rem; height: auto; margin: 0 auto var(--a3); filter: drop-shadow(0 18px 30px rgb(0 125 181 / 28%)); }
  .schwebt { animation: schweben 3s ease-in-out infinite alternate; }
  .willkommen h1 { font-size: var(--gr-44); }
  .motto { font-size: var(--gr-18); color: var(--text-leise); }
  .einrichtung .karte { padding: var(--a5) var(--a4); }

  /* Bühne: der Sprechknopf */
  .buehne {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--a3);
    padding: var(--a5) var(--a4) var(--a4);
    text-align: center;
    & h2 { font-size: var(--gr-20); }
  }
  .ringe {
    position: absolute;
    top: calc(var(--a5) + 5.5rem);
    left: 50%;
    width: 11rem;
    height: 11rem;
    translate: -50% -50%;
    pointer-events: none;
    & span {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--verlauf);
      opacity: 0;
    }
  }
  body.hoert .ringe span { animation: atmen 2.2s ease-out infinite; }
  body.hoert .ringe span:nth-child(2) { animation-delay: 0.7s; }
  body.hoert .ringe span:nth-child(3) { animation-delay: 1.4s; }

  .sprechen {
    display: grid;
    place-items: center;
    width: 11rem;
    height: 11rem;
    padding: 0;
    color: #fff;
    background: var(--verlauf);
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 35%), var(--leuchten-stark);
    cursor: pointer;
    transition: transform var(--dauer-kurz), box-shadow var(--dauer);
    -webkit-tap-highlight-color: transparent;
    & .icon { width: 3.4rem; height: 3.4rem; stroke-width: 1.75; }
    &:active { transform: scale(0.95); }
  }
  body.hoert .sprechen { transform: scale(0.97); box-shadow: inset 0 2px 0 rgb(255 255 255 / 35%), 0 0 0 0.6rem var(--warm-schein), var(--leuchten-stark); }

  .dialog { display: grid; gap: 0.4rem; width: 100%; min-height: 3.2rem; }
  .blase {
    max-width: 88%;
    padding: 0.6rem 0.95rem;
    font-size: var(--gr-15);
    line-height: 1.4;
    text-align: left;
    border-radius: var(--rund);
    animation: herein var(--dauer) var(--kurve);
  }
  .blase.du { justify-self: end; color: var(--text-2); background: var(--feld); border: 1px solid var(--rand); border-bottom-right-radius: 6px; }
  .blase.es { justify-self: start; color: var(--auf-dunkel); background: var(--glas-dunkel); border-bottom-left-radius: 6px; }

  .regler { display: flex; align-items: center; gap: var(--a3); }

  /* Tagebuch */
  .eintrag-form { display: flex; gap: var(--a2); align-items: center; }
  .eintraege > li { cursor: default; align-items: start; &:active { transform: none; } }
  .eintraege .zeit { font-size: var(--gr-13); color: var(--text-leise); }
  .eintraege .loeschen {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: -0.2rem -0.4rem 0 0;
    color: var(--text-leise);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    & .icon { width: 1rem; height: 1rem; }
    &:active { background: var(--tinte-flaeche); }
  }
  .leer { text-align: center; color: var(--text-leise); }
  .ueber { text-align: center; }

  /* Die Leiste unten: schwebt, aus Glas, der gewählte Punkt im Verlauf */
  .fussleiste {
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: calc(var(--a3) + env(safe-area-inset-bottom));
    width: min(30rem - 2 * var(--a3), 100vw - 2 * var(--a3));
    translate: -50% 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 0.35rem;
    border-radius: 24px;
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-2);
    & a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.2rem;
      min-height: 3.1rem;
      padding: 0.45rem 0.2rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: var(--text-leise);
      text-decoration: none;
      border-radius: 18px;
      transition: background var(--dauer), color var(--dauer);
      -webkit-tap-highlight-color: transparent;
    }
    & .icon { width: 1.4rem; height: 1.4rem; }
    & a.aktiv { color: #fff; background: var(--verlauf); box-shadow: var(--leuchten); }
  }
  body.einrichten .fussleiste { display: none; }
}

@layer bauteile {
  /* Ideen: feste Liste ohne Klick, mit Stufe rechts */
  .ideen > li { cursor: default; align-items: start; &:active { transform: none; } }
  .stufe {
    flex: none;
    padding: 0.2rem 0.6rem;
    font-size: var(--gr-12);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-leise);
    background: var(--tinte-flaeche);
    border-radius: var(--pille);
    white-space: nowrap;
    &.kern { color: var(--akzent-text); background: var(--verlauf); }
  }
  .seite > h2 { padding: var(--a2) 0.25rem 0; }
}

@layer seiten {
  /* Einrichtung: Konto */
  .sprachwahl { justify-self: center; margin: 0; }
  .reiter { margin: 0 0 var(--a2); & button { flex: 1; } }
  .einrichtung .karte label { display: grid; gap: 0.3rem; }
  .einrichtung .karte label span { font-size: var(--gr-14); color: var(--text-leise); }
  input[type="email"], input[type="password"] {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 0.95rem;
    font-size: var(--gr-16);
    color: var(--text);
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: var(--rund-s);
    box-shadow: inset 0 1px 2px light-dark(rgb(1 40 44 / 6%), rgb(0 0 0 / 35%));
    &:focus { outline: 0; box-shadow: 0 0 0 3px color-mix(in oklab, var(--akzent) 25%, transparent); }
  }
  .fehler { padding: 0.6rem 0.9rem; font-size: var(--gr-14); color: light-dark(#8a2e2e, #f0a39a); background: light-dark(rgb(168 52 52 / 9%), rgb(232 132 122 / 14%)); border-radius: var(--rund-s); }
  .knopf.leise-taste { background: none; border: 0; box-shadow: none; color: var(--text-leise); font-weight: 500; }
  body[data-art="neu"] .nur-anmelden, body[data-art="anmelden"] .nur-neu { display: none; }
}

@layer seiten {
  .frage .knoepfe { display: flex; gap: var(--a2); & .knopf { flex: 1; } }
  .einrichtung .finger { margin-top: -0.5rem; }
  .reihe.schalter { font-weight: 500; & .schalter-text strong { font-weight: 600; } & > .icon { color: var(--akzent); } }
}