/*
Theme Name: BituPrint
Theme URI: https://www.bituprint.de
Author: BituPrint - Oliver Damerau
Description: Eigenes Theme fuer BituPrint. Asphaltgestaltung, Asphalt Grinding und Asphaltreparatur. Enthaelt Referenzen und Muster als eigene Inhaltstypen, FAQ-Verwaltung mit automatischem FAQPage-Schema.
Version: 4.22
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: proprietaer
Text Domain: bituprint
*/
/* ----------------------------------------------------------------
* Schriften liegen im Theme, nicht bei Google.
* Montserrat und Inter stehen unter der SIL Open Font License;
* das Mitliefern im Theme ist ausdruecklich erlaubt.
* Dadurch baut kein Besucher mehr eine Verbindung zu Google auf.
* -------------------------------------------------------------- */
@font-face{
font-family:'Montserrat';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('assets/fonts/montserrat-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Montserrat';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('assets/fonts/montserrat-400-latin.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:'Montserrat';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('assets/fonts/montserrat-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Montserrat';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('assets/fonts/montserrat-500-latin.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:'Montserrat';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('assets/fonts/montserrat-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Montserrat';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('assets/fonts/montserrat-600-latin.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:'Montserrat';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('assets/fonts/montserrat-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Montserrat';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('assets/fonts/montserrat-700-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('assets/fonts/inter-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('assets/fonts/inter-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('assets/fonts/inter-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:500;
font-display:swap;
src:url('assets/fonts/inter-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('assets/fonts/inter-600-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:600;
font-display:swap;
src:url('assets/fonts/inter-600-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('assets/fonts/inter-700-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:700;
font-display:swap;
src:url('assets/fonts/inter-700-latin.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{
--bg:#d8cbb7; --bg2:#e4dacb; --panel:#d1c2ad;
--paper:#f5f2ec; --cream:#ece7dd; --muted:#a29e97; --ink:#2b2b2b;
--green:#5aa981; --green-2:#6fbf96; --green-soft:#12352a;
--line-d:rgba(255,255,255,.12); --line-l:#e6e2d8;
--disp:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
body{margin:0; background:#eee8df; color:var(--cream); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
.frame{max-width:1180px; margin:26px auto; background:var(--bg); border-radius:12px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.5);}
.chrome{display:flex; align-items:center; gap:8px; padding:10px 16px; background:#0a0b0c;}
.chrome i{width:10px;height:10px;border-radius:50%;background:#33363b;display:block;}
.chrome .addr{margin-left:14px; font-size:12px; color:#8a9096; background:#141618; padding:5px 13px; border-radius:6px;}
.top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 40px; background:var(--paper); flex-wrap:wrap;}
.top .logo{height:42px; width:auto;}
.top .brand{font-family:var(--disp); font-weight:700; font-size:22px; letter-spacing:.02em; color:#484848; text-decoration:none;}
.top .brand span{color:#3ec978;}
nav{display:flex; gap:30px; flex-wrap:wrap; align-items:center;}
.navitem{position:relative; display:flex; align-items:center;}
nav>a,.navtrigger{font-family:var(--disp); font-size:12px; font-weight:500; color:#4a4a4a; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; background:none; border:none; cursor:pointer; padding:0 0 5px; position:relative; display:inline-flex; align-items:center; gap:8px; transition:color .2s;}
nav>a::after,.navtrigger::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--green); transition:width .28s ease;}
nav>a:hover,.navtrigger:hover,.navitem:hover .navtrigger{color:#111;}
nav>a:hover::after,.navtrigger:hover::after,.navitem:hover .navtrigger::after{width:100%;}
nav>a[aria-current]{color:#111;} nav>a[aria-current]::after{width:100%;}
.navtrigger.current{color:#111;} .navtrigger.current::after{width:100%;}
.caret{width:6px; height:6px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .25s ease;}
.navitem:hover .caret,.navitem.open .caret{transform:rotate(-135deg) translateY(1px);}
.submenu{position:absolute; top:calc(100% + 14px); left:0; min-width:250px; background:#fff; border:1px solid var(--line-l); border-radius:3px; box-shadow:0 20px 46px rgba(20,20,20,.14); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:30;}
.navitem:hover .submenu,.navitem:focus-within .submenu,.navitem.open .submenu{opacity:1; visibility:visible; transform:translateY(0);}
.submenu::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;}
.submenu a{display:block; font-family:var(--disp); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#4a4a4a; text-decoration:none; padding:11px 14px; border-radius:2px; transition:.15s;}
.submenu a:hover{background:var(--paper); color:#111;}
nav .quote{font-family:var(--disp); font-size:12px; border:1px solid var(--ink); color:var(--ink); padding:11px 22px; border-radius:2px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; transition:.2s;}
nav .quote::after{display:none;} nav .quote:hover{background:var(--ink); color:#fff;}
.hero{position:relative; min-height:520px; display:flex; align-items:flex-end;}
.hero.small{min-height:380px;}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero .scrim{position:absolute; inset:0; background:transparent; pointer-events:none;}
.hero-in{position:relative; z-index:2; padding:0 56px 60px; max-width:900px;}
.eyebrow{font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); opacity:.82; display:flex; align-items:center; gap:12px; margin-bottom:24px;}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--green);}
.eyebrow.dark{color:var(--muted); opacity:1;}
.hero h1{font-family:var(--disp); font-weight:500; font-size:clamp(30px,4.6vw,54px); line-height:1.12; letter-spacing:.08em; text-transform:uppercase; margin:0 0 22px; color:#fff;}
.hero p{font-size:16.5px; color:rgba(255,255,255,.92); max-width:54ch; margin:0 0 30px;}
.actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-block; font-family:var(--disp); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:15px 30px; border-radius:2px; text-decoration:none; transition:.2s; border:1px solid transparent; cursor:pointer;}
.btn.solid{background:var(--green); color:#0f1a14;} .btn.solid:hover{background:var(--green-2);}
.btn.ghost{border-color:rgba(255,255,255,.4); color:#fff;} .btn.ghost:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn.dark{background:var(--paper); color:var(--ink);} .btn.dark:hover{background:#fff;}
section{padding:96px 60px; border-top:1px solid var(--line-d);}
h2{font-family:var(--disp); font-weight:500; font-size:clamp(23px,3.2vw,37px); line-height:1.2; letter-spacing:.035em; margin:0 0 22px; color:#fff;}
h3{color:#fff;}
.lead{font-size:16.5px; color:var(--cream); max-width:66ch;} .lead+.lead{margin-top:16px;}
.muted{color:var(--muted);}
.feat-head{max-width:62ch; margin-bottom:44px;}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.split .media{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background-size:cover; background-position:center;}
.serv{list-style:none; margin:26px 0 0; padding:0;}
.serv li{padding:13px 0; border-top:1px solid var(--line-d); font-size:15.5px; color:var(--cream); display:flex; gap:12px;}
.serv li::before{content:"—"; color:var(--green);}
.serv li[aria-current]{color:#fff;} .serv li[aria-current]::before{color:var(--green-2);}
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.feat .n{font-family:var(--disp); font-weight:600; font-size:30px; color:var(--green); line-height:1; margin-bottom:14px;}
.feat h3{font-family:var(--disp); font-weight:500; font-size:16px; letter-spacing:.015em; margin:0 0 8px;}
.feat p{font-size:14.5px; color:var(--muted); margin:0;}
.band{position:relative; height:420px;}
.band .bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.band .scrim{position:absolute; inset:0; background:transparent; pointer-events:none;}
.band .cap{position:absolute; left:56px; bottom:36px; z-index:2; max-width:60%;}
.band .cap .eyebrow{margin-bottom:8px;}
.band .cap h3{font-family:var(--disp); font-weight:500; font-size:26px; letter-spacing:.03em; margin:0;}
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:44px;}
.proc .step .n{font-family:var(--disp); font-size:12px; letter-spacing:.2em; color:var(--green); margin-bottom:14px;}
.proc .step h3{font-family:var(--disp); font-weight:500; font-size:19px; letter-spacing:.02em; margin:0 0 8px;}
.proc .step p{font-size:14px; color:var(--muted); margin:0;}
.mats{text-align:center; padding:66px 56px; background:var(--bg2); border-top:1px solid var(--line-d);}
.mats .row{font-family:var(--disp); font-weight:500; font-size:clamp(17px,2.5vw,26px); letter-spacing:.04em; color:var(--cream);}
.mats .row span{color:var(--muted); margin:0 12px;}
.mats .sub{margin-top:16px; font-family:var(--disp); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.tile{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; display:block; text-decoration:none; background:var(--bg2);}
.tile .bg{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease;}
.tile:hover .bg{transform:scale(1.04);}
.tile .scrim{position:absolute; inset:0; background:transparent; pointer-events:none;}
.tile .meta{position:absolute; left:20px; right:16px; bottom:18px; z-index:2;}
.tile .meta small{display:block; font-family:var(--disp); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin-bottom:5px;}
.tile .meta h3{font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:.02em; margin:0 0 3px;}
.tile .meta span.f{font-size:12.5px; color:rgba(255,255,255,.72);}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.chip{font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px 20px; border-radius:40px; border:1px solid var(--line-d); background:transparent; color:var(--muted); cursor:pointer; transition:.2s;}
.chip:hover{color:#fff; border-color:rgba(255,255,255,.3);}
.chip.on{background:var(--green); border-color:var(--green); color:#0f1a14;}
.empty{grid-column:1/-1; padding:40px 0; color:var(--muted); font-size:15px;}
.gal{display:grid; gap:14px; margin-top:36px;}
.gal.g4{grid-template-columns:repeat(4,1fr);}
.gal.g3{grid-template-columns:repeat(3,1fr);}
.gal figure{margin:0; position:relative; border-radius:8px; overflow:hidden; background:var(--bg2); cursor:zoom-in;}
.gal figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .5s ease;}
.gal figure:hover img{transform:scale(1.05);}
.gal.wide figure img{aspect-ratio:4/3;}
.gal figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; font-size:11.5px; color:#fff; background:rgba(10,11,12,.72); opacity:0; transition:opacity .25s;}
.gal figure:hover figcaption{opacity:1;}
.tips{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px;}
.tip{background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; overflow:hidden; display:flex; flex-direction:column;}
.tip .shot{aspect-ratio:16/10; background-size:cover; background-position:center; cursor:zoom-in;}
.tip .txt{padding:22px 26px 26px;}
.tip h3{font-family:var(--disp); font-weight:500; font-size:17px; letter-spacing:.015em; margin:0 0 8px;}
.tip p{font-size:14.5px; color:var(--muted); margin:0;}
.tip .k{font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); display:block; margin-bottom:8px;}
.tip-note{margin-top:26px; padding:20px 24px; background:var(--green-soft); border-left:3px solid var(--green); border-radius:8px; color:var(--cream); font-size:15px;}
.ba{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:36px;}
.ba .card{background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; overflow:hidden;}
.ba .card img{aspect-ratio:4/3; object-fit:cover; width:100%; cursor:zoom-in;}
.ba .card .cap{padding:14px 18px; font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2);}
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
.team figure{margin:0; border-radius:10px; overflow:hidden; background:var(--bg2);}
.team figure img{aspect-ratio:3/4; object-fit:cover; width:100%; cursor:zoom-in;}
.team figcaption{padding:14px 18px; font-size:13.5px; color:var(--muted);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center;}
.stats .s .big{font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.4vw,40px); color:#fff; line-height:1; letter-spacing:.02em;}
.stats .s .lbl2{margin-top:10px; font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.cols{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px;}
.cols li{padding:13px 0; border-top:1px solid var(--line-d); font-size:15.5px; display:flex; gap:12px;}
.cols li::before{content:"—"; color:var(--green);}
.faqs{margin-top:26px; max-width:88ch;}
.faqs .faq:last-child{border-bottom:1px solid var(--line-d);}
.faq{border-top:1px solid var(--line-d); padding:18px 0;}
.faq summary{cursor:pointer; font-family:var(--disp); font-size:16px; color:#fff; letter-spacing:.01em; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+"; color:var(--green); margin-right:12px;}
.faq[open] summary::before{content:"\2013";}
.faq p{color:var(--muted); font-size:15px; margin:12px 0 0 26px; max-width:70ch;}
.cta{position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; border-top:none;}
.cta .bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.cta .scrim{position:absolute; inset:0; background:rgba(10,11,12,.76);}
.cta-in{position:relative; z-index:2; padding:40px;}
.cta-in h2{margin-bottom:14px;} .cta-in p{color:var(--cream); margin:0 0 26px;}
.contact-info p{margin:6px 0; color:var(--cream);}
.anfrage{background:var(--bg2); border:1px solid var(--line-d); border-radius:12px; padding:30px;}
.anfrage label{display:block; font-family:var(--disp); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px;}
.anfrage input,.anfrage select,.anfrage textarea{width:100%; background:#17181a; border:1px solid var(--line-d); border-radius:4px; color:var(--cream); padding:12px 14px; font-family:var(--sans); font-size:14.5px; margin-bottom:16px;}
.anfrage .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.anfrage .hint{font-size:12.5px; color:var(--muted); margin:14px 0 0;}
.foot{background:var(--paper); color:var(--ink); padding:52px 56px 40px;}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px;}
.foot .brand{font-family:var(--disp); font-weight:700; font-size:22px; color:#484848; display:block; margin-bottom:14px;}
.foot .brand span{color:#3ec978;}
.foot p.desc{font-size:14px; color:#5a5a5a; max-width:34ch; margin:0;}
.foot h4{font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8a8a8a; margin:0 0 14px;}
.foot ul{list-style:none; margin:0; padding:0;}
/* Groesse und Farbe gehoeren auf den Eintrag, nicht nur auf den Link.
Sonst faellt eine Zeile ohne Link - etwa die Anschrift - auf die
normale Textgroesse zurueck und wirkt zu gross. */
.foot li{margin-bottom:9px; font-size:14px; line-height:1.55; color:#3d3d3d;}
.foot a{color:#3d3d3d; text-decoration:none; font-size:14px;} .foot a:hover{color:#000;}
.foot .copy{margin-top:36px; padding-top:20px; border-top:1px solid var(--line-l); font-size:12.5px; color:#8a8a8a;}
.lb{position:fixed; inset:0; background:rgba(6,7,8,.95); display:none; align-items:center; justify-content:center; z-index:100; padding:40px;}
.lb.on{display:flex;}
.lb img{max-width:92vw; max-height:82vh; object-fit:contain; border-radius:6px;}
.lb .cap{position:absolute; bottom:26px; left:0; right:0; text-align:center; color:var(--cream); font-size:13.5px; padding:0 40px;}
.lb .x{position:absolute; top:22px; right:28px; font-size:30px; color:#fff; background:none; border:none; cursor:pointer; line-height:1;}
.lb .nav{position:absolute; top:50%; transform:translateY(-50%); font-size:34px; color:#fff; background:none; border:none; cursor:pointer; padding:14px 20px;}
.lb .nav.prev{left:10px;} .lb .nav.next{right:10px;}
/* Logo */
.top .brand{font-size:30px; letter-spacing:.01em; line-height:1; display:block;}
.top .brand img{height:54px; width:auto; display:block;}
.top{padding-top:20px; padding-bottom:20px;}
.foot .brand{font-size:26px; display:block;}
.foot .brand img{height:42px; width:auto; margin-bottom:16px;}
@media(max-width:760px){ .top .brand img{height:42px;} }
/* Claims unter der Headline */
.claims{display:flex; gap:0; flex-wrap:wrap; align-items:center; margin:0 0 30px; font-family:var(--disp); font-size:clamp(13px,1.6vw,17px); font-weight:500; letter-spacing:.18em; text-transform:uppercase;}
.claims a{color:rgba(255,255,255,.9); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:.2s;}
.claims a:hover{color:#fff; border-bottom-color:var(--green);}
.claims i{font-style:normal; color:var(--green-2); margin:0 16px; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.claims a{text-shadow:0 1px 8px rgba(0,0,0,.45);}
/* Tipp-Kachel als Link */
a.tip{text-decoration:none; color:inherit; transition:border-color .2s;}
a.tip:hover{border-color:rgba(111,191,150,.55);}
.tip .more{display:inline-block; margin-top:14px; font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2);}
a.tip:hover .more{color:#fff;}
.tip .shot{cursor:pointer;}
/* Musterkachel mit Link */
.muster{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
.muster .m{background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; display:block; transition:border-color .2s;}
.muster a.m:hover{border-color:rgba(111,191,150,.55);}
.muster .m img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .5s ease;}
.muster a.m:hover img{transform:scale(1.04);}
.muster .m .cap{padding:14px 16px 16px;}
.muster .m .cap b{display:block; font-family:var(--disp); font-weight:500; font-size:14.5px; color:#fff; letter-spacing:.01em;}
.muster .m .cap span{display:block; margin-top:5px; font-family:var(--disp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.muster a.m .cap span{color:var(--green-2);}
/* Zurueck-Link auf Unterseiten */
.back{display:inline-block; margin-bottom:26px; font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); text-decoration:none;}
.back:hover{color:#fff;}
.prose p{font-size:16px; color:var(--cream); max-width:70ch;}
.prose h3{font-family:var(--disp); font-weight:500; font-size:19px; letter-spacing:.02em; margin:34px 0 10px;}
.prose ul{margin:14px 0 0; padding:0; list-style:none;}
.prose ul li{padding:11px 0; border-top:1px solid var(--line-d); font-size:15.5px; display:flex; gap:12px;}
.prose ul li::before{content:"—"; color:var(--green);}
/* Vorher / Waehrend / Nachher */
.strecke{margin-top:52px; padding-top:38px; border-top:1px solid var(--line-d);}
.strecke:first-of-type{border-top:none; padding-top:0;}
.strecke > h3{font-family:var(--disp); font-weight:500; font-size:21px; letter-spacing:.02em; margin:0 0 6px;}
.strecke > .ort{font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin:0 0 10px;}
.strecke > p.txt{font-size:15px; color:var(--muted); margin:0 0 26px; max-width:76ch;}
.drei{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.drei figure{margin:0; background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; overflow:hidden;}
.drei figure img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; cursor:zoom-in; transition:transform .5s ease;}
.drei figure:hover img{transform:scale(1.03);}
.drei figcaption{padding:13px 16px 16px;}
.drei figcaption b{display:block; font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--green-2); margin-bottom:5px;}
.drei figcaption span{font-size:13.5px; color:var(--muted); line-height:1.5;}
@media(max-width:820px){ .drei{grid-template-columns:1fr;} }
/* Nach oben */
.totop{position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(23,24,26,.82); color:var(--cream); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s, border-color .2s; z-index:90; backdrop-filter:blur(6px);}
.totop.on{opacity:1; visibility:visible; transform:translateY(0);}
.totop:hover{background:var(--green); border-color:var(--green); color:#0f1a14;}
.totop svg{width:17px; height:17px;}
@media(max-width:960px){
.muster{grid-template-columns:repeat(3,1fr);}
.feats,.proc{grid-template-columns:repeat(2,1fr);}
.gal.g4{grid-template-columns:repeat(3,1fr);}
.team{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
.split{grid-template-columns:1fr; gap:30px;}
.feats,.proc,.tips,.ba,.cols{grid-template-columns:1fr;}
.grid,.grid.two{grid-template-columns:1fr 1fr;}
.stats{grid-template-columns:1fr 1fr; gap:26px;}
.foot-top{grid-template-columns:1fr 1fr;}
.gal.g4,.gal.g3{grid-template-columns:repeat(2,1fr);}
.muster{grid-template-columns:repeat(2,1fr);}
.band .cap{max-width:none;}
}
@media(max-width:760px){
section,.mats,.foot{padding-left:24px; padding-right:24px;}
.hero-in{padding:0 24px 44px;} .band .cap{left:24px;} .top{padding:14px 22px;}
section{padding-top:64px; padding-bottom:64px;}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important;} }
/* ---------- Referenz-Detailseiten ---------- */
.ref-kopf{display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:start;}
.eckdaten{margin:0; background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; padding:8px 22px 14px;}
.eckdaten > div{padding:13px 0; border-top:1px solid var(--line-d);}
.eckdaten > div:first-child{border-top:none;}
.eckdaten dt{font-family:var(--disp); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 5px;}
.eckdaten dd{margin:0; font-size:14.5px; color:var(--cream); line-height:1.5;}
.ref-nav{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.nachbar{display:block; padding:22px 24px; background:var(--bg2); border:1px solid var(--line-d); border-radius:10px; text-decoration:none; transition:border-color .2s;}
.nachbar:hover{border-color:rgba(111,191,150,.55);}
.nachbar span{display:block; font-family:var(--disp); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-2); margin-bottom:6px;}
.nachbar b{font-family:var(--disp); font-weight:500; font-size:15.5px; color:var(--cream);}
.nachbar.re{text-align:right;}
@media(max-width:820px){ .ref-kopf{grid-template-columns:1fr; gap:30px;} .ref-nav{grid-template-columns:1fr;} .nachbar.re{text-align:left;} }
/* ---------- FAQ: leiser Abbinder am Seitenende ---------- */
#faq{padding-top:40px; padding-bottom:44px;}
#faq .eyebrow{display:none;}
#faq h2{font-family:var(--disp); font-weight:500; font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--muted); margin:0 0 2px; line-height:1.6;}
#faq .lead{font-size:12.5px; color:var(--muted); max-width:64ch; margin:6px 0 0;}
#faq .faqs{margin-top:10px; max-width:64ch;}
#faq .faq{padding:9px 0; border-top:1px solid rgba(255,255,255,.07);}
#faq .faqs .faq:last-child{border-bottom:1px solid rgba(255,255,255,.07);}
#faq .faq summary{font-family:var(--sans); font-size:13.5px; font-weight:400; color:var(--muted); letter-spacing:0;}
#faq .faq summary:hover{color:var(--cream);}
#faq .faq summary::before{color:var(--muted); font-size:12px; margin-right:9px;}
#faq .faq[open] summary{color:var(--cream);}
#faq .faq[open] summary::before{color:var(--green);}
#faq .faq p{font-size:13px; line-height:1.6; margin:7px 0 0 21px; max-width:62ch;}
/* ======================================================================
Theme-Anpassungen gegenueber der statischen Vorschau
====================================================================== */
/* Der Browser-Rahmen der Vorschau faellt weg */
.frame{max-width:none; margin:0; border-radius:0; box-shadow:none;}
.chrome{display:none;}
.wrap{max-width:1180px; margin:0 auto;}
.top,.foot{padding-left:max(40px,calc((100vw - 1180px)/2 + 40px)); padding-right:max(40px,calc((100vw - 1180px)/2 + 40px));}
section,.mats{padding-left:max(60px,calc((100vw - 1180px)/2 + 60px)); padding-right:max(60px,calc((100vw - 1180px)/2 + 60px));}
.hero-in{padding-left:max(56px,calc((100vw - 1180px)/2 + 56px));}
.band .cap{left:max(56px,calc((100vw - 1180px)/2 + 56px));}
body.admin-bar .totop{bottom:60px;}
/* Mobile-Navigation */
.burger{display:none; background:none; border:1px solid rgba(0,0,0,.25); border-radius:3px; padding:9px 11px; cursor:pointer; line-height:0;}
.burger span{display:block; width:20px; height:1.6px; background:#3a3a3a; margin:4px 0; transition:.25s;}
.top.open .burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg);}
.top.open .burger span:nth-child(2){opacity:0;}
.top.open .burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg);}
@media(max-width:900px){
.burger{display:block;}
.top{position:relative;}
.top nav{display:none; width:100%; flex-direction:column; align-items:flex-start; gap:0; padding:14px 0 4px; border-top:1px solid var(--line-l); margin-top:14px;}
.top.open nav{display:flex;}
.top nav>a,.top .navtrigger{padding:13px 0; font-size:13px;}
.top .navitem{display:block; width:100%; flex-direction:column; align-items:flex-start;}
.top .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:0 0 8px 14px; display:none; min-width:0;}
.top .navitem.open .submenu{display:block;}
.top .navitem:hover .submenu{display:none;}
.top .navitem.open:hover .submenu{display:block;}
.top .submenu a{padding:9px 0; color:#666;}
nav .quote{margin:10px 0 4px;}
}
/* Editor-Inhalte (Gutenberg) im dunklen Layout */
.editor-content{max-width:74ch;}
.editor-content p{font-size:16px; color:var(--cream);}
.editor-content a{color:var(--green-2);}
.editor-content h2{margin-top:44px;}
.editor-content h3{font-family:var(--disp); font-weight:500; font-size:19px; letter-spacing:.02em; margin:32px 0 10px;}
.editor-content ul{margin:14px 0 0; padding:0; list-style:none;}
.editor-content ul li{padding:11px 0; border-top:1px solid var(--line-d); font-size:15.5px; display:flex; gap:12px;}
.editor-content ul li::before{content:"\2014"; color:var(--green);}
.editor-content blockquote{margin:26px 0; padding:20px 24px; background:var(--green-soft); border-left:3px solid var(--green); border-radius:8px;}
.editor-content blockquote p{margin:0;}
.editor-content img{border-radius:8px;}
.alignwide{max-width:none;}
.aligncenter{margin-left:auto; margin-right:auto;}
/* Blaetterlinks / Paginierung */
.pager{display:flex; gap:10px; flex-wrap:wrap; margin-top:44px;}
.pager a,.pager span{font-family:var(--disp); font-size:12px; letter-spacing:.1em; padding:10px 16px; border:1px solid var(--line-d); border-radius:3px; color:var(--muted); text-decoration:none;}
.pager a:hover{color:#fff; border-color:rgba(255,255,255,.3);}
.pager .current{background:var(--green); border-color:var(--green); color:#0f1a14;}
/* Formular-Rueckmeldung */
.formmsg{margin:0 0 20px; padding:14px 18px; border-radius:6px; font-size:14.5px;}
.formmsg.ok{background:var(--green-soft); border-left:3px solid var(--green); color:var(--cream);}
.formmsg.err{background:#3a1f1f; border-left:3px solid #c9694f; color:#f0dcd6;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* Suchergebnisse / 404 */
.simple-list{list-style:none; margin:30px 0 0; padding:0; max-width:70ch;}
.simple-list li{padding:16px 0; border-top:1px solid var(--line-d);}
.simple-list a{font-family:var(--disp); font-size:17px; color:#fff; text-decoration:none;}
.simple-list a:hover{color:var(--green-2);}
.simple-list p{margin:6px 0 0; font-size:14.5px; color:var(--muted);}
/* Skip-Link */
.skip{position:absolute; left:-9999px; top:0; background:var(--green); color:#0f1a14; padding:10px 18px; z-index:200;}
.skip:focus{left:10px; top:10px;}
/* ===================================================================
Ausschreibungstexte
=================================================================== */
.lv-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:34px;}
.lv-sprung{font-family:var(--disp); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
padding:11px 20px; border:1px solid var(--line-d); border-radius:40px;
color:var(--muted); text-decoration:none; transition:.2s;}
.lv-sprung:hover{color:#fff; border-color:var(--green); background:var(--green-soft);}
section.lv{padding-top:0;}
.lv-block{margin-top:56px; padding-top:44px; border-top:1px solid var(--line-d); scroll-margin-top:24px;}
.lv-block:first-child{margin-top:0; padding-top:0; border-top:none;}
.lv-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap;}
.lv-kopf h3{font-family:var(--disp); font-weight:500; font-size:clamp(19px,2.3vw,25px);
letter-spacing:.02em; margin:0; max-width:34ch; line-height:1.3;}
.lv-unter{margin:8px 0 0; font-size:14.5px; color:var(--muted);}
.lv-knoepfe{display:flex; gap:10px; flex-wrap:wrap;}
.lv-copy,.lv-pdf{font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.16em;
text-transform:uppercase; padding:12px 22px; border-radius:2px; cursor:pointer;
text-decoration:none; transition:.2s; border:1px solid var(--line-d);
background:transparent; color:var(--cream); display:inline-block;}
.lv-copy:hover,.lv-pdf:hover{border-color:var(--green); color:#fff; background:var(--green-soft);}
.lv-copy.ok{background:var(--green); border-color:var(--green); color:#0f1a14;}
.lv-vorspann{margin:22px 0 0; font-size:15.5px; color:var(--cream); max-width:80ch;}
.lv-liste{margin-top:30px; background:var(--bg2); border:1px solid var(--line-d); border-radius:10px;
padding:8px 26px 18px;}
.lv-pos{display:grid; grid-template-columns:96px 1fr; gap:22px; padding:20px 0;
border-top:1px solid var(--line-d);}
.lv-pos:first-child{border-top:none;}
.lv-nr{font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.16em;
text-transform:uppercase; color:var(--green-2); padding-top:3px;}
.lv-inhalt h4{font-family:var(--disp); font-weight:500; font-size:16px; letter-spacing:.01em;
color:#fff; margin:0 0 8px;}
.lv-inhalt p{margin:0; font-size:15px; color:var(--cream); line-height:1.7; max-width:78ch;}
.lv-felder{display:flex; gap:26px; flex-wrap:wrap; margin-top:14px;}
.lv-felder span{font-family:var(--sans); font-size:13.5px; color:var(--muted);
border-bottom:1px dashed rgba(255,255,255,.18); padding-bottom:3px;}
.lv-roh{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
@media(max-width:760px){
.lv-pos{grid-template-columns:1fr; gap:8px;}
.lv-liste{padding:8px 18px 14px;}
.lv-kopf{flex-direction:column;}
}
/* ===================================================================
Navigation: die drei Leistungen stehen einzeln, jede mit Klappmenü
=================================================================== */
nav{gap:22px;}
nav>a,.navtrigger{font-size:11.5px; letter-spacing:.13em;}
nav .quote{padding:11px 18px; letter-spacing:.13em;}
.top nav{margin-left:auto; justify-content:flex-end;}
@media(max-width:1240px){
nav{gap:16px;}
nav>a,.navtrigger{font-size:11px; letter-spacing:.1em;}
nav .quote{padding:10px 14px;}
}
@media(max-width:1180px){
.top{padding-top:16px; padding-bottom:12px; row-gap:6px;}
}
@media(max-width:1080px){
.top{gap:14px;}
.top .brand img{height:46px;}
nav{gap:13px;}
nav>a,.navtrigger{font-size:10.5px; letter-spacing:.07em;}
}
/* Erster Eintrag im Klappmenü führt auf die Leistungsseite selbst */
.submenu a.sm-haupt{font-weight:600; color:#1c1c1c; border-bottom:1px solid var(--line-l);
margin-bottom:6px; padding-bottom:13px;}
/* Der Ausschreibungstext sitzt abgesetzt am Fuß des Klappmenüs */
.submenu a.sm-lv{margin-top:6px; padding-top:13px; border-top:1px solid var(--line-l);
color:#2f7d55;}
.submenu a.sm-lv::before{content:"↓ "; opacity:.7;}
.submenu a.sm-lv:hover{background:#eef6f1; color:#1c5c3c;}
/* Auf dem Handy bleibt die Navigation ausklappbar */
@media(max-width:900px){
.top nav{margin-left:0;}
}
/* ===================================================================
Instagram und Facebook im Fußbereich
=================================================================== */
.sozial{display:flex; gap:12px; margin-top:20px;}
.sozial .soz{display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border:1px solid #d8d4ca; border-radius:50%;
color:#5a5a5a; transition:.2s;}
.sozial .soz svg{width:18px; height:18px;}
.sozial .soz:hover{background:#2f7d55; border-color:#2f7d55; color:#fff;}
/* BituPrint 2026-09: Kontaktlinks in Marken-Grün statt Browser-Blau */
#kontakt .contact-info a{
color:var(--green-2);
text-decoration-color:var(--green-2);
text-decoration-thickness:1px;
text-underline-offset:3px;
font-weight:600;
transition:color .2s ease, text-decoration-color .2s ease;
}
#kontakt .contact-info a:visited{color:var(--green-2);}
#kontakt .contact-info a:hover,
#kontakt .contact-info a:focus{
color:#83d7aa;
text-decoration-color:#83d7aa;
}
\n\n/* BituPrint 2026-09-16: Kontaktlinks zuverlässig grün (überschreibt Browser/Plugin-Regeln) */
#kontakt .contact-info a,
#kontakt .contact-info a:link,
#kontakt .contact-info a:visited,
#kontakt .contact-info a[href^="mailto:"],
#kontakt .contact-info a[href^="tel:"]{
color:#58d68d !important;
-webkit-text-fill-color:#58d68d !important;
text-decoration-color:#58d68d !important;
text-decoration-thickness:1px;
text-underline-offset:3px;
font-weight:600;
}
#kontakt .contact-info a:hover,
#kontakt .contact-info a:focus,
#kontakt .contact-info a:active{
color:#78e6a7 !important;
-webkit-text-fill-color:#78e6a7 !important;
text-decoration-color:#78e6a7 !important;
}
/* Startseite – Feinschliff 16.09.2026 */
.home .band{height:300px;}
.home .band .bg{background-position:center 55%;}
.bp-verfahren-nav{max-width:1180px;margin:0 auto;padding:52px 24px;text-align:center;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--disp);font-size:25px;letter-spacing:.03em;line-height:1.4;}
.bp-verfahren-nav a{color:var(--text);text-decoration:none;transition:color .2s ease;}
.bp-verfahren-nav a:hover,.bp-verfahren-nav a:focus{color:var(--green-2);}
.bp-verfahren-nav .term{color:var(--text);}
.bp-verfahren-nav>span:not(.term){color:var(--muted);}
.anfrage input[type="file"]{padding:12px;background:rgba(255,255,255,.02);cursor:pointer;}
.anfrage .upload-hint{margin-top:-8px;margin-bottom:18px;font-size:12px;}
@media(max-width:700px){.home .band{height:240px}.bp-verfahren-nav{font-size:20px;gap:11px;padding:36px 20px}.bp-verfahren-nav>span:not(.term){display:none}}
/* Startseite 2.5 – kompakter Bildteaser und echte Verfahrenskacheln */
.bp-verfahren-kacheln{
max-width:1120px!important; margin:0 auto!important; padding:48px 24px!important;
display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important; text-align:left!important;
}
.bp-verfahren-kacheln a,.bp-verfahren-kacheln span{
display:flex!important; min-height:76px!important; align-items:center!important;
padding:18px 22px!important; border:1px solid rgba(255,255,255,.12)!important;
border-radius:6px!important; background:rgba(255,255,255,.025)!important;
color:#f4f1e9!important; font-family:var(--disp)!important; font-size:20px!important;
letter-spacing:.03em!important; text-decoration:none!important;
}
.bp-verfahren-kacheln a{border-color:rgba(88,214,141,.38)!important;}
.bp-verfahren-kacheln a:hover,.bp-verfahren-kacheln a:focus{
background:rgba(88,214,141,.10)!important; border-color:#58d68d!important; color:#78e6a7!important;
}
@media(max-width:760px){.bp-verfahren-kacheln{grid-template-columns:1fr 1fr!important;padding:34px 20px!important}.bp-verfahren-kacheln a,.bp-verfahren-kacheln span{min-height:64px!important;font-size:17px!important}}
/* BituPrint 2.5.1: Bilder brillant ohne grauen/dunklen Schleier */
.hero-in,.band .cap,.tile .meta{text-shadow:0 2px 10px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95);}
.tile .bg,.hero .bg,.band .bg{filter:none!important;opacity:1!important;}
/* BituPrint 2.5.2: alle Bild-Overlays wirklich entfernen */
.hero .scrim,.band .scrim,.tile .scrim,.cta .scrim{
display:none!important;
background:none!important;
background-image:none!important;
opacity:0!important;
}
.hero .bg,.band .bg,.tile .bg,.cta .bg,
.gal img,.ba .card img,.team img,.drei img,.muster img{
filter:none!important;
opacity:1!important;
}
/* BituPrint 2.6.0 – Sandton Variante A: Layout bleibt unverändert */
:root{
--bg:#d8cbb7;
--bg2:#e4dacb;
--panel:#d1c2ad;
--paper:#f5f2ec;
--cream:#2f2c28;
--muted:#756d63;
--ink:#2b2b2b;
--line-d:rgba(74,65,54,.18);
}
body{background:#eee8df;color:var(--ink);}
.frame{background:var(--bg);}
section{border-top-color:var(--line-d);}
h2,h3,.lead,.serv li,.cols li,.contact-info p{color:#292621;}
.eyebrow{color:#625b52;opacity:1;}
.eyebrow.dark{color:#756d63;}
.muted,.feat p,.proc .step p,.tip p,.team figcaption,.faqs .faq p{color:var(--muted);}
.mats{background:var(--bg2);border-top-color:var(--line-d);}
.mats .row{color:#302c27;}.mats .row span,.mats .sub{color:#756d63;}
.tile,.gal figure,.tip,.ba .card,.team figure{background:var(--bg2);}
.filters .chip{color:#625b52;border-color:rgba(74,65,54,.24);}.filters .chip:hover{color:#24211e;border-color:#756d63;}
.faq summary{color:#292621;}
.anfrage{background:#e4dacb;border-color:rgba(74,65,54,.2);}
.anfrage label{color:#625b52;}
.anfrage input,.anfrage select,.anfrage textarea{background:#f3eee7;border-color:rgba(74,65,54,.22);color:#292621;}
.anfrage .hint{color:#756d63;}
.tip-note{color:#f7f4ef;}
.totop{border-color:rgba(74,65,54,.25);background:rgba(245,242,236,.9);color:#34302b;}
/* Bilder bleiben brillant: keine grauen/schwarzen Schleier */
.hero .scrim,.band .scrim,.tile .scrim{background:transparent!important;}
.hero .bg,.band .bg,.tile .bg,.split .media,.tip .shot{filter:none!important;opacity:1!important;}
/* Hero-Text bleibt wie bisher auf dem Foto gut lesbar */
.hero h1,.hero p,.hero .eyebrow,.hero .claims a{color:#fff;}
.hero .eyebrow{opacity:.92;}
/* Referenzkarten ohne Verlaufs-Schleier; Text erhält nur einen feinen Schatten */
.tile .meta h3,.tile .meta span.f,.tile .meta small{text-shadow:0 1px 4px rgba(0,0,0,.75);}
/* BituPrint 3.0 – helles Premium-Farbschema wie die freigegebenen Entwürfe */
:root{--bg:#f1ede5;--bg2:#e9e3d9;--panel:#eee8df;--paper:#f7f4ee;--cream:#363934;--muted:#77776f;--ink:#30332f;--green:#4fac80;--green-2:#63bb91;--line-d:rgba(48,51,47,.12);}
body{background:#ece8e0;color:var(--ink)}
.frame{max-width:none;margin:0;background:var(--bg);border-radius:0;box-shadow:none}
section,.mats,.anfrage{background:var(--bg);color:var(--ink);border-top-color:var(--line-d)}
h2,h3,.lead,.serv li,.cols li,.contact-info p,.faq summary{color:var(--ink)}
.muted,.feat p,.proc .step p,.tip p,.team figcaption,.faqs .faq p{color:var(--muted)}
.top{background:rgba(247,244,238,.97);padding:16px max(34px,calc((100vw - 1320px)/2));}
.top .logo,.top .brand img{height:52px;width:auto}.top nav{gap:24px}
.hero{min-height:500px;align-items:center;background:#eee9df}.hero.small{min-height:430px}
.hero .bg{background-position:center;background-size:cover;filter:none!important;opacity:1!important}
.hero .scrim{display:block!important;opacity:1!important;background:linear-gradient(90deg,rgba(247,244,238,.98) 0%,rgba(247,244,238,.92) 27%,rgba(247,244,238,.52) 47%,rgba(247,244,238,.08) 65%,rgba(247,244,238,0) 82%)!important}
.hero-in{padding:54px max(42px,calc((100vw - 1320px)/2));max-width:780px;text-shadow:none!important}
.hero h1{color:#30332f;font-size:clamp(38px,4vw,62px);line-height:1.02;letter-spacing:.035em;text-shadow:none!important;margin-bottom:20px}
.hero p{color:#41433f;max-width:58ch;text-shadow:none!important}.hero .eyebrow{color:#555a54;opacity:1;text-shadow:none!important}.hero .claims a{color:#30332f;text-shadow:none!important}.hero .claims i{color:var(--green)}
.hero .btn.ghost{border-color:#595c57;color:#30332f;background:rgba(247,244,238,.55)}.hero .btn.ghost:hover{background:#fff}.hero .btn.solid{color:#fff}
.tile .scrim,.band .scrim{display:none!important}.tile .bg,.band .bg,.gal img,.ba .card img,.team img,.drei img,.muster img{filter:none!important;opacity:1!important}
.tile .meta{background:linear-gradient(0deg,rgba(25,27,25,.70),rgba(25,27,25,0));left:0;right:0;bottom:0;padding:70px 20px 20px;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.tile .meta h3,.tile .meta small,.tile .meta .f{color:#fff}
/* Sehr dezente Blatt-Anmutung statt starker Schatten */
section{position:relative}section:before{opacity:.035!important;filter:blur(8px)!important}
@media(max-width:760px){.hero .scrim{background:linear-gradient(90deg,rgba(247,244,238,.96),rgba(247,244,238,.78) 70%,rgba(247,244,238,.38))!important}.hero-in{padding:42px 24px}.top{padding:14px 20px}}
/* ================================================================
BituPrint 3.1 – Feinschliff nach Sichtprüfung 16.09.2026
1) Hero-Bilder deutlich sichtbarer, nur noch sehr leichter Text-Schutz
2) Anfragebereich als ruhige Premium-Karte hervorgehoben
3) Vertikale Abstände harmonisiert und kompakter
================================================================ */
/* Hero: kein großer heller Schleier mehr. Nur ein kurzer, sehr dezenter
Verlauf direkt hinter dem Text; ab ca. 42% ist das Foto unverdeckt. */
.hero .scrim{
display:block!important;
opacity:1!important;
background:linear-gradient(90deg,
rgba(247,244,238,.62) 0%,
rgba(247,244,238,.48) 18%,
rgba(247,244,238,.22) 31%,
rgba(247,244,238,.06) 41%,
rgba(247,244,238,0) 50%)!important;
}
.hero h1{color:#2f332f!important;text-shadow:0 1px 0 rgba(255,255,255,.18)!important}
.hero p,.hero .eyebrow,.hero .claims a{color:#343934!important;text-shadow:0 1px 2px rgba(255,255,255,.28)!important}
.hero .btn.ghost{background:rgba(247,244,238,.42)!important;backdrop-filter:blur(1px)}
/* Kontakt / Anfrage: vom Seitenhintergrund abheben, aber im selben
Creme-Eukalyptus-Farbsystem bleiben. */
#kontakt{background:#ece7de!important}
#kontakt .split{align-items:start}
#kontakt .anfrage{
background:#f7f3eb!important;
border:1px solid rgba(79,172,128,.34)!important;
box-shadow:0 18px 46px rgba(63,70,63,.10)!important;
border-radius:16px!important;
padding:34px!important;
}
#kontakt .anfrage input,
#kontakt .anfrage select,
#kontakt .anfrage textarea{
background:#fffdf9!important;
border-color:rgba(48,51,47,.18)!important;
}
#kontakt .anfrage input:focus,
#kontakt .anfrage select:focus,
#kontakt .anfrage textarea:focus{
outline:none!important;
border-color:var(--green)!important;
box-shadow:0 0 0 3px rgba(79,172,128,.10)!important;
}
#kontakt .btn.solid{box-shadow:0 8px 20px rgba(79,172,128,.16)}
/* Seitenrhythmus: weniger Leerraum zwischen aufeinanderfolgenden Themen. */
section{padding-top:70px!important;padding-bottom:70px!important}
section + section{padding-top:62px!important}
.feat-head{margin-bottom:32px!important}
.grid{margin-top:30px!important}
.proc{margin-top:32px!important}
.strecke{margin-top:38px!important;padding-top:30px!important}
.lv-block{margin-top:38px!important;padding-top:30px!important}
.mats{padding-top:52px!important;padding-bottom:52px!important}
@media(max-width:760px){
.hero .scrim{background:linear-gradient(90deg,rgba(247,244,238,.70) 0%,rgba(247,244,238,.46) 45%,rgba(247,244,238,.10) 78%,rgba(247,244,238,0) 100%)!important}
section{padding-top:52px!important;padding-bottom:52px!important}
section + section{padding-top:46px!important}
#kontakt .anfrage{padding:24px!important}
}
/* ================================================================
BituPrint 3.4 – gezielte Korrekturen direkt am Theme
================================================================ */
:root{--green:#4fac80;--green-2:#63bb91;--green-dark:#2f6f52;}
/* Elegante Typografie: bewusst fein, nicht fett. */
.hero h1,h1,h2,h3,h4,.band .cap h3,.cta-in h2{font-weight:400;}
.hero .eyebrow,.eyebrow,.eyebrow.dark{font-weight:500;}
/* Hero: nur ein sehr leichter Leseschutz links – Foto bleibt sichtbar. */
.hero .scrim{display:block;opacity:1;background:linear-gradient(90deg,rgba(247,244,238,.28) 0%,rgba(247,244,238,.16) 18%,rgba(247,244,238,.05) 31%,rgba(247,244,238,0) 44%);}
.hero h1,.hero p,.hero .eyebrow,.hero .claims a{color:#30332f;text-shadow:none;}
/* Claims im Hero wieder fein mit kleinen grünen Punkten. */
.hero .claims{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:0 0 30px;}
.hero .claims a{display:inline;padding:4px 0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:#30332f;font-weight:500;letter-spacing:.18em;box-shadow:none;text-decoration:none;}
.hero .claims a:hover,.hero .claims a:focus{color:#2f6f52;border-bottom-color:var(--green);background:transparent;}
.hero .claims i{display:inline;font-style:normal;color:var(--green);margin:0 16px;font-weight:600;text-shadow:none;}
/* Verfahrensbereich: kompakter, optisch verankert, Punkte statt Schrägstriche. */
.bp-verfahren-wrap{position:relative;background:#f4f0e8;border-top:1px solid rgba(48,51,47,.10);border-bottom:1px solid rgba(48,51,47,.10);overflow:hidden;padding:32px 20px 28px;text-align:center;}
.bp-verfahren-wrap:before{content:'';position:absolute;left:-75px;top:-70px;width:330px;height:270px;opacity:.065;filter:blur(6px);transform:rotate(-18deg);pointer-events:none;background:radial-gradient(ellipse 58px 17px at 30% 25%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 72px 20px at 49% 38%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 62px 18px at 37% 55%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 70px 19px at 60% 67%,#526158 0 48%,transparent 52%),linear-gradient(72deg,transparent 47%,#526158 48% 50%,transparent 51%);}
.bp-verfahren-kacheln{position:relative;z-index:1;max-width:1260px;margin:0 auto;padding:0;display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap;text-align:center;font-family:var(--disp);font-size:clamp(19px,2vw,27px);line-height:1.45;}
.bp-verfahren-kacheln a,.bp-verfahren-kacheln span{padding:4px 0;margin:0;background:transparent;color:#30332f;font-weight:400;letter-spacing:.035em;text-decoration:none;}
.bp-verfahren-kacheln a:hover,.bp-verfahren-kacheln a:focus{color:var(--green-dark);}
.bp-verfahren-kacheln a:not(:last-child)::after,.bp-verfahren-kacheln span:not(:last-child)::after{content:'·';display:inline-block;margin:0 15px;color:var(--green);font-weight:600;}
.bp-verfahren-sub{position:relative;z-index:1;margin:14px 0 0;font-family:var(--disp);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7a756d;}
/* Normale Akzente behalten das helle Eukalyptusgrün. */
.btn.solid,.hero .btn.solid{background:var(--green);border-color:var(--green);color:#fff;}
.btn.solid:hover,.hero .btn.solid:hover{background:#459a72;border-color:#459a72;color:#fff;}
.hero .btn.ghost{background:rgba(247,244,238,.90);border:1px solid var(--green);color:#30332f;}
nav .quote{border-color:var(--green);color:#30332f;background:#f7f4ee;}
nav .quote:hover{background:var(--green);color:#fff;}
/* Nur E-Mail und Telefon dunkler. */
#kontakt a[href^="mailto:"],#kontakt a[href^="tel:"],.contact-info a[href^="mailto:"],.contact-info a[href^="tel:"]{color:var(--green-dark)!important;-webkit-text-fill-color:var(--green-dark)!important;text-decoration-color:var(--green-dark)!important;}
/* Bildband lesbar und scharf. */
.band .cap{background:rgba(247,244,238,.90);padding:15px 19px 16px;border-radius:7px;box-shadow:0 8px 22px rgba(31,38,33,.08);text-shadow:none;}
.band .cap .eyebrow,.band .cap h3{color:#30332f;text-shadow:none;}
/* Leichter Blätterschatten nur auf hellen Flächen. */
.home section:not(.hero):not(.band),.page section:not(.hero):not(.band),.archive section:not(.hero):not(.band){position:relative;overflow:hidden;}
.home section:not(.hero):not(.band)::after,.page section:not(.hero):not(.band)::after,.archive section:not(.hero):not(.band)::after{content:'';position:absolute;left:-90px;top:-55px;width:360px;height:300px;pointer-events:none;z-index:0;opacity:.06;filter:blur(7px);transform:rotate(-18deg);background:radial-gradient(ellipse 55px 17px at 28% 24%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 70px 19px at 48% 34%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 58px 16px at 35% 49%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 68px 18px at 58% 57%,#526158 0 48%,transparent 52%),radial-gradient(ellipse 52px 15px at 45% 72%,#526158 0 48%,transparent 52%),linear-gradient(72deg,transparent 47%,#526158 48% 50%,transparent 51%);}
.home section:not(.hero):not(.band)>*,.page section:not(.hero):not(.band)>*,.archive section:not(.hero):not(.band)>*{position:relative;z-index:1;}
@media(max-width:760px){.hero .scrim{background:linear-gradient(90deg,rgba(247,244,238,.36),rgba(247,244,238,.16) 62%,rgba(247,244,238,0) 100%)}.bp-verfahren-wrap{padding:26px 16px 24px}.bp-verfahren-kacheln{font-size:18px}.bp-verfahren-kacheln a:not(:last-child)::after,.bp-verfahren-kacheln span:not(:last-child)::after{margin:0 9px}.band .cap{left:20px;right:20px;max-width:none}}
/* ================================================================
BituPrint 3.5 – Lesbarkeit ohne Kästen / helle Seiten
================================================================ */
/* Bildbänder: kein Kasten mehr. Dunkle Schrift direkt auf dem Foto,
mit sehr feinem hellem Halo für Lesbarkeit auf unruhigen Flächen. */
.band .cap{
background:transparent!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
max-width:680px!important;
text-shadow:none!important;
}
.band .cap .eyebrow,
.band .cap h3,
.band .cap p,
.band .cap .lead{
color:#2f332f!important;
-webkit-text-fill-color:#2f332f!important;
text-shadow:0 1px 0 rgba(255,255,255,.92),0 0 8px rgba(255,255,255,.72)!important;
}
.band .cap .eyebrow{font-weight:500!important;}
.band .cap h3{font-weight:400!important;}
/* Listen auf den hellen Inhaltsseiten niemals weiß. */
.serv li,.serv li[aria-current],.cols li,.simple-list a,
.prose,.prose p,.prose h2,.prose h3,.prose li{
color:#30332f!important;
-webkit-text-fill-color:#30332f!important;
}
.serv li[aria-current]::before,.serv li::before,.cols li::before{color:var(--green)!important;}
/* Prägemuster: Beschriftungen dunkel auf der hellen Karte. */
.muster .m .cap b{
color:#30332f!important;
-webkit-text-fill-color:#30332f!important;
font-weight:500!important;
}
.muster .m .cap span{color:#6f746e!important;-webkit-text-fill-color:#6f746e!important;}
.muster a.m .cap span{color:var(--green)!important;-webkit-text-fill-color:var(--green)!important;}
/* Hero-Überschriften: Foto sichtbar lassen, Text aber auf jedem Motiv lesbar.
Der Verlauf bleibt bewusst kurz und deutlich leichter als die alten Schleier. */
.hero .scrim{
display:block!important;
opacity:1!important;
background:linear-gradient(90deg,
rgba(247,244,238,.44) 0%,
rgba(247,244,238,.31) 18%,
rgba(247,244,238,.15) 31%,
rgba(247,244,238,.04) 43%,
rgba(247,244,238,0) 52%)!important;
}
.hero h1{
color:#2f332f!important;
-webkit-text-fill-color:#2f332f!important;
font-weight:400!important;
text-shadow:0 1px 0 rgba(255,255,255,.82),0 0 9px rgba(255,255,255,.48)!important;
}
.hero p,.hero .eyebrow,.hero .claims a{
color:#30332f!important;
-webkit-text-fill-color:#30332f!important;
text-shadow:0 1px 0 rgba(255,255,255,.72),0 0 6px rgba(255,255,255,.38)!important;
}
/* CTA/Anfrage-Überschriften auf hellen Flächen dunkel. */
#kontakt h2,#kontakt h3,#kontakt .eyebrow,.anfrage h2,.anfrage h3{
color:#30332f!important;
-webkit-text-fill-color:#30332f!important;
}
@media(max-width:760px){
.hero .scrim{background:linear-gradient(90deg,rgba(247,244,238,.52) 0%,rgba(247,244,238,.32) 54%,rgba(247,244,238,.08) 82%,rgba(247,244,238,0) 100%)!important;}
.band .cap{left:24px!important;right:24px!important;max-width:none!important;}
}
/* ================================================================
BituPrint 3.6 – Lesbarkeit, dunkles Grün, Kontakt & Blattschatten
17.09.2026
================================================================ */
:root{--green:#356b52;--green-2:#356b52;--green-dark:#28523f;}
/* Alle Texte auf Bildflächen klar lesbar, ohne sichtbare Textkästen. */
.hero .hero-in{position:relative;z-index:3;}
.hero .scrim{display:block!important;background:linear-gradient(90deg,rgba(247,244,238,.58) 0%,rgba(247,244,238,.38) 19%,rgba(247,244,238,.16) 34%,rgba(247,244,238,.03) 47%,rgba(247,244,238,0) 56%)!important;}
.hero h1,.hero p,.hero .eyebrow,.hero .claims a{color:#29302c!important;-webkit-text-fill-color:#29302c!important;text-shadow:0 1px 0 rgba(255,255,255,.96),0 0 5px rgba(255,255,255,.72)!important;}
.hero h1{font-weight:400!important;letter-spacing:.015em!important;}
/* Bildbänder: kein Kasten; stattdessen nur ein lokaler weicher Leseschutz. */
.band .scrim{display:block!important;background:linear-gradient(90deg,rgba(247,244,238,.66) 0%,rgba(247,244,238,.46) 24%,rgba(247,244,238,.16) 43%,rgba(247,244,238,0) 61%)!important;}
.band .cap{background:transparent!important;box-shadow:none!important;padding:0!important;}
.band .cap .eyebrow,.band .cap h3,.band .cap p,.band .cap .lead{color:#29302c!important;-webkit-text-fill-color:#29302c!important;text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 5px rgba(255,255,255,.78)!important;}
/* Karten auf Fotos behalten weiße Schrift, erhalten aber einen sauberen unteren Kontrast. */
.tile .scrim{display:block!important;background:linear-gradient(0deg,rgba(24,29,26,.82) 0%,rgba(24,29,26,.46) 38%,rgba(24,29,26,0) 70%)!important;}
.tile .meta,.tile .meta *{text-shadow:0 1px 3px rgba(0,0,0,.72)!important;}
/* Das Grün aus dem Button wird zur hochwertigen, gedeckten Akzentfarbe. */
.btn.solid,.hero .btn.solid{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;}
.btn.solid:hover,.hero .btn.solid:hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important;}
a,.eyebrow:before,.eyebrow.dark:before{accent-color:var(--green);}
#kontakt a[href^="mailto:"],#kontakt a[href^="tel:"],.contact-info a[href^="mailto:"],.contact-info a[href^="tel:"]{color:var(--green-dark)!important;-webkit-text-fill-color:var(--green-dark)!important;text-decoration-color:rgba(40,82,63,.55)!important;font-weight:500;}
/* Kontakt: großzügige echte 2-Spalten-Darstellung statt schmalem Formular. */
#kontakt{background:#f1ece3!important;padding:76px max(24px,calc((100vw - 1180px)/2))!important;}
#kontakt>.split{max-width:1180px!important;margin:0 auto!important;display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(560px,1.18fr)!important;gap:72px!important;align-items:start!important;}
#kontakt .lead{max-width:440px;}
#kontakt .anfrage{width:100%!important;max-width:none!important;background:rgba(249,246,240,.90)!important;border:1px solid rgba(53,107,82,.24)!important;border-radius:14px!important;padding:34px 38px!important;box-shadow:0 18px 44px rgba(50,58,52,.07)!important;}
#kontakt .anfrage input,#kontakt .anfrage select,#kontakt .anfrage textarea{background:#fffdf9!important;color:#29302c!important;border:1px solid rgba(41,48,44,.18)!important;min-width:0;}
#kontakt .anfrage .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important;}
/* Natürliche, weiche Blattschatten wie in der Referenz – sichtbar, aber elegant. */
.home section:not(.hero):not(.band)::after,.page section:not(.hero):not(.band)::after,.archive section:not(.hero):not(.band)::after{width:440px!important;height:390px!important;left:-105px!important;top:-78px!important;opacity:.105!important;filter:blur(10px)!important;transform:rotate(-22deg)!important;background:radial-gradient(ellipse 72px 19px at 22% 20%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 88px 22px at 40% 30%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 74px 19px at 27% 44%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 92px 23px at 50% 51%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 68px 18px at 35% 66%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 78px 20px at 58% 73%,#405148 0 43%,transparent 55%),linear-gradient(68deg,transparent 47%,rgba(64,81,72,.88) 48.5% 49.5%,transparent 51%)!important;}
/* dezenter zweiter Schatten rechts auf längeren hellen Flächen */
#kontakt:before,.bp-verfahren-wrap:after{content:'';position:absolute;right:-120px;bottom:-90px;width:420px;height:350px;pointer-events:none;opacity:.065;filter:blur(11px);transform:rotate(155deg);background:radial-gradient(ellipse 75px 20px at 28% 24%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 90px 22px at 48% 36%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 72px 19px at 35% 52%,#405148 0 43%,transparent 55%),radial-gradient(ellipse 86px 21px at 57% 64%,#405148 0 43%,transparent 55%),linear-gradient(68deg,transparent 47%,rgba(64,81,72,.8) 48.5% 49.5%,transparent 51%);}
#kontakt{position:relative;overflow:hidden;}#kontakt>*{position:relative;z-index:1;}
@media(max-width:900px){#kontakt>.split{grid-template-columns:1fr!important;gap:38px!important;}#kontakt .anfrage{padding:28px!important;}.hero .scrim{background:linear-gradient(90deg,rgba(247,244,238,.64),rgba(247,244,238,.35) 58%,rgba(247,244,238,.06) 90%,transparent)!important;}}
@media(max-width:600px){#kontakt{padding:54px 22px!important;}#kontakt .anfrage .row2{grid-template-columns:1fr!important;gap:0!important;}.band .scrim{background:linear-gradient(90deg,rgba(247,244,238,.72),rgba(247,244,238,.34) 68%,transparent)!important;}}
/* ================================================================
BituPrint 3.7 – Kontaktkorrektur 17.09.2026
================================================================ */
:root{--green:#5aa981;--green-2:#6fbf96;--green-dark:#244f3d;}
/* Nur Kontaktdaten dunkel und gut lesbar. */
#kontakt .contact-info a[href^="mailto:"],#kontakt .contact-info a[href^="tel:"]{
color:#244f3d!important;-webkit-text-fill-color:#244f3d!important;
text-decoration-color:rgba(36,79,61,.48)!important;font-weight:600!important;
}
/* Aktionsbutton wieder im hellen ursprünglichen BituPrint-Grün. */
#kontakt .anfrage .btn.solid,#kontakt button.btn.solid{
background:#5aa981!important;border-color:#5aa981!important;color:#fff!important;
box-shadow:none!important;
}
#kontakt .anfrage .btn.solid:hover,#kontakt button.btn.solid:hover{
background:#4f9d76!important;border-color:#4f9d76!important;
}
/* Kontaktseite: harmonischer, breiter und nicht gequetscht. */
#kontakt{padding:68px max(34px,calc((100vw - 1280px)/2))!important;}
#kontakt>.split{
max-width:1280px!important;width:100%!important;
grid-template-columns:minmax(330px,.78fr) minmax(620px,1.22fr)!important;
gap:76px!important;
}
#kontakt .anfrage{padding:32px 36px!important;border-radius:10px!important;}
#kontakt .anfrage textarea{min-height:150px!important;}
#kontakt .contact-info{font-size:17px!important;line-height:1.55!important;}
/* Ranken-/Blattschatten klarer sichtbar wie in der Referenz, weiterhin weich. */
.home section:not(.hero):not(.band)::after,.page section:not(.hero):not(.band)::after,.archive section:not(.hero):not(.band)::after{
opacity:.18!important;filter:blur(8px)!important;width:500px!important;height:430px!important;
left:-115px!important;top:-82px!important;
}
#kontakt:before,.bp-verfahren-wrap:after{
opacity:.14!important;filter:blur(8px)!important;width:470px!important;height:400px!important;
}
@media(max-width:1050px){
#kontakt>.split{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)!important;gap:44px!important;}
}
@media(max-width:850px){
#kontakt>.split{grid-template-columns:1fr!important;gap:36px!important;}
#kontakt .anfrage{padding:26px!important;}
}
/* ============================================================
BituPrint 3.8 – Pflanzen-Schatten AUS + Kontaktgrün angeglichen
17.09.2026
============================================================ */
/* Alle künstlichen Pflanzen-/Blatt-/Rankenschatten vollständig entfernen. */
.home section:not(.hero):not(.band)::after,
.page section:not(.hero):not(.band)::after,
.archive section:not(.hero):not(.band)::after,
.bp-verfahren-wrap::before,
.bp-verfahren-wrap::after,
#kontakt::before,
#kontakt::after{
content:none!important;
display:none!important;
background:none!important;
opacity:0!important;
filter:none!important;
}
/* Kontaktlinks exakt im hellen Grün des Buttons „Anfrage senden“. */
#kontakt a[href^="mailto:"],
#kontakt a[href^="tel:"],
#kontakt .contact-info a[href^="mailto:"],
#kontakt .contact-info a[href^="tel:"]{
color:#5aa981!important;
-webkit-text-fill-color:#5aa981!important;
text-decoration-color:#5aa981!important;
font-weight:500!important;
}
#kontakt .anfrage .btn.solid,
#kontakt button.btn.solid{
background:#5aa981!important;
border-color:#5aa981!important;
color:#fff!important;
}
/* ================================================================
BituPrint 4.0 – Lesbarkeit auf Fotos, Kontaktseite, Rhythmus
17.09.2026
Warum ein anderer Ansatz als bisher: Bis 3.8 lag ein HELLER Schleier
auf dem Foto und die Schrift war dunkel. Das funktioniert nur auf
hellen Motiven. Unsere Fotos reichen von frisch geschliffenem, fast
weißem Beton bis zu tiefschwarzem Asphalt – auf den dunklen Motiven
verschwand die Schrift. Ab hier gilt das umgekehrte, robustere
Prinzip: ein kurzer DUNKLER Verlauf, der nach rechts vollständig
ausläuft, und helle Schrift darauf. Das ist auf jedem Motiv lesbar,
verdeckt weniger Bildfläche als der helle Schleier und wirkt
hochwertiger. Alle übrigen Flächen der Seite bleiben hell.
================================================================ */
/* ---------- 1. Kopfbilder ---------- */
.hero .scrim{
display:block!important; opacity:1!important;
background:
linear-gradient(96deg,
rgba(16,20,18,.82) 0%,
rgba(16,20,18,.66) 20%,
rgba(16,20,18,.40) 38%,
rgba(16,20,18,.14) 56%,
rgba(16,20,18,0) 72%),
linear-gradient(0deg,
rgba(16,20,18,.38) 0%,
rgba(16,20,18,.10) 30%,
rgba(16,20,18,0) 58%)!important;
}
.hero h1{
color:#f8f5ef!important; -webkit-text-fill-color:#f8f5ef!important;
font-weight:400!important; letter-spacing:.055em!important;
text-shadow:0 2px 22px rgba(10,14,12,.55)!important;
}
.hero p,.hero .claims a{
color:#e9e4da!important; -webkit-text-fill-color:#e9e4da!important;
text-shadow:0 1px 16px rgba(10,14,12,.58)!important;
}
.hero .eyebrow{
color:#bfdcca!important; -webkit-text-fill-color:#bfdcca!important; opacity:1!important;
text-shadow:0 1px 14px rgba(10,14,12,.6)!important;
}
.hero .eyebrow::before{background:#7cc5a0!important;}
.hero .claims i{color:#7cc5a0!important; text-shadow:none!important;}
.hero .claims a{border-bottom-color:transparent!important;}
.hero .claims a:hover,.hero .claims a:focus{color:#fff!important; border-bottom-color:#7cc5a0!important;}
.hero .btn.ghost{
background:rgba(12,16,14,.26)!important; border:1px solid rgba(255,255,255,.66)!important;
color:#fff!important; -webkit-text-fill-color:#fff!important; backdrop-filter:blur(2px);
}
.hero .btn.ghost:hover{background:rgba(255,255,255,.16)!important; border-color:#fff!important;}
.hero .btn.solid{color:#fff!important;}
/* ---------- 2. Bildbänder ---------- */
.band .scrim{
display:block!important; opacity:1!important;
background:
linear-gradient(96deg,
rgba(16,20,18,.78) 0%,
rgba(16,20,18,.58) 22%,
rgba(16,20,18,.30) 42%,
rgba(16,20,18,.08) 60%,
rgba(16,20,18,0) 76%),
linear-gradient(0deg,
rgba(16,20,18,.34) 0%,
rgba(16,20,18,0) 46%)!important;
}
.band .cap{background:transparent!important; box-shadow:none!important; padding:0!important;}
.band .cap h3,.band .cap p,.band .cap .lead{
color:#f6f3ed!important; -webkit-text-fill-color:#f6f3ed!important;
text-shadow:0 1px 16px rgba(10,14,12,.55)!important;
}
.band .cap .eyebrow{
color:#bfdcca!important; -webkit-text-fill-color:#bfdcca!important;
text-shadow:0 1px 14px rgba(10,14,12,.6)!important;
}
.band .cap .eyebrow::before{background:#7cc5a0!important;}
/* ---------- 3. Referenzkacheln ---------- */
.tile .scrim{
display:block!important; opacity:1!important;
background:linear-gradient(0deg,
rgba(16,20,18,.88) 0%,
rgba(16,20,18,.60) 34%,
rgba(16,20,18,.14) 62%,
rgba(16,20,18,0) 82%)!important;
}
.tile .meta{background:none!important; padding:74px 22px 20px!important;}
.tile .meta h3{color:#fff!important; -webkit-text-fill-color:#fff!important;}
.tile .meta small{color:#8fd2ae!important; -webkit-text-fill-color:#8fd2ae!important;}
.tile .meta span.f{color:rgba(255,255,255,.80)!important; -webkit-text-fill-color:rgba(255,255,255,.80)!important;}
.tile .meta,.tile .meta *{text-shadow:0 1px 10px rgba(10,14,12,.55)!important;}
/* ---------- 4. Aufruf-Fläche mit Foto ---------- */
.cta .scrim{display:block!important; opacity:1!important; background:rgba(16,20,18,.72)!important;}
.cta-in h2,.cta-in p{color:#f6f3ed!important; -webkit-text-fill-color:#f6f3ed!important;}
/* ---------- 5. Kontakt: ruhiger Zweispalter ---------- */
#kontakt{
background:#f1ece3!important;
padding:74px max(28px,calc((100vw - 1240px)/2))!important;
}
#kontakt>.split{
max-width:1240px!important; width:100%!important; margin:0 auto!important;
display:grid!important;
grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;
gap:60px!important; align-items:start!important;
}
#kontakt .lead{max-width:46ch!important;}
/* Kontaktdaten als ruhige, gegliederte Spalte statt loser Absätze */
#kontakt .contact-info{margin-top:30px!important; font-size:16px!important; line-height:1.6!important;}
#kontakt .kd{
border-top:1px solid rgba(48,51,47,.14);
padding:15px 0 14px; display:grid; grid-template-columns:104px 1fr; gap:18px; align-items:baseline;
}
#kontakt .kd:last-of-type{border-bottom:1px solid rgba(48,51,47,.14);}
#kontakt .kd dt{
font-family:var(--disp); font-size:10.5px; font-weight:500; letter-spacing:.16em;
text-transform:uppercase; color:#7a756d; margin:0;
}
#kontakt .kd dd{margin:0; color:#2c302c; font-size:15.5px; line-height:1.55;}
#kontakt .kd dd a{text-decoration:none; border-bottom:1px solid rgba(90,169,129,.45);}
#kontakt .kd dd a:hover{border-bottom-color:#5aa981;}
#kontakt .kd-fuss{margin:18px 0 0; font-size:13.5px; color:#7a756d;}
/* Formularkarte */
#kontakt .anfrage{
width:100%!important; max-width:none!important;
background:#faf7f1!important;
border:1px solid rgba(48,51,47,.13)!important;
border-radius:12px!important;
padding:34px 36px!important;
box-shadow:0 14px 38px rgba(52,58,52,.07)!important;
}
#kontakt .anfrage .row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:18px!important;}
#kontakt .anfrage input,#kontakt .anfrage select,#kontakt .anfrage textarea{
background:#fff!important; color:#2c302c!important;
border:1px solid rgba(48,51,47,.17)!important; border-radius:5px!important; min-width:0;
}
#kontakt .anfrage textarea{min-height:140px!important;}
#kontakt .anfrage input:focus,#kontakt .anfrage select:focus,#kontakt .anfrage textarea:focus{
outline:none!important; border-color:#5aa981!important;
box-shadow:0 0 0 3px rgba(90,169,129,.14)!important;
}
#kontakt .anfrage label{color:#6d675f!important;}
#kontakt .anfrage .btn.solid,#kontakt button.btn.solid{
background:#3f8a68!important; border-color:#3f8a68!important; color:#fff!important;
padding:16px 34px!important; box-shadow:none!important;
}
#kontakt .anfrage .btn.solid:hover,#kontakt button.btn.solid:hover{
background:#337356!important; border-color:#337356!important;
}
/* Steht der Kontaktblock auf der eigenen Seite „Angebot anfragen“,
trägt schon das Kopfbild die Überschrift – dann beginnt die linke
Spalte direkt mit den Kontaktdaten. */
#kontakt.ohne-kopf .contact-info{margin-top:0!important;}
#kontakt.ohne-kopf{padding-top:58px!important;}
/* ---------- 6. Knopf in der Navigation etwas gedeckter ---------- */
nav .quote{border-color:#3f8a68!important; color:#2f332f!important;}
nav .quote:hover{background:#3f8a68!important; border-color:#3f8a68!important; color:#fff!important;}
/* ---------- 7. Rhythmus ---------- */
.band{height:380px!important;}
.home .band{height:320px!important;}
@media(max-width:1000px){
#kontakt>.split{grid-template-columns:1fr!important; gap:40px!important;}
#kontakt .anfrage{padding:28px 26px!important;}
#kontakt .lead{max-width:none!important;}
}
@media(max-width:760px){
.hero .scrim{
background:
linear-gradient(96deg, rgba(16,20,18,.84) 0%, rgba(16,20,18,.62) 42%, rgba(16,20,18,.26) 72%, rgba(16,20,18,.06) 100%),
linear-gradient(0deg, rgba(16,20,18,.42) 0%, rgba(16,20,18,0) 62%)!important;
}
.band .scrim{
background:
linear-gradient(96deg, rgba(16,20,18,.80) 0%, rgba(16,20,18,.54) 46%, rgba(16,20,18,.18) 80%, rgba(16,20,18,0) 100%),
linear-gradient(0deg, rgba(16,20,18,.36) 0%, rgba(16,20,18,0) 55%)!important;
}
#kontakt{padding:54px 22px!important;}
#kontakt .anfrage .row2{grid-template-columns:1fr!important; gap:0!important;}
#kontakt .kd{grid-template-columns:1fr; gap:4px;}
.band{height:320px!important;}
}
/* ================================================================
BituPrint 4.1 – Schleier zurückgenommen
17.09.2026
Der dunkle Verlauf aus 4.0 war zu kräftig: das Foto verschwand
fast. Hier ist er deutlich leichter und kürzer. Die Lesbarkeit
trägt jetzt zu einem größeren Teil der feine Schatten an der
Schrift selbst, nicht mehr die Fläche darunter.
================================================================ */
.hero .scrim{
background:
linear-gradient(96deg,
rgba(14,18,16,.60) 0%,
rgba(14,18,16,.44) 18%,
rgba(14,18,16,.24) 34%,
rgba(14,18,16,.07) 50%,
rgba(14,18,16,0) 64%),
linear-gradient(0deg,
rgba(14,18,16,.22) 0%,
rgba(14,18,16,.04) 26%,
rgba(14,18,16,0) 48%)!important;
}
.hero h1{text-shadow:0 1px 2px rgba(8,12,10,.55),0 2px 24px rgba(8,12,10,.60)!important;}
.hero p,.hero .claims a{text-shadow:0 1px 2px rgba(8,12,10,.58),0 1px 18px rgba(8,12,10,.62)!important;}
.hero .eyebrow{text-shadow:0 1px 2px rgba(8,12,10,.62),0 1px 14px rgba(8,12,10,.66)!important;}
.band .scrim{
background:
linear-gradient(96deg,
rgba(14,18,16,.56) 0%,
rgba(14,18,16,.40) 20%,
rgba(14,18,16,.20) 36%,
rgba(14,18,16,.05) 52%,
rgba(14,18,16,0) 66%),
linear-gradient(0deg,
rgba(14,18,16,.20) 0%,
rgba(14,18,16,0) 40%)!important;
}
.band .cap h3,.band .cap p,.band .cap .lead{
text-shadow:0 1px 2px rgba(8,12,10,.58),0 1px 18px rgba(8,12,10,.62)!important;
}
.band .cap .eyebrow{text-shadow:0 1px 2px rgba(8,12,10,.62),0 1px 14px rgba(8,12,10,.66)!important;}
/* Kacheln: der Verlauf sitzt ohnehin nur unten, hier reicht weniger. */
.tile .scrim{
background:linear-gradient(0deg,
rgba(14,18,16,.78) 0%,
rgba(14,18,16,.48) 32%,
rgba(14,18,16,.10) 60%,
rgba(14,18,16,0) 80%)!important;
}
/* Aufruf-Fläche: Text steht mittig über dem ganzen Bild, deshalb
bleibt hier ein flächiger, aber leichterer Schleier. */
.cta .scrim{background:rgba(14,18,16,.58)!important;}
@media(max-width:760px){
.hero .scrim{
background:
linear-gradient(96deg, rgba(14,18,16,.66) 0%, rgba(14,18,16,.46) 42%, rgba(14,18,16,.18) 74%, rgba(14,18,16,0) 100%),
linear-gradient(0deg, rgba(14,18,16,.26) 0%, rgba(14,18,16,0) 55%)!important;
}
.band .scrim{
background:
linear-gradient(96deg, rgba(14,18,16,.62) 0%, rgba(14,18,16,.40) 46%, rgba(14,18,16,.12) 82%, rgba(14,18,16,0) 100%),
linear-gradient(0deg, rgba(14,18,16,.22) 0%, rgba(14,18,16,0) 50%)!important;
}
}
/* ================================================================
BituPrint 4.2 – Markengrün aus dem Logo
17.09.2026
Die Akzentfarbe ist jetzt exakt der Ton aus der Wortmarke:
#31CDAE. Ausgelesen aus assets/logo.png, 3180 von 3894 grünen
Pixeln tragen genau diesen Wert; der Rest ist Kantenglättung.
Ein Mint-Türkis ist hell. Als Schriftfarbe auf dem cremefarbenen
Hintergrund wäre es nicht mehr sicher lesbar, deshalb gibt es drei
abgestufte Töne desselben Farbwinkels (168°):
#31CDAE Logoton – Flächen, Knöpfe, dekorative Striche
#1A705E dunkel – Schrift und Links auf hellem Grund
#7FE6CE hell – Schrift und Striche auf Fotos
================================================================ */
:root{
--green:#31CDAE;
--green-2:#5EDFC5;
--green-dark:#1A705E;
--green-mid:#279B84;
--green-hell:#7FE6CE;
--green-soft:#0F3A32;
--gruen-tinte:#0C2E27;
}
/* ---------- Knöpfe: Logoton als Fläche, dunkle Schrift darauf ---------- */
.btn.solid,.hero .btn.solid,
#kontakt .anfrage .btn.solid,#kontakt button.btn.solid,
.chip.on,.pager .current,.skip{
background:#31CDAE!important; border-color:#31CDAE!important;
color:#0C2E27!important; -webkit-text-fill-color:#0C2E27!important;
}
.btn.solid:hover,.hero .btn.solid:hover,
#kontakt .anfrage .btn.solid:hover,#kontakt button.btn.solid:hover{
background:#2ABBA0!important; border-color:#2ABBA0!important;
color:#0C2E27!important; -webkit-text-fill-color:#0C2E27!important;
}
nav .quote{border-color:#1A705E!important; color:#2f332f!important; background:#f7f4ee!important;}
nav .quote:hover{background:#31CDAE!important; border-color:#31CDAE!important; color:#0C2E27!important;}
.totop:hover{background:#31CDAE!important; border-color:#31CDAE!important; color:#0C2E27!important;}
.sozial .soz:hover{background:#1A705E!important; border-color:#1A705E!important; color:#fff!important;}
/* ---------- Schrift und Links auf hellem Grund ---------- */
#kontakt a[href^="mailto:"],#kontakt a[href^="tel:"],
#kontakt .contact-info a[href^="mailto:"],#kontakt .contact-info a[href^="tel:"],
.contact-info a[href^="mailto:"],.contact-info a[href^="tel:"]{
color:#1A705E!important; -webkit-text-fill-color:#1A705E!important;
text-decoration-color:rgba(26,112,94,.42)!important; font-weight:500!important;
}
#kontakt .kd dd a{border-bottom-color:rgba(26,112,94,.38)!important;}
#kontakt .kd dd a:hover{border-bottom-color:#1A705E!important;}
.editor-content a,.prose a,.simple-list a:hover,
.back,.tip .k,.tip .more,.lv-nr,.strecke > .ort,.drei figcaption b,
.muster a.m .cap span,.nachbar span,.feat .n,.proc .step .n{
color:#1A705E!important; -webkit-text-fill-color:#1A705E!important;
}
a.tip:hover .more{color:#31CDAE!important;-webkit-text-fill-color:#31CDAE!important;}
.submenu a.sm-lv{color:#1A705E!important;}
.submenu a.sm-lv:hover{background:#eafaf6!important; color:#0F3A32!important;}
/* ---------- Dekorative Striche und Marker ---------- */
.eyebrow::before,.eyebrow.dark::before{background:#2AA88F!important;}
.serv li::before,.cols li::before,.prose ul li::before,
.editor-content ul li::before,.faq summary::before,
.bp-verfahren-kacheln a:not(:last-child)::after,
.bp-verfahren-kacheln span:not(:last-child)::after{
color:#2AA88F!important; -webkit-text-fill-color:#2AA88F!important;
}
.serv li[aria-current]::before,#faq .faq[open] summary::before{color:#1A705E!important;}
.editor-content blockquote,.tip-note{border-left-color:#31CDAE!important;}
.formmsg.ok{border-left-color:#31CDAE!important;}
.lv-sprung:hover{border-color:#31CDAE!important; color:#0F3A32!important; background:#eafaf6!important;}
.lv-copy.ok{background:#31CDAE!important; border-color:#31CDAE!important; color:#0C2E27!important;}
.chip:hover{border-color:#2AA88F!important; color:#1A705E!important;}
.nachbar:hover,a.tip:hover,.muster a.m:hover{border-color:rgba(49,205,174,.55)!important;}
/* ---------- Auf Fotos: der helle Logoton ---------- */
.hero .eyebrow{color:#9FEBD9!important; -webkit-text-fill-color:#9FEBD9!important;}
.hero .eyebrow::before{background:#7FE6CE!important;}
.hero .claims i{color:#7FE6CE!important;}
.hero .claims a:hover,.hero .claims a:focus{border-bottom-color:#7FE6CE!important;}
.band .cap .eyebrow{color:#9FEBD9!important; -webkit-text-fill-color:#9FEBD9!important;}
.band .cap .eyebrow::before{background:#7FE6CE!important;}
.tile .meta small{color:#7FE6CE!important; -webkit-text-fill-color:#7FE6CE!important;}
.hero .btn.solid{color:#0C2E27!important; -webkit-text-fill-color:#0C2E27!important;}
/* ---------- Formularfokus im Markenton ---------- */
#kontakt .anfrage input:focus,#kontakt .anfrage select:focus,#kontakt .anfrage textarea:focus,
.anfrage input:focus,.anfrage select:focus,.anfrage textarea:focus{
border-color:#31CDAE!important;
box-shadow:0 0 0 3px rgba(49,205,174,.22)!important;
}
/* ---------- Navigation: Unterstrich im Markenton ---------- */
nav>a::after,.navtrigger::after{background:#31CDAE!important;}
/* Datenschutz-Link im Formular trägt eine Inline-Farbe aus der Vorlage –
auf hellem Grund muss er den dunklen Markenton bekommen. */
.anfrage label a,#kontakt .anfrage label a{
color:#1A705E!important; -webkit-text-fill-color:#1A705E!important;
text-decoration-color:rgba(26,112,94,.42)!important;
}
/* ---------------------------------------------------------------------
* 4.8 – Bildausschnitt bei ![]()
*
* Der Ausschnitt eines Bildes wird im Redaktionswerkzeug als
* object-position gesetzt. Das wirkt nur, wenn das Bild seinen Rahmen
* fuellt. Die meisten Bilder im Theme tun das bereits ueber ihre eigene
* Regel; diese hier faengt alle uebrigen ab, ohne sonst etwas zu aendern.
* ------------------------------------------------------------------ */
img[style*="object-position"]{ object-fit: cover; }
/* ---------------------------------------------------------------------
* 4.10 – Presseerwähnungen unter einer Referenz
* ------------------------------------------------------------------ */
.presse{ margin:44px 0 0; padding:26px 28px; background:var(--panel,#eee8df);
border-radius:12px; }
.presse .eyebrow{ margin-bottom:14px; }
.presse ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.presse li{ margin:0; }
.presse a{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
padding:13px 16px; background:var(--paper,#f7f4ee); border-radius:8px; text-decoration:none;
color:inherit; transition:transform .2s ease, box-shadow .2s ease; }
.presse a:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,24,22,.08); }
.presse a::after{ content:"↗"; color:var(--green,#31CDAE); flex:none; }
.presse a span{ color:var(--muted,#77776f); font-size:13.5px; white-space:nowrap; }
@media (max-width:640px){
.presse{ padding:20px 18px; }
.presse a{ flex-wrap:wrap; gap:4px; }
.presse a span{ width:100%; }
}
/* =====================================================================
* 4.11 – Darstellung auf dem Handy
*
* Zwei Fehler waren hier zu beheben:
*
* 1) Die Regeln zum Zentrieren des Inhalts verwenden
* padding-left:max(60px, calc((100vw - 1180px)/2 + 60px)).
* Auf einem schmalen Bildschirm wird die Rechnung negativ, max() nimmt
* also die 60px – und weil diese Regel nach der Medienabfrage für
* kleine Bildschirme steht, hat sie deren 24px überschrieben. Auf einem
* 390px breiten Handy gingen so 120px allein für den Rand drauf, fast
* ein Drittel der Breite.
*
* 2) Unterhalb von 820px blieb alles zweispaltig. Auf dem Handy wurde
* eine Referenzkachel damit rund 125px breit – die Überschriften
* brachen mitten im Wort um.
*
* Dieser Block steht bewusst am Ende der Datei, damit er die früheren
* Regeln sicher übersteuert.
* ================================================================== */
@media (max-width:760px){
section,.mats{ padding-left:22px; padding-right:22px; }
.top{ padding-left:18px; padding-right:18px; }
.foot{ padding-left:22px; padding-right:22px; }
.hero-in{ padding-left:22px; padding-right:22px; }
.band .cap{ left:22px; right:22px; }
.tile .meta{ left:16px; right:14px; bottom:14px; }
}
@media (max-width:560px){
/* Eine Kachel pro Zeile – lieber groß und lesbar als zwei winzige. */
.grid, .grid.two{ grid-template-columns:1fr; }
.foot-top{ grid-template-columns:1fr; gap:26px; }
.anfrage .row2{ grid-template-columns:1fr; gap:0; }
/* Bilder dürfen zu zweit stehen, sie tragen keinen Text. */
.gal.g3, .gal.g4{ grid-template-columns:1fr 1fr; gap:10px; }
.muster{ grid-template-columns:1fr 1fr; gap:12px; }
.team{ grid-template-columns:1fr 1fr; }
.stats{ grid-template-columns:1fr 1fr; gap:22px; }
/* Eine Kachel im Hochformat zeigt vom Motiv mehr als ein flacher Streifen. */
.tile{ aspect-ratio:3/2; }
h1{ font-size:clamp(28px,8.6vw,36px); line-height:1.15; }
h2{ font-size:clamp(22px,6.4vw,28px); }
/* Tippflächen: Links im Fußbereich waren 20px hoch, das trifft man nicht. */
.foot li{ margin-bottom:4px; }
.foot li a{ display:inline-block; padding:9px 0; }
.foot .sozial a{ width:44px; height:44px; }
/* Dasselbe bei den Kontaktdaten: Telefonnummern und E-Mail wollen auf
dem Handy angetippt werden. */
.kd dd a{ display:inline-block; padding:7px 0; }
}
/* =====================================================================
* 4.12 – Kopfbereich auf dem Handy
*
* Der Kopfbereich ist ein Flex-Container. Ein Flex-Element schrumpft von
* sich aus nicht unter die Breite seines laengsten unteilbaren Wortes
* (min-width:auto). „Asphaltgestaltung" hat den Block damit auf 467px
* aufgeblaeht – auf einem 390px-Handy wurden Ueberschrift, Claims und
* Text rechts abgeschnitten.
*
* min-width:0 hebt diese Sperre auf, break-word erlaubt dem langen Wort
* notfalls einen Umbruch.
* ================================================================== */
.hero-in{ min-width:0; }
@media (max-width:760px){
.hero-in{ width:100%; min-width:0; box-sizing:border-box; }
/* Die Sperrschrift kostet bei einem 17 Zeichen langen Wort wie
„Asphaltgestaltung" rund ein Sechstel der Zeilenbreite. Auf dem Handy
wird sie deshalb fast ganz zurueckgenommen und die Groesse so
gewaehlt, dass das laengste Wort in eine Zeile passt. break-word
bleibt nur als Notnagel fuer noch laengere Woerter. */
.hero h1{
font-size:clamp(22px,6.2vw,30px);
letter-spacing:.01em;
line-height:1.18;
overflow-wrap:break-word;
margin-bottom:16px;
}
.hero p{ max-width:none; font-size:15.5px; margin-bottom:24px; }
.claims{ font-size:12.5px; letter-spacing:.1em; margin-bottom:22px; }
.claims i{ margin:0 9px; }
/* Die beiden Knoepfe untereinander statt gequetscht nebeneinander. */
.hero .actions{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.hero .actions .btn{ text-align:center; }
/* Dasselbe Flex-Problem betrifft die Bildbaender. */
.band .cap{ min-width:0; }
.band .cap h3{ overflow-wrap:break-word; hyphens:auto; }
}
/* =====================================================================
* 4.14 Reine Textseiten - Impressum, Datenschutz
*
* Das Theme setzt alle Ueberschriften bewusst auf font-weight:400. Auf den
* Layoutseiten wirkt das elegant, weil die Ueberschriften dort sehr gross
* sind. In der schmalen Lesespalte der Rechtstexte sind sie klein - dort
* war dann kaum ein Unterschied zum Fliesstext zu sehen.
*
* Deshalb hier und nur hier: kraeftigere Ueberschriften, mehr Luft davor
* und eine feine Linie vor jedem Hauptabschnitt. Der Rest der Seite bleibt
* unveraendert.
* ------------------------------------------------------------------ */
.editor-content h2{
font-weight:600;
font-size:clamp(20px,2.2vw,26px);
letter-spacing:.02em;
line-height:1.25;
margin:54px 0 14px;
padding-top:24px;
border-top:1px solid var(--line-d);
}
.editor-content > h2:first-child{
margin-top:0;
padding-top:0;
border-top:0;
}
.editor-content h3{
font-weight:600;
font-size:18.5px;
letter-spacing:.01em;
margin:32px 0 8px;
}
.editor-content h2 + h3{ margin-top:20px; }
.editor-content p{ line-height:1.75; }
.editor-content p + p{ margin-top:12px; }
@media (max-width:760px){
.editor-content h2{ font-size:19.5px; margin-top:42px; padding-top:20px; }
.editor-content h3{ font-size:17.5px; margin-top:28px; }
}
/* =====================================================================
* 4.18 Aufrufblock ohne Hintergrundbild
*
* Weiter oben steht ".cta-in h2,.cta-in p{color:#f6f3ed!important}" - richtig,
* solange ein Foto hinter dem Block liegt. Fehlt das Foto, steht helle
* Schrift auf hellem Grund und ist nicht mehr lesbar.
*
* Zwei Wege, damit es in beiden Faellen greift: die Klasse .no-image setzt
* der Shortcode; die :has()-Regel faengt handgeschriebene Bloecke ab, bei
* denen das .bg-Element kein style-Attribut und damit kein Bild hat.
* ------------------------------------------------------------------ */
.cta.no-image,
.cta:not(:has(> .bg[style])){
min-height:330px;
background:#eee8de !important;
border-top:1px solid rgba(44,55,49,.10);
}
/* Zeile 1167 setzt den Schleier mit !important auf sichtbar - hier muss
deshalb ebenfalls !important stehen, sonst bleibt der graue Schleier. */
.cta.no-image .scrim,
.cta:not(:has(> .bg[style])) .scrim{ display:none !important; opacity:0 !important; }
.cta.no-image .bg,
.cta:not(:has(> .bg[style])) .bg{ display:none !important; }
.cta.no-image .cta-in h2,
.cta:not(:has(> .bg[style])) .cta-in h2{
color:#2d332f !important;
-webkit-text-fill-color:#2d332f !important;
text-shadow:none !important;
}
.cta.no-image .cta-in p,
.cta:not(:has(> .bg[style])) .cta-in p{
color:#5a625d !important;
-webkit-text-fill-color:#5a625d !important;
text-shadow:none !important;
}
.cta.no-image .btn.solid,
.cta:not(:has(> .bg[style])) .btn.solid{ background:var(--green-2); color:#173226; }
/* Grinding-Seite: etwas breitere Lesespalte fuer die laengeren Textteile. */
.page-asphalt-grinding .feat-head{ max-width:900px; }
.page-asphalt-grinding .editor-content p{ max-width:860px; }
.page-asphalt-grinding .seo-intro{ max-width:900px; margin:0 auto; }
/* Galerien immer in der Reihenfolge, in der die Bilder gepflegt wurden. */
.gal{ grid-auto-flow:row; }
.gal figure{ order:initial; }
/* ----------------------------------------------------------------------
Nebenbefund: die Trennlinien der Fragenliste standen noch auf Weiss
(rgba(255,255,255,.07)) - ein Rest aus dem frueheren dunklen Farbschema.
Auf dem hellen Hintergrund waren sie praktisch unsichtbar, weshalb die
Liste als ein einziger Textblock wirkte. Jetzt dunkel und dezent.
-------------------------------------------------------------------- */
#faq .faq{ border-top-color:rgba(48,51,47,.10); }
#faq .faqs .faq:last-child{ border-bottom-color:rgba(48,51,47,.10); }
/* ======================================================================
4.20 - Fragenliste zweispaltig
----------------------------------------------------------------------
Bei vierzehn Fragen wird eine einspaltige Liste sehr lang. Ab sechs
Eintraegen legt bp_faq_block() die Fragen deshalb in zwei Spalten
(), die hier ab 1000px nebeneinander stehen.
Warum zwei echte Spalten und kein Raster ueber alle Eintraege: im
Raster bestimmt der hoechste Eintrag die Zeilenhoehe, ein aufgeklapptes
reisst also ein Loch in die Nachbarspalte. Und ein
CSS-Mehrspaltensatz (columns) laesst beim Aufklappen in die
andere Spalte springen. Zwei Spalten klappen unabhaengig auf.
Die vorhandene Regel .faqs .faq:last-child setzt die Abschlusslinie
automatisch unter den letzten Eintrag jeder Spalte - das passt hier
und bleibt deshalb unveraendert.
Unter 1000px werden die Spalten mit display:contents aufgeloest. Die
Eintraege stehen dann wieder als eine Liste in der gepflegten
Reihenfolge untereinander; nur die Linie am Ende der ersten Spalte
muss dabei weg, sonst laege sie mitten in der Liste.
================================================================== */
.faqs-2{ max-width:1120px; }
#faq .faqs-2{ max-width:1120px; }
@media (min-width:1000px){
.faqs-2{ display:grid; grid-template-columns:1fr 1fr; column-gap:52px; align-items:start; }
/* In der schmaleren Spalte darf der Antworttext die Breite nutzen. */
.faqs-2 .faq p,
#faq .faqs-2 .faq p{ max-width:none; }
}
@media (max-width:999px){
/* Spalten aufloesen: die Eintraege verhalten sich wie direkte Kinder. */
.faqs-2 .faq-spalte{ display:contents; }
.faqs-2 .faq-spalte:first-child .faq:last-child,
#faq .faqs-2 .faq-spalte:first-child .faq:last-child{ border-bottom:0; }
}
/* ======================================================================
4.21 - Zwei Reste aus dem frueheren dunklen Farbschema
----------------------------------------------------------------------
1. Der Zahlenblock stand noch auf color:#fff (Zeile 272). Auf dem
hellen Hintergrund waren die Zahlen praktisch unsichtbar.
2. Die Aufruf-Flaeche ohne Foto: die Ueberschrift war ueber .no-image
schon dunkel, der Absatz darunter aber nicht - der liegt in dem
handgeschriebenen Block offenbar nicht in .cta-in, sondern daneben,
und wurde von der Regel deshalb nicht erfasst. Statt weiter zu
raten, welche Struktur der Block hat, faerbt die Regel jetzt alles
innerhalb der Flaeche ein und nimmt nur die Schaltflaeche aus.
================================================================== */
.stats .s .big{ color:var(--ink); }
.cta.no-image,
.cta.no-image *:not(.btn):not(.btn *){
color:#2d332f !important;
-webkit-text-fill-color:#2d332f !important;
text-shadow:none !important;
}
/* Der Fliesstext eine Spur leichter als die Ueberschrift. */
.cta.no-image p,
.cta.no-image p *{
color:#5a625d !important;
-webkit-text-fill-color:#5a625d !important;
}