/* ============================================================ Zeltverleih Armbruster — Design System Brand cyan kept, warmed with amber/gold + ivory cream. Schrift: Libre Franklin fuer alles, variabel, selbst gehostet (seit 21.09.2026; vorher Fraunces + Inter). ============================================================ */ /* Schriften: assets/fonts/fonts.css wird im vor dieser Datei geladen (kein @import, das blockiert). */ /* ---------- Tokens ---------- */ :root{ /* surfaces — warm ivory instead of cold white */ --paper:#FBF7F0; --paper-2:#F4ECDD; --paper-3:#EFE5D3; --card:#FFFFFF; --ink:#211D18; --ink-soft:#574F45; --ink-mute:#6E6456; /* brand cyan (kept from logo) */ --brand:#159FC4; --brand-deep:#0C5468; --brand-tint:#E4F3F8; /* warmth — string-light amber / gold */ --amber:#C0883B; --amber-deep:#9A6A28; --amber-tint:#F6ECD8; /* nature accent (Schwarzwald) */ --moss:#46583F; --line:rgba(33,29,24,.12); --line-strong:rgba(33,29,24,.20); --shadow-sm:0 1px 2px rgba(33,29,24,.05), 0 4px 10px -3px rgba(33,29,24,.08); --shadow-md:0 2px 4px rgba(33,29,24,.05), 0 12px 26px -8px rgba(33,29,24,.14); --shadow-lg:0 6px 14px -6px rgba(33,29,24,.12), 0 30px 60px -18px rgba(33,29,24,.24); --shadow-xl:0 10px 24px -10px rgba(33,29,24,.16), 0 44px 80px -24px rgba(33,29,24,.30); --r:8px; /* ein Radius fuer alles */ --r-sm:var(--r); --r-md:var(--r); --r-lg:var(--r); --r-xl:var(--r); --r-pill:var(--r); --container:1200px; --gap:clamp(1rem,3vw,2rem); --section-y:clamp(4rem,9vw,8rem); --font-display:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Helvetica,Arial,sans-serif; --font-text:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Helvetica,Arial,sans-serif; --z-nav:50; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-text); color:var(--ink); background:var(--paper); line-height:1.65; font-size:clamp(1rem,.97rem + .2vw,1.075rem); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,picture,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul,ol{list-style:none;padding:0} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r)} /* skip link — visible only on keyboard focus */ .skip-link{position:fixed;top:0;left:0;z-index:100;transform:translateY(-120%); background:var(--brand);color:#fff;font-weight:600;padding:.75rem 1.2rem;border-radius:0 0 var(--r-sm) 0; transition:transform .2s ease} .skip-link:focus{transform:translateY(0)} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.02em;color:var(--ink)} .h-display{font-size:clamp(2.6rem,1.7rem + 4.4vw,5rem);font-weight:600;line-height:1.04;letter-spacing:-.03em} h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem)} h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)} .serif-i{font-style:italic} .lead{font-size:clamp(1.1rem,1.02rem + .5vw,1.4rem);color:var(--ink-soft);line-height:1.5} p{max-width:68ch} .eyebrow{ font-family:var(--font-text);font-weight:600;font-size:.8rem; letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep); display:inline-flex;align-items:center;gap:.6rem; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);border-radius:2px} .eyebrow.center::after{content:"";width:26px;height:2px;background:var(--amber);border-radius:2px} .eyebrow.center{justify-content:center} /* ---------- Layout ---------- */ .container{width:min(100% - 3rem,var(--container));margin-inline:auto} .container-wide{width:min(100% - 3rem,1380px);margin-inline:auto} .section{padding-block:var(--section-y)} .section-tight{padding-block:clamp(2.5rem,5vw,4rem)} .bg-paper-2{background:linear-gradient(180deg,#F5EEE1,#EFE5D2)} .bg-ink{background:radial-gradient(120% 85% at 50% -8%,rgba(192,136,59,.16),transparent 58%),#1B1813;color:#F3ECDF} .bg-ink h2,.bg-ink h3{color:#FBF7F0} .bg-brand-deep{background:var(--brand-deep);color:#EAF6FA} .center{text-align:center} .section-head{max-width:62ch} .section-head.center{margin-inline:auto} .section-head .lead{margin-top:1rem} .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.95rem 1.6rem;border-radius:var(--r-md);font-weight:600;font-size:1rem; letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease; white-space:nowrap;cursor:pointer; } .btn svg{width:1.15em;height:1.15em} .btn-primary{background:var(--amber);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(192,136,59,.32)} .btn-primary:hover{background:var(--amber-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px rgba(154,106,40,.42);transform:translateY(-2px)} .btn-brand{background:var(--brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 22px rgba(21,159,196,.3)} .btn-brand:hover{background:var(--brand-deep);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)} .btn-ghost:hover{border-color:var(--ink);background:rgba(33,29,24,.04)} /* frosted glass button — used over images (hero, CTA band) */ .btn-light{background:#fff;color:var(--ink);border:1px solid #fff;box-shadow:0 8px 22px rgba(0,0,0,.18)} .btn-light:hover{background:var(--paper-2);border-color:var(--paper-2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22)} .btn-lg{padding:1.1rem 2rem;font-size:1.05rem} .btn-block{width:100%} /* ---------- Header / Nav ---------- */ .site-header{position:sticky;top:0;z-index:var(--z-nav);isolation:isolate; background:rgba(251,247,240,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 rgba(33,29,24,.08); transition:background-color .35s ease,box-shadow .35s ease} /* Milchglas: Weichzeichner auf einem Pseudo-Element, damit feste Kinder nicht den Bezugsrahmen verlieren */ .site-header::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)} .site-header.scrolled{background:rgba(251,247,240,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 rgba(33,29,24,.1)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem} .brand{display:flex;align-items:center;gap:.7rem} /* original logo triangles (freigestellt aus dem Originallogo) */ .brand-mark{flex:none;display:block} .brand-mark img{display:block;height:48px;width:auto} .footer-brand .brand-mark img{height:54px} .brand-word{display:flex;flex-direction:column;line-height:1} .brand-word .bw-1{font-family:var(--font-display);font-weight:600;font-size:1.55rem;color:var(--ink);letter-spacing:-.01em} /* Sperrung so gewaehlt, dass ARMBRUSTER exakt so breit ist wie Zeltverleih (Libre Franklin, gemessen 21.09.2026) */ .brand-word .bw-2{font-family:var(--font-text);font-weight:600;font-size:.84rem;letter-spacing:.224em;margin-right:-.224em;text-transform:uppercase;color:var(--brand);margin-top:.18rem} .footer-brand .brand-word .bw-1{color:#FBF7F0} .footer-brand .brand-mark{height:58px} .nav-links{display:flex;align-items:center;gap:.3rem;margin-left:auto} .nav-links a{position:relative;padding:.55rem .85rem;border-radius:var(--r);font-weight:500;font-size:.97rem;color:var(--ink-soft);transition:color .2s,background-color .2s} .nav-links a:hover{color:var(--ink);background:rgba(33,29,24,.05)} /* Aktive Seite: Unterstrich im Logoblau (funktionale Linie), kein Rahmen */ .nav-links a[aria-current="page"]{color:var(--ink)} .nav-links a[aria-current="page"]::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;background:var(--brand);border-radius:1px} .mn-link[aria-current="page"]{color:var(--brand-deep)} .nav-links a[href="kontakt.html"]{color:var(--brand-deep);font-weight:600} .nav-links a[href="kontakt.html"]:hover,.nav-links a[href="kontakt.html"][aria-current="page"]{color:#fff;background:var(--brand)} .nav-cta{display:flex;align-items:center;gap:.6rem} .nav-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--brand-deep);padding:.5rem .6rem;border-radius:var(--r-sm)} .nav-phone:hover{background:var(--brand-tint)} .nav-phone svg{width:1.05em;height:1.05em} .nav-toggle{display:none;width:46px;height:46px;border-radius:var(--r-sm);align-items:center;justify-content:center} .nav-toggle svg{width:26px;height:26px} /* mobile nav */ .mobile-nav{position:fixed;inset:0;z-index:60;background:var(--paper);transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;padding:1.2rem;visibility:hidden} .mobile-nav.open{transform:translateX(0);visibility:visible} .mobile-nav .mn-top{display:flex;justify-content:space-between;align-items:center} .mobile-nav a.mn-link{font-family:var(--font-display);font-size:1.8rem;padding:.5rem 0;border-bottom:1px solid var(--line);color:var(--ink)} .mobile-nav .mn-links{margin-top:1.5rem;display:flex;flex-direction:column} .mobile-nav .mn-foot{margin-top:auto;display:grid;gap:.7rem} /* ---------- Hero ---------- */ .hero{position:relative;isolation:isolate;min-height:100svh;margin-top:calc(-1 * var(--kopf,78px));padding-top:var(--kopf,78px);display:flex;align-items:center;color:#fff;overflow:hidden} /* Hero-Bild: weicher Einzug beim Laden, danach ein kaum merkliches Atmen (auf dem Rahmen, Parallax bleibt auf dem Bild) */ .hero-media{position:absolute;inset:0;z-index:-2;transform-origin:50% 45%;will-change:transform} @media (prefers-reduced-motion:no-preference){ .hero-media{animation:hero-einzug 1.9s cubic-bezier(.22,1,.36,1) both,hero-atmen 26s ease-in-out 1.9s infinite alternate} } @keyframes hero-einzug{from{transform:scale(1.1)}to{transform:scale(1)}} @keyframes hero-atmen{from{transform:scale(1)}to{transform:scale(1.06)}} .hero-media img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform} .hero::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(125% 95% at 50% 8%, rgba(15,12,9,.12), transparent 52%), linear-gradient(180deg,rgba(15,12,9,.62) 0%,rgba(15,12,9,.34) 34%,rgba(15,12,9,.7) 74%,rgba(12,9,6,.92) 100%)} .hero-inner{padding-top:clamp(1.5rem,4vh,5.5rem);padding-bottom:clamp(1.5rem,4vh,5.5rem);padding-inline:clamp(0rem,2vw,2.5rem)} .hero h1{color:#fff;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.35)} .hero .lead{color:rgba(255,255,255,.92);max-width:54ch;margin-top:1.3rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem} .hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem} .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);padding:.45rem .9rem;border-radius:var(--r-pill);font-size:.85rem;font-weight:500} .hero-badge svg{width:1.05em;height:1.05em;color:var(--amber-tint)} /* trust strip — frosted glass bar overlapping the hero image */ .trust{position:relative;z-index:3;margin-top:clamp(-104px,-7vw,-66px)} .trust-row{display:grid;grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%); border:1px solid rgba(255,255,255,.55);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .trust-cell{background:transparent;padding:1.5rem 1.2rem;text-align:center;border-right:1px solid rgba(33,29,24,.1)} .trust-cell:last-child{border-right:none} .trust-cell .n{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem+1.4vw,2.3rem);color:var(--brand-deep);font-weight:600;line-height:1} .trust-cell .t{font-size:.85rem;color:var(--ink-soft);margin-top:.4rem;letter-spacing:.02em} /* ---------- Value cards ---------- */ .grid{display:grid;gap:var(--gap)} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .feature{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .feature .ico{width:52px;height:52px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;background:var(--brand-tint);color:var(--brand-deep);margin-bottom:1.2rem} .feature .ico svg{width:25px;height:25px} /* refined icon treatment on the dark section */ .bg-ink .feature .ico{background:rgba(21,159,196,.12);border:1px solid rgba(21,159,196,.45);color:#8bd8ef;border-radius:var(--r)} .bg-ink .feature:hover .ico{background:rgba(21,159,196,.2);border-color:rgba(21,159,196,.7)} .feature h3{font-size:1.2rem;margin-bottom:.5rem} .feature p{color:var(--ink-soft);font-size:.97rem} /* ---------- Split / intro ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split.rev{direction:rtl} .split.rev>*{direction:ltr} .split-media{position:relative} .split-media img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover} .split-media .float-card{position:absolute;bottom:-22px;left:-22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.2rem;box-shadow:var(--shadow-md);max-width:240px} .split-media .float-card .fc-top{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink)} .split-media .float-card .fc-top svg{width:1.3em;height:1.3em;color:var(--amber)} .split-media .float-card p{font-size:.85rem;color:var(--ink-soft);margin-top:.3rem} .checklist{display:grid;margin-top:1.8rem} .checklist li{padding:1rem 0;border-bottom:1px solid var(--line)} .checklist li:first-child{border-top:1px solid var(--line)} .checklist span{display:block;color:var(--ink-soft);font-size:.97rem} .checklist b{display:block;color:var(--ink);font-weight:600;font-size:1.05rem;margin-bottom:.2rem} /* ---------- Occasions ---------- */ .occasion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .offer-grid .occasion{aspect-ratio:4/3} /* Der Button "Alle Mietartikel ansehen" steht in der letzten freien Rasterzelle, mittig, kleiner als die Zelle. Weniger rund als die uebrigen Buttons, damit er zu den Bildkacheln passt. */ .offer-cta{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3} @media (max-width:760px){.offer-cta{aspect-ratio:auto;padding:.5rem 0}} .occasion{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-md)} .occasion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .occasion::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.5) 64%,rgba(0,0,0,.85) 100%)} .occasion:hover img{transform:scale(1.06)} .occasion .oc-body{position:relative;z-index:1;padding:1.3rem} .occasion h3{color:#fff;font-size:1.3rem} .occasion p{font-size:.85rem;color:rgba(255,255,255,.85);margin-top:.2rem} /* ---------- Tent type cards ---------- */ .tent-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s} .tent-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)} .tent-card .tc-img{aspect-ratio:4/3;overflow:hidden} .tent-card .tc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .tent-card:hover .tc-img img{transform:scale(1.05)} .tent-card .tc-body{padding:1.5rem;display:flex;flex-direction:column;flex:1} .tent-card h3{font-size:1.35rem;margin-bottom:.4rem} .tent-card .tag{display:inline-block;align-self:flex-start;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-tint);padding:.3rem .7rem;border-radius:var(--r-pill);margin-bottom:.9rem} .tent-card p{color:var(--ink-soft);font-size:.95rem} .tent-card .specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .tent-card .specs span{font-size:.8rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);padding:.3rem .6rem;border-radius:var(--r-sm)} .tent-card .tc-link{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--brand-deep)} .tent-card .tc-link svg{width:1.1em;height:1.1em;transition:transform .2s} .tent-card:hover .tc-link svg{transform:translateX(4px)} /* ---------- Catalog (Mietartikel) ---------- */ .cat-toc{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:2rem;margin-bottom:clamp(2rem,4vw,3rem)} /* Sprungleiste: auf Kundenwunsch groesser und auffaelliger */ .cat-toc a{padding:.8rem 1.4rem;border-radius:var(--r-md);border:1.5px solid var(--line); font-weight:600;font-size:1rem;color:var(--ink);background:var(--card); box-shadow:0 1px 2px rgba(36,31,26,.05);transition:.2s} .cat-toc a:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-tint); transform:translateY(-1px);box-shadow:0 3px 10px rgba(21,159,196,.16)} .cat-block{scroll-margin-top:100px} .cat-block+.cat-block{margin-top:clamp(2.5rem,5vw,4rem)} .cat-header{display:flex;align-items:center;gap:1rem;padding-bottom:1.1rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)} .cat-header .ico{flex:none;width:52px;height:52px;border-radius:var(--r);background:var(--amber-tint);color:var(--amber-deep);display:flex;align-items:center;justify-content:center} .cat-header .ico svg{width:27px;height:27px} .cat-header h2{font-size:clamp(1.5rem,1.2rem+1.2vw,2.1rem)} .cat-header p{font-size:.92rem;color:var(--ink-mute);margin-top:.15rem} .item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.7rem} .item{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.1rem .95rem 1.25rem;transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s} .item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand);transition:width .2s} .item:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px);background:var(--brand-tint)} .item:hover::before{width:6px} .item .it-name{font-weight:600;font-size:.98rem;line-height:1.3} .item .it-sub{font-size:.82rem;color:var(--ink-mute);margin-top:.15rem} /* ---------- Accordion (Mietartikel) ---------- */ .acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1rem;background:var(--card);box-shadow:var(--shadow-sm);scroll-margin-top:90px} .acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;text-align:left;cursor:pointer;background:var(--brand-tint);transition:background-color .2s} .acc-head:hover{background:#d6edf5} .acc-head .acc-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1rem+.7vw,1.5rem);color:var(--ink)} .acc-head .acc-sub{display:block;font-family:var(--font-text);font-weight:500;font-size:.88rem;color:var(--ink-soft);margin-top:.2rem} .acc-pm{flex:none;width:36px;height:36px;border-radius:var(--r);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .3s} .acc-pm svg{width:20px;height:20px} .acc.open .acc-pm{transform:rotate(45deg)} .acc-body{max-height:0;overflow:hidden;transition:max-height .45s ease} .acc-inner{padding:1.5rem} .acc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.4rem} .acc-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)} .price-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.96rem} .price-table caption{text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.1rem;margin-bottom:.5rem;color:var(--ink)} .price-table th,.price-table td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)} .price-table th{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);font-weight:600} .price-table td:last-child,.price-table th:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--brand-deep)} .price-table tr:hover td{background:var(--paper-2)} .spec-list{display:grid;gap:.3rem;margin:.6rem 0 1rem;color:var(--ink-soft);font-size:.95rem} .price-note{font-size:.85rem;color:var(--ink-mute);margin-top:.5rem} @media(max-width:640px){.acc-photos{grid-template-columns:1fr 1fr}} /* ---------- Gallery ---------- */ .gal-filter button:hover{border-color:var(--brand)} .gal-filter button.active{background:var(--ink);color:#fff;border-color:var(--ink)} .masonry{columns:4;column-gap:1rem} .masonry .gitem{break-inside:avoid;margin-bottom:1rem;border-radius:var(--r-md);overflow:hidden;position:relative;cursor:zoom-in;background:var(--paper-2)} .masonry .gitem img{width:100%;transition:transform .5s ease,filter .3s ease;display:block} .masonry .gitem:hover img{transform:scale(1.04)} .masonry .gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.3));opacity:0;transition:opacity .3s} .masonry .gitem:hover::after{opacity:1} .gal-cap{position:absolute;left:.8rem;bottom:.7rem;z-index:1;color:#fff;font-size:.82rem;font-weight:500;opacity:0;transform:translateY(6px);transition:.3s;text-shadow:0 1px 6px rgba(0,0,0,.6)} .masonry .gitem:hover .gal-cap{opacity:1;transform:none} .gitem.hide{display:none} /* lightbox */ .lightbox{position:fixed;inset:0;z-index:90;background:rgba(15,12,9,.92);display:none;align-items:center;justify-content:center;padding:1.2rem} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:86vh;border-radius:var(--r-sm);box-shadow:var(--shadow-lg)} .lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;transition:.2s} .lb-btn:hover{background:rgba(255,255,255,.25)} .lb-prev{left:1.2rem}.lb-next{right:1.2rem} .lb-close{top:1.2rem;right:1.2rem;transform:none} .lb-btn svg{width:26px;height:26px} /* ---------- References ---------- */ .ref-marquee{overflow:hidden;padding:8px 0 18px;margin-bottom:-18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ref-track{display:flex;gap:1rem;width:max-content;animation:marquee 48s linear infinite} .ref-marquee:hover .ref-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} .ref-chip{flex:none;display:flex;flex-direction:column;justify-content:center;min-width:210px;height:96px;padding:0 1.4rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm)} .ref-chip .rc-name{font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink);line-height:1.1} .ref-chip .rc-meta{font-size:.78rem;color:var(--ink-mute);margin-top:.25rem} /* logo marquee items — full colour, lift on hover */ .ref-logo{flex:none;width:186px;height:120px;display:flex;align-items:center;justify-content:center;padding:1rem 1.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .ref-logo img{max-width:100%;max-height:100%;object-fit:contain} .ref-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand)} /* logo wall grid (references page) — full colour, lift on hover */ .logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem} .logo-cell{display:flex;align-items:center;justify-content:center;height:128px;padding:1.1rem 1.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .logo-cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)} .logo-cell img{max-width:100%;max-height:100%;object-fit:contain} .ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem} .ref-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.3rem;transition:.2s} .ref-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .ref-card .rc-name{font-family:var(--font-display);font-weight:600;font-size:1.12rem;line-height:1.15} .ref-card .rc-meta{font-size:.82rem;color:var(--ink-mute);margin-top:.3rem} .ref-card .rc-tag{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-deep);margin-top:.6rem} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} .step{position:relative;padding:1.8rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)} .step h3{font-size:1.25rem;margin:0 0 .5rem} .step p{color:var(--ink-soft);font-size:.95rem} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin-inline:auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;text-align:left;font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,1rem+.4vw,1.3rem);color:var(--ink)} .faq-q .pm{flex:none;width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:.3s} .faq-q .pm svg{width:18px;height:18px;transition:transform .3s} .faq-item.open .pm{background:var(--brand);border-color:var(--brand);color:#fff} .faq-item.open .pm svg{transform:rotate(45deg)} .faq-a{overflow:hidden;max-height:0;transition:max-height .35s ease} .faq-a-inner{padding:0 0 1.3rem;color:var(--ink-soft);max-width:none} /* ---------- CTA band ---------- */ .cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,5rem);color:#fff;isolation:isolate} .cta-band img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:-2;will-change:transform} .cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(12,84,104,.92),rgba(20,16,12,.7))} .cta-band h2{color:#fff;max-width:18ch} .cta-band p{color:rgba(255,255,255,.9);max-width:50ch;margin-top:1rem} .cta-band .hero-cta{margin-top:2rem} /* ---------- Contact / form ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .contact-info .ci-item{display:flex;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)} .contact-info .ci-item:last-child{border-bottom:none} .contact-info .ci-ico{flex:none;width:46px;height:46px;border-radius:var(--r);background:var(--brand-tint);color:var(--brand-deep);display:flex;align-items:center;justify-content:center} .contact-info .ci-ico svg{width:22px;height:22px} .contact-info .ci-label{font-size:.8rem;color:var(--ink-mute);letter-spacing:.04em;text-transform:uppercase} .contact-info .ci-val{font-weight:600;font-size:1.05rem;margin-top:.1rem} .contact-info .ci-val a:hover{color:var(--brand-deep)} a.ci-item{transition:transform .2s ease} a.ci-item:hover{transform:translateX(3px)} a.ci-item:hover .ci-ico{background:var(--brand);color:#fff} a.ci-item .ci-ico{transition:background-color .2s,color .2s} a.ci-item:hover .ci-val{color:var(--brand-deep)} /* embedded inquiry form */ .form-embed{margin-top:clamp(2.5rem,5vw,4rem)} .form-embed h2{font-size:clamp(1.6rem,1.3rem+1.4vw,2.4rem)} .embed-frame{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)} .embed-frame iframe{display:block;width:100%;height:4600px;border:0} /* native configurator form */ .cfg-form fieldset{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.1rem,3vw,1.8rem);margin:0 0 1.4rem;background:var(--card);box-shadow:var(--shadow-sm)} .cfg-form legend{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,1rem+.8vw,1.5rem);padding:0 .6rem;color:var(--ink)} .cfg-form .field{margin-bottom:1rem} .qty-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem} .qty-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .5rem .55rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;transition:border-color .2s} .qty-row:hover{border-color:var(--brand)} .qty-row span{font-size:.94rem;color:var(--ink-soft)} .qty-row input{width:72px;padding:.5rem .4rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;font:inherit;text-align:center;flex:none} .qty-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem} .check-chip{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;font-size:.94rem;transition:border-color .2s,background-color .2s} .check-chip:hover{border-color:var(--brand)} .check-chip:has(input:checked){border-color:var(--brand);background:var(--brand-tint)} .check-chip input{width:1.2rem;height:1.2rem;flex:none;accent-color:var(--brand)} .cfg-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:640px){.qty-grid,.check-grid{grid-template-columns:1fr}} .form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--shadow-md)} .field{margin-bottom:1.1rem} .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem} .field label .req{color:var(--amber-deep)} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm); background:var(--paper);font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} .field textarea{resize:vertical;min-height:130px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--ink-soft);margin:1rem 0 1.3rem} .form-consent input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:none} .form-note{font-size:.82rem;color:var(--ink-mute);margin-top:1rem} .form-success{display:none;background:var(--brand-tint);border:1px solid var(--brand);color:var(--brand-deep);border-radius:var(--r-md);padding:1rem 1.2rem;margin-bottom:1.2rem;font-weight:500} .form-success.show{display:block} .form-fehler{display:none;background:#FBE9E4;border:1px solid #C25A3C;color:#7A2E1A;border-radius:var(--r);padding:1rem 1.2rem;margin-top:1rem} .form-fehler.show{display:block} /* map embed */ .map-wrap{margin-top:1.5rem;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--paper-2)} .map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(.15)} /* ---------- Page hero (subpages) ---------- */ .page-hero{position:relative;color:#fff;margin-top:calc(-1 * var(--kopf,78px));padding-top:calc(var(--kopf,78px) + clamp(5rem,10vw,8rem));padding-bottom:clamp(5rem,10vw,8rem);isolation:isolate;overflow:hidden} .page-hero img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:-2;will-change:transform} .page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,12,9,.66),rgba(12,60,74,.72))} .page-hero h1{color:#fff} .page-hero .lead{color:rgba(255,255,255,.92);margin-top:1rem} .breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:rgba(255,255,255,.85);margin-bottom:1.2rem} .breadcrumb a:hover{color:#fff;text-decoration:underline} .breadcrumb svg{width:1em;height:1em;opacity:.7} /* legal pages */ .prose{max-width:760px;margin-inline:auto} .prose h2{font-size:1.5rem;margin-top:2.4rem;margin-bottom:.8rem} .prose h3{font-size:1.2rem;margin-top:1.6rem;margin-bottom:.5rem} .prose p,.prose li{color:var(--ink-soft)} .prose p+p{margin-top:.9rem} .prose ul{list-style:disc;padding-left:1.3rem;margin:.6rem 0;display:grid;gap:.4rem} .prose a{color:var(--brand-deep);text-decoration:underline} /* ---------- Footer ---------- */ .site-footer{background:#1B1813;color:#C9C0B2;padding-top:clamp(3rem,6vw,5rem)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.1)} .site-footer h3{color:#FBF7F0;font-family:var(--font-text);font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1rem} .site-footer a{color:#C9C0B2;transition:color .2s} .site-footer a:hover{color:#fff} .footer-links{display:grid;gap:.6rem} .footer-about p{color:#A89E8F;font-size:.92rem;margin-top:1rem} .footer-brand svg{height:52px} .footer-contact{display:grid;gap:.7rem;font-size:.95rem} .footer-contact .fc-row{display:flex;gap:.6rem;align-items:flex-start} .footer-contact svg{width:1.1em;height:1.1em;flex:none;margin-top:.25em;color:var(--brand)} .footer-areas{font-size:.85rem;color:#A89E8F;line-height:1.7;margin-top:.5rem} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.6rem;font-size:.85rem;color:#8C8474} .footer-bottom .fb-links{display:flex;gap:1.2rem} .social{display:flex;gap:.6rem;margin-top:1.2rem} .social a{width:40px;height:40px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center} .social a:hover{background:var(--brand)} .social svg{width:20px;height:20px} /* hero social — glassy circles, brand app colours on hover */ .hero-social{display:flex;gap:.7rem;margin-top:1.6rem} .hs{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.14);transition:transform .2s,background .25s,border-color .25s,box-shadow .25s} .hs svg{width:21px;height:21px} .hs:hover{transform:translateY(-3px);border-color:transparent} .hs-fb:hover{background:#1877F2;box-shadow:0 10px 24px rgba(24,119,242,.45)} .hs-ig:hover{background:linear-gradient(45deg,#feda75,#fa7e1e 28%,#d62976 58%,#962fbf 80%,#4f5bd5);box-shadow:0 10px 24px rgba(214,41,118,.45)} .hs-wa:hover{background:#25D366;box-shadow:0 10px 24px rgba(37,211,102,.45)} /* scroll-to-top — tent button, appears after scrolling */ .to-top{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);width:54px;height:54px;border:none;border-radius:var(--r);cursor:pointer;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(12,84,104,.35),inset 0 1px 0 rgba(255,255,255,.25);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .3s,background .2s;z-index:60} .to-top.show{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--brand-deep);transform:translateY(-3px)} .to-top:active{transform:translateY(-1px)} .to-top svg{width:28px;height:28px} @media (max-width:680px){.to-top{bottom:calc(env(safe-area-inset-bottom,0px) + 4.8rem)}} /* sticky mobile call bar */ .callbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;grid-template-columns:1fr 1fr;gap:.6rem;padding:.7rem;background:rgba(251,247,240,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)} /* ---------- Reveal animation ---------- Content is visible by default. Only when JS is active (html.js-anim) do we hide-then-reveal, so no-JS users and crawlers always see everything. */ .js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .js-anim .reveal.in{opacity:1;transform:none} .js-anim .reveal[data-d="1"]{transition-delay:.08s} .js-anim .reveal[data-d="2"]{transition-delay:.16s} .js-anim .reveal[data-d="3"]{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .js-anim .reveal{opacity:1;transform:none;transition:none} .ref-track{animation:none} .occasion img,.tent-card .tc-img img{transition:none} } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .footer-grid{grid-template-columns:1fr 1fr} .masonry{columns:3} .ref-grid{grid-template-columns:repeat(3,1fr)} .logo-wall{grid-template-columns:repeat(4,1fr)} } @media (max-width:900px){ .nav-links,.nav-phone{display:none} .nav-toggle{display:flex} .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(2,1fr)} .occasion-grid,.offer-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr} .split{grid-template-columns:1fr;gap:2.5rem} .split.rev{direction:ltr} .split-media{order:-1} .split-media img{aspect-ratio:16/11} .contact-grid{grid-template-columns:1fr} .trust-row{grid-template-columns:repeat(2,1fr)} .masonry{columns:2} .ref-grid{grid-template-columns:repeat(2,1fr)} .logo-wall{grid-template-columns:repeat(3,1fr)} .callbar{display:grid} /* Platz fuer die feste Anruf-Leiste */ body{padding-bottom:4.6rem} .hero-inner{padding-bottom:calc(clamp(1.5rem,4vh,5.5rem) + 4.6rem)} .trust{margin-top:clamp(-72px,-9vw,-46px)} .trust-cell:nth-child(2n){border-right:none} .trust-cell:nth-child(-n+2){border-bottom:1px solid rgba(33,29,24,.1)} } @media (max-width:560px){ .nav .nav-cta .btn-primary{display:none} .brand-word .bw-1{font-size:1.2rem} .cols-4,.cols-3,.cols-2,.occasion-grid,.offer-grid{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .masonry{columns:1} .ref-grid{grid-template-columns:1fr} .logo-wall{grid-template-columns:repeat(2,1fr)} .hero-cta .btn,.cta-band .btn{width:100%} .float-card{display:none} } /* ============================================================ Premium depth & polish (final layer) ============================================================ */ /* warm vignette on the page background for subtle depth */ body{background:radial-gradient(135% 70% at 50% -15%, #FFFEFB 0%, rgba(255,254,251,0) 55%), var(--paper)} /* more generous, calmer rhythm */ :root{--section-y:clamp(4.5rem,10vw,9rem)} /* key cards: soft lift by default, richer on hover */ .feature,.tent-card,.step{box-shadow:var(--shadow-sm)} .feature:hover,.tent-card:hover{box-shadow:var(--shadow-lg)} .form-card{box-shadow:var(--shadow-lg)} .acc{box-shadow:var(--shadow-sm)} .acc.open{box-shadow:var(--shadow-md)} /* image depth: subtle shadow + hairline ring + gentle zoom */ .split-media img,.acc-photos img{box-shadow:var(--shadow-md)} .acc-photos img{transition:transform .45s cubic-bezier(.22,1,.36,1)} .acc-photos img:hover{transform:scale(1.035)} .occasion{box-shadow:var(--shadow-md)} .occasion:hover{box-shadow:var(--shadow-xl)} .tent-card .tc-img,.occasion,.split-media img,.acc-photos img,.gitem,.logo-cell,.ref-logo{position:relative} .tent-card .tc-img::after,.occasion::before,.split-media img,.gitem::before{pointer-events:none} /* inner highlight ring on media for a crafted look */ .split-media img,.acc-photos img,.tent-card .tc-img img{box-shadow:var(--shadow-md),inset 0 0 0 1px rgba(255,255,255,.18)} /* hero & page-hero: soft inner fade at the bottom edge = depth into the next section */ .hero::after{box-shadow:inset 0 -70px 80px -40px rgba(10,8,5,.65)} .page-hero{box-shadow:inset 0 -50px 70px -40px rgba(10,8,5,.5)} /* refined section separation: hairline with a soft highlight */ .bg-paper-2{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 var(--line)} /* premium texture (fine grain) + glow on dark bands */ .cta-band::before,.site-footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.05;mix-blend-mode:overlay} .cta-band{position:relative} .cta-band>*{position:relative;z-index:1} .site-footer{position:relative} .site-footer>*{position:relative;z-index:1} .cta-band::after{background:linear-gradient(120deg,rgba(10,46,56,.94),rgba(16,12,8,.78)),radial-gradient(120% 120% at 80% 0%, rgba(21,159,196,.28), transparent 55%)} /* buttons: a touch more depth on the primary */ .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px -8px rgba(192,136,59,.5)} /* price tables sit on a subtle card for depth */ .acc-inner .price-table{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:1rem} .acc-inner .price-table caption{padding:.9rem 1rem 0} .acc-inner .price-table th{padding-inline:1rem} .acc-inner .price-table td{padding-inline:1rem} @media (prefers-reduced-motion:reduce){.acc-photos img:hover{transform:none}} /* ---------- Google-Bewertungen ---------- */ .gb-g{flex:none;width:34px;height:34px} .gb-g svg{width:100%;height:100%} .bew-sterne{color:#F4B400;letter-spacing:.06em;white-space:nowrap} .bew-kopf{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap; padding:1rem 1.3rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .bew-kopf-links{display:flex;align-items:center;gap:.9rem;min-width:0} .bew-kopf-text{display:flex;flex-direction:column;line-height:1.3} .bew-kopf-titel{font-weight:600;color:var(--ink);font-size:1.05rem} .bew-kopf-wert{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.95rem;color:var(--ink-mute)} .bew-kopf-wert b{font-size:1.25rem;color:var(--ink);font-weight:700} .bew-kopf-wert a{color:var(--ink-mute);text-decoration:underline;text-underline-offset:3px} .bew-kopf-wert a:hover{color:var(--brand)} .bew-kopf .btn{white-space:nowrap} .bew-band-rahmen{position:relative} .bew-band{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:6px 0 18px;margin-bottom:-6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .bew-band::-webkit-scrollbar{display:none} .bew-band:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--r-md)} .bew-karte{flex:0 0 min(100%,340px);scroll-snap-align:start;display:flex;flex-direction:column;gap:.55rem; padding:1.3rem 1.3rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)} .bew-kopfzeile{display:flex;align-items:center;gap:.75rem} .bew-avatar{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--amber-tint);color:var(--amber-deep);font-family:var(--font-display);font-weight:600;font-size:1.15rem} .bew-wer{display:flex;flex-direction:column;line-height:1.25;min-width:0} .bew-name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bew-datum{font-size:.82rem;color:var(--ink-mute)} .bew-karte .bew-sterne{font-size:1rem} .bew-text{color:var(--ink-soft);font-size:.97rem;line-height:1.55;margin:0} .bew-lang .bew-text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .bew-lang.offen .bew-text{display:block;-webkit-line-clamp:unset;overflow:visible} .bew-mehr{align-self:flex-start;background:none;border:0;padding:0;font:inherit;font-size:.9rem;font-weight:600;color:var(--brand-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .bew-mehr:hover{color:var(--brand)} .bew-fuss{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:.5rem} .bew-google{font-family:var(--font-text);font-weight:700;font-size:1.05rem;letter-spacing:-.01em; background:linear-gradient(90deg,#4285F4 0 22%,#EA4335 22% 40%,#FBBC05 40% 58%,#4285F4 58% 74%,#34A853 74% 90%,#EA4335 90%);-webkit-background-clip:text;background-clip:text;color:transparent} .bew-quelle{font-size:.8rem;color:var(--ink-mute)} .bew-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%; border:1px solid var(--line);background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s} .bew-pfeil svg{width:20px;height:20px} .bew-pfeil:hover{background:var(--ink);color:#fff} .bew-pfeil[disabled]{opacity:.35;cursor:default} .bew-pfeil[disabled]:hover{background:var(--card);color:var(--ink)} .bew-zurueck{left:-14px} .bew-vor{right:-14px} .bew-hinweis{margin-top:.6rem;font-size:.85rem;color:var(--ink-mute);text-align:center} .bew-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:3px} @media (max-width:640px){ .bew-kopf{padding:.9rem 1rem} .bew-kopf .btn{width:100%;text-align:center} .bew-karte{flex-basis:min(100%,300px)} .bew-pfeil{display:none} } } /* ============================================================ Mietartikel: Kategorie -> Unterkategorie -> Produktkarte ============================================================ */ /* Kategorie (aufklappbar) */ .kat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1.1rem; background:var(--card);box-shadow:var(--shadow-sm);scroll-margin-top:92px;transition:box-shadow .3s} .kat.open{box-shadow:var(--shadow-md)} .kat-kopf{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem; padding:1.5rem 1.9rem;text-align:left;cursor:pointer;background:transparent;transition:background-color .25s} .kat-kopf:hover{background:var(--paper-2)} .kat.open .kat-kopf{background:linear-gradient(180deg,var(--brand-tint),transparent)} .kk-text{display:flex;flex-direction:column;gap:.2rem;min-width:0} .kk-titel{font-family:var(--font-display);font-size:clamp(1.35rem,1.1rem+.8vw,1.85rem);font-weight:600;color:var(--ink);letter-spacing:-.015em} .kk-unter{font-size:.92rem;color:var(--ink-mute)} .kk-icon{flex:none;width:42px;height:42px;border-radius:var(--r);background:var(--brand);color:#fff; display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.4,0,.2,1)} .kk-icon svg{width:20px;height:20px} .kat.open .kk-icon{transform:rotate(180deg)} .kat-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)} .kat.open .kat-body{max-height:none} .kat-inner{padding:.4rem 1.9rem 2rem} .kat-intro{color:var(--ink-soft);max-width:64ch;margin-bottom:2rem} /* Unterkategorie */ .gruppe{margin-bottom:2.6rem} .gruppe:last-of-type{margin-bottom:1.4rem} .gruppe-kopf{display:flex;flex-direction:column;gap:.15rem;padding-bottom:.7rem;margin-bottom:1.3rem; border-bottom:2px solid var(--amber);width:fit-content;max-width:100%} .gruppe-kopf h3{font-size:1.22rem;letter-spacing:-.01em} .gruppe-kopf p{font-size:.88rem;color:var(--ink-mute);margin:0} /* Produktkarte */ .karten{display:grid;gap:1rem} .karte{display:grid;grid-template-columns:300px minmax(0,1fr) 260px;gap:1.6rem;align-items:start; padding:1.15rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card); transition:border-color .25s,box-shadow .25s,transform .25s} .karte:hover{border-color:rgba(21,159,196,.45);box-shadow:var(--shadow-md);transform:translateY(-2px)} .karte-bild{min-width:0} /* Quadratisch statt 4:3: die Haelfte der Produktfotos ist Hochformat. Zusammen mit object-fit:contain bleibt jedes Bild vollstaendig sichtbar. */ /* Quadratisches Feld fuer alle Artikel, damit beim Scrollen nichts springt. Das Bild wird eingepasst, also nie beschnitten. Der freie Platz bleibt aber nicht leer, sondern wird mit einer unscharfen Vergroesserung desselben Bildes gefuellt. Dadurch wirkt die Kachel randlos und nimmt die Farben des Fotos auf. */ .kb-haupt{position:relative;margin:0;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--paper-3)} .kb-fuellung{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.25);filter:blur(22px) saturate(1.15) brightness(1.04);opacity:.85} .kb-haupt::after{content:"";position:absolute;inset:0;background:var(--paper-3);opacity:.28;pointer-events:none} /* contain statt cover: Hochformat-Aufnahmen wurden oben und unten beschnitten */ .kb-haupt img:not(.kb-fuellung){position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block; padding:.45rem;transition:transform .5s cubic-bezier(.2,0,.2,1)} .karte:hover .kb-haupt img:not(.kb-fuellung){transform:scale(1.04)} .kb-leer{display:flex;align-items:center;justify-content:center;color:var(--brand);opacity:.28} .kb-leer svg{width:34%;height:auto} .kb-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:.45rem} .kb-btn{aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:var(--r);overflow:hidden; cursor:pointer;background:none;opacity:.55;transition:opacity .2s,border-color .2s} .kb-btn img{width:100%;height:100%;object-fit:cover;display:block} .kb-btn:hover{opacity:.9} .kb-btn.on{opacity:1;border-color:var(--brand)} .karte-text{min-width:0} .karte-text h4{font-size:1.14rem;margin-bottom:.4rem;letter-spacing:-.01em} .kt-info{color:var(--ink-soft);font-size:.95rem;margin:0;max-width:52ch} .kt-specs{margin:.75rem 0 0;padding:0;font-size:.87rem;color:var(--ink-mute)} .kt-specs li{position:relative;padding-left:1rem;margin-bottom:.24rem} .kt-specs li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--amber)} /* Wichtiger Hinweis am Artikel, z. B. Helferbedarf beim Zeltaufbau */ /* Aufbauskizzen: nur Textlinks unter dem Artikeltext, Klick oeffnet das PDF (Kundenwunsch 15.09.2026) */ .kt-skizzen{margin:1.1rem 0 0} .kt-skizzen h4{margin-bottom:.35rem} .kt-skizzen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem} .kt-skizzen a{font-size:.95rem;font-weight:600;color:var(--brand-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em} .kt-skizzen a:hover{color:var(--brand)} .kt-hinweis{margin:.8rem 0 0;padding:.55rem .75rem;font-size:.85rem;line-height:1.5;color:var(--ink); background:var(--amber-tint);border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0} /* Preisliste statt Dropdown */ .karte-preis{min-width:0;background:var(--paper-2);border-radius:var(--r);padding:1rem 1.1rem} .pz{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;padding:.42rem 0; border-bottom:1px dotted var(--line-strong)} .pz:last-child{border-bottom:none} .pz-name{font-size:.9rem;color:var(--ink-soft);min-width:0} .pz-wert{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--brand-deep);white-space:nowrap} .pz-wert small{display:block;font-family:var(--font-text);font-size:.72rem;font-weight:500;color:var(--ink-mute);text-align:right;margin-top:-2px} .pz-solo{justify-content:flex-end;padding:.1rem 0} .pz-solo .pz-wert{font-size:1.65rem;line-height:1.1} .pz-extra{margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--line-strong)} .pz-extra-titel{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--amber-deep);margin-bottom:.3rem} .pz-extra .pz-wert{font-size:.92rem} /* Kleinteile-Liste (Gastronomiezubehör) */ .liste{background:var(--paper-2);border-radius:var(--r);padding:.6rem 1.2rem} .pz-liste{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem;align-items:baseline;padding:.55rem 0} /* Tabellenzeilen mit Foto: kleines Vorschaubild vorne, Klick oeffnet die Lupe */ .pz-liste.pz-mit-bild{grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center} .pz-bild{width:56px;height:56px;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden; background:var(--paper-3);cursor:zoom-in;transition:transform .2s,box-shadow .2s} .pz-bild img{width:100%;height:100%;object-fit:cover;display:block} .pz-bild:hover{transform:scale(1.05);box-shadow:var(--shadow-sm)} .pz-menge{font-size:.82rem;color:var(--ink-mute);white-space:nowrap} @media (max-width:1080px){ .karte{grid-template-columns:240px minmax(0,1fr)} .karte-preis{grid-column:1 / -1} } @media (max-width:760px){ .kat-kopf{padding:1.15rem 1.2rem} .kat-inner{padding:.3rem 1.2rem 1.6rem} .karte{grid-template-columns:1fr;gap:1rem;border-radius:var(--r)} .kb-haupt{aspect-ratio:4/3} .kk-icon{width:36px;height:36px} .pz-liste{grid-template-columns:minmax(0,1fr) auto;row-gap:.1rem} .pz-menge{grid-column:1;font-size:.78rem} } /* ---------- Zentraler Preishinweis ---------- */ .preis-hinweis{margin:clamp(2rem,4vw,3rem) 0 2rem;padding:1.15rem 1.4rem; background:var(--amber-tint);border:1px solid rgba(192,136,59,.32);border-radius:var(--r)} .ph-text{margin:0;font-size:.93rem;color:var(--ink-soft);line-height:1.55;max-width:88ch} .ph-text strong{color:var(--ink)} /* ---------- Bild-Lupe (Lightbox) ---------- */ .kb-zoom{cursor:zoom-in} .kb-leer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--ink-mute)} .kb-leer svg{width:30px;height:30px;opacity:.55} .kb-leer figcaption{font-size:.82rem;font-weight:500} .lupe{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center; background:rgba(20,17,13,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;transition:opacity .28s} .lupe.auf{opacity:1} .lupe[hidden]{display:none} .lupe-buehne{margin:0;max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:.9rem;align-items:center} .lupe-buehne img{max-width:100%;max-height:76vh;width:auto;height:auto;object-fit:contain; border-radius:var(--r);box-shadow:0 30px 70px rgba(0,0,0,.5); /* milchig hell statt schwarz: freigestellte Produktfotos sollen weiss wirken */ background:#F7F1E6} .lupe-buehne figcaption{display:flex;align-items:baseline;gap:.9rem;color:#F3ECDF;font-size:.95rem} .lupe-name{font-family:var(--font-display);font-weight:600;font-size:1.08rem} .lupe-zaehler{font-size:.85rem;color:rgba(243,236,223,.62)} /* Pfeile: feste Position, bewegen sich nicht mit dem Bild */ .lupe-pfeil{position:fixed;top:50%;transform:translateY(-50%);width:58px;height:58px;border-radius:var(--r); display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); cursor:pointer;transition:background .2s,transform .2s} .lupe-pfeil:hover{background:rgba(255,255,255,.26)} .lupe-pfeil:active{transform:translateY(-50%) scale(.94)} .lupe-pfeil svg{width:26px;height:26px} .lupe-links{left:clamp(.6rem,3vw,2.6rem)} .lupe-rechts{right:clamp(.6rem,3vw,2.6rem)} .lupe-pfeil[disabled]{opacity:.28;cursor:default} .lupe-zu{position:fixed;top:clamp(.7rem,2.5vw,1.6rem);right:clamp(.7rem,2.5vw,1.6rem);width:46px;height:46px; border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:#fff; background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);cursor:pointer;transition:background .2s} .lupe-zu:hover{background:rgba(255,255,255,.26)} .lupe-zu svg{width:22px;height:22px} @media (max-width:640px){ .lupe-pfeil{width:46px;height:46px;top:auto;bottom:1.4rem;transform:none} .lupe-pfeil:active{transform:scale(.94)} .lupe-links{left:1.4rem} .lupe-rechts{right:1.4rem} .lupe-buehne img{max-height:66vh} } /* ---------- Vorauswahl im Anfrageformular ---------- */ .vorauswahl{margin:1rem 0 0;padding:.85rem 1.1rem;background:var(--brand-tint); border-left:4px solid var(--brand);border-radius:0 var(--r) var(--r) 0;font-size:.95rem;color:var(--ink-soft)} .vorauswahl strong{color:var(--brand-deep)} .cfg-form fieldset.markiert{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} /* ---------- Galerie im Stil der Mietartikel ---------- */ .gal-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2.2rem} .gal-filter button{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem; border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card); font-size:.93rem;font-weight:500;color:var(--ink-soft);cursor:pointer; transition:border-color .2s,background .2s,color .2s,transform .2s} .gal-filter button:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-1px)} .gal-filter button.active{background:var(--brand);border-color:var(--brand);color:#fff} .gf-zahl{font-size:.75rem;font-weight:600;padding:.1rem .45rem;border-radius:var(--r-pill); background:var(--paper-2);color:var(--ink-mute)} .gal-filter button.active .gf-zahl{background:rgba(255,255,255,.24);color:#fff} .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.9rem} .gitem{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden; background:var(--paper-3);cursor:zoom-in;box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.2,0,.2,1),box-shadow .3s} .gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,0,.2,1)} .gitem:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .gitem:hover img{transform:scale(1.06)} .gitem.hide{display:none} .gal-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.05rem; padding:1.6rem .9rem .75rem;color:#fff; background:linear-gradient(to top,rgba(18,15,12,.82),rgba(18,15,12,.35) 55%,transparent); opacity:0;transform:translateY(6px);transition:opacity .28s,transform .28s} .gitem:hover .gal-cap,.gitem:focus-within .gal-cap{opacity:1;transform:none} .gc-titel{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.2} .gc-gruppe{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)} @media (max-width:640px){ .gal-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem} .gitem{border-radius:var(--r)} .gal-cap{opacity:1;transform:none;padding:1.2rem .6rem .55rem} .gc-titel{font-size:.85rem} .gc-gruppe{font-size:.68rem} } /* ---------- Konfigurator: Gruppen im Formular ---------- */ .cfg-gruppe{margin:1.5rem 0 .7rem;padding-bottom:.35rem;font-family:var(--font-display); font-weight:600;font-size:1.02rem;color:var(--ink);border-bottom:2px solid var(--amber);width:fit-content;max-width:100%} .cfg-form fieldset > .cfg-gruppe:first-of-type{margin-top:.4rem} .qty-row em{font-style:normal;font-size:.76rem;color:var(--ink-mute);margin-left:.35rem} .qty-zusatz{opacity:.88} .qty-zusatz span{padding-left:.9rem;position:relative} .qty-zusatz span::before{content:"+";position:absolute;left:0;color:var(--amber-deep);font-weight:600} /* ---------- Karte laedt erst auf Klick (kein Drittabruf ohne Zustimmung) ---------- */ .karte-platzhalter{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.85rem;padding:1.6rem;text-align:center;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md)} .karte-platzhalter svg{width:38px;height:38px;color:var(--brand);opacity:.8} .kp-adresse{margin:0;font-family:var(--font-display);font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.35} .kp-hinweis{margin:0;max-width:34ch;font-size:.78rem;line-height:1.5;color:var(--ink-mute)} .kp-route{font-size:.82rem;font-weight:600;color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px} .kp-route:hover{color:var(--brand)} .karte-platzhalter.geladen{padding:0;border:none;background:none} /* ---------- Anfrageformular: Beratungsteil + ausklappbare Wunschliste ---------- */ .cfg-hilfe{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-mute);max-width:60ch} .wunschliste-kopf{margin:2.2rem 0 1rem} .wunschliste-kopf h3{font-size:1.3rem;margin-bottom:.25rem} .wunschliste-kopf p{margin:0;font-size:.92rem;color:var(--ink-mute);max-width:62ch} .cfg-klapp{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:.7rem; overflow:hidden;transition:border-color .2s,box-shadow .2s} .cfg-klapp[open]{border-color:rgba(21,159,196,.45);box-shadow:var(--shadow-sm)} .cfg-klapp summary{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;cursor:pointer; list-style:none;transition:background .2s} .cfg-klapp summary::-webkit-details-marker{display:none} .cfg-klapp summary:hover{background:var(--paper-2)} .cfg-klapp[open] summary{background:var(--brand-tint)} .ck-titel{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink)} .ck-unter{flex:1;min-width:0;font-size:.84rem;color:var(--ink-mute); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ck-pfeil{flex:none;width:30px;height:30px;border-radius:var(--r);background:var(--brand);color:#fff; display:flex;align-items:center;justify-content:center;transition:transform .3s} .ck-pfeil svg{width:16px;height:16px} .cfg-klapp[open] .ck-pfeil{transform:rotate(180deg)} .ck-inhalt{padding:.4rem 1.2rem 1.3rem} .cfg-klapp.markiert{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} @media (max-width:640px){ .ck-unter{display:none} .cfg-klapp summary{padding:.9rem 1rem} } /* ---------- Lange deutsche Komposita umbrechen statt ueberlaufen ---------- Betrifft Woerter wie "Datenschutzerklaerung" oder "Gastronomiezubehoer", die auf schmalen Handys breiter sind als die Spalte. */ h1,h2,h3,h4,p,li,.kk-titel,.ck-titel,.gc-titel,.prod-name,.pz-name{ overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; } /* ---------- Lesbarkeit am Handy ---------- Keine Schrift unter 12px, groessere Tippflaeche fuer Textlinks. */ @media (max-width:640px){ .gc-gruppe{font-size:.75rem} .kp-route{display:inline-block;padding:.45rem .2rem} } @media (max-width:640px){ .pz-wert small{font-size:.75rem} .pz-extra-titel{font-size:.75rem} } /* ---------- Massstab etwas zurueckgenommen ---------- Die Ueberschriften waren fuer eine Geschaeftsseite zu gross (Seitentitel 80px). Fliesstext bleibt unveraendert lesbar. */ .h-display{font-size:clamp(2.2rem,1.55rem + 3.1vw,3.7rem)} /* Hero-Satz auf Handys nur an Wortgrenzen umbrechen (kein "schoens-ter") */ @media (max-width:640px){.hero h1{hyphens:manual;-webkit-hyphens:manual;font-size:2.2rem}} h2{font-size:clamp(1.75rem,1.35rem + 1.8vw,2.6rem)} h3{font-size:clamp(1.2rem,1.05rem + .55vw,1.45rem)} .lead{font-size:clamp(1.02rem,.98rem + .28vw,1.18rem)} .kk-titel{font-size:clamp(1.15rem,1.02rem + .5vw,1.45rem)} .kat-kopf{padding:1.15rem 1.6rem} .gruppe-kopf h3{font-size:1.12rem} .karte-text h4{font-size:1.06rem} .page-hero .lead{max-width:60ch} /* Sektion "Fuer die Tage, an die man sich erinnert": subtiles Bild im Hintergrund, bewegt sich beim Scrollen langsamer als die Seite (Parallax in main.js) */ .hat-hintergrund{position:relative;isolation:isolate;overflow:hidden} .bg-subtil{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:-1; opacity:.13;filter:saturate(.8);pointer-events:none;will-change:transform} @media (prefers-reduced-motion:reduce){ .hero-media img,.cta-band img,.page-hero img,.bg-subtil{top:0;height:100%;transform:none!important} } /* ---------- Anfrageformular, Ueberarbeitung 15.09.2026 ---------- Ruhiger und geordneter: keine Kaesten in Kaesten, Kategorien als Abschnitte mit Trennlinie, Artikel als Liste, groessere Haekchen, Auswahlfelder in Textgroesse. */ .cfg-form fieldset{border:none;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-md);padding:clamp(1.3rem,3vw,2.2rem)} .cfg-form legend{padding:0;margin-bottom:.4rem;float:left;width:100%;font-size:clamp(1.25rem,1.05rem+.8vw,1.6rem)} .cfg-form legend + *{clear:both} .cfg-form fieldset.markiert{box-shadow:0 0 0 3px var(--brand-tint),var(--shadow-md)} .field label{font-size:.95rem} .field input,.field select,.field textarea{font-size:1rem} .cfg-klapp{border:none;border-top:1px solid var(--line-strong);border-radius:0;background:transparent;margin:0;box-shadow:none} .cfg-klapp:last-of-type{border-bottom:1px solid var(--line-strong)} .cfg-klapp[open]{border-color:var(--line-strong);box-shadow:none} .cfg-klapp summary{padding:1.1rem 0;background:transparent} .cfg-klapp summary:hover,.cfg-klapp[open] summary{background:transparent} .cfg-klapp summary:hover .ck-titel,.cfg-klapp[open] .ck-titel{color:var(--brand-deep)} .ck-titel{font-size:clamp(1.15rem,1rem+.6vw,1.4rem);transition:color .2s} .ck-unter{font-size:.92rem} .ck-inhalt{padding:.2rem 0 1.8rem} .cfg-klapp.markiert{box-shadow:none;border-color:var(--brand)} .cfg-gruppe{border-bottom:none;width:auto;margin:1.6rem 0 .5rem;padding:0;font-size:1.08rem} .cfg-form fieldset > .cfg-gruppe:first-of-type,.ck-inhalt > .cfg-gruppe:first-of-type{margin-top:.6rem} .qty-grid{gap:0 clamp(1rem,3vw,2.5rem)} .qty-row{padding:.6rem 0;border:none;border-bottom:1px solid var(--line);border-radius:0;background:transparent;min-height:3.1rem} .qty-row:hover{border-color:var(--line);background:transparent} .qty-row:hover span{color:var(--ink)} .qty-row span{font-size:.97rem;color:var(--ink-soft);transition:color .2s} .qty-row input[type="number"]{width:78px;padding:.5rem .4rem;font-size:1rem} .qty-row input[type="checkbox"],.form-consent input{width:22px;height:22px;flex:none;accent-color:var(--brand);cursor:pointer;margin:0} .qty-row select{font:inherit;font-size:.97rem;padding:.45rem 2rem .45rem .7rem;border:1.5px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);cursor:pointer;flex:none;max-width:52%} .qty-row select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)} /* Auswahlfelder: eigener Pfeil, vom rechten Rand abgerueckt (Chris, 21.09.2026) */ .field select,.qty-row select{-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23211D18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1.1rem center;background-size:14px 14px;padding-right:2.6rem} .field select::-ms-expand,.qty-row select::-ms-expand{display:none} /* Link zur Datenschutzerklaerung im Formular sichtbar als Link */ .form-consent a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px;font-weight:600} .form-consent a:hover{color:var(--brand)} .qty-zusatz span{color:var(--ink-mute)} @media (max-width:640px){ .qty-grid{gap:0} .cfg-klapp summary{padding:1rem 0} .ck-pfeil{margin-left:auto} } /* ---------- Urlaubs-Fenster ---------- */ .urlaub{margin:auto;border:none;border-radius:var(--r);padding:0;max-width:min(92vw,520px);background:var(--card);color:var(--ink);box-shadow:var(--shadow-xl)} .urlaub::backdrop{background:rgba(20,17,13,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .urlaub-inhalt{position:relative;margin:0;padding:clamp(1.6rem,4vw,2.4rem) clamp(3rem,6vw,3.6rem) clamp(1.6rem,4vw,2.4rem) clamp(1.6rem,4vw,2.4rem);display:flex;flex-direction:column;gap:.7rem;align-items:flex-start} .urlaub-zu{position:absolute;top:.8rem;right:.8rem;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s} .urlaub-zu:hover{background:var(--paper-2);border-color:var(--ink)} .urlaub-zu svg{width:18px;height:18px} .urlaub h2{font-size:clamp(1.5rem,1.2rem+1vw,2rem)} .urlaub p{color:var(--ink-soft);max-width:52ch} @media (prefers-reduced-motion:no-preference){ .urlaub[open]{animation:urlaub-auf .4s cubic-bezier(.22,1,.36,1) both} @keyframes urlaub-auf{from{opacity:0;transform:translateY(14px)}} }