/*
Theme Name: M2M Landing Theme
Theme URI: https://www.m2m-marketing.de/
Author: M2M Marketing UG
Author URI: https://www.m2m-marketing.de/
Description: Leichte, einseitige Landingpage im M2M-Stil mit Formspree-Formular und DSGVO-Consent-Banner.
Version: 1.0.20250908
License: GPL-2.0-or-later
Text Domain: m2m-landing
*/

:root{
  --bg:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --brand:#22d3ee; --brand-2:#a78bfa; --accent:#34d399;
  --ring:rgba(34,211,238,.5); --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial; color:var(--text);
  background:url('https://lp-fb.m2m-marketing.de/wp-content/uploads/2022/10/bg-m2m.jpg') no-repeat center center fixed, #0f172a; background-size:cover;}
a{color:inherit; text-decoration:none} img{max-width:100%; display:block}
.container{width:min(1200px, 92%); margin-inline:auto}
.tag{display:inline-flex; gap:.5rem; padding:.35rem .7rem; border:1px solid rgba(255,255,255,.12); color:var(--muted); border-radius:999px; font-size:.85rem;}
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.5) blur(10px); background:rgba(15,23,42,.75); border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.75rem} .brand img{height:42px} .brand h1{font-size:1.1rem; margin:0}
.nav-actions{display:flex; gap:.6rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); color:#e5e7eb; font-weight:600; transition:.2s ease; box-shadow:0 2px 12px rgba(0,0,0,.2)}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border-color:transparent; color:#0b1020}
.hero{padding: clamp(3rem, 6vw, 6rem) 0 3rem}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h2{font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height:1.1; margin:.6rem 0} .hero p{color:var(--muted); font-size: clamp(1rem, 1.5vw, 1.15rem)}
.cta{display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap}
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:2rem}
.card{background:rgba(15,23,42,.75); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .4rem; font-size:1.15rem} .card p{color:var(--muted); margin:0}
section{padding: clamp(2.2rem, 5vw, 3.6rem) 0} .split{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center}
.check{list-style:none; padding:0; margin:0} .check li{display:flex; gap:.6rem; margin:.5rem 0; align-items:flex-start}
.check .dot{margin-top:.35rem; width:.8rem; height:.8rem; border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem} .step{border:1px dashed rgba(255,255,255,.16); border-radius:14px; padding:1rem 1.1rem; background:rgba(255,255,255,.02)}
.step .num{font-weight:800; font-size:2rem; background:linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; color:transparent}
.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem} form{display:grid; gap:.8rem}
input, textarea{width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0b1020; color:#e5e7eb}
input:focus, textarea:focus{outline:2px solid var(--ring); border-color:transparent} textarea{min-height:140px}
footer{padding:2rem 0; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
@media (max-width: 980px){ .hero-grid, .split, .contact{grid-template-columns:1fr} }
@media (max-width: 780px){ .card-grid, .steps{grid-template-columns:1fr} }
.error{color:#ff9aa2} .success{color:#9ae6b4}
/* Legal pages layout */
.legal .container{width:min(900px,92%);}
.legal .card{background:rgba(15,23,42,.82);}


/* Simple contact form styles */
.m2m-form .field { margin-bottom: 1rem; }
.m2m-form label { display:block; font-weight:600; margin-bottom:.35rem; }
.m2m-form input[type="text"],
.m2m-form input[type="email"],
.m2m-form textarea {
  width:100%; padding:.7rem .9rem; border:1px solid #e1e1e1; border-radius:.6rem; font:inherit;
}
.m2m-form input[type="checkbox"] { width:auto; }
.m2m-form .btn { cursor:pointer; }
.m2m-form .actions { margin-top:1rem; }
.m2m-form .notice { background:#fff5f5; border:1px solid #f5c2c7; color:#842029; padding:.8rem 1rem; border-radius:.6rem; margin-bottom:1rem; }

/* Primary button */
.btn.primary { background:#111; color:#fff; }
.btn.primary:hover { filter:brightness(0.9); }

/* Split grid for Über-Bereich */
.container.split { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2rem; align-items:start; }
@media (max-width: 900px) {
  .container.split { grid-template-columns: 1fr; gap: 1.5rem; }
  #ueber img { margin: 0 auto; }
}

/* Engerer Abstand nur im Über-Block */
#ueber .container.split { gap: 1rem; grid-template-columns: auto 1fr 1fr; }

/* Check list dots */
ul.check { list-style:none; padding:0; margin:0; }
ul.check li { display:flex; align-items:center; margin:.4rem 0; }
ul.check .dot { width:8px; height:8px; background:#111; border-radius:50%; display:inline-block; margin-right:.6rem; }