/* ============================================================
   NGenAro Web — Components (Buttons, Header, Cards, Footer)
   Изисква tokens.css + base.css.
   ============================================================ */

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:var(--step-0);
  line-height:1; text-align:center; white-space:nowrap;
  padding:.9rem 1.5rem; min-height:48px; border-radius:var(--r-pill);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-1); }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 10px 34px -10px rgba(255,107,53,.55); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); }
.btn--lg{ font-size:var(--step-1); padding:1.05rem 1.9rem; min-height:56px; }
/* Haupt-Handlungsaufruf: 64 px, damit er auf dem Handy sicher zu treffen ist
   und sich optisch klar von den Nebenwegen abhebt. */
.btn--xl{ font-size:var(--step-1); padding:1.15rem 2.2rem; min-height:64px; }
/* Kopfbereich: zwei Schaltflächen nebeneinander brauchen etwas weniger
   Polsterung, sonst drängen sie die Navigationspunkte zusammen. Die 44 px
   bleiben über dem Mindestmass für Tippziele. */
.btn--nav{ margin-left:.5rem; padding:.62rem 1.05rem; min-height:44px; font-size:var(--step--1); }

/* WhatsApp — offizielle Markenfarbe, Text passt sich der Spaltenbreite an */
.btn--whatsapp{
  background:#25D366; color:#0B0D12;
  font-size:clamp(.88rem, .55rem + .9vw, 1.02rem);
  padding:.95rem 1.2rem; min-height:54px;
  white-space:normal; text-wrap:balance; line-height:1.25;
  box-shadow:0 8px 24px -12px rgba(37,211,102,.75);
}
.btn--whatsapp:hover{ background:#1FBE5A; transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(37,211,102,.85); }
.btn--whatsapp svg{ flex:0 0 auto; width:21px; height:21px; }

/* ---- Site header / Nav ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-soft);
}
.site-header__in{ display:flex; align-items:center; gap:1.5rem; min-height:72px; }
.brand{ display:inline-flex; align-items:center; margin-right:auto; }
.brand img{ height:34px; width:auto; }
.nav{ display:flex; align-items:center; gap:.25rem; }
/* :not(.btn) ist entscheidend — sonst überschreibt diese Regel die Schriftfarbe
   des orangen Knopfes in der Navigation. Der bekam dadurch graue Schrift auf
   Orange: Kontrast 1,26 statt der geforderten 4,5 (WCAG 2.1 AA). */
.nav a:not(.btn){
  font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
  color:var(--ink-muted); padding:.55rem .8rem; border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav a:not(.btn):hover{ color:var(--ink); background:var(--surface); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ content:""; display:block; height:2px; margin-top:3px; background:var(--lime); border-radius:2px; }
.nav-toggle{ display:none; }

@media (max-width:860px){
  .nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;
    background:var(--bg-2); border-bottom:1px solid var(--border); transform:translateY(-120%);
    transition:transform var(--dur) var(--ease-out); visibility:hidden;
  }
  .nav[data-open="true"]{ transform:none; visibility:visible; }
  .nav a{ padding:.9rem .4rem; font-size:var(--step-0); border-bottom:1px solid var(--border-soft); }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-sm); color:var(--ink); border:1px solid var(--border); }
}

/* ============================================================
   Card: 3D-Glaspanel mit 180°-rotationssymmetrischer Silhouette
   („Symmetrie in der Asymmetrie": zwei gegenüberliegende Ecken gekappt,
   die beiden anderen ausgerundet — die Form ist bei 180°-Drehung mit sich
   selbst identisch, das Raster bleibt vollkommen gleichmäßig.)
   Aufbau: .card trägt den Kanten-Gradienten, ::before ist die um 1.5px
   eingerückte Fläche → perfekte Haarlinie entlang der GANZEN Silhouette.
   ============================================================ */
@property --edge-a{ syntax:"<angle>";  inherits:false; initial-value:0deg; }
@property --glow  { syntax:"<number>"; inherits:false; initial-value:0; }

.card{
  --cut:26px; --scoop:30px; --hair:1.5px;
  position:relative; isolation:isolate;
  border:0; border-radius:0;
  /* mehr Luft — links etwas großzügiger, damit der Text nicht am Rand klebt */
  padding:clamp(1.5rem,2.4vw,2rem) clamp(1.4rem,2.2vw,1.9rem)
          clamp(1.5rem,2.4vw,2rem) clamp(1.7rem,2.8vw,2.3rem);
  /* Kante */
  /* Alle Stopps kräftig genug — vorher fiel ein Stopp auf 28 % ab, dadurch
     verschwand die Kante beim Drehen (Hover) auf einer Seite komplett. */
  background:conic-gradient(from var(--edge-a) at 50% 50%,
    color-mix(in oklab, var(--accent) 92%, transparent) 0deg,
    color-mix(in oklab, var(--lime)   72%, transparent) 90deg,
    color-mix(in oklab, var(--accent) 78%, transparent) 180deg,
    color-mix(in oklab, var(--lime)   72%, transparent) 270deg,
    color-mix(in oklab, var(--accent) 92%, transparent) 360deg);
  /* Fallback-Silhouette (alle Browser): zwei gegenüberliegende Kappungen */
  clip-path:polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
                    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
  transition:transform .35s var(--ease-out), --edge-a .9s linear;
}
/* Fläche (Blender-Panel-Textur), 1.5px eingerückt → Haarlinien-Kante */
.card::before{
  content:""; position:absolute; inset:var(--hair); z-index:-1; pointer-events:none;
  background-color:var(--bg-2);
  background-image:
    linear-gradient(152deg, rgba(255,255,255,.075), transparent 42%),
    image-set(url(/assets/img/ui/panel.avif) type("image/avif"), url(/assets/img/ui/panel.webp) type("image/webp"));
  background-size:auto, 100% 100%; background-repeat:no-repeat;
  clip-path:inherit;
}
/* Glühen (eigener Layer, animiert nur opacity → GPU) */
.card::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  opacity:var(--glow);
  background:radial-gradient(62% 62% at 50% 50%, color-mix(in oklab, var(--accent) 50%, transparent), transparent 70%);
  filter:blur(20px);
  transition:opacity .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); --glow:1; --edge-a:180deg; }
.card--featured{ --glow:.75; }

/* Echte Kurven, wo unterstützt (Chrome/Edge 135+, Safari 18.4+, Firefox 148+):
   gekappte Ecken oben-links/unten-rechts, ausgerundete oben-rechts/unten-links. */
@supports (clip-path: shape(from 0 0, line to 100% 0, close)){
  .card{
    --silhouette:shape(
      from var(--cut) 0,
      hline to calc(100% - var(--scoop)),
      curve to 100% var(--scoop) with calc(100% - var(--scoop) * .3) 0 / 100% calc(var(--scoop) * .3),
      vline to calc(100% - var(--cut)),
      line  to calc(100% - var(--cut)) 100%,
      hline to var(--scoop),
      curve to 0 calc(100% - var(--scoop)) with calc(var(--scoop) * .3) 100% / 0 calc(100% - var(--scoop) * .3),
      close);
    clip-path:var(--silhouette);
  }
  .card::before{ clip-path:var(--silhouette); }
}
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--step--1); font-weight:600; letter-spacing:.02em;
  padding:.35rem .8rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--border-soft); color:var(--ink-muted);
}
.pill--live{ color:var(--success); }
.pill--live::before{ content:"●"; color:var(--success); font-size:.7em; }

/* ---- Section head ---- */
.section-head{ max-width:var(--measure); margin-bottom:clamp(1.1rem,2.2vw,1.8rem); }
.section-head h2{ margin-top:.5rem; }
.section-head p{ margin-top:1rem; color:var(--ink-muted); font-size:var(--step-1); }

/* ---- Footer ---- */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--border-soft); padding-block:clamp(2.5rem,6vw,4rem); }
.site-footer a{ color:var(--ink-muted); }
.site-footer a:hover{ color:var(--ink); }
.social{ display:flex; gap:.6rem; }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-pill);
  border:1px solid var(--border); color:var(--ink-muted);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.social a:hover{ color:var(--lime); border-color:var(--lime); }
.social svg{ width:20px; height:20px; }