/* CONZYR GmbH – Website-Styles
   Farben & Schrift nach Markenkonzept (morgen & heute design, Mai 2026)
   Salbei #abc2b5 · Schwarz · Weiß · Akzent Gelb · Work Sans Regular/Medium */

@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/work-sans-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/work-sans-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/work-sans-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Work Sans";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/work-sans-latin-500-italic.woff2") format("woff2");}

:root{
  --sage:#abc2b5;
  --sage-light:#dde6e0;
  --sage-pale:#eef2ef;
  --sage-deep:#566d60;
  --ink:#1c211b;
  --ink-soft:#3a4239;
  --paper:#f7f6f1;
  --white:#ffffff;
  --yellow:#e6e783;
  --line:rgba(28,33,27,.14);
  --radius:6px;
  --wrap:1200px;
  --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.0625rem; line-height:1.65;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit;}
h1,h2,h3,h4{font-weight:500; line-height:1.15; letter-spacing:-.02em; margin:0;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.skip{position:absolute; left:-9999px; top:0; background:var(--yellow); padding:.6rem 1rem; z-index:999;}
.skip:focus{left:1rem; top:1rem;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter);}
.eyebrow{display:block; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:1rem;}
.lead{font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.5; font-weight:400; color:var(--ink);}
.muted{color:var(--ink-soft);}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--sage);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px;}
.brand{display:flex; align-items:center; color:var(--ink); text-decoration:none;}
.brand svg{height:30px; width:auto; display:block;}
.nav{display:flex; align-items:center; gap:2rem;}
.nav a{text-decoration:none; font-size:.98rem; font-weight:500; padding:.3rem 0; position:relative;}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--ink); transition:right .25s var(--ease);}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0;}
.nav a.btn-pill{background:var(--yellow); padding:.5rem 1.15rem; border-radius:999px;}
.nav a.btn-pill::after{display:none;}
.nav a.btn-pill:hover{background:var(--ink); color:var(--yellow);}
.menu-toggle{display:none; background:none; border:0; padding:.5rem; margin-right:-.5rem; cursor:pointer; color:var(--ink);}
.menu-toggle svg{width:28px; height:28px; display:block;}

@media (max-width:860px){
  .brand svg{height:24px;}
  .site-header .wrap{height:64px;}
  .menu-toggle{display:block;}
  .nav{position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0; background:var(--sage); padding:.5rem var(--gutter) 1.5rem; border-top:1px solid var(--line); box-shadow:0 18px 30px rgba(0,0,0,.12); display:none;}
  .nav.open{display:flex;}
  .nav a{font-size:1.2rem; padding:.75rem 0; width:100%; border-bottom:1px solid var(--line);}
  .nav a::after{display:none;}
  .nav a.btn-pill{margin-top:1rem; width:auto; border-bottom:0; padding:.65rem 1.4rem;}
}

/* ---------- Startseite: Hero ---------- */
.hero{position:relative; display:flex; align-items:flex-end; min-height:clamp(560px,84vh,840px); padding:clamp(6rem,14vh,10rem) 0 clamp(2rem,4vw,3.5rem);
  background:url("../img/hero.jpg") center 45%/cover no-repeat, var(--sage);}
.hero .wrap{width:100%;}
.hero-text{display:block; max-width:620px; background:rgba(171,194,181,.94); color:var(--ink); border-radius:var(--radius); padding:clamp(1.6rem,3.2vw,2.8rem); box-shadow:0 10px 40px rgba(20,30,20,.18);}
.hero h1{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1;}
.hero p{font-size:1.06rem; color:var(--ink-soft); max-width:none; margin-top:1.2rem;}
.hero .actions{margin-top:1.6rem;}

/* ---------- Unterseiten-Kopf ---------- */
.page-head{background:var(--sage); padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);}
.page-head h1{font-size:clamp(2.1rem,4.6vw,3.6rem); line-height:1.08; max-width:16ch;}
.page-head p{margin-top:1.4rem; max-width:620px; font-size:1.12rem; color:var(--ink-soft);}
.page-head .eyebrow{color:var(--ink); opacity:.65;}
.subnav{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem;}
.subnav a{text-decoration:none; font-size:.92rem; font-weight:500; background:var(--ink); color:var(--white); padding:.5rem 1.05rem; border-radius:999px; transition:background .2s;}
.subnav a:hover{background:var(--sage-deep);}

/* ---------- Sektionen ---------- */
.section{padding:clamp(3.5rem,8vw,7rem) 0;}
.section.white{background:var(--white);}
.section.sage{background:var(--sage);}
.section.pale{background:var(--sage-pale);}
.section.dark{background:var(--ink); color:var(--white);}
.section.dark .eyebrow{color:var(--yellow);}
.section-head{max-width:680px; margin-bottom:clamp(2rem,4vw,3.2rem);}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.6rem);}
.section-head p{margin-top:1rem; color:var(--ink-soft);}
.section.dark .section-head p{color:rgba(255,255,255,.75);}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5.5rem); align-items:center;}
.split.top{align-items:start;}
.split.wide-left{grid-template-columns:1.2fr .8fr;}
.photo{border-radius:var(--radius); overflow:hidden; background:var(--sage-light);}
.photo img{width:100%; height:100%; object-fit:cover;}
.ratio-34{aspect-ratio:3/4;} .ratio-169{aspect-ratio:16/9; display:block;} .ratio-43{aspect-ratio:4/3;} .ratio-45{aspect-ratio:4/5; display:block;} .ratio-11{aspect-ratio:1/1;} .ratio-32{aspect-ratio:3/2;} .ratio-23{aspect-ratio:2/3;}

/* Statement */
.statement{font-size:clamp(1.45rem,3vw,2.35rem); line-height:1.32; font-weight:400; letter-spacing:-.015em; max-width:28ch;}
.statement strong{font-weight:500; background:linear-gradient(transparent 62%, var(--yellow) 62%);}

/* Leistungs-Karten */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.card{background:var(--paper); padding:2rem 1.6rem 1.8rem; display:flex; flex-direction:column; text-decoration:none; min-height:300px; transition:background .25s var(--ease);}
.card:hover{background:var(--white);}
.card-img{margin:-2rem -1.6rem 1.4rem; aspect-ratio:4/3; overflow:hidden; background:var(--sage-light);}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.card:hover .card-img img{transform:scale(1.04);}
.card .num{font-size:.85rem; font-weight:600; color:var(--sage-deep); letter-spacing:.06em;}
.card h3{font-size:1.3rem; margin:.8rem 0 .7rem;}
.card p{font-size:.95rem; color:var(--ink-soft);}
.card .more{margin-top:auto; padding-top:1.2rem; font-size:.9rem; font-weight:500;}
.card .more span{border-bottom:2px solid var(--yellow);}
.section.sage .card{background:var(--sage-pale);}
.section.sage .card:hover{background:var(--white);}

/* Prinzipien */
.principles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.5rem);}
.principle{border-top:2px solid currentColor; padding-top:1.2rem;}
.principle .eyebrow{margin-bottom:.5rem;}
.principle h3{font-size:1.35rem; margin-bottom:.6rem;}
.principle p{font-size:.97rem; opacity:.85;}

/* Buttons & Links */
.btn{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:500; font-size:1rem; background:var(--ink); color:var(--white); padding:.85rem 1.5rem; border-radius:999px; transition:background .2s, color .2s;}
.btn:hover{background:var(--sage-deep);}
.btn.yellow{background:var(--yellow); color:var(--ink);}
.btn.yellow:hover{background:var(--white);}
.link{font-weight:500; text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:1px;}
.link:hover{border-color:var(--ink);}
.section.dark .link:hover{border-color:var(--white);}

/* Leistungen-Detail */
.service{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--line); scroll-margin-top:90px;}
.service:first-child{border-top:0; padding-top:0;}
.service .num{font-size:.85rem; font-weight:600; color:var(--sage-deep); letter-spacing:.06em; display:block; margin-bottom:.9rem;}
.service h2{font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:1rem;}
.service .claim{font-size:1.15rem; color:var(--ink-soft);}
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{padding:.85rem 0 .85rem 1.8rem; border-bottom:1px solid var(--line); position:relative; font-size:1rem;}
.checklist li:first-child{padding-top:0;}
.checklist li:first-child::before{top:.55rem;}
.checklist li::before{content:""; position:absolute; left:0; top:1.4rem; width:.7rem; height:.7rem; border-radius:50%; background:var(--sage);}

/* Team */
.people{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);}
.person h3{font-size:1.35rem; margin-top:1.1rem;}
.person .role{display:block; color:var(--sage-deep); font-size:.95rem; margin-top:.2rem;}
.bio{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--line); align-items:start;}
.bio:first-of-type{border-top:0; padding-top:0;}
.bio h3{font-size:clamp(1.5rem,2.6vw,2rem);}
.bio .role{display:block; color:var(--sage-deep); margin:.3rem 0 1.3rem;}
.team-list{list-style:none; padding:0; margin:1.5rem 0 0;}
.team-list li{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.8rem 0; border-bottom:1px solid var(--line);}
.team-list li span{color:var(--ink-soft); font-size:.95rem;}

/* Haltung */
.values{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2rem);}
.value{background:var(--white); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem);}
.value h3{font-size:1.4rem; margin-bottom:.8rem;}
.value p{color:var(--ink-soft);}

/* Wortwolke Name */
.name-words{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem;}
.name-words span{background:var(--white); border-radius:999px; padding:.45rem 1rem; font-size:.95rem;}
.name-words span.core{background:var(--ink); color:var(--white);}
.big-c{font-size:clamp(2.2rem,5.5vw,4.4rem); line-height:1.05; font-weight:500; letter-spacing:-.03em;}
.big-c em{font-style:normal; color:var(--white);}

/* Werkstatt / Notes */
.tool{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; background:var(--white); border-radius:var(--radius); padding:clamp(1.6rem,4vw,3rem);}
.tool-visual{background:var(--sage); border-radius:var(--radius); aspect-ratio:4/3; display:grid; place-items:center; padding:2rem;}
.tool-visual svg{width:min(260px,70%); height:auto;}
.notes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.2rem);}
.note .photo{aspect-ratio:4/5; margin-bottom:1.1rem;}
.note video{display:block; width:100%; height:100%; object-fit:cover; background:var(--ink);}
.note .eyebrow{margin-bottom:.4rem;}
.note h3{font-size:1.25rem; margin-bottom:.5rem;}
.note p{font-size:.96rem; color:var(--ink-soft);}
.note .date{font-size:.85rem; color:var(--sage-deep);}
.note-text{background:var(--sage); border-radius:var(--radius); aspect-ratio:4/3; margin-bottom:1.1rem; display:flex; align-items:flex-end; padding:1.4rem;}
.note-text svg{width:56px; height:56px;}

/* Kontakt */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2rem);}
.contact-item{border-top:2px solid var(--ink); padding-top:1.1rem;}
.contact-item h3{font-size:1.3rem; margin-bottom:.5rem; word-break:break-word;}
.contact-item a{text-decoration:none;}
.contact-item a:hover{text-decoration:underline;}

/* CTA-Band */
.cta{background:var(--ink); color:var(--white); padding:clamp(3.5rem,8vw,6.5rem) 0;}
.cta .wrap{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap;}
.cta h2{font-size:clamp(1.9rem,4vw,3.1rem); max-width:18ch;}
.cta p{color:rgba(255,255,255,.72); margin-top:1rem; max-width:480px;}

/* Rechtstexte */
.legal{max-width:760px;}
.legal h2{font-size:1.35rem; margin:2.4rem 0 .7rem;}
.legal h2:first-child{margin-top:0;}
.legal p,.legal li{color:var(--ink-soft);}
.legal ul{padding-left:1.2rem;}

/* Wetter-Tool */
.tool-frame{background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
.tool-frame iframe{display:block; width:100%; height:1400px; border:0;}


/* Praxisbeispiele Startseite */
.praxis{background:var(--sage-pale); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem);}
.praxis-item{padding:1.2rem 0; border-top:1px solid var(--line);}
.praxis-item:last-child{padding-bottom:0;}
.praxis-item h3{font-size:1.15rem; margin-bottom:.4rem;}
.praxis-item p{font-size:.96rem; color:var(--ink-soft);}

/* Weitere Felder (Über uns) */
.fields{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(1rem,2vw,1.5rem);}
.field{border-top:2px solid var(--ink); padding-top:1rem;}
.field .num{font-size:.85rem; font-weight:600; color:var(--sage-deep);}
.field h3{font-size:1.15rem; margin:.6rem 0 .5rem;}
.field p{font-size:.93rem; color:var(--ink-soft);}
@media (max-width:980px){.fields{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.fields{grid-template-columns:1fr;}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:rgba(255,255,255,.72); padding:clamp(3rem,6vw,4.5rem) 0 2rem; font-size:.95rem;}
.site-footer a{text-decoration:none;}
.site-footer a:hover{color:var(--yellow);}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.16);}
.footer-brand{color:var(--sage);}
.footer-brand svg{width:200px; height:auto; display:block;}
.footer-brand p{margin-top:1rem; color:rgba(255,255,255,.55); max-width:260px;}
.footer-col h2{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--yellow); font-weight:600; margin-bottom:1rem;}
.footer-col a,.footer-col span{display:block; margin-bottom:.5rem;}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; font-size:.85rem; color:rgba(255,255,255,.5);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr;}
  .notes{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  body{font-size:1rem;}
  .hero-text,.split,.split.wide-left,.service,.bio,.tool,.values,.principles,.contact-grid{grid-template-columns:1fr;}
  .hero{min-height:0; padding-top:clamp(11rem,52vh,16rem); padding-bottom:0; background-position:40% 50%;}
  .hero-text{max-width:none; margin:0 calc(var(--gutter) * -1); border-radius:0; box-shadow:none;}
  .cards,.notes{grid-template-columns:1fr;}
  .card{min-height:0;}
  .card h3{margin-top:.8rem;}
  .people{grid-template-columns:1fr 1fr; gap:1rem;}
  .person h3{font-size:1.1rem;}
  .footer-grid{grid-template-columns:1fr;}
  .tool-frame iframe{height:1700px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

/* Team-Galerie (Überblendung) */
.team-net{align-items:start; margin-bottom:clamp(2.5rem,5vw,4rem);}
.galerie{position:relative; aspect-ratio:4/5; max-width:440px; width:100%; justify-self:end; border-radius:var(--radius); overflow:hidden; background:var(--sage-light);}
.galerie img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s var(--ease);}
.galerie img.on{opacity:1;}
@media (max-width:760px){.galerie{justify-self:stretch; max-width:none;}}

/* Gelände-Streifen */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem);}
.strip figure{margin:0;}
.strip figcaption{font-size:.9rem; color:var(--ink-soft); margin-top:.6rem;}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr;}}

/* Leistungen: typischer Anlass & Hinweis */
.anlass{margin-top:1.4rem; padding:1rem 1.2rem; background:var(--sage-pale); border-left:3px solid var(--yellow); border-radius:0 var(--radius) var(--radius) 0; font-size:.98rem;}
.anlass span{display:block; font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:.25rem;}
.hinweis{margin-top:1rem; font-size:.95rem; color:var(--ink-soft); font-style:italic; max-width:560px;}
.strip{row-gap:clamp(1.5rem,3vw,2rem);}
.card h3{font-size:clamp(1.05rem,1.45vw,1.25rem); overflow-wrap:break-word;}
@media (min-width:1101px){.cards .card h3{min-height:2.3em;}}

/* ---------- Naturfotos Clemens Keck (29.10.2026) ---------- */

/* Seitenkopf mit Hintergrundbild (Kontakt) */
.page-head.has-bg{position:relative; color:var(--white); background:var(--ink) url("../img/morgennebel.jpg") center 40%/cover no-repeat;}
.page-head.has-bg::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,10,.82) 0%, rgba(20,16,10,.55) 55%, rgba(20,16,10,.2) 100%);}
.page-head.has-bg .wrap{position:relative;}
.page-head.has-bg p{color:rgba(255,255,255,.85);}
.page-head.has-bg .eyebrow{color:var(--white); opacity:.75;}

/* CTA-Band mit Nadelwald */
.cta{position:relative; background:var(--ink) url("../img/nadelwald.jpg") center/cover no-repeat;}
.cta::before{content:""; position:absolute; inset:0; background:rgba(28,33,27,.74);}
.cta .wrap{position:relative;}

/* Seitenköpfe mit Foto – Bienenfresser, Wiedehopf, Eisvogel, Habichtskauz */
.page-head.has-photo{position:relative; overflow:hidden; color:var(--white); background:#566d60; padding-top:clamp(3.5rem,8vw,7rem); padding-bottom:clamp(3.5rem,8vw,7rem); min-height:clamp(520px,46vw,680px); display:flex; align-items:center;}
.page-head.has-photo::before{content:""; position:absolute; top:0; right:0; bottom:0; aspect-ratio:3/2; background:var(--bg-img) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) calc(var(--fade,50%)*.44),#000 var(--fade,50%)); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) calc(var(--fade,50%)*.44),#000 var(--fade,50%));}
.page-head.has-photo .wrap{position:relative; width:100%;}
.page-head.has-photo p{color:rgba(255,255,255,.9);}
.page-head.has-photo .eyebrow{color:var(--white); opacity:.8;}
.page-head.has-photo .subnav a{border:1px solid rgba(255,255,255,.28);}
.page-head.has-photo .subnav a:hover{background:var(--sage-deep); border-color:rgba(255,255,255,.6);}
@media (max-width:760px){
  .page-head.has-photo{display:block; min-height:0; padding-bottom:calc(68vw + 1.5rem);}
  .page-head.has-photo::before{left:0; top:auto; height:68vw; aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%);}
}
.page-head.p-bienenfresser{--bg-img:url("../img/bienenfresser.jpg");}
.page-head.p-wiedehopf{--bg-img:url("../img/wiedehopf.jpg");}
.page-head.p-eisvogel{--bg-img:url("../img/eisvogel.jpg"); --fade:42%;}
.page-head.p-kauz{--bg-img:url("../img/habichtskauz.jpg"); --fade:30%;}
.page-head.p-kauz::before{transform:translateX(20%);}
@media (max-width:760px){ .page-head.p-kauz::before{transform:none;} }