/* ─────────────────────────────────────────────
   SPACE4YOU CONSULTING – Global Styles
   ──────────────────────────────────────────── */

/* Design-Tokens */
:root{
  --clr-dark:#141E14;      /* sehr dunkles Grün-Schwarz */
  --clr-green:#005C1C;     /* Branding-Grün */
  --clr-accent:#00B000;    /* CTA-Grün */
  --clr-bg:#f6faf6;        /* sehr helles Mint */
  --ff-base:"Barlow",Arial,sans-serif;
  --ff-bold:"Barlow Semi Bold","Barlow",Arial,sans-serif;
}

/* Reset & Basis */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--ff-base);
  background:var(--clr-bg);
  color:var(--clr-dark);
  line-height:1.6;
}

/* Skip-Link (Accessibility) */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:static;width:auto;height:auto;padding:8px 12px;background:#fff;border:2px solid var(--clr-green);
}

/* ── Header / Navigation ───────────────────── */
header{background:var(--clr-dark);color:#fff;padding:12px 0}
nav{
  max-width:1100px;margin:auto;display:flex;align-items:center;gap:18px;
}
.logo-text{
  font-family:var(--ff-bold);font-size:1.35rem;color:#fff;text-decoration:none;white-space:nowrap;
}
.nav-spacer{flex:1} /* schiebt Menü/CTA nach rechts */
.nav-links{
  list-style:none;display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin:0;
}
.nav-links a{color:#fff;text-decoration:none;font-weight:600}
.nav-cta{
  display:inline-block;padding:10px 14px;background:var(--clr-accent);border-radius:8px;
  color:#fff;text-decoration:none;font-weight:700;white-space:nowrap
}

/* ── Hero ───────────────────────────────────── */
.hero{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:72px 20px;background:#e8f5ea
}
.hero-text{max-width:520px}
.hero h1{font-family:var(--ff-bold);font-size:2.6rem;line-height:1.2;margin-bottom:18px}
.hero p{margin-bottom:22px}
.cta{
  display:inline-block;background:var(--clr-accent);color:#fff;padding:12px 22px;
  border-radius:8px;text-decoration:none;font-weight:700
}
.hero-img img{max-width:420px;width:100%;border-radius:12px}

/* ── Standard-Sektionen + zentrierte Container ─ */
.section{max-width:1100px;margin:0 auto;padding:60px 20px}

/* Trust-/KPI-Leiste */
.strip{
  display:flex;gap:24px;flex-wrap:wrap;justify-content:center;
  max-width:1100px;margin:20px auto;color:#1a1e1a
}
.strip .kpi{font-weight:600}

/* Profilbox */
.profile{
  display:flex;gap:26px;align-items:center;
  max-width:1100px;margin:0 auto;padding:40px 20px
}
.profile picture,.profile img{display:block;border-radius:12px}
.profile img{
  width:220px;height:220px;object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.08)
}
.profile-text{flex:1;min-width:240px}
.profile-text h2{font-family:var(--ff-bold);font-size:1.6rem;margin-bottom:10px;color:var(--clr-green)}
.profile-text ul{margin-top:10px;display:grid;gap:8px;padding-left:18px}

/* Smart-Storage Grid */
.smart-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:18px
}
.smart-card{
  background:#fff;border:1px solid #cfd3cf;border-radius:12px;padding:20px
}
.smart-card h3{font-family:var(--ff-bold);margin-bottom:10px;color:var(--clr-green)}

/* ROI-Rechner */
.roi{
  background:#fff;border:1px solid #cfd3cf;border-radius:12px;padding:20px;margin-top:18px
}
.roi form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.roi label{font-weight:600}
.roi input{
  padding:10px;border:1px solid #aeb6ae;border-radius:8px;font-family:var(--ff-base)
}
.roi .full{grid-column:1/-1}
.roi-output{margin-top:12px;font-weight:700}

/* Bestehende Features */
.features{padding:70px 20px;max-width:1100px;margin:auto;text-align:center}
.features h2{font-family:var(--ff-bold);font-size:2rem;margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;border:1px solid #cfd3cf;padding:24px;border-radius:10px}
.card h3{font-family:var(--ff-bold);margin-bottom:12px;color:var(--clr-green)}

/* Footer */
footer{
  background:var(--clr-dark);color:#fff;text-align:center;padding:22px;font-size:.9rem;margin-top:60px
}
footer a{color:#fff;text-decoration:none}

/* Responsive */
@media(max-width:760px){
  .hero{padding:56px 16px}
  .hero h1{font-size:2.2rem}
  .nav-links{gap:14px}
  .nav-cta{padding:9px 12px}
  .profile{flex-direction:column;text-align:center}
  .profile img{width:180px;height:180px}
  .roi form{grid-template-columns:1fr}
}
/* === Services-Seite Verbesserungen === */
.page-intro{max-width:900px;margin:0 auto 14px;padding:0 20px}
.h1{font-family:var(--ff-bold);font-size:2.1rem;margin-bottom:8px}
.h2{font-family:var(--ff-bold);font-size:1.5rem;margin:22px 0 10px;color:var(--clr-green)}

.service-grid{
  max-width:1100px;margin:0 auto;padding:0 20px 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px
}
.service-card{
  background:#fff;border:1px solid #cfd3cf;border-radius:14px;padding:22px;box-shadow:0 10px 22px rgba(0,0,0,.04)
}
.service-card h3{font-family:var(--ff-bold);margin-bottom:8px;color:var(--clr-green)}
.service-card .tag{display:inline-block;background:#e8f5ea;border:1px solid #cfe4d6;border-radius:999px;padding:2px 10px;margin-bottom:10px;font-size:.9rem}
.service-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.service-card li{position:relative;padding-left:24px}
.service-card li:before{content:"▸";position:absolute;left:0;top:0;color:var(--clr-green);font-weight:700}

.process{
  max-width:1100px;margin:0 auto 40px;padding:0 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px
}
.step{background:#fff;border:1px solid #cfd3cf;border-radius:12px;padding:18px}
.step .num{display:inline-block;width:28px;height:28px;border-radius:50%;background:var(--clr-green);color:#fff;text-align:center;line-height:28px;font-weight:700;margin-right:8px}

.tech-note{max-width:900px;margin:0 auto 8px;padding:0 20px;opacity:.9}

.cta-banner{
  background:var(--clr-dark);color:#fff;text-align:center;margin:50px 0 0;padding:26px 20px
}
.cta-banner .cta{display:inline-block;margin-top:8px}
/* === Kontaktformular – Layout & Styles === */
.contact-wrap{max-width:1100px;margin:0 auto;padding:40px 20px}
.contact-wrap h1{font-family:var(--ff-bold);font-size:2.1rem;margin-bottom:10px}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:28px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

.addr-card{
  background:#fff;border:1px solid #cfd3cf;border-radius:12px;padding:18px
}
.addr-card h2{font-family:var(--ff-bold);font-size:1.15rem;margin-bottom:8px;color:var(--clr-green)}
.addr-card a{color:var(--clr-green);text-decoration:none}
.addr-card a:hover{text-decoration:underline}

.form-card{
  background:#fff;border:1px solid #cfd3cf;border-radius:12px;padding:18px
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

label{font-weight:600;display:block;margin-bottom:6px}
input[type="text"],input[type="email"],input[type="tel"],textarea{
  width:100%;padding:11px;border:1px solid #aeb6ae;border-radius:8px;font-family:var(--ff-base)
}
textarea{min-height:120px;resize:vertical}

.form-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
.small{font-size:.92rem;opacity:.85}
/* === Utilities & Base tweaks ========================================== */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.page{max-width:1100px;margin:0 auto;padding:40px 20px}
.page h1{font-family:var(--ff-bold);font-size:2.1rem;margin:0 0 12px}
.page h2{font-family:var(--ff-bold);font-size:1.5rem;margin:26px 0 10px;color:var(--clr-green)}

a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid color-mix(in srgb, var(--clr-accent) 70%, white);
  outline-offset:2px;
}

/* Links in hellem Footer/Hero besser sichtbar */
footer a:hover, .nav-links a:hover{opacity:.9;text-decoration:underline}

/* === Buttons =========================================================== */
.btn,.cta{
  display:inline-block;background:var(--clr-accent);color:#fff;
  padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;
  border:0;cursor:pointer;transition:transform .06s ease, filter .12s ease
}
.btn:hover,.cta:hover{filter:saturate(1.05) brightness(1.02)}
.btn:active,.cta:active{transform:translateY(1px)}
.btn--outline{
  background:transparent;color:var(--clr-green);border:2px solid var(--clr-green)
}

/* === Booking / Calendly Card ========================================== */
.cal-section{max-width:1100px;margin:0 auto;padding:38px 20px}
.cal-card{
  background:#fff;border:1px solid #cfd3cf;border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);overflow:hidden
}
.cal-head{padding:18px 18px 6px;text-align:center}
.cal-head h2{font-family:var(--ff-bold);font-size:1.6rem;margin-bottom:6px}
.cal-body{padding:12px}
.cal-body .calendly-inline-widget{min-width:320px;height:820px}
@media(max-width:760px){.cal-body .calendly-inline-widget{height:860px}}

/* === Formular Feinheiten ============================================== */
input[type="text"],input[type="email"],input[type="tel"],textarea{
  background:#fff;transition:border-color .12s ease, box-shadow .12s ease
}
input:focus,textarea:focus{
  border-color:color-mix(in srgb, var(--clr-green) 65%, #aeb6ae);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--clr-green) 20%, transparent);
}
input:invalid,textarea:invalid{border-color:#d66}
.help{font-size:.9rem;opacity:.8;margin-top:4px}

/* === Badges (z.B. Betreiber seit 2016) ================================ */
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  display:inline-block;background:#fff;border:1px solid #cfd3cf;border-radius:999px;
  padding:6px 10px;font-weight:600
}

/* === Kleine Mobile-Verbesserungen ===================================== */
@media(max-width:760px){
  .nav-links{row-gap:6px}
  .hero-img{margin-top:18px}
}

/* === Print (sauber drucken) =========================================== */
@media print{
  header,footer,.nav-cta{display:none !important}
  .page,.section{padding:0}
  a{text-decoration:none;color:inherit}
}