/* ================== Glonicom – style.css (robuste Phone/Tablet-Erkennung per Klassen) ================== */
/*:root { --build: "2025-09-18_10"; --device: "DESKTOP"; }

 Badges: Build + Device 
body::after{
  content: "BUILD " var(--build);
  position: fixed; right: 8px; bottom: 8px; z-index: 9999;
  font: 12px/1.2 Arial, sans-serif; background: #ffeb3b; color: #000;
  border: 1px solid #0003; padding: 4px 6px; border-radius: 6px; pointer-events: none;
}
body::before{
  content: var(--device);
  position: fixed; right: 8px; bottom: 36px; z-index: 9999;
  font: 12px/1.2 Arial, sans-serif; background: #c8f; color: #000;
  border: 1px solid #0003; padding: 4px 6px; border-radius: 6px; pointer-events: none;
}
*/
/* Reset & Basics */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: auto; min-height: 100%; overflow-x: hidden; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: Arial, sans-serif;
  font-size: clamp(16px, 2.2vh, 18px);
  line-height: 1.5; color: #000; background: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
h1 { margin: 0; font-size: min(5vh, 8vw); }

/* Header / Topbar */
#header { display: flex; flex-direction: column; background: #fff; }
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2vw; padding: 0 2vw; width: 100%; min-height: 12vh; flex-wrap: nowrap;
}
#logo-wrapper, #home-wrapper { display: flex; align-items: center; flex: 0 0 auto; }
#title-wrapper h1{ font-size: clamp(1.8rem, 6vw, 5rem); line-height: 1.1; margin: 0; white-space: normal; text-wrap: balance; }
#topbar h1 { font-size: clamp(18px, 4.5vw, 36px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#logo { height: 6vh; width: auto; display: block; }
#home-icon { height: 6vh; width: auto; display: block; }

/* === Menü-Basis (Desktop bleibt) === */
#menu{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5em 1.2em; padding:.5em 3vw; width:100%; margin:0 auto; text-align:center; }
#menu .item{ display:inline-block; }
#menu .item a{ display:inline-block; font-size:18px; padding:.4em .8em; border:1px solid #ccc; border-radius:.4em; text-decoration:none; color:#008; line-height:1.2; transition:background .2s ease; }
#menu .item:hover a, #menu .item a:focus{ background:rgba(0,0,0,.08); }

/* === TABLET (Touch, Portrait: Breite 600–1024; Landscape: Höhe 600–900) === */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (min-width:600px) and (max-width:1024px),
       (hover:none) and (pointer:coarse) and (orientation:landscape) and (min-height:600px) and (max-height:900px){
  /*body::before{ content:"TABLET"; }*/
  #menu{ gap:.6em 1.2em; padding:.6em 4vw; }
  #menu .item a{ font-size:clamp(20px,2.6vw,20px); padding:.45em .9em; }
}

/* === SMARTPHONE (Touch, Portrait: max-width 599; Landscape: kurze Höhe ≤500) === */
@media (hover:none) and (pointer:coarse) and (max-width:599px),
       (hover:none) and (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  /*body::before{ content:"SMARTPHONE"; }*/
  #menu{ gap:.8em 1.4em; padding:.7em 5vw; }
  #menu .item a{ font-size:clamp(20px,5vw,24px); padding:.55em 1.1em; }
}

/* Container / Content */
#container { background:#fed; padding:4vh 4vw; box-shadow:0 0 .7em 0 rgba(0,0,0,.5); width:100%; }
#content { width:min(80vw, 90ch); margin:0 auto; }
#content p{ font-size:2.5vh; text-align:left; }
#content ul, #content li{ font-size:2.5vh; }
#container h1{ font-size:3vh; }
#container h2{ font-size:2.7vh; }

/* Medien */
img{ width:100%; max-width:100%; height:auto; display:block; margin:2vh auto; }
.produktbild{ width:100%; height:auto; display:block; margin:2vh auto; }
#bild-gedreht{ transform:rotate(90deg); display:block; margin:2vh auto; }
video{ width:100%; height:auto; }
.produktvideo{ width:100%; max-width:70%; height:auto; display:block; margin:2vh auto; }

/* Amazon-Badge klein */
#amazon-badge{ height:4vh; width:auto; display:block; margin:2vh auto 0; }

/* Hörproben */
figure{ display:block; margin:1rem 0 1.5rem; overflow:visible; }
figcaption{ margin:0 0 .5rem; line-height:1.3; }
audio{
  display:block; width:100%; max-width:100%;
  height:auto; margin:.25rem 1.25rem 1.25rem 0;
  padding-bottom:.5rem; line-height:normal; overflow:visible !important;
}
audio::-webkit-media-controls-enclosure{ overflow:visible; }
audio::-webkit-media-controls-panel{ padding-bottom:.35rem; }

/* Download-Link groß */
a.download{
  display:inline-block; font-size:clamp(28px,5.2vw,40px);
  line-height:1.3; padding:.4em .6em;
}

/* Footer */
#footer{
  min-height:15vh; display:flex; gap:1.5em; justify-content:center; align-items:center;
  background:#fff; padding:2vh 2vw; flex-wrap:wrap;
}
#footer a{ color:#008; text-decoration:none; }
#footer a:hover, #footer a:focus{ text-decoration:underline; }

/* ================== MOBILE: Bilder 3× so groß (nur Content) ================== */
@media (max-width:600px){
  #content{ width:100vw !important; max-width:none !important; margin:0 !important; }
  #container{ padding-left:2vw; padding-right:2vw; }
  #content img:not(#amazon-badge), #content .produktbild, #content #agb1, #content #agb2{
    width:300% !important; max-width:none !important; height:auto !important;
    display:block !important; margin:2vh 0 !important;
  }
  html, body, #container, #content{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}