/* /assets/site.css  (GLOBAL: Original-Design + neue Header-Buttons) */

:root{
  --bg:#ffffff;
  --panel:#f6f8fb;
  --text:#0b0d10;
  --muted:#4b5563;
  --hair:#e5e7eb;
  --accent:#0b0d10;
  --link:#0b0d10;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;

  /* Brand */
  --brand:#2762E4;
  --font-brand: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Abstand zwischen Seitentitel und Inhaltsbox */
.hero h1 {
  margin-bottom: 32px; /* vorher effektiv ~16px */
}

/* optional: falls h1 + card direkt aufeinander folgen */
.hero > .card {
  margin-top: 32px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  line-height:1.55;
  letter-spacing:.2px;
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1020px; margin:0 auto; padding:28px 20px 70px;}

/* ===== Header (Layout bleibt wie Original) ===== */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 26px;
  border-bottom:1px solid var(--hair);
}

.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:600; letter-spacing:.6px;
}

/* BRAND NAME: always identical */
.brand-name{
  font-family: var(--font-brand);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* MEVENTA with blue V helper */
.meventa{ font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
.meventa .v-accent{ color: #2762E4; } /* exakt */

/* ===== NEW: Button-Navigation (nur Header/Nav neu) ===== */
nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  font-size:14px;
}

.btn{
  color: var(--muted);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(215,221,231,.6);
  background: rgba(215,221,231,.04);
  text-decoration:none;
}
.btn:hover{
  text-decoration:none;
  border-color: rgba(190,198,210,.9);
}
.btn[aria-current="page"]{
  color: var(--text);
  border-color: rgba(180,190,205,.95);
  background: rgba(215,221,231,.10);
}

.lang{
  display:flex; gap:8px; align-items:center;
  border-left:1px solid var(--hair);
  padding-left:12px; margin-left:4px;
  color:var(--muted);
}

.langbtn{
  color: var(--muted);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid rgba(215,221,231,.6);
  background: rgba(215,221,231,.04);
  text-decoration:none;
}
.langbtn:hover{
  text-decoration:none;
  border-color: rgba(190,198,210,.9);
}
.langbtn[aria-current="page"]{
  color: var(--text);
  border-color: rgba(180,190,205,.95);
  background: rgba(215,221,231,.10);
}

/* ===== Original Content Styles (1:1) ===== */
.hero{padding:44px 0 26px;}

.kicker{
  font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.4px;
  margin:0 0 14px;
}

h1{
  margin:0;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height:1.18;
  font-weight:650;
}

.hero-subline{
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  max-width: 60ch;
}

.grid{
  margin-top:28px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr;}
  nav{display:none}
  .hero-subline{font-size:17px;}
}

@media (max-width: 600px){
  .hero-subline{ margin-bottom: 24px; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border:1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:20px 20px;
}

.card h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:650;
  letter-spacing:.2px;
}

.card p{margin:0; color:var(--muted); font-size:15px;}
.card ul{margin:10px 0 0; padding-left:18px; color:var(--muted);}
.card li{margin:8px 0;}

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

.divider{height:1px; background:var(--hair); margin:22px 0;}

.note{
  font-size:13px;
  color:var(--muted);
  padding:14px 16px;
  border:1px dashed rgba(174,183,195,.35);
  border-radius: 14px;
  background: var(--panel);
}

footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--hair);
  color:var(--muted);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.smallcaps{font-variant-caps: all-small-caps; letter-spacing:.6px;}

.contact{
  display:flex; flex-direction:column; gap:10px;
}

.contact a{
  display:inline-flex; width:fit-content;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(215,221,231,.18);
  background: rgba(215,221,231,.04);
}
/* --- Mobile Navigation Fix --- */
@media (max-width: 768px) {

  header {
    position: relative;
    z-index: 10;
  }

  nav {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  nav a {
    display: block;
    padding: 10px 0;
    font-size: 1rem;
  }

}
/* --- iPhone Safari: ensure header nav is visible and clickable --- */
@media (max-width: 900px) {
  header nav,
  nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
    flex-direction: column;
    gap: 12px;
  }

  header nav a,
  nav a {
    display: block;
    padding: 10px 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* If something overlays the header on iOS, keep header above it */
header {
  position: sticky;
  top: 0;
  z-index: 9999;
}
/* ============================
   Mobile polish (header/nav)
   ============================ */
@media (max-width: 900px) {

  /* mehr Luft oben, keine “rechte Säule” */
  header .wrap{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
  }

  /* Brand zentrieren */
  .brand{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  /* Navigation: 2 Spalten, kompakt, klickbar */
  header nav{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    width: 100%;
    align-items: stretch;
  }

  header nav a.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 10px;
    border-radius: 14px;
    line-height: 1.1;
    white-space: nowrap;
  }

  /* “Responsibility/Verantwortung” darf über 2 Spalten gehen (sonst wirkt es gequetscht) */
  header nav a.btn:last-of-type{
    grid-column: 1 / -1;
  }

  /* Sprachumschalter: zentriert, nicht “irgendwo daneben” */
  .lang{
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
  }
}
/* --- Mobile header: stack brand + nav (no burger, just clean) --- */
@media (max-width: 900px){
  header .wrap{ display:block; }

  .brand{
    justify-content:center;
    gap:12px;
    margin: 10px 0 14px;
    text-align:center;
  }

  nav[aria-label="Navigation"]{
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 10px;
  }

  nav[aria-label="Navigation"] a.btn{
    padding: 10px 12px;
    font-size: 15px;
  }

  /* Language switch centered, no divider */
  .lang{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:10px;
  }
  .lang::before, .lang::after { content:none !important; }
}