/* Knöpfe von diffrent.digital – unverändert herausgezogen aus
   ~/web/vision.love.magic/resources/css/site.css (Stand 12.10.2026), ohne Kommentare.
   Enthalten: .dd-button (Pille mit Bubble, Text, Pfeil, Ripple, Korn), Grössen, Kompetenzfarben,
   --neg, --kreis und .dd-filter-btn. Nicht enthalten: Burger, Magnet, Chibi, Inline-Links.
   Nicht von Hand ändern – bei Änderungen an der Website neu herausziehen. */

@property --sx { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sy { syntax: '<number>'; inherits: false; initial-value: 1; }

.dd-button {
  --btn-py: 0.5625rem; --btn-px: 1.25rem; --btn-font: 1.0625rem; --btn-lh: 1.625rem;
   --btn-arrow: 1.625rem; --btn-gap: 0.375rem; --btn-tracking: 0.0625rem;
   --dd-bg: var(--color-primary); --dd-fg: var(--color-white);
   --dd-bubble: var(--color-primary-dark); --dd-ripple: rgba(255, 255, 255, 0.45);
   display: inline-flex; align-items: center; justify-content: flex-start;
   gap: var(--btn-gap); padding: var(--btn-py) var(--btn-px); max-width: 100%;
   flex-shrink: 0;
   border: none; border-radius: 999px; corner-shape: superellipse(1.1);
   background-color: var(--dd-bg); position: relative; overflow: hidden;
   cursor: pointer; font: inherit;
   font-size: var(--btn-font); line-height: var(--btn-lh);
   --sx: 1; --sy: 1; transform: scaleX(var(--sx)) scaleY(var(--sy));
   transform-origin: center; will-change: transform;
   transition: --sx var(--dur-quick) var(--ease-out), --sy var(--dur-quick) var(--ease-out), background-color 150ms ease;
}

.dd-button:hover,
.dd-button.is-nah {
  --sx: var(--hover-scale, 1.05); --sy: var(--hover-scale, 1.05); background-color: var(--dd-bubble);
   transition: --sx var(--dur-spring) var(--ease-spring), --sy var(--dur-spring) var(--ease-spring) var(--stagger, 80ms), background-color var(--dur-fill) var(--ease-out);
}

.dd-button.is-pressed {
  --sx: var(--press-scale, 0.95); --sy: var(--press-scale, 0.95);
   transition: --sx var(--dur-press) var(--ease-press), --sy var(--dur-press) var(--ease-press);
}

.dd-button__bubble {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
   background: var(--dd-bubble);
   pointer-events: none;
   transform: translate(-50%, -50%) scale(0);
   transition: transform var(--dur-fill) var(--ease-out);
}

.dd-button__text {
  position: relative; z-index: 1; flex-shrink: 0; color: var(--dd-fg);
   font-weight: 700;
   text-transform: uppercase; letter-spacing: var(--btn-tracking); white-space: nowrap;
   transition: letter-spacing var(--dur-base) var(--ease-out), color 0.15s ease;
}

.dd-button:hover .dd-button__text {
  letter-spacing: 0.05px;
   transition: letter-spacing var(--dur-charge) var(--ease-spring), color 0.15s ease;
}

.dd-button.is-firing .dd-button__text {
  letter-spacing: var(--btn-tracking);
   transition: letter-spacing var(--dur-charge) var(--ease-spring);
}

.dd-button__arrow {
  position: relative; z-index: 1; width: var(--btn-arrow); height: var(--btn-arrow);
   flex-shrink: 0; color: var(--dd-fg);
   display: inline-flex; align-items: center; justify-content: center;
   transition: transform var(--dur-base) var(--ease-out), opacity 0.3s ease, color 0.15s ease;
}

.dd-button:hover .dd-button__arrow {
  transform: translateX(-4px);
   transition: transform var(--dur-charge) var(--ease-spring), color 0.15s ease;
}

.dd-button.is-firing .dd-button__arrow {
  transform: translateX(160px); opacity: 0;
   transition: transform var(--dur-charge) var(--ease-spring), opacity 0.35s ease;
}

.dd-button__ripple {
  position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.55;
   background: radial-gradient(circle,
   var(--dd-ripple) 0%,
   color-mix(in srgb, var(--dd-ripple) 55%, transparent) 55%,
   transparent 75%);
   transform: translate(-50%, -50%) scale(0);
   animation: dd-ripple var(--dur-ripple) var(--ease-out) forwards;
}

.dd-button__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 -5.5'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
   background-size: 128px 128px;
   background-position: var(--nx, 0) var(--ny, 0);
   mask-image: radial-gradient(circle 90px at var(--mx, 50%) var(--my, 50%), #000 15%, transparent 100%);
   opacity: 0; transition: opacity var(--dur-glow) var(--ease-out);
}

.dd-button:hover .dd-button__grain {
  opacity: 0.2;
}

.dd-button--no-arrow,
.dd-button:not(:has(.dd-button__arrow)) {
  justify-content: center;
}

.dd-button--md {
  --btn-py: 0.375rem; --btn-px: 1rem; --btn-font: 1rem; --btn-lh: 1.5rem; --btn-arrow: 1.5rem; --btn-gap: 0.3125rem; --btn-tracking: 0.0625rem;
}

.dd-button--lg {
  --btn-py: 0.5625rem; --btn-px: 1.25rem; --btn-font: 1.0625rem; --btn-lh: 1.625rem; --btn-arrow: 1.625rem; --btn-gap: 0.375rem; --btn-tracking: 0.0625rem;
}

.dd-button--xl {
  --btn-py: 0.75rem; --btn-px: 1.625rem; --btn-font: 1.1875rem; --btn-lh: 1.75rem; --btn-arrow: 1.75rem; --btn-gap: 0.4375rem; --btn-tracking: 0.075rem;
}

@media (max-width: 63.9375rem) {
  .dd-button,
  .dd-button--md,
  .dd-button--lg,
  .dd-button--xl {
    --btn-py: 0.375rem; --btn-px: 1rem; --btn-font: 1rem; --btn-lh: 1.5rem; --btn-arrow: 1.5rem; --btn-gap: 0.3125rem; --btn-tracking: 0.0625rem;
  }
  .dd-button__text:not(.truncate) {
    white-space: normal;
  }
}

@media (max-width: 23.75rem) {
  .dd-button,
  .dd-button--md,
  .dd-button--lg,
  .dd-button--xl {
    --btn-py: 0.25rem; --btn-px: 0.625rem; --btn-font: 0.8125rem; --btn-lh: 1.25rem;
     --btn-arrow: 1.125rem; --btn-gap: 0.25rem; --btn-tracking: 0.03125rem;
  }
}

.dd-button--strategie {
  --dd-bg: var(--color-strategie); --dd-bubble: var(--color-strategie-dark);
}

.dd-button--branding {
  --dd-bg: var(--color-branding); --dd-bubble: #8c616c;
}

.dd-button--multimedia {
  --dd-bg: var(--color-multimedia); --dd-bubble: #607a8c;
}

.dd-button--marketing {
  --dd-bg: var(--color-marketing); --dd-bubble: #4f7059;
}

.dd-button--neg {
  --dd-bg: var(--color-white); --dd-fg: var(--color-gray-darker);
   --dd-bubble: var(--color-primary-dark); --dd-ripple: rgba(0, 0, 0, 0.14);
}

.dd-button--neg-strategie {
  --dd-fg: var(--color-strategie-dark); --dd-bubble: var(--color-strategie-dark);
}

.dd-button--neg-branding {
  --dd-fg: var(--color-branding-dark); --dd-bubble: #8c616c;
}

.dd-button--neg-multimedia {
  --dd-fg: var(--color-multimedia-dark); --dd-bubble: #607a8c;
}

.dd-button--neg-marketing {
  --dd-fg: var(--color-marketing-dark); --dd-bubble: #4f7059;
}

.dd-button--neg:hover .dd-button__text,
.dd-button--neg:hover .dd-button__arrow {
  color: var(--color-white);
}

.dd-filter-btn {
  --dd-fg: var(--color-primary); --dd-bubble: var(--color-primary); --dd-ripple: var(--color-primary);
   display: inline-flex; align-items: center; justify-content: center;
   height: 2.25rem; padding: 0 1.25rem; border-radius: 999px; corner-shape: superellipse(1.1);
   --dd-rand: var(--color-primary);
   border: 2px solid transparent; color: var(--dd-fg); background: transparent; font: inherit;
   font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.0625rem;
   cursor: pointer; position: relative; overflow: hidden;
   --sx: 1; --sy: 1; transform: scaleX(var(--sx)) scaleY(var(--sy)); transform-origin: center; will-change: transform;
   transition: --sx var(--dur-quick) var(--ease-out), --sy var(--dur-quick) var(--ease-out);
}

.dd-filter-btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
   background: var(--dd-bubble); opacity: 0;
   transition: opacity var(--dur-press) var(--ease-out);
}

.dd-filter-btn:hover {
  --sx: 1.05; --sy: 1.05;
   transition: --sx var(--dur-spring) var(--ease-spring), --sy var(--dur-spring) var(--ease-spring) 80ms;
}

.dd-filter-btn:hover::before {
  opacity: 1; transition: opacity var(--dur-press) var(--ease-out) calc(var(--dur-fill) - var(--dur-press));
}

.dd-filter-btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
   border: 2px solid var(--dd-rand); border-radius: inherit; corner-shape: inherit;
   transition: border-color var(--dur-press) var(--ease-out);
}

.dd-filter-btn.is-pressed {
  --sx: 0.95; --sy: 0.95;
   transition: --sx var(--dur-press) var(--ease-press), --sy var(--dur-press) var(--ease-press);
}

.dd-filter-btn__text {
  position: relative; z-index: 1;
   transition: color var(--dur-press) var(--ease-out), letter-spacing var(--dur-base) var(--ease-out);
}

.dd-filter-btn:hover .dd-filter-btn__text {
  letter-spacing: 0.05px;
   transition: letter-spacing var(--dur-charge) var(--ease-spring), color var(--dur-press) var(--ease-out);
}

.dd-filter-btn:hover .dd-filter-btn__text,
.dd-filter-btn.is-active .dd-filter-btn__text {
  color: var(--color-white);
}

.dd-filter-btn.is-active::before {
  opacity: 1; transition: none;
}

.dd-filter-btn.is-active .dd-button__bubble {
  left: 50%; top: 50%; transform: translate(-50%, -50%) scale(20);
}

.dd-filter-btn--strategie {
  --dd-rand: var(--color-strategie); --dd-fg: var(--color-strategie); --dd-bubble: var(--color-strategie);
}

.dd-filter-btn--branding {
  --dd-rand: var(--color-branding); --dd-fg: var(--color-branding); --dd-bubble: var(--color-branding);
}

.dd-filter-btn--multimedia {
  --dd-rand: var(--color-multimedia); --dd-fg: var(--color-multimedia); --dd-bubble: var(--color-multimedia);
}

.dd-filter-btn--marketing {
  --dd-rand: var(--color-marketing); --dd-fg: var(--color-marketing); --dd-bubble: var(--color-marketing);
}

.dd-filter-btn--l1 {
  height: auto; padding: 0.375rem 1.25rem; font-size: 1.125rem; letter-spacing: 0.03em;
}

.dd-filter-btn--l2 {
  height: auto; padding: 0.25rem 1rem; font-size: 1rem; letter-spacing: 0.03em;
}

.dd-filter-btn--l3 {
  height: auto; padding: 0.125rem 0.75rem; font-size: 0.875rem; letter-spacing: 0.03em;
}

.dd-button--kreis {
  --press-scale: 0.86;
}

.dd-button--kreis:hover,
.dd-button--kreis.is-nah {
  transition: --sx var(--dur-spring) var(--ease-spring), --sy var(--dur-spring) var(--ease-spring), background-color var(--dur-fill) var(--ease-out);
}

.dd-button__icon {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
   flex-shrink: 0; width: var(--btn-icon, 1.5rem); height: var(--btn-icon, 1.5rem); color: var(--dd-fg);
   transition: color var(--dur-press) var(--ease-out);
}

.dd-button__icon svg {
  width: 100%; height: 100%; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .dd-button,
  .dd-button__bubble,
  .dd-button__text,
  .dd-button__arrow,
  .dd-button__grain,
  .dd-filter-btn,
  .dd-filter-btn__text,
  .dd-button__icon {
    transition: none;
  }
  .dd-button__ripple {
    animation: none; opacity: 0;
  }
}

.dd-button--kreis {
  --btn-kreis: 36px; 
   --btn-icon: 1.6875rem; 
   --dd-bg: rgb(255 255 255 / 0.5);
   --dd-fg: var(--color-gray-darker);
   --dd-bubble: rgb(255 255 255 / 0.7);
   --dd-ripple: rgba(0, 0, 0, 0.14);
   backdrop-filter: blur(8px);
   width: var(--btn-kreis);
   height: var(--btn-kreis);
   padding: 0;
   gap: 0;
   justify-content: center;
}

@media (min-width: 768px) {
  .dd-button--kreis {
    --btn-kreis: 48px;
     --btn-icon: 2.25rem;
  }
}

.dd-button--kreis .dd-button__bubble {
  display: none;
}

@keyframes dd-ripple {
 to {
 transform: translate(-50%, -50%) scale(1);
 opacity: 0;
 }
}