/* Gästeinfo – ruhiges, "app-artiges" Layout + CI-Grün (als CSS-Var) */

.gm-app{
  /* eigene Oberfläche innerhalb des Theme-Templates */
  margin: 18px 0;
}

.gm-wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 18px;
  line-height: 1.65;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

/* Theme-Einflüsse entschärfen – nur innerhalb der Gästeinfo */
.gm-app h1,.gm-app h2,.gm-app h3{ line-height: 1.25; }
.gm-app h1{ font-size: 26px; margin: 0; }
.gm-app h2{ font-size: 18px; margin: 18px 0 0 0; }
.gm-app p{ margin: 10px 0; }
.gm-app a{ color: var(--gm-ci-green); }

.gm-backlink{
  margin: 18px 0 10px 0;
}
.gm-backlink a{
  color: var(--gm-ci-green);
  text-decoration: none;
}
.gm-backlink a:hover{
  text-decoration: underline;
}
.gm-backlink--bottom{ margin-top: 28px; }

.gm-line{
  width: 100%;
  height: 1px;
  background: var(--gm-ci-green);
}
.gm-line--large{ margin: 10px 0 26px 0; }
.gm-line--small{ margin: 10px 0 16px 0; }

.gm-intro{ margin-bottom: 18px; }

/* Cards / Navigation */
.gm-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 6px 0;
}
.gm-grid--2{
  grid-template-columns: 1fr;
}

.gm-card{
  display: flex;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  padding: 14px 14px;
  text-decoration: none;
  background: #fff;
}
.gm-card:hover{
  border-color: rgba(79,124,105,0.55);
}
.gm-card__title{
  display:block;
  font-weight: 700;
  color: #16342a;
  margin: 0 0 4px 0;
}
.gm-card__sub{
  display:block;
  color: rgba(0,0,0,0.62);
  font-size: 14px;
}

.gm-list{ margin: 6px 0 0 0; }
.gm-linkrow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.07);
  margin: 10px 0;
  background: #fff;
}
.gm-linkrow::after{ content: "›"; color: rgba(0,0,0,0.35); }
.gm-linkrow:hover{ border-color: rgba(79,124,105,0.55); }

/* Accordion */
.gm-accordion{ margin-top: 6px; }

.gm-acc-item{
  border: 0;
  margin: 18px 0 0 0;
  padding: 0;
}
.gm-acc-sum{
  cursor: pointer;
  font-weight: 600;
  color: var(--gm-ci-green);
  list-style: none;
  outline: none;
  margin: 0;
  padding: 0;
}
.gm-acc-sum::-webkit-details-marker{ display:none; }
.gm-acc-sum::before{
  content: "▸ ";
  color: var(--gm-ci-green);
}
.gm-acc-item[open] > .gm-acc-sum::before{
  content: "▾ ";
}

.gm-acc-body{ margin-top: 10px; }

/* Make details feel like sections */
.gm-acc-item{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.07);
  padding: 12px 12px;
  background: #fff;
}
.gm-acc-sum{ padding: 2px 0; }

@media (min-width: 768px){
  .gm-acc-sum{ cursor: default; }
}

@media (min-width: 820px){
  .gm-grid{ grid-template-columns: 1fr 1fr; }
  .gm-grid--2{ grid-template-columns: 1fr 1fr; }
  .gm-wrap{ padding: 22px 26px; }
}


/* Icon cards */
.gm-card__icon{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.gm-card__icon img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  filter: none;
}
.gm-card__content{ display:block; }


/* --- Schnellzugriff Icons (PNG, Variante A – größer & präsent) --- */
.gm-card{
  align-items: flex-start;
}

.gm-card__icon{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin-right: 14px;
}

.gm-card__icon img{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}




/* --- Gästeinfo Frame (Variante A: app-artig, ruhig) --- */
.gm-app{
  --gm-accent: #4F7C69;
  --gm-bg: #F6F7F8;
  --gm-card-bg: #FFFFFF;
  --gm-text: #111827;
  --gm-muted: #6B7280;

  background: var(--gm-bg);
  padding: 22px 12px;
  border-radius: 18px;
  max-width: 1400px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Typography tuning inside app */
.gm-app h1, .gm-app h2, .gm-app h3{
  color: var(--gm-text);
  letter-spacing: -0.01em;
}
.gm-app p{
  color: var(--gm-muted);
  line-height: 1.65;
}

/* Section rules: subtle + accent */
.gm-app .gm-rule{
  border-top: 1px solid rgba(79,124,105,0.25);
}

/* Cards: app feel + green marker (Option B) */
.gm-app .gm-card{
  position: relative;
  background: var(--gm-card-bg);
  border: 1px solid rgba(17,24,39,0.08);
  border-left: 4px solid var(--gm-accent);
  border-radius: 14px;
  padding-left: 16px;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.gm-app .gm-card:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transform: translateY(-1px);
  border-color: rgba(79,124,105,0.35);
}

/* Quick access icons spacing (keep as in 0.1.8) */
.gm-app .gm-card__icon{
  border-radius: 10px;
  overflow: hidden;
}

/* Link/list accents */
.gm-app a, .gm-app a:visited{
  color: var(--gm-accent);
}
.gm-app a:hover{
  color: var(--gm-accent);
  text-decoration: underline;
}

/* Responsive tightening */
@media (max-width: 520px){
  .gm-app{
    padding: 16px 10px;
    border-radius: 14px;
  }
  .gm-app .gm-card{
    border-left-width: 3px;
    padding-left: 14px;
  }
}



/* --- Remove theme side padding at top area (Gästeinfo only) --- */
.gm-app{
  width: min(920px, 100%);
  box-sizing: border-box;
}

/* pull slightly to edges on narrow layouts where theme adds padding */
body .gm-app{
  margin-left: -12px;
  margin-right: -12px;
}

@media (min-width: 520px){
  body .gm-app{
    margin-left: 0;
    margin-right: 0;
  }
}



/* --- Gästeinfo: hide main site navigation (keep top contact bar) --- */
body.gm-page header nav,
body.gm-page .site-header nav,
body.gm-page #site-navigation,
body.gm-page .main-navigation,
body.gm-page .primary-navigation,
body.gm-page .navbar,
body.gm-page header .menu,
body.gm-page header .menu-main-container,
body.gm-page header .menu-primary-container{
  display: none !important;
}



/* --- Gästeinfo: hide main site navigation (Sydney + fallbacks). Keep top contact bar. --- */
body.gm-page .header-wrap,
body.gm-page .header-menu,
body.gm-page .header-bottom,
body.gm-page .header-main,
body.gm-page .header-container .main-navigation,
body.gm-page .site-header .main-navigation,
body.gm-page .site-header .primary-menu,
body.gm-page .site-header .primary-navigation,
body.gm-page .site-header nav,
body.gm-page .site-header .nav,
body.gm-page .site-header .menu,
body.gm-page .site-header .menu-main-container,
body.gm-page .site-header .menu-primary-container,
body.gm-page #site-navigation,
body.gm-page .main-navigation,
body.gm-page .primary-navigation,
body.gm-page .secondary-navigation,
body.gm-page .navigation,
body.gm-page .nav-wrap,
body.gm-page .nav-menu,
body.gm-page .menu-toggle,
body.gm-page .mobile-menu,
body.gm-page .slicknav_menu{
  display: none !important;
}

/* Keep common top-bar (contact strip) visible */
body.gm-page .top-bar,
body.gm-page .topbar,
body.gm-page .header-top,
body.gm-page .top-header{
  display: block !important;
}

/* --- Gästeinfo: hide ShareMagazines floating widget (only here) --- */
body.gm-page [class*="share"][class*="mag"],
body.gm-page [id*="share"][id*="mag"],
body.gm-page a[href*="sharemaga"],
body.gm-page a[href*="share-mag"],
body.gm-page img[alt*="share"],
body.gm-page img[src*="share"]{
  display: none !important;
  visibility: hidden !important;
}



/* --- Gästeinfo: hard-remove ShareMagazines widget (fixed/floating) --- */
body.gm-page .sharemagazines,
body.gm-page .share-magazines,
body.gm-page [class*="share"][class*="mag"],
body.gm-page [id*="share"][id*="mag"],
body.gm-page a[href*="sharemaga"],
body.gm-page a[href*="share-mag"],
body.gm-page img[alt*="share"],
body.gm-page img[src*="share"],
body.gm-page iframe[src*="share"],
body.gm-page iframe[id*="share"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* also hide any fixed positioned badge on the right */
body.gm-page *[style*="position: fixed"][style*="right"]{
  display: none !important;
}



/* --- Gästeinfo: remove remaining fixed right-side bar (ShareMagazines residue) --- */
body.gm-page *{
  -webkit-transform: none;
}

body.gm-page *[style*="position:fixed"][style*="right:"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.gm-page *[style*="position: fixed"][style*="right:"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* common badge containers */
body.gm-page .sm-badge,
body.gm-page .sm-widget,
body.gm-page .sharemags,
body.gm-page .sharemags-widget,
body.gm-page [class*="sm-"][class*="badge"],
body.gm-page [id*="sm-"][id*="badge"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}



/* --- Gästeinfo: safety net for injected right-side badges (JS will remove; CSS hides briefly) --- */
body.gm-page .gm-badge-killzone,
body.gm-page *[data-gm-badge="1"]{
  display:none !important;
}



/* --- Gästeinfo Feinschliff (A: kompakt) --- */

/* Schnellzugriff-Kacheln: kompakter, Icon kleiner, vertikal zentriert */
.gm-app .gm-card{
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 12px;
}
.gm-app .gm-card__icon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin-right: 12px;
  align-self: center;
}
.gm-app .gm-card__icon img{
  width: 44px;
  height: 44px;
}
.gm-app .gm-card__title{
  margin-bottom: 2px;
}
.gm-app .gm-card__desc{
  margin-top: 0;
  line-height: 1.45;
}

/* Grüner Marker links: schlanker + ruhiger Radius */
.gm-app .gm-card{
  border-left-width: 3px;
}
.gm-app .gm-card{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* Themen-/Accordion: Chevron sichtbarer + Hausfarbe */
.gm-app .gm-accordion__toggle,
.gm-app .gm-list__item{
  position: relative;
}
/* Fallback: falls es ein eigenes Chevron-Element gibt */
.gm-app .gm-accordion__chevron,
.gm-app .gm-list__chevron{
  color: var(--gm-accent) !important;
  opacity: 0.95;
}
/* Fallback: falls Chevron per ::after erzeugt wird */
.gm-app .gm-accordion__toggle::after,
.gm-app .gm-list__item::after{
  color: var(--gm-accent);
  opacity: 0.95;
}



/* --- Startseite: 3x3 Icon-Dashboard (dominant) --- */
.gm-app .gm-dashboard{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

@media (max-width: 980px){
  .gm-app .gm-dashboard{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gm-app .gm-dashboard{ grid-template-columns: 1fr; gap: 14px; }
}

.gm-app .gm-dash{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  background:#fff;
  padding: 26px 18px 22px;
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease;
  min-height: 168px;
}

.gm-app .gm-dash:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
}

.gm-app .gm-dash__icon{
  width: 104px;
  height: 104px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 20px;
  background: rgba(79,124,105,.08);
  margin-bottom: 14px;
}

.gm-app .gm-dash__icon img{
  width: 92px;
  height: 92px;
  object-fit: contain;
}


/* ------------------------------------------------------------
   0.2.12 – Zentrierung fix
   Problem: Auf manchen Themes wirkt das Dashboard optisch leicht verschoben,
   weil zuvor auf kleinen Viewports negative Seiten-Margins genutzt wurden.
   Lösung: Für die Gästeinfo-Seite (body.gm-page) erzwingen wir echte Zentrierung.
------------------------------------------------------------ */

body.gm-page .gm-app{
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 520px){
  body.gm-page .gm-app{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.gm-app .gm-dash__label{
  font-weight: 800;
  font-size: 20px;
  color: #0b1f2a;
  text-align: center;
  line-height: 1.15;
}



/* --- Gästeinfo: saubere Zentrierung des App-Containers --- */
.gm-app{
  margin-left: auto;
  margin-right: auto;
}

/* neutralisiere evtl. Theme-Offsets */
body.gm-page .gm-app{
  float: none !important;
  left: auto !important;
  right: auto !important;
}

/* ------------------------------------------------------------
   0.2.14 – Dashboard: Kacheln kleiner, Icons größer
   Ziel: kompaktere Kacheln bei stärkerer Icon-Präsenz
   Scope: nur /gaesteinfo (body.gm-page)
------------------------------------------------------------ */

body.gm-page .gm-app{
  /* zentrale Stellschrauben */
  --gm-dash-gap: 16px;
  --gm-dash-pad-y: clamp(14px, 1.6vw, 18px);
  --gm-dash-pad-x: 14px;
  --gm-dash-minh: 132px;

  /* Icons größer, damit sie dominanter wirken */
  --gm-dash-icon: clamp(96px, 10vw, 116px);
  --gm-dash-img: calc(var(--gm-dash-icon) - 10px);

  --gm-dash-radius: 22px;
}

body.gm-page .gm-dashboard{
  gap: var(--gm-dash-gap);
}

body.gm-page .gm-dash{
  border-radius: var(--gm-dash-radius);
  padding: var(--gm-dash-pad-y) var(--gm-dash-pad-x) calc(var(--gm-dash-pad-y) - 4px);
  min-height: var(--gm-dash-minh);
}

body.gm-page .gm-dash__icon{
  width: var(--gm-dash-icon);
  height: var(--gm-dash-icon);
  margin-bottom: 10px;
}

body.gm-page .gm-dash__icon img{
  width: var(--gm-dash-img);
  height: var(--gm-dash-img);
}

@media (max-width: 560px){
  body.gm-page .gm-app{ --gm-dash-gap: 12px; }
}

/* ------------------------------------------------------------
   0.2.15 – Dashboard: Doppelte Beschriftung entfernen + Icon/Button ~40% größer
   Ziel: Kachel IST der Button. Text steht im Icon (PNG), daher Label unterhalb ausblenden.
   Scope: nur /gaesteinfo (body.gm-page)
------------------------------------------------------------ */

body.gm-page .gm-dash__label{
  display: none !important;
}

body.gm-page .gm-app{
  /* Button/Icon ca. +40% (Referenz: "Service Information") */
  --gm-dash-icon: clamp(134px, 14vw, 162px);
  --gm-dash-img: calc(var(--gm-dash-icon) - 12px);

  /* Kachel bleibt kompakt, bekommt aber genug Raum fuer das groessere Icon */
  --gm-dash-minh: 168px;
  --gm-dash-pad-y: clamp(12px, 1.4vw, 16px);
  --gm-dash-pad-x: 12px;
}

/* Wenn kein Label mehr da ist: Icon optisch zentrieren */
body.gm-page .gm-dash__icon{
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   0.2.17 – Dashboard: Icon-Layout normalisieren
   Ziel: Alle PNG-Icons innerhalb der Icon-Box exakt zentrieren und gleich behandeln,
         unabhängig von Bildformat/innerem Rand.
   Hinweis: Wenn einzelne PNGs selbst "Leerraum" im Bild enthalten, kann CSS das nicht
            wegzaubern – dann muessen die Dateien neu exportiert werden.
   Scope: nur /gaesteinfo (body.gm-page)
------------------------------------------------------------ */

body.gm-page .gm-dash__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0; /* verhindert baseline-Versatz */
}

body.gm-page .gm-dash__icon img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: var(--gm-dash-img);
  height: var(--gm-dash-img);
  object-fit: contain;
}

/* ------------------------------------------------------------
   0.2.26 – Icons: Canvas erweitern gegen "abgeschnitten"-Effekt
   Hintergrund: Einige PNGs haben Schatten/Weissflaeche bis an den Rand.
   Fix: PNG-Canvas wurde mit transparentem Rand vergroessert. Damit das
        sichtbare Icon nicht kleiner wirkt, lassen wir das IMG die Icon-Box
        komplett ausfuellen.
   Scope: nur /gaesteinfo (body.gm-page)
------------------------------------------------------------ */

body.gm-page .gm-app{
  /* IMG fuellt die Icon-Box komplett (kompensiert vergroesserten PNG-Canvas) */
  --gm-dash-img: var(--gm-dash-icon);
}