/* --------------------------------------------------------------------------
   Das öffentliche Profil: eine Spalte zum Bearbeiten.

   Eine nachgebaute Vorschau stand einen Tag lang daneben. Sie zeigte dasselbe
   ein zweites Mal, nur ungenauer -- gesehen wird über „Vorschau ansehen", und
   das öffnet die Seite selbst.
   -------------------------------------------------------------------------- */

.pp-spalte { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; }


/* Ein privat gehaltenes Konto hat auch als Veranstalter keine Seite. Das steht
   oben und nicht als Fußnote: Wer es nicht liest, pflegt eine Seite, die
   niemand sieht. */
.pp-warnung {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-brand-primary-action);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-primary);
}
.pp-warnung strong { display: block; }
.pp-warnung p { margin: 2px 0 0; color: var(--color-text-secondary); font: var(--typography-metadata); }
.pp-warnung > .ic, .pp-warnung svg { color: var(--color-brand-primary-action); flex: none; }
.pp-warnung .btn { margin-left: auto; flex: none; }


/* Die Verweise nach der Vorlage: je Verweis eine Zeile mit Marke, Adresse und
   zwei Knoepfen. Die Marke traegt ihre Farbe -- sie ist das, was man zuerst
   erkennt, lange bevor man die Adresse liest. */
/* Die Karte schneidet nichts ab: Eine Karte klemmt ihren Inhalt an ihren
   runden Ecken fest -- und klemmte damit auch die Markenwahl ab, die aus der
   Zeile herausklappt. */
/* Dieser Bereich nimmt die ganze Breite: Formular und Vorschau nebeneinander
   brauchen sie, und die Schiene mit „Deine Aktivitaet" hat neben einem
   Bearbeitungsblatt nichts zu suchen -- sie gehoert zur Uebersicht.

   Ueber `:has` und nicht ueber eine Klasse am Rumpf: Die Bereiche schalten
   sich durch `hidden` um, und eine Klasse dazu waere ein zweiter Schalter, der
   irgendwann nicht mehr zum ersten passt. */
#profile-body:has(#view-public:not([hidden])) .cols {
  grid-template-columns: minmax(0, 1fr);
}
#profile-body:has(#view-public:not([hidden])) .cols > aside.rail { display: none; }

/* ------------------------------------------------------- Kopf und Werkbank

   Nach dem Entwurf vom 9. September 2026: oben Titel, Satz und die zwei Wege
   hinaus; darunter das Formular links, die Vorschau rechts. */
.pp-kopfleiste {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.pp-kopftext { flex: 1; min-width: 220px; }
.pp-kopftext h2 { margin: 0; font: var(--typography-section-title); }
.pp-kopftext .hint { margin: 2px 0 0; color: var(--color-text-secondary); }

/* Zwei Spalten, solange Platz ist. Die Vorschau bleibt stehen, waehrend das
   Formular scrollt -- sonst waere sie beim vierten Feld aus dem Bild. */
.pp-werkbank { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
@media (min-width: 1100px) {
  /* Menue, Formular, Vorschau. Das Menue bekommt ein festes Mass -- es traegt
     Worte und keine Felder, und eine mitwachsende Spalte daneben liesse die
     Punkte bei jedem Fensterzug woanders stehen. */
  /* Menue und Blatt. Im Blatt steht das Formular -- oder, unter „Ansicht",
     die Seite selbst. Nie beides: Nebeneinander blieben der Vorschau
     vierhundert Punkte, auf denen sie sich zusammenfaltet und nichts mehr
     zeigt, was sie zeigen soll. */
  .pp-werkbank {
    grid-template-columns: 208px minmax(0, 1fr);
    align-items: start;
  }
  .pp-reiter, .pp-schauspalte { position: sticky; top: 77px; }
}
.pp-schauspalte { min-width: 0; }

/* Der Zaehler unter einem Feld: „27 / 100". Rechts, klein, ruhig. */
.pp-zaehler {
  align-self: flex-end;
  font: var(--typography-caption);
  color: var(--color-text-tertiary);
}
/* Die beiden Bilder nebeneinander: das runde schmal, das breite so breit, wie
   es auf der Seite steht. Getauscht wird an Knoepfen darunter und nicht mehr
   im Bild -- die Vorschau zeigt jetzt nur noch. */
.pp-bilder {
  display: grid;
  /* Die erste Spalte nimmt, was ihr Knopf braucht: Bei festen 140 Punkten
     brach „Bild ersetzen" auf zwei Zeilen um und stand dann neben statt unter
     dem Kreis. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: start;
  margin-bottom: var(--spacing-md);
}
.pp-bildfeld { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; }
.pp-bildmarke { font: var(--typography-caption); color: var(--color-text-secondary); }
.pp-bildvorschau {
  display: grid;
  place-items: center;
  background: var(--color-surface-secondary) center / cover no-repeat;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-subtle);
}
.pp-bildvorschau-rund { width: 96px; height: 96px; border-radius: 999px; }
/* Das Titelbild als Streifen und nicht in voller Hoehe: Bei achthundert Punkten
   Breite waeren es im echten Verhaeltnis (8:3) dreihundert -- ein Block, der
   das halbe Blatt fuellt, bevor das erste Feld kommt. Hier genuegt zu sehen,
   welches Bild dasteht; wie es wirklich sitzt, zeigt „Ansicht". Beschnitten
   wird mittig (`cover`), also bleibt die Mitte des Bildes zu sehen. */
.pp-bildvorschau-breit {
  /* Der Rahmen fuer den Pruefhinweis, der links unten im Streifen sitzt. */
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 3;
  max-height: 132px;
  border-radius: var(--radius-md, 12px);
}
.pp-bildtasten { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
/* Ein Knopf traegt sein Wort in einer Zeile -- umgebrochen sieht er aus wie
   zwei. */
.pp-bildfeld .btn { white-space: nowrap; align-self: flex-start; }
.pp-bildweg { color: var(--color-status-error); }
@media (max-width: 620px) {
  .pp-bilder { grid-template-columns: minmax(0, 1fr); }
}
.pp-bildmass { margin: 0; font: var(--typography-caption); color: var(--color-text-tertiary); }

/* ------------------------------------------------------- Oeffnungszeiten

   Sieben Zeilen, eine je Wochentag: Haekchen und Name links, die Fenster in
   der Mitte, der Knopf fuer ein weiteres rechts. */
.pp-zeiten { padding: 0 var(--spacing-lg) var(--spacing-md); }
.pp-zeiten-kopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm);
  font: var(--typography-body-strong);
}
.pp-zeiten-kopf svg.i { color: var(--color-text-tertiary); }
.pp-zeitzeile {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--spacing-sm) var(--spacing-md);
  padding: 4px 0;
}
.pp-zeittag { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
.pp-zeittag input { accent-color: var(--color-brand-primary-action); width: 18px; height: 18px; }
/* Ein geschlossener Tag tritt zurueck -- lesbar bleibt er, damit man sieht,
   dass es ihn gibt. */
.pp-zeitzeile.zu .pp-zeittag span,
.pp-zeitzeile.zu .pp-zeitstrich { color: var(--color-text-tertiary); }
.pp-zeitfenster { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-zeitpaar { display: flex; align-items: center; gap: var(--spacing-sm); }
.pp-zeitpaar input[type="time"] {
  padding: 6px var(--spacing-sm);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  font: var(--typography-body);
}
.pp-zeitpaar input[type="time"]:disabled { opacity: .45; }
.pp-zeitstrich { color: var(--color-text-secondary); }
.pp-zeitplus, .pp-zeitweg {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.pp-zeitplus:hover, .pp-zeitweg:hover { color: var(--color-text-primary); }
.pp-zeitplus:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 620px) {
  .pp-zeitzeile { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-zeittag { grid-column: 1 / -1; }
}

/* ------------------------------------------------------ Katalog-Merkmale

   Sechs Haekchen in zwei Spalten, wie im Entwurf. */
.pp-katalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-sm) var(--spacing-lg);
  padding: var(--spacing-md);
}
.pp-katalogfeld {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}
.pp-katalogfeld input { accent-color: var(--color-brand-primary-action); width: 18px; height: 18px; }
.pp-katalogfeld svg.i { color: var(--color-text-tertiary); flex: none; }
.pp-katalogfeld input:checked ~ svg.i { color: var(--color-brand-primary-action); }
.pp-katalog-trenner {
  margin: 0;
  padding: var(--spacing-sm) var(--spacing-md) 0;
  border-top: 1px solid var(--color-border-subtle);
  font: var(--typography-caption);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------- Reiterleiste

   Ein Reiter je Tabelle des oeffentlichen Profils. Die Form steht hier und
   nicht als `.tabs`: Diese heisst zwar auf der Veranstaltungsseite genauso,
   liegt aber in `event.css` -- ein Blatt, das das Profil nicht laedt. Ohne
   eigene Regel zeichnete der Browser hier graue Systemknoepfe. */
/* Untereinander als Menue. Auf schmalen Schirmen legt es sich quer und wird
   wieder zur Leiste -- untereinander naehme es dort den halben Bildschirm,
   bevor das erste Feld kommt. */
.pp-reiter {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  border-radius: 999px;
  /* Mit Kante und nicht nur mit Flaeche: Im Hellen liegt
     `--color-surface-secondary` (#FFF9F6) so dicht am Grund der Seite, dass
     der Block darauf verschwand -- die Punkte schwebten frei, waehrend im
     Dunkeln ein Kasten zu sehen war. */
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-secondary);
}
.pp-reiterknopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  color: var(--color-text-secondary);
  font: var(--typography-body-strong);
  text-align: left;
  cursor: pointer;
}
.pp-reiterknopf svg.i { flex: none; color: var(--color-text-tertiary); }
.pp-reiterknopf:hover { color: var(--color-text-primary); }
.pp-reiterknopf.active { background: var(--color-surface-primary); color: var(--color-brand-primary-action); }
.pp-reiterknopf.active svg.i { color: var(--color-brand-primary-action); }
/* Die Linie vor der Ansicht: Was darueber steht, wird bearbeitet -- was
   darunter steht, wird gezeigt. */
.pp-reiterlinie {
  flex: none;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  border: 0;
  background: var(--color-border-subtle);
  align-self: center;
}
@media (min-width: 1100px) {
  /* Quer statt hochkant -- und `stretch`, sonst schrumpft sie als Flexkind
     mit `align-self: center` auf die Breite ihres Inhalts, und der ist
     leer: eine Linie von null Punkten, die niemand sieht. */
  .pp-reiterlinie {
    width: auto; height: 1px;
    align-self: stretch;
    margin: var(--spacing-sm) var(--spacing-sm);
  }
  .pp-reiter {
    flex-direction: column;
    overflow: visible;
    gap: 2px;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md, 12px);
  }
  .pp-reiterknopf { border-radius: var(--radius-md, 12px); }
}
/* Das Blatt traegt keinen eigenen Rahmen: Die Karte darin hat schon einen,
   und zwei ineinander waeren einer zu viel. */
.pp-reiterblatt { min-width: 0; }

/* --------------------------------------------------------------- Merkmale

   Dieselbe Zeile wie ein Verweis, nur mit zwei Feldern untereinander statt
   einer Adresse -- und das Zeichen wird gewaehlt, nicht gelesen. */
.pp-merkmale { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); }
.pp-merkmal {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-primary);
}
.pp-merkmal:focus-within { border-color: var(--color-brand-primary-action); }
/* Zeichen und Auswahl liegen uebereinander: Zu sehen ist das Bild, bedient
   wird die Liste des Browsers -- so zeichnet jedes Geraet sie selbst richtig. */
.pp-merkmal-zeichen {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-brand-primary-action);
}
/* Das Symbol ist der Griff. Der Knopf des Auswahlfelds deckt den Kreis und
   bleibt unsichtbar -- sein Menue nicht, das steht am Bildschirm und bringt
   sein eigenes Aussehen mit. */
.pp-merkmal-zeichen .pp-zeichenwahl { position: absolute; inset: 0; }
.pp-merkmal-zeichen .pp-zeichenwahl .aw-knopf {
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
.pp-merkmal-felder { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp-merkmal-felder input {
  border: none;
  background: none;
  padding: 4px 0;
  color: var(--color-text-primary);
  min-width: 0;
}
.pp-merkmal-felder input:focus { outline: none; }
.pp-merkmal-felder input[data-feld="label"] { font: var(--typography-body-strong); }
.pp-merkmal-felder input[data-feld="detail"] {
  font: var(--typography-caption);
  color: var(--color-text-secondary);
}

.pp-verweise-karte { overflow: visible; }
.pp-verweise-kopf { display: flex; align-items: flex-start; gap: var(--spacing-md); }
.pp-verweise-kopf .head-text .lead { color: var(--color-text-secondary); }
.pp-verweise-zeichen {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--color-surface-secondary, #f3efe9);
  color: var(--color-text-secondary);
  flex: none;
}

.pp-verweise { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); }
.pp-verweis {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-primary);
}
.pp-marke {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  flex: none;
  background: var(--color-surface-secondary, #f3efe9);
  color: var(--color-text-secondary);
}
.pp-marke svg { width: 22px; height: 22px; }
.pp-marke-facebook { background: #e8f0fe; color: #1877f2; }
.pp-marke-instagram { background: #fdecf5; color: #d6249f; }
.pp-marke-linkedin { background: #e7f1f8; color: #0a66c2; }
.pp-marke-youtube { background: #fdeaea; color: #d92d20; }
.pp-marke-mail { background: #e8f7ee; color: #15803d; }
.pp-markenname { font-weight: 600; }
/* Kachel und Name sind ein Knopf -- er sieht aus wie Text, weil er es fast
   ist: Er sagt, was diese Zeile ist, und laesst es aendern. */
.pp-markenknopf {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 150px;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.pp-markenknopf svg.i:last-child { color: var(--color-text-tertiary); flex: none; }
.pp-markenknopf:hover .pp-markenname { color: var(--color-brand-primary-action); }
.pp-verweis { position: relative; }
.pp-markenmenue {
  position: absolute;
  top: calc(100% - 4px);
  left: var(--spacing-md);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.pp-markenmenue[hidden] { display: none; }
.pp-markenmenue button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.pp-markenmenue button:hover { background: var(--color-surface-secondary); }
.pp-markenmenue .pp-marke { width: 30px; height: 30px; border-radius: 8px; }
.pp-markenmenue .pp-marke svg { width: 17px; height: 17px; }
/* Der Strich zwischen Name und Adresse: Er trennt, was gelesen wird, von dem,
   was getippt wird. */
.pp-verweis-feld {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--color-border-subtle);
  padding-left: var(--spacing-md);
  color: var(--color-text-tertiary);
}
.pp-verweis-feld input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 6px 0;
  font: inherit;
  color: var(--color-text-primary);
}
.pp-verweis-feld input:focus { outline: none; }
.pp-verweis:focus-within { border-color: var(--color-brand-primary-action); }
/* Eine Zeile, deren Marke schon in einer anderen steht: Sie zeigt es an sich
   selbst -- eine Meldung weit unten fuende niemand. */
.pp-verweis.doppelt { border-color: var(--color-brand-primary-action); background: #fdf3f1; }
.pp-markenmenue button[disabled] { opacity: .45; cursor: not-allowed; }
.pp-markenmenue button[disabled]:hover { background: none; }
.pp-verweis-weg {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.pp-verweis-weg:hover { color: var(--color-brand-primary-action); }
.pp-verweis-weg-rot { color: var(--color-brand-primary-action); border-color: transparent; }

/* Hinzufuegen ist kein Knopf zwischen anderen, sondern eine leere Zeile, die
   darauf wartet, gefuellt zu werden -- deshalb gestrichelt und so breit wie
   die Zeilen darueber. */
.pp-verweise-fuss { padding: 0 var(--spacing-md) var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); }
.pp-verweis-neu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  background: none;
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
  width: 100%;
}
.pp-verweis-neu:hover { color: var(--color-brand-primary-action); border-color: var(--color-brand-primary-action); }
.pp-tipp {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
  margin: 0;
  padding: var(--spacing-md);
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  font: var(--typography-metadata);
}
.pp-tipp svg { flex: none; color: var(--color-text-tertiary); }

@media (max-width: 720px) {
  /* Auf schmalen Schirmen bricht die Zeile um: Marke und Name oben, die
     Adresse darunter -- 110 Punkt Name neben einem Feld waeren dort nichts. */
  .pp-verweis { flex-wrap: wrap; }
  .pp-markenname { width: auto; flex: 1; }
  .pp-verweis-feld { flex-basis: 100%; border-left: none; padding-left: 0; }
}

/* Speichern steht rechts, wo Formulare enden -- und die Meldung links davon,
   im Blick auf dem Weg dorthin. */
.pp-fuss {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-md) var(--spacing-md);
}
.pp-fuss .hint { margin-right: auto; }
.pp-leer { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); align-items: flex-start; }

/* Die Vorschau ist die Seite selbst, nur eingerahmt: derselbe Kopf, dieselbe
   Kontaktspalte, dieselbe Karte -- gezeichnet aus `veranstalterkopf.js`. Der
   Rahmen sagt „das ist eine Ansicht", das Innere bleibt unangetastet. */
.pp-schau {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 12px);
  /* Weiss, nicht der Seitengrund: Der Rahmen der Vorschau ist ein Blatt, auf
     dem die Seite liegt. Auf dem cremefarbenen Grund der Seite sah sie hier
     aus wie ein zweiter Kasten im Kasten. */
  background: var(--color-surface-primary);
  overflow: hidden;
}
/* Wie ein Kartenkopf: Zeichen und Titel. */
.pp-schau-kopf {
  display: flex; align-items: center; gap: var(--spacing-sm);
  margin: 0; padding: var(--spacing-lg);
  font: var(--typography-section-title);
}
.pp-schau-seite { padding: var(--spacing-md); display: flex; flex-direction: column; gap: 0; }
/* Kopf und Kontaktspalte nebeneinander wie auf der Seite; darunter hoert die
   Vorschau auf -- Veranstaltungen und Bewertungen kommen vom Server und
   gehoeren auf die Seite, nicht in ein Formular. */
.pp-schau-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--spacing-md);
  align-items: start;
}
.pp-schau-raster .vp-tat { display: none; }
/* Kein Rahmen um die Kopfkarte: Auf der Seite selbst geht sie ohne Kante in
   das Titelbild ueber -- der Schatten stammt von der Karte darunter und
   zeichnete hier eine Linie, die es draussen nicht gibt. Die Regel dort haengt
   am Aufbau der Seite (`.vp-seite > #vp-cover ~ ...`), den die Vorschau nicht
   hat. */
.pp-schau .vp-kopf { box-shadow: none; }
/* Die rechte Spalte faengt unter dem Titelbild an und nicht an ihm: Nur die
   Kopfkarte darf daran anstossen -- das Bild ragt in sie hinein. Der Kontakt
   klebte sonst am Rand des Titelbilds. */
.pp-schau-rand { margin-top: var(--spacing-md); }
.pp-schau .vp-titelbild { border-radius: var(--radius-md, 12px) var(--radius-md, 12px) 0 0; }
@media (max-width: 760px) {
  .pp-schau-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Und dasselbe, wenn nicht der Schirm eng ist, sondern die Spalte: Seit die
   Vorschau neben dem Formular steht, hat sie gut fuenfhundert Punkte, waehrend
   der Schirm anderthalbtausend breit ist. Ein Fenstermass sagt darueber
   nichts -- gefragt wird deshalb der Kasten selbst. */
.pp-schauspalte { container-type: inline-size; }
@container (max-width: 760px) {
  .pp-schau-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Das Bild ragt in das Titelbild hinein wie auf der Seite selbst. Die Regel
   dort haengt am Aufbau der Seite (`.vp-seite > #vp-cover ~ ...`); hier steht
   dieselbe Wirkung fuer den Rahmen der Vorschau. */
.pp-schau .vp-bild .head { border: 4px solid var(--color-surface-primary); }
/* Hineinragen kann es nur, wo ein Titelbild ist. Ohne eines schob es sich
   in die Ueberschrift der Vorschau -- dieselbe Bedingung wie auf der Seite
   selbst (`#vp-cover:not(:empty)`). */
.pp-schau-titel:has(.vp-titelbild) + .pp-schau-raster .vp-bild .head { margin-top: -56px; }

/* Der Knopf zum Tauschen sitzt am Bild, nicht daneben: Wer ein Bild wechseln
   will, zeigt darauf. Klein und ruhig -- er soll das Bild nicht verdecken. */
.pp-schau-titel { position: relative; }
.pp-schau-wer { position: relative; }
.pp-bildknopf {
  position: absolute;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.pp-bildknopf:hover { color: var(--color-brand-primary-action); }
/* Wartet auf seinen Weg: sichtbar, aber ohne Versprechen -- blass, ohne
   Farbwechsel unter dem Zeiger, und mit einer Meldung beim Druck. */
/* Was die Moderation zum Titelbild sagt, steht am Bild -- links unten, wo es
   nichts verdeckt. */
.pp-bildstand {
  position: absolute;
  left: var(--spacing-md);
  bottom: var(--spacing-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface-primary);
  color: var(--color-text-secondary);
  font: var(--typography-metadata);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.pp-bildstand svg { width: 15px; height: 15px; }
/* Am Profilbild sitzt er auf dessen Rand: Der Knopf haengt im Kreis selbst,
   und rechts unten mit vier Punkt Abstand liegt seine Mitte genau auf der
   Kreislinie -- gleich, wie gross das Bild gerade ist. */
.pp-schau .vp-bild { position: relative; }
.pp-bildknopf-rund {
  right: 4px;
  bottom: 4px;
  left: auto;
  top: auto;
  width: 30px;
  height: 30px;
}

/* „Ueber mich" ist der laengste Text dieser Seite -- er darf so hoch sein,
   dass man ihn beim Schreiben ganz sieht, und weiter wachsen, wenn jemand
   mehr zu sagen hat. Drei Zeilen zeigten von dreihundert Zeichen ein Drittel. */
#pp-bio { min-height: 150px; resize: vertical; line-height: 1.5; }

/* Die Adresspruefung sitzt unter den Feldern, in derselben Karte: Sie gehoert
   zur Anschrift und ist kein eigener Abschnitt. */
.pp-adresse {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-md) var(--spacing-md);
}
.pp-adresse-kopf { display: flex; justify-content: flex-end; }
.pp-adresse-karte {
  height: 240px;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}
.pp-adresse-fuss { display: flex; align-items: center; gap: var(--spacing-md); flex-wrap: wrap; }
.pp-adresse-fuss p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--color-text-secondary);
  font: var(--typography-metadata);
}
.pp-adresse-fuss svg { flex: none; color: var(--color-brand-primary-action); }
.pp-adresse-fest { display: flex; align-items: center; gap: 6px; color: #15803d; font-weight: 600; }
.pp-adresse-fest svg { color: currentColor; }
.pp-adresse-meldung { margin: 0; color: var(--color-brand-primary-action); font: var(--typography-metadata); }

/* Die Freigaben: ein Haken, ein Wort, eine Zeile darunter, die sagt, was er
   gerade bewirkt. Gesperrt ist, was ohne Vor- und Nachnamen nicht geht. */
/* Derselbe Innenabstand wie ein Formular in der Karte: Der Kopf traegt
   seinen eigenen, der Rumpf faengt darunter an. */
.pp-freigaben-body { padding: 0 var(--spacing-lg) var(--spacing-lg); }
.pp-freigaben-body > .hint:first-child { margin: 0 0 var(--spacing-md); }
.pp-schalterliste { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
.pp-schalter {
  display: flex; align-items: flex-start; gap: var(--spacing-md);
  padding: var(--spacing-sm) 0; cursor: pointer;
}
.pp-schalter input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-brand-primary-action); }
.pp-schalter .text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp-schalter b { font: var(--typography-action); color: var(--color-text-primary); }
.pp-schalter.gesperrt { cursor: default; }
.pp-schalter.gesperrt b { color: var(--color-text-secondary); }
.pp-schalterliste { margin-bottom: 0; }

/* Ein Blatt statt dreier Karten: Vorschau, Freigaben und Verweise teilen sich
   einen Rahmen, und was sie trennt, ist eine Linie. Die Stuecke behalten
   ihren Aufbau, verlieren nur Rand und Schatten. */
.pp-auftritt > .pp-schau,
.pp-auftritt > .panel,
/* Auch die Karten in einem Reiterblatt: Seit die Blaetter dazwischenstehen,
   sind sie keine direkten Kinder mehr und behielten Rahmen, Rundung und
   Schatten -- eine Karte in einer Karte, mit zwei Kanten uebereinander. */
.pp-auftritt > .pp-reiterblatt > .panel { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0; }
/* Gleich stark wie die Regel darueber, damit die Linie den Rand ueberlebt. */
.pp-auftritt > .pp-schau + *,
.pp-auftritt > .panel + *,
/* Zwei Karten in einem Blatt -- „Allgemein" traegt die Angaben und die
   Merkmale -- trennt dieselbe Linie wie alles andere in diesem Bogen. */
.pp-auftritt > .pp-reiterblatt > .panel + .panel,
.pp-auftritt > .pp-reiterblatt + .pp-fuss { border-top: 1px solid var(--color-border-subtle); }
.pp-auftritt > .pp-fuss { padding: var(--spacing-lg); }

/* Die Bloecke im Konto halten Abstand -- auch der oeffentliche Auftritt
   unter den Angaben und der Punkt „Sitzungen" darunter. Ein leerer Block
   (kein Profil, noch keine Veranstaltung) nimmt keinen Platz. */
#view-account { display: flex; flex-direction: column; gap: var(--spacing-lg); }
#view-account > :empty { display: none; }

/* „Wird geladen …" ist der einzige Inhalt seiner Tafel und braucht deshalb
   ihren Rand: Ohne ihn klebte der Satz an der Kante, waehrend jede Tafel
   daneben ihren Abstand hat. */
.pp-warten { margin: 0; padding: var(--spacing-lg); }


/* --------------------------------------------------- Benachrichtigungen

   Die vier Arten als Haekchenreihe, die Ruhezeiten darunter. Dieselbe Form
   wie die Merkmale im oeffentlichen Profil: Es ist dieselbe Frage -- welche
   von diesen gelten fuer mich. */
.nb-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md);
}
.nb-hinweis svg.i { flex: none; margin-top: 2px; color: var(--color-text-tertiary); }
.nb-arten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-sm) var(--spacing-lg);
}
.nb-art { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
.nb-art input { accent-color: var(--color-brand-primary-action); width: 18px; height: 18px; }
.nb-art svg.i { flex: none; color: var(--color-text-tertiary); }
.nb-art input:checked ~ svg.i { color: var(--color-brand-primary-action); }
/* Abgeschaltet tritt zurueck, verschwindet aber nicht: Wer die Ruhezeiten
   ausschaltet, soll sehen, was er wieder einschalten kann. */
.nb-ruhezeit.zu, .nb-tag.zu { opacity: .45; }
.nb-tage { display: flex; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); }
.nb-tag { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nb-tag input { accent-color: var(--color-brand-primary-action); }