/*
  Grundlegendes Stylesheet für die MIMAMI‑Landingpage.
  Farben, Typografie und Abstände sind im Sinne der CI mit sanften Pastelltönen gewählt.
*/

@font-face{
  font-family:'Square One';
  src:url('fonts/Square One Bold.woff2') format('woff2'),
      url('fonts/Square One Bold.ttf') format('truetype'),
      url('fonts/Square One Bold.otf') format('opentype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Farbvariablen */
:root {
  --primary-color: #F4A261;     /* sanftes Orange für Buttons und Akzente */
  --secondary-color: #2A9D8F;   /* Pastellgrün für Call‑to‑Action und Links */
  --accent-color: #E9C46A;      /* helles Gelb als Akzent */
  --text-color: #333333;        /* dunkles Grau für Fließtext */
  --bg-color: #FFFFFF;          /* weißer Hintergrund */
  --light-bg: #F7F9FC;          /* sehr helles Grau als Alternative */
  --font-family: 'Roboto', sans-serif;
}

/* Basiselemente */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-color);
  background: var(--bg-color);
  scroll-behavior: smooth;
}

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

a { color: var(--secondary-color); text-decoration: none; }
a:hover { color: var(--primary-color); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0.5rem 0; }
ul { margin: 0; padding: 0; }

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
header {
  background: var(--bg-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Klickbares Logo */
.logo-text {
  font-family: 'Square One','Roboto',sans-serif;
  font-weight:700;
  font-size:2.55rem;
  line-height:1;
  letter-spacing:1px;
  text-decoration:none;
  color: var(--text-color);
  display:inline-block;
}
.logo-text:hover { color: var(--secondary-color); }

nav ul { list-style:none; display:flex; gap:1.5rem; margin:0; }
nav li { margin:0; }
nav a { font-weight:500; color:var(--text-color); transition:color .3s ease; }
nav a:hover { color:var(--secondary-color); }

.menu-toggle { display:none; font-size:1.5rem; cursor:pointer; color:var(--text-color); }

/* Hero Section */
.hero-section {
  background: var(--light-bg);
  padding: 3rem 0;
}

.hero-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;            /* Abstand zwischen Textblock und Video */
  align-items: center;
}

.hero-text {
  flex: 1 1 100%;       /* Text in eigene Zeile */
  display: flex;
  flex-direction: column;
  align-items: center;  /* horizontal zentriert */
  justify-content: center;
  text-align: center;   /* Text mittig */
  padding-bottom: 0;    /* Abstand übernimmt der Button */
}

.hero-text h1 { font-size: 2.2rem; margin-bottom: 1rem; }
.hero-text .subline { font-size: 1.2rem; margin-bottom: 1.5rem; color:#555; }

/* Button im Hero: nicht seitenbreit + gleicher Abstand wie unter dem Video */
.hero-text .btn {
  width: auto;
  display: inline-block;
  margin-bottom: 3rem;  /* gleicher Space wie unter dem Video (Hero padding-bottom) */
}

.hero-image {
  flex: 1 1 100%;       /* Video in eigene Zeile */
  display: flex;
  justify-content: center;
}

.hero-image iframe {
  width: clamp(320px, 80vw, 960px); /* min / responsive / max */
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
}

/* Buttons (generisch) */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  font-weight: 500;
  text-align: center;
}
.primary-btn { background: var(--secondary-color); color:#fff; transition: background .3s ease; }
.primary-btn:hover { background: var(--primary-color); color:#fff; }

/* Leistungen */
.services-section { padding: 3rem 0; background: var(--bg-color); }
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-top:2rem; }
.service-item { text-align:center; padding:1rem; }
.service-item i { font-size:2rem; color:var(--secondary-color); }
.service-item h3 { margin:1rem 0 .5rem; font-size:1.2rem; }
.service-item p { font-size:.95rem; line-height:1.4; }

/* Avatare */
.avatars-section { padding:3rem 0; background:var(--light-bg); }
.avatars-section p { margin-bottom:1rem; color:#555; }
.avatar-carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; padding-bottom:1rem; }
.avatar-card {
  flex:0 0 250px; background:var(--bg-color); border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.05); padding:1rem; text-align:center; scroll-snap-align:start;
}
.avatar-card img { width:100%; height:200px; object-fit:cover; border-radius:4px; margin-bottom:.5rem; }
.avatar-card h3 { margin:.5rem 0 .25rem; font-size:1.1rem; }
.avatar-card p { font-size:.9rem; line-height:1.4; }

/* Mehrwert */
.mehrwert-section { padding:3rem 0; background:var(--bg-color); }
.benefits-list li { margin:.5rem 0; display:flex; align-items:flex-start; gap:.5rem; font-size:1rem; }
.benefits-list i { color:var(--secondary-color); margin-top:.15rem; }

/* Anwendungsfälle */
.cases-section { padding:3rem 0; background:var(--light-bg); }
.cases-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2rem; margin-top:2rem; }
.case-item { text-align:center; padding:1rem; }
.case-item i { font-size:2rem; color:var(--primary-color); margin-bottom:.5rem; }
.case-item h3 { margin:.5rem 0; font-size:1.2rem; }
.case-item p { font-size:.9rem; line-height:1.4; }

/* Kontakt */
.contact-section { padding:3rem 0; background:var(--bg-color); }
.contact-grid { display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; }

#contact-form {
  flex:1 1 400px; background:var(--light-bg); padding:2rem; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
#contact-form .form-row { display:flex; gap:1.5rem; flex-wrap:wrap; }
#contact-form .form-group { flex:1; margin-bottom:1rem; }
#contact-form label { display:block; margin-bottom:.25rem; font-weight:500; }
#contact-form input, #contact-form textarea {
  width:100%; padding:.5rem; border:1px solid #ccc; border-radius:4px; font-family:inherit; font-size:.95rem;
}
#contact-form textarea { resize:vertical; }
#contact-form .btn { margin-top:1rem; width:100%; } /* nur im Formular seitenbreit */
.form-note { margin-top:.5rem; font-size:.85rem; color:#666; }

/* Calendly */
.calendar-widget {
  flex:1 1 400px; background:var(--light-bg); padding:2rem; border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.05); min-width:320px;
}
.calendar-widget h3 { margin-top:0; margin-bottom:1rem; font-size:1.3rem; }
.calendly-inline-widget { width:100%; height:600px; }

/* Responsive */
@media (max-width: 768px) {
  nav ul {
    display:none; position:absolute; top:60px; right:1rem; background:var(--bg-color);
    flex-direction:column; gap:1rem; padding:1rem; border-radius:8px;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
  }
  nav.open ul { display:flex; }

  .hero-container { flex-direction: column-reverse; text-align:center; gap:3rem; }

  .contact-grid { flex-direction:column; }
  #contact-form, .calendar-widget { flex:1 1 100%; }
}

/* Footer */
footer { background:var(--light-bg); padding:2rem 0; }
.footer-grid { display:flex; flex-wrap:wrap; gap:2rem; }
.footer-item { flex:1 1 300px; }
.footer-item h4 { margin-top:0; margin-bottom:.5rem; font-size:1.2rem; }
.footer-item p { font-size:.9rem; line-height:1.4; color:#555; }

/* Datenschutzerklärung */
.privacy-section { padding:3rem 0; background:var(--bg-color); }

/* Cookie Banner */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.9); color:#fff; padding:1rem;
  display:flex; justify-content:space-between; align-items:center; z-index:9999; flex-wrap:wrap;
}
.cookie-banner p { margin:0; font-size:.9rem; }
.cookie-banner a { color:var(--accent-color); text-decoration:underline; }
.cookie-banner button {
  background:var(--primary-color); border:none; color:#fff; padding:.5rem 1rem;
  border-radius:4px; cursor:pointer; margin-left:1rem; transition:background .3s ease;
}
.cookie-banner button:hover { background:var(--secondary-color); }