/* === Headly Global — Mobile Optimization Addendum (safe, non-destructive) === */
:root{
  --hg-container-pad: clamp(12px, 3vw, 24px);
}
img, video, canvas, svg, iframe, embed { max-width: 100%; height: auto; }
table { display: block; width: 100%; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
body { -webkit-text-size-adjust: 100%; overflow-wrap: anywhere; }
section, header, footer, main { padding-left: var(--hg-container-pad); padding-right: var(--hg-container-pad); }
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0.1); }
@media (max-width: 768px) {
  h1 { font-size: clamp(1.6rem, 6.2vw, 2.5rem); line-height: 1.15; }
  h2 { font-size: clamp(1.35rem, 5.4vw, 2.0rem); line-height: 1.2; }
  h3 { font-size: clamp(1.2rem, 4.6vw, 1.6rem); line-height: 1.25; }
  .btn, .button, button { padding: 0.8em 1.1em; }
  .grid { grid-template-columns: 1fr !important; gap: clamp(12px, 3vw, 20px); }
  .row { flex-wrap: wrap; gap: clamp(12px, 3vw, 20px); }
}
* { min-width: 0; }
.flex, .row, .grid, .container { min-width: 0; }
.responsive-embed, .map, .video {
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.responsive-embed iframe, .map iframe, .video iframe {
  position: absolute; top:0; left:0; width:100%; height:100%;
}


/* Helper utility classes */
.hidden{ display:none !important; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Header & menu behavior */
#menuBtn{ display:none; align-items:center; justify-content:center; }
.mnav{ display:none; background:var(--surface); border-top:1px solid var(--border); }
@media (max-width: 1024px){
  .site-header .nav-links{ display:none !important; } /* hide desktop links on mobile */
  #menuBtn{ display:inline-flex; }
  .mnav{ display:block; }
  .mnav.hidden{ display:none !important; }
  .header .container{ justify-content:space-between !important; }
  /* keep brand/logo from shrinking too small */
  .brand img{ max-height: 40px; height:auto; width:auto; }
  /* prevent long link text wrap jitter */
  .mnav a{ display:block; padding:.7rem 1rem; }
}

/* Avoid any accidental vertical writing for theme toggle labels */
[aria-label="Switch to dark mode"] span,
[aria-label="Switch to light mode"] span{
  display:none; /* icon-only on mobile */
}
@media (min-width:1025px){
  [aria-label="Switch to dark mode"] span,
  [aria-label="Switch to light mode"] span{ display:inline; }
}


/* --- Reinforcements for stubborn styles --- */
.header{ position: sticky; top:0; z-index: 10000; }
.header .nav.site-header{ background: transparent !important; }
button[aria-label*="dark mode"] .sr-only,
button[aria-label*="light mode"] .sr-only{ 
  display: none !important;
}
button[aria-label*="dark mode"] span,
button[aria-label*="light mode"] span{
  display:none !important; 
  writing-mode: horizontal-tb !important; 
  white-space: nowrap !important;
}
/* Hide any standalone element that literally says Toggle theme (belt-and-suspenders) */
*:where(:not(script,style)) { }
@media (max-width: 1024px){
  .site-header .nav-links,
  nav.site-header .nav-links{ display:none !important; visibility:hidden !important; }
  #menuBtn{ display:inline-flex !important; }
  .mnav{ display:block !important; }
  .mnav.hidden{ display:none !important; }
}


/* --- Header polish (mobile) --- */
@media (max-width: 1024px){
  .header .container{
    display:flex;
    align-items:center;
    justify-content:space-between !important;
    gap: 10px;
    padding: .6rem .9rem !important;
  }
  .brand img{ max-height: 44px; width:auto; height:auto; }

  /* Compact the utility cluster (theme, language, menu) */
  .header .btn.ghost,
  .header [id="menuBtn"]{
    display:inline-flex !important;
    align-items:center; justify-content:center;
    height: 42px; min-width: 42px;
    padding: 0 .9rem;
    border-radius: 12px;
    backdrop-filter: saturate(120%) blur(8px);
  }
  /* Language pill look consistent */
  .header a.btn.ghost{ line-height: 42px; }

  /* Hide clock text on mobile to avoid wrap; if it's only text, hide entirely */
  #clock{ display:none !important; }

  /* Ensure elements order: logo | (spacer) | theme, language, menu */
  .brand{ order:1 }
  button[aria-label*="dark mode"], button[aria-label*="light mode"]{ order: 2 }
  .header a.btn.ghost[href*="/de/"], .header a.btn.ghost{ order: 3 }
  #menuBtn{ order: 4 }
}

/* Slight drop shadow when scrolled */
.header.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.18) }


/* === Cookie banner hardening (mobile & desktop) === */
[class*="cookie"], [id*="cookie"], [class*="consent"], [id*="consent"]{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
}
@media (max-width: 1024px){
  /* Force common cookie widgets into a bottom bar */
  [class*="cookie"], [id*="cookie"], [class*="consent"], [id*="consent"]{
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    transform: none !important; rotate: 0deg !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 70vh !important;
    overflow: auto !important;
    z-index: 999999 !important;
    margin: 0 !important; padding: 12px 16px !important;
    border-radius: 12px 12px 0 0 !important;
    background: var(--surface, rgba(17,17,17,.95)) !important;
    color: var(--text, #eef2ff) !important;
  }
  /* Make buttons reachable; cover common library classes */
  .cc-btn, .cky-btn, .cm-btn, .cli_action_button, .iubenda-cs-accept-btn, .iubenda-cs-reject-btn, button[class*="cookie"], a[class*="cookie"]{
    display: inline-flex !important; align-items:center; justify-content:center;
    min-height: 44px; padding: .6rem 1rem; margin: .3rem .4rem 0 0;
    border-radius: 10px; border: 1px solid var(--ring, rgba(125,125,125,.35));
    text-decoration: none !important;
  }
  .cc-allow, .cky-btn-accept, .cm-btn-accept, .cli_action_button.cli_accept_all{
    background: var(--brand, #ef4444) !important; color: #fff !important; border-color: transparent !important;
  }
  .cc-deny, .cky-btn-reject, .cm-btn-reject, .cli_action_button.cli_reject_all{
    background: transparent !important; color: #cbd5e1 !important;
  }
  /* If there is a preferences/settings link, keep it visible */
  .cookie-prefs{ position: fixed; right: 12px; bottom: 12px; z-index: 1000000; }
}

/* Guard against accidental vertical typesetting anywhere */
[class*="cookie"] *, [id*="cookie"] *, [class*="consent"] *, [id*="consent"] *{
  writing-mode: horizontal-tb !important;
}


/* Minor spacing tweak for the header cluster */
@media (max-width:1024px){
  .header .container{ gap: 8px !important; }
  .header .btn.ghost, #menuBtn{ min-width: 42px; }
}


/* === Generic anti-vertical-text guard (covers inline styles) === */
@media (max-width: 1024px){
  [style*="writing-mode"], [style*="vertical-rl"], [style*="vertical-lr"],
  [style*="transform:rotate"], [style*="transform: rotate"]{
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  /* Prevent one-letter-per-line behavior */
  [class*="cookie"], [id*="cookie"], [class*="consent"], [id*="consent"],
  [role*="dialog"], [aria-label*="cookie"], [aria-label*="consent"]{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  /* Safety: left edge vertical column seen on screenshots */
  body > div:first-child:has([class*="cookie"], [id*="cookie"], [class*="consent"], [id*="consent"]) {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
  /* Cookie preferences link */
  .cookie-prefs, .cookie-prefs *{
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}


/* Final cookie preferences fix */
@media (max-width:1024px){
  .cookie-prefs{ position: fixed !important; inset: auto 12px 12px auto !important; }
  .cookie-prefs a{ display:inline-block !important; writing-mode: horizontal-tb !important; transform:none !important; }
  /* If any cookie text appears as a vertical ribbon at the left edge, hide it */
  body > *:first-child > a.subtle.small{ 
    writing-mode: horizontal-tb !important; transform:none !important; display:none !important;
  }
}


/* Keep logo pinned left on mobile */
@media (max-width:1024px){
  .header .container{ justify-content:space-between !important; }
  .header .brand{ margin-right:auto !important; }
}


/* Force brand left, utilities right on mobile & desktop */
.header .container{ display:flex; align-items:center; }
.header .brand{ margin-right:auto !important; }
.header .nav, .header .btn, .header #menuBtn{ margin-left:.5rem; }

/* Hide the small "Cookie preferences" link entirely on mobile to avoid any stray rendering */
@media (max-width: 1024px){
  .cookie-prefs, .cookie-prefs *{ display:none !important; }
}