/* ═══════════════════════════════════════════════════
   WEATHERHUNTERS — Dashboard
   Fixe Navbar + wechselnder Content-Bereich
   ═══════════════════════════════════════════════════ */

:root{
  --nav-h:72px; /* Navbar-Höhe, mobil kleiner (siehe Responsive) */
}

body.has-navbar{
  padding-top:var(--nav-h); /* Platz für die fixe Navbar */
}

/* ═══ NAVBAR ═══ */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--nav-h);
  z-index:100;
  background:rgba(26,28,30,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bg-border);
}
.navbar-inner{
  max-width:1200px;
  height:100%;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:2.5rem;
}
.navbar-brand{display:flex;align-items:center;flex-shrink:0}
.navbar-logo{
  height:26px;width:auto;
  filter:brightness(0) saturate(100%) invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg) brightness(.95);
}

/* ═══ NAV LINKS ═══ */
.nav-links{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  flex:1;
}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--txt-m);
  text-decoration:none;
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.03em;
  padding:.4rem 0;
  transition:color var(--transition-base);
}
.nav-link::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}
.nav-link:hover{color:var(--txt)}
.nav-link.active{color:var(--gold)}
.nav-link.active::after{transform:scaleX(1)}

.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 5px;
  border-radius:20px;
  background:var(--danger);
  color:#fff;
  font-size:.65rem;font-weight:700;
}

/* ═══ NAVBAR RIGHT: GEAR + AVATAR ═══ */
.navbar-user{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-shrink:0;
}

.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--bg-border);
  background:transparent;
  color:var(--txt-m);
  cursor:pointer;
  transition:color var(--transition-base),border-color var(--transition-base),transform .4s ease;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{
  color:var(--gold);
  border-color:var(--gold);
  transform:rotate(45deg);
}

.avatar-wrap{position:relative}
.avatar-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--bg-card);
  cursor:pointer;
  overflow:hidden;
  padding:0;
}
.avatar-btn img{width:100%;height:100%;object-fit:cover}
.avatar-initials{
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.8rem;font-weight:600;
  color:var(--gold);
}

/* ═══ AVATAR DROPDOWN ═══ */
.avatar-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:var(--bg-card);
  border:1px solid var(--bg-border);
  border-top:2px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  overflow:hidden;
  z-index:200;
}
.avatar-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.avatar-menu-header{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--bg-border);
}
.avatar-menu-header strong{color:var(--txt);font-size:.85rem}
.avatar-menu-header span{color:var(--txt-m);font-size:.75rem}
.avatar-menu a{
  display:block;
  padding:.75rem 1.1rem;
  color:var(--txt-m);
  text-decoration:none;
  font-size:.85rem;
  transition:background var(--transition-base),color var(--transition-base);
}
.avatar-menu a:hover{background:rgba(201,168,76,.08);color:var(--gold)}

/* ═══ BURGER-BUTTON (nur mobil sichtbar) ═══ */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;height:42px;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--bg-border);
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.nav-burger span{
  display:block;
  height:2px;width:100%;
  border-radius:2px;
  background:var(--txt);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-burger.open{border-color:var(--gold)}
.nav-burger.open span{background:var(--gold)}

/* ═══ SCRIM (abgedunkelter Hintergrund hinterm Mobile-Menü) ═══ */
.nav-scrim{
  position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s;
  z-index:140;
}
.nav-scrim.open{opacity:1;visibility:visible}

/* Bei offenem Mobile-Menü scrollt die Seite dahinter nicht mit */
body.nav-open{overflow:hidden}

/* ═══ CONTENT WRAPPER ═══ */
.dashboard-wrap{
  padding-top:2.5rem;
  padding-bottom:4rem;
  max-width:900px;
}

/* ═══ SECTIONS: nur eine sichtbar zur Zeit ═══ */
.content-section{display:none}
.content-section.active{display:block}

.section-title{
  font-size:1.4rem;
  margin:2.5rem 0 1.25rem;
}
.content-section > .section-title:first-child{margin-top:0}

/* ═══ EMPTY STATE ═══ */
.empty-state{
  padding:3rem 2rem;
  text-align:center;
  color:var(--txt-m);
  font-size:.95rem;
}

/* ═══ FOTO DES TAGES ═══ */
.photo-of-day{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:16/8;
  background:var(--bg-mid);
}
.photo-of-day img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.potd-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:2rem 1.75rem 1.5rem;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 60%,transparent 100%);
}
.potd-label{
  display:inline-block;
  margin-bottom:.5rem;
  font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.potd-overlay h2{font-size:1.6rem;margin-bottom:.3rem;color:#fff}
.potd-overlay p{color:rgba(255,255,255,.75);font-size:.85rem}

/* ═══ BLOG LIST ═══ */
.blog-list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.blog-card{
  display:flex;
  gap:1.25rem;
  padding:1.25rem;
  border-radius:var(--radius);
}
.blog-cover{
  width:140px;height:100px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:4px;
}
.blog-body h3{
  font-family:'Bebas Neue','Haettenschweiler','Arial Narrow','Franklin Gothic Medium',system-ui,sans-serif;
  text-transform:uppercase;
  font-weight:400;
  font-size:1.25rem;
  letter-spacing:.03em;
  color:var(--txt);
  margin-bottom:.3rem;
}
.blog-meta{
  font-size:.72rem;
  letter-spacing:.04em;
  color:var(--gold-dim);
  margin-bottom:.5rem;
  text-transform:uppercase;
}
.blog-excerpt{color:var(--txt-m);font-size:.88rem;line-height:1.6}

/* ═══ FOTOARCHIV GRID ═══ */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem;
}
.photo-grid-item{
  border-radius:var(--radius);
  overflow:hidden;
}
.photo-grid-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}
.photo-grid-item figcaption{
  padding:.85rem 1rem;
  font-size:.82rem;
  color:var(--txt);
}
.photo-grid-item figcaption span{
  display:block;
  margin-top:.2rem;
  font-size:.72rem;
  color:var(--txt-m);
}

/* ═══ WETTERWARNUNGEN ═══ */
.warning-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.warning-card{
  padding:1.25rem 1.5rem;
  border-radius:var(--radius);
  border-left:4px solid var(--gold);
}
.warning-card h3{
  font-size:1.1rem;
  margin:.5rem 0 .4rem;
  color:var(--txt);
}
.warning-card p{font-size:.88rem}
.warning-region{margin-top:.5rem;color:var(--txt-m);font-size:.8rem}

.warning-badge{
  display:inline-block;
  padding:.25rem .7rem;
  border-radius:20px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.warning-card.severity-info{border-left-color:var(--gold)}
.warning-card.severity-info .warning-badge{background:rgba(201,168,76,.15);color:var(--gold)}

.warning-card.severity-warning{border-left-color:#ffa502}
.warning-card.severity-warning .warning-badge{background:rgba(255,165,2,.15);color:#ffa502}

.warning-card.severity-danger{border-left-color:var(--danger)}
.warning-card.severity-danger .warning-badge{background:rgba(255,107,107,.15);color:var(--danger)}

/* ═══ EINSTELLUNGEN / PROFIL ═══ */
.profile-card{
  padding:2rem;
}
.profile-card h2{
  font-size:1.3rem;
  margin-bottom:1.5rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--bg-border);
  color:var(--gold);
}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.5rem;
}
.profile-grid > div{
  background:rgba(255,255,255,.02);
  border:1px solid var(--bg-border);
  border-radius:4px;
  padding:1rem 1.25rem;
}
.profile-grid strong{
  display:block;
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin-bottom:.4rem;
}
.profile-grid p{
  color:var(--txt);
  font-size:.95rem;
}

/* ═══ SPRACHAUSWAHL (Einstellungen) ═══ */
.settings-hint{
  font-size:.85rem;
  margin-bottom:1.25rem;
}
.language-form{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.language-options{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.language-option{
  display:flex;align-items:center;gap:.6rem;
  padding:.75rem 1.25rem;
  border-radius:6px;
  border:1px solid var(--bg-border);
  background:rgba(255,255,255,.02);
  color:var(--txt-m);
  font-size:.88rem;
  cursor:pointer;
  transition:border-color var(--transition-base),color var(--transition-base);
}
.language-option input{accent-color:var(--gold)}
.language-option.is-selected{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(201,168,76,.06);
}
.language-form .btn{
  align-self:flex-start;
}

/* ═══ RADARKARTE ═══ */
.map-shell{
  padding:1.25rem;
  border-radius:var(--radius);
}
.map-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.map-search{
  position:relative;
  flex:1;
  min-width:220px;
}
.map-search input{
  width:100%;
  padding:.7rem 1rem;
  border-radius:4px;
  border:1px solid var(--bg-border);
  background:rgba(255,255,255,.02);
  color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:.88rem;
  outline:none;
}
.map-search input:focus{border-color:var(--gold)}
.map-search-results{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;right:0;
  background:var(--bg-card);
  border:1px solid var(--bg-border);
  border-radius:4px;
  box-shadow:var(--shadow);
  max-height:260px;
  overflow-y:auto;
  z-index:1000;
}
.map-search-results.open{display:block}
.map-search-item{
  padding:.65rem .9rem;
  font-size:.82rem;
  color:var(--txt-m);
  cursor:pointer;
  border-bottom:1px solid var(--bg-border);
}
.map-search-item:last-child{border-bottom:none}
.map-search-item:hover{background:rgba(201,168,76,.08);color:var(--gold)}
.map-search-empty{padding:.75rem .9rem;font-size:.8rem;color:var(--txt-d)}

.layer-toggle-list{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.layer-toggle{
  display:flex;align-items:center;gap:.4rem;
  padding:.5rem .85rem;
  border-radius:20px;
  border:1px solid var(--bg-border);
  background:rgba(255,255,255,.02);
  font-size:.78rem;
  color:var(--txt-m);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.layer-toggle input{accent-color:var(--gold)}
.layer-toggle:has(input:checked){
  border-color:var(--gold);
  color:var(--gold);
}
.layer-toggle.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}
.layer-toggle.is-disabled em{
  font-style:normal;
  color:var(--gold-dim);
  font-size:.68rem;
  margin-left:.15rem;
}

.map-container{
  width:100%;
  height:520px;
  border-radius:4px;
  overflow:hidden;
  background:var(--bg-mid);
}

.map-error{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:2rem;
  text-align:center;
  color:var(--txt-m);
  font-size:.9rem;
  line-height:1.6;
}

.map-footer{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.85rem;
  font-size:.72rem;
  color:var(--txt-d);
}
.map-attribution a{color:var(--gold-dim)}

/* ═══ LEAFLET THEME OVERRIDES ═══ */
.leaflet-container{
  background:var(--bg-mid);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.leaflet-control-zoom a{
  background:var(--bg-card) !important;
  color:var(--txt) !important;
  border-color:var(--bg-border) !important;
}
.leaflet-control-zoom a:hover{
  background:rgba(201,168,76,.15) !important;
  color:var(--gold) !important;
}
.leaflet-control-attribution{
  background:rgba(26,28,30,.75) !important;
  color:var(--txt-d) !important;
}
.leaflet-control-attribution a{color:var(--gold-dim) !important}
.leaflet-popup-content-wrapper{
  background:var(--bg-card) !important;
  color:var(--txt) !important;
  border:1px solid var(--bg-border);
  border-radius:4px !important;
}
.leaflet-popup-tip{background:var(--bg-card) !important}
.leaflet-popup-content{font-size:.82rem !important}

/* ═══ RESPONSIVE ═══ */

/* ── Tablet & Handy: Nav-Links werden zum Slide-in-Drawer ── */
@media(max-width:1024px){

  .navbar-inner{gap:1rem}

  .nav-burger{display:flex}

  .nav-links{
    position:fixed;
    top:var(--nav-h);right:0;bottom:0;
    width:min(320px,85vw);
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:1rem .9rem calc(1.5rem + env(safe-area-inset-bottom));
    background:rgba(22,24,26,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-left:1px solid var(--bg-border);
    overflow-y:auto;
    transform:translateX(105%);
    transition:transform .28s cubic-bezier(.2,.7,.3,1);
    z-index:150;
  }
  .nav-links.open{transform:none}

  .nav-links li{width:100%}

  .nav-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:.9rem 1rem;
    font-size:.95rem;
    border-radius:8px;
  }
  .nav-link::after{display:none}
  .nav-link:hover{background:rgba(255,255,255,.04)}
  .nav-link.active{background:rgba(201,168,76,.12)}

}

/* ── Handy: kompaktere Navbar + Inhalts-Feinschliff ── */
@media(max-width:700px){

  :root{--nav-h:60px}

  .navbar-inner{padding:0 14px;gap:.75rem}
  .navbar-logo{height:22px}
  .navbar-user{gap:.6rem}

  /* Eingaben mind. 16px, sonst zoomt iOS beim Fokussieren rein */
  .input,
  .map-search input{font-size:16px}

}

@media(max-width:600px){

  .dashboard-wrap{padding-top:1.25rem}

  .section-title{font-size:1.2rem;margin:1.75rem 0 1rem}

  /* Blog-Karten untereinander */
  .blog-card{flex-direction:column;gap:.9rem;padding:1rem}
  .blog-cover{width:100%;height:170px}

  /* Foto des Tages */
  .photo-of-day{aspect-ratio:4/3}
  .potd-overlay{padding:1.25rem 1rem 1rem}
  .potd-overlay h2{font-size:1.25rem}

  /* Karten-Toolbar: Suche volle Breite, Buttons teilen sich eine Zeile */
  .map-toolbar{gap:.6rem}
  .map-search{flex-basis:100%;min-width:0}
  .map-container{height:380px}

  /* Foto-Grids: 2 Spalten statt 1 riesiger */
  .photo-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .photo-grid-item figcaption{padding:.6rem .7rem;font-size:.75rem}
  .cphoto-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .cphoto-card img{height:120px}

  /* Karten/Panels mit weniger Innenabstand */
  .profile-card{padding:1.25rem}
  .warning-card{padding:1rem 1.1rem}
  .empty-state{padding:2rem 1.25rem}

  /* Community */
  .cprofile-head{padding:1.25rem;gap:1rem}
  .cavatar-xl{width:72px;height:72px;font-size:1.5rem}
  .ccard{padding:.85rem 1rem}
  /* Am Handy zwar schmaler, aber oben bleibt Platz fürs Kreuz. */
  .clightbox{padding:2.6rem .7rem .8rem}
  /* Auf dem Handy blättert man ohnehin per Wischen — die Pfeile
     rücken kleiner an den Rand, damit sie das Bild nicht bedrängen. */
  .clightbox-nav{width:38px;height:38px}
  .clightbox-prev{left:.35rem}
  .clightbox-next{right:.35rem}

  /* Benachrichtigungen: Datum über den Text statt daneben */
  .notif-item{flex-direction:column;gap:.4rem}
  .notif-date{order:-1}

  /* Quiz */
  .quiz-question{padding:1rem 1.1rem}

  /* Sprachauswahl: 2 Spalten */
  .language-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .language-option{padding:.65rem .8rem;font-size:.82rem}

  /* Buttons bequemer tippbar */
  .language-form .btn,
  .quiz-form .btn,
  .team-join-form .btn{align-self:stretch;width:100%}

}


/* ═══════════ LIVE-TRACKING (Radarkarte + Einstellungen) ═══════════ */

/* Marker auf der Karte: goldener Punkt + Team-Label */

.wh-user-marker {
    background: none;
    border: none;
}

.wh-user-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #C9A84C;
    border: 2px solid #101014;
    box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35), 0 0 12px rgba(201, 168, 76, 0.6);
}

.wh-user-label {
    position: absolute;
    top: -6px;
    left: 20px;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 16, 20, 0.9);
    border: 1px solid #C9A84C;
    color: #C9A84C;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}


/* Einstellungen: Tracking-Formular + Anleitung */

.tracking-form .input-group {
    margin-bottom: 16px;
}

.tracking-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px 0;
    cursor: pointer;
    color: inherit;
}

.tracking-toggle input {
    accent-color: #C9A84C;
    width: 18px;
    height: 18px;
}

.tracking-setup {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
}

.tracking-setup h3 {
    margin-bottom: 12px;
}

.tracking-setup ol {
    margin: 0 0 16px 20px;
    display: grid;
    gap: 10px;
}

.tracking-code {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(201, 168, 76, 0.12);
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: #C9A84C;
    font-family: monospace;
    font-size: 0.9em;
    user-select: all;
    word-break: break-all;
}

.tracking-warning {
    font-size: 0.85rem;
    opacity: 0.8;
}


/* ═══ Community-Seiten (Mitglieder, Teams, Profile) ═══ */

.community-wrap{padding-top:1.5rem}
.community-head{margin:2rem 0 1rem}
.community-head h1,.community-head h2{margin:0 0 .35rem}

/* Handy-Deckel fuer die Ueberschrift einer Community-Seite
   (ToDo #96, 28.08.2026).

   Hier stand bisher nur die globale h1-Groesse: 2.6rem, am Handy
   2.1rem (style.css). Bei einem langen Titel reicht das nicht — die
   Zeile "Wissensdatenbank der Himmelsphaenomene" war auf einem
   375-px-Geraet 414 px breit und wurde seit #95 von 'overflow-x:
   clip' schlicht abgeschnitten. Vorher schob sie die Seite nach
   rechts; beides ist falsch, der Titel gehoert vollstaendig ins Bild.

   Die Zahl ist keine neue Erfindung: Die Systemkopfzeile deckelt ihre
   Ueberschrift an genau derselben Grenze auf 1.6rem
   (.wh-page-head h1, wh-system.css, @media max-width 780). Damit
   sehen beide Seitenkoepfe am Handy gleich aus. Der Deckel gilt NUR
   mobil — am Schreibtisch bleiben es 2.6rem. */
@media (max-width: 780px) {
  .community-head h1{font-size:1.6rem}
}
@media (max-width: 420px) {
  .community-head h1{font-size:1.35rem}
}

/* Sicherung fuer Extrem-Komposita. Ein einzelnes Wort, das auch bei
   1.35rem breiter bleibt als das Fenster, soll umbrechen statt
   ueberzustehen. Beides greift nur, wenn es sonst ueberliefe — auf
   dem Schreibtisch aendert sich dadurch nichts. */
.community-head h1,.community-head h2{overflow-wrap:break-word;hyphens:auto}

.ccard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}
.ccard{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;
  border-radius:10px;
  text-decoration:none;color:var(--txt-m);
  transition:border-color var(--transition-base),transform var(--transition-base);
}
.ccard:hover{border-color:var(--gold);transform:translateY(-2px)}
.ccard-body{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ccard-name{color:#fff;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccard-team{color:var(--gold);font-size:.8rem}
.ccard-meta{font-size:.75rem;color:var(--txt-m)}
.ccard-desc{font-size:.78rem;color:var(--txt-m);line-height:1.4}

.cavatar{
  flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,.12);
  color:var(--gold);font-weight:600;font-size:1.05rem;
  border:1px solid rgba(201,168,76,.35);
  overflow:hidden;
}
.cavatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cavatar-team{font-size:1.4rem}
.cavatar-xl{width:96px;height:96px;font-size:1.9rem}

/* ── Mini-Avatar vor verlinkten Namen ──
   Das kleinste Format des Avatars steht ueberall dort, wo ein
   Accountname zum Profil fuehrt: in Fliesstext, in Karten-Popups und
   in Fusszeilen. Es ist bewusst so klein, dass es die Zeilenhoehe
   nicht sprengt — der Kreis bleibt eine Marke neben dem Namen, kein
   Bildelement fuer sich. Die Initialen ruecken entsprechend mit
   herunter, damit zwei Buchstaben noch hineinpassen. */

.cavatar-xs{width:20px;height:20px;font-size:9px}

.cprofile-head{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.75rem 2rem;border-radius:12px;
  flex-wrap:wrap;
}
.cprofile-info{min-width:0;flex:1}
.cprofile-info h1{margin:0 0 .5rem}
.cprofile-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}

/* Knopfleiste im eigenen Profilkopf (25.08.2026) — bislang nur der
   Weg in die Einstellungen. Sie sitzt rechts aussen auf Hoehe von
   Avatar und Name; am Handy rutscht sie unter die Angaben und nimmt
   die volle Breite, damit sie dort nicht als Splitter am Rand klebt.
   Das Aussehen kommt aus wh-system.css (.sbtn/.sbtn-ghost). */
.cprofile-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:.5rem;flex:none}
@media (max-width:640px){
  .cprofile-actions{margin-left:0;width:100%}
  .cprofile-actions .sbtn{width:100%}
}

.cbadge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .8rem;border-radius:999px;
  border:1px solid rgba(201,168,76,.4);
  background:rgba(201,168,76,.08);
  color:var(--gold);font-size:.8rem;text-decoration:none;
}
a.cbadge:hover{border-color:var(--gold)}
.cbadge-plain{border-color:var(--bg-border);background:rgba(255,255,255,.03);color:var(--txt-m)}

.cteam-desc{margin:.9rem 0 0;color:var(--txt-m);line-height:1.6;max-width:70ch}
.cteam-edit{margin-top:1rem;font-size:.85rem}
.cteam-edit summary{cursor:pointer;color:var(--gold)}
.cteam-edit form{margin-top:.75rem}
.cteam-edit textarea{width:100%;resize:vertical}

.cphoto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:1rem;
}
.cphoto-card{
  margin:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--bg-border);
  background:rgba(255,255,255,.02);
  position:relative;
}
.cphoto-card img{width:100%;height:160px;object-fit:cover;display:block}
.cphoto-card figcaption{
  padding:.5rem .75rem;font-size:.8rem;color:var(--txt-m);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cphoto-vis{
  position:absolute;top:.5rem;right:.5rem;
  display:flex;gap:.35rem;
  background:rgba(16,16,20,.82);
  padding:.3rem .5rem;border-radius:6px;
  font-size:.85rem;
}
.cphoto-vis label{cursor:pointer;display:inline-flex;align-items:center;gap:.2rem}
.cphoto-vis input{accent-color:var(--gold)}

/* ── Foto-Lightbox: alles in den sichtbaren Bereich (ToDo #181,
   30.08.2026) ─────────────────────────────────────────────────────

   Bis hierher war die Ebene eine mittig gestellte Box: ein Bild von bis
   zu 78vh und darunter eine Bildunterschrift, die so hoch wurde, wie
   ihr Inhalt es verlangte. Beides zusammen ergab regelmäßig mehr als
   eine Bildschirmhöhe — und weil eine feste Ebene nicht scrollt,
   verschwanden Fotograf-Kopf oben und Beschreibung samt Zähler unten
   einfach hinter dem Rand. Genau das war die abgeschnittene Ansicht.

   Jetzt rechnet das Layout andersherum. Die Ebene ist exakt so hoch wie
   der SICHTBARE Bereich (dvh, damit die Adressleiste am Handy mitzählt,
   vh als Rückfall für ältere Browser), die Angaben darunter bekommen
   ihre natürliche Höhe, und das Bild nimmt sich per flex nur noch den
   REST. Eine feste Bildhöhe gibt es nicht mehr; sie war die Ursache. */
.clightbox{
  position:fixed;inset:0;z-index:2000;
  height:100vh;height:100dvh;
  box-sizing:border-box;overflow:hidden;
  background:rgba(10,10,14,.92);
  display:flex;align-items:center;justify-content:center;
  /* Oben Platz fürs Schließen-Kreuz, seitlich für die Blätterpfeile —
     so liegt kein Bedienelement auf dem Bild und keines am Rand fest. */
  padding:2.75rem 4.25rem 1.25rem;
}
.clightbox[hidden]{display:none}
.clightbox figure{
  margin:0;width:min(1100px,92vw);max-width:100%;
  max-height:100%;min-height:0;
  display:flex;flex-direction:column;text-align:center;
}
/* Das Bild ist das einzige Element, das nachgibt: Es darf schrumpfen,
   bis Fotograf-Kopf, Bild und Fußzeile zusammen in die Ebene passen.
   min-height:0 hebt die Mindestgröße auf, die ein Flex-Kind sonst
   behält — ohne sie wäre die alte Überlänge sofort zurück.

   Bewusst NICHT über eine Prozenthöhe an einem Rahmen: Die Höhe der
   Figur steht erst durch das Schrumpfen fest, eine Prozentangabe darin
   löst sich deshalb nicht auf und das Bild bliebe in voller Größe
   stehen. Das Schrumpfen macht hier also das Bild selbst.

   object-fit: scale-down hält das Foto dabei unverzerrt und vergrößert
   es nie über seine echte Auflösung hinaus; der leere Rand links und
   rechts eines Hochformats bleibt durchsichtig. */
.clightbox figure > img{
  flex:0 1 auto;min-height:0;
  width:100%;max-width:100%;
  object-fit:scale-down;object-position:center;
  border-radius:8px;
}
.clightbox figcaption{margin-top:.5rem;color:var(--txt-m);font-size:.9rem}
.clightbox figcaption strong{color:#fff}
/* Bildbeschreibung unter Titel und Metazeile (25.08.2026). Ohne Text
   setzt das JS hidden — dann bleibt kein leerer Block stehen. */
.clightbox figcaption #clbDesc{line-height:1.5;overflow-wrap:anywhere}
.clightbox figcaption #clbDesc[hidden]{display:none}
/* Solange die Lightbox offen ist, steht die Seite dahinter still —
   sonst scrollt ein Wisch am Handy die Liste unter dem Bild weg. */
body.clb-open{overflow:hidden}
.clightbox-close{
  position:absolute;top:1rem;right:1.25rem;z-index:3;
  background:none;border:none;color:#fff;
  font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Galerie-Pfeile (26.08.2026): liegen am Rand der Ebene, nicht auf dem
   Bild — so verdecken sie nichts. Bei nur einem Bild setzt das JS
   hidden, dann verschwinden sie samt Zähler. */
.clightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  background:rgba(10,10,14,.55);color:#fff;cursor:pointer;
}
.clightbox-nav:hover{background:rgba(10,10,14,.8)}
.clightbox-nav[hidden]{display:none}
.clightbox-prev{left:1rem}
.clightbox-next{right:1rem}

/* Zähler „n / m" dezent unter der Metazeile. */
.clightbox-count{display:block;margin-top:.2rem;opacity:.65;font-variant-numeric:tabular-nums}
.clightbox-count[hidden]{display:none}

.team-join-form{display:flex;flex-direction:column;gap:1rem}

/* Namenssuche im Einladeformular (25.08.2026): Die Vorschlagsliste
   liegt über der Karte, damit sie das Formular beim Aufklappen nicht
   auseinanderzieht. */
.cteam-invite-search{position:relative}
.cteam-suggest{
  position:absolute;top:100%;left:0;right:0;z-index:30;
  margin:.3rem 0 0;padding:0;list-style:none;
  max-height:240px;overflow-y:auto;
  border:1px solid var(--bg-border);border-radius:8px;
  background:rgba(22,23,28,.97);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.cteam-suggest[hidden]{display:none}
.cteam-suggest li{
  padding:.55rem .8rem;font-size:.88rem;color:var(--txt-m);
  cursor:pointer;border-bottom:1px solid var(--bg-border);
}
.cteam-suggest li:last-child{border-bottom:0}
.cteam-suggest li:hover{background:rgba(201,168,76,.12);color:var(--gold)}


/* ═══ Team-Quiz ═══ */

.quiz-form{display:flex;flex-direction:column;gap:1rem;max-width:760px}
.quiz-question{border:1px solid var(--bg-border);border-radius:10px;padding:1.25rem 1.5rem;margin:0}
.quiz-question legend{color:var(--gold);font-size:.8rem;padding:0 .5rem}
.quiz-question h3{margin:.25rem 0 .9rem;color:#fff;font-size:1rem;line-height:1.5}
.quiz-option{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.5rem .75rem;border-radius:6px;cursor:pointer;
  color:var(--txt-m);font-size:.9rem;line-height:1.5;
  transition:background var(--transition-base);
}
.quiz-option:hover{background:rgba(255,255,255,.04)}
.quiz-option input{accent-color:var(--gold);margin-top:.2rem}
.quiz-form .btn{align-self:flex-start}


/* ═══ Benachrichtigungen ═══ */

.avatar-btn{position:relative}
.notif-badge{
  position:absolute;top:-5px;right:-6px;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;
  background:#e5484d;color:#fff;
  font-size:.68rem;font-weight:700;line-height:18px;text-align:center;
  border:2px solid #101014;
  pointer-events:none;
}
.notif-pill{
  display:inline-block;margin-left:.4rem;
  min-width:18px;padding:0 6px;
  border-radius:999px;
  background:#e5484d;color:#fff;
  font-size:.7rem;font-weight:700;line-height:18px;text-align:center;
}
.notif-list{display:flex;flex-direction:column;gap:.75rem;max-width:760px}
.notif-item{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1rem 1.25rem;border-radius:10px;
}
.notif-item p{margin:0;color:var(--txt-m);line-height:1.6}
.notif-unread{border-color:rgba(229,72,77,.5)}
.notif-actions{display:flex;gap:.6rem;margin-top:.75rem;flex-wrap:wrap}
.notif-date{flex:0 0 auto;color:var(--txt-m);font-size:.75rem;white-space:nowrap}
.btn-muted{background:rgba(255,255,255,.08);color:var(--txt-m)}

/* ── Mobile-Feinschliff Navbar (≤480px): schmales Logo, kompakte
   Buttons — vorher lief die Leiste über und der Burger wurde
   rechts abgeschnitten ── */
@media (max-width: 480px) {
  .navbar-inner { padding: 0 10px; gap: .6rem; }
  .navbar-logo { height: 18px; }
  .navbar-user { gap: 6px; margin-left: auto; flex-shrink: 0; }
  .icon-btn, .avatar-btn { width: 36px; height: 36px; }
  .nav-burger { width: 40px; height: 40px; flex-shrink: 0; }
}

/* ── Fix Mobile-Drawer: backdrop-filter auf der Navbar machte sie
   zum Containing Block für das fixed positionierte #navLinks —
   der Drawer wurde auf Navbar-Höhe eingesperrt. Blur liegt jetzt
   auf einem Pseudo-Element (optisch identisch). ── */
.navbar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(26, 28, 30, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Footer: Impressum / Datenschutz ── */
.site-footer {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 1.2rem 20px calc(1.2rem + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--bg-border);
  color: var(--txt-m);
  font-size: .8rem;
}
.site-footer a { color: var(--txt-m); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer-links a + a { margin-left: 1.2rem; }

/* ── Amtliche DWD-Warnungen (Feed) ── */
.dwd-warn-feed { padding: 1.1rem 1.2rem; }
.dwd-warn-empty { color: var(--txt-m); font-size: .85rem; }
.dwd-state h3 {
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.1rem 0 .5rem;
}
.dwd-state:first-child h3 { margin-top: 0; }
.dwd-count {
  background: rgba(201, 168, 76, .15);
  color: var(--gold);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .7rem;
}
.dwd-warn {
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 4px solid #777;
  border-radius: 8px;
  margin-bottom: .45rem;
  background: rgba(0, 0, 0, .25);
}
.dwd-warn summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: .55rem .8rem;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
}
.dwd-warn summary::-webkit-details-marker { display: none; }
.dwd-badge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 4px;
  color: #101014;
  background: #999;
  flex-shrink: 0;
}
.dwd-warn.lvl-1 { border-left-color: #ffd400; }
.dwd-warn.lvl-1 .dwd-badge { background: #ffd400; }
.dwd-warn.lvl-2 { border-left-color: #ff8c00; }
.dwd-warn.lvl-2 .dwd-badge { background: #ff8c00; }
.dwd-warn.lvl-3 { border-left-color: #ff1f1f; }
.dwd-warn.lvl-3 .dwd-badge { background: #ff1f1f; color: #fff; }
.dwd-warn.lvl-4 { border-left-color: #c724ff; }
.dwd-warn.lvl-4 .dwd-badge { background: #c724ff; color: #fff; }
.dwd-warn.vorab { border-left-color: #59b4ff; border-left-style: dashed; }
.dwd-warn.vorab .dwd-badge { background: #59b4ff; }
.dwd-event { font-weight: 600; color: #fff; flex: 1; min-width: 140px; }
.dwd-time { color: var(--txt-m); font-size: .72rem; white-space: nowrap; }
.dwd-body { padding: 0 .9rem .7rem; font-size: .8rem; color: rgba(255, 255, 255, .78); line-height: 1.6; }
.dwd-regions { color: var(--gold-l, #E8C96B); font-size: .74rem; margin-bottom: .4rem; }
.dwd-instr { margin-top: .4rem; color: var(--txt-m); font-size: .74rem; }
.dwd-range { margin-top: .4rem; color: var(--txt-m); font-size: .72rem; }
.dwd-source { margin-top: 1rem; color: var(--txt-m); font-size: .7rem; }


/* ═══════════════ Konto & Verkauf (Bildagentur) ═══════════════ */

.acc-type-line { margin: 0 0 .6rem; }

.acc-badge {
    display: inline-block;
    padding: .28rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
}
.acc-badge-photographer { border-color: rgba(232,201,107,.55); color: #E8C96B; }
.acc-badge-media        { border-color: rgba(90,150,255,.55);  color: #8fb6ff; }

.acc-ok       { color: #7fd18d; font-weight: 500; }
.acc-pending  { color: #E8C96B; font-weight: 500; }
.acc-rejected { color: #e88c8c; font-weight: 500; }

.acc-data {
    display: grid;
    grid-template-columns: minmax(9rem, auto) 1fr;
    gap: .35rem 1.2rem;
    margin: .9rem 0 0;
    font-size: .93rem;
}
.acc-data dt { color: rgba(255,255,255,.55); }
.acc-data dd { margin: 0; }

.acc-flag {
    display: inline-block;
    margin-left: .45rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    vertical-align: middle;
}
.acc-flag-ok   { background: rgba(127,209,141,.14); color: #7fd18d; }
.acc-flag-bad  { background: rgba(232,140,140,.14); color: #e88c8c; }
.acc-flag-open { background: rgba(232,201,107,.14); color: #E8C96B; }

.acc-details { margin-top: 1rem; }
.acc-summary { display: inline-block; cursor: pointer; list-style: none; }
.acc-summary::-webkit-details-marker { display: none; }

.acc-form { margin-top: 1.2rem; display: grid; gap: .9rem; }
.acc-form label { display: block; font-size: .9rem; }
.acc-form input,
.acc-form select,
.acc-form textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .75rem;
    font-size: 16px;                 /* verhindert das Zoomen auf iOS */
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
}
.acc-form input:focus,
.acc-form select:focus,
.acc-form textarea:focus {
    outline: none;
    border-color: rgba(232,201,107,.6);
}
.acc-form textarea { resize: vertical; }

.acc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.acc-row label:only-child { grid-column: 1 / -1; }

.acc-check { display: flex; align-items: flex-start; gap: .6rem; }
.acc-check input { width: auto; margin-top: .15rem; }
.acc-check span { font-size: .88rem; line-height: 1.45; }

@media (max-width: 640px) {
    .acc-row { grid-template-columns: 1fr; }
    .acc-data { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .acc-data dt { margin-top: .5rem; }
}

/* ═══════════════ Verkaufsarchiv ═══════════════ */

.acc-coords { display:flex; gap:.5rem; }
.acc-coords input { width:100%; }

.as-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; margin-top:1rem; }
.as-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:12px; overflow:hidden; }
.as-item img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.as-body { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.25rem; }
.as-body strong { font-size:.92rem; line-height:1.3; }
.as-meta { font-size:.78rem; color:rgba(255,255,255,.5); }
.as-note { font-size:.78rem; color:#e88c8c; }
.as-status { align-self:flex-start; font-size:.74rem; padding:.1rem .55rem; border-radius:999px; background:rgba(255,255,255,.08); }
.as-review   { background:rgba(232,201,107,.16); color:#E8C96B; }
.as-active   { background:rgba(127,209,141,.16); color:#7fd18d; }
.as-rejected { background:rgba(232,140,140,.16); color:#e88c8c; }
.as-blocked  { background:rgba(232,140,140,.16); color:#e88c8c; }

/* ═══════════════ Bildarchiv (Suche und Karte) ═══════════════ */

.arch-filters .arch-row { display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-end; }
.arch-filters .arch-row-2 { margin-top:.9rem; align-items:center; }
.arch-filters label { display:block; font-size:.85rem; }
.arch-filters label > span { display:block; margin-bottom:.25rem; color:rgba(255,255,255,.6); }
.arch-filters input, .arch-filters select {
    padding:.55rem .7rem; font-size:16px; color:#fff;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:10px;
}
.arch-filters input:focus, .arch-filters select:focus { outline:none; border-color:rgba(232,201,107,.6); }
.arch-grow { flex:1 1 16rem; }
.arch-grow input { width:100%; }
.arch-check { display:flex; align-items:center; gap:.5rem; font-size:.9rem; }
.arch-check input { width:auto; }
.arch-count { margin-left:auto; color:rgba(255,255,255,.6); font-size:.9rem; }

.arch-map-wrap { margin-top:.8rem; border-radius:12px; overflow:hidden; }
#archMap { height:min(60vh, 520px); background:#0e1013; }

.arch-cluster {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; border-radius:50%;
    font-weight:600; font-size:.85rem; color:#14161a;
    background:rgba(232,201,107,.92); border:2px solid rgba(255,255,255,.55);
    box-shadow:0 2px 10px rgba(0,0,0,.45);
}
.arch-cluster.c-m  { background:rgba(232,170,80,.94); }
.arch-cluster.c-l  { background:rgba(230,130,70,.94); color:#fff; }
.arch-cluster.c-xl { background:rgba(214,86,72,.95); color:#fff; }

.arch-spot {
    position: relative;
    width: 52px; height: 39px;
    box-sizing: border-box;
    border-radius: 6px;
    border: none;
    /* Der Goldring ist bewusst KEIN border, sondern ein Schatten-Ring:
       er folgt der Rundung exakt und bleibt auch bei krummen
       Rendergroessen (Vorfahren-Transforms) an jeder Kante gleich dick. */
    box-shadow: 0 0 0 2px rgba(232, 201, 107, .95), 0 3px 14px rgba(0, 0, 0, .55);
    background: #1a1c1e;
    overflow: visible;
    transition: transform .15s;
}
.arch-spot:hover { transform: scale(1.1); }
.arch-spot img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 6px;   /* identisch zur Kachel - keine aufblitzenden Ecken */
    display: block;
}

.arch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; margin-top:.4rem; }
.arch-card { display:block; text-decoration:none; color:inherit;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
    border-radius:12px; overflow:hidden; transition:border-color .15s, transform .15s; }
.arch-card:hover { border-color:rgba(232,201,107,.5); transform:translateY(-2px); }
.arch-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#15171a; }
.arch-card-body { padding:.6rem .7rem; display:flex; flex-direction:column; gap:.22rem; }
.arch-card-body strong { font-size:.93rem; line-height:1.3; }
.arch-card-meta { font-size:.78rem; color:rgba(255,255,255,.5); }
.arch-badge { align-self:flex-start; font-size:.72rem; padding:.08rem .5rem; border-radius:999px;
    background:rgba(232,201,107,.16); color:#E8C96B; }
.arch-empty { color:rgba(255,255,255,.5); }
.arch-pager { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.2rem; }
.arch-note { font-size:.8rem; color:rgba(255,255,255,.5); }
.arch-keywords { font-size:.8rem; color:rgba(255,255,255,.42); margin-top:.8rem; }

.bild-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:1.2rem; align-items:start; }
.bild-image img { width:100%; height:auto; border-radius:10px; display:block; }
.bild-side { display:flex; flex-direction:column; gap:1.2rem; }
.bild-back { margin:1.2rem 0 2rem; }

@media (max-width:900px) {
    .bild-layout { grid-template-columns:1fr; }
    .arch-count { margin-left:0; width:100%; }
}

/* Checkbox-Beschriftung steht neben dem Haekchen, nicht darunter —
   die allgemeine Filter-Regel macht span sonst zum Block. */
.arch-filters .arch-check > span { display:inline; margin:0; color:inherit; }
.arch-filters .arch-check { display:inline-flex; align-items:center; gap:.5rem; align-self:center; }

/* ═══════════════ Warenkorb, Lizenz, Bestellungen ═══════════════ */

.lic-price { display:flex; align-items:baseline; gap:.6rem; margin:.4rem 0 0; }
#licPrice { font-size:1.5rem; font-weight:600; color:#E8C96B; }
.lic-net { font-size:.8rem; color:rgba(255,255,255,.5); }

.cart-item { display:grid; grid-template-columns:110px 1fr auto; gap:1rem; padding:1rem 0;
             border-bottom:1px solid rgba(255,255,255,.08); align-items:start; }
.cart-item:last-of-type { border-bottom:0; }
.cart-item img { width:110px; height:80px; object-fit:cover; border-radius:8px; display:block; }
.cart-body { display:flex; flex-direction:column; gap:.3rem; }
.cart-body a { color:inherit; text-decoration:none; }
.cart-body a:hover { color:#E8C96B; }
.cart-meta { font-size:.8rem; color:rgba(255,255,255,.5); }
.cart-warn { font-size:.82rem; color:#E8C96B; }
.cart-license { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.cart-license select { padding:.35rem .5rem; font-size:.85rem; color:#fff;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:8px; }
.cart-price { text-align:right; display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.cart-remove { background:none; border:0; color:rgba(255,255,255,.45); font:inherit; font-size:.8rem; cursor:pointer; padding:0; }
.cart-remove:hover { color:#e88c8c; }
.btn-small { padding:.35rem .7rem; font-size:.82rem; }

.cart-totals { display:grid; grid-template-columns:1fr auto; gap:.3rem 1.5rem; margin:1.2rem 0 0;
               padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); }
.cart-totals dt { color:rgba(255,255,255,.6); }
.cart-totals dd { margin:0; text-align:right; }
.cart-totals .cart-sum { font-size:1.15rem; font-weight:600; color:#fff; padding-top:.4rem; }

.cart-methods { border:0; padding:0; margin:0 0 .6rem; }
.cart-methods legend { padding:0; margin-bottom:.5rem; color:rgba(255,255,255,.6); font-size:.85rem; }
.cart-methods .acc-check { margin-bottom:.5rem; }
.cart-testmode { font-size:.82rem; color:#E8C96B; }

.ord-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.ord-head h2 { margin:0 0 .2rem; }
.ord-right { text-align:right; display:flex; flex-direction:column; gap:.3rem; align-items:flex-end; }
.ord-item { display:grid; grid-template-columns:90px 1fr auto; gap:.9rem; padding:.8rem 0;
            border-top:1px solid rgba(255,255,255,.07); align-items:center; }
.ord-item img { width:90px; height:65px; object-fit:cover; border-radius:8px; display:block; }
.ord-item-body { display:flex; flex-direction:column; gap:.2rem; }
.ord-item-right { display:flex; flex-direction:column; gap:.4rem; align-items:flex-end; }
.ord-invoice { margin:.9rem 0 0; font-size:.88rem; color:rgba(255,255,255,.6); }

@media (max-width:700px) {
    .cart-item, .ord-item { grid-template-columns:70px 1fr; }
    .cart-price, .ord-item-right { grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
    .cart-item img, .ord-item img { width:70px; height:52px; }
}

/* Löschknopf an den eigenen Fotos */
.cphoto-del {
    margin-left: auto;
    background: none;
    border: 0;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 3px;
}
.cphoto-del:hover { color: #e88c8c; background: rgba(232,140,140,.12); }
.cphoto-del:disabled { opacity: .4; cursor: default; }

/* Bearbeiten-Stift an den eigenen Fotos (26.08.2026). Teilt sich die
   Optik mit dem Loeschknopf und schiebt das Paar an den rechten Rand
   der Leiste; steht kein Stift da (nie der Fall) oder kein Loeschknopf
   (gesperrtes Bild), uebernimmt der jeweils andere das Schieben. */
.cphoto-edit {
    margin-left: auto;
    background: none;
    border: 0;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 3px;
}
.cphoto-edit:hover { color: var(--gold); background: rgba(201,168,76,.12); }
.cphoto-edit:disabled { opacity: .4; cursor: default; }

/* Stehen beide nebeneinander, darf nur der erste den Abstand
   aufspannen — sonst risse ein zweites auto-Randmass sie auseinander. */
.cphoto-edit + .cphoto-del { margin-left: 0; }


/* Foto-Lightbox als Feed-Beitrag (ToDo #106, 28.08.2026).
   Die Vorschaukacheln tragen KEIN Herz mehr — geliked wird erst in der
   Groß-Ansicht. Das Herz selbst erbt die Feed-Optik aus shop.css
   (.feed-like / .feed-likedby), hier steht nur, was diese Lightbox
   zusaetzlich braucht: der Fotograf-Kopf, die linksbuendige Fußzeile
   und das Liker-Fenster ueber der Lightbox. */

.clb-author {
    display: flex;
    align-items: center;
    /* Seit ToDo #181 mittig über dem Bild statt am linken Rand einer
       1100er-Box: Bei einem Hochformat stand der Name sonst weit
       neben dem Foto in der Leere. */
    justify-content: center;
    gap: .5rem;
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0 auto .4rem;
    text-decoration: none;
    color: #fff;
}
.clb-author[hidden] { display: none; }
.clb-author .cavatar { width: 30px; height: 30px; font-size: .75rem; flex: 0 0 auto; }
.clb-author-name { font-weight: 600; font-size: .95rem; }
.clb-author:hover .clb-author-name,
.clb-author:focus-visible .clb-author-name {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Fußzeile: die Angaben stehen seit ToDo #181 NEBENEINANDER unter dem
   Bild statt untereinander — Herz, Titel, Ort/Datum, die Gefaellt-Zeile
   und der Zaehler fließen in eine Reihe und brechen erst um, wenn der
   Platz wirklich nicht reicht. Die frueher gestapelte Fassung war gut
   hundert Pixel hoch, und genau die fehlten unten am Bildschirm.

   Die Reihenfolge macht order: im HTML steht das Herz zuerst (es kommt
   aus dem Feed-Bauteil), gelesen wird aber Herz → Titel → Ort/Datum
   → Gefaellt → Zaehler. */
.clb-foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .1rem .7rem;
    max-width: min(1000px, 100%);
    margin: .5rem auto 0;
    text-align: left;
}
.clb-actions {
    order: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.clb-foot strong { order: 2; color: #fff; margin: 0; }
.clb-foot #clbMeta { order: 3; }
.clb-foot #clbLikedBy {
    order: 4;
    /* .feed-likedby kommt aus dem Feed und ist dort eine eigene Zeile
       (width:100%, linksbuendig). In der Reihe unter dem Bild waere das
       ein Zeilenumbruch mitten in den Angaben — hier zaehlt sie als
       ganz normales Glied der Reihe. */
    width: auto;
    max-width: 100%;
    margin: 0;
    text-align: center;
}
.clb-foot .clightbox-count { order: 5; margin: 0; }
/* Nur der Beschreibungstext darf im Notfall in sich scrollen — Bild,
   Kreuz und Pfeile bleiben immer stehen. Ohne lange Beschreibung wird
   die Grenze nie erreicht, dann steht der Text einfach da. */
.clightbox .clb-foot #clbDesc {
    order: 6;
    flex: 0 0 100%;
    /* Volle Breite erzwingt die eigene Zeile. Eine max-width duerfte
       hier NICHT stehen — sie macht das Element wieder schmal genug,
       um neben den Angaben Platz zu finden, und dann steht die
       Beschreibung mitten in der Zeile statt darunter. Lesbar schmal
       bleibt der Text trotzdem: ueber einen Innenabstand, der die
       Zeile auf rund 70 Zeichen einschnuert und mittig haelt. */
    padding-inline: max(0px, calc((100% - 70ch) / 2));
    margin: .1rem 0 0;
    max-height: min(4.6em, 20vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    text-align: center;
}

/* Wer-hat-geliked-Fenster ueber der Lightbox (.clightbox = z 2000).
   Die Karte darin erbt .feed-likers-box aus shop.css. */
.clb-likers {
    position: fixed;
    inset: 0;
    z-index: 2200;
    background: rgba(8, 9, 12, .82);
    display: grid;
    place-items: center;
    padding: 24px;
}
.clb-likers[hidden] { display: none; }


/* Kleiner Dialog zum Aendern von Titel und Beschreibung. Liegt wie die
   Lightbox ueber der Seite, ist aber ein Kasten in der Mitte statt
   einer Vollbildebene. */
.cpedit {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(10,10,14,.82);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.cpedit[hidden] { display: none; }
.cpedit-box {
    width: min(460px, 100%);
    max-height: 90vh; overflow-y: auto;
    background: var(--bg-card, #16171a);
    border: 1px solid var(--bg-border);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.cpedit-box h3 { margin: 0 0 .5rem; }
.cpedit-box label { font-size: .8rem; color: var(--txt-m); }
.cpedit-box .input { width: 100%; }
.cpedit-box textarea.input { resize: vertical; min-height: 5.5rem; }
.cpedit-msg { margin: .4rem 0 0; font-size: .85rem; color: var(--gold); }
.cpedit-msg.is-bad { color: #e88c8c; }
.cpedit-msg[hidden] { display: none; }
.cpedit-actions {
    display: flex; justify-content: flex-end; gap: .5rem;
    margin-top: .9rem;
}

/* Löschknopf am eigenen Foto im Dashboard-Raster */
.photo-grid-item { position: relative; }
.dash-photo-del {
    position: absolute; top: 8px; right: 8px;
    background: rgba(10,10,14,.72);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.75);
    width: 30px; height: 30px;
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.photo-grid-item:hover .dash-photo-del,
.dash-photo-del:focus-visible { opacity: 1; }
.dash-photo-del:hover { color: #e88c8c; border-color: rgba(232,140,140,.5); }
.dash-photo-del:disabled { opacity: .4; cursor: default; }

/* Am Touchgerät gibt es kein Hover — dort steht der Knopf dauerhaft da */
@media (hover: none) {
    .dash-photo-del { opacity: 1; }
}

/* ─── Eigene Fotospots auf dem Profil ─── */

.cprofile-spots { display: grid; gap: .6rem; margin-top: .9rem; }

.cspot {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: .9rem;
    align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    padding: .7rem .9rem;
}

.cspot img { width: 84px; height: 62px; object-fit: cover; border-radius: 6px; display: block; }

/* Ohne das quetscht ein langer Ortsname die Knopfspalte weg */
.cspot-text { min-width: 0; }
.cspot-text strong { display: block; font-size: .95rem; }
.cspot-meta { display: block; font-size: .82rem; color: rgba(255,255,255,.5); margin-top: .15rem; }
.cspot-warn { color: #E8C96B; }

.cspot-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }

.cspot-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #e9e9ec;
    border-radius: 3px;
    padding: .35rem .7rem;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.cspot-btn:hover { background: rgba(255,255,255,.14); }
.cspot-del:hover { color: #e88c8c; border-color: rgba(232,140,140,.5); }
.cspot-btn:disabled { opacity: .4; cursor: default; }

@media (max-width: 640px) {
    .cspot { grid-template-columns: 64px 1fr; row-gap: .55rem; }
    .cspot img { width: 64px; height: 48px; }
    .cspot-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Zitat der Antwort in den Benachrichtigungen */
.notif-quote {
    margin: .5rem 0;
    padding: .55rem .8rem;
    border-left: 2px solid #E8C96B;
    background: rgba(232,201,107,.07);
    border-radius: 0 4px 4px 0;
    font-size: .92rem;
    line-height: 1.6;
}
.notif-sub { margin: .35rem 0 0; font-size: .82rem; color: rgba(255,255,255,.45); }

/* Meldungen, die irgendwohin fuehren (seit 25.08.2026 das Like am
   eigenen Foto). Der ganze Satz IST der Weg — kein zusaetzlicher
   Knopf daneben, der noch einmal dasselbe anbietet. Er sieht deshalb
   aus wie der Text ringsum und gibt sich erst beim Ueberfahren als
   Link zu erkennen. */
.notif-open { color: inherit; text-decoration: none; }
.notif-open:hover,
.notif-open:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(232,201,107,.6);
}

/* ─── Avatar hochladen ─── */

/* Teamseite: dort bleibt das Formular, weil man die Teamseite nicht
   zwangsläufig als Gründer aufruft. */
.wh-avatar-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.wh-avatar-form input[type=file] { font-size: 15px; max-width: 100%; }

/* ─── Avatar anklicken statt Formular ───
   Das Bild ist der Knopf. Der Kamerapunkt sitzt aussen am Kreis, damit
   er das Gesicht nicht verdeckt. */

.wh-avatar-pick { position: relative; display: inline-block; cursor: pointer; line-height: 0; }
.wh-avatar-pick.is-locked { cursor: default; }

.wh-avatar-badge {
    position: absolute; right: -2px; bottom: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #E8C96B;
    color: #101014;
    border: 2px solid #16171c;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s ease;
}
.wh-avatar-badge svg { width: 15px; height: 15px; }

.wh-avatar-pick.is-locked .wh-avatar-badge { background: #3a3d45; color: rgba(255,255,255,.6); }

.wh-avatar-pick:not(.is-locked):hover .wh-avatar-badge { transform: scale(1.1); }

/* Während des Hochladens: Bild gedimmt, damit man sieht, dass etwas passiert */
.wh-avatar-pick.is-busy .cavatar { opacity: .45; }
.wh-avatar-pick.is-busy { cursor: progress; }

@media (max-width: 640px) {
    .wh-avatar-badge { width: 26px; height: 26px; }
    .wh-avatar-badge svg { width: 13px; height: 13px; }
}

/* ─── Mitgliederliste in Gruppen ─── */

.community-head-sub { margin-top: 2rem; }
.community-head-sub h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .2rem; }

.ccount {
    font-family: 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
}

/* Das Team hebt sich durch die Kante ab, nicht durch eine andere
   Kachelform — sonst zerfällt die Liste in zwei Gestaltungen. */
.ccard-staff { border-color: rgba(232,201,107,.45); }

.ccard-role {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #E8C96B;
}

/* Die Forecast-Redaktion (25.08.2026)
   Zweite hervorgehobene Gruppe auf /members/ — dieselbe Kachel, nur
   eine andere Kantenfarbe. Gold bleibt dem Seiten-Team vorbehalten,
   damit die beiden Sektionen im Vorbeiscrollen nicht ineinander
   laufen; --wh-info ist die bereits vorhandene Systemfarbe und
   traegt keinen neuen Ton in die Seite. */
.ccard-forecaster { border-color: rgba(143, 182, 255, .45); }
.ccard-forecaster .ccard-role { color: var(--wh-info); }

/* ─── Teamzugehörigkeit und Social Media auf dem Profil ─── */

/* Umbruch im Team-Abzeichen (24.08.2026)
   Das Abzeichen ist ein Chip aus Symbol + „WEATHERHUNTERS Team“ +
   dem Unterchip „Administration“. Ohne Umbrucherlaubnis blieb er in
   einer Zeile und damit rund 255–290 px breit; am Handy stehen in
   der Kopfkarte neben dem Avatar aber nur etwa 250 px zur Verfuegung.
   Der Chip ragte deshalb ueber den Kartenrand hinaus und zog die
   ganze Seite breiter als den Bildschirm (waagerechtes Scrollen).
   Jetzt darf er umbrechen: Symbol und Teamname bleiben in Zeile eins,
   „Administration“ rutscht bei Bedarf darunter. row-gap haelt die
   beiden Zeilen enger zusammen als der Abstand der Teile nebeneinander,
   min-width:0 erlaubt dem Chip, schmaler zu werden als sein Inhalt. */
.cbadge-staff {
    display: inline-flex; align-items: center; gap: .4rem;
    flex-wrap: wrap; row-gap: .2rem;
    max-width: 100%; min-width: 0;
    background: rgba(232,201,107,.14);
    border: 1px solid rgba(232,201,107,.45);
    color: #E8C96B;
}
.cbadge-staff svg { width: 14px; height: 14px; flex: none; }
.cbadge-sub { opacity: .7; font-weight: 400; }

/* Dieselbe Absicherung fuer die ganze Abzeichen-Zeile: kein Abzeichen
   darf breiter werden als die Kopfkarte, und ein sehr langer Team-
   oder Rollenname bricht innerhalb des Chips um, statt die Seite zu
   sprengen. Ohne overflow-wrap waere die Mindestbreite eines Chips
   das laengste Wort darin — genau der Hebel, ueber den die Seite
   vorher breiter wurde als der Bildschirm. */
.cprofile-meta > * { max-width: 100%; min-width: 0; }
.cbadge, .cbadge-sub { overflow-wrap: anywhere; }


/* ---------------------------------------------------------------
   Aktivitaet: Abzeichen-Chip und Aufschluesselung (25.08.2026)

   Bewusst OHNE Rangliste gebaut — es gibt hier nichts zu sortieren
   und nichts zu vergleichen, nur den eigenen Stand. Entsprechend
   ruhig ist die Optik: ein Chip in der Abzeichen-Zeile, darunter
   eine Karte, die aussieht wie die uebrigen.
   --------------------------------------------------------------- */

/* Der Chip. Er erbt Form und Groesse von .cbadge und setzt sich nur
   farblich ab: etwas waermer und etwas kraeftiger umrandet als die
   grauen Angaben daneben, aber blasser als das Team-Abzeichen, das
   in derselben Zeile stehen kann. Ein Farbverlauf je Stufe waere
   Effekthascherei — EIN Stil fuer alle sechs.
   flex-wrap/max-width sind das Muster vom 25.08.: Symbol und Name
   bleiben zusammen, die Punktzahl rutscht am Handy darunter. */
.cbadge-rank {
    display: inline-flex; align-items: center; gap: .4rem;
    flex-wrap: wrap; row-gap: .2rem;
    max-width: 100%; min-width: 0;
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.5);
    color: var(--gold-light);
}
.cbadge-rank svg { width: 14px; height: 14px; flex: none; }

/* Die Aufschluesselungskarte. Nur auf dem eigenen Profil im Markup,
   deshalb braucht die CSS keine Fallunterscheidung. */
.wh-act {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    max-width: 100%;
}
.wh-act-title {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .9rem;
    font-size: 1.05rem;
    color: var(--gold);
}
.wh-act-title svg { width: 18px; height: 18px; flex: none; }

/* Drei Spalten: Bezeichnung, Rechnung, Punkte. Die Bezeichnung
   nimmt den Rest, die beiden Zahlenspalten bleiben schmal und
   rechtsbuendig, damit die Punkte untereinander stehen.
   min-width:0 an der ersten Spalte ist noetig, damit ein langer
   Name umbricht statt die Zeile aufzublasen. */
.wh-act-list { list-style: none; margin: 0; padding: 0; }
.wh-act-row {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--bg-border);
    font-size: .9rem;
}
.wh-act-row:last-child { border-bottom: 0; }
.wh-act-what { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--txt); }
.wh-act-calc { flex: none; color: var(--txt-d); font-size: .8rem; white-space: nowrap; }
.wh-act-pts  { flex: none; color: var(--gold); font-variant-numeric: tabular-nums;
               white-space: nowrap; min-width: 4.5rem; text-align: right; }

/* Die Summenzeile steht ab, ohne laut zu werden. */
.wh-act-sum {
    margin-top: .3rem;
    border-top: 1px solid var(--bg-border);
    border-bottom: 0;
    font-weight: 600;
}
.wh-act-sum .wh-act-pts { color: var(--gold-light); }

/* Stand und Weg. Am Handy untereinander statt nebeneinander. */
.wh-act-level {
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    margin-top: 1.1rem;
}
.wh-act-next { color: var(--txt-m); font-size: .85rem; overflow-wrap: anywhere; }

/* Der Fortschrittsbalken: schmal, Spur dunkel, Fuellung Gold. Er
   zeigt den Weg innerhalb der laufenden Stufe (siehe activity.php),
   nicht den Weg von null. */
.wh-act-bar {
    margin-top: .6rem;
    height: 6px;
    width: 100%; max-width: 100%;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--bg-border);
    overflow: hidden;
}
.wh-act-bar > span {
    display: block; height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
}

.wh-act-hint { margin-top: .7rem; }

/* Die Stufenuebersicht auf /aktivitaet/ (25.08.2026).

   Sie benutzt dieselben Zeilen wie die Aufschluesselung daruber:
   Bezeichnung links, Punktschwelle rechts. Neu ist allein die
   Hervorhebung der erreichten Stufe — heller und halbfett, ohne ein
   zusaetzliches Wort daneben. Ein "aktuell" waere eine Beschriftung
   fuer etwas, das man ohnehin sieht. */
.wh-act-lvl-now .wh-act-what { color: var(--gold-light); font-weight: 600; }
.wh-act-lvl-now .wh-act-pts  { color: var(--gold-light); }

@media (max-width: 640px) {
    .wh-act { padding: 1rem; }
    /* Die Rechnung ("2 x 20") ist am Handy die entbehrlichste
       Spalte — Bezeichnung und Punktzahl reichen dort. */
    .wh-act-calc { display: none; }
}

.wh-socials { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

.wh-social {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.75);
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.wh-social svg { width: 18px; height: 18px; }

/* Die Hausfarben nur beim Überfahren — dauerhaft bunt würde die
   Profilkarte auseinanderreissen. */
.wh-social:hover { background: rgba(255,255,255,.12); color: #fff; }
.wh-social-instagram:hover { color: #e1306c; border-color: rgba(225,48,108,.6); }
.wh-social-youtube:hover   { color: #ff4b3a; border-color: rgba(255,75,58,.6); }
.wh-social-twitch:hover    { color: #a970ff; border-color: rgba(169,112,255,.6); }
.wh-social-facebook:hover  { color: #4c8bf5; border-color: rgba(76,139,245,.6); }
.wh-social-tiktok:hover    { color: #25f4ee; border-color: rgba(37,244,238,.6); }

/* Formular in den Einstellungen */
.wh-social-form { display: grid; gap: .6rem; }
.wh-social-field { display: grid; grid-template-columns: 24px 6.5rem 1fr; align-items: center; gap: .6rem; }
.wh-social-ico { color: rgba(255,255,255,.5); line-height: 0; }
.wh-social-ico svg { width: 18px; height: 18px; }
.wh-social-label { font-size: .9rem; color: rgba(255,255,255,.7); }
.wh-social-form .input { width: 100%; }
.wh-social-form .btn { justify-self: start; margin-top: .3rem; }

@media (max-width: 560px) {
    .wh-social-field { grid-template-columns: 24px 1fr; }
    .wh-social-label { display: none; }
}

/* ─── Freundschaft auf dem Profil ───
   Kompakte Knöpfe statt der grossen Formular-Schaltfläche: Sie stehen
   in einer Kopfzeile neben Abzeichen, nicht am Ende eines Formulars. */

.friend-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.friend-actions form { margin: 0; }

.cfriend-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem;
    border-radius: 3px;
    border: 1px solid transparent;
    font: inherit;
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.cfriend-btn svg { width: 16px; height: 16px; flex: none; }

.cfriend-primary { background: #E8C96B; color: #101014; }
.cfriend-primary:hover { background: #f0d783; }

.cfriend-quiet {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.75);
}
.cfriend-quiet:hover { background: rgba(255,255,255,.13); color: #fff; }

/* Abzeichen mit Symbol — dieselbe Höhe wie die Knöpfe daneben */
.cbadge-friend { display: inline-flex; align-items: center; gap: .35rem; }
.cbadge-friend svg { width: 14px; height: 14px; }

@media (max-width: 480px) {
    /* Am Handy die volle Breite teilen statt umbrechen */
    .friend-actions form { flex: 1 1 8rem; }
    .cfriend-btn { width: 100%; justify-content: center; }
}

/* ─── Freundesliste und offene Anfragen auf dem Profil ───

   Die Liste ist eine Reihe umbrechender Marken, kein Raster: Namen
   sind unterschiedlich lang, ein Raster liesse hinter dem kuerzesten
   die halbe Spalte leer. flex-wrap bricht am Telefon von selbst um.

   Die Marke ist derselbe whNameLinkHtml-Verweis wie ueberall sonst,
   nur in eine Pille gesetzt. Er ist im System bewusst inline (siehe
   wh-system.css) — hier braucht er inline-flex, damit Avatar und
   Name in der Pille auf einer Mittellinie sitzen; die
   vertical-align-Aufhaengung des Kreises wird dabei hinfaellig und
   ausdruecklich zurueckgesetzt. */

.friend-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }

a.wh-namelink-avatar.friend-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .25rem .7rem .25rem .28rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    transition: background .12s ease, border-color .12s ease;
}

a.wh-namelink-avatar.friend-chip > .cavatar-xs { vertical-align: 0; }

a.wh-namelink-avatar.friend-chip > .wh-namelink-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
}

a.wh-namelink-avatar.friend-chip:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
}

/* Offene Anfragen: eine Zeile je Anfrage, Name links, die beiden
   Knoepfe rechts — dieselben .cfriend-btn wie im Profilkopf. */

.friend-reqs { display: grid; gap: .5rem; margin-top: .2rem; }

.friend-req {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .8rem;
    border-radius: 4px;
}

.friend-req-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.friend-req-actions form { margin: 0; }

@media (max-width: 480px) {
    /* Unter dem Namen statt daneben — nebeneinander bliebe fuer
       "Freundschaft" und "Ablehnen" kein Platz. Die volle Breite
       der Knoepfe regelt schon die .cfriend-btn-Regel darueber. */
    .friend-req-actions { width: 100%; }
    .friend-req-actions form { flex: 1 1 8rem; }
}


/* ═══ Heimatzone ═══
   Der Kartenausschnitt sitzt mitten im Formular und soll dort nicht
   dominieren: hoch genug, dass ein 5-km-Kreis hineinpasst, nicht
   hoeher. */
.tracking-home{margin:1.25rem 0;padding-top:1.25rem;border-top:1px solid var(--bg-border)}
.tracking-home h3{margin:0 0 .35rem;font-size:.95rem;color:var(--txt)}
.tracking-home .map-search{margin:.75rem 0 .6rem;min-width:0}
.home-map{
  height:260px;
  border-radius:4px;
  border:1px solid var(--bg-border);
  overflow:hidden;
  background:#12141a;
}
.home-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.home-actions .btn{flex:1;min-width:150px;padding:.55rem .9rem;font-size:.82rem}

/* Entfernen ist die seltenere Handlung — sie soll nicht so laut rufen
   wie das Setzen. */
.home-actions #homeClear{background:rgba(255,255,255,.08);color:var(--txt-m)}
.home-actions #homeClear:hover{background:rgba(255,255,255,.14);color:var(--gold)}

/* Der Punkt markiert einen Bereich, keinen Fundort — deshalb ein Haus
   und kein Nadelkopf. */
.hz-pin{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:#12141a;border:2px solid var(--gold);color:var(--gold);
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.hz-pin svg{width:14px;height:14px}

.home-active{
  margin:.6rem 0 0;padding:.6rem .8rem;
  border-left:2px solid var(--gold);
  background:rgba(201,168,76,.1);
  border-radius:4px;
  font-size:.82rem;color:var(--gold);
}

@media (max-width:600px){
  .home-map{height:220px}
  .home-actions .btn{min-width:0}
}


.tracking-secret-btns {
    display: inline-flex;
    gap: 6px;
    margin-left: 6px;
    vertical-align: middle;
}


/* Live-Status des eigenen Trackers (Tracking-Einstellungen).

   Gleiche Form wie .home-active — es ist dieselbe Sorte Auskunft,
   nur dass sie immer dasteht. Die Farbe traegt die Aussage: Gold
   heisst "die Heimatzone greift gerade", Gruen "es laeuft und ist
   sichtbar", Rot "vom Geraet kam noch nie etwas". */
.track-status{
  margin:.75rem 0 0;padding:.6rem .8rem;
  border-left:2px solid var(--bg-border);
  background:rgba(255,255,255,.04);
  border-radius:4px;
  font-size:.82rem;line-height:1.45;
  color:var(--txt-m);
}

.track-status-live{
  border-left-color:#7fd18d;background:rgba(127,209,141,.10);color:#7fd18d;
}

.track-status-home{
  border-left-color:var(--gold);background:rgba(201,168,76,.1);color:var(--gold);
}

.track-status-none{
  border-left-color:#e88c8c;background:rgba(232,140,140,.1);color:#e88c8c;
}


/* ═══ BLOG — LESEANSICHT ═══

   Die Karten oben in der Datei (.blog-card) zeigen nur den Anriss;
   hier steht, wie der Beitrag aussieht, wenn man ihn ganz liest.

   Der Fliesstext bekommt eine Zeilenlaenge von rund 72 Zeichen. Auf
   einem breiten Bildschirm liefe er sonst ueber die volle Seite, und
   das Auge findet am Zeilenende den Anfang der naechsten nicht mehr
   wieder. Die Absaetze entstehen aus nl2br(), also aus <br>-Paaren im
   Fluss — es gibt keine <p>-Abstaende zu setzen, der leere Umbruch
   macht die Luft selbst. white-space bleibt deshalb bewusst normal:
   mit pre-wrap kaeme jeder Umbruch doppelt (einmal als <br>, einmal
   als erhaltenes \n). */

.blog-post-content{
  max-width:72ch;
  color:var(--txt-m);
  font-size:.95rem;
  line-height:1.7;
  margin:0 0 2rem;
}

.blog-post-cover{
  display:block;
  width:100%;
  max-height:340px;
  object-fit:cover;
  border-radius:var(--radius);
  margin-top:2rem;
}

.blog-post-back{margin:0 0 2rem}

/* Der Lesen-Knopf sitzt unten in der Karte und faellt kleiner aus als
   ein Formular-Knopf — er ist ein Weiterweg, keine Handlung. */
.blog-actions{margin:.9rem 0 0}
.blog-card .blog-actions .btn{padding:.4rem .9rem;font-size:.75rem}

/* Der Titel wird zum Link, soll aber weiter wie eine Ueberschrift
   aussehen: Goldton erst beim Darueberfahren. */
.blog-body h3 a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition-base);
}
.blog-body h3 a:hover,
.blog-body h3 a:focus-visible{color:var(--gold)}

/* Leaflet 1.9 erzwingt fuer Bilder im Marker-Pane width:auto — mit
   Spezifitaet 0,3,1 schlaegt das ".arch-spot img". Deshalb hier die
   staerkere Fassung: Die Foto-Kachel fuellt immer exakt ihre 52x39. */
.leaflet-container .leaflet-marker-pane .arch-spot img {
    width: 100%;
    height: 100%;
}


/* ═══ EINSTELLUNGEN: KONTO ÄNDERN (Benutzername / E-Mail) ═══
   Zwei Formulare in einer Karte, durch eine Linie getrennt. Die
   Breite ist bewusst gedeckelt: Ein Eingabefeld, das über die ganze
   Karte läuft, sieht nach mehr Text aus, als hineingehört. */

.acct-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 26rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bg-border);
}

.acct-form .input-group { margin: 0; }

.acct-sub {
    margin: 0 0 .25rem 0;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

.acct-form .btn { align-self: flex-start; }

/* Gesperrtes Feld: sichtbar, aber erkennbar tot. Es bleibt stehen,
   weil daneben das Datum steht, ab dem es wieder geht — ein Feld,
   das einfach verschwindet, beantwortet die Frage "warum" nicht. */
.acct-form .input:disabled,
.acct-form .btn:disabled {
    opacity: .45;
    cursor: default;
}

.acct-status {
    font-size: .85rem;
    color: var(--txt-m);
}

.acct-status.is-locked { color: var(--gold-dim); }

.acct-form .settings-hint { margin: 0; }

/* Offener Bestätigungswunsch */
.acct-pending {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(201, 168, 76, .07);
    border-left: 3px solid var(--gold-dim);
    border-radius: 4px;
    font-size: .9rem;
}

.acct-pending p { margin: 0 0 .85rem 0; }

.acct-pending-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.acct-resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.acct-resend .input { max-width: 14rem; }

/* ── Telefonnummer: Vorwahl + Rest (25.08.2026) ──
   Dieselbe Zeile wie im Registrierungsformular, und darum absichtlich
   dieselben Klassennamen. Die Regeln stehen hier trotzdem ein zweites
   Mal: register.css gehört zur Anmeldestrecke und wird vom Dashboard
   nicht geladen — sie dafür portalweit zu machen, hiesse eine Datei
   auf jeder Seite mitzuschleppen für ein Formular, das es auf zweien
   gibt.

   Eingehängt unter .acct-form, damit die Regeln die Karte nicht
   verlassen. Der Unterschied zur Registrierung ist die Feldklasse:
   dort .auth-input, hier .input. */
.acct-form .phone-row {
    display: flex;
    gap: .6rem;
    align-items: stretch;
}

/* Die Auswahl wächst nicht mit. In ihr steht nur Flagge und Vorwahl
   ("🇩🇪 +49", auf Windows-Desktops "DE +49" — dort fehlt die
   Flaggenschrift); das längste ist "+420". 7rem fassen das mitsamt
   Pfeilchen, der Rest der Zeile gehört der Nummer. */
.acct-form .phone-row .phone-cc {
    flex: 0 0 7rem;
    width: 7rem;
    /* Eigenes Pfeilchen: Ein <select> erbt sonst die Systemfarben und
       stände als weißer Kasten in einem dunklen Formular. Die Farbe
       ist ausgeschrieben (--txt-m), weil eine CSS-Variable in einer
       Data-URI nicht ersetzt wird. */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238A8880' d='M1 1l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 10px 7px;
    cursor: pointer;
}

/* Die aufgeklappte Liste zeichnet das Betriebssystem, nicht diese
   Seite — dort muss die Schrift auf dunklem Grund lesbar bleiben. */
.acct-form .phone-row .phone-cc option {
    background: var(--bg-mid);
    color: var(--txt);
}

.acct-form .phone-row .phone-rest {
    flex: 1 1 auto;
    min-width: 0;
}

/* Das Code-Feld im offenen Antrag: sechs Ziffern brauchen keine
   Textbreite, und ein kurzes Feld sagt von selbst, wie viel
   hineingehört. */
.acct-pending .acct-resend .input[name="code"] { max-width: 9rem; }

@media (max-width: 640px) {
    .acct-form, .acct-resend .input { max-width: 100%; }
    .acct-form .btn { align-self: stretch; }

    /* Auf dem Telefon untereinander: Nebeneinander bliebe für die
       Nummer kaum Platz, und getippt wird ohnehin nur unten. */
    .acct-form .phone-row { flex-direction: column; }
    .acct-form .phone-row .phone-cc { flex: 0 0 auto; width: 100%; }
}


/* ═══ FORECASTS ═══

   Hier stand bis zum 25.08.2026 das Forecast-Layout. Es ist
   nach assets/css/forecast.css gezogen, weil es seither an ZWEI
   Stellen gebraucht wird: auf /forecasts/ und im Adminpanel,
   das dashboard.css nicht laedt.

   Wer hier fc-Regeln vermisst: Sie sind nicht verloren, sie
   stehen dort — samt der sechsstufigen Farbskala, die die alten
   vier Klassen fc-l0 bis fc-l3 abgeloest hat. */



/* ═══ EINSTELLUNGEN: KONTO LÖSCHEN (25.08.2026) ═══
   Die letzte Karte der Einstellungen, und die einzige, die etwas
   endgültig tut. Sie sieht deshalb anders aus als ihre Nachbarn —
   nicht laut, aber unmissverständlich: eine rote Kante links (wie
   bei einer Unwetterwarnung der Stufe "danger", siehe .warning-card)
   und ein Knopf, der nicht wie "Speichern" aussieht.

   Der Rest ist geerbt: Das Formular trägt zusätzlich .acct-form und
   bekommt von dort Breite, Abstände und die Trennlinie. */

.acctdel-card {
    border-left: 3px solid var(--danger);
}

.acctdel-card h2 {
    color: var(--danger);
}

.acctdel-form {
    border-top-color: rgba(255, 107, 107, .25);
}

/* Der Haken steht direkt über dem Knopf und bekommt deshalb etwas
   Luft nach unten — .tracking-toggle bringt sie für ein Formular
   mit, das danach noch weitergeht. */
.acctdel-check {
    margin: .2rem 0 .4rem 0;
    align-items: flex-start;
}

.acctdel-btn {
    background: rgba(255, 107, 107, .16);
    border: 1px solid rgba(255, 107, 107, .45);
    color: var(--danger);
}

.acctdel-btn:hover {
    background: rgba(255, 107, 107, .26);
}

/* Gesperrtes Konto (Admin, Moderator, Forecaster): Statt des
   Formulars steht hier, warum es nicht geht und was zuerst zu tun
   ist. Kein toter Knopf — der beantwortet die Frage "warum" nicht. */
.acctdel-blocked {
    margin: 1.25rem 0 0 0;
    padding: .85rem 1.1rem;
    background: rgba(255, 107, 107, .07);
    border-left: 3px solid var(--danger);
    border-radius: 4px;
    font-size: .9rem;
    color: var(--txt-m);
}

/* Autor eines Beitrags, dessen Konto gelöscht wurde (whAuthorHtml in
   includes/community.php). Bewusst zurückhaltend: Das ist eine
   Sachauskunft und keine Warnung. */
.wh-author-gone {
    color: var(--txt-m);
    font-style: italic;
}


/* ══════════════════════════════════════════════════════════════════
   Ticketsystem (25.08.2026)
   ══════════════════════════════════════════════════════════════════

   Die Seite /tickets/ borgt sich, was es schon gibt: .glass und
   .profile-card fuer die Karten, .settings-hint fuer Nebentexte,
   .btn/.btn-muted fuer die Knoepfe. Hier stehen nur die vier Dinge,
   die es sonst nirgends gibt — die Zeile in der Liste, das
   Zustands-Schildchen, der ungelesen-Punkt und die abgesetzte
   Support-Nachricht im Verlauf. */

.tk-list { display: flex; flex-direction: column; gap: .75rem; max-width: 860px; }

.tk-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; padding: 1rem 1.25rem; border-radius: 10px;
    color: inherit; text-decoration: none;
}
.tk-row:hover { border-color: rgba(201,168,76,.45); }

.tk-row-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tk-row-subject { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.tk-row-meta { color: var(--txt-m); font-size: .78rem; }
.tk-row-flags { display: flex; flex-wrap: wrap; gap: .35rem; flex: 0 0 auto; }

/* Ungelesen: derselbe rote Rand wie bei den Benachrichtigungen —
   dieselbe Aussage soll dieselbe Farbe haben. */
.tk-row-unread { border-color: rgba(229,72,77,.5); }

.tk-dot {
    display: inline-block; width: 8px; height: 8px; margin-right: .4rem;
    border-radius: 50%; background: #E5484D; vertical-align: middle;
}

.tk-badge {
    display: inline-block; padding: .15rem .5rem; border-radius: 3px;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    border: 1px solid var(--line, rgba(255,255,255,.12));
    color: var(--txt-m);
}
.tk-warn { border-color: rgba(232,201,107,.5); color: #E8C96B; }
.tk-ok   { border-color: rgba(120,190,140,.45); color: #86c99b; }
.tk-kind { opacity: .75; }

/* ── Verlauf ──
   Support-Nachrichten sind abgesetzt: goldener Rand links und ein
   leichter Untergrund. Wer den Faden von oben liest, soll ohne
   Namensvergleich sehen, wer gerade spricht. */

.tk-thread { display: flex; flex-direction: column; gap: .75rem; max-width: 860px; }

.tk-msg { padding: 1rem 1.25rem; border-radius: 10px; }
.tk-msg-head { margin: 0 0 .4rem; font-size: .8rem; color: var(--txt-m); }
.tk-msg-date { margin-left: .5rem; }
.tk-msg-body { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }

.tk-msg-support {
    border-left: 3px solid #E8C96B;
    background: rgba(232,201,107,.05);
}

/* ── Formulare ──
   Zwei Felder und ein Knopf; eine eigene Rasterklasse waere hier
   mehr Aufwand als Nutzen. */

.tk-new, .tk-reply { max-width: 860px; padding: 1.25rem; margin-bottom: 1.25rem; }
.tk-new h2, .tk-reply h2 { margin: 0 0 .9rem; font-size: 1.05rem; }

.tk-label { display: block; margin: .8rem 0 .35rem; font-size: .85rem; color: var(--txt-m); }

.tk-new input[type="text"],
.tk-new textarea,
.tk-reply textarea {
    width: 100%; padding: .7rem .85rem;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--line, rgba(255,255,255,.12));
    border-radius: 4px; color: inherit; font: inherit; line-height: 1.6;
}
.tk-new textarea, .tk-reply textarea { resize: vertical; }

.tk-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }

.tk-list-title { margin: 2rem 0 .8rem; font-size: 1.05rem; }

@media (max-width: 640px) {
    .tk-row { flex-direction: column; gap: .5rem; }
    .tk-actions { flex-direction: column-reverse; }
    .tk-actions .btn, .tk-actions .btn-muted { width: 100%; text-align: center; }
}


/* ── Ticketsystem, zweiter Ausbau (25.08.2026) ──
   Dringlichkeit, Bereich, Bildanhang. */

/* "Normal" bekommt kein Schildchen (siehe tkPrioBadge) — hier stehen
   nur die beiden Stufen, die auffallen sollen. Rot ist dieselbe Farbe
   wie am ungelesen-Rand: Sie heisst im ganzen Portal "hier ist etwas
   los", und zwei Bedeutungen für eine Farbe kann sich niemand
   merken. */

.tk-prio-hoch     { border-color: rgba(232,201,107,.55); color: #E8C96B; }
.tk-prio-dringend { border-color: rgba(229,72,77,.6); color: #ff8b8f; background: rgba(229,72,77,.08); }

/* Der Bereich ist eine Zuordnung und keine Warnung — er bleibt
   still. */
.tk-chip { opacity: .8; font-weight: 600; }

.tk-hint {
    display: block; margin: .35rem 0 0;
    font-size: .78rem; line-height: 1.5;
    color: var(--txt-m);
}

.tk-new select,
.tk-new input[type="file"],
.tk-reply input[type="file"] {
    width: 100%; padding: .7rem .85rem;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--line, rgba(255,255,255,.12));
    border-radius: 4px; color: inherit; font: inherit;
}

/* Anhang im Verlauf. Begrenzte Höhe, damit ein hochkantiges
   Handyfoto nicht den halben Faden einnimmt — angeklickt öffnet es
   sich ohnehin in voller Größe. */

.tk-att { margin: .75rem 0 0; }
.tk-att img {
    display: block; max-width: 100%; max-height: 320px;
    width: auto; border-radius: 6px;
    border: 1px solid var(--line, rgba(255,255,255,.12));
}


/* ---------------------------------------------------------------
   Phaenomen-Score im Profilkopf (Admin-ToDo #34, 26.08.2026)

   Eine Zeile unter den Abzeichen: "42 / 710 Phaenomene gesehen —
   XYZ hat mehr Phaenomene als 97 % der Nutzer gesehen", dahinter ein
   i-Symbol. Getragen wird das Ganze von einem <details>: die Zeile
   ist das <summary> und damit der Schalter, der Hinweistext klappt
   darunter auf. Kein JavaScript, keine eigene Fokus-Logik — das
   macht der Browser besser.

   Ruhige Optik mit Absicht. Die Zahl darf golden hervorstechen, der
   Rest ist Fliesstext in derselben Zurueckhaltung wie die
   Mitglied-seit-Angabe darueber; der Score ist eine Auskunft, keine
   Auszeichnung.
   --------------------------------------------------------------- */

.wh-phsc {
    margin: .7rem 0 0;
    max-width: 100%; min-width: 0;
}

/* Der Aufklapp-Pfeil der Browser wuerde vor der Zahl stehen und die
   Zeile aussehen lassen wie ein Menuepunkt. Weg damit — das i-Symbol
   am Ende ist das Zeichen, dass hier etwas zu holen ist.
   list-style UND ::-webkit-details-marker, weil Safari bis heute nur
   auf das zweite hoert. */
.wh-phsc > summary {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .3rem .55rem;
    list-style: none; cursor: pointer;
    font-size: .85rem; color: var(--txt-m);
    max-width: 100%; min-width: 0;
}
.wh-phsc > summary::-webkit-details-marker { display: none; }
.wh-phsc > summary::marker { content: ""; }

/* Die Zahl. white-space:nowrap haelt "42 / 710" beisammen — ein
   Umbruch mitten im Bruch waere schwer zu lesen. */
.wh-phsc-num {
    font-size: 1rem; font-weight: 600;
    color: var(--gold); white-space: nowrap;
}
.wh-phsc-slash { margin: 0 .2rem; font-weight: 400; opacity: .55; }

/* Der Vergleichssatz. Er darf innerhalb von Woertern umbrechen —
   dasselbe Muster wie bei den Abzeichen daneben, damit ein langer
   Benutzername die Kopfkarte nicht breiter macht als den Bildschirm.
   Der Trennpunkt davor steht in der CSS und nicht im Sprachschluessel:
   Faellt der Satz weg (zu wenige Vergleichsnutzer), soll auch kein
   einsamer Punkt uebrig bleiben. */
.wh-phsc-rank { overflow-wrap: anywhere; opacity: .9; }
.wh-phsc-rank::before { content: "\00b7"; margin-right: .5rem; opacity: .55; }

.wh-phsc-i { display: inline-flex; align-items: center; opacity: .65; }
.wh-phsc-i svg { width: 15px; height: 15px; }
.wh-phsc > summary:hover .wh-phsc-i,
.wh-phsc[open] > summary .wh-phsc-i { opacity: 1; color: var(--gold); }

/* Der Hinweis. Volle Breite unter der Zeile statt schwebender
   Sprechblase: Eine absolut positionierte Blase muesste raten, ob
   links oder rechts noch Platz ist, und liegt am Handy regelmaessig
   halb ausserhalb. So kann nichts danebengehen. */
.wh-phsc-hint {
    display: block; margin: .5rem 0 0;
    padding: .55rem .8rem; border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--bg-border, rgba(255,255,255,.12));
    color: var(--txt-m); font-size: .8rem; line-height: 1.55;
    max-width: 46ch;
}


/* ---------------------------------------------------------------
   Sichtbarkeit der Teams (ToDo #88, 28.08.2026)

   Drei Stellen, ein Gedanke: Wer noch kein Team hat, soll den Weg
   dorthin finden, ohne ihn zu suchen — und wer sucht, soll sehen,
   welche Teams ueberhaupt jemanden aufnehmen. Alle drei Bausteine
   sind bewusst leise gehalten: Sie stehen zwischen fertigen Inhalten
   und duerfen dort nicht lauter sein als das, weswegen der Nutzer
   gekommen ist.
   --------------------------------------------------------------- */

/* Der Chip „sucht Mitglieder" auf den Teamkarten. Er sitzt in der
   Karten-Spalte unter den Zahlen, ist also eine weitere Meta-Angabe
   und kein Knopf. align-self haelt ihn auf Inhaltsbreite, statt ihn
   ueber die ganze Karte zu ziehen; white-space verhindert, dass zwei
   Woerter zu zwei Zeilen werden. */
.ccard-open {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: .15rem; padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(201,168,76,.4);
    background: rgba(201,168,76,.1);
    color: var(--gold);
    font-size: .68rem; line-height: 1.6; white-space: nowrap;
}
.ccard-open svg { width: 11px; height: 11px; flex: none; }

/* Der Hinweis-Block im eigenen Profil. Text links, Knoepfe rechts —
   am Handy untereinander, dort nehmen die Knoepfe die volle Breite
   (dieselbe Regel wie bei .cprofile-actions weiter oben). */
.wh-noteam {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin: 1.25rem 0 0; padding: 1rem 1.25rem; border-radius: 12px;
}
.wh-noteam-txt { min-width: 0; flex: 1 1 20rem; }
.wh-noteam-txt strong { display: block; color: #fff; font-size: .95rem; }
.wh-noteam-txt p {
    margin: .3rem 0 0; max-width: 58ch;
    color: var(--txt-m); font-size: .85rem; line-height: 1.55;
}
.wh-noteam-btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Die Startkarte im Dashboard. Sie traegt rechts oben das X, deshalb
   rechts mehr Innenabstand — sonst schoebe sich eine lange
   Ueberschrift darunter. */
.wh-teamhint {
    position: relative;
    margin: 0 0 1.5rem; padding: 1rem 2.75rem 1rem 1.25rem;
    border-radius: 12px;
}
.wh-teamhint strong { display: block; color: #fff; font-size: .95rem; }
.wh-teamhint p {
    margin: .3rem 0 .85rem; max-width: 58ch;
    color: var(--txt-m); font-size: .85rem; line-height: 1.55;
}
.wh-teamhint-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.wh-teamhint-x {
    position: absolute; top: .6rem; right: .6rem;
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 50%;
    color: var(--txt-m); cursor: pointer;
}
.wh-teamhint-x:hover { color: var(--gold); background: rgba(255,255,255,.06); }
.wh-teamhint-x svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
    .wh-noteam-btns, .wh-teamhint-btns { width: 100%; }
    .wh-noteam-btns .sbtn, .wh-teamhint-btns .sbtn {
        flex: 1 1 auto; justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════════════
   Blog-Volltext: Rich-Content aus dem WYSIWYG-Editor (Admin-ToDo #115)
   ══════════════════════════════════════════════════════════════════════

   Seit dem 28.08.2026 steht der Beitragstext als echtes HTML in der
   Spalte (gesäubert beim Speichern, siehe includes/blog_html.php) und
   wird in .blog-post-content roh ausgegeben. Diese Regeln geben ihm
   Form: Absätze, Überschriften, Listen, Ausrichtung und die im Text
   positionierten Bilder.

   Alte Beiträge (reiner Text über nl2br) berühren diese Regeln nicht —
   sie haben weder <p> noch die Positionsklassen. */

.blog-post-content p,
.blog-post-content ul,
.blog-post-content ol,
.blog-post-content blockquote { margin: 0 0 1rem; }

.blog-post-content h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 1.8rem 0 .7rem;
  color: var(--txt-s, #fff);
}
.blog-post-content h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 1.4rem 0 .5rem;
  color: var(--txt-s, #fff);
}

.blog-post-content ul,
.blog-post-content ol { padding-left: 1.5rem; }
.blog-post-content li { margin: 0 0 .35rem; }

.blog-post-content a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-post-content blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
  color: var(--txt-m);
  font-style: italic;
}

/* Textausrichtung — als Klasse an Blöcken (kein inline-style). */
.blog-post-content .align-left   { text-align: left; }
.blog-post-content .align-center { text-align: center; }
.blog-post-content .align-right  { text-align: right; }

/* Bilder im Text. Position über Klassen, mit Textumfluss bei links/rechts. */
.blog-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.blog-post-content .blog-img-wide {
  display: block;
  width: 100%;
  margin: 1.4rem 0;
}
.blog-post-content .blog-img-center {
  display: block;
  margin: 1.4rem auto;
  max-width: 100%;
}
.blog-post-content .blog-img-left {
  float: left;
  max-width: 45%;
  margin: .35rem 1.4rem 1rem 0;
}
.blog-post-content .blog-img-right {
  float: right;
  max-width: 45%;
  margin: .35rem 0 1rem 1.4rem;
}

/* Floats einfangen, damit sie nicht aus dem Beitrag herauslaufen. */
.blog-post-content::after { content: ""; display: table; clear: both; }

/* Schmale Screens: kein Umfluss — sonst quetscht sich der Text neben
   ein halbbreites Bild. Bilder werden zu vollen Blöcken. */
@media (max-width: 640px) {
  .blog-post-content .blog-img-left,
  .blog-post-content .blog-img-right {
    float: none;
    display: block;
    max-width: 100%;
    margin: 1.4rem 0;
  }
}