:root{ --ink:#15150f;--ink-2:#57564d;--ink-3:#8c8a7f; --line:#e7e4dc;--line-2:#f0eee8; --bg:#fff;--bg-soft:#f7f6f2; --green:#1c3325;--green-2:#2c4c37; --ember:#a8501d;--ember-2:#8d4217; --r:6px;--max:1120px;--ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} h1,h2,h3,h4{font-weight:600;line-height:1.12;letter-spacing:-.028em} h1{font-size:clamp(2.05rem,4.4vw,3.4rem);letter-spacing:-.036em} h2{font-size:clamp(1.55rem,3vw,2.25rem);letter-spacing:-.032em} h3{font-size:clamp(1.02rem,1.7vw,1.22rem)} p{color:var(--ink-2)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} ::selection{background:var(--green);color:#fff} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px} @media(max-width:640px){.wrap{padding:0 20px}} .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)} .lead{font-size:clamp(1rem,1.5vw,1.13rem);color:var(--ink-2);line-height:1.62} .tnum{font-variant-numeric:tabular-nums} .hr{height:1px;background:var(--line);border:0} .js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--r);border:1px solid transparent;font-size:.94rem;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .15s var(--ease);white-space:nowrap;font-family:inherit} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--ember);color:#fff} .btn-primary:hover{background:var(--ember-2)} .btn-ghost{border-color:var(--line);color:var(--ink);background:#fff} .btn-ghost:hover{border-color:var(--ink-3);background:var(--bg-soft)} .btn-onDark{border-color:rgba(255,255,255,.24);color:#fff} .btn-onDark:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)} .btn-lg{padding:16px 30px;font-size:1rem} .btn-sm{padding:9px 16px;font-size:.86rem} .link-arrow{display:inline-flex;align-items:center;gap:7px;font-size:.94rem;font-weight:500;color:var(--ink)} .link-arrow svg{transition:transform .25s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} /* topbar */ .topbar{background:var(--green);color:rgba(255,255,255,.72);font-size:.78rem} .topbar .wrap{display:flex;align-items:center;justify-content:center;gap:26px;height:36px} .topbar ul{display:flex;gap:26px;list-style:none} .topbar li{white-space:nowrap;position:relative} .topbar li+li::before,.topbar .tb-contact::before{content:"";position:absolute;left:-13px;top:50%;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);transform:translateY(-50%)} .topbar .tb-contact{position:relative;white-space:nowrap} .topbar a{color:#fff;font-weight:500} @media(max-width:820px){.topbar .wrap{height:34px;gap:0}.topbar ul{display:none}.topbar .tb-contact::before{display:none}} /* header */ header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s} header.stuck{border-bottom-color:var(--line)} .nav{display:flex;align-items:center;gap:14px;height:70px} .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--green)} .brand-text{line-height:1.05} .brand-text b{display:block;font-size:.97rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)} .brand-text span{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px} .nav-links{display:flex;gap:2px;list-style:none;margin-left:auto} .nav-links a{display:block;padding:8px 13px;font-size:.9rem;color:var(--ink-2);border-radius:var(--r);transition:color .18s,background .18s} .nav-links a:hover{color:var(--ink);background:var(--bg-soft)} .nav-links a.on{color:var(--ink);font-weight:600} .nav-cta{margin-left:14px} .burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r);background:none;cursor:pointer;align-items:center;justify-content:center} .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:.25s var(--ease)} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:.25s var(--ease)} .burger span::before{top:-5px}.burger span::after{top:5px} .burger.x span{background:transparent} .burger.x span::before{top:0;transform:rotate(45deg)} .burger.x span::after{top:0;transform:rotate(-45deg)} @media(max-width:1000px){ .nav-links{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:8px 20px 18px;gap:0} .nav-links.open{display:flex} .nav-links a{padding:13px 0;font-size:1rem;border-bottom:1px solid var(--line-2);border-radius:0} .nav-links a:hover{background:none} .nav-cta{display:none}.burger{display:flex} } section{padding:clamp(52px,7vw,96px) 0} section.tight{padding:clamp(36px,4.5vw,58px) 0} .soft{background:var(--bg-soft)} .dark{background:var(--green);color:#fff} .dark p,.dark .lead{color:rgba(255,255,255,.7)} .dark .eyebrow{color:rgba(255,255,255,.5)} .dark h2,.dark h3{color:#fff} .shead{max-width:620px;margin-bottom:clamp(30px,3.6vw,48px)} .shead .eyebrow{display:block;margin-bottom:14px} .shead h2{margin-bottom:14px} /* hero */ .hero{padding:clamp(44px,6vw,86px) 0 clamp(40px,5vw,70px)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center} .hero h1{margin-bottom:20px} .hero .lead{max-width:48ch;margin-bottom:28px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap} .hero-note{font-size:.85rem;color:var(--ink-3);margin-top:18px} .portrait{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:linear-gradient(155deg,#223b2b,#37543f)} .portrait::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(98deg,rgba(255,255,255,.03) 0 1px,transparent 1px 8px)} .portrait-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;background:linear-gradient(transparent,rgba(15,25,18,.75));color:#fff} .portrait-cap b{display:block;font-size:.98rem;font-weight:600} .portrait-cap span{font-size:.8rem;color:rgba(255,255,255,.68)} .ph-note{position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:rgba(255,255,255,.4);font-size:.8rem;text-align:center;padding:20px} @media(max-width:860px){.hero-grid{grid-template-columns:1fr}.portrait{aspect-ratio:3/2;max-height:340px}} /* stats band */ .statband{background:var(--green);color:#fff} .statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(28px,3.5vw,44px)} .stat{text-align:center} .stat b{display:block;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.035em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums} .stat span{font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.01em} @media(max-width:700px){.statband .wrap{grid-template-columns:repeat(2,1fr);gap:28px 16px}} /* product cards */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.pgrid{grid-template-columns:1fr}} .pcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)} .pcard:hover{border-color:#d5d0c4;transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,21,15,.07)} .pcard-img{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)} .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .pcard:hover .pcard-img img{transform:scale(1.045)} .pcard-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .pcard h3{margin-bottom:4px} .pcard-sub{font-size:.8rem;color:var(--ink-3);margin-bottom:10px} .pcard p{font-size:.9rem;flex:1;margin-bottom:16px} .pcard-foot{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--line-2);padding-top:14px} .pcard-price b{display:block;font-size:1.2rem;font-weight:600;letter-spacing:-.03em} .pcard-price span{font-size:.76rem;color:var(--ink-3)} /* calculator */ .calc{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .calc-grid{display:grid;grid-template-columns:1fr 348px} @media(max-width:900px){.calc-grid{grid-template-columns:1fr}} .calc-form{padding:clamp(22px,3vw,32px)} .calc-side{background:var(--bg-soft);border-left:1px solid var(--line);padding:clamp(22px,3vw,28px)} @media(max-width:900px){.calc-side{border-left:0;border-top:1px solid var(--line)}} .fgroup{margin-bottom:24px} .fgroup:last-child{margin-bottom:0} .flabel{display:flex;align-items:baseline;gap:9px;margin-bottom:11px} .fnum{font-size:.68rem;font-weight:600;color:var(--ink-3);letter-spacing:.08em} .flabel>span:last-child{font-size:.92rem;font-weight:550} .segs{display:inline-flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:3px;gap:3px;flex-wrap:wrap} .seg{position:relative} .seg input{position:absolute;opacity:0;width:0;height:0} .seg span{display:block;padding:8px 15px;border-radius:4px;font-size:.88rem;color:var(--ink-2);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);white-space:nowrap} .seg input:checked+span{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)} .seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:1px} .sliderrow{display:flex;align-items:center;gap:18px} input[type=range]{flex:1;height:2px;background:var(--line);border-radius:2px;appearance:none;-webkit-appearance:none;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);cursor:grab;transition:transform .15s} input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)} input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);cursor:grab} .sliderval{font-size:1.05rem;font-weight:600;min-width:78px;text-align:right;letter-spacing:-.02em} .convert{display:flex;gap:20px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--ink-3);flex-wrap:wrap} .convert b{color:var(--ink);font-weight:600} input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=search],textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:.93rem;background:#fff;transition:border-color .2s} input:focus,textarea:focus{outline:0;border-color:var(--ink)} input::placeholder,textarea::placeholder{color:var(--ink-3)} .plzrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .plzrow input{max-width:130px} .zonepill{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r);font-size:.84rem;background:#fff;border:1px solid var(--line);color:var(--ink-2)} .zonepill i{width:7px;height:7px;border-radius:50%;font-style:normal} .zonepill.z1 i{background:#3d7a4e}.zonepill.z2 i{background:#5b9b6c} .zonepill.z3 i{background:var(--ember)}.zonepill.z4 i{background:var(--ink-3)} .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.f2{grid-template-columns:1fr}} .finp{margin-bottom:12px} .finp label{display:block;font-size:.8rem;color:var(--ink-2);margin-bottom:5px} .total-label{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)} .total-big{font-size:clamp(1.9rem,3.6vw,2.4rem);font-weight:600;letter-spacing:-.038em;margin:8px 0 4px} .total-sub{font-size:.84rem;color:var(--ink-3);margin-bottom:18px} .brk{border-top:1px solid var(--line);padding-top:13px} .brkrow{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;padding:5px 0;color:var(--ink-2)} .brkrow b{font-weight:600;color:var(--ink)} .hintbox{font-size:.78rem;color:var(--ink-3);line-height:1.55;margin-top:14px} .hintbox.warn{color:var(--ember-2);background:#fdf4ef;border-radius:var(--r);padding:11px 13px} .okmsg{display:none;background:#eef5ef;border:1px solid #cfe2d3;color:#2c5c39;padding:12px 14px;border-radius:var(--r);font-size:.87rem;margin-top:14px} /* map */ .maplayout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,52px);align-items:start} @media(max-width:900px){.maplayout{grid-template-columns:1fr}} .mapbox{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:14px} .mapbox svg{width:100%;height:auto} .rgn{fill:none;stroke:rgba(28,51,37,.28);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} .rgn-fill-th{fill:rgba(61,122,78,.07)} .rgn-fill-sn{fill:rgba(91,155,108,.07)} .rgn-fill-by{fill:rgba(168,80,29,.055)} .rgn-label{font-size:8.5px;fill:var(--ink-3);font-weight:600;letter-spacing:.12em;text-transform:uppercase} .ring-f{fill:rgba(28,51,37,.05)} .ring-s{fill:none;stroke:rgba(28,51,37,.2);stroke-dasharray:3 3} .city{cursor:pointer} .city circle{fill:#fff;stroke-width:2;transition:r .22s var(--ease),fill .22s var(--ease)} .city[data-z="1"] circle{stroke:#3d7a4e} .city[data-z="2"] circle{stroke:#5b9b6c} .city[data-z="3"] circle{stroke:var(--ember)} .city text{font-size:7.6px;fill:var(--ink-2);font-weight:500;pointer-events:none;transition:fill .22s} .city:hover circle,.city.act circle{r:5} .city[data-z="1"]:hover circle,.city[data-z="1"].act circle{fill:#3d7a4e} .city[data-z="2"]:hover circle,.city[data-z="2"].act circle{fill:#5b9b6c} .city[data-z="3"]:hover circle,.city[data-z="3"].act circle{fill:var(--ember)} .city:hover text,.city.act text{fill:var(--ink);font-weight:600} .home circle{fill:var(--green);stroke:var(--green);stroke-width:2.5} .home text{font-size:9.5px;fill:var(--ink);font-weight:700} .maplegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .lgrow{display:flex;align-items:center;gap:8px;font-size:.79rem;color:var(--ink-2)} .lgdot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .mapread{min-height:22px;font-size:.85rem;color:var(--ink-2);margin-top:10px} .mapread b{color:var(--ink);font-weight:600} .zonecard{border-top:1px solid var(--line);padding:16px 0} .zonecard:last-of-type{border-bottom:1px solid var(--line)} .zonecard-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:4px} .zonecard h3{font-size:.96rem} .zonecard-min{font-size:.78rem;color:var(--ink-3);white-space:nowrap} .zonecard p{font-size:.87rem} /* feature grid */ .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden} .fgrid>div{background:#fff;padding:clamp(22px,2.8vw,32px)} .dark .fgrid{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.13)} .dark .fgrid>div{background:var(--green)} .fgrid h3{margin-bottom:9px} .fgrid p{font-size:.91rem} .fnumber{font-size:.72rem;font-weight:600;color:var(--ink-3);letter-spacing:.1em;margin-bottom:14px} .dark .fnumber{color:rgba(255,255,255,.42)} @media(max-width:820px){.fgrid{grid-template-columns:1fr}} /* rows */ .plist{border-top:1px solid var(--line)} .prow{display:grid;grid-template-columns:1fr 1.5fr auto;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:background .25s var(--ease)} .prow:hover{background:var(--bg-soft)} .prow h3{margin-bottom:2px} .prow-sub{font-size:.82rem;color:var(--ink-3)} .prow-desc{font-size:.91rem;color:var(--ink-2)} .prow-end{text-align:right;white-space:nowrap;font-size:.86rem;color:var(--ink-3)} @media(max-width:860px){.prow{grid-template-columns:1fr auto;gap:12px 18px}.prow-desc{grid-column:1/-1;order:3}} /* articles */ .agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} /* Die Ratgeber-Uebersicht steht in Gruppen, damit ein Haendler die Beitraege fuer den Einkauf findet, ohne fuenfzehn Karten zu lesen. */ .artgruppe+.artgruppe{margin-top:clamp(48px,5.5vw,76px)} .shead-s{max-width:640px;margin-bottom:clamp(20px,2.4vw,30px)} .shead-s h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:8px} .shead-s .lead{font-size:.92rem} @media(max-width:900px){.agrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.agrid{grid-template-columns:1fr}} .acard{display:flex;flex-direction:column} .acard-img{aspect-ratio:16/10;border-radius:8px;margin-bottom:15px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)} .acard-img>div,.acard-img>img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)} .acard:hover .acard-img>div,.acard:hover .acard-img>img{transform:scale(1.045)} .i-mass{background:repeating-linear-gradient(45deg,#e9e5db 0 8px,#f4f2ec 8px 16px)} .i-feucht{background:linear-gradient(160deg,#dce6e4,#b0c3bc)} .i-vergleich{background:linear-gradient(160deg,#dce2d7,#a6b7a1)} .i-bedarf{background:linear-gradient(160deg,#e8e2d4,#c5b79a)} .i-lager{background:linear-gradient(160deg,#e2ddd0,#b7ab92)} .i-kosten{background:linear-gradient(160deg,#dfe3e6,#aeb8bf)} .i-recht{background:linear-gradient(160deg,#e6e1dd,#bcb1a8)} .i-kaefer{background:linear-gradient(160deg,#dbe0d3,#9fae94)} .acat{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px} .acard h3{font-size:1.04rem;margin-bottom:7px;letter-spacing:-.022em} .acard p{font-size:.89rem;flex:1} .ameta{font-size:.77rem;color:var(--ink-3);margin-top:11px} /* prose */ .prose{max-width:680px} .prose h2{font-size:clamp(1.32rem,2.3vw,1.7rem);margin:40px 0 13px} .prose h3{font-size:1.08rem;margin:28px 0 9px} .prose p{margin-bottom:16px;font-size:1.01rem;line-height:1.7} .prose ul,.prose ol{margin:0 0 19px 20px} .prose li{margin-bottom:8px;color:var(--ink-2);font-size:1.01rem;line-height:1.65} .prose>p:first-of-type{font-size:1.12rem;line-height:1.6;color:var(--ink);margin-bottom:24px} .prose a{color:var(--ember-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .pull{border-left:2px solid var(--ember);padding:4px 0 4px 20px;margin:24px 0} .pull p{margin:0;font-size:1.01rem} .crumb{display:flex;gap:8px;font-size:.82rem;color:var(--ink-3);margin-bottom:20px;flex-wrap:wrap} .crumb a:hover{color:var(--ink)} .relnext{border-top:1px solid var(--line);margin-top:44px;padding-top:24px} /* tables */ .tw{overflow-x:auto;margin-bottom:22px;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:.89rem;min-width:460px} caption{text-align:left;font-size:.81rem;color:var(--ink-3);padding-bottom:10px} th{text-align:left;font-weight:600;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:0 14px 10px 0;border-bottom:1px solid var(--ink)} td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);color:var(--ink-2)} td:first-child{color:var(--ink);font-weight:500} /* Rechtsbündige Spalten stehen meist ganz rechts - dort darf die Polsterung weg. Steht so eine Spalte mitten in der Tabelle, klebte die Zahl bisher an der nächsten Spalte. */ th.r,td.r{text-align:right} th.r:last-child,td.r:last-child{padding-right:0} td.r{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600} tr.sub td{background:var(--bg-soft);font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:8px 14px 8px 10px} /* faq */ .faq details{border-bottom:1px solid var(--line)} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;cursor:pointer;list-style:none;font-size:1rem;font-weight:500;transition:color .2s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--ember)} .faq .ic{width:14px;height:14px;flex-shrink:0;position:relative} .faq .ic::before,.faq .ic::after{content:"";position:absolute;background:var(--ink-3);transition:transform .3s var(--ease),opacity .3s} .faq .ic::before{top:6px;left:0;width:14px;height:1.5px} .faq .ic::after{top:0;left:6px;width:1.5px;height:14px} .faq details[open] .ic::after{transform:rotate(90deg);opacity:0} /* Die Antwort war bisher auf Höhe null geklemmt, sobald JavaScript lief - und nichts hat sie je wieder aufgemacht. Wer die Seite mit JavaScript besuchte, konnte die Fragen anklicken und sah trotzdem nichts. Jetzt macht das Aufklappen der Browser selbst, wie bei
vorgesehen. Die Bewegung ist reine Verzierung und kann nichts mehr verstellen. Wer keine Animationen mag, bekommt sie gar nicht erst. */ .faq .ans{overflow:hidden} .faq details[open] .ans{animation:faqauf .28s var(--ease) both} @keyframes faqauf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.faq details[open] .ans{animation:none}} .faq .ans p{padding:0 40px 20px 0;font-size:.94rem;max-width:64ch} /* cta */ .cta{background:var(--green);color:#fff;border-radius:10px;padding:clamp(28px,3.6vw,48px)} .cta-in{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap} .cta h2{margin-bottom:8px;color:#fff} .cta p{color:rgba(255,255,255,.68);max-width:44ch} .cta-actions{display:flex;gap:10px;flex-wrap:wrap} .cta .btn-primary{background:#fff;color:var(--green)} .cta .btn-primary:hover{background:rgba(255,255,255,.88)} /* kv */ .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden} .kv>div{background:#fff;padding:18px 20px} .kv dt{font-size:.73rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .kv dd{font-size:.95rem;color:var(--ink)} .tag{display:inline-block;font-size:.73rem;font-weight:600;color:var(--ink-3);border:1px solid var(--line);padding:3px 10px;border-radius:20px} /* contact */ .cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,60px)} @media(max-width:820px){.cgrid{grid-template-columns:1fr}} .cinfo dt{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .cinfo dd{margin-bottom:20px;font-size:.97rem;color:var(--ink-2);line-height:1.55} .cinfo dd a{font-weight:600;color:var(--ink)} .cinfo dd a:hover{color:var(--ember)} /* footer */ footer{background:var(--green);color:rgba(255,255,255,.6);font-size:.87rem;padding:clamp(42px,5.5vw,68px) 0 24px} footer a{color:rgba(255,255,255,.78)} footer a:hover{color:#fff} footer h2{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px} footer ul{list-style:none} footer li{margin-bottom:9px} .fgridder{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px} @media(max-width:820px){.fgridder{grid-template-columns:1fr 1fr;gap:28px}} @media(max-width:480px){.fgridder{grid-template-columns:1fr}} .fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff} .fbrand .brand-text b{color:#fff} .fbrand .brand-text span{color:rgba(255,255,255,.45)} .fbot{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:rgba(255,255,255,.45)} .mcta{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:90;gap:10px} .mcta .btn{flex:1;box-shadow:0 6px 22px rgba(0,0,0,.16)} @media(max-width:760px){.mcta{display:flex}body{padding-bottom:78px}} @keyframes pin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .todo{border:1px dashed #cfc7ad;background:#fdfbf3;border-radius:6px;padding:13px 16px;font-size:.83rem;color:#6f6544;margin:20px 0} .todo b{color:#4e4527} /* ============ Ergänzungen der statischen Fassung ============ */ /* Schriften lokal - kein Aufruf an Google */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('/assets/fonts/inter-latin-400.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('/assets/fonts/inter-latin-500.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/fonts/inter-latin-600.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fonts/inter-latin-700.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Sprunglink für Tastatur und Screenreader */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0;font-size:.9rem} .skip:focus{left:0} /* Footer-Überschriften sind jetzt h2 - Größe bleibt wie im Entwurf */ footer h2{font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:14px} .zonecard h3{font-size:.96rem} /* Formular: Einwilligung, Honeypot, Rückmeldung */ .checkrow{display:flex;gap:10px;align-items:flex-start;margin-top:6px;font-size:.83rem;color:var(--ink-2);line-height:1.5;cursor:pointer} .checkrow input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--green)} .checkrow a{color:var(--ember-2);text-decoration:underline;text-underline-offset:2px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formmsg{display:none;padding:12px 14px;border-radius:var(--r);font-size:.87rem;margin-top:14px;line-height:1.5} .formmsg.ok{display:block;background:#eef5ef;border:1px solid #cfe2d3;color:#2c5c39} .formmsg.err{display:block;background:#fdf1ec;border:1px solid #f0d3c4;color:var(--ember-2)} .formmsg a{color:inherit;font-weight:600;text-decoration:underline} /* offene Punkte im Entwurf sichtbar markieren */ .todo-inline{background:#fdf3d6;border-bottom:1px solid #e3cf94;padding:0 3px;color:#6f5a1f} /* dreispaltiges Beitragsraster unter Artikeln */ .agrid-3{gap:22px} .relnext .acard h3{font-size:.97rem} .prose .relnext{max-width:none} /* Bildplatzhalter, solange keine echten Fotos vorliegen */ .pcard-img img{background:var(--bg-soft)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Karte: Dekoration darf keine Klicks abfangen, Orte brauchen eine ausreichend große Trefferfläche - gerade auf dem Telefon. */ .ring-f,.ring-s,.rgn,.rgn-label{pointer-events:none} .city .hit{fill:transparent;stroke:none} .city:focus{outline:none} .city:focus-visible circle:not(.hit){stroke:var(--green);stroke-width:3} /* ============ Stand nach Einarbeitung der Betriebsgrafiken ============ */ /* Markenfarben aus dem Logo */ :root{--wood:#6b4423;--wood-2:#5a3a1e;--cream:#f4ecd8} .brand svg,.fbrand svg{flex-shrink:0} .brand-text b{letter-spacing:.02em} /* Karte: Liefergebiet, 50-km-Kreis, Lagerplätze */ .gebiet{fill:rgba(61,122,78,.10);stroke:var(--wood);stroke-width:1.6;stroke-dasharray:6 4;stroke-linejoin:round} .ring50{fill:rgba(28,51,37,.06);stroke:var(--green-2);stroke-width:1.3;stroke-dasharray:3 3} .ring50-label{font-size:8.5px;fill:var(--green-2);font-weight:600;letter-spacing:.04em} .lagerfir{fill:rgba(28,51,37,.62)} .mapbox .rgn-label{font-size:9px;fill:var(--ink-3);font-weight:600;letter-spacing:.14em;text-transform:uppercase} .gebiet,.ring50,.ring50-label,.lagerfir{pointer-events:none} .maplegend{flex-direction:column;gap:8px} .lgbox{width:14px;height:11px;border-radius:2px;background:rgba(61,122,78,.16);border:1.4px dashed var(--wood);flex-shrink:0} .lgring{width:13px;height:13px;border-radius:50%;border:1.3px dashed var(--green-2);background:rgba(28,51,37,.06);flex-shrink:0} .lgbund{width:14px;height:11px;border-radius:2px;background:rgba(107,68,35,.07);border:1.4px dashed rgba(107,68,35,.75);flex-shrink:0} .lgfir{width:14px;height:16px;flex-shrink:0} .lgfir svg{width:14px;height:16px;overflow:visible} /* Postleitzahl-Rückmeldung im Rechner */ .zonepill.nah i{background:#3d7a4e} .zonepill.weit i{background:var(--ember)} .hintbox.info{color:var(--green-2);background:#f0f5f1;border-radius:var(--r);padding:11px 13px} /* Google Maps erst nach Zustimmung */ @media(max-width:640px){.mapconsent.loaded{height:340px}} /* Seite "Holz anbieten" */ .ankauf-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:start} @media(max-width:900px){.ankauf-layout{grid-template-columns:1fr}} .buybox{background:var(--green);color:#fff;border-radius:10px;padding:clamp(22px,3vw,30px)} .buybox h2{color:#fff;font-size:1.1rem;margin-bottom:16px} .buybox p{color:rgba(255,255,255,.68);font-size:.9rem;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.15)} .ticks{list-style:none} .ticks li{position:relative;padding-left:28px;margin-bottom:10px;font-size:.95rem;color:rgba(255,255,255,.92)} .ticks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.16)} .ticks li::after{content:"";position:absolute;left:5px;top:9px;width:6px;height:3px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)} .steps{list-style:none;margin:0} .steps li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)} .steps li:first-child{border-top:1px solid var(--line-2)} .stepnum{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:600} .steps h3{font-size:.98rem;margin-bottom:4px} .steps p{font-size:.88rem} /* Formularfelder für den Holzankauf */ select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:.93rem;background:#fff;color:var(--ink);appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c8a7f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center} select:focus{outline:0;border-color:var(--ink)} input[type=file]{width:100%;padding:14px 13px;border:1px dashed var(--line);border-radius:var(--r);font-size:.88rem;background:var(--bg-soft);cursor:pointer} input[type=file]::file-selector-button{margin-right:12px;padding:7px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;font:inherit;font-size:.85rem;cursor:pointer} .req{color:var(--ember)} .finp-hint{display:block;font-size:.78rem;color:var(--ink-3);margin-top:5px;line-height:1.45} .preisblock{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 4px;margin:4px 0 18px} .euroin{display:flex;align-items:center;gap:0} .euroin span{padding:11px 12px;border:1px solid var(--line);background:#fff;font-size:.88rem;color:var(--ink-3);white-space:nowrap} .euroin span:first-child{border-radius:var(--r) 0 0 var(--r);border-right:0} .euroin span:last-child{border-radius:0 var(--r) var(--r) 0;border-left:0} .euroin input{border-radius:0;text-align:right} .ring50-label{paint-order:stroke fill;stroke:var(--bg-soft);stroke-width:2.6px;stroke-linejoin:round} .mapbox .city text{paint-order:stroke fill;stroke:var(--bg-soft);stroke-width:2.2px;stroke-linejoin:round} /* Echte Karte mit Radius */ .leaflet-container{font:inherit;font-size:.85rem} .leaflet-popup-content{font-size:.86rem;line-height:1.5} .leaflet-control-attribution{font-size:.68rem} @media(max-width:640px){.leafletmap{height:380px}} .kontakt-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start} @media(max-width:900px){.kontakt-layout{grid-template-columns:1fr}} /* Sortimentsraster mit acht Karten: vier Spalten auf breiten Schirmen */ @media(min-width:1101px){.pgrid-4{grid-template-columns:repeat(4,1fr);gap:22px}} .pcard-price b{font-size:1.12rem} /* Porträtfoto füllt den Rahmen, Bildunterschrift bleibt darüber */ .portrait picture,.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .portrait::after{z-index:1} /* Einwilligungshinweis für Google Ads */ .consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:120;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(21,21,15,.16)} .consent[hidden]{display:none} .consent-in{display:flex;align-items:center;gap:clamp(16px,3vw,32px);padding:18px 22px;max-width:var(--max);margin:0 auto;flex-wrap:wrap} .consent-text{flex:1;min-width:260px} .consent-text b{display:block;font-size:.97rem;margin-bottom:4px} .consent-text p{font-size:.86rem;line-height:1.5;margin:0} .consent-text a{color:var(--ember-2);text-decoration:underline;text-underline-offset:2px} /* Beide Knoepfe sehen gleich aus. Ablehnen darf nicht schwerer wirken als zustimmen - sonst ist die Einwilligung nichts wert. */ .consent-actions{display:flex;gap:10px;flex-wrap:wrap} .consent-actions .btn{min-width:150px} .consent-more{background:none;border:0;padding:0 22px 16px;font:inherit;font-size:.82rem;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .consent-more:hover{color:var(--ink)} .consent-detail{border-top:1px solid var(--line);padding:16px 22px 4px;max-width:var(--max);margin:0 auto} .consent-detail[hidden]{display:none} .consent-opt{display:flex;gap:11px;align-items:flex-start;padding:9px 0;cursor:pointer} .consent-opt input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--ember)} .consent-opt b{display:block;font-size:.9rem;margin-bottom:2px} .consent-opt span span{display:block;font-size:.82rem;line-height:1.45;color:var(--ink-2)} @media(max-width:760px){.consent{bottom:86px;max-height:76vh;overflow-y:auto}.consent-actions .btn{flex:1;min-width:0}} .linkbtn{background:none;border:0;padding:0;font:inherit;color:rgba(255,255,255,.78);cursor:pointer;text-align:left} .linkbtn:hover{color:#fff;text-decoration:underline} /* Ratgeber: Bilder in Karten und im Beitragskopf */ .acard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)} .acard:hover .acard-img img{transform:scale(1.045)} .artkopf{margin:26px 0 34px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft)} .artkopf img{width:100%;height:auto;display:block} .artkopf picture img{aspect-ratio:16/10;object-fit:cover} /* ---------------- Zoombare Karte ---------------- */ .glkarte{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft)} .glkarte-vor .mapbox{border:0;border-radius:0} .glkarte.geladen .glkarte-vor,.glkarte.geladen .glkarte-start{display:none} .glkarte-flaeche{width:100%;height:var(--kartenhoehe,520px)} .glkarte-start{ position:absolute;right:12px;top:12px;z-index:3; font-family:inherit;font-size:.84rem;font-weight:500;cursor:pointer; background:#fff;color:var(--ink);border:1px solid var(--line); border-radius:var(--r);padding:9px 15px;box-shadow:0 4px 14px rgba(21,21,15,.10); transition:border-color .2s var(--ease),background .2s var(--ease); } .glkarte-start:hover{border-color:var(--ink-3);background:var(--bg-soft)} .glkarte-start:disabled{opacity:.6;cursor:default} .glkarte-lokal{max-width:290px;cursor:default;font-weight:400;line-height:1.45;color:var(--ink-2)} .glkarte-lokal code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--bg-soft);padding:1px 5px;border-radius:3px;color:var(--ink)} .glkarte-fehler{ position:absolute;left:12px;right:12px;bottom:12px;z-index:3;margin:0; font-size:.82rem;color:var(--ember-2);background:#fdf4ef; border:1px solid var(--line);border-radius:var(--r);padding:9px 13px; } .glkarte-marker{ width:20px;height:20px;border-radius:50%;cursor:pointer; background:var(--green);border:3px solid #fff;box-shadow:0 2px 8px rgba(21,21,15,.35); } .maplibregl-popup-content{font-family:inherit;font-size:.86rem;line-height:1.5;border-radius:var(--r);padding:11px 14px} .maplibregl-ctrl-attrib{font-size:.7rem} @media(max-width:640px){.glkarte-flaeche{height:calc(var(--kartenhoehe,520px) * .8)}} /* ---------------- Karte ---------------- */ .land{stroke-linejoin:round} .land-de{fill:#f4f2ea;stroke:#b9b2a0;stroke-width:1.1} .land-nachbar{fill:#e8e6dd;stroke:#c4bdac;stroke-width:1} .land-label{font-size:9.5px;font-weight:600;letter-spacing:.14em;fill:#a9a396;text-transform:uppercase} .karte-home{margin-top:44px} .anfahrt{border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);padding:clamp(22px,3vw,32px)} .anfahrt-in{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap} .anfahrt-adr{font-size:1.15rem;color:var(--ink);margin:8px 0 10px;line-height:1.45} .anfahrt-adr b{font-weight:600} .anfahrt-note{font-size:.9rem;max-width:44ch} .anfahrt-tun{display:flex;gap:10px;flex-wrap:wrap} /* ---------------- Aktuelle Angebote ---------------- */ .angebote{position:relative} .angebote[data-laden]{opacity:.45;transition:opacity .2s var(--ease)} .agrid-ang{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:960px){.agrid-ang{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.agrid-ang{grid-template-columns:1fr}} .angk{border:1px solid var(--line);border-radius:10px;background:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden;color:inherit;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)} .angk::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ton,#7a5a34);z-index:2} .angk:hover{border-color:#d5d0c4;transform:translateY(-3px);box-shadow:0 14px 34px rgba(21,21,15,.09)} .angk-bild{aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft);position:relative} /* picture ist inline und schrumpft sonst auf die Eigenbreite des Bildes - dann greift width:100% am img ins Leere. */ .angk-bild picture,.angdetail-bild picture{display:block;width:100%;height:100%} .angk-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .angk:hover .angk-bild img{transform:scale(1.045)} .angk-bild-hinweis{position:absolute;left:10px;bottom:10px;font-size:.66rem;letter-spacing:.04em;color:#fff;background:rgba(21,21,15,.55);padding:2px 8px;border-radius:20px;backdrop-filter:blur(3px)} .angk-b{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1} .angk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:2px} .angk-head h3{flex:1} .angk-menge{text-align:right;line-height:1;font-variant-numeric:tabular-nums} .angk-menge b{display:block;font-size:1.6rem;font-weight:600;letter-spacing:-.04em;color:var(--ink)} .angk-menge span{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} .angk h3{margin-bottom:0;line-height:1.2} .angk-sub{font-size:.85rem;color:var(--ink-2);margin:6px 0 10px} .angk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .angk-tags .tag{font-size:.7rem;padding:2px 9px} .angk-text{font-size:.86rem;color:var(--ink-2);margin-bottom:8px} .angk-lager{font-size:.78rem;color:var(--ink-3);margin-bottom:12px} .angk-foot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:13px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px} .angk-preis b{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.032em} .angk-preis b i{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3);vertical-align:.32em} .angk-preis span{font-size:.78rem;color:var(--ink-3)} .angk-preis-text b{font-size:.95rem;font-weight:500;color:var(--ink-2);letter-spacing:0;line-height:1.35} .angk-cta{font-size:.86rem;font-weight:500;color:var(--ember);white-space:nowrap} .angk:hover .angk-cta{color:var(--ember-2)} .astand{font-size:.79rem;color:var(--ink-3);margin-top:26px;padding-top:14px;border-top:1px solid var(--line-2)} /* Angebot über dem Anfrageformular */ .angebot-hinweis{border:1px solid var(--line);border-left:3px solid var(--ember);background:var(--bg-soft);border-radius:var(--r);padding:14px 18px;margin-bottom:22px;font-size:.9rem} .angebot-hinweis b{font-weight:600} .angdetail{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:28px} .angdetail-top{display:grid;grid-template-columns:300px 1fr;gap:0;align-items:stretch} @media(max-width:760px){.angdetail-top{grid-template-columns:1fr}} .angdetail-bild{overflow:hidden;background:var(--bg-soft);position:relative;min-height:230px} @media(max-width:760px){.angdetail-bild{aspect-ratio:4/3;min-height:0}} .angdetail-bild img{width:100%;height:100%;object-fit:cover} .angdetail-b{padding:22px 24px} .angdetail-eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ember);margin-bottom:8px;display:block} .angdetail-b h2{font-size:clamp(1.2rem,2.2vw,1.6rem);margin-bottom:4px} .angdetail-sub{font-size:.9rem;color:var(--ink-2);margin-bottom:12px} .angdetail-preis{display:flex;align-items:baseline;gap:10px;margin:14px 0 12px} .angdetail-preis b{font-size:1.5rem;font-weight:600;letter-spacing:-.032em} .angdetail-preis span{font-size:.82rem;color:var(--ink-3)} .angdetail-text{border-top:1px solid var(--line-2);padding:20px 24px;font-size:.92rem;color:var(--ink-2);white-space:pre-line} .angdetail-galerie{display:flex;gap:8px;padding:0 24px 20px;flex-wrap:wrap} .angdetail-galerie img{width:96px;height:72px;object-fit:cover;border-radius:5px;border:1px solid var(--line)} .angdetail-fuss{border-top:1px solid var(--line-2);padding:14px 24px;font-size:.8rem;color:var(--ink-3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .angdetail-fuss a{border-bottom:1px solid var(--line)} .angdetail-fuss a:hover{color:var(--ink)} /* Hinweis neben der Liefergebietskarte: die Zonen sind Anhaltspunkte, der verbindliche Preis entsteht erst nach der Anfrage. */ .kartenhinweis{margin-top:18px;padding:14px 16px;border-radius:var(--r); background:#fbf7f2;border-left:3px solid var(--wood)} .kartenhinweis b{display:block;font-size:.92rem;margin-bottom:6px;color:var(--ink-1)} .kartenhinweis p{font-size:.86rem;line-height:1.55;color:var(--ink-2);margin:0} /* Die Auskunft an einem Kartenpunkt fängt den Zeiger nicht ab, damit man von einem Punkt zum nächsten fahren kann, ohne hängenzubleiben. */ .glkarte-tip .maplibregl-popup-content, .glkarte-tip .maplibregl-popup-tip{pointer-events:none} .glkarte-tip .maplibregl-popup-content{font-size:.86rem;line-height:1.45;padding:9px 12px;border-radius:8px} /* ============ Handy: drei Dinge, die auf dem Tisch nicht auffallen ============ */ /* 1. Eingabefelder unter 16px lassen iOS Safari beim Antippen in die Seite hineinzoomen. Man tippt auf die Postleitzahl und muss danach erst wieder herauswischen. Am Schreibtisch merkt das niemand. 16px ist die Grenze, ab der Safari das lässt - deshalb genau 1rem. */ @media(max-width:760px){ input[type=text],input[type=email],input[type=tel],input[type=number], input[type=url],input[type=search],input[type=password],textarea,select{ font-size:1rem} /* Der Umrechner im Ratgeber hat eigene, kleinere Felder */ .calc input[type=radio]+span,.calc label{font-size:1rem} } /* 2. Tippziele. Ein Link in einem Fließtext darf klein bleiben - dort ist der Text der Zusammenhang. Ein Link in einer Liste, im Fußbereich oder in der Kopfleiste steht allein und muss sich treffen lassen. */ @media(max-width:760px){ footer li{margin-bottom:0} footer li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0} footer .linkbtn{min-height:44px;display:inline-flex;align-items:center} .topbar .tb-contact a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px} .crumb a,.crumb span{display:inline-flex;align-items:center;min-height:34px} .cinfo dd a{display:inline-flex;align-items:center;min-height:40px} } /* 3. Beschriftungen auf der Karte standen bei 7,6 und 9 px - auf einem Handy unlesbar, und die Karte ist dort das meistgenutzte Element. */ @media(max-width:760px){ .city text{font-size:10px} .city circle{r:4} .mapbox .rgn-label{font-size:11px;letter-spacing:.08em} .mapbox .ring50-label{font-size:10px} } /* 4. Einzeln stehende Links mit Pfeil sind Handlungsaufforderungen und werden angetippt, nicht gelesen. */ @media(max-width:760px){ .link-arrow{min-height:44px;align-items:center} /* Das Kästchen selbst ist 16px klein. Getroffen wird ohnehin die ganze Zeile, weil das