/* ============================================================
   components.css — wiederkehrende Bausteine
   Knöpfe, Karten, Telefon, Bänder, Kopf, Fuß
   ============================================================ */

/* ── Knöpfe ── */
.me-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:13px;
  min-height:var(--me-tap-lg); padding:0 40px; border-radius:var(--me-r-pill);
  background:var(--me-primary-strong); color:#fff; text-decoration:none;
  font-size:21px; font-weight:700; box-shadow:var(--me-sh-btn); border:0; cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .25s;
}
.me-btn:hover{ transform:translateY(-3px); background:var(--me-primary-deep); color:#fff;
  box-shadow:0 6px 12px rgba(14,63,46,.22), 0 22px 48px rgba(14,63,46,.30); }
.me-btn:active{ transform:translateY(-1px); }
.me-btn--sm{ min-height:var(--me-tap); padding:0 30px; font-size:18px; }
.me-btn--block{ width:100%; }

/* ── Pillen & Marken ── */
.me-pill{
  display:inline-flex; align-items:center; gap:11px; min-height:44px; padding:0 20px;
  border-radius:var(--me-r-pill); background:rgba(255,255,255,.72);
  border:1px solid rgba(26,107,80,.20); font-size:17px; font-weight:700;
  color:var(--me-primary-strong); box-shadow:var(--me-sh-1);
}
.me-pill--solid{ background:linear-gradient(135deg,var(--me-primary),var(--me-primary-strong));
  color:#fff; border:0; min-height:46px; letter-spacing:.8px; font-size:16px;
  box-shadow:0 3px 8px rgba(18,58,44,.20), 0 12px 28px rgba(18,58,44,.22); }
.me-dot{ width:9px; height:9px; border-radius:50%; background:var(--me-primary);
  display:block; animation:me-glow 2.4s ease-in-out infinite; }

/* ── Karten ── */
.me-card{
  background:linear-gradient(165deg,var(--me-surface-soft),var(--me-surface-soft-2));
  border:1px solid var(--me-border); border-radius:var(--me-r-lg);
  padding:42px 36px; box-shadow:var(--me-sh-1);
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s;
}
.me-card--plain{ background:var(--me-surface); }
.me-card--dark{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
  color:var(--me-on-dark); box-shadow:var(--me-sh-dark); }
.me-card--accent{ background:linear-gradient(165deg,var(--me-accent-tint),var(--me-accent-tint-2));
  border-color:rgba(143,78,44,.20); }
.me-card:hover{ transform:translateY(-6px);
  box-shadow:0 4px 8px rgba(18,58,44,.07), 0 22px 44px rgba(18,58,44,.13), 0 48px 90px rgba(18,58,44,.10); }
.me-card__num{ position:absolute; top:-24px; right:8px; font-size:150px; font-weight:700;
  color:rgba(26,107,80,.06); line-height:1; pointer-events:none; font-family:var(--me-font-body); }

/* Symbolfläche */
.me-ico{
  width:62px; height:62px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#22815F,var(--me-primary-strong)); flex-shrink:0;
  box-shadow:0 3px 6px rgba(18,58,44,.16), 0 10px 24px rgba(18,58,44,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.me-ico--sm{ width:46px; height:46px; border-radius:15px; }
.me-ico--ghost{ background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.14); box-shadow:none; }
.me-ico--tint{ background:var(--me-primary-tint); box-shadow:none; }
.me-ico--accent{ background:linear-gradient(150deg,#A8663C,var(--me-accent-strong));
  box-shadow:0 3px 8px rgba(122,64,35,.26); }

/* auf Hover einschiebende Zusatzzeile */
.me-slide{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s, margin-top .45s; }
.me-card:hover .me-slide{ max-height:96px; opacity:1; margin-top:20px; }

/* ── Raster ── */
.me-grid{ display:grid; gap:26px; }
.me-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.me-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.me-split{ display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:center; }
.me-stagger > *:nth-child(2){ margin-top:34px; }
.me-stagger > *:nth-child(3){ margin-top:68px; }

/* ── Liste mit Häkchen ── */
.me-checks{ display:flex; flex-direction:column; gap:20px; list-style:none; margin:0; padding:0; }
.me-checks li{ display:flex; align-items:flex-start; gap:16px; font-size:20px;
  color:#1E2C26; line-height:1.5; }
.me-checks li > span:first-child{ width:32px; height:32px; border-radius:11px; flex-shrink:0;
  background:rgba(26,107,80,.13); display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* ── Telefon ── */
.me-phone{ position:relative; }
.me-phone__body{
  position:relative; border-radius:58px; padding:12px;
  background:linear-gradient(160deg,#3C4A44 0%,#141C18 26%,#0B100E 60%,#2A3630 100%);
  box-shadow:0 3px 6px rgba(16,26,22,.16), 0 24px 48px rgba(16,26,22,.24),
             0 60px 120px rgba(16,26,22,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.me-phone__body::after,.me-phone__body::before{ content:''; position:absolute; width:3px; border-radius:2px;
  background:linear-gradient(180deg,#3C4A44,#151D19); }
.me-phone__body::after{ right:-3px; top:150px; height:78px; }
.me-phone__body::before{ left:-3px;  top:126px; height:46px; }
.me-phone__screen{ border-radius:47px; overflow:hidden; background:var(--me-bg);
  box-shadow:inset 0 2px 10px rgba(16,26,22,.20); }
.me-phone--float{ animation:me-float 7s ease-in-out infinite; }
.me-phone__halo{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(26,107,80,.16), transparent 68%); }

/* ── Dunkles Band ── */
.me-band-dark{
  background:linear-gradient(165deg,var(--me-dark-1) 0%,var(--me-dark-2) 58%,#10362A 100%);
  color:var(--me-on-dark); position:relative; overflow:hidden;
}
.me-band-dark::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 560px at 15% -10%, rgba(80,190,145,.16), transparent 62%),
             radial-gradient(700px 480px at 88% 40%, rgba(191,120,74,.12), transparent 60%); }
.me-band-dark > *{ position:relative; z-index:2; }
.me-band-dark h2,.me-band-dark h3{ color:var(--me-on-dark); }
.me-band-dark p{ color:var(--me-on-dark-soft); }
.me-band-dark .me-eyebrow{ color:var(--me-on-dark-mint); }

/* überlappende Sektion */
.me-overlap{ border-radius:var(--me-r-xl) var(--me-r-xl) 0 0; margin-top:-90px; }
.me-overlap--sm{ margin-top:-58px; }

/* ── Kopf ── */
.me-header{ display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--me-pad-x); position:relative; z-index:5; }
.me-brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--me-ink); }
.me-brand__mark{ width:42px; height:42px; border-radius:13px;
  background:linear-gradient(150deg,#22815F,var(--me-primary-strong));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 4px rgba(18,58,44,.18), 0 8px 20px rgba(18,58,44,.22), inset 0 1px 0 rgba(255,255,255,.22); }
.me-brand__name{ font-size:22px; font-weight:700; letter-spacing:-.4px; }
.me-brand__name span{ font-weight:400; color:var(--me-ink-body); }
.me-nav{ display:flex; align-items:center; gap:36px; font-size:18px; }
.me-nav a{ color:var(--me-ink-body); font-weight:600; text-decoration:none; }
.me-nav a:hover{ color:var(--me-primary); text-decoration:underline; }
.me-burger{ display:none; align-items:center; gap:8px; min-height:var(--me-tap);
  padding:0 18px; border-radius:var(--me-r-pill); background:rgba(255,255,255,.8);
  border:1px solid var(--me-border-soft); font-size:17px; font-weight:700;
  font-family:inherit; color:var(--me-ink); box-shadow:var(--me-sh-1); cursor:pointer; }
.me-mobilenav{ display:none; flex-direction:column; gap:4px; padding:8px var(--me-pad-x) 24px; }
.me-mobilenav.is-open{ display:flex; }
.me-mobilenav a{ min-height:var(--me-tap); display:flex; align-items:center;
  font-size:20px; font-weight:600; color:var(--me-ink-body); text-decoration:none;
  border-bottom:1px solid var(--me-border-soft); }

/* ── Fuß ── */
.me-footer{ background:var(--me-ink); color:rgba(255,255,255,.62); padding:56px var(--me-pad-x) 40px; }
.me-footer a{ color:rgba(255,255,255,.62); font-size:17px; }
.me-footer a:hover{ color:#fff; }
.me-footer__label{ font-size:14px; font-weight:700; color:#fff;
  letter-spacing:1.1px; margin-bottom:16px; text-transform:none; }

/* ── Mobil ── */
@media (max-width: 900px){
  .me-nav{ display:none; }
  .me-burger{ display:inline-flex; }
  .me-header{ padding:18px var(--me-pad-x); }
  .me-split,.me-grid--2,.me-grid--3{ grid-template-columns:1fr; gap:36px; }
  .me-stagger > *:nth-child(2),.me-stagger > *:nth-child(3){ margin-top:0; }
  .me-grid{ gap:16px; }
  .me-card{ padding:28px 24px; border-radius:var(--me-r); }
  .me-phone__body{ border-radius:48px; padding:10px; }
  .me-phone__body::before{ display:none; }
  .me-phone__screen{ border-radius:39px; }
  .me-btn{ width:100%; padding:0 24px; font-size:20px; }
  .me-btn--auto{ width:auto; }
  .me-checks li{ font-size:19px; }
  .me-card__num{ font-size:112px; top:-18px; }
}