/* Fliesen Stipic – bildstarkes Referenz-Layout: anthrazite Flächen, Champagner-Schrift, Orange nur für Highlights.
   Dünne Linien wie Fugen gliedern die Abschnitte. */
@font-face{font-family:"Stipic Display";src:url("/assets/fonts/InterDisplay-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Stipic Display";src:url("/assets/fonts/InterDisplay-Medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Stipic Text";src:url("/assets/fonts/Inter-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Stipic Text";src:url("/assets/fonts/Inter-SemiBold.woff") format("woff");font-weight:600;font-display:swap}
:root{
  --bg:#1f1e1d;        /* Anthrazit */
  --bg-2:#272625;      /* Logo-Anthrazit, zweite Fläche */
  --bg-3:#302e2c;      /* Felder, Karten */
  --line:#3e3b37;      /* Fugenlinie */
  --champ:#e3d2b8;     /* Champagner-Beige: Schrift */
  --champ-hi:#f2e7d6;  /* Überschriften */
  --muted:#a99b86;
  --or:#ec6a23;        /* Orange: Highlights */
  --or-hi:#ff8443;
  --on-or:#1f1e1d;
  --display:"Stipic Display","Inter Display",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --text:"Stipic Text",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:2px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--champ);font:400 17px/1.65 var(--text);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
img{max-width:100%;height:auto;display:block}
a{color:var(--champ-hi);text-decoration-color:var(--or);text-underline-offset:3px}
a:hover{color:var(--or-hi)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
h1,h2,h3{font-family:var(--display);color:var(--champ-hi);line-height:1.12;text-wrap:balance;margin:0 0 .5em;font-weight:300;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,6vw,4.2rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.narrow{max-width:820px}
.muted{color:var(--muted)}
.eyebrow{font:600 .74rem/1.2 var(--text);text-transform:uppercase;letter-spacing:.22em;color:var(--or);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--or)}
.skip{position:absolute;left:-999px;top:0;background:var(--or);color:var(--on-or);padding:8px 12px;z-index:60}
.skip:focus{left:8px}

/* Kopf */
.top{position:sticky;top:0;z-index:30;background:var(--bg);--nav-fg:#2b2a28;border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:72px}
.brand img{height:50px;width:auto}
.nav{display:none;gap:30px;margin-left:auto}
.nav a{font:500 .78rem/1 var(--text);text-transform:uppercase;letter-spacing:.18em;color:var(--champ);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--champ-hi);border-bottom-color:var(--or)}
.top-call{margin-left:auto;display:inline-flex;align-items:center;gap:10px;color:var(--on-or);background:var(--or);text-decoration:none;font-weight:600;padding:11px 14px;border-radius:var(--r);white-space:nowrap}
.top-call:hover{background:var(--or-hi);color:var(--on-or)}
.top-call span{display:none}
@media (min-width:920px){.nav{display:flex}.top-call{margin-left:10px}.top-call span{display:inline}}

/* Hero: schlicht, Fliesen-Raute aus dem Logo */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:
  radial-gradient(ellipse 70% 90% at 85% 40%,rgba(227,210,184,.13),transparent 60%),
  linear-gradient(180deg,#232220,var(--bg))}
.hero-in{display:grid;gap:40px;align-items:center;padding-block:clamp(64px,10vw,120px) clamp(40px,6vw,72px)}
@media (min-width:880px){.hero-in{grid-template-columns:1.25fr .75fr}}
.hero-txt{min-width:0}
.hero h1{max-width:15ch}
.hero h1 span{display:block}
.hero h1 em{display:block;font-style:normal;color:var(--champ);font-size:.46em;letter-spacing:.2em;text-transform:uppercase;margin-top:.7em;font-weight:500}
.hero h1 em::after{content:"";display:block;width:64px;height:2px;background:var(--or);margin-top:.8em}
.hero-mark{display:none;position:relative;width:min(300px,80%);aspect-ratio:1;justify-self:center;transform:rotate(45deg);
  border:1px solid rgba(227,210,184,.45);padding:7%;
  grid-template-columns:1fr 1fr;gap:6%}
@media (min-width:880px){.hero-mark{display:grid}}
.hero-mark::before{content:"";position:absolute;inset:-7%;border:1px solid rgba(227,210,184,.18)}
.hero-mark span{display:block;border-radius:1px}
.hero-mark span:nth-child(1),.hero-mark span:nth-child(4){background:linear-gradient(135deg,#efe2cd,#cdb592)}
.hero-mark span:nth-child(2),.hero-mark span:nth-child(3){background:linear-gradient(135deg,#6c6862,#45423e)}
.hero-links{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);padding-block:0}
@media (min-width:760px){.hero-links{grid-template-columns:repeat(3,1fr)}}
.hero-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 4px;text-decoration:none;color:var(--champ-hi);font:300 clamp(1.2rem,2.2vw,1.6rem)/1.2 var(--display);border-bottom:1px solid var(--line)}
@media (min-width:760px){.hero-links a{border-bottom:0;padding:28px 24px 34px 0}.hero-links a+a{border-left:1px solid var(--line);padding-left:24px}}
.hero-links a span:last-child{color:var(--or);transition:transform .2s}
.hero-links a:hover{color:var(--champ)}
.hero-links a:hover span:last-child{transform:translateX(4px)}
.lead{font-size:1.15rem;max-width:52ch;color:var(--champ)}

/* Bereiche */
.b-head{display:grid;gap:18px;margin-bottom:clamp(28px,4vw,44px)}
@media (min-width:880px){.b-head{grid-template-columns:1fr 1fr;gap:72px;align-items:end}}
.b-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:0}
.b-head p{margin:0 0 12px;max-width:56ch}
.more{font:600 .78rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--or);text-decoration:none}
.more:hover{color:var(--or-hi)}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.tiles{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{all:unset;cursor:pointer;display:block;overflow:hidden;border-radius:var(--r);background:var(--bg-3);min-width:0}
.tile img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .5s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 22px;border-radius:var(--r);font:600 .95rem/1 var(--text);letter-spacing:.04em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
.btn-or{background:var(--or);color:var(--on-or)}
.btn-or:hover{background:var(--or-hi);color:var(--on-or)}
.btn-line{background:transparent;color:var(--champ-hi);border-color:rgba(227,210,184,.6)}
.btn-champ{background:var(--champ);color:var(--on-or)}
.btn-line:hover{border-color:var(--or);color:var(--champ-hi)}

/* Abschnitte */
.sec{padding-block:clamp(56px,9vw,110px)}
.sec-2{--champ:#3b3631;--champ-hi:#1f1e1d;--muted:#6e604e;--line:rgba(31,30,29,.16);--bg-3:#f4ecdf;
  background:linear-gradient(180deg,#eadcc6,#e3d2b8);color:var(--champ);border-block:1px solid #cdb592;color-scheme:light}
.sec-2 .eyebrow{color:#b9501a}.sec-2 .eyebrow::before{background:#b9501a}
.sec-2 .more{color:#b9501a}
.sec-2 .btn-line{color:var(--champ-hi);border-color:rgba(31,30,29,.45)}
.sec-2 a:hover{color:#b9501a}
.sec-2 .form input::placeholder,.sec-2 .form textarea::placeholder{color:#9a8b77}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{margin:0}
.intro-in{max-width:980px}
.big{font:300 clamp(1.45rem,3.2vw,2.3rem)/1.35 var(--display);color:var(--champ-hi);margin:0}
.two{display:grid;gap:48px}
@media (min-width:880px){.two{grid-template-columns:1fr 1fr;gap:72px}}

/* Projekte */
.projects{display:grid;gap:clamp(22px,3vw,36px);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.proj{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:16px;min-width:0}
.proj-img{display:block;overflow:hidden;border-radius:var(--r);background:var(--bg-3)}
.proj-img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:saturate(.92)}
.proj:hover .proj-img img,.proj:focus-visible .proj-img img{transform:scale(1.035);filter:saturate(1)}
.proj:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.proj-meta{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:14px}
.proj-t{font:300 1.35rem/1.2 var(--display);color:var(--champ-hi)}
.proj-d{color:var(--muted);font-size:.95rem}
.proj-n{color:var(--or);font:600 .78rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;margin-top:8px}

/* Leistungen */
.svcs{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:56px}
.svc{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--champ);min-width:0}
.svc-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin-bottom:12px;filter:saturate(.9)}
.svc-t{font:500 1.15rem/1.25 var(--display);color:var(--champ-hi)}
.svc-d{color:var(--muted);font-size:.95rem}
.svc:hover .svc-t{color:var(--or-hi)}
.svc-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:760px){.svc-list:not(.one){grid-template-columns:1fr 1fr;column-gap:56px}}
.svc-list li{border-bottom:1px solid var(--line)}
.svc-list a{display:flex;justify-content:space-between;gap:16px;padding:17px 2px;text-decoration:none;color:var(--champ-hi);font:300 1.12rem/1.3 var(--display)}
.svc-list a span:last-child{color:var(--or);transition:transform .2s}
.svc-list a:hover{color:var(--or-hi)}
.svc-list a:hover span:last-child{transform:translateX(4px)}

/* Ablauf */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--line)}
.steps li{display:flex;flex-direction:column;gap:8px;padding:26px 24px 26px 0}
.st-n{font:300 2.4rem/1 var(--display);color:var(--or)}
.steps strong{font:500 1.15rem/1.3 var(--display);color:var(--champ-hi)}
.steps li span:last-child{color:var(--muted)}

/* Einsatzgebiet */
.area{display:grid;gap:32px}
@media (min-width:880px){.area{grid-template-columns:1fr 1fr;gap:72px;align-items:end}}
.orte{font:300 clamp(1.1rem,2.2vw,1.45rem)/1.7 var(--display);color:var(--champ-hi);margin:0}

/* FAQ */
.faqs{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line);padding:24px 0}
.faq h2{font:500 1.2rem/1.35 var(--display);margin:0 0 .45em}
.faq p{margin:0;color:var(--champ)}

.ticks{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.ticks li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:10px;transform:rotate(45deg);background:var(--or)}
.note{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:32px;align-self:start}
.note .btn{margin-top:6px}

/* Unterseiten-Kopf */
.subhero{border-bottom:1px solid var(--line);background:var(--bg-2)}
.sh-in{display:grid;gap:36px;padding-block:56px}
.subhero.has-img .sh-in{padding-block:40px 56px}
@media (min-width:880px){.subhero.has-img .sh-in{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px;padding-block:72px}}
.sh-txt{min-width:0}
.sh-img img{width:100%;aspect-ratio:4/5;max-height:600px;object-fit:cover;border-radius:var(--r)}
.crumb{font-size:.85rem;color:var(--muted);letter-spacing:.04em}
.crumb a{color:var(--muted);text-decoration:none}
.crumb span{color:var(--or);margin:0 6px}

/* CTA */
.cta{background:var(--bg-2);border-top:1px solid var(--line)}
.cta-in{display:grid;gap:12px;padding-block:72px;align-items:center}
@media (min-width:880px){.cta-in{grid-template-columns:1.2fr 1fr;gap:56px}.cta .btns{justify-content:flex-end;margin:0}}
.cta h2{margin-bottom:.4em}

/* Kontakt */
.contact{display:grid;gap:48px}
@media (min-width:880px){.contact{grid-template-columns:.9fr 1.1fr;gap:72px}}
.cdata{font-size:1.05rem}
.form{display:grid;gap:6px;min-width:0}
.form .row{display:grid;gap:6px}
@media (min-width:600px){.form .row{grid-template-columns:1fr 1fr;gap:18px}}
.form .row>div{display:grid;gap:6px;min-width:0}
.form label{font:600 .74rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.form input,.form select,.form textarea{width:100%;font:400 1rem/1.4 var(--text);padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);color:var(--champ-hi)}
.form input::placeholder,.form textarea::placeholder{color:#7d7366}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--or);outline:none}
.form .check{display:flex;gap:12px;align-items:flex-start;text-transform:none;letter-spacing:0;font:400 .9rem/1.5 var(--text);color:var(--muted);margin-top:16px}
.form .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--or);flex:none}
.form button{margin-top:18px;justify-self:start}
.hp{position:absolute;left:-9999px}

.legal h1{font-size:clamp(2rem,5vw,3rem)}
.legal h2{font:500 1.2rem/1.3 var(--display);margin-top:2em}

/* Galerie-Fenster */
.lb{width:min(1000px,100vw);max-width:100vw;max-height:100dvh;height:100dvh;margin:0 auto;padding:0;border:0;background:rgba(20,19,18,.97);color:var(--champ)}
.lb::backdrop{background:rgba(10,10,10,.8)}
.lb[open]{display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 10px max(18px,env(safe-area-inset-left,0px))}
.lb-t{font:300 1.3rem/1.2 var(--display);color:var(--champ-hi);margin:0}
.lb button{all:unset;cursor:pointer;color:var(--champ-hi);border:1px solid var(--line);width:46px;height:46px;display:grid;place-items:center;font-size:1.4rem;border-radius:var(--r)}
.lb button:hover,.lb button:focus-visible{border-color:var(--or);color:var(--or-hi)}
.lb-fig{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 18px}
.lb-fig img{max-height:calc(100dvh - 190px);width:auto;max-width:100%;object-fit:contain;border-radius:var(--r)}
.lb-fig figcaption{color:var(--muted);font-size:.9rem;text-align:center}
.lb-nav{display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px))}
.lb.single .lb-nav button{visibility:hidden}

/* Fuß */
.foot{background:#191817;border-top:1px solid var(--line);padding-block:64px 28px;font-size:.95rem}
.foot-grid{display:grid;gap:36px}
@media (min-width:880px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot-logo{width:200px;height:auto;margin-bottom:18px}
.foot address{font-style:normal;color:var(--muted)}
.foot-h{font:600 .74rem/1.2 var(--text);text-transform:uppercase;letter-spacing:.2em;color:var(--or);margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.foot a{color:var(--champ);text-decoration:none}
.foot a:hover{color:var(--or-hi)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:48px;padding-top:22px;color:var(--muted);font-size:.85rem}

/* Kontaktleiste unten (Handy) */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:rgba(25,24,23,.97);border-top:1px solid var(--line);
  padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.cb{display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:var(--r);font:600 1rem/1 var(--text);text-decoration:none;letter-spacing:.03em}
.cb-tel{background:var(--or);color:var(--on-or)}
.cb-wa{border:1px solid rgba(227,210,184,.55);color:var(--champ-hi)}
@media (min-width:920px){
  body{padding-bottom:0}
  .callbar{left:auto;right:22px;bottom:22px;grid-template-columns:auto auto;background:none;border:0;padding:0}
  .cb{padding:0 20px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
  .cb-wa{background:var(--bg-2)}
}

/* nummerierte Leistungsliste, liest spaltenweise von oben nach unten */
.l-intro{margin:-12px 0 32px}
.svc-ol{display:block;border-top:1px solid var(--line)}
@media (min-width:760px){.svc-ol{columns:2;column-gap:56px}}
.svc-ol li{break-inside:avoid;border-top:0;border-bottom:1px solid var(--line)}
.svc-ol a{justify-content:flex-start;align-items:baseline}
.svc-ol .ln{font:500 .8rem/1 var(--text);letter-spacing:.1em;color:#b9501a;min-width:2.4em;flex:none}
.svc-ol .lt{flex:1}

.hero-logo{display:none;justify-self:center;width:min(400px,100%)}
.hero-logo img{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
@media (min-width:880px){.hero-logo{display:block}}

/* Kopfleiste Anthrazit; Menü auf dem Handy als eigene Zeile */
.top-in{flex-wrap:wrap;column-gap:24px;row-gap:0}
@media (max-width:919px){
  .top-in{padding-block:8px 0}
  .brand img{height:44px}
  .nav{display:flex;order:3;width:100%;justify-content:space-between;gap:8px;margin:6px 0 0;border-top:1px solid var(--line)}
  .nav a{font-size:.68rem;letter-spacing:.12em;padding:12px 0}
}
/* Hero ohne Ortstitel */
.h-claim{font-size:clamp(2.4rem,6.4vw,4.6rem);max-width:12ch;margin-bottom:.45em}
.h-claim::after{content:"";display:block;width:72px;height:2px;background:var(--or);margin-top:.45em}
/* Über uns */
.about{display:grid;gap:32px}
@media (min-width:880px){.about{grid-template-columns:.8fr 1.2fr;gap:72px}}
.big-s{font:300 clamp(1.3rem,2.6vw,1.8rem)/1.4 var(--display);color:var(--champ-hi)}
.vals{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.vals li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.vals li{grid-template-columns:180px 1fr;gap:24px}}
.vals strong{font:500 1.05rem/1.4 var(--display);color:var(--champ-hi)}
/* Referenzen */
.ref-head{margin-bottom:clamp(36px,5vw,60px);padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--line)}
.b-t{font-size:clamp(1.8rem,4vw,3rem);margin:0}

/* Buttons in Champagner statt Orange; Orange nur noch als Akzent */
.btn-or,.top-call,.cb-tel{background:linear-gradient(180deg,#efe2cd,#dcc7a6);color:#1f1e1d;border:1px solid #cdb592}
.btn-or:hover,.top-call:hover,.cb-tel:hover{background:linear-gradient(180deg,#f5ebdb,#e3d2b8);color:#1f1e1d}
.top-call svg,.btn-or svg,.cb-tel svg{color:#1f1e1d}
.sec-2 .btn-or{background:#1f1e1d;color:#efe2cd;border-color:#1f1e1d}
.sec-2 .btn-or:hover{background:#302e2c;color:#f5ebdb}
.sec-2 .btn-or svg{color:#efe2cd}
.btn-or,.top-call{box-shadow:inset 0 -2px 0 rgba(236,106,35,0)}
.btn-or:focus-visible,.top-call:focus-visible{outline-color:var(--or)}

.form-msg{margin:12px 0 0;padding:12px 14px;border-radius:var(--r);font-size:.95rem}
.form-msg.err{background:#1f1e1d;color:#efe2cd}
.form-msg.ok{background:#f4ecdf;color:#1f1e1d}
.form button[disabled]{opacity:.7;cursor:wait}