/* ========================================================================
   SHOWCASE-PRO — auf aurora.css abgestimmt (Light-first, feine Borders)
   Layout: oben 1 breite Karte, darunter 2 kürzere
   ===================================================================== */

/* Tokens an aurora.css angelehnt */
:root{
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: min(1200px, 92vw);
  --grid-gap: clamp(0.9rem, 1.2vw, 1.2rem);

  /* Light-First wie aurora.css */
  --bg: #ffffff;
  --text: #0b0c10;
  --muted: #0f1729;    /* nah an .aurora-subtitle */
  --soft: rgba(11,12,16,.75);
  --line: #eee;

  --radius: 16px;      /* = var(--radius-card) */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 26px 64px rgba(0,0,0,.22);

  /* Akzent (unverändert) */
  --brand: 255 122 69;
  --brand-2: 255 152 7;
}

/* Auto-Dark nur wenn kein data-theme (Parität zu aurora.css) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0a0c12;
    --text:#f6f8ff;
    --muted:#e8eeff;
    --soft:rgba(255,255,255,.82);
    --line: rgba(255,255,255,.12);
  }
}
/* Expliziter Dark Mode via data-theme="dark" */
:root[data-theme="dark"]{
  --bg:#000;
  --text:#fff;
  --muted:#e8eeff;
  --soft:rgba(255,255,255,.8);
  --line: rgba(255,255,255,.12);
}

/* Wrapper */
.showcase-pro{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base);
}
.showcase-pro .container{
  width: var(--container);
  margin-inline: auto;
  padding: clamp(1.2rem, 2vw, 1.6rem);
}

/* Grid */
.showcase-pro .grid{
  list-style:none; padding:0; margin:0;
  display:grid; gap: var(--grid-gap);
  grid-template-columns: repeat(1, minmax(0,1fr));
}

/* Layout: oben 1 Karte breit, unten 2 Karten */
.showcase-pro .grid > li:first-child{
  grid-column: 1 / -1;
}

@media (min-width:700px){
  .showcase-pro .grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Card – feine 1px-Border + zarter Glas-Look wie .aurora-subtitle */
.showcase-pro .card{
  position:relative; display:flex; flex-direction:column; isolation:isolate;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(15,23,41,.06), rgba(15,23,41,.03)),  /* Glasfilm */
    var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-position .6s ease;
  container-type: inline-size;
}
.showcase-pro .card::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  /* dezenter Hover-Glow (leicht, nicht bunt) */
  background: radial-gradient(720px 520px at var(--mx,50%) var(--my,35%), rgba(255,255,255,.16), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
@media (hover:hover){
  .showcase-pro .card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--text) 12%, transparent);
  }
  .showcase-pro .card:hover::before{ opacity:.45; }
}

/* Media */
.showcase-pro .media{
  position:relative; z-index:0;
  display:block; aspect-ratio:4/3; overflow:hidden;
  background: #0b0c10; /* sicherer Fallback */
}
.showcase-pro .media img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(1.06) contrast(1.04);
  transition: transform .5s ease, filter .5s ease;
}
@media (hover:hover){
  .showcase-pro .card:hover .media img{
    transform: scale(1.03);
    filter: saturate(1.10) contrast(1.06);
  }
}

/* Body */
.showcase-pro .card__body{
  position:relative; z-index:1;
  padding: 1rem;
  display:grid; gap:.7rem; align-content:start;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Tags – „Pill“ wie subtile Glas-Pills */
.showcase-pro .tags{ display:flex; gap:.4rem; flex-wrap:wrap; }
.showcase-pro .tag{
  display:inline-flex; align-items:center; gap:.4ch;
  padding:.34rem .6rem; border-radius:999px;
  font-weight:700; font-size:.78rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
}
:root{ --aurora-blue: #6b7cff; }
.showcase-pro .tag--eyebrow{
  color: var(--aurora-blue);
  background: color-mix(in srgb, var(--aurora-blue) 16%, transparent);
  border-color: color-mix(in srgb, var(--aurora-blue) 28%, transparent);
}

/* Typo */
.showcase-pro .card__title{
  margin:0;
  font-weight:900;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.32rem);
  letter-spacing:-.01em;
  color: var(--text);
}
.showcase-pro .card__desc{
  margin:0; max-width: 60ch;
  color: var(--soft);
  font-size: .95rem; line-height:1.55;
}

/* Actions / Buttons (Gradient-CTA bleibt) */
.showcase-pro .actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; }
.showcase-pro .actions .btn{ position:relative; z-index:3; }
.showcase-pro .btn{
  --btn-bg: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)));
  --btn-txt: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.92rem; text-decoration:none;
  padding:.62rem 1rem; border-radius:12px;
  color:var(--btn-txt); background:var(--btn-bg);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.showcase-pro .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.showcase-pro .btn:active{ transform: translateY(0); }
.showcase-pro .btn:focus-visible{ outline:none !important; box-shadow:none !important; }

/* Click-Abdeckung */
.showcase-pro .card__link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.showcase-pro .card:focus-within{ outline:none; }

/* Dark-Overrides (wie aurora: helle Flächen im Dark behalten möglich) */
:root[data-theme="dark"] .showcase-pro .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    #0b0c10;  /* etwas dunkler als Backdrop */
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .showcase-pro .card{
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
      #0b0c10;
    border-color: var(--line);
  }
}

/* Modal (übernommen & geglättet; identische Optik wie aurora.css) */
.aurora-modal{ position:fixed; inset:0; display:grid; place-items:center;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(0,0,0,.64); z-index:1000; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
@supports (backdrop-filter: blur(8px)){ .aurora-modal{ backdrop-filter: blur(8px) saturate(105%); } }
.aurora-modal[hidden]{ display:none !important; }
.aurora-modal__frame{ width:100%; max-width:min(720px, 96vw); max-height:100%; display:block; }
.aurora-modal__surface{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid #e6e6e6; border-radius:16px;
  box-shadow: 0 16px 64px rgba(0,0,0,.35); overflow:hidden;
}
.aurora-modal__content{
  position:relative; display:grid; place-items:center; background:#000; overflow:hidden; min-height:200px;
}
.aurora-modal__content > *{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; }
.aurora-modal__close{
  position:absolute; top:8px; left:8px; width:44px; height:44px;
  display:grid; place-items:center; background:transparent; border:none; color:#fff;
  font-size:26px; line-height:1; cursor:pointer; z-index:10; touch-action:manipulation;
}
.aurora-modal__close:focus-visible{
  outline:none; box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 0 0 4px rgba(255,255,255,.85);
  border-radius:8px;
}
.aurora-modal__surface :where(a,button,[tabindex]):focus-visible{
  outline:none; box-shadow:
    0 0 0 2px rgba(0,0,0,.55),
    0 0 0 4px rgba(255,255,255,.9);
  border-radius:10px;
}
@media (max-width:640px){
  .aurora-modal__surface{ border-radius:12px;
    max-height: calc(100vh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
}
:root[data-theme="dark"] .aurora-modal__surface{ background:#0b0c10; border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .aurora-modal__close{ color:#ffffff; }

/* Motion-Respekt */
@media (prefers-reduced-motion: reduce){
  .showcase-pro .card, .showcase-pro .media img, .showcase-pro .btn{ transition: none !important; }
}

/* Optionales Cursor-Licht (setzt CSS-Variablen bei Mousemove) */
.showcase-pro .card{ --mx: 50%; --my: 35%; }
.showcase-pro .card:hover{ cursor: pointer; }

/* === SHOWCASE-PRO ↔ AURORA: Stage & Gutter anpassen (große Screens) === */
:root{
  --aurora-gutter: 2rem;        /* gleicher Außenabstand wie aurora */
  --showcase-stage: 14400px;     /* Bühne/Maxbreite für Inhalte */
}

/* Section-Außenabstand: safe-area aware, kein doppeltes Padding */
.showcase-pro{
  background: var(--bg, #fff);
  color: var(--text, #0b0c10);
  padding-left:  max(var(--aurora-gutter), env(safe-area-inset-left));
  padding-right: max(var(--aurora-gutter), env(safe-area-inset-right));
  padding-top: clamp(3rem, 8vh, 4.5rem); /* etwas mehr Abstand nach oben */
}

/* Container: volle Breite erlauben, aber auf Stage klemmen */
.showcase-pro .container{
  width: 100%;
  margin-inline: auto;
  padding-inline: 0; /* Außenabstand kommt von der Section */
}

/* Grid: ebenfalls an die Bühne binden (wie aurora .flow-rail/.board-grid) */
.showcase-pro .grid{
  max-width: min(var(--showcase-stage), calc(100% - var(--aurora-gutter) * 2));
  margin-inline: auto;
}

/* Bild-/Medienkarten sollen nicht „kleben“: kleiner Innenrand oben/unten */
.showcase-pro .card__body{
  padding: clamp(.9rem, 1.2vw, 1.2rem);
}

/* Ultra-Wide leicht erweitern (optional) */
@media (min-width: 1800px){
  :root{ --showcase-stage: 1680px; } /* dezent breiter, bleibt aber geerdet */
}

/* === SHOWCASE-PRO — Mobile Polishing (≤700px) ========================= */
@media (max-width: 699.98px){

  /* Außenabstand wie Aurora, nix abschneiden */
  .showcase-pro{
    padding-left:  max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-top: clamp(2.4rem, 7vh, 3.4rem); /* auch mobil etwas mehr Abstand oben */
  }

  /* Container: volle Breite nutzen, keine zusätzliche Klemme */
  .showcase-pro .container{
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }

  /* Grid: 1 Spalte, etwas enger */
  .showcase-pro .grid{
    grid-template-columns: 1fr;
    gap: clamp(.7rem, 2.5vw, 1rem);
    max-width: none;
    margin-inline: 0;
  }

  /* Card: kompakter, aber luftig; ruhiger Glare */
  .showcase-pro .card{
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    border-color: color-mix(in srgb, var(--text) 10%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .showcase-pro .card::before{
    opacity: .85;                     /* weicher Glow */
    background: radial-gradient(520px 380px at 50% 24%,
                                rgba(var(--brand) / .06), transparent 65%);
  }
  /* Kein „Anheben“ auf Tap – ruhiger Look */
  @media (hover:hover){
    .showcase-pro .card:hover{ transform: translateY(-2px); }
  }

  /* Media: 16:10, leicht abgerundet, sanfter Zoom reicht */
  .showcase-pro .media{
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  }
  .showcase-pro .media img{
    transform: none;
    filter: saturate(1.04) contrast(1.04);
  }
  @media (hover:hover){
    .showcase-pro .card:hover .media img{ transform: scale(1.02); }
  }

  /* Body: dichter Satz, bessere Lesbarkeit */
  .showcase-pro .card__body{
    padding: 12px 14px;
    gap: .6rem;
  }

  /* Titel/Copy: minimal kleiner, dafür klarer */
  .showcase-pro .card__title{
    font-size: clamp(1rem, .9rem + .7vw, 1.18rem);
    letter-spacing: -.012em;
  }
  .showcase-pro .card__desc{
    font-size: .96rem;
    line-height: 1.55;
    color: var(--muted);
  }

  /* Tags: kompaktere Chips, Wrap erlaubt */
  .showcase-pro .tags{ gap: .35rem; }
  .showcase-pro .tag{
    font-size: .76rem;
    padding: .32rem .56rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
    border-color: color-mix(in srgb, var(--text) 14%, transparent);
  }

  /* Actions: Buttons vollbreit, große Hit-Targets */
  .showcase-pro .actions{
    gap: .5rem;
    margin-top: .1rem;
  }
  .showcase-pro .btn{
    width: 100%;
    padding: .74rem 1rem;
    border-radius: 12px;
    font-size: .98rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    touch-action: manipulation;
  }

  /* Gesamte Karte klickbar? lass den Link die volle Fläche haben */
  .showcase-pro .card__link{ inset: 0; }

  /* High-density Displays: etwas schärferes Rendering */
  @media (min-resolution: 2dppx){
    .showcase-pro .media img{ image-rendering: auto; }
  }

  /* Motion: Mobile dezent */
  @media (prefers-reduced-motion: reduce){
    .showcase-pro .card,
    .showcase-pro .media img,
    .showcase-pro .btn{ transition: none !important; }
  }
}

/* === Dark-Mode – mobile Feinschliff (optional) ======================== */
@media (max-width: 699.98px){
  :root[data-theme="dark"] .showcase-pro .card{
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  :root[data-theme="dark"] .showcase-pro .media{
    background: #0b0c10;
    border-bottom-color: rgba(255,255,255,.08);
  }
}