/* ============================================================================
 * Rocket Icons Font
 * ============================================================================
 * Benutzerdefinierte Icon-Font für das Rocket Child Theme
 * 
 * Verfügbare Icons:
 * - arrow-right       (\f100)
 * - close             (\f101)
 * - phone             (\f102)
 * - collapse-arrow    (\f103)
 * - chevron           (\f104)
 * - right-arrow       (\f105)
 * - check             (\f106)
 * - arrow-left        (\f107)
 * - upload-document   (\f108)
 * - envelope          (\f109)
 * - arrow-down        (\f110)

 *
 * Verwendung:
 * 
 * 1. Mit CSS-Klassen:
 *    <i class="rocket-icon rocket-icon-arrow-right"></i>
 * 
 * 2. Mit CSS-Variablen:
 *    .my-element::before {
 *        content: var(--rocket-icon-arrow-right);
 *        font-family: var(--rocket-font-family);
 *    }
 * 
 * 3. Mit data-Attribut:
 *    <i class="rocket-icon" data-rocket-icon="\f100"></i>
 * 
 * ========================================================================== */

/* ============================================================================
 * @font-face Definition
 * ========================================================================== */
@font-face {
  font-family: "Rocket Icons";
  src: url("../fonts/rocket-icons/Rocket.eot");
  src: url("../fonts/rocket-icons/Rocket.eot?#iefix") format("embedded-opentype"),
    url("../fonts/rocket-icons/Rocket.woff2") format("woff2"),
    url("../fonts/rocket-icons/Rocket.woff") format("woff"),
    url("../fonts/rocket-icons/Rocket.ttf") format("truetype"),
    url("../fonts/rocket-icons/Rocket.svg#font") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Webkit-spezifische Optimierung für SVG */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Rocket Icons";
    src: url("../fonts/rocket-icons/Rocket.svg#Rocket Icons") format("svg");
    font-display: swap;
  }
}

/* ============================================================================
 * CSS Custom Properties (Variablen)
 * ========================================================================== */
:root {
  /* Font-Familie */
  --rocket-font-family: "Rocket Icons";

  /* Icon Unicode-Werte */
  --rocket-icon-arrow-right: "\f100";
  --rocket-icon-arrow-down: "\f110";
  --rocket-icon-arrow-down-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24' fill='none'%3E%3Cpath d='M9.70476 23.1713L0.44182 13.4576C0.146882 13.1222 0 12.7459 0 12.3265C0 11.907 0.168033 11.5728 0.505273 11.3216C0.757909 11.0283 1.09515 10.8822 1.51582 10.8822C1.93649 10.8822 2.29488 11.0493 2.58982 11.3847L9.26177 18.3337V1.50736C9.26177 1.08904 9.40865 0.732647 9.70359 0.439354C9.99853 0.146062 10.3569 0 10.7776 0C11.0725 0 11.3357 0.0630987 11.5672 0.188128C11.7987 0.313157 11.9773 0.502453 12.1042 0.753679C12.2311 1.00491 12.2934 1.25613 12.2934 1.50736V18.3325L18.9654 11.3835C19.218 11.0481 19.5552 10.881 19.9759 10.881C20.3966 10.881 20.7655 11.0166 21.0816 11.2888C21.3977 11.5611 21.5552 11.907 21.5552 12.3253C21.5552 12.7436 21.4083 13.121 21.1133 13.4564L11.8516 23.1701C11.5989 23.4634 11.2406 23.6094 10.7776 23.6094C10.3146 23.6094 9.95622 23.4634 9.70359 23.1701L9.70476 23.1713Z' fill='black'/%3E%3C/svg%3E");
  --rocket-icon-close: "\f101";
  --rocket-icon-phone: "\f102";
  --rocket-icon-collapse-arrow: "\f103";
  --rocket-icon-chevron: "\f104";
  --rocket-icon-right-arrow: "\f105";
  --rocket-icon-check: "\f106";
  --rocket-icon-arrow-left: "\f107";
  --rocket-icon-upload-document: "\f108";
  --rocket-icon-envelope: "\f109";

  /* Default Icon Größen */
  --rocket-icon-size-sm: 16px;
  --rocket-icon-size-md: 24px;
  --rocket-icon-size-lg: 36px;
  --rocket-icon-size-xl: 50px;

  /* Outline SVG Icon-URLs (projektlokal, nie localhost) */
  --rocket-icon-outline-zu-fuss: url("../images/modules/icon-zu-fuss.svg");
  --rocket-icon-outline-zu-fuss-2: url("../images/modules/icon-zu-fuss-2.svg");
  --rocket-icon-outline-velo: url("../images/modules/icon-velo.svg");
  --rocket-icon-outline-auto: url("../images/modules/icon-auto.svg");
  --rocket-icon-outline-bus-2: url("../images/modules/icon-bus-2.svg");
  --rocket-icon-outline-bus: url("../images/modules/icon-bus.svg");
  --rocket-icon-outline-zug: url("../images/modules/icon-zug.svg");
}

/* ============================================================================
 * Base Icon Class
 * ========================================================================== */
.rocket-icon,
[data-rocket-icon]::before {
  display: inline-block;
  font-family: var(--rocket-font-family);
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  /* Verhindere Text-Selektion bei Icons */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* data-Attribut Verwendung */
[data-rocket-icon]::before {
  content: attr(data-rocket-icon);
}

/* ============================================================================
 * Icon Klassen
 * ========================================================================== */
.rocket-icon-arrow-right::before {
  content: var(--rocket-icon-arrow-right);
}

.rocket-icon-arrow-down::before {
  content: var(--rocket-icon-arrow-down);
}

/* Gutenberg Icon Block: uses class directly on .wp-block-icon element. */
.wp-block-icon.rocket-icon-arrow-down svg,
.rocket-icon-arrow-down.wp-block-icon svg {
  display: none;
}

.wp-block-icon.rocket-icon-arrow-down::before,
.rocket-icon-arrow-down.wp-block-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--rocket-icon-arrow-down-svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--rocket-icon-arrow-down-svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.rocket-icon-close::before {
  content: var(--rocket-icon-close);
}

.rocket-icon-phone::before {
  content: var(--rocket-icon-phone);
}

.rocket-icon-collapse-arrow::before {
  content: var(--rocket-icon-collapse-arrow);
}

.rocket-icon-chevron::before {
  content: var(--rocket-icon-chevron);
}

.rocket-icon-right-arrow::before {
  content: var(--rocket-icon-right-arrow);
}

.rocket-icon-check::before {
  content: var(--rocket-icon-check);
}

.rocket-icon-arrow-left::before {
  content: var(--rocket-icon-arrow-left);
}

.rocket-icon-upload-document::before {
  content: var(--rocket-icon-upload-document);
}

.rocket-icon-envelope::before {
  content: var(--rocket-icon-envelope);
}

/* ============================================================================
 * Outline SVG Icon Set (Figma)
 * ========================================================================== */
.rocket-icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: var(--rocket-icon-size-md);
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: var(--rocket-icon-svg-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--rocket-icon-svg-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.rocket-icon-outline-zu-fuss {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-zu-fuss);
}

.rocket-icon-outline-zu-fuss-2 {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-zu-fuss-2);
}

.rocket-icon-outline-velo {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-velo);
}

.rocket-icon-outline-auto {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-auto);
}

.rocket-icon-outline-bus-2 {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-bus-2);
}

.rocket-icon-outline-bus {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-bus);
}

.rocket-icon-outline-zug {
  --rocket-icon-svg-mask: var(--rocket-icon-outline-zug);
}

/* ============================================================================
 * Icon Größen Modifier
 * ========================================================================== */
.rocket-icon--sm {
  font-size: var(--rocket-icon-size-sm);
}

.rocket-icon--md {
  font-size: var(--rocket-icon-size-md);
}

.rocket-icon--lg {
  font-size: var(--rocket-icon-size-lg);
}

.rocket-icon--xl {
  font-size: var(--rocket-icon-size-xl);
}

/* ============================================================================
 * Icon Position Modifier
 * ========================================================================== */
.rocket-icon--inline {
  vertical-align: middle;
  margin: 0 0.25em;
}

.rocket-icon--left {
  margin-right: 0.5em;
}

.rocket-icon--right {
  margin-left: 0.5em;
}

/* ============================================================================
 * Icon Rotation & Flip Utilities
 * ========================================================================== */
.rocket-icon--rotate-90 {
  transform: rotate(90deg);
}

.rocket-icon--rotate-180 {
  transform: rotate(180deg);
}

.rocket-icon--rotate-270 {
  transform: rotate(270deg);
}

.rocket-icon--flip-horizontal {
  transform: scaleX(-1);
}

.rocket-icon--flip-vertical {
  transform: scaleY(-1);
}

/* ============================================================================
 * Animation Utilities
 * ========================================================================== */
.rocket-icon--spin {
  animation: rocket-icon-spin 2s linear infinite;
}

@keyframes rocket-icon-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.rocket-icon--pulse {
  animation: rocket-icon-pulse 1s ease-in-out infinite;
}

@keyframes rocket-icon-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ============================================================================
 * WordPress Block Editor Compatibility
 * ========================================================================== */
.editor-styles-wrapper .rocket-icon,
.editor-styles-wrapper [data-rocket-icon]::before {
  font-family: var(--rocket-font-family);
}