/* -----------------------------------------------------------------------|
|                                                                         |
| FINAL overwrite ©ImmoSeebörger v3 19.09.2025                            |
|                                                                         |
| RESPONSIVE VISIBILITY SYSTEM  (Devices + Orientation)                   |
|                                                                         |
| DEVICE TOKENS (width-based):                                            |
|   smartphone : (max-width: 428px)                                       |
|   phablet    : (min-width: 429px) and (max-width: 768px)                |
|   tablet     : (min-width: 769px) and (max-width: 1024px)               |
|   desktop    : (min-width: 1025px)                                      |
|                                                                         |
| ORIENTATION:                                                            |
|   portrait  : @media (orientation: portrait)                            |
|   landscape : @media (orientation: landscape)                           |
|                                                                         |
| ATTRIBUTES:                                                             |
|   data-show="token token"          → visible ONLY on those              |
|   data-hide="token token"          → hidden on those                    |
|   data-orientation-show="..."      → ONLY in listed                     |
|   data-orientation-hide="..."      → hidden in listed                   |
|   data-display="flex|inline|grid|inline-block|contents|list-item"       |
|       (restores original display when shown)                            |
|                                                                         |
| COMBINATION LOGIC:                                                      |
|   1. data-show present → start hidden; show on matching device          |
|   2. ohne data-show → sichtbar außer hide/orientation sperrt            |
|   3. data-hide gewinnt innerhalb desselben Breakpoints                  |
|   4. Orientation-Filter nach Gerätelogik:                               |
|      - data-orientation-show: default hidden, zeigt selektiv            |
|      - data-orientation-hide: versteckt in passender Lage               |
|      - Beide → hide gewinnt (Reihenfolge unten)                         |
|   5. Beispiele:                                                         |
|      data-show="tablet desktop" data-hide="desktop"                     |
|        → nur Tablet sichtbar                                            |
|      data-show="tablet desktop" data-orientation-show="landscape"       |
|        → Tablet+Desktop nur landscape                                   |
|      data-hide="smartphone phablet" data-orientation-hide="portrait"    |
|        → Sichtbar Tablet+Desktop nur landscape                          |
|                                                                         |
| NOTES:                                                                  |
|   - ~= Token matching: words seperated by spaces                        |
|   - --_orig-display saves target display (Default is block)             |
|                                                                         |
|----------------------------------------------------------------------- */

/* Any element declaring data-show starts hidden until a matching device MQ reveals it. */
[data-show] {
  --_orig-display: block;
  display: none !important;
}

/* Map optional original display values */
[data-show][data-display="inline"]        { --_orig-display: inline; }
[data-show][data-display="inline-block"]  { --_orig-display: inline-block; }
[data-show][data-display="flex"]          { --_orig-display: flex; }
[data-show][data-display="grid"]          { --_orig-display: grid; }
[data-show][data-display="contents"]      { --_orig-display: contents; }
[data-show][data-display="list-item"]     { --_orig-display: list-item; }

/* Generic utility */
.is-hidden { display: none !important; }

/* Root defaults (desktop as fallback if JS queries this var before MQ evaluation) */
:root {
  --css-devicetype: desktop;
  --css-orientation: portrait;
}

/* Orientation custom property updates (these do not handle visibility; just the variable) */
@media (orientation: landscape) {
  :root { --css-orientation: landscape; }
}
@media (orientation: portrait) {
  :root { --css-orientation: portrait; }
}

/* ------------------------------------------------|
|                                                  |
| DEVICE BREAKPOINTS (SHOW first, then HIDE)       |
|                                                  |
|------------------------------------------------ */

/* SMARTPHONE: 0–428px */
@media (max-width: 428px) {
  :root { --css-devicetype: smartphone; }

  /* SHOW */
  [data-show~="smartphone"] {
    display: var(--_orig-display) !important;
  }

  /* HIDE (wins if both show + hide contain 'smartphone') */
  [data-hide~="smartphone"] {
    display: none !important;
  }
}

/* PHABLET: 429–768px */
@media (min-width: 429px) and (max-width: 768px) {
  :root { --css-devicetype: phablet; }

  [data-show~="phablet"] {
    display: var(--_orig-display) !important;
  }
  [data-hide~="phablet"] {
    display: none !important;
  }
}

/* TABLET: 769–1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --css-devicetype: tablet; }

  [data-show~="tablet"] {
    display: var(--_orig-display) !important;
  }
  [data-hide~="tablet"] {
    display: none !important;
  }
}

/* DESKTOP: 1025px+ */
@media (min-width: 1025px) {
  :root { --css-devicetype: desktop; }

  [data-show~="desktop"] {
    display: var(--_orig-display) !important;
  }
  [data-hide~="desktop"] {
    display: none !important;
  }
}

/* ------------------------------------------------|
|                                                  |
| ORIENTATION FILTERS (apply AFTER device logic)   |
|                                                  |
|------------------------------------------------ */

/* If an element declares orientation-show, hide it by default
   (unless it also used data-show which already hid it; hiding twice is fine). */
[data-orientation-show] {
  /* Only affect elements that are currently visible due to device logic or baseline.
     We simply force them hidden; orientation MQ will re-show if allowed. */
  display: none !important;
}

/* Elements that ONLY have orientation filters (no data-show at all):
   - If they have orientation-show => hidden above already; re-shown in allowed orientation
   - If they only have orientation-hide => remain visible except in hidden orientation */

/* PORTRAIT */
@media (orientation: portrait) {
  /* Show if portrait is explicitly allowed */
  [data-orientation-show~="portrait"] {
    display: var(--_orig-display, block) !important;
  }
  /* Hide if portrait is disallowed */
  [data-orientation-hide~="portrait"] {
    display: none !important;
  }
}

/* LANDSCAPE */
@media (orientation: landscape) {
  [data-orientation-show~="landscape"] {
    display: var(--_orig-display, block) !important;
  }
  [data-orientation-hide~="landscape"] {
    display: none !important;
  }
}

/* --------------------------------------------|
|                                              |
| DEBUG                                        |
|                                              |
|-------------------------------------------- */

/*
[data-show],
[data-hide],
[data-orientation-show],
[data-orientation-hide] {
  outline: 1px dotted rgba(0,0,0,.15);
}
*/