@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
1 lines • 29.6 kB
Source Map (JSON)
{"version":3,"sourceRoot":null,"mappings":"AAUA,uQAaA,oNAIA,gKAIA,0JAIA,+LAKA,sDAKA,sDAKA,sDAKA,sDAKA,yDAMA,qDAIA,2CAIA,iDAIA,iDAKA,2CAq+BA,oEA58BA,uQAaA,yRAIA,gKAIA,8JAIA,sLAKA,mCAKA,2CAKA,sDAOA,sDAKA,sDAKA,sDAKA,sDAKA,yDAMA,qDAIA,2CAIA,iDAIA,iDAKA,2CAyBA,uQAaA,ydAIA,gSAIA,gUAIA,qSAKA,sCAKA,mCAKA,2CAKA,yDAOA,sDAKA,sDAKA,sDAKA,sDAKA,yDAMA,qDAIA,2CAIA,iDAIA,iDAKA,2CA2BA,yQAaA,6KAIA,uLAIA,gPAIA,sXAKA,uCAKA,8CAKA,wCAKA,qCAMA,uDAKA,uDAKA,uDAKA,uDAKA,0DAMA,sDAIA,4CAIA,kDAIA,kDAKA,4CAyBA,+QAaA,yRAIA,gKAIA,0JAIA,sLAKA,0DAKA,0DAKA,0DAKA,0DAKA,6DAMA,yDAIA,+CAIA,qDAIA,qDAKA,+CA2CA,aAEE,mJASA,8DAKA,8DAKA,8DAKA,8DAKA,8DAKA,iEAKA,iEAMA,iCAEA,6CAEA,iDAEA,yCAEA,yCAEA,qCAEA,mCAEA,yCAaF,oQAYA,4DAKA,4DAKA,4DAKA,4DAKA,+DAMA,2DAIA,iDAIA,uDAIA,uDAKA,iDAeA,uQAYA,yRAIA,gKAIA,0JAIA,sLAKA,sDAKA,sDAKA,sDAKA,sDAKA,yDAMA,qDAIA,2CAIA,iDAIA,iDAKA,2CAeA,wLAaA,gnBAIA,geAIA,2iBAIA,seAKA,gCAKA,kCAKA,kCAKA,gCAKA,6BAMA,qCAIA,2BAIA,iCAIA,iCAKA,2CAqBA,iRAaA,2DAKA,2DAKA,2DAKA,2DAKA,8DAMA,0DAIA,gDAIA,sDAIA,sDAKA,gDAeA,oNAIA,gKAIA,0JAIA,+LAeA,uQAaA,saAIA,6TAIA,qUAIA,oUAKA,sDAKA,sDAKA,sDAKA,sDAKA,yDAMA,qDAIA,2CAIA,iDAIA,iDAKA,2CAgCA,6MAWA,gFAKA,gFAKA,gFAKA,gFAKA,mFAMA,uDAIA,6CAIA,mDAIA,mDAKA,wGAIA","sources":["Users/jseidel/GitHub/dragonfly/dist/temp/icons-temp-combined.css"],"sourcesContent":["/* Datei: icons/tabler.css */\n/**\n* Tabler Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Tabler Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.ti,\n.ti-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Tabler Icons */\n.ti-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E\");\n}\n\n.ti-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n}\n\n.ti-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E\");\n}\n\n.ti-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E\");\n}\n\n/* Icon Sizes */\n.ti-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.ti-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.ti-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.ti-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.ti-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.ti-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.ti-top {\n vertical-align: var(--position-top);\n}\n\n.ti-middle {\n vertical-align: var(--position-middle);\n}\n\n.ti-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.ti-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/remix.css */\n/**\n* Remix Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Remix Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.ri,\n.ri-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Remix Icons */\n.ri-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E\");\n}\n\n.ri-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E\");\n}\n\n.ri-close {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E\");\n}\n\n.ri-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E\");\n}\n\n/* Remix Varianten */\n.ri-line {\n fill: none;\n stroke-width: 2%;\n}\n\n.ri-fill {\n fill: currentcolor;\n stroke-width: 0%;\n}\n\n.ri-dual {\n fill: currentcolor;\n opacity: 5000%;\n stroke-width: 2%;\n}\n\n/* Icon Sizes */\n.ri-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.ri-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.ri-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.ri-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.ri-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.ri-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.ri-top {\n vertical-align: var(--position-top);\n}\n\n.ri-middle {\n vertical-align: var(--position-middle);\n}\n\n.ri-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.ri-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/phosphor.css */\n/**\n* Phosphor Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Phosphor Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.ph,\n.ph-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Phosphor Icons */\n.ph-house {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M218.83 103.77l-80-75.48a1.14 1.14 0 0 1-.11-.11 16 16 0 0 0-21.53 0l-.11.11-79.91 75.48A16 16 0 0 0 32 115.55V208a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-48h32v48a16 16 0 0 0 16 16h48a16 16 0 0 0 16-16v-92.45a16 16 0 0 0-5.17-11.78zM208 208h-48v-48a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v48H48v-92.45l.11-.1L128 40l79.9 75.43.11.1z'/%3E%3C/svg%3E\");\n}\n\n.ph-list {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8zM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16z'/%3E%3C/svg%3E\");\n}\n\n.ph-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128z'/%3E%3C/svg%3E\");\n}\n\n.ph-magnifying-glass {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.32 11.32l50.06 50.07a8 8 0 0 0 11.32-11.32zM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72z'/%3E%3C/svg%3E\");\n}\n\n/* Phosphor Varianten */\n.ph-regular {\n fill: none;\n stroke-width: 2%;\n}\n\n.ph-bold {\n fill: none;\n stroke-width: 3%;\n}\n\n.ph-fill {\n fill: currentcolor;\n stroke-width: 0%;\n}\n\n.ph-duotone {\n fill: currentcolor;\n opacity: 5000%;\n stroke-width: 2%;\n}\n\n/* Icon Sizes */\n.ph-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.ph-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.ph-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.ph-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.ph-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.ph-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.ph-top {\n vertical-align: var(--position-top);\n}\n\n.ph-middle {\n vertical-align: var(--position-middle);\n}\n\n.ph-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.ph-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/mdi.css */\n/**\n* Material Design Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Material Design Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n\n/* MDI als CSS Icon */\n.mdi,\n.mdi-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* MDI Icons */\n.mdi-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E\");\n}\n\n.mdi-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E\");\n}\n\n.mdi-close {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E\");\n}\n\n.mdi-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E\");\n}\n\n/* MDI Varianten */\n.mdi-outline {\n fill: none;\n stroke-width: 2%;\n}\n\n.mdi-filled {\n fill: currentcolor;\n stroke-width: 0%;\n}\n\n.mdi-round {\n fill: none;\n stroke-width: 1.5;\n}\n\n.mdi-sharp {\n fill: none;\n stroke-width: 2%;\n}\n\n/* Icon Sizes */\n.mdi-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.mdi-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.mdi-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.mdi-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.mdi-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.mdi-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.mdi-top {\n vertical-align: var(--position-top);\n}\n\n.mdi-middle {\n vertical-align: var(--position-middle);\n}\n\n.mdi-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.mdi-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/lucide.css */\n/**\n* Lucide Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Lucide Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.lucide,\n.lucide-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Lucide Icons */\n.lu-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E\");\n}\n\n.lu-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E\");\n}\n\n.lu-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E\");\n}\n\n.lu-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E\");\n}\n\n/* Icon Sizes */\n.lucide-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.lucide-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.lucide-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.lucide-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.lucide-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.lucide-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.lucide-top {\n vertical-align: var(--position-top);\n}\n\n.lucide-middle {\n vertical-align: var(--position-middle);\n}\n\n.lucide-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.lucide-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/index.css */\n/*\n* Icon System\n*\n* Hauptdatei für das Icon-System der UI-Bibliothek.\n* Definiert das Basissystem für Icons und ihre Varianten.\n*/\n\n/*\n* Modulare Icon-Imports\n* Aktuell auskommentiert, da die Dateien noch nicht existieren.\n* Sollten mit expliziten Layer-Angaben versehen werden.\n*/\n\n/* Geplante Icon-Module (derzeit nicht implementiert) */\n\n/* @import url('./basic/basic-icons.css') layer(icons.basic); */\n\n/* @import url('./brands/brand-icons.css') layer(icons.brands); */\n\n/* @import url('./functional/functional-icons.css') layer(icons.functional); */\n\n/* @import url('./illustrations/illustration-icons.css') layer(icons.illustrations); */\n\n/**\n* Basis-Icon-System\n* Definiert Größen, Farben und Grundstile für alle Icons\n*/\n@layer icons {\n/* Basis-Icon-Klasse */\n .icon {\n display: var(--display-inline-block);\n flex-shrink: 0;\n height: var(--icon-size-md);\n vertical-align: var(--position-middle);\n width: var(--icon-size-md);\n }\n\n/* Icon-Größenvarianten */\n .icon-xs {\n height: var(--icon-size-xs);\n width: var(--icon-size-xs);\n }\n\n .icon-sm {\n height: var(--icon-size-sm);\n width: var(--icon-size-sm);\n }\n\n .icon-md {\n height: var(--icon-size-md);\n width: var(--icon-size-md);\n }\n\n .icon-lg {\n height: var(--icon-size-lg);\n width: var(--icon-size-lg);\n }\n\n .icon-xl {\n height: var(--icon-size-xl);\n width: var(--icon-size-xl);\n }\n\n .icon-2xl {\n height: var(--icon-size-2xl);\n width: var(--icon-size-2xl);\n }\n\n .icon-3xl {\n height: var(--icon-size-3xl);\n width: var(--icon-size-3xl);\n }\n\n/* Icon-Farbvarianten - entsprechen den globalen Farbvariablen */\n .icon-current { color: currentColor; }\n\n .icon-primary { color: var(--color-primary-500); }\n\n .icon-secondary { color: var(--color-secondary-500); }\n\n .icon-success { color: var(--color-success); }\n\n .icon-warning { color: var(--color-warning); }\n\n .icon-error { color: var(--color-error); }\n\n .icon-info { color: var(--color-info); }\n\n .icon-muted { color: var(--color-gray-400); }\n}\n\n/* Datei: icons/heroicons.css */\n/**\n* Heroicons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Heroicons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.heroicon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Icon Sizes */\n.heroicon-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.heroicon-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.heroicon-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.heroicon-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.heroicon-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.heroicon-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.heroicon-top {\n vertical-align: var(--position-top);\n}\n\n.heroicon-middle {\n vertical-align: var(--position-middle);\n}\n\n.heroicon-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.heroicon-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Heroicons */\n.hi,\n.hi-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n.hi-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E\");\n}\n\n.hi-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E\");\n}\n\n.hi-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E\");\n}\n\n.hi-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E\");\n}\n\n/* Icon Sizes */\n.hi-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.hi-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.hi-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.hi-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.hi-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.hi-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.hi-top {\n vertical-align: var(--position-top);\n}\n\n.hi-middle {\n vertical-align: var(--position-middle);\n}\n\n.hi-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.hi-spin {\n animation: spin 1s linear infinite;\n}\n\n\n/* Datei: icons/fontawesome.css */\n/**\n* Font Awesome Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Font Awesome Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Font Awesome als CSS Icon */\n.fa,\n.fa-icon {\n background-color: var(--icon-color, currentcolor);\n display: inline-block;\n height: 1em;\n mask-position: center;\n mask-repeat: no-repeat;\n mask-size: contain;\n vertical-align: -0.125em;\n width: 1em;\n}\n\n/* Font Awesome Icons */\n.fa-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.58-.29a16 16 0 0 0 15.69-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'/%3E%3C/svg%3E\");\n}\n\n.fa-bars {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z'/%3E%3C/svg%3E\");\n}\n\n.fa-times {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E\");\n}\n\n.fa-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E\");\n}\n\n/* Icon Sizes */\n.fa-xs {\n height: 0.75em;\n width: 0.75em;\n}\n\n.fa-sm {\n height: 0.875em;\n width: 0.875em;\n}\n\n.fa-lg {\n height: 1.25em;\n width: 1.25em;\n}\n\n.fa-xl {\n height: 1.5em;\n width: 1.5em;\n}\n\n.fa-2xl {\n height: 2em;\n width: 2em;\n}\n\n/* Icon Alignment */\n.fa-baseline {\n vertical-align: baseline;\n}\n\n.fa-top {\n vertical-align: top;\n}\n\n.fa-middle {\n vertical-align: middle;\n}\n\n.fa-bottom {\n vertical-align: bottom;\n}\n\n/* Icon Animation */\n.fa-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/feather.css */\n/**\n* Feather Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Feather Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.feather,\n.feather-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Icon Sizes */\n.feather-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.feather-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.feather-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.feather-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.feather-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.feather-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.feather-top {\n vertical-align: var(--position-top);\n}\n\n.feather-middle {\n vertical-align: var(--position-middle);\n}\n\n.feather-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.feather-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Feather Icons */\n.fe-home {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E\");\n}\n\n.fe-menu {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E\");\n}\n\n.fe-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E\");\n}\n\n.fe-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E\");\n}\n\n\n/* Datei: icons/bootstrap.css */\n/**\n* Bootstrap Icons CSS\n*\n* Diese Datei enthält die CSS-Klassen für die Bootstrap Icons.\n* Die Styles sind in @layer components organisiert.\n*/\n\n\n/* Base Icon */\n.bi,\n.bi-icon {\n background-color: currentcolor;\n display: var(--display-inline-block);\n height: var(--spacing-6);\n mask-position: var(--position-center);\n mask-repeat: var(--bg-no-repeat);\n mask-size: var(--position-100);\n vertical-align: var(--position-middle);\n width: var(--spacing-6);\n}\n\n/* Bootstrap Icons */\n.bi-house {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E\");\n}\n\n.bi-list {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E\");\n}\n\n.bi-x {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E\");\n}\n\n.bi-search {\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E\");\n}\n\n/* Icon Sizes */\n.bi-xs {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.bi-sm {\n height: var(--spacing-5);\n width: var(--spacing-5);\n}\n\n.bi-lg {\n height: var(--spacing-7);\n width: var(--spacing-7);\n}\n\n.bi-xl {\n height: var(--spacing-8);\n width: var(--spacing-8);\n}\n\n.bi-2xl {\n height: var(--spacing-10);\n width: var(--spacing-10);\n}\n\n/* Icon Alignment */\n.bi-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.bi-top {\n vertical-align: var(--position-top);\n}\n\n.bi-middle {\n vertical-align: var(--position-middle);\n}\n\n.bi-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Icon Animation */\n.bi-spin {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* Datei: icons/base.css */\n/**\n* Icon Basis-Styles\n*\n* Diese Datei enthält die grundlegenden Styles für alle Icons.\n* Die Styles sind in @layer icons organisiert.\n*\n* Verwendete Icon-Sets und deren Lizenzen:\n* - Heroicons (MIT) - https://heroicons.com\n* - Feather Icons (MIT) - https://feathericons.com\n* - Phosphor Icons (MIT) - https://phosphoricons.com\n* - Remix Icons (MIT) - https://remixicon.com\n* - Bootstrap Icons (MIT) - https://icons.getbootstrap.com\n*/\n\n\n/* Basis Icon Styles */\n.icon {\n display: var(--display-inline-block);\n fill: currentcolor;\n height: var(--icon-size-relative-md);\n stroke: currentcolor;\n stroke-width: 0%;\n vertical-align: var(--position-middle);\n width: var(--icon-size-relative-md);\n}\n\n/* Größenvarianten */\n.icon-xs {\n height: var(--icon-size-relative-xs);\n width: var(--icon-size-relative-xs);\n}\n\n.icon-sm {\n height: var(--icon-size-relative-sm);\n width: var(--icon-size-relative-sm);\n}\n\n.icon-lg {\n height: var(--icon-size-relative-lg);\n width: var(--icon-size-relative-lg);\n}\n\n.icon-xl {\n height: var(--icon-size-relative-xl);\n width: var(--icon-size-relative-xl);\n}\n\n.icon-2xl {\n height: var(--icon-size-relative-2xl);\n width: var(--icon-size-relative-2xl);\n}\n\n/* Ausrichtung */\n.icon-baseline {\n vertical-align: var(--position-baseline);\n}\n\n.icon-top {\n vertical-align: var(--position-top);\n}\n\n.icon-middle {\n vertical-align: var(--position-middle);\n}\n\n.icon-bottom {\n vertical-align: var(--position-bottom);\n}\n\n/* Animation */\n.icon-spin {\n animation: icon-spin var(--icon-animation-duration-slow) infinite var(--icon-animation-timing);\n}\n\n@keyframes icon-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n"],"names":[]}