/* =========  Brand tokens (Logo: navy + gold) ========= */
  :root{
    --navy-900:#1f2540;
    --navy-800:#2b3252;     /* matches logo circle */
    --navy-700:#3a4262;
    --navy-600:#4a5478;
    --gold-500:#d6b07a;     /* matches logo ribbon */
    --gold-400:#e5c697;
    --gold-300:#f1dcb6;
    --gold-50: #fbf3e3;
    --cream:   #faf6ee;
    --paper:   #ffffff;
    --ink-900: #161a2e;
    --ink-700: #3a4060;
    --ink-500: #6b7290;
    --line:    #e7e3d8;
    --line-2:  #efece4;
    --shadow-sm: 0 1px 2px rgba(31,37,64,.06), 0 2px 6px rgba(31,37,64,.04);
    --shadow-md: 0 6px 16px rgba(31,37,64,.08), 0 2px 4px rgba(31,37,64,.04);
    --shadow-lg: 0 24px 60px -20px rgba(31,37,64,.25), 0 8px 20px -8px rgba(31,37,64,.12);
    --radius:14px;
    --radius-lg:22px;
    --container: 1180px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth; overflow-x:hidden}
  body{
    margin:0;
    overflow-x:hidden;
    font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
    color:var(--ink-900);
    background:var(--cream);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.6;
    font-size:16px;
  }
  img{max-width:100%;display:block}
  a{color:var(--navy-800);text-decoration:none}
  a:hover{color:var(--gold-500)}
  h1,h2,h3,h4{
    font-family:"Space Grotesk","Manrope",sans-serif;
    color:var(--ink-900);
    line-height:1.15;
    letter-spacing:-.01em;
    margin:0 0 .5em;
    font-weight:600;
    text-wrap:balance;
  }
  h1{font-size:clamp(2.1rem, 5vw + .5rem, 3.6rem); letter-spacing:-.02em; font-weight:700}
  h2{font-size:clamp(1.6rem, 2.6vw + .5rem, 2.4rem)}
  h3{font-size:clamp(1.2rem, 1.2vw + .8rem, 1.5rem)}
  p{margin:0 0 1em}

  .container{
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
  }
  @media(max-width:560px){ .container{padding:0 18px} }

  .eyebrow{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:"Space Grotesk",sans-serif;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    font-weight:600; color:var(--navy-700);
  }
  .eyebrow::before{
    content:""; width:28px; height:2px; background:var(--gold-500); border-radius:2px;
  }

  /* =========  Nav  ========= */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,238,.85);
    backdrop-filter:saturate(140%) blur(14px);
    -webkit-backdrop-filter:saturate(140%) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .25s, background .25s, box-shadow .25s;
  }
  .nav.scrolled{
    border-bottom-color:var(--line);
    box-shadow:0 1px 0 rgba(31,37,64,.02);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .brand{display:flex; align-items:center; gap:.7rem; color:var(--ink-900); font-weight:700}
  .brand:hover{color:var(--ink-900)}
  .brand img{width:40px; height:40px; object-fit:contain}
  .brand-text{
    display:flex; flex-direction:column; line-height:1;
    font-family:"Space Grotesk",sans-serif;
  }
  .brand-text strong{font-size:1.05rem; letter-spacing:.02em}
  .brand-text span{font-size:.72rem; color:var(--ink-500); margin-top:3px; letter-spacing:.04em; font-weight:500}

  .nav-links{display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0}
  .nav-links a{
    display:inline-block;
    padding:.6rem .9rem; font-weight:500; color:var(--ink-700); font-size:.95rem;
    border-radius:8px;
  }
  .nav-links a:hover{background:rgba(31,37,64,.05); color:var(--ink-900)}
  .nav-cta{
    margin-left:.6rem;
    padding:.65rem 1.05rem !important;
    background:var(--navy-800); color:#fff !important;
    border-radius:999px;
    font-weight:600;
  }
  .nav-cta:hover{background:var(--navy-900) !important; color:#fff !important}

  .menu-btn{
    display:none;
    width:42px; height:42px; border:1px solid var(--line); background:transparent;
    border-radius:10px; cursor:pointer; padding:0;
    align-items:center; justify-content:center;
  }
  .menu-btn span{
    display:block; width:18px; height:2px; background:var(--ink-900); position:relative; border-radius:2px;
    transition:transform .25s, opacity .2s;
  }
  .menu-btn span::before, .menu-btn span::after{
    content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink-900); border-radius:2px;
    transition:transform .25s;
  }
  .menu-btn span::before{top:-6px}
  .menu-btn span::after{top:6px}
  .menu-btn[aria-expanded="true"] span{background:transparent}
  .menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

  @media(max-width:880px){
    .menu-btn{display:inline-flex}
    .nav-links{
      position:absolute; left:0; right:0; top:72px;
      flex-direction:column; align-items:stretch;
      background:var(--cream);
      padding:14px 18px 22px;
      border-bottom:1px solid var(--line);
      gap:0;
      transform:translateY(-12px); opacity:0; pointer-events:none;
      transition:transform .2s, opacity .2s;
    }
    .nav-links.open{transform:none; opacity:1; pointer-events:auto}
    .nav-links a{padding:.85rem .6rem; border-radius:10px; font-size:1rem}
    .nav-cta{margin:.6rem 0 0; text-align:center}
  }

  /* =========  Buttons  ========= */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding:.85rem 1.35rem; border-radius:999px;
    font-weight:600; font-size:.95rem; line-height:1;
    border:1px solid transparent; cursor:pointer;
    transition:transform .12s, background .2s, color .2s, border-color .2s, box-shadow .2s;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--navy-800); color:#fff}
  .btn-primary:hover{background:var(--navy-900); color:#fff; box-shadow:var(--shadow-md)}
  .btn-gold{background:var(--gold-500); color:var(--navy-900)}
  .btn-gold:hover{background:var(--gold-400); color:var(--navy-900); box-shadow:var(--shadow-md)}
  .btn-ghost{background:transparent; color:var(--ink-900); border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--ink-900); background:#fff}
  .btn-lg{padding:1rem 1.6rem; font-size:1rem}

  /* =========  Hero  ========= */
  .hero{
    position:relative;
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(214,176,122,.18), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(43,50,82,.07), transparent 60%),
      var(--cream);
    overflow:hidden;
    padding: clamp(48px, 8vw, 96px) 0 clamp(60px, 9vw, 110px);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line-2) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
    opacity:.55;
    pointer-events:none;
  }
  .hero-grid{
    position:relative;
    display:grid; grid-template-columns: 1.15fr .85fr;
    gap:clamp(28px, 5vw, 64px);
    align-items:center;
  }
  @media(max-width:880px){ .hero-grid{grid-template-columns:1fr} }

  .hero h1 .accent{
    background: linear-gradient(120deg, var(--gold-500) 0%, var(--gold-400) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{
    font-size:clamp(1.05rem, .4vw + 1rem, 1.2rem);
    color:var(--ink-700);
    max-width:560px;
    margin-top:1rem;
    text-wrap:pretty;
  }
  .hero-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem}
  .hero-trust{
    display:flex; gap:1.2rem 1.8rem; flex-wrap:wrap; margin-top:2rem;
    color:var(--ink-700); font-size:.92rem;
  }
  .hero-trust div{display:flex; align-items:center; gap:.5rem}
  .check{
    width:22px; height:22px; border-radius:50%;
    background:var(--gold-50); color:var(--navy-800);
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    border:1px solid var(--gold-300);
  }

  /* hero card */
  .hero-card{
    position:relative;
    background:#fff;
    border-radius:var(--radius-lg);
    padding:26px;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--line-2);
  }
  .hero-card::after{
    content:""; position:absolute; inset:auto -18px -18px auto;
    width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--gold-300), var(--gold-500));
    opacity:.35; filter:blur(2px); z-index:-1;
  }
  .hero-card .top{
    display:flex; align-items:center; gap:.8rem; padding-bottom:18px; border-bottom:1px solid var(--line-2);
    flex-wrap:wrap;
  }
  .hero-card .top > div:not([class]){min-width:0; flex:1 1 auto}
  .hero-card .top img{width:54px; height:54px; object-fit:contain; flex:none}
  .hero-card .top h4{margin:0; font-size:1.05rem; word-break:break-word}
  .hero-card .top p{margin:.15rem 0 0; font-size:.85rem; color:var(--ink-500)}
  .status-chip{
    margin-left:auto; display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .55rem .25rem .5rem; border-radius:999px;
    font-size:.72rem; font-weight:600; letter-spacing:.02em;
    background:rgba(61,160,107,.1); color:#1f5c3a;
    border:1px solid rgba(61,160,107,.25);
    white-space:nowrap;
    transition:background .25s, color .25s, border-color .25s;
    max-width:100%;
    min-width:0;
  }
  .status-chip .label{
    overflow:hidden; text-overflow:ellipsis;
  }
  @media(max-width:480px){
    .status-chip{font-size:.65rem; padding:.2rem .45rem .2rem .4rem}
  }
  .status-chip .dot{
    width:8px; height:8px; border-radius:50%; background:#3da06b;
    box-shadow:0 0 0 3px rgba(61,160,107,.18);
    flex:none;
  }
  .status-chip[data-state="open"]   .dot{animation:pulseDot 2.4s ease-in-out infinite}
  .status-chip[data-state="closed"]{background:rgba(180,140,60,.12); color:#7a5a18; border-color:rgba(180,140,60,.3)}
  .status-chip[data-state="closed"] .dot{background:#c89a3a; box-shadow:0 0 0 3px rgba(200,154,58,.18)}
  .status-chip[data-state="absent"]{background:rgba(181,62,62,.1); color:#7a1d1d; border-color:rgba(181,62,62,.3)}
  .status-chip[data-state="absent"] .dot{background:#c93d3d; box-shadow:0 0 0 3px rgba(201,61,61,.2); animation:pulseDot 2s ease-in-out infinite}
  @keyframes pulseDot{
    0%,100%{box-shadow:0 0 0 3px rgba(61,160,107,.18)}
    50%    {box-shadow:0 0 0 6px rgba(61,160,107,.05)}
  }
  /* Legacy-Klasse beibehalten */
  .status-dot{
    width:9px; height:9px; border-radius:50%; background:#3da06b;
    box-shadow:0 0 0 4px rgba(61,160,107,.15);
    margin-left:auto;
  }
  .hero-card ul{
    list-style:none; padding:0; margin:18px 0 0;
    display:flex; flex-direction:column; gap:14px;
  }
  .hero-card li{
    display:flex; align-items:center; gap:.85rem; padding:10px 12px;
    background:var(--cream); border-radius:12px; font-size:.92rem; color:var(--ink-700);
  }
  .hero-card li b{color:var(--ink-900); font-weight:600}
  .hero-card li .ic{
    width:34px; height:34px; border-radius:9px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:1px solid var(--line); color:var(--navy-800);
  }
  .hero-card .hours{
    margin-top:18px; padding:14px; border-radius:12px;
    background:var(--navy-800); color:#fff; display:flex; gap:.8rem; align-items:center;
  }
  .hero-card .hours .ic{
    width:34px; height:34px; border-radius:9px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.1); color:var(--gold-400);
    border:1px solid rgba(255,255,255,.15);
  }
  .hero-card .hours div small{display:block; opacity:.7; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px}
  .hero-card .hours div b{font-weight:600; font-size:.92rem}

  /* =========  Section base  ========= */
  section{padding: clamp(64px, 8vw, 110px) 0}
  section.tight{padding: clamp(48px, 6vw, 80px) 0}
  .section-head{max-width:720px; margin:0 auto clamp(36px,4vw,56px); text-align:center}
  .section-head .eyebrow{justify-content:center}
  .section-head .eyebrow::before{margin-right:0}
  .section-head p{color:var(--ink-700); font-size:1.05rem; text-wrap:pretty}

  /* =========  Services cards  ========= */
  .cards{
    display:grid; gap:22px;
    grid-template-columns:repeat(3, 1fr);
  }
  @media(max-width:900px){ .cards{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:600px){ .cards{grid-template-columns:1fr} }

  .card{
    background:#fff; border-radius:var(--radius-lg); overflow:hidden;
    border:1px solid var(--line-2);
    box-shadow:var(--shadow-sm);
    display:flex; flex-direction:column;
    transition:transform .2s, box-shadow .25s, border-color .25s;
  }
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--gold-300)}
  .card .img-wrap{
    position:relative; aspect-ratio: 16/10; overflow:hidden; background:var(--navy-800);
  }
  .card img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
  .card:hover img{transform:scale(1.04)}
  .card .img-wrap::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(31,37,64,.45) 100%);
  }
  .card .tag{
    position:absolute; left:16px; top:16px; z-index:1;
    background:rgba(255,255,255,.95);
    color:var(--navy-800);
    padding:.4rem .7rem; border-radius:999px;
    font-size:.75rem; font-weight:600; letter-spacing:.04em;
    backdrop-filter:blur(10px);
  }
  .card-body{padding:22px 22px 18px; flex:1; display:flex; flex-direction:column}
  .card-body h3{margin:0 0 .35rem; font-size:1.2rem}
  .card-body p{color:var(--ink-700); font-size:.94rem; margin-bottom:1rem}
  .card-body ul{
    margin:0 0 1.1rem; padding:0; list-style:none;
    display:flex; flex-direction:column; gap:.4rem;
    color:var(--ink-700); font-size:.9rem;
  }
  .card-body li{display:flex; gap:.55rem; align-items:flex-start}
  .card-body li::before{
    content:""; flex:none; width:6px; height:6px; border-radius:50%;
    background:var(--gold-500); margin-top:.55rem;
  }
  .card-link{
    margin-top:auto; color:var(--navy-800); font-weight:600; font-size:.92rem;
    display:inline-flex; align-items:center; gap:.4rem;
  }
  .card-link svg{transition:transform .2s}
  .card-link:hover svg{transform:translateX(3px)}

  /* =========  Business band ========= */
  .business{
    background:
      radial-gradient(800px 400px at 100% 0, rgba(214,176,122,.25), transparent 50%),
      var(--navy-800);
    color:#fff;
    border-radius:var(--radius-lg);
    padding:clamp(36px, 5vw, 64px);
    margin-top:30px;
    display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px, 4vw, 48px);
    align-items:center;
    position:relative; overflow:hidden;
  }
  @media(max-width:780px){ .business{grid-template-columns:1fr} }
  .business h2,.business h3{color:#fff}
  .business p{color:rgba(255,255,255,.78)}
  .business .eyebrow{color:var(--gold-400)}
  .business .eyebrow::before{background:var(--gold-400)}
  .biz-list{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.4rem;
  }
  @media(max-width:480px){ .biz-list{grid-template-columns:1fr} }
  .biz-list li{
    display:flex; align-items:flex-start; gap:.6rem;
    color:rgba(255,255,255,.92); font-size:.95rem;
  }
  .biz-list li::before{
    content:""; flex:none; width:18px; height:18px; border-radius:50%;
    background:rgba(214,176,122,.15); border:1px solid var(--gold-400);
    margin-top:.18rem;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path d='M2 6.5l2.5 2.5L10 3' fill='none' stroke='%23e5c697' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:center;
  }

  /* =========  Why us / stats ========= */
  .why{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  }
  @media(max-width:780px){ .why{grid-template-columns:repeat(2,1fr)} }
  .stat{
    background:#fff; border:1px solid var(--line-2); border-radius:var(--radius);
    padding:22px;
  }
  .stat .num{
    font-family:"Space Grotesk",sans-serif;
    font-size:2.2rem; font-weight:700; color:var(--navy-800); line-height:1;
    letter-spacing:-.02em;
  }
  .stat .num span{color:var(--gold-500)}
  .stat .lbl{margin-top:.5rem; color:var(--ink-700); font-size:.92rem}

  /* =========  Detailed services ========= */
  .topics{
    display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
  }
  @media(max-width:780px){ .topics{grid-template-columns:1fr} }
  .topic{
    background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-lg);
    padding:28px;
  }
  .topic h3{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}
  .topic h3 .ic{
    width:42px; height:42px; flex:none; border-radius:11px;
    background:var(--gold-50); color:var(--navy-800);
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--gold-300);
  }
  .topic ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.65rem}
  .topic li{
    display:grid;
    grid-template-columns:8px 1fr;
    gap:.2rem .8rem;
    align-items:start;
    padding-bottom:.85rem; border-bottom:1px dashed var(--line);
  }
  .topic li:last-child{border-bottom:0; padding-bottom:0}
  .topic li::before{
    content:""; width:8px; height:8px; border-radius:50%;
    background:var(--gold-500); margin-top:.55rem;
    grid-row:1 / span 2; grid-column:1;
  }
  .topic li b{
    grid-column:2; grid-row:1;
    color:var(--ink-900); font-weight:600;
    font-family:"Space Grotesk",sans-serif;
    font-size:.98rem; line-height:1.35;
  }
  .topic li .d{
    grid-column:2; grid-row:2;
    color:var(--ink-700); font-size:.92rem; line-height:1.55;
    margin-top:2px;
  }

  /* =========  References / partners ========= */
  .partners{
    background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-lg);
    padding:clamp(20px, 4vw, 44px);
    overflow:hidden; /* Grid-Border-Radius schneidet sauber */
  }
  .partners-grid{
    display:grid; gap:1px;
    /* 12 Logos → Spalten so wählen, dass die letzte Reihe immer voll ist:
       Desktop 4 · Tablet 3 · Mobile 2 */
    grid-template-columns:repeat(4, 1fr);
    background:var(--line-2);
    border:1px solid var(--line-2);
    border-radius:14px;
    overflow:hidden;
    width:100%;
  }
  .partner{
    background:#fff;
    aspect-ratio: 5/3;
    display:flex; align-items:center; justify-content:center;
    padding:22px 18px;
    transition:background .25s;
    position:relative;
    min-height:120px;
    min-width:0;          /* Grid-Items dürfen unter Min-Content schrumpfen */
    overflow:hidden;      /* sichert gegen Inhalts-Overflow */
    box-sizing:border-box;
  }
  .partner:hover{background:var(--cream)}
  .partner img{
    max-width:100%;
    max-height:80%;
    width:auto; height:auto;
    object-fit:contain;
    filter:saturate(.95);
    transition:transform .3s, filter .3s;
  }
  .partner:hover img{transform:scale(1.04); filter:saturate(1.1)}
  .partner-text{padding:14px}
  .partner-text span{
    font-family:"Space Grotesk",sans-serif; font-weight:600;
    color:var(--navy-800); font-size:.95rem;
    text-align:center; line-height:1.2;
    transition:color .2s;
    letter-spacing:.01em;
  }
  .partner-text:hover span{color:var(--navy-900)}
  .partner::after{
    content:"";
    position:absolute; top:10px; right:10px;
    width:10px; height:10px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4a060' stroke-width='2.4' stroke-linecap='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") center/contain no-repeat;
    opacity:0; transform:translateY(-2px);
    transition:opacity .2s, transform .2s;
  }
  .partner:hover::after{opacity:.6; transform:none}

  @media(max-width:1180px){
    .partner{padding:18px 14px; min-height:100px}
  }
  @media(max-width:880px){
    .partners-grid{grid-template-columns:repeat(3, 1fr)}
    .partner{padding:14px 10px; min-height:88px}
    .partner img{max-height:68%}
  }
  @media(max-width:560px){
    .partners{padding:14px}            /* weniger Rahmen, mehr Platz fürs Grid */
    .partners-grid{grid-template-columns:repeat(2, 1fr)}
    .partner{aspect-ratio: 4/3; padding:14px 10px; min-height:96px}
    .partner img{max-width:90%; max-height:64%}
    .partner-text span{font-size:.82rem; line-height:1.2}
    .partner::after{display:none}
  }
  @media(max-width:380px){
    .partners{padding:10px}
    .partner{padding:10px 6px; min-height:84px}
    .partner img{max-width:88%}
    .partner-text span{font-size:.78rem}
  }

  /* =========  Contact ========= */
  .contact-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap:30px;
    align-items:start;
  }
  @media(max-width:880px){ .contact-grid{grid-template-columns:1fr} }
  .form-card{
    background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-lg);
    padding:clamp(26px,3vw,36px);
  }
  .field{display:flex; flex-direction:column; margin-bottom:14px}
  .field label{
    font-size:.82rem; font-weight:600; color:var(--ink-700);
    margin-bottom:.4rem; letter-spacing:.02em;
  }
  .field input, .field textarea{
    font:inherit; color:var(--ink-900);
    background:var(--cream);
    border:1px solid var(--line); border-radius:10px;
    padding:.75rem .85rem; outline:none;
    transition:border-color .2s, background .2s, box-shadow .2s;
  }
  .field input:focus, .field textarea:focus{
    border-color:var(--navy-700); background:#fff;
    box-shadow:0 0 0 4px rgba(43,50,82,.08);
  }
  .field textarea{min-height:120px; resize:vertical}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  @media(max-width:480px){ .field-row{grid-template-columns:1fr} }
  .checkbox{
    display:flex; gap:.6rem; align-items:flex-start;
    font-size:.88rem; color:var(--ink-700); margin:6px 0 18px;
  }
  .checkbox input{margin-top:.25rem; accent-color:var(--navy-800)}
  .capbox{
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  }
  .capbox-q{
    font-family:"Space Grotesk",sans-serif; font-weight:600;
    color:var(--ink-900); font-size:1rem;
    display:flex; align-items:center; gap:.4rem;
  }
  .capbox-q .eq{color:var(--gold-500)}
  .capbox input[type="text"]{
    flex:1; min-width:90px;
    background:#fff; border:1px solid var(--line); border-radius:8px;
    padding:.55rem .7rem; font:inherit; outline:none;
    transition:border-color .2s, box-shadow .2s;
  }
  .capbox input:focus{border-color:var(--navy-700); box-shadow:0 0 0 4px rgba(43,50,82,.08)}
  .capbox-reload{
    background:transparent; border:1px solid var(--line); border-radius:8px;
    cursor:pointer; color:var(--ink-700);
    width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    transition:border-color .2s, color .2s;
  }
  .capbox-reload:hover{border-color:var(--navy-700); color:var(--navy-800)}
  .form-error{
    margin-top:14px; padding:12px 14px; border-radius:10px;
    background:#fdecec; color:#7a1d1d; font-size:.92rem;
    border:1px solid #f5c4c4;
    display:none;
  }
  .form-error.show{display:block}
  .form-success{
    margin-top:14px; padding:14px 16px; border-radius:10px;
    background:#eaf6ef; color:#1f5c3a; font-size:.95rem;
    border:1px solid #bfe2cd;
    display:none;
    line-height:1.55;
  }
  .form-success.show{display:flex; gap:.7rem; align-items:flex-start}
  .form-success svg{flex:none; margin-top:2px; color:#3da06b}
  .form-success b{color:#143f29; font-family:"Space Grotesk",sans-serif}
  .field.has-error input, .field.has-error textarea{
    border-color:#d98a8a; background:#fff6f6;
  }
  .field-error{
    font-size:.82rem; color:#7a1d1d; margin-top:.4rem; display:none;
  }
  .field.has-error .field-error{display:block}
  .btn[aria-busy="true"]{opacity:.7; cursor:wait}
  .btn .spin{display:none; animation:spin 1s linear infinite}
  .btn[aria-busy="true"] .spin{display:inline-block}
  .btn[aria-busy="true"] .arr{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hp-honey{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

  .info-card{
    background:var(--navy-800); color:#fff;
    border-radius:var(--radius-lg);
    padding:clamp(26px,3vw,34px);
    position:relative; overflow:hidden;
  }
  .info-card::before{
    content:""; position:absolute; right:-60px; top:-60px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--gold-300), transparent 70%);
    opacity:.25;
  }
  .info-card h3{color:#fff}
  .info-card .name{
    font-family:"Space Grotesk",sans-serif; font-size:1.15rem; font-weight:600;
    margin-bottom:.2rem;
  }
  .info-card .role{color:rgba(255,255,255,.6); font-size:.9rem; margin-bottom:1.4rem}
  .contact-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.8rem}
  .contact-list li{display:flex; gap:.85rem; align-items:center}
  .contact-list .ic{
    width:38px; height:38px; flex:none; border-radius:10px;
    background:rgba(255,255,255,.08); color:var(--gold-400);
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.1);
  }
  .contact-list a{color:#fff}
  .contact-list a:hover{color:var(--gold-400)}
  .contact-list small{display:block; color:rgba(255,255,255,.55); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px}
  .info-divider{height:1px; background:rgba(255,255,255,.1); margin:22px 0}
  .hours-grid{display:grid; grid-template-columns:1fr auto; gap:.4rem .8rem; font-size:.94rem}
  .hours-grid div:nth-child(odd){color:rgba(255,255,255,.7)}
  .hours-grid div:nth-child(even){font-weight:600; font-family:"Space Grotesk",sans-serif}

  /* =========  Footer  ========= */
  footer{
    background:var(--navy-900); color:rgba(255,255,255,.75);
    padding:60px 0 26px; margin-top:40px;
    font-size:.92rem;
  }
  footer a{color:rgba(255,255,255,.85)}
  footer a:hover{color:var(--gold-400)}
  .foot-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:34px;
    margin-bottom:40px;
  }
  @media(max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr} }
  @media(max-width:480px){ .foot-grid{grid-template-columns:1fr} }
  .foot-grid h4{color:#fff; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem}
  .foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem}
  .foot-brand{display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; color:#fff}
  .foot-brand img{width:42px; height:42px; object-fit:contain}
  .foot-brand strong{font-family:"Space Grotesk",sans-serif; font-size:1.05rem}
  .foot-socials{
    display:flex; gap:.6rem; margin-top:1.2rem;
  }
  .foot-socials a{
    width:38px; height:38px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); color:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.1);
    transition:background .2s, color .2s, border-color .2s, transform .2s;
  }
  .foot-socials a:hover{
    background:var(--gold-500); color:var(--navy-900);
    border-color:var(--gold-500); transform:translateY(-2px);
  }
  .foot-socials a svg{width:18px; height:18px}
  .foot-bottom{
    border-top:1px solid rgba(255,255,255,.08); padding-top:22px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    color:rgba(255,255,255,.55); font-size:.85rem;
  }

  /* utility */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1; transform:none}

  ::selection{background:var(--gold-300); color:var(--navy-900)}

  /* =========  News banner  ========= */
  .news-banner{
    background:linear-gradient(90deg, var(--navy-900) 0%, var(--navy-800) 100%);
    color:#fff; font-size:.9rem; position:relative;
  }
  .news-banner-inner{
    display:flex; align-items:center; gap:.8rem;
    padding:.65rem 24px; max-width:var(--container); margin:0 auto;
  }
  .news-banner .pill{
    background:var(--gold-500); color:var(--navy-900);
    padding:.15rem .55rem; border-radius:999px;
    font-family:"Space Grotesk",sans-serif; font-weight:600;
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; flex:none;
  }
  .news-banner p{margin:0; color:rgba(255,255,255,.92); flex:1; min-width:0}
  .news-banner a{color:var(--gold-400); font-weight:600; text-decoration:underline; text-underline-offset:2px}
  .news-banner a:hover{color:#fff}
  .news-close{
    background:transparent; border:0; color:rgba(255,255,255,.7);
    cursor:pointer; padding:4px; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center; flex:none;
  }
  .news-close:hover{color:#fff; background:rgba(255,255,255,.08)}
  /* Betriebsurlaub-Variante */
  .news-banner[data-mode="urlaub"]{
    background:linear-gradient(90deg, #6b1f1f 0%, #8a2828 100%);
  }
  .news-banner[data-mode="urlaub"] .pill{
    background:#fff; color:#6b1f1f;
  }
  .news-banner[data-mode="urlaub"] a{color:#ffdada}
  .news-banner[data-mode="urlaub"] a:hover{color:#fff}
  @media(max-width:560px){
    .news-banner-inner{padding:.55rem 16px; font-size:.82rem; gap:.55rem}
    .news-banner .pill{font-size:.65rem}
  }

  /* =========  Floating Fernwartung button (desktop only)  ========= */
  .remote-fab{
    position:fixed; right:-2px; top:50%; transform:translateY(-50%);
    z-index:40;
    background:var(--navy-800); color:#fff;
    border:1px solid var(--gold-500);
    border-right:0;
    border-radius:14px 0 0 14px;
    padding:14px 14px 14px 16px;
    box-shadow:-6px 6px 24px rgba(31,37,64,.18);
    cursor:pointer;
    display:inline-flex; flex-direction:column; align-items:center; gap:8px;
    font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.78rem;
    letter-spacing:.06em; text-transform:uppercase;
    transition:transform .25s cubic-bezier(.2,.7,.3,1.2), background .2s, box-shadow .2s;
    animation:remoteFloat 4s ease-in-out infinite;
  }
  .remote-fab:hover{background:var(--navy-900); transform:translateY(-50%) translateX(-3px); box-shadow:-10px 8px 28px rgba(31,37,64,.28)}
  .remote-fab:active{transform:translateY(-50%) translateX(0)}
  .remote-fab .fab-ic{
    width:42px; height:42px; border-radius:10px;
    background:var(--gold-500); color:var(--navy-900);
    display:inline-flex; align-items:center; justify-content:center;
  }
  .remote-fab .fab-label{writing-mode:vertical-rl; transform:rotate(180deg); line-height:1}
  @keyframes remoteFloat{
    0%,100%{box-shadow:-6px 6px 24px rgba(31,37,64,.18), 0 0 0 0 rgba(214,176,122,.4)}
    50%{box-shadow:-6px 6px 24px rgba(31,37,64,.18), 0 0 0 10px rgba(214,176,122,0)}
  }
  @media(max-width:880px){ .remote-fab{display:none} }