/* ==========================================================================
   WABI SABI (侘寂) - WABISABI.CAT - ZENTRALE STYLE.CSS (INKL. GALERIE & LIGHTBOX)
   - Sauber getrennte Architektur (wie bei Yuki)
   - 100dvh + fixed Footer: Untere Leiste auf dem iPad/Tablet immer sichtbar!
   - Scroll-Freigabe (body.page-scrollable) für Unterseiten wie main.html
   - Komplettes Responsive-Design für die Barcelona/Marimurtra/Boqueria-Galerie
   - Hamburger-Menü für Tablet/Hochformat & schmale Bildschirme integriert
   - SVG-Schärfe-Filter (#wabisabi-sharpen) + Kontrast/Sättigung für das Video
   - 84px Prüfsiegel unten rechts über der Kante zwischen Schwarz & Weiß
   - Alle 9 Willkommens-Wolken komplett gleich (keine gelbe/dunkle Hervorhebung!)
   - WCAG 2.2 AA / EN 301 549 (V4.1.1): 44x44px Klickflächen, klare Fokus-Ringe
   Development: Confirmation Bias – CEO & Founder: Angelika Keussen
   ========================================================================== */

:root {
  --font-scale: 1;
  --gold: #FFAF33;
  --bar-bg: #080808;
  --bar-border: #222222;

  /* Stilisierte, sanft geschwungene Wolken-Form als SVG für alle 9 Sprach-Wölkchen */
  --wabisabi-cloud-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 88' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='cGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23222832' stop-opacity='0.46'/%3E%3Cstop offset='100%25' stop-color='%230c0f14' stop-opacity='0.54'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 44,76 C 18,76 6,62 11,45 C 14,32 27,25 41,28 C 49,13 70,6 92,13 C 107,4 136,4 152,14 C 171,6 198,11 208,27 C 228,24 248,35 250,51 C 252,66 237,76 214,76 Z' fill='url(%23cGrad)' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  font-family: 'Segoe UI', 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #0e1014;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  user-select: none;
}

/* Erlaubt sanftes Scrollen auf Unterseiten (main.html etc.) */
body.page-scrollable,
html:has(body.page-scrollable) {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: text;
}

/* ==========================================================================
   WCAG AAA SKIP-LINK
   ========================================================================== */
.skip-link,
#skip-link {
  position: fixed;
  top: -120px;
  left: 1.5rem;
  z-index: 9999;
  background: #080808 !important;
  color: #F3FF33 !important;
  border: 2px solid #F3FF33 !important;
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible,
#skip-link:focus,
#skip-link:focus-visible {
  top: 0.5rem;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ==========================================================================
   SCHMALE SCHWARZE KOPFLEISTE OBEN (INKL. A11Y, 9 SPRACHEN & HAMBURGER)
   ========================================================================== */
header.top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: 52px;
  padding: 4px 20px;
  background-color: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  flex-shrink: 0;
}

.controls-left {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.a11y-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  background: #121212;
}

.a11y-bar button,
.a11y-bar a.a11y-skip-btn {
  background: none;
  border: none;
  color: #e5e5e5;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.a11y-bar a.a11y-skip-btn {
  color: #33FFF3;
  border-right: 1px solid #333;
  padding-right: 10px;
}

.a11y-bar button:hover,
.a11y-bar button.active,
.a11y-bar a.a11y-skip-btn:hover {
  color: #F3FF33;
  transform: scale(1.06);
}

.a11y-bar button.stop-btn {
  color: #FF5733;
  border-left: 1px solid #333;
  padding-left: 10px;
}

/* ==========================================================================
   ECHTES VERTIKALES SPRACH-DROPDOWN (NACH UNTEN!) - 9 SPRACHEN
   ========================================================================== */
.lang-switcher {
  position: relative;
  width: 82px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 100;
}

.lang-switcher > button {
  background: #121212;
  border: 1px solid #333333;
  color: #e5e5e5;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  width: 82px;
  min-width: 82px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switcher > button.active {
  display: inline-flex;
  color: #F3FF33;
  border-color: #FFAF33;
}

.lang-switcher > button.active::after {
  content: "▾";
  font-size: 0.75rem;
  color: #FFAF33;
}

.lang-switcher.open,
.lang-switcher:hover {
  display: block !important;
  position: relative !important;
  width: 82px !important;
  height: 44px !important;
  overflow: visible !important;
}

.lang-switcher.open > button,
.lang-switcher:hover > button {
  display: flex !important;
  width: 82px !important;
  min-width: 82px !important;
  height: 38px !important;
  min-height: 38px !important;
  background: #0b0b0b !important;
  border-left: 1.5px solid #FFAF33 !important;
  border-right: 1.5px solid #FFAF33 !important;
  border-top: none !important;
  border-bottom: 1px solid #222222 !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 120 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.95) !important;
}

.lang-switcher.open > button:first-child,
.lang-switcher:hover > button:first-child {
  border-top: 1.5px solid #FFAF33 !important;
  border-radius: 12px 12px 0 0 !important;
}

.lang-switcher.open > button:last-child,
.lang-switcher:hover > button:last-child {
  border-bottom: 1.5px solid #FFAF33 !important;
  border-radius: 0 0 12px 12px !important;
}

.lang-switcher.open > button:hover,
.lang-switcher:hover > button:hover {
  background: #FFAF33 !important;
  color: #080808 !important;
}

/* ==========================================================================
   HAUPTNAVIGATION RECHTS OBEN & HAMBURGER-BUTTON
   ========================================================================== */
.wabi-hamburger {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: #121212;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  padding: 0 1rem;
  min-height: 44px;
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 110;
}

.wabi-hamburger:hover,
.wabi-hamburger[aria-expanded="true"] {
  background: var(--gold);
  color: #080808;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.top-nav-right a {
  color: #e5e5e5;
  text-decoration: none;
  font-size: calc(0.86rem * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  min-height: 44px;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.top-nav-right a.active,
.top-nav-right a:hover {
  color: var(--gold);
}

/* Fokus-Ringe für Tastaturbedienung (WCAG 2.2) */
button:focus-visible,
a:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid #F3FF33 !important;
  outline-offset: 4px !important;
}

/* ==========================================================================
   HAUPTBÜHNE (INDEX.HTML): HINTERGRUNDVIDEO & 100 % DURCHSICHTIGE PORTAL-BOX
   ========================================================================== */
main.hero-section {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.2vh 20px 64px 20px;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  filter: url(#wabisabi-sharpen) contrast(1.07) saturate(1.12);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  pointer-events: none;
}

a.portal-box {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 780px;
  width: 100%;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 22px;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.3s ease;
}

a.portal-box:hover,
a.portal-box:focus-visible {
  transform: translateY(-2px);
}

body.high-contrast a.portal-box {
  background: rgba(0, 0, 0, 0.92) !important;
  border: 3px solid #F3FF33 !important;
}

.bunter-text {
  font-family: 'Arial Black', 'Segoe UI Black', 'Arial', sans-serif;
  font-size: calc(3.1rem * var(--font-scale));
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.05;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* Deine 8 Original-Farben für WABI SABI */
.bunter-text span:nth-child(1) { color: #FF5733; } /* W */
.bunter-text span:nth-child(2) { color: #33FF57; } /* A */
.bunter-text span:nth-child(3) { color: #3357FF; } /* B */
.bunter-text span:nth-child(4) { color: #F3FF33; } /* I */
.bunter-text span:nth-child(5) { color: #FF33F3; } /* S */
.bunter-text span:nth-child(6) { color: #33FFF3; } /* A */
.bunter-text span:nth-child(7) { color: #FFAF33; } /* B */
.bunter-text span:nth-child(8) { color: #AF33FF; } /* I */

/* ==========================================================================
   STILISIERTE WÖLKCHEN (ALLE 9 KOMPLETT GLEICH)
   ========================================================================== */
.wabern-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem 0.95rem;
  width: 100%;
}

.wabern-word {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-size: calc(0.98rem * var(--font-scale));
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  padding: 0.62rem 1.35rem 0.56rem 1.35rem;
  background-color: transparent !important;
  background-image: var(--wabisabi-cloud-svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  border: none !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.32));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.9);
  animation: cloud-drift var(--dur, 6.5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transition: transform 0.3s ease, filter 0.3s ease;
}

a.portal-box:hover .wabern-word {
  filter: drop-shadow(0 5px 14px rgba(255, 255, 255, 0.35));
}

body.high-contrast .wabern-word {
  background-image: none !important;
  background-color: #000000 !important;
  border: 2px solid #ffffff !important;
  border-radius: 999px;
}

@keyframes cloud-drift {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  33% { transform: translate(var(--dx, 6px), var(--dy, -4px)) rotate(var(--rot, 0.5deg)); }
  66% { transform: translate(calc(var(--dx, 6px) * -0.75), calc(var(--dy, -4px) * -0.65)) rotate(calc(var(--rot, 0.5deg) * -1)); }
  100% { transform: translate(calc(var(--dx, 6px) * 0.45), var(--dy, -4px)) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wabern-word { animation: none !important; }
}

/* ==========================================================================
   GALERIE-SEITE (MAIN.HTML): BARCELONA, JARDÍ MARIMURTRA & LA BOQUERIA
   ========================================================================== */
main.gallery-page {
  flex: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6.5rem 1.5rem;
}

.gallery-hero {
  margin-bottom: 2rem;
}

.gallery-title {
  font-size: calc(2.6rem * var(--font-scale));
  margin-bottom: 0.6rem;
}

.gallery-subtitle {
  max-width: 820px;
  margin: 0 auto 1.4rem auto;
  color: #d6dde6;
  font-size: calc(1.06rem * var(--font-scale));
  line-height: 1.55;
}

.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.gal-tab {
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid #333a45;
  background: #141820;
  color: #e5e5e5;
  font-size: calc(0.92rem * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
}

.gal-tab:hover,
.gal-tab.active {
  background: var(--gold);
  color: #080808;
  border-color: var(--gold);
  transform: translateY(-2px);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  text-align: left;
}

.gal-card {
  background: #141821;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.gal-card:hover,
.gal-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 175, 51, 0.22);
}

body.high-contrast .gal-card {
  background: #000000 !important;
  border: 2px solid #F3FF33 !important;
}

.gal-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #090b0e;
  overflow: hidden;
}

.gal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.gal-card:hover .gal-img {
  transform: scale(1.04);
}

.gal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: rgba(8, 10, 14, 0.82);
  color: #F3FF33;
  border: 1px solid rgba(255, 175, 51, 0.55);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: calc(0.76rem * var(--font-scale));
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.gal-body {
  padding: 1.05rem 1.2rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.gal-card-title {
  color: var(--gold);
  font-size: calc(1.08rem * var(--font-scale));
  font-weight: 800;
  line-height: 1.3;
}

.gal-card-text {
  color: #e2e7ee;
  font-size: calc(0.94rem * var(--font-scale));
  line-height: 1.55;
}

/* ==========================================================================
   LIGHTBOX-GROSSANSICHT MIT VORLESE-BUTTON
   ========================================================================== */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(4, 6, 10, 0.92);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-box {
  background: #0e1117;
  border: 2px solid var(--gold);
  border-radius: 20px;
  max-width: 980px;
  width: 100%;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.95);
}

.lightbox-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #252b36;
}

.lightbox-top .gal-badge {
  position: static;
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--gold);
  background: #161a22;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
}

.lb-btn:hover {
  background: var(--gold);
  color: #080808;
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070a;
  max-height: 62dvh;
  overflow: hidden;
}

.lightbox-img {
  max-width: 100%;
  max-height: 62dvh;
  object-fit: contain;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: rgba(8, 10, 14, 0.82);
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
}

.lb-prev { left: 14px; }
.lb-next { right: 14px; }

.lb-nav:hover {
  background: var(--gold);
  color: #080808;
}

.lightbox-caption-box {
  padding: 14px 22px 18px 22px;
  text-align: left;
  border-top: 1px solid #252b36;
}

.lb-title {
  color: var(--gold);
  font-size: calc(1.2rem * var(--font-scale));
  margin-bottom: 6px;
}

.lb-caption {
  color: #e6ebf2;
  font-size: calc(1rem * var(--font-scale));
  line-height: 1.55;
}

/* ==========================================================================
   SCHMALE SCHWARZE FUSSLEISTE UNTEN (FIXED -> AUF TABLET IMMER SICHTBAR!)
   ========================================================================== */
footer.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 35;
  padding: 4px 130px 4px 20px;
  min-height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px 20px;
  font-size: calc(0.92rem * var(--font-scale));
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  background-color: var(--bar-bg);
  border-top: 1px solid var(--bar-border);
}

.footer-left {
  color: #999999;
  font-size: calc(0.84rem * var(--font-scale));
  font-weight: 600;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px 20px;
  margin: 0 auto;
}

footer button.legal-trigger {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

footer button.legal-trigger:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.link-legal { color: #FF5733; }
.link-priv  { color: #33FF57; }
.link-a11y  { color: #33FFF3; }

.divider {
  color: #a8a296;
  font-weight: 400;
  user-select: none;
}

body.high-contrast .divider {
  color: #ffff00 !important;
}
/* PRÜFSIEGEL UNTEN RECHTS IN DER ECKE: RAGEND ÜBER SCHWARZ UND WEISS */
.seal-link {
  position: fixed;
  bottom: 8px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.seal-link:hover,
.seal-link:focus-visible {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 0 14px rgba(255, 175, 51, 0.65));
}

.seal-img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: #080808;
  border: 2px solid #FFAF33;
  object-fit: contain;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   BARRIEREFREIES RECHTSTEXT- & A11Y-MODAL
   ========================================================================== */
.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: left;
  user-select: text;
}

.legal-modal.active {
  display: flex;
}

.legal-box {
  background: #0e0e0e;
  border: 2px solid #FFAF33;
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.95);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #2a2a2a;
}

.legal-title {
  color: #FFAF33;
  font-size: 1.25rem;
  font-weight: 700;
}

.legal-close {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid #FFAF33;
  background: #161616;
  color: #FFAF33;
  font-weight: 700;
  cursor: pointer;
}

.legal-close:hover {
  background: #FFAF33;
  color: #080808;
}

.legal-body {
  padding: 20px 24px;
  overflow-y: auto;
  line-height: 1.65;
  color: #e0e0e0;
  font-size: calc(0.95rem * var(--font-scale));
}

.legal-body h2 {
  color: #33FFF3;
  font-size: 1.05rem;
  margin: 14px 0 6px 0;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  margin-bottom: 10px;
}

.legal-body a {
  color: #FFAF33;
}

/* ==========================================================================
   TABLET HOCHFORMAT (iPAD PORTRAIT) & SCHMALE BILDSCHIRME (bis 1100px)
   ========================================================================== */
@media (max-width: 1100px), (orientation: portrait) {
  .bg-video {
    object-position: 64% center;
  }

  .wabi-hamburger {
    display: inline-flex !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }

  .top-nav-right {
    display: none !important;
    position: absolute;
    top: calc(100% + 4px);
    right: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 230px;
    padding: 0.75rem 1rem;
    background: rgba(8, 10, 14, 0.96);
    border: 1.5px solid var(--gold);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.95);
    z-index: 120;
  }

  .top-nav-right.nav-open {
    display: flex !important;
  }

  .top-nav-right a {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .top-nav-right a:last-child {
    border-bottom: none;
  }
}

@media (max-width: 820px), (orientation: portrait) {
  footer.bottom-bar {
    padding: 4px 100px 4px 14px;
  }
  .footer-left {
    display: none;
  }
  .footer-links {
    gap: 6px 14px;
  }
  .seal-link {
    right: 12px;
    bottom: 6px;
  }
  .seal-img {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 680px) {
  main.hero-section { padding-top: 1.5vh; }
  a.portal-box { padding: 0.4rem 0.6rem; }
  .bunter-text { font-size: calc(2.15rem * var(--font-scale)); margin-bottom: 0.45rem; }
  .wabern-word { font-size: calc(0.86rem * var(--font-scale)); padding: 0.48rem 1rem; }
  header.top-bar { padding: 4px 10px; }
  footer.bottom-bar { padding-right: 78px; font-size: calc(0.82rem * var(--font-scale)); }
  .seal-img { width: 62px; height: 62px; }
}
/* ==========================================================================
   HELLE KATALANISCHE NATURSTEINMAUER (PEDRA SECA) FÜR ALLE UNTERSEITEN
   Sauber im Stylesheet verankert (Startseite behält den Kinolook)
   ========================================================================== */
/* ==========================================================================
   HELLE KATALANISCHE NATURSTEINMAUER & WCAG 2.2 / EN 301 549 v4.1.1 ABSICHERUNG
   ========================================================================== */
:root {
  --catalan-stone-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Crect width='320' height='200' fill='%231c1713'/%3E%3Cg stroke='%23181310' stroke-width='4.5' stroke-linejoin='round'%3E%3Cpath d='M4 4 L96 6 L92 48 L6 46 Z' fill='%23483c32'/%3E%3Cpath d='M102 5 L214 3 L208 49 L98 48 Z' fill='%23544538'/%3E%3Cpath d='M220 4 L316 6 L314 47 L214 49 Z' fill='%233f352c'/%3E%3Cpath d='M4 53 L64 54 L60 98 L4 96 Z' fill='%2357483b'/%3E%3Cpath d='M70 54 L168 52 L172 97 L66 99 Z' fill='%2342372e'/%3E%3Cpath d='M178 53 L268 51 L262 98 L176 97 Z' fill='%234f4135'/%3E%3Cpath d='M274 52 L316 51 L316 97 L268 98 Z' fill='%23463a30'/%3E%3Cpath d='M4 103 L112 104 L106 148 L4 147 Z' fill='%2343382f'/%3E%3Cpath d='M118 103 L198 102 L204 149 L112 148 Z' fill='%2359493b'/%3E%3Cpath d='M210 103 L316 102 L314 148 L208 149 Z' fill='%233d332a'/%3E%3Cpath d='M4 153 L82 154 L86 196 L4 196 Z' fill='%23514337'/%3E%3Cpath d='M92 153 L228 154 L222 197 L90 196 Z' fill='%2345392f'/%3E%3Cpath d='M234 153 L316 153 L316 196 L228 197 Z' fill='%23554639'/%3E%3C/g%3E%3Cg stroke='%237d6b58' stroke-width='1.6' fill='none' opacity='0.75'%3E%3Cpath d='M8 7 L93 8 M104 7 L211 5 M222 6 L313 8 M6 56 L61 56 M72 56 L166 54 M180 55 L265 53 M6 105 L109 106 M120 105 L196 104 M212 105 L313 104 M6 155 L80 156 M94 155 L225 156 M236 155 L313 155'/%3E%3C/g%3E%3C/svg%3E");
}

body.gallery-page:not(.high-contrast),
body.videos-page:not(.high-contrast),
body.gabinet-page:not(.high-contrast),
body.trencadis-page:not(.high-contrast),
body.links-page:not(.high-contrast),
body.subpage:not(.high-contrast) {
  background-color: #2b231d !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 195, 90, 0.14) 0%, rgba(18, 14, 11, 0.32) 85%),
    var(--catalan-stone-svg) !important;
  background-size: 100% 100%, 340px 212px !important;
  background-repeat: no-repeat, repeat !important;
  background-attachment: fixed !important;
}

/* WCAG 2.2: 44x44px Klickflächen & Tastaturfokus im Sprachmenü */
.lang-switcher:focus-within > button,
.lang-switcher.open > button,
.lang-switcher:hover > button {
  display: flex !important;
  height: 44px !important;
  min-height: 44px !important;
}

/* Echter AAA-Hochkontrast (#ffff00 auf #000000) auf allen 6 Seiten */
body.high-contrast,
body.high-contrast main,
body.high-contrast header.top-bar,
body.high-contrast footer.bottom-bar,
body.high-contrast .video-intro,
body.high-contrast .cinema-box,
body.high-contrast .cinema-controls-bar,
body.high-contrast .video-card,
body.high-contrast .gabinet-hero,
body.high-contrast .dream-composer,
body.high-contrast .dream-note,
body.high-contrast .links-hero,
body.high-contrast .submit-box,
body.high-contrast .cat-card,
body.high-contrast .legal-box {
  background-image: none !important;
  background-color: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast p,
body.high-contrast label,
body.high-contrast a,
body.high-contrast button {
  color: #ffff00 !important;
}

/* EN 301 549 v4.1.1: System-Kontrastmodus (Windows High Contrast) */
@media (forced-colors: active) {
  button, a, input, .gallery-card, .video-card, .dream-note, .cat-card, .shard-card {
    forced-color-adjust: auto;
    border: 1px solid ButtonText !important;
  }
}
/* ==========================================================================
   SCHMALE HANDYS (bis 680px): Kopfleiste sauber zweizeilig statt rechts abgeschnitten
   Zeile 1: Barrierefrei-Buttons | Zeile 2: Sprache links + Menü rechts
   ========================================================================== */
@media (max-width: 680px) {
  header.top-bar {
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .controls-left {
    display: contents !important;
  }

  .a11y-bar {
    order: 1;
    width: 100%;
    justify-content: space-between;
    padding: 2px 6px !important;
    gap: 0 !important;
  }

  .a11y-bar button,
  .a11y-bar a.a11y-skip-btn {
    min-width: 40px !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    font-size: 0.8rem !important;
  }

  .lang-switcher {
    order: 2;
  }

  .wabi-hamburger {
    order: 3;
    margin-left: auto !important;
  }
}