/* boxup.ch · Durchlauf 3 «Cinematic» (auf Basis Durchlauf 2 «Bannersprache») · CFW AG · Oktober 2026
   Vorbild: Transporter-Banner des Kunden. Hell, plakativ, fette zweifarbige Titel, grüne Balken, Häkchen-Kreise,
   Preiskarte auf Mint, grünes Telefon-Band. Lemon nur als Akzent (Pinselstrich auf Dunkel, Auswahl, Handy-Knopf).
   Odoo-Theme: --o-color-1 Grün #307C24 · -2 Lemon #B1CC4F · -3 Mint #E4F1DA · -4 Weiss · -5 Dunkel #212E35
   Schriften: Poppins 700/800 (Titel, Buttons), Open Sans 400/600 (Text). Buttons eckig (Round corners aus). */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(fonts/opensans-var.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:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-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}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800.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}
:root{
  --o-color-1:#307C24;--o-color-2:#B1CC4F;--o-color-3:#E4F1DA;--o-color-4:#FFFFFF;--o-color-5:#212E35;
  --green:var(--o-color-1);--lemon:var(--o-color-2);--mint:var(--o-color-3);--paper:var(--o-color-4);--ink:var(--o-color-5);
  --green-dark:color-mix(in srgb,var(--green) 80%,#000);
  --soft:color-mix(in srgb,var(--mint) 40%,var(--paper));
  --muted:color-mix(in srgb,var(--ink) 74%,var(--paper));
  --line:color-mix(in srgb,var(--ink) 13%,transparent);
  --f-head:"Poppins","Segoe UI",Arial,sans-serif;--f-body:"Open Sans","Segoe UI",Arial,sans-serif;
  --wrap:1220px;--r:12px;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--f-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}a:hover{color:var(--green-dark)}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.08;margin:0 0 .45em;text-wrap:balance;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(36px,5.6vw,70px);font-weight:800;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(28px,3.8vw,48px);font-weight:800}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
h1 .g,h2 .g{color:var(--green)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(60px,8vw,112px)}
.sec--soft{background:var(--soft)}
.sec--green{background:var(--green);color:#fff}.sec--green h2,.sec--green h3{color:#fff}
.sec--ink{background:var(--ink);color:#fff}.sec--ink h2,.sec--ink h3{color:#fff}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:60ch}
.sec--green .lead{color:#fff}.sec--ink .lead{color:color-mix(in srgb,#fff 86%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pinselstrich unter einem Wort = Odoo-Text-Hervorhebung «freehand_1» (Editor › Hervorheben) */
.o_text_highlight{position:relative;display:inline-block;white-space:nowrap;--text-highlight-width:.12em;--text-highlight-color:var(--green)}
.o_text_highlight>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.on-dark .o_text_highlight{--text-highlight-color:var(--lemon)}

/* Kicker: kleiner Titel über H2, Lemon-Strich als Akzent (Odoo: Text-Stil «Small» + Farbe o-color-1) */
.kicker{display:flex;align-items:center;gap:10px;font:700 14px/1.3 var(--f-head);color:var(--green);margin:0 0 14px;letter-spacing:.01em}
.kicker::before{content:"";width:28px;height:4px;background:var(--lemon);border-radius:2px;flex:none}
.kicker--light,.sec--green .kicker,.sec--ink .kicker{color:#fff}

/* Grüner Balken mit weisser Schrift = Text mit Hintergrundfarbe o-color-1 */
.strip{display:inline-block;background:var(--green);color:#fff;font:700 clamp(15px,1.6vw,19px)/1.25 var(--f-head);padding:9px 16px;border-radius:8px;margin:0 0 18px;letter-spacing:-.005em}
.strip span{font-weight:400}
.strip--lemon{background:var(--lemon);color:var(--ink)}

/* Buttons eckig */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--f-head);text-decoration:none;padding:16px 22px;border:2px solid var(--green);background:var(--green);color:#fff;border-radius:0;cursor:pointer;min-height:50px}
.btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}.btn--line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}.btn--light:hover{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.btn--lemon{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}.btn--lemon:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btns{display:flex;flex-wrap:wrap;gap:12px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.sec--green :focus-visible,.sec--ink :focus-visible{outline-color:var(--lemon)}

/* Kopfzeile: Pill-Menü, rechts Telefon + Button */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 95%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:80px}
.logo{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink);flex:none}
.logo img{max-width:none}.logo img:first-child{height:62px;width:auto}.logo img:last-child{height:40px;width:auto}
.nav{display:flex;gap:2px;margin-left:auto;padding:5px;background:var(--soft);border:1px solid var(--line);border-radius:999px}
.nav a{font:600 14.5px/1 var(--f-body);color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--mint)}
.nav a[aria-current=page]{background:var(--green);color:#fff}
.tel{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--f-head);color:var(--ink);text-decoration:none;white-space:nowrap}
.tel i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff}
.tel svg{width:17px;height:17px}
.top .btn{padding:12px 16px;font-size:15px;min-height:46px}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);padding:10px 12px;font:700 14px/1 var(--f-body);color:var(--ink);cursor:pointer;min-height:44px}
@media (max-width:1260px){.nav a{padding:10px 11px;font-size:14px}.top .wrap{gap:12px}.logo img:first-child{height:54px}.logo img:last-child{height:34px}}
@media (max-width:1120px){.nav{display:none}.menu-btn{display:inline-flex;margin-left:0}.tel{margin-left:auto}}
@media (max-width:760px){.top .btn,.tel{display:none}.menu-btn{margin-left:auto}}
@media (max-width:560px){.logo img:first-child{height:48px}.logo img:last-child{height:30px}.top .wrap{min-height:68px}}
dialog.menu{border:0;padding:0;margin:0 0 0 auto;height:100%;max-height:100%;width:min(380px,100%);background:var(--paper);color:var(--ink)}
dialog.menu::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.menu-in{padding:22px max(22px,env(safe-area-inset-right,0px)) 30px 22px;display:flex;flex-direction:column;gap:6px}
.menu-in a:not(.btn){font:700 20px/1.2 var(--f-head);color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.menu-in .btn{margin-top:14px;justify-content:center}
.menu-close{align-self:flex-end;background:none;border:1.5px solid var(--ink);font:700 14px/1 var(--f-body);padding:10px 12px;cursor:pointer;color:var(--ink)}

/* Startbild wie der Banner: links hell, rechts das Foto (Odoo: s_cover mit Bild + Verlauf «hell nach transparent») */
.hero{position:relative;background:var(--paper);overflow:hidden;isolation:isolate}
.hero picture,.hero picture img{position:absolute;top:0;right:0;bottom:0;width:66%;height:100%;object-fit:cover;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 36%,color-mix(in srgb,var(--paper) 82%,transparent) 48%,color-mix(in srgb,var(--paper) 0%,transparent) 72%)}
.hero .wrap{position:relative;padding-block:clamp(56px,8vw,112px) clamp(48px,7vw,96px);min-height:min(78vh,720px);display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:640px}
.hero h1{margin-bottom:.35em}
.hero .lead{color:var(--muted);max-width:46ch}
.hero .btns{margin-top:26px}
.hero-mascot{position:absolute;right:max(20px,4vw);bottom:-8px;width:clamp(150px,17vw,250px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));z-index:1}
@media (max-width:900px){
  .hero picture,.hero picture img{position:relative;width:100%;height:280px}
  .hero::before{display:none}
  .hero{display:flex;flex-direction:column-reverse}
  .hero .wrap{min-height:0;padding-block:34px 44px}
  .hero-mascot{width:118px;right:12px;bottom:-6px}}

/* Fakten-Reihe mit Icons und Trennstrichen (Odoo: s_features, Spalten mit Rahmen links) */
.facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 0;padding:20px 24px;list-style:none;background:var(--paper);border-radius:var(--r);box-shadow:0 20px 44px -26px rgba(33,46,53,.55);max-width:calc(100% - clamp(0px,14vw,230px))}
.facts li{display:flex;gap:12px;align-items:center;padding:4px 18px;border-left:2px solid var(--line);font-size:14.5px;line-height:1.3;color:var(--muted)}
.facts li:first-child{border-left:0;padding-left:0}
.facts b{display:block;font:700 17px/1.2 var(--f-head);color:var(--ink)}
.facts svg{width:34px;height:34px;color:var(--green);flex:none}
@media (max-width:900px){.facts{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}.facts li:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:359px){.facts{grid-template-columns:minmax(0,1fr)}.facts li{border-left:0;padding-left:0}}

/* Raster */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.split--rev>:first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split--rev>:first-child{order:0}}
.photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}

/* Häkchen-Kreise wie im Banner */
.ticks{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:12px}
.ticks li{position:relative;padding-left:38px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:-.05em;width:26px;height:26px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat}
.ticks--bold li{font-weight:700;font-family:var(--f-head)}
.sec--green .ticks li::before{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23307C24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}

/* Vorteile (Odoo: s_features_grid) */
.feat{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;align-content:start;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.feat h3{font-size:18px;margin:12px 0 4px;grid-column:2}
.feat .ico{grid-row:1/3}
.feat:not(:has(.ico)){grid-template-columns:minmax(0,1fr)}.feat:not(:has(.ico)) h3{grid-column:1;margin-top:0}
.feat p{color:var(--muted);margin:0;font-size:15.5px;grid-column:-2}
.ico{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);flex:none}
.ico svg{width:24px;height:24px}

/* Angebotskarten (Odoo: s_cards_grid) */
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);min-width:0;transition:transform .2s,box-shadow .2s}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-b{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-b h3{margin:0;font-size:21px}
.card .tag{font:600 13.5px/1.3 var(--f-body);color:var(--muted)}
.card .price{display:inline-block;align-self:flex-start;background:var(--green);color:#fff;font:800 19px/1.2 var(--f-head);padding:7px 12px;border-radius:8px;margin-top:auto}
.card .price small{font:400 13.5px/1 var(--f-body);color:#fff}
.card .go{font:700 15px/1 var(--f-head);color:var(--green);margin-top:10px}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -18px rgba(33,46,53,.45)}.card:hover .go{text-decoration:underline}

/* Zahlen auf Grün (Odoo: s_numbers, Hintergrund o-color-1) */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:700px){.nums{grid-template-columns:minmax(0,1fr)}}
.num{border-left:3px solid var(--lemon);padding-left:18px}
.num b{display:block;font:800 clamp(46px,6.4vw,80px)/1 var(--f-head);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.num b em{font-style:normal;color:#fff;font-size:.46em;margin-left:4px}
.num span{display:block;margin-top:8px;color:#fff}

/* Tabellen (Odoo: s_comparisons / Tabelle) */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font:700 12.5px/1.2 var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tbl td.r,.tbl th.r{text-align:right}
.tbl tr:hover td{background:var(--soft)}
.tblwrap{position:relative;overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.size{display:inline-grid;place-items:center;min-width:46px;height:32px;padding:0 8px;background:var(--green);color:#fff;font:800 14px/1 var(--f-head);border-radius:6px}
.note{font-size:14px;color:var(--muted)}
.box-note{background:var(--soft);border-left:4px solid var(--green);border-radius:0 var(--r) var(--r) 0;padding:16px 18px;margin:18px 0}

/* Preiskarte wie im Banner: Mint, Pinsel-Etikett, Icon-Zeilen (Odoo: s_pricelist_boxed) */
.pricecard{position:relative;background:color-mix(in srgb,var(--mint) 55%,var(--paper));border-radius:16px;padding:46px 22px 18px;box-shadow:0 24px 48px -28px rgba(33,46,53,.5)}
.brush{position:absolute;left:-10px;top:-22px;display:inline-block;padding:12px 26px 14px 22px;color:#fff;font:800 italic 24px/1 var(--f-head);letter-spacing:-.01em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' preserveAspectRatio='none'%3E%3Cpath fill='%23307C24' d='M6 18C30 8 70 6 118 5c36-1 70 1 96 6 6 1 5 8 2 12l-6 6c5 4 7 10 4 15-4 6-16 6-36 8-48 4-104 5-150 2-14-1-24-3-26-9-1-4 4-7 3-11-2-5-9-9-5-16z'/%3E%3C/svg%3E") center/100% 100% no-repeat;transform:rotate(-3deg)}
.prow{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.prow:last-of-type{border-bottom:0}
.prow i{display:grid;place-items:center;width:40px;height:40px;color:var(--green)}
.prow i svg{width:34px;height:34px}
.prow .chf{font:700 14px/1 var(--f-head)}
.prow .val{font:800 22px/1.15 var(--f-head);font-variant-numeric:tabular-nums}
.prow .val small{font:500 15px/1 var(--f-head);color:var(--muted)}
.pnote{display:flex;gap:12px;align-items:center;background:color-mix(in srgb,var(--mint) 80%,var(--paper));border-radius:10px;padding:12px 14px;margin-top:10px}
.pnote svg{width:34px;height:34px;color:var(--green);flex:none}
.pnote b{display:block;color:var(--green);font:700 16px/1.2 var(--f-head)}

/* Transporter-Szene (der Banner als Website-Element) */
.van{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:var(--paper);border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.van-text{padding:clamp(26px,4vw,50px)}
.van-text h2{font-size:clamp(30px,3.6vw,50px)}
.van-facts{display:flex;flex-wrap:wrap;gap:14px 0;margin:0 0 18px;padding:0;list-style:none}
.van-facts li{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.25;color:var(--muted);padding:0 12px;border-left:2px solid var(--line)}
.van-facts li:first-child{border-left:0;padding-left:0}
.van-facts b{display:block;font:700 17px/1.2 var(--f-head);color:var(--ink)}
.van-facts svg{width:30px;height:30px;color:var(--green);flex:none}
.van-img{position:relative;min-height:580px;background:var(--mint)}
.van-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.van-img .pricecard{position:absolute;left:24px;bottom:24px;width:min(330px,calc(100% - 48px))}
.claim{position:absolute;right:20px;top:24px;color:#fff;font:800 italic clamp(18px,2vw,26px)/1.15 var(--f-head);text-align:right;transform:rotate(-7deg);text-shadow:0 2px 12px rgba(0,0,0,.55)}
.claim span{display:block}
.van-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;background:var(--green);color:#fff;padding:16px clamp(20px,3vw,32px)}
@media (max-width:980px){.van{grid-template-columns:minmax(0,1fr)}.van-img{min-height:520px}}
@media (max-width:520px){.van-facts{flex-direction:column;gap:12px}.van-facts li{border-left:0;padding-left:0}}
@media (max-width:480px){.van-img{min-height:600px}.claim{font-size:17px}}

/* Grünes Telefon-Band wie unten im Banner (Odoo: Band mit Hintergrund o-color-1, auf jeder Seite über der Fusszeile) */
.callbar{background:var(--green);color:#fff;position:relative;overflow:hidden}
.callbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding-block:22px}
.callbar .ring{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--green);flex:none}
.callbar .ring svg{width:28px;height:28px}
.callbar .call,.foot .callbar .call{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;color:#fff;text-decoration:none}
.callbar .call span{font:700 clamp(16px,1.6vw,20px)/1.2 var(--f-head)}
.callbar .call b{font:800 clamp(26px,3.4vw,44px)/1 var(--f-head);letter-spacing:-.02em;white-space:nowrap}
.callbar ul{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;margin:0 0 0 auto;padding:0}
.callbar li{display:flex;align-items:center;gap:10px;font:600 14.5px/1.25 var(--f-head);padding-left:24px;border-left:2px solid color-mix(in srgb,#fff 35%,transparent)}
.callbar li svg{width:30px;height:30px;flex:none}
@media (max-width:980px){.callbar ul{margin-left:0}.callbar li{padding-left:0;border-left:0}}

/* Aufruf mit Maskottchen (Odoo: s_call_to_action + Bild) */
.cta{position:relative;overflow:hidden}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.cta-mascot{width:clamp(130px,15vw,210px);height:auto;filter:drop-shadow(0 14px 20px rgba(0,0,0,.3))}
@media (max-width:760px){.cta .wrap{grid-template-columns:minmax(0,1fr)}.cta-mascot{width:130px;justify-self:end;margin-top:-10px}}

/* Seitenkopf (Odoo: s_text_cover) */
.page-head{background:var(--soft);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head .wrap{padding-block:clamp(44px,6vw,80px)}
.page-head .lead{max-width:62ch}
.crumbs{font-size:13.5px;color:var(--muted);margin:0 0 16px}.crumbs a{color:var(--muted)}

/* Schritte (Odoo: s_process_steps) */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line);align-items:center}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font:800 17px/1 var(--f-head)}

/* FAQ (Odoo: s_faq_collapse) */
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;font:700 17.5px/1.35 var(--f-head);padding:18px 54px 18px 20px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font:700 20px/1 var(--f-body)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 20px 18px;color:var(--muted);max-width:76ch}

/* Lageplan-Sektion */
.plan-sec .bxp{margin-top:26px}
.plan-card{background:var(--paper);border-radius:18px;padding:clamp(14px,2vw,26px);box-shadow:0 24px 48px -32px rgba(33,46,53,.45);border:1px solid var(--line)}

/* Formular (Odoo: s_website_form, Aktion «Create an Opportunity») */
.form{display:grid;gap:16px;max-width:780px}
.form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.form .row2{grid-template-columns:minmax(0,1fr)}}
.form label{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--ink) 35%,transparent);border-radius:8px;background:#fff;color:var(--ink);min-height:48px}
.form textarea{min-height:130px}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--lemon);outline-offset:0;border-color:var(--ink)}
.form .hp{position:absolute;left:-9999px}
.form-ok{background:var(--mint);border-left:4px solid var(--green);padding:16px 18px;border-radius:0 8px 8px 0}

/* Kontakt */
.contact dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.contact dt{color:var(--muted)}.contact dd{margin:0;font-weight:600}

/* Fusszeile */
.foot{background:var(--ink);color:color-mix(in srgb,#fff 80%,transparent);font-size:15px}
.foot>.wrap{padding-block:56px 30px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot h2{color:#fff;font-size:15px;margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot a{color:color-mix(in srgb,#fff 88%,transparent);text-decoration:none}.foot a:hover{color:var(--lemon);text-decoration:underline}
.foot-logo{display:flex;align-items:center;gap:4px;background:#fff;padding:8px 12px;width:max-content;margin-bottom:16px;border-radius:10px}
.foot-logo img{width:auto;max-width:none}.foot-logo img:first-child{height:44px}.foot-logo img:last-child{height:28px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid color-mix(in srgb,#fff 18%,transparent);margin-top:40px;padding-top:18px;font-size:13.5px}

/* WhatsApp + Handy-Aktionsleiste */
.wa{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:10px;background:#25D366;color:#0B3B1F;font:700 15px/1 var(--f-head);text-decoration:none;padding:12px 16px 12px 12px;box-shadow:0 6px 20px rgba(0,0,0,.18);border-radius:999px}
.wa:hover,.foot .wa:hover{background:#1EBE5A;color:#0B3B1F;text-decoration:none}
.foot .wa{color:#0B3B1F}
.wa svg{width:26px;height:26px}
.actionbar{display:none}
@media (max-width:760px){
  .wa{bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:12px}
  .wa span{display:none}
  .actionbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--ink);padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:6px}
  .actionbar a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-decoration:none;font:700 12.5px/1 var(--f-body);padding:8px 4px}
  .actionbar a.main{background:var(--lemon);color:var(--ink)}
  .actionbar svg{width:20px;height:20px}
  body{padding-bottom:72px}}

/* Bausteine-Seite */
.sw{border:1px solid var(--line);border-radius:10px;overflow:hidden}.sw i{display:block;height:84px}.sw div{padding:12px 14px;font-size:14px}.sw b{display:block;font-family:ui-monospace,Menlo,monospace}
.code{background:#0F1A1F;color:#D6E4DA;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;padding:16px;overflow:auto;max-height:340px;white-space:pre;border-radius:10px}
.draft{background:var(--lemon);color:var(--ink);font:600 13.5px/1.4 var(--f-body);text-align:center;padding:8px 16px}
.draft a{color:var(--ink)}
.prose{max-width:78ch}.prose h2{font-size:26px;margin-top:1.6em}.prose h3{font-size:18px;margin-top:1.4em}

/* ===== Durchlauf 3 · Cinematic =====
   Regeln: keine Bibliothek, IntersectionObserver, prefers-reduced-motion schaltet alles ab, H1 nie per transform versteckt (nur Deckkraft .01 → 1).
   Odoo: Einblenden = Baustein-Option «Animation» (o_animate o_anim_fade_in_up, «Beim Scrollen»), Verzögerung pro Block einstellbar.
   Ken Burns, Körnung, Letterbox = 1 kleine Theme-SCSS-Regel (Website › Theme › Code-Editor), Parallax = Baustein s_parallax. */
@keyframes o_anim_fade_in{from{opacity:.01}to{opacity:1}}
@keyframes o_anim_fade_in_up{from{opacity:.01;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes o_anim_fade_in_left{from{opacity:.01;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes o_anim_fade_in_right{from{opacity:.01;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes o_anim_zoom_in{from{opacity:.01;transform:scale(.92)}to{opacity:1;transform:none}}
.js .o_animate{opacity:.01}
.js .o_animate:not(.o_visible){visibility:hidden} /* wie Odoo: unsichtbar bis zum Einblenden, zählt nicht für Kontrastprüfung */
.js .o_animate.o_visible{animation:var(--anim,o_anim_fade_in_up) 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.o_anim_fade_in{--anim:o_anim_fade_in}.o_anim_fade_in_up{--anim:o_anim_fade_in_up}.o_anim_fade_in_left{--anim:o_anim_fade_in_left}.o_anim_fade_in_right{--anim:o_anim_fade_in_right}.o_anim_zoom_in{--anim:o_anim_zoom_in}

/* Startbild: Ken Burns 20 s, Maskottchen läuft ein, Körnung auf dem Foto */
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.8%,-1.2%)}}
.hero picture{position:absolute;top:0;right:0;bottom:0;width:66%;overflow:hidden;z-index:-2}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;animation:kenburns 20s ease-in-out infinite alternate;transform-origin:65% 40%}
.hero picture::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:multiply;pointer-events:none}
@keyframes mascotIn{from{opacity:0;transform:translate(60px,10px) rotate(4deg)}60%{opacity:1}to{opacity:1;transform:none}}
.js .hero-mascot{animation:mascotIn 1.2s .7s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:900px){.hero picture{position:relative;width:100%;height:280px}.hero picture img{height:100%}}

/* Kinoband: Vollbild-Foto mit Letterbox-Balken, die beim Einscrollen aufgehen (Odoo: s_parallax + Overlay; Balken = Theme-SCSS) */
.cine{position:relative;min-height:min(86vh,760px);display:grid;align-items:end;color:#fff;overflow:hidden;isolation:isolate;background:var(--ink)}
.cine picture,.cine picture img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2}
.cine picture img{will-change:transform}
.cine::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,24,28,.15) 0%,rgba(15,24,28,.25) 45%,rgba(15,24,28,.82) 100%)}
.cine .bar{position:absolute;left:0;right:0;height:9vh;background:var(--ink);z-index:1;transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.cine .bar--t{top:0}.cine .bar--b{bottom:0}
.js .cine.o_visible .bar--t{transform:translateY(-100%)}.js .cine.o_visible .bar--b{transform:translateY(100%)}
.no-js .cine .bar,.cine:not(.o_animate) .bar{display:none}
.cine .wrap{position:relative;z-index:2;padding-block:clamp(60px,10vw,120px)}
.cine h2{color:#fff;font-size:clamp(34px,5.4vw,72px);max-width:16ch}
.cine h2 .g{color:var(--lemon)}
.cine p{max-width:52ch;font-size:clamp(17px,1.6vw,20px);color:color-mix(in srgb,#fff 88%,transparent)}

/* Zähler (nur Mengen, nie Jahreszahlen) */
.num b{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .js .o_animate{opacity:1!important;animation:none!important;visibility:visible!important}
  .hero picture img,.js .hero-mascot{animation:none!important}
  .cine .bar{display:none}
  .cine picture img{transform:none!important}}
.foot ul a{display:inline-block;padding:3px 0;min-height:24px}

/* Durchlauf 5 */
.cols2{columns:2 320px;column-gap:clamp(28px,5vw,64px)}.cols2 p{break-inside:avoid}
@media (max-width:900px){.hero{flex-direction:column}.hero picture{height:230px}.hero-mascot{top:118px;bottom:auto;width:100px}}
@media (max-width:600px){
  .tblwrap .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tblwrap .tbl,.tblwrap .tbl tbody,.tblwrap .tbl tr,.tblwrap .tbl td{display:block;width:100%}
  .tblwrap .tbl tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 14px;border-bottom:1px solid var(--line)}
  .tblwrap .tbl td{padding:0;border:0;text-align:left!important}
  .tblwrap .tbl td:first-child{grid-row:1/4}
  .tblwrap .tbl tr:hover td{background:none}}
.actionbar{transition:transform .25s}.actionbar.is-away{transform:translateY(110%);visibility:hidden}
h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media (max-width:420px){.hero picture{height:200px}.hero-mascot{top:92px;width:80px;right:8px}}
@media (max-width:600px){.tblwrap .tbl td:first-child{min-width:64px}}
main{overflow-x:clip}
.foot p a{display:inline-block;padding:2px 0;min-height:24px}