:root{
    --tanne:#16524E;
    --tanne-dunkel:#103F3C;
    --tanne-hell:#1F6B65;
    --creme:#EBE3C8;
    --creme-dunkel:#DDD2AC;
    --papier:#F6F4EC;
    --koralle:#EB653E;
    --koralle-dunkel:#D2532E;
    --text-dunkel:#16221F;
    --text-hell:#EBE3C8;
    --text-grau:#5C6863;
    --radius:3px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color:var(--text-dunkel);
    background:var(--papier);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Archivo', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--tanne-dunkel);
  }
  .mono{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media(max-width:640px){.wrap{padding:0 20px;}}
  a:focus-visible, button:focus-visible{outline:2px solid var(--koralle);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(246,244,236,0.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--creme-dunkel);
  }
  nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
  .logo{display:flex;align-items:center;gap:10px;}
  .logo img{height:40px;width:40px;border-radius:6px;}
  .logo-text{display:flex;flex-direction:column;line-height:1.1;}
  .logo-text b{font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;color:var(--tanne-dunkel);}
  .logo-text span{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-weight:400;font-size:0.62rem;color:var(--koralle);letter-spacing:0.06em;text-transform:uppercase;}
  .navlinks{display:flex;gap:24px;font-size:0.86rem;font-weight:500;}
  .navlinks a{position:relative;padding:4px 0;white-space:nowrap;}
  .navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--koralle);transition:width .25s ease;}
  .navlinks a:hover::after{width:100%;}
  .nav-cta{background:var(--tanne-dunkel);color:var(--text-hell);padding:10px 18px;font-size:0.84rem;font-weight:600;border-radius:var(--radius);white-space:nowrap;}
  .nav-cta:hover{background:var(--koralle);color:#fff;}
  .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:1px solid var(--creme-dunkel);border-radius:6px;cursor:pointer;padding:0;}
  .burger span{display:block;height:2px;width:18px;background:var(--tanne-dunkel);margin:0 auto;transition:transform .2s ease, opacity .2s ease;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{display:none;flex-direction:column;gap:2px;padding:10px 0 18px;border-top:1px solid var(--creme-dunkel);}
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:12px 4px;font-size:0.95rem;font-weight:500;border-bottom:1px solid var(--creme-dunkel);}
  .mobile-menu a:last-child{border-bottom:none;}
  @media(max-width:980px){
    .navlinks{display:none;}
    .burger{display:flex;}
  }
  @media(max-width:480px){
    .nav-cta{padding:9px 12px;font-size:0.76rem;}
    .logo img{height:32px;width:32px;}
  }
  @media(min-width:981px){
    .mobile-menu{display:none !important;}
  }

  /* ---------- HERO ---------- */
  .hero{padding:72px 0 56px;background:radial-gradient(circle at 82% 12%, rgba(235,101,62,0.12), transparent 55%), var(--papier);border-bottom:1px solid var(--creme-dunkel);}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:48px;}}
  .eyebrow{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.76rem;color:var(--koralle-dunkel);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--koralle);}
  .hero h1{font-size:clamp(2rem, 3.6vw, 3rem);line-height:1.1;margin-bottom:20px;}
  .hero h1 em{font-style:normal;color:var(--koralle);}
  .hero p.lead{font-size:1.05rem;color:var(--text-grau);max-width:48ch;margin-bottom:30px;}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;font-weight:600;font-size:0.92rem;border-radius:var(--radius);border:1px solid transparent;transition:transform .18s ease, background .18s ease, color .18s ease;}
  .btn-primary{background:var(--tanne-dunkel);color:var(--text-hell);}
  .btn-primary:hover{background:var(--koralle);color:#fff;transform:translateY(-1px);}
  .btn-ghost{border-color:var(--tanne-dunkel);color:var(--tanne-dunkel);}
  .btn-ghost:hover{background:var(--tanne-dunkel);color:var(--text-hell);}

  .modstack{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .modtile{background:var(--tanne-dunkel);color:var(--text-hell);border-radius:var(--radius);padding:15px 13px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 0 rgba(0,0,0,0.15);transition:transform .22s ease, box-shadow .22s ease, background .22s ease;}
  .modtile:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--koralle);background:var(--tanne-hell);}
  .modtile .tag{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.6rem;color:var(--koralle);text-transform:uppercase;letter-spacing:0.08em;}
  .modtile .name{font-family:'Archivo',sans-serif;font-weight:700;font-size:0.86rem;}
  .modstack .modtile:nth-child(2){margin-top:16px;}
  .modstack .modtile:nth-child(5){margin-top:16px;}
  .modstack .modtile:nth-child(8){margin-top:16px;}
  .modstack-caption{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.7rem;color:var(--text-grau);margin-top:14px;text-align:right;}
  @media(max-width:480px){
    .modstack{grid-template-columns:repeat(2,1fr);}
    .modstack .modtile:nth-child(2){margin-top:0;}
    .modstack .modtile:nth-child(5){margin-top:0;}
    .modstack .modtile:nth-child(8){margin-top:0;}
  }

  /* Kundenstreifen */
  .clients{background:var(--tanne-dunkel);padding:26px 0;}
  .clients .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
  .clients .label{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.72rem;color:var(--koralle);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}
  .clients .logos{display:flex;gap:14px;flex-wrap:wrap;align-items:center;flex:1;}
  .clients .logos img{height:34px;width:auto;background:var(--creme);border-radius:4px;padding:6px 10px;object-fit:contain;max-width:150px;}
  .clients .logos button{background:none;border:none;padding:0;cursor:zoom-in;border-radius:4px;}
  .clients .logos button:hover img{outline:2px solid var(--koralle);}
  .lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(16,63,60,0.88);z-index:200;align-items:center;justify-content:center;padding:32px;cursor:zoom-out;}
  .lightbox-overlay.open{display:flex;}
  .lightbox-overlay img{max-width:min(600px,90vw);max-height:80vh;width:auto;background:var(--creme);border-radius:8px;padding:28px 34px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.4);}
  .lightbox-close{position:absolute;top:24px;right:28px;color:var(--creme);font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.85rem;border:1px solid rgba(235,227,200,0.5);padding:8px 14px;border-radius:20px;background:none;cursor:pointer;}
  .lightbox-close:hover{border-color:var(--koralle);color:var(--koralle);}

  /* ---------- SECTIONS ---------- */
  section{padding:84px 0;}
  .section-head{max-width:660px;margin-bottom:48px;}
  .section-head .eyebrow{margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:14px;}
  .section-head p{color:var(--text-grau);font-size:1.01rem;}

  /* Leistungen */
  .leistungen-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:44px;align-items:center;margin-bottom:40px;}
  @media(max-width:900px){.leistungen-grid{grid-template-columns:1fr;}}
  .leistungen-photo{border-radius:6px;overflow:hidden;border:1px solid var(--creme-dunkel);}
  .leistungen-cards{display:grid;gap:16px;}
  .leistung-card{background:#fff;border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:22px 22px;transition:border-color .2s ease, transform .2s ease;display:flex;gap:16px;align-items:flex-start;}
  .leistung-card:hover{border-color:var(--koralle);transform:translateY(-2px);}
  .leistung-card img{width:40px;height:40px;flex-shrink:0;}
  .leistung-card h3{font-size:1rem;margin-bottom:6px;}
  .leistung-card p{color:var(--text-grau);font-size:0.88rem;}

  /* Group-Office Feature Tabs */
  .go-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;border-bottom:1px solid var(--creme-dunkel);padding-bottom:0;}
  .go-tab{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.78rem;padding:10px 4px;color:var(--text-grau);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;margin-right:18px;}
  .go-tab.active{color:var(--tanne-dunkel);border-bottom-color:var(--koralle);font-weight:600;}
  .go-panel{display:none;}
  .go-panel.active{display:block;animation:fadein .25s ease;}
  @keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
  .go-panel-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start;}
  @media(max-width:800px){.go-panel-grid{grid-template-columns:1fr;}}
  .go-panel-grid h3{font-size:1.15rem;margin-bottom:10px;}
  .go-panel-grid > div:first-child p{color:var(--text-grau);font-size:0.94rem;margin-bottom:18px;}
  .go-shot{border-radius:6px;overflow:hidden;border:1px solid var(--creme-dunkel);margin-bottom:20px;box-shadow:0 8px 24px rgba(16,63,60,0.08);}
  .go-features{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;}
  @media(max-width:520px){.go-features{grid-template-columns:1fr;}}
  .go-features li{display:flex;align-items:center;gap:10px;font-size:0.88rem;padding:8px 0;border-bottom:1px solid var(--creme-dunkel);}
  .go-features li img{width:22px;height:22px;flex-shrink:0;}

  /* Produkte 3 pillars */
  .pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media(max-width:800px){.pillar-grid{grid-template-columns:1fr;}}
  .pillar{background:#fff;border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:30px 26px;}
  .pillar .pnum{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.72rem;color:var(--koralle-dunkel);display:block;margin-bottom:16px;}
  .pillar h3{font-size:1.15rem;margin-bottom:10px;}
  .pillar p{color:var(--text-grau);font-size:0.92rem;margin-bottom:18px;}
  .pillar a{font-size:0.85rem;font-weight:600;color:var(--tanne-dunkel);border-bottom:1px solid var(--koralle);padding-bottom:2px;}

  /* Entwicklung */
  .process{background:var(--tanne-dunkel);color:var(--text-hell);border-radius:6px;padding:52px 44px;}
  @media(max-width:640px){.process{padding:34px 22px;}}
  .process .section-head p{color:var(--creme-dunkel);}
  .process .section-head h2{color:var(--text-hell);}
  .mod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px;}
  @media(max-width:800px){.mod-grid{grid-template-columns:repeat(2,1fr);}}
  .mod-chip{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius);padding:16px;font-size:0.88rem;font-weight:600;}
  .dev-shots{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid rgba(255,255,255,0.16);padding-top:32px;}
  @media(max-width:700px){.dev-shots{grid-template-columns:1fr;}}
  .dev-shot img{border-radius:6px;border:1px solid rgba(255,255,255,0.16);margin-bottom:14px;}
  .dev-shot h3{color:var(--koralle);font-size:0.98rem;margin-bottom:6px;}
  .dev-shot p{color:var(--creme-dunkel);font-size:0.88rem;}

  /* Hosting */
  .hosting-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
  @media(max-width:900px){.hosting-grid{grid-template-columns:1fr;}}
  .price-table{display:grid;gap:0;border:1px solid var(--creme-dunkel);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .price-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 22px;border-bottom:1px solid var(--creme-dunkel);align-items:center;}
  .price-row:last-child{border-bottom:none;}
  .price-row .plabel{font-size:0.94rem;}
  .price-row .plabel small{display:block;color:var(--text-grau);font-size:0.8rem;margin-top:2px;}
  .price-row .pval{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-weight:600;color:var(--koralle-dunkel);white-space:nowrap;font-size:0.95rem;}
  .hosting-terms{margin-top:20px;}
  .hosting-terms li{font-size:0.88rem;color:var(--text-grau);padding:8px 0 8px 18px;position:relative;border-bottom:1px solid var(--creme-dunkel);}
  .hosting-terms li::before{content:"✓";position:absolute;left:0;color:var(--tanne-hell);font-weight:700;}
  .provider-note{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.8rem;color:var(--text-grau);margin-top:18px;}

  /* Pricing */
  .pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px;}
  @media(max-width:800px){.pricing-grid{grid-template-columns:1fr;}}
  .price-card{background:#fff;border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:32px 28px;}
  .price-card.featured{border-color:var(--koralle);border-width:2px;position:relative;}
  .price-card.featured::before{content:"Empfohlen";position:absolute;top:-12px;right:24px;background:var(--koralle);color:#fff;font-size:0.7rem;font-weight:700;padding:4px 10px;border-radius:20px;font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;}
  .price-card h3{font-size:1.1rem;margin-bottom:4px;}
  .price-card .ptag{color:var(--text-grau);font-size:0.88rem;margin-bottom:18px;}
  .price-card .pnum{font-family:'Archivo',sans-serif;font-weight:800;font-size:2.1rem;margin-bottom:6px;}
  .price-card .plic{font-size:0.8rem;color:var(--text-grau);margin-bottom:20px;}
  .price-card ul{display:grid;gap:9px;}
  .price-card li{font-size:0.88rem;padding-left:16px;position:relative;color:var(--text-dunkel);}
  .price-card li::before{content:"—";position:absolute;left:0;color:var(--koralle);font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;}
  .addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  @media(max-width:900px){.addon-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:520px){.addon-grid{grid-template-columns:1fr;}}
  .addon{background:#fff;border:1px solid var(--creme-dunkel);border-radius:var(--radius);padding:20px;}
  .addon h4{font-size:0.94rem;margin-bottom:6px;}
  .addon .aprice{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;color:var(--koralle-dunkel);font-weight:600;font-size:0.9rem;margin-bottom:10px;}
  .addon p{font-size:0.82rem;color:var(--text-grau);}

  /* Souveränität banner */
  .sov-banner{background:linear-gradient(120deg, var(--tanne-dunkel), var(--tanne));color:var(--text-hell);border-radius:6px;padding:44px 40px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
  .sov-banner h3{color:var(--text-hell);font-size:1.3rem;margin-bottom:8px;}
  .sov-banner p{color:var(--creme-dunkel);font-size:0.94rem;max-width:52ch;}
  .sov-badge{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.7rem;color:var(--koralle);text-transform:uppercase;letter-spacing:0.08em;border:1px solid var(--koralle);padding:6px 12px;border-radius:20px;white-space:nowrap;}

  /* Blog */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card{display:block;background:#fff;border:1px solid var(--creme-dunkel);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease, transform .2s ease;}
  .blog-card:hover{border-color:var(--koralle);transform:translateY(-2px);}
  .blog-card img{width:100%;height:120px;object-fit:cover;border-bottom:1px solid var(--creme-dunkel);}
  .blog-card .bcontent{padding:18px 20px;}
  .blog-card .bdate{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.72rem;color:var(--koralle-dunkel);margin-bottom:10px;display:block;}
  .blog-card h3{font-size:0.96rem;line-height:1.35;}

  /* Kontakt */
  .kontakt{background:var(--tanne-dunkel);color:var(--text-hell);}
  .kontakt .section-head h2{color:var(--text-hell);}
  .kontakt .section-head p{color:var(--creme-dunkel);}
  .kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;}
  @media(max-width:900px){.kontakt-grid{grid-template-columns:1fr;}}
  .kdetails .row{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,0.14);}
  .kdetails .row:first-child{padding-top:0;}
  .kdetails label{font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;font-size:0.72rem;color:var(--koralle);text-transform:uppercase;letter-spacing:0.08em;}
  .kdetails a, .kdetails span.val{font-size:1rem;}
  form{display:grid;gap:16px;}
  .field{display:grid;gap:6px;}
  label.flabel{font-size:0.82rem;color:var(--creme-dunkel);}
  input, textarea{background:var(--tanne);border:1px solid rgba(255,255,255,0.18);color:var(--text-hell);padding:12px 14px;border-radius:var(--radius);font-family:-apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;font-size:0.95rem;}
  input::placeholder, textarea::placeholder{color:rgba(235,227,200,0.5);}
  input:focus, textarea:focus{outline:none;border-color:var(--koralle);}
  textarea{min-height:110px;resize:vertical;}
  .submitrow{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap;}
  .btn-form{background:var(--koralle);color:#fff;border:none;padding:13px 26px;font-weight:700;border-radius:var(--radius);font-size:0.95rem;cursor:pointer;transition:background .2s ease;}
  .btn-form:hover{background:var(--koralle-dunkel);}
  .form-note{font-size:0.78rem;color:var(--creme-dunkel);}

  footer{background:var(--tanne-dunkel);color:var(--creme-dunkel);border-top:1px solid rgba(255,255,255,0.14);padding:32px 0;}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:0.82rem;}
  footer .flinks{display:flex;gap:22px;flex-wrap:wrap;}
  footer a:hover{color:var(--koralle);}

/* Utility-Klassen (ersetzen frühere Inline-Styles) */
.u-mr-10{margin-right:10px;}
.u-pt-72{padding-top:72px;}
.u-section-white{background:#fff;border-top:1px solid var(--creme-dunkel);border-bottom:1px solid var(--creme-dunkel);}
.u-hosting-heading{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:16px;}
.u-hosting-lead{color:var(--text-grau);margin-bottom:20px;}
.u-addons-label{font-size:1rem;margin-bottom:18px;font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;color:var(--text-grau);text-transform:uppercase;letter-spacing:0.06em;}
.u-sov-section{padding-top:0;padding-bottom:88px;}
.u-blogcard-pad{padding-top:20px;}
.u-mt-28{margin-top:28px;}
.u-form-privacy-note{font-size:0.78rem;color:var(--creme-dunkel);margin-top:2px;}
.u-form-privacy-note a{color:var(--koralle);text-decoration:underline;}
.u-mt-8{margin-top:8px;}