/*
Theme Name: Avokado Badsanierung
Description: Demo-Tema fuer Avokado Badsanierung (Freiburg). Fiktive Marke, noindex.
Version: 1.1.0
Requires at least: 6.5
License: GPL-2.0-or-later
Text Domain: avokado-badsanierung
*/

@font-face{font-family:Fraunces;src:url(assets/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(assets/fonts/dm-sans.woff2) format("woff2");font-weight:100 1000;font-display:swap}
:root{--krem:#F7F2E6;--pijesak:#EBE3D0;--zelena:#3E5A2E;--tamna:#1F3323;--salvia:#A9BC93;--glina:#C4683C;--glina2:#A9532B;--tekst:#2B3327;--tih:#5F6A58;--bijela:#FFFDF8;
--h:Fraunces,Georgia,serif;--t:"DM Sans","Segoe UI",sans-serif;--r:30px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--krem);color:var(--tekst);font:400 18px/1.65 var(--t)}
img,svg{display:block;max-width:100%}img{height:auto}a{color:inherit}
h1,h2,h3{font-family:var(--h);margin:0;text-wrap:balance;color:var(--tamna);font-optical-sizing:auto}p{margin:0 0 1em}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:-999px;background:var(--bijela);padding:8px 14px;z-index:99}.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--glina);outline-offset:3px}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.logo svg{stroke:none}
/* kopf: plutajuca kapsula */
.kopf{position:sticky;top:14px;z-index:50;margin-top:14px}
.kapsula{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,253,248,.93);backdrop-filter:blur(10px);border:1px solid var(--pijesak);border-radius:999px;padding:8px 10px 8px 16px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:44px;height:44px;flex:none}.logo span{font:500 24px/1 var(--h);color:var(--tamna);letter-spacing:-.01em}.logo small{display:block;font:400 11.5px/1 var(--t);color:var(--tih);margin-top:4px}
.kopf nav{display:flex;gap:4px}.kopf nav a{font:500 15.5px var(--t);text-decoration:none;padding:9px 15px;border-radius:999px;transition:background .2s}
.kopf nav a:hover,.kopf nav a[aria-current]{background:var(--pijesak)}
.nav-cta{display:none}
.kopf-cta{background:var(--zelena);color:var(--bijela);font:600 15px var(--t);padding:12px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .2s}.kopf-cta:hover{background:var(--tamna)}
.burger{display:none;width:46px;height:46px;border-radius:50%;background:var(--zelena);border:0;padding:15px 13px;cursor:pointer}.burger i{display:block;height:2px;background:var(--bijela);margin:4px 0}
/* dugmad */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font:600 16.5px var(--t);text-decoration:none;transition:background .2s,color .2s}
.btn svg{width:20px;height:20px}.btn-a{background:var(--glina);color:var(--bijela)}.btn-a:hover{background:var(--glina2)}
.btn-b{box-shadow:inset 0 0 0 1.500px var(--zelena);color:var(--zelena)}.btn-b:hover{background:var(--zelena);color:var(--bijela)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
/* hero */
.hero{padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,96px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.ey{display:block;font:500 15px var(--t);letter-spacing:0;color:var(--glina2);margin:0 0 14px}
.hero h1{font-size:clamp(46px,7vw,98px);line-height:1;font-weight:300;letter-spacing:-.025em}
.hero h1 em{font-style:normal;font-weight:600;color:var(--zelena)}
.hero .uvod{font-size:21px;line-height:1.5;margin:22px 0 28px;max-width:27em}
.avokado{position:relative;aspect-ratio:4/5;max-width:470px;justify-self:center;width:100%}
.avokado .plod{position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;padding:10px;border:1px solid var(--zelena)}
.avokado img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avokado::after{content:"";position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--glina);right:-2%;bottom:6%;box-shadow:0 0 0 10px var(--krem)}
/* uvod */
.recenica{background:var(--zelena);color:var(--krem)}
.recenica .wrap{padding-block:clamp(56px,8vw,104px)}
.recenica h2{color:var(--krem);font-size:clamp(30px,4.4vw,58px);line-height:1.12;font-weight:300;max-width:20em;letter-spacing:-.015em}
.recenica p{margin:22px 0 0;max-width:38em;font-size:19px;color:#E4E6D3}
.sek{padding-block:clamp(64px,8vw,116px)}
.sek h2{font-size:clamp(32px,4.6vw,60px);line-height:1.08;font-weight:500;letter-spacing:-.015em;margin-bottom:18px}
.pijesak{background:var(--pijesak)}
.dva{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.okvir{margin:0;padding:10px;border:1px solid var(--glina);border-radius:var(--r)}.okvir img{width:100%;border-radius:calc(var(--r) - 8px);aspect-ratio:4/3;object-fit:cover}
.okvir.vis img{aspect-ratio:4/5}
.osjecaj{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.osjecaj li{background:var(--bijela);border-radius:18px;padding:15px 20px;display:flex;gap:12px;align-items:center}
.osjecaj li::before{content:"";flex:none;width:11px;height:14px;border-radius:50%/60% 60% 40% 40%;background:var(--zelena)}
/* polja */
.polja{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.polje{background:var(--bijela);border-radius:var(--r);padding:28px;border-bottom:3px solid var(--salvia)}
.polje h3{font-size:24px;font-weight:500;margin-bottom:8px}.polje p{margin:0;color:var(--tih)}
.glava{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}.glava h2{margin:0}
.link{display:inline-flex;gap:8px;align-items:center;font:600 16.5px var(--t);color:var(--glina2)}.link svg{width:19px}
/* put */
.put{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.put li{background:var(--bijela);border-radius:var(--r);padding:26px 24px 28px;position:relative}
.put li:nth-child(even){transform:translateY(26px)}
.put h3{font-size:22px;font-weight:500;margin-bottom:6px}.put p{margin:0;font-size:16.5px;color:var(--tih)}
/* mozaik */
.mozaik{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:280px;gap:14px;margin-top:36px}
.mozaik img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}.mozaik img:first-child{grid-row:span 2}.mozaik img:nth-child(4){grid-column:span 2}
/* faq */
details{background:var(--bijela);border-radius:20px;padding:0 24px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;font:500 20px/1.3 var(--h);color:var(--tamna);padding:19px 34px 19px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:12px;font:400 28px var(--t);color:var(--glina)}details[open] summary::after{content:"–"}
details p{padding-bottom:6px}
/* zavrsni */
.zavrsni{padding-block:0 clamp(56px,7vw,96px)}
.zavrsni .wrap{background:var(--tamna);border-radius:44px;padding:clamp(44px,7vw,92px) clamp(24px,6vw,84px);text-align:center;color:var(--krem)}
.zavrsni h2{color:var(--krem);font-size:clamp(32px,5vw,64px);line-height:1.06;font-weight:300;letter-spacing:-.02em;margin-bottom:12px}
.zavrsni p{max-width:32em;margin:0 auto 24px}.zavrsni .btns{justify-content:center}.zavrsni .btn-b{box-shadow:inset 0 0 0 1.500px var(--krem);color:var(--krem)}.zavrsni .btn-b:hover{background:var(--krem);color:var(--tamna)}
/* podstranice */
.kapa{padding-block:clamp(44px,6vw,84px) clamp(16px,3vw,32px)}
.kapa h1{font-size:clamp(40px,6vw,80px);line-height:1.02;font-weight:300;letter-spacing:-.02em;max-width:14em}
.kapa .uvod{font-size:21px;margin:16px 0 0;max-width:32em;color:var(--tih)}
.schmal{max-width:760px}.recht h2{font-size:25px!important;margin:32px 0 8px}.recht p{overflow-wrap:anywhere}
.hinweis{background:var(--pijesak);border-radius:var(--r);padding:28px 30px}.hinweis p:last-child{margin:0}
.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.werte div{background:var(--bijela);border-radius:var(--r);padding:26px}.werte h3{font-size:24px;font-weight:500;margin-bottom:6px}.werte p{margin:0;color:var(--tih)}
/* fuss */
.fuss{background:var(--pijesak);font-size:16.5px}
.fuss-red{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-block:52px 34px}
.fuss h2{font:500 19px var(--h);margin-bottom:10px}.fuss nav{display:grid;gap:6px;align-content:start}.fuss nav a{text-decoration:none}.fuss nav a:hover{color:var(--glina2)}
.fuss-marke p{margin:14px 0 0;max-width:24em;color:var(--tih)}
.demo{border-top:1px solid #D5CBB4;padding-block:13px 16px;font-size:13px;line-height:1.45;color:var(--tih);display:flex;justify-content:space-between;gap:6px 28px;flex-wrap:wrap}.demo p{margin:0}
@media(max-width:1080px){.kopf-cta{display:none}.kopf nav a{padding:9px 11px}}
@media(max-width:900px){
body{font-size:17px}.wrap{width:calc(100% - 32px)}
.kopf{top:8px;margin-top:8px}.kapsula{padding:6px 8px 6px 12px;position:relative}
.logo svg{width:38px;height:38px}.logo span{font-size:21px}
.burger{display:block}
.kopf nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;background:var(--bijela);border:1px solid var(--pijesak);border-radius:24px;padding:12px}
.kopf nav.otvoren{display:flex}.kopf nav a{font-size:18px;padding:12px 14px}
.nav-cta{display:block;background:var(--zelena);color:var(--bijela)!important;text-align:center;margin-top:6px}
.hero{padding-top:22px}.hero .wrap{grid-template-columns:1fr}.hero-sad{order:1}.avokado{order:0;max-width:62%;margin-bottom:-6px}
.hero h1{font-size:clamp(44px,13vw,62px)}.hero .uvod{font-size:19px;margin:14px 0 20px}
.btn{width:100%}.btns{flex-direction:column}
.dva{grid-template-columns:1fr}.polja,.werte{grid-template-columns:1fr}.put{grid-template-columns:1fr}.put li:nth-child(even){transform:none}
.mozaik{grid-template-columns:1fr 1fr;grid-auto-rows:170px}.mozaik img:first-child{grid-column:1/-1;grid-row:span 2}.mozaik img:nth-child(4){grid-column:span 2}
.zavrsni .wrap{border-radius:30px}
.fuss-red{grid-template-columns:1fr 1fr;gap:26px 20px;padding-block:38px 26px}.fuss-marke{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}