/* motimaker – 1000px-Container, Topbar, Gründerteam & App-Kacheln */

:root{
  --bg:#FAF9F6;
  --text:#2E2E2E;
  --accent:#FF6A00;
  --border:#E3E2DF;
  --header-h:100px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
}

/* Container */
.container{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  padding:0 2rem;
}

/* --- TOPBAR --- */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--bg);
  z-index:1000;
}
.topbar .container{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Marke */
.brand{
  display:flex;
  align-items:center;
  gap:4px;
}
.logo{height:60px;width:auto;display:block;}
.brand-name{
  font-size:1.8rem;
  font-weight:600;
  color:var(--text);
  line-height:1;
}

.brand-claim { display:none !important; }
.brand-claim .dot {
  color: var(--accent);        /* dein Corporate-Orange */
}

/* Hamburger */
.hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:none;
  background:var(--bg);
  cursor:pointer;
  box-shadow:none;
  padding:0;
}
.hamburger svg rect{
  fill:#2E2E2E;
  rx:1;
}
.hamburger svg rect:nth-child(1),
.hamburger svg rect:nth-child(3){height:2.5px;}
.hamburger svg rect:nth-child(2){height:3px;}

/* --- MENÜPANEL (ein Block, Hover über volle Breite) --- */
.nav-panel{
  position:absolute;
  top:var(--header-h);
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;             /* alle vier Ecken rund */
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
  padding:0;                       /* wichtig: Links füllen 100% */
  z-index:1100;
  max-width:min(90vw,320px);
}
.nav-panel ul{list-style:none;margin:0;padding:0;}
.nav-panel li{margin:0;}
.nav-panel a{
  display:block;                   /* füllt gesamte Zeile */
  width:100%;
  padding:.6rem 1rem;
  color:#2E2E2E;
  text-decoration:none;
  cursor:pointer;
  border-radius:0;                 /* bündig von links bis rechts */
}
.nav-panel a:hover,
.nav-panel a:focus-visible,
.nav-panel a:active{
  background:rgba(0,0,0,0.08);     /* dezentes Grau, keine Bewegung/Farbe */
  color:#2E2E2E;
  box-shadow:none;
  transform:none;
  text-decoration:none;
  outline:none;
}

/* --- INHALT --- */
main{margin-top:calc(var(--header-h) + 20px);}
.section{
  min-height:450px;
  padding:4rem 0;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.section h2{margin:0 0 .5rem;font-size:2rem;}
.section p{margin:0;max-width:70ch;line-height:1.6;}
.section.offwhite{background:var(--bg);}
.section.white{background:#fff;color:var(--text);}

/* --- VISION-BEREICH (ohne Bild) --- */
.vision-bg {
  position: relative;
  background: none;
  min-height: 450px;
  color: #000;
  padding: 4rem 2rem;
}

/* --- BUTTON (keine Hovereffekte) --- */
button{
  background:linear-gradient(to top,#FDD100 0%,#FF6A00 100%);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:12px 24px;
  font-weight:600;
  cursor:pointer;
  transition:none;
  margin-top:1rem;
}
/*
button:hover,
button:focus,
button:active{
  background:linear-gradient(to top,#FDD100 0%,#FF6A00 100%);
  color:#fff;
  border:none;
  box-shadow:none;
  transform:none;
}. */

/* --- GRÜNDERTEAM --- */
.section.dark{background:#0a0a0a;color:#eaeaea;padding:5rem 0;}
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:2rem;
}
.team-card{
  background:rgba(20,20,20,0.8);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}
.team-card .imgbox{aspect-ratio:4/5;background:#111;}
.team-card .imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
.team-card .content{padding:1.5rem;}
.team-card h3{margin:0 0 .25rem;font-size:1.2rem;color:#fff;}
.team-card .role{color:#bdbdbd;font-size:.9rem;margin-bottom:.5rem;}
.team-card p{color:#d3d3d3;line-height:1.6;font-size:.95rem;}
.team-card .quote{
  margin-top:1rem;
  padding:.75rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.06);
  font-size:.9rem;
  color:#e2e2e2;
  font-style:italic;
}

/* --- APP-KACHELN --- */
.app-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:2rem;
}
.app-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.5rem 1.75rem;
  text-align:left;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.app-card h3{margin:0 0 .5rem;color:var(--accent);font-size:1.1rem;font-weight:600;}
.app-card p{margin:0;line-height:1.55;color:var(--text);}

/* Footer */
.footer {
  background: var(--bg);      /* Beige Hintergrundfarbe wie Standard */
  margin-top: 4rem;
  padding: 2rem 0;
  color: var(--text);
}

.footer .container {
  text-align: center;
  opacity: 0.7;
}

.footer a {
  color: var(--text);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Farbverlauf-Schrift für Claim */
.gradient-text {
  background: linear-gradient(to top, #FDD100, #FF6A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Header-Fix: Brand mittig in der Topbar ausrichten */
.topbar .container { display:flex; align-items:center; }

/* iPhone-Notch (optional, falls ganz oben klebt) */
.topbar { padding-top: env(safe-area-inset-top, 0); }
main   { margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0) + 20px); }
/* Fine alignment: nudge brand-name slightly down next to the logo */
.topbar .brand-name { transform: translateY(10px); }