/* ============================================================ TIPI — Mobile layout (≤ 680px) Translates the Claude Design mobile prototype to plain HTML. Loaded after style.css; only the default hide rules sit outside the media query. ============================================================ */ /* Hidden by default on all screen sizes; shown inside the MQ */ .mob-home, .mob-tabs, .mob-only, .mob-home-alt { display: none; } @media (max-width: 680px) { /* ── Desktop nav off; mob-tabs is unaffected by this rule ── */ nav:not(.mob-tabs) { display: none !important; } .page { padding-top: 0; } /* ============================================================ HOME GRID (index.html) 2 × 3 full-viewport colored tiles ============================================================ */ .mob-home { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); position: fixed; inset: 0; z-index: 200; } .mob-home__cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 16px 18px; background: var(--swatch); color: #1a1a1a; text-decoration: none; overflow: hidden; font-family: var(--font-display); -webkit-tap-highlight-color: transparent; transition: filter 180ms ease; } .mob-home__cell:active { filter: brightness(1.08); } .mob-home__cell.is-tipi { color: #fff; } .mob-home__cell.is-tipi h3 { letter-spacing: 0.18em; } .mob-home__num { font-size: 11px; letter-spacing: 0.18em; color: rgba(0,0,0,0.5); font-family: var(--font-display); } .mob-home__cell.is-tipi .mob-home__num { color: rgba(255,255,255,0.6); } .mob-home__cell h3 { font-size: 20px; font-weight: 400; line-height: 1.05; letter-spacing: -0.005em; position: relative; z-index: 2; margin: 0; } /* Decorative SVG illustrations (bottom-right of each tile) */ .mob-home__illo { position: absolute; bottom: -8px; right: -8px; width: 56%; height: 56%; pointer-events: none; fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } /* CSS-triangle on the TIPI tile */ .mob-home__tri { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%); z-index: 1; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 52px solid rgba(255,255,255,0.88); } /* Lockup band pinned to bottom of the grid */ .mob-home__lockup { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 9.5px; letter-spacing: 0.22em; color: rgba(0,0,0,0.5); padding: 7px 16px; background: rgba(255,255,255,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; z-index: 5; font-family: var(--font-display); } /* Hide desktop home content when grid is showing */ .home-hero { display: none; } /* ============================================================ ALT MOBILE HOME (body.mob-alt-home on index.html) Image hero + bottom tab bar instead of the colored grid. Toggle by adding/removing class="mob-alt-home" on . ============================================================ */ body.mob-alt-home .mob-home { display: none; } body.mob-alt-home .mob-home-alt { display: flex; } body.mob-alt-home[data-page="tipi"] .mob-tabs { display: flex !important; } .mob-home-alt { height: calc(100vh - 66px); background: url('../images/Bewegung Mobile.svg') center / 100% auto no-repeat; background-color: #fff; position: relative; align-items: flex-end; padding: 0 22px 28px; } .mob-home-alt__text { position: relative; z-index: 1; color: #fff; font-family: var(--font-display); } .mob-home-alt__text h1 { font-size: 30px; font-weight: 400; letter-spacing: -0.005em; margin: 0 0 6px; } .mob-home-alt__text p { font-size: 14px; line-height: 1.5; opacity: 0.88; margin: 0; } /* ============================================================ SECTION HERO (tanz / cantienica / raum) Full-bleed, no nav-height offset ============================================================ */ .tanz-hero { background-image: url('../images/tanz_mobile.jpg'); } .cantienica-hero { background-image: url('../images/cantienica_mobile.jpg'); } .section-hero { height: 56vh; min-height: 300px; padding: 0 22px 26px; align-items: flex-end; } .section-hero::before { opacity: 0.55; } .hero-text h1 { font-size: 30px; font-weight: 400; line-height: 1.05; margin-bottom: 10px; } .hero-text p { font-size: 14px; line-height: 1.5; max-width: 28ch; } .hero-squiggle { display: none; } .hero-overlay-line { display: none; } /* Desktop content block — tighter on mobile */ .content-section { padding: 24px 22px 20px; max-width: 100%; } .content-section h2 { font-size: 22px; margin-bottom: 10px; } .content-section p { font-size: 14px; line-height: 1.65; } /* Angebote: no hero on mobile */ body[data-page="angebote"] .section-hero { display: none; } /* Kontakt: restyle existing page wrapper */ .kontakt-page { padding: 22px 22px 0; min-height: auto; } .kontakt-page h1 { font-size: 30px; font-weight: 400; letter-spacing: -0.005em; margin-bottom: 10px; } /* ============================================================ MOBILE-ONLY BLOCKS (.mob-only) ============================================================ */ .mob-only { display: block; } /* ── Schedule + price detail ── */ .mob-detail { padding: 4px 22px 110px; font-family: var(--font-display); } .mob-detail h3 { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; color: #1a1a1a; margin: 20px 0 8px; } .mob-detail .schedule { list-style: none; padding: 0; margin: 0; } .mob-detail .schedule li { display: grid; grid-template-columns: 88px 1fr auto; gap: 6px; padding: 11px 0; border-bottom: 1px solid #eee; font-size: 13.5px; align-items: baseline; } .mob-detail .schedule li b { font-weight: 500; } .mob-detail .schedule li span { color: #666; font-size: 12.5px; } .mob-detail dl { display: grid; grid-template-columns: 1fr 1.4fr; row-gap: 8px; column-gap: 12px; font-size: 13.5px; line-height: 1.5; margin: 0; } .mob-detail dt { color: #1a1a1a; } .mob-detail dd { color: #666; margin: 0; } /* ── Angebote intro block (replaces desktop content) ── */ .mob-angebote-intro { padding: 22px 22px 16px; font-family: var(--font-display); } .mob-angebote-intro .kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-angebote); margin-bottom: 10px; } .mob-angebote-intro h2 { font-size: 22px; font-weight: 400; line-height: 1.1; margin-bottom: 10px; color: #1a1a1a; } .mob-angebote-intro p { font-size: 14px; line-height: 1.55; color: #666; } /* ── Course cards (Angebote) ── */ .mob-cards { padding: 0 22px 110px; display: grid; grid-template-columns: 1fr; gap: 16px; font-family: var(--font-display); } .mob-card { background: #f5f2ec; padding: 18px; position: relative; overflow: hidden; } .mob-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--swatch, #ccc); } .mob-card__img { width: calc(100% + 36px); margin: -18px -18px 10px; } .mob-card h4 { font-size: 17px; font-weight: 400; margin: 10px 0 0; } .mob-card .sub { color: #666; font-size: 13px; margin-top: 3px; } .mob-card ul { list-style: none; padding: 0; margin-top: 10px; font-size: 13px; line-height: 1.7; color: #666; } /* ── Kontakt card ── */ .mob-kontakt-extra { font-family: var(--font-display); } .mob-kontakt-extra .intro { font-size: 14px; line-height: 1.55; color: #666; margin-bottom: 22px; max-width: 30ch; } .mob-kontakt__card { background: #f5f2ec; padding: 20px; position: relative; overflow: hidden; margin-bottom: 18px; } .mob-kontakt__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--color-kontakt); } .mob-kontakt__field { padding: 12px 0; border-bottom: 1px solid #e9e3d2; font-size: 14.5px; } .mob-kontakt__field:last-child { border-bottom: none; } .mob-kontakt__field label { display: block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #666; margin-bottom: 3px; } .mob-kontakt__field a { color: inherit; text-decoration: none; } .mob-kontakt-sig { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #666; line-height: 1.5; padding-bottom: 110px; } .mob-kontakt-sig b { color: #1a1a1a; } .mob-kontakt-sig__tri { flex-shrink: 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--color-tipi); } /* ============================================================ BOTTOM TAB BAR ============================================================ */ /* Hide bottom tabs on the home page — the grid IS the navigation */ body[data-page="tipi"] .mob-tabs { display: none !important; } .mob-tabs { display: flex !important; position: fixed; top: auto !important; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; z-index: 50; padding-bottom: env(safe-area-inset-bottom, 0px); } .mob-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2px 8px; background: #fff; border: none; cursor: pointer; font-family: var(--font-display); height: 66px; text-decoration: none; min-width: 0; overflow: hidden; -webkit-tap-highlight-color: transparent; } .mob-tab__stripe { display: block; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 12px; background: var(--swatch); flex-shrink: 0; transition: height 220ms cubic-bezier(.4,0,.2,1); } .mob-tab__label { font-size: 10.5px; letter-spacing: 0.04em; color: #1a1a1a; text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; position: relative; z-index: 1; } .mob-tab.is-active .mob-tab__stripe { height: 100%; } .mob-tab.is-active .mob-tab__label { font-weight: 500; } }