:root{
    /* Palette v3 — frisches Blattgrün, hell & freundlich */
    --paper:      #FFFFFF;
    --paper-deep: #EFF7F2;
    --card:       #FAFDFB;
    --pine:       #00563A;   /* dunkle Variante der Markenfarbe */
    --pine-soft:  #4A8471;
    --moss:       #007751;   /* Markenfarbe aus dem Logo (Primär) */
    --moss-soft:  #4FA582;
    --moss-mist:  #E6F3ED;
    --clay:       #F0A202;   /* sonniges Gelb als Akzent */
    --clay-deep:  #C98500;
    --water:      #3FA7D6;
    --ink:        #1E2B26;
    --muted:      #5C6D66;
    --hairline:   #D6E7DF;

    --fs-hero: 48px;
    --fs-h2:   34px;
    --fs-h3:   19px;
    --space-section: 100px;
    --maxw: 1180px;
    --r: 10px;
    --ease: cubic-bezier(.22,.8,.35,1);
  }

  /* Fluid-Type & -Spacing für moderne Browser (Fallbacks oben) */
  @supports (font-size: clamp(1px, 1vw, 2px)){
    :root{
      --fs-hero: clamp(38px, 5vw, 64px);
      --fs-h2:   clamp(28px, 3.2vw, 42px);
      --space-section: clamp(72px, 9vw, 128px);
    }
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  h1,h2,h3{
    font-family:'Lora',serif;
    font-weight:560;
    color:var(--pine);
    line-height:1.06;
    letter-spacing:-0.012em;
    margin:0;
  }
  p{margin:0;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding-left:32px; padding-right:32px;}
  @media(max-width:720px){ .wrap{padding-left:22px; padding-right:22px;} }

  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase;}

  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--moss);
    display:inline-flex; align-items:center;
    padding-left:16px; position:relative;
    margin-bottom:20px;
  }
  .eyebrow::before{
    content:""; position:absolute; left:0; top:2px;
    width:8px; height:8px;
    border-left:1.5px solid var(--moss);
    border-top:1.5px solid var(--moss);
  }

  section{padding-top:var(--space-section); padding-bottom:var(--space-section);}

  .section-head{max-width:660px; margin-bottom:56px;}
  .section-head h2{font-size:var(--fs-h2); margin-bottom:18px;}
  .section-head p{color:var(--muted); font-size:16px;}

  /* Eck-Marken-Motiv (technische Zeichnung) */
  .frame{position:relative;}
  .frame::before,.frame::after{
    content:""; position:absolute; width:22px; height:22px; pointer-events:none; z-index:2;
  }
  .frame::before{top:-1px; left:-1px; border-top:2px solid var(--moss); border-left:2px solid var(--moss); border-top-left-radius:6px;}
  .frame::after{bottom:-1px; right:-1px; border-bottom:2px solid var(--moss); border-right:2px solid var(--moss); border-bottom-right-radius:6px;}

  /* Reveal on scroll — nur aktiv, wenn JS + IntersectionObserver verfügbar (Progressive Enhancement) */
  .js-io .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js-io .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){
    .js-io .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--pine); color:#FFFFFF; padding:10px 18px; font-size:14px;
  }
  .skip-link:focus{left:16px; top:12px;}

  /* ============ HEADER ============ */
  header{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  header.scrolled{border-bottom-color:var(--hairline); box-shadow:0 4px 24px rgba(0,86,58,.06);}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0; transition:padding .25s ease;}
  header.scrolled .nav{padding:11px 0;}

  .logo{display:flex; align-items:center; text-decoration:none;}
  /* Originallogo als Inline-SVG: skaliert verlustfrei, faerbt sich ueber fill */
  .logo-lockup{height:46px; width:auto; flex:none; transition:height .25s var(--ease);}
  header.scrolled .logo-lockup{height:38px;}
  @media(max-width:940px){
    .logo-lockup{height:38px;}
    header.scrolled .logo-lockup{height:34px;}
  }
  @media(max-width:420px){ .logo-lockup, header.scrolled .logo-lockup{height:32px;} }

  nav.links{display:flex; align-items:center;}
  nav.links a{
    text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink);
    margin-right:32px; padding:4px 0; position:relative;
  }
  nav.links a:last-child{margin-right:0;}
  nav.links a::after{
    content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
    background:var(--moss); transition:width .22s var(--ease);
  }
  nav.links a:hover::after,nav.links a:focus-visible::after{width:100%;}

  .nav-cta{display:flex; align-items:center;}
  .tel-link{
    font-family:'IBM Plex Mono',monospace; font-size:13px; text-decoration:none;
    color:var(--pine); white-space:nowrap; margin-right:20px;
  }
  .tel-link:hover{color:var(--moss);}

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--moss); color:#FFFFFF;
    font-family:'Work Sans',sans-serif; font-size:14.5px; font-weight:500;
    text-decoration:none; padding:13px 24px; border-radius:999px;
    border:1px solid var(--moss); cursor:pointer; white-space:nowrap;
    transition:background .18s ease, border-color .18s ease, transform .18s var(--ease), box-shadow .18s ease;
  }
  .btn:hover{background:var(--pine); border-color:var(--pine); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,86,58,.25);}
  .btn:active{transform:translateY(0);}
  .btn.ghost{background:transparent; color:var(--pine); border-color:var(--moss);}
  .btn.ghost:hover{background:var(--moss); color:#FFFFFF; box-shadow:none;}
  .btn.light{background:var(--paper); color:var(--pine); border-color:var(--paper);}
  .btn.light:hover{background:var(--clay); border-color:var(--clay); color:var(--ink);}

  .burger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
  .burger span{display:block; width:24px; height:2px; background:var(--pine); margin:5px 0; transition:transform .25s ease, opacity .25s ease;}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  @media(max-width:940px){
    nav.links{
      position:absolute; top:100%; left:0; right:0; background:var(--paper);
      flex-direction:column; align-items:flex-start;
      padding:28px 24px 36px; border-bottom:1px solid var(--hairline);
      transform:translateY(-130%); transition:transform .3s var(--ease);
      box-shadow:0 20px 40px rgba(0,86,58,.12);
    }
    nav.links.open{transform:translateY(0);}
    nav.links a{font-size:19px; margin:0 0 20px 0;}
    nav.links a:last-child{margin-bottom:0;}
    .tel-link{display:none;}
    .burger{display:block;}
  }

  /* ============ HERO ============ */
  .hero{padding-top:72px; padding-bottom:56px;}
  .hero .wrap{display:flex; align-items:center;}
  .hero-copy{flex:1 1 50%; padding-right:56px;}
  .hero-visual-col{flex:1 1 50%; min-width:0;}

  .hero h1{font-size:var(--fs-hero); margin-bottom:24px;}
  .hero h1 em{font-style:italic; font-weight:460; color:var(--moss);}
  .hero-sub{font-size:17.5px; color:var(--muted); max-width:46ch; margin-bottom:36px;}
  .hero-actions{display:flex; flex-wrap:wrap; margin-bottom:36px;}
  .hero-actions .btn{margin-right:16px; margin-bottom:12px;}
  .chips{display:flex; flex-wrap:wrap;}
  .chip{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.04em;
    border:1px solid var(--hairline); border-radius:999px;
    padding:6px 13px; color:var(--muted); margin:0 10px 10px 0; background:var(--card);
  }

  @media(max-width:940px){
    .hero .wrap{flex-direction:column; align-items:stretch;}
    .hero-copy{padding-right:0; margin-bottom:44px;}
  }

  /* ============ TRUST STRIP ============ */
  .strip{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper-deep);}
  .strip .wrap{display:flex; flex-wrap:wrap; padding-top:30px; padding-bottom:18px;}
  .strip-item{flex:1 1 280px; display:flex; align-items:flex-start; margin-bottom:12px; padding-right:36px;}
  .strip-item svg{flex:none; width:22px; height:22px; color:var(--moss); margin-right:13px; margin-top:3px;}
  .strip-item b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:2px;}
  .strip-item p{font-size:13.5px; color:var(--muted);}

  /* ============ LEISTUNGEN ============ */
  .cards{display:flex; flex-wrap:wrap; margin:-10px;}
  .card{
    flex:1 1 calc(33.333% - 20px); min-width:270px; margin:10px;
    background:var(--card); border:1px solid var(--hairline); border-radius:16px;
    padding:32px 28px 30px;
    display:flex; flex-direction:column;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
  }
  .card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,86,58,.10); border-color:var(--moss-soft);}
  .card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .card-icon{
    width:48px; height:48px; border:1px solid var(--hairline); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .25s ease, background .25s ease;
  }
  .card-icon svg{width:22px; height:22px; stroke:var(--pine); transition:stroke .25s ease;}
  .card:hover .card-icon{border-color:var(--moss); background:var(--moss-mist);}
  .card:hover .card-icon svg{stroke:var(--moss);}
  .card-num{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--moss-soft);}
  .card h3{font-size:var(--fs-h3); font-weight:560; margin-bottom:10px;}
  .card p{font-size:14px; color:var(--muted);}
  .card ul{margin:14px 0 0; padding:0; list-style:none;}
  .card ul li{
    font-size:12.5px; color:var(--pine-soft); padding-left:16px; position:relative; margin-bottom:6px;
  }
  .card ul li::before{
    content:""; position:absolute; left:0; top:8px; width:7px; height:1.5px; background:var(--clay);
  }

  /* ============ ABLAUF ============ */
  .process{background:var(--pine); color:var(--paper);}
  .process .eyebrow{color:var(--moss-soft);}
  .process .eyebrow::before{border-color:var(--moss-soft);}
  .process .section-head h2{color:var(--paper);}
  .process .section-head p{color:#C3E2D5;}
  .steps{display:flex; flex-wrap:wrap; border-top:1px solid rgba(251,249,243,.16); padding-top:8px;}
  .step{flex:1 1 220px; padding:30px 30px 0 0; position:relative;}
  .step + .step{border-left:1px solid rgba(251,249,243,.14); padding-left:30px;}
  .step-num{
    font-family:'Lora',serif; font-style:italic; font-weight:340;
    font-size:46px; color:var(--moss-soft); display:block; margin-bottom:16px; line-height:1;
  }
  .step h3{color:var(--paper); font-size:18px; margin-bottom:10px; font-weight:560;}
  .step p{color:#C3E2D5; font-size:13.8px;}
  @media(max-width:860px){
    .steps{flex-direction:column;}
    .step + .step{border-left:none; border-top:1px solid rgba(251,249,243,.14); padding-left:0; margin-top:26px; padding-top:26px;}
  }

  /* ============ ÜBER UNS ============ */
  .about .wrap{display:flex; align-items:center;}
  .about-visual{flex:0 0 42%; margin-right:64px;}
  .about-visual-inner{background:var(--paper-deep); padding:30px;}
  .about-copy{flex:1;}
  .about-copy p{color:var(--muted); font-size:15.5px; margin-bottom:18px; max-width:52ch;}
  .values{margin:26px 0 0; padding:0; list-style:none;}
  .values li{display:flex; align-items:flex-start; font-size:14.5px; margin-bottom:14px;}
  .values svg{flex:none; width:18px; height:18px; color:var(--clay); margin-right:12px; margin-top:3px;}
  @media(max-width:900px){
    .about .wrap{flex-direction:column; align-items:stretch;}
    .about-visual{margin:0 auto 40px; max-width:340px;}
  }

  /* ============ SAISON ============ */
  .season{background:var(--paper-deep); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
  /* Raster statt Flexbox: So stehen die vier Karten immer 4, 2+2 oder
     einzeln untereinander — nie drei nebeneinander und die vierte allein
     über die volle Breite. */
  .season-track{display:grid; gap:16px; grid-template-columns:repeat(4, 1fr);}
  @media(max-width:1040px){ .season-track{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:520px){  .season-track{grid-template-columns:1fr;} }
  .season-card{
    background:var(--card); border:1px solid var(--hairline); border-radius:14px;
    padding:26px 24px;
  }
  .season-tag{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--card); background:var(--moss);
    display:inline-block; padding:4px 10px; border-radius:2px; margin-bottom:16px;
  }
  .season-card:nth-child(2) .season-tag{background:var(--water);}
  .season-card:nth-child(3) .season-tag{background:#E8871E;}
  .season-card:nth-child(4) .season-tag{background:var(--pine);}
  .season-card h3{font-size:17px; margin-bottom:8px;}
  .season-card p{font-size:13.5px; color:var(--muted);}

  /* ============ STIMMEN ============ */
  .quotes{display:flex; flex-wrap:wrap; margin:-12px;}
  .quote{
    flex:1 1 300px; margin:12px;
    background:var(--card); border:1px solid var(--hairline); border-radius:16px;
    padding:30px 28px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .quote-mark{font-family:'Lora',serif; font-size:42px; line-height:1; color:var(--moss-soft); margin-bottom:10px;}
  .quote p{font-size:15px; font-style:italic; color:var(--ink); margin-bottom:22px;}
  .quote footer{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);}

  /* ============ FAQ ============ */
  .faq-list{max-width:760px;}
  details{
    border-bottom:1px solid var(--hairline);
  }
  details summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 4px; font-family:'Lora',serif; font-weight:560;
    font-size:18px; color:var(--pine);
  }
  details summary::-webkit-details-marker{display:none;}
  .faq-icon{
    flex:none; width:26px; height:26px; margin-left:20px; position:relative;
  }
  .faq-icon::before,.faq-icon::after{
    content:""; position:absolute; background:var(--clay); transition:transform .25s var(--ease);
  }
  .faq-icon::before{left:5px; right:5px; top:12px; height:2px;}
  .faq-icon::after{top:5px; bottom:5px; left:12px; width:2px;}
  details[open] .faq-icon::after{transform:scaleY(0);}
  details .faq-body{padding:0 40px 24px 4px; font-size:15px; color:var(--muted); max-width:62ch;}

  /* ============ CTA-BAND ============ */
  .cta-band{background:var(--pine);}
  .cta-band .wrap{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  }
  .cta-band h2{color:var(--paper); font-size:32px; max-width:20ch; margin-right:32px; margin-bottom:16px;}
  .cta-band h2 em{font-style:italic; font-weight:460; color:var(--moss-soft);}
  .cta-band .actions{display:flex; flex-wrap:wrap; align-items:center;}
  .cta-band .actions .btn{margin-right:16px; margin-bottom:12px;}
  .cta-tel{
    font-family:'IBM Plex Mono',monospace; color:#C3E2D5; font-size:14px; text-decoration:none; margin-bottom:12px;
  }
  .cta-tel:hover{color:var(--paper);}

  /* ============ KONTAKT ============ */
  .contact .wrap{display:flex;}
  .contact-form-col{flex:1 1 55%; padding-right:64px;}
  .contact-info-col{flex:1 1 45%; min-width:300px;}
  @media(max-width:940px){
    .contact .wrap{flex-direction:column;}
    .contact-form-col{padding-right:0; margin-bottom:48px;}
  }
  .fgroup{margin-bottom:20px;}
  .fgroup label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
    letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
  }
  .fgroup input,.fgroup textarea{
    width:100%; background:var(--card); border:1px solid var(--hairline); border-radius:var(--r);
    padding:13px 14px; font-family:'Work Sans',sans-serif; font-size:14.5px; color:var(--ink);
    transition:border-color .18s ease;
  }
  .fgroup input:hover,.fgroup textarea:hover{border-color:var(--moss-soft);}
  .fgroup input:focus,.fgroup textarea:focus{outline:2px solid var(--moss); outline-offset:1px; border-color:var(--moss);}
  .frow{display:flex; margin:0 -10px;}
  .frow .fgroup{flex:1; margin-left:10px; margin-right:10px;}
  @media(max-width:560px){ .frow{flex-direction:column; margin:0;} .frow .fgroup{margin-left:0; margin-right:0;} }
  .fnote{font-size:12.5px; color:var(--muted); margin-top:14px;}
  #formSuccess{
    display:none; background:var(--moss-mist); border:1px solid var(--moss-soft);
    border-radius:var(--r); padding:14px 16px; font-size:14px; margin-bottom:22px;
  }
  #formSuccess.show{display:block;}

  .info-card{
    background:var(--card); border:1px solid var(--hairline); padding:34px;
  }
  .info-row{display:flex; align-items:flex-start; margin-bottom:24px;}
  .info-row svg{flex:none; width:20px; height:20px; color:var(--clay); margin-right:14px; margin-top:2px;}
  .info-row .lbl{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:3px;
  }
  .info-row a{text-decoration:none;}
  .info-row a:hover{color:var(--clay);}
  .map-box{border:1px solid var(--hairline); margin-top:4px;}
  .map-box iframe{width:100%; height:230px; border:0; display:block;}

  /* ============ FOOTER ============ */
  .site-foot{background:var(--pine); color:#C3E2D5; padding:60px 0 26px;}
  .foot-grid{display:flex; flex-wrap:wrap; margin-bottom:44px;}
  .foot-brand{flex:1 1 320px; margin-right:48px; margin-bottom:32px;}
  .foot-col{flex:1 1 180px; margin-bottom:32px;}
  .site-foot .logo-lockup{height:64px;}
  @media(max-width:720px){ .site-foot .logo-lockup{height:52px;} }
  .foot-brand p{font-size:13.5px; color:#B4DCCA; max-width:34ch; margin-top:16px;}
  .foot-col h4{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--paper); font-weight:500; margin:0 0 16px;
  }
  .foot-col ul{list-style:none; margin:0; padding:0;}
  .foot-col li{margin-bottom:10px;}
  .foot-col a{font-size:14px; color:#C3E2D5; text-decoration:none;}
  .foot-col a:hover{color:var(--paper);}
  .foot-bottom{
    border-top:1px solid rgba(251,249,243,.14); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8AC3AB;
  }
  .foot-bottom a{color:#8AC3AB;}
  .foot-bottom a:hover{color:var(--paper);}
  .foot-bottom span{margin-bottom:8px;}

  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
  :focus-visible{outline:2px solid var(--moss); outline-offset:2px;}

  /* ============ ERGÄNZUNGEN: Formular, Karte, Rechtstexte ============ */

  /* Honeypot — für Menschen unsichtbar, für Screenreader ausgeblendet */
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

  .fcheck{display:flex; align-items:flex-start; margin:20px 0 24px;}
  .fcheck input[type=checkbox]{
    flex:none; width:17px; height:17px; margin:2px 12px 0 0; accent-color:var(--moss);
  }
  .fcheck label{
    font-size:13px; line-height:1.55; color:var(--muted);
    font-family:'Work Sans',sans-serif; text-transform:none; letter-spacing:0;
  }
  .fcheck a{color:var(--moss); text-decoration:underline;}

  #formStatus{
    display:none; border-radius:var(--r); padding:14px 16px;
    font-size:14px; margin-bottom:22px;
  }
  #formStatus.show{display:block;}
  #formStatus.ok{background:var(--moss-mist); border:1px solid var(--moss-soft); color:var(--ink);}
  #formStatus.err{background:#FCEFE4; border:1px solid #E8871E; color:#8A4B10;}

  .btn[disabled]{opacity:.6; cursor:not-allowed;}
  .btn.small{padding:9px 18px; font-size:13px;}

  /* Karte: Zwei-Klick-Lösung */
  .map-consent{
    height:230px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center; padding:22px;
    background:var(--moss-mist); gap:6px;
  }
  .map-consent p{font-size:13px; color:var(--muted); max-width:38ch; margin:0;}
  .map-consent p b{color:var(--ink); font-size:14px;}
  .map-consent a{color:var(--moss);}
  .map-consent .btn{margin-top:10px;}

  /* ============ RECHTSTEXTE (Impressum / Datenschutz) ============ */
  .legal{padding:56px 0 80px; max-width:none;}
  .legal .wrap{max-width:780px;}
  .legal h1{font-size:clamp(30px,4vw,42px); margin:0 0 8px;}
  .legal h2{font-size:21px; margin:44px 0 12px;}
  .legal h3{font-size:16px; margin:28px 0 8px;}
  .legal p, .legal li{font-size:15px; line-height:1.75; color:var(--ink);}
  .legal p{margin:0 0 14px;}
  .legal ul{margin:0 0 14px; padding-left:22px;}
  .legal li{margin-bottom:6px;}
  .legal a{color:var(--moss);}
  .legal .lead{color:var(--muted); margin-bottom:8px;}
  .legal .back{display:inline-block; margin-top:44px; font-size:14px;}
  .legal .todo{
    background:#FCEFE4; border-left:3px solid #E8871E; padding:12px 16px;
    font-size:13.5px; color:#8A4B10; margin:0 0 20px; border-radius:4px;
  }

  /* Kompakter Anruf-Button im Header — nur auf schmalen Bildschirmen.
     Verhindert, dass der Beratungs-Button das Logo überlappt. */
  .tel-icon{display:none; color:var(--pine); padding:9px; margin-right:2px;}
  .tel-icon svg{display:block; width:22px; height:22px;}
  .tel-icon:hover{color:var(--moss);}

  @media(max-width:600px){
    .nav-cta .btn{display:none;}
    .tel-icon{display:inline-flex; align-items:center;}
  }

  /* ============ FOTOS ============ */
  picture{display:block;}
  /* Die WordPress-Fassung gibt blanke <img> ohne <picture> aus — deshalb
     sprechen wir die Bilder zusätzlich über ihre Container an. */
  picture img,
  .hero-shot-inner > img,
  .about-visual-inner > img,
  .legal img{display:block; width:100%; height:auto;}

  /* ---- Startbild ---- */
  .hero-shot{margin:0;}
  .hero-shot-inner{background:var(--card); overflow:hidden;}
  .hero-shot img{border-radius:2px;}
  .hero-shot figcaption{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.03em;
    color:var(--muted); padding:14px 2px 0;
  }

  /* ---- Foto in den Leistungskarten ---- */
  .card{padding-top:0; overflow:hidden;}
  .card-shot{
    margin:0 -28px; aspect-ratio:16/10; overflow:hidden;
    background:var(--paper-deep);
  }
  .card-shot img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
  }
  .card:hover .card-shot img{transform:scale(1.04);}
  .card .card-top{margin-top:26px;}
  /* Aeltere Browser ohne aspect-ratio: feste Hoehe */
  @supports not (aspect-ratio: 16/10){
    .card-shot{height:190px;}
  }

  /* ---- Über uns ---- */
  .about-visual-inner{padding:0; overflow:hidden;}
  .about-visual-inner img{border-radius:2px;}

  /* ============ PROJEKTGALERIE ============ */
  .gallery{
    display:grid; gap:14px;
    grid-template-columns:repeat(3, 1fr);
  }
  @media(max-width:900px){ .gallery{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:560px){ .gallery{gap:10px;} }

  .shot{
    position:relative; display:block; padding:0; margin:0; border:none;
    background:var(--paper-deep); border-radius:12px; overflow:hidden;
    cursor:zoom-in; aspect-ratio:4/3; width:100%;
    -webkit-appearance:none; appearance:none;
  }
  @supports not (aspect-ratio: 4/3){ .shot{height:230px;} }
  .shot picture, .shot img{width:100%; height:100%;}
  .shot img{object-fit:cover; transition:transform .55s var(--ease);}
  .shot::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(0,40,26,.34), rgba(0,40,26,0) 46%);
    opacity:0; transition:opacity .3s ease;
  }
  .shot:hover img, .shot:focus-visible img{transform:scale(1.05);}
  .shot:hover::after, .shot:focus-visible::after{opacity:1;}
  .shot:focus-visible{outline:2px solid var(--moss); outline-offset:3px;}

  .shot-zoom{
    position:absolute; right:12px; bottom:12px; z-index:2;
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.94); color:var(--pine);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(6px);
    transition:opacity .28s ease, transform .28s var(--ease);
  }
  .shot-zoom svg{width:17px; height:17px;}
  .shot:hover .shot-zoom, .shot:focus-visible .shot-zoom{opacity:1; transform:none;}

  .gallery-note{
    margin:30px 0 0; font-size:14.5px; color:var(--muted); text-align:center;
  }
  .gallery-note a{color:var(--moss); text-decoration:underline; text-underline-offset:3px;}

  /* ---- Vollbildansicht (Lightbox) ---- */
  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(0,30,20,.975);
    display:flex; align-items:center; justify-content:center;
    padding:64px 20px;
    opacity:0; transition:opacity .25s ease;
  }
  .lightbox[hidden]{display:none;}
  .lightbox.open{opacity:1;}

  .lb-figure{
    margin:0; max-width:1200px; width:100%;
    display:flex; flex-direction:column; align-items:center;
  }
  .lb-figure picture{width:100%;}
  .lb-figure img{
    display:block; width:auto; max-width:100%; max-height:76vh;
    margin:0 auto; border-radius:4px; background:#0B2119;
  }
  .lb-figure figcaption{
    color:#DCEFE5; font-size:14px; text-align:center;
    margin-top:16px; max-width:60ch; line-height:1.6;
  }

  .lb-close, .lb-nav{
    position:absolute; z-index:2;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    color:#FFFFFF; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease, border-color .2s ease;
  }
  .lb-close:hover, .lb-nav:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45);}
  .lb-close:focus-visible, .lb-nav:focus-visible{outline:2px solid #FFFFFF; outline-offset:2px;}
  .lb-close{top:18px; right:18px; width:44px; height:44px;}
  .lb-close svg{width:20px; height:20px;}
  .lb-nav{top:50%; transform:translateY(-50%); width:48px; height:48px;}
  .lb-nav svg{width:22px; height:22px;}
  .lb-prev{left:18px;}
  .lb-next{right:18px;}

  .lb-zaehler{
    position:absolute; bottom:20px; left:0; right:0; text-align:center;
    font-family:'IBM Plex Mono',monospace; font-size:12px;
    color:rgba(255,255,255,.66); margin:0;
  }

  @media(max-width:640px){
    .lightbox{padding:56px 12px;}
    .lb-nav{width:42px; height:42px;}
    .lb-prev{left:8px;} .lb-next{right:8px;}
    .lb-figure img{max-height:66vh;}
    .lb-figure figcaption{font-size:13px;}
  }
  @media (prefers-reduced-motion:reduce){
    .shot img, .card-shot img, .shot-zoom, .lightbox{transition:none;}
  }

  /* Instagram-Link in der Fußzeile */
  .foot-col a.social{display:inline-flex; align-items:center; gap:8px;}
  .foot-col a.social svg{flex:none; width:17px; height:17px; color:var(--moss-soft);}
  .foot-col a.social:hover svg{color:var(--paper);}

  /* Schmale Desktop-Breiten (940–1120 px): Dort steht die volle Navigation
     noch, hat aber kaum Platz — ohne Nachhilfe bricht „Über uns" um und
     Logo, Menü und Knopf stoßen ohne Abstand aneinander. */
  nav.links a{white-space:nowrap;}
  @media(min-width:941px) and (max-width:1120px){
    nav.links a{margin-right:20px; font-size:14px;}
    .tel-link{margin-right:14px; font-size:12.5px;}
    .nav-cta .btn{padding:11px 18px; font-size:14px;}
  }