/* Ikonenschmiede Design System Components
   Opt-in Komponenten-Bibliothek (2026-04-20)
   Depends: base.css (Tokens), fonts.css (Cabinet Grotesk + Instrument Sans)

   Token-Alias: var(--ik-red-metal-deep) statt dem im Handoff noch genutzten
   (und nicht existenten) var(--ik-red-deep).

   Niko-Korrekturen 2026-04-20:
   - Ghost-Dark Button: Metallic-Flaeche + 1px weisse Umrandung
   - Tag-Muted: entfernt (kein Use-Case)
*/

/* Lokale Alias-Fallbacks falls base.css noch nicht erweitert ist.
   Wenn base.css geladen ist, gewinnen die dortigen Tokens per Cascade-Order. */
:root {
  --ik-font-body: 'Switzer', 'Inter', system-ui, sans-serif;
  --ik-font-heading: 'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
  --ik-radius-button: 4px;
  --ik-radius-tag: 3px;
  --ik-radius-card: 6px;
  --ik-radius-input: 4px;
  --ik-ease-default: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ik-duration-instant: 120ms;
  --ik-duration-fast: 240ms;
}

/* ========== Buttons ========== */

.ik-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  padding: 10px 22px;
  border-radius: var(--ik-radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ik-duration-fast) var(--ik-ease-default),
              color var(--ik-duration-fast) var(--ik-ease-default),
              border-color var(--ik-duration-fast) var(--ik-ease-default);
  line-height: 1;
}

.ik-btn--filled {
  background: var(--ik-red-metal);
  color: #FFFFFF;
  border-color: var(--ik-red-metal-deep);
}
.ik-btn--filled:hover {
  background: var(--ik-red-metal-hover);
  border-color: var(--ik-red-dark);
}

.ik-btn--outline {
  background: transparent;
  color: var(--ik-red);
  border-color: var(--ik-red);
}
.ik-btn--outline:hover {
  color: transparent;
  background: var(--ik-red-metal);
  -webkit-background-clip: text;
  background-clip: text;
  border-color: var(--ik-red-metal-deep);
}

/* Ghost-Dark: Metallic-Flaeche mit 1px weisser Umrandung auf dunklem Hintergrund
   Niko-Korrektur 2026-04-20: frueher transparent, jetzt bewusst sichtbarer Akzent. */
.ik-btn--ghost-dark {
  background: var(--ik-red-metal);
  color: #FFFFFF;
  border: 1px solid var(--ik-white);
}
.ik-btn--ghost-dark:hover {
  background: var(--ik-red-metal-hover);
  border-color: var(--ik-white);
}

/* ========== Tag / Badge ========== */

.ik-tag {
  display: inline-flex;
  align-items: center;
  background: var(--ik-red-metal);
  color: #FFFFFF;
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--ik-radius-tag);
  text-transform: none;
  line-height: 1;
}

/* ========== Callout Box ========== */

.ik-callout {
  background: var(--ik-gray);
  border-left: 2.5px solid var(--ik-red);
  border-radius: 0;
  padding: 16px 20px;
}
.ik-callout__label {
  font-family: var(--ik-font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ik-red-dark);
  margin: 0 0 6px 0;
}
.ik-callout__text {
  font-family: var(--ik-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ik-black);
  margin: 0;
}

/* ========== Stat Card ========== */

.ik-stat {
  background: var(--ik-gray);
  border: 0.5px solid var(--ik-gray-border);
  border-radius: var(--ik-radius-card);
  padding: 20px;
}
.ik-stat__num {
  font-family: var(--ik-font-heading);
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ik-black);
}
.ik-stat__num--accent {
  color: transparent;
  background: var(--ik-red-metal);
  -webkit-background-clip: text;
  background-clip: text;
}
.ik-stat__desc {
  font-family: var(--ik-font-body);
  font-size: 13px;
  color: var(--ik-text-secondary);
  line-height: 1.5;
  margin-top: 10px;
}

/* ========== Number Circle ========== */

.ik-numcircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ik-black);
  color: var(--ik-white);
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}
.ik-numcircle--accent { background: var(--ik-red-metal); }

/* ========== Input ========== */

.ik-input {
  width: 100%;
  font-family: var(--ik-font-body);
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--ik-gray-border);
  border-radius: var(--ik-radius-input);
  background: #fff;
  color: var(--ik-black);
  transition: border-color var(--ik-duration-fast) var(--ik-ease-default);
}
.ik-input::placeholder { color: var(--ik-text-tertiary); }
.ik-input:focus { outline: none; border-color: var(--ik-black); }

/* ========== Card (generic) ========== */

.ik-card {
  background: #fff;
  border: 0.5px solid var(--ik-gray-border);
  border-radius: var(--ik-radius-card);
  padding: 24px;
}

/* ========== Work Card (Kartei grid item) ========== */

.ik-work {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ik-work__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--ik-gray);
  display: block;
  transition: opacity var(--ik-duration-fast) var(--ik-ease-default);
}
.ik-work:hover .ik-work__img { opacity: 0.85; }
.ik-work__meta {
  font-family: var(--ik-font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ik-text-secondary);
  margin-top: 12px;
}
.ik-work__title {
  font-family: var(--ik-font-heading);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ik-black);
  margin-top: 4px;
}

/* ========== Top Navigation ========== */

.ik-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 0;
  background: var(--ik-white);
}
.ik-nav__brand {
  font-family: var(--ik-font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ik-black);
  text-decoration: none;
}
.ik-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ik-nav__link {
  font-family: var(--ik-font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ik-black);
  text-decoration: none;
  transition: opacity var(--ik-duration-instant) var(--ik-ease-default);
}
.ik-nav__link:hover { opacity: 0.6; }
.ik-nav__link--active {
  border-bottom: 1px solid var(--ik-black);
  padding-bottom: 2px;
}
.ik-nav__link--accent {
  color: transparent;
  background: var(--ik-red-metal);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ========== Dark surface wrapper ========== */

.ik-dark {
  background: var(--ik-black);
  color: var(--ik-white);
}
.ik-dark--warm {
  background: var(--ik-dark-warm);
  color: var(--ik-white);
}

/* ========== Metallic Inner Pulse ==========
   Opt-in modifier: fuegt einem Metallic-Element (Button, Tag, Circle, Hero-Surface)
   eine atmende, leicht wandernde Hotspot-Ebene hinzu.
   Die helle Schicht liegt HINTER dem Inhalt (z-index), damit Text/Icons stabil bleiben.
   Einsatz: sparsam, nur auf Haupt-CTAs und Signalelementen.

   Struktur:
     <button class="ik-btn ik-btn--filled ik-pulse">
       <span class="ik-pulse__layer"></span>
       <span class="ik-pulse__content">Jetzt bewerben</span>
     </button>
*/

.ik-pulse { position: relative; overflow: hidden; isolation: isolate; }

.ik-pulse__layer {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 30% 35%,
    rgba(217, 95, 82, 0.6) 0%,
    rgba(181, 69, 58, 0) 65%);
  opacity: 0.15;
  animation: ik-pulse-wander 4.8s ease-in-out infinite;
}

.ik-pulse__content { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; }

@keyframes ik-pulse-wander {
  0%, 100% { opacity: 0.15; transform: translate(-8%, -4%); }
  50%      { opacity: 0.95; transform: translate(8%, 4%); }
}

/* ========== Preise Shimmer (nav "Preise sehen" accent) ==========
   Text base: Burgund. Ein Venezianisch-Hotspot wandert links-rechts ueber die
   Zeichen via radial-gradient + animiertes background-position (clipped auf Text).
   Der Diamant hat seinen eigenen, langsameren Rhythmus (opacity/Farbe).

   DOM-Reihenfolge (Niko-Korrektur 2026-04-20):
     <a class="ik-preise">
       <span class="ik-preise__diamond"></span>
       <span class="ik-preise__text">Preise sehen</span>
     </a>
   Diamant steht VOR dem Text. */

.ik-preise { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }

.ik-preise__text {
  color: transparent;
  background-image:
    radial-gradient(circle 60px at var(--x, 0%) 50%, #C95545 0%, #9A3231 50%, #7A1420 80%),
    linear-gradient(90deg, #7A1420, #7A1420);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ik-preise-sweep 3.2s ease-in-out infinite;
}

@keyframes ik-preise-sweep {
  0%   { background-position: -20% 50%, 0 0; }
  50%  { background-position: 120% 50%, 0 0; }
  100% { background-position: -20% 50%, 0 0; }
}

.ik-preise__diamond {
  display: inline-block;
  width: 6px; height: 6px;
  background: #9A3231;
  transform: rotate(45deg);
  animation: ik-preise-diamond 3.8s ease-in-out infinite;
}

@keyframes ik-preise-diamond {
  0%, 100% { background: #7A1420; }
  50%      { background: #C95545; }
}

/* ========== Reduced Motion Fallbacks ========== */

@media (prefers-reduced-motion: reduce) {
  .ik-pulse__layer { animation: none; opacity: 0.35; transform: none; }
  .ik-preise__text { animation: none; }
  .ik-preise__diamond { animation: none; background: #B5453A; }
}