/* ---------------------------------------------------------------------------
   AuthentifyMe – Gemeinschaftsgestaltung
   Bringt BuddyPress und LearnPress auf die DTH-Palette und -Schriften.
   Wird von dth-my-darstellung.php nach dem Theme geladen.
   --------------------------------------------------------------------------- */

:root{
  --dth-navy:#1d2b65;
  --dth-gruen:#3eb489;
  --dth-orange:#e8572a;
  --dth-tinte:#111827;
  --dth-gedaempft:#6b7280;
  --dth-linie:#e5e7eb;
  --dth-flaeche:#f9fafb;
  --dth-radius:12px;
}

/* ── Überschriften wie auf dth-group.com ─────────────────────────────────────
   Dort läuft alles auf Inter, auch die Überschriften. Die h1 ist bewusst
   leicht gesetzt (Gewicht 300) mit enger Laufweite; hervorgehobene Wörter
   darin stehen auf 600. Keine Serifenschrift auf der ganzen Seite.
   -------------------------------------------------------------------------- */
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.entry-title, .page-title, .wp-block-post-title,
#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4,
#buddypress h5, #buddypress h6,
.bp-feedback h2, .lp-content-area h1, .lp-content-area h2, .lp-content-area h3{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.18;
}

.wp-site-blocks h1, .entry-title, .page-title, .wp-block-post-title,
#buddypress h1{
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1.12;
}
.wp-site-blocks h1 strong, .entry-title strong, .wp-block-post-title strong{
  font-weight:600;
}

/* ── Breitere Spalte für Community-Seiten ───────────────────────────────── */
body.buddypress .wp-block-post-content,
body.buddypress .entry-content{
  max-width:none;
}
#buddypress{
  max-width:920px;
  margin-inline:auto;
  font-size:16px;
}

/* ── Formularfelder und Knöpfe ──────────────────────────────────────────── */
#buddypress input[type=text],
#buddypress input[type=search],
#buddypress input[type=email],
#buddypress textarea,
#buddypress select,
#buddypress .bp-search input{
  border:1px solid var(--dth-linie);
  border-radius:var(--dth-radius);
  padding:11px 14px;
  font-family:inherit;
  font-size:15px;
  background:#fff;
  color:var(--dth-tinte);
  box-shadow:none;
}
#buddypress input:focus, #buddypress textarea:focus, #buddypress select:focus{
  outline:none;
  border-color:var(--dth-gruen);
  box-shadow:0 0 0 3px rgba(62,180,137,.16);
}
#buddypress .button,
#buddypress button,
#buddypress input[type=submit],
#buddypress a.button,
#buddypress .generic-button a,
.lp-button, .learn-press-course-buttons button{
  background:var(--dth-navy);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 20px;
  font-weight:600;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease;
  text-decoration:none;
  line-height:1.3;
}
#buddypress .button:hover,
#buddypress button:hover,
#buddypress input[type=submit]:hover,
#buddypress a.button:hover,
#buddypress .generic-button a:hover,
.lp-button:hover{
  background:var(--dth-gruen);
  color:#fff;
}

/* ── Der Aktivitätsstrom ────────────────────────────────────────────────── */
#buddypress form#whats-new-form,
#buddypress #whats-new-form{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
#buddypress #whats-new-textarea textarea,
#buddypress #whats-new{
  border:0 !important;
  box-shadow:none !important;
  font-size:16px;
  min-height:58px;
  padding:6px 2px !important;
}
/* Profilbilder sind nicht immer quadratisch. Ohne object-fit werden sie in den
   Rahmen gestaucht - deshalb steht es hier überall dabei. */
#buddypress img.avatar,
#buddypress #whats-new-avatar img,
#buddypress .activity-avatar img,
#buddypress .acomment-avatar img,
#buddypress .item-avatar img{
  border-radius:50%;
  object-fit:cover;
  aspect-ratio:1/1;
}

/* Das Bild neben dem Eingabefeld hatte gar keine Größe und wuchs dadurch auf
   die volle Breite der Kachel. */
#buddypress#buddypress #whats-new-avatar,
#buddypress#buddypress #whats-new-avatar a{
  display:block;
  float:left;
  width:46px;
  height:46px;
  margin:0 14px 0 0;
  flex:0 0 46px;
}
#buddypress#buddypress #whats-new-avatar img{
  width:46px;
  height:46px;
  max-width:46px;
  display:block;
}
#buddypress#buddypress form#whats-new-form{
  display:flex;
  align-items:flex-start;
  gap:0;
}
#buddypress#buddypress #whats-new-content,
#buddypress#buddypress #whats-new-textarea{
  flex:1 1 auto;
  min-width:0;
}

#buddypress ul.activity-list li.activity-item{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
#buddypress .activity-header p{
  color:var(--dth-gedaempft);
  font-size:14px;
}
#buddypress .activity-content .activity-inner{
  font-size:16px;
  line-height:1.6;
}

/* Reiterleiste */
#buddypress div.item-list-tabs ul,
#buddypress .bp-navs ul{
  display:flex;
  gap:6px;
  border:0;
  background:transparent;
  padding:0;
  margin:0 0 16px;
  flex-wrap:wrap;
}
#buddypress div.item-list-tabs ul li,
#buddypress .bp-navs ul li{
  float:none;
  margin:0;
}
#buddypress div.item-list-tabs ul li a,
#buddypress .bp-navs ul li a{
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  background:var(--dth-flaeche);
  color:var(--dth-gedaempft);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  border:1px solid transparent;
}
#buddypress div.item-list-tabs ul li.selected a,
#buddypress div.item-list-tabs ul li.current a,
#buddypress .bp-navs ul li.selected a,
#buddypress .bp-navs ul li.current a{
  background:var(--dth-navy);
  color:#fff;
}
#buddypress div.item-list-tabs ul li a:hover,
#buddypress .bp-navs ul li a:hover{
  background:var(--dth-linie);
  color:var(--dth-tinte);
}

/* Hinweise – der blaue Standardbalken passt nicht */
#buddypress div.bp-feedback,
#buddypress .bp-feedback{
  border:1px solid var(--dth-linie);
  border-left:4px solid var(--dth-gruen);
  border-radius:12px;
  background:var(--dth-flaeche);
  color:var(--dth-tinte);
  box-shadow:none;
  padding:0;
  overflow:hidden;
}
#buddypress div.bp-feedback .bp-icon,
#buddypress .bp-feedback .bp-icon{
  background:transparent;
  color:var(--dth-gruen);
}
#buddypress div.bp-feedback p{
  padding:14px 16px;
  margin:0;
  color:var(--dth-tinte);
}

/* ── Listen: Gruppen und Mitglieder ─────────────────────────────────────────
   ACHTUNG: Der Aktivitätsstrom trägt ebenfalls die Klasse "item-list"
   (<ul class="activity-list item-list bp-list">). Eine Regel auf
   "ul.item-list li" trifft deshalb auch die Beiträge und legt dort Avatar,
   Text und Kommentare nebeneinander. Darum hier ausdrücklich nur die
   Verzeichnisse ansprechen.
   -------------------------------------------------------------------------- */
#buddypress #members-list > li,
#buddypress #groups-list > li,
#buddypress ul.item-list:not(.activity-list) > li{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  margin-bottom:12px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
  display:flex;
  gap:16px;
  align-items:center;
}
#buddypress ul.item-list:not(.activity-list) > li .item-title,
#buddypress ul.item-list:not(.activity-list) > li h2{
  font-size:18px;
  margin:0 0 4px;
}
#buddypress ul.item-list:not(.activity-list) > li .item-meta,
#buddypress ul.item-list:not(.activity-list) > li .item-desc{
  color:var(--dth-gedaempft);
  font-size:14px;
}

/* ── Beiträge und ihre Antworten ─────────────────────────────────────────── */
#buddypress ul.activity-list > li.activity-item{
  display:block;          /* niemals flex - siehe Hinweis oben */
  position:relative;
  padding-left:74px;      /* Platz für das Bild links */
}
#buddypress ul.activity-list > li.activity-item .activity-avatar{
  position:absolute;
  left:18px;
  top:18px;
  float:none;
  margin:0;
  width:44px;
}
#buddypress ul.activity-list > li.activity-item .activity-avatar img{
  width:44px;
  height:44px;
  max-width:44px;
  display:block;
}
#buddypress .activity-content,
#buddypress .activity-header,
#buddypress .activity-inner{
  width:auto;
  max-width:none;
  margin-left:0;
  float:none;
}

/* Antworten hängen eingerückt unter dem Beitrag, nicht daneben. */
#buddypress ul.activity-comments{
  display:block;
  width:auto;
  max-width:none;
  margin:14px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--dth-linie);
  list-style:none;
  float:none;
  clear:both;
}
#buddypress ul.activity-comments li{
  display:block;
  width:auto;
  max-width:none;
  float:none;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:10px 0 10px 46px;
  margin:0;
  position:relative;
}
#buddypress ul.activity-comments li ul{
  margin-left:20px;
  padding-left:0;
  border-left:2px solid var(--dth-linie);
}
#buddypress ul.activity-comments li > .acomment-avatar,
#buddypress ul.activity-comments li > a > img.avatar,
#buddypress ul.activity-comments img.avatar{
  position:absolute;
  left:0;
  top:10px;
  width:34px;
  height:34px;
  max-width:34px;
  border-radius:50%;
  float:none;
  margin:0;
  display:block;
}

/* Sicherheitsnetz: Kein Profilbild darf irgendwo unbegrenzt wachsen. Die
   Dateien liegen als bpfull vor und werden sonst in Originalgröße gezeigt. */
#buddypress#buddypress img.avatar{
  max-width:100px;
  max-height:100px;
}
#buddypress#buddypress .item-avatar img.avatar,
#buddypress#buddypress ul.item-list img.avatar{
  width:56px;
  height:56px;
  max-width:56px;
}
#buddypress .acomment-meta{
  font-size:13px;
  color:var(--dth-gedaempft);
  margin-bottom:2px;
}
#buddypress .acomment-content{
  font-size:15px;
  line-height:1.6;
  width:auto;
  max-width:none;
}
#buddypress .acomment-content p:last-child{ margin-bottom:0; }

/* Die Knöpfe unter Beitrag und Antwort.
   Die doppelte ID hebt die Spezifität über die Vorgaben von bp-nouveau, ohne
   dass irgendwo !important stehen muss. bp-nouveau lässt die Knöpfe nach
   rechts fließen; dadurch liefen sie aus dem Kasten heraus. */
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options,
#buddypress#buddypress .comment-item .activity-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  padding:0;
  float:none;
  clear:both;
  width:auto;
  max-width:100%;
}
/* Die Knöpfe wurden unten abgeschnitten: sie waren höher als das Band, in dem
   sie sitzen, und dessen feste Höhe schnitt sie ab. Deshalb hier beides -
   die Behälter dürfen wachsen, und die Knöpfe selbst werden flacher. */
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options,
#buddypress#buddypress li.activity-item,
#buddypress#buddypress li.comment-item,
#buddypress#buddypress .activity-content,
#buddypress#buddypress .activity-comments{
  overflow:visible;
  height:auto;
  min-height:0;
}
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options{
  padding-bottom:4px;
  line-height:normal;
}

/* Ansprechen, was die Knöpfe SIND - nicht, wo sie liegen. bp-nouveau hängt
   sie je nach Zusammenhang in unterschiedliche Behälter. */
#buddypress#buddypress a.acomment-reply,
#buddypress#buddypress a.acomment-delete,
#buddypress#buddypress a.delete-activity,
#buddypress#buddypress a.delete-activity-single,
#buddypress#buddypress a.activity-time-since,
#buddypress#buddypress .activity-item a.button,
#buddypress#buddypress .comment-item a.button,
#buddypress#buddypress .activity-meta a,
#buddypress#buddypress .activity-meta button,
#buddypress#buddypress .acomment-options a,
#buddypress#buddypress .acomment-options button{
  display:inline-flex;
  align-items:center;
  float:none;
  margin:0;
  font-size:13px;
  padding:6px 14px;
  line-height:1.35;
  height:auto;
  min-height:0;
  white-space:nowrap;
  border-radius:999px;
}

/* Nichts darf breiter werden als sein Kasten. Lange Adressen ohne Leerzeichen
   sind der häufigste Grund dafür, dass eine Zeile hinausläuft. */
#buddypress li.activity-item,
#buddypress li.comment-item,
#buddypress .activity-content,
#buddypress .activity-inner,
#buddypress .acomment-content,
#buddypress .activity-comments{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
#buddypress .activity-inner,
#buddypress .acomment-content{
  overflow-wrap:anywhere;
}
#buddypress .activity-inner img,
#buddypress .acomment-content img{
  max-width:100%;
  height:auto;
}

#buddypress .activity-comments form.ac-form{
  margin:10px 0 0 46px;
  width:auto;
  max-width:calc(100% - 46px);
}

/* ── Kursseiten von LearnPress ──────────────────────────────────────────── */
.lp-course-curriculum .course-section,
.course-curriculum .section{
  border:1px solid var(--dth-linie);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  background:#fff;
}
.lp-course-curriculum .section-header,
.course-curriculum .section-header{
  background:var(--dth-flaeche);
  padding:14px 18px;
}
.lp-course-curriculum .section-title,
.course-curriculum .section-title{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-size:20px;
}
.course-item-title{ font-size:15px; }
:root{ --lp-primary-color:#1d2b65; --lp-secondary-color:#3eb489; }

/* Der gelbe Standardknopf von LearnPress */
.lp-button, .course-buttons .button, button.lp-button{
  background:var(--dth-navy) !important;
  color:#fff !important;
  border-radius:10px !important;
}

/* ── Gruppen und Mitglieder als Karten ──────────────────────────────────────
   BuddyPress bringt ein Raster mit (Einstellung groups_layout). Hier bekommt es
   Titelbild, Logo und die Gesichter der Mitglieder.
   -------------------------------------------------------------------------- */
#buddypress ul.item-list.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
  padding:0;
  margin:0;
  list-style:none;
}
#buddypress ul.item-list.grid > li{
  display:block;
  float:none;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#buddypress ul.item-list.grid > li .list-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(17,24,39,.05);
  transition:box-shadow .18s ease, transform .18s ease;
}
#buddypress ul.item-list.grid > li .list-wrap:hover{
  box-shadow:0 6px 20px rgba(17,24,39,.10);
  transform:translateY(-2px);
}

/* Titelbild */
#buddypress .dth-gruppe-kopf{
  height:104px;
  background-size:cover;
  background-position:center;
  background-color:var(--dth-flaeche);
}
#buddypress .dth-gruppe-kopf.ohne-bild{
  background-image:linear-gradient(135deg, var(--dth-navy), var(--dth-gruen));
  opacity:.85;
}

/* Logo ragt in das Titelbild hinein - kein Kasten drumherum, das Bild ist
   bereits rund. */
#buddypress ul.item-list.grid > li .item-avatar{
  position:relative;
  margin:-38px auto 0;
  width:72px;
  height:72px;
  padding:0;
  border:0;
  background:transparent;
  z-index:2;
}
#buddypress ul.item-list.grid > li .item-avatar a{
  display:block;
  border:0;
  background:transparent;
  padding:0;
}
#buddypress ul.item-list.grid > li .item-avatar img{
  width:72px;
  height:72px;
  max-width:72px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  box-shadow:0 0 0 4px #fff, 0 2px 8px rgba(17,24,39,.14);
  display:block;
}

#buddypress ul.item-list.grid > li .item{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  align-items:center;
  text-align:center;
  padding:14px 16px 18px;
  gap:6px;
}
#buddypress ul.item-list.grid > li .item-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:100%;
}
#buddypress ul.item-list.grid .list-title{
  font-size:17px;
  line-height:1.25;
  margin:0;
}
#buddypress ul.item-list.grid .list-title a{ color:var(--dth-navy); text-decoration:none; }
#buddypress ul.item-list.grid .list-title a:hover{ color:var(--dth-gruen); }
#buddypress ul.item-list.grid .item-meta{
  font-size:13px;
  color:var(--dth-gedaempft);
  margin:0;
}
#buddypress ul.item-list.grid .group-desc{
  font-size:13px;
  color:var(--dth-gedaempft);
  line-height:1.5;
  margin:2px 0 0;
}
#buddypress ul.item-list.grid .group-desc p{ margin:0; }

/* Die Gesichter der Mitglieder */
#buddypress .dth-gruppe-gesichter{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
}
#buddypress .dth-gruppe-gesichter .dth-gesicht{ display:block; margin-left:-8px; }
#buddypress .dth-gruppe-gesichter .dth-gesicht:first-child{ margin-left:0; }
#buddypress#buddypress .dth-gruppe-gesichter img{
  width:30px;
  height:30px;
  max-width:30px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px #fff;
  display:block;
}
#buddypress .dth-gruppe-gesichter .dth-gesicht-mehr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-left:-8px;
  border-radius:50%;
  background:var(--dth-flaeche);
  box-shadow:0 0 0 2px #fff;
  font-size:11px;
  font-weight:700;
  color:var(--dth-gedaempft);
}

/* ── Knöpfe kleben nicht mehr aneinander ────────────────────────────────── */
#buddypress#buddypress .group-button,
#buddypress#buddypress .member-button,
#buddypress#buddypress .generic-button,
#buddypress#buddypress .bp-group-buttons,
#buddypress#buddypress .action{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:8px 0 0;
  float:none;
}
#buddypress#buddypress .action > *,
#buddypress#buddypress .group-button > *{ margin:0; }

/* ── Eckige Rahmen um runde Bilder ──────────────────────────────────────────
   bp-nouveau legt um Avatare teils einen Kasten mit Rand und Innenabstand.
   Das Bild ist bereits rund, der Kasten stört. */
#buddypress .item-avatar,
#buddypress .activity-avatar,
#buddypress .acomment-avatar,
#buddypress #whats-new-avatar{
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}

/* ── Angehängte Dateien ─────────────────────────────────────────────────── */
#buddypress .dth-anhaenge{ margin:12px 0 0; }

#buddypress .dth-bilder{
  display:grid;
  gap:6px;
  border-radius:12px;
  overflow:hidden;
}
#buddypress .dth-bilder-1{ grid-template-columns:1fr; }
#buddypress .dth-bilder-2{ grid-template-columns:1fr 1fr; }
#buddypress .dth-bilder-3,
#buddypress .dth-bilder-4{ grid-template-columns:1fr 1fr; }
#buddypress .dth-bild{ display:block; line-height:0; }
#buddypress .dth-bild img{
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
  display:block;
}
#buddypress .dth-bilder-1 .dth-bild img{ object-fit:contain; background:var(--dth-flaeche); }

/* Videos und Tonaufnahmen */
#buddypress .dth-video,
#buddypress .dth-ton{ margin-top:10px; }
#buddypress .dth-video video{
  width:100%;
  max-height:460px;
  border-radius:12px;
  background:#111827;
  display:block;
}
#buddypress .dth-ton audio{ width:100%; }
#buddypress .dth-video-info{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--dth-gedaempft);
}

/* Leuchtkasten für Fotos */
.dth-leuchtkasten{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.92);
  padding:24px;
  cursor:zoom-out;
}
.dth-leuchtkasten img{
  max-width:100%;
  max-height:100%;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  cursor:default;
}
.dth-leuchtkasten .dth-lk-zu{
  position:absolute;
  top:16px;
  right:20px;
  background:none;
  border:0;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.dth-leuchtkasten .dth-lk-zu:hover{ opacity:1; }
.dth-leuchtkasten .dth-lk-blatt{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.14);
  border:0;
  color:#fff;
  font-size:28px;
  width:46px;
  height:46px;
  border-radius:50%;
  cursor:pointer;
}
.dth-leuchtkasten .dth-lk-blatt:hover{ background:rgba(255,255,255,.26); }
.dth-leuchtkasten .dth-lk-zurueck{ left:16px; }
.dth-leuchtkasten .dth-lk-vor{ right:16px; }
.dth-leuchtkasten .dth-lk-name{
  position:absolute;
  bottom:16px;
  left:0;
  right:0;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

#buddypress a.dth-datei{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid var(--dth-linie);
  border-radius:12px;
  background:var(--dth-flaeche);
  text-decoration:none;
  color:var(--dth-tinte);
  transition:border-color .15s ease, background .15s ease;
}
#buddypress a.dth-datei:hover{ border-color:var(--dth-navy); background:#fff; }
#buddypress .dth-datei-symbol{ font-size:24px; line-height:1; }
#buddypress .dth-datei-text{ display:flex; flex-direction:column; min-width:0; }
#buddypress .dth-datei-text strong{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#buddypress .dth-datei-info{ font-size:13px; color:var(--dth-gedaempft); }
#buddypress .dth-datei-pfeil{ margin-left:auto; color:var(--dth-navy); font-size:19px; }

/* Der Knopf unter dem Eingabefeld */
#buddypress .dth-anhang-leiste{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
#buddypress .dth-anhang-knopf{
  background:var(--dth-flaeche);
  color:var(--dth-gedaempft);
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:7px 14px;
  font-size:14px;
  cursor:pointer;
}
#buddypress .dth-anhang-knopf:hover{ border-color:var(--dth-navy); color:var(--dth-navy); background:#fff; }
#buddypress .dth-anhang-knopf[disabled]{ opacity:.6; cursor:progress; }
#buddypress .dth-anhang-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(62,180,137,.12);
  border:1px solid var(--dth-gruen);
  border-radius:999px;
  padding:5px 11px;
  font-size:13px;
}
#buddypress .dth-anhang-chip em{ color:var(--dth-gedaempft); font-style:normal; }
#buddypress .dth-anhang-chip.ist-fehler{
  background:rgba(232,87,42,.10);
  border-color:var(--dth-orange);
  color:var(--dth-orange);
}
#buddypress .dth-anhang-weg{
  background:none;
  border:0;
  padding:0 0 0 2px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  color:var(--dth-gedaempft);
}
#buddypress .dth-anhang-weg:hover{ color:var(--dth-orange); }

/* ── Reaktionen und Anpinnen ────────────────────────────────────────────── */
#buddypress .dth-reaktionen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--dth-linie);
}
#buddypress .dth-reaktion{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--dth-flaeche);
  color:var(--dth-tinte);
  border:1px solid transparent;
  border-radius:999px;
  padding:5px 11px;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
#buddypress .dth-reaktion:hover{
  background:#fff;
  border-color:var(--dth-linie);
  transform:translateY(-1px);
}
#buddypress .dth-reaktion.ist-meine{
  background:rgba(62,180,137,.14);
  border-color:var(--dth-gruen);
}
/* Ungenutzte Reaktionen treten zurück, bis man mit der Maus darüber geht. */
#buddypress .dth-reaktion.ist-leer{ opacity:.45; }
#buddypress .dth-reaktion.ist-leer:hover{ opacity:1; }
#buddypress .dth-reaktion .dth-anzahl{
  font-size:13px;
  font-weight:700;
  color:var(--dth-gedaempft);
}
#buddypress .dth-reaktion.ist-meine .dth-anzahl{ color:var(--dth-navy); }

#buddypress .dth-anpinnen{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:5px 12px;
  font-size:13px;
  color:var(--dth-gedaempft);
  cursor:pointer;
}
#buddypress .dth-anpinnen:hover{ border-color:var(--dth-navy); color:var(--dth-navy); }
#buddypress .dth-anpinnen.ist-angepinnt{
  background:var(--dth-navy);
  border-color:var(--dth-navy);
  color:#fff;
}
#buddypress .dth-pin-marke{ margin-left:auto; font-size:15px; }

/* Ein angepinnter Beitrag hebt sich ab, ohne zu schreien. */
#buddypress li.activity-item.dth-ist-angepinnt{
  border-color:var(--dth-navy);
  box-shadow:0 2px 10px rgba(29,43,101,.10);
}
#buddypress li.activity-item.dth-ist-angepinnt::before{
  content:"📌 Oben gehalten";
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--dth-navy);
  margin-bottom:10px;
}

/* ── Glocke, Postfach und Profil im Menü ────────────────────────────────── */
.dth-menue-symbol > a,
.dth-menue-ich > a{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:4px 6px;
}
.dth-menue-symbol .dth-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  color:#1d2b65;
  opacity:.72;
  transition:opacity .15s ease, color .15s ease;
}
.dth-menue-symbol .dth-symbol svg{ display:block; }
.dth-menue-symbol > a:hover .dth-symbol{ opacity:1; color:#3eb489; }
.dth-menue-zahl{
  position:absolute;
  top:-2px;
  right:-4px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:#3eb489;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:17px;
  text-align:center;
}
.dth-menue-ich img{
  width:30px;
  height:30px;
  max-width:30px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 0 0 2px rgba(29,43,101,.12);
}
.dth-menue-ich > a:hover img{ box-shadow:0 0 0 2px #3eb489; }

/* ── Karten, die nicht mehr klicken ─────────────────────────────────────────
   Die Übersichtskarten in den Modulen zeigten auf die alte Academy. Die Ziele
   sind entfernt; damit sich der Mauszeiger nicht mehr wie bei einem Link
   verhält, tragen sie jetzt diese Klasse. Aussehen bleibt unverändert.
   -------------------------------------------------------------------------- */
.dth-kein-link{
  cursor:default;
  text-decoration:none;
}
.dth-kein-link:hover{
  text-decoration:none;
}

/* ── FlowBuddy in der Ecke ──────────────────────────────────────────────────
   Klein, still, wegklickbar. Sie darf nichts verdecken und niemanden beim
   Arbeiten stören — deshalb unten rechts, ohne Kasten, ohne Schatten-Show.
   -------------------------------------------------------------------------- */
.fb-ecke{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9000;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:.92;
  transition:opacity .3s ease, transform .4s ease;
  --fbe-farbe:#4caf50;
  --fbe-hell:#7bd37f;
  --fbe-tief:#2e7a31;
}
.fb-ecke:hover{ opacity:1; }
.fb-ecke.ist-weg{ opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; }

.fb-ecke .fb-ecke-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  filter:drop-shadow(0 6px 14px rgba(17,24,39,.16));
}
.fb-ecke .fb-ecke-bild{ display:block; overflow:visible; }

/* Das Wort erscheint als Sprechblase ÜBER ihrem Kopf — und nur beim
   Darüberfahren. Rund und weich, aber in derselben Schrift wie die Seite:
   eine Comic-Schrift würde billig wirken, das Runde macht die Form. */
.fb-ecke .fb-ecke-link{ position:relative; }
.fb-ecke .fb-ecke-wort{
  position:absolute;
  bottom:calc(100% - 6px);
  left:50%;
  padding:6px 14px;
  border-radius:999px;
  background:#fff;
  color:var(--fbe-tief);
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(17,24,39,.14), 0 0 0 1px rgba(17,24,39,.05);
  opacity:0;
  transform:translate(-50%, 6px) scale(.86);
  transform-origin:50% 100%;
  transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
/* Das Schwänzchen der Blase — zwei Kreise, das wirkt weicher als ein Dreieck */
.fb-ecke .fb-ecke-wort::before,
.fb-ecke .fb-ecke-wort::after{
  content:'';
  position:absolute;
  left:50%;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(17,24,39,.10);
}
.fb-ecke .fb-ecke-wort::before{
  width:8px; height:8px;
  bottom:-5px;
  transform:translateX(-11px);
}
.fb-ecke .fb-ecke-wort::after{
  width:5px; height:5px;
  bottom:-11px;
  transform:translateX(-4px);
}
.fb-ecke:hover .fb-ecke-wort,
.fb-ecke:focus-within .fb-ecke-wort{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

/* Der Rückweg auf /flowbuddy/, falls jemand sie in der Ecke weggeklickt hat.
   Erscheint nur dann — sonst steht dort nichts. */
.fb-wieder{
  display:block;
  margin:14px auto 0;
  padding:8px 16px;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--dth-tinte, #111827) 6%, transparent);
  color:var(--dth-tinte, #111827);
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease;
}
.fb-wieder:hover{ background:color-mix(in srgb, var(--dth-tinte, #111827) 11%, transparent); }
.fb-wieder:disabled{ cursor:default; opacity:.65; }

/* Hat man ihr mit der richtigen Gegenfarbe geholfen, nennt sie die HANDLUNG,
   mit der man ausgleicht — nicht nur die Farbe. Der Satz zeigt sich von
   selbst, ohne Darüberfahren, und ist rechtsbündig verankert: mittig würde
   er über den Bildschirmrand hinauslaufen. */
.fb-ecke.zeigt-handlung .fb-ecke-wort{
  opacity:1;
  left:auto;
  right:-4px;
  max-width:186px;
  white-space:normal;
  text-align:center;
  font-weight:500;
  line-height:1.35;
  transform:translate(0, 0) scale(1);
  transform-origin:100% 100%;
}
.fb-ecke.zeigt-handlung .fb-ecke-wort::before{
  left:auto; right:34px; transform:none;
}
.fb-ecke.zeigt-handlung .fb-ecke-wort::after{
  left:auto; right:41px; transform:none;
}

.fb-ecke .fb-ecke-zu{
  align-self:flex-end;
  margin:0 2px -4px 0;
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  background:rgba(17,24,39,.06);
  color:var(--dth-gedaempft, #6b7280);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease;
}
.fb-ecke:hover .fb-ecke-zu,
.fb-ecke .fb-ecke-zu:focus{ opacity:1; }
.fb-ecke .fb-ecke-zu:hover{ background:rgba(17,24,39,.14); color:var(--dth-tinte, #111827); }

/* Die vier Farbpunkte — erscheinen nur, wenn sie Hilfe braucht */
.fb-ecke .fb-ecke-punkte{
  display:flex;
  gap:7px;
  margin-top:8px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--dth-linie, #e5e7eb);
  box-shadow:0 3px 10px rgba(17,24,39,.10);
  animation:fb-punkte-auf .45s ease;
}
.fb-ecke .fb-ecke-punkte[hidden]{ display:none; }
@keyframes fb-punkte-auf{
  from{ opacity:0; transform:translateY(-5px) scale(.9); }
  to{ opacity:1; transform:none; }
}
.fb-ecke .fb-punkt{
  width:17px;
  height:17px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--p);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 0 0 0 var(--p);
}
.fb-ecke .fb-punkt:hover{ transform:scale(1.28); box-shadow:0 0 0 4px color-mix(in srgb, var(--p) 28%, transparent); }
.fb-ecke .fb-punkt.ist-daneben{ animation:fb-punkt-nein .45s ease; }
@keyframes fb-punkt-nein{
  0%,100%{ transform:none; }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

/* Aufatmen, wenn die richtige Farbe getroffen wurde */
.fb-ecke.ist-erleichtert .fb-ecke-bild{ animation:fb-aufatmen 1.1s ease; }
@keyframes fb-aufatmen{
  0%{ transform:none; }
  35%{ transform:scale(1.10) translateY(-4px); }
  100%{ transform:none; }
}

/* Auf schmalen Bildschirmen kleiner und weiter aus dem Weg */
@media (max-width:640px){
  .fb-ecke{ right:12px; bottom:12px; transform:scale(.78); transform-origin:bottom right; }
}

/* Wer Bewegung reduziert haben will, bekommt sie ruhig — das Skript hält den
   Atem an, hier verschwindet zusätzlich die Einblendung des Wortes. */
@media (prefers-reduced-motion: reduce){
  .fb-ecke .fb-ecke-wort.ist-neu{ animation:none; }
  .fb-ecke{ transition:none; }
}

/* ── Fußbereich ─────────────────────────────────────────────────────────── */
.dth-fuss{
  border-top:1px solid var(--dth-linie);
  margin-top:56px;
  padding:26px 20px 34px;
  text-align:center;
  font-size:14px;
  color:var(--dth-gedaempft);
}
.dth-fuss a{
  color:var(--dth-gedaempft);
  text-decoration:none;
  margin:0 9px;
}
.dth-fuss a:hover{ color:var(--dth-navy); text-decoration:underline; }
.dth-fuss .dth-fuss-marke{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-size:19px;
  display:block;
  margin-bottom:6px;
}

/* ── Kleinigkeiten ──────────────────────────────────────────────────────── */
#buddypress .activity-list .activity-content .activity-header img.avatar{ display:none; }
#buddypress a{ color:var(--dth-gruen); }
#buddypress a:hover{ color:var(--dth-navy); }
#buddypress .highlight,
#buddypress span.count{
  background:var(--dth-gruen);
  color:#fff;
  border-radius:999px;
  padding:1px 8px;
  font-size:12px;
  font-weight:700;
}

@media (max-width:782px){
  #buddypress ul.item-list li{ flex-direction:column; align-items:flex-start; }
  #buddypress{ font-size:15px; }
}

/* ==========================================================================
   Die Profilseite  (17.08.2026)
   ==========================================================================

   Vorbild ist die alte BuddyBoss-Seite: ein breites Titelbild, ein GROSSES
   rundes Bild mittig, der Name gross, darunter EINE Zeile Kleingedrucktes,
   dann die Reiter - und kein einziger sichtbarer Kasten im Kasten.

   ⚠️ Der Name kommt NICHT von BuddyPress. Der Kopfbereich enthaelt nur
   "Aktiv vor ..."; der Name ist der Seitentitel des Themes und steht im
   Quelltext VOR dem Kopfbereich. Umsortieren ginge nur mit Flexbox auf dem
   gemeinsamen Elternteil - der umschliesst aber auch den ganzen Rest der
   Seite. Deshalb der andere Weg: Titel und Titelband bekommen denselben
   Untergrund und wachsen optisch zu EINEM Band zusammen. Die Nahtfarbe
   (--dth-navy) muss dafuer in beiden Regeln dieselbe bleiben.
   -------------------------------------------------------------------------- */

body.bp-user .wp-block-post-title{
  margin:0;
  padding:34px 24px 6px;
  background:#fff;
  color:var(--dth-navy);
  text-align:center;
  font-weight:300;                 /* wie auf dth-group.com - keine Serifen, kein Fett */
  letter-spacing:-.03em;
  font-size:clamp(26px, 4.6vw, 40px);
  line-height:1.1;
}

body.bp-user .entry-content{ margin-top:0; }

body.bp-user #buddypress #item-header{
  margin:0;
  padding:0;
  border:0;
  background:none;
}

/* Das Titelband traegt die Schmetterlinge der alten Plattform.
   ⚠️ Untergrund WEISS lassen. Die Falter sind hellgrau auf Weiss - auf
   dunklem Grund verschwinden sie, und mit background-blend-mode:screen
   wird das ganze Band weiss. Genau derselbe Fehler wie damals beim
   Umfaerben des Logos: die Helligkeit steckt in der Transparenz. */
body.bp-user #buddypress #header-cover-image{
  height:196px;
  border:0;
  border-radius:0;
  background-color:#fff;
  background-image:url('/bilder/schmetterlinge.png');
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:cover;
}

body.bp-user #buddypress #cover-image-container{ position:relative; }

/* ⚠️ BuddyPress stellt #item-header-content absolut. Ohne position:static
   legt sich "Aktiv vor ..." quer ueber das Profilbild. */
body.bp-user #buddypress #item-header-cover-image{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 20px 4px;
  position:relative;
}
/* Hier ist !important ausnahmsweise noetig: BuddyPress setzt diese beiden
   Bausteine ueber mehrere Regeln absolut bzw. schwebend, und selbst die
   doppelte ID reicht nicht. Ohne das legt sich "Aktiv vor ..." quer ueber
   das Profilbild. */
body.bp-user #buddypress#buddypress #item-header-cover-image{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
body.bp-user #buddypress#buddypress #item-header-content,
body.bp-user #buddypress#buddypress #item-header-avatar{
  position:static !important;
  float:none !important;
  left:auto; right:auto; top:auto;
}
body.bp-user #buddypress#buddypress #item-header-content{
  width:100% !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  text-align:center;
}

/* Das Bild sitzt gross und mittig, halb im Band - wie auf der alten Seite. */
body.bp-user #buddypress #item-header-avatar{
  margin:-68px 0 0;
  padding:0;
  float:none;
  width:auto;
}
body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
  width:136px;
  height:136px;
  max-width:136px;
  border-radius:50%;
  border:5px solid #fff;
  background:#fff;
  object-fit:cover;
  box-shadow:0 10px 26px rgba(17,24,39,.18);
  display:block;
}

/* Eine einzige Zeile Kleingedrucktes, mittig - kein Kasten darum. */
body.bp-user #buddypress #item-header-content{
  float:none;
  width:100%;
  margin:12px 0 0;
  padding:0;
  text-align:center;
}
body.bp-user #buddypress #item-header-content .item-meta{
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-size:14px;
  color:var(--dth-gedaempft);
}
body.bp-user #buddypress #item-header-content .item-meta .activity{
  padding:0;
  border:0;
  background:none;
}

/* Die Reiter standen jeweils in einem eigenen Kasten - genau das
   "Rahmen um Rahmen". Die Kaesten weg, die Pillen bleiben. */
body.bp-user #buddypress .bp-wrap,
body.bp-user #buddypress .bp-wrap > .main-navs,
body.bp-user #buddypress #item-body,
body.bp-user #buddypress #subnav{
  border:0;
  background:none;
  box-shadow:none;
}
body.bp-user #buddypress .bp-wrap > .main-navs{
  margin-top:26px;
  padding:0 0 6px;
  border-bottom:1px solid var(--dth-linie);
}
body.bp-user #buddypress #subnav{ margin-top:18px; }

/* "Aktivitaeten der Mitglieder" ist auf einem persoenlichen Profil schlicht
   falsch beschriftet - und ueber den Reitern ohnehin doppelt. */
body.bp-user #buddypress .bp-screen-title{ display:none; }

/* ── Das leere erste Rasterfeld ──────────────────────────────────────────────
   In den Verzeichnissen blieb der erste Platz immer frei. Ursache: im
   ul.item-list steht ein Listeneintrag OHNE Karte darin - im Raster wird
   trotzdem eine Zelle dafuer freigehalten. Alles, was keine .list-wrap
   enthaelt, ist keine Karte und darf keinen Platz bekommen. */
#buddypress ul.item-list.grid > li:empty,
#buddypress ul.item-list.grid > li:not(:has(.list-wrap)){
  display:none;
}

/* ── Karten: nur EIN Rahmen ────────────────────────────────────────────────
   In den Gruppenkarten steckte ein Kasten im Kasten im Kasten: die Karte,
   darin ein Rahmen um den Inhalt, darin noch einer um den Beschreibungstext.
   Der einzige sichtbare Rahmen bleibt .list-wrap. */
#buddypress ul.item-list.grid > li .item,
#buddypress ul.item-list.grid > li .item-block,
#buddypress ul.item-list.grid > li .item-desc,
#buddypress ul.item-list.grid > li .item-meta,
#buddypress ul.item-list.grid > li .action{
  border:0;
  background:transparent;
  box-shadow:none;
}
#buddypress ul.item-list.grid > li .item-desc{
  padding:0;
  margin:2px 0 0;
  font-style:normal;
}
/* Gruppen ohne Beschreibung hinterliessen einen leeren Kasten. */
#buddypress ul.item-list.grid > li .item-desc:empty{ display:none; }

/* ── Schmaler Bildschirm ───────────────────────────────────────────────────
   Die Reiterzeile wird sonst umgebrochen und schiebt die Seite auseinander.
   Hier laeuft sie stattdessen waagerecht durch und laesst sich wischen. */
@media (max-width:640px){
  body.bp-user .wp-block-post-title{
    padding:26px 16px 22px;
    border-radius:0;
  }
  body.bp-user #buddypress #header-cover-image{ height:120px; }
  body.bp-user #buddypress #item-header-avatar{ margin-top:-52px; }
  body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
    width:104px; height:104px; max-width:104px; border-width:4px;
  }

  #buddypress .bp-navs ul{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #buddypress .bp-navs ul::-webkit-scrollbar{ display:none; }
  #buddypress .bp-navs ul li{ flex:0 0 auto; }

  #buddypress ul.item-list.grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}