/* ==========================================================================
   Atlantis Munich, Grundton
   Leube Consulting, 18.09.2026, v9

   Das ist die ganze eigene CSS dieser Seite. Alles andere liegt in Bricks:
   Farben und Groessen unter Bricks > Variablen, wiederverwendbare Stile
   unter Bricks > Klassen, Bewegung als Interaktion am Element.

   Was hier steht, sind Dinge, die kein Element und keine Klasse tragen kann:
   Seitenhintergrund, Korn, Auswahlfarbe, Fokusring und die drei Keyframes,
   auf die Klassen und Interaktionen verweisen.
   ========================================================================== */

html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  background-color: var(--at-ground);
  color: var(--at-text);
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* iPhone: Die Seite reicht bis an die Geraetekanten (viewport-fit=cover, gesetzt im Plugin).
     Der Inhalt bleibt aus den Sicherheitszonen, die feste Kopfzeile fuellt sie selbst. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* Feines Korn ueber der ganzen Seite, sonst wirken grosse dunkle Flaechen flach.
   Bewusst ohne mix-blend-mode: ein ueberblendeter Vollbild-Layer zwingt den
   Browser, die ganze Seite in eine zweite Ebene zu rendern, und friert auf
   manchen Rechnern den Renderer ein. Normale Deckkraft reicht. */
/* Nur auf grossen Bildschirmen. Auf dem Handy liegt diese feste, durchsichtige Ebene ueber der Kopfzeile;
   Safari auf iOS 26 tastet an der oberen Kante das oberste feste Element ab, um die Flaeche hinter der
   Statusleiste in dessen Farbe zu fuellen. Trifft es die Kornebene, bleibt die Flaeche durchsichtig. */
@media (max-width: 991px) { body::after { display: none; } }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: .035;
  pointer-events: none;
  z-index: 9999;
}

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

h1, h2, h3 { text-wrap: balance; }

/* Fotos bleiben in Farbe. Beim Ueberfahren ein langsamer, kleiner Zoom. */
img.brxe-image, .brxe-image img { transition: transform 1.8s var(--at-ease); }
.at-photo:hover img.brxe-image, .at-photo:hover .brxe-image img { transform: scale(1.03); }

/* Bewegung. Bricks setzt die Klasse brx-animate-fadeInUp; die Bricks-Version
   schiebt um 100 % der Hoehe, das ist zu viel. Hier: 28 px, weich ausklingend. */
@keyframes atRise {
  0%   { opacity: 0; transform: translate3d(0, 28px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.brx-animate-fadeInUp { animation-name: atRise; animation-timing-function: var(--at-ease); animation-fill-mode: both; }
.brx-animate-fadeIn   { animation-timing-function: var(--at-ease); animation-fill-mode: both; }

/* Ken Burns fuer das Hero-Foto (Klasse at-kenburns). */
@keyframes atKenburns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.09); }
}

/* Goldschimmer, der langsam wandert (Klasse at-glow). */
@keyframes atDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-8vw, 6vw, 0) scale(1.15); }
}

/* Sprachen ohne lateinische Schrift. Marcellus hat kein Kyrillisch: auf den russischen Seiten
   uebernimmt Forum (fonts.css) die Ueberschriften, Manrope hat dort ein kyrillisches Subset.
   Chinesisch, Japanisch und Koreanisch kommen aus Systemschriften, Arabisch aus Noto Naskh Arabic
   (fonts.css); lateinische Buchstaben und Ziffern bleiben in Marcellus und Manrope.
   !important, weil die Bricks-Klassen (.at-h1.brxe-heading) sonst gewinnen. */
html[lang="ru"] .at-h1, html[lang="ru"] .at-h2, html[lang="ru"] .at-h3, html[lang="ru"] .at-day-time,
html[lang="ru"] .at-price, html[lang="ru"] .at-step-num, html[lang="ru"] .accordion-title-wrapper, html[lang="ru"] .accordion-title-wrapper .brxe-heading {
  font-family: "Forum", Georgia, "Times New Roman", serif !important;
}
html[lang="zh"] .at-h1, html[lang="zh"] .at-h2, html[lang="zh"] .at-h3, html[lang="zh"] .at-day-time,
html[lang="zh"] .at-price, html[lang="zh"] .at-step-num, html[lang="zh"] .accordion-title-wrapper, html[lang="zh"] .accordion-title-wrapper .brxe-heading {
  font-family: "Marcellus", "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "SimSun", serif !important;
}
html[lang="zh"] body { font-family: "Manrope", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
html[lang="ja"] .at-h1, html[lang="ja"] .at-h2, html[lang="ja"] .at-h3, html[lang="ja"] .at-day-time,
html[lang="ja"] .at-price, html[lang="ja"] .at-step-num, html[lang="ja"] .accordion-title-wrapper, html[lang="ja"] .accordion-title-wrapper .brxe-heading {
  font-family: "Marcellus", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif !important;
}
html[lang="ja"] body { font-family: "Manrope", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }
html[lang="ko"] .at-h1, html[lang="ko"] .at-h2, html[lang="ko"] .at-h3, html[lang="ko"] .at-day-time,
html[lang="ko"] .at-price, html[lang="ko"] .at-step-num, html[lang="ko"] .accordion-title-wrapper, html[lang="ko"] .accordion-title-wrapper .brxe-heading {
  font-family: "Marcellus", "Apple Myungjo", "Batang", "Noto Serif KR", "Noto Serif CJK KR", serif !important;
}
html[lang="ko"] body { font-family: "Manrope", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
html[lang="ar"] .at-h1, html[lang="ar"] .at-h2, html[lang="ar"] .at-h3, html[lang="ar"] .at-day-time,
html[lang="ar"] .at-price, html[lang="ar"] .at-step-num, html[lang="ar"] .accordion-title-wrapper, html[lang="ar"] .accordion-title-wrapper .brxe-heading {
  font-family: "Marcellus", "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", serif !important; line-height: 1.35 !important; letter-spacing: 0 !important;
}
html[lang="ar"] body :not(i) { font-family: "Manrope", "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif; letter-spacing: 0; }
html[lang="ar"] .at-eyebrow, html[lang="ar"] .brxe-button { text-transform: none; letter-spacing: 0; }

/* Arabisch: nur die Texte laufen rechts nach links, das Layout bleibt wie in allen anderen Sprachen.
   Ein dir="rtl" auf <html> wuerde Kopfzeile, Fotos am Fensterrand und Icon-Zeilen spiegeln, die mit
   physischen Abstaenden gebaut sind. Ueberschriften, Absaetze, Listen und Tabellen bekommen deshalb
   direction: rtl mit Rechtsbuendigkeit; Buttons und Navigation bleiben links nach rechts angeordnet. */
html[data-rtl-text="1"] .brxe-heading, html[data-rtl-text="1"] .brxe-text, html[data-rtl-text="1"] .brxe-text-basic:not(.at-hdr-info):not(.at-price),
html[data-rtl-text="1"] .at-legal, html[data-rtl-text="1"] .at-incl ul, html[data-rtl-text="1"] .at-menu ul, html[data-rtl-text="1"] .at-table table,
html[data-rtl-text="1"] .accordion-title-wrapper .brxe-heading, html[data-rtl-text="1"] .accordion-content-wrapper,
html[data-rtl-text="1"] .brxe-post-content, html[data-rtl-text="1"] .brxe-button { direction: rtl; unicode-bidi: isolate; }
html[data-rtl-text="1"] .brxe-heading, html[data-rtl-text="1"] .brxe-text, html[data-rtl-text="1"] .brxe-text-basic:not(.at-hdr-info):not(.at-price),
html[data-rtl-text="1"] .at-legal, html[data-rtl-text="1"] .brxe-post-content { text-align: right; }
html[data-rtl-text="1"] .at-table td:last-child { text-align: left; }
html[data-rtl-text="1"] .at-hdr-info, html[data-rtl-text="1"] .at-open, html[data-rtl-text="1"] .brx-nav-nested-items, html[data-rtl-text="1"] .brx-dropdown-content { direction: ltr; }

/* Status "Jetzt geoeffnet": goldener Punkt, grau wenn geschlossen. */
.at-open { white-space: nowrap; }
.at-open-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--at-gold-light); margin: 0 .5em 0 0; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(201,162,78,.18); }
.at-open[data-open="0"] .at-open-dot { background: var(--at-text-dim); box-shadow: none; }

::selection {
  background: var(--at-accent-soft);
  color: var(--at-gold-light);
}

:focus-visible {
  outline: 2px solid var(--at-gold-light);
  outline-offset: 3px;
}
/* Fokusring nur bei Tastaturbedienung (html.at-keyboard setzt das Plugin bei Tab); Safari auf dem iPhone
   zeigt :focus-visible sonst auch nach dem Antippen des Menue-Knopfs. */
html:not(.at-keyboard) :focus-visible { outline: none; }
* { -webkit-tap-highlight-color: transparent; }

/* Handy-Menue offen (html.at-menu-open, Plugin): Seiteninhalt ausblenden, damit Safari hinter seiner
   durchscheinenden Adressleiste nur den dunklen Grund zeigt und das Menue nicht sichtbar endet. */
@media (max-width: 991px) {
  html.at-menu-open #brx-content, html.at-menu-open #brx-footer, html.at-menu-open .at-langbar { visibility: hidden; }
  html.at-menu-open { background: var(--at-ground); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Sprachhinweis (Plugin, wp_footer): schmale Leiste unten, erscheint nur, wenn Browser- und Seitensprache
   nicht zusammenpassen und es die Seite in der Browsersprache gibt. Kein Layoutsprung (fixed). */
.at-langbar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 990;
  max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 14px 44px 14px 18px; border: 1px solid var(--at-line-strong); border-radius: 12px;
  background: var(--at-surface-2); color: var(--at-text); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8);
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; }
.at-langbar[lang="ar"] { direction: rtl; padding: 14px 18px 14px 44px; }
.at-langbar-link { color: var(--at-gold-light); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.at-langbar-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--at-text-dim); font-size: 14px; line-height: 1; cursor: pointer; }
.at-langbar[lang="ar"] .at-langbar-close { right: auto; left: 8px; }
.at-langbar-close:hover { background: var(--at-accent-soft); color: var(--at-gold-light); }

/* Schleier hinter dem Sprach-Auswahlblatt auf dem Handy (html.at-lang-open setzt das Plugin). Liegt unter dem
   Header (z 20), das Blatt selbst gehoert zum Header und bleibt darueber. Tippen darauf schliesst das Blatt. */
.at-sheet-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(5,4,3,.6); opacity: 0; pointer-events: none; transition: opacity .3s var(--at-ease); }
@media (max-width: 991px) {
  html.at-lang-open .at-sheet-backdrop { opacity: 1; pointer-events: auto; }
  html.at-lang-open { overflow: hidden; }
}

/* ------------------------------------------------------------------------------------------
   Handy (bis 767 px): kompakter, schneller zu ueberfliegen, Bedienung wie in einer App.
   Nur CSS, keine Aenderung an den Bricks-Elementen. Desktop und Tablet bleiben unberuehrt.
   ------------------------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Masse: kleinere Abstaende und Schriftgrade, die Startseite wird um rund ein Drittel kuerzer */
  html:root { --at-space-section: 56px; --at-space-block: 24px; --at-fs-h1: 34px; --at-fs-h2: 27px; --at-fs-lead: 17px; --at-fs-h3: 19px; }
  .at-hero.brxe-section { padding-top: 88px !important; padding-bottom: 32px !important; }
  .at-hero-grid { row-gap: 28px !important; }
  .at-hero-frame { aspect-ratio: 1 / 1 !important; height: auto !important; }

  /* Knoepfe: volle Breite, untereinander, Druckgefuehl beim Antippen */
  .at-btn, .at-btn-solid { width: 100%; justify-content: center; text-align: center; padding: 17px 20px !important; }
  .at-btn:active, .at-btn-solid:active { transform: scale(.985); transition-duration: .1s; }
  .at-card:active { transform: scale(.99); }

  /* Fotoreihen und Karten: waagerecht wischen statt alles untereinander (wie eine Galerie in der App) */
  .at-grid2, .at-grid3, .at-grid4 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important;
    grid-template-columns: none !important; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--at-gutter)); margin-right: calc(-1 * var(--at-gutter));
    width: calc(100% + 2 * var(--at-gutter)) !important; max-width: none !important;
    padding: 0 var(--at-gutter) 6px; scroll-padding: 0 var(--at-gutter); scrollbar-width: none; }
  .at-grid2::-webkit-scrollbar, .at-grid3::-webkit-scrollbar, .at-grid4::-webkit-scrollbar { display: none; }
  .at-grid2 > *, .at-grid3 > *, .at-grid4 > * { flex: 0 0 min(82%, 330px); scroll-snap-align: start; }

  /* Kennzahlen (Tagesablauf, Auf einen Blick): zwei nebeneinander statt vier untereinander */
  .at-day { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 20px !important; row-gap: 28px !important; }

  /* Zeilenlisten (Gut zu wissen, Gruppen): dichter */
  .at-row { padding-top: 16px !important; padding-bottom: 16px !important; row-gap: 6px !important; }

  /* Footer: Linkspalten paarweise nebeneinander, Adresse und Kontakt volle Breite */
  #brxe-ftr003 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 20px !important; row-gap: 28px !important; }
  #brxe-ftr004, #brxe-ftr007, #brxe-ftr013 { grid-column: 1 / -1; }

  /* Sprach-Auswahlblatt: letzte Zeilen frei von Safaris Adressleiste */
  #brxe-hdr013 .brx-dropdown-content.brx-submenu-positioned { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
}