/*
Theme Name: Coworking Space Darmstadt
Theme URI: https://buero-darmstadt.de
Author: TowrHub
Author URI: https://towrhub.de
Description: TowrHub – Coworking Space Darmstadt. Version 3.0.1 mit vollständiger Customizer-Integration (Variante A). ALLE Textinhalte über ~49 Felder steuerbar - maximale Flexibilität ohne HTML-Bearbeitung! Bugfix: Content-Filter korrigiert - alle Template-Tags werden jetzt immer ersetzt.
Version: 3.0.1
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coworking-space-darmstadt
Tags: business, coworking, office, modern, responsive, custom-menu, featured-images, one-page, seo-ready

Coworking Space Darmstadt Theme - Professionelles WordPress-Theme für flexible Bürolösungen.
*/

/* Soft Neutral Design System 2.0 */
:root{
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-alt: #F0EEEA;
  --fg: #1B1B1B;
  --muted: #5E6A71;
  --accent: #1F5D5E;
  --accent-hover: #174B4C;
  --accent-light: #E2DAD2;
  --secondary: #009379;
  --secondary-hover: #007864;
  --border: #E0E2E4;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  --maxw: 1200px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html{
  scroll-behavior:smooth;
  font-size:18px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', -apple-system, system-ui, sans-serif;
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

a{
  color:var(--fg);
  text-underline-offset:3px;
  transition:var(--transition);
}

a:hover{
  color:var(--accent);
}

a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.9rem 1.6rem;
  border:2px solid var(--fg);
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
  cursor:pointer;
  min-height:48px;
}

a.btn:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

a.btn:active{
  transform:scale(0.98);
}

a.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:var(--shadow-sm);
}

a.btn.primary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  box-shadow:0 8px 24px rgba(31,93,94,0.2);
}

a.btn.primary:active{
  transform:scale(0.97);
}

button.btn{
  font-family:inherit;
  font-size:1rem;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  font-weight:600;
  transition:var(--transition);
  cursor:pointer;
  min-height:48px;
}

button.btn:hover{
  box-shadow:var(--shadow-md);
}

button.btn:active{
  transform:scale(0.98);
}

button.btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  background:var(--border);
}

button.btn.loading{
  position:relative;
  color:transparent;
}

button.btn.loading::after{
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  border:2px solid var(--accent);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

header, main, footer{
  width:100%;
}

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 20px;
}

/* Skip-Link */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
}

.skip:focus{
  left:16px;
  top:16px;
  background:#000;
  color:#fff;
  padding:.5rem 1rem;
  border-radius:8px;
  z-index:1000;
}

/* Sticky Nav mit optimiertem Glassmorphismus */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.nav.scrolled{
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow-md);
}

/* Scroll Progress Bar */
.scroll-progress{
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), #276C6D);
  width:0%;
  transition:width 0.1s ease;
  z-index:51;
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:72px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  transition:var(--transition);
  font-family:'DM Sans', sans-serif;
  position:relative;
  justify-content:flex-start;
}

.brand::after{
  display:none !important;
}

.brand:hover{
  color:var(--accent);
}

.brand svg{
  transition:var(--transition);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.06));
}

.brand:hover svg{
  filter:drop-shadow(0 4px 10px rgba(31,93,94,.3));
  transform:scale(1.02);
}

.nav ul{
  list-style:none;
  display:flex;
  gap:4px;
  margin:0;
  padding:0;
  align-items:center;
}

.nav ul li{
  padding:0;
  margin:0;
  list-style:none;
}

.nav ul li::before{
  content:none !important;
  display:none !important;
}

.nav a{
  color:var(--fg);
  text-decoration:none;
  padding:.7rem 1.1rem;
  border-radius:10px;
  font-weight:600;
  font-size:.95rem;
  transition:var(--transition);
  position:relative;
}

.nav a::after{
  content:'';
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transition:width 0.3s ease;
}

.nav a:hover{
  background:rgba(31,93,94,0.08);
  color:var(--accent);
}

.nav a:hover::after{
  width:calc(100% - 2.2rem);
}

.nav a.active{
  color:var(--accent);
  background:rgba(31,93,94,0.06);
}

.nav a.active::after{
  width:calc(100% - 2.2rem);
}

.nav a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  background:rgba(31,93,94,0.08);
}

.nav a.btn.primary{
  padding:.65rem 1.3rem;
  margin-left:.5rem;
}

.nav a.btn.primary::after{
  display:none;
}

.mobile-toggle{
  display:none !important;
  background:transparent;
  border:2px solid var(--border);
  color:var(--fg);
}

/* Mobile Offcanvas Navigation */
.mobile-nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  z-index:100;
  opacity:0;
  transition:opacity 0.3s ease;
}

.mobile-nav-overlay.active{
  display:block;
  opacity:1;
}

.mobile-nav{
  position:fixed;
  top:0;
  right:-100%;
  width:80%;
  max-width:320px;
  height:100vh;
  background:var(--surface);
  box-shadow:var(--shadow-xl);
  z-index:101;
  transition:right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding:24px;
  overflow-y:auto;
}

.mobile-nav.active{
  right:0;
}

.mobile-nav-close{
  position:absolute;
  top:16px;
  right:16px;
  background:transparent;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
  padding:8px;
  color:var(--fg);
}

.mobile-nav ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:60px;
  padding:0;
}

.mobile-nav ul li{
  padding:0;
  margin:0;
}

.mobile-nav ul li::before{
  content:none !important;
}

.mobile-nav a{
  display:block;
  padding:1rem 1.2rem;
  color:var(--fg);
  text-decoration:none;
  border-radius:var(--radius);
  font-weight:600;
  transition:var(--transition);
}

.mobile-nav a:hover{
  background:var(--surface-alt);
  color:var(--accent);
}

/* Moderner Hero mit mehr Weißraum & visuelle Atmung */
.hero{
  padding:60px 0 80px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface-alt) 100%);
  position:relative;
}

.hero .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:stretch;
  max-width:1400px;
}

.hero .content{
  max-width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  font-size:.75rem;
  font-weight:600;
  padding:.35rem .8rem;
  background:rgba(31,93,94,0.12);
  border-radius:6px;
  margin-bottom:2rem;
  border:none;
  width:fit-content;
  align-self:flex-start;
}

.eyebrow svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}

h1{
  font-family:'DM Sans', sans-serif;
  font-size:clamp(2.4rem, 5.5vw, 3.8rem);
  margin:0 0 1.8rem;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-0.03em;
}

h1 .highlight{
  color:var(--accent);
}

h1 .normal{
  color:var(--fg);
}

.sub{
  color:var(--muted);
  font-size:1.2rem;
  line-height:1.7;
  margin:0 0 2.8rem;
  max-width:560px;
  font-weight:400;
}

.hero-image{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  position:relative;
  width:100%;
  height:100%;
  min-height:500px;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-image-badge{
  position:absolute;
  bottom:24px;
  left:24px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-radius:12px;
  padding:12px 20px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  gap:12px;
  z-index:10;
}

.hero-image-badge-number{
  font-family:'DM Sans',sans-serif;
  font-size:1.8rem;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}

.hero-image-badge-text{
  font-size:.85rem;
  color:var(--fg);
  font-weight:500;
  line-height:1.3;
}

.hero-features{
  display:flex;
  gap:2rem;
  margin:2.5rem 0;
  flex-wrap:wrap;
}

.hero-feature{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.95rem;
  color:var(--muted);
  font-weight:500;
}

.hero-feature svg{
  width:20px;
  height:20px;
  color:var(--accent);
  flex-shrink:0;
}

.btn-group{
  display:flex;
  gap:1.2rem;
  flex-wrap:nowrap;
  align-items:center;
}

.btn-group .btn.primary{
  font-size:1.05rem;
  padding:1rem 2rem;
}

.btn-group .btn.secondary{
  background:#fff;
  color:var(--fg);
  border:2px solid var(--border);
  border-radius:999px;
  font-weight:600;
  padding:1rem 2rem;
  font-size:1.05rem;
}

.btn-group .btn.secondary:hover{
  background:var(--surface-alt);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:var(--shadow-sm);
}

@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

section{
  padding:140px 0;
}

section.compact{
  padding:100px 0;
}

h2{
  font-family:'DM Sans', sans-serif;
  font-size:clamp(1.9rem, 3.5vw, 2.6rem);
  margin:0 0 3rem;
  color:var(--fg);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-0.02em;
}

h2::after{
  content:'';
  display:block;
  width:50px;
  height:3px;
  background:var(--accent);
  margin-top:1.2rem;
  border-radius:2px;
  opacity:0.8;
}

.grid{
  display:grid;
  gap:36px;
}

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

.grid.cols-2{
  grid-template-columns:repeat(2,1fr);
}

@media (max-width: 900px){
  .grid.cols-3,.grid.cols-2{
    grid-template-columns:1fr;
  }
  .nav ul{
    display:none !important;
  }
  .mobile-toggle{
    display:inline-flex !important;
  }
}

.feature{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 28px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  text-align:center;
}

.feature:hover{
  box-shadow:var(--shadow-lg);
  border-color:var(--accent);
}

.feature-icon{
  width:56px;
  height:56px;
  background:var(--accent-light);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.2rem;
  color:var(--accent);
  font-size:1.5rem;
  transition:var(--transition);
}

.feature:hover .feature-icon{
  transform:scale(1.08);
}

.feature h3{
  font-family:'DM Sans', sans-serif;
  margin:0 0 .8rem;
  font-size:1.1rem;
  font-weight:700;
  color:var(--fg);
}

.feature p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:.95rem;
}

/* Office Plan Cards */
.office-plan-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}

.office-plan{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:all .3s ease;
}

.office-plan:hover{
  box-shadow:0 8px 16px rgba(0,0,0,.1);
}

.office-plan.featured{
  border:2px solid var(--secondary);
  box-shadow:0 4px 12px rgba(0,147,121,.15);
}

.office-plan.featured:hover{
  box-shadow:0 8px 20px rgba(0,147,121,.2);
}

.office-plan .plan-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#E6F7F4;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--secondary);
  margin:0 0 1.25rem;
}

.office-plan .plan-icon svg{
  width:28px;
  height:28px;
}

.office-plan h3{
  margin:0 0 .75rem;
  font-family:'DM Sans',sans-serif;
  font-size:1.25rem;
  font-weight:600;
  color:#111827;
  line-height:1.3;
}

.office-plan .plan-price{
  margin:0 0 1.25rem;
}

.office-plan .plan-price strong{
  font-size:2rem;
  font-weight:800;
  color:#111827;
  display:block;
  line-height:1;
}

.office-plan .plan-price small{
  display:block;
  color:#6b7280;
  font-size:.95rem;
  margin-top:.25rem;
  font-weight:400;
}

.office-plan .plan-description{
  color:#6b7280;
  font-size:.95rem;
  line-height:1.6;
  margin:0 0 1.25rem;
}

.office-plan .plan-features{
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.office-plan .plan-features li{
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  color:#1f2937;
  font-size:.9rem;
  gap:.5rem;
}

.office-plan .plan-features li::before{
  content:none;
}

.office-plan .btn{
  width:100%;
  justify-content:center;
  margin-top:auto;
  padding:.75rem 1.5rem;
  font-size:.95rem;
  font-weight:600;
  border-radius:9999px;
}

.office-plan .btn.primary{
  background:var(--secondary);
  color:#fff;
  border:none;
}

.office-plan .btn.primary:hover{
  background:var(--secondary-hover);
}

.office-plan .btn.secondary{
  background:#fff;
  border:1px solid var(--secondary);
  color:var(--secondary);
}

.office-plan .btn.secondary:hover{
  background:#E6F7F4;
}

.popular-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--secondary);
  color:#fff;
  padding:4px 12px;
  border-radius:9999px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  z-index:10;
}

/* Standort Infos Grid */
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin:3rem 0;
}

.info-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  display:flex;
  align-items:start;
  gap:1.2rem;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}

.info-card:hover{
  box-shadow:var(--shadow-md);
}

.info-card-icon{
  width:44px;
  height:44px;
  background:var(--accent-light);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  flex-shrink:0;
  font-size:1.3rem;
}

.info-card h4{
  font-family:'DM Sans', sans-serif;
  margin:0 0 .4rem;
  font-size:1rem;
  font-weight:700;
}

.info-card p{
  margin:0;
  font-size:.9rem;
  color:var(--muted);
  line-height:1.6;
}

/* Offer Cards - Floating Style */
.offer-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  display:flex;
  flex-direction:column;
}

.offer-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}

.offer-img{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--surface-alt);
}

.offer-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:var(--transition);
}

.offer-card:hover .offer-img img{
  transform:scale(1.05);
}

.offer-body{
  padding:28px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.offer-body h3{
  font-family:'DM Sans', sans-serif;
  margin:0 0 .5rem;
  font-size:1.35rem;
  font-weight:800;
  color:var(--fg);
}

.offer-subtitle{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 1rem;
  font-weight:600;
}

.offer-price{
  font-size:1.5rem;
  font-weight:800;
  color:var(--accent);
  margin:auto 0 1.5rem 0;
  padding-top:1rem;
}

.stack{
  display:grid;
  gap:24px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  position:relative;
}

.card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.card img{
  transition:var(--transition);
}

.card:hover img{
  transform:scale(1.03);
}

.card .body{
  padding:36px;
}

.location-overlay{
  position:absolute;
  top:24px;
  right:24px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-radius:12px;
  padding:12px 20px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  gap:8px;
  z-index:10;
}

.location-overlay-time{
  font-family:'DM Sans',sans-serif;
  font-size:1.4rem;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}

.location-overlay-text{
  font-size:.85rem;
  color:var(--fg);
  font-weight:500;
  line-height:1.3;
}

/* Pricing Cards */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:28px;
  margin:3rem 0;
}

.pricing-card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  padding:44px 36px;
  text-align:center;
  transition:var(--transition);
  position:relative;
  box-shadow:var(--shadow-sm);
}

.pricing-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
}

.pricing-card.featured{
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--accent-light), var(--surface));
}

.pricing-title{
  font-size:1.3rem;
  font-weight:700;
  margin:0 0 .5rem;
  color:var(--fg);
}

.pricing-amount{
  font-size:2.5rem;
  font-weight:800;
  color:var(--accent);
  margin:1rem 0;
}

.pricing-period{
  font-size:.9rem;
  color:var(--muted);
}

.pricing-features{
  list-style:none;
  margin:2rem 0;
  text-align:left;
}

.pricing-features li{
  padding:.7rem 0;
  border-bottom:1px solid var(--border);
  font-size:.95rem;
}

.pricing-features li:last-child{
  border:0;
}

.price{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}

.price::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(31,93,94,.04) 0%, transparent 70%);
  pointer-events:none;
}

.price .body{
  display:grid;
  gap:20px;
}

.price .badge{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:.45rem 1rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  box-shadow:0 4px 12px rgba(31,93,94,.25);
  animation:subtlePulse 3s ease-in-out infinite;
}

@keyframes subtlePulse{
  0%,100%{
    transform:scale(1);
    opacity:.95;
  }
  50%{
    transform:scale(1.02);
    opacity:1;
  }
}

@keyframes floatIcon{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
}

/* Testimonial Cards */
.testimonial-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.testimonial-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--accent);
}

/* Geschäftsadresse Section */
#geschaeftsadresse{
  position:relative;
}

#geschaeftsadresse::before{
  content:'';
  position:absolute;
  top:-60px;
  left:0;
  right:0;
  height:80px;
  background:linear-gradient(180deg, transparent 0%, var(--surface-alt) 100%);
  pointer-events:none;
}

.why-section{
  background:var(--surface-alt);
  padding:120px 0;
  border-radius:var(--radius-lg);
  margin:80px auto;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:40px;
  margin-top:4rem;
}

.why-feature{
  text-align:center;
  padding:2rem;
}

.why-feature-icon{
  width:72px;
  height:72px;
  background:var(--surface);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  font-size:2rem;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.why-feature:hover .why-feature-icon{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.why-feature h3{
  font-family:'DM Sans',sans-serif;
  font-size:1.2rem;
  font-weight:700;
  color:var(--fg);
  margin:0 0 .8rem;
}

.why-feature p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.7;
  margin:0;
}

/* Vorteile Items - Screenshot Design */
.vorteile-item{
  text-align:center;
}

.vorteile-icon-box{
  width:72px;
  height:72px;
  background:#e6f9f4;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.5rem;
  color:#20c997;
}

.vorteile-icon-box svg{
  width:32px;
  height:32px;
}

#vorteile h2::after{
  display:none;
}

/* Galerie - Optimiert mit Lightbox */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  margin:3rem 0;
}

.gallery-item{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:var(--transition);
  border:1px solid var(--border);
  position:relative;
}

.gallery-item:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.gallery-item::after{
  content:'🔍';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:2rem;
  opacity:0;
  transition:var(--transition);
  background:rgba(31,93,94,.9);
  color:#fff;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gallery-item:hover::after{
  opacity:1;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:var(--transition);
}

.gallery-item:hover img{
  transform:scale(1.05);
  filter:brightness(0.9);
}

/* Lightbox */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.lightbox.active{
  display:flex;
}

.lightbox img{
  max-width:90%;
  max-height:90vh;
  border-radius:var(--radius);
  box-shadow:var(--shadow-xl);
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:20px;
  background:rgba(255,255,255,.2);
  border:none;
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  width:48px;
  height:48px;
  border-radius:50%;
  transition:var(--transition);
}

.lightbox-close:hover{
  background:rgba(255,255,255,.3);
}

/* CTA Banner - Reduziert & weicher */
.cta-banner{
  background:linear-gradient(135deg, #1F5D5E 0%, #276C6D 100%);
  color:#fff;
  padding:100px 0;
  position:relative;
  overflow:hidden;
  margin:0 auto;
  border-radius:var(--radius-lg);
}

.cta-banner .container{
  max-width:900px;
  text-align:center;
}

.cta-banner::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:radial-gradient(circle at top right, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events:none;
}

.cta-banner h2{
  color:#fff;
  margin-bottom:1.5rem;
}

.cta-banner h2::after{
  display:none;
}

.cta-banner p{
  font-size:1.15rem;
  line-height:1.7;
  opacity:.95;
  margin-bottom:3rem;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
}

.cta-buttons{
  display:flex;
  gap:1.2rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2.5rem;
}

.cta-buttons .btn{
  font-size:1.05rem;
  padding:1rem 2rem;
}

.cta-buttons .btn.secondary{
  background:#fff;
  color:var(--accent);
  border-color:#fff;
}

.cta-buttons .btn.secondary:hover{
  background:rgba(255,255,255,.95);
  color:var(--accent-hover);
}

.cta-benefits{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:48px;
  margin:3.5rem 0;
}

.cta-benefit{
  text-align:center;
}

.cta-benefit-icon{
  width:56px;
  height:56px;
  background:rgba(255,255,255,.15);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1rem;
  font-size:1.6rem;
  transition:var(--transition);
}

.cta-benefit:hover .cta-benefit-icon{
  background:rgba(255,255,255,.22);
}

.cta-benefit h4{
  font-family:'DM Sans', sans-serif;
  margin:0 0 .5rem;
  font-size:1.05rem;
  font-weight:700;
}

.cta-benefit p{
  margin:0;
  font-size:.9rem;
  opacity:.9;
  line-height:1.5;
}

.map-wrap{
  display:grid;
  gap:18px;
}

.map-frame{
  aspect-ratio:16/9;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#f3f6f9;
  box-shadow:var(--shadow-md);
}

.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.map-consent{
  display:grid;
  place-items:center;
  aspect-ratio:16/9;
  background:#f2f4f7;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:24px;
  text-align:center;
  transition:var(--transition);
}

.map-consent:hover{
  border-color:var(--accent);
  background:#f8f9fb;
}

.faq summary{
  cursor:pointer;
  font-weight:700;
  padding:20px 24px 20px 60px;
  user-select:none;
  transition:var(--transition);
  border-radius:var(--radius);
  position:relative;
}

.faq summary::before{
  content:'❓';
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:1.3rem;
  transition:var(--transition);
}

.faq summary:hover{
  color:var(--accent);
  background:rgba(31,93,94,.06);
}

.faq summary:hover::before{
  transform:translateY(-50%) scale(1.1);
}

.faq summary::marker{
  color:var(--accent);
}

.faq details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:16px;
  transition:var(--transition);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.faq details[open]{
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
}

.faq details[open] summary{
  color:var(--accent);
  border-bottom:1px solid var(--border);
}

.faq details[open] summary::before{
  content:'✅';
}

.faq .body{
  padding:0 24px 20px 60px;
  line-height:1.7;
  color:var(--muted);
}

/* FAQ Accordion */
.faq-accordion{
  display:grid;
  gap:20px;
}

.faq-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  overflow:hidden;
  transition:all .3s ease;
}

.faq-item:hover{
  box-shadow:0 10px 30px rgba(15,23,42,0.08);
  border-color:rgba(31,93,94,0.35);
}

.faq-question{
  width:100%;
  background:transparent;
  border:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 28px;
  font-size:1.05rem;
  font-weight:600;
  color:#1f2b3d;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease;
}

.faq-question:hover{
  color:#1f5d5e;
}

.faq-icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  transform:translateY(1px);
  transition:transform .3s ease;
}

.faq-item.active .faq-icon{
  transform:rotate(180deg);
}

.faq-answer{
  display:none;
  padding:0 28px 24px;
  color:#4b5563;
  line-height:1.7;
  font-size:.98rem;
}

.faq-item.active .faq-answer{
  display:block;
}

/* Success Message */
.success-message{
  display:none;
  position:fixed;
  top:100px;
  left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:#fff;
  padding:1.2rem 2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-xl);
  z-index:100;
  animation:slideDown 0.3s ease;
}

.success-message.show{
  display:block;
}

@keyframes slideDown{
  from{
    opacity:0;
    transform:translate(-50%, -20px);
  }
  to{
    opacity:1;
    transform:translate(-50%, 0);
  }
}

/* Kontakt mit optimiertem Gradient */
.contact{
  background:linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.contact::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background:radial-gradient(circle at top right, rgba(0,147,121,.2) 0%, transparent 65%);
  pointer-events:none;
}

.contact .card{
  background:rgba(31,93,94,.25);
  border:1px solid rgba(0,147,121,.45);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);
}

.contact h2{
  color:#fff;
}

.contact h2::after{
  display:none;
}

#vorteile h2::after{
  display:none;
}

form{
  display:grid;
  gap:24px;
}

form .grid.cols-2{
  display:none;
}

label{
  font-weight:600;
  display:block;
  margin-bottom:.6rem;
  font-size:.95rem;
}

input, textarea, select{
  width:100%;
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.96);
  color:var(--fg);
  font-size:1rem;
  transition:var(--transition);
  font-family:'Inter', sans-serif;
}

input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.3), 0 0 20px rgba(255,255,255,.2);
  background:#fff;
}

input::placeholder, textarea::placeholder{
  color:var(--muted);
  opacity:.7;
}

textarea{
  min-height:140px;
  resize:vertical;
}

button.btn{
  cursor:pointer;
  background:#fff;
  color:var(--accent);
  border:2px solid #fff;
  font-weight:700;
  font-size:1rem;
  padding:1rem 2rem;
}

button.btn:hover{
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  transform:translateY(-1px);
}

.contact .btn.primary{
  background:var(--secondary);
  border-color:var(--secondary);
  color:#fff;
}

.contact .btn.primary:hover{
  background:var(--secondary-hover);
  border-color:var(--secondary-hover);
  box-shadow:0 6px 20px rgba(0,147,121,.35);
}

.hint{
  font-size:.88rem;
  opacity:.88;
  line-height:1.6;
}

footer a{
  color:rgba(255,255,255,.8);
  transition:var(--transition);
}

footer a:hover{
  color:#fff;
  text-decoration:underline;
}

footer a[aria-label]:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-2px);
}

/* Listen-Styling */
ul{
  line-height:1.8;
  color:var(--muted);
}

ul li{
  margin-bottom:.6rem;
  padding-left:1.8rem;
  position:relative;
}

ul li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
  font-size:1.1rem;
}

/* Anchor offset for sticky nav */
:target{
  scroll-margin-top:90px;
}

/* Mobile Sticky CTA */
.mobile-sticky-cta{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:40;
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 12px rgba(0,0,0,.08);
  padding:12px 20px;
}

.mobile-sticky-cta .btn{
  width:100%;
  justify-content:center;
  padding:1rem;
}

/* WhatsApp Floating Button */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:45;
  background:#25D366;
  color:#fff;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  font-size:1.8rem;
}

.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 6px 24px rgba(37,211,102,.5);
  background:#20BA5A;
}

.whatsapp-float::before{
  content:'';
  position:absolute;
  inset:-8px;
  border:2px solid #25D366;
  border-radius:50%;
  animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity:.5;
}

@keyframes ping{
  0%{
    transform:scale(1);
    opacity:.5;
  }
  100%{
    transform:scale(1.3);
    opacity:0;
  }
}

/* Social Proof */
.social-proof{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:1.5rem 2rem;
  background:rgba(31,93,94,.05);
  border-radius:var(--radius);
  margin-top:2.5rem;
  border:1px solid rgba(31,93,94,.1);
}

.social-proof-avatars{
  display:flex;
  margin-left:-8px;
}

.social-proof-avatars span{
  width:40px;
  height:40px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.85rem;
  border:3px solid var(--bg);
  margin-left:-8px;
  box-shadow:var(--shadow-sm);
}

.social-proof-text{
  color:var(--fg);
  font-size:.95rem;
  font-weight:500;
}

.social-proof-text strong{
  color:var(--accent);
  font-weight:700;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
  *{
    animation:none !important;
    transition:none !important;
  }
}

/* Responsive Optimierungen */
@media (max-width: 900px){
  section{
    padding:80px 0;
  }
  section.compact{
    padding:60px 0;
  }
  h1{
    font-size:clamp(2.2rem, 6.5vw, 3rem);
  }
  h2{
    margin-bottom:2.5rem;
    font-size:clamp(1.7rem, 5vw, 2.2rem);
  }
  .hero{
    padding:60px 0 80px;
  }
  .hero .container{
    grid-template-columns:1fr;
    gap:60px;
    max-width:100%;
  }
  .hero .content{
    max-width:100%;
  }
  .hero-image{
    order:-1;
    max-width:600px;
    margin:0 auto;
  }
  .hero-image-badge{
    bottom:16px;
    left:16px;
    padding:10px 16px;
  }
  .hero-image-badge-number{
    font-size:1.5rem;
  }
  .hero-image-badge-text{
    font-size:.8rem;
  }
  .why-section{
    padding:80px 0;
    margin:60px auto;
  }
  .why-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
    margin-top:3rem;
  }
  #vorteile{
    padding:100px 0 !important;
  }
  #vorteile .grid.cols-3{
    grid-template-columns:repeat(2, 1fr);
    gap:32px;
  }
  #vorteile h2{
    font-size:2rem !important;
  }
  #vorteile p{
    font-size:1.1rem !important;
  }
  .location-overlay{
    top:16px;
    right:16px;
    padding:10px 16px;
  }
  .location-overlay-time{
    font-size:1.2rem;
  }
  .location-overlay-text{
    font-size:.8rem;
  }
  .cta-buttons{
    flex-direction:column;
    width:100%;
  }
  .cta-buttons .btn{
    width:100%;
  }
  .hero-features{
    justify-content:flex-start;
  }
  .btn-group{
    justify-content:flex-start;
  }
  .office-plan-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
  .nav-wrap{
    height:68px;
  }
  .nav ul{
    display:none;
  }
  .mobile-toggle{
    display:inline-flex;
  }
  .mobile-sticky-cta{
    display:block;
  }
  .whatsapp-float{
    bottom:80px;
  }
  .feature{
    padding:32px 24px;
  }
  .card .body{
    padding:32px;
  }
  .offer-body{
    padding:28px;
  }
  .info-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  /* Mobile Swipe-Galerie */
  .gallery{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px;
    margin:3rem -20px;
    padding:0 20px;
    -webkit-overflow-scrolling:touch;
  }
  .gallery-item{
    flex:0 0 85%;
    scroll-snap-align:center;
  }
  .gallery::-webkit-scrollbar{
    height:8px;
  }
  .gallery::-webkit-scrollbar-track{
    background:var(--border);
    border-radius:4px;
  }
  .gallery::-webkit-scrollbar-thumb{
    background:var(--accent);
    border-radius:4px;
  }
  
  .cta-banner{
    padding:80px 40px;
    border-radius:var(--radius);
  }
  .cta-benefits{
    gap:40px;
    grid-template-columns:repeat(2, 1fr);
  }
  .social-proof{
    flex-direction:column;
    text-align:center;
    gap:1rem;
  }
  
  /* Private Büros & Geschäftsadresse Mobile Carousel */
  #bueros .grid.cols-3, #geschaeftsadresse .grid.cols-3{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:20px;
    margin:0 -20px;
    padding:0 20px;
    -webkit-overflow-scrolling:touch;
  }
  #bueros .offer-card, #geschaeftsadresse .offer-card{
    flex:0 0 85%;
    scroll-snap-align:center;
  }
}

@media (max-width: 600px){
  html{
    font-size:16px;
  }
  section{
    padding:60px 0;
  }
  section.compact{
    padding:48px 0;
  }
  .hero{
    padding:50px 0 60px;
  }
  .grid{
    gap:24px;
  }
  h1{
    line-height:1.15;
  }
  h2{
    margin-bottom:2rem;
    font-size:clamp(1.6rem, 6vw, 2rem);
  }
  .hero .container{
    gap:40px;
  }
  .btn-group{
    flex-direction:row;
    flex-wrap:wrap;
    gap:12px;
  }
  .btn-group .btn{
    flex:1;
    min-width:140px;
    justify-content:center;
  }
  .hero-image-badge{
    bottom:12px;
    left:12px;
    padding:8px 12px;
  }
  .hero-image-badge-number{
    font-size:1.3rem;
  }
  .hero-image-badge-text{
    font-size:.75rem;
  }
  .why-section{
    padding:60px 0;
    margin:40px auto;
  }
  .why-grid{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:2.5rem;
  }
  .why-feature{
    padding:1.5rem;
  }
  #vorteile{
    padding:80px 0 !important;
  }
  #vorteile .grid.cols-3{
    grid-template-columns:1fr;
    gap:40px;
  }
  #vorteile h2{
    font-size:1.75rem !important;
  }
  #vorteile p{
    font-size:1rem !important;
  }
  .location-overlay{
    top:12px;
    right:12px;
    padding:8px 12px;
  }
  .location-overlay-time{
    font-size:1.1rem;
  }
  .location-overlay-text{
    font-size:.75rem;
  }
  footer{
    padding:60px 0 32px;
  }
  footer .container > div:first-child{
    grid-template-columns:1fr;
    gap:32px;
    margin-bottom:32px;
  }
  .nav-wrap{
    height:64px;
  }
  .cta-banner{
    padding:60px 24px;
  }
  .cta-benefits{
    grid-template-columns:1fr;
    gap:32px;
  }
  .contact .card .body{
    padding:28px 20px;
  }
  form{
    gap:20px;
  }
  input, textarea{
    padding:14px 16px;
  }
  
  /* Private Büros & Geschäftsadresse Mobile optimiert */
  #bueros .grid.cols-3, #geschaeftsadresse .grid.cols-3{
    display:flex;
  }
  #bueros .offer-card, #geschaeftsadresse .offer-card{
    flex:0 0 90%;
  }
  #geschaeftsadresse{
    padding:80px 0 !important;
    margin:0 0 60px !important;
  }
  .office-plan-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* WordPress-spezifische Anpassungen */
.wp-block-image img{
  max-width:100%;
  height:auto;
}

.wp-block-group{
  margin:2rem 0;
}

/* Navigation für WordPress */
.nav-menu{
  list-style:none;
  display:flex;
  gap:4px;
  margin:0;
  padding:0;
  align-items:center;
}

.nav-menu li{
  padding:0;
  margin:0;
  list-style:none;
}

.nav-menu li::before{
  content:none !important;
  display:none !important;
}

/* Content-Seiten (Impressum, Datenschutz, AGB) */
.page-content .entry-content h2{
  font-family:'DM Sans',sans-serif;
  font-size:1.8rem;
  font-weight:700;
  color:var(--fg);
  margin:3rem 0 1.5rem;
  line-height:1.3;
}

.page-content .entry-content h2::after{
  display:none;
}

.page-content .entry-content h3{
  font-family:'DM Sans',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:var(--fg);
  margin:2.5rem 0 1rem;
  line-height:1.4;
}

.page-content .entry-content h4{
  font-family:'DM Sans',sans-serif;
  font-size:1.2rem;
  font-weight:600;
  color:var(--fg);
  margin:2rem 0 1rem;
}

.page-content .entry-content p{
  margin:0 0 1.5rem;
  line-height:1.8;
  color:var(--fg);
}

.page-content .entry-content ul,
.page-content .entry-content ol{
  margin:1.5rem 0;
  padding-left:2rem;
}

.page-content .entry-content ul li,
.page-content .entry-content ol li{
  margin-bottom:0.8rem;
  line-height:1.7;
}

.page-content .entry-content a{
  color:var(--accent);
  text-decoration:underline;
  transition:var(--transition);
}

.page-content .entry-content a:hover{
  color:var(--accent-hover);
}

.page-content .entry-content strong{
  font-weight:700;
  color:var(--fg);
}

.page-content .entry-content table{
  width:100%;
  border-collapse:collapse;
  margin:2rem 0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.page-content .entry-content table th{
  background:var(--surface-alt);
  padding:1rem;
  text-align:left;
  font-weight:700;
  border-bottom:2px solid var(--border);
}

.page-content .entry-content table td{
  padding:1rem;
  border-bottom:1px solid var(--border);
}

.page-content .entry-content table tr:last-child td{
  border-bottom:none;
}

.page-content .entry-content blockquote{
  margin:2rem 0;
  padding:1.5rem 2rem;
  background:var(--surface-alt);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  font-style:italic;
  color:var(--muted);
}

.page-content .entry-content code{
  padding:0.2rem 0.5rem;
  background:var(--surface-alt);
  border-radius:4px;
  font-family:monospace;
  font-size:0.9em;
  color:var(--accent);
}

.page-content .entry-content pre{
  padding:1.5rem;
  background:var(--surface-alt);
  border-radius:var(--radius);
  overflow-x:auto;
  margin:2rem 0;
}

.page-content .entry-content pre code{
  padding:0;
  background:none;
  color:var(--fg);
}