/* Schriften der Marke (aus HiDrive-Schriften.zip, als WOFF2 umgewandelt) */
@font-face{
font-family:"Armada";
src:url("/assets/fonts/armada-regular.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Desyrel";
src:url("/assets/fonts/desyrel.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap;
}
/* Zimmerei Andreas Fritzschka — Aufbau nach der Carpento-Vorlage,
Farben und Inhalte von zimmerei-fritzschka.de */
:root{
/* Palette (Marke Fritzschka) */
--ink:#0f382a; /* dunkles Grün: Überschriften und dunkle Flächen */
--ink-2:#0a2c21;
--brand:#009956; /* Grün aus dem Logo — Flächen, Grafiken, große Schrift */
--green:#007a46; /* Knöpfe und Links auf Weiß (5,4:1) */
--green-dark:#005c34; /* Hover */
--green-light:#4fb98a; /* Labels auf dunklem Grün (5,8:1) */
--text:#5a6260;
--grey:#727679; /* Grau aus dem Logo */
--cream:#f2f6f3;
--pale:#e8efea;
--line:#dde5e0;
--white:#fff;
/* Schrift */
--title:"Armada","Segoe UI",Arial,sans-serif;
--body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--hand:"Desyrel","Segoe Script",cursive;
/* Stufen */
--fs-xl:clamp(42px,5.6vw,88px);
--fs-l:clamp(30px,3.6vw,50px);
--fs-m:clamp(20px,2vw,24px);
--fs-lead:clamp(17px,1.4vw,19px);
--fs-base:16px;
--fs-xs:13px;
--radius:0px;
--container:1230px;
--pad:110px;
--shadow:0 18px 50px rgba(27,32,28,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--white);color:var(--text);
font-family:var(--body);font-size:var(--fs-base);line-height:1.7;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
h1,h2,h3,h4{font-family:var(--title);color:var(--ink);margin:0;line-height:1.16;font-weight:400;letter-spacing:0}
h1{font-size:var(--fs-xl);line-height:1.05}
h2{font-size:var(--fs-l)}
h3{font-size:var(--fs-m)}
p{margin:0 0 1.1em}
[hidden]{display:none!important}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.sprung{
position:fixed;top:-100px;left:16px;z-index:200;
background:var(--green);color:#fff;padding:12px 20px;font-weight:600;
transition:top .2s;
}
.sprung:focus{top:12px}
.wrap{width:min(100% - 44px, var(--container));margin-inline:auto}
.sec{padding-block:var(--pad);position:relative}
[id]{scroll-margin-top:104px}
.sec--cream{background:var(--cream)}
.sec--pale{background:var(--pale)}
.sec--dark{background:var(--ink);color:#cfd6d0}
.sec--dark h2,.sec--dark h3{color:#fff}
/* ---------- Kopfzeile ---------- */
.topbar{background:#151914;color:#c3ccc4;font-size:var(--fs-xs)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:46px;flex-wrap:wrap}
.topbar__left,.topbar__mid{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar a{color:#c3ccc4}
.topbar a:hover{color:#fff}
.topbar__mid{color:#aab5ac}
.topbar ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.topbar li+li::before{content:"";display:none}
.kopf{position:sticky;top:0;z-index:90;background:#fff;box-shadow:0 1px 0 rgba(27,32,28,.08)}
.kopf.is-stuck{box-shadow:0 10px 30px rgba(27,32,28,.10)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px}
.marke{display:flex;align-items:center;gap:12px;color:var(--ink);flex:0 0 auto}
.marke__logo{height:84px;width:auto;display:block}
.marke--hell .marke__logo{height:80px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
color:var(--ink);font-family:var(--title);font-size:var(--fs-xs);font-weight:400;letter-spacing:.12em;
text-transform:uppercase;padding:10px 0;position:relative;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:0 30px;border:0;border-radius:var(--radius);
font-family:var(--title);font-size:var(--fs-xs);font-weight:400;letter-spacing:.13em;text-transform:uppercase;
background:var(--green);color:#fff;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,transform .2s;
}
.btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--green);color:#fff}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--cream);color:var(--ink)}
.burger{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}
/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;z-index:-2}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(.82) contrast(1.04) brightness(.72)}
.hero::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg,rgba(8,36,24,.95) 0%,rgba(8,36,24,.84) 42%,rgba(8,36,24,.38) 72%,rgba(8,36,24,.16) 100%);
}
.ruler{height:26px;position:relative;z-index:2;background-repeat:repeat-x;background-size:auto 100%;opacity:.55}
.ruler--oben{background-image:
repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1px,transparent 1px 5px),
repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 2px,transparent 2px 25px);
background-size:5px 100%,25px 100%;
background-position:0 100%,0 100%;
mask-image:linear-gradient(180deg,#000 0 55%,transparent 100%)}
.ruler--unten{background-image:
repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 1px,transparent 1px 5px),
repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 2px,transparent 2px 25px);
background-size:5px 100%,25px 100%;
background-position:0 0,0 0;
mask-image:linear-gradient(0deg,#000 0 55%,transparent 100%)}
.hero__inner{padding-block:96px 84px;max-width:720px}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;
font-family:var(--title);font-size:var(--fs-xs);font-weight:400;letter-spacing:.18em;text-transform:uppercase;
color:var(--green-light);
}
.eyebrow::after{content:"";width:54px;height:2px;background:currentColor;opacity:.8}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p.lead{font-size:var(--fs-lead);color:#dfe6e0;max-width:52ch;margin:26px 0 34px}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}
.hero__fuss{
display:flex;gap:34px;flex-wrap:wrap;align-items:center;
border-top:1px solid rgba(255,255,255,.18);margin-top:56px;padding-top:26px;
font-size:var(--fs-xs);letter-spacing:.04em;color:#cfd8d1;
}
.hero__fuss strong{display:block;color:#fff;font-size:var(--fs-base);letter-spacing:0}
/* ---------- Sektionskopf ---------- */
.kopfzeile{max-width:760px;margin:0 auto 56px;text-align:center}
.kopfzeile--links{margin:0 0 46px;text-align:left}
.kopfzeile .eyebrow{color:var(--green);margin-bottom:16px}
.kopfzeile .eyebrow::before{content:"";width:26px;height:26px;display:inline-block;
background:currentColor;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 1.5 11h3.2v10.5h6V15h2.6v6.5h6V11h3.2L12 2.5Z'/%3E%3C/svg%3E") center/contain no-repeat}
.kopfzeile .eyebrow::after{display:none}
.sec--dark .kopfzeile .eyebrow{color:var(--green-light)}
.kopfzeile p{margin-top:18px;font-size:var(--fs-lead)}
/* ---------- Leistungen ---------- */
.leistungen__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.karte{
position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;
}
.karte:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.karte__bild{position:relative;overflow:hidden}
.karte__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.9) contrast(1.03);transition:transform .5s}
.karte:hover .karte__bild img{transform:scale(1.04)}
.karte__mehr{
position:absolute;top:0;right:0;bottom:0;width:46px;background:#fff;
display:flex;align-items:center;justify-content:center;
writing-mode:vertical-rl;font-family:var(--title);font-size:11px;font-weight:400;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink);border-left:1px solid var(--line);
}
.karte__mehr span{display:inline-flex;align-items:center;gap:6px}
.karte__icon{
width:64px;height:64px;background:var(--brand);color:#fff;
display:grid;place-items:center;position:relative;margin:-32px 0 0 24px;z-index:2;
box-shadow:0 0 0 6px #fff;
}
.karte__text{padding:20px 24px 30px}
.karte__text h3{margin-bottom:10px}
.karte__text p{font-size:15px;margin:0;color:var(--text)}
.karte__chev{position:absolute;right:20px;bottom:20px;width:44px;height:44px;color:var(--pale)}
.karte__text{margin-right:46px}
/* ---------- Über uns ---------- */
.ueber__raster{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:70px;align-items:center}
.collage{position:relative;padding:0 0 70px 0}
.collage__gross{position:relative;z-index:1;border-radius:var(--radius);overflow:hidden}
.collage__gross img{width:100%;aspect-ratio:4/3;object-fit:cover}
.collage__klein{
position:absolute;left:-26px;bottom:0;width:230px;border:8px solid #fff;z-index:2;
box-shadow:0 12px 30px rgba(27,32,28,.16);overflow:hidden;
}
.collage__klein img{aspect-ratio:1/1;object-fit:cover;width:100%}
.collage__zitat{
position:absolute;right:-18px;top:38px;z-index:3;background:var(--green);color:#fff;
padding:26px 26px 22px;max-width:250px;
}
.collage__zitat p{font-family:var(--hand);font-size:26px;line-height:1.15;margin:0 0 10px;color:#fff}
.collage__zitat small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.saege{display:none}
.ueber h2{margin-bottom:22px}
.ueber__lead{font-size:var(--fs-lead);color:var(--green);font-weight:500;margin-bottom:20px}
.haken{list-style:none;margin:26px 0 34px;padding:0;display:grid;gap:14px}
.haken li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink)}
.haken svg{flex:0 0 auto;margin-top:3px;color:var(--green)}
.inhaber{
display:flex;align-items:center;gap:16px;background:var(--cream);
padding:16px 20px;max-width:430px;border-left:3px solid var(--brand);
}
.inhaber img{width:64px;height:64px;object-fit:cover;border-radius:50%}
.inhaber b{display:block;color:var(--ink);font-family:var(--title);font-size:18px}
.inhaber span{font-size:13px;letter-spacing:.06em}
/* ---------- Zahlenband ---------- */
.zahlen{position:relative;overflow:hidden}
.zahlen__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;z-index:1}
.zahl{
border:1px solid #c9d6cf;padding:44px 26px 34px;text-align:center;background:transparent;
position:relative;display:flex;flex-direction:column;justify-content:flex-start;
}
.zahl__kreis{
width:88px;height:88px;border-radius:50%;background:var(--brand);color:#fff;
display:grid;place-items:center;margin:-44px auto 18px;
}
.zahl b{display:block;font-family:var(--title);font-size:42px;line-height:1;color:var(--ink);margin-bottom:8px}
.zahl > span:last-child{font-size:14px;color:var(--grey)}
.zahlen__hg{position:absolute;inset:0;opacity:.5;background:
radial-gradient(circle at 12% 20%,#fff 0 40%,transparent 41%),
radial-gradient(circle at 88% 80%,#fff 0 35%,transparent 36%)}
/* ---------- Warum ---------- */
.warum__raster{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:64px;align-items:start}
.schritte{background:var(--green);color:#e4f0e7;padding:52px 44px;position:relative;overflow:hidden}
.schritte::after{
content:"";position:absolute;inset:0;opacity:.16;
background:repeating-radial-gradient(circle at 90% 10%,transparent 0 26px,rgba(255,255,255,.45) 27px,transparent 28px 54px);
}
.schritte h2{color:#fff;font-size:clamp(26px,2.4vw,36px);margin-bottom:30px;position:relative}
.schritt{display:flex;gap:18px;position:relative;margin-bottom:26px}
.schritt:last-child{margin-bottom:0}
.schritt__icon{flex:0 0 52px;height:52px;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;color:#fff}
.schritt b{display:block;color:#fff;font-family:var(--title);font-size:18px;margin-bottom:4px}
.schritt p{margin:0;font-size:15px;color:#d6e6da}
.telefon{
display:flex;align-items:center;gap:16px;margin-top:34px;padding:18px 22px;background:var(--cream);
}
.telefon__kreis{width:52px;height:52px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff}
.telefon small{display:block;font-family:var(--title);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.telefon a{font-family:var(--title);font-size:22px;color:var(--ink);font-weight:700}
/* ---------- Projekte ---------- */
.projekte{overflow:hidden}
.projekte .kopfzeile{margin-bottom:40px}
.projekte__rail{
display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
padding-bottom:12px;scrollbar-width:none;
}
.projekte__rail::-webkit-scrollbar{display:none}
.projekt{flex:0 0 clamp(260px,26vw,330px);scroll-snap-align:start;position:relative}
.projekt img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:saturate(.85) contrast(1.05) brightness(.86);transition:filter .3s}
.projekt:hover img{filter:saturate(1) contrast(1.03) brightness(.95)}
.projekt__txt{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(8,36,24,.94),rgba(8,36,24,0))}
.projekt__txt b{display:block;color:#fff;font-family:var(--title);font-size:17px;line-height:1.3;margin-bottom:6px}
.projekt__txt span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-light)}
.railnav{display:flex;align-items:center;gap:14px;margin-top:26px}
.railnav button{
width:48px;height:48px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;
cursor:pointer;display:grid;place-items:center;
}
.railnav button:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.railnav__dots{display:flex;gap:10px;margin-left:8px}
.railnav__dots i{width:26px;height:3px;background:rgba(255,255,255,.28);display:block;transition:background .2s}
.railnav__dots i.on{background:var(--brand)}
/* ---------- Wege / Ablauf ---------- */
.wege__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px;align-items:center}
.akk{border-top:1px solid var(--line)}
.akk__kopf{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
background:#fff;border:0;border-bottom:1px solid var(--line);padding:22px 24px;
font-family:var(--title);font-size:18px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;
}
.akk__kopf[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.akk__kopf svg{transition:transform .25s;flex:0 0 auto}
.akk__kopf[aria-expanded="true"] svg{transform:rotate(90deg);color:var(--green-light)}
.akk__panel{background:var(--cream);padding:0 24px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.akk__panel p{padding-block:18px;margin:0;font-size:15px}
.abbild{position:relative}
.abbild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.abbild figcaption{margin-top:14px;font-size:13px;color:#6d766f}
.wegweiser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:70px}
.weg{background:#fff;border:1px solid var(--line);padding:34px 26px 30px;text-align:center;position:relative}
.weg__nr{
position:absolute;top:-16px;right:22px;background:var(--brand);color:#fff;
font-family:var(--title);font-weight:700;font-size:14px;padding:4px 10px;
}
.weg__icon{width:74px;height:74px;border:1px dashed #b9c4b8;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:var(--green)}
.weg h3{font-size:19px;margin-bottom:8px}
.weg p{font-size:14px;margin:0}
/* ---------- Kontakt / Anfrage ---------- */
.kontakt{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:620px}
.kontakt__bild{position:relative;overflow:hidden}
.kontakt__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.9)}
.kontakt__karte{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,86%);
background:var(--green);color:#dcecdf;padding:44px 44px 40px;
}
.kontakt__karte h2{color:#fff;font-size:clamp(26px,2.6vw,34px);margin-bottom:22px}
.kontakt__zeile{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:15px}
.kontakt__zeile:last-of-type{border-bottom:0}
.kontakt__zeile b{color:#fff;font-weight:600}
.kontakt__zeile a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4)}
.kontakt__karte .btn{margin-top:22px;background:#fff;color:var(--ink)}
.kontakt__karte .btn:hover{background:var(--pale)}
.kontakt__liste{background:var(--ink);padding:88px clamp(28px,5vw,76px);position:relative;overflow:hidden}
.kontakt__liste h2{color:#fff;max-width:16ch}
.kontakt__liste .eyebrow{color:var(--green-light)}
.kontakt__liste p{color:#c2ccc5}
.kontakt__liste li{color:#b9c4bd}
.kontakt__liste li a{color:#eef3ef;border-bottom:1px solid rgba(255,255,255,.32)}
.kontakt__liste li a:hover{color:var(--green-light);border-color:var(--green-light)}
.merk{display:flex;gap:18px;margin-top:26px;position:relative}
.merk__icon{
flex:0 0 54px;height:54px;border:1px dashed rgba(255,255,255,.35);display:grid;place-items:center;color:var(--green-light);
}
.merk b{display:block;color:#fff;font-family:var(--title);font-size:17px;margin-bottom:4px}
.merk p{margin:0;font-size:14px;color:#bcc7c0}
.kontakt__liste::after{
content:"";position:absolute;right:-40px;bottom:-40px;width:320px;height:320px;border-radius:50%;
background:repeating-conic-gradient(rgba(255,255,255,.05) 0 6deg,transparent 6deg 12deg);
}
/* ---------- Presse ---------- */
.presse__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.artikel{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.artikel__bild{position:relative;overflow:hidden}
.artikel__bild img{aspect-ratio:3/2;object-fit:cover;width:100%;filter:saturate(.88) contrast(1.03)}
.artikel__datum{
position:absolute;right:16px;top:16px;background:var(--brand);color:#fff;text-align:center;
padding:8px 12px;line-height:1.1;font-family:var(--title);font-weight:700;
}
.artikel__datum b{display:block;font-size:20px}
.artikel__datum span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.artikel__body{padding:26px 26px 0;flex:1}
.artikel__meta{font-family:var(--title);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.artikel h3{font-size:20px;margin-bottom:10px}
.artikel p{font-size:15px}
.artikel__fuss{
display:flex;align-items:center;justify-content:space-between;gap:10px;
border-top:1px solid var(--line);padding:16px 26px;font-family:var(--title);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.artikel__fuss a{color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.artikel__fuss a:hover{color:var(--green)}
/* ---------- Aktuell / Jobs ---------- */
.aktuell__raster{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.panel{background:#fff;border:1px solid var(--line);padding:40px;display:flex;flex-direction:column;align-items:flex-start}
.panel > .btn{margin-top:auto}
.panel--bild{padding:0;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.panel--bild img{width:100%;height:100%;object-fit:cover;min-height:300px}
.panel--bild .panel__txt{padding:40px}
.panel h3{font-size:24px;margin-bottom:12px}
.panel ul{margin:16px 0 22px;padding-left:18px;font-size:15px}
.panel li{margin-bottom:6px}
.panel .standort{font-family:var(--title);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
/* ---------- CTA ---------- */
.cta{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--green);overflow:hidden}
.cta__links{position:relative;min-height:210px;background:var(--ink);display:flex;align-items:center;padding:0 clamp(28px,6vw,90px)}
.cta__links > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cta__links .marke{position:relative;z-index:2}
.cta__links::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,38,26,.92) 0%,rgba(6,38,26,.62) 100%)}
.cta__rechts{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:44px clamp(28px,5vw,64px);flex-wrap:wrap}
.cta__rechts h2{color:#fff;font-size:clamp(24px,2.4vw,32px);max-width:20ch;margin:0}
.cta--winkel::before{
content:"";position:absolute;top:0;bottom:0;left:50%;width:90px;background:var(--ink);
transform:translateX(-50%) skewX(-12deg);z-index:2;
}
/* ---------- Footer ---------- */
.fuss{background:var(--ink-2);color:#aeb9b2;padding-top:80px;font-size:15px}
.fuss__raster{display:grid;grid-template-columns:1.3fr .9fr 1.1fr 1.1fr;gap:44px}
.fuss h3{color:#fff;font-size:20px;margin-bottom:14px}
.fuss h3::after{content:"";display:block;width:42px;height:2px;background:var(--brand);margin-top:14px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fuss a{color:#aeb9b2}
.fuss a:hover{color:#fff}
.fuss__kontakt li{display:flex;gap:12px;align-items:flex-start}
.fuss__kontakt svg{flex:0 0 auto;color:var(--green-light);margin-top:4px}
.fuss__galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.fuss__galerie img{aspect-ratio:1/1;object-fit:cover;width:100%;filter:saturate(.85);transition:filter .2s}
.fuss__galerie img:hover{filter:saturate(1.1)}
.fuss__unten{margin-top:60px;border-top:1px solid rgba(255,255,255,.1);padding:24px 0;font-size:13px}
.fuss__unten .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fuss__logo{height:82px;width:auto;margin-bottom:20px}
.nachoben{
position:fixed;right:22px;bottom:22px;width:50px;height:50px;background:var(--ink);color:#fff;
border:0;display:grid;place-items:center;cursor:pointer;z-index:80;opacity:0;pointer-events:none;transition:opacity .25s;
}
.nachoben.on{opacity:1;pointer-events:auto}
.nachoben:hover{background:var(--green)}
/* Armada hat nur einen Schnitt — fette Auszeichnung würde künstlich gerechnet */
.zahl b,.inhaber b,.projekt__txt b,.schritt b,.merk b,.fuss h3,.artikel h3,.panel h3,.weg h3,.karte h3{font-weight:400}
/* ---------- Bewegung ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .reveal{opacity:1;transform:none;transition:none}
*{animation:none!important;transition:none!important}
}
/* ---------- Responsiv ---------- */
@media (max-width:1080px){
:root{--pad:80px}
.cta--winkel::before{display:none}
.leistungen__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.ueber__raster,.warum__raster,.wege__raster,.aktuell__raster{grid-template-columns:1fr;gap:44px}
.zahlen__raster,.wegweiser{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.kontakt{grid-template-columns:1fr}
.kontakt__bild{min-height:520px}
.cta{grid-template-columns:1fr}
.panel--bild{grid-template-columns:1fr}
.fuss__raster{grid-template-columns:1fr 1fr}
.collage__zitat{right:0}
.saege{display:none}
}
@media (max-width:860px){
.nav{
position:fixed;inset:0 0 auto 0;top:0;background:#fff;flex-direction:column;align-items:flex-start;
gap:0;padding:96px 26px 30px;transform:translateY(-110%);transition:transform .3s;box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.nav.on{transform:none}
.nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
.kopf .btn{display:none}
.burger{display:flex}
.topbar__mid{display:none}
.hero__inner{padding-block:70px 60px}
.hero__fuss{gap:20px}
.presse__raster{grid-template-columns:1fr}
.sec{padding-block:70px}
}
@media (max-width:620px){
.leistungen__raster,.zahlen__raster,.wegweiser,.fuss__raster{grid-template-columns:1fr}
.kopf .wrap{min-height:84px}
.marke__logo{height:64px}
.topbar__left{display:none}
.topbar .wrap{min-height:40px}
.collage__klein{width:150px;left:0}
.collage__zitat{position:static;max-width:none;margin-top:16px}
.collage{padding-bottom:0}
.kontakt__karte{position:static;transform:none;width:100%;max-width:none}
.kontakt__bild{min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
.schritte{padding:34px 24px}
.panel,.panel--bild .panel__txt{padding:26px}
.fuss__unten .wrap{flex-direction:column}
.artikel__body{padding:22px 22px 0}
}
/* ---------- Anpassungen für den nativen Elementor-Aufbau ---------- */
h1, h2, h3, h4, .elementor-widget-heading .elementor-heading-title { text-transform: none; }
.elementor-widget-heading .elementor-heading-title { font-family: var(--title); }
.elementor-widget-image img { width: 100%; height: auto; display: block; }
.hero .elementor-widget-heading h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--brand); }
.elementor-widget-button.btn .elementor-button {
background: var(--green); color: #fff; border: 0; border-radius: 0;
min-height: 52px; padding: 0 30px; font-family: var(--title); font-size: var(--fs-xs);
letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center;
}
.elementor-widget-button.btn .elementor-button:hover { background: var(--green-dark); }
.elementor-widget-button.btn--light .elementor-button { background: #fff; color: var(--ink); }
.elementor-widget-button.btn--light .elementor-button:hover { background: var(--cream); color: var(--ink); }
.elementor-widget-button.btn--ghost .elementor-button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.elementor-widget-button.btn--ghost .elementor-button:hover { background: #fff; color: var(--ink); }
.trp-language-switcher, .trp_language_switcher_shortcode, #trp_switcher { display: none !important; }
/* ---------- Native Elementor-Widgets auf die Entwurfs-Typografie ---------- */
.sec h1, .sec h2, .sec h3, .sec h4, .hero h1 { font-family: var(--title); text-transform: none; }
.sec h2, .kopfzeile h2 { font-size: var(--fs-l); line-height: 1.18; }
.sec h3 { font-size: var(--fs-m); line-height: 1.25; }
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container p {
font-family: var(--body); font-size: var(--fs-base); line-height: 1.7; color: var(--text);
}
.elementor-widget-text-editor .elementor-widget-container p:last-child { margin-bottom: 0; }
.eyebrow .elementor-heading-title, .eyebrow .elementor-widget-container {
font-family: var(--title); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .2em;
text-transform: uppercase; color: var(--green); margin: 0;
}
.hero .eyebrow .elementor-heading-title { color: var(--green-light); }
.hero .elementor-widget-text-editor .elementor-widget-container p,
.lead .elementor-widget-container p { font-size: var(--fs-lead); color: #dfe6e0; }
.karte__text { padding: 20px 24px 30px; }
.karte .elementor-widget-heading .elementor-heading-title { font-size: var(--fs-m); margin-bottom: 10px; }
.ueber__lead .elementor-widget-container p { font-size: var(--fs-lead); color: var(--green); font-weight: 500; }
.collage__gross .elementor-widget-container img, .collage__gross img { aspect-ratio: 4/3; object-fit: cover; }
.collage__klein { position: static; width: 100%; border: 8px solid #fff; margin-top: -60px; margin-left: 0; max-width: 230px; }
.haken .elementor-widget-text-editor .elementor-widget-container p { margin: 0; font-size: 15px; color: var(--ink); }
.haken > .elementor-widget-text-editor { border-left: 2px solid var(--green-light); padding-left: 12px; margin-bottom: 10px; }
.inhaber { display: flex; align-items: center; gap: 16px; background: #fff; padding: 16px 20px;
max-width: 430px; border-left: 3px solid var(--brand); }
.inhaber .elementor-widget-image img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.inhaber .elementor-widget-heading .elementor-heading-title { font-size: 18px; }
.zahl { border: 1px solid #cfd7c9; padding: 26px 26px 34px; text-align: center; min-height: 200px;
display: flex; flex-direction: column; justify-content: flex-end; }
.zahl__wert .elementor-heading-title, .zahl .elementor-widget-heading .elementor-heading-title {
font-family: var(--title); font-size: 42px; line-height: 1; color: var(--ink); margin-bottom: 8px;
}
.zahl .elementor-widget-text-editor .elementor-widget-container p { font-size: 14px; color: #4c554f; }
/* ---------- Typografie der nativen Widgets durchsetzen (Elementor setzt sonst seine Kit-Werte) ---------- */
.sec .elementor-heading-title, .hero .elementor-heading-title {
font-family: var(--title) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.hero .elementor-widget-heading:not(.eyebrow) .elementor-heading-title {
font-size: var(--fs-xl) !important; line-height: 1.05 !important; font-weight: 400 !important; color: #fff !important;
max-width: 15ch;
}
.sec .elementor-widget-heading h2.elementor-heading-title, .sec .kopfzeile h2 { font-size: var(--fs-l) !important; line-height: 1.18 !important; }
.sec .elementor-widget-heading h3.elementor-heading-title, .karte .elementor-heading-title { font-size: var(--fs-m) !important; }
.hero .elementor-widget-text-editor p, .sec .elementor-widget-text-editor p {
font-family: var(--body) !important; font-size: var(--fs-base) !important; line-height: 1.7 !important; color: var(--text) !important;
}
.hero .elementor-widget-text-editor p { font-size: var(--fs-lead) !important; color: #dfe6e0 !important; }
.eyebrow .elementor-heading-title {
font-size: var(--fs-xs) !important; font-weight: 400 !important; letter-spacing: .2em !important;
text-transform: uppercase !important; color: var(--green) !important;
}
.hero .eyebrow .elementor-heading-title { color: var(--green-light) !important; }
.ueber__lead .elementor-widget-text-editor p { font-size: var(--fs-lead) !important; color: var(--green) !important; font-weight: 500 !important; }
.zahl .elementor-heading-title { font-size: 42px !important; line-height: 1 !important; color: var(--ink) !important; margin-bottom: 8px; }
.zahl .elementor-widget-text-editor p { font-size: 14px !important; color: #4c554f !important; }
/* ---------- Nur für die native Seite (page-id-549): Layout der restlichen Abschnitte ---------- */
.page-id-549 .sec > .wrap, .page-id-549 .kontakt > .wrap { width: min(100% - 44px, 1230px); margin-inline: auto; }
/* So läuft's */
.page-id-549 .warum__raster { display: flex; flex-direction: row; gap: 64px; align-items: flex-start; }
.page-id-549 .warum__raster > * { flex: 1 1 0; min-width: 0; }
.page-id-549 .schritte { background: var(--brand); color: #e4f0e7; padding: 52px 44px; }
.page-id-549 .schritte .elementor-heading-title { color: #fff !important; font-size: clamp(26px,2.4vw,36px) !important; margin-bottom: 30px; }
.page-id-549 .schritt { margin-bottom: 26px; }
.page-id-549 .schritt .elementor-heading-title { color: #fff !important; font-size: 18px !important; margin-bottom: 4px; }
.page-id-549 .schritt .elementor-widget-text-editor p { color: #d6e6da !important; font-size: 15px !important; }
.page-id-549 .telefon { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-top: 34px; padding: 18px 22px; background: var(--cream); }
.page-id-549 .telefon .elementor-heading-title { color: var(--ink) !important; font-size: 22px !important; }
/* Projekte */
.page-id-549 .projekte__rail { display: flex; flex-direction: row; gap: 22px; overflow-x: auto; padding-bottom: 12px; }
.page-id-549 .projekt { flex: 0 0 clamp(260px,26vw,330px); position: relative; }
.page-id-549 .projekt img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.page-id-549 .projekt .elementor-widget-text-editor p { color: #fff !important; font-size: 14px !important; margin: 10px 0 0; }
.page-id-549 .projekt .elementor-heading-title { color: #fff !important; font-size: 17px !important; margin-top: 10px; }
/* Ablauf / Akkordeon */
.page-id-549 .wege__raster { display: flex; flex-direction: row; gap: 64px; align-items: flex-start; }
.page-id-549 .wege__raster > * { flex: 1 1 0; min-width: 0; }
.page-id-549 .akk { border-top: 1px solid var(--line); }
.page-id-549 .akk > * { border-bottom: 1px solid var(--line); padding: 18px 0; }
.page-id-549 .akk .elementor-heading-title { font-size: 18px !important; }
.page-id-549 .abbild img { width: 100%; object-fit: cover; }
.page-id-549 .wegweiser { display: flex; flex-direction: row; gap: 22px; flex-wrap: wrap; margin-top: 70px; }
.page-id-549 .weg { flex: 1 1 20%; background: #fff; border: 1px solid var(--line); padding: 34px 26px 30px; text-align: center; min-width: 200px; }
.page-id-549 .weg .elementor-heading-title { font-size: 19px !important; margin-bottom: 8px; }
.page-id-549 .weg .elementor-widget-text-editor p { font-size: 14px !important; }
/* Kontakt */
.page-id-549 .kontakt { display: flex; flex-direction: row; }
.page-id-549 .kontakt > * { flex: 1 1 0; min-width: 0; }
.page-id-549 .kontakt__bild img { width: 100%; height: 100%; object-fit: cover; }
.page-id-549 .kontakt__karte { background: var(--brand); padding: 44px; }
.page-id-549 .kontakt__karte .elementor-heading-title { color: #fff !important; }
.page-id-549 .kontakt__karte .elementor-widget-text-editor p, .page-id-549 .kontakt__karte a { color: #dcecdf !important; }
.page-id-549 .kontakt__liste { background: var(--ink); padding: 88px 76px; }
.page-id-549 .kontakt__liste .elementor-heading-title { color: #fff !important; }
.page-id-549 .kontakt__liste .elementor-widget-text-editor p, .page-id-549 .kontakt__liste li { color: #c2ccc5 !important; }
/* Presse */
.page-id-549 .presse__raster { display: flex; flex-direction: row; gap: 28px; flex-wrap: wrap; }
.page-id-549 .artikel { flex: 1 1 30%; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 280px; }
.page-id-549 .artikel img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.page-id-549 .artikel__body { padding: 26px 26px 0; }
.page-id-549 .artikel .elementor-heading-title { font-size: 20px !important; }
/* Aktuell / Jobs */
.page-id-549 .aktuell__raster { display: flex; flex-direction: row; gap: 28px; flex-wrap: wrap; }
.page-id-549 .panel { flex: 1 1 45%; background: #fff; border: 1px solid var(--line); padding: 40px; min-width: 300px; }
.page-id-549 .panel--bild { padding: 0; }
.page-id-549 .panel--bild img { width: 100%; object-fit: cover; }
.page-id-549 .panel__txt { padding: 32px 40px; }
/* CTA */
.page-id-549 .cta { display: flex; flex-direction: row; background: var(--brand); }
.page-id-549 .cta > * { flex: 1 1 0; }
.page-id-549 .cta__links { background: var(--ink); display: flex; align-items: center; padding: 40px 90px; }
.page-id-549 .cta__links img { max-width: 280px; width: 100%; }
.page-id-549 .cta__rechts { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 44px 64px; flex-wrap: wrap; }
.page-id-549 .cta__rechts .elementor-heading-title { color: #fff !important; font-size: clamp(24px,2.4vw,32px) !important; }
/* Fuß */
.page-id-549 .fuss { background: var(--ink-2); color: #aeb9b2; padding-top: 80px; }
.page-id-549 .fuss__raster { display: flex; flex-direction: row; gap: 44px; flex-wrap: wrap; }
.page-id-549 .fuss__raster > * { flex: 1 1 20%; min-width: 200px; }
.page-id-549 .fuss .elementor-heading-title { color: #fff !important; font-size: 20px !important; }
.page-id-549 .fuss .elementor-widget-text-editor p, .page-id-549 .fuss a { color: #aeb9b2 !important; }
.page-id-549 .fuss__galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.page-id-549 .fuss__galerie img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.page-id-549 .fuss__unten { border-top: 1px solid rgba(255,255,255,.1); margin-top: 60px; padding: 24px 0; font-size: 13px; }
@media (max-width: 900px) {
.page-id-549 .warum__raster, .page-id-549 .wege__raster, .page-id-549 .kontakt { flex-direction: column; }
.page-id-549 .cta { flex-direction: column; }
}
.page-id-549 .warum__raster > .e-con, .page-id-549 .wege__raster > .e-con,
.page-id-549 .kontakt > .e-con, .page-id-549 .presse__raster > .e-con,
.page-id-549 .aktuell__raster > .e-con, .page-id-549 .cta > .e-con,
.page-id-549 .fuss__raster > .e-con, .page-id-549 .wegweiser > .e-con { min-width: 0; }
.page-id-549 .presse__raster > .e-con, .page-id-549 .aktuell__raster > .e-con { flex: 1 1 0; }
/* Elementor setzt 20px Abstand zwischen allen Kindern — hier aus, die Klassen regeln die Abstände */
.page-id-549 .e-con { gap: 0; }
.page-id-549 .elementor-widget { margin-bottom: 0; }
.page-id-549 .hero { min-height: 760px; }
/* Über-uns-Collage: zweites Bild versetzt über das erste legen */
.page-id-549 .collage { position: relative; }
.page-id-549 .collage__gross img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.page-id-549 .collage__klein { position: absolute; right: -20px; bottom: -20px; width: 230px; max-width: 45%; border: 8px solid #fff; box-shadow: 0 12px 30px rgba(15,56,42,.18); }
.page-id-549 .collage__klein img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
/* Kopfzeile der nativen Seite */
.page-id-549 .elementor { overflow-x: clip; }
.page-id-549 .topbar { background: #151914; color: #c3ccc4; }
.page-id-549 .topbar .elementor-widget-text-editor p { color: #c3ccc4 !important; font-size: 13px !important; margin: 0; }
.page-id-549 .topbar__zeile { min-height: 46px; gap: 18px; padding: 0 22px; }
.page-id-549 .topbar .elementor-widget-text-editor { flex: 0 1 auto; }
.page-id-549 .topbar a, .page-id-549 .topbar a:visited { color: #c3ccc4 !important; }
.page-id-549 .kopf { background: #fff; box-shadow: 0 1px 0 rgba(15,56,42,.08); position: sticky; top: 0; z-index: 90; }
.page-id-549 .kopf__zeile { min-height: 104px; gap: 24px; padding: 0 22px; }
.page-id-549 .marke { flex: 0 0 auto; }
.page-id-549 .marke__logo img { height: 84px; width: auto; }
.page-id-549 .nav .elementor-widget-text-editor p { margin: 0; }
.page-id-549 .nav a { color: var(--ink) !important; font-family: var(--title); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
.page-id-549 .hero .lead p, .page-id-549 .hero .elementor-widget-text-editor .lead p { font-family: var(--body) !important; font-size: var(--fs-lead) !important; color: #dfe6e0 !important; }
.page-id-549 .elementor-widget-text-editor p { font-family: var(--body) !important; }
.page-id-549 .e-con, .page-id-549 .elementor-widget { min-width: 0; }
@media (max-width: 900px) {
.page-id-549 .kopf__zeile { min-height: 78px; }
.page-id-549 .nav { display: none; }
.page-id-549 .schritte { padding: 34px 24px; }
.page-id-549 .kopf__zeile > .elementor-widget-button { display: none; }
}
/* Kopfzeilen-Zeilen: Kinder nur so breit wie ihr Inhalt (Elementor setzt sonst 100 %) */
.page-id-549 .topbar__zeile > .elementor-element, .page-id-549 .kopf__zeile > .elementor-element {
flex: 0 1 auto; width: auto; max-width: 100%;
}
.page-id-549 .kopf__zeile > .elementor-widget-button { flex: 0 0 auto; }
.page-id-549 .nav > .elementor-element { flex: 0 1 auto; width: auto; }
.page-id-549 .topbar__zeile { flex-wrap: nowrap; }
.page-id-549 .kopf__zeile { flex-wrap: nowrap; }
@media (max-width: 900px) {
.page-id-549 .topbar__zeile { flex-wrap: wrap; }
.page-id-549 .kopf__zeile { flex-wrap: nowrap; }
}
/* Kopfzeilen ohne Extra-Höhe */
.page-id-549 .topbar .elementor-widget-container, .page-id-549 .kopf .elementor-widget-container { padding: 0 !important; }
.page-id-549 .topbar p, .page-id-549 .kopf p { line-height: 1.45 !important; margin: 0 !important; }
.page-id-549 .kopf .elementor-widget-image { margin: 0 !important; }
.page-id-549 .nav a { line-height: 1.2; }
/* Kopf-Sektionen ohne Elementor-Innenabstand */
.page-id-549 .topbar, .page-id-549 .kopf { padding: 0 !important; }
/* Hero-Kennzahlen unter den Knöpfen */
.page-id-549 .hero__fuss { display: flex; flex-direction: row; align-items: center; gap: 34px; flex-wrap: wrap;
border-top: 1px solid rgba(255,255,255,.18); margin-top: 56px; padding-top: 26px; }
.page-id-549 .hero__fuss .elementor-widget-text-editor p { color: #cfd8d1 !important; font-size: 13px !important; margin: 0 !important; letter-spacing: .04em; }
.page-id-549 .hero__fuss strong { display: block; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0; margin-bottom: 2px; }
/* ===== Basis-Ende ===== */
/* ===== Feinschliff A (Kopfzeile + Hero) ===== */
/* ==========================================================================
Feinschliff A — Kopfzeile und Hero (native Zimmerei-Seite)
Gilt ausschliesslich fuer die Seite mit der ID 549 (.page-id-549).
Vorlage: /fritzschka/ (statisches Original), gemessen bei 1440 px.
Soll: Topbar 46 px, weisse Leiste 104 px, Logo 163x84 an x=98,
Menueluecken 26 px, CTA 242x52 an x=1086,
Hero 823 px hoch, Hero-Knoepfe 260,6/271,9 x 52 an x=97,5.
========================================================================== */
/* --------------------------------------------------------------------------
1. Dunkle Topbar: 66 px -> 46 px
Ursache: der Elementor-Container ".wrap" bringt 10 px Innenabstand, der
auf die Mindesthoehe von 46 px draufkommt (46 + 2x10 = 66).
-------------------------------------------------------------------------- */
.page-id-549 .topbar > .e-con { padding: 0; }
/* Die Zeile hatte 22 px seitliche Polsterung und schob den Text von 97,5 auf
129,5 px. In der Vorlage beginnt der Topbar-Text am Rand der 1230er Spalte.
Die drei Gruppen liegen dort verteilt (space-between: 97,5 / 534,3 / bis
1327,5) und der Text steht mittig in den 46 px (Oberkante 12 px). */
.page-id-549 .topbar .topbar__zeile {
padding-inline: 0;
justify-content: space-between;
align-items: center;
}
/* Vorlage: Textzeile 22,1 px hoch (1.7), mittig in 46 px -> Oberkante 12 px.
(!important noetig, fz-design setzt 1.45 px mit !important) */
.page-id-549 .topbar .topbar__zeile p { line-height: 1.7 !important; }
/* --------------------------------------------------------------------------
2. Weisse Leiste: 124 px -> 104 px, Inhalte auf die Vorlage-Positionen
Ursache der Hoehe: derselbe 10-px-Innenabstand eine Ebene hoeher; er schob
zugleich die Zeile von x=97,5 auf x=107,5 (Logo landete bei x=139,5).
-------------------------------------------------------------------------- */
.page-id-549 .kopf > .e-con { padding: 0; }
/* Zeile ohne Polsterung -> Logo/Menue/Knopf beginnen wieder bei x = 97,5.
Platz wird wie in der Vorlage zwischen die drei Gruppen verteilt
(dort 43,9 px Logo->Menue und 43,8 px Menue->Knopf bei 24 px Basisabstand). */
.page-id-549 .kopf .kopf__zeile {
padding-inline: 0;
justify-content: space-between;
align-items: center;
}
/* Logo: eigenes 10-px-Polster weg -> Bildkante auf 97,5 px (Vorlage 97,5) */
.page-id-549 .kopf .marke { padding: 0; flex: 0 0 auto; }
/* Menue: die sieben Text-Widgets lagen ohne Abstand aneinander (Luecken 0-1 px).
26 px wie in der Vorlage; nowrap, damit nichts umbricht. */
.page-id-549 .kopf .nav {
gap: 26px;
padding: 0;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.page-id-549 .kopf .nav > .elementor-element { padding: 0; }
.page-id-549 .kopf .nav .nav__punkt p { margin: 0 !important; }
/* Menueschrift: die Vorlage nutzt .12em (1,56 px), nicht .13em. Mit .13em wird
jeder Punkt ca. 1 px breiter, das Menue 7 px breiter und rutscht 3 px nach
links. Die Vorlage setzt den Link als Block mit 10 px Polster oben/unten
(42,1 px hohe Linkbox, Textoberkante 91 px) — als Inline-Element war die
Box nur 34 px hoch und der Text stand 1,5 px tiefer. */
.page-id-549 .kopf .nav .nav__punkt a {
display: block;
letter-spacing: .12em;
line-height: 1.7;
}
/* CTA-Knopf: Widget war 308 x 104 px (align-self:stretch zog es auf die volle
Zeilenhoehe, das .btn-Polster 0 30 px machte es 60 px zu breit).
Soll: 242 x 52 px, rechtsbuendig -> x = 1327,5 - 241,9 = 1085,6. */
.page-id-549 .kopf .btn {
padding: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
flex: 0 0 auto;
}
/* Knopfschrift: Vorlage .13em = 1,69 px statt .16em = 2,08 px.
Das sind genau die 6,2 px, um die der Knopf zu breit war (248,1 -> 241,9). */
.page-id-549 .kopf .btn .elementor-button { letter-spacing: .13em; }
/* --------------------------------------------------------------------------
3. Hero: 760 px -> 823 px, Knoepfe auf die Vorlage-Position
Die Vorlage hat oben und unten ein 26-px-Lineal (52 px) und eine 770,9 px
hohe Innenspalte; die Knoepfe sitzen bei y = 678,6 (Hero-Oberkante 150).
-------------------------------------------------------------------------- */
/* 26 px Lineal oben/unten, Gesamthoehe 823 px.
Der Abstand Kopfzeile -> Hero ist damit 0 wie in der Vorlage (Topbar 46 +
Leiste 104 = Hero-Oberkante 150). */
.page-id-549 .hero {
padding: 26px 0;
min-height: 823px;
}
/* Umschliessender Container: 10 px Polster raus, dafuer die Spaltenbreite der
Vorlage (.wrap): min(100% - 44px, 1230px), zentriert.
Bei 1440 px -> 1230 px ab x = 97,5; bei 1024 px -> 980 px ab x = 22 px. */
.page-id-549 .hero > .e-con {
padding: 0;
margin-inline: auto;
width: min(100% - 44px, 1230px);
max-width: none;
}
/* Innenspalte: 720 px breit, 96/84 px Polster wie in der Vorlage.
Vorher 10 px seitliches Polster -> alle Inhalte sassen 10 px zu weit rechts. */
.page-id-549 .hero__inner { padding: 96px 0 84px; }
/* Dachzeile: Block war nur 13 px hoch, die Ueberschrift begann 13 px unter der
Dachzeile statt 48,1 px. Vorlage: Dachzeile 22,1 px + 22 px Abstand (+4 px
Oberkante) -> h1-Oberkante bei 320,1 px. */
.page-id-549 .hero .eyebrow { margin: 4px 0 22px; }
.page-id-549 .hero .eyebrow .elementor-heading-title { line-height: 1.7 !important; }
/* Lead: in der Vorlage 52ch breit (532,6 px = 4 Zeilen, 129,2 px hoch) und
mit 26/34 px Abstand. Live stand er auf 700 px (3 Zeilen, 96,9 px), dadurch
sassen die Knoepfe 61 px zu hoch. */
.page-id-549 .hero .lead p {
max-width: 52ch;
margin: 26px 0 34px;
}
/* Knopfreihe: 10 px Polster und 0 px Luecke -> 0 Polster, 14 px Luecke.
Die 61 px Abstand zwischen den Knoepfen kamen aus 2x30 px Widget-Polster. */
.page-id-549 .hero .hero__btns {
padding: 0;
gap: 14px;
flex-wrap: nowrap;
align-items: center;
}
/* Knopf-Widgets: ohne eigenes Polster und exakt 52 px hoch (waren 54 px),
damit die 14 px Luecke wirklich zwischen den Knoepfen steht. Der Rahmen des
transparenten Knopfs (+2 px am Widget) darf den Knopf nicht verschieben,
deshalb linksbuendig statt zentriert. */
.page-id-549 .hero .hero__btns > .btn {
padding: 0;
border: 0;
height: 52px;
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 auto;
}
/* Knopfschrift wie in der Vorlage (.13em = 1,69 px statt .16em = 2,08 px):
"Leistungen ansehen" 267,6 -> 260,6 px, "0173 2993371 anrufen" 279,7 -> 271,9 px. */
.page-id-549 .hero .hero__btns > .btn .elementor-button { letter-spacing: .13em; }
/* --------------------------------------------------------------------------
4. Tablet und Mobil: die Soll-Werte oben gelten fuer den Desktop (1440 px).
Die Breakpoints folgen der Vorlage (860/620 px) bzw. fz-design (900 px, dort
wird das Menue ausgeblendet).
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
/* Hero-Knoepfe duerfen umbrechen (sonst stehen sie nebeneinander 546 px
breit und werden abgeschnitten), Hero waechst wieder mit dem Inhalt. */
.page-id-549 .hero { padding: 0; min-height: 0; }
.page-id-549 .hero .hero__btns { flex-wrap: wrap; }
.page-id-549 .kopf .nav { flex-wrap: wrap; }
/* Der CTA ist in der Vorlage ab 860 px ausgeblendet (fz-design wollte das
auch, der Selektor greift am nativen Widget aber nicht). Ohne diese Zeile
haengt der 242-px-Knopf hier ueber den rechten Rand hinaus. */
.page-id-549 .kopf .btn { display: none; }
/* Adress-/Telefongruppe der Topbar ausblenden wie in der Vorlage
(.topbar__mid) — sonst bricht die Topbar auf 62-124 px statt 46 px. */
.page-id-549 .topbar .topbar__mitte { display: none; }
}
@media (max-width: 620px) {
/* Logo wie in der Vorlage 124 x 64 px (.marke__logo heisst am nativen Bild
nicht so, deshalb greift die Regel in fz-design nicht). */
.page-id-549 .kopf .marke img { height: 64px; width: auto; }
/* Kleine Screens: nur die Rechtsgruppe, Topbar 40 px wie in der Vorlage. */
.page-id-549 .topbar .topbar__links { display: none; }
.page-id-549 .topbar .topbar__zeile { min-height: 40px; }
}
/* ===== Feinschliff B (Karten, Zahlen, Collage, Abstände) ===== */
/* =========================================================================
Zimmerei Fritzschka — Feinschliff B (native Seite, page-id-549)
Nur für die native Fassung; die Vorlage /fritzschka/ bleibt unberührt.
Alle Regeln beginnen mit .page-id-549 .
Gemessen bei 1440 px (Vorlage 9.630 px, live 11.196 px Gesamthöhe).
========================================================================= */
/* -------------------------------------------------------------------------
1 LEISTUNGSKARTEN: grünes Symbolquadrat auf der Bildkante
Vorlage: .karte__icon, 64x64, margin -32px 0 0 24px, weißer 6px-Ring.
Nativ fehlt das Element ganz -> Pseudo-Element am Textblock; dessen
Oberkante ist genau die Bildunterkante, also ist top:-32px lagerichtig
und unabhängig von der Kartenbreite.
padding-top 44px hält den Text frei (Symbol ragt 32px in den Textblock).
------------------------------------------------------------------------- */
.page-id-549 .karte__text{
position:relative;
padding-top:44px;
padding-bottom:22px;
}
.page-id-549 .karte__text::before{
content:"";
position:absolute;
top:-32px;
left:12px; /* 24px ab Kartenkante, wie in der Vorlage */
width:64px;
height:64px;
z-index:2;
background-color:var(--brand);
background-repeat:no-repeat;
background-position:center;
background-size:26px 26px;
box-shadow:0 0 0 6px #fff; /* weißer Ring wie .karte__icon */
}
/* Je Karte ein eigenes Symbol (Haus, Haus mit Tropfen, Platte, Werkzeug) */
.page-id-549 .leistungen__raster > .karte:nth-child(1) .karte__text::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .leistungen__raster > .karte:nth-child(2) .karte__text::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .leistungen__raster > .karte:nth-child(3) .karte__text::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .leistungen__raster > .karte:nth-child(4) .karte__text::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* -------------------------------------------------------------------------
2 ZAHLENBAND: Kreis über der Zahl
Vorlage: .zahl__kreis 88x88, background var(--brand), margin -44px auto 18px,
Zahl beginnt 44px unter der Kastenoberkante. Nativ fehlt der Kreis ->
Pseudo-Element, mittig, halb über der Kante (top:-44px).
padding-top 50px/ unten 18px halten Zahl und Label kollisionsfrei.
------------------------------------------------------------------------- */
.page-id-549 .zahl{
position:relative;
padding-top:50px;
padding-bottom:18px;
justify-content:flex-start; /* Zahlen auf einer Linie (vorher unten ausgerichtet) */
}
.page-id-549 .zahl::before{
content:"";
position:absolute;
top:-44px;
left:50%;
transform:translateX(-50%);
width:88px;
height:88px;
border-radius:50%;
background-color:var(--brand);
background-repeat:no-repeat;
background-position:center;
background-size:34px 34px;
}
.page-id-549 .zahlen__raster > .zahl:nth-child(1)::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .zahlen__raster > .zahl:nth-child(2)::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .zahlen__raster > .zahl:nth-child(3)::before{
background-image:url("data:image/svg+xml;utf8,");
}
.page-id-549 .zahlen__raster > .zahl:nth-child(4)::before{
background-image:url("data:image/svg+xml;utf8,");
}
/* -------------------------------------------------------------------------
3 ÜBER UNS: Zitat-Kasten oben rechts auf der Collage
Vorlage: .collage__zitat 250px breit, right:-18px, top:38px,
padding 26px 26px 22px, Desyrel 26px/1.15, weiß auf Grün.
Nativ fehlt der Kasten -> Pseudo-Element an .collage (bereits relative).
------------------------------------------------------------------------- */
.page-id-549 .collage::after{
content:"„Einfach ökologisch bauen“";
position:absolute;
top:38px;
right:-18px;
z-index:3;
width:250px;
max-width:60%;
padding:26px 26px 22px;
background:var(--brand);
color:#fff;
font-family:var(--hand);
font-size:26px;
line-height:1.15;
}
/* -------------------------------------------------------------------------
4 ABSTÄNDE UND HÖHEN
Ursache der +1.566 px: Elementor gibt jedem Container 10px Innenabstand
(dreifach verschachtelt = bis 60px je Abschnitt) und das Kit setzt die
Zeilenhöhe auf 30px (Vorlage: 27,2px = 1,6 bei 17px).
Die 10px werden nur bei den reinen Struktur-Containern entfernt;
Kästen mit gewolltem Innenabstand (schritte, panel, weg, karte__text,
zahl, inhaber, artikel__body ...) bleiben unangetastet.
------------------------------------------------------------------------- */
/* Fließtext: 1,6 statt 30px Zeilenhöhe (wirkt in allen Abschnitten) */
.page-id-549 p,
.page-id-549 li,
.page-id-549 .elementor-widget-text-editor p,
.page-id-549 .elementor-widget-text-editor li{
line-height:1.6;
}
/* Elementor-Standardabstand 10px an Widgets raus (Texte/Überschriften/Bilder) */
.page-id-549 .elementor-widget{
padding-top:0;
padding-bottom:0;
}
/* Struktur-Container ohne eigenen Innenabstand */
.page-id-549 .e-con.wrap,
.page-id-549 .kopfzeile,
.page-id-549 .ueber__raster,
.page-id-549 .ueber__text,
.page-id-549 .warum__raster,
.page-id-549 .wege__raster,
.page-id-549 .akk,
.page-id-549 .referenz,
.page-id-549 .leistungen__raster,
.page-id-549 .zahlen__raster,
.page-id-549 .presse__raster,
.page-id-549 .aktuell__raster,
.page-id-549 .fuss__raster,
.page-id-549 .wegweiser,
.page-id-549 .haken,
.page-id-549 .karte,
.page-id-549 .projekt,
.page-id-549 .artikel,
.page-id-549 .panel--bild{
padding-top:0;
padding-bottom:0;
}
/* --- Über uns: Textspalte war 868px statt 673px ------------------------- */
/* Spaltenmaß der Vorlage (1,02fr / 1fr, 70px Fuge): vorher 50/50 mit 20px,
dadurch ragte der Zitat-Kasten in die Textspalte hinein */
.page-id-549 .ueber__raster{
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
gap:70px;
align-items:center;
}
/* Inhaber-Kasten lag untereinander (Bild über Text) und war 191px statt 96px
hoch (doppelte 10px-Polster) -> Bild links, Text rechts, knappes Polster */
.page-id-549 .inhaber{
flex-direction:row;
align-items:center;
padding:12px 18px;
gap:14px;
}
/* Aufzählung: 12px Bodenabstand je Zeile und 30px Zeilenhöhe -> 170px statt 234px */
.page-id-549 .haken > .e-con{
padding-top:0;
padding-bottom:8px;
}
.page-id-549 .haken p{
margin:0;
line-height:1.5;
}
.page-id-549 .inhaber > .e-con{
padding-top:0;
padding-bottom:0;
}
.page-id-549 .inhaber p{
margin:0;
line-height:1.5;
}
.page-id-549 .inhaber .elementor-heading-title{
line-height:1.25;
}
/* --- Warum: grüner Kasten 645px statt 483px ---------------------------- */
/* Überschrift im Kasten lief mit 50px/59px (Regel .sec … h2 gewinnt gegen
die 36px-Vorgabe) -> 34,56px wie in der Vorlage */
.page-id-549 .schritte .elementor-widget-heading h2.elementor-heading-title{
font-size:clamp(26px,2.4vw,34.56px) !important;
line-height:1.18 !important;
margin-bottom:24px;
}
.page-id-549 .schritt{
padding-top:0;
padding-bottom:0;
margin-bottom:20px;
}
.page-id-549 .schritt p{
margin:0;
line-height:1.5;
}
.page-id-549 .telefon{
margin-top:26px;
padding:14px 18px;
}
/* --- Projekte: 1.536px statt 1.121px ---------------------------------- */
/* Zusatzliste „Alle 22 Projekte …" stand in 2 Spalten über 405px;
drei Spalten und 1,6 Zeilenhöhe halbieren die Höhe, nichts fällt weg. */
.page-id-549 .referenz ul{
columns:3 !important;
column-gap:32px !important;
font-size:13px !important;
line-height:1.55 !important;
margin:14px 0 0 !important;
padding-left:16px !important;
}
.page-id-549 .referenz h3{
font-size:19px !important;
line-height:1.3 !important;
}
.page-id-549 .referenz{
margin-top:24px;
}
/* Karten im Band: gleiche Bildkante, etwas knappere Beschriftung */
.page-id-549 .projekt__txt{
padding:16px 18px !important;
}
/* --- Wege: 1.364px statt 1.088px -------------------------------------- */
/* Alle vier Akkordeon-Texte sind dauerhaft offen (610px); engeres Maß
bringt ~180px, ohne Text zu kürzen */
.page-id-549 .akk > .e-con{
padding-top:12px;
padding-bottom:12px;
}
.page-id-549 .akk .elementor-heading-title{
font-size:17px !important;
line-height:1.3 !important;
margin-bottom:2px;
}
.page-id-549 .akk p{
margin:0;
font-size:14.5px;
line-height:1.5;
}
/* Bild rechts im gleichen 4:3-Format wie die Vorlage (war 575x482) */
.page-id-549 .abbild img{
aspect-ratio:4/3;
object-fit:cover;
}
.page-id-549 .wegweiser{
margin-top:54px;
}
/* --- Fuß: 625px statt 445px ------------------------------------------- */
/* Logo war im 82px-Kasten 155px hoch und lag über dem Firmensatz */
.page-id-549 .fuss__logo{
height:auto;
margin-bottom:16px;
}
.page-id-549 .fuss__logo img{
height:84px;
width:auto;
max-width:100%;
object-fit:contain;
object-position:left center;
}
.page-id-549 .fuss__unten{
padding:18px 0;
margin-top:44px;
}
.page-id-549 .fuss__unten p{
margin:0;
line-height:1.5;
}
/* --- Aktuelles: zwei Panels etwas knapper ----------------------------- */
.page-id-549 .panel{
padding:32px;
}
.page-id-549 .panel__txt{
padding:26px 32px;
}
.page-id-549 .panel--bild{
padding:0;
}
/* --- Raster: 0px Fugen (Karten klebten aneinander) -------------------- */
.page-id-549 .leistungen__raster{ gap:26px; }
.page-id-549 .zahlen__raster{ gap:24px; }
.page-id-549 .projekte__rail{ gap:22px; }
.page-id-549 .wegweiser{ gap:22px; }
/* Auf schmalen Geräten bleiben die neuen Elemente im Fluss.
Achtung: fz-design setzt bei 1080 px eine Spalte für .ueber__raster —
die Regel hier hat höhere Spezifikation und muss dort zurückgenommen werden. */
@media (max-width:1080px){
.page-id-549 .ueber__raster{
grid-template-columns:1fr;
gap:44px;
}
.page-id-549 .collage::after{
max-width:220px;
font-size:22px;
padding:20px 20px 16px;
}
}
@media (max-width:620px){
/* Flex-Spalte ließ das große Bild auf 0px zusammenfallen (Bild lief unter
Text und Zitat) -> normaler Blockfluss; kleines Bild rückt in den Fluss */
.page-id-549 .collage{
display:block;
}
.page-id-549 .collage__klein{
position:static;
width:150px;
margin:-40px 0 0 auto;
border-width:6px;
}
.page-id-549 .collage::after{
display:block; /* Pseudo-Elemente sind sonst inline */
position:relative; /* bleibt im Fluss, aber über dem kleinen Bild */
z-index:3;
top:auto;
right:auto;
width:auto;
max-width:none;
margin-top:24px;
}
.page-id-549 .karte__text::before{
left:0;
}
.page-id-549 .panel{
padding:26px;
}
.page-id-549 .panel__txt{
padding:22px;
}
.page-id-549 .panel--bild{
padding:0;
}
}