:root{
  --std-bg:#ffffff;
  --std-bg-soft:#f8f5f0;
  --std-text:#171717;
  --std-text-soft:#6a6a6a;
  --std-line:#e8dfd2;
  --std-accent:#b67a33;
  --std-accent-dark:#9d682b;
  --std-dark:#0f1115;
  --std-dark-2:#171a1f;
  --std-white:#ffffff;
  --std-radius:22px;
  --std-shadow:0 12px 34px rgba(0,0,0,.07);
  --std-shadow-hover:0 18px 46px rgba(0,0,0,.12);
  --std-max:1240px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}

body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:var(--std-text);
  background:var(--std-bg);
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  text-decoration:none;
  color:inherit;
}

.hidden{
  display:none !important;
}

.std-container{
  width:min(100% - 32px,var(--std-max));
  margin:0 auto;
}

.std-center{
  text-align:center;
}

/* Header */
.std-header{
  position:fixed;
  top:18px;
  left:0;
  right:0;
  z-index:999;
  transition:.25s ease;
}

.admin-bar .std-header{
  top:50px;
}

.std-header-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
  border:1px solid rgba(232,223,210,.7);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.std-header.std-header-scrolled .std-header-inner{
  background:rgba(255,255,255,.95);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
}

.std-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--std-accent);
  line-height:1;
  white-space:nowrap;
}

.std-logo-icon{
  width:42px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}

.std-logo-text{
  font-size:1.9rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}

.std-nav{
  display:flex;
  align-items:center;
  gap:34px;
}

.std-nav-link{
  font-size:1rem;
  font-weight:600;
  color:var(--std-text);
  line-height:1;
  transition:.2s ease;
}

.std-nav-link:hover{
  color:var(--std-accent);
}

.std-header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.std-cta-btn,
.std-btn-primary,
.std-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border:none;
  border-radius:14px;
  background:var(--std-accent);
  color:#fff;
  font-weight:700;
  transition:.22s ease;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(182,122,51,.18);
}

.std-cta-btn:hover,
.std-btn-primary:hover,
.std-submit-btn:hover{
  background:var(--std-accent-dark);
}

.std-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-weight:700;
  transition:.22s ease;
}

.std-btn-secondary:hover{
  background:rgba(255,255,255,.18);
}

.std-btn-secondary-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border-radius:14px;
  background:#fff;
  color:var(--std-text);
  border:1px solid var(--std-line);
  font-weight:700;
  transition:.22s ease;
}

.std-btn-secondary-dark:hover{
  background:#f7f2eb;
}

.std-full-btn{
  width:100%;
}

/* Klare Tastatur-Fokuszustände ohne sichtbare Designänderung für Maus-/Touch-Nutzung. */
.std-logo:focus-visible,
.std-nav-link:focus-visible,
.std-cta-btn:focus-visible,
.std-btn-primary:focus-visible,
.std-btn-secondary:focus-visible,
.std-btn-secondary-dark:focus-visible,
.std-submit-btn:focus-visible,
.std-mobile-toggle:focus-visible,
.std-mobile-menu a:focus-visible,
.std-contact-method:focus-within,
.std-filter-btn:focus-visible,
.std-services-hanger-link:focus-visible{
  outline:3px solid rgba(182,122,51,.30);
  outline-offset:3px;
}

.std-mobile-toggle{
  display:none;
  border:none;
  background:none;
  font-size:1.8rem;
  cursor:pointer;
  color:var(--std-text);
  line-height:1;
  padding:0;
}

.std-mobile-menu{
  display:none;
  margin-top:10px;
  border:1px solid rgba(232,223,210,.7);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--std-shadow);
  padding:14px 18px 18px;
}

.std-mobile-menu.active{
  display:block;
}

.std-mobile-menu a{
  display:block;
  padding:13px 0;
  border-bottom:1px solid #f2ece3;
  font-weight:500;
}

.std-mobile-menu a:last-child{
  border-bottom:none;
}

.std-mobile-cta{
  margin-top:12px;
  text-align:center;
  background:var(--std-accent);
  color:#fff !important;
  padding:14px 18px !important;
  border-radius:12px;
}

/* Global sections */
.std-section{
  padding:110px 0;
}

.std-light-section{
  background:var(--std-bg-soft);
}

.std-two-col{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}

.std-text-block h2,
.std-section-head h2,
.std-contact-hero h1,
.std-home-cta-band h2,
.std-service-hero-content h1{
  font-size:clamp(2.35rem,5vw,4.4rem);
  line-height:1.04;
  margin:0 0 14px;
  letter-spacing:-.03em;
}

.std-section-label{
  display:inline-block;
  margin-bottom:12px;
  color:var(--std-accent);
  font-weight:700;
}

.std-title-line{
  width:80px;
  height:4px;
  border-radius:999px;
  background:var(--std-accent);
  margin:16px 0 24px;
}

.std-text-block p,
.std-section-head p,
.std-contact-hero p,
.std-home-cta-band p,
.std-service-hero-content p{
  color:var(--std-text-soft);
  line-height:1.9;
  font-size:1.04rem;
}

.std-section-head.center{
  text-align:center;
  max-width:780px;
  margin:0 auto 54px;
}

.std-image-box{
  position:relative;
}

.std-image-box img{
  width:100%;
  border-radius:24px;
  object-fit:cover;
  box-shadow:var(--std-shadow);
}

.std-badge-corner{
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:150px;
  height:150px;
  border-radius:22px;
  background:var(--std-accent);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:var(--std-shadow);
  font-size:2rem;
  font-weight:800;
  text-align:center;
}

.std-badge-corner span{
  display:block;
  margin-top:6px;
  font-size:.92rem;
  font-weight:500;
  line-height:1.25;
}

/* Hero */
.std-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
}

.std-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
  transform:scale(1.04);
}

.std-hero-overlay{
  position:absolute;
  inset:0;

  /*
   * Heller, fotografischer Hero:
   * Die Lesbarkeit wird primär lokal hinter dem mittigen Inhalt
   * geschützt. Bildränder und Material bleiben deutlich offener
   * als bei einer pauschalen dunklen Vollflächenmaske.
   *
   * Diese Basis gilt für Tablet/Mobil. Desktop erhält weiter unten
   * bewusst eine noch leichtere Variante.
   */
  background:
    radial-gradient(
      ellipse 68% 58% at 50% 49%,
      rgba(0,0,0,.32) 0%,
      rgba(0,0,0,.22) 34%,
      rgba(0,0,0,.08) 62%,
      transparent 80%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.15) 34%,
      rgba(0,0,0,.36) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.04) 50%,
      rgba(0,0,0,.12) 100%
    );
}

.std-hero-content{
  position:relative;
  z-index:2;
  max-width:1180px;
  text-align:center;
  padding-top:168px;
  padding-bottom:110px;
}

.std-hero-kicker{
  margin:0 0 18px;
  color:#f1d8b5;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.92rem;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}

.std-hero h1{
  margin:0 0 18px;
  font-size:clamp(4rem, 8vw, 7.4rem);
  line-height:.92;
  letter-spacing:-.06em;
  text-transform:lowercase;
  text-wrap:balance;
  text-shadow:0 5px 24px rgba(0,0,0,.24);
}

.std-hero h2{
  margin:0 0 22px;
  font-size:clamp(1.6rem, 3.3vw, 2.7rem);
  font-weight:700;
  color:rgba(255,255,255,.96);
  text-wrap:balance;
  text-shadow:0 3px 14px rgba(0,0,0,.20);
}

.std-hero-text{
  max-width:980px;
  margin:0 auto 38px;
  color:rgba(255,255,255,.90);
  font-size:1.18rem;
  line-height:1.85;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}

.std-hero-buttons{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.std-hero-buttons .std-btn-primary,
.std-hero-buttons .std-btn-secondary{
  min-height:64px;
  padding:0 34px;
  border-radius:18px;
  font-size:1.1rem;
  font-weight:700;
}

.std-hero-buttons .std-btn-primary{
  box-shadow:0 14px 30px rgba(182,122,51,.24);
}

.std-hero-buttons .std-btn-secondary{
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
}

.std-hero-buttons .std-btn-secondary:hover{
  background:rgba(255,255,255,.18);
}

/* Cards */
.std-card-grid{
  display:grid;
  gap:26px;
}

.std-card-grid-3{
  grid-template-columns:repeat(3,1fr);
}

.std-service-card,
.std-benefit-card,
.std-info-card,
.std-contact-form-box,
.std-project-card{
  background:#fff;
  border:1px solid var(--std-line);
  border-radius:22px;
  box-shadow:var(--std-shadow);
}

.std-service-card{
  overflow:hidden;
}

.std-service-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.std-service-card-body{
  padding:28px;
}

.std-service-card-body h3{
  margin:0 0 12px;
  font-size:1.8rem;
}

.std-service-card-body p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.8;
}

.std-benefit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.std-benefit-card{
  padding:30px 24px;
  min-height:170px;
}

.std-benefit-card h3{
  margin:0 0 8px;
  font-size:1.35rem;
}

.std-benefit-card p{
  margin:0;
  color:var(--std-text-soft);
  line-height:1.7;
}

.std-project-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.std-project-card{
  overflow:hidden;
}

.std-project-card img{
  width:100%;
  height:420px;
  object-fit:cover;
}

.std-project-card h3{
  margin:18px 20px 22px;
  font-size:1.35rem;
}

/* Forms */
.std-contact-layout,
.std-contact-page-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:30px;
  align-items:start;
}

.std-contact-form{
  display:block;
}

.std-contact-form-box{
  padding:34px;
}

.std-contact-form-box-large{
  padding:40px;
}

.std-contact-info{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.std-contact-info-sticky{
  position:sticky;
  top:130px;
}

.std-info-card{
  padding:30px;
}

.std-info-card h3{
  margin:0 0 18px;
  font-size:1.8rem;
}

.std-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.std-field{
  margin-bottom:20px;
}

.std-field label{
  display:block;
  font-weight:700;
  margin-bottom:10px;
}

.std-field input,
.std-field textarea{
  width:100%;
  border:1px solid #d7d0c7;
  border-radius:12px;
  background:#fff;
  color:var(--std-text);
  padding:15px 16px;
  font-size:1rem;
  line-height:1.4;
}

.std-field select{
  width:100%;
  min-height:56px;
  border:1px solid #d7d0c7;
  border-radius:12px;
  background-color:#fff;
  color:var(--std-text);
  padding:15px 48px 15px 16px;
  font-size:1rem;
  line-height:1.4;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236a6a6a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px 18px;
}

.std-field input:focus,
.std-field select:focus,
.std-field textarea:focus{
  outline:none;
  border-color:#c89a5f;
  box-shadow:0 0 0 4px rgba(182,122,51,.10);
}

.std-field select option{
  color:var(--std-text);
  background:#fff;
}

.std-field input[type="file"]{
  padding:12px 14px;
  background:#fbfaf7;
  border-style:dashed;
}

.std-field small{
  display:block;
  margin-top:8px;
  color:var(--std-text-soft);
  line-height:1.6;
  font-size:.92rem;
}

.std-field textarea{
  resize:vertical;
  min-height:150px;
}

.std-submit-btn{
  width:100%;
  min-height:58px;
  font-size:1.05rem;
}

.std-contact-methods{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.std-contact-method{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:1px solid var(--std-line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  min-width:180px;
  transition:.2s ease;
}

.std-contact-method:hover{
  border-color:#d7b183;
  background:#fcf8f2;
}

.std-contact-method input{
  width:auto;
  margin:0;
}

/* CTA band */
.std-home-cta-band{
  padding:0 0 110px;
}

.std-home-cta-band-inner{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:30px;
  align-items:center;
  background:linear-gradient(135deg,#faf6ef 0%, #ffffff 100%);
  border:1px solid var(--std-line);
  border-radius:28px;
  padding:42px;
  box-shadow:var(--std-shadow);
}

.std-home-cta-band-actions{
  display:flex;
  justify-content:flex-end;
}

.std-home-cta-band-actions-dual{
  display:flex;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}

/* Contact page */
.std-contact-hero{
  padding:170px 0 72px;
  background:linear-gradient(180deg,#faf7f2 0%, #ffffff 100%);
}

.std-contact-page-section{
  padding:18px 0 110px;
}

.std-contact-page-section-tight{
  padding:140px 0 110px;
}

.std-contact-form-title{
  margin:0 0 8px;
  font-size:2.2rem;
  line-height:1.08;
  letter-spacing:-.03em;
}

.std-contact-form-intro{
  margin:0 0 26px;
  color:var(--std-text-soft);
  line-height:1.75;
  font-size:1.02rem;
}

.std-mini-badge{
  display:inline-block;
  margin-bottom:16px;
  padding:10px 14px;
  border-radius:999px;
  background:#f6ede2;
  color:var(--std-accent);
  font-weight:700;
}

/* Service pages */
.std-service-page{
  overflow:hidden;
}

.std-service-hero{
  position:relative;
  min-height:72vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}

.std-service-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
}

.std-service-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.48) 50%, rgba(0,0,0,.68) 100%),
    linear-gradient(90deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.44) 100%);
}

.std-service-hero-content{
  position:relative;
  z-index:2;
  max-width:860px;
  padding-top:160px;
  padding-bottom:90px;
}

.std-service-hero-content p{
  max-width:720px;
  color:rgba(255,255,255,.88);
}

/* Footer */
.std-footer{
  background:linear-gradient(180deg,var(--std-dark-2) 0%, var(--std-dark) 100%);
  color:#fff;
  padding-top:70px;
}

.std-footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr 1fr;
  gap:36px;
  padding-bottom:40px;
}

.std-footer h3{
  margin:0 0 18px;
  color:#f0bb73;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.std-footer h4{
  margin:0 0 18px;
  color:#ffffff;
  font-size:1.15rem;
  font-weight:700;
}

.std-footer p,
.std-footer li,
.std-footer a{
  color:rgba(255,255,255,.92);
  line-height:1.9;
}

.std-footer a:hover{
  color:#f0bb73;
}

.std-footer ul{
  list-style:none;
  padding:0;
  margin:0;
}

.std-footer-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
  padding:22px 16px 30px;
  color:rgba(255,255,255,.82);
}

.std-info-entry{
  margin-bottom:22px;
}

.std-info-entry:last-child{
  margin-bottom:0;
}

.std-info-entry strong{
  display:block;
  margin-bottom:8px;
  font-size:1.05rem;
  color:var(--std-text);
}

.std-info-entry a,
.std-info-entry span{
  color:var(--std-text-soft);
  line-height:1.7;
}

.std-info-card-accent{
  background:linear-gradient(135deg,#faf6ef 0%, #ffffff 100%);
  border:1px solid var(--std-line);
}

.std-info-card-accent h3{
  margin-bottom:8px;
}

.std-info-card-accent p{
  margin:0;
  color:var(--std-text-soft);
}

.std-footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.std-footer-logo{
  width:82px;
  height:auto;
  margin-bottom:16px;
  display:block;
  object-fit:contain;
}

#services,
#portfolio,
#benefits,
#about,
#contact{
  scroll-margin-top:140px;
}

/* Desktop / Laptop Polish */
@media (min-width:1200px){
  .std-section{
    padding:96px 0;
  }

  #services,
  #portfolio,
  #benefits,
  #about,
  #contact{
    scroll-margin-top:130px;
  }

  .std-header-inner{
    min-height:82px;
    padding:0 24px;
  }

  .std-nav{
    gap:30px;
  }

  .std-nav-link{
    font-size:.98rem;
  }

  .std-cta-btn,
  .std-btn-primary,
  .std-submit-btn{
    min-height:52px;
    padding:0 22px;
  }

  .std-hero-overlay{
    background:
      radial-gradient(
        ellipse 58% 52% at 50% 48%,
        rgba(0,0,0,.22) 0%,
        rgba(0,0,0,.13) 38%,
        rgba(0,0,0,.04) 62%,
        transparent 80%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.07) 0%,
        rgba(0,0,0,.11) 36%,
        rgba(0,0,0,.28) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 50%,
        rgba(0,0,0,.07) 100%
      );
  }

  .std-hero-bg{
    background-position:center 30%;
    transform:scale(1.03);
  }

  .std-hero-content{
    max-width:1080px;
    padding-top:154px;
    padding-bottom:92px;
  }

  .std-hero-kicker{
    margin:0 0 16px;
    font-size:.84rem;
    letter-spacing:.12em;
  }

  .std-hero h1{
    max-width:940px;
    margin:0 auto 16px;
    font-size:clamp(3.4rem, 6.6vw, 6.1rem);
    line-height:.95;
    letter-spacing:-.055em;
    text-shadow:0 7px 26px rgba(0,0,0,.20);
  }

  .std-hero h2{
    max-width:860px;
    margin:0 auto 18px;
    font-size:clamp(1.45rem, 2.6vw, 2.2rem);
    line-height:1.2;
    text-shadow:0 4px 16px rgba(0,0,0,.16);
  }

  .std-hero-text{
    max-width:840px;
    margin:0 auto 30px;
    font-size:1.06rem;
    line-height:1.76;
    text-shadow:0 2px 10px rgba(0,0,0,.14);
  }

  .std-hero-buttons{
    gap:14px;
  }

  .std-hero-buttons .std-btn-primary,
  .std-hero-buttons .std-btn-secondary{
    min-height:60px;
    padding:0 30px;
    border-radius:16px;
    font-size:1.03rem;
  }

  .std-section-head.center{
    max-width:800px;
  }

  .std-section-head p{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    font-size:1rem;
    line-height:1.82;
  }

  #services .std-section-head.center{
    max-width:860px;
    margin:0 auto 40px;
  }

  #services .std-section-head h2{
    font-size:clamp(2.7rem, 4.3vw, 4.2rem);
    margin-bottom:12px;
  }

  #services .std-section-head p{
    max-width:760px;
    margin:0 auto;
    font-size:1rem;
    line-height:1.8;
  }

  .std-card-grid-3{
    gap:24px;
  }

  .std-service-card{
    border-radius:24px;
    overflow:hidden;
  }

  .std-service-card img{
    height:248px;
  }

  .std-service-card-body{
    padding:24px 24px 26px;
  }

  .std-service-card-body h3{
    margin:0 0 10px;
    font-size:1.68rem;
    letter-spacing:-.02em;
  }

  .std-service-card-body p{
    font-size:.98rem;
    line-height:1.78;
  }

  #portfolio .std-section-head.center{
    max-width:820px;
    margin:0 auto 34px;
  }

  #portfolio .std-section-head h2{
    margin-bottom:12px;
  }

  #portfolio .std-section-head p{
    max-width:760px;
    margin:0 auto;
    line-height:1.82;
  }

  .std-portfolio-more{
    margin-top:30px;
  }

  #benefits .std-section-head.center{
    max-width:820px;
    margin:0 auto 40px;
  }

  .std-benefit-grid{
    gap:20px;
  }

  .std-benefit-card{
    min-height:156px;
    padding:26px 22px;
    border-radius:24px;
  }

  .std-benefit-card h3{
    font-size:1.28rem;
    margin-bottom:8px;
  }

  .std-benefit-card p{
    font-size:.96rem;
    line-height:1.72;
  }

  #about .std-two-col{
    gap:52px;
    align-items:center;
  }

  #about .std-text-block h2{
    font-size:clamp(2.7rem,4.4vw,4.25rem);
  }

  .std-text-block p{
    max-width:620px;
  }

  #about .std-text-block p{
    font-size:1rem;
    line-height:1.84;
  }

  .std-title-line{
    margin:14px 0 22px;
  }

  #about .std-image-box img{
    min-height:420px;
    max-height:500px;
    object-fit:cover;
    object-position:center center;
  }

  .std-home-cta-band{
    padding:0 0 92px;
  }

  .std-home-cta-band-inner{
    grid-template-columns:1.14fr .86fr;
    gap:24px;
    padding:38px 40px;
    border-radius:26px;
    box-shadow:0 16px 38px rgba(0,0,0,.07);
  }

  .std-home-cta-band h2{
    font-size:clamp(2.35rem,4vw,3.7rem);
    line-height:1.06;
    margin-bottom:12px;
  }

  .std-home-cta-band p{
    max-width:680px;
    font-size:1rem;
    line-height:1.8;
  }

  .std-home-cta-band-content{
    max-width:720px;
  }

  .std-home-cta-band-actions-dual{
    justify-content:center;
    align-items:center;
  }

  .std-btn-primary,
  .std-cta-btn,
  .std-submit-btn{
    box-shadow:0 10px 22px rgba(182,122,51,.20);
  }

  .std-btn-secondary-dark{
    box-shadow:0 8px 18px rgba(0,0,0,.04);
  }

  .std-footer{
    padding-top:60px;
  }

  .std-footer-grid{
    gap:30px;
    padding-bottom:34px;
    align-items:start;
  }

  .std-footer-grid > div:first-child{
    max-width:320px;
  }

  .std-footer h3{
    font-size:1.82rem;
    margin:0 0 14px;
  }

  .std-footer h4{
    margin:0 0 14px;
  }

  .std-footer p,
  .std-footer li,
  .std-footer a{
    line-height:1.82;
  }

  .std-footer ul li{
    margin-bottom:2px;
  }

  .std-footer-logo{
    width:74px;
    margin-bottom:14px;
  }

  .std-footer-bottom{
    padding:20px 16px 24px;
    color:rgba(255,255,255,.76);
  }
}







/* Premium Micro-Interactions */
.std-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .7s ease,
    transform .7s ease;
  will-change:opacity, transform;
}

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

.std-reveal-delay-1{ transition-delay:.08s; }
.std-reveal-delay-2{ transition-delay:.16s; }
.std-reveal-delay-3{ transition-delay:.24s; }

.std-service-card,
.std-benefit-card,
.std-info-card,
.std-contact-form-box,
.std-project-card,
.std-ba-card,
.std-references-hero-point,
.std-references-side-card,
.std-references-stat,
.std-references-video-placeholder-card{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.std-service-card img,
.std-image-box img{
  transition:transform .6s ease;
}

.std-ba-after,
.std-ba-before{
  transition:transform .6s ease;
}

/* Hover-Bewegungen nur auf Geräten, die echten Hover besitzen. */
@media (hover:hover) and (pointer:fine){
  .std-service-card:hover,
  .std-benefit-card:hover,
  .std-info-card:hover,
  .std-project-card:hover,
  .std-ba-card:hover,
  .std-references-hero-point:hover,
  .std-references-side-card:hover,
  .std-references-stat:hover,
  .std-references-video-placeholder-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 42px rgba(0,0,0,.10);
  }

  .std-service-card:hover img,
  .std-image-box:hover img{
    transform:scale(1.03);
  }

  .std-ba-card:hover .std-ba-after,
  .std-ba-card:hover .std-ba-before{
    transform:scale(1.02);
  }
}

.std-cta-btn,
.std-btn-primary,
.std-submit-btn,
.std-btn-secondary,
.std-btn-secondary-dark{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.std-filter-btn{
  transition:
    transform .2s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

@media (hover:hover) and (pointer:fine){
  .std-cta-btn:hover,
  .std-btn-primary:hover,
  .std-submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(182,122,51,.22);
  }

  .std-btn-secondary:hover,
  .std-btn-secondary-dark:hover{
    transform:translateY(-2px);
  }

  .std-filter-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,.05);
  }
}

@media (prefers-reduced-motion: reduce){
  .std-reveal,
  .std-service-card,
  .std-benefit-card,
  .std-info-card,
  .std-contact-form-box,
  .std-project-card,
  .std-ba-card,
  .std-references-hero-point,
  .std-references-side-card,
  .std-references-stat,
  .std-references-video-placeholder-card,
  .std-service-card img,
  .std-image-box img,
  .std-ba-after,
  .std-ba-before,
  .std-cta-btn,
  .std-btn-primary,
  .std-submit-btn,
  .std-btn-secondary,
  .std-btn-secondary-dark,
  .std-filter-btn{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* =========================================================
   BENEFITS – PREMIUM SCROLL-SCRUB
   NUR: "Warum sich eine saubere Ausführung langfristig auszahlt"

   Der Effekt folgt der tatsächlichen Scrollposition:
   runter = hinein
   hoch   = zurück
========================================================= */

/* Ãœberschrift + Beschreibung bleiben vollkommen ruhig */
#benefits .std-section-head{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* Nur die Benefit-Karten werden vom Scroll-Scrub gesteuert */
#benefits .std-benefit-card.std-benefit-scroll-scrub{
  --benefit-x:0px;
  --benefit-y:0px;
  --benefit-opacity:1;

  opacity:var(--benefit-opacity);
  transform:translate3d(var(--benefit-x),var(--benefit-y),0);

  /*
   * Absichtlich KEINE Transform-Transition:
   * Die Bewegung folgt framegenau dem Scrollen.
   * So gibt es kein Nachziehen, Flackern oder Umspringen.
   */
  transition:
    box-shadow .28s ease,
    border-color .28s ease;

  will-change:transform, opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Bestehender Hover bleibt erhalten, ohne den Scroll-X-Wert zu zerstören */
#benefits .std-benefit-card.std-benefit-scroll-scrub:hover{
  --benefit-y:-4px;
}

/* Smartphone: Hover-Versatz vermeiden */
@media (max-width:767px){
  #benefits .std-benefit-card.std-benefit-scroll-scrub:hover{
    --benefit-y:0px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  #benefits .std-benefit-card.std-benefit-scroll-scrub{
    --benefit-x:0px !important;
    --benefit-y:0px !important;
    --benefit-opacity:1 !important;

    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =========================================================
   SERVICES – BESCHICHTUNGSBILD ALS ECHTER HINTERGRUND
   Kein Extra-Layout. Das Bild sitzt rechts/unten hinter
   Ãœberschrift + bestehenden Service-Karten.
========================================================= */

#services.std-services-section{
  position:relative;
  isolation:isolate;
}

/* Falls die frühere PHP-Hintergrundebene noch vorhanden ist:
   deaktivieren, damit nichts doppelt gerendert wird. */
#services .std-services-coating-bg{
  display:none !important;
}

#services.std-services-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-image:url("../images/beschichtung-showcase.webp");
  background-repeat:no-repeat;
  background-size:min(1080px,78vw) auto;
  background-position:right -40px bottom -35px;

  /*
   * Das Bild bleibt hauptsächlich rechts/unten sichtbar.
   * Links läuft es weich in den weißen Seitenhintergrund aus.
   */
  -webkit-mask-image:
    radial-gradient(
      ellipse 72% 76% at 88% 72%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.92) 56%,
      rgba(0,0,0,.58) 70%,
      rgba(0,0,0,.20) 82%,
      transparent 96%
    );
  mask-image:
    radial-gradient(
      ellipse 72% 76% at 88% 72%,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.92) 56%,
      rgba(0,0,0,.58) 70%,
      rgba(0,0,0,.20) 82%,
      transparent 96%
    );

  opacity:.96;
}

/*
 * Weißer Blend oben/links:
 * Bis etwa zum linken Rand der Karten bleibt es optisch weiß.
 * Danach wird das Foto langsam eingeblendet.
 */
#services.std-services-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 22%,
      rgba(255,255,255,.96) 34%,
      rgba(255,255,255,.86) 46%,
      rgba(255,255,255,.58) 60%,
      rgba(255,255,255,.22) 74%,
      rgba(255,255,255,.04) 86%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 18%,
      rgba(255,255,255,.60) 42%,
      rgba(255,255,255,.18) 68%,
      transparent 88%
    );
}

/* Bestehender Inhalt bleibt über dem Bild. */
#services > .std-container,
#services .std-services-container{
  position:relative;
  z-index:2;
}


/* Tablet */



/* Smartphone */



/* =========================================================
   FINALER BRANDING-PASS
   Header-Logo · Footer-Logo · CTA-Materialabschluss
========================================================= */


/* ---------------------------------------------------------
   HEADER-LOGO
   Das gelieferte helle Logo bleibt als Originalmotiv erhalten.
   multiply lässt die weiße Bildfläche mit dem hellen,
   transluzenten Header optisch verschwinden.
--------------------------------------------------------- */

.std-logo-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
  flex-shrink:0;
}

.std-logo{
  gap:11px;
}


/* ---------------------------------------------------------
   FOOTER-BRANDING
   Das dunkle Logo wird bewusst als kleine hochwertige
   Markenplakette eingesetzt und nicht über den Footer verteilt.
--------------------------------------------------------- */

.std-footer-logo-brand{
  width:104px;
  height:104px;
  margin:0 0 18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  object-fit:cover;
  object-position:center;
  background:#191b20;
  box-shadow:
    0 16px 32px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.std-footer-brand h3{
  margin-top:0;
}


/* ---------------------------------------------------------
   CTA – SICHTBARER MATERIALABSCHLUSS

   Die Makroaufnahme liegt ausschließlich im bisher leeren
   unteren Raum zwischen CTA-Karte und Footer. Kein Text und
   kein Button wird überlagert.

   Die weiche Maskierung verhindert einen harten Foto-Balken
   und lässt die Materialstruktur wie einen eingebetteten
   Abschnitt der Gestaltung auslaufen.
--------------------------------------------------------- */

.std-homepage .std-home-cta-band,
.std-references-page .std-home-cta-band-references{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-bottom:126px;
}

.std-homepage .std-home-cta-band > .std-container,
.std-references-page .std-home-cta-band-references > .std-container{
  position:relative;
  z-index:2;
}

.std-homepage .std-home-cta-band::after,
.std-references-page .std-home-cta-band-references::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  height:138px;
  pointer-events:none;

  background-image:
    linear-gradient(
      90deg,
      rgba(15,17,21,.08) 0%,
      rgba(255,255,255,0) 18%,
      rgba(255,255,255,0) 82%,
      rgba(15,17,21,.08) 100%
    ),
    url("../images/brand/cta-material.webp");

  background-size:
    100% 100%,
    cover;

  background-position:
    center,
    center 58%;

  background-repeat:no-repeat;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 12%,
      rgba(0,0,0,.72) 38%,
      #000 66%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 12%,
      rgba(0,0,0,.72) 38%,
      #000 66%,
      #000 100%
    );
}


/* Ein hauchdünner Lichtsaum verbindet Karte und Material. */
.std-homepage .std-home-cta-band::before,
.std-references-page .std-home-cta-band-references::before{
  content:"";
  position:absolute;
  z-index:1;
  left:8%;
  right:8%;
  bottom:108px;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(182,122,51,.34) 28%,
      rgba(182,122,51,.34) 72%,
      transparent
    );
}


/* ---------------------------------------------------------
   RESPONSIVE BRANDING
--------------------------------------------------------- */


/* =========================================================
   PREMIUM RESPONSIVE SYSTEM – PHASE C1
   Verifiziert gegen echten WordPress-Preview-Viewport:
   720px = Tablet Portrait.

   Content-based Breakpoints:
   <=479px    Phone
   480–699px  Large Phone / Small Tablet
   700–899px  Tablet Portrait
   900–1199px Tablet Landscape / kleines Notebook
   >=1200px   Desktop bleibt geschützt
========================================================= */


/* ---------------------------------------------------------
   GEMEINSAME REGELN UNTER 1200px
--------------------------------------------------------- */

@media (max-width:1199px){

  /*
   * Header:
   * Auf iPad/Tablet bleibt die bereits gelungene kompakte
   * Branding-Version mit Hamburger erhalten. Die komplette
   * Desktop-Navigation erscheint erst wieder ab 1200px.
   */
  .std-nav,
  .std-cta-btn{
    display:none;
  }

  .std-mobile-toggle{
    display:block;
  }

  /*
   * Die große Beschichtungs-Dekoration ist eine Desktop-
   * Komposition. Unter 1200px wird sie vollständig entfernt.
   * Die drei echten Servicebilder übernehmen die Bildwirkung.
   */
  #services.std-services-section::before,
  #services.std-services-section::after{
    display:none;
  }

}


/* ---------------------------------------------------------
   900–1199px
   TABLET LANDSCAPE / KLEINES NOTEBOOK
--------------------------------------------------------- */

@media (min-width:900px) and (max-width:1199px){

  .std-container{
    width:min(100% - 36px,var(--std-max));
  }

  .std-section{
    padding:76px 0;
  }

  #services,
  #portfolio,
  #benefits,
  #about,
  #contact{
    scroll-margin-top:112px;
  }

  /* Header */
  .std-header{
    top:12px;
  }

  .admin-bar .std-header{
    top:44px;
  }

  .std-header-inner{
    min-height:76px;
    padding:0 18px;
    gap:14px;
  }

  .std-logo{
    gap:9px;
  }

  .std-logo-icon{
    width:44px;
    height:44px;
  }

  .std-logo-text{
    font-size:1.52rem;
  }

  .std-mobile-toggle{
    width:44px;
    min-width:44px;
    height:44px;
  }

  /* Hero = geschlossene erste Bühne */
  .std-hero{
    min-height:94svh;
  }

  .std-hero-bg{
    background-position:center 34%;
    transform:scale(1.025);
  }

  .std-hero-content{
    max-width:900px;
    padding-top:124px;
    padding-bottom:66px;
  }

  .std-hero-kicker{
    margin-bottom:13px;
    font-size:.8rem;
  }

  .std-hero h1{
    width:100%;
    max-width:880px;
    margin:0 auto 14px;
    font-size:clamp(3.35rem,6.2vw,4.55rem);
    line-height:.96;
  }

  .std-hero h2{
    max-width:760px;
    margin:0 auto 15px;
    font-size:clamp(1.3rem,2.7vw,1.75rem);
    line-height:1.2;
  }

  .std-hero-text{
    max-width:730px;
    margin-bottom:24px;
    font-size:.96rem;
    line-height:1.62;
  }

  .std-hero-buttons{
    gap:11px;
  }

  .std-hero-buttons .std-btn-primary,
  .std-hero-buttons .std-btn-secondary{
    min-height:52px;
    padding:0 22px;
    font-size:.93rem;
  }

  /* Services: 3 echte gleichwertige Editorial-Cards */
  #services.std-section{
    padding-top:66px;
    padding-bottom:72px;
  }

  #services .std-section-head.center{
    max-width:790px;
    margin-bottom:30px;
  }

  #services .std-card-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  #services .std-service-card{
    display:block;
    min-width:0;
  }

  #services .std-service-card img{
    width:100%;
    height:190px;
    min-height:0;
    object-fit:cover;
  }

  #services .std-service-card-body{
    padding:19px 18px 21px;
  }

  #services .std-service-card-body h3{
    margin-bottom:7px;
    font-size:1.35rem;
  }

  #services .std-service-card-body p{
    font-size:.88rem;
    line-height:1.55;
  }

  /* Benefits */
  #benefits .std-benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  #benefits .std-benefit-card{
    min-height:128px;
    padding:20px;
  }

  /* About */
  #about .std-two-col{
    grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
    gap:32px;
    align-items:center;
  }

  #about .std-image-box img{
    min-height:0;
    height:340px;
    max-height:340px;
    object-fit:cover;
  }

  /* CTA */
  .std-home-cta-band-inner{
    grid-template-columns:minmax(0,1.18fr) minmax(210px,.82fr);
    gap:22px;
    padding:30px;
  }

  .std-home-cta-band-actions,
  .std-home-cta-band-actions-dual{
    justify-content:flex-end;
    align-items:center;
  }

  .std-homepage .std-home-cta-band,
  .std-references-page .std-home-cta-band-references{
    padding-bottom:96px;
  }

  .std-homepage .std-home-cta-band::after,
  .std-references-page .std-home-cta-band-references::after{
    height:104px;
  }

  .std-homepage .std-home-cta-band::before,
  .std-references-page .std-home-cta-band-references::before{
    bottom:80px;
  }

  /* Footer */
  .std-footer{
    padding-top:44px;
  }

  .std-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 32px;
    padding-bottom:28px;
  }

  .std-footer-logo-brand{
    width:86px;
    height:86px;
  }

}


/* ---------------------------------------------------------
   700–899px
   TABLET PORTRAIT
   720px Preview wurde real im Browser verifiziert.
--------------------------------------------------------- */

@media (min-width:700px) and (max-width:899px){

  .std-container{
    width:min(100% - 28px,var(--std-max));
  }

  .std-section{
    padding:62px 0;
  }

  #services,
  #portfolio,
  #benefits,
  #about,
  #contact{
    scroll-margin-top:106px;
  }

  /* Header – exakt die kompakte iPad-Richtung beibehalten */
  .std-header{
    top:10px;
  }

  .admin-bar .std-header{
    top:50px;
  }

  .std-header-inner{
    min-height:72px;
    padding:0 16px;
    border-radius:19px;
  }

  .std-logo{
    gap:8px;
  }

  .std-logo-icon{
    width:42px;
    height:42px;
  }

  .std-logo-text{
    font-size:1.42rem;
  }

  .std-mobile-toggle{
    width:43px;
    min-width:43px;
    height:43px;
  }

  /*
   * Hero:
   * Auf Tablet wird die erste View wieder eine geschlossene
   * Premium-Bühne. Keine 72svh-Halblösung mehr.
   */
  .std-hero{
    min-height:96svh;
  }

  .std-hero-bg{
    background-position:center 37%;
    transform:scale(1.02);
  }

  .std-hero-content{
    max-width:690px;
    padding-top:112px;
    padding-bottom:58px;
  }

  .std-hero-kicker{
    margin-bottom:11px;
    font-size:.75rem;
    letter-spacing:.105em;
  }

  .std-hero h1{
    width:100%;
    max-width:100%;
    margin:0 auto 13px;
    font-size:clamp(3rem,7vw,3.65rem);
    line-height:.97;
    letter-spacing:-.055em;
    white-space:nowrap;
  }

  .std-hero h2{
    max-width:610px;
    margin:0 auto 13px;
    font-size:clamp(1.18rem,3vw,1.48rem);
    line-height:1.22;
  }

  .std-hero-text{
    max-width:620px;
    margin-bottom:21px;
    font-size:.9rem;
    line-height:1.54;
  }

  .std-hero-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
  }

  .std-hero-buttons .std-btn-primary,
  .std-hero-buttons .std-btn-secondary{
    width:100%;
    min-height:49px;
    padding:0 15px;
    border-radius:13px;
    font-size:.88rem;
  }

  /*
   * Services:
   * zwei Karten in der ersten Reihe, dritte Karte als
   * bewusster breiter Abschluss – passend für echte 720px.
   */
  #services.std-section{
    padding-top:58px;
    padding-bottom:64px;
  }

  #services .std-section-head.center{
    max-width:660px;
    margin-bottom:26px;
  }

  #services .std-card-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  #services .std-service-card{
    min-width:0;
  }

  #services .std-service-card img{
    width:100%;
    height:178px;
    min-height:0;
    object-fit:cover;
  }

  #services .std-service-card-body{
    padding:17px 17px 19px;
  }

  #services .std-service-card-body h3{
    margin-bottom:6px;
    font-size:1.28rem;
  }

  #services .std-service-card-body p{
    font-size:.84rem;
    line-height:1.5;
  }

  #services .std-service-card:nth-child(3){
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,.43fr) minmax(0,.57fr);
    align-items:stretch;
  }

  #services .std-service-card:nth-child(3) img{
    height:100%;
    min-height:190px;
    object-fit:cover;
  }

  #services .std-service-card:nth-child(3) .std-service-card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Benefits */
  #benefits .std-benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
  }

  #benefits .std-benefit-card{
    min-height:118px;
    padding:18px;
  }

  #benefits .std-benefit-card h3{
    font-size:1.08rem;
  }

  #benefits .std-benefit-card p{
    font-size:.86rem;
    line-height:1.48;
  }

  /* About – Tablet nutzt seine Breite */
  #about .std-two-col{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:24px;
    align-items:center;
  }

  #about .std-text-block h2{
    font-size:clamp(2.05rem,4.9vw,2.65rem);
  }

  #about .std-text-block p{
    font-size:.88rem;
    line-height:1.56;
  }

  #about .std-image-box img{
    min-height:0;
    height:285px;
    max-height:285px;
    object-fit:cover;
  }

  /* CTA */
  .std-home-cta-band-inner{
    grid-template-columns:minmax(0,1.16fr) minmax(180px,.84fr);
    gap:18px;
    padding:25px;
    border-radius:22px;
  }

  .std-home-cta-band h2{
    font-size:clamp(1.9rem,4.6vw,2.45rem);
  }

  .std-home-cta-band p{
    font-size:.89rem;
    line-height:1.52;
  }

  .std-home-cta-band-actions,
  .std-home-cta-band-actions-dual{
    justify-content:flex-end;
  }

  .std-homepage .std-home-cta-band,
  .std-references-page .std-home-cta-band-references{
    padding-bottom:88px;
  }

  .std-homepage .std-home-cta-band::after,
  .std-references-page .std-home-cta-band-references::after{
    height:96px;
  }

  .std-homepage .std-home-cta-band::before,
  .std-references-page .std-home-cta-band-references::before{
    bottom:72px;
  }

  /* Footer */
  .std-footer{
    padding-top:40px;
  }

  .std-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 28px;
    padding-bottom:25px;
  }

  .std-footer-logo-brand{
    width:82px;
    height:82px;
  }

}


/* ---------------------------------------------------------
   480–699px
   LARGE PHONE / SMALL TABLET
   Noch nicht der finale Phone-Pass – stabiler Zwischenstand.
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  .std-container{
    width:min(100% - 24px,var(--std-max));
  }

  .std-section{
    padding:54px 0;
  }

  #services,
  #portfolio,
  #benefits,
  #about,
  #contact{
    scroll-margin-top:100px;
  }

  .std-header{
    top:10px;
  }

  .admin-bar .std-header{
    top:52px;
  }

  .std-header-inner{
    min-height:70px;
    padding:0 14px;
    border-radius:18px;
  }

  .std-logo-icon{
    width:39px;
    height:39px;
  }

  .std-logo-text{
    font-size:1.3rem;
  }

  .std-hero{
    min-height:86svh;
  }

  .std-hero-bg{
    background-position:center 39%;
    transform:scale(1.015);
  }

  .std-hero-content{
    padding-top:103px;
    padding-bottom:46px;
  }

  .std-hero-kicker{
    margin-bottom:10px;
    font-size:.71rem;
  }

  .std-hero h1{
    width:100%;
    max-width:100%;
    margin:0 auto 11px;
    font-size:clamp(2.35rem,8vw,3.15rem);
    line-height:.98;
    letter-spacing:-.055em;
    white-space:nowrap;
  }

  .std-hero h2{
    max-width:30rem;
    margin:0 auto 11px;
    font-size:clamp(1.06rem,4vw,1.28rem);
    line-height:1.24;
  }

  .std-hero-text{
    max-width:31rem;
    margin-bottom:18px;
    font-size:.86rem;
    line-height:1.48;
  }

  .std-hero-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .std-hero-buttons .std-btn-primary,
  .std-hero-buttons .std-btn-secondary{
    width:100%;
    min-height:47px;
    padding:0 12px;
    font-size:.84rem;
  }

  /*
   * Services:
   * erste Karte als Featured-Card, zwei Supporting-Cards darunter.
   */
  #services.std-section{
    padding-top:54px;
    padding-bottom:58px;
  }

  #services .std-section-head.center{
    margin-bottom:23px;
  }

  #services .std-card-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  #services .std-service-card:first-child{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
    align-items:stretch;
  }

  #services .std-service-card:first-child img{
    height:100%;
    min-height:166px;
    object-fit:cover;
  }

  #services .std-service-card:first-child .std-service-card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  #services .std-service-card:not(:first-child){
    display:block;
  }

  #services .std-service-card:not(:first-child) img{
    width:100%;
    height:145px;
    min-height:0;
    object-fit:cover;
  }

  #services .std-service-card-body{
    padding:14px;
  }

  #services .std-service-card-body h3{
    margin-bottom:5px;
    font-size:1.12rem;
  }

  #services .std-service-card-body p{
    font-size:.76rem;
    line-height:1.4;
  }

  #benefits .std-benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #benefits .std-benefit-card{
    min-height:0;
    padding:15px;
  }

  #about .std-two-col{
    grid-template-columns:1fr;
    gap:20px;
  }

  #about .std-image-box img{
    min-height:0;
    height:250px;
    max-height:250px;
    object-fit:cover;
  }

  .std-home-cta-band-inner{
    grid-template-columns:1fr;
    gap:13px;
    padding:20px 18px;
  }

  .std-home-cta-band-actions,
  .std-home-cta-band-actions-dual{
    justify-content:flex-start;
  }

  .std-footer{
    padding-top:34px;
  }

  .std-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 15px;
    padding-bottom:22px;
  }

  .std-footer-brand{
    grid-column:1 / -1;
  }

  .std-footer-grid > div:last-child{
    grid-column:1 / -1;
  }

}


/* ---------------------------------------------------------
   <=479px
   PHONE
   Bestehende kompakte Richtung bleibt bis zum finalen Phone-Pass.
--------------------------------------------------------- */

@media (max-width:479px){

  .std-container{
    width:min(100% - 20px,var(--std-max));
  }

  .std-section{
    padding:48px 0;
  }

  #services,
  #portfolio,
  #benefits,
  #about,
  #contact{
    scroll-margin-top:96px;
  }

  .std-header{
    top:9px;
  }

  .admin-bar .std-header{
    top:50px;
  }

  .std-header-inner{
    min-height:68px;
    padding:0 12px;
    gap:10px;
    border-radius:17px;
  }

  .std-mobile-toggle{
    width:42px;
    min-width:42px;
    height:42px;
  }

  .std-logo{
    min-width:0;
    gap:7px;
  }

  .std-logo-icon{
    width:36px;
    height:36px;
    border-radius:9px;
  }

  .std-logo-text{
    min-width:0;
    font-size:clamp(1.06rem,5.1vw,1.25rem);
    letter-spacing:-.025em;
  }

  .std-hero{
    min-height:74svh;
  }

  .std-hero-bg{
    background-position:center 40%;
    transform:scale(1.01);
  }

  .std-hero-content{
    padding-top:98px;
    padding-bottom:42px;
  }

  .std-hero-kicker{
    margin-bottom:9px;
    font-size:.68rem;
    letter-spacing:.085em;
  }

  .std-hero h1{
    width:100%;
    max-width:100%;
    margin:0 auto 11px;
    font-size:clamp(1.95rem,8.35vw,2.25rem);
    line-height:1;
    letter-spacing:-.055em;
    white-space:nowrap;
  }

  .std-hero h2{
    max-width:21rem;
    margin:0 auto 11px;
    font-size:clamp(1rem,4.7vw,1.18rem);
    line-height:1.24;
  }

  .std-hero-text{
    max-width:22rem;
    margin-bottom:17px;
    font-size:.84rem;
    line-height:1.46;
  }

  .std-hero-buttons{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .std-hero-buttons .std-btn-primary,
  .std-hero-buttons .std-btn-secondary{
    width:100%;
    min-height:45px;
    padding:0 14px;
    border-radius:12px;
    font-size:.84rem;
  }

  /* Services – kompakte horizontale Cards */
  #services.std-section{
    padding-top:50px;
    padding-bottom:52px;
  }

  #services .std-section-head.center{
    margin-bottom:20px;
  }

  #services .std-section-head h2{
    font-size:clamp(2rem,10vw,2.55rem);
    line-height:1.03;
  }

  #services .std-section-head p{
    font-size:.86rem;
    line-height:1.5;
  }

  #services .std-card-grid-3{
    grid-template-columns:1fr;
    gap:9px;
  }

  #services .std-service-card{
    display:grid;
    grid-template-columns:38% minmax(0,62%);
    align-items:stretch;
    min-height:0;
    border-radius:17px;
  }

  #services .std-service-card img{
    width:100%;
    height:100%;
    min-height:138px;
    object-fit:cover;
  }

  #services .std-service-card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:12px 13px;
  }

  #services .std-service-card-body h3{
    margin-bottom:4px;
    font-size:1.08rem;
  }

  #services .std-service-card-body p{
    font-size:.75rem;
    line-height:1.38;
  }

  #benefits .std-benefit-grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  #benefits .std-benefit-card{
    min-height:0;
    padding:14px 15px;
    border-radius:16px;
  }

  #benefits .std-benefit-card h3{
    margin-bottom:3px;
    font-size:1rem;
  }

  #benefits .std-benefit-card p{
    font-size:.8rem;
    line-height:1.4;
  }

  #benefits .std-benefit-card.std-benefit-scroll-scrub:hover{
    --benefit-y:0px;
  }

  #about .std-two-col{
    grid-template-columns:1fr;
    gap:18px;
  }

  #about .std-text-block h2{
    font-size:clamp(1.9rem,9.2vw,2.4rem);
    line-height:1.05;
  }

  #about .std-text-block p{
    font-size:.86rem;
    line-height:1.52;
  }

  #about .std-image-box img{
    min-height:0;
    height:228px;
    max-height:228px;
    object-fit:cover;
  }

  #about .std-badge-corner{
    right:9px;
    bottom:9px;
    width:74px;
    height:74px;
    border-radius:15px;
    font-size:1rem;
  }

  #about .std-badge-corner span{
    font-size:.58rem;
  }

  .std-home-cta-band-inner{
    grid-template-columns:1fr;
    gap:12px;
    padding:19px 16px;
    border-radius:18px;
  }

  .std-home-cta-band .std-mini-badge{
    margin-bottom:8px;
    padding:6px 9px;
    font-size:.72rem;
  }

  .std-home-cta-band h2{
    margin-bottom:7px;
    font-size:clamp(1.72rem,8.7vw,2.12rem);
    line-height:1.04;
  }

  .std-home-cta-band p{
    font-size:.83rem;
    line-height:1.46;
  }

  .std-home-cta-band-actions,
  .std-home-cta-band-actions-dual{
    justify-content:flex-start;
  }

  .std-home-cta-band-actions-dual .std-btn-primary{
    width:100%;
    min-height:45px;
    padding:0 13px;
    font-size:.82rem;
  }

  .std-homepage .std-home-cta-band,
  .std-references-page .std-home-cta-band-references{
    padding-bottom:72px;
  }

  .std-homepage .std-home-cta-band::after,
  .std-references-page .std-home-cta-band-references::after{
    height:80px;
    background-position:center,center 63%;
  }

  .std-homepage .std-home-cta-band::before,
  .std-references-page .std-home-cta-band-references::before{
    left:14%;
    right:14%;
    bottom:60px;
  }

  .std-footer{
    padding-top:30px;
  }

  .std-footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 13px;
    padding-bottom:20px;
  }

  .std-footer-brand{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    column-gap:12px;
    align-items:center;
  }

  .std-footer-brand .std-footer-logo-brand{
    grid-row:1 / span 2;
    width:60px;
    height:60px;
    margin:0;
    border-radius:14px;
  }

  .std-footer-brand h3{
    margin:0 0 3px;
    font-size:1.2rem;
  }

  .std-footer-brand p{
    margin:0;
    font-size:.76rem;
    line-height:1.36;
  }

  .std-footer-grid > div:last-child{
    grid-column:1 / -1;
  }

  .std-footer h4{
    margin-bottom:6px;
    font-size:.88rem;
  }

  .std-footer p,
  .std-footer li,
  .std-footer a{
    overflow-wrap:anywhere;
    font-size:.76rem;
    line-height:1.4;
  }

  .std-footer ul li{
    margin-bottom:2px;
  }

  .std-footer-bottom{
    padding:13px 9px 16px;
    font-size:.72rem;
    line-height:1.4;
  }

}


/* Reduced Motion bleibt funktional vollständig erhalten. */
@media (prefers-reduced-motion:reduce){

  .std-hero-bg{
    transform:none !important;
  }

}

/* =========================================================
   PHONE-B2 – GLOBALER SMARTPHONE-FEINSCHLIFF
   Gilt ausschließlich <=699px.
   Tablet ab 700px und Desktop bleiben unangetastet.

   Browser-verifiziert:
   - 320px Viewport
   - 334px document scrollWidth
   - Benefits-Scrub-Karten verlassen seitlich den Viewport
   - Hero/Header selbst zeigen keinen nachgewiesenen Strukturbruch
========================================================= */

@media (max-width:699px){

  /*
   * BENEFITS – HORIZONTALEN DOKUMENT-OVERFLOW LOKAL BEENDEN
   *
   * Die Scroll-Scrub-Animation bleibt unverändert:
   * gleiche --benefit-x Werte, gleiche Transform-Bewegung,
   * kein zusätzlicher Scroll-Listener, kein JS-Eingriff.
   *
   * Nur die Section clippt Pixel außerhalb ihrer eigenen
   * Smartphone-Bühne, damit sie nicht die Dokumentbreite
   * auf 334px vergrößern können.
   */
  #benefits{
    overflow-x:clip;
  }

  #benefits .std-container,
  #benefits .std-benefit-grid{
    min-width:0;
    max-width:100%;
  }

  #benefits .std-benefit-card{
    min-width:0;
    max-width:100%;
  }


  /*
   * GLOBALER RHYTHMUS
   * Keine Änderung am Hero oder Header – nur unnötige
   * vertikale Reserve in den nachgelagerten Bereichen.
   */
  #services .std-section-head.center,
  #benefits .std-section-head.center,
  #about .std-section-head.center{
    max-width:100%;
  }


  /*
   * CTA:
   * Smartphone-Bühne kompakter, Materialtextur bleibt.
   */
  .std-home-cta-band-inner{
    min-width:0;
    max-width:100%;
  }

}


/* ---------------------------------------------------------
   EXTRA-SMALL PHONE – 0–389px
   Besonders für die gemessene 320px-Vorschau.
--------------------------------------------------------- */

@media (max-width:389px){

  /*
   * Services:
   * Inhalt bleibt vollständig erhalten, nur die vertikale
   * Dichte wird für sehr schmale Phones verbessert.
   */
  #services.std-section{
    padding-top:44px;
    padding-bottom:46px;
  }

  #services .std-section-head.center{
    margin-bottom:17px;
  }

  #services .std-card-grid-3{
    gap:8px;
  }

  #services .std-service-card{
    grid-template-columns:36% minmax(0,64%);
    border-radius:15px;
  }

  #services .std-service-card img{
    min-height:126px;
  }

  #services .std-service-card-body{
    padding:10px 11px;
  }

  #services .std-service-card-body h3{
    margin-bottom:3px;
    font-size:1.01rem;
  }

  #services .std-service-card-body p{
    font-size:.72rem;
    line-height:1.34;
  }


  /*
   * Benefits:
   * Scroll-Scrub bleibt identisch; Karten selbst etwas
   * kompakter, damit die Section nicht unnötig lang wird.
   */
  #benefits.std-section{
    padding-top:44px;
    padding-bottom:44px;
  }

  #benefits .std-benefit-grid{
    gap:8px;
  }

  #benefits .std-benefit-card{
    padding:13px 14px;
  }

  #benefits .std-benefit-card h3{
    font-size:.96rem;
  }

  #benefits .std-benefit-card p{
    font-size:.78rem;
    line-height:1.36;
  }


  /*
   * About:
   * keine Inhaltskürzung, nur etwas weniger Außenreserve.
   */
  #about.std-section{
    padding-top:44px;
    padding-bottom:44px;
  }

  #about .std-two-col{
    gap:16px;
  }


  /*
   * CTA:
   * Die gemessenen 72px Bottom-Padding werden reduziert,
   * ohne die Steintextur abzuschneiden.
   */
  .std-homepage .std-home-cta-band,
  .std-references-page .std-home-cta-band-references{
    padding-bottom:64px;
  }

  .std-home-cta-band-inner{
    gap:10px;
    padding:17px 14px;
  }

  .std-home-cta-band .std-mini-badge{
    margin-bottom:7px;
  }

  .std-home-cta-band h2{
    margin-bottom:6px;
  }

  .std-home-cta-band p{
    font-size:.81rem;
    line-height:1.43;
  }

  .std-homepage .std-home-cta-band::after,
  .std-references-page .std-home-cta-band-references::after{
    height:72px;
  }

  .std-homepage .std-home-cta-band::before,
  .std-references-page .std-home-cta-band-references::before{
    bottom:54px;
  }

}


/* ---------------------------------------------------------
   PHONE – 390–479px
   Nur lokale Overflow-Sicherheit; bestehendes Design bleibt.
--------------------------------------------------------- */

@media (min-width:390px) and (max-width:479px){

  #benefits{
    overflow-x:clip;
  }

}


/* ---------------------------------------------------------
   LARGE PHONE / SMALL TABLET – 480–699px
   Tablet ab 700px ist explizit ausgeschlossen.
--------------------------------------------------------- */

@media (min-width:480px) and (max-width:699px){

  #benefits{
    overflow-x:clip;
  }

}

/* =========================================================
   BENEFITS FINAL – CLEAR 2-COLUMN MATRIX
   ---------------------------------------------------------
   Keine separate Leistungs-Spalte.
   Abdichtung/Wasserschutz ist als Teil des passenden Aufbaus
   im Benefit "Schutz vor Wasser" integriert.

   Desktop / Tablet:
   Vorteil + Bedeutung

   Phone:
   kompakte gestapelte Zeilen

   Bestehender Scroll-Scrub darunter bleibt unverändert.
========================================================= */

#benefits .std-section-head{
  max-width:820px;
}

#benefits .std-section-head > p{
  max-width:720px;
}

#benefits .std-benefit-matrix{
  margin:0 0 38px;
  overflow:hidden;

  border:1px solid rgba(182,122,51,.20);
  border-radius:22px;
  background:#fff;

  box-shadow:
    0 20px 52px rgba(18,18,18,.065),
    inset 0 1px 0 rgba(255,255,255,.8);
}

#benefits .std-benefit-matrix-head,
#benefits .std-benefit-matrix-row{
  display:grid;
  grid-template-columns:minmax(260px,.95fr) minmax(0,1.75fr);
  align-items:center;
}

#benefits .std-benefit-matrix-head{
  min-height:48px;
  padding:0 22px;

  background:
    linear-gradient(
      180deg,
      rgba(248,244,238,.98) 0%,
      rgba(246,241,234,.92) 100%
    );

  border-bottom:1px solid rgba(182,122,51,.20);
}

#benefits .std-benefit-matrix-head span{
  color:var(--std-text-soft);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#benefits .std-benefit-matrix-row{
  position:relative;
  min-height:76px;
  padding:0 22px;

  border-bottom:1px solid var(--std-line);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.99) 0%,
      rgba(252,251,249,.96) 100%
    );
}

#benefits .std-benefit-matrix-row:last-child{
  border-bottom:0;
}

#benefits .std-benefit-matrix-row--priority{
  background:
    linear-gradient(
      90deg,
      rgba(182,122,51,.055) 0%,
      rgba(255,255,255,.99) 33%,
      rgba(255,255,255,.99) 100%
    );
}

#benefits .std-benefit-matrix-row--priority::before{
  content:"";
  position:absolute;
  inset:12px auto 12px 0;
  width:3px;

  border-radius:0 999px 999px 0;
  background:var(--std-accent);
}

#benefits .std-benefit-matrix-name{
  display:flex;
  align-items:center;
  min-width:0;
  padding-right:24px;
}

#benefits .std-benefit-matrix-index{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;
  margin-right:12px;

  color:var(--std-accent);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.05em;

  border:1px solid rgba(182,122,51,.22);
  border-radius:999px;
  background:rgba(182,122,51,.06);
}

#benefits .std-benefit-matrix-name strong{
  min-width:0;
  color:var(--std-text);
  font-size:1rem;
  line-height:1.16;
  letter-spacing:-.015em;
}

#benefits .std-benefit-matrix-row > p{
  margin:0;
  color:var(--std-text-soft);
  font-size:.83rem;
  line-height:1.46;
}

#benefits .std-benefit-work-head{
  max-width:720px;
  margin:0 auto 20px;
  text-align:center;
}

#benefits .std-benefit-work-head > span{
  display:inline-block;
  margin:0 0 7px;

  color:var(--std-accent);
  font-size:.75rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#benefits .std-benefit-work-head h3{
  margin:0 0 7px;

  color:var(--std-text);
  font-size:clamp(1.45rem,2.35vw,2rem);
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}

#benefits .std-benefit-work-head p{
  max-width:620px;
  margin:0 auto;

  color:var(--std-text-soft);
  font-size:.9rem;
  line-height:1.55;
}


/* Tablet */
@media (min-width:700px) and (max-width:1199px){

  #benefits .std-benefit-matrix{
    margin-bottom:30px;
    border-radius:18px;
  }

  #benefits .std-benefit-matrix-head,
  #benefits .std-benefit-matrix-row{
    grid-template-columns:minmax(190px,.95fr) minmax(0,1.6fr);
  }

  #benefits .std-benefit-matrix-head{
    min-height:44px;
    padding:0 17px;
  }

  #benefits .std-benefit-matrix-head span{
    font-size:.61rem;
  }

  #benefits .std-benefit-matrix-row{
    min-height:70px;
    padding:0 17px;
  }

  #benefits .std-benefit-matrix-name{
    padding-right:16px;
  }

  #benefits .std-benefit-matrix-index{
    width:25px;
    height:25px;
    margin-right:9px;
    font-size:.56rem;
  }

  #benefits .std-benefit-matrix-name strong{
    font-size:.88rem;
  }

  #benefits .std-benefit-matrix-row > p{
    font-size:.74rem;
    line-height:1.4;
  }

  #benefits .std-benefit-work-head{
    margin-bottom:16px;
  }

  #benefits .std-benefit-work-head h3{
    font-size:1.42rem;
  }

  #benefits .std-benefit-work-head p{
    font-size:.82rem;
  }

}


/* Phone */
@media (max-width:699px){

  #benefits .std-benefit-matrix{
    margin-bottom:22px;
    border-radius:16px;
  }

  #benefits .std-benefit-matrix-head{
    display:none;
  }

  #benefits .std-benefit-matrix-row{
    display:block;
    min-height:0;
    padding:13px 14px 12px;
  }

  #benefits .std-benefit-matrix-row--priority::before{
    inset:10px auto 10px 0;
  }

  #benefits .std-benefit-matrix-name{
    padding:0;
  }

  #benefits .std-benefit-matrix-index{
    width:23px;
    height:23px;
    margin-right:8px;
    font-size:.52rem;
  }

  #benefits .std-benefit-matrix-name strong{
    font-size:.88rem;
  }

  #benefits .std-benefit-matrix-row > p{
    margin-top:5px;
    padding-left:31px;
    font-size:.69rem;
    line-height:1.35;
  }

  #benefits .std-benefit-work-head{
    margin-bottom:12px;
  }

  #benefits .std-benefit-work-head > span{
    margin-bottom:4px;
    font-size:.64rem;
  }

  #benefits .std-benefit-work-head h3{
    margin-bottom:4px;
    font-size:1.17rem;
  }

  #benefits .std-benefit-work-head p{
    font-size:.74rem;
    line-height:1.4;
  }

}

@media (max-width:389px){

  #benefits .std-benefit-matrix-row{
    padding:11px 11px 10px;
  }

  #benefits .std-benefit-matrix-index{
    width:22px;
    height:22px;
    margin-right:7px;
    font-size:.49rem;
  }

  #benefits .std-benefit-matrix-name strong{
    font-size:.82rem;
  }

  #benefits .std-benefit-matrix-row > p{
    padding-left:29px;
    font-size:.65rem;
  }

}

@media (prefers-reduced-motion:reduce){

  #benefits .std-benefit-matrix,
  #benefits .std-benefit-matrix-row{
    transform:none !important;
    transition:none !important;
  }

}