/* ============================================================================
   MEMORO Partnerportal — schale.css
   Die Schale: Anmeldung als Kapsel, Innenbereich als Liquid-Glass-Dashboard.

   Ergaenzt tokens.css, ersetzt es NICHT. Farben, Knoepfe, Eingabefelder,
   Pillen und der Sparbetrieb kommen weiter von dort; hier steht nur, was die
   Schale ausmacht: der bewegte Grund, die Seitenleiste, das Glas, die
   Bildfelder und die Kapsel der Anmeldung.

   Uebernommen aus `entwuerfe/5-liquid.html` und `entwuerfe/5-liquid-innen.html`
   (Stand 13.09.2026), ohne die vier Ausweich-Hintergruende und ohne den
   Umschalter: Entschieden ist das Lichtspiel.

   MERKSATZ ZUM GLAS: Die Lesbarkeit traegt der Weichzeichner, nicht die
   Deckkraft. `brightness()` hebt den Grund UNTER der Karte an, statt einen
   Schleier darueber zu legen — deshalb bleibt das Bild dahinter sichtbar und
   die Schrift trotzdem lesbar.
   ============================================================================ */
:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --ink:#150C13;

  /* Glas */
  --flaeche:rgba(255,255,255,.52);
  --kante:rgba(255,255,255,.72);
  --blur:blur(40px) saturate(170%) brightness(1.10);
  --trenn:rgba(112,72,97,.11);
  --schatten-glas:0 1px 0 rgba(255,255,255,.85) inset,0 12px 34px rgba(71,42,59,.10);
  --radius-glas:24px;

  /* Kleinteile liegen AUF dem Glas und brauchen eigene Werte: eine weisse
     Flaeche auf hellem Glas waere ein Loch. */
  --feld:rgba(255,255,255,.78);
  --feld-kante:rgba(255,255,255,.9);
  --dunkelfeld:#241520;
  --leise:#5F4E59;
}

/* ============================================================================
   1 · Der Grund: Lichtspiel
   Liegt fest hinter der Seite und scrollt nicht mit. Animiert wird NUR
   transform — Groesse oder Position zu animieren zwingt den Browser in jedem
   Bild zu einem neuen Layout.
   ========================================================================= */
.grund{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#EFEAEE}
.g-licht{position:absolute;inset:0;
  background:linear-gradient(125deg,#E4CCE2 0%,#F4DAC0 26%,#F8E9D4 48%,#DCD2F0 72%,#EBCDD8 100%)}
.g-licht i{position:absolute;display:block;border-radius:50%;filter:blur(84px);opacity:.95;
  will-change:transform}
.g-licht i:nth-child(1){width:56vw;aspect-ratio:1;left:-14vw;top:-20vh;background:#C89BC6;animation:g1 30s ease-in-out infinite alternate}
.g-licht i:nth-child(2){width:48vw;aspect-ratio:1;right:-12vw;top:26vh;background:#F2BE8A;animation:g2 35s ease-in-out infinite alternate}
.g-licht i:nth-child(3){width:42vw;aspect-ratio:1;left:26vw;bottom:-22vh;background:#B7ABE2;animation:g3 32s ease-in-out infinite alternate}
.g-licht i:nth-child(4){width:34vw;aspect-ratio:1;right:18vw;top:-14vh;background:#EFAAB4;animation:g4 27s ease-in-out infinite alternate}
.g-licht::after{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.92) 50%,transparent 72%);
  animation:lichtzug 22s ease-in-out infinite}
.g-licht::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(145% 115% at 50% 18%,rgba(255,255,255,0),rgba(255,255,255,.16))}
@keyframes g1{to{transform:translate3d(9%,7%,0) scale(1.14)}}
@keyframes g2{to{transform:translate3d(-8%,10%,0) scale(1.10)}}
@keyframes g3{to{transform:translate3d(7%,-9%,0) scale(1.16)}}
@keyframes g4{to{transform:translate3d(-6%,8%,0) scale(1.12)}}
@keyframes lichtzug{0%,100%{transform:translateX(-22%)}50%{transform:translateX(22%)}}
html.sparsam .g-licht i{filter:blur(60px);animation:none}
html.sparsam .g-licht::after{animation:none;opacity:.3}

.glas{background:var(--flaeche);border:1px solid var(--kante);box-shadow:var(--schatten-glas);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{background:rgba(255,255,255,.95)}
}

/* ============================================================================
   2 · Das Dashboard: Seitenleiste und Hauptspalte
   ========================================================================= */
body.schale{background:#EFEAEE;min-height:100svh;display:grid;grid-template-columns:230px 1fr;
  gap:44px;padding:26px 46px 48px 28px;color:var(--text)}
@media (max-width:1280px){ body.schale{gap:32px;padding:26px 32px 44px 26px} }
@media (max-width:980px){ body.schale{grid-template-columns:1fr;padding:12px;gap:14px} }

.seite{border-radius:26px;padding:22px 16px;display:flex;flex-direction:column;
  position:sticky;top:26px;height:calc(100svh - 66px)}
.seite__marke{display:flex;align-items:center;padding:2px 8px 22px}
.seite__marke img{height:24px;width:auto}

/* Zweispaltige Icon-Kacheln: Zeichen oben, Wort darunter, aktiver Punkt als
   dunkle Flaeche. Sie sind groesser als Menuezeilen und damit auch am Telefon
   sicher zu treffen (44 px Mindestmass). */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.kacheln a{display:flex;flex-direction:column;gap:10px;padding:14px 12px;border-radius:17px;
  text-decoration:none;color:var(--text);font-size:12.5px;font-weight:500;
  background:var(--feld);border:1px solid var(--feld-kante);
  position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}
.kacheln a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.kacheln a:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(71,42,59,.8)}
.kacheln a[aria-current]{background:var(--dunkelfeld);border-color:transparent;color:#fff}
.kacheln a[aria-current]::after{content:"";position:absolute;inset:0 auto 0 -70%;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:kachelglanz 7s ease-in-out infinite}
@keyframes kachelglanz{0%,72%{left:-70%}100%{left:140%}}
.kacheln .punkt{position:absolute;top:10px;right:11px;width:7px;height:7px;border-radius:50%;
  background:var(--pflaume);box-shadow:0 0 0 0 rgba(112,72,97,.5);animation:pochen 2.6s ease-out infinite}
.kacheln a[aria-current] .punkt{background:#E9C7DB}
/* Rote Zahl: was in diesem Bereich zu tun ist (Verwaltung, 09.10.2026). */
.kachel-zahl{position:absolute;top:9px;right:9px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:600;line-height:1;
  background:#D64545;color:#fff;box-shadow:0 0 0 2px var(--papier)}
.kachel-zahl[hidden]{display:none}
.bereich__zahl--rot{background:#D64545 !important;color:#fff !important}
@keyframes pochen{0%{box-shadow:0 0 0 0 rgba(112,72,97,.45)}70%,100%{box-shadow:0 0 0 9px rgba(112,72,97,0)}}

.wege{display:flex;flex-direction:column;gap:1px}
.wege a,.wege button{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  text-decoration:none;color:var(--leise);font:inherit;font-size:13.5px;width:100%;
  background:transparent;border:0;cursor:pointer;text-align:left;
  transition:background .22s var(--ease),color .22s var(--ease)}
.wege svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}
.wege a:hover,.wege button:hover{background:rgba(255,255,255,.6);color:var(--text)}
.wege a[aria-current]{background:rgba(255,255,255,.68);color:var(--text);font-weight:500}
.wege .zahl{margin-left:auto;font-size:11px;font-weight:500;min-width:18px;height:18px;
  border-radius:999px;display:grid;place-items:center;background:var(--pflaume);color:#fff}

.seite__fuss{margin-top:auto;display:flex;align-items:center;gap:10px;padding:11px;
  border-radius:16px;background:var(--feld);border:1px solid var(--feld-kante)}
.seite__fuss .avatar{width:32px;height:32px;font-size:12px}
.seite__fuss b{display:block;font-size:12.5px;font-weight:500}
.seite__fuss span:not(.avatar){font-size:11px;color:var(--leise)}
/* Mit Logo: Logo oben, Name und Stufe darunter, keine Initialen. */
.seite__fuss--logo{flex-direction:column;align-items:flex-start;gap:9px;padding:14px 13px 12px}
.seite__fuss--logo .avatar{display:none}
.seite__logo{display:block;max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain}

/* Impressum, Datenschutz und AGB stehen am Fuss JEDER Seite. Sie liegen im
   Inhalt (`.haupt`), nicht in der Schale: Die Schale legt sich hochkant quer
   und blendet dort sogar ihren eigenen Fuss aus — eine Pflichtangabe darf
   aber nicht verschwinden, weil der Bildschirm schmal ist. */
.rechtszeile{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;
  margin:var(--raum-4) 0 0;font-size:11.5px;color:var(--leise)}
.rechtszeile a{color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:color .22s var(--ease),border-color .22s var(--ease)}
.rechtszeile a:hover{color:var(--text);border-bottom-color:currentColor}

.haupt{display:flex;flex-direction:column;gap:24px;min-width:0;width:100%;max-width:960px}
@media (max-width:1180px){ .haupt{max-width:none} }

.kopfzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:6px 4px 0}
.kopfzeile h1{font-size:clamp(22px,2.5vw,27px);margin:0 0 2px}
.kopfzeile .datum{font-size:13px;color:var(--leise)}

/* Die Mitgliedschaft als Pille, nicht als Zeile: vier Woerter brauchen keine
   eigene Flaeche ueber die volle Breite. Die Pille ist zugleich der Weg zur
   naechsten Stufe — ein Klick oeffnet das Fenster mit den Vorteilen. */
.mitgliedspille{margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--text);
  padding:7px 7px 7px 16px;border-radius:999px;
  border:1px solid var(--feld-kante);background:var(--feld);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.mitgliedspille .wappen{width:16px;height:16px;flex:none;stroke:var(--pflaume);fill:none;stroke-width:1.7}
.mitgliedspille__pfeil{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#5E4058 0%,#7B5270 45%,#A0728C 100%);
  transition:transform .3s var(--ease)}
.mitgliedspille__pfeil svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.9}
.mitgliedspille:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(71,42,59,.8)}
.mitgliedspille:hover .mitgliedspille__pfeil{transform:translateX(2px)}

.wz{display:inline-flex;align-items:center;gap:8px;padding:10px 17px;
  border-radius:999px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  border:1px solid var(--feld-kante);background:var(--feld);color:var(--text);
  transition:background .25s var(--ease)}
.wz svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.wz:hover{background:var(--feld-kante)}

/* Der Videoknopf. Gefuellt statt Glas, damit er sich von „Frage stellen"
   abhebt und man am Telefon darauf zeigen kann: „Oben rechts, Gruppenkonferenz."

   Auf `partner.html` ist er ein Klappmenue mit zwei Wegen (Gruppenkonferenz
   oder eigener Raum), auf den uebrigen Seiten ein einfacher Link in die
   Gruppenkonferenz: Dort gibt es keinen Betrieb, dem ein Kundengespraech
   gehoeren koennte.

   Zum `margin-left:auto`: Auf Verwaltung, Inhalte und Mitarbeiter steht rechts
   in der Kopfzeile sonst nichts, der Knopf schiebt sich also selbst nach
   rechts. Auf `partner.html` tut das bereits die Mitgliedspille — ein ZWEITES
   auto wuerde den freien Platz zwischen beiden aufteilen und die Kopfzeile
   auseinanderziehen. Darum nimmt die Geschwisterregel es dort wieder weg. */
.wz--video{margin-left:auto;color:#fff;border-color:transparent;text-decoration:none;
  background:linear-gradient(135deg,#5E4058 0%,#7B5270 45%,#A0728C 100%);
  box-shadow:0 10px 24px -16px rgba(71,42,59,.9);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.wz--video:hover{background:linear-gradient(135deg,#523751 0%,#6E4763 45%,#8F6480 100%);
  transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(71,42,59,.9)}
.kopfzeile .mitgliedspille ~ .wz--video{margin-left:0}
html.sparsam .wz--video{transition:none;transform:none}

/* ---------------------------------------------------------------------------
   Das Klappmenue am Videoknopf

   Zum `margin-left`: Es sass am Knopf selbst, solange er direkt in der
   Kopfzeile stand. Jetzt steckt er in `.vmenu`, und das Schieben nach rechts
   muss eine Ebene hoeher — sonst schiebt sich der Knopf INNERHALB der Klappe
   nach rechts, und die Kopfzeile bleibt links kleben.
   --------------------------------------------------------------------------- */
.vmenu{position:relative;margin-left:auto}
.vmenu>.wz--video{margin-left:0}
.kopfzeile .mitgliedspille ~ .vmenu{margin-left:0}
.vmenu__pfeil{margin-left:-2px;transition:transform .25s var(--ease)}
.vmenu[data-offen] .vmenu__pfeil{transform:rotate(180deg)}

/* Die Klappe haengt rechts aussen: Der Knopf steht am rechten Rand, eine
   links ausgerichtete Klappe waere halb aus dem Bild. */
.vmenu__klappe{position:absolute;top:calc(100% + 8px);right:0;z-index:40;
  min-width:286px;padding:7px;border-radius:18px;
  background:var(--feld);border:1px solid var(--feld-kante);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 22px 48px -24px rgba(44,26,37,.55);
  display:grid;gap:3px}
.vmenu__klappe[hidden]{display:none}
.vmenu__klappe>*{display:grid;grid-template-columns:20px 1fr;gap:11px;
  align-items:start;width:100%;text-align:left;
  padding:11px 12px;border-radius:13px;border:0;background:none;
  font:inherit;font-size:14px;color:var(--text);cursor:pointer;text-decoration:none;
  transition:background .2s var(--ease)}
.vmenu__klappe>*:hover,.vmenu__klappe>*:focus-visible{background:var(--feld-kante)}
.vmenu__klappe svg{width:18px;height:18px;margin-top:2px;stroke:var(--pflaume);
  fill:none;stroke-width:1.7}
.vmenu__klappe b{font-weight:500;display:block}
.vmenu__klappe small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;
  color:var(--leise)}

@media (max-width:620px){
  .mitgliedspille span:not(.mitgliedspille__pfeil){display:none}
  .mitgliedspille{padding:7px}
  .wz--video{padding:9px 14px}
  /* Auf dem Telefon ist die Kopfzeile umgebrochen; eine rechts verankerte
     Klappe von 286 px haengt dann aus dem Bild. */
  .vmenu__klappe{right:auto;left:0;min-width:min(286px,calc(100vw - 48px))}
}

/* ---------------------------------------------------------------------------
   Der fertige Einladungslink

   Er muss GROSS und auswaehlbar sein: Der haeufigste Weg ist nicht der
   Kopierknopf, sondern „markieren und in WhatsApp ziehen". `word-break` statt
   `overflow:hidden`, damit nichts abgeschnitten wird, was jemand braucht.
   --------------------------------------------------------------------------- */
.glink{display:grid;gap:10px;margin:14px 0 0;padding:14px 16px;border-radius:14px;
  background:var(--feld);border:1px solid var(--feld-kante)}
.glink__adresse{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.6;color:var(--text);word-break:break-all;
  -webkit-user-select:all;user-select:all}
.glink__reihe{display:flex;flex-wrap:wrap;gap:8px}
.glink__hinweis{font-size:12.5px;line-height:1.5;color:var(--leise);margin:0}

/* ============================================================================
   3 · Die vier Bildfelder
   ZWEI pro Reihe: Vier nebeneinander waeren Kacheln, zwei sind Flaechen.
   Die Beschriftung sitzt nicht auf dem Foto, sondern auf einer eigenen
   Glasleiste — bei vier verschiedenen Motiven gibt es keine Helligkeit, auf
   die man sich verlassen kann.
   3:2 ist das Seitenverhaeltnis von boutique.webp: Das Bild steht
   vollstaendig im Feld.
   ========================================================================= */
.bereiche{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:820px){ .bereiche{grid-template-columns:1fr} }
.bereich{position:relative;display:block;overflow:clip;border-radius:24px;
  aspect-ratio:3/2;text-decoration:none;color:var(--text);
  border:1px solid var(--kante);box-shadow:var(--schatten-glas);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bereich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.bereich::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(26,15,23,.16) 100%)}
.bereich__leiste{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:16px;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(22px) saturate(170%) brightness(1.14);
  backdrop-filter:blur(22px) saturate(170%) brightness(1.14);
  box-shadow:0 1.5px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(255,255,255,.3) inset,
             0 10px 24px -12px rgba(46,30,40,.30)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bereich__leiste{background:rgba(255,255,255,.94)}
}
.bereich__leiste b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.015em;color:#1A0F17}
.bereich__leiste span{font-size:12px;color:#5F4E59}
.bereich__zahl{margin-left:auto;flex:none;font-size:11px;font-weight:500;
  padding:4px 10px;border-radius:999px;background:rgba(112,72,97,.12);color:#472A3B}
.bereich__pfeil{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#241520;transition:transform .35s var(--ease)}
.bereich__zahl + .bereich__pfeil{margin-left:0}
.bereich__pfeil svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8}
@media (hover:hover) and (pointer:fine){
  .bereich:hover{transform:translateY(-4px);
    box-shadow:0 1.5px 0 rgba(255,255,255,.5) inset,0 26px 54px -20px rgba(46,30,40,.34)}
  .bereich:hover img{transform:scale(1.05)}
  .bereich:hover .bereich__pfeil{transform:translateX(3px)}
}
html.sparsam .bereich img{transition:none}

/* ============================================================================
   4 · Die Inhaltsansichten
   Eine Ansicht ist sichtbar, die uebrigen stehen auf hidden. Kein Neuladen:
   Die Daten sind schon da, und ein Seitenwechsel wuerde sie erneut holen.
   ========================================================================= */
.ansicht[hidden]{display:none}
.block{border-radius:var(--radius-glas);padding:26px}
.block__kopf{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.block__kopf h2{margin:0;font-size:16.5px;font-weight:500;margin-right:auto}
.block__kopf .leise{margin:0}

.eintrag{display:flex;align-items:center;gap:14px;padding:13px 0;flex-wrap:wrap}
.eintrag + .eintrag{border-top:1px solid var(--trenn)}
.sym{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--feld);border:1px solid var(--feld-kante)}
.sym svg{width:18px;height:18px;stroke:var(--pflaume);fill:none;stroke-width:1.6}
.eintrag__text{flex:1;min-width:160px}
.eintrag__text b{display:block;font-size:14.5px;font-weight:500}
.eintrag__text span{font-size:12.5px;color:var(--leise)}
.knopf-klein{font:inherit;font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:999px;
  border:1px solid var(--feld-kante);background:var(--feld);color:var(--pflaume);
  cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:background .22s var(--ease)}
.knopf-klein:hover{background:var(--feld-kante)}
.knopf-klein:disabled{opacity:.5;cursor:not-allowed}

.leerlauf{text-align:center;padding:34px 20px;color:var(--leise);font-size:14px}
.leerlauf strong{display:block;color:var(--text);font-weight:500;margin-bottom:5px;font-size:15px}
.ladebalken{height:14px;border-radius:999px;background:rgba(255,255,255,.5);margin:10px 0}

/* Reiter der Unterlagen. Dieselbe Pillenform wie `.kreiter` auf der
   Anmeldeseite, nur für hellen Grund. Auf dem Telefon laufen sie seitlich
   weiter statt umzubrechen: Zwei Reihen Reiter lesen sich wie zwei Menüs. */
.reiter{display:flex;gap:3px;padding:4px;border-radius:999px;margin:-4px 0 14px;
  background:rgba(112,72,97,.07);border:1px solid rgba(112,72,97,.08);
  overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{flex:none;font:inherit;font-size:13px;font-weight:500;padding:8px 14px;
  border:0;border-radius:999px;background:transparent;color:var(--leise);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.reiter button span{font-size:11px;font-variant-numeric:tabular-nums;opacity:.7}
.reiter button:hover{color:var(--text)}
.reiter button[aria-selected="true"]{background:rgba(255,255,255,.95);color:var(--pflaume-tief);
  box-shadow:0 4px 14px -8px rgba(71,42,59,.45)}
.reiter button:focus-visible{outline:2px solid var(--pflaume);outline-offset:1px}

/* Die Rubriken in „Alle". Die Überschrift trennt, deshalb keine Linie über
   der ersten Zeile einer Rubrik. */
.rubrik + .rubrik{margin-top:22px}
.rubrik__kopf{margin:0 0 2px;font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise)}

/* Das Formular fuer Fragen liegt auf Glas: gerahmte weisse Kaesten wuerden
   die Flaeche zerschlagen, deshalb hier hellere Felder mit feiner Linie. */
.block .eingabe{background:rgba(255,255,255,.72);border-color:var(--feld-kante)}

/* ============================================================================
   5 · Das Fenster mit den Vorteilen
   <dialog> statt eigenem Overlay: Fokusfalle, ESC und Verdunkelung bringt der
   Browser mit. Der Preis der Innovationsgruppe steht auch hier NICHT — er ist
   ausdruecklich nicht oeffentlich.
   ========================================================================= */
.stufenfenster{border:0;padding:0;max-width:min(520px,calc(100vw - 32px));width:100%;
  background:transparent;overflow:visible}
.stufenfenster::backdrop{background:rgba(26,15,23,.44);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stufenfenster[open]{animation:fensterauf .38s var(--ease)}
@keyframes fensterauf{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
html.sparsam .stufenfenster[open]{animation:none}
.stufenfenster .zu{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;padding:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(36,21,32,.34);color:#fff;transition:background .25s var(--ease)}
.stufenfenster .zu:hover{background:rgba(36,21,32,.52)}
.stufenfenster .zu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.upgrade{position:relative;overflow:clip;border-radius:28px;padding:30px 32px;
  color:#fff;display:flex;flex-direction:column;
  background:linear-gradient(135deg,#5E4058 0%,#7B5270 38%,#A0728C 70%,#C79C86 100%);
  box-shadow:0 14px 40px -16px rgba(71,42,59,.50)}
.upgrade::after{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);
  animation:schimmer2 11s ease-in-out infinite}
@keyframes schimmer2{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
html.sparsam .upgrade::after{animation:none}
.upgrade > *{position:relative;z-index:1}
.upgrade .marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.78);display:block;margin-bottom:12px}
.upgrade h2{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:0 0 14px;color:#fff}
.upgrade p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 18px}
.upgrade dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0 0 20px;font-size:13.5px}
.upgrade dt{color:rgba(255,255,255,.72)}
.upgrade dd{margin:0;text-align:right;color:#fff}
.upgrade ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.upgrade li{font-size:13px;color:rgba(255,255,255,.90);display:flex;align-items:center;gap:9px}
.upgrade li svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.upgrade .tun{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;font-weight:500;text-decoration:none;color:#2A1A24;cursor:pointer;
  background:#fff;border:0;padding:11px 20px;border-radius:999px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.upgrade .tun svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.upgrade .tun:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,10,16,.24)}
.upgrade .klein{font-size:12.5px;color:rgba(255,255,255,.74);margin:12px 0 0}

/* Das Fenster zur Partnerschaft (09.10.2026): oben der Verlauf mit dem
   Vorteil, darunter hell die beiden Stufen nebeneinander. */
.partnerfenster{max-width:min(1120px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.partnerfenster__innen{position:relative;border-radius:28px;overflow:clip;background:var(--papier);
  color:var(--text);box-shadow:0 30px 80px -20px rgba(26,15,23,.45);
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.partnerfenster__innen > .zu{z-index:3}
.partnerfenster__kopf{border-radius:0;box-shadow:none;padding:30px 32px 26px}
.partnerfenster__kopf h2{font-size:clamp(22px,3.2vw,30px);margin:0 0 8px;max-width:28ch}
.partnerfenster__kopf p{margin:0 0 16px;max-width:52ch}
.partnerfenster__stand{align-self:flex-start;font-size:13px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff}
.partnerfenster__stand b{font-weight:500}
.partnerfenster__stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:22px 24px 6px}
@media (max-width:1000px) and (min-width:721px){ .partnerfenster__stufen{grid-template-columns:1fr 1fr} .stufenkarte--exklusiv{grid-column:1 / -1} }
.stufenkarte{position:relative;display:flex;flex-direction:column;border:1px solid var(--trenn);
  border-radius:20px;padding:22px 22px 20px;background:var(--papier)}
.stufenkarte h3{margin:0 0 6px;font-size:17px;font-weight:500}
.stufenkarte__preis{margin:0 0 16px;font-size:13.5px;color:var(--leise)}
.stufenkarte__preis b{font-size:26px;font-weight:500;color:var(--text);letter-spacing:-.02em;margin-right:4px}
.stufenkarte__preis span{display:block;font-size:12.5px;margin-top:2px}
.stufenkarte ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.stufenkarte li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.stufenkarte li svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:var(--pflaume);fill:none;stroke-width:2.2}
.stufenkarte li.nein{color:var(--leise)}
.stufenkarte li.nein svg{stroke:var(--leise)}
.stufenkarte__fuss{margin:0 0 14px;font-size:12.5px;color:var(--leise)}
.stufenkarte__fahne{position:absolute;top:-11px;right:18px;font-size:11.5px;font-weight:500;
  letter-spacing:.02em;padding:4px 11px;border-radius:999px;background:var(--pflaume);color:var(--text-auf-akzent)}
.stufenkarte--empfohlen{border:2px solid var(--pflaume);box-shadow:0 18px 40px -26px rgba(112,72,97,.6)}
.stufenkarte--exklusiv{background:linear-gradient(160deg,#2E1F2A,#4A3043);color:#F3ECEF;border-color:transparent}
.stufenkarte--exklusiv .stufenkarte__preis,.stufenkarte--exklusiv .stufenkarte__preis b{color:#fff}
.stufenkarte--exklusiv .stufenkarte__preis span{color:rgba(255,255,255,.7)}
.stufenkarte--exklusiv li svg{stroke:#E2C3D4}
.stufenkarte--exklusiv .stufenkarte__fahne{background:#C79C86;color:#2A1A24}
.stufenkarte__aktion{margin-top:auto}
.stufenkarte__aktion[hidden]{display:none}
.stufenkarte .tun--linie{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;padding:10px 18px;border-radius:999px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.stufenkarte .tun--linie:hover{background:rgba(255,255,255,.1)}
.stufenkarte .tun--linie svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.stufenkarte--meine .stufenkarte__fahne{background:var(--papier-tief);color:var(--pflaume-tief);
  border:1px solid var(--pflaume-zart)}
/* Der Wechselknopf sitzt unten in der gelisteten Karte, hell auf Pflaume. */
.stufenkarte #stufeAktion{margin-top:auto}
.stufenkarte #stufeAktion .tun{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;
  font-weight:500;cursor:pointer;border:0;padding:11px 20px;border-radius:999px;color:var(--text-auf-akzent);
  background:linear-gradient(180deg,#7d5070,var(--pflaume));box-shadow:0 6px 18px rgba(112,72,97,.26)}
.stufenkarte #stufeAktion .tun svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.stufenkarte #stufeAktion .tun:disabled{opacity:.6;cursor:wait}
.stufenkarte #stufeAktion .klein{margin:10px 0 0;font-size:12px;color:var(--leise)}
.partnerfenster__fuss{padding:16px 24px 24px}
.partnerfenster__fuss dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px;
  padding:14px 16px;border-radius:16px;background:var(--papier-warm)}
.partnerfenster__fuss dt{font-size:11.5px;color:var(--leise)}
.partnerfenster__fuss dd{margin:2px 0 0;font-size:13.5px}
.partnerfenster__fuss p{margin:0;font-size:13px;color:var(--leise)}
@media (max-width:720px){
  .partnerfenster__stufen{grid-template-columns:1fr;padding:22px 16px 6px;gap:22px}
  .partnerfenster__kopf{padding:26px 20px 22px}
  .partnerfenster__fuss{padding:14px 16px 20px}
  .partnerfenster__fuss dl{grid-template-columns:1fr 1fr}
}

/* Die Leiste oben in den Unterlagen: aktive Mitgliedschaft und der Weg zu
   den Vorteilen (09.10.2026). */
.mitglied-leiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px;
  padding:14px 16px;border-radius:18px;border:1px solid var(--pflaume-zart);
  background:linear-gradient(120deg,var(--papier-warm),var(--papier))}
.mitglied-leiste[hidden]{display:none}
.mitglied-leiste .wappen{width:22px;height:22px;flex:none;stroke:var(--pflaume);fill:none;stroke-width:1.7}
.mitglied-leiste__text{display:flex;flex-direction:column;gap:1px;min-width:0}
.mitglied-leiste__text > span{font-size:11.5px;color:var(--leise)}
.mitglied-leiste__text b{font-size:15px;font-weight:500}
.mitglied-leiste__stand{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:500;
  padding:2px 9px;border-radius:999px;background:#E3EFE6;color:#2F5D3E;vertical-align:2px}
.mitglied-leiste__stand[data-stand="wartet"]{background:#F4ECD9;color:#7A5A1C}
.mitglied-leiste__stand[data-stand="gesperrt"]{background:#EFE3E3;color:#7A2E2E}
.mitglied-leiste__vorteil{flex:1;min-width:200px;margin:0;font-size:13.5px;color:var(--leise)}
.mitglied-leiste .knopf{width:auto}

/* ============================================================================
   6 · Die Anmeldung: eine Kapsel vor dem laufenden Vorhang

   Drei Dinge machen sie aus: der volle Radius, das KLARE Fenster oben (durch
   das der Ort ungefiltert zu sehen ist) und der dunkle Knopf als einziger
   fester Punkt. Der Wechsel von klar zu milchig ist der Effekt, nicht der
   Weichzeichner allein.
   ========================================================================= */
body.anmeldung{background:#B9A7AE;min-height:100svh;display:grid;place-items:center;
  padding:24px;padding-block:84px 32px}
.filmgrund{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#B9A7AE}
.filmgrund video,.filmgrund img{width:100%;height:100%;object-fit:cover}
/* Nur ein Hauch an den Raendern, damit die Kapselkante sichtbar bleibt.
   KEINE Decke ueber der Mitte — der Vorhang soll zu sehen sein. */
.filmgrund::after{content:"";position:absolute;inset:0;
  background:radial-gradient(125% 85% at 50% 42%,transparent 0%,transparent 42%,rgba(71,42,59,.26) 100%)}

.kapsel{width:min(380px,92vw);border-radius:999px;overflow:clip;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 34px 90px rgba(40,22,34,.40),0 2px 0 rgba(255,255,255,.35) inset}
.kapsel--lang{border-radius:46px}

/* EIN HALBKREIS, KEIN KASTEN MIT RUNDEN ECKEN.
   Vorher stand hier eine feste Hoehe und ein Radius aus vier verschiedenen
   Werten; heraus kam ein Torbogen mit fast geraden Seiten. Ein Halbkreis
   entsteht aus zwei Bedingungen: Das Feld ist doppelt so breit wie hoch, und
   die beiden oberen Ecken bekommen waagerecht die halbe Breite, senkrecht die
   ganze Hoehe. Dann sind es zwei Viertelkreise, die sich in der Mitte treffen
   — bei jeder Fensterbreite. */
.bildfenster{position:relative;aspect-ratio:2/1;margin:8px 8px 0;overflow:clip;
  border-radius:50% 50% 0 0/100% 100% 0 0;
  border:1px solid rgba(255,255,255,.34);border-bottom:0}
.bildfenster img{width:100%;height:100%;object-fit:cover;object-position:54% 52%}
.bildfenster::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(71,42,59,.30) 100%)}

.koerper{padding:22px 28px 30px;text-align:center;color:#fff;
  background:rgba(96,70,84,.34);
  -webkit-backdrop-filter:blur(30px) saturate(130%);backdrop-filter:blur(30px) saturate(130%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .koerper{background:rgba(74,50,62,.92)}
}
.koerper .eyebrow{font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.72);
  margin-bottom:2px;display:block}
.koerper h1{font-size:38px;font-weight:400;letter-spacing:-.03em;margin:0 0 12px;color:#fff}
.koerper h2{font-size:21px;font-weight:500;margin:0 0 8px;color:#fff}
.koerper .zeilen{font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);margin-bottom:18px}

/* Eingaben: durchsichtig, mit Linie statt Kasten. Die Vorlage lebt von Ruhe. */
.kzeile{display:block;margin-bottom:11px;text-align:left}
.kzeile > span{display:block;font-size:12px;color:rgba(255,255,255,.74);margin:0 0 5px 17px}
.kzeile input{width:100%;font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:11px 17px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.kzeile input::placeholder{color:rgba(255,255,255,.55)}
.kzeile input:focus{outline:none;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.48)}
.kzwei{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){ .kzwei{grid-template-columns:1fr} }

.dunkel{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-size:16px;font-weight:500;color:#fff;cursor:pointer;
  background:#2A1A24;border:0;border-radius:999px;padding:15px 24px;margin-top:6px;
  box-shadow:0 10px 26px rgba(20,10,16,.42);
  transition:transform .25s var(--ease),background .25s var(--ease)}
.dunkel:hover{transform:translateY(-1px);background:#1C1019}
.dunkel:disabled{opacity:.6;cursor:not-allowed;transform:none}
.dunkel svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}

.kfuss{font-size:12.5px;color:rgba(255,255,255,.66);margin:14px 0 0}
.kfuss a{color:rgba(255,255,255,.86)}
.kfuss a:hover{color:#fff}

/* Die Wahl der Mitgliedschaft. Zwei Flaechen statt zweier Punkte: Auf einem
   Telefon ist ein Radiopunkt 12 Pixel gross, die Flaeche drumherum trifft
   jeder. Die gewaehlte hebt sich durch Rahmen und Grund ab, nicht nur durch
   den Punkt — Farbe allein ist kein Unterschied, den jeder sieht. */
/* DIE WAHL DER PARTNERSCHAFT.
   Erst waren es zwei graue Zeilen mit einem Radiopunkt, dann zwei Karten —
   beide Male ein Fremdkoerper in einer Kapsel, in der sonst nur Pillen
   stehen. Jetzt ist es dieselbe Form wie die Eingabefelder darueber, nur
   anklickbar: zwei Pillen nebeneinander. Gewaehlt heisst hell gefuellt, wie
   beim Reiter „Anmelden / Neu hier" — dieselbe Sprache fuer dieselbe Sache.

   Was die Wahl bedeutet, steht in einer Zeile darunter und wechselt mit ihr.
   In die Pille selbst passt es nicht, ohne dass sie zum Kasten wird. */
.kwahl{border:0;padding:0;margin:4px 0 14px;text-align:left}
.kwahl legend{font-size:12px;color:rgba(255,255,255,.74);padding:0;margin:0 0 7px 17px}
.kwahl-gitter{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kwahl label{display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  padding:11px 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.kwahl label:hover{background:rgba(255,255,255,.18)}
.kwahl input{position:absolute;opacity:0;pointer-events:none}
.kwahl label small{font-size:12px;font-weight:400;color:rgba(255,255,255,.64);
  transition:color .22s var(--ease)}
.kwahl label:has(input:checked),
.kwahl label.gewaehlt{background:rgba(255,255,255,.92);border-color:transparent;color:#2A1A24}
.kwahl label:has(input:checked) small,
.kwahl label.gewaehlt small{color:rgba(42,26,36,.62)}
/* Die Klasse fuehrt, nicht das :has(). Chrome wertet ein :has(:checked) nicht
   immer neu aus, wenn der Haken per Skript wandert — dann blieb die zuvor
   gewaehlte Pille hell, und wer von „Jetzt Regionaler Partner werden" kam,
   sah beide gefuellt. Traegt eine Pille die Klasse nicht, ist sie nicht
   gewaehlt, auch wenn das :has() etwas anderes meint. */
.kwahl-gitter.gefuehrt label:not(.gewaehlt){background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);color:#fff}
.kwahl-gitter.gefuehrt label:not(.gewaehlt) small{color:rgba(255,255,255,.64)}
.kwahl label:has(input:focus-visible){outline:2px solid rgba(255,255,255,.75);outline-offset:2px}
@media (max-width:360px){ .kwahl-gitter{grid-template-columns:1fr} }
.kwahl-fuss{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.66);margin:8px 17px 0}

/* Reiter zwischen Anmelden und Neu hier */
.kreiter{display:flex;gap:3px;padding:4px;border-radius:999px;margin-bottom:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.kreiter button{flex:1;font:inherit;font-size:13.5px;font-weight:500;padding:8px 12px;
  border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.kreiter button[aria-selected="true"]{background:rgba(255,255,255,.92);color:#2A1A24}

/* Meldungen in der Kapsel. Dunkler Grund, heller Text: die Ausnahmeliste aus
   tokens.css greift hier nicht, weil das Glas keine .aura ist. */
.kmeldung{display:none;margin-bottom:14px;padding:11px 16px;border-radius:18px;
  font-size:13.5px;line-height:1.45;text-align:left;
  background:rgba(90,31,46,.55);border:1px solid rgba(255,255,255,.24);color:#fff}
.kmeldung.an{display:block}

.marke-oben{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:5}
.marke-oben img{height:30px;width:auto;display:block}
.marke-oben::before{content:"";position:absolute;inset:-11px -20px;border-radius:999px;z-index:-1;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}

/* ============================================================================
   7 · Hochkant
   ========================================================================= */
/* Hochkant wird aus der Spalte eine Leiste. Die Wege werden dabei zu
   Zeichen ohne Wort — sie duerfen NICHT verschwinden: Abmelden und Kontakt
   waeren sonst am Telefon nicht erreichbar. */
@media (max-width:980px){
  .seite{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;
    gap:8px;padding:10px 12px;border-radius:20px}
  .seite__marke{padding:0 8px 0 4px}
  .kacheln{grid-template-columns:repeat(4,1fr);margin:0 0 0 auto;gap:6px;flex:1 1 auto}
  .kacheln a{font-size:0;padding:12px 10px;gap:0}
  .kacheln a svg{width:20px;height:20px}
  .wege{flex-direction:row;gap:4px}
  .wege a,.wege button{font-size:0;padding:11px;width:auto;border-radius:14px;
    background:var(--feld);border:1px solid var(--feld-kante);position:relative}
  .wege .zahl{position:absolute;top:-4px;right:-4px;margin:0;font-size:10px;
    min-width:16px;height:16px}
  /* Der Fuss faellt hochkant weg: Er traegt Name und Stufe, beides steht
     schon in der Begruessung und in der Pille daneben. Als einzige Zeile in
     einer zweiten Reihe kostete er mehr Platz, als er sagt. */
  .seite__fuss{display:none}
  .haupt{gap:18px}
}
@media (max-width:640px){
  .block{padding:18px;border-radius:20px}
  .kopfzeile{padding:2px 2px 0}
}

/* Eine gute Nachricht darf nicht aussehen wie eine Absage. Dieselbe Form,
   andere Farbe: Gruen statt dem warnenden Rot. */
.kmeldung.gut{background:rgba(40,78,58,.58)}

/* Ein `hidden` muss auch gegen Klassen gelten. `.knopf` setzt display, und
   das schlaegt die Regel des Browsers fuer [hidden] — ein versteckter Knopf
   blieb dadurch sichtbar. Einmal hier, statt an jeder Stelle einzeln. */
[hidden]{display:none !important}

/* Die Zwischenüberschrift einer Rubrik („In Ihrer Partnerschaft enthalten",
   „Gegen Rechnung"). Sie wird von `unterlagen.js` erzeugt UND steht im
   Markup von `partner.html` — deshalb hier und nicht dort. */
.rubrik__unter{margin:18px 0 2px;font-size:13px;font-weight:500;color:var(--pflaume-tief)}
.rubrik__unter:first-child{margin-top:6px}

/* ============================================================================
   UNTERLAGEN ALS LISTE MIT VORSCHAU (Entwurf F)

   Stand bis zum 06.10.2026 inline in `partner.html`. Hierher geholt, weil
   `inhalte.html` dieselbe Ansicht als Vorschau fuer die Verwaltung zeigt —
   zwei Kopien desselben Entwurfs laufen beim naechsten Umbau auseinander.
   Das Markup dazu erzeugt `unterlagen.js`.
   ============================================================================ */
/* =========================================================================
   UNTERLAGEN ALS LISTE MIT VORSCHAU (Entwurf F, Freigabe Mano 27.09.2026)

   Vorher: eine Liste, in der eine kostenfreie PDF genauso aussah wie eine
   Webseite fuer 2.950 Euro, und unter jedem Namen noch einmal derselbe Satz
   in Grau. Jetzt: eine Zeile je Stueck, ein Klick klappt sie auf.

   EINE ZEILE JE POSTEN, NIE ZWEI. Die graue Wiederholung unter dem Titel
   sagt dasselbe zweimal und kostet die doppelte Hoehe.
   ========================================================================= */
.ul-gruppe{display:flex;align-items:baseline;gap:var(--raum-4);margin:34px 0 10px}
.ul-gruppe:first-child{margin-top:4px}
/* Zwei Rubriken je Zeile (06.10.2026). Jede Rubrik ist ein eigener Block,
   damit eine lange Rubrik die Nachbarspalte nicht verschiebt. */
.ul-raster{display:grid;grid-template-columns:1fr;gap:28px 28px;align-items:start}
.ul-rubrik{min-width:0}
/* Erst ab 1280 px: Darunter nimmt die Seitenleiste so viel Platz, dass eine
   Spalte unter 320 px faellt und Namen in den Preis laufen (geprueft 1024 px). */
@media (min-width:1280px){ .ul-raster{grid-template-columns:1fr 1fr} }
@media (max-width:1279px){ .ul-raster{gap:0} .ul-rubrik + .ul-rubrik .ul-gruppe{margin-top:34px} }
.ul-rubrik .ul-gruppe{flex-wrap:wrap;row-gap:4px}
.ul-gruppe h3{font-size:15px;margin:0;font-weight:500;white-space:nowrap}
.ul-gruppe span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);white-space:nowrap}
.ul-gruppe::after{content:"";flex:1;height:1px;background:var(--trenn)}
/* Eine Zeile unter der Überschrift: was man in der Rubrik bekommt. */
.ul-folgen{margin:10px 2px 0;font-size:13px;color:var(--leise);font-style:italic}
.ul-preis{font-size:13px;color:var(--leise)}
.ul-kasse{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-left:auto}
.ul-kasse__knoepfe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){
  .ul-kasse{align-items:stretch;width:100%}
  .ul-kasse__knoepfe{flex-direction:column-reverse;align-items:stretch}
}
/* Die rechte Spalte darf schrumpfen. Ohne `min-width:0` nimmt ein Rasterfeld
   die Breite seines längsten unteilbaren Inhalts (Knopf + Preis) an und
   schiebt alles über den Rand der halben Spalte. */
.ul-vorschau > div{min-width:0}

/* IT-Leistungen im Fenster statt aufgeklappt (09.10.2026). Der Pfeil zeigt
   nach rechts: Hier klappt nichts auf, hier geht etwas auf. */
.ul-pfeil--fenster svg{transform:none}
.ul-fenster{border:0;padding:0;border-radius:24px;width:min(860px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);background:var(--papier);color:var(--text);
  box-shadow:0 30px 80px -20px rgba(26,15,23,.45)}
.ul-fenster::backdrop{background:rgba(26,15,23,.44);backdrop-filter:blur(3px)}
.ul-fenster__kopf{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;
  padding:18px 20px 16px 24px;background:var(--papier);border-bottom:1px solid var(--trenn)}
.ul-fenster__kopf h3{flex:1;min-width:0;margin:0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.ul-fenster__zu{flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(26,15,23,.07);display:grid;place-items:center;color:var(--text)}
.ul-fenster__zu svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ul-fenster .ul-auf{border-top:0;padding:20px 24px 24px}
@media (max-width:640px){ .ul-fenster .ul-auf{padding:16px} .ul-fenster__kopf{padding:14px 14px 12px 16px} }

/* Webseite und Landingpages: breites Fenster, kein Vorschaubild, die
   Beispielseiten selbst sind die Vorschau (09.10.2026). */
.ul-fenster--breit{width:min(1180px,calc(100vw - 32px))}
.ul-voll > p{max-width:72ch}

/* Individuelle Unterlagen: mittleres Fenster, Angaben unter dem Bild (09.10.2026). */
.ul-fenster--mittel{width:min(940px,calc(100vw - 32px))}

/* Hochkant: Bild groß links (bleibt beim Scrollen stehen), Angaben rechts
   in EINER Spalte. Quer: Bild ganz oben, Angaben darunter, Logo und Farbe
   wieder nebeneinander. Das Bild wird nie beschnitten. */
.ul-auftrag{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px;align-items:start}
.ul-auftrag__bild{position:sticky;top:88px;border-radius:14px;overflow:clip;
  border:1px solid var(--trenn);background:var(--papier-tief)}
.ul-auftrag__bild img{display:block;width:100%;height:auto}
.ul-auftrag__inhalt{min-width:0}
.ul-auftrag__inhalt > p{margin-bottom:18px}
.ul-auftrag:not(.ul-auftrag--quer) .ul-paar{grid-template-columns:1fr}
.ul-auftrag:not(.ul-auftrag--quer) .ul-stand{flex-basis:100%}
.ul-auftrag--quer{grid-template-columns:1fr;gap:20px}
.ul-auftrag--quer .ul-auftrag__bild{position:static}
@media (max-width:700px){
  .ul-auftrag{grid-template-columns:1fr;gap:18px}
  .ul-auftrag__bild{position:static}
  .ul-auftrag:not(.ul-auftrag--quer) .ul-auftrag__bild{max-width:300px}
}

/* Logo und Farbe nebeneinander, auf schmalen Schirmen untereinander. */
.ul-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.ul-paar > *{min-width:0}
/* Erzwingt eine neue Zeile in einer Pillenreihe. */
.ul-pillen__umbruch{flex-basis:100%;height:0;margin-top:-6px}
@media (max-width:700px){ .ul-paar{grid-template-columns:1fr} }
.ul-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ul-hochladen{width:auto;cursor:pointer}
.ul-hochladen input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ul-hochladen:has(input:focus-visible){outline:2px solid var(--pflaume);outline-offset:2px}
.ul-hochladen:has(input:disabled){opacity:.5;cursor:not-allowed}
.ul-logo__name{font-size:13px;color:var(--leise);min-width:0;overflow-wrap:anywhere}
.ul-pillen--klein{gap:6px}
.ul-pillen--klein span{min-height:34px;padding:0 13px;font-size:13px}
.ul-eingabe{width:100%;box-sizing:border-box;min-height:42px;font:inherit;font-size:14.5px;
  padding:9px 12px;border:1px solid var(--trenn);border-radius:12px;background:var(--papier);color:var(--text)}
.ul-eingabe:focus{outline:none;border-color:var(--pflaume);box-shadow:0 0 0 3px rgba(112,72,97,.12)}
.ul-eingabe:disabled{opacity:.6}
.ul-farbe{display:flex;align-items:center;gap:10px}
.ul-farbmuster{flex:none;width:42px;height:42px;border-radius:12px;border:1px dashed var(--trenn);
  background:var(--papier-tief);transition:background .2s var(--ease-out)}
.ul-farbmuster--an{border-style:solid;border-color:rgba(26,15,23,.15)}
.ul-schritt__hilfe--unter{margin:7px 0 0}
.ul-schritt__hilfe{margin:-4px 0 6px;font-size:13.5px;color:var(--leise);max-width:72ch}
.ul-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:6px}
.ul-design{position:relative;display:flex;flex-direction:column;border:2px solid var(--trenn);
  border-radius:14px;overflow:clip;background:var(--papier);cursor:pointer;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.ul-design input{position:absolute;opacity:0;pointer-events:none}
/* Der Rahmen scrollt: ganzseitiges Bild, 1000 px breit, auf die Kartenbreite
   gerechnet. So sieht man schon in der Liste die ganze Seite. */
.ul-design__rahmen{display:block;height:210px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--papier-tief);scrollbar-width:thin}
.ul-design__rahmen img{display:block;width:100%;height:auto}
.ul-design__rahmen:focus-visible{outline:2px solid var(--pflaume);outline-offset:-2px}
.ul-design__fuss{display:flex;align-items:center;gap:10px;padding:9px 10px 10px 12px;
  border-top:1px solid var(--trenn)}
.ul-design__fuss b{flex:1;min-width:0;font-size:13px;font-weight:500}
.ul-design__voll{flex:none;display:inline-flex;text-decoration:none;align-items:center;gap:6px;font:inherit;font-size:12px;
  font-weight:500;color:var(--pflaume-tief);background:var(--papier-tief);border:0;border-radius:999px;
  padding:6px 11px;cursor:pointer}
.ul-design__voll svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.ul-design__voll:hover{background:var(--papier-warm)}
.ul-design:hover{border-color:var(--pflaume-zart)}
.ul-design:has(input:checked){border-color:var(--pflaume);box-shadow:0 0 0 3px rgba(112,72,97,.14)}
.ul-design:has(input:checked) .ul-design__fuss{background:var(--pflaume);color:var(--text-auf-akzent)}
.ul-design:has(input:checked) .ul-design__fuss b::after{content:" · gewählt";font-weight:400;opacity:.85}

/* Vollbild einer Beispielseite. Volle Höhe, das Bild scrollt. */
.ul-vollbild{border:0;padding:0;width:min(1240px,calc(100vw - 24px));height:calc(100dvh - 24px);
  max-height:none;border-radius:20px;background:var(--papier);color:var(--text);
  box-shadow:0 30px 80px -20px rgba(26,15,23,.5)}
.ul-vollbild[open]{display:flex;flex-direction:column}
.ul-vollbild::backdrop{background:rgba(26,15,23,.6);backdrop-filter:blur(4px)}
.ul-vollbild__kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px 12px 20px;
  border-bottom:1px solid var(--trenn)}
.ul-vollbild__kopf h3{flex:1;min-width:160px;margin:0;font-size:16px;font-weight:500}
.ul-vollbild__kopf .knopf-klein{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text)}
.ul-vollbild__kopf .knopf-klein[hidden]{display:none}
.ul-vollbild__bild{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--papier-tief)}
.ul-vollbild__bild img{display:block;width:100%;height:auto;max-width:1200px;margin:0 auto}

/* Fragebogen */
.ul-fragebogen{border:1px solid var(--trenn);border-radius:14px;padding:14px 16px;background:var(--papier-warm)}
.ul-fragebogen p{margin:0 0 12px;font-size:14px;color:var(--leise);max-width:72ch}
.ul-fragebogen__zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ul-fragebogen__stand{font-size:13px;color:var(--leise)}
.ul-fenster__kopf .ul-fragebogen__stand{flex:none;white-space:nowrap}
@media (max-width:640px){ .ul-fenster__kopf .ul-fragebogen__stand{display:none} }
.fb-einleitung{margin:0 0 18px;font-size:14.5px;color:var(--leise);max-width:72ch}
.fb-abschnitt{border:0;margin:0 0 26px;padding:0;min-width:0}
.fb-abschnitt legend,.fb-abschnitt h3{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 12px;
  font-size:16px;font-weight:500}
.fb-nr{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:500;background:var(--pflaume);color:var(--text-auf-akzent)}
.fb-frage{display:block;margin:0 0 14px}
.fb-frage b{display:block;font-size:14.5px;font-weight:500;margin-bottom:3px}
.fb-frage > span{display:block;font-size:13px;color:var(--leise);margin-bottom:6px}
.fb-frage textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14.5px;line-height:1.5;
  padding:10px 12px;border:1px solid var(--trenn);border-radius:12px;background:var(--papier);
  resize:vertical;min-height:64px;color:var(--text)}
.fb-frage textarea:focus{outline:none;border-color:var(--pflaume);box-shadow:0 0 0 3px rgba(112,72,97,.12)}
.fb-frage--lesen p{margin:2px 0 0;font-size:14px;line-height:1.55;white-space:pre-line}
.fb-leer{color:var(--leise);font-style:italic}
.fb-fuss{position:sticky;bottom:0;z-index:2;background:var(--papier);
  margin:0 -24px -24px;padding:14px 24px 16px;box-shadow:0 -10px 20px -14px rgba(26,15,23,.18)}
@media (max-width:640px){ .fb-fuss{margin:0 -16px -16px;padding:12px 16px 14px} }
.ul-design__fuss{flex-wrap:wrap;row-gap:6px}

.ul-stueck{background:var(--papier);border:1px solid var(--trenn);
  border-radius:14px;overflow:clip;margin-bottom:8px}
.ul-stueck[open]{border-color:var(--linie-stark);box-shadow:var(--schatten-karte)}
/* Das Dreieck des Browsers muss zweifach weg: `list-style` fuer die meisten,
   das WebKit-Pseudoelement fuer Safari. `display:flex` allein raeumt es NICHT
   weg, und dann hat die Zeile zwei Zeichen fuer dieselbe Sache. */
.ul-griff{list-style:none;display:flex;align-items:center;gap:14px;width:100%;
  padding:10px 14px;cursor:pointer;min-width:0;
  transition:background .18s var(--ease-out)}
.ul-griff::-webkit-details-marker{display:none}
.ul-griff:hover{background:var(--papier-warm)}
.ul-daumen{width:40px;height:52px;flex:none;border-radius:6px;overflow:clip;
  border:1px solid var(--trenn);background:var(--papier-tief);position:relative;
  display:grid;place-items:center;color:var(--pflaume)}
.ul-daumen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ul-daumen svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.ul-name{flex:1;min-width:0;font-size:15.5px;font-weight:500;line-height:1.35;
  overflow-wrap:anywhere;hyphens:auto}
.ul-wert{flex:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.ul-wert--frei{color:var(--pflaume)}
.ul-pfeil{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--leise)}
.ul-pfeil svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  transition:transform .28s var(--ease-out)}
.ul-stueck[open] .ul-pfeil svg{transform:rotate(180deg)}

.ul-auf{padding:16px 14px 16px;border-top:1px solid var(--trenn)}

/* Vorschau im aufgeklappten Bereich. Sie wird ERST BEIM AUFKLAPPEN geholt:
   Die Dateien liegen in einem nicht öffentlichen Speicher, jede Adresse muss
   einzeln signiert werden und läuft ab. Für zwei Dutzend Zeilen im Voraus zu
   signieren hieße zwei Dutzend Anfragen für Bilder, die niemand ansieht. */
.ul-vorschau{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:start}
.ul-bild{border-radius:12px;overflow:clip;border:1px solid var(--trenn);
  background:var(--papier-tief);aspect-ratio:3/4;position:relative;min-height:0;
  display:grid;place-items:center}
.ul-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ul-bild span{font-size:12px;color:var(--leise);padding:0 10px;text-align:center}
@media (max-width:640px){
  .ul-vorschau{grid-template-columns:1fr}
  .ul-bild{aspect-ratio:4/3;max-width:240px}
}
.ul-auf p{margin:0 0 14px;font-size:14.5px;color:var(--leise);line-height:1.6;max-width:58ch}
.ul-fakten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ul-fakt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--leise);background:var(--papier-warm);
  border:1px solid var(--trenn);border-radius:999px;padding:3px 10px}

/* --- Konfigurator ------------------------------------------------------- */
.ul-schritt{margin-bottom:20px}
.ul-schritt__kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ul-schritt__nr{width:24px;height:24px;flex:none;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:500;
  background:var(--papier-tief);color:var(--pflaume)}
.ul-schritt__kopf b{font-size:15px;font-weight:500}

/* Die Vorlagen als Bilder, nicht als Namen. „Naturverbunden" sagt niemandem
   etwas, die Vorschau schon. Jede oeffnet sich in einem eigenen Tab: Wer
   eine Vorlage ansieht, soll seinen Stand im Portal nicht verlieren. */
.ul-vorlagen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ul-vorlage{position:relative;border:2px solid var(--trenn);border-radius:12px;
  overflow:clip;background:var(--papier-tief);cursor:pointer;display:block;
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.ul-vorlage:hover{transform:translateY(-2px)}
.ul-vorlage input{position:absolute;opacity:0;pointer-events:none}
.ul-vorlage .bild{display:block;aspect-ratio:16/10;position:relative;min-height:0;
  background:var(--papier-tief)}
.ul-vorlage .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center}
.ul-vorlage b{display:block;font-size:12px;font-weight:500;padding:7px 9px 8px;
  text-align:center;background:var(--papier)}
.ul-vorlage:has(input:checked){border-color:var(--pflaume)}
.ul-vorlage:has(input:checked) b{background:var(--pflaume);color:var(--text-auf-akzent)}
.ul-lupe{position:absolute;top:7px;right:7px;z-index:2;width:28px;height:28px;
  border-radius:50%;display:grid;place-items:center;background:rgba(26,15,23,.66);
  color:#fff;text-decoration:none}
.ul-lupe svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.ul-pillen{display:flex;flex-wrap:wrap;gap:8px}
.ul-pillen label{position:relative;cursor:pointer}
.ul-pillen input{position:absolute;opacity:0;pointer-events:none}
.ul-pillen span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:999px;border:1px solid var(--trenn);background:var(--papier);
  font-size:13.5px;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.ul-pillen label:hover span{border-color:var(--pflaume-zart)}
.ul-pillen input:checked + span{border-color:var(--pflaume);background:var(--papier-tief);
  color:var(--pflaume-tief);font-weight:500}

.ul-absenden{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--trenn)}
.ul-stand{font-size:13.5px;color:var(--leise);flex:1;min-width:190px}
.ul-stand b{color:var(--text);font-weight:500}

@media (max-width:760px){
  .ul-vorlagen{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* KEIN Umbruch in der Griffzeile: Der Pfeil rutschte sonst in eine zweite
     Zeile und stand dort allein links, wie ein eigener Knopf. Der Name
     bricht stattdessen um, dafuer ist er Text. */
  .ul-griff{gap:11px;padding:10px 11px}
  .ul-wert{font-size:13.5px}
}

/* ----------------------------------------------------------------------------
   Umschalter Verwalten | Vorschau (inhalte.html)

   Zwei Knoepfe statt Reitern: Es sind zwei BLICKE auf dieselben Daten, kein
   Wechsel des Ortes. `aria-pressed` statt einer Klasse — ein Vorleseprogramm
   sagt damit „gedrueckt", und die Gestaltung haengt an derselben Angabe,
   kann ihr also nicht widersprechen.
   ---------------------------------------------------------------------------- */
.ul-umschalt{display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:var(--feld);border:1px solid var(--feld-kante)}
.ul-umschalt__knopf{font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  padding:6px 14px;border-radius:999px;border:0;background:none;color:var(--leise);
  transition:background .2s var(--ease),color .2s var(--ease)}
.ul-umschalt__knopf[aria-pressed="true"]{background:var(--pflaume);color:#fff}
.ul-umschalt__knopf:not([aria-pressed="true"]):hover{color:var(--text)}

.ul-stufenwahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 14px}
.ul-stufenwahl label{cursor:pointer}
.ul-stufenwahl input{position:absolute;opacity:0;width:0;height:0}
.ul-stufenwahl span{display:inline-block;padding:6px 13px;border-radius:999px;
  font-size:13px;border:1px solid var(--feld-kante);background:var(--feld);
  color:var(--leise);transition:border-color .2s var(--ease),color .2s var(--ease)}
.ul-stufenwahl input:checked+span{border-color:var(--pflaume);color:var(--pflaume-tief)}
.ul-stufenwahl input:focus-visible+span{outline:2px solid var(--pflaume);outline-offset:2px}

/* In der Vorschau sind die Knoepfe aus. Sie bleiben SICHTBAR, damit man
   beurteilen kann, wie die Zeile wirkt — nur eben ohne Wirkung. */
#produktVorschau .knopf:disabled{opacity:.45;cursor:not-allowed}

/* Das gesetzte Anzeigebild im Verwaltungsblatt. Klein, aber sichtbar: Wer
   prüfen will, ob das richtige Bild hängt, soll es SEHEN und nicht einen
   Dateinamen lesen müssen. */
.anzeigebild{display:flex;gap:14px;align-items:center;
  margin:calc(-1*var(--raum-2)) 0 var(--raum-4)}
.anzeigebild[hidden]{display:none}
.anzeigebild img{width:120px;height:90px;flex:none;object-fit:cover;
  border-radius:10px;background:var(--feld);border:1px solid var(--feld-kante)}
.anzeigebild img:not([src]){visibility:hidden}
.anzeigebild p{margin:0 0 6px}


/* Unterhaltungen im Partnerbereich (09.10.2026): aufklappbar, mit Verlauf. */
.unterhaltung{border-bottom:1px solid var(--trenn)}
.unterhaltung:last-child{border-bottom:0}
.unterhaltung > summary{list-style:none;cursor:pointer}
.unterhaltung > summary::-webkit-details-marker{display:none}
.unterhaltung--neu .eintrag__text b{font-weight:600}
.unterhaltung__zahl{flex:none;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:#D64545;color:#fff}
.unterhaltung__verlauf{display:flex;flex-direction:column;gap:10px;padding:4px 0 16px}
.unterhaltung .blase{max-width:82%;padding:10px 13px;border-radius:15px;background:var(--papier-tief)}
.unterhaltung .blase p{margin:0 0 4px;font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.unterhaltung .blase span{font-size:11.5px;color:var(--leise)}
.unterhaltung .blase--wir{align-self:flex-end;background:var(--pflaume);color:#fff;border-bottom-right-radius:5px}
.unterhaltung .blase--wir span{color:rgba(255,255,255,.75)}
.unterhaltung .blase--sie{align-self:flex-start;border-bottom-left-radius:5px}
.unterhaltung__antwort{display:flex;gap:10px;align-items:flex-end;margin-top:4px}
.unterhaltung__antwort textarea{flex:1;min-height:60px}
.unterhaltung__antwort .knopf{width:auto}

/* Gesperrt: sichtbar, aber mit Schloss (09.10.2026). */
.ul-stueck--gesperrt .ul-daumen img{filter:grayscale(.85);opacity:.7}
.ul-stueck--gesperrt .ul-name{color:var(--leise)}
.ul-schloss{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:999px;background:var(--papier-tief);color:var(--pflaume-tief);white-space:nowrap}
.ul-schloss svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:760px){ .ul-schloss{font-size:0;gap:0;padding:6px} .ul-schloss svg{width:14px;height:14px} }
.eintrag--gesperrt .eintrag__text b,.eintrag--gesperrt .eintrag__text span{color:var(--leise)}
.schloss-knopf{display:inline-flex;align-items:center;gap:6px;color:var(--pflaume-tief)}