/* Elianas Erscheinungsbild
   Schwarzer Hintergrund, Bordeaux fuer die Karten, Altrose als Akzent.
   Schriftgroessen bewusst grosszuegig, die Zielgruppe ist 50+. */

:root {
  --schwarz:         #0A0809;   /* Seitenhintergrund */
  --schwarz-tief:    #050405;   /* Eingabefelder */
  --bordeaux-tief:   #2A0E16;
  --bordeaux:        #3D141F;   /* Karten */
  --bordeaux-hell:   #521B2A;
  --bordeaux-rand:   #6B2637;

  --rose:            #E2A0A8;   /* Akzent */
  --rose-hell:       #EFBCC1;   /* beim Darauffahren */
  --rose-matt:       #9C6B72;   /* Raender */

  --schrift:         #F4EDE4;
  --schrift-leise:   #C9B8AE;
  --schrift-still:   #96837A;

  --gruen:           #6FA96F;
  --warnung:         #D98C4A;

  --rund:            10px;
  --rund-gross:      16px;
  --schatten:        0 2px 16px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

/* Was verborgen ist, bleibt verborgen.
   Ohne diese Zeile gewinnt jede Klasse mit eigenem `display` gegen das
   `hidden` des Browsers. Am 06.09.2026 stand deshalb "Kundinnen und
   Zugänge" in der Leiste einer gewöhnlichen Kundin, obwohl das
   JavaScript es ausdrücklich verborgen hatte. Aufgefallen ist es nur,
   weil einmal jemand mit den Augen einer Kundin hingesehen hat.
   `hidden` wird an 59 Stellen benutzt, hier gilt es für alle. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--schwarz);
  color: var(--schrift);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- Grundbausteine */

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
}

h1 { font-size: 2.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a { color: var(--rose-hell); }

.leise  { color: var(--schrift-leise); }
.still  { color: var(--schrift-still); font-size: .92rem; }

/* ---------------------------------------------------------- Aufbau */

.rahmen {
  max-width: 940px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.kopf {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bordeaux-rand);
}

.kopf .marke {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rose);
  letter-spacing: .02em;
}

.kopf .unterzeile {
  color: var(--schrift-still);
  font-size: .95rem;
}

/* ---------------------------------------------------------- Karten */

.karte {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--schatten);
}

.karte.hoch { padding: 2.4rem 2rem; }

/* ---------------------------------------------------------- Knöpfe */

button, .knopf {
  font: inherit;
  font-weight: 600;
  border-radius: var(--rund);
  border: 1px solid transparent;
  padding: .75rem 1.4rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

button:active, .knopf:active { transform: translateY(1px); }

.haupt {
  background: var(--rose);
  color: var(--schwarz);
}
.haupt:hover { background: var(--rose-hell); }

.neben {
  background: transparent;
  color: var(--schrift);
  border-color: var(--bordeaux-rand);
}
.neben:hover { border-color: var(--rose-matt); }

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------------------------------------------------------- Eingaben */

input[type="text"], textarea {
  font: inherit;
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .8rem 1rem;
}

input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--rose-matt);
}

input::placeholder, textarea::placeholder { color: var(--schrift-still); }

label {
  display: block;
  margin-bottom: .4rem;
  color: var(--schrift-leise);
  font-size: .95rem;
}

/* ---------------------------------------------------------- Projektliste */

.projektliste { display: grid; gap: .8rem; }

.projekt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font-weight: 400;
}

.projekt:hover { border-color: var(--rose-matt); }

.projekt .name { font-weight: 600; font-size: 1.05rem; }

/* ---------------------------------------------------------- Zustände */

.marke-zustand {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.marke-zustand.festgelegt {
  background: rgba(111, 169, 111, .16);
  color: var(--gruen);
  border: 1px solid rgba(111, 169, 111, .35);
}

.marke-zustand.vorschlag {
  background: rgba(226, 160, 168, .14);
  color: var(--rose-hell);
  border: 1px solid rgba(226, 160, 168, .32);
}

.marke-zustand.idee {
  background: transparent;
  color: var(--schrift-still);
  border: 1px solid var(--bordeaux-rand);
}

/* ---------------------------------------------------------- Hinweise */

.hinweis {
  border-radius: var(--rund);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  border: 1px solid;
}

.hinweis.gut {
  background: rgba(111, 169, 111, .1);
  border-color: rgba(111, 169, 111, .3);
}

.hinweis.achtung {
  background: rgba(217, 140, 74, .1);
  border-color: rgba(217, 140, 74, .35);
}

.hinweis p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- Kleinigkeiten */

.reihe { display: flex; gap: .8rem; align-items: flex-end; }
.reihe > *:first-child { flex: 1; }

.leerlauf {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--schrift-still);
}

.punkt {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gruen);
}
.punkt.aus { background: var(--warnung); }

@media (max-width: 600px) {
  .rahmen { padding: 2rem 1rem 4rem; }
  h1 { font-size: 1.7rem; }
  .reihe { flex-direction: column; align-items: stretch; }
}

/* ============================================================ Arbeitsfläche
   Der Funnel-Bildschirm: Schritte links, Gespräch in der Mitte,
   Produkte rechts. Vorbild sind Carmens NOVA-Bildschirmfotos,
   ergänzt um die sichtbare Zustandskennzeichnung. */

body.arbeitsflaeche {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.balken {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.4rem;
  border-bottom: 1px solid var(--bordeaux-rand);
  background: var(--bordeaux-tief);
  flex: 0 0 auto;
}

.balken .marke {
  font-weight: 600;
  color: var(--rose);
  font-size: 1.1rem;
}

.balken .projektname {
  color: var(--schrift-leise);
  font-size: .98rem;
}

.balken .projektname::before {
  content: "·";
  margin-right: .7rem;
  color: var(--schrift-still);
}

.zurueck {
  text-decoration: none;
  color: var(--schrift-leise);
  font-size: .95rem;
  padding: .3rem .6rem;
  border-radius: 8px;
}
.zurueck:hover { background: var(--bordeaux); color: var(--schrift); }

.dreispalt {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  min-height: 0;
}

.spalte-links, .spalte-rechts {
  overflow-y: auto;
  padding: 1.4rem 1.1rem;
}

.spalte-links  { border-right: 1px solid var(--bordeaux-rand); }
.spalte-rechts { border-left: 1px solid var(--bordeaux-rand); }

.spalte-mitte {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1.6rem 2rem 1.2rem;
}

/* ------------------------------------------------- Schritte links */

.schritt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rund);
  padding: .7rem .85rem;
  margin-bottom: .35rem;
  color: var(--schrift-leise);
  font-weight: 500;
  font-size: .98rem;
  cursor: pointer;
}

.schritt:hover { background: var(--bordeaux); }

.schritt.jetzt {
  background: var(--bordeaux);
  border-color: var(--rose-matt);
  color: var(--schrift);
  font-weight: 600;
}

.schritt .haken {
  color: var(--gruen);
  margin-right: .45rem;
  font-weight: 700;
}

.schritt .nummer {
  color: var(--schrift-still);
  margin-right: .45rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- Gespräch Mitte */

.schrittkopf {
  flex: 0 0 auto;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bordeaux-rand);
}
.schrittkopf h1 { font-size: 1.55rem; margin-bottom: .2rem; }
.schrittkopf p  { margin: 0; }

.verlauf {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: .5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blase {
  max-width: 92%;
  border-radius: var(--rund-gross);
  padding: 1rem 1.2rem;
  white-space: pre-wrap;
}

.blase.eliana {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  align-self: flex-start;
}

.blase.nutzerin {
  background: var(--bordeaux-hell);
  border: 1px solid var(--rose-matt);
  align-self: flex-end;
  max-width: 78%;
}

.blase p:last-child { margin-bottom: 0; }

.absender {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .4rem;
}
.blase.eliana .absender { color: var(--rose-matt); }

/* Antwortmöglichkeiten, Bedienregel: nie nackte offene Fragen */

.moeglichkeiten {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

/* Die Antwortknoepfe standen frueher auf --bordeaux-tief und damit
   dunkler als die Sprechblase, auf der sie liegen. Gemessen waren das
   1,12 zu 1, also so gut wie kein Unterschied: Der Knopf sah nicht aus
   wie ein Knopf, sondern wie ein Loch in der Blase. Der Text war nie
   das Problem, der hatte 15 zu 1.

   Jetzt liegen sie etwas heller als die Blase (1,48 zu 1), mit
   sichtbarem Rand und kraeftigerer Schrift. Carmen am 24.08.2026:
   etwas heller, nicht viel, aber ein bisschen. */
.moeglichkeit {
  background: var(--bordeaux-rand);
  border: 1px solid var(--rose-matt);
  color: var(--schrift);
  border-radius: var(--rund);
  padding: .55rem .9rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.moeglichkeit:hover {
  background: var(--bordeaux-hell);
  border-color: var(--rose);
}

/* Anpass-Knöpfe unter Elianas Antwort */

.anpassen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--bordeaux-rand);
}

.anpassen .beschriftung {
  font-size: .85rem;
  color: var(--schrift-still);
  margin-right: .2rem;
}

.chip {
  background: transparent;
  border: 1px solid var(--rose-matt);
  color: var(--schrift);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .87rem;
  font-weight: 500;
  cursor: pointer;
}
.chip:hover { border-color: var(--rose-matt); color: var(--schrift); }

/* Eingabe unten */

.eingabefeld {
  flex: 0 0 auto;
  display: flex;
  gap: .7rem;
  align-items: flex-end;
  margin-top: 1rem;
}
.eingabefeld textarea { resize: none; }
.eingabehinweis { margin: .5rem 0 0; }

/* ------------------------------------------------- Produkte rechts */

.spaltentitel {
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .9rem;
}

.produkt {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .85rem 1rem;
  margin-bottom: .6rem;
}

.produkt .rolle {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .25rem;
}

.produkt .pname {
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .35rem;
}

.produkt .pname.offen {
  color: var(--schrift-still);
  font-weight: 400;
  font-style: italic;
}

.produkt .preis {
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leise);
  font-size: .93rem;
}

.produkt .herkunft {
  font-size: .85rem;
  color: var(--schrift-still);
  margin-top: .4rem;
}

.gesperrt {
  background: var(--bordeaux-tief);
  border: 1px dashed var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: 1rem;
  color: var(--schrift-still);
  font-size: .92rem;
}

/* ------------------------------------------------- schmale Fenster */

@media (max-width: 1080px) {
  /* Wird das Fenster eng, stehen die Spalten untereinander statt
     nebeneinander. Ausgeblendet wird nichts. Etwas Unsichtbares kann
     die Nutzerin nicht finden, auch wenn man ihr sagt, wo es steht. */
  body.arbeitsflaeche { height: auto; overflow: visible; }

  /* Reihenfolge beim Lesen von oben nach unten:
     erst das Gespraech, dann die Angaben und Produkte, dann die Schritte. */
  .dreispalt {
    display: flex;
    flex-direction: column;
  }
  .spalte-mitte  { order: 1; }
  .spalte-rechts { order: 2; }
  .spalte-links  { order: 3; }

  /* Das Gespraech behaelt seine eigene Hoehe und scrollt in sich.
     Sonst waere alles Weitere hinter einem sehr langen Verlauf begraben. */
  .spalte-mitte {
    height: calc(100vh - 4.2rem);
    border: none;
  }

  .spalte-rechts, .spalte-links {
    height: auto;
    max-height: none;
    overflow: visible;
    border: none;
    border-top: 1px solid var(--bordeaux-rand);
  }

  .spalte-links { padding-top: 1.4rem; }
}

/* ------------------------------------------------- Feinschliff */

/* Rollbalken in die Farbwelt holen, statt hellgrau */
.verlauf, .spalte-links, .spalte-rechts {
  scrollbar-width: thin;
  scrollbar-color: var(--bordeaux-rand) transparent;
}
.verlauf::-webkit-scrollbar,
.spalte-links::-webkit-scrollbar,
.spalte-rechts::-webkit-scrollbar { width: 8px; }
.verlauf::-webkit-scrollbar-track,
.spalte-links::-webkit-scrollbar-track,
.spalte-rechts::-webkit-scrollbar-track { background: transparent; }
.verlauf::-webkit-scrollbar-thumb,
.spalte-links::-webkit-scrollbar-thumb,
.spalte-rechts::-webkit-scrollbar-thumb {
  background: var(--bordeaux-rand);
  border-radius: 999px;
}

/* Absaetze in der Sprechblase enger setzen */
.blase { white-space: normal; }
.blase .text > p { margin: 0 0 .7rem; }
.blase .text > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- Marke ELIANA */

.marke-zusatz {
  font-weight: 400;
  color: var(--schrift-leise);
  letter-spacing: .01em;
}

.anspruch {
  color: var(--schrift-leise);
  font-size: 1rem;
  margin-top: .15rem;
}

.kopf.gross {
  align-items: flex-end;
  justify-content: space-between;
}

.kopf.gross .marke { font-size: 1.75rem; letter-spacing: .06em; }

.rolle-hinweis {
  color: var(--schrift-still);
  font-size: .9rem;
  letter-spacing: .04em;
  white-space: nowrap;
}

.balken .marke { letter-spacing: .06em; }

.balken-anspruch {
  font-size: .92rem;
  margin-top: 0;
}
.balken-anspruch::before {
  content: "·";
  margin-right: .7rem;
  color: var(--schrift-still);
}

.projektzeile {
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rose-matt);
  margin-bottom: .3rem;
}

/* Anpass-Leiste unter dem Eingabefeld */

.anpassen.unten {
  margin-top: .7rem;
  padding-top: 0;
  border-top: none;
}

@media (max-width: 900px) {
  .balken-anspruch, .rolle-hinweis { display: none; }
}

/* ------------------------------------------------- ELIANA denkt nach */

.denkt {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--schrift-still);
  font-size: .95rem;
  padding: .3rem .2rem;
}

.denkt .perle {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose-matt);
  animation: pulsieren 1.2s ease-in-out infinite;
}
.denkt .perle:nth-child(2) { animation-delay: .18s; }
.denkt .perle:nth-child(3) { animation-delay: .36s; margin-right: .4rem; }

@keyframes pulsieren {
  0%, 80%, 100% { opacity: .25; }
  40%           { opacity: 1; }
}

.gesperrt.fehler {
  border-style: solid;
  border-color: rgba(217, 140, 74, .45);
  background: rgba(217, 140, 74, .08);
  color: var(--schrift-leise);
}

.moeglichkeit:disabled, .chip:disabled { opacity: .4; cursor: default; }

/* ------------------------------------------------- Funnelplan */

.planknoepfe { display: grid; gap: .5rem; }

.planknoepfe .knopf {
  justify-content: center;
  text-decoration: none;
  font-size: .93rem;
  padding: .6rem .9rem;
  text-align: center;
}

.planhinweis {
  border-radius: var(--rund);
  padding: .8rem 1rem;
  margin-bottom: .8rem;
  font-size: .9rem;
  border: 1px solid var(--bordeaux-rand);
  background: var(--bordeaux);
}

.planhinweis.vollstaendig {
  border-color: rgba(111, 169, 111, .4);
  background: rgba(111, 169, 111, .1);
  color: var(--gruen);
}

.planhinweis.unvollstaendig {
  border-color: rgba(217, 140, 74, .4);
  background: rgba(217, 140, 74, .08);
}

.planhinweis ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.planhinweis li { margin-bottom: .2rem; }

/* ------------------------------------------------- Stimme und Branding */

.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.wahlreihe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.wahl {
  background: var(--schwarz-tief);
  border: 1px solid var(--bordeaux-rand);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .94rem;
  font-weight: 500;
}
.wahl:hover { border-color: var(--rose-matt); color: var(--schrift); }

.wahl.an {
  background: rgba(226, 160, 168, .16);
  border-color: var(--rose);
  color: var(--rose-hell);
}

.speicherleiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  bottom: 0;
  background: var(--schwarz);
  padding: 1.2rem 0;
  border-top: 1px solid var(--bordeaux-rand);
}

.still.gut    { color: var(--gruen); }
.still.fehler { color: var(--warnung); }

@media (max-width: 620px) {
  .feldpaar { grid-template-columns: 1fr; }
}

.kopfrechts { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.kopfrechts .knopf { text-decoration: none; font-size: .9rem; padding: .45rem .9rem; }
.balken-rechts { margin-left: auto; }

/* Der klebende Speicherbalken darf nichts verdecken */
body:has(.speicherleiste) .rahmen { padding-bottom: 7rem; }
.speicherleiste { margin-top: 1.5rem; z-index: 5; }

/* ------------------------------------------------- Fortschritt */

.fortschritt { margin-bottom: 1.2rem; padding: 0 .3rem; }

.balkenspur {
  height: 5px;
  background: var(--bordeaux);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .5rem;
}

.balkenfuellung {
  height: 100%;
  width: 0;
  background: var(--rose);
  border-radius: 999px;
  transition: width .35s ease;
}

.schritt.fertig { color: var(--schrift-still); }
.schritt.fertig.jetzt { color: var(--schrift); }

.kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.kopfzeile button { white-space: nowrap; font-size: .95rem; padding: .55rem 1.1rem; }

/* ============================================================ Produktseite */

.rahmen.breit { max-width: 900px; }

.produktkopf { margin: 2rem 0 1.5rem; }
.produktkopf .rolle {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rose-matt); margin-bottom: .25rem;
}
.produktkopf h1 { font-size: 1.8rem; margin-bottom: .3rem; }

.reiter {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: 1px solid var(--bordeaux-rand);
  padding-bottom: .8rem; margin-bottom: 1.5rem;
}

.reiterknopf {
  background: transparent; border: 1px solid var(--bordeaux-rand);
  color: var(--schrift-leise); border-radius: var(--rund);
  padding: .5rem .85rem; font-size: .93rem; font-weight: 500;
}
.reiterknopf:hover { border-color: var(--rose-matt); color: var(--schrift); }
.reiterknopf.jetzt {
  background: var(--bordeaux); border-color: var(--rose-matt);
  color: var(--schrift); font-weight: 600;
}
.reiterknopf .zaehler {
  color: var(--schrift-still); font-size: .84rem; margin-left: .35rem;
  font-variant-numeric: tabular-nums;
}

.artkopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.artkopf h2 { margin-bottom: .15rem; }
.artkopf p { margin: 0; }
.artkopf button { white-space: nowrap; }

.laufkasten {
  background: var(--bordeaux); border: 1px solid var(--rose-matt);
  border-radius: var(--rund); padding: .9rem 1.1rem; margin-bottom: 1.2rem;
}
.laufkasten .balkenspur { margin-bottom: .5rem; }

.bausteinkarte {
  background: var(--bordeaux); border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund); padding: 1rem 1.2rem; margin-bottom: .8rem;
}
.bausteinkarte.leer { background: transparent; border-style: dashed; }

.bausteinkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.bnummer {
  display: inline-block; width: 1.6rem; color: var(--schrift-still);
  font-variant-numeric: tabular-nums;
}
.btitel { font-weight: 600; }
.bwerkzeuge { display: flex; align-items: center; gap: .5rem; }

textarea.binhalt {
  margin-top: .8rem; font-size: .96rem; line-height: 1.55;
  min-height: 8rem; resize: vertical;
}

.bausteinfuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: .6rem; flex-wrap: wrap;
}
.bausteinfuss .still { flex: 1; min-width: 16rem; }

@media (max-width: 620px) {
  .artkopf { flex-direction: column; }
  .artkopf button { width: 100%; justify-content: center; }
}

.produkt.anklickbar { cursor: pointer; }
.produkt.anklickbar:hover { border-color: var(--rose-matt); }
.produktoeffnen {
  margin-top: .6rem; font-size: .86rem; color: var(--rose-matt); font-weight: 600;
}

.planknoepfe.waagerecht {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
#textexport { margin-top: 2rem; }

.unterreiter {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: -.8rem 0 1.5rem; padding-bottom: .2rem;
}

.unterknopf {
  background: transparent; border: 1px solid transparent;
  color: var(--schrift-still); border-radius: 999px;
  padding: .35rem .8rem; font-size: .89rem; font-weight: 500;
}
.unterknopf:hover { color: var(--schrift); border-color: var(--bordeaux-rand); }
.unterknopf.jetzt {
  background: rgba(226, 160, 168, .14);
  border-color: var(--rose-matt); color: var(--rose-hell);
}
.unterknopf .zaehler { margin-left: .3rem; font-variant-numeric: tabular-nums; }

.farbtupfer {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 50%; margin-right: .45rem; vertical-align: -1px;
}
#seitenbau { margin-top: 2rem; }

/* ------------------------------------------------- Markenfarben */

.farbfelder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem; margin-top: .8rem;
}

.farbzeile { display: flex; gap: .5rem; align-items: center; }

.farbzeile input[type="color"] {
  width: 46px; height: 42px; padding: 0; border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund); background: var(--schwarz-tief); cursor: pointer;
}

.farbzeile input[type="text"] {
  flex: 1; font-variant-numeric: tabular-nums; text-transform: uppercase;
}

/* ------------------------------------------------- Projektkarten */

.projekt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; cursor: default;
}
.projekt.haupt { border-color: var(--rose-matt); }

.projektinhalt { flex: 1; min-width: 15rem; }
.projektinhalt .name { font-weight: 600; font-size: 1.05rem; margin-right: .6rem; }
.projektstand { margin: .15rem 0 .5rem; }

.balkenspur.schmal { height: 4px; max-width: 22rem; margin: 0; }

.projektknoepfe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.projektknoepfe .haupt { padding: .5rem 1.1rem; font-size: .93rem; }
.projektknoepfe .chip { padding: .4rem .8rem; }

@media (max-width: 640px) {
  .projektknoepfe { width: 100%; }
  .projektknoepfe .haupt { flex: 1; justify-content: center; }
}

/* ---------------------------------------------------------- Mikrofon
   Steht unter oder neben jedem Feld, in das man sprechen kann. */

.mikro {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: var(--schrift-leise);
  border: 1px solid var(--bordeaux-rand);
  border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.mikro:hover { border-color: var(--rose-matt); color: var(--schrift); }

.mikrozeichen { font-size: 1.05rem; line-height: 1; }

.mikro.mikro-an {
  background: var(--rose);
  border-color: var(--rose);
  color: #2A0E16;
  font-weight: 600;
  animation: mikropuls 1.6s ease-in-out infinite;
}

@keyframes mikropuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 160, 168, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(226, 160, 168, 0); }
}

.mikro.mikro-aus { opacity: .5; }

/* Woher ein Launchplan stammt. Ehrlichkeit sichtbar gemacht:
   was aus dem Kurs kommt und was ELIANA selbst vorschlaegt. */
.herkunft {
  margin: -.35rem 0 1.2rem;
  padding-left: .7rem;
  border-left: 2px solid var(--bordeaux-rand);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--schrift-still);
}
.herkunft.quelle { border-left-color: var(--rose-matt); }

/* Steht klein unter der Tageszahl, wenn an einem Tag zweimal etwas rausgeht. */
.tzeit {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--schrift-still);
}

.danachkarte { margin-top: 1.6rem; }

/* Steht unter dem Mikrofon, solange es zuhoert. Erklaert die Sprechbefehle. */
.mikrohilfe {
  flex-basis: 100%;
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--schrift-still);
}
.mikrohilfe b { color: var(--schrift); font-weight: 600; }

/* ------------------------------------------------------ Deine Angaben
   Die festgelegten Planungsangaben, rechts, direkt aenderbar. */

.angabe {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .7rem .85rem;
  margin-bottom: .6rem;
}

.angabe .beschriftung {
  display: block;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .3rem;
}

.angabe .awert {
  font-size: .98rem;
  line-height: 1.45;
  color: var(--schrift);
  white-space: pre-wrap;
  word-break: break-word;
}

.angabe .azeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
}

.angabe .aendern {
  background: transparent;
  border: 1px solid var(--bordeaux-rand);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .25rem .7rem;
  font-size: .86rem;
  font-family: inherit;
  cursor: pointer;
}

.angabe .aendern:hover { border-color: var(--rose-matt); color: var(--schrift); }

.angabe textarea {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund);
  padding: .55rem .65rem;
  font-family: inherit;
  font-size: .98rem;
  line-height: 1.45;
  resize: vertical;
}

.angabeknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .5rem;
}

/* Mikrofon direkt unter dem Schreibfeld im Gespraech. */
.eingabewerkzeug {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
}

/* Die Zeile unter ELIANAs Antwort: was sie gerade festgehalten hat.
   Deutlich abgesetzt, damit sie beim Lesen nicht untergeht. */
.festgehalten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .9rem -.25rem -.25rem;
  padding: .7rem .8rem;
  background: rgba(226, 160, 168, .09);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund);
}

.festgehalten > span {
  font-size: .9rem;
  color: var(--rose);
  font-weight: 600;
}

/* Die Knoepfe darin sind zum Anklicken gedacht, also sehen sie so aus. */
.festgehalten .chip {
  border-color: var(--rose);
  color: var(--rose-hell);
  background: rgba(226, 160, 168, .08);
}

.festgehalten .chip:hover {
  background: var(--rose);
  color: var(--bordeaux-tief);
  border-color: var(--rose);
}

/* ------------------------------------------- Namen und Headlines
   ELIANA legt vor, die Nutzerin waehlt. Die drei Varianten sollen
   erkennbar Knoepfe sein, nicht nur Text zum Lesen. */

.namenkarte {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}

.namenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.namenkarte .pname {
  font-size: 1.25rem;
  font-weight: 600;
  margin: .15rem 0 .2rem;
}

.gewaehlt {
  margin-top: .9rem;
  padding: .8rem .9rem;
  background: rgba(111, 169, 111, .1);
  border: 1px solid var(--gruen);
  border-radius: var(--rund);
}

.gewaehlt .gtext {
  margin: .5rem 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.vorschlagskasten {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordeaux-rand);
}

.vname {
  font-size: .95rem;
  color: var(--schrift-leise);
  margin-bottom: .7rem;
}

.vname strong { color: var(--rose); }

.varianten {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.variante {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  width: 100%;
  text-align: left;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .85rem .95rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.variante:hover {
  border-color: var(--rose);
  background: rgba(226, 160, 168, .07);
}

.vnummer {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--rose);
  color: var(--bordeaux-tief);
  font-weight: 700;
  font-size: .92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warum {
  margin: .8rem 0 0;
  line-height: 1.5;
}

.eigenes {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordeaux-rand);
}

.eigenes .beschriftung {
  display: block;
  font-size: .88rem;
  color: var(--schrift-still);
  margin-bottom: .4rem;
}

.eigenes textarea {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .6rem .7rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.eigenes textarea:focus {
  outline: none;
  border-color: var(--rose-matt);
}

/* Headline und Untertext gehoeren zusammen, also stehen sie
   im selben Knopf untereinander. */
.vinhalt { display: block; }

.variante .vtext {
  display: block;
  font-weight: 600;
}

.variante .vunter {
  display: block;
  margin-top: .4rem;
  font-size: .95rem;
  font-weight: 400;
  color: var(--schrift-leise);
}

.gewaehlt .gunter {
  margin: .45rem 0 0;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--schrift-leise);
}

.eigenes .beschriftung.zweite { margin-top: .9rem; }
.eigenes textarea + .angabeknoepfe.knapp { margin-top: .45rem; }

/* Rueckfrage, bevor neue Vorschlaege geholt werden. */
.kritik {
  margin-top: 1rem;
  padding: .85rem .9rem;
  background: rgba(226, 160, 168, .07);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund);
}

.kritik .beschriftung {
  display: block;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--schrift-leise);
  margin-bottom: .5rem;
}

.kritik textarea {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .6rem .7rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

/* Wartezeit ehrlich benennen. Ein stiller Bildschirm wirkt wie ein Fehler. */
.laufkasten .laufzeit {
  margin-top: .45rem;
  font-size: .88rem;
  line-height: 1.45;
}

/* Der benannte nächste Schritt auf der Produktseite. */
.naechsterkasten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}

.naechsterkasten.fertig { border-color: var(--gruen); }

.naechsterkasten .nlinks { flex: 1; min-width: 15rem; }

.naechsterkasten .beschriftung {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--schrift-still);
}

.naechsterkasten .nschritt {
  font-size: 1.2rem;
  font-weight: 600;
  margin: .2rem 0 .3rem;
}

/* Dein Produkt als fertige Datei: Workbook, E-Book, Checkliste. */
.dateiform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .9rem 1.1rem;
  margin-top: .8rem;
}

.dateiform .dlinks { flex: 1; min-width: 14rem; }

.dateiform .dtitel {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .15rem;
}

.dateiform .dhinweis { font-size: .88rem; opacity: .75; }

/* Die Markenzeile führt von überall zurück zur Übersicht.
   Sie soll dabei aussehen wie vorher, nur anklickbar sein. */
.marke-heim {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--rund);
  padding: .1rem .35rem;
  margin-left: -.35rem;
  transition: background .15s;
}

.marke-heim:hover { background: rgba(226, 160, 168, .12); }

/* ---------------------------------------------------- Produktleiter */

.leiterzeile {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .65rem .85rem; margin-top: .5rem;
  border: 1px solid var(--bordeaux-rand); border-radius: var(--rund);
}
.leiterzeile.bestand { opacity: .8; }

.lrolle {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rose-matt); font-weight: 600;
}
.lname { flex: 1; min-width: 12rem; }
.lname.gross { font-size: 1.18rem; font-weight: 600; margin: .3rem 0 .5rem; }
.lpreis { color: var(--rose); font-weight: 600; }

.leiterkarte {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  padding: 1rem 1.15rem; margin-top: .9rem;
  transition: border-color .15s, background .15s;
}
.leiterkarte.an {
  border-color: var(--rose);
  background: rgba(226, 160, 168, .08);
}

.lkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.lwahl { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.lwahl input { width: 1.15rem; height: 1.15rem; accent-color: var(--rose); }

.linhalt { margin: 0 0 .6rem; line-height: 1.55; }
.lboni { margin: 0 0 .5rem; font-size: .95rem; color: var(--schrift-leise); }
.lwarum { margin: 0; font-style: italic; }

.hinweis.abschluss {
  margin-top: 1.2rem;
  background: rgba(226, 160, 168, .07);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund);
  padding: .9rem 1.1rem;
}
.hinweis.abschluss p { margin: 0; line-height: 1.6; }

/* ============================================ Der Empfang auf der Startseite
   Ruhige Bewegung. Langsame Kreise, kein Blinken, nichts Zappelndes.
   Die Zielgruppe soll sich empfangen fuehlen, nicht beworben. */

.empfang {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 2.6rem;
  align-items: center;
  margin: 2.2rem 0 2.6rem;
}

@media (max-width: 760px) {
  .empfang { grid-template-columns: 1fr; gap: 1.6rem; text-align: center; }
  .halo { margin: 0 auto; }
  .beruhigung { justify-content: center; }
}

/* --- Der Kreis --- */
.halo {
  position: relative;
  width: 15rem; height: 15rem;
  display: flex; align-items: center; justify-content: center;
}

.halo .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rose-matt);
  opacity: 0;
  animation: atmen 9s cubic-bezier(.4, 0, .2, 1) infinite;
}

.halo .r2 { animation-delay: 3s; }
.halo .r3 { animation-delay: 6s; }

@keyframes atmen {
  0%   { transform: scale(.42); opacity: 0; }
  18%  { opacity: .55; }
  100% { transform: scale(1);   opacity: 0; }
}

/* Der ruhende Kern in der Mitte. */
.halo .kern {
  position: relative;
  width: 6.4rem; height: 6.4rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; font-weight: 300; letter-spacing: .06em;
  color: var(--rose-hell);
  background:
    radial-gradient(circle at 35% 30%, var(--bordeaux-hell), var(--bordeaux-tief) 70%);
  border: 1px solid var(--rose-matt);
  box-shadow: 0 0 40px rgba(226, 160, 168, .16);
  animation: kernpuls 9s ease-in-out infinite;
}

@keyframes kernpuls {
  0%, 100% { box-shadow: 0 0 34px rgba(226, 160, 168, .13); }
  50%      { box-shadow: 0 0 54px rgba(226, 160, 168, .26); }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt hier auch keine. */
@media (prefers-reduced-motion: reduce) {
  .halo .ring { animation: none; opacity: .3; }
  .halo .r1 { transform: scale(.62); }
  .halo .r2 { transform: scale(.82); }
  .halo .r3 { transform: scale(1); }
  .halo .kern { animation: none; }
}

/* --- Der Text daneben --- */
.empfangstext h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin: 0 0 .7rem;
}

.empfangstext .leise {
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 46rem;
  margin-bottom: 1.1rem;
}

.beruhigung {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.bpunkt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--bordeaux-rand);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .92rem;
  color: var(--schrift-leise);
}

.bpunkt::before {
  content: "✓";
  color: var(--gruen);
  font-weight: 700;
}

/* --- Die Karte zum Anlegen --- */
.schrittmarke {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-matt);
  font-weight: 600;
  margin-bottom: .5rem;
}

.anlegekarte h2 { margin: 0 0 .4rem; }

.beispiele {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordeaux-rand);
}

.beispiel {
  background: transparent;
  border: 1px dashed var(--rose-matt);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
}

.beispiel:hover {
  border-style: solid;
  border-color: var(--rose);
  color: var(--schrift);
}

/* --- Die sechs Schritte --- */
.ablauf { margin-top: 2.6rem; }
.ablauf h2 { margin-bottom: .3rem; }

.schrittspur {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .7rem;
}

.schrittspur li {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .8rem .9rem;
}

.schrittspur .snummer {
  display: block;
  font-size: .8rem;
  color: var(--rose-matt);
  font-weight: 700;
  margin-bottom: .2rem;
}

.schrittspur .stitel { font-weight: 600; }
.schrittspur .szeile {
  display: block;
  font-size: .88rem;
  color: var(--schrift-still);
  margin-top: .25rem;
  line-height: 1.45;
}

/* ==================================== Seitenleiste auf der Startseite */

.startflaeche {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh;
}

.seitenleiste {
  border-right: 1px solid var(--bordeaux-rand);
  padding: 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.starthaupt {
  padding: 1.6rem 2rem 4rem;
  max-width: 62rem;
}

@media (max-width: 900px) {
  .startflaeche { grid-template-columns: 1fr; }
  .seitenleiste {
    border-right: none;
    border-bottom: 1px solid var(--bordeaux-rand);
  }
  .starthaupt { padding: 1.4rem 1.2rem 3rem; }
}

.slzusatz {
  font-size: .86rem;
  color: var(--schrift-still);
  margin-top: .25rem;
}

.slnav, .slabschnitt { display: flex; flex-direction: column; gap: .3rem; }

.sltitel {
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .45rem;
}

.sleintrag {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--rund);
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: .98rem;
  border: 1px solid transparent;
}

a.sleintrag:hover {
  background: var(--bordeaux-tief);
  color: var(--schrift);
}

.sleintrag.an {
  background: var(--bordeaux);
  border-color: var(--bordeaux-rand);
  color: var(--schrift);
  font-weight: 600;
}

/* Was es noch nicht gibt, sieht auch nicht anklickbar aus, und sagt warum. */
.sleintrag.zu {
  color: var(--schrift-still);
  cursor: default;
  padding-bottom: .3rem;
}
.sleintrag.zu::before { content: "🔒 "; }

.slgrund {
  display: block;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--schrift-still);
  opacity: .8;
  margin-top: .2rem;
  padding-bottom: .5rem;
}

/* Schnellzugriff auf die Funnels */
.slprojekt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: var(--rund);
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: .94rem;
  border: 1px solid transparent;
}
.slprojekt:hover {
  background: var(--bordeaux-tief);
  color: var(--schrift);
  border-color: var(--bordeaux-rand);
}
.slprojekt .slfortschritt {
  font-size: .8rem;
  color: var(--schrift-still);
  flex: 0 0 auto;
}

/* Die drei Knoepfe unter jedem Funnel in der Leiste: Als Hauptprojekt,
   Umbenennen, Loeschen. Klein, aber immer sichtbar. Etwas, das erst
   beim Druebergehen mit der Maus auftaucht, findet niemand, der es
   nicht schon kennt. */
.slprojektblock { margin-bottom: .45rem; }

.slpknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .25rem 0 0 .75rem;
}
.slpknopf {
  background: transparent;
  border: 1px solid var(--bordeaux-rand);
  border-radius: 999px;
  color: var(--schrift-still);
  font: inherit;
  font-size: .74rem;
  line-height: 1;
  padding: .28rem .55rem;
  cursor: pointer;
}
.slpknopf:hover {
  background: var(--bordeaux-tief);
  color: var(--schrift);
}
.slpknopf.loeschen:hover {
  color: #ffb4b4;
  border-color: #7a3a3a;
}

.slfuss {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordeaux-rand);
}

/* Der aufgeklappte Zweig: Produkte unter dem offenen Funnel, Bereiche
   unter dem offenen Produkt. Eingerueckt und mit einer Linie, damit man
   auf einen Blick sieht, was wozu gehoert. */
.slprojekt.offen {
  background: var(--bordeaux-tief);
  color: var(--schrift);
  border-color: var(--bordeaux-rand);
}

.slzweig {
  margin: .2rem 0 .5rem .55rem;
  padding-left: .7rem;
  border-left: 1px solid var(--bordeaux-rand);
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.slprodukt,
.slbereich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .34rem .55rem;
  border-radius: var(--rund);
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: .88rem;
  line-height: 1.35;
}
.slprodukt:hover,
.slbereich:hover { background: var(--bordeaux-tief); color: var(--schrift); }

.slprodukt.offen { color: var(--schrift); font-weight: 600; }

.slbereich { font-size: .84rem; color: var(--schrift-still); }
.slbereich.fertig .slfortschritt { color: var(--gruen); }
.slbereich.slextra { font-style: italic; }

.slprodukt .slfortschritt,
.slbereich .slfortschritt {
  font-size: .78rem;
  color: var(--schrift-still);
  flex: 0 0 auto;
}

/* Auf den Unterseiten baut die Leiste sich selbst und stellt den
   vorhandenen Inhalt daneben. Der Rahmen darf dann nicht mehr selbst
   zentrieren, sonst steht alles doppelt eingerueckt. */
.startflaeche.mitleiste .starthaupt { padding: 0; max-width: none; }
.startflaeche.mitleiste .rahmen { margin-left: 0; }
.startflaeche.mitleiste .balken { position: static; }
.slname { font-weight: 600; }
.slrolle { font-size: .84rem; color: var(--schrift-still); }

/* ------------------------------------------- Woran du gerade arbeitest */

.obenzeile {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rose-matt);
  font-weight: 600;
  margin-bottom: .5rem;
}

.arbeitskarte {
  background: var(--bordeaux);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund-gross);
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.arbeitskarte .alinks { flex: 1; min-width: 15rem; }
.arbeitskarte h2 { margin: .1rem 0 .3rem; font-size: 1.3rem; }

/* ------------------------------------------------- Aktueller Überblick */

.zahlenreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem;
  margin-bottom: 1.6rem;
}

.zahlkarte {
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .9rem 1rem;
}
.zahlkarte .zahl {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--rose);
  line-height: 1.1;
}
.zahlkarte .zwas {
  font-size: .88rem;
  color: var(--schrift-still);
  margin-top: .2rem;
}

/* ------------------------------------------------------- Vorlesen
   Derselbe Schalter an jeder Stelle, damit er wiedererkannt wird. */

.vorlesen {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: var(--schrift-still);
  border: 1px solid var(--bordeaux-rand);
  border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .92rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.vorlesen:hover { border-color: var(--rose-matt); color: var(--schrift); }

.vorlesen.an {
  border-color: var(--rose);
  color: var(--rose-hell);
  background: rgba(226, 160, 168, .08);
}

.vorlesen.spricht {
  background: var(--rose);
  color: var(--bordeaux-tief);
  font-weight: 600;
  animation: sprechpuls 1.8s ease-in-out infinite;
}

@keyframes sprechpuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 160, 168, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(226, 160, 168, 0); }
}

.vorlesen.vorlesen-aus { opacity: .5; }
.vzeichen { font-size: 1.02rem; line-height: 1; }

.slvorlesen { margin-top: .8rem; }

/* Die Stimmenauswahl, direkt unter dem Vorlese-Schalter. */
.stimmenwahl {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .7rem;
}

.stimmenwahl .beschriftung {
  font-size: .82rem;
  color: var(--schrift-still);
}

.stimmenliste {
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .45rem .6rem;
  font-family: inherit;
  font-size: .92rem;
  width: 100%;
}

.stimmenliste:focus { outline: none; border-color: var(--rose-matt); }
.stimmenliste:disabled { opacity: .5; }

.stimmenwahl .probe { align-self: flex-start; }

/* Der Gedanke für den Tag, ganz oben über allem. */
.tagesgedanke {
  border-left: 2px solid var(--rose-matt);
  padding: .45rem 0 .45rem 1rem;
  margin: .4rem 0 1.8rem;
  font-size: 1.08rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--schrift-leise);
  max-width: 52rem;
}
.tagesgedanke:empty { display: none; }

/* Sprungziel, damit die Überschrift nicht unter dem Rand klebt. */
.ankerziel { display: block; height: 0; scroll-margin-top: 5rem; }

/* Die zwei Wege: neu anfangen oder weitermachen. */
.wege {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.2rem;
}

/* Die Rückwege oben links. Die Nutzerin soll wählen können, ob sie zur
   Startseite mit der Begrüßung will oder direkt zur Funnelliste. */
.zurueckgruppe {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.zurueckgruppe .zurueck {
  padding: .3rem .6rem;
  border-radius: var(--rund);
  border: 1px solid transparent;
}

.zurueckgruppe .zurueck:hover {
  background: var(--bordeaux-tief);
  border-color: var(--bordeaux-rand);
}

/* ------------------------------------------------------- Verfeinern
   Der Weg zwischen selbst tippen und alles neu schreiben. */

.verfeinern {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordeaux-rand);
}

.verfeinern .beschriftung {
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--schrift-still);
  margin-bottom: .5rem;
}

.verfeinern .vwunsch {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .6rem .7rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
}

.verfeinern .vwunsch:focus {
  outline: none;
  border-color: var(--rose-matt);
}

/* Was sich geändert hat */
.vkopf {
  margin-top: 1rem;
  padding: .8rem .95rem;
  border: 1px solid var(--gruen);
  background: rgba(111, 169, 111, .08);
  border-radius: var(--rund);
}

.vkopf.achtung {
  border-color: var(--warnung);
  background: rgba(217, 140, 74, .1);
}

.vkopf .verklaerung { margin: .4rem 0 0; }

.vspur {
  margin-top: .7rem;
  padding: .8rem .95rem;
  background: var(--schwarz-tief);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  line-height: 1.8;
  font-size: .96rem;
  max-height: 20rem;
  overflow-y: auto;
}

.vgleich { color: var(--schrift-still); }

.vweg {
  color: var(--warnung);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.vneu {
  color: var(--schrift);
  background: rgba(111, 169, 111, .22);
  border-radius: 3px;
  padding: .05rem .2rem;
  font-weight: 600;
}

/* ============================================================ Launchplan */

/* Was du selbst erledigst, bevor es losgeht. */
.vorpunkt {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: .6rem;
  line-height: 1.5;
}

.vorkasten {
  flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem;
  margin-top: .22rem;
  border: 2px solid var(--rose-matt);
  border-radius: 3px;
}

/* Die Phasen über den Tagen. */
.phasenkopf {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  margin: 2rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--bordeaux-rand);
}

.phasenkopf .pname {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rose);
}

.phasenkopf .pzeile { font-size: .9rem; }

/* Ein Tag im Plan. */
.tagkarte {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}

.tagnummer { text-align: center; }
.tagnummer .tzahl {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--rose);
  line-height: 1;
}
.tagnummer .twort {
  display: block;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schrift-still);
}

/* E-Mail und Beitrag nebeneinander, gleichwertig. */
.tagspalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

@media (max-width: 760px) {
  .tagspalten { grid-template-columns: 1fr; }
}

.tagteil {
  border: 1px solid var(--bordeaux-rand);
  border-left: 3px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .6rem .75rem;
  min-width: 0;
}

.tagteil.fertig { border-left-color: var(--gruen); }
.tagteil.offen  { border-left-color: var(--warnung); }
.tagteil.leer   { opacity: .45; }

.tagteil .tart {
  display: block;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--schrift-still);
  margin-bottom: .2rem;
}

.tagteil .ttitel {
  display: block;
  font-weight: 600;
  color: var(--schrift);
  text-decoration: none;
  line-height: 1.35;
}
.tagteil .ttitel:hover { color: var(--rose-hell); text-decoration: underline; }

.tagteil .tanfang {
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--schrift-leise);
  margin-top: .35rem;
}

.tagteil .tzustand {
  display: block;
  font-size: .8rem;
  color: var(--schrift-still);
  margin-top: .35rem;
}

/* Textproben aus der eigenen Feder. */
.textprobe { margin-top: 1rem; }

.textprobe .beschriftung {
  display: block;
  font-size: .86rem;
  color: var(--schrift-still);
  margin-bottom: .35rem;
}

.probenfeld {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .7rem .8rem;
  font-family: inherit;
  font-size: .98rem;
  line-height: 1.6;
  resize: vertical;
}

.probenfeld:focus { outline: none; border-color: var(--rose-matt); }
.textprobe .angabeknoepfe { margin-top: .45rem; }


/* Der Schnellzugriff in der linken Spalte der Gespraechsseite. */
.slinspalte {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordeaux-rand);
}
.slinspalte .slprojekt { font-size: .88rem; padding: .4rem .6rem; }


/* Die Rolle ueber dem Produktnamen in der Leiste. Klein, damit sie
   fuehrt und nicht dominiert. */
.slprodukt { align-items: flex-start; }
.slptext { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.slrolle {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rose-matt);
}
.slprodukt.offen .slrolle { color: var(--rose); }

/* Was dieses Produkt nicht braucht, steht blasser da. */
.slbereich.nichtnoetig { opacity: .45; }
.slbereich.nichtnoetig .slfortschritt { font-style: italic; }


/* Die Funnelleiste oben auf der Produktseite. Der ganze Funnel als
   Reihe von Karten, damit die Reihenfolge sichtbar ist und nicht erst
   erschlossen werden muss. */
.funnelleiste {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: 1.4rem;
  scrollbar-width: thin;
}

.funnelkarte {
  flex: 0 0 15.5rem;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .7rem .85rem;
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  background: var(--bordeaux-tief);
  color: var(--schrift-leise);
  text-decoration: none;
}
a.funnelkarte:hover { border-color: var(--rose-matt); color: var(--schrift); }

.funnelkarte.jetzt {
  border-color: var(--rose);
  background: var(--bordeaux-hell);
  color: var(--schrift);
  cursor: default;
}

.fkrolle {
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rose-matt);
}
.funnelkarte.jetzt .fkrolle { color: var(--rose); }

.fkname {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fkzeile {
  font-size: .76rem;
  line-height: 1.45;
  color: var(--schrift-still);
  margin-top: .15rem;
}

.fkstand {
  margin-top: .3rem;
  font-size: .78rem;
  color: var(--schrift-still);
}

/* Reiter, die dieses Produkt nicht braucht. */
.reiterknopf.nichtnoetig { opacity: .45; }
.reiterknopf.nichtnoetig .zaehler { font-style: italic; }

@media (max-width: 700px) {
  .funnelkarte { flex-basis: 11rem; }
}


/* Der Weg zum Verkauf, rechts auf der Funnelseite. Nur die Etappe, die
   gerade dran ist, zeigt ihren Erklaertext. Der Rest bleibt eine Zeile,
   sonst wird die Spalte zur Wand. */
.wegetappe {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: start;
  padding: .5rem .55rem;
  border-radius: var(--rund);
  color: var(--schrift-still);
  text-decoration: none;
  font-size: .86rem;
  line-height: 1.4;
}
a.wegetappe:hover { background: var(--bordeaux-tief); color: var(--schrift); }

.wegzeichen { text-align: center; opacity: .8; }
.wegtext { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.wegtitel { color: var(--schrift-leise); }
.wegzahl { font-size: .76rem; white-space: nowrap; }

.wegetappe.fertig .wegzeichen { color: var(--gruen); }
.wegetappe.fertig .wegtitel { color: var(--schrift-still); }
.wegetappe.fehlt .wegzeichen { color: var(--warnung); }

.wegetappe.jetzt {
  background: var(--bordeaux-tief);
  border: 1px solid var(--bordeaux-rand);
  color: var(--schrift);
}
.wegetappe.jetzt .wegtitel { color: var(--schrift); font-weight: 600; }
.wegetappe.jetzt .wegzeichen { color: var(--rose); }

.wegzeile, .wegwas {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--schrift-still);
}
.wegwas { color: var(--rose-hell); margin-top: .2rem; }

.wegziel {
  margin: .9rem .55rem 0;
  padding-top: .7rem;
  border-top: 1px solid var(--bordeaux-rand);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--schrift-still);
}


/* Der Weg zurueck. Frueher waren das drei kleine graue Links, die man
   uebersehen konnte. Jetzt einer, der sagt, wohin er fuehrt. */
.zurueck.zurueckhaupt {
  padding: .38rem .7rem;
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  color: var(--schrift-leise);
  background: var(--bordeaux-tief);
}
.zurueck.zurueckhaupt:hover {
  border-color: var(--rose-matt);
  color: var(--schrift);
}

/* Die Abschlusskarte ganz unten. */
.karte.abschluss { margin-top: 1.6rem; }

.einzelnfeld {
  margin-top: 1.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
}
.einzelnfeld.an { border-color: var(--rose-matt); }
.einzelnfeld h3 {
  margin: 0 0 .4rem;
  font-size: 1rem;
}
.einzelnfolge { margin-bottom: .8rem; }


/* Der Weg zum Verkauf, oben in der Seitenleiste. Auf jeder Seite an
   derselben Stelle. Nur die Etappe, die dran ist, sagt, was zu tun ist. */
.slwegzeile {
  display: grid;
  grid-template-columns: .9rem minmax(0, 1fr) auto;
  gap: .4rem;
  align-items: start;
  padding: .3rem .45rem;
  border-radius: var(--rund);
  color: var(--schrift-still);
  text-decoration: none;
  font-size: .82rem;
  line-height: 1.35;
}
a.slwegzeile:hover { background: var(--bordeaux-tief); color: var(--schrift); }

.slwegzeichen { text-align: center; opacity: .75; }
.slwegtext { display: flex; flex-direction: column; min-width: 0; }
.slwegtitel { color: var(--schrift-leise); }
.slwegzahl { font-size: .72rem; white-space: nowrap; }

.slwegzeile.fertig .slwegzeichen { color: var(--gruen); }
.slwegzeile.fehlt .slwegzeichen { color: var(--warnung); }

.slwegzeile.jetzt {
  background: var(--bordeaux-tief);
  border: 1px solid var(--bordeaux-rand);
  color: var(--schrift);
}
.slwegzeile.jetzt .slwegtitel { color: var(--schrift); font-weight: 600; }
.slwegzeile.jetzt .slwegzeichen { color: var(--rose); }

.slwegwas {
  margin-top: .15rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--rose-hell);
}


/* Das Themenfeld auf der Startseite. Es ist jetzt ein Textfeld statt
   einer Zeile, weil dort ein Satz hineingehoert und kein Name. */
.anlegekarte textarea {
  width: 100%;
  resize: vertical;
  min-height: 3.4rem;
}
.anlegekarte .diktatplatz { margin-top: .5rem; }

/* Ein Knopf, der wie ein Link aussieht. Fuer den Weg ohne Thema, der
   moeglich sein muss, aber nicht der Hauptweg ist. */
.alslink {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--rose);
  text-decoration: underline;
  cursor: pointer;
}
.alslink:hover { color: var(--rose-hell); }

.ohnethema { margin-top: 1rem; }

/* Antwort verwerfen: sichtbar, aber leiser als die Anpass-Knoepfe,
   damit der Blick zuerst beim Weitermachen bleibt und nicht beim Rueckgaengig. */
.chip.zurueck { color: var(--schrift-leise); }
.chip.zurueck:hover {
  border-color: var(--rose-matt);
  color: var(--schrift);
}

/* Zeilen in einer Sprechblase. Zwischen Aufzaehlungspunkten steht eine
   ganze Leerzeile, nicht nur ein Spalt. Carmens Wort am 24.08.2026 war
   Leerzeile, und eine Liste aus acht Punkten braucht sie auch. */
.blase .text .zeile { display: block; }
.blase .text .zeile + .zeile.listenzeile { margin-top: 1.1rem; }

/* Die Nutzerin schreibt ELIANAs Antwort selbst um. */
.selbstschreiben { margin-top: .3rem; }
.selbsttext {
  width: 100%;
  min-height: 8rem;
  background: var(--schwarz-tief);
  border: 1px solid var(--rose-matt);
  border-radius: var(--rund);
  color: var(--schrift);
  padding: .7rem .8rem;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}
.selbstknoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .5rem;
}
.selbstknoepfe .klein { padding: .35rem .9rem; font-size: .9rem; }
.selbstmarke {
  margin-left: .5rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rose);
}
.blase.selbstgeschrieben { border-color: var(--rose-matt); }

/* Wo zuletzt etwas festgehalten wurde. Bleibt oben stehen, damit die
   Nutzerin nach einer Pause nicht suchen muss. */
.stelle {
  margin-top: .45rem;
  font-size: .9rem;
  color: var(--schrift-leise);
  border-left: 3px solid var(--rose-matt);
  padding-left: .6rem;
}
.stelle b { color: var(--schrift); font-weight: 600; }

/* ---------------------------------------------- Aufbau in systeme.io */
.aufbauschritt { transition: opacity .2s; }
.aufbauschritt.fertig { opacity: .5; }
.aufbauschritt.fertig .aufbauinhalt { display: none; }
.aufbaukopf { display: flex; gap: 1rem; align-items: flex-start; }
.aufbauhaken { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.aufbauhaken input { width: 1.3rem; height: 1.3rem; cursor: pointer; }
.aufbaunummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.08); font-weight: 700; font-size: .95rem;
}
.aufbautitel h2 { margin: 0 0 .3rem; }
.aufbauwarum { margin: 0; }
.aufbauinhalt { margin-top: 1rem; padding-left: 3.6rem; }
.aufbauliste { margin: 0; padding-left: 1.2rem; line-height: 1.7; }
.aufbauliste li { margin-bottom: .55rem; }
.aufbauwarnung {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: 8px;
  background: rgba(255,214,102,.12); border: 1px solid rgba(255,214,102,.35);
  line-height: 1.6;
}
.aufbaufehlt {
  margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 8px;
  background: rgba(255,255,255,.06); line-height: 1.6;
}
.aufbauwerkzeuge {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.aufbaukauflink { flex: 1 1 100%; margin-top: .4rem; }
@media (max-width: 700px) {
  .aufbauinhalt { padding-left: 0; }
}

/* Die Anleitung zum Ausdrucken, in der linken Leiste unter dem
   systeme.io-Schritt. Bewusst leiser als die Etappen selbst, sie ist
   eine Hilfe und kein weiterer Schritt. */
.slanleitung {
  display: block; margin: .1rem 0 .5rem 2.1rem;
  padding: .35rem .6rem; border-radius: 6px;
  font-size: .82rem; text-decoration: none;
  color: var(--akzent, #E2A0A8); opacity: .82;
  border: 1px dashed rgba(255,255,255,.18);
}
.slanleitung:hover { opacity: 1; border-style: solid; }
.slanleitung::before { content: "↓ "; }


/* ─────────────────────────────── Die mitlaufende Vorschau
   Sie zeigt waehrend des Ausfuellens, was gerade entsteht. Vorher gab
   es nur einen Knopf, der einen neuen Tab oeffnete. Carmen hat am
   28.08.2026 darauf hingewiesen, dass die Nutzerin ihre Seite beim
   Bauen sehen soll. */
.vorschaukasten {
  margin-top: 1.4rem; border: 1px solid var(--linie, #E3DCD4);
  border-radius: 14px; overflow: hidden; background: var(--karte, #fff);
}
.vorschaukopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: .7rem .9rem;
  border-bottom: 1px solid var(--linie, #E3DCD4);
}
.vorschautitel { font-weight: 700; font-size: .92rem; }
.vorschauknoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.vorschauknoepfe .wahl { font-size: .82rem; padding: .32rem .8rem;
                         text-decoration: none; }
.vorschaurahmen { background: #F4F1EC; padding: 0; }
.vorschaurahmen iframe {
  width: 100%; height: 62vh; min-height: 380px; border: 0;
  display: block; background: #fff;
}
/* Am Handy: der Rahmen wird schmal, damit man sieht, wie die Seite auf
   einem Telefon aussieht. Das ist der haeufigste Weg, auf dem eine
   Kundin die Seite spaeter oeffnet. */
.vorschaurahmen.handy { padding: 1.2rem; display: flex;
                        justify-content: center; }
.vorschaurahmen.handy iframe {
  width: 390px; max-width: 100%; height: 60vh; border-radius: 20px;
  box-shadow: 0 14px 40px -22px rgba(0,0,0,.45);
}
.vorschaufuss { padding: .7rem .9rem; margin: 0; font-size: .84rem; }

/* Sagt der Nutzerin, dass ein leerer Vorschaukasten nichts mit ihren
   Texten zu tun hat. Sonst denkt sie, die Arbeit sei weg. */
.vorschaustoerung {
  margin: 0;
  padding: .8rem .9rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--bordeaux-tief);
  border-top: 1px solid var(--bordeaux-rand);
}

/* ------------------------------------------------------------------
   Bildwerkstatt

   Cover und Mockup stehen nebeneinander, damit man sofort sieht, dass
   beide dasselbe Bild zeigen. Die Motive darunter als Kacheln, mit
   "Kein Motiv" an erster Stelle, damit der Rueckweg immer sichtbar ist.
   ------------------------------------------------------------------ */

.bildfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem 1.1rem;
  margin: 1.2rem 0 1.4rem;
}
.bildfelder label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .88rem;
  color: var(--leise, #6b6560);
}
.bildfelder input {
  padding: .6rem .8rem;
  font-size: .98rem;
}

.bildpaar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.4rem;
  align-items: start;
  margin-top: 1.2rem;
}
@media (max-width: 44rem) {
  .bildpaar { grid-template-columns: 1fr; }
}
.bildfeld { margin: 0; }
/* Ein hohes Cover allein in seiner Karte wuerde sonst die halbe Seite
   fuellen, und Carmen muesste an ihm vorbeiscrollen, um an die Knoepfe
   zu kommen. Genau das sollte der Umbau am 05.09.2026 abstellen. */
.bildfeld.hoch { max-width: 19rem; }
.bildfeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
  box-shadow: 0 .6rem 1.6rem rgba(20, 16, 14, .13);
  background: #f2efec;
}
.bildfeld figcaption { margin-top: .6rem; }

.wahlreihe.eng { gap: .35rem; }
.wahl.klein { padding: .32rem .65rem; font-size: .82rem; }
.wahl.ausgegraut { opacity: .42; cursor: not-allowed; }

.motivreihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .9rem;
  margin-top: 1.1rem;
}
.motivkachel {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .45rem;
  border: 3px solid transparent;
  border-radius: .6rem;
  background: var(--flaeche, #faf7f5);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.motivkachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.2rem rgba(20, 16, 14, .14);
}
.motivkachel.an { border-color: var(--akzent, #8a5a68); }
.motivkachel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: .35rem;
}
.motivleer {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--linie, #d9d2cc);
  border-radius: .35rem;
  font-size: .9rem;
}
.motivwort { font-size: .8rem; color: var(--leise, #6b6560); }

.still.warnung { color: #9c2b2b; }

/* ------------------------------------------------------------------
   Sprungleiste auf der Produktseite

   Sie klebt oben fest und nennt die Ziele beim Namen. Ohne sie musste
   man eine sehr lange Seite hinunterscrollen, um ueberhaupt zu
   erfahren, dass es Verkaufsseite und Bilder gibt.
   ------------------------------------------------------------------ */

.sprungleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.4rem;
  padding: .6rem 0;
  background: var(--bordeaux-tief, #1a0d13);
  border-bottom: 1px solid var(--bordeaux-rand, #3d2029);
}
.sprungleiste:empty { display: none; }

.sprung {
  padding: .45rem .95rem;
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: 2rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sprung:hover { border-color: var(--rose, #eca2c1); }
.sprung.an {
  background: var(--rose, #eca2c1);
  border-color: var(--rose, #eca2c1);
  color: #2a0e16;
  font-weight: 600;
}

/* Die Produktreihe auf der Funnel-Seite, quer unter dem Kopfbalken. */
.funnelleiste-oben {
  padding: .7rem 1.4rem;
  border-bottom: 1px solid var(--bordeaux-rand, #3d2029);
  overflow-x: auto;
  flex: 0 0 auto;
}

.vorschlagchip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .6rem .4rem 0;
  padding: .35rem .7rem;
  border: 1px dashed var(--bordeaux-rand, #3d2029);
  border-radius: 2rem;
}
.knopf.winzig {
  padding: .2rem .6rem;
  font-size: .8rem;
  border-radius: 1.5rem;
}

/* Die Zeilenvorschlaege fuers Cover.

   Vorher standen sie als schmale gestrichelte Chips in einer Zeile,
   mit einem winzigen "uebernehmen" mittendrin. Carmen am 05.09.2026:
   "Man kann die erstellten Saetze fast gar nicht lesen und uebersieht
   sie schnell." Jetzt drei Bloecke untereinander, jeder gross genug
   zum Lesen, mit einem eigenen Knopf am Ende. */
/* Je Geraet eine Zeile: links der Name, rechts was darauf liegt. */
.geraetezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bordeaux-rand, #3d2029);
}
.geraetezeile:last-child { border-bottom: 0; }
.geraetename {
  min-width: 8.5rem;
  font-weight: 600;
}
.geraetezeile .wahlreihe { margin-top: 0; }
.wahl .wahlbild {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
  border-radius: .25rem;
  margin-right: .4rem;
  vertical-align: -.35rem;
}

.zeilenvorschlag {
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: .6rem;
  padding: .9rem 1rem;
  margin: .8rem 0;
}
.zeilenvorschlag .format {
  display: block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: .35rem;
}
.zeilenvorschlag .vorschlagtitel {
  display: block;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .3rem;
}
.zeilenvorschlag .satz {
  display: block;
  font-size: 1.02rem;
  line-height: 1.5;
  margin-bottom: .7rem;
}

/* Das Klappmenue fuer die Richtung sieht aus wie die Textfelder daneben. */
.bildfelder select {
  padding: .6rem .8rem;
  font: inherit;
  font-size: .98rem;
  color: inherit;
  background: var(--flaeche, #241318);
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: .4rem;
}

/* Das Klappmenue war unleserlich: dunkler Text auf dunklem Grund, weil
   der Browser seine eigene Schriftfarbe nimmt. Beides wird gesetzt,
   auch fuer die einzelnen Eintraege. */
.bildfelder select,
.bildfelder select option {
  color: var(--schrift, #f4e9ec);
  background: var(--bordeaux-tief, #1a0d13);
}
.bildfelder select { appearance: none; padding-right: 2rem; }

.knopf.winzig.neu {
  border: 1px solid var(--rose, #eca2c1);
  background: transparent;
  color: var(--rose, #eca2c1);
}
.knopf.winzig.neu:hover { background: rgba(236, 162, 193, .14); }

/* Loeschen sitzt in der Ecke der Kachel, sichtbar aber nicht laut. */
.motivkachel { position: relative; }
.motivwahl {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.motivweg {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.7rem;
  height: 1.7rem;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 10, 14, .62);
  color: #f4e9ec;
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s;
}
.motivkachel:hover .motivweg,
.motivweg:focus-visible { opacity: 1; }
.motivweg:hover { background: rgba(160, 30, 50, .92); }

.vorschlagchip { flex-wrap: wrap; max-width: 100%; }
.vorschlagwort { display: inline; }

/* Der Weg nach draussen. Ein Pfeil sagt, dass hier ein fremdes
   Fenster aufgeht, damit niemand erschrickt. */
.slanleitung.slhinaus::after { content: " \2197"; }

.spaltenschalter { width: 100%; margin-bottom: 1.2rem; text-align: center; }

/* Zuklappbare Abschnitte der Seitenspalte. Das Dreieck zeigt, dass hier
   etwas aufgeht, und dreht sich mit. */
.sltitel.klappbar { cursor: pointer; user-select: none; }
.sltitel.klappbar::before {
  content: "\25be";
  display: inline-block;
  width: 1em;
  transition: transform .15s;
}
.sltitel.klappbar.zu::before { transform: rotate(-90deg); }

/* Die Nummern im Weg, in derselben Sprache wie die Schrittliste. */
.slwegzeichen.fertig { font-weight: 700; }

/* Erledigte Etappen gruen hinterlegen. Ein Haken allein sieht man
   nicht, eine Flaeche schon. */
.slwegzeile.fertig {
  background: rgba(93, 130, 67, .16);
  border-radius: .5rem;
}
.slwegzeile.fertig .slwegzeichen {
  color: #8ec06c;
}
/* Was nur Leitlinie ist, sieht auch nicht nach Knopf aus. */
.slwegzeile:not(a) { cursor: default; }

/* Die letzte Karte der Reihe ist kein Produkt, sondern der Schritt
   danach. Ein anderer Rand sagt das, ohne dass es dastehen muss. */
.funnelkarte.fkschritt {
  border-style: dashed;
  border-color: var(--rose, #eca2c1);
}

/* Ein Punkt sagt: in diesem Bereich steht schon etwas. Ohne ihn muesste
   man jeden Bereich anklicken, um zu sehen, wo man weitermachen kann. */
.sprung { position: relative; }
.sprungpunkt {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-left: .45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}
.sprung.an .sprungpunkt { opacity: .85; }

/* Der Satz auf einer leeren Bausteinkarte. Er steht etwas eingerückt
   unter dem Titel, damit klar ist, dass er zu diesem Baustein gehört
   und keine allgemeine Anweisung ist. */
.bausteinhinweis {
  margin: .1rem 0 .2rem 2.5rem;
  max-width: 46rem;
  line-height: 1.5;
}

.kopfknoepfe { display: inline-flex; gap: .6rem; align-items: center; }

/* Der kleine Knopf neben dem Funnelnamen. Er soll da sein, aber nicht
   um Aufmerksamkeit kämpfen. */
.namensknopf {
  margin-left: .6rem;
  padding: .12rem .5rem;
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .74rem;
  opacity: .55;
  cursor: pointer;
}
.namensknopf:hover { opacity: 1; border-color: var(--rose, #eca2c1); }

/* Die Begrüßung beim Wiederkommen. Ruhig, kein Kasten, der schreit. */
.willkommen {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: .7rem;
  background: rgba(236, 162, 193, .06);
}
.wkgruss { margin: 0 0 .5rem; font-size: 1.08rem; font-weight: 600; }
.wkzeile { margin: 0 0 .25rem; opacity: .85; font-size: .96rem; }
.wkjetzt { opacity: 1; }
.wkknopf { display: inline-block; margin-top: .8rem; }

/* Der Schalter für die gesprochene Begrüßung. Klein, neben der Karte. */
.wkton {
  margin-top: .8rem;
  padding: .3rem .8rem;
  border: 1px solid var(--bordeaux-rand, #3d2029);
  border-radius: 1.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .84rem;
  opacity: .7;
  cursor: pointer;
}
.wkton::before { content: "\1F50A\00A0"; }
.wkton:hover { opacity: 1; }
.wkton.an { opacity: 1; border-color: var(--rose, #eca2c1); }

.wknochmal { margin-left: .5rem; }
.wknochmal::before { content: "\21BB\00A0"; }

/* Die Liste in der Begrüßung: Produkt für Produkt, was fehlt. */
.wkliste {
  margin: .9rem 0 0;
  padding-left: 1.1rem;
  font-size: .94rem;
  line-height: 1.6;
}
.wkliste li { margin-bottom: .2rem; }
.wkliste li.fertig { opacity: .55; }
.wkliste li.fertig::marker { content: "\2713\00A0"; }

/* ================================================== Elianas Knopf, der Kreis
   Der runde Knopf mit dem E, der auf jeder Seite steht. Ein Klick, und
   ELIANA sagt, wo man gerade steht.

   Er bewegt sich sichtbar, aber ruhig: zwei Ringe, die alle vier
   Sekunden nach aussen laufen. Carmen am 02.09.2026: "Man sieht nicht,
   dass dieser Kreis in Bewegung ist, das ist nur so schwach
   erkennbar." Der Kern atmet dazu langsam mit.

   Waehrend ELIANA nachschaut, dreht sich ein heller Bogen. So sieht
   man, dass sie arbeitet, und wartet nicht vor einem stillen Bild. */

.standkreis {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 60;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.standkreis .skring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rose);
  opacity: 0;
  animation: skatmen 4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

.standkreis .sk2 { animation-delay: 2s; }

@keyframes skatmen {
  0%   { transform: scale(.55); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: scale(1.35); opacity: 0; }
}

.standkreis .skkern {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--rose-hell);
  background:
    radial-gradient(circle at 35% 30%, var(--bordeaux-hell), var(--bordeaux-tief) 70%);
  border: 1px solid var(--rose-matt);
  animation: skpuls 4s ease-in-out infinite;
  transition: transform .2s ease;
}

@keyframes skpuls {
  0%, 100% { box-shadow: 0 0 16px rgba(226, 160, 168, .18); }
  50%      { box-shadow: 0 0 30px rgba(226, 160, 168, .42); }
}

.standkreis:hover .skkern { transform: scale(1.07); }
.standkreis.offen .skkern { border-color: var(--rose); }

/* Waehrend sie nachschaut: ein drehender Bogen um den Kern. */
.standkreis.arbeitet .skkern::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--rose);
  border-right-color: var(--rose-matt);
  animation: skdrehen .9s linear infinite;
}

@keyframes skdrehen { to { transform: rotate(360deg); } }

/* Der grosse Kreis auf der Startseite wird derselbe Knopf. */
.halo.fragbar { cursor: pointer; }
.halo.fragbar .ring { animation-duration: 4.5s; }
.halo.fragbar .r2 { animation-delay: 1.5s; }
.halo.fragbar .r3 { animation-delay: 3s; }
.halo.fragbar .kern { animation-duration: 4.5s; transition: transform .25s ease; }
.halo.fragbar:hover .kern { transform: scale(1.05); }

@keyframes halowink {
  0%, 100% { box-shadow: 0 0 34px rgba(226, 160, 168, .16); }
  50%      { box-shadow: 0 0 60px rgba(226, 160, 168, .38); }
}
.halo.fragbar .kern { animation-name: halowink; }

.halo.fragbar .halowink {
  position: absolute;
  bottom: .4rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .84rem;
  color: var(--schrift-still);
  border: 1px solid var(--bordeaux-rand);
  border-radius: 999px;
  padding: .2rem .7rem;
  background: var(--bordeaux-tief);
}

.halo.fragbar:hover .halowink { color: var(--rose); border-color: var(--rose-matt); }

.halo.fragbar.arbeitet .kern::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--rose);
  border-right-color: var(--rose-matt);
  animation: skdrehen .9s linear infinite;
}

/* --- Die Tafel, die der Knopf oeffnet --- */

/* Die Tafel geht neben dem Knopf auf, also links oben. Die Leiste ist
   16,5rem breit, die Tafel setzt sich direkt daneben. */
.standtafel {
  position: fixed;
  left: 17.4rem;
  top: 4.5rem;
  z-index: 61;
  width: min(34rem, calc(100vw - 3.2rem));
  max-height: min(38rem, calc(100vh - 10rem));
  overflow-y: auto;
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund-gross);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  padding: 1.5rem 1.6rem 1.3rem;
  animation: standauf .22s ease;
}

@keyframes standauf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.standzu {
  position: absolute;
  top: .5rem;
  right: .7rem;
  background: none;
  border: 0;
  color: var(--schrift-still);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
}
.standzu:hover { color: var(--rose); }

.standgruss {
  margin: 0 0 .8rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--schrift);
  padding-right: 1.4rem;
}

.standzeile {
  margin: 0 0 .7rem;
  line-height: 1.6;
  color: var(--schrift-leise);
}

.standjetzt { color: var(--rose-hell); }

.standliste {
  list-style: none;
  margin: .3rem 0 1rem;
  padding: 0;
  border-top: 1px solid var(--bordeaux-rand);
}

.standliste li {
  border-bottom: 1px solid var(--bordeaux-rand);
  padding: .6rem 0;
  line-height: 1.55;
}

.standliste li a {
  color: var(--schrift-leise);
  text-decoration: none;
  display: block;
}
.standliste li a:hover { color: var(--rose-hell); }

.standliste li.fertig a,
.standliste li.fertig { color: var(--schrift-still); }
.standliste li.fertig::before { content: "✓ "; color: var(--gruen); }

.standknoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }

.standknopf {
  border: 1px solid var(--bordeaux-rand);
  background: var(--bordeaux-tief);
  color: var(--schrift-leise);
  border-radius: var(--rund);
  padding: .5rem 1rem;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.standknopf:hover { border-color: var(--rose-matt); color: var(--rose-hell); }
.standknopf.stark { border-color: var(--rose-matt); color: var(--rose-hell); }

/* Unter 900px liegt die Leiste als Block oben, nicht mehr als Spalte.
   Dann setzt sich die Tafel ueber die ganze Breite darunter. */
@media (max-width: 900px) {
  .standtafel {
    left: .8rem; right: .8rem; top: auto; bottom: 1rem;
    width: auto; max-height: calc(100vh - 6rem);
  }
  .standkreis { right: 1rem; bottom: 1rem; }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt hier auch keine. */
@media (prefers-reduced-motion: reduce) {
  .standkreis .skring { animation: none; opacity: .35; transform: scale(1); }
  .standkreis .skkern,
  .halo.fragbar .kern { animation: none; }
  .standtafel { animation: none; }
}

/* --- Elianas Knopf in der linken Leiste ---
   Ganz oben, direkt unter dem Namen, auf jeder Seite an derselben
   Stelle. Carmen am 02.09.2026: "Unten rechts sieht das ja gar kein
   Mensch." Dort schaut wirklich niemand hin. */

.standleiste {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  margin: 0 0 1.1rem;
  padding: .6rem .7rem;
  background: var(--bordeaux);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--schrift);
  transition: border-color .2s ease, background .2s ease;
}

.standleiste:hover {
  border-color: var(--rose-matt);
  background: var(--bordeaux-hell);
}

.standleiste .slkreis {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.standleiste .skring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rose);
  opacity: 0;
  animation: skatmen 4s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}

.standleiste .skkern {
  position: relative;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 300;
  color: var(--rose-hell);
  background:
    radial-gradient(circle at 35% 30%, var(--bordeaux-hell), var(--bordeaux-tief) 70%);
  border: 1px solid var(--rose-matt);
  animation: skpuls 4s ease-in-out infinite;
}

.standleiste .sltext {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.standleiste .sltext strong {
  font-size: .97rem;
  font-weight: 600;
  color: var(--schrift);
}

.standleiste .sltext span {
  font-size: .8rem;
  color: var(--schrift-still);
}

.standleiste.offen { border-color: var(--rose-matt); }

.standleiste.arbeitet .skkern::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--rose);
  border-right-color: var(--rose-matt);
  animation: skdrehen .9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .standleiste .skring { animation: none; opacity: .35; transform: scale(1); }
  .standleiste .skkern { animation: none; }
}

/* Auf der Gespraechsseite steht der Knopf oben in der linken Spalte,
   dort gibt es keine schmale Leiste mit Namen. */
.spalte-links > .standleiste { margin-bottom: 1.3rem; }

/* --- Die Tafel spricht, sie schreibt nicht ---
   Carmen am 02.09.2026: "Es ist ueberall viel zu viel Text, das ist
   wie ein Dschungel, durch den man sich durcharbeiten muss." Also
   steht hier ein Satz, alles Weitere klappt man auf. */

.standtafel { width: min(28rem, calc(100vw - 3.2rem)); }

.standmehr { border-top: 1px solid var(--bordeaux-rand); padding-top: .9rem;
             margin-bottom: .3rem; }

.standknopf.leise { border-color: transparent; color: var(--schrift-still); }
.standknopf.leise:hover { color: var(--rose-hell); }

.standfrage { margin: .9rem 0 .2rem; }

.standfeld {
  width: 100%;
  background: var(--schwarz-tief);
  color: var(--schrift);
  border: 1px solid var(--bordeaux-rand);
  border-radius: var(--rund);
  padding: .6rem .7rem;
  font: inherit;
  resize: vertical;
  margin-bottom: .6rem;
}
.standfeld:focus { outline: none; border-color: var(--rose-matt); }

.standantwort {
  margin: .8rem 0 0;
  line-height: 1.6;
  color: var(--schrift);
  border-left: 2px solid var(--rose-matt);
  padding-left: .8rem;
}

/* Der Stopp-Knopf faellt auf, solange ELIANA redet. */
.standknopf.stopp {
  border-color: var(--rose-matt);
  color: var(--rose-hell);
}
.standknopf.stopp::before { content: "◼ "; font-size: .8em; }

/* Was jetzt dran ist, steht unter der Kopfzeile und faellt auf. */
.standtafel .standjetzt {
  margin: 0 0 .9rem;
  line-height: 1.55;
  color: var(--rose-hell);
  border-left: 2px solid var(--rose-matt);
  padding-left: .8rem;
}

/* --- Die Farbe von Elianas Knopf ---
   Carmen am 02.09.2026: "Kannst du den Button wo stehe ich in Gold
   oder Waldgruen machen."

   Beides steht hier. Umgestellt wird an genau einer Stelle, unten bei
   --knopfton. Gold ist ihre Markenfarbe, Waldgruen die Alternative. */

:root {
  --gold:            #C9A227;
  --gold-hell:       #E3C05A;
  --gold-tief:       #4A3A0E;
  --gold-rand:       #7A6418;

  --waldgruen:       #4E7A52;
  --waldgruen-hell:  #8FBF93;
  --waldgruen-tief:  #16301A;
  --waldgruen-rand:  #2F5233;

  /* Hier wird umgestellt: gold oder waldgruen. */
  --knopfton:        var(--gold);
  --knopfton-hell:   var(--gold-hell);
  --knopfton-tief:   var(--gold-tief);
  --knopfton-rand:   var(--gold-rand);
}

.standleiste {
  background: var(--knopfton-tief);
  border-color: var(--knopfton-rand);
}
.standleiste:hover {
  border-color: var(--knopfton);
  background: var(--knopfton-tief);
}
.standleiste .skring { border-color: var(--knopfton); }
.standleiste .skkern {
  color: var(--knopfton-hell);
  border-color: var(--knopfton-rand);
  background:
    radial-gradient(circle at 35% 30%, var(--knopfton-rand), var(--knopfton-tief) 70%);
}
.standleiste .sltext strong { color: var(--knopfton-hell); }
.standleiste.offen { border-color: var(--knopfton); }
.standleiste.arbeitet .skkern::after {
  border-top-color: var(--knopfton);
  border-right-color: var(--knopfton-rand);
}

@keyframes knopfpuls {
  0%, 100% { box-shadow: 0 0 12px rgba(201, 162, 39, .20); }
  50%      { box-shadow: 0 0 26px rgba(201, 162, 39, .45); }
}
.standleiste .skkern { animation-name: knopfpuls; }

/* Die Diktierknoepfe in derselben Farbe. Carmen am 02.09.2026:
   "Vielleicht alle Diktierfunktions-Buttons."

   Das hat einen Nutzen ueber das Aussehen hinaus: alles, wo man mit
   ELIANA spricht oder sie sprechen hoert, traegt jetzt dieselbe Farbe.
   Rosa bleibt fuer alles andere. */

.mikro {
  border-color: var(--knopfton-rand);
  color: var(--knopfton-hell);
}
.mikro:hover {
  border-color: var(--knopfton);
  color: var(--knopfton-hell);
  background: var(--knopfton-tief);
}
.mikro.mikro-an {
  background: var(--knopfton);
  border-color: var(--knopfton);
  color: var(--schwarz);
  animation-name: mikropulston;
}

@keyframes mikropulston {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0); }
}

/* Die Themenbeispiele stehen als ganze Saetze da, nicht als Stichworte.
   Deshalb untereinander statt nebeneinander, und linksbuendig. */
.beispiele { flex-direction: column; align-items: stretch; }

.beispiel {
  border-radius: var(--rund);
  text-align: left;
  line-height: 1.5;
  padding: .5rem .8rem;
}

/* --- Der grosse Kreis auf der Startseite ---
   Carmen am 02.09.2026: "Bei Bordeaux wo stehe ich wegnehmen, und
   vielleicht das Logo groesser machen, damit man die Ringe, die sich
   bewegen, besser sehen kann."

   Die Beschriftung ist weg, der Kreis ist wieder reiner Empfang. Dafuer
   ist er groesser und die Ringe laufen dreimal so oft: alle viereinhalb
   Sekunden statt alle neun, und drei davon gleichzeitig unterwegs. Die
   fruehere Fassung war so langsam und so blass, dass man die Bewegung
   nur bemerkte, wenn man wartete. */

.halo { width: 19rem; height: 19rem; }

.halo .ring {
  border-color: var(--rose);
  animation-duration: 4.5s;
}
.halo .r1 { animation-delay: 0s; }
.halo .r2 { animation-delay: 1.5s; }
.halo .r3 { animation-delay: 3s; }

@keyframes atmen {
  0%   { transform: scale(.38); opacity: 0; }
  15%  { opacity: .75; }
  100% { transform: scale(1);   opacity: 0; }
}

.halo .kern {
  width: 8rem; height: 8rem;
  font-size: 2.6rem;
  animation-duration: 4.5s;
}

@keyframes kernpuls {
  0%, 100% { box-shadow: 0 0 34px rgba(226, 160, 168, .16); }
  50%      { box-shadow: 0 0 64px rgba(226, 160, 168, .40); }
}

@media (max-width: 760px) {
  .halo { width: 15rem; height: 15rem; }
  .halo .kern { width: 6.4rem; height: 6.4rem; font-size: 2.1rem; }
}

/* Der kleine Kreis im Knopf bekommt ebenfalls mehr Platz, sonst laufen
   die Ringe auf zweieinhalb Millimetern und man sieht sie nicht. */
.standleiste .slkreis { width: 3.2rem; height: 3.2rem; }
.standleiste .skkern { width: 2.3rem; height: 2.3rem; font-size: 1.15rem; }

/* Die Spalte muss mitwachsen, sonst wird der groessere Kreis
   beschnitten. */
.empfang { grid-template-columns: minmax(0, 19rem) 1fr; }

/* Mehrere Funnels stehen untereinander, mit einer Ueberschrift darueber
   statt einer Marke auf jeder Karte. */
.schrittmarke.ueberkarten { margin-bottom: .7rem; }
#inarbeit .arbeitskarte + .arbeitskarte { margin-top: .8rem; }

/* Was in diesem Funnel als Naechstes ansteht. Steht ueber dem Stand,
   weil es die Frage beantwortet, wegen der man hinschaut. */
.projektnaechst {
  margin: .35rem 0 .2rem;
  color: var(--rose-hell);
  line-height: 1.45;
}