/**
 * robby.css – Design-System für robby-App (rob.by)
 * Basierend auf briefing.mdc: Primär Orange, Sekundär Violett, Schrift Roboto
 * Mobile-First, Touch-freundlich (min. 44×44px)
 */

/* ========== Design Tokens (CSS Custom Properties) ========== */
:root {
  /* Primärfarben – Orange (briefing: #ff8c00) */
  --robby-primary: #ff8c00;
  --robby-primary-light: #ffa726;
  --robby-primary-dark: #e65100;

  /* Sekundärfarben – Violett (briefing: #cc00cc) */
  --robby-secondary: #cc00cc;
  --robby-secondary-light: #e040fb;
  --robby-secondary-dark: #9c00b0;

  /* Neutrale Farben */
  --robby-white: #ffffff;
  --robby-gray: #dedede;
  --robby-gray-dark: #bdbdbd;
  --robby-text: #505050;
  --robby-text-muted: #808080;
  --robby-text-inverse: #ffffff;
  --robby-bg: #ffffff;
  --robby-bg-alt: #f5f5f5;
  --robby-bg-orange-light: #fff5eb; /* sehr helles Orange für Tabellen-Zeilen */

  /* Typografie – Roboto (briefing) */
  --robby-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --robby-font-size-xs: 0.75rem;
  --robby-font-size-sm: 0.875rem;
  --robby-font-size-base: 1rem;
  --robby-font-size-lg: 1.125rem;
  --robby-font-size-xl: 1.25rem;
  --robby-font-size-2xl: 1.5rem;
  --robby-font-size-3xl: 1.875rem;
  --robby-font-size-4xl: 2.25rem;
  --robby-line-height-tight: 1.25;
  --robby-line-height-base: 1.5;
  --robby-line-height-relaxed: 1.75;

  /* Spacing (8px-Basis) */
  --robby-space-1: 0.25rem;
  --robby-space-2: 0.5rem;
  --robby-space-3: 0.75rem;
  --robby-space-4: 1rem;
  --robby-space-5: 1.25rem;
  --robby-space-6: 1.5rem;
  --robby-space-8: 2rem;
  --robby-space-10: 2.5rem;
  --robby-space-12: 3rem;

  /* Border & Radius */
  --robby-radius-sm: 4px;
  --robby-radius: 8px;
  --robby-radius-lg: 12px;
  --robby-border: 1px solid var(--robby-gray);
  --robby-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --robby-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Touch-Target (min. 44px) */
  --robby-touch-min: 44px;

  /* Transitions */
  --robby-transition: 0.2s ease;

  /* Container: variabel breit, max. 20px Abstand links/rechts */
  --robby-container-gutter: 20px;

  /* Breakpoint ab hier: horizontales Menü */
  --robby-nav-breakpoint: 768px;

  /* Robby-App: fixer Header, scrollbarer Content */
  --robby-app-header-height: 56px;
  --robby-app-search-height: 56px;
}

/* ========== Container ========== */
.robby-container {
  width: 100%;
  max-width: none;
  margin-left: var(--robby-container-gutter);
  margin-right: var(--robby-container-gutter);
  box-sizing: border-box;
}

/* ========== Seite / Layout (kein Inline-CSS) ========== */
.robby-page {
  padding-top: var(--robby-space-8);
  padding-bottom: var(--robby-space-8);
}

.robby-page__header {
  margin-bottom: var(--robby-space-8);
}

.robby-footer {
  margin-top: var(--robby-space-12);
  padding-top: var(--robby-space-8);
  border-top: 1px solid var(--robby-gray);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text-muted);
}

/* ========== Base / Reset ========== */
.robby,
.robby * {
  box-sizing: border-box;
}

.robby {
  font-family: var(--robby-font-family);
  font-size: var(--robby-font-size-base);
  line-height: var(--robby-line-height-base);
  color: var(--robby-text);
  background-color: var(--robby-bg);
}

/* ========== Typografie ========== */
.robby h1, .robby .robby-heading--1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: var(--robby-line-height-tight);
  color: var(--robby-primary-dark);
  margin: 0 0 var(--robby-space-4);
}

.robby h2, .robby .robby-heading--2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--robby-primary);
  margin: 1.5rem 0 0.875rem; /* 24px / 14px */
}

.robby h3, .robby .robby-heading--3 {
  font-size: var(--robby-font-size-2xl);
  font-weight: 600;
  margin: 1.25rem 0 0.625rem; /* 20px / 10px */
}

.robby h4, .robby .robby-heading--4 {
  font-size: var(--robby-font-size-xl);
  font-weight: 600;
  margin: var(--robby-space-4) 0 var(--robby-space-2);
}

.robby h5, .robby .robby-heading--5 {
  font-size: var(--robby-font-size-lg);
  font-weight: 600;
  margin: var(--robby-space-3) 0 var(--robby-space-2);
}

.robby h6, .robby .robby-heading--6 {
  font-size: var(--robby-font-size-base);
  font-weight: 600;
  margin: var(--robby-space-2) 0;
}

.robby p {
  margin: 0 0 var(--robby-space-4);
  color: var(--robby-text);
}

.robby .robby-text--muted {
  color: var(--robby-text-muted);
}

.robby .robby-text--small {
  font-size: var(--robby-font-size-sm);
}

.robby .robby-text--large {
  font-size: var(--robby-font-size-lg);
}

.robby a {
  color: var(--robby-primary);
  text-decoration: none;
  transition: color var(--robby-transition);
}

.robby a:hover {
  color: var(--robby-primary-dark);
  text-decoration: underline;
}

.robby strong {
  font-weight: 700;
}

.robby em {
  font-style: italic;
}

.robby code, .robby .robby-code {
  font-family: 'Roboto Mono', Consolas, monospace;
  font-size: var(--robby-font-size-sm);
  background: var(--robby-gray);
  padding: var(--robby-space-1) var(--robby-space-2);
  border-radius: var(--robby-radius-sm);
}

.robby pre {
  background: var(--robby-bg-alt);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  padding: var(--robby-space-4);
  overflow-x: auto;
  margin: 0 0 var(--robby-space-4);
}

.robby pre code {
  background: none;
  padding: 0;
}

.robby blockquote {
  margin: 0 0 var(--robby-space-4);
  padding-left: var(--robby-space-4);
  border-left: 4px solid var(--robby-primary);
  color: var(--robby-text-muted);
}

.robby ul, .robby ol {
  margin: 0 0 var(--robby-space-4);
  padding-left: var(--robby-space-6);
}

.robby li {
  margin-bottom: var(--robby-space-2);
}

/* ========== Buttons ========== */
.robby .robby-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--robby-touch-min);
  min-width: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-4);
  font-family: var(--robby-font-family);
  font-size: var(--robby-font-size-base);
  font-weight: 500;
  line-height: 1;
  border: none;
  border-radius: var(--robby-radius);
  cursor: pointer;
  transition: background-color var(--robby-transition), color var(--robby-transition), box-shadow var(--robby-transition);
}

.robby .robby-btn:focus {
  outline: 2px solid var(--robby-primary);
  outline-offset: 2px;
}

.robby .robby-btn--primary {
  background-color: var(--robby-primary);
  color: var(--robby-text-inverse);
}

.robby .robby-btn--primary:hover {
  background-color: var(--robby-primary-dark);
}

.robby .robby-btn--secondary {
  background-color: var(--robby-secondary);
  color: var(--robby-text-inverse);
}

.robby .robby-btn--secondary:hover {
  background-color: var(--robby-secondary-dark);
}

.robby .robby-btn--outline {
  background-color: transparent;
  color: var(--robby-primary);
  border: 2px solid var(--robby-primary);
}

.robby .robby-btn--outline:hover {
  background-color: var(--robby-primary);
  color: var(--robby-text-inverse);
}

.robby .robby-btn--ghost {
  background-color: transparent;
  color: var(--robby-text);
}

.robby .robby-btn--ghost:hover {
  background-color: var(--robby-gray);
}

.robby .robby-btn--small {
  min-height: 36px;
  padding: var(--robby-space-2) var(--robby-space-3);
  font-size: var(--robby-font-size-sm);
}

.robby .robby-btn--large {
  min-height: 52px;
  padding: var(--robby-space-3) var(--robby-space-6);
  font-size: var(--robby-font-size-lg);
}

.robby .robby-btn:disabled,
.robby .robby-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== Formulare ========== */
.robby .robby-label {
  display: block;
  font-size: var(--robby-font-size-sm);
  font-weight: 500;
  margin-bottom: var(--robby-space-2);
  color: var(--robby-text);
}

.robby .robby-input,
.robby .robby-textarea,
.robby .robby-select {
  width: 100%;
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-4);
  font-family: var(--robby-font-family);
  font-size: var(--robby-font-size-base);
  color: var(--robby-text);
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  transition: border-color var(--robby-transition), box-shadow var(--robby-transition);
}

.robby .robby-input:focus,
.robby .robby-textarea:focus,
.robby .robby-select:focus {
  outline: none;
  border-color: var(--robby-primary);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}

.robby .robby-input::placeholder,
.robby .robby-textarea::placeholder {
  color: var(--robby-text-muted);
}

.robby .robby-textarea {
  min-height: 120px;
  resize: vertical;
}

.robby .robby-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23808080' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--robby-space-4) center;
  padding-right: 2.5rem;
}

.robby .robby-form-group {
  margin-bottom: var(--robby-space-4);
}

/* Checkbox & Radio */
.robby .robby-checkbox,
.robby .robby-radio {
  display: flex;
  align-items: center;
  gap: var(--robby-space-3);
  min-height: var(--robby-touch-min);
  cursor: pointer;
}

.robby .robby-checkbox input,
.robby .robby-radio input {
  width: 22px;
  height: 22px;
  accent-color: var(--robby-primary);
  cursor: pointer;
}

/* ========== Cards ========== */
.robby .robby-card {
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius-lg);
  box-shadow: var(--robby-shadow);
  overflow: hidden;
  transition: box-shadow var(--robby-transition);
}

.robby .robby-card:hover {
  box-shadow: var(--robby-shadow-lg);
}

.robby .robby-card__header {
  padding: var(--robby-space-4);
  border-bottom: var(--robby-border);
  font-weight: 600;
  font-size: var(--robby-font-size-lg);
}

.robby .robby-card__body {
  padding: var(--robby-space-4);
}

.robby .robby-card__footer {
  padding: var(--robby-space-4);
  border-top: var(--robby-border);
  background: var(--robby-bg-alt);
}

/* ========== Badges / Tags ========== */
.robby .robby-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--robby-space-1) var(--robby-space-3);
  font-size: var(--robby-font-size-sm);
  font-weight: 500;
  border-radius: 999px;
}

.robby .robby-badge--primary {
  background: var(--robby-primary);
  color: var(--robby-text-inverse);
}

.robby .robby-badge--secondary {
  background: var(--robby-secondary);
  color: var(--robby-text-inverse);
}

.robby .robby-badge--neutral {
  background: var(--robby-gray);
  color: var(--robby-text);
}

.robby .robby-badge--outline {
  background: transparent;
  border: 1px solid var(--robby-primary);
  color: var(--robby-primary);
}

/* ========== Alerts / Hinweise ========== */
.robby .robby-alert {
  padding: var(--robby-space-4);
  border-radius: var(--robby-radius);
  border-left: 4px solid;
  margin-bottom: var(--robby-space-4);
}

.robby .robby-alert--info {
  background: #e3f2fd;
  border-color: var(--robby-primary);
  color: var(--robby-primary-dark);
}

.robby .robby-alert--success {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}

.robby .robby-alert--warning {
  background: #fff3e0;
  border-color: var(--robby-primary);
  color: var(--robby-primary-dark);
}

.robby .robby-alert--error {
  background: #ffebee;
  border-color: #c62828;
  color: #b71c1c;
}

/* ========== Navigation / Tabs ========== */
.robby .robby-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--robby-gray);
  margin-bottom: var(--robby-space-4);
}

.robby .robby-tabs__item {
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-4);
  font-weight: 500;
  color: var(--robby-text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--robby-transition), border-color var(--robby-transition);
}

.robby .robby-tabs__item:hover {
  color: var(--robby-text);
}

.robby .robby-tabs__item[aria-selected="true"] {
  color: var(--robby-primary);
  border-bottom-color: var(--robby-primary);
}

/* ========== Tabellen ========== */
.robby .robby-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--robby-font-size-sm);
}

.robby .robby-table th,
.robby .robby-table td {
  padding: var(--robby-space-2) var(--robby-space-3);
  text-align: left;
  border-bottom: var(--robby-border);
}

.robby .robby-table th {
  font-weight: 600;
  background: var(--robby-bg-orange-light);
  color: var(--robby-secondary);
}

.robby .robby-table tbody tr:nth-child(odd) td {
  background: var(--robby-bg);
}

.robby .robby-table tbody tr:nth-child(even) td {
  background: var(--robby-bg-orange-light);
}

.robby .robby-table tbody tr:hover td {
  background: var(--robby-gray);
}

/* ========== Listen (List-Groups) ========== */
.robby .robby-list-group {
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  overflow: hidden;
}

.robby .robby-list-group__item {
  padding: var(--robby-space-4);
  border-bottom: var(--robby-border);
  min-height: var(--robby-touch-min);
  display: flex;
  align-items: center;
}

.robby .robby-list-group__item:last-child {
  border-bottom: none;
}

.robby .robby-list-group__item:hover {
  background: var(--robby-bg-alt);
}

/* ========== Breadcrumbs ========== */
.robby .robby-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--robby-space-2);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text-muted);
  margin-bottom: var(--robby-space-4);
}

.robby .robby-breadcrumb__sep {
  color: var(--robby-gray-dark);
}

.robby .robby-breadcrumb a {
  color: var(--robby-text-muted);
}

.robby .robby-breadcrumb a:hover {
  color: var(--robby-primary);
}

/* ========== Divider ========== */
.robby .robby-divider {
  height: 1px;
  background: var(--robby-gray);
  margin: var(--robby-space-4) 0;
  border: none;
}

/* ========== Styleguide-Helfer ========== */
/* Styleguide: Abschnitts-Menü – horizontal, responsiv mit Hamburger */
.robby .robby-sg-nav {
  margin-bottom: var(--robby-space-8);
  padding: var(--robby-space-4);
  background: var(--robby-bg-alt);
  border-radius: var(--robby-radius);
  border: var(--robby-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--robby-space-4);
}

.robby .robby-sg-nav__title {
  font-size: var(--robby-font-size-sm);
  font-weight: 600;
  color: var(--robby-text-muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hamburger-Button (3 Balken) – nur unter Breakpoint sichtbar */
.robby .robby-sg-nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--robby-touch-min);
  min-width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  padding: 0;
  background: transparent;
  border: var(--robby-border);
  border-radius: var(--robby-radius-sm);
  cursor: pointer;
  color: var(--robby-text);
  transition: background-color var(--robby-transition), border-color var(--robby-transition);
}

.robby .robby-sg-nav__burger:hover {
  background: var(--robby-gray);
}

.robby .robby-sg-nav__burger:focus {
  outline: 2px solid var(--robby-primary);
  outline-offset: 2px;
}

.robby .robby-sg-nav__burger span {
  display: block;
  width: 22px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--robby-transition), opacity var(--robby-transition);
}

.robby .robby-sg-nav--open .robby-sg-nav__burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.robby .robby-sg-nav--open .robby-sg-nav__burger span:nth-child(2) {
  opacity: 0;
}

.robby .robby-sg-nav--open .robby-sg-nav__burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (min-width: 768px) {
  .robby .robby-sg-nav__burger {
    display: none;
  }
}

/* Wenn Hamburger sichtbar: Hover über Nav zeigt Menüauswahl (anklickbar) */
@media (max-width: 767px) {
  .robby .robby-sg-nav:hover .robby-sg-nav__list {
    display: flex;
  }
}

/* Liste: unter Breakpoint eingeklappt, darüber horizontal */
.robby .robby-sg-nav__list {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--robby-space-4) 0 0;
  gap: 0;
  width: 100%;
  border-top: var(--robby-border);
}

.robby .robby-sg-nav--open .robby-sg-nav__list {
  display: flex;
}

@media (min-width: 768px) {
  .robby .robby-sg-nav__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    padding: 0;
    gap: var(--robby-space-2);
    border-top: none;
  }
}

.robby .robby-sg-nav__list a {
  display: block;
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-3);
  font-size: var(--robby-font-size-sm);
  font-weight: 500;
  color: var(--robby-text);
  text-decoration: none;
  border-radius: var(--robby-radius-sm);
  transition: background-color var(--robby-transition), color var(--robby-transition);
}

.robby .robby-sg-nav__list a:hover {
  background: var(--robby-gray);
  color: var(--robby-primary);
}

.robby .robby-sg-nav__list a:focus {
  outline: 2px solid var(--robby-primary);
  outline-offset: 2px;
}

.robby .robby-sg-section {
  margin-bottom: var(--robby-space-12);
}

.robby .robby-sg-title {
  font-size: var(--robby-font-size-2xl);
  font-weight: 700;
  color: var(--robby-primary);
  margin-bottom: var(--robby-space-2);
  padding-bottom: var(--robby-space-2);
  border-bottom: 2px solid var(--robby-gray);
}

.robby .robby-sg-subtitle {
  font-size: var(--robby-font-size-lg);
  font-weight: 600;
  margin: var(--robby-space-6) 0 var(--robby-space-2);
}

.robby .robby-sg-typo-size {
  font-size: var(--robby-font-size-sm);
  font-weight: 400;
  color: var(--robby-text-muted);
}

.robby .robby-sg-demo {
  padding: var(--robby-space-4);
  background: var(--robby-bg-alt);
  border-radius: var(--robby-radius);
  margin-bottom: var(--robby-space-4);
}

.robby .robby-sg-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--robby-space-4);
  margin-bottom: var(--robby-space-4);
}

.robby .robby-sg-swatch {
  width: 80px;
  height: 80px;
  border-radius: var(--robby-radius);
  border: var(--robby-border);
  box-shadow: var(--robby-shadow);
}

.robby .robby-sg-swatch--primary { background-color: #ff8c00; }
.robby .robby-sg-swatch--secondary { background-color: #cc00cc; }
.robby .robby-sg-swatch--white { background-color: #ffffff; border: 1px solid #ddd; }
.robby .robby-sg-swatch--gray { background-color: #dedede; }
.robby .robby-sg-swatch--text { background-color: #505050; }
.robby .robby-sg-swatch--text-muted { background-color: #808080; }

.robby .robby-sg-demo .robby-card {
  max-width: 360px;
}

.robby .robby-sg-swatch-label {
  font-size: var(--robby-font-size-xs);
  margin-top: var(--robby-space-2);
  text-align: center;
}

/* ========== Images-Seite (/images.php) ========== */
.robby .robby-img-section {
  margin-bottom: var(--robby-space-12);
}

.robby .robby-img-section h2 {
  margin-bottom: var(--robby-space-4);
}

.robby .robby-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--robby-space-4);
}

/* Icons: fest 4 Spalten horizontal */
.robby .robby-img-grid--4col {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
  .robby .robby-img-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.robby .robby-img-item {
  margin: 0;
  padding: var(--robby-space-3);
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  box-shadow: var(--robby-shadow);
}

.robby .robby-img-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin-bottom: var(--robby-space-2);
}

.robby .robby-img-item__thumb img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.robby .robby-img-item__caption {
  font-size: var(--robby-font-size-xs);
  color: var(--robby-text-muted);
  word-break: break-all;
  line-height: var(--robby-line-height-base);
}

@media (min-width: 576px) {
  .robby .robby-img-grid:not(.robby-img-grid--4col) {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .robby .robby-img-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
  .robby .robby-img-item__thumb {
    min-height: 100px;
  }
  .robby .robby-img-item__thumb img {
    max-height: 100px;
  }
}

/* ========== Robby-App (index.php) ========== */
.robby-app {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--robby-app-header-height);
  padding-bottom: var(--robby-app-search-height);
  box-sizing: border-box;
}

.robby-app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-shrink: 0;
  padding: var(--robby-space-2) 0;
  background: var(--robby-bg);
  border-bottom: var(--robby-border);
}

.robby-app-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--robby-space-4);
  max-width: 100%;
  margin-left: var(--robby-container-gutter);
  margin-right: var(--robby-container-gutter);
}

.robby-app-header__left {
  display: flex;
  align-items: center;
  gap: var(--robby-space-2);
  min-width: 0;
  justify-content: flex-start;
}

.robby-app-header-datetime {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--robby-text-muted, #666);
  white-space: nowrap;
}

/* Padding unten = unsichtbare Hover-Brücke, damit Maus vertikal zum Dropdown kann */
.robby-app-lang-wrap {
  position: relative;
  min-width: 0;
  padding-bottom: 4px;
}

.robby-app-lang-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--robby-touch-min);
  min-width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  padding: 0;
  background: transparent;
  border: var(--robby-border);
  border-radius: var(--robby-radius-sm);
  cursor: pointer;
  transition: box-shadow var(--robby-transition), background-color var(--robby-transition);
}

.robby-app-lang-trigger:hover {
  background: var(--robby-gray);
}

.robby-app-lang-trigger:focus {
  outline: 2px solid var(--robby-primary);
  outline-offset: 2px;
}

.robby-app-lang-trigger img {
  display: block;
  width: 24px;
  height: 18px;
  object-fit: cover;
}

.robby-app-lang-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  min-width: 180px;
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  box-shadow: var(--robby-shadow-lg);
  z-index: 100;
  padding: var(--robby-space-2);
  display: none;
  flex-direction: column;
  gap: var(--robby-space-1);
}

.robby-app-lang-wrap:hover .robby-app-lang-dropdown {
  display: flex;
}

.robby-app-lang-flag {
  display: flex;
  align-items: center;
  gap: var(--robby-space-3);
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-3);
  border-radius: var(--robby-radius-sm);
  text-decoration: none;
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
  transition: background-color var(--robby-transition), color var(--robby-transition);
}

.robby-app-lang-flag:hover {
  background: var(--robby-gray);
  color: var(--robby-primary);
}

.robby-app-lang-flag--active {
  box-shadow: 0 0 0 2px var(--robby-primary);
  font-weight: 600;
}

.robby-app-lang-flag img {
  display: block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  flex-shrink: 0;
}

.robby-app-header__logo {
  flex-shrink: 0;
}

.robby-app-logo-link {
  display: block;
}

.robby-app-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* Padding unten = Hover-Brücke zum Menü (vertikal runterfahren) */
.robby-app-header__nav-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--robby-space-2);
  padding-bottom: 4px;
}

.robby-app-user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--robby-touch-min);
  min-height: var(--robby-touch-min);
  flex-shrink: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

button.robby-app-user-icon:hover {
  opacity: 0.85;
}

.robby-app-user-icon img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.robby-app-user-icon--avatar img,
.robby-app-user-icon--avatar .robby-app-user-icon__img {
  border-radius: 50%;
  object-fit: cover;
}

.robby-app-user-icon--login:hover {
  opacity: 0.85;
}

.robby-app-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--robby-touch-min);
  min-width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  padding: 0;
  background: transparent;
  border: var(--robby-border);
  border-radius: var(--robby-radius-sm);
  cursor: pointer;
  color: var(--robby-text);
}

.robby-app-burger:hover {
  background: var(--robby-gray);
}

.robby-app-burger span {
  display: block;
  width: 22px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.robby-app-nav {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0;
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  box-shadow: var(--robby-shadow-lg);
  z-index: 100;
  display: none;
}

.robby-app-header__nav-wrap:hover .robby-app-nav {
  display: block;
}

.robby-app-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--robby-space-2);
}

.robby-app-nav__link {
  display: block;
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-4);
  font-weight: 500;
  color: var(--robby-text);
  text-decoration: none;
  border-radius: var(--robby-radius-sm);
}

.robby-app-nav__link:hover {
  background: var(--robby-gray);
  color: var(--robby-primary);
}

.robby-app-content {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100vw;
  max-height: calc(100vh - var(--robby-app-header-height) - var(--robby-app-search-height));
  padding: var(--robby-space-4) 5px var(--robby-space-12);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.robby-app-content .robby-container,
.robby-app-content .robby-app-content-inner {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
}

/* Max. 5px Abstand vom rechten/linken Rand (Content-Bereich) */
.robby-app-content .robby-container {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

.robby-app-entry {
  display: block;
  margin-bottom: var(--robby-space-8);
}

.robby-app-entry__headline {
  font-size: var(--robby-font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--robby-space-2);
  color: var(--robby-primary-dark);
}

.robby-app-entry__meta {
  display: block;
  font-size: var(--robby-font-size-sm);
  font-weight: 500;
  color: var(--robby-text-muted);
  margin-bottom: var(--robby-space-1);
}

.robby-app-entry__media {
  margin-bottom: var(--robby-space-3);
  border-radius: var(--robby-radius);
  overflow: hidden;
  background: var(--robby-bg-alt);
}

.robby-app-entry__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
}

.robby-app-entry__text {
  margin: 0;
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
  line-height: var(--robby-line-height-base);
}

/* Events-Tabelle (Todo 008) */
.robby-events-wrap {
  width: 100%;
  max-width: calc(100vw - 10px);
  min-width: 0;
  overflow-x: auto;
  box-sizing: border-box;
}

.robby-events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--robby-font-size-sm);
}

.robby-events-th,
.robby-events-td {
  padding: var(--robby-space-2) 3px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--robby-border);
}

.robby-events-th {
  font-weight: 600;
  color: var(--robby-secondary, #666);
  background: rgba(255, 152, 0, 0.06);
}

.robby-events-tr:nth-child(even) .robby-events-td {
  background: rgba(255, 152, 0, 0.06);
}

.robby-events-th--icon,
.robby-events-td--icon {
  width: 24px;
  min-width: 24px;
  text-align: center;
}

.robby-events-th--icon .robby-events-analog-clock,
.robby-events-td--icon .robby-events-category-icon,
.robby-events-td--icon .robby-events-analog-clock {
  max-height: 24px;
  height: 24px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.robby-events-th--icon .robby-events-analog-clock .robby-analog-clock-svg,
.robby-events-td--icon .robby-events-analog-clock .robby-analog-clock-svg {
  width: 24px;
  height: 24px;
}

.robby-soccer-title {
  margin: 0 0 var(--robby-space-4);
  font-size: var(--robby-font-size-xl);
  font-weight: 600;
}

.robby-soccer-wer-was-wo {
  display: inline-block;
}

.robby-soccer-wer-was-wo__league {
  font-weight: 600;
}

.robby-soccer-wer-was-wo__sep {
  margin: 0 var(--robby-space-1);
  color: var(--robby-gray, #666);
}

.robby-soccer-wer-was-wo__match {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--robby-space-1);
}

.robby-soccer-wer-was-wo__icon {
  vertical-align: middle;
  flex-shrink: 0;
}

.robby-soccer-wer-was-wo__vs {
  margin: 0 var(--robby-space-1);
  color: var(--robby-gray, #666);
}

/* Todo 017: Teams-Subscription-Spalte (Alarm/Checkbox) */
.robby-teams-subscription-checkbox {
  display: inline-block;
  vertical-align: middle;
}
.robby-teams-subscription-checkbox--checked {
  accent-color: #080;
  cursor: default;
}

/* Subscriptions: aktivierte Checkbox gleiche Größe wie Delete-Icon (24px), magenta */
.robby-subscriptions-push-toggle .robby-teams-subscription-checkbox--checked {
  display: inline-block;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 2px solid magenta;
  background: rgba(255, 0, 255, 0.15);
  border-radius: 2px;
  color: magenta;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: none;
}
.robby-subscriptions-push-toggle .robby-teams-subscription-checkbox--checked::after {
  content: "✓";
}
.robby-teams-subscription-checkbox--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.robby-teams-checkbox-empty {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #666;
  border-radius: 2px;
  background: #fff;
  box-sizing: border-box;
}
.robby-teams-checkbox-empty--disabled {
  border-color: #ccc;
  background: var(--robby-bg, #f5f5f5);
  cursor: default;
}

.robby-subscriptions-push-toggle {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.robby-subscriptions-push-toggle:hover {
  opacity: 0.85;
}
.robby-subscriptions-push-toggle .robby-teams-checkbox-empty.robby-subscriptions-push-toggle--off {
  cursor: pointer;
  border-color: #666;
  pointer-events: none;
}

/* Subscriptions: Edit/Delete ohne Rand und grauen Hintergrund */
.robby-subscriptions-td--actions .robby-subscriptions-action {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.robby-subscriptions-td--actions .robby-subscriptions-action:hover {
  background: transparent;
  opacity: 0.85;
}

.robby-subscriptions-alarmzeit--sent {
  color: var(--robby-success-text, #0a5f0a);
  font-weight: 500;
}

.robby-soccer-th-vs,
.robby-soccer-td-vs {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.robby-events-td--place {
  display: block;
}

.robby-events-td--place .robby-events-flag {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--robby-space-1);
}

.robby-events-th--km,
.robby-events-td--km {
  text-align: right;
  font-size: calc(1em - 1pt);
}

.robby-events-td--km-magenta { color: magenta; }
.robby-events-td--km-red { color: #c00; }
.robby-events-td--km-orange { color: var(--robby-primary, #f80); }
.robby-events-td--km-green { color: #080; }

.robby-events-td--place > span {
  display: inline;
}

.robby-events-place-content {
  flex: 1;
  min-width: 0;
}

.robby-events-place-map {
  flex-shrink: 0;
  display: inline-flex;
  line-height: 0;
}

.robby-events-analog-clock {
  display: inline-block;
  max-width: 24px;
  max-height: 24px;
  color: magenta;
}

.robby-analog-clock-svg {
  display: block;
}

.robby-events-analog-clock .robby-analog-clock-svg circle,
.robby-events-analog-clock .robby-analog-clock-svg line {
  stroke: magenta;
  stroke-width: 2.5px;
}

.robby-events-analog-clock .robby-analog-clock-svg line[id="robby-clock-sec"] {
  stroke-width: 1.5px;
}

.robby-events-category-icon,
.robby-events-flag {
  display: inline-block;
  vertical-align: middle;
}

.robby-events-flag {
  margin-right: var(--robby-space-1);
}

.robby-events-td--beginn {
  min-width: 11rem;
}

.robby-events-beginn-line {
  display: inline-block;
  white-space: nowrap;
}

.robby-events-beginn-line .robby-event-date {
  display: inline;
  margin-right: var(--robby-space-1);
}

.robby-events-beginn-line .robby-event-time {
  margin-right: var(--robby-space-1);
}

.robby-events-beginn-map {
  display: inline-flex;
  vertical-align: middle;
}

/* Vertikales Mobil-Layout: Content-Tabelle und Abstände (max. 5px Rand) */
@media (max-width: 767px) {
  .robby.robby-app .robby-app-content .robby-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .robby.robby-app .robby-events-table .robby-events-th,
  .robby.robby-app .robby-events-table .robby-events-td {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  .robby.robby-app .robby-events-table th:first-child,
  .robby.robby-app .robby-events-table td.robby-events-td--icon {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }
  .robby.robby-app .robby-events-table th:nth-child(2),
  .robby.robby-app .robby-events-table td.robby-events-td--beginn {
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

.robby-event-date {
  font-weight: 600;
}

.robby-event-date--red {
  color: #c62828;
}

.robby-event-date--orange {
  color: #e65100;
}

.robby-event-date--green {
  color: #2e7d32;
}

.robby-event-time {
  font-size: 0.875em;
  color: var(--robby-text-muted, #666);
}

.robby-events-td--title {
  font-weight: 500;
}

.robby-events-map-link {
  display: inline-flex;
}

.robby-events-map-link img {
  display: block;
}

.robby-events-map-empty {
  color: var(--robby-text-muted, #999);
}

.robby-events-provider-link {
  color: var(--robby-primary);
  text-decoration: none;
}

.robby-events-provider-link:hover {
  text-decoration: underline;
}

.robby-events-td--empty {
  text-align: center;
  color: var(--robby-text-muted, #999);
  font-style: italic;
}

.robby-events-pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--robby-space-4);
  margin-top: var(--robby-space-6);
  padding: var(--robby-space-4) 0;
}

.robby-events-pagination__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--robby-space-2) var(--robby-space-4);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text-muted, #666);
}

.robby-events-pagination__count {
  font-weight: 600;
  color: var(--robby-text);
}

.robby-events-pagination__range {
  color: var(--robby-text-muted, #666);
}

.robby-events-pagination__nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--robby-space-2) var(--robby-space-4);
}

.robby-events-pagination__link {
  display: inline-flex;
}

.robby-events-pagination__link:hover {
  opacity: 0.85;
}

.robby-events-pagination__placeholder {
  display: inline-block;
  width: 36px;
  height: 36px;
}

.robby-events-pagination__numbers {
  display: inline-flex;
  align-items: center;
  gap: var(--robby-space-1);
}

.robby-events-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  padding: 0;
  font-size: var(--robby-font-size-sm);
  font-weight: 600;
  color: var(--robby-primary);
  text-decoration: none;
  border: var(--robby-border);
  border-radius: var(--robby-radius-sm);
  background: var(--robby-bg);
  transition: background-color var(--robby-transition), color var(--robby-transition), border-color var(--robby-transition);
}

.robby-events-pagination__num:hover {
  background: var(--robby-gray);
  color: var(--robby-primary);
}

.robby-events-pagination__num--current {
  color: var(--robby-bg);
  background: var(--robby-primary);
  border-color: var(--robby-primary);
  cursor: default;
}

.robby-teams-filter {
  margin-bottom: var(--robby-space-2);
  gap: var(--robby-space-2);
}
.robby-teams-filter__label {
  font-weight: 600;
  color: var(--robby-text-muted, #666);
  margin-right: var(--robby-space-1);
}
/* Spezifisch: Liga-Filter-Buttons (Magenta) – überschreibt .robby a */
nav.robby-teams-filter .robby-teams-filter__link,
.robby-teams-filter .robby-teams-filter__link {
  display: inline-block;
  padding: var(--robby-space-1) var(--robby-space-2);
  border-radius: var(--robby-radius-sm);
  background: var(--robby-gray);
  color: #ff00ff !important;
  font-weight: bold;
  text-decoration: none;
  transition: background-color var(--robby-transition), color var(--robby-transition);
}
.robby-teams-filter .robby-teams-filter__link:hover {
  background: var(--robby-primary);
  color: var(--robby-bg) !important;
}
.robby-teams-filter .robby-teams-filter__link--active {
  background: var(--robby-primary);
  color: var(--robby-bg) !important;
}

.robby-app-search {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--robby-space-2) var(--robby-container-gutter);
  background: var(--robby-bg);
  border-top: var(--robby-border);
}

.robby-app-search__form {
  display: flex;
  align-items: center;
  gap: var(--robby-space-2);
  max-width: 100%;
}

/* Padding oben = Hover-Brücke zum Dropdown (vertikal rauffahren) */
.robby-app-search-channel {
  position: relative;
  flex-shrink: 0;
  padding-top: 4px;
}

.robby-app-search-channel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  border-radius: var(--robby-radius-sm);
  transition: background-color var(--robby-transition);
}

.robby-app-search-channel__icon:hover {
  background: var(--robby-gray);
}

.robby-app-search-channel__icon img {
  display: block;
  width: 36px;
  height: 36px;
}

.robby-app-search-channel__dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0;
  min-width: 140px;
  background: var(--robby-bg);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  box-shadow: var(--robby-shadow-lg);
  z-index: 60;
  padding: var(--robby-space-2);
  display: none;
  flex-direction: column;
  gap: var(--robby-space-1);
}

.robby-app-search-channel:hover .robby-app-search-channel__dropdown {
  display: flex;
}

.robby-app-search-channel__hr {
  margin: var(--robby-space-2) 0;
  border: 0;
  border-top: 1px solid var(--robby-gray);
  flex-shrink: 0;
}

.robby-app-search-channel__item {
  display: flex;
  align-items: center;
  gap: var(--robby-space-3);
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-3);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
  text-decoration: none;
  border-radius: var(--robby-radius-sm);
  transition: background-color var(--robby-transition), color var(--robby-transition);
}

.robby-app-search-channel__item:hover {
  background: var(--robby-gray);
  color: var(--robby-primary);
}

.robby-app-search-channel__item--active {
  background: var(--robby-gray);
  color: var(--robby-primary);
  font-weight: 600;
}

.robby-app-search-channel__item img {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.robby-app-search__input {
  flex: 1;
  min-width: 0;
  min-height: var(--robby-touch-min);
  padding: var(--robby-space-2) var(--robby-space-4);
  font-family: var(--robby-font-family);
  font-size: var(--robby-font-size-base);
  border: var(--robby-border);
  border-radius: var(--robby-radius);
  background: var(--robby-bg);
  color: var(--robby-text);
}

.robby-app-search__input--location {
  flex: 1;
  min-width: 0;
}

.robby-app-search__form .robby-app-search__input:not(.robby-app-search__input--location) {
  flex: 3;
}

.robby-app-search__input:focus {
  outline: none;
  border-color: var(--robby-primary);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}

.robby-app-search__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--robby-text);
}

.robby-app-search__btn:hover {
  color: var(--robby-primary);
}

.robby-app-search__btn img {
  display: block;
  width: 36px;
  height: 36px;
}

.robby-search-msg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  background: var(--robby-primary, #1976d2);
  color: #fff;
  font-size: 0.875rem;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.robby-search-msg--visible {
  opacity: 1;
  visibility: visible;
}

.robby-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Modal (About) */
.robby-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--robby-space-4);
}

.robby-modal[hidden] {
  display: none;
}

.robby-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.robby-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  min-width: 280px;
  min-height: 200px;
  overflow: auto;
  resize: both;
  background: var(--robby-bg);
  border-radius: var(--robby-radius-lg);
  box-shadow: var(--robby-shadow-lg);
  padding: var(--robby-space-8);
}

.robby-modal__close {
  position: absolute;
  top: var(--robby-space-2);
  right: var(--robby-space-2);
  width: var(--robby-touch-min);
  height: var(--robby-touch-min);
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--robby-text-muted);
}

.robby-modal__close:hover {
  color: var(--robby-text);
}

.robby-modal__body {
  padding-top: var(--robby-space-4);
}

.robby-modal__body--profile {
  padding-top: 0;
}

.robby-modal__body--profile .robby-user__table-wrap {
  width: 100%;
  box-sizing: border-box;
}

.robby-modal__body--profile .robby-user__table {
  table-layout: fixed;
  width: 100%;
}

.robby-modal__body--profile .robby-user__th {
  width: 38%;
  max-width: 12em;
}

.robby-modal__body--profile .robby-user__td {
  width: 62%;
  padding-left: var(--robby-space-3);
  padding-right: var(--robby-space-3);
}

.robby-modal__body--profile .robby-user__td .robby-form-input,
.robby-modal__body--profile .robby-user__td .robby-form-textarea,
.robby-modal__body--profile .robby-user__td select.robby-form-input {
  width: 100%;
  box-sizing: border-box;
}

.robby-login-spacer {
  margin-top: 20px;
}

.robby-login-actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.robby-btn--gray {
  background-color: var(--robby-gray, #dedede);
  color: var(--robby-text, #505050);
}

.robby-btn--gray:hover {
  background-color: var(--robby-gray-dark, #bdbdbd);
}

.robby-modal--doc .robby-modal__dialog {
  max-width: 36rem;
}

.robby-modal__body--doc .robby-doc-modal-content {
  padding: 0;
}

body.robby-modal-open {
  overflow: hidden;
}

.robby-user__title {
  margin: 0 0 var(--robby-space-4);
  padding: 0;
  font-size: var(--robby-font-size-2xl);
  color: var(--robby-primary);
}

.robby-user .robby-user__title:first-child {
  margin-top: 0;
}

.robby-user__subtitle {
  margin: 0 0 var(--robby-space-4);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text-muted);
}

.robby-user__message {
  margin-bottom: var(--robby-space-4);
  padding: 0.75rem;
  border-radius: var(--robby-radius);
  font-size: var(--robby-font-size-sm);
}
.robby-user__message--success {
  background: var(--robby-success-bg, #d4edda);
  color: var(--robby-success-text, #155724);
  border: 1px solid var(--robby-success-border, #c3e6cb);
}
.robby-user__message--error {
  background: var(--robby-error-bg, #f8d7da);
  color: var(--robby-error-text, #721c24);
  border: 1px solid var(--robby-error-border, #f5c6cb);
}
.robby-user .robby-form-message--success {
  background: var(--robby-success-bg, #d4edda);
  color: var(--robby-success-text, #155724);
  border: 1px solid var(--robby-success-border, #c3e6cb);
}
.robby-user .robby-form-message--error {
  background: var(--robby-error-bg, #f8d7da);
  color: var(--robby-error-text, #721c24);
  border: 1px solid var(--robby-error-border, #f5c6cb);
}

.robby-user__actions {
  margin-top: var(--robby-space-4);
  padding-top: var(--robby-space-4);
  border-top: 1px solid var(--robby-gray);
}
.robby-user__actions .robby-btn-primary {
  padding: 0.5rem 1.25rem;
  font-size: var(--robby-font-size-sm);
  font-family: inherit;
  background: var(--robby-primary);
  color: var(--robby-text-inverse, #fff);
  border: none;
  border-radius: var(--robby-radius);
  cursor: pointer;
}
.robby-user__actions .robby-btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}
.robby-user__actions .robby-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.robby-user__td .robby-form-input,
.robby-user__td .robby-form-textarea,
.robby-user__td select.robby-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--robby-font-size-sm);
  font-family: inherit;
  border: 1px solid var(--robby-gray);
  border-radius: var(--robby-radius);
  background: var(--robby-bg-primary);
  color: var(--robby-text);
  box-sizing: border-box;
}
.robby-user__td .robby-form-textarea {
  min-height: 4rem;
  resize: vertical;
}
.robby-user__td .robby-btn-primary {
  padding: 0.5rem 1.25rem;
  font-size: var(--robby-font-size-sm);
  font-family: inherit;
  background: var(--robby-primary);
  color: var(--robby-text-inverse, #fff);
  border: none;
  border-radius: var(--robby-radius);
  cursor: pointer;
}
.robby-user__td .robby-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.robby-user__avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--robby-space-4);
  margin-bottom: var(--robby-space-4);
}

.robby-user__avatar-img-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--robby-gray);
  background: var(--robby-bg-alt);
  flex-shrink: 0;
}

.robby-user__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.robby-user__avatar-img--fallback {
  object-fit: contain;
  padding: var(--robby-space-2);
}

.robby-user__upload-form {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.robby-user__file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.robby-user__upload-btn {
  display: inline-block;
  padding: var(--robby-space-2) var(--robby-space-4);
  font-size: var(--robby-font-size-sm);
  font-family: var(--robby-font-family);
  color: var(--robby-primary);
  background: transparent;
  border: 1px solid var(--robby-primary);
  border-radius: var(--robby-radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.robby-user__upload-btn:hover {
  background: var(--robby-primary);
  color: var(--robby-text-inverse);
}

.robby-user__geo {
  margin-top: var(--robby-space-4);
  padding-top: var(--robby-space-4);
  border-top: 1px solid var(--robby-gray);
}

.robby-user__geo-label {
  display: flex;
  align-items: center;
  gap: var(--robby-space-2);
  cursor: pointer;
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
}

.robby-user__geo-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--robby-primary);
}

.robby-user__geo-text {
  flex: 1;
}

.robby-user__geo-coords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--robby-space-2);
  margin-top: var(--robby-space-2);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
}

.robby-user__geo-coords-text {
  flex: 1;
}

.robby-user__geo-coords-empty {
  color: var(--robby-text-muted);
  font-style: italic;
}

.robby-user__geo-map-link {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.robby-user__geo-map-link:hover {
  opacity: 0.85;
}

.robby-user__geo-map-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.robby-user__geo-request-btn {
  flex-shrink: 0;
  padding: var(--robby-space-2) var(--robby-space-3);
  font-size: var(--robby-font-size-sm);
  font-family: var(--robby-font-family);
  color: var(--robby-primary);
  background: transparent;
  border: 1px solid var(--robby-primary);
  border-radius: var(--robby-radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.robby-user__geo-request-btn:hover:not(:disabled) {
  background: var(--robby-primary);
  color: var(--robby-text-inverse);
}

.robby-user__geo-request-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.robby-user__geo-error {
  flex-basis: 100%;
  display: block;
  margin-top: var(--robby-space-2);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-primary-dark);
}

.robby-user__geo-error[hidden] {
  display: none;
}

.robby-user__error {
  margin: 0;
  color: var(--robby-primary-dark);
  font-size: var(--robby-font-size-sm);
}

.robby-user__caption {
  font-weight: 600;
  text-align: left;
  padding-bottom: var(--robby-space-2);
  color: var(--robby-text-muted);
}

.robby-user__heading-2 {
  font-size: 1.1rem;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
  color: var(--robby-primary);
}

.robby-user__muted {
  color: var(--robby-text-muted);
  font-size: var(--robby-font-size-sm);
  margin: 0.5rem 0;
}

.robby-dashboard-downline-wrap {
  margin-top: var(--robby-space-4);
}

.robby-user__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--robby-gray);
  border-radius: var(--robby-radius);
}

.robby-user__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--robby-font-size-sm);
}

.robby-user__row {
  border-bottom: 1px solid var(--robby-gray);
}

.robby-user__row:last-child {
  border-bottom: 0;
}

.robby-user__th {
  text-align: left;
  padding: var(--robby-space-2) var(--robby-space-3);
  font-weight: 600;
  color: var(--robby-text-muted);
  background: var(--robby-bg-alt);
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
}

.robby-user__td {
  padding: var(--robby-space-2) var(--robby-space-3);
  color: var(--robby-text);
  vertical-align: top;
}

.robby-about__title {
  margin: 0 0 var(--robby-space-4);
  font-size: var(--robby-font-size-2xl);
  color: var(--robby-primary);
}

.robby-about__company,
.robby-about__address,
.robby-about__legal,
.robby-about__links {
  margin: 0 0 var(--robby-space-4);
  font-size: var(--robby-font-size-sm);
  color: var(--robby-text);
}

.robby-about__links a {
  color: var(--robby-primary);
}

/* ========== Responsive ========== */
@media (min-width: 768px) {
  .robby h1, .robby .robby-heading--1 {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .robby .robby-btn,
  .robby a {
    transition: none;
  }
}

/* Doc pages (imprint, privacy, terms, help, faq) */
.robby-doc-page {
  padding: var(--robby-space-4, 1rem);
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
.robby-doc-block {
  margin-top: 1.5rem;
}
.robby-doc-back {
  margin-top: 2rem;
}
.robby-heading--2 {
  font-size: 1.25rem;
  margin: 0 0 var(--robby-space-2, 0.5rem);
}
.robby-faq-q {
  margin-top: 0.5rem;
}
.robby-faq-a {
  margin-left: 0;
  margin-bottom: 0.5rem;
}

/* Contact / Recommend modal forms (Todo 027) */
.robby-doc-modal-content .robby-content-title {
  margin: 0 0 var(--robby-space-2, 0.5rem);
  font-size: 1.25rem;
}
.robby-doc-modal-content .robby-form-row {
  margin-bottom: var(--robby-space-4, 1rem);
}
.robby-doc-modal-content .robby-form-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--robby-font-size-sm, 0.875rem);
}
.robby-doc-modal-content .robby-form-input,
.robby-doc-modal-content .robby-form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--robby-gray, #ccc);
  border-radius: var(--robby-radius, 6px);
  background: var(--robby-bg-primary, #fff);
  color: var(--robby-text-primary, #111);
  box-sizing: border-box;
}
.robby-doc-modal-content .robby-form-textarea {
  min-height: 4rem;
  resize: vertical;
}
.robby-doc-modal-content .robby-form-required {
  color: var(--robby-error, #c00);
}
.robby-doc-modal-content .robby-form-message {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: var(--robby-radius, 6px);
  font-size: var(--robby-font-size-sm, 0.875rem);
}
.robby-doc-modal-content .robby-form-message--success {
  background: var(--robby-success-bg, #d4edda);
  color: var(--robby-success-text, #155724);
  border: 1px solid var(--robby-success-border, #c3e6cb);
}
.robby-doc-modal-content .robby-form-message--error {
  background: var(--robby-error-bg, #f8d7da);
  color: var(--robby-error-text, #721c24);
  border: 1px solid var(--robby-error-border, #f5c6cb);
}
.robby-doc-modal-content .robby-btn-primary {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--robby-primary, #06c);
  color: #fff;
  border: none;
  border-radius: var(--robby-radius, 6px);
  cursor: pointer;
}
.robby-doc-modal-content .robby-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}