/* ========================================================================== Reisebüro Wandlitz: Design-System Alles kommt aus dem Logo: das Limettengrün des Schriftzugs, das dunkle Blattgrün der Palme, die Sonne in Orange und die runden, fetten Buchstaben. Baloo 2 nimmt diese Rundungen auf, Source Sans 3 trägt den Fließtext. Keine Farbverläufe, keine Emojis, keine kursive Serife als Schmuck. ========================================================================== */ @font-face { font-family: 'Baloo 2'; src: url('/assets/fonts/baloo2-latin.woff2') format('woff2'); font-weight: 500 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Source Sans 3'; src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212; } :root { /* Direkt aus dem Logo gemessen. */ --lime: #a6ce39; --lime-deep: #8fb62b; --lime-tint: #f0f6e0; --green: #00a650; --green-deep: #00693c; --green-dark: #0a3f27; --green-tint: #e4f2e9; --sun: #f8951d; --sun-deep: #e07d06; --sun-tint: #fdf0dd; --ink: #231f20; --ink-2: #4d4749; --ink-3: #726b6d; --paper: #fbfaf7; --paper-2: #ffffff; --linen: #f2efe7; --line: #ded9cd; --line-soft: #eae6dc; --font-head: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', sans-serif; --font-body: 'Source Sans 3', -apple-system, 'Segoe UI', Arial, sans-serif; --radius: 10px; --radius-lg: 18px; --shadow-1: 0 1px 2px rgba(35, 31, 32, .06); --shadow-2: 0 16px 40px rgba(35, 31, 32, .14); --container: 1220px; --pad: clamp(3.25rem, 6vw, 5.5rem); --ease: cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* clip auch auf : das mobile Menü ist position:fixed und entkäme dem clip des . */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 6.5rem; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; user-select: none; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -.005em; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.35rem, 1.3rem + 4.2vw, 4.15rem); } h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.85rem); } h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.42rem); letter-spacing: -.015em; } h4 { font-size: 1.05rem; letter-spacing: -.01em; } /* Betonung macht die Farbe, nicht ein Schriftwechsel. */ em, .accent { font-style: normal; font-weight: inherit; color: var(--green-deep); } .section--gruen em, .section--gruen .accent { color: var(--lime); } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } a { color: var(--green-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--green); } strong { font-weight: 600; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } ::selection { background: var(--lime); color: var(--ink); } :focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--green-deep); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; color: #fff; } .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .container--narrow { width: min(100% - 2.5rem, 800px); } .container--wide { width: min(100% - 2.5rem, 1400px); } .section { padding-block: var(--pad); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--sand { background: var(--linen); } .section--white { background: var(--paper-2); } .section--gruen { background: var(--green-deep); color: #fff; } .section--gruen h2, .section--gruen h3 { color: #fff; } .section--gruen em, .section--gruen .accent { color: #a8d5bf; } /* Nur Fließtext-Links werden weiß. Buttons behalten ihre eigene Farbe, sonst steht Weiß auf Weiß. */ .section--gruen a:not(.btn) { color: #fff; } .lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; } .section--gruen .lede { color: rgba(255, 255, 255, .84); } .muted { color: var(--ink-3); } .small { font-size: .92rem; } /* Zweispaltiger Abschnittskopf: Titel links, Erläuterung rechts daneben, darunter ein limettener Strich. Statt Kicker, Titel und Zeile gestapelt. */ .section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 4rem); align-items: end; padding-bottom: 1.4rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); border-bottom: 3px solid var(--lime); } .section-head--solo { grid-template-columns: 1fr; } .section-head h2 { margin: 0; } .section-head .lede { margin: 0; font-size: 1.03rem; color: var(--ink-2); } .section--gruen .section-head { border-bottom-color: rgba(166, 206, 57, .55); } .section--gruen .section-head .lede { color: rgba(255, 255, 255, .82); } @media (max-width: 820px) { .section-head { grid-template-columns: 1fr; align-items: start; } } /* ------------------------------------------------------------------ Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2; padding: .95rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s var(--ease); } .btn .icon { width: 1.05em; height: 1.05em; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--sun); color: var(--ink); } .btn--primary:hover { background: var(--sun-deep); color: var(--ink); } .btn--gruen { background: var(--green-deep); color: #fff; } .btn--gruen:hover { background: var(--green-dark); color: #fff; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--paper-2); border-color: var(--ink-3); color: var(--ink); } .btn--light { background: #fff; color: var(--green-dark); } .btn--light:hover { background: #eef3ef; color: var(--green-dark); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; } .btn--sm { padding: .68rem 1.05rem; font-size: .92rem; } .btn--block { width: 100%; } .icon { width: 1.25rem; height: 1.25rem; flex: none; } /* ------------------------------------------------------------------- Kopf */ .topbar { background: var(--green-dark); color: rgba(255, 255, 255, .82); font-size: .84rem; } .topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.5rem; } .topbar__claim { margin: 0; letter-spacing: .01em; } .topbar__links { margin: 0; display: flex; gap: 1.4rem; } .topbar__links a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .topbar__links a:hover { color: #fff; } .topbar__links .icon { width: .95rem; height: .95rem; opacity: .8; } @media (max-width: 860px) { .topbar__claim { display: none; } .topbar__inner { justify-content: center; } } @media (max-width: 520px) { .topbar__links a:nth-child(2) { display: none; } } .site-header { position: sticky; top: 0; z-index: 60; background: rgba(246, 245, 241, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line-soft); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.6rem; } .brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .brand img { height: 3.1rem; width: auto; } @media (max-width: 560px) { .brand img { height: 2.4rem; } } .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .7rem; border-radius: var(--radius); white-space: nowrap; font-size: .95rem; font-weight: 500; color: var(--ink); text-decoration: none; } .nav__link:hover { background: var(--green-tint); color: var(--green-dark); } .nav__link.is-active { color: var(--green-deep); font-weight: 600; } .nav__chev { width: .78rem; height: .78rem; transform: rotate(90deg); opacity: .5; } .nav__foot { display: none; } .nav__sub { position: absolute; top: calc(100% + .3rem); left: 0; z-index: 20; min-width: 15rem; padding: .5rem; margin: 0; list-style: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .16s, transform .16s var(--ease), visibility .16s; } .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; } .nav__sub a { display: block; padding: .5rem .7rem; border-radius: var(--radius); font-size: .93rem; color: var(--ink); text-decoration: none; } .nav__sub a:hover { background: var(--green-tint); color: var(--green-dark); } .nav__sub a.is-active { color: var(--green-deep); font-weight: 600; } .site-header__actions { display: flex; align-items: center; gap: .6rem; flex: none; } .nav-toggle { display: none; } @media (max-width: 1120px) { .nav__link { padding: .55rem .5rem; font-size: .9rem; } .header-cta { display: none; } } @media (max-width: 960px) { .nav { position: fixed; inset: 0 0 0 auto; width: min(23rem, 88vw); z-index: 90; background: var(--paper-2); border-left: 1px solid var(--line); padding: 5.5rem 1.5rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform .28s var(--ease); display: flex; flex-direction: column; } body.nav-open .nav { transform: none; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__item { border-bottom: 1px solid var(--line-soft); } .nav__link { padding: .95rem .2rem; font-size: 1.05rem; font-family: var(--font-head); font-weight: 600; } .nav__chev { margin-left: auto; } .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 .8rem .2rem; min-width: 0; } .nav__sub a { padding: .42rem 0; color: var(--ink-2); } .nav__foot { display: block; margin-top: auto; padding-top: 1.5rem; } .nav__phone { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .8rem; font-weight: 600; text-decoration: none; color: var(--green-deep); } .nav-toggle { display: inline-flex; align-items: center; gap: .45rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; } .nav-toggle__icon { display: inline-flex; } .nav-toggle__close { display: none; } body.nav-open .nav-toggle__open { display: none; } body.nav-open .nav-toggle__close { display: inline-flex; } .nav-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 53, 40, .42); } } /* --------------------------------------------------------------- Startseite */ .hero { position: relative; background: var(--green-dark); color: #fff; overflow: hidden; } /* Ganz leiser Lichtschein oben rechts, damit der dunkle Grund nicht flach wirkt. */ .hero::before { content: ''; position: absolute; right: -20rem; top: -22rem; width: 54rem; height: 54rem; border-radius: 50%; background: radial-gradient(circle, rgba(166, 206, 57, .13), rgba(166, 206, 57, 0) 70%); } .hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 5vw, 5rem); } .searchcard { background: var(--paper-2); border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.6vw, 2rem); box-shadow: var(--shadow-2); border-top: 5px solid var(--lime); } .searchcard--flat { box-shadow: none; border: 2px solid var(--line); border-top: 5px solid var(--lime); } .searchcard__title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); margin-bottom: 1rem; } .hero__text { max-width: 36rem; position: relative; z-index: 2; } .hero h1 { color: #fff; margin-bottom: .42em; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.1rem); line-height: 1.04; } .hero__lede { font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem); color: rgba(255, 255, 255, .84); max-width: 34rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; } .hero__alt { margin-top: 1.1rem; font-size: .96rem; color: rgba(255, 255, 255, .72); } .hero__alt a { color: var(--lime); font-weight: 600; text-decoration: none; } .hero__alt a:hover { color: #fff; text-decoration: underline; } /* Die Ueberschrift kommt zeilenweise von unten. Jede Zeile ist ein Fenster, der Text darin faehrt hoch. Die zweite Haelfte steht auf Limette, damit der Name haengen bleibt. */ .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; } .hero__title .line--accent > span { color: var(--lime); } .js .hero__title .line > span { transform: translateY(112%); } .js .hero.is-ready .hero__title .line > span { animation: heroLine .85s cubic-bezier(.16, .84, .3, 1) both; } .js .hero.is-ready .hero__title .line:nth-child(1) > span { animation-delay: .05s; } .js .hero.is-ready .hero__title .line:nth-child(2) > span { animation-delay: .13s; } .js .hero.is-ready .hero__title .line:nth-child(3) > span { animation-delay: .24s; } .js .hero.is-ready .hero__title .line:nth-child(4) > span { animation-delay: .32s; } @keyframes heroLine { from { transform: translateY(112%); } to { transform: translateY(0); } } .js .hero__lede, .js .hero__actions, .js .hero__alt { opacity: 0; } .js .hero.is-ready .hero__lede, .js .hero.is-ready .hero__actions, .js .hero.is-ready .hero__alt { animation: heroRise .7s ease both; } .js .hero.is-ready .hero__lede { animation-delay: .46s; } .js .hero.is-ready .hero__actions { animation-delay: .56s; } .js .hero.is-ready .hero__alt { animation-delay: .64s; } @keyframes heroRise { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } } /* Der Bildstapel: grosses Bild, kleines Bild darueber, Sonne dahinter. Beim Scrollen wandern die drei Ebenen verschieden schnell (--par in main.js). */ .hero__stack { position: relative; align-self: center; } .hero__sun { position: absolute; left: 50%; top: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(166, 206, 57, .2); z-index: 0; } .js .hero.is-ready .hero__sun { animation: heroSun 1.4s cubic-bezier(.16, .84, .3, 1) both; } @keyframes heroSun { from { transform: translate(-50%, -30%) scale(.55); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .hero__shot { position: relative; z-index: 1; margin: 0; will-change: transform; } .hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__shot--main img { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0, 0, 0, .42); } .hero__shot--small { position: absolute; z-index: 3; left: -3.5rem; bottom: -2.6rem; width: 13.5rem; background: var(--paper-2); border-radius: var(--radius); padding: .5rem .5rem .1rem; box-shadow: 0 20px 44px rgba(0, 0, 0, .38); } .hero__shot--small img { aspect-ratio: 3 / 2; border-radius: calc(var(--radius) - .35rem); } .hero__shot--small figcaption { padding: .5rem .3rem .55rem; color: var(--ink); font-size: .76rem; line-height: 1.3; font-weight: 700; } .hero__shot--small figcaption span { display: block; font-weight: 400; color: var(--muted); } .js .hero.is-ready .hero__shot { animation: heroShot 1s cubic-bezier(.16, .84, .3, 1) both; } .js .hero.is-ready .hero__shot--main { animation-delay: .18s; } .js .hero.is-ready .hero__shot--small { animation-delay: .5s; } @keyframes heroShot { from { opacity: 0; transform: translateY(2.2rem) scale(.96); } to { opacity: 1; transform: none; } } /* Beim Scrollen: jede Ebene bekommt ihren eigenen Versatz aus main.js. */ .hero.is-parallax .hero__shot, .hero.is-parallax .hero__sun { animation: none; opacity: 1; } .hero.is-parallax .hero__shot--main { transform: translate3d(var(--mx, 0px), calc(var(--par, 0) * 1px + var(--my, 0px)), 0); } .hero.is-parallax .hero__shot--small { transform: translate3d(calc(var(--mx, 0px) * -1.6), calc(var(--par, 0) * -.62px + var(--my, 0px) * -1.6), 0); } .hero.is-parallax .hero__sun { transform: translate(-50%, calc(-50% + var(--par, 0) * .3px)) ; } /* Fakten als schmales Limettenband. Keine Kacheln, keine Icons. */ .hero__facts { background: var(--lime); color: var(--ink); } .hero__facts ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem 2rem; list-style: none; margin: 0; padding: .95rem 0; } .hero__facts li { font-size: .93rem; line-height: 1.45; } @media (max-width: 1040px) { .hero__inner { grid-template-columns: 1fr; justify-items: start; } .hero__stack { order: -1; width: min(24rem, 76vw); align-self: center; justify-self: center; margin-bottom: 1.5rem; } } /* Auf dem Handy steht die Ueberschrift zuerst, und das kleine Bild rutscht nach rechts unten, damit es das grosse nicht zerschneidet. */ @media (max-width: 760px) { .hero__stack { order: 0; margin: 1.8rem 0 .8rem; width: 100%; } .hero__shot--small { left: auto; right: -.4rem; bottom: -1.6rem; width: 9.5rem; } .hero__shot--small figcaption { font-size: .7rem; } } @media (max-width: 760px) { .hero__facts ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) { .hero__facts ul { grid-template-columns: 1fr; } } /* Schnellsuche im Hero: Ziel wählen, direkt in die Buchungsstrecke. */ .quicksearch { background: var(--paper-2); border-radius: var(--radius-lg); padding: 1.15rem; box-shadow: var(--shadow-2); color: var(--ink); display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: end; max-width: 40rem; margin-top: 2.2rem; } .quicksearch label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; } .quicksearch select { width: 100%; font: inherit; font-size: 1.02rem; color: var(--ink); padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347554f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-right: 2.6rem; } @media (max-width: 560px) { .quicksearch { grid-template-columns: 1fr; } } /* Redaktioneller Einstieg: Bild und Text asymmetrisch, nicht als Karte. */ .intro__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; } /* Das Foto füllt seine Spalte über die volle Höhe des Textes: sonst steht oben links eine große leere Fläche. */ .intro__media { position: relative; } .intro__media img { border-radius: var(--radius-lg); width: 100%; height: 100%; object-fit: cover; min-height: 26rem; } .intro__stamp { position: absolute; right: -1.1rem; bottom: -1.1rem; background: var(--green-deep); color: #fff; border-radius: var(--radius-lg); padding: 1.05rem 1.25rem; max-width: 15rem; box-shadow: var(--shadow-2); } .intro__stamp strong { display: block; font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -.02em; } .intro__stamp span { font-size: .88rem; color: rgba(255, 255, 255, .82); } .intro__quote { font-family: var(--font-head); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.38; color: var(--green-deep); border-left: 2px solid var(--green-deep); padding-left: 1.2rem; margin: 0 0 1.4rem; } @media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; } .intro__stamp { right: 1rem; bottom: -1rem; } } /* Zahlenreihe als Fakten, keine Marketing-Kennzahlen. */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: 2.5rem; } .facts div { background: var(--paper); padding: 1.4rem 1.2rem; } .facts dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; } .facts dd { margin: 0; font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; letter-spacing: -.015em; } @media (max-width: 760px) { .facts { grid-template-columns: 1fr; } } /* Kachelmosaik: eine große, drei kleine. Bewusst nicht das uniforme Raster. */ .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .mosaic .tile--large { grid-column: span 2; grid-row: span 2; } @media (max-width: 900px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .mosaic .tile--large { grid-column: span 2; grid-row: span 1; } } @media (max-width: 560px) { .mosaic { grid-template-columns: 1fr; } .mosaic .tile--large { grid-column: span 1; } } .tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); min-height: 15rem; color: #fff; text-decoration: none; isolation: isolate; } .tile--large { min-height: 31rem; } .tile__media { position: absolute; inset: 0; z-index: -2; display: block; } .tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 28, 21, .86) 0%, rgba(11, 28, 21, .42) 45%, rgba(11, 28, 21, .05) 78%); } .tile:hover .tile__media img { transform: scale(1.05); } .tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; } .tile__kicker { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b7dcc7; } .tile__title { font-family: var(--font-head); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(8, 22, 16, .5); } .tile__text { font-size: .95rem; color: rgba(255, 255, 255, .88); max-width: 34ch; text-shadow: 0 1px 10px rgba(8, 22, 16, .5); } .tile--large .tile__text { max-width: 42ch; } /* Leistungsraster: Hairlines statt Karten, wirkt gedruckt. */ .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .services__item { background: var(--paper-2); padding: 1.7rem 1.5rem; } .services__item .icon { width: 1.6rem; height: 1.6rem; color: var(--green-deep); margin-bottom: .9rem; } .services__item h3 { font-size: 1.08rem; margin-bottom: .35em; } .services__item p { font-size: .95rem; color: var(--ink-2); margin: 0; } /* Ablauf als nummerierte Redaktionsliste mit Haarlinien. */ .steps { border-top: 1px solid var(--line); } .steps__item { display: grid; grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); align-items: start; } .steps__n { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--green-deep); letter-spacing: .04em; padding-top: .3rem; } .steps__item h3 { margin: 0; } .steps__item p { margin: 0; color: var(--ink-2); } @media (max-width: 780px) { .steps__item { grid-template-columns: auto minmax(0, 1fr); row-gap: .5rem; } .steps__item p { grid-column: 2; } } /* Team: keine Fotos vorhanden, also Monogramm statt Platzhaltergesicht. */ /* Wer beraet: links der Tisch, rechts die beiden Personen untereinander. */ .team-grid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; } .team-shot { margin: 0; } .team-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); display: block; } .team-shot figcaption { margin-top: .7rem; font-size: .9rem; color: var(--muted); } .team { display: grid; gap: 1.4rem; } @media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; } } .person { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; display: flex; gap: 1.2rem; } .person__mono { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); border: 1px solid var(--green-tint); display: grid; place-items: center; font-family: var(--font-head); font-weight: 650; font-size: 1.12rem; letter-spacing: .01em; } .person h3 { margin: 0 0 .1em; } .person__role { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); margin: 0 0 .7em; } .person p { font-size: .96rem; color: var(--ink-2); } .person__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .93rem; font-weight: 600; margin-top: .6rem; text-decoration: none; } .person__link .icon { width: 1rem; height: 1rem; } /* ------------------------------------------------------------ Unterseiten */ .page-hero { position: relative; color: #fff; isolation: isolate; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 30, 23, .9) 0%, rgba(12, 30, 23, .6) 55%, rgba(12, 30, 23, .38) 100%); } .page-hero__inner { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); max-width: 52rem; } .page-hero h1 { color: #fff; text-shadow: 0 2px 20px rgba(8, 22, 16, .45); } .page-hero .lede { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(8, 22, 16, .45); } .page-hero .eyebrow { color: #b7dcc7; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; } .page-hero--plain { background: var(--green-deep); } .page-hero--plain::after { display: none; } .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: .84rem; color: rgba(255, 255, 255, .72); } .crumbs li + li::before { content: '/'; margin-right: .5rem; opacity: .55; } .crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; } .crumbs a:hover { color: #fff; text-decoration: underline; } .page-hero--plain .crumbs { color: rgba(255, 255, 255, .7); } /* Fließtext auf Unterseiten */ .prose { max-width: 42rem; } .prose h2 { margin-top: 2.2rem; } .prose h2:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.1em; } .prose li { margin-bottom: .45em; } .prose--legal { max-width: 46rem; } .prose--legal h2 { font-size: 1.35rem; margin-top: 2.4rem; } .prose--legal h3 { font-size: 1.08rem; margin-top: 1.6rem; } .prose--legal p, .prose--legal li { font-size: .97rem; color: var(--ink-2); } .prose--legal a { word-break: break-word; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .checklist { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; } .checklist li { display: flex; gap: .7rem; align-items: flex-start; } .checklist .icon { width: 1.15rem; height: 1.15rem; color: var(--green-deep); flex: none; margin-top: .25rem; } /* Seitenkasten mit Kontakt, klebt beim Scrollen mit. */ .aside-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; position: sticky; top: 6.5rem; } .aside-box h3 { font-size: 1.15rem; } .aside-box p { font-size: .95rem; color: var(--ink-2); } .aside-box__phone { display: flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-size: 1.28rem; font-weight: 650; letter-spacing: -.02em; color: var(--green-deep); text-decoration: none; margin: .9rem 0; } .aside-box__phone .icon { width: 1.15rem; height: 1.15rem; } @media (max-width: 900px) { .aside-box { position: static; } } /* Karten (Reiseziele, Rubriken) */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; } .card { display: block; text-decoration: none; color: inherit; } .card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card__media img { transform: scale(1.04); } /* Name auf dem Bild wie die Karte im Schaufenster, nicht als Kopf einer Kachel. */ .card__name { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--lime); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1; padding: .55rem .95rem .7rem; border-top-right-radius: var(--radius); } .card:hover .card__name { background: var(--sun); } .card__body { display: block; padding: .9rem .1rem 0; } .card__kicker { display: block; font-size: .9rem; font-weight: 600; color: var(--green-deep); margin-bottom: .25rem; } .card__text { display: block; font-size: .97rem; color: var(--ink-2); } /* ------------------------------------------------------------ Suchmaske */ /* Dieselben Felder wie das Formular der Buchungsstrecke, nur in unserer Optik. */ .search__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .85rem; align-items: end; } .search__field { grid-column: span 4; min-width: 0; } .search__field--wide { grid-column: span 4; } .search__submit { grid-column: span 8; } .search__submit .btn { width: 100%; padding-block: 1.05rem; font-size: 1.05rem; } .search label { display: block; font-size: .85rem; font-weight: 600; color: var(--green-deep); margin-bottom: .3rem; } .search select, .search input { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); padding: .78rem .85rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--paper-2); min-width: 0; } .search select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.05rem; } .search select:focus, .search input:focus { border-color: var(--green); outline: none; } .search__note { margin: 1rem 0 0; font-size: .87rem; color: var(--ink-3); } @media (max-width: 980px) { .search__field, .search__field--wide { grid-column: span 6; } .search__submit { grid-column: span 12; } } @media (max-width: 620px) { .search__field, .search__field--wide { grid-column: span 12; } } /* ------------------------------------------- Eingebettete Buchungsstrecke */ /* Der Rahmen zeigt die Angebotsliste des Reisebüros. Ihr eigener Kopf mit Logo und Menü wird nach oben aus dem Ausschnitt geschoben, damit die Seite nicht zweimal denselben Kopf trägt. */ .frame { margin-top: 1.6rem; } /* Die Breite ist bewusst festgelegt: das Portal legt seinen Inhalt in einer festen Spalte (960, 768, 576 Pixel) mittig ab und laesst daneben seinen eigenen Bildhintergrund stehen. Wir waehlen die Rahmenbreite so, dass genau diese Spalte unseren Ausschnitt fuellt, und schneiden den Rest seitlich weg. */ .frame__crop { --frame-chrome: 195px; --frame-view: 1500px; --frame-bleed: 32px; position: relative; overflow: hidden; max-width: 960px; margin-inline: auto; height: var(--frame-view); border-radius: var(--radius-lg); border: 2px solid var(--line); background: var(--paper-2); transition: height .45s var(--ease); } /* Der Rahmen bekommt die volle Dokumenthoehe und keine eigene Scrollleiste. Sichtbar ist nur der Ausschnitt, den .frame__crop freigibt. */ /* Seitlich ein paar Pixel beschneiden: das Portal laesst dort seinen eigenen Bildhintergrund durchblitzen, sein Inhalt ist ohnehin mittig zentriert. */ .frame__crop iframe { position: absolute; left: calc(-1 * var(--frame-bleed)); top: calc(-1 * var(--frame-chrome)); width: calc(100% + 2 * var(--frame-bleed)); height: var(--frame-doc, 4200px); border: 0; overflow: hidden; } /* Weicher Auslauf am unteren Rand, solange noch etwas nachkommt. */ .frame:not(.is-full) .frame__crop::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper-2)); pointer-events: none; } /* Rahmen um eine fremde Maschine: keine Beschneidung noetig, die Maschine bringt keinen eigenen Kopf mit. Bei den Maschinen, die ihre Hoehe melden, waechst der Rahmen genau mit. */ .frame--engine iframe { width: 100%; height: var(--engine-height, 900px); border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); display: block; transition: height .3s var(--ease); } .frame--engine .frame__note { margin-top: .7rem; } @media (max-width: 760px) { .frame--engine iframe { height: var(--engine-height-m, var(--engine-height, 900px)); } } .frame__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 1rem; } .frame__note { margin: 0; font-size: .87rem; color: var(--ink-3); } .frame.is-full [data-frame-more] { display: none; } .frame--short .frame__crop { --frame-view: 1050px; } @media (max-width: 900px) { .frame__crop { --frame-chrome: 190px; --frame-view: 1100px; } .frame--short .frame__crop { --frame-view: 900px; } } /* Reiter fuer die Bereiche der Buchungsstrecke. */ .tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; } .tabs__btn { font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; padding: .6rem 1rem; border-radius: 999px; border: 2px solid var(--line); background: var(--paper-2); color: var(--ink); } .tabs__btn:hover { border-color: var(--green); } .tabs__btn.is-active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; } /* Kopf der Angebotsseite: knapp, damit die Suche gleich sichtbar ist. */ .angebote-head { background: var(--green-dark); color: #fff; padding-block: clamp(2rem, 4vw, 3rem); } .angebote-head h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); margin-bottom: .3em; } .angebote-head .lede { color: rgba(255, 255, 255, .86); max-width: 52rem; margin: 0; } .angebote-head .crumbs { margin-bottom: .9rem; } .angebote-head .crumbs, .angebote-head .crumbs a { color: rgba(255, 255, 255, .72); } .section--tight { padding-block: clamp(2rem, 4vw, 3rem); } /* Angebots-Panel: Weg in die Buchungsstrecke plus gleichwertige Alternative Telefon. Zwei Spalten, die zweite abgesetzt. */ .booking { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); } .booking__main { padding: clamp(1.8rem, 4vw, 2.8rem); } .booking__icon { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); margin-bottom: 1rem; } .booking__main h3 { margin-bottom: .45em; } .booking__main p { color: var(--ink-2); } .booking__link h3 { margin-bottom: .45em; }\n.booking__link p { color: var(--ink-2); } .booking__actions { margin-top: 1.6rem; } .booking__aside { padding: clamp(1.8rem, 4vw, 2.8rem); background: var(--green-tint); border-left: 1px solid var(--line); } .booking__aside h4 { font-size: 1.02rem; margin-bottom: .5em; } .booking__aside p { font-size: .94rem; color: var(--ink-2); } .booking__phone { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .6rem; font-family: var(--font-head); font-size: 1.3rem; font-weight: 650; letter-spacing: -.02em; color: var(--green-deep); text-decoration: none; } .booking__phone .icon { width: 1.15rem; height: 1.15rem; } @media (max-width: 820px) { .booking { grid-template-columns: 1fr; } .booking__aside { border-left: 0; border-top: 1px solid var(--line); } } /* Häufige Fragen */ .faq__list { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); font-weight: 600; letter-spacing: -.015em; } .faq__item summary::-webkit-details-marker { display: none; } .faq__chev { width: 1.1rem; height: 1.1rem; color: var(--green-deep); transform: rotate(90deg); transition: transform .2s var(--ease); flex: none; } .faq__item[open] .faq__chev { transform: rotate(-90deg); } .faq__answer { padding-bottom: 1.4rem; max-width: 60ch; } .faq__answer p { color: var(--ink-2); margin: 0; } /* Kontaktabschluss */ .contact-cta__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .contact-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .contact-cta__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .contact-cta__facts li { display: flex; gap: .85rem; align-items: flex-start; color: rgba(255, 255, 255, .88); font-size: .98rem; } .contact-cta__facts .icon { color: #a8d5bf; margin-top: .15rem; } @media (max-width: 900px) { .contact-cta__inner { grid-template-columns: 1fr; } } /* Urlaubsfinder-Teaser */ .finder-teaser__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .finder-teaser__media img { border-radius: var(--radius-lg); } @media (max-width: 900px) { .finder-teaser__inner { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- Kontaktseite */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .form { display: grid; gap: 1.1rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } } .field label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .35rem; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); } .field textarea { min-height: 9rem; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sun); outline: 2px solid var(--sun-tint); } .form__hint { font-size: .86rem; color: var(--ink-3); } .form__note { background: var(--green-tint); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: .92rem; color: var(--ink-2); } .hours { list-style: none; margin: 0; padding: 0; } .hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; } .hours li:first-child { border-top: 1px solid var(--line); } .hours strong { font-weight: 600; } .map { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--linen); } .map iframe { display: block; width: 100%; height: 22rem; border: 0; } /* ------------------------------------------------------------ Urlaubsfinder */ .finder { max-width: 58rem; margin-inline: auto; } .finder__bar { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 1.6rem; } .finder__bar span { display: block; height: 100%; background: var(--green-deep); width: 0; transition: width .35s var(--ease); } .finder__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } .finder__step { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .finder__back { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; font: inherit; font-size: .92rem; font-weight: 600; color: var(--green-deep); cursor: pointer; padding: .3rem; } .finder__back .icon { width: 1rem; height: 1rem; transform: scaleX(-1); } .finder__question h2 { margin-bottom: .3em; } .finder__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; margin-top: 1.8rem; } .finder__option { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 0; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; display: flex; flex-direction: column; } .finder__option:hover { border-color: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-2); } .finder__option.is-selected { border-color: var(--green-deep); box-shadow: 0 0 0 1px var(--green-deep); } .finder__option-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--linen); } .finder__option-media img { width: 100%; height: 100%; object-fit: cover; } .finder__option-label { display: block; padding: .85rem 1rem; font-family: var(--font-head); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; } .finder__results { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: 2rem; } .finder__result { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .finder__result img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .finder__result-body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; } .finder__match { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); margin-bottom: .5rem; } .finder__result h3 { margin-bottom: .35em; } .finder__result p { font-size: .94rem; color: var(--ink-2); margin-bottom: 1.1em; } .finder__result .btn { margin-top: auto; } .finder__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.2rem; } /* ------------------------------------------------------------------ Fußzeile */ .footer { background: var(--green-dark); color: rgba(255, 255, 255, .74); padding-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: 0; } .footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3rem); padding-bottom: 3rem; } .footer__name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 650; letter-spacing: -.02em; color: #fff; margin-bottom: .6rem; } .footer address { font-style: normal; margin-bottom: 1rem; } .footer__contact { display: grid; gap: .45rem; margin-bottom: 1rem; } .footer__contact a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 500; } .footer__contact a:hover { text-decoration: underline; } .footer__contact .icon { width: 1.05rem; height: 1.05rem; color: #a8d5bf; } .footer__hours { font-size: .92rem; } .footer__col h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #a8d5bf; margin-bottom: 1rem; font-family: var(--font-body); font-weight: 600; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .footer__col a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .95rem; } .footer__col a:hover { color: #fff; text-decoration: underline; } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; } .footer__bottom p { margin: 0; } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0; } .footer__legal a { color: rgba(255, 255, 255, .78); text-decoration: none; } .footer__legal a:hover { color: #fff; text-decoration: underline; } @media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } } /* Feste Leiste unten, nur Handy. */ .quickbar { display: none; } @media (max-width: 720px) { .quickbar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--paper-2); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .quickbar__item { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem .7rem; font-size: .74rem; font-weight: 600; color: var(--ink); text-decoration: none; } .quickbar__item .icon { width: 1.25rem; height: 1.25rem; color: var(--green-deep); } .quickbar__item + .quickbar__item { border-left: 1px solid var(--line-soft); } body { padding-bottom: 4.2rem; } .footer { margin-bottom: 0; } } /* --------------------------------------------------------- Einblendungen */ .reveal { opacity: 1; } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn:hover, .card:hover, .tile:hover .tile__media img { transform: none; } } /* Wer im System weniger Bewegung eingestellt hat, sieht denselben Hero ohne Animation und ohne Parallaxe. */ @media (prefers-reduced-motion: reduce) { .js .hero__title .line > span, .js .hero__lede, .js .hero__actions, .js .hero__alt, .hero__shot, .hero__sun { animation: none !important; opacity: 1 !important; transform: none !important; } .hero.is-parallax .hero__shot--small { position: absolute; transform: none; } }