/* ============================================================
   RCT – Rallos Contao Toolbox
   rct-utilities.css v2.0.0
   Design: Clinical Architect / Tech Inspector Aesthetic

   INHALT DIESER DATEI:
   1.  Globale Element-Resets (Ergänzungen zum Reset in rct-layout.css)
   2.  Display / Visibility
   3.  Margins (mt-*, mb-*, inkl. responsive mts-*, mbs-*)
   4.  Paddings (pt-*, pb-*)
   5.  Responsive Hide/Show
   6.  Divider, Tags, Dots
   7.  Skip-Navigation (Barrierefreiheit)
   8.  Print
   ============================================================ */


/* ------------------------------------------------------------
   1. GLOBALE ELEMENT-RESETS
   Ergänzungen zu *, body im rct-layout.css
   ------------------------------------------------------------ */

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ------------------------------------------------------------
   2. DISPLAY / VISIBILITY
   ------------------------------------------------------------ */

.invisible {
  display: none !important;
}


/* ------------------------------------------------------------
   3. MARGINS
   ------------------------------------------------------------ */

/* Desktop-Margins */
.mt-0  { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-70 { margin-top: 70px !important; }
.mt-80 { margin-top: 80px !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-70 { margin-bottom: 70px !important; }
.mb-80 { margin-bottom: 80px !important; }

/* Mobile-Margins (nur aktiv bei ≤ 1024px) */
@media (max-width: 1024px) {
  .mts-0  { margin-top: 0 !important; }
  .mts-10 { margin-top: 10px !important; }
  .mts-20 { margin-top: 20px !important; }
  .mts-30 { margin-top: 30px !important; }
  .mts-40 { margin-top: 40px !important; }
  .mts-50 { margin-top: 50px !important; }
  .mts-60 { margin-top: 60px !important; }
  .mts-70 { margin-top: 70px !important; }
  .mts-80 { margin-top: 80px !important; }

  .mbs-0  { margin-bottom: 0 !important; }
  .mbs-10 { margin-bottom: 10px !important; }
  .mbs-20 { margin-bottom: 20px !important; }
  .mbs-30 { margin-bottom: 30px !important; }
  .mbs-40 { margin-bottom: 40px !important; }
  .mbs-50 { margin-bottom: 50px !important; }
  .mbs-60 { margin-bottom: 60px !important; }
  .mbs-70 { margin-bottom: 70px !important; }
  .mbs-80 { margin-bottom: 80px !important; }
}


/* ------------------------------------------------------------
   4. PADDINGS
   ------------------------------------------------------------ */

.pt-0  { padding-top: 0 !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-60 { padding-top: 60px !important; }
.pt-80 { padding-top: 80px !important; }

.pb-0  { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pb-60 { padding-bottom: 60px !important; }
.pb-80 { padding-bottom: 80px !important; }


/* ------------------------------------------------------------
   5. RESPONSIVE HIDE/SHOW
   ------------------------------------------------------------ */

/* Standardmäßig versteckt (Mobile-First) */
.hide-mobile {
  display: none !important;
}

/* Sichtbar ab Desktop */
@media (min-width: 1025px) {
  .hide-mobile {
    display: block !important;
  }
}


/* ------------------------------------------------------------
   6. TAGS, DOTS
   (.rct-divider lebt jetzt als CE-Klasse in rct-components.css)
   ------------------------------------------------------------ */

.rct-tag {
  display: inline-flex;
  align-items: center;
  background: var(--rct-surface-high);
  font-family: var(--rct-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rct-text-muted);
  padding: 0.2rem 0.6rem;
}

.rct-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
}
.rct-dot-primary   { background: var(--rct-primary); }
.rct-dot-secondary { background: var(--rct-secondary); }
.rct-dot-error     { background: var(--rct-error); }


/* ------------------------------------------------------------
   7. SKIP-NAVIGATION (Barrierefreiheit)
   ------------------------------------------------------------ */

.rct-skip-nav {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rct-skip-nav:focus {
  position: static;
  width: auto;
  height: auto;
}


/* ------------------------------------------------------------
   8. PRINT
   ------------------------------------------------------------ */

@media print {
  #left, #right, #header, .rct-mobile-nav { display: none !important; }
  body.rct-layout-sidebar #container       { margin-left: 0; }
  #main                                    { padding: 0; background: none; }
  .mod_article                             { box-shadow: none; border: 1px solid #ccc; }
}