:root{
  --black:#050607;
  --dark:#0b0d10;
  --panel:#101317;
  --light:#f4f3ef;
  --light-2:#ffffff;
  --ink:#101317;
  --ink-muted:rgba(16,19,23,.72);
  --white:#fff;
  --muted:rgba(255,255,255,.68);
  --soft:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --cyan:#25b6bc;
  --cyan-soft:rgba(37,182,188,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Manrope",sans-serif;background:var(--black);color:var(--white);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:9999;background-image:radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px),radial-gradient(circle at 80% 70%, #fff 0 1px, transparent 1px);background-size:38px 38px}
.ambient{position:fixed;width:520px;height:520px;border-radius:50%;background:var(--cyan);filter:blur(170px);opacity:.12;z-index:-3}
.ambient-one{top:-180px;left:-160px}.ambient-two{bottom:15%;right:-220px;opacity:.07}

.site-header{position:fixed;top:0;left:0;width:100%;height:86px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;gap:32px;background:rgba(5,6,7,.58);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.08);z-index:1000;transition:.3s}
.brand img{width:220px;height:auto;max-width:none}.main-nav{display:flex;align-items:center;gap:30px}
.main-nav a{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);transition:.25s}
.main-nav a:hover{color:var(--cyan)}
.nav-button{padding:13px 22px;border:1px solid var(--cyan);color:var(--cyan);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:.3s}
.nav-button:hover{background:var(--cyan);color:#031012}
.menu-toggle{display:none;width:38px;height:38px;background:none;border:0;cursor:pointer}.menu-toggle span{display:block;width:28px;height:2px;background:white;margin:7px 0;transition:.3s}.menu-toggle.active span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.active span:last-child{transform:translateY(-5px) rotate(-45deg)}

.section{padding:120px 8vw}.eyebrow{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
h1{font-size:clamp(54px,9vw,132px);line-height:.92;letter-spacing:-.07em;max-width:1050px}
h2{font-size:clamp(34px,5.2vw,74px);line-height:1;letter-spacing:-.055em;max-width:920px}
h3{font-size:28px;letter-spacing:-.035em}p{color:var(--muted);line-height:1.75}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 25px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:.3s}
.btn-primary{background:var(--cyan);color:#041114;box-shadow:0 22px 70px rgba(37,182,188,.22)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 28px 90px rgba(37,182,188,.33)}
.btn-secondary{border:1px solid rgba(255,255,255,.22);color:white;background:rgba(255,255,255,.02)}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.center{text-align:center;margin-top:42px}

.hero{min-height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;padding:150px 8vw 90px}
.sub-hero{min-height:82vh}.hero-image{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02)}
.hero-home-image{background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.55),rgba(0,0,0,.18)),url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2200&q=85")}
.hero-dark{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),var(--black))}
.hero-mark{position:absolute;right:5vw;bottom:4vh;width:min(38vw,540px);opacity:.045;pointer-events:none}.hero-content{position:relative;z-index:2;max-width:920px}
.hero-text{font-size:20px;max-width:700px;margin-top:30px}.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}

.page-hero{padding:170px 8vw 70px;min-height:55vh;display:flex;align-items:end;position:relative}
.intro-section{background:var(--light);color:var(--ink)}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.intro-text{border-left:1px solid rgba(16,19,23,.14);padding-left:38px}.intro-text p{font-size:20px;color:var(--ink-muted)}

.services-section{padding-top:60px;background:var(--light);color:var(--ink)}.section-title{margin-bottom:54px}
.service-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.service-block{min-height:570px;position:relative;overflow:hidden;background:var(--panel)}
.service-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s;opacity:.72}.service-block:hover .service-bg{transform:scale(1.06)}
.service-wood{background-image:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.35)),url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=85")}
.service-roof{background-image:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.35)),url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1800&q=85")}
.service-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.86))}
.service-content{position:absolute;left:34px;right:34px;bottom:34px;z-index:2}.service-content span,.value-card span{color:var(--cyan);font-size:13px;font-weight:800;letter-spacing:.16em}.service-content h3{margin:14px 0}.service-content p{max-width:560px}

.values-section{background:linear-gradient(180deg,#11161a,#07090b);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.09)}.value-grid.six{grid-template-columns:repeat(3,1fr)}
.value-card{background:#ffffff;color:var(--ink);padding:44px;min-height:280px}.value-card h3{margin:18px 0 16px}.value-card p{color:var(--ink-muted)}.values-section .value-card{background:#0b0d10;color:white}.values-section .value-card p{color:var(--muted)}

.project-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-tile{overflow:hidden;background:#111;min-height:390px;position:relative}.project-img{height:340px;background-size:cover;background-position:center;transition:.75s;opacity:.82}.project-tile:hover .project-img{transform:scale(1.07);opacity:1}.project-tile p{padding:18px;color:white;font-weight:800;letter-spacing:.04em}
.project-one{background-image:url("https://images.unsplash.com/photo-1600566753151-384129cf4e3e?auto=format&fit=crop&w=1200&q=85")}.project-two{background-image:url("https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=1200&q=85")}.project-three{background-image:url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1200&q=85")}.project-four{background-image:url("https://images.unsplash.com/photo-1517581177682-a085bb7ffb38?auto=format&fit=crop&w=1200&q=85")}.project-five{background-image:url("https://images.unsplash.com/photo-1501183638710-841dd1904471?auto=format&fit=crop&w=1200&q=85")}.project-six{background-image:url("https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=1200&q=85")}
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}.filter-btn{padding:13px 20px;background:transparent;border:1px solid var(--line);color:white;cursor:pointer;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.filter-btn.active,.filter-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery-card{background:#090b0d;border:1px solid var(--line);overflow:hidden}.gallery-card h3,.gallery-card p{padding-left:22px;padding-right:22px}.gallery-card h3{padding-top:22px}.gallery-card p{padding-bottom:24px}.gallery-img{height:290px;background-size:cover;background-position:center}

.cta-section{min-height:560px;position:relative;display:flex;align-items:center;justify-content:center;padding:120px 8vw;overflow:hidden;background:linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.82)),url("https://images.unsplash.com/photo-1517581177682-a085bb7ffb38?auto=format&fit=crop&w=2200&q=85");background-size:cover;background-position:center}.cta-mark{position:absolute;right:6vw;bottom:-80px;width:min(42vw,580px);opacity:.11}.cta-content{position:relative;z-index:2;max-width:820px;text-align:center}.cta-content p{margin:26px auto 34px;max-width:620px;font-size:19px}

.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.contact-card,.contact-info{background:#090b0d;border:1px solid var(--line);padding:42px}.contact-form{display:grid;gap:14px;margin-top:24px}.contact-form input,.contact-form textarea{width:100%;padding:16px;background:#050607;border:1px solid var(--line);color:white;font:inherit}.contact-form textarea{min-height:160px;resize:vertical}.map-placeholder{margin-top:30px;min-height:240px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);background:rgba(255,255,255,.03)}
.legal{max-width:900px}.legal h2{font-size:32px;margin:32px 0 14px}.legal p{margin-bottom:18px}.legal a{color:var(--cyan)}

.site-footer{padding:52px 8vw;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;border-top:1px solid rgba(255,255,255,.1);background:#030405}.site-footer img{width:170px;margin-bottom:20px}.footer-contact,.footer-links{display:flex;flex-direction:column;gap:12px}.site-footer a{color:var(--muted);transition:.25s}.site-footer a:hover{color:var(--cyan)}
.float-contact{position:fixed;right:22px;width:52px;height:52px;border:1px solid rgba(37,182,188,.7);background:rgba(5,6,7,.7);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;color:var(--cyan);z-index:1100;transition:.3s}.float-contact:hover{background:var(--cyan);color:#031012}.float-phone{bottom:86px}.float-mail{bottom:24px}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1050px){
  .main-nav,.nav-button{display:none}.menu-toggle{display:block}.main-nav.active{position:fixed;top:86px;left:0;width:100%;padding:32px 8vw;display:flex;flex-direction:column;align-items:flex-start;gap:22px;background:rgba(5,6,7,.96);border-bottom:1px solid var(--line)}
  .intro-grid,.service-split,.value-grid,.value-grid.six,.project-row,.site-footer,.gallery-grid,.contact-grid{grid-template-columns:1fr}.intro-text{border-left:0;padding-left:0}
}
@media(max-width:640px){
  .site-header{height:78px;padding:0 22px}.brand img{width:126px}.hero{padding:130px 22px 70px}h1{font-size:56px}.section{padding:82px 22px}.page-hero{padding:140px 22px 60px}.service-block{min-height:480px}.value-card{padding:30px}.project-tile{min-height:330px}.project-img{height:280px}.float-contact{width:48px;height:48px;right:16px}
}

/* =========================================================
   LIGHT PREMIUM FIX — saubere Schriftfarben & Kontraste
   ========================================================= */

:root{
  --light:#f4f2ed;
  --light-2:#ffffff;
  --ink:#111417;
  --ink-soft:rgba(17,20,23,.72);
  --ink-faint:rgba(17,20,23,.52);
  --light-line:rgba(17,20,23,.12);
}

/* helle Inhaltsbereiche */
.intro-section,
.services-section,
.projects-preview,
body:not(.dark-page) .page-hero + .section{
  background:var(--light);
  color:var(--ink);
}

.projects-preview{
  background:var(--light-2);
}

/* Überschriften in hellen Bereichen */
.intro-section h1,
.intro-section h2,
.intro-section h3,
.services-section h1,
.services-section h2,
.services-section h3,
.projects-preview h1,
.projects-preview h2,
.projects-preview h3,
body:not(.dark-page) .page-hero + .section h1,
body:not(.dark-page) .page-hero + .section h2,
body:not(.dark-page) .page-hero + .section h3{
  color:var(--ink);
}

/* Fließtext in hellen Bereichen */
.intro-section p,
.services-section p,
.projects-preview p,
body:not(.dark-page) .page-hero + .section p{
  color:var(--ink-soft);
}

/* Eyebrows bleiben türkis */
.intro-section .eyebrow,
.services-section .eyebrow,
.projects-preview .eyebrow,
body:not(.dark-page) .page-hero + .section .eyebrow{
  color:var(--cyan);
}

/* Intro Linien */
.intro-text{
  border-left-color:var(--light-line);
}

/* Service-Karten bleiben Bild/dunkel, Text darin weiß */
.services-section .service-block{
  color:white;
  box-shadow:0 28px 90px rgba(0,0,0,.18);
}

.services-section .service-content h3,
.services-section .service-content p{
  color:white;
}

.services-section .service-content p{
  color:rgba(255,255,255,.78);
}

/* Werte-Karten außerhalb dunkler Sektionen hell */
.value-card{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--light-line);
}

.value-card h3{
  color:var(--ink);
}

.value-card p{
  color:var(--ink-soft);
}

/* Werte-Sektion bleibt bewusst dunkel */
.values-section{
  background:linear-gradient(180deg,#11161a,#07090b);
  color:white;
}

.values-section h2,
.values-section h3{
  color:white;
}

.values-section p{
  color:var(--muted);
}

.values-section .value-card{
  background:#0b0d10;
  color:white;
  border:0;
}

.values-section .value-card h3{
  color:white;
}

.values-section .value-card p{
  color:var(--muted);
}

/* Projektvorschau hell und lesbar */
.projects-preview .project-tile{
  background:#f4f2ed;
  box-shadow:0 24px 70px rgba(0,0,0,.12);
}

.projects-preview .project-tile p{
  color:var(--ink);
}

/* Galerie-Seite */
.gallery-card{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--light-line);
  box-shadow:0 22px 70px rgba(0,0,0,.08);
}

.gallery-card h3{
  color:var(--ink);
}

.gallery-card p{
  color:var(--ink-soft);
}

.filter-btn{
  color:var(--ink);
  border-color:var(--light-line);
  background:#fff;
}

.filter-btn.active,
.filter-btn:hover{
  color:#041114;
  background:var(--cyan);
  border-color:var(--cyan);
}

/* Kontaktseite */
.contact-section,
.contact-section p,
.contact-section h2,
.contact-section h3{
  color:var(--ink);
}

.contact-section{
  background:var(--light);
}

.contact-card,
.contact-info{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--light-line);
  box-shadow:0 24px 80px rgba(0,0,0,.1);
}

.contact-card p,
.contact-info p{
  color:var(--ink-soft);
}

.contact-info a{
  color:var(--ink);
}

.contact-info a:hover{
  color:var(--cyan);
}

.contact-form input,
.contact-form textarea{
  background:#f6f5f1;
  color:var(--ink);
  border:1px solid rgba(17,20,23,.16);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--ink-faint);
}

.map-placeholder{
  background:#f6f5f1;
  color:var(--ink-soft);
  border-color:var(--light-line);
}

/* Rechtliche Seiten */
.legal{
  background:var(--light);
  color:var(--ink);
}

.legal h1,
.legal h2,
.legal h3{
  color:var(--ink);
}

.legal p{
  color:var(--ink-soft);
}

.legal a{
  color:#14898f;
}

/* Buttons auf hellen Flächen */
.intro-section .btn-secondary,
.services-section .btn-secondary,
.projects-preview .btn-secondary,
body:not(.dark-page) .page-hero + .section .btn-secondary{
  color:var(--ink);
  border-color:rgba(17,20,23,.18);
}

.intro-section .btn-secondary:hover,
.services-section .btn-secondary:hover,
.projects-preview .btn-secondary:hover,
body:not(.dark-page) .page-hero + .section .btn-secondary:hover{
  color:#041114;
  background:var(--cyan);
  border-color:var(--cyan);
}

/* Page-Hero bleibt dunkel genug */
.page-hero{
  background:
    linear-gradient(180deg,rgba(5,6,7,.78),rgba(5,6,7,.98)),
    radial-gradient(circle at 80% 20%,rgba(37,182,188,.18),transparent 35%);
  color:white;
}

.page-hero h1,
.page-hero h2,
.page-hero p{
  color:white;
}

.page-hero .hero-text{
  color:rgba(255,255,255,.72);
}

/* Footer bleibt dunkel */
.site-footer,
.site-footer p{
  color:var(--muted);
}

/* Mobile Korrekturen */
@media(max-width:1050px){
  .intro-text{
    border-left:0;
  }
}


/* =========================================================
   PREMIUM EDITORIAL FINAL — ruhiger, hochwertiger, integriert
   ========================================================= */

:root{
  --bg:#050607;
  --paper:#f4f2ed;
  --paper-2:#ffffff;
  --text:#101317;
  --text-soft:rgba(16,19,23,.68);
  --dark-soft:rgba(255,255,255,.68);
  --brand:#25b6bc;
  --border-dark:rgba(255,255,255,.12);
  --border-light:rgba(16,19,23,.11);
  --shadow-soft:0 28px 80px rgba(0,0,0,.10);
  --shadow-dark:0 40px 140px rgba(0,0,0,.34);
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:white;
  font-family:"Manrope",sans-serif;
  letter-spacing:-.01em;
}

.noise{
  opacity:.022;
}

/* Header: weniger Spielerei, mehr Luxus */
.site-header{
  width:calc(100% - 56px);
  left:28px;
  top:22px;
  height:72px;
  padding:0 30px;
  border-radius:999px;
  background:rgba(5,6,7,.58) !important;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 18px 70px rgba(0,0,0,.25);
}

.brand img{
  width:144px;
}

.main-nav{
  gap:26px;
}

.main-nav a{
  font-size:12px;
  letter-spacing:.11em;
  opacity:.86;
}

.nav-button{
  border-radius:999px;
  padding:12px 19px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(37,182,188,.7);
}

/* Hero: ein klarer Premium-Auftritt statt überladen */
.hero{
  min-height:100vh;
  padding:160px 8vw 95px;
}

.hero-home-image{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.60) 42%,rgba(0,0,0,.18) 100%),
    url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2400&q=86");
}

.hero-content{
  max-width:860px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

.hero-content::after{
  display:none;
}

.hero h1{
  font-size:clamp(64px,9.8vw,148px);
  line-height:.88;
  letter-spacing:-.085em;
  max-width:980px;
}

.hero-text{
  max-width:640px;
  font-size:20px;
  line-height:1.65;
  color:rgba(255,255,255,.74);
}

.hero-actions{
  margin-top:40px;
}

/* dezenter Glas-CTA nur bei Buttons */
.btn{
  border-radius:999px;
  min-height:54px;
  padding:0 26px;
}

.btn-primary{
  background:var(--brand);
  color:#041114;
  box-shadow:0 22px 70px rgba(37,182,188,.24);
}

.btn-secondary{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
}

/* Logo-Marke subtiler */
.hero-mark{
  width:min(34vw,500px);
  opacity:.052;
  filter:none;
}

/* Typografie */
h2{
  font-size:clamp(38px,5.4vw,82px);
  line-height:.98;
  letter-spacing:-.072em;
}

h3{
  letter-spacing:-.045em;
}

.eyebrow{
  letter-spacing:.19em;
}

/* Helle Bereiche: editorial, ruhig */
.intro-section,
.services-section,
.projects-preview,
body:not(.dark-page) .page-hero + .section{
  background:var(--paper);
  color:var(--text);
}

.projects-preview{
  background:var(--paper-2);
}

.intro-section h2,
.services-section h2,
.projects-preview h2,
body:not(.dark-page) .page-hero + .section h2,
body:not(.dark-page) .page-hero + .section h3{
  color:var(--text);
}

.intro-section p,
.services-section p,
.projects-preview p,
body:not(.dark-page) .page-hero + .section p{
  color:var(--text-soft);
}

.intro-grid{
  gap:110px;
}

.intro-text{
  border-left:1px solid var(--border-light);
  padding-left:44px;
}

.intro-text p{
  font-size:22px;
  line-height:1.75;
}

/* Leistungen: große Premium-Bildflächen, Glas nur als Textlayer */
.service-split{
  gap:26px;
}

.service-block{
  min-height:640px;
  border-radius:0;
  box-shadow:var(--shadow-soft);
  background:#111;
}

.service-bg{
  opacity:.82;
}

.service-block:hover .service-bg{
  transform:scale(1.035);
}

.service-overlay{
  background:
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.78)),
    linear-gradient(90deg,rgba(0,0,0,.36),transparent);
}

.service-content{
  left:32px;
  right:32px;
  bottom:32px;
  padding:30px;
  border-radius:28px;
  background:rgba(6,8,10,.38);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 30px 90px rgba(0,0,0,.26);
}

.service-content h3,
.service-content p{
  color:white !important;
}

.service-content p{
  color:rgba(255,255,255,.76) !important;
}

/* Werte: dunkler Luxusblock mit präzisem Raster */
.values-section{
  background:#07090b;
  color:white;
  padding-top:130px;
  padding-bottom:130px;
}

.values-section .section-title h2{
  color:white;
}

.value-grid{
  background:transparent;
  gap:18px;
}

.value-card{
  min-height:310px;
  padding:42px;
  background:#ffffff;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-soft);
  color:var(--text);
}

.value-card h3{
  color:var(--text);
}

.value-card p{
  color:var(--text-soft);
}

.values-section .value-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  color:white;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}

.values-section .value-card h3{
  color:white;
}

.values-section .value-card p{
  color:var(--dark-soft);
}

/* Projekte: weniger Kachel-Look, mehr Portfolio */
.project-row{
  gap:24px;
}

.project-tile{
  background:transparent;
  box-shadow:none;
  min-height:auto;
}

.project-img{
  height:420px;
  border-radius:0;
  opacity:.94;
  box-shadow:var(--shadow-soft);
}

.project-tile p{
  padding:18px 2px 0;
  color:var(--text) !important;
  font-size:15px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Galerie */
.gallery-grid{
  gap:26px;
}

.gallery-card{
  background:#fff;
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-soft);
}

.gallery-img{
  height:330px;
}

.gallery-card h3{
  color:var(--text);
}

.gallery-card p{
  color:var(--text-soft);
}

.filter-btn{
  border-radius:999px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border-light);
}

.filter-btn.active,
.filter-btn:hover{
  background:var(--brand);
  color:#041114;
  border-color:var(--brand);
}

/* CTA: ein starker Abschluss */
.cta-section{
  min-height:620px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.72)),
    url("https://images.unsplash.com/photo-1517581177682-a085bb7ffb38?auto=format&fit=crop&w=2400&q=86");
}

.cta-content{
  padding:48px;
  border-radius:34px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:var(--shadow-dark);
}

/* Page hero */
.page-hero{
  min-height:58vh;
  padding-top:170px;
  background:
    linear-gradient(180deg,rgba(5,6,7,.72),rgba(5,6,7,.98)),
    radial-gradient(circle at 80% 20%,rgba(37,182,188,.16),transparent 36%);
}

.page-hero .section-title{
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

/* Kontakt/Formular: clean und hochwertig */
.contact-card,
.contact-info{
  border-radius:0;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.contact-form input,
.contact-form textarea{
  border-radius:0;
  background:#f7f6f2;
}

/* Footer */
.site-footer{
  background:#050607;
}

/* Animationen: hochwertig, nicht wild */
.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:none;
  transition:opacity .75s ease, transform .75s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* Hover: subtil, kein wackeliges 3D */
.service-block,
.value-card,
.project-tile,
.gallery-card,
.contact-card,
.contact-info{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.value-card:hover,
.gallery-card:hover,
.contact-card:hover,
.contact-info:hover{
  transform:translateY(-6px);
  border-color:rgba(37,182,188,.32);
}

.service-block:hover,
.project-tile:hover{
  transform:translateY(-4px);
}

/* Entferne übertriebene cursor/light falls alte JS-Version es erzeugt */
.cursor-light{
  display:none !important;
}

/* Progress dezenter */
.scroll-progress{
  height:2px;
  background:var(--brand);
  box-shadow:none;
}

/* Mobile */
@media(max-width:1050px){
  .site-header{
    width:calc(100% - 28px);
    left:14px;
    top:14px;
  }

  .main-nav.active{
    top:92px;
    border-radius:24px;
    width:calc(100% - 28px);
    left:14px;
  }

  .intro-grid{
    gap:40px;
  }

  .intro-text{
    border-left:0;
    padding-left:0;
  }
}

@media(max-width:640px){
  .site-header{
    height:70px;
    border-radius:22px;
    padding:0 18px;
  }

  .hero{
    padding:140px 22px 70px;
  }

  .hero h1{
    font-size:58px;
  }

  .service-block{
    min-height:520px;
  }

  .service-content{
    left:18px;
    right:18px;
    bottom:18px;
    padding:24px;
  }

  .cta-content{
    padding:30px;
  }
}


/* =========================================================
   FINAL: ECHTE MTS-BILDER + HOCHWERTIGE INSZENIERUNG
   ========================================================= */

/* echte Bilder statt Stockfotos */
.hero-home-image{
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.52) 42%,rgba(0,0,0,.16) 100%),
    url("../img/projects/hero-saege.jpeg") center/cover no-repeat !important;
}

.service-wood{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25)),
    url("../img/projects/carport-fertig.jpeg") !important;
}

.service-roof{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25)),
    url("../img/projects/blechdach.jpeg") !important;
}

.project-one{
  background-image:url("../img/projects/carport-innen.jpeg") !important;
}

.project-two{
  background-image:url("../img/projects/fahrradunterstand.jpeg") !important;
}

.project-three{
  background-image:url("../img/projects/blechdach.jpeg") !important;
}

.project-four{
  background-image:url("../img/projects/sparrenkopf.jpeg") !important;
}

.project-five{
  background-image:url("../img/projects/sturmschaden.jpeg") !important;
}

.project-six{
  background-image:url("../img/projects/spezialwerkzeug.jpeg") !important;
}

.cta-section{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.72)),
    url("../img/projects/holz-detail.jpeg") center/cover no-repeat !important;
}

/* Hero etwas hochwertiger und weniger schwer */
.hero{
  min-height:100vh;
}

.hero h1{
  max-width:980px;
}

.hero-text{
  max-width:650px;
}

/* Helle Bereiche noch sauberer */
.intro-section,
.services-section,
.projects-preview,
body:not(.dark-page) .page-hero + .section{
  background:#f5f3ee !important;
  color:#101317 !important;
}

/* Bildkacheln editorial */
.service-block{
  min-height:680px;
  background:#111;
}

.service-content{
  max-width:580px;
}

/* Projektbereich mehr Galerie/Architektur */
.project-row{
  align-items:start;
}

.project-tile:nth-child(2){
  margin-top:70px;
}

.project-tile:nth-child(3){
  margin-top:25px;
}

.project-img{
  height:460px;
}

.project-tile:nth-child(2) .project-img{
  height:540px;
}

/* Galerie schöner */
.gallery-grid{
  grid-template-columns:1.15fr .85fr 1fr;
}

.gallery-card:nth-child(2),
.gallery-card:nth-child(5){
  margin-top:70px;
}

.gallery-img{
  height:360px;
}

.gallery-card:nth-child(1) .gallery-img,
.gallery-card:nth-child(4) .gallery-img{
  height:460px;
}

/* Detail-/Story-Sektionen */
.image-story{
  background:#f5f3ee;
  color:#101317;
  padding:120px 8vw;
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

.story-image{
  min-height:520px;
  background-size:cover;
  background-position:center;
}

.story-copy{
  padding:60px;
}

.story-copy h2{
  color:#101317;
  margin-bottom:22px;
}

.story-copy p{
  color:rgba(16,19,23,.68);
  font-size:19px;
}

.story-saege{background-image:url("../img/projects/saege-action.jpeg")}
.story-werkzeug{background-image:url("../img/projects/spezialwerkzeug.jpeg")}
.story-schaden{background-image:url("../img/projects/wasserschaden-traufe.jpeg")}
.story-transport{background-image:url("../img/projects/holztransport.jpeg")}

/* Kontaktbild */
.contact-section{
  background:#f5f3ee !important;
}

/* Subhero Bilder */
body:has(.sub-hero) .service-wood,
body:has(.sub-hero) .service-roof{
  background-size:cover;
}

/* Mobile */
@media(max-width:1050px){
  .gallery-grid,
  .story-grid{
    grid-template-columns:1fr;
  }

  .project-tile:nth-child(2),
  .project-tile:nth-child(3),
  .gallery-card:nth-child(2),
  .gallery-card:nth-child(5){
    margin-top:0;
  }

  .story-copy{
    padding:28px 0;
  }
}

@media(max-width:640px){
  .service-block{
    min-height:520px;
  }

  .project-img,
  .project-tile:nth-child(2) .project-img,
  .gallery-img,
  .gallery-card:nth-child(1) .gallery-img,
  .gallery-card:nth-child(4) .gallery-img{
    height:310px;
  }

  .story-image{
    min-height:340px;
  }
}



/* =========================================================
   FINAL UPGRADE 2: Header, Bildmarken, Projektgruppen
   ========================================================= */

/* Header deutlich ruhiger und professioneller */
.site-header{
  height:64px !important;
  top:18px !important;
  width:calc(100% - 64px) !important;
  left:32px !important;
  padding:0 22px !important;
  border-radius:999px !important;
}

.brand{
  display:flex;
  align-items:center;
  height:100%;
  min-width:126px;
}

.brand img{
  width:auto !important;
  height:34px !important;
  max-width:128px !important;
  object-fit:contain;
}

.main-nav{
  gap:22px !important;
}

.main-nav a{
  font-size:11px !important;
  letter-spacing:.105em !important;
}

.nav-button{
  min-height:40px !important;
  padding:0 17px !important;
  font-size:11px !important;
}

/* Zahlen 01/02/03 etc. durch kleine MTS-Bildmarke ersetzen */
.value-card span,
.service-content span{
  display:block !important;
  width:30px !important;
  height:30px !important;
  margin-bottom:18px !important;
  color:transparent !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  background:url("../img/logo-mark-turquoise.png") center/contain no-repeat !important;
  filter:drop-shadow(0 10px 22px rgba(37,182,188,.20));
}

.values-section .value-card span{
  width:32px !important;
  height:32px !important;
  opacity:.95;
}

/* neues Dachbild für Dachdeckerarbeiten und Dach-Leistungsflächen */
.service-roof,
.roof-hero-image{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.22)),
    url("../img/projects/dach-hero.jpeg") !important;
  background-position:center center !important;
}

/* Projektseite: gruppierte Premium-Galerie */
.project-groups{
  background:#f5f3ee;
  color:#101317;
  padding:40px 8vw 130px;
}

.project-group{
  padding:70px 0;
  border-top:1px solid rgba(16,19,23,.12);
}

.project-group:first-child{
  border-top:0;
}

.project-group-head{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) 1.2fr;
  gap:60px;
  align-items:end;
  margin-bottom:34px;
}

.project-kicker{
  color:#25b6bc;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:16px;
}

.project-kicker::before{
  content:"";
  width:28px;
  height:28px;
  background:url("../img/logo-mark-turquoise.png") center/contain no-repeat;
  display:inline-block;
}

.project-group h2{
  color:#101317;
  font-size:clamp(36px,5.4vw,78px);
  line-height:.95;
  letter-spacing:-.07em;
}

.project-group-text{
  color:rgba(16,19,23,.68);
  font-size:18px;
  max-width:680px;
}

.project-gallery{
  display:grid;
  grid-template-columns:1.3fr .7fr .9fr;
  gap:18px;
  align-items:stretch;
}

.project-gallery .gallery-shot{
  min-height:310px;
  position:relative;
  overflow:hidden;
  background:#111;
  cursor:pointer;
  box-shadow:0 24px 70px rgba(0,0,0,.10);
}

.project-gallery .gallery-shot.large{
  grid-row:span 2;
  min-height:660px;
}

.project-gallery .gallery-shot.wide{
  grid-column:span 2;
  min-height:360px;
}

.gallery-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  transition:transform .75s cubic-bezier(.2,.8,.2,1), filter .75s;
}

.gallery-shot:hover img{
  transform:scale(1.045);
  filter:contrast(1.04) saturate(1.03);
}

.gallery-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.52));
  opacity:.0;
  transition:.35s;
}

.gallery-shot:hover::after{
  opacity:1;
}

.gallery-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:2;
  color:white;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  transition:.35s;
}

.gallery-shot:hover .gallery-caption{
  opacity:1;
  transform:translateY(0);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(2,3,4,.92);
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:36px;
}

.lightbox.active{
  display:flex;
}

.lightbox img{
  max-width:min(1200px,94vw);
  max-height:86vh;
  object-fit:contain;
  box-shadow:0 40px 160px rgba(0,0,0,.55);
}

.lightbox-close{
  position:fixed;
  top:24px;
  right:28px;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:28px;
  cursor:pointer;
}

/* Kleine Korrektur: Index-Projektvorschau darf weiterhin ruhig bleiben */
.projects-preview .project-row{
  grid-template-columns:repeat(3,1fr);
}

/* Mobile */
@media(max-width:1050px){
  .site-header{
    width:calc(100% - 28px) !important;
    left:14px !important;
    top:14px !important;
  }

  .brand img{
    height:30px !important;
    max-width:112px !important;
  }

  .project-group-head,
  .project-gallery{
    grid-template-columns:1fr;
  }

  .project-gallery .gallery-shot,
  .project-gallery .gallery-shot.large,
  .project-gallery .gallery-shot.wide{
    min-height:340px;
    grid-column:auto;
    grid-row:auto;
  }
}

@media(max-width:640px){
  .site-header{
    height:62px !important;
    padding:0 16px !important;
  }

  .project-groups{
    padding:20px 22px 90px;
  }

  .project-group{
    padding:52px 0;
  }

  .project-group-head{
    gap:24px;
  }

  .project-gallery .gallery-shot,
  .project-gallery .gallery-shot.large,
  .project-gallery .gallery-shot.wide{
    min-height:280px;
  }

  .lightbox{
    padding:18px;
  }
}



/* finale Bildzuweisung */
.hero-home-image{
  background:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.50) 42%,rgba(0,0,0,.14) 100%),
    url("../img/projects/hero-saege.jpeg") center/cover no-repeat !important;
}
.service-wood{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.22)),
    url("../img/projects/carport-innen.jpeg") !important;
}
.project-one{background-image:url("../img/projects/carport-innen.jpeg") !important;}
.project-two{background-image:url("../img/projects/fahrradunterstand.jpeg") !important;}
.project-three{background-image:url("../img/projects/dach-fertig.jpeg") !important;}
.project-four{background-image:url("../img/projects/wasserschaden-traufe.jpeg") !important;}
.project-five{background-image:url("../img/projects/dach-detail-sonne.jpeg") !important;}
.project-six{background-image:url("../img/projects/spezialwerkzeug.jpeg") !important;}
.cta-section{
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.72)),
    url("../img/projects/holz-detail.jpeg") center/cover no-repeat !important;
}


/* =========================================================
   LETZTE ANPASSUNG — Header, Bilder, Labels, Projekte
   ========================================================= */

/* Wortmarke oben besser lesbar, aber nicht überdimensioniert */
.brand img{
  height:42px !important;
  max-width:168px !important;
}

.site-header{
  height:68px !important;
}

@media(max-width:640px){
  .brand img{
    height:34px !important;
    max-width:132px !important;
  }
}

/* Neue Hero-/Leistungsbilder */
.service-wood{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.22)),
    url("../img/projects/zimmererarbeiten-hero.jpeg") !important;
  background-position:center center !important;
}

.service-roof,
.roof-hero-image{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.22)),
    url("../img/projects/dach-hero.jpeg") !important;
  background-position:center center !important;
}

/* Startseiten-Projektvorschau */
.project-one{background-image:url("../img/projects/carport-innen.jpeg") !important;}
.project-two{background-image:url("../img/projects/fahrradunterstand.jpeg") !important;}
.project-three{background-image:url("../img/projects/dach-fertig.jpeg") !important;}

/* Projektgruppen noch etwas luftiger */
.project-group{
  padding:82px 0;
}

.project-gallery{
  gap:20px;
}

.project-gallery .gallery-shot{
  border:1px solid rgba(16,19,23,.08);
}

.project-group h2{
  max-width:850px;
}


/* =========================================================
   FINALE KORREKTUR — Header + Button
   ========================================================= */

/* Logo oben noch etwas größer */
.brand img{
  height:48px !important;
  max-width:190px !important;
}

.site-header{
  height:74px !important;
}

/* Angebot-anfragen Button Text exakt mittig */
.nav-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  text-align:center !important;
  min-height:42px !important;
  padding:0 18px !important;
}

@media(max-width:640px){
  .brand img{
    height:38px !important;
    max-width:150px !important;
  }
}


.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important;width:0!important;pointer-events:none!important;}


/* =========================================================
   FINAL: Rechtliches Premium-Layout + Projektgruppe 01
   ========================================================= */
.legal-premium{
  background:#f5f3ee;
  color:#101317;
  padding:70px 8vw 130px;
}
.legal-premium-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:1180px;
}
.legal-premium-card{
  background:#fff;
  border:1px solid rgba(16,19,23,.10);
  box-shadow:0 24px 80px rgba(0,0,0,.08);
  padding:34px;
  min-height:220px;
}
.legal-premium-card.full{grid-column:1/-1;}
.legal-premium-card .legal-icon{
  width:38px;
  height:38px;
  margin-bottom:22px;
  background:url("../img/logo-mark-turquoise.png") center/contain no-repeat;
}
.legal-premium-card h2{
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#101317;
  margin-bottom:16px;
}
.legal-premium-card h3{
  font-size:18px;
  color:#101317;
  margin:24px 0 10px;
}
.legal-premium-card p,
.legal-premium-card li{
  color:rgba(16,19,23,.70);
  line-height:1.72;
}
.legal-premium-card ul{
  padding-left:20px;
  margin-top:10px;
}
.legal-premium-card a{
  color:#14898f;
  font-weight:700;
}
.privacy-stack{
  max-width:1180px;
  display:grid;
  gap:18px;
}
.privacy-item{
  background:#fff;
  border:1px solid rgba(16,19,23,.10);
  box-shadow:0 20px 70px rgba(0,0,0,.07);
  padding:30px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:24px;
}
.privacy-number{
  width:42px;
  height:42px;
  background:#25b6bc;
  color:#041114;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}
.privacy-item h2{
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#101317;
  margin-bottom:14px;
}
.privacy-item p,
.privacy-item li{
  color:rgba(16,19,23,.70);
  line-height:1.72;
}
.privacy-item ul{padding-left:20px;}
.project-group:first-child .project-gallery{
  grid-template-columns:1.1fr 1fr 1fr;
}
.project-group:first-child .project-gallery .gallery-shot.large{
  min-height:620px;
}
@media(max-width:1050px){
  .legal-premium-grid,
  .privacy-item,
  .project-group:first-child .project-gallery{
    grid-template-columns:1fr;
  }
  .legal-premium{padding:50px 22px 90px;}
  .privacy-item{gap:16px;}
}

@media (max-width:768px){.site-header{height:88px}.brand img{width:190px!important}.main-nav{gap:18px}}


/* =========================================================
   MINIMALE MOBILE OPTIMIERUNG
   Desktop bleibt unverändert.
   ========================================================= */

/* Wortmarke oben links größer/lesbarer */
.brand img{
  width:220px !important;
  max-width:220px !important;
  height:auto !important;
}

/* Nur Tablet und Mobil */
@media(max-width:1050px){
  .brand img{
    width:190px !important;
    max-width:190px !important;
  }

  .site-header{
    min-height:76px;
  }

  .main-nav.active{
    max-height:calc(100vh - 100px);
    overflow:auto;
  }

  .main-nav.active a{
    width:100%;
    padding:8px 0;
  }
}

/* Nur Smartphone */
@media(max-width:640px){
  .site-header{
    height:72px !important;
    min-height:72px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .brand img{
    width:172px !important;
    max-width:172px !important;
  }

  .menu-toggle{
    flex:0 0 auto;
  }

  .hero{
    min-height:86vh;
    padding-top:128px !important;
    padding-bottom:64px !important;
  }

  .hero h1{
    font-size:clamp(46px,14vw,62px) !important;
    line-height:.94 !important;
    max-width:100%;
  }

  .hero-text{
    font-size:16px !important;
    line-height:1.65 !important;
    margin-top:22px !important;
  }

  .hero-actions{
    gap:12px !important;
    margin-top:30px !important;
  }

  .btn{
    min-height:50px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .section{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .section-title{
    margin-bottom:36px !important;
  }

  h2{
    font-size:clamp(34px,11vw,48px) !important;
    line-height:1 !important;
  }

  h3{
    font-size:24px !important;
  }

  .service-block{
    min-height:430px !important;
  }

  .service-content{
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    padding:22px !important;
  }

  .value-card{
    min-height:auto !important;
    padding:28px !important;
  }

  .project-gallery .gallery-shot,
  .project-gallery .gallery-shot.large,
  .project-gallery .gallery-shot.wide,
  .gallery-img,
  .project-img{
    min-height:280px !important;
    height:280px !important;
  }

  .project-group-head{
    gap:18px !important;
  }

  .project-group{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  .contact-card,
  .contact-info{
    padding:28px !important;
  }

  .contact-form input,
  .contact-form textarea{
    font-size:16px !important;
    min-height:52px;
  }

  .site-footer{
    gap:26px !important;
  }

  .float-contact{
    width:46px !important;
    height:46px !important;
  }
}


/* =========================================================
   NUR GEWÜNSCHTE ANPASSUNGEN 2026-07-04
   ========================================================= */

/* Schlichte, leicht gerundete Telefon-/Mail-Buttons */
.float-contact{
  border-radius:14px !important;
  border-color:rgba(37,182,188,.48) !important;
  background:rgba(5,6,7,.68) !important;
  color:#25b6bc !important;
  box-shadow:0 14px 42px rgba(0,0,0,.22) !important;
}

.float-contact:hover{
  background:rgba(37,182,188,.14) !important;
  color:#25b6bc !important;
  border-color:rgba(37,182,188,.85) !important;
}

.float-icon{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Dezenter Cookie-Hinweis */
.cookie-banner{
  position:fixed;
  left:22px;
  bottom:22px;
  width:min(430px,calc(100vw - 44px));
  z-index:2200;
  padding:18px;
  border-radius:22px;
  background:rgba(5,6,7,.82);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
  color:white;
}

.cookie-banner p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.55;
}

.cookie-banner strong{
  display:block;
  margin-bottom:6px;
  color:white;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cookie-banner a{
  color:#25b6bc;
  font-weight:700;
}

.cookie-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.cookie-actions button{
  min-height:40px;
  border-radius:999px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:white;
  font:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.cookie-actions .cookie-accept{
  background:#25b6bc;
  border-color:#25b6bc;
  color:#041114;
}

.cookie-actions .cookie-decline{
  color:rgba(255,255,255,.78);
}

@media(max-width:640px){
  /* Wortmarke mobil kleiner: optisch passend zum Menübutton rechts */
  .brand img{
    width:auto !important;
    height:38px !important;
    max-width:175px !important;
    object-fit:contain !important;
  }

  /* Startseite: Projekttitel mobil vollständig lesbar */
  .projects-preview .project-tile{
    min-height:auto !important;
    overflow:visible !important;
  }

  .projects-preview .project-img{
    height:260px !important;
    min-height:260px !important;
  }

  .projects-preview .project-tile p{
    display:block !important;
    overflow:visible !important;
    white-space:normal !important;
    line-height:1.35 !important;
    min-height:auto !important;
    padding:14px 0 0 !important;
    font-size:14px !important;
  }

  .float-contact{
    border-radius:13px !important;
  }

  .cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    padding:16px;
    border-radius:18px;
  }

  .cookie-actions{
    gap:8px;
  }

  .cookie-actions button{
    flex:1 1 auto;
  }
}


/* =========================================================
   KORREKTUR: Mobile Wortmarke größer + Startseiten-Projekte wie vorher
   ========================================================= */
@media(max-width:640px){
  .brand img{
    width:auto !important;
    height:38px !important;
    max-width:175px !important;
    object-fit:contain !important;
  }

  /* Startseite: Projektbilder wieder im ursprünglichen Kartenlayout */
  .projects-preview .project-tile{
    min-height:unset !important;
    overflow:hidden !important;
  }

  .projects-preview .project-img{
    height:auto !important;
    min-height:unset !important;
  }

  /* Startseite: Projekttitel mobil ausblenden */
  .projects-preview .project-tile p{
    display:none !important;
  }
}


/* =========================================================
   ENDKORREKTUR: Logo mobil + Startseiten-Projekte
   ========================================================= */
@media(max-width:640px){
  /* Wortmarke mobil größer, aber weiterhin passend im Header */
  body .site-header .brand img{
    width:auto !important;
    height:42px !important;
    max-width:188px !important;
    object-fit:contain !important;
  }

  /* Startseite: Projektbilder wieder sauber im Layout */
  body .projects-preview .project-row{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  body .projects-preview .project-tile,
  body .projects-preview .project-tile:nth-child(2),
  body .projects-preview .project-tile:nth-child(3){
    margin-top:0 !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  body .projects-preview .project-img,
  body .projects-preview .project-tile:nth-child(2) .project-img{
    display:block !important;
    width:100% !important;
    height:280px !important;
    min-height:280px !important;
  }

  body .projects-preview .project-tile p{
    display:none !important;
  }
}


/* =========================================================
   NUR KORREKTUR: Wortmarke mobil größer
   ========================================================= */
@media(max-width:640px){
  html body .site-header .brand img{
    width:auto !important;
    height:50px !important;
    max-width:225px !important;
    object-fit:contain !important;
  }

  html body .site-header{
    height:76px !important;
    min-height:76px !important;
  }
}