/* Tablet / kleine Bildschirme */
@media (max-width: 768px) {
  /* Layout: Sidebar unter Content, Boxen full-width */
  .page-nav-boxes {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }

  #sidebar #box,
  #content #box {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
  }

  /* Navigation / Select */
  .custom-select {
    width: 100%;
    margin: 8px 0;
  }
  .custom-select select {
    font-size: 12pt;
    padding: 12px;
  }

  /* Header / Bilder */
  #header img {
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Content spacing */
  #content #box {
    padding: 14px;
  }
  #content h1 {
    font-size: 16px;
    letter-spacing: 3px;
  }

  /* Gallery / Showcase */
  .gallery {
    display: inline-flex;
    vertical-align: middle;
    margin: 6px 4px;
    float: none;
  }

  .gallery-item {
    width: 44px;
    height: 44px;
    margin: 4px;
    border-width: 2px;
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  }

  .gallery-item .img-wrap,
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Tooltip: kleiner und etwas höher platzieren */
  .tooltip[data-title]:after {
    font-size: 11px;
    padding: 5px 7px;
    bottom: calc(100% + 6px);
  }
  .tooltip[data-title]:before {
    bottom: calc(100% + 2px);
    border-width: 5px;
  }

  /* DND-Grafiken / Karten */
  .gfx_character {
    width: 100%;
    height: auto;
    margin: 8px 0;
  }
  .gfx_character .gfx_image {
    width: 100%;
    height: auto;
  }
  .gfx_character .gfx_schrift,
  .gfx_character .gfx_schrift2 {
    width: 100%;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 12px;
  }

  /* Chat / Bubbles */
  .chat-container {
    width: 100%;
  }
  .message {
    width: 100%;
    margin: 6px 0;
  }

  /* Buttons / Interaktive Elemente größer für Touch */
  button,
  input[type="submit"],
  .custom-select select {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* Mobile / Phones */
@media (max-width: 480px) {
  html,
  body {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 15px;
  }

  #content h1 {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .gallery-item {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin: 3px;
  }

  .gallery {
    margin: 4px 2px;
  }

  .custom-select select {
    font-size: 11pt;
    padding: 10px;
  }

  /* Reduce visual clutter */
  #content #box::before,
  #content #box::after {
    font-size: 11px;
  }

  .gfx_character {
    height: 180px;
  }
  .gfx_character .gfx_schrift {
    padding: 10px;
    font-size: 11pt;
  }

  /* Tooltip auf sehr kleinen Bildschirmen leicht versetzen */
  .tooltip[data-title]:after {
    bottom: calc(100% + 4px);
    font-size: 10px;
  }
}

/* Utility: Wenn ein Element für Mobile komplett ausgeblendet werden soll */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}

/* Ende Responsive */

/* Tablet / kleine Bildschirme */
@media (max-width: 768px) {
  /* Layout: Spalten stapeln */
  #container {
    flex-direction: column;
    height: auto;
    min-width: 0;
  }

  #header {
    width: 100%;
    height: auto;
    min-height: 160px;
    padding: 14px;
    background-position: center;
    background-size: cover;
  }

  .content-wrapper {
    height: auto;
    max-height: none;
  }

  #content {
    padding: 14px;
  }

  #sidebar {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--color2);
  }

  #sidebar #box,
  #content #box {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
  }

  #footer {
    position: static;
    width: 100%;
    padding: 12px 10px;
    bottom: auto;
    text-align: center;
  }

  .page-nav-container { margin-top: 18px; }

  /* Listen / Spalten reduzieren */
  .co1 { column-count: 1; column-gap: 0; }
  .co2 { column-count: 1; column-gap: 0; }

  /* KV-Grid auf 1 Column */
  .kv { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }

  /* Tabs / Texte */
  ul.tabs li { padding: 8px 6px; margin: 0 6px; font-size: 14px; }
  #content h1 { font-size: 20px; }

  /* Bilder anpassen */
  .img.top { height: auto; max-height: 240px; padding: 8px; }
  .img.left { width: 100%; height: auto; margin: 10px 0; float: none; }

  /* Chat / Bubbles */
  .chat-container { width: 100%; }
  .message { width: 100%; margin: 8px 0; }

  /* Gallery / Showcase */
  .gallery { display: inline-flex; vertical-align: middle; margin: 6px 4px; float: none; }
  .gallery-item { width: 44px; height: 44px; border-width: 2px; border-radius: 6px; margin: 4px; }
  .gallery-item .img-wrap, .gallery-item img { width: 100%; height: 100%; object-fit: cover; }

  /* Tooltip an mobile anpassen */
  .tooltip::after { font-size: 12px; padding: 6px 8px; bottom: calc(100% + 6px); }
  .tooltip::before { border-width: 5px; bottom: calc(100% + 2px); }
}

/* Phones / sehr kleine Bildschirme */
@media (max-width: 480px) {
  html, body { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  #header { min-height: 140px; padding: 12px; }
  #content h1 { font-size: 18px; }

  ul.tabs li { font-size: 13px; padding: 8px; margin: 0 4px; }

  .gallery-item { width: 40px; height: 40px; margin: 3px; }
  .gallery { margin: 4px 2px; }

  .custom-select select { font-size: 12px; padding: 10px; }

  /* Reduce decorative separators on very small screens */
  #content #box::before,
  #content #box::after { font-size: 11px; }

  /* Footer kompakt */
  #footer { font-size: 11px; padding: 10px; }

  /* Buttons / Touchgrößen */
  button, input[type="submit"], .custom-select select { min-height: 44px; }

  /* Sparkle canvas sicherstellen */
  .sparkle-canvas { z-index: 5; pointer-events: none; }

  /* Falls Karten/Grafiken zu groß sind */
  .gfx_character { width: 100%; height: auto; }
  .gfx_character .gfx_image { width: 100%; height: auto; }
}