:root{
    --bg: #090909;
    --bg2: #151515;
    --ink: #F4F4F2;
    --steel: #A3A3A0;
    --steel-2: #5C5C59;
    --gold: #D8242C;
    --line: #232322;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ overflow-x:hidden; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.05;
    text-transform:none;
  }
  a{ color:inherit; }
  .wrap{ max-width:1100px; margin:0 auto; padding:0 32px; }

  header{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
    border-bottom:1px solid #302f2e;
    isolation:isolate;
    overflow-anchor:none;
  }
  .nav{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
    gap:11px;
    padding:19px 32px 15px; max-width:1100px; margin:0 auto;
    transition: padding 0.3s ease, gap 0.3s ease;
  }
  header.header-scrolled .nav{ padding:13px 32px 12px; gap:6px; }
  .logo{
    display:flex; flex-direction:column; align-items:center; gap:5px; position:relative;
    --logo-scale:0.93;
  }
  header.header-scrolled .logo{ --logo-scale:0.75; }
  .logo-img{
    display:block; overflow:visible;
    height:calc(130px * var(--logo-scale)); width:calc(130px * var(--logo-scale) * 480 / 256);
    transition: height 0.3s ease, width 0.3s ease;
  }
  .logo-img .pulse{
    fill:none; stroke:var(--gold); stroke-width:2.43;
    transform-box:fill-box; transform-origin:center;
    animation: pulse-strong 2.2s ease-out infinite; will-change: transform, opacity;
  }
  .logo-mark{ margin-bottom:2px; }
  .logo-text{ display:flex; flex-direction:column; align-items:flex-start; width:fit-content; gap:3px; }
  .logo-mark .pulse{
    fill:none; stroke:var(--gold); stroke-width:1.2;
    transform-origin:center; transform-box:fill-box;
    animation: pulse-strong 2.2s ease-out infinite;
    will-change: transform, opacity;
  }
  .logo b{
    font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:1.7457rem;
    letter-spacing:0.14em; line-height:1; white-space:nowrap;
  }
  .logo-sub{ display:flex; align-items:center; gap:8px; width:100%; margin-left:1px; }
  .logo-sub-line{ display:none; flex:1; height:1px; background:var(--gold); opacity:1; box-shadow:0 0 4px rgba(216,36,44,0.6); }
  .logo-sub-text{
    font-size:0.8856rem; color:#ffffff; font-family:'Inter', sans-serif;
    font-weight:300; white-space:nowrap;
  }

  .nav ul{ list-style:none; display:flex; gap:32px; }
  [data-target]{ cursor:pointer; }

  .nav-dropdown{ position:relative; }
  .nav-dropdown::after{
    content:''; position:absolute; left:0; right:0; top:100%; height:12px;
  }
  .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; }
  .nav-dropdown-chevron{ transition: transform 0.2s ease; }
  .nav-dropdown-menu{
    position:absolute; top:100%; left:50%;
    margin-top:12px; background:var(--bg); border:1px solid #302f2e; border-radius:0;
    list-style:none; min-width:0; padding:3px 0;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform: translateX(-50%) translateY(-6px);
    z-index:60;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  .nav-dropdown:hover .nav-dropdown-chevron,
  .nav-dropdown:focus-within .nav-dropdown-chevron{ transform:rotate(180deg); }
  .nav-dropdown-menu li{ list-style:none; }
  .nav-dropdown-menu a{
    display:block; padding:6px 14px; white-space:nowrap; font-size:0.92rem;
    color:var(--ink); text-align:center;
  }
  .nav-dropdown-menu a:hover{ color:var(--gold); }

  /* dot navigation */
  .dot-nav{
    position:fixed; right:26px; top:50%; transform:translateY(-50%);
    display:flex; flex-direction:column; align-items:center; gap:16px;
    z-index:60;
  }
  .dot-nav button{
    width:9px; height:9px; padding:0; border-radius:50%;
    border:1.5px solid var(--steel-2); background:transparent;
    cursor:pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .dot-nav button:hover{ border-color:var(--ink); }
  .dot-nav button.active{
    background:var(--gold); border-color:var(--gold); transform:scale(1.5);
  }
  /* Punkte nur zeigen, wenn rechts neben dem Inhalt genug Platz ist */
  @media (max-width: 1200px){
    .dot-nav{ display:none; }
  }
  #navlist a{
    text-decoration:none; font-size:0.92rem; color:var(--ink); font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em;
    position:relative; padding-bottom:5px;
  }
  #navlist a::after{
    content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
    background:var(--gold); opacity:0.85; transform:scaleX(0); transform-origin:center;
    transition:transform 0.25s ease;
  }
  /* Unterstrich nur bei echter Maus, damit er auf Touch-Geräten nach dem Tippen nicht stehen bleibt */
  @media (hover: hover) and (pointer: fine){ #navlist a:hover::after{ transform:scaleX(1); } }
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer; color:var(--ink); font-size:1.1rem;
    position:absolute; top:22px; right:32px;
  }

  .header-icons{
    position:fixed; top:22px; right:32px;
    display:flex; gap:10px; z-index:70;
  }
  .icon-btn{
    width:36px; height:36px; border-radius:50%;
    border:1.3px solid var(--steel);
    display:flex; align-items:center; justify-content:center;
    color:var(--ink); text-decoration:none;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .icon-btn:hover{ border-color:var(--gold); color:var(--gold); }
  @media (max-width: 780px){
    .header-icons{ display:none; }
  }

  /* photo banner */
  .photo-banner{
    position:relative; width:100%; height:calc(36.8vh + 25px); min-height:340px; max-height:393px;
  }
  .photo-banner-img{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(160deg, #1c1c1b, var(--bg) 65%); }
  .photo-banner img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(15%) contrast(1.05);
  }

  /* hero */
  .hero{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:24px 20px;
  }
  .hero .hero-headline{
    font-size:clamp(1.6335rem, 5.082vw, 2.24rem); margin:0 auto; max-width:20ch;
    font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; letter-spacing:-0.02em;
    line-height:1.28; color:var(--ink);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 10px 32px rgba(0,0,0,0.45);
    opacity:0; animation: heroFadeIn 1s ease-out 0.15s forwards;
  }
  .hero-kicker{
    font-family:'Inter', sans-serif; font-weight:500; font-size:clamp(0.92rem, 2.6vw, 1.19rem); letter-spacing:0.01em;
    line-height:1.55;
    color:rgba(244,244,242,0.9); margin-top:20px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 10px 28px rgba(0,0,0,0.6);
    opacity:0; animation: heroFadeIn 1s ease-out 0.45s forwards;
  }
  .hero-headline .hero-point{
    position:relative; display:inline-block; letter-spacing:0;
  }
  .hero-headline .hero-point::after{
    content:''; position:absolute; left:var(--ul, 0.056em); right:var(--ur, 0.055em); bottom:calc(-0.17em + 4px);
    height:2px; background:var(--gold);
  }
  @keyframes heroFadeIn{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero .hero-headline, .hero-kicker, .hero-cta{ animation:none; opacity:1; }
  }
  .hero p.lede{
    margin:22px auto 0; max-width:46ch; font-size:1.08rem; color:#ffffff;
  }
  .hero-cta{
    margin-top:26px; display:flex; gap:18px; align-items:center; justify-content:center;
    opacity:0; animation: heroFadeIn 1s ease-out 0.7s forwards;
  }
  .hero-cta .btn{
    background:rgba(0,0,0,0.38);
    border:1px solid #E8E8E6;
    padding:15px 34px; font-size:0.902rem; font-weight:500; letter-spacing:0.1em;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  .hero-cta .btn:hover{ border-color:var(--gold); }
  .hero-cta .btn-corner{ display:none; }
  .btn{
    display:inline-block; position:relative; background:var(--bg); color:var(--ink);
    padding:13px 28px; text-decoration:none; font-size:0.95rem; font-weight:600;
    border:1px solid var(--gold);
  }
  .btn-label{ position:relative; }
  .btn-corner{
    position:absolute; width:9px; height:9px;
    border:1.4px solid var(--gold);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity:0.7;
  }
  .btn-corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; }
  .btn-corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; }
  .btn-corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; }
  .btn-corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; }
  .btn:hover .btn-corner{ opacity:1; }
  .btn:hover .btn-corner.tl{ transform:translate(-4px,-4px); }
  .btn:hover .btn-corner.tr{ transform:translate(4px,-4px); }
  .btn:hover .btn-corner.bl{ transform:translate(-4px,4px); }
  .btn:hover .btn-corner.br{ transform:translate(4px,4px); }

  @keyframes pulse-strong{
    0%{ transform:scale(0.3); opacity:0.98; }
    100%{ transform:scale(4.55); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .pulse{ animation:none; opacity:0.4; }
  }

  section{ padding:72px 0; scroll-margin-top:110px; }

  /* sauberer Wechsel schwarz/anthrazit über alle Sektionen (löst ID-Selektoren über die geteilten Klassen-Backgrounds) */
  #leistungen{ background:var(--bg2); padding-top:62px; }
  #verfahren{ background:var(--bg); }
  #vergleich{ background:var(--bg2); }
  #faq{ background:var(--bg); }
  #galerie{ background:var(--bg2); }
  #werk{ background:var(--bg); }
  #kontakt{ background:var(--bg2); }

  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:20px; margin-bottom:42px; border-bottom:1px solid var(--line); padding-bottom:18px;
  }
  .section-head h2{ font-size:clamp(1.53rem,2.89vw,2.04rem); }
  .section-tag{ font-family:'IBM Plex Mono', monospace; font-size:0.9rem; color:var(--gold); }
  .section-head h2{ min-width:0; }
  .section-tag{ flex-shrink:0; max-width:45%; text-align:right; }

  /* leistungen */
  .services{ background:var(--bg2); }

  /* faq accordion */
  .faq-columns{ display:grid; grid-template-columns:1fr; column-gap:56px; max-width:760px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item:last-child{ border-bottom:none; }
  .faq-item:first-child{ border-top:none; }
  @media (min-width:900px){
    .faq-columns{ grid-template-columns:1fr 1fr; max-width:none; }
  }
  .faq-question{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
    background:none; border:none; text-align:left; cursor:pointer;
    padding:14px 2px; color:var(--ink); font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:600; font-size:0.88rem;
    position:relative;
  }
  .faq-question::after{
    content:''; position:absolute; left:2px; right:2px; bottom:8px; height:2px;
    background:var(--gold); opacity:0.85; transform:scaleX(0); transform-origin:left;
    transition:transform 0.25s ease;
  }
  .faq-question:hover::after{ transform:scaleX(1); }
  .faq-icon{
    position:relative; flex:none; width:16px; height:16px;
  }
  .faq-icon::before, .faq-icon::after{
    content:''; position:absolute; top:50%; left:50%; background:currentColor;
    transform:translate(-50%,-50%);
    transition: transform 0.25s ease;
  }
  .faq-icon::before{ width:16px; height:1.5px; }
  .faq-icon::after{ width:1.5px; height:16px; }
  .faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
  .faq-item.open .faq-question{ color:var(--gold); }
  .faq-answer-wrap{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.3s ease;
  }
  .faq-item.open .faq-answer-wrap{ grid-template-rows:1fr; }
  .faq-answer-inner{ overflow:hidden; }
  .faq-answer-inner p{ color:var(--steel); padding:0 2px 22px; max-width:60ch; font-size:0.96rem; }
  .service-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line);
  }
  .service-cell{
    background:var(--bg2); padding:30px 28px;
    transition: background 0.25s ease;
  }
  .service-cell:hover{ background:#1c1c1a; }
  .service-icon{ color:var(--gold); margin-bottom:16px; display:block; transition: transform 0.25s ease; }
  .service-cell:hover .service-icon{ transform:scale(1.08); }
  .service-cell h3{ font-size:1.1rem; font-weight:600; margin-bottom:10px; font-family:'Plus Jakarta Sans', sans-serif; }
  .service-cell p{ color:var(--steel); font-size:0.92rem; max-width:38ch; }

  /* verfahren */
  .process-circles{
    position:relative;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:24px;
  }
  .process-circles::before{
    content:'';
    position:absolute; left:calc(10% - 20px); right:calc(10% - 20px); top:35px;
    height:1px; background:var(--line); z-index:0;
  }
  .process-circle-item{ text-align:center; }
  .process-circle{
    position:relative; z-index:1;
    width:70px; height:70px; margin:0 auto 22px;
    border-radius:50%; border:1.5px solid var(--gold); color:#ffffff;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; font-size:1.04rem;
  }
  .process-circle-item h3{ font-size:1.05rem; font-weight:600; margin-bottom:8px; font-family:'Plus Jakarta Sans', sans-serif; }
  .process-circle-item p{ color:var(--steel); font-size:0.88rem; max-width:24ch; margin:0 auto; }
  @media (max-width: 900px){
    .process-circles{ grid-template-columns:repeat(2, 1fr); row-gap:36px; }
    .process-circles::before{ display:none; }
  }
  @media (max-width: 560px){
    .process-circles{ grid-template-columns:1fr; }
  }

  /* vergleich */
  .compare{ background:var(--bg2); }

  .duel{ max-width:874px; margin:0 auto; position:relative; }
  .duel::before{
    content:''; position:absolute; left:50%; top:56px; bottom:0; width:1px;
    background:var(--line);
  }
  .duel-header{
    display:grid; grid-template-columns:1fr 69px 1fr; align-items:center;
    padding-bottom:20px; margin-bottom:16px; position:relative; z-index:1;
  }
  .duel-title{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:1.21rem; }
  .duel-title.duel-us{ color:#ffffff; text-align:center; }
  .duel-title.duel-them{ color:#ffffff; text-align:center; }
  .duel-vs{
    justify-self:center; width:46px; height:46px; border-radius:50%;
    border:1.4px solid var(--gold); color:var(--ink); background:var(--bg2);
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; font-size:0.9rem; font-weight:600;
    animation: vsGlow 2.6s ease-in-out infinite;
  }
  @keyframes vsGlow{
    0%, 100%{ box-shadow:0 0 0 0 rgba(216,36,44,0.45); }
    50%{ box-shadow:0 0 0 7px rgba(216,36,44,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .duel-vs{ animation:none; }
  }
  .duel-row{
    display:grid; grid-template-columns:1fr 161px 1fr; align-items:center;
    padding:18px 0; border-top:1px solid var(--line); position:relative; z-index:1;
  }
  .duel-label{
    text-align:center; font-family:'Plus Jakarta Sans', sans-serif; font-size:0.8rem;
    color:var(--gold); text-transform:uppercase; letter-spacing:0.14em; font-weight:700;
    justify-self:center; position:relative; z-index:1; background:var(--bg2); padding:6px 10px 6px calc(10px + 0.14em); white-space:nowrap;
  }
  .duel-cell{ display:flex; align-items:center; gap:11px; font-size:1.06rem; }
  .duel-cell.duel-us{ justify-content:flex-start; text-align:left; color:var(--ink); }
  .duel-cell.duel-us svg{ color:var(--gold); flex-shrink:0; }
  .duel-cell.duel-them{ justify-content:flex-start; text-align:right; color:#ffffff; flex-direction:row-reverse; }
  .duel-cell.duel-them svg{ color:var(--steel-2); flex-shrink:0; }
  @media (max-width: 700px){
    .duel::before{ display:none; }
    .duel-header{ grid-template-columns:1fr; gap:10px; text-align:center; }
    .duel-vs{ margin:0 auto; }
    .duel-row{ grid-template-columns:1fr; gap:10px; text-align:center; }
    .duel-label{ order:-1; }
    .duel-cell.duel-us, .duel-cell.duel-them{ justify-content:center; text-align:center; }
  }

  /* über uns */
  .about-mark-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:40px; }
  .about-graphic{ display:flex; align-items:center; gap:16px; }
  .about-graphic-line{ position:relative; width:130px; height:1px; background:linear-gradient(90deg, var(--line), var(--gold)); }
  .about-graphic-dot{
    position:absolute; right:-2px; top:50%; width:5px; height:5px; border-radius:50%;
    background:var(--gold); transform:translate(50%,-50%);
    box-shadow:none;
  }
  .about-graphic-label{
    font-family:'IBM Plex Mono', monospace; font-size:0.902rem; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--steel); display:flex; gap:10px; align-items:center;
  }
  .about-graphic-sep{ color:var(--steel); }
  @media (max-width:700px){
    .about-graphic-line{ width:64px; }
    .about-graphic-label{ font-size:0.792rem; letter-spacing:0.08em; text-align:center; }
  }
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr 220px; gap:48px;
    margin-top:8px;
  }
  .about-photo img{
    width:100%; height:auto; display:block; border:1px solid var(--line);
  }
  .about-photo-caption{
    margin-top:10px; font-size:0.653rem; line-height:1.5; color:var(--steel-2);
    font-family:'IBM Plex Mono', monospace; text-transform:uppercase;
  }
  .about-photo-name{
    color:var(--steel-2);
  }
  .about-grid > div:nth-child(2){
    border-left:1px solid var(--line); padding-left:48px;
  }
  .about-grid p{ color:var(--steel); margin-bottom:14px; max-width:52ch; }
  .about-grid p:not(.about-lead):not(.about-photo-caption){ font-size:0.9rem; }
  .about-lead{
    color:var(--ink) !important; font-size:1.15rem; font-weight:500;
    font-family:'Plus Jakarta Sans', sans-serif; line-height:1.4;
  }
  .about-lead-regular{ font-weight:400; }
  .about-note{ margin-top:22px; display:flex; align-items:center; gap:10px; }
  .about-note-dot{
    flex-shrink:0; width:6px; height:6px; border-radius:50%;
    background:var(--gold); box-shadow:none;
  }
  .about-note-kicker{
    font-family:'IBM Plex Mono', monospace; font-size:0.634rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--steel-2); margin-bottom:4px;
  }
  .about-note-text{ font-size:0.748rem; color:var(--steel); font-style:italic; }
  .about-note + .about-note{ margin-top:10px; }
  .about-note-text b{ font-style:normal; color:var(--ink); font-weight:600; }

  .cert-trigger{
    position:relative; cursor:pointer;
    border-bottom:1px dotted var(--steel-2);
    transition: border-color 0.2s ease;
  }
  .cert-trigger:hover, .cert-trigger:focus-visible, .cert-trigger.open{
    border-bottom-color:var(--gold); outline:none;
  }
  .cert-popover{
    position:absolute; left:0; bottom:calc(100% + 12px); z-index:40;
    width:180px; max-width:calc(100vw - 64px);
    background:var(--bg2); border:1px solid var(--line);
    padding:8px 8px 7px;
    box-shadow:0 16px 36px rgba(0,0,0,0.55);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events:none;
  }
  .cert-trigger:hover .cert-popover,
  .cert-trigger:focus-within .cert-popover,
  .cert-trigger.open .cert-popover{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  }
  .cert-popover img{
    display:block; width:100%; height:auto; border:1px solid var(--line);
  }
  .cert-popover-hint{
    display:block; margin-top:6px; font-size:0.6rem; font-style:normal;
    letter-spacing:0.04em; color:var(--steel-2); text-align:center;
    font-family:'IBM Plex Mono', monospace; text-transform:uppercase;
  }

  .cert-lightbox{
    display:none; position:fixed; inset:0; z-index:1100;
    background:rgba(5,5,5,0.92);
    align-items:center; justify-content:center;
    padding:32px;
    overflow-y:auto;
  }
  .cert-lightbox.open{ display:flex; }
  .cert-lightbox img{
    display:block; max-width:min(560px, 100%); max-height:85vh; width:auto; height:auto;
    border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,0.6);
  }
  .cert-lightbox-close{
    position:fixed; top:20px; right:20px; z-index:1101;
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    background:var(--bg2); color:var(--ink); border:1px solid var(--line);
    font-size:1.5rem; line-height:1; cursor:pointer;
  }
  .cert-lightbox-close:hover{ border-color:var(--gold); color:var(--gold); }
  @media (min-width: 781px){
    /* Desktop: Zertifikat mittig über dem gesamten Textblock statt linksbündig */
    .about-note-text{ position:relative; }
    .cert-trigger{ position:static; }
    .cert-popover{ left:50%; transform:translate(-50%, 6px); }
    .cert-trigger:hover .cert-popover,
    .cert-trigger:focus-within .cert-popover,
    .cert-trigger.open .cert-popover{ transform:translate(-50%, 0); }
  }
  @media (max-width: 780px){
    .cert-popover{
      position:fixed; left:50%; right:auto; bottom:auto; top:50%;
      transform:translate(-50%,-50%) scale(0.96);
      width:min(260px, calc(100vw - 56px));
    }
    .cert-trigger:hover .cert-popover,
    .cert-trigger:focus-within .cert-popover,
    .cert-trigger.open .cert-popover{
      transform:translate(-50%,-50%) scale(1);
    }
  }
  .stat-block{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:6px; }
  .stat{ border-top:1px solid var(--line); padding-top:12px; }
  .stat b{ display:block; font-family:'Plus Jakarta Sans', sans-serif; font-size:2.1rem; color:var(--gold); }
  .stat span{ font-size:0.84rem; color:var(--steel); }

  /* kontakt */
  .contact{ background:var(--bg2); }
  .contact-grid{ display:grid; grid-template-columns:0.7fr 1.0fr 0.7fr 0.6fr; gap:32px; align-items:start; margin-top:48px; }
  .contact-nav{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .contact-map-col{ margin-left:-28px; }
  .contact-nav-list{ list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .contact-nav-list a{
    color:var(--ink); text-decoration:none; font-size:1.05rem;
    transition: color 0.2s ease;
  }
  .contact-nav-list a:hover{ color:var(--gold); }
  .contact-socials{ display:flex; flex-direction:column; align-items:flex-end; gap:16px; }

  .mini-map{ width:100%; max-width:none; margin-top:10px; position:relative; }
  .mini-map img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
  .mini-map-label{
    text-align:center; margin-top:10px; font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700; letter-spacing:0.1em; font-size:0.85rem; color:var(--ink);
  }
  .mini-map-marker{
    position:absolute; left:38%; top:50%; width:8px; height:8px;
    background:var(--gold); border-radius:50%; transform:translate(-50%,-50%);
    box-shadow:0 0 0 3.6px rgba(216,36,44,0.42);
  }
  .mini-map-marker{ display:block; cursor:pointer; z-index:2; }
  .mini-map-marker::before{ content:''; position:absolute; inset:-12px; border-radius:50%; }
  .mini-map-marker::after{
    content:''; position:absolute; inset:0;
    border-radius:50%; border:1.68px solid var(--gold);
    transform-origin:center;
    animation: pulse-strong-map 2.2s ease-out infinite;
  }
  @keyframes pulse-strong-map{
    0%{ transform:scale(0.3); opacity:1; }
    100%{ transform:scale(3.816); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .mini-map-marker::after{ animation:none; opacity:0; }
  }
  .social-label{ display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; color:#6A6A66; font-family:'IBM Plex Mono', monospace; font-weight:700; }
  .social-btn-row{ display:flex; gap:10px; margin-top:10px; }
  .contact-info dt{ display:flex; align-items:center; gap:8px; font-size:0.8rem; color:#6A6A66; margin-top:18px; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-weight:700; }
  .contact-info dt:first-child{ margin-top:0; }
  .contact-info .dt-icon, .social-label .dt-icon{ color:var(--gold); flex-shrink:0; }
  .contact-info dd{ font-size:0.924rem; margin-top:4px; }
  .contact-info dt:first-child + dd{ margin-top:18px; }
  .contact-info a{ text-decoration:none; border-bottom:1px solid var(--steel-2); }

  .kontakt-form-band{ background:var(--bg2); }
  .kontakt-divider{ border-top:1px solid var(--line); }
  .kontakt-form-band .wrap{ padding-top:20px; padding-bottom:40px; }
  .kontakt-form{
    margin-top:0; padding-bottom:0; border-bottom:none;
    max-width:640px;
  }
  .kontakt-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .kontakt-form .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
  .kontakt-form label{ font-size:0.82rem; color:var(--steel); }
  .kontakt-form input, .kontakt-form textarea{
    background:var(--bg); border:1px solid var(--steel); border-radius:2px;
    color:var(--ink); font-family:'Inter'; font-size:0.98rem; padding:11px 14px; outline:none;
  }
  .kontakt-form input:focus, .kontakt-form textarea:focus{ border-color:var(--ink); }
  .kontakt-form textarea{ resize:vertical; min-height:100px; }
  .kontakt-form .file-upload{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:var(--bg); border:1px solid var(--steel); border-radius:2px;
    padding:9px 12px; font-size:0.88rem; color:var(--steel);
  }
  .kontakt-form .file-upload-btn{
    display:inline-block; flex-shrink:0; background:#E8E8E6; color:#111;
    border-radius:2px; padding:7px 16px; font-size:0.85rem; font-family:inherit;
    font-weight:500; cursor:pointer; white-space:nowrap; transition:background 0.2s ease;
  }
  .kontakt-form .file-upload-btn:hover{ background:#ffffff; }
  .kontakt-form .file-upload-status{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kontakt-form .file-upload-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .kontakt-form .btn{ margin-top:8px; cursor:pointer; transition: border-color 0.3s ease; }
  .kontakt-form .btn:hover, .kontakt-form .btn:focus-visible{ border-color:#ffffff; outline:none; }
  .form-hint{ font-size:0.85rem; color:var(--steel); margin-top:10px; min-height:1.2em; }
  .form-hint.error{ color:var(--gold); }
  .form-hint.success{ color:#7fd18a; }
  @media (max-width: 560px){
    .kontakt-form .form-row{ grid-template-columns:1fr; }
  }

  /* ablation animation */
  .ablation-section{ background:var(--bg2); }
  .ablation-caption{ color:var(--steel); max-width:56ch; margin-bottom:36px; font-size:0.98rem; }

  /* gallery */
  .gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }

  /* quicksteps */
  .quicksteps-row{
    position:relative;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:1px;
    background:var(--line);
  }
  .quicksteps-row::before{
    content:'';
    position:absolute; left:calc(10% - 20px); right:calc(10% - 20px); top:52px;
    height:1px; background:var(--line); z-index:0;
  }
  .quickstep{
    position:relative; background:var(--bg2);
    padding:26px 20px 28px;
  }
  .quickstep-num{
    position:relative; z-index:1;
    width:40px; height:40px; border-radius:50%;
    border:1.4px solid var(--gold); color:var(--gold);
    background:var(--bg2);
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono', monospace; font-size:0.95rem;
    margin-bottom:20px;
  }
  .quickstep h3{ font-size:1.05rem; font-weight:600; margin-bottom:8px; font-family:'Plus Jakarta Sans', sans-serif; }
  .quickstep p{ color:var(--steel); font-size:0.9rem; max-width:26ch; }
  @media (max-width: 900px){
    .quicksteps-row{ grid-template-columns:repeat(2, 1fr); }
    .quicksteps-row::before{ display:none; }
  }
  @media (max-width: 560px){
    .quicksteps-row{ grid-template-columns:1fr; }
  }
  .gallery-tile{ }
  .tile-split{
    position:relative; aspect-ratio:4/3; overflow:hidden;
    border:1px solid var(--line); transition: border-color 0.2s ease;
    --pos:50%; cursor:ew-resize; touch-action:none; -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  .tile-clean{
    position:absolute; inset:0;
    background:linear-gradient(135deg, #e7e6e1, #b5b4ae);
  }
  .tile-dirty{
    position:absolute; inset:0;
    background:linear-gradient(135deg, #6b3a22, #38200f);
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  }
  .tile-caption{ margin-top:10px; font-size:0.88rem; color:var(--steel); }
  .tile-dirty.tile-photo, .tile-clean.tile-photo{
    background-size:cover; background-position:center; background-repeat:no-repeat;
  }
  .tile-divider{
    position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--gold);
    transform:translateX(-50%); box-shadow:0 0 8px rgba(216,36,44,0.65); pointer-events:none;
  }
  .tile-handle{
    position:absolute; top:50%; left:var(--pos); width:32px; height:32px; border-radius:50%;
    background:var(--bg); border:1.5px solid var(--gold); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,0.5);
  }
  .tile-badge{
    position:absolute; bottom:10px; padding:4px 9px; border-radius:3px;
    background:rgba(9,9,9,0.75); font-family:'IBM Plex Mono', monospace; font-size:0.6rem;
    letter-spacing:0.1em; text-transform:uppercase; font-weight:700; pointer-events:none;
  }
  .tile-badge-before{ left:10px; color:var(--ink); }
  .tile-badge-after{ right:10px; color:var(--gold); }
  .tile-split.is-dragging{ cursor:ew-resize; }
  .tile-split:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  @media (max-width: 780px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 480px){
    .gallery-grid{ grid-template-columns:1fr; }
  }
  .ablation-wrap{ display:flex; justify-content:center; margin-top:56px; }
  .ablation-diagram{ width:100%; max-width:640px; height:auto; }
  .ablation-diagram .clean-rect{
    animation: clean-grow 5s ease-in-out infinite alternate;
  }
  .ablation-diagram .head{
    animation: head-sweep 5s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 4px rgba(196,33,40,0.55));
  }
  .ablation-diagram .spark{
    transform-origin:center; transform-box:fill-box;
    animation: spark-rise 0.9s ease-out infinite;
  }
  .spark-1{ animation-delay:0s; }
  .spark-2{ animation-delay:0.3s; }
  .spark-3{ animation-delay:0.6s; }
  .ablation-label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; fill:var(--steel);
  }
  .label-dirty{ fill:#7C7F83; }
  .label-clean{ fill:#ffffff; }
  @keyframes head-sweep{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(580px); }
  }
  @keyframes clean-grow{
    0%{ width:0px; }
    100%{ width:580px; }
  }
  @keyframes spark-rise{
    0%{ transform:translateY(0) scale(1); opacity:0.9; }
    100%{ transform:translateY(-20px) scale(0.4); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .ablation-diagram .clean-rect, .ablation-diagram .head, .ablation-diagram .spark{
      animation:none;
    }
    .ablation-diagram .clean-rect{ width:290px; }
    .ablation-diagram .head{ transform:translateX(290px); }
  }

  footer{ padding:26px 0; font-size:0.82rem; color:var(--steel-2); border-top:1px solid var(--line); }

  /* impressum overlay — clearly separated "page" */
  /* back to top */
  .back-to-top{
    position:fixed; left:50%; bottom:18px; z-index:80;
    display:flex; align-items:center; gap:8px;
    background:var(--bg2); color:var(--ink);
    border:1px solid var(--line); border-radius:999px;
    padding:11px 18px 11px 16px;
    font-family:'IBM Plex Mono', monospace; font-size:0.75rem; letter-spacing:0.06em;
    cursor:pointer;
    opacity:0; visibility:hidden; transform:translateX(-50%) translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, visibility 0.3s;
  }
  .back-to-top.visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
  .back-to-top:hover, .back-to-top:focus, .back-to-top:focus-visible{ color:var(--gold); border-color:var(--line); outline:none; }
  body:has(#navlist.open) .back-to-top{ opacity:0 !important; visibility:hidden !important; pointer-events:none; }
  @media (max-width: 780px){
    .back-to-top{ bottom:18px; padding:10px 14px 10px 12px; }
  }

  /* sticky mobile call bar */
  .mobile-call-bar{ display:none; }
  @media (max-width: 780px){
    .mobile-call-bar{
      display:flex; align-items:stretch; justify-content:center;
      position:fixed; left:0; right:0; bottom:0; z-index:850;
      background:var(--bg); border-top:1px solid #302f2e;
    }
    .mobile-call-bar-half{
      flex:1 1 50%; display:flex; align-items:center; justify-content:center; gap:10px; line-height:1;
      padding:19px 20px calc(19px + env(safe-area-inset-bottom, 0px));
      text-decoration:none; color:var(--ink);
      font-family:'Inter', sans-serif; font-weight:700; font-size:0.88rem; letter-spacing:0.05em;
    }
    .mobile-call-bar-half svg{ flex-shrink:0; color:var(--gold); display:block; }
    .mobile-call-bar-half:active{ background:var(--bg2); }
    .back-to-top{ bottom:79px; }
    .cookie-banner{ padding-bottom:calc(18px + 68px + env(safe-area-inset-bottom, 0px)); }
    body{ padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px)); }
  }

  .impressum-overlay{
    display:none;
    position:fixed; inset:0; z-index:1000;
    background:var(--bg);
    overflow-y:auto;
  }
  .impressum-overlay.open{ display:block; }
  .impressum-inner{ max-width:760px; margin:0 auto; padding:32px 32px 80px; }
  .impressum-header{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:22px; margin-bottom:36px; border-bottom:1px solid var(--line);
  }
  .logo-mini b{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:500; font-size:1.1rem; letter-spacing:0.05em; }
  .impressum-inner h1{ font-size:clamp(1.9rem, 4vw, 2.5rem); margin-bottom:8px; }
  .impressum-inner h2.legal-title{ font-size:clamp(1.9rem, 4vw, 2.5rem); margin-bottom:8px; text-transform:none; letter-spacing:-0.01em; color:var(--ink); font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; }
  .impressum-subtitle{ color:var(--steel); font-size:0.95rem; margin-bottom:44px; }
  .impressum-inner section{ margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--line); }
  .impressum-inner section:last-of-type{ border-bottom:none; }
  .impressum-inner h2{
    font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--gold); margin-bottom:14px; font-family:'IBM Plex Mono', monospace;
  }
  .impressum-inner p{ color:var(--steel); margin-bottom:8px; max-width:58ch; font-size:0.96rem; }
  .impressum-inner p strong{ color:var(--ink); font-weight:600; }
  .inline-link{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--steel-2); }
  .inline-link:hover{ border-color:var(--gold); color:var(--gold); }
  .impressum-note{
    margin-top:44px; padding:16px 18px; background:var(--bg2); border:1px solid var(--line);
    font-size:0.85rem; color:var(--steel-2);
  }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
  .footer-row .wrap-links{ display:flex; gap:20px; }
  .footer-link{ color:var(--steel-2); text-decoration:none; border-bottom:1px solid var(--line); }

  .cookie-banner{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:900;
    background:var(--bg); border-top:1px solid var(--gold);
    padding:18px 24px;
    align-items:center; justify-content:center; gap:24px; flex-wrap:wrap;
  }
  .cookie-banner.visible{ display:flex; }
  .cookie-banner p{
    margin:0; color:var(--steel); font-size:0.85rem; max-width:640px;
  }
  .cookie-banner a{ color:var(--ink); border-bottom:1px solid var(--gold); text-decoration:none; }
  .cookie-banner button{
    background:var(--bg); color:var(--ink); border:1px solid var(--gold);
    padding:9px 22px; font-family:'Inter', sans-serif; font-size:0.85rem; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
  .cookie-banner button:hover{ background:var(--gold); color:#000000; }
  @media (max-width:600px){
    .cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; }
  }
  .social-btn{
    width:36px; height:36px; border-radius:50%;
    border:1.3px solid var(--steel); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .social-btn:hover{ border-color:var(--gold); color:var(--gold); }
  @media (max-width: 560px){
    .footer-row{ flex-direction:column; gap:16px; align-items:flex-start; }
  }
  .footer-link:hover{ color:var(--gold); border-color:var(--gold); }

  :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  @media (max-width: 900px){
    .service-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  .nav-backdrop{
    display:none; position:fixed; inset:0; z-index:39;
    background:rgba(0,0,0,0.55);
    opacity:0; transition:opacity 0.25s ease;
  }
  .nav-backdrop.open{ display:block; opacity:1; }
  @media (max-width: 780px){
    .nav ul{
      position:fixed; left:0; right:0; background:var(--bg);
      flex-direction:column; z-index:40; gap:0;
      border:none; border-radius:0;
      max-height:60vh; overflow-y:auto;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity 0.35s ease, visibility 0s linear 0.35s;
    }
    .nav ul.open{
      opacity:1; visibility:visible; pointer-events:auto;
      transition:opacity 0.35s ease, visibility 0s linear 0s;
    }
    .nav ul li{ border-top:1px solid var(--line); width:100%; text-align:center; }
    .nav ul li:last-child{ border-bottom:1px solid var(--line); }
    #navlist a{ display:block; width:100%; height:40px; line-height:40px; padding:0 20px; margin:0; text-align:center; font-size:0.9rem; box-sizing:border-box; }
    .nav-toggle{ display:block; }
    .service-grid{ grid-template-columns:1fr; }
    .about-grid{ grid-template-columns:1fr; gap:20px; }
    .about-grid > div:nth-child(2){ border-left:none; padding-left:0; }
    .about-grid > div:not(:last-child) > p:last-child{ margin-bottom:0; }
    .about-photo{ max-width:220px; margin-left:auto; margin-right:auto; order:-1; }
    .contact-grid{ grid-template-columns:1fr; gap:36px; }
    .contact-nav, .contact-nav-list, .contact-socials{ align-items:flex-start; }
    .contact-map-col{ margin-left:0; }
    .mini-map{ max-width:280px; margin:0 auto; }
  }

  /* =========================================================
     Mehrseiten-Version: Menü-Dropdowns, Unterseiten
     ========================================================= */
  a.logo{ text-decoration:none; color:inherit; }
  #navlist .nav-dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; }
  #navlist .nav-dropdown-menu{ display:block; min-width:250px; padding:8px 0; text-align:left; }
  #navlist .nav-dropdown-menu a{
    display:block; text-transform:none; letter-spacing:0; font-weight:500; font-size:0.9rem;
    padding:7px 20px; text-align:left; color:var(--steel); white-space:nowrap;
  }
  #navlist .nav-dropdown-menu a::after{ display:none; }
  #navlist .nav-dropdown-menu a:hover, #navlist .nav-dropdown-menu a[aria-current="page"]{ color:var(--ink); }
  @media (max-width: 780px){
    .nav ul{ max-height:calc(100vh - 140px); }
    #navlist .nav-dropdown-trigger{ display:flex; justify-content:center; }
    #navlist .nav-dropdown-menu,
    #navlist .nav-dropdown:hover .nav-dropdown-menu,
    #navlist .nav-dropdown:focus-within .nav-dropdown-menu{
      position:static; display:none; opacity:1; visibility:visible; pointer-events:auto;
      transform:none; margin:0; border:none; border-top:1px solid var(--line); background:#0f0f0f; min-width:0; padding:4px 0;
      max-height:none; overflow:visible;
    }
    #navlist .nav-dropdown.open .nav-dropdown-menu{ display:block; }
    #navlist .nav-dropdown:hover .nav-dropdown-chevron,
    #navlist .nav-dropdown:focus-within .nav-dropdown-chevron{ transform:none; }
    #navlist .nav-dropdown.open .nav-dropdown-chevron{ transform:rotate(180deg); }
    #navlist .nav-dropdown-menu li{ border:none !important; }
    #navlist .nav-dropdown-menu a{ height:36px; line-height:36px; padding:0 20px; text-align:center; font-size:0.86rem; }
    #navlist .nav-dropdown-menu a[aria-current="page"]{ box-shadow:none; color:var(--gold); }
    .nav-dropdown::after{ display:none; }
  }

  /* Leistungskacheln als Links */
  a.service-cell{ display:block; text-decoration:none; color:inherit; }
  .service-more{
    display:inline-block; margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:0.74rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--gold);
  }
  .service-more span{ display:inline-block; transition:transform 0.25s ease; }
  a.service-cell:hover .service-more span{ transform:translateX(4px); }
  a.service-cell:hover h3{ color:var(--ink); }

  /* Unterseiten: Kopfbild */
  .page-banner{ height:calc(30vh + 40px); min-height:260px; max-height:360px; }
  .page-banner .photo-banner-img img{ filter:grayscale(25%) contrast(1.05) brightness(0.55); }
  .page-banner .photo-banner-img::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(9,9,9,0.15) 0%, rgba(9,9,9,0.55) 70%, var(--bg) 100%);
  }
  .page-hero-overlay{ align-items:flex-end; padding-bottom:34px; }
  .page-hero-overlay .wrap{ width:100%; text-align:left; }
  .page-kicker{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--gold); margin-bottom:12px; text-shadow:0 1px 3px rgba(0,0,0,0.7);
  }
  .page-title{
    font-size:clamp(2rem, 5.4vw, 3.4rem); font-weight:800; letter-spacing:-0.02em; line-height:1.05;
    text-shadow:0 1px 3px rgba(0,0,0,0.6), 0 10px 32px rgba(0,0,0,0.45);
    hyphens:manual;
  }
  .page-intro{ padding:30px 0 40px; background:var(--bg); }
  .breadcrumb{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--steel-2); margin-bottom:28px;
  }
  .breadcrumb a{ color:var(--steel); text-decoration:none; }
  .breadcrumb a:hover{ color:var(--gold); }
  .breadcrumb span[aria-current]{ color:var(--ink); }
  .page-lead{
    font-family:'Plus Jakarta Sans', sans-serif; font-size:clamp(1.15rem, 2.2vw, 1.5rem); font-weight:500;
    line-height:1.45; max-width:34ch; color:var(--ink);
  }
  .page-cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
  .page-cta-left{ justify-content:flex-start; }
  .page-cta .btn{
    background:transparent; border:1px solid var(--gold); padding:15px 34px;
    font-size:0.902rem; font-weight:500; letter-spacing:0.1em; text-decoration:none;
    transition:border-color 0.3s ease;
  }
  .page-cta .btn:hover{ border-color:var(--ink); }
  .page-cta .btn-ghost{ border-color:#5C5C59; }
  .page-cta .btn-ghost:hover{ border-color:var(--ink); }
  @media (max-width:600px){ .page-cta .btn{ width:100%; max-width:300px; justify-content:center; } }

  /* Unterseiten: Sektionen */
  .sub-section{ padding:72px 0; }
  .sec-alt{ background:var(--bg2); }
  .sec-base{ background:var(--bg); }
  .sec-base .service-cell{ background:var(--bg); }
  .sec-base .service-cell:hover{ background:#121211; }
  .prose{ columns:2 340px; column-gap:56px; }
  .prose p{ color:var(--steel); font-size:0.98rem; margin-bottom:16px; break-inside:avoid; }
  .prose p b{ color:var(--ink); font-weight:600; }
  .check-list{ list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); }
  .check-list li{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; background:inherit; }
  .sec-alt .check-list li{ background:var(--bg2); }
  .sec-base .check-list li{ background:var(--bg); }
  .check-list svg{ color:var(--gold); flex-shrink:0; margin-top:2px; }
  .check-list span{ color:var(--ink); font-size:0.97rem; }
  .step-list{ list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); }
  .step-list li{ padding:28px 24px; }
  .sec-alt .step-list li{ background:var(--bg2); }
  .sec-base .step-list li{ background:var(--bg); }
  .step-num{ display:inline-flex; width:40px; height:40px; border-radius:50%; border:1.4px solid var(--gold); color:var(--gold);
    align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:0.9rem; margin-bottom:18px; }
  .step-list h3{ font-size:1.05rem; font-weight:600; margin-bottom:8px; font-family:'Plus Jakarta Sans', sans-serif; }
  .step-list p{ color:var(--steel); font-size:0.9rem; }
  .page-figure{ max-width:640px; }
  .figure-hint{ margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel-2); }
  .faq-columns.faq-single{ grid-template-columns:1fr; max-width:820px; }
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cmp-table{ width:100%; border-collapse:collapse; min-width:720px; font-size:0.92rem; }
  .cmp-table th, .cmp-table td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
  .cmp-table thead th{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem; }
  .cmp-table thead th:nth-child(2){ color:var(--gold); }
  .cmp-table tbody th{ color:var(--ink); font-weight:600; white-space:nowrap; }
  .cmp-table td{ color:var(--steel); }
  .cmp-table td.is-us{ color:var(--ink); background:rgba(216,36,44,0.06); }
  .mat-badge{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:3px 8px; border:1px solid; margin-bottom:14px; }
  .mat-ok{ color:#e9e9e6; border-color:#5C5C59; }
  .mat-mid{ color:var(--steel); border-color:#3a3a38; border-style:dashed; }
  .mat-no{ color:var(--gold); border-color:var(--gold); }
  .cert-block{ display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start; }
  .cert-thumb img{ width:100%; display:block; border:1px solid var(--line); transition:transform 0.25s ease; }
  .cert-thumb:hover img{ transform:scale(1.02); }
  .cert-block .prose{ columns:auto; }
  .text-link{ color:var(--gold); text-decoration:none; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; }

  /* CTA-Band */
  .cta-band{ padding:96px 0; background:var(--bg); text-align:center; border-top:1px solid var(--line); }
  .cta-kicker{ font-family:'IBM Plex Mono', monospace; font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
  .cta-band h2{ font-size:clamp(1.6rem, 3.6vw, 2.5rem); line-height:1.2; }
  .cta-point{ position:relative; display:inline-block; }
  .cta-point::after{ content:''; position:absolute; left:0.05em; right:0.05em; bottom:-0.06em; height:2px; background:var(--gold); }
  .cta-text{ color:var(--steel); max-width:56ch; margin:20px auto 0; }

  @media (max-width: 900px){
    .step-list{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 780px){
    .check-list{ grid-template-columns:1fr; }
    .step-list{ grid-template-columns:1fr; }
    .prose{ columns:1; }
    .cert-block{ grid-template-columns:1fr; gap:24px; }
    .cert-thumb{ max-width:220px; }
    .sub-section{ padding:56px 0; }
    .page-intro{ padding:24px 0 32px; }
    .page-banner{ min-height:220px; }
    .cta-band{ padding:72px 0; }
  }
  .check-list li:last-child:nth-child(odd){ grid-column:1 / -1; }


  /* Dropdown schließt bündig an die Header-Unterkante an (oben und im verkleinerten Header) */
  @media (min-width: 781px){
    #navlist .nav-dropdown-menu{ margin-top:15px; }
    .nav-dropdown::after{ height:15px; }
    header.header-scrolled #navlist .nav-dropdown-menu{ margin-top:12px; }
    header.header-scrolled .nav-dropdown::after{ height:12px; }
  }

  /* Übersichts-Eintrag (Alle Leistungen / Ablauf) im Dropdown fett */
  #navlist .nav-dropdown-menu li:first-child a{ font-weight:700; color:var(--ink); }

  /* Aktive Unterseite im Dropdown: roter Balken links (CI-Rot) */
  #navlist .nav-dropdown-menu a[aria-current="page"]{ position:relative; color:var(--ink); }
  #navlist .nav-dropdown-menu a[aria-current="page"]::before{
    content:''; position:absolute; left:8px; top:50%; width:2px; height:16px; border-radius:0;
    background:var(--gold); transform:translateY(-50%);
  }
  @media (max-width: 780px){
    #navlist .nav-dropdown-menu a[aria-current="page"]{ color:var(--ink); }
    #navlist .nav-dropdown-menu a[aria-current="page"]::before{
      position:static; display:inline-block; vertical-align:middle; width:2px; height:14px; margin:-3px 10px 0 0; transform:none;
    }
  }

  /* Menü-Knopf: drei Striche verwandeln sich sanft in ein Kreuz */
  .nav-toggle{ line-height:0; padding:0; width:30px; height:30px; position:absolute; }
  .nav-toggle .nt-bar{
    position:absolute; left:4px; right:4px; height:1.8px; border-radius:2px; background:currentColor;
    transition: transform .38s cubic-bezier(.65,0,.25,1), opacity .25s ease, top .38s cubic-bezier(.65,0,.25,1);
  }
  .nav-toggle .nt-1{ top:8px; }
  .nav-toggle .nt-2{ top:14px; }
  .nav-toggle .nt-3{ top:20px; }
  .nav-toggle[aria-expanded="true"] .nt-1{ top:14px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nt-2{ opacity:0; transform:scaleX(.2); }
  .nav-toggle[aria-expanded="true"] .nt-3{ top:14px; transform:rotate(-45deg); }
  @media (prefers-reduced-motion: reduce){ .nav-toggle .nt-bar{ transition:none; } }

  /* Links im Fließtext */
  .prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; text-decoration-thickness:1px; }
  .prose a:hover{ color:var(--gold); }

  /* Nachhaltigkeit: Text + Linien-Grafik */
  .feature-split{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
  .prose.prose-single{ columns:auto; max-width:620px; }
  .feature-art{ margin:0; }
  .eco-graphic{ display:block; width:100%; max-width:440px; height:auto; margin:0 auto; }
  .eco-labels text{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em; }
  .eco-hit{ transform-origin:228px 273px; animation:eco-hit 3.2s ease-out infinite; }
  @keyframes eco-hit{ 0%{ opacity:0.7; transform:scale(0.6); } 70%,100%{ opacity:0; transform:scale(1.6); } }
  @media (prefers-reduced-motion: reduce){ .eco-hit{ animation:none; opacity:0.5; } }
  /* NRW-Karte (Einsatzgebiet) */
  .nrw-map{ display:block; width:100%; max-width:440px; height:auto; margin:0 auto; }
  .nrw-land{ fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }
  .nrw-ring{ fill:none; stroke:var(--gold); stroke-width:1; stroke-dasharray:3 5; opacity:0.75; }
  .nrw-km{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.12em; fill:var(--gold); }
  .nrw-city{ fill:var(--ink); }
  .nrw-label{ font-family:'Inter', sans-serif; font-size:14px; fill:var(--steel); }
  .nrw-base{ fill:var(--gold); }
  .nrw-base-ring{ fill:none; stroke:var(--ink); stroke-width:1.3; }
  .nrw-base-label{ font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:600; letter-spacing:0.14em; fill:var(--ink); }
  .nrw-pulse{ fill:none; stroke:var(--gold); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:nrw-pulse 2.8s ease-out infinite; }
  @keyframes nrw-pulse{ 0%{ opacity:0.8; transform:scale(1); } 80%,100%{ opacity:0; transform:scale(2.4); } }
  @media (prefers-reduced-motion: reduce){ .nrw-pulse{ animation:none; opacity:0; } }
  /* Einsatzgebiet: Karte + Regionen */
  .citymap{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
  .citymap-art{ margin:0; }
  .citymap-art figcaption{ margin-top:14px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-2); }
  .region-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
  .region-item{ padding:16px 0 16px 18px; border-bottom:1px solid var(--line); position:relative; outline:none; transition:background-color .25s ease; }
  .region-item::before{ content:''; position:absolute; left:0; top:20px; width:2px; height:16px; background:var(--gold); opacity:0; transition:opacity .25s ease; }
  .region-item:hover::before, .region-item:focus-visible::before{ opacity:1; }
  .region-item h3{ margin:0 0 4px; font-size:1rem; }
  .region-item p{ margin:0; color:var(--steel); font-size:0.92rem; line-height:1.6; }
  .nrw-pt .nrw-city, .nrw-pt .nrw-label{ transition:fill .25s ease, opacity .25s ease; }
  .nrw-map.has-hl .nrw-pt:not(.is-hl) .nrw-label{ opacity:0.35; }
  .nrw-map.has-hl .nrw-pt:not(.is-hl) .nrw-city{ opacity:0.35; }
  .nrw-pt.is-hl .nrw-city{ fill:var(--gold); }
  .nrw-pt.is-hl .nrw-label{ fill:var(--ink); }
  @media (min-width:900px){ .citymap{ grid-template-columns:1.15fr 0.85fr; gap:64px; } }
  /* Weniger Luft zwischen Einleitung und erstem Abschnitt */
  .page-intro + .sub-section{ padding-top:20px; }
  @media (max-width:760px){ .page-intro + .sub-section{ padding-top:12px; } }
  /* Banner Nachhaltigkeit: Bildausschnitt auf die Figur legen */
  .page-banner .photo-banner-img img[src$="nachhaltigkeit-garten.jpg"]{ object-position:50% 60%; filter:grayscale(25%) contrast(1.05) brightness(0.64); }
  /* Video im Textblock (Sicherheit: Warnschild) */
  .feature-video{ display:block; width:100%; max-width:210px; height:auto; aspect-ratio:4/5; object-fit:cover; margin:0 auto; background:#1a1a1a; }
  /* Pflanzen: leichter Wind */
  .eco-graphic .sway{ transform-box:view-box; animation:eco-sway 6s ease-in-out infinite; }
  .eco-graphic .sway-stem{ transform-origin:330px 276px; --a:2.01deg; }
  .eco-graphic .sway-sprout{ transform-origin:396px 276px; --a:3.16deg; animation-duration:4.8s; animation-delay:-1.2s; }
  .eco-graphic .leaf-1{ transform-origin:328.76px 220px; --a:5.53deg; animation-duration:4.2s; animation-delay:-0.6s; }
  .eco-graphic .leaf-2{ transform-origin:329.56px 184px; --a:-4.75deg; animation-duration:5.1s; animation-delay:-2.1s; }
  .eco-graphic .leaf-3{ transform-origin:333.96px 140px; --a:6.32deg; animation-duration:3.8s; animation-delay:-1.4s; }
  .eco-graphic .leaf-4{ transform-origin:330px 92px; --a:-6.32deg; animation-duration:4.6s; animation-delay:-3s; }
  .eco-graphic .leaf-5{ transform-origin:397.7px 256px; --a:7.91deg; animation-duration:3.6s; animation-delay:-0.9s; }
  .eco-graphic .leaf-6{ transform-origin:396.71px 262px; --a:-7.91deg; animation-duration:4.1s; animation-delay:-2.4s; }
  @keyframes eco-sway{ 0%,100%{ transform:rotate(calc(var(--a) * -0.4)); } 50%{ transform:rotate(var(--a)); } }
  @media (prefers-reduced-motion: reduce){ .eco-graphic .sway{ animation:none; } }
  @media (min-width:900px){ .feature-split{ grid-template-columns:1.1fr 0.9fr; gap:64px; } }

  /* =========================================================
     Helle Ansicht (optional per Schalter, Standard bleibt dunkel)
     Helligkeit invertiert, CI-Rot bleibt.
     ========================================================= */
  html[data-theme="light"]{
    --bg: #F4F4F2;
    --bg2: #E9E9E6;
    --ink: #0F0F0E;
    --steel: #575754;
    --steel-2: #8E8E8A;
    --line: #D9D9D5;
    color-scheme: light;
  }
  /* Header bleibt in beiden Ansichten schwarz */
  html[data-theme="light"] header,
  html[data-theme="light"] .mobile-call-bar,
  html[data-theme="light"] .back-to-top{
    --bg: #090909; --bg2: #151515; --ink: #F4F4F2; --steel: #A3A3A0; --steel-2: #5C5C59; --line: #232322;
    color-scheme: dark;
  }
  html[data-theme="light"] .photo-banner-img{ background:linear-gradient(160deg, #E2E2DF, var(--bg) 65%); }
  /* Text auf dem Kopfbild bleibt hell, weil er auf dem Foto liegt */
  html[data-theme="light"] .hero-cta .btn{ color:#F4F4F2; }
  html[data-theme="light"] .hero .hero-headline{ color:#F4F4F2; }
  html[data-theme="light"] .tile-badge-before{ color:#F4F4F2; }
  html[data-theme="light"] .tile-handle{ background:#090909; color:#F4F4F2; }
  html[data-theme="light"] .service-cell:hover{ background:#E1E1DD; }
  html[data-theme="light"] .process-circle{ color:var(--ink); }
  html[data-theme="light"] .duel-title.duel-us,
  html[data-theme="light"] .duel-title.duel-them,
  html[data-theme="light"] .duel-cell.duel-them{ color:var(--ink); }
  html[data-theme="light"] .cert-popover{ box-shadow:0 16px 36px rgba(0,0,0,0.18); }
  html[data-theme="light"] .cert-lightbox{ background:rgba(244,244,242,0.95); }
  html[data-theme="light"] .cert-lightbox img{ box-shadow:0 24px 60px rgba(0,0,0,0.18); }
  html[data-theme="light"] .kontakt-form .file-upload-btn{ background:#1A1A19; color:#F4F4F2; }
  html[data-theme="light"] .kontakt-form .file-upload-btn:hover{ background:#000000; }
  html[data-theme="light"] .kontakt-form .btn:hover,
  html[data-theme="light"] .kontakt-form .btn:focus-visible{ border-color:var(--ink); }
  html[data-theme="light"] .form-hint.success{ color:#2E8B3E; }
  html[data-theme="light"] .ablation-diagram rect[fill="#494B4E"]{ fill:#B9B9B5; }
  html[data-theme="light"] .ablation-diagram .clean-rect{ fill:#1A1A19; }
  html[data-theme="light"] .label-dirty{ fill:#8E8E8A; }
  html[data-theme="light"] .label-clean{ fill:var(--ink); }
  html[data-theme="light"] .ablation-diagram .head{ filter:none; }
  html[data-theme="light"] .nav-backdrop{ background:rgba(0,0,0,0.25); }

  /* Ecken-Buttons: seitlicher Abstand = Abstand nach oben (22px) */
  @media (min-width: 781px){
    .header-icons{ right:22px; }
  }

  /* Mehrseiten-Version: Unterseiten in der hellen Ansicht */
  html[data-theme="light"] .page-title{ color:#F4F4F2; }
  html[data-theme="light"] .page-banner .photo-banner-img::after{
    background:linear-gradient(180deg, rgba(9,9,9,0.15) 0%, rgba(9,9,9,0.55) 70%, rgba(9,9,9,0.8) 100%);
  }
  html[data-theme="light"] .sec-base .service-cell:hover{ background:#E6E6E2; }
  html[data-theme="light"] .page-cta .btn-ghost{ border-color:#8E8E8A; }
  html[data-theme="light"] .page-cta .btn-ghost:hover{ border-color:var(--ink); }
  html[data-theme="light"] .cert-thumb img{ border-color:#D2D2CE; }