/* Live mini-sites inside the hero phone. Every app is laid out at 390 px (an iPhone)
   and scaled to the phone screen by apps.js. Each trade has its own type and colour. */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/eb-garamond-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/bodoni-moda-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/newsreader-var-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-tight-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-tight-500-latin.woff2') format('woff2'); }
/* Cyrillic for the Russian page: the toast and the owner's lock screen */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/manrope-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/manrope-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-tight-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-tight-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

.apps { position: absolute; inset: 0; overflow: hidden; }
.app {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0;
  display: flex; flex-direction: column; overflow: hidden; opacity: 0;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.app[hidden] { display: none; }
.app.on { opacity: 1; transition: opacity .55s cubic-bezier(.2, .7, .1, 1) .28s; }
.app.off { opacity: 0; transition: opacity .28s ease; }
.app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.app .bg, .app .bg picture, .app .bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.app img { display: block; object-fit: cover; }
.app b { font-weight: inherit; }

/* status bar */
.sb { position: relative; z-index: 3; flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 40px; font: 600 15px/1 'Inter Tight', sans-serif; letter-spacing: -.01em; }
.sb svg { fill: currentColor; display: block; }
.sb-i { display: flex; gap: 6px; align-items: center; }
.app .menu { position: absolute; z-index: 3; right: 22px; top: 62px; width: 22px; height: 14px; background: linear-gradient(currentColor 0 0) top / 100% 1.6px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 1.6px no-repeat; opacity: .9; }

/* shared controls */
.lbl { margin: 0; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.stp { display: inline-flex; align-items: center; gap: 0; border-radius: 99px; }
.app .stp button { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; line-height: 1; border-radius: 50%; transition: background-color .15s, opacity .15s; }
.stp button:disabled { opacity: .3; cursor: default; }
.stp b { min-width: 74px; text-align: center; font-size: 14.5px; white-space: nowrap; }
.seg { display: flex; padding: 3px; border-radius: 99px; gap: 2px; }
.app .seg button { flex: 1 1 0; height: 34px; padding: 0 10px; border-radius: 99px; font-size: 13px; white-space: nowrap; transition: background-color .2s, color .2s; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.foot small { display: block; font-size: 11.5px; opacity: .65; white-space: nowrap; }
.foot .num { display: inline-block; font-variant-numeric: tabular-nums; }
.app .go { flex: none; height: 48px; padding: 0 18px; border-radius: 99px; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.app .go svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.app [data-name] { white-space: nowrap; }

/* sits just above the card's button, never over the business name */
.toast { position: absolute; z-index: 6; left: 50%; bottom: 104px; width: max-content; max-width: 300px; padding: 11px 16px; border-radius: 14px; background: rgba(18, 18, 20, .92); color: #fff; font: 600 12.5px/1.35 'Manrope', sans-serif; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s, transform .35s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* entrance: elements rise in when the app becomes active */
.app .in { opacity: 0; transform: translateY(14px); }
.app.on .in { opacity: 1; transform: none; transition: opacity .6s ease calc(.35s + var(--s, 0) * 70ms), transform .8s cubic-bezier(.16, 1, .3, 1) calc(.35s + var(--s, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .app .in, .app.on .in { opacity: 1; transform: none; transition: none; } }

/* ---------- Hotel / Pension: winter night, ivory card ---------- */
.app--hotel { background: #0e1824; color: #f6f1e8; font-family: 'Manrope', sans-serif; }
.app--hotel .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 28, .78) 0%, rgba(10, 18, 28, .35) 18%, rgba(10, 18, 28, 0) 34%, rgba(10, 18, 28, 0) 48%, rgba(10, 18, 28, .82) 76%, #0e1824 100%); }
.app--hotel .bg img { height: 70%; object-position: 50% 40%; }
.h-top { position: relative; z-index: 2; margin-top: 30px; text-align: center; padding: 0 26px; }
.h-mark { font: 500 31px/1.12 'Cormorant Garamond', serif; letter-spacing: .28em; text-transform: uppercase; margin-right: -.28em; text-shadow: 0 1px 14px rgba(5, 12, 20, .55); }
.h-sub { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(5, 12, 20, .7); }
.h-sub i { width: 22px; height: 1px; background: currentColor; opacity: .6; }
.h-head { position: relative; z-index: 2; margin: auto 0 18px; padding: 0 28px; font: 400 40px/1.02 'Cormorant Garamond', serif; letter-spacing: -.01em; }
.h-head span { color: rgba(246, 241, 232, .62); }
.h-card { position: relative; z-index: 2; margin: 0 14px 30px; padding: 16px 16px 14px; border-radius: 18px; background: #f6f1e8; color: #1b2430; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.h-card .lbl { color: #7b7468; }
.h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 6px 8px 12px; border: 1px solid #e3dccf; border-radius: 12px; font-size: 14.5px; }
.h-row svg { width: 16px; height: 16px; stroke: #7a3b2a; fill: none; stroke-width: 1.6; flex: none; }
.h-row .it { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.h-card .stp button:hover { background: #ebe4d6; }
.h-card .seg { background: #ece6da; }
.h-card .seg button { font-size: 12.5px; padding: 0 12px; height: 30px; }
.h-card .seg button.on { background: #1b2430; color: #f6f1e8; }
.h-card .foot { margin-top: 14px; }
.h-card .foot b { font: 500 34px/1 'Cormorant Garamond', serif; }
.h-card .foot b small { display: inline; font: 500 13px 'Manrope', sans-serif; opacity: .6; margin-right: 4px; }
.h-card .go { background: #1b2430; color: #f6f1e8; }

/* ---------- Gasthaus: slate, candle gold ---------- */
.app--rest { background: #13100e; color: #efe6d8; font-family: 'Inter Tight', sans-serif; }
.r-photo { position: absolute; left: 0; right: 0; top: 0; height: 52%; }
.r-photo picture, .r-photo img { width: 100%; height: 100%; }
.r-photo::after { content: ''; position: absolute; inset: 0 0 -2px; background: linear-gradient(180deg, rgba(19, 16, 14, .6) 0%, rgba(19, 16, 14, .05) 30%, rgba(19, 16, 14, .5) 70%, #13100e 100%); }
.r-top { position: relative; z-index: 2; margin-top: 22px; padding: 0 26px; }
.r-mark { font: 500 27px/1.1 'Fraunces', serif; letter-spacing: .2em; text-transform: uppercase; }
.r-sub { margin-top: 8px; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #c9a46a; }
.r-body { position: relative; z-index: 2; margin-top: auto; padding: 0 16px 30px; }
.r-body > .lbl { color: #c9a46a; padding: 0 10px; }
.r-head { margin: 10px 10px 18px; font: 400 33px/1.06 'Fraunces', serif; letter-spacing: -.015em; }
.r-head span { color: #a99b86; }
.r-card { padding: 14px 14px 14px; border-radius: 16px; background: #1e1a16; border: 1px solid rgba(201, 164, 106, .22); }
.r-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 10px; font-size: 14.5px; border-bottom: 1px solid rgba(239, 230, 216, .09); }
.r-row + .r-row { padding-top: 8px; }
.r-card .stp button:hover { background: rgba(239, 230, 216, .08); }
.r-card .seg { margin-top: 12px; background: #13100e; }
.r-card .seg button.on { background: #c9a46a; color: #1a140c; }
.r-card .foot { margin-top: 14px; }
.r-card .foot b { font: 500 33px/1 'Fraunces', serif; color: #e2c48d; }
.r-card .go { background: #c9a46a; color: #1a140c; }

/* ---------- Skischule: daylight, ice blue, signal orange ---------- */
.app--ski { background: #eef4fa; color: #0c2a4d; font-family: 'Archivo', sans-serif; }
.app--ski .bg img { height: 74%; object-position: 50% 66%; }
.app--ski .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 30, 60, .72) 0%, rgba(6, 30, 60, .38) 16%, rgba(6, 30, 60, 0) 30%, rgba(238, 244, 250, 0) 52%, rgba(238, 244, 250, .92) 72%, #eef4fa 100%); }
.app--ski .sb, .app--ski .menu { color: #fff; }
.s-top { position: relative; z-index: 2; margin-top: 22px; padding: 0 24px; color: #fff; }
.s-badge { display: inline-block; padding: 5px 9px; border-radius: 4px; background: #ff5a1f; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.s-mark { margin-top: 10px; font: 800 36px/.98 'Archivo', sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.s-card { position: relative; z-index: 2; margin: auto 14px 30px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(12, 42, 77, .18); }
.s-card .lbl { color: #ff5a1f; font-weight: 700; }
.s-head { margin: 6px 0 12px; font: 700 22px/1.12 'Archivo', sans-serif; letter-spacing: -.01em; }
.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-grid > div { padding: 8px 6px 6px 12px; border-radius: 12px; background: #f0f5fa; }
.s-grid small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6b7f96; }
.s-grid .stp { margin-left: -6px; }
.s-grid .stp b { min-width: 46px; font-size: 18px; font-weight: 700; }
.s-card .stp button:hover { background: #e2ebf5; }
.s-card .seg { margin-top: 10px; background: #f0f5fa; }
.s-card .seg button.on { background: #0c2a4d; color: #fff; }
.s-card .foot { margin-top: 14px; }
.s-card .foot b { font: 800 34px/1 'Archivo', sans-serif; letter-spacing: -.02em; }
.s-card .go { background: #ff5a1f; color: #fff; }

/* ---------- Taxi: night map, amber ---------- */
.app--taxi { background: #0c0e11; color: #f2f0ea; font-family: 'Archivo', sans-serif; }
.t-top { position: relative; z-index: 2; margin-top: 16px; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.t-logo { flex: none; width: 38px; height: 38px; border-radius: 9px; background: #f5b83d; display: grid; place-items: center; }
.t-logo svg { width: 22px; height: 22px; fill: #0c0e11; }
.t-mark { font: 800 23px/1 'Archivo', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.t-sub { margin-top: 5px; font: 400 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .06em; color: #8d8f93; }
.t-map { position: relative; flex: 1 1 auto; min-height: 0; margin: 4px 0 0; }
.t-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-map .contour { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.t-map .lake { fill: rgba(80, 130, 180, .16); }
.t-map .land { fill: rgba(255, 255, 255, .7); font: 500 9px 'JetBrains Mono', monospace; letter-spacing: .2em; opacity: .28; }
.t-map .rt { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; stroke-dasharray: 3 5; }
.t-map .rt.on { stroke: #f5b83d; stroke-width: 3; stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); stroke-linecap: round; animation: tdraw 1.2s cubic-bezier(.65, 0, .25, 1) forwards; }
@keyframes tdraw { to { stroke-dashoffset: 0; } }
.t-map .ap circle { fill: #0c0e11; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.t-map .ap text { fill: rgba(255, 255, 255, .55); font: 500 10px 'JetBrains Mono', monospace; letter-spacing: .08em; }
.t-map .ap.on circle { stroke: #f5b83d; fill: #f5b83d; }
.t-map .ap.on text { fill: #f5b83d; }
.t-map .dest circle.core { fill: #f2f0ea; }
.t-map .dest circle.ring { fill: none; stroke: #f2f0ea; stroke-width: 1.2; transform-origin: center; transform-box: fill-box; animation: tring 2.4s ease-out infinite; }
.app:not(.on) .t-map .dest circle.ring { animation: none; }
@keyframes tring { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.t-map .dest text { fill: #f2f0ea; font: 600 11px 'Archivo', sans-serif; letter-spacing: .04em; }
.t-air { position: relative; z-index: 2; margin: 0 14px; background: #171a1f; }
.t-air button { font-size: 12.5px; padding: 0 8px; color: #a7a9ad; }
.t-air button.on { background: #f5b83d; color: #0c0e11; font-weight: 600; }
.t-card { position: relative; z-index: 2; margin: 10px 14px 30px; padding: 14px 14px 14px 16px; border-radius: 16px; background: #171a1f; }
.t-route { font-size: 15px; font-weight: 600; }
.t-route span { color: #8d8f93; font-weight: 400; }
.t-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 13.5px; color: #a7a9ad; }
.t-row b { color: #f2f0ea; font-weight: 600; }
.t-card .stp button:hover { background: rgba(255, 255, 255, .08); }
.t-card .foot { margin-top: 12px; }
.t-card .foot b { font: 700 32px/1 'JetBrains Mono', monospace; letter-spacing: -.03em; color: #f5b83d; }
.t-card .go { background: #f5b83d; color: #0c0e11; }

/* ---------- Handwerk (Zimmerei): paper, ink, larch ---------- */
.app--hw { background: #efe9df; color: #1d1a16; font-family: 'Manrope', sans-serif; }
.w-photo { position: absolute; left: 0; right: 0; top: 0; height: 40%; }
.w-photo picture, .w-photo img { width: 100%; height: 100%; }
/* black and white baked into t-hw-bw: a CSS filter inside the 3D phone made Safari draw the phone flat */
.w-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 14, .55) 0%, rgba(20, 17, 14, .05) 35%, rgba(20, 17, 14, .55) 100%); }
.app--hw .sb, .app--hw .menu { color: #fff; }
.w-top { position: relative; z-index: 2; height: calc(40% - 50px); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 18px; color: #fff; }
.w-mark { font: 600 29px/1.04 'Fraunces', serif; letter-spacing: -.015em; }
.w-sub { margin-top: 6px; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.w-body { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 16px 30px; }
.w-body > .lbl { color: #a0612b; padding: 0 8px; }
.w-head { margin: 6px 8px 0; font: 500 25px/1.1 'Fraunces', serif; letter-spacing: -.015em; }
.w-head span { color: #8a7f70; }
.w-draw { flex: 1 1 auto; min-height: 90px; display: grid; place-items: center; }
.w-draw svg { width: 100%; max-height: 150px; overflow: visible; }
.w-draw .g { fill: none; stroke: #1d1a16; stroke-width: 2; stroke-linejoin: round; transition: d .5s cubic-bezier(.16, 1, .3, 1); }
.w-draw .roof { fill: #c98b4f; stroke: #1d1a16; stroke-width: 2; stroke-linejoin: round; transition: d .5s cubic-bezier(.16, 1, .3, 1); }
.w-draw .car { fill: #1d1a16; opacity: .12; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.w-draw .dim { fill: #8a7f70; font: 600 10px 'Manrope', sans-serif; letter-spacing: .06em; }
.w-card { padding: 12px; border-radius: 16px; background: #fbf8f3; border: 1px solid #e0d7c8; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-grid > div { padding: 6px 4px 4px 10px; border-radius: 10px; background: #f1ebe1; }
.w-grid small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a7f70; }
.w-grid .stp { margin-left: -6px; }
.w-grid .stp b { min-width: 56px; font-size: 16px; font-weight: 600; }
.w-card .stp button:hover { background: #e7dfd1; }
.w-card .seg { margin-top: 8px; background: #f1ebe1; }
.w-card .seg button.on { background: #1d1a16; color: #fbf8f3; }
.w-card .foot { margin-top: 12px; }
.w-card .foot b { font: 600 30px/1 'Fraunces', serif; letter-spacing: -.02em; }
.w-card .go { background: #a0612b; color: #fff; }


/* ---------- Golfclub: morning turf, cream card, flag gold ---------- */
.app--golf { background: #102a1b; color: #f3efe3; font-family: 'Inter Tight', sans-serif; }
/* the photo starts below the name, so the flag never sits behind it.
   Photo overlays reach 2 px past the photo, so its scaled edge never shows as a line. */
.g-photo { position: absolute; left: 0; right: 0; top: 96px; height: calc(64% - 96px); }
.g-photo picture, .g-photo img { width: 100%; height: 100%; }
.g-photo img { object-position: 50% 0%; }
.g-photo::after { content: ''; position: absolute; inset: 0 0 -2px; background: linear-gradient(180deg, #102a1b 0%, rgba(16, 42, 27, .55) 14%, rgba(16, 42, 27, 0) 34%, rgba(16, 42, 27, 0) 52%, rgba(16, 42, 27, .6) 80%, #102a1b 100%); }
.app--golf .sb, .app--golf .menu { color: #fff; }
.g-top { position: relative; z-index: 2; margin-top: 24px; padding: 0 26px; }
.g-mark { font: 500 34px/1.05 'EB Garamond', serif; letter-spacing: -.005em; text-shadow: 0 1px 16px rgba(6, 20, 12, .5); }
.g-sub { margin-top: 7px; font-size: 9.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #e3c977; text-shadow: 0 1px 8px rgba(6, 20, 12, .7); }
.g-body { position: relative; z-index: 2; margin-top: auto; padding: 0 14px 30px; }
.g-head { margin: 0 12px 16px; font: 400 36px/1.04 'EB Garamond', serif; letter-spacing: -.01em; }
.g-head span { color: rgba(243, 239, 227, .62); font-style: italic; }
.g-card { padding: 14px; border-radius: 18px; background: #f3efe3; color: #102a1b; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.g-card .lbl { color: #7c7a63; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.g-card .seg { background: #e7e1cf; }
.g-card .seg button.on { background: #102a1b; color: #f3efe3; }
.app .g-day button { height: 30px; padding: 0 14px; font-size: 12.5px; }
.g-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; padding: 0; background: none !important; border-radius: 0; }
.app .g-slots button { height: 46px; padding: 0; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: #e7e1cf; }
.g-slots b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.g-slots small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.app .g-slots button.on { background: #102a1b; color: #f3efe3; }
.app .g-slots button.on small { color: #e3c977; opacity: 1; }
.app .g-slots button:disabled { opacity: .4; cursor: default; }
.g-slots button:disabled b { text-decoration: line-through; text-decoration-thickness: 1px; }
.g-card .stp { margin-left: -4px; }
.g-card .stp b { min-width: 76px; }
.g-card .stp button:hover { background: #e7e1cf; }
.app .g-holes button { height: 30px; padding: 0 12px; font-size: 12.5px; }
.g-card .foot { margin-top: 12px; }
.g-card .foot b { font: 500 34px/1 'EB Garamond', serif; }
.g-card .go { background: #102a1b; color: #f3efe3; }

/* ---------- Friseur: black and white, warm paper, rose ---------- */
.app--salon { background: #f2ede6; color: #1b1817; font-family: 'Manrope', sans-serif; }
.sa-photo { position: absolute; left: 0; right: 0; top: 0; height: 56%; }
.sa-photo picture, .sa-photo img { width: 100%; height: 100%; }
.sa-photo img { object-position: 50% 62%; }   /* the photo itself is black and white: no filter, which costs a slow phone a second */
.sa-photo::after { content: ''; position: absolute; inset: 0 0 -2px; background: linear-gradient(180deg, rgba(242, 237, 230, .9) 0%, rgba(242, 237, 230, .7) 20%, rgba(242, 237, 230, 0) 42%, rgba(242, 237, 230, .25) 66%, #f2ede6 100%); }
.sa-top { position: relative; z-index: 2; margin-top: 24px; text-align: center; padding: 0 30px; }
.sa-mark { font: 500 34px/1.08 'Bodoni Moda', serif; letter-spacing: .14em; text-transform: uppercase; margin-right: -.14em; }
.sa-sub { margin-top: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: #8a5a4c; }
.sa-body { position: relative; z-index: 2; margin-top: auto; padding: 0 14px 30px; }
.sa-head { margin: 0 12px 16px; font: 400 33px/1.06 'Bodoni Moda', serif; letter-spacing: -.02em; }
.sa-head span { color: #8a5a4c; font-style: italic; }
.sa-card { padding: 14px; border-radius: 18px; background: #fffdf9; box-shadow: 0 18px 46px rgba(40, 24, 18, .14); }
.sa-card .lbl { color: #8a7d73; }
.sa-card .lbl + .seg { margin-top: 8px; }
.sa-card .seg { background: #f2ede6; }
.sa-card .seg button.on { background: #1b1817; color: #fffdf9; }
.app .sa-svc button { padding: 0 6px; font-size: 12.5px; }
.sa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px; font-size: 13.5px; }
.app .sa-len button { height: 30px; padding: 0 11px; font-size: 12.5px; }
.sa-len.off { opacity: .35; }
.sa-len.off button.on { background: transparent; color: inherit; }
.app .sa-len button:disabled { cursor: default; }
.sa-at { background: none !important; padding: 0; gap: 6px; }
.app .sa-at button { height: 36px; border: 1px solid #e3dad0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.app .sa-at button.on { background: #8a5a4c; border-color: #8a5a4c; color: #fffdf9; }
.sa-card .foot { margin-top: 12px; }
.sa-card .foot b { font: 500 32px/1 'Bodoni Moda', serif; letter-spacing: -.02em; }
.sa-card .go { background: #1b1817; color: #fffdf9; }

/* ---------- Zahnarzt: daylight on a wall, paper, sage ---------- */
.app--zahn { background: #f6f2ea; color: #1e211c; font-family: 'Manrope', sans-serif; }
.z-photo { position: absolute; left: 0; right: 0; top: 0; height: 46%; }
.z-photo picture, .z-photo img { width: 100%; height: 100%; }
.z-photo img { object-position: 60% 30%; }
.z-photo::after { content: ''; position: absolute; inset: 0 0 -2px; background: linear-gradient(180deg, rgba(30, 33, 28, .5) 0%, rgba(30, 33, 28, .12) 34%, rgba(246, 242, 234, 0) 60%, #f6f2ea 100%); }
.app--zahn .sb, .app--zahn .menu { color: #fff; }
.z-top { position: relative; z-index: 2; margin-top: 26px; padding: 0 26px; color: #fff; }
.z-mark { font: 500 32px/1.06 'Newsreader', serif; letter-spacing: -.01em; text-shadow: 0 1px 14px rgba(20, 22, 18, .35); }
.z-sub { margin-top: 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .9; }
.z-body { position: relative; z-index: 2; margin-top: auto; padding: 0 14px 30px; }
.z-head { margin: 0 12px 16px; font: 400 33px/1.06 'Newsreader', serif; letter-spacing: -.015em; }
.z-head span { color: #6e8267; font-style: italic; }
.z-card { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #e6dfd2; box-shadow: 0 16px 40px rgba(30, 33, 28, .08); }
.z-card .lbl { color: #7e7a70; }
.z-card .lbl + .seg { margin-top: 8px; }
.z-card .seg { background: #f1ece2; }
.z-card .seg button.on { background: #53654e; color: #fff; }
.app .z-a button { padding: 0 6px; font-size: 12.5px; }
.z-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; padding: 0; background: none !important; border-radius: 0; }
.app .z-days button { height: 48px; padding: 0; border-radius: 11px; border: 1px solid #e6dfd2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.z-days b { font-size: 13px; font-weight: 600; }
.z-days small { font-size: 9.5px; color: #6e8267; }
.app .z-days button.on { background: #53654e; border-color: #53654e; color: #fff; }
.app .z-days button.on small { color: #dfe8da; }
.app .z-days button:disabled { opacity: .45; cursor: default; }
.z-days button:disabled small { color: #7e7a70; }
.z-times { background: none !important; padding: 0; gap: 6px; margin-top: 8px; }
.app .z-times button { flex: 0 1 calc((100% - 12px) / 3); height: 36px; border: 1px solid #e6dfd2; font-size: 13px; font-variant-numeric: tabular-nums; }
.app .z-times button.on { background: #1e211c; border-color: #1e211c; color: #fff; }
.z-card .foot { margin-top: 12px; }
.z-card .foot b { display: block; font: 400 30px/1 'Newsreader', serif; letter-spacing: -.015em; white-space: nowrap; }
.z-card .go { background: #53654e; color: #fff; }

/* ---------- below the first screen (only the phone on screen 2 scrolls there) ----------
   One layout for every trade; the colours and the display face come from the trade's own variables. */
/* ---------- Andere Branche: the visitor's own business, no photo, no trade words ---------- */
.app--andere { background: #f3f0ea; color: #17181b; font-family: 'Manrope', sans-serif; }
.a-art { position: absolute; left: 0; right: 0; top: 0; height: 46%; overflow: hidden; background: #1a1c21; border-radius: 0 0 30px 30px; }
.a-art i { position: absolute; border-radius: 50%; }
.a-art i:nth-child(1) { width: 440px; height: 440px; right: -170px; top: -140px; background: radial-gradient(closest-side, rgba(214, 104, 66, .95), rgba(214, 104, 66, 0)); }
.a-art i:nth-child(2) { width: 320px; height: 320px; left: -140px; top: 40px; background: radial-gradient(closest-side, rgba(70, 98, 140, .85), rgba(70, 98, 140, 0)); }
.a-art i:nth-child(3) { width: 210px; height: 210px; right: 34px; top: 150px; border: 1px solid rgba(255, 255, 255, .2); }
.app--andere .sb, .app--andere .menu { color: #fff; }
.a-top { position: relative; z-index: 2; margin-top: 26px; padding: 0 26px; color: #fff; }
.a-mark { font: 750 34px/1.04 'Archivo', sans-serif; letter-spacing: -.02em; }
.a-sub { margin-top: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .82; }
.a-body { position: relative; z-index: 2; margin-top: auto; padding: 0 14px 30px; }
.a-head { margin: 0 12px 16px; font: 700 31px/1.04 'Archivo', sans-serif; letter-spacing: -.025em; }
.a-head span { color: #b4532f; }
.a-card { padding: 14px; border-radius: 18px; background: #fff; border: 1px solid #e4ded3; box-shadow: 0 16px 40px rgba(23, 24, 27, .08); }
.a-card .lbl { color: #7b776e; }
.a-card .lbl + .seg { margin-top: 8px; }
.a-card .seg { background: #f0ece4; }
.a-card .seg button.on { background: #17181b; color: #fff; }
.app .a-svc button { padding: 0 6px; font-size: 12.5px; }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 12px; font-size: 13.5px; }
.a-row .stp { background: #f0ece4; }
.a-row .stp.off b { color: #7b776e; }
.a-at { background: none !important; padding: 0; gap: 6px; margin-top: 8px; }
.app .a-at button { height: 36px; border: 1px solid #e4ded3; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.app .a-at button.on { background: #b4532f; border-color: #b4532f; color: #fff; }
.a-card .foot { margin-top: 12px; }
.a-card .foot b { display: block; font: 700 28px/1 'Archivo', sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.a-card .go { background: #17181b; color: #fff; }

.app--hotel { --mo-bg: #0e1824; --mo-fg: #f6f1e8; --mo-mute: rgba(246, 241, 232, .58); --mo-line: rgba(246, 241, 232, .14); --mo-card: #15212f; --mo-acc: #c9a46a; --mo-go-bg: #f6f1e8; --mo-go-fg: #1b2430; --mo-disp: 500 31px/1.08 'Cormorant Garamond', serif; --mo-b: 600; }
.app--rest { --mo-bg: #13100e; --mo-fg: #efe6d8; --mo-mute: rgba(239, 230, 216, .58); --mo-line: rgba(239, 230, 216, .14); --mo-card: #1d1915; --mo-acc: #c9a46a; --mo-go-bg: #c9a46a; --mo-go-fg: #1a140c; --mo-disp: 400 29px/1.08 'Fraunces', serif; --mo-b: 500; }
.app--ski { --mo-bg: #eef4fa; --mo-fg: #0c2a4d; --mo-mute: rgba(12, 42, 77, .6); --mo-line: rgba(12, 42, 77, .12); --mo-card: #fff; --mo-acc: #e8501a; --mo-go-bg: #ff5a1f; --mo-go-fg: #fff; --mo-disp: 800 27px/1.04 'Archivo', sans-serif; --mo-b: 650; }
.app--taxi { --mo-bg: #0c0e11; --mo-fg: #f2f0ea; --mo-mute: rgba(242, 240, 234, .56); --mo-line: rgba(242, 240, 234, .13); --mo-card: #161a1f; --mo-acc: #f5b83d; --mo-go-bg: #f5b83d; --mo-go-fg: #0c0e11; --mo-disp: 800 25px/1.06 'Archivo', sans-serif; --mo-b: 650; }
.app--hw { --mo-bg: #efe9df; --mo-fg: #1d1a16; --mo-mute: rgba(29, 26, 22, .6); --mo-line: rgba(29, 26, 22, .13); --mo-card: #f8f4ec; --mo-acc: #a0612b; --mo-go-bg: #a0612b; --mo-go-fg: #fff; --mo-disp: 600 27px/1.08 'Fraunces', serif; --mo-b: 600; }
.app--golf { --mo-bg: #102a1b; --mo-fg: #f3efe3; --mo-mute: rgba(243, 239, 227, .58); --mo-line: rgba(243, 239, 227, .14); --mo-card: #163424; --mo-acc: #e3c977; --mo-go-bg: #f3efe3; --mo-go-fg: #102a1b; --mo-disp: 500 31px/1.06 'EB Garamond', serif; --mo-b: 500; }
.app--salon { --mo-bg: #f2ede6; --mo-fg: #1b1817; --mo-mute: rgba(27, 24, 23, .58); --mo-line: rgba(27, 24, 23, .13); --mo-card: #fbf8f3; --mo-acc: #8a5a4c; --mo-go-bg: #1b1817; --mo-go-fg: #fffdf9; --mo-disp: 500 27px/1.12 'Bodoni Moda', serif; --mo-b: 600; }
.app--andere { --mo-bg: #f3f0ea; --mo-fg: #17181b; --mo-mute: rgba(23, 24, 27, .58); --mo-line: rgba(23, 24, 27, .12); --mo-card: #fbf9f5; --mo-acc: #b4532f; --mo-go-bg: #17181b; --mo-go-fg: #fff; --mo-disp: 700 27px/1.06 'Archivo', sans-serif; --mo-b: 650; }
.app--zahn { --mo-bg: #f6f2ea; --mo-fg: #1e211c; --mo-mute: rgba(30, 33, 28, .58); --mo-line: rgba(30, 33, 28, .12); --mo-card: #fdfbf6; --mo-acc: #5f7559; --mo-go-bg: #53654e; --mo-go-fg: #fff; --mo-disp: 500 30px/1.08 'Newsreader', serif; --mo-b: 600; }

.more { position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; padding-top: 34px; background: var(--mo-bg); color: var(--mo-fg); }
.more p { margin: 0; }
.mo-sec { padding: 0 24px 34px; }
.mo-k { margin-bottom: 10px !important; font-size: 10px; font-weight: var(--mo-b); letter-spacing: .22em; text-transform: uppercase; color: var(--mo-acc); }
.mo-h { margin-bottom: 18px !important; font: var(--mo-disp); letter-spacing: -.015em; text-wrap: balance; }
.mo-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mo-line); }
.mo-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--mo-line); }
.mo-list b { display: block; font-size: 15.5px; font-weight: var(--mo-b); }
.mo-list small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mo-mute); }
.mo-list em { font-style: normal; font-size: 16px; font-weight: var(--mo-b); white-space: nowrap; }
.mo-note { margin-top: 10px !important; font-size: 11px; color: var(--mo-mute); }
.mo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.mo-facts div { padding: 12px 11px 13px; border-radius: 14px; background: var(--mo-card); }
.mo-facts small { display: block; font-size: 10.5px; color: var(--mo-mute); }
.mo-facts b { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.25; font-weight: var(--mo-b); overflow-wrap: anywhere; }
.mo-map { position: relative; height: 190px; border-radius: 18px; overflow: hidden; background: var(--mo-card); }
.mo-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.mo-c { stroke: var(--mo-line); stroke-width: 1; }
.mo-road { stroke: var(--mo-mute); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.mo-river { stroke: #7fa7c9; stroke-width: 5; stroke-linecap: round; opacity: .35; }
.mo-pin { position: absolute; left: 57%; top: 46%; display: flex; align-items: center; gap: 8px; max-width: 150px; }
.mo-pin i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--mo-acc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mo-acc) 28%, transparent); }
.mo-pin b { padding: 5px 9px; border-radius: 8px; background: var(--mo-bg); font-size: 12px; font-weight: var(--mo-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.mo-place { position: absolute; left: 14px; bottom: 12px; font-size: 10px; font-weight: var(--mo-b); letter-spacing: .2em; text-transform: uppercase; color: var(--mo-mute); }
.mo-cta { padding: 32px 24px 34px; text-align: center; background: var(--mo-card); }
.mo-go { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 99px; background: var(--mo-go-bg); color: var(--mo-go-fg); font-size: 14px; font-weight: var(--mo-b); }
.mo-foot { display: flex; justify-content: space-between; gap: 12px; padding: 22px 24px 30px; font-size: 11.5px; color: var(--mo-mute); }
.mo-foot b { color: var(--mo-fg); font-weight: var(--mo-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-foot span { white-space: nowrap; }