/* /dashboard-view/dashboard-view-room-tooltip.css */

/* 1) Portal-Container */
.tooltip-portal.tooltip-modern {
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 260px;
  font-size: var(--font-size-sm);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
}

/* 2) Innerer Flex-Container */
.tooltip-portal.tooltip-modern .tooltip-modern {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  line-height: 1.3;
}

/* 3) Inhaber & Teilnehmer-Zeilen */
.tooltip-portal.tooltip-modern .tooltip-modern .owner,
.tooltip-portal.tooltip-modern .tooltip-modern .participants {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tooltip-portal.tooltip-modern .tooltip-modern .owner strong {
  font-weight: 600;
}

.tooltip-modern .start-time {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tooltip-modern .start-time strong {
  font-weight: 600;
}


/* 4) Trennlinie */
.tooltip-portal.tooltip-modern .tooltip-modern .divider {
  height: 1px;
  background: var(--color-on-surface-variant);
  margin: 4px 0;
}

/* 5) Attendees-Liste */
.tooltip-portal.tooltip-modern .tooltip-modern .attendees-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 6) Einzelner Attendee */
.tooltip-portal.tooltip-modern .tooltip-modern .attendee {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .9;
}

.tooltip-portal.tooltip-modern .tooltip-modern .attendee:hover {
  opacity: 1;
}

/* 7) Avatar-Kreis */
.tooltip-portal.tooltip-modern .tooltip-modern .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.tooltip-portal.tooltip-modern .tooltip-modern .avatar.mod-avatar {
  border-radius: 25%;
}

/* 8) Name + Badges nebeneinander */
.tooltip-portal.tooltip-modern .tooltip-modern .details {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.tooltip-portal.tooltip-modern .tooltip-modern .details .name {
  font-weight: 500;
  color: var(--tooltip-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 9) Badge-Styling */
.tooltip-portal.tooltip-modern .tooltip-modern .badges .badge {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip-portal.tooltip-modern .tooltip-modern .badges .mod {
  background: var(--color-secondary-lightest);
  color: var(--color-secondary);
}
.tooltip-portal.tooltip-modern .tooltip-modern .badges .pres {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

/* Icon in der Nähe des .room-name */
.room-card-header .room-name .icon {
  display: inline-block;
  transform-origin: center center;
  animation: gentle-pulse 3s ease-in-out infinite;
}

/* Jede Zeile etwas Abstand */
.tooltip-modern .field {
  margin: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;    /* lange Wörter umbrechen */
}

/* ==== Beschreibung clampen auf 3 Zeilen ==== */
.tooltip-modern .description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;      /* Max. 3 Zeilen */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== Organisator-Zeile ==== */
.tooltip-modern .avatar-p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* Name bricht um */
  gap: var(--spacing-xs);
}
.tooltip-modern .avatar-p .avatar-sm,
.tooltip-modern .avatar-p .avatar-initial {
  flex-shrink: 0;
}
.tooltip-modern .avatar-p .organizer-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== „Zum Raum springen“-Button ==== */
.tooltip-modern .jump-room-btn {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.tooltip-modern .jump-room-btn:hover {
  background: var(--color-primary-hover);
}

/* ==== Responsive Tweaks ==== */
@media (max-width: 480px) {
  .tooltip-modern {
    max-width: 90vw;
  }
}

/* ======================================
   Mini-Event Liste (Dashboard)
   ====================================== */
.mini-events {
  display: grid;
  gap: var(--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ======================================
   Item = kleine Karte mit 3 Spalten
   [Icon] [Zeit+Titel] [Chevron]
   ====================================== */
.mini-events li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto; /* Icon | Content | Chevron */
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid color-mix(in oklab, var(--color-border) 85%, var(--color-surface) 15%);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .15s ease, border-color .2s ease;
  min-height: 30px;
}

/* Zarte linke Status-Leiste – färbt sich je nach Status */
.mini-events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  background: var(--_bar, var(--color-primary));
  opacity: .65;
  pointer-events: none;
}

/* Statusfarben via :has() (Fallback: nur das time-Label färbt sich) */
@supports selector(:has(*)) {
  .mini-events li:has(time.running) {
    --_bar: var(--color-accent);
  }

  .mini-events li:has(time.starting) {
    --_bar: var(--color-primary);
  }
}

/* Hover (nur auf Geräten mit Hover) */
@media (hover: hover) {
  .mini-events li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: var(--color-surface-hover, color-mix(in oklab, var(--color-surface) 94%, var(--color-border) 6%));
  }
}

/* Tastatur/Fokus sichtbar machen */
.mini-events li:focus-visible,
.mini-events li:focus-within {
  outline: 2px solid color-mix(in oklab, var(--color-primary) 65%, white 35%);
  outline-offset: 3px;
}

/* ======================================
   Linkes Icon
   ====================================== */
.mini-events .item-icon {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-primary);
  transition: color .2s ease;
}

@media (hover: hover) {
  .mini-events li:hover .item-icon {
    color: var(--color-accent);
  }
}

/* ======================================
   Zeit + Titel (Content)
   ====================================== */
.mini-events .mini-event-trigger {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  min-width: 0; /* für Ellipsis */
}

/* Zeit als Chip */
.mini-events time {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1;
  white-space: nowrap;
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.mini-events time.running {
  background: color-mix(in oklab, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}

.mini-events time.starting {
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

/* Titel – max. 2 Zeilen, sauber ellipsen */
.mini-events .title {
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ======================================
   Chevron (Spalte 3)
   ====================================== */
/*.mini-events li::after {*/
/*  grid-column: 3;*/
/*  content: "";*/
/*  width: .55rem;*/
/*  height: .55rem;*/
/*  border-right: 2px solid var(--color-on-surface-variant);*/
/*  border-top: 2px solid var(--color-on-surface-variant);*/
/*  transform: rotate(45deg);*/
/*  justify-self: end;*/
/*  opacity: .55;*/
/*  transition: transform .2s ease, opacity .2s ease, border-color .2s ease;*/
/*}*/

@media (hover: hover) {
  .mini-events li:hover::after {
    transform: translateX(2px) rotate(45deg);
    opacity: .9;
    border-color: var(--color-primary);
  }
}

/* Auf Touch-Geräten: kein Chevron-Pseudo-Hover */
@media (hover: none) {
  .mini-events li::after {
    display: none;
  }
}

/* ======================================
   „Mehr anzeigen“ Button – nur direkt nach der Liste stylen
   ====================================== */
.mini-events + .more-btn {
  display: block;
  margin: var(--spacing-md) auto 0;
  padding: var(--spacing-xs) var(--spacing-lg);
  font-size: var(--font-size-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .18s;
}

.mini-events + .more-btn:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ======================================
   Tooltip / Avatar im Tooltip
   ====================================== */
.tooltip-modern p {
  display: flex;
  align-items: center;
}

.avatar-p .avatar-sm,
.avatar-p .avatar-initial {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}

.avatar-p .avatar-initial {
  display: inline-block;
  line-height: 1.5rem;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* CTA im Tooltip */
.tooltip-modern .jump-room-btn {
  display: block;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  border-radius: var(--radius-pill);
  text-align: center;
  transition: background .2s, transform .1s;
}

.tooltip-modern .jump-room-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

/* ======================================
   Responsive
   ====================================== */
@media (max-width: 480px) {
  .mini-events li {
    padding: var(--spacing-xs) var(--spacing-sm);
    grid-template-columns: auto 1fr; /* Chevron weg */
    min-height: 50px;
  }

  .mini-events li::after {
    display: none;
  }

  .mini-events + .more-btn {
    width: 100%;
  }
}

/* Motion-Respect */
/*@media (prefers-reduced-motion: reduce) {*/
/*  .mini-events li,*/
/*  .mini-events li::after {*/
/*    transition: none !important;*/
/*    transform: none !important;*/
/*  }*/
/*}*/

/* /src/components/shared/tooltip-portal.css */

/* Variablen für Pfeil-Größe und Offset */
.tooltip-portal {
  position: fixed;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: var(--font-size-sm);
  opacity: 0;
  transform: scale(0.95);
  transform-origin: var(--position-origin, center);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
  z-index: var(--z-index-tooltip);
  max-width: 80vw;
  word-break: break-word;
}

.tooltip-portal p {
  margin: 0;
}

.tooltip-portal.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.tooltip-portal.top    { --position-origin: bottom center; }
.tooltip-portal.bottom { --position-origin: top center; }
.tooltip-portal.left   { --position-origin: center right; }
.tooltip-portal.right  { --position-origin: center left; }

/*!* Basis-Pfeil als CSS-Dreieck *!*/
/*.tooltip-portal.tooltip-modern::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  width: var(--tooltip-arrow-size);*/
/*  height: var(--tooltip-arrow-size);*/
/*  background: var(--tooltip-bg);*/
/*  transform: rotate(45deg);*/
/*  pointer-events: none;*/
/*  top:  var(--arrow-top);*/
/*  left: var(--arrow-left);*/
/*}*/

/*!* Pfeil für "bottom" (Tooltip unten) *!*/
/*.tooltip-portal.bottom.tooltip-modern::before {*/
/*  border-left:  var(--tooltip-arrow-size) solid transparent;*/
/*  border-right: var(--tooltip-arrow-size) solid transparent;*/
/*  border-bottom: var(--tooltip-arrow-size) solid var(--tooltip-bg);*/
/*  top:  var(--tooltip-arrow-offset);*/
/*  left: calc(50% + var(--tooltip-arrow-offset));*/
/*}*/

/*!* Pfeil für "top" (Tooltip oben) *!*/
/*.tooltip-portal.top.tooltip-modern::before {*/
/*  border-left: var(--tooltip-arrow-size) solid transparent;*/
/*  border-right: var(--tooltip-arrow-size) solid transparent;*/
/*  border-top:   var(--tooltip-arrow-size) solid var(--tooltip-bg);*/
/*  bottom: var(--tooltip-arrow-offset);*/
/*  left:   calc(50% + var(--tooltip-arrow-offset));*/
/*}*/

/*!* Pfeil für "left" (Tooltip links) *!*/
/*.tooltip-portal.left.tooltip-modern::before {*/
/*  border-top:    var(--tooltip-arrow-size) solid transparent;*/
/*  border-bottom: var(--tooltip-arrow-size) solid transparent;*/
/*  border-left:   var(--tooltip-arrow-size) solid var(--tooltip-bg);*/
/*  right: var(--tooltip-arrow-offset);*/
/*  top:   calc(50% + var(--tooltip-arrow-offset));*/
/*}*/

/*!* Pfeil für "right" (Tooltip rechts) *!*/
/*.tooltip-portal.right.tooltip-modern::before {*/
/*  border-top:    var(--tooltip-arrow-size) solid transparent;*/
/*  border-bottom: var(--tooltip-arrow-size) solid transparent;*/
/*  border-right:  var(--tooltip-arrow-size) solid var(--tooltip-bg);*/
/*  left:  var(--tooltip-arrow-offset);*/
/*  top:   calc(50% + var(--tooltip-arrow-offset));*/
/*}*/

/* Mobile-Layout: zentriert, kein Pfeil */
@media (max-width: 600px) {
  .tooltip-portal.tooltip-modern {
    position: absolute !important;
    left:     50%      !important;
    transform:translateX(-50%) scale(1) !important;
    max-width: 90vw;
    top:       auto    !important;
    bottom:    8px     !important;
    word-break: break-word;
  }

  .tooltip-portal.tooltip-modern::before {
    display: none;
  }
}

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 75%);
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: calc(100% / 3);
  left: 0;
  top: calc(100% / 3);
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: calc(100% / 3);
  top: 0;
  width: calc(100% / 3);
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center::before,
.cropper-center::after {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

.cropper-center::before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center::after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {

  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {

  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {

  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}

.cropper-point.point-se::before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary-lightest);       /* sehr helle Tönung */
  border-left: 3px solid var(--color-primary-light);/* feinerer Streifen */
  border-radius: var(--radius-sm);
  color: var(--font-color-primary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.info-box::before {
  content: "ℹ️";
  margin-top: 2px;  /* leichte Vertikale Anpassung */
  font-size: var(--font-size-md);
  opacity: 0.7;     /* dezenter Icon-Look */
}

.info-box p {
  margin: 0;        /* Bei Anwendung auf <p> direkt */
}

/* src/global/buttons.css */

/* Basis */
.btn {
  --_bg: var(--color-surface);
  --_fg: var(--font-color-primary);
  --_bd: var(--border-color);
  --_ring: var(--color-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  min-height: 2.5rem; /* ~40px */
  padding: 0 var(--spacing-lg);
  font: inherit;
  font-size: var(--font-size-md);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  box-shadow: var(--shadow-sm);
}

/* Primär/Brand – für "Create" verwenden */
.btn--brand {
  --_bg: var(--color-primary);
  --_fg: var(--color-on-primary);
  --_bd: transparent;
}

.btn--brand:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--brand:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Outline & Ghost (falls du sie woanders brauchst) */
.btn--outline {
  --_bg: transparent;
  --_fg: var(--color-primary);
  --_bd: var(--color-primary);
}

.btn--outline:hover {
  background: rgba(2, 119, 189, .06);
}

.btn--ghost {
  --_bg: transparent;
  --_fg: var(--color-primary);
  --_bd: transparent;
}

.btn--ghost:hover {
  background: rgba(2, 119, 189, .06);
}

/* Größen */
.btn--sm {
  min-height: 2rem;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn--lg {
  min-height: 3rem;
  padding: 0 calc(var(--spacing-lg) * 1.25);
  font-size: var(--font-size-lg);
}

/* Block/Flex */
.btn--block {
  width: 100%;
}

/* Disabled/Busy */
.btn[disabled],
.btn.is-busy {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Fokus sichtbar */
.btn:focus-visible {
  outline: 2px solid var(--_ring);
  outline-offset: 2px;
}

/* Icon-Kompatibilität (FontAwesome via innerHTML) */
.btn .icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: currentColor;
}

/* Kleine Plus-Pille (optional) */
.btn .plus {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-weight: 700;
}

.btn--danger {
  --_bg: var(--color-error);
  --_fg: var(--color-on-error);
  --_bd: transparent;
  background: var(--_bg);
  color: var(--_fg);
  border-color: var(--_bd);
}

.btn--danger:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
}


/* Motion-Respect */
/*@media (prefers-reduced-motion: reduce) {*/
/*  .btn {*/
/*    transition: none;*/
/*  }*/

/*  .btn:hover {*/
/*    transform: none;*/
/*    box-shadow: var(--shadow-sm);*/
/*  }*/
/*}*/

/* =======================================================================
   ICON BUTTONS – global & wiederverwendbar
   ======================================================================= */

/* Basis (icon-only) */
.icon-btn {
  --_bg: transparent;
  --_fg: var(--font-color-primary);
  --_bd: transparent;
  --_ring: var(--color-primary);
  --_size: 36px; /* Grundfläche */
  --_radius: 10px;
  --_icon: 1.1rem; /* SVG-Icon-Größe */

  display: inline-grid;
  place-items: center;
  width: var(--_size);
  height: var(--_size);
  padding: 6px;
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, color .15s;
  box-shadow: none; /* icon-only braucht idR keine Shadow */
}

.icon-btn .icon svg {
  width: var(--_icon);
  height: var(--_icon);
  display: block;
  fill: currentColor;
}

/* Fokus sichtbar */
.icon-btn:focus-visible {
  outline: 2px solid var(--_ring);
  outline-offset: 2px;
}

/* Disabled */
.icon-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
}

/* Varianten -------------------------------------------------------------- */

/* „Ghost“ – dein Standard aus der RoomList */
.icon-btn--ghost {
  --_bg: transparent;
  --_fg: var(--font-color-primary);
  --_bd: transparent;
}

.icon-btn--ghost:hover:not([disabled]) {
  background: rgba(2, 119, 189, .06);
  border-color: rgba(2, 119, 189, .2);
  transform: translateY(-1px);
}

/* Outline */
.icon-btn--outline {
  --_bg: transparent;
  --_fg: var(--color-primary);
  --_bd: var(--color-primary);
}

.icon-btn--outline:hover:not([disabled]) {
  background: rgba(2, 119, 189, .06);
}

/* Solid (gefüllt) – z.B. für primäre Toolbar-Aktionen */
.icon-btn--solid {
  --_bg: var(--color-primary);
  --_fg: var(--color-on-primary);
  --_bd: transparent;
}

.icon-btn--solid:hover:not([disabled]) {
  filter: brightness(.98);
  transform: translateY(-1px);
}

/* Semantic Tints */
.icon-btn--primary {
  --_fg: var(--color-primary);
}

.icon-btn--success {
  --_fg: var(--color-success);
}

.icon-btn--warning {
  --_fg: var(--color-accent);
}

.icon-btn--danger {
  --_fg: var(--color-error);
}

/* Danger + Ghost Hover (wie bei dir) */
.icon-btn--ghost.icon-btn--danger:hover:not([disabled]) {
  background: #fff5f5;
  border-color: rgba(176, 0, 32, .2);
  color: var(--color-error);
}

/* Größen ---------------------------------------------------------------- */
.icon-btn--sm {
  --_size: 30px;
  --_icon: 1rem;
}

.icon-btn--md {
  --_size: 36px;
  --_icon: 1.1rem;
}

/* default */
.icon-btn--lg {
  --_size: 44px;
  --_icon: 1.25rem;
}

/* Formen ---------------------------------------------------------------- */
.icon-btn--round {
  --_radius: 999px;
}

/* Kreis/Pille */
.icon-btn--square {
  --_radius: 8px;
}

/* leicht eckig */

/* Toggle-State (optional, z.B. Mute an/aus) */
.icon-btn[aria-pressed="true"] {
  background: rgba(2, 119, 189, .12);
  border-color: rgba(2, 119, 189, .24);
  color: var(--color-primary);
}

/* Motion-Respect */
/*@media (prefers-reduced-motion: reduce) {*/
/*  .icon-btn {*/
/*    transition: none;*/
/*  }*/

/*  .icon-btn:hover {*/
/*    transform: none;*/
/*  }*/
/*}*/

/* ==========================================================================
   Global Form Styles (form.css)
   - Einmal einbinden: @import '../../global/form.css';
   - Deckt Container, Gruppen, Inputs, Aktionen, Toggles, Chips, Tooltips ab
   ========================================================================== */

/* 0) Basis/Animation – nutzt schon vorhandene Tokens/Keyframes */
.form-enter       { animation: fadeInUp .4s ease both; }
.form-shake       { animation: shake   .4s ease; }
.form-fade-out    { animation: fadeOutUp .4s ease both; }

/* 1) Form-Container (Card) */
.form-card {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.form-card--narrow { max-width: 480px; box-sizing: border-box; }
.form-card--tight  { gap: var(--spacing-sm); }
.form-title {
  margin: 0;
  font-size: var(--font-size-xl);
  text-align: center;
  color: var(--color-primary);
}

/* 2) Gruppen/Labels/Hinweise */
.form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.form-group--row { flex-direction: row; align-items: center; gap: var(--spacing-md); }
.form-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 500;
}
.form-hint { font-size: var(--font-size-sm); color: var(--color-secondary); }

/* 3) Inputs (zwei Varianten: underlined | outlined) */
:root {
  --_input-pad: var(--spacing-sm);
  --_input-radius: var(--radius-sm);
  --_focus-ring: 0 0 0 3px rgba(2,119,189,0.2);
}
/* OUTLINED (Standard) */
.input,
select.input,
textarea.input {
  width: 100%;
  padding: var(--_input-pad);
  font-size: var(--font-size-md);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--_input-radius);
  background: var(--color-surface);
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.input:focus,
select.input:focus,
textarea.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--_focus-ring);
}
/* UNDERLINED (Login/Password) */
.input--underlined {
  border: none;
  border-bottom: 2px solid var(--border-color);
  border-radius: 0;
  background: transparent;
}
.input--underlined:focus {
  border-color: var(--color-primary);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
/* Invalid */
.input.is-invalid { border-color: var(--color-error) !important; }
.input-error { color: var(--color-error); font-size: var(--font-size-xs); }

/* 4) Actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}
.form-actions--end   { justify-content: flex-end; }
.form-actions--space-between   { justify-content: space-between; }
.form-actions--center{ justify-content: center; }
.form-submit {
  @apply btn btn--brand; /* wenn kein PostCSS/“@apply“, dann unten Fallback: */
}
.form-submit {
  display: inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height: 2.5rem; padding: 0 var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--color-primary); color: var(--color-on-primary);
  cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s;
  box-shadow: var(--shadow-sm);
}
.form-submit:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.form-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.form-cancel {
  background: none; border: none; color: var(--color-error);
  cursor: pointer; padding: 0; text-decoration: none;
}
.form-cancel:hover { text-decoration: underline; }

/* 5) Toggle (Switch) – einheitlich */
.switch {
  display: inline-flex; align-items: center; gap: var(--spacing-sm); user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track {
  width: 40px; height: 20px; background: var(--color-border);
  border-radius: var(--radius-pill); position: relative; transition: background .2s;
  flex-shrink: 0;
}
.switch .track::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  background: var(--color-surface); border-radius: 50%; transition: transform .2s;
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .track { background: var(--color-primary); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch .label { font-size: var(--font-size-sm); color: var(--color-on-surface-variant); }

/* 6) Tooltips (leichte Helper – data-* driven) */
.tip {
  position: relative; display: inline-flex; align-items:center; color: var(--color-secondary);
  font-size: var(--font-size-sm); cursor: help;
}
.tip:hover::after {
  content: attr(data-tip);
  position: absolute; top: -1.6rem; left: 0; white-space: nowrap;
  background: var(--color-surface); border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm); padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs); box-shadow: var(--shadow-sm); pointer-events: none;
  z-index: var(--z-index-tooltip);
}

/* 7) Chips (Invitees, Co-Owner, etc.) */
.chips { display:flex; flex-wrap:wrap; gap: var(--spacing-sm); }
.chip {
  display:inline-flex; align-items:center; gap: var(--spacing-xs);
  padding: .25rem .75rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .2s, transform .2s;
}
.chip:hover, .chip:focus-within { box-shadow: 0 3px 6px rgba(0,0,0,.15); transform: translateY(-1px); }
.chip-remove {
  display:grid; place-items:center; width:1.5rem; height:1.5rem;
  background: var(--color-error-background); color: var(--color-error);
  border: none; border-radius: 50%; font-size: var(--font-size-xs); cursor:pointer;
  transition: background .2s, color .2s, transform .2s;
}
.chip-remove:hover { background: var(--color-error); color: var(--color-on-error); transform: scale(1.1); }

/* 8) Sections (Logo/Avatar/Upload/Preview) – generisch */
.form-section {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--spacing-md);
}
.form-section__title {
  margin: 0; text-align: center; font-size: var(--font-size-lg); color: var(--color-primary);
}
.form-preview { display:flex; flex-direction:column; align-items:center; gap: var(--spacing-md); }
.form-preview img {
  max-height: 120px; object-fit: contain;
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm);
  transition: transform .2s;
}
.form-preview img:hover { transform: scale(1.05); }
.form-upload { display:flex; flex-direction:column; align-items:center; gap: var(--spacing-sm); }
.form-upload input[type="file"] {
  width:100%; padding: var(--spacing-xs);
  border: var(--border-width) dashed var(--border-color); border-radius: var(--radius-sm);
  background: var(--color-surface-hover); cursor:pointer; transition: border-color .2s, background .2s;
}
.form-upload input[type="file"]:hover { border-color: var(--color-primary); background: var(--color-surface); }

/* 9) Room/Event spezielle Blöcke */
.room-linkbox {
  display:flex; align-items:center; justify-content:space-between;
  background: var(--color-surface-hover);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: monospace; font-size: var(--font-size-sm); color: var(--color-on-surface-variant);
  overflow-x:auto; gap: var(--spacing-sm);
}
.room-linkbox__text { white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 10) Responsives */
@media (max-width: 600px) {
  .form-card { padding: var(--spacing-sm); }
  .form-card--narrow { max-width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-upload input[type="file"] { font-size: var(--font-size-xs); }
}

/* /src/global/global.css */
:root {
  --font-color-primary: #333;
  /* Farben */
  --color-primary: #0277bd;
  --color-primary-hover: #0288d1;
  --color-secondary: #4ebd4a;
  --color-secondary-hover: #5ccf5c;
  --color-accent: #ff9900;
  --color-accent-light: rgba(255, 184, 77, .4);
  --color-background: #f5f5f5;
  --color-surface: #ffffff;
  --color-on-primary: #ffffff;
  --color-on-secondary: #000000;
  --color-on-surface: #212121;
  --color-on-surface-variant: #666666;
  --color-error: #b00020;
  --color-error-background: #f8d7da;
  --color-on-error: #ffffff;
  --color-error-hover: #333333;
  --color-success: #2e7d32;
  --color-warning: #ed6c02;

  --color-surface-hover: var(--color-primary-lightestest);

  /* ----------------------- */
  /* Primary Tints & Shades */
  /* ----------------------- */
  --color-primary-lightestest: #f2fafe;  /* +60% Helligkeit */
  --color-primary-lighterest:  #bfe6fe;  /* +50% Helligkeit */
  --color-primary-lightest:  #c5e6fc;  /* +40% Helligkeit */
  --color-primary-lighter:   #7dcdf5;  /* +20% Helligkeit */
  --color-primary-light:     #38a9e2;  /* +10% Helligkeit */
  --color-primary-dark:      #026ba9;  /* –10% Helligkeit */
  --color-primary-darker:    #015a8a;  /* –20% Helligkeit */
  --color-primary-darkest:   #014167;  /* –30% Helligkeit */

  /* ------------------------ */
  /* Secondary Tints & Shades */
  /* ------------------------ */
  --color-secondary-lightest:  #c6f9c6; /* +30% Helligkeit */
  --color-secondary-lighter:   #a1e5a1; /* +20% Helligkeit */
  --color-secondary-light:     #7ed07e; /* +10% Helligkeit */
  --color-secondary-dark:      #42a841; /* –10% Helligkeit */
  --color-secondary-darker:    #31822f; /* –20% Helligkeit */
  --color-secondary-darkest:   #215c21; /* –30% Helligkeit */

  /* Komplementär zum Primary (#0277bd ≈ 202°) → Orange (~22°) */
  --color-primary-complement:        #bd4702; /* Neutral */
  --color-primary-complement-light:  #ca6c35; /* +20% Helligkeit */
  --color-primary-complement-dark:   #973901; /* −20% Helligkeit */

  /* Komplementär zum Secondary (#4ebd4a ≈120°) → Purpur (~300°) */
  --color-secondary-complement:        #bd4ebd; /* Neutral */
  --color-secondary-complement-light:  #d09ed0; /* +20% Helligkeit */
  --color-secondary-complement-dark:   #8a318a; /* −20% Helligkeit */

  /* Rollenspezifisch */
  --color-role-user: var(--color-primary);
  --color-role-operator: var(--color-secondary);
  --color-role-administrator: #d09f11;
  --color-role-background-user: lightblue;
  --color-role-background-operator: lightgreen;
  --color-role-background-administrator: #ffcd48;

  /* Typografie */
  --font-family-base: 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --line-height-base: 1.5;

  /* Abstände */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Radius & Border */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --border-width: 1px;
  --border-color: #e0e0e0;
  --color-border: var(--border-color);

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);

  /* Z-Index */
  --z-index-dropdown: 1000;
  --z-index-modal: 1100;
  --z-index-tooltip: 1200;

  /* Breakpoints */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1920px;

  /* Spinner (falls genutzt) */
  --spinner-size: 40px;
  --spinner-border-width: 4px;
  --spinner-speed: 1s;

  --footer-height: 70px;
  --header-height: 0;
  --header-height-mobile: 130px;


  /* Tooltip-Element */
  --tooltip-bg:   var(--color-on-primary);  /* helle Fläche */
  --tooltip-fg:   var(--font-color-primary);  /* dunkler Text */
  --tooltip-arrow-size: 6px;
  --tooltip-arrow-offset: calc(var(--tooltip-arrow-size) * -1);
  --arrow-left: 50%;
  --arrow-top:  50%;

  --filter-bg: var(--color-surface-hover);
  --filter-border: var(--border-color);
  --filter-radius: var(--radius-pill);
  --filter-padding: var(--spacing-xs) var(--spacing-md);
  --filter-font: var(--font-size-sm);

  --control-height: 2.5rem;
  --control-vertical-padding: var(--spacing-sm);
  --control-horizontal-padding: var(--spacing-md);

  --icon-width: 1em;

  --sidebar-width: 320px;

  --z-index-sidebar: 10000;

  --role-user: var(--color-primary);
  --role-operator: var(--color-secondary);
  --role-admin: #d09f11;

  --role-bg-user: color-mix(in oklab, var(--role-user) 12%, white);
  --role-bg-operator: color-mix(in oklab, var(--role-operator) 12%, white);
  --role-bg-admin: color-mix(in oklab, var(--role-admin) 18%, white);
}

/* ------------------------------------
   2) Resets & Base Styles
   ------------------------------------ */
/**,*/
/**::before,*/
/**::after {*/
/*  box-sizing: border-box;*/
/*}*/
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base), sans-serif;
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  background: var(--color-background);
  color: #333;
  min-height: 100vh;
}
a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ------------------------------------
   3) Layout Helpers
   ------------------------------------ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}
.grid {
  display: grid;
  gap: var(--spacing-md);
}
.grid-2 {
  grid-template-columns: 1fr;
}


/* ------------------------------------
   4) Buttons & Interaktive Elemente
   ------------------------------------ */
button {
  font-family: inherit;
  /*font-size: var(--font-size-md);*/
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s ease;
}
/*button.primary {*/
/*  background: var(--color-primary);*/
/*  color: var(--color-on-primary);*/
/*}*/
/*button.primary:hover:not(:disabled) {*/
/*  background: var(--color-primary-hover);*/
/*}*/
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ------------------------------------
   7) Stagger & Hover-Lift für Cards
   ------------------------------------ */
.dashboard .grid > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp .5s ease forwards;
  will-change: opacity, transform;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dashboard .grid > *:nth-child(1) { animation-delay: .1s; }
.dashboard .grid > *:nth-child(2) { animation-delay: .2s; }
.dashboard .grid > *:nth-child(3) { animation-delay: .3s; }
.dashboard .grid > *:nth-child(4) { animation-delay: .4s; }
.dashboard .grid > *:nth-child(5) { animation-delay: .5s; }
.dashboard .grid > *:nth-child(6) { animation-delay: .6s; }
.dashboard .grid > *:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}



.create-btn {
  color: var(--color-on-primary);
}