/* glattt Menü — Fußzeile („dunkler Abschluss“).
 *
 * Aufbau:  1 Werte  2 Theme ausblenden  3 Bausteine  4 Handy (Grundzustand)
 *          5 Desktop (ab 1000 px)  6 Einblenden  7 Weniger Bewegung
 *
 * Ein Markup für beide Breiten: am Handy ordnet Flex die Blöcke (Buchung, Bewertung,
 * Standorte, Akkordeons, Logo, Social Media), am Desktop legt ein Raster sie in vier Spalten.
 * Alle Selektoren hängen an #gm-footer, damit Regeln des Themes nicht greifen.
 */

/* ---------- 1 Werte ---------- */
#gm-footer {
  --gmf-gold: #E1B520;
  --gmf-ink: #14110d;
  --gmf-ink2: #1e1912;
  --gmf-mint: #B9EDE0;
  --gmf-green: #1d5148;
  --gmf-white: #ffffff;
  --gmf-dim: #cfc8b8;
  --gmf-soft: #ece7da;
  --gmf-quiet: #9d968a;
  --gmf-line: #3a3329;
  --gmf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- 2 Theme ausblenden ---------- */
body.gmf-on .nectar-global-section.nectar_hook_global_section_footer,
body.gmf-on #footer-outer { display: none !important; }

/* Der schwebende Buchungsknopf (Buchungs-Plugin, .glattt-cta) weicht aus, sobald der
   Buchungsknopf der Fußzeile im Bild ist oder darüber liegt. Das Buchungs-Plugin kennt dafür
   nur das Handy (Klasse ist-weg); fuss.js setzt deshalb eine eigene Klasse an <html>. */
html.gmf-cta-da .glattt-cta { opacity: 0 !important; transform: translateX(100%) !important; pointer-events: none !important; }
html.gmf-cta-da .glattt-cta * { pointer-events: none !important; }

/* ---------- 3 Bausteine ---------- */
#gm-footer { position: relative; z-index: 1; clear: both; margin: 0; padding: 0; background: var(--gmf-ink); color: var(--gmf-white); font-family: inherit; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-align: left; overflow: hidden; }
#gm-footer *, #gm-footer *::before, #gm-footer *::after { box-sizing: border-box; }
#gm-footer a { color: inherit; text-decoration: none; box-shadow: none; }
#gm-footer p, #gm-footer h2 { margin: 0; padding: 0; }
#gm-footer img { max-width: none; margin: 0; border: 0; box-shadow: none; }
#gm-footer button { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0 !important; box-shadow: none; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; min-width: 0; cursor: pointer; }
#gm-footer .gm-i { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#gm-footer :focus-visible { outline: 2px solid var(--gmf-gold); outline-offset: 2px; border-radius: 6px; }

#gm-footer .gmf-in { padding: 0 20px; }
#gm-footer .gmf-ey { display: block; font-family: inherit; font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gmf-gold); }

#gm-footer .gmf-cta { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; background: var(--gmf-mint); color: var(--gmf-green); font-size: 16px; font-weight: 700; border-radius: 999px; transition: transform 140ms var(--gmf-ease-out), box-shadow 200ms ease; }
#gm-footer .gmf-cta:active { transform: scale(.97); }
#gm-footer .gmf-cta .gm-i { width: 18px; height: 18px; }

#gm-footer .gmf-rate { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--gmf-soft); }
#gm-footer .gmf-g { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--gmf-white); color: #4285F4; font-size: 18px; font-weight: 700; }
#gm-footer .gmf-stars { color: var(--gmf-gold); letter-spacing: 2px; font-size: 15px; }

#gm-footer .gmf-lnk { display: flex; align-items: center; justify-content: space-between; height: 42px; font-size: 15.5px; white-space: nowrap; color: var(--gmf-soft); transition: background-color 160ms ease, color 160ms ease; }
#gm-footer .gmf-lnk > span { overflow: hidden; text-overflow: ellipsis; }
#gm-footer .gmf-lnk.is-cur { color: var(--gmf-white); font-weight: 700; }
#gm-footer .gmf-lnk .gm-i { width: 13px; height: 13px; opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 160ms var(--gmf-ease-out); }

#gm-footer .gmf-soc { display: flex; gap: 10px; }
#gm-footer .gmf-soc a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #ffffff14; color: var(--gmf-gold); transition: transform 160ms var(--gmf-ease-out), background-color 160ms ease; }
#gm-footer .gmf-soc a:active { transform: scale(.94); }
#gm-footer .gmf-soc .gm-i { width: 21px; height: 21px; }

@media (hover: hover) and (pointer: fine) {
  #gm-footer .gmf-lnk:hover { background: #ffffff14; box-shadow: inset 0 0 0 1px #ffffff1f; color: var(--gmf-white); }
  #gm-footer .gmf-lnk:hover .gm-i { opacity: 1; transform: none; }
  #gm-footer .gmf-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px #00000059; }
  #gm-footer .gmf-cta:hover:active { transform: scale(.97); }
  #gm-footer .gmf-soc a:hover { transform: translateY(-2px); background: #ffffff26; }
  #gm-footer .gmf-legal a:hover, #gm-footer .gmf-top:hover, #gm-footer a.gmf-rate:hover { color: var(--gmf-white); }
}

/* ---------- 4 Handy (Grundzustand) ---------- */
#gm-footer .gmf-band { padding: 30px 0 26px; background: radial-gradient(120% 90% at 50% 0%, #3a2e1c 0%, var(--gmf-ink) 70%); }
#gm-footer .gmf-band-t { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
#gm-footer .gmf-band-t b { margin-top: 4px; font-family: "Playfair Display", Georgia, serif; font-size: 25px; line-height: 1.18; font-weight: 700; }
#gm-footer .gmf-s { font-size: 15px; color: var(--gmf-dim); }
#gm-footer .gmf-cta { width: 100%; height: 54px; }

#gm-footer .gmf-main { display: flex; flex-direction: column; }
#gm-footer .gmf-rate { order: 1; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--gmf-line); border-radius: 14px; }
#gm-footer .gmf-orte { order: 2; padding: 24px 0 14px; }
#gm-footer .gmf-akk { order: 3; border-bottom: 1px solid var(--gmf-line); }
#gm-footer .gmf-akk--erste { border-top: 1px solid var(--gmf-line); }
#gm-footer .gmf-logo { order: 5; align-self: center; margin-top: 28px; }
#gm-footer .gmf-logo img { display: block; height: 40px; width: auto; }
#gm-footer .gmf-soc { order: 6; justify-content: center; margin: 18px 0 22px; }
#gm-footer .gmf-claim { display: none; }

/* Kacheln: minmax(0, 1fr) — mit 1fr allein sprengt ein langer Name bei 320 px die Breite. */
#gm-footer .gmf-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
#gm-footer .gmf-tile { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; border: 1px solid var(--gmf-line); background: var(--gmf-ink2); color: var(--gmf-white); transition: transform 140ms var(--gmf-ease-out); }
#gm-footer .gmf-tile:active { transform: scale(.97); }
#gm-footer .gmf-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
#gm-footer .gmf-tile b { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; font-family: "Playfair Display", Georgia, serif; font-size: 16px; font-weight: 600; line-height: 1.2; background: linear-gradient(#0000, #000000c7); overflow-wrap: anywhere; }
#gm-footer .gmf-tile--all { display: grid; place-items: center; padding: 8px; text-align: center; font-size: 15px; font-weight: 700; color: var(--gmf-gold); }
#gm-footer .gmf-links { display: none; }

#gm-footer .gmf-akk > .gmf-ey { display: none; }
#gm-footer .gmf-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; text-align: left; font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 600; }
#gm-footer .gmf-acc .gm-i { width: 18px; height: 18px; color: var(--gmf-gold); transition: transform 260ms var(--gmf-ease-out); }
#gm-footer .gmf-acc[aria-expanded="true"] .gm-i { transform: rotate(180deg); }
#gm-footer .gmf-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 260ms var(--gmf-ease-out), visibility 0s linear 260ms; }
#gm-footer .gmf-sub > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 160ms ease; }
#gm-footer .gmf-sub.is-on { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 260ms var(--gmf-ease-out), visibility 0s; }
#gm-footer .gmf-sub.is-on > div { opacity: 1; transition: opacity 260ms ease 60ms; }
#gm-footer .gmf-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; padding-bottom: 12px; }
/* „Alle …“ bekommt die ganze Zeile — in einer halben Spalte würde der Text abgeschnitten. */
#gm-footer .gmf-two .gmf-alle { grid-column: 1 / -1; }

#gm-footer .gmf-bot .gmf-in { display: flex; flex-direction: column; }
#gm-footer .gmf-legal { order: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; border-top: 1px solid var(--gmf-line); }
#gm-footer .gmf-legal a { display: flex; align-items: center; height: 44px; font-size: 14.5px; color: var(--gmf-dim); transition: color 160ms ease; }
#gm-footer .gmf-copy { order: 2; padding: 6px 0 calc(30px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--gmf-quiet); }
#gm-footer .gmf-top { display: none; }

/* ---------- 5 Desktop (ab 1000 px) ---------- */
@media (min-width: 1000px) {
  #gm-footer .gmf-in { width: min(100% - clamp(44px, (100vw - 1000px) * 0.5 + 44px, 180px), 1244px); margin: 0 auto; padding: 0; }

  #gm-footer .gmf-band { padding: 36px 0; border-bottom: 1px solid var(--gmf-line); background: radial-gradient(70% 160% at 20% 0%, #3a2e1c 0%, var(--gmf-ink) 70%); }
  #gm-footer .gmf-band .gmf-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  #gm-footer .gmf-band-t { margin-bottom: 0; }
  #gm-footer .gmf-band-t b { font-size: 30px; line-height: 1.2; margin-top: 2px; }
  #gm-footer .gmf-s { font-size: 16px; }
  #gm-footer .gmf-cta { width: auto; height: auto; padding: 14px 22px; }

  #gm-footer .gmf-main {
    display: grid; align-items: start; gap: 0 40px; padding-top: 38px; padding-bottom: 34px;
    grid-template-columns: 1.3fr 1fr 1.55fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "logo orte beh mehr" "claim orte beh mehr" "rate orte beh mehr" ". orte beh soc";
  }
  #gm-footer .gmf-logo { grid-area: logo; justify-self: start; margin: 0; }
  #gm-footer .gmf-logo img { height: 44px; }
  #gm-footer .gmf-claim { display: block; grid-area: claim; margin-top: 12px; font-size: 14.5px; color: var(--gmf-dim); }
  #gm-footer .gmf-rate { grid-area: rate; margin-top: 20px; padding: 0; border: 0; border-radius: 0; gap: 10px; }
  #gm-footer .gmf-orte { grid-area: orte; padding: 0; }
  #gm-footer .gmf-beh { grid-area: beh; }
  #gm-footer .gmf-mehr { grid-area: mehr; }
  #gm-footer .gmf-soc { grid-area: soc; justify-content: flex-start; margin: 16px 0 0; }

  #gm-footer .gmf-col > .gmf-ey { display: block; margin-bottom: 8px; }
  #gm-footer .gmf-tiles { display: none; }
  #gm-footer .gmf-links { display: block; }
  #gm-footer .gmf-akk, #gm-footer .gmf-akk--erste { border: 0; }
  #gm-footer .gmf-acc { display: none; }
  #gm-footer .gmf-sub, #gm-footer .gmf-sub.is-on { display: block; visibility: visible; transition: none; }
  #gm-footer .gmf-sub > div, #gm-footer .gmf-sub.is-on > div { overflow: visible; opacity: 1; transition: none; }
  #gm-footer .gmf-two { grid-template-columns: minmax(0, 1fr); padding: 0; }
  #gm-footer .gmf-two--breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
  #gm-footer .gmf-lnk { height: 36px; margin: 0 -10px; padding: 0 10px; border-radius: 10px; }

  #gm-footer .gmf-bot { border-top: 1px solid var(--gmf-line); }
  #gm-footer .gmf-bot .gmf-in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; padding-bottom: 16px; font-size: 13.5px; color: var(--gmf-quiet); }
  #gm-footer .gmf-copy { order: 0; padding: 0; font-size: 13.5px; }
  #gm-footer .gmf-legal { order: 0; display: flex; gap: 22px; padding: 0; border: 0; }
  #gm-footer .gmf-legal a { height: auto; font-size: 13.5px; }
  #gm-footer .gmf-top { display: flex; align-items: center; gap: 6px; color: var(--gmf-dim); transition: color 160ms ease; }
  #gm-footer .gmf-top .gm-i { width: 14px; height: 14px; }
}

/* ---------- 6 Einblenden ---------- */
/* Versteckt wird erst, wenn fuss.js „is-armed“ gesetzt hat — ohne JavaScript bleibt alles sichtbar. */
#gm-footer.is-armed .gmf-rv { opacity: 0; transform: translateY(14px); }
#gm-footer.is-armed.is-in .gmf-rv {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--gmf-ease-out) calc(var(--i, 0) * 70ms), transform 420ms var(--gmf-ease-out) calc(var(--i, 0) * 70ms);
}

/* ---------- 7 Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  #gm-footer.is-armed .gmf-rv { opacity: 1; transform: none; transition: none; }
  #gm-footer .gmf-sub, #gm-footer .gmf-acc .gm-i, #gm-footer .gmf-lnk .gm-i { transition: none !important; }
  #gm-footer .gmf-cta, #gm-footer .gmf-soc a, #gm-footer .gmf-tile { transition: none !important; transform: none !important; }
  html.gmf-cta-da .glattt-cta { transform: none !important; }
}

/* Google-Symbol in Originalfarben (Jan, 14.11.2026) */
#gm-footer .gmf-g svg { width: 19px; height: 19px; display: block; }
/* Luft zwischen Seiteninhalt und Fußzeile (Jan, 14.11.2026): Die alte Fußzeile brachte oben
   einen weißen Streifen mit; ohne ihn klebte der Inhalt an der dunklen Fläche. */
#gm-footer { margin-top: 48px; }
@media (min-width: 1000px) { #gm-footer { margin-top: 72px; } }

/* Gerade Zahl an Standorten (z. B. sechs mit Magdeburg): „Alle Standorte“ steht dann allein in
   der letzten Zeile und geht als flacher Knopf über die volle Breite. */
#gm-footer .gmf-tiles > .gmf-tile--all:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: auto; height: 54px; }