/* Ausbaustufen Buttons */

.custom-button {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  margin-right: 10px;
}

.petrol-button {
  background-color: #0099aa;
}

.red-button {
  background-color: #e57373;
}

.yellow-button {
  background-color: #E8D25B;
}


/* ==========================================================================
   PLATTFORM-ADMONITIONS für hilfe.microtech.de
   
   Einheitliche Signalfarbe: Tiefes Violett #6A1B9A
   
   Nutzung:
     !!! shopware "Titel"        ← Shopware-Logo (Simple Icons, CC0)
     !!! ebay "Titel"            ← eBay-Wordmark (SuperTinyIcons, MIT)
     !!! amazon "Titel"          ← Amazon a + Smile (SuperTinyIcons, MIT)
     !!! kaufland "Titel"        ← Kaufland-Logo (Simple Icons, CC0)
     !!! shopify "Titel"         ← Shopify-Tüte (Simple Icons, CC0)
     !!! otto "Titel"            ← OTTO-Wordmark (Simple Icons, CC0)
   
   Fallback (alte Buchstaben-Icons):
     !!! shopware-old "Titel"    ← Einfaches S
     !!! amazon-old "Titel"      ← Einfaches A
     !!! shopify-old "Titel"     ← Einfaches Sp
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) SHOPWARE – Simple Icons (CC0), viewBox 24
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--shopware: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.9477 10.8913a.1735.1735 0 00-.061-.1178c-2.5032-2.078-4.5288-2.9261-6.9905-2.9261-1.3127 0-2.32.2638-2.9916.7827-.5822.4492-.8896 1.0772-.8896 1.812 0 2.0605 2.5184 3.0003 5.4358 4.0883 1.5023.5604 3.057 1.1404 4.483 1.9319a.1626.1626 0 00.0828.0218.187.187 0 00.0589-.011c.0458-.0174.085-.0523.1025-.1002.545-1.3955.822-2.8673.822-4.374a13.082 13.082 0 00-.0523-1.1076zm-4.81 10.4791c-1.0423-.785-2.5795-1.3824-4.2061-2.0125-1.9362-.7501-4.132-1.6027-5.7803-2.913-1.8665-1.4871-2.7757-3.3623-2.7757-5.7324 0-2.1281.883-3.9466 2.5533-5.2614 1.873-1.474 4.7119-2.2546 8.2071-2.2546.966 0 1.8883.0589 2.743.1766a.1696.1696 0 00.1788-.098.17.17 0 00-.0414-.2007C17.814 1.0924 14.9664.0022 12.001.0022c-3.2052 0-6.2186 1.2472-8.4862 3.5148C1.2494 5.7825 0 8.796 0 11.999c0 3.2051 1.2472 6.2185 3.5149 8.484 2.2654 2.2654 5.2788 3.5148 8.4862 3.5148 2.5903 0 5.0564-.8133 7.1344-2.3505a.1714.1714 0 00.0697-.1374.1735.1735 0 00-.0676-.1395Z"/></svg>');
}

.md-typeset .admonition.shopware,
.md-typeset details.shopware {
  border-color: rgb(106, 27, 154);
}

.md-typeset .shopware > .admonition-title,
.md-typeset .shopware > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .shopware > .admonition-title::before,
.md-typeset .shopware > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--shopware);
          mask-image: var(--md-admonition-icon--shopware);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* --------------------------------------------------------------------------
   2) EBAY – Wordmark (SuperTinyIcons, MIT, auf 24×24)
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--ebay: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 10.4c-.75 0-1.5.47-1.5 1.31h2.9c0-.8-.56-1.31-1.4-1.31zm.05-.66c1.92 0 2.44 1.27 2.44 2.06v.56H3.05c0 .85.6 1.46 1.5 1.46 1.12 0 1.31-.8 1.31-.8h1.08s-.14 1.41-2.3 1.41c-1.83 0-2.63-.84-2.63-2.3 0-1.83 1.17-2.39 2.58-2.39zM7.03 8v5.58l-.05.75h1.03l.05-.66s.47.8 1.83.8c1.4 0 2.34-.99 2.34-2.39 0-1.31-.84-2.34-2.34-2.34-1.45 0-1.83.75-1.83.75V8zm2.58 2.44c.98 0 1.55.7 1.55 1.64 0 1.03-.7 1.69-1.55 1.69-1.03 0-1.55-.8-1.55-1.64s.47-1.69 1.55-1.69zM15.89 12.19c-1.59 0-2.72 0-2.72.8 0 .47.33.84 1.08.84 1.83 0 1.64-1.64 1.64-1.64zm-1.17-2.44c1.03 0 2.2.28 2.2 1.69v2.9h-1.03l-.05-.66s-.42.8-1.92.8c-1.08 0-1.88-.56-1.88-1.5s.84-1.45 2.48-1.45h1.27s.19-1.13-1.27-1.13c-1.03 0-1.13.66-1.13.66h-1.03s.09-1.31 2.25-1.31zM16.31 9.94h1.17l1.73 3.38 1.69-3.38h1.08l-3.05 6.05h-1.13l.84-1.69z"/></svg>');
}

.md-typeset .admonition.ebay,
.md-typeset details.ebay {
  border-color: rgb(106, 27, 154);
}

.md-typeset .ebay > .admonition-title,
.md-typeset .ebay > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .ebay > .admonition-title::before,
.md-typeset .ebay > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--ebay);
          mask-image: var(--md-admonition-icon--ebay);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* --------------------------------------------------------------------------
   3) AMAZON – SuperTinyIcons (MIT), viewBox 512
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--amazon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M283 187c-62 2-121 19-121 81 0 43 26 64 61 64 31 0 51-12 68-30 8 11 10 16 24 27q5 3 10-1l31-27q4-4 0-10c-7-11-15-19-15-39v-64c0-27 2-52-18-70-17-16-38-20-62-21-53-1-88 28-93 62q-1 8 7 9l37 5c6 1 9-4 10-8 6-22 29-28 43-23 20 6 18 29 18 45m-36 105c-15 0-25-13-25-30 1-36 29-42 61-42v18c0 32-17 54-36 54m168 106c13-11 26-38 25-57 0-7-1-8-8-10-13-4-46-5-62 10-3 3-2 5 1 5 11-2 45-6 50 2 4 7-8 35-12 47-2 5 2 6 6 3M58 342c96 91 247 94 345 25 7-4 0-12-6-9A376 376 0 0162 337c-4-3-8 2-4 5"/></svg>');
}

.md-typeset .admonition.amazon,
.md-typeset details.amazon {
  border-color: rgb(106, 27, 154);
}

.md-typeset .amazon > .admonition-title,
.md-typeset .amazon > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .amazon > .admonition-title::before,
.md-typeset .amazon > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--amazon);
          mask-image: var(--md-admonition-icon--amazon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* --------------------------------------------------------------------------
   4) KAUFLAND – Simple Icons (CC0), viewBox 24
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--kaufland: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 24h24V0H0zm23.008-.989H.989V.989h22.022zM3.773 3.776h7.651v7.65H3.773zm8.801 0v7.652l7.653-7.652zm-8.801 8.8h7.651v7.651H3.773zm8.801-.004v7.652h7.653z"/></svg>');
}

.md-typeset .admonition.kaufland,
.md-typeset details.kaufland {
  border-color: rgb(106, 27, 154);
}

.md-typeset .kaufland > .admonition-title,
.md-typeset .kaufland > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .kaufland > .admonition-title::before,
.md-typeset .kaufland > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--kaufland);
          mask-image: var(--md-admonition-icon--kaufland);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* --------------------------------------------------------------------------
   5) SHOPIFY – Simple Icons (CC0), viewBox 24
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--shopify: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.337 23.979l7.216-1.561s-2.604-17.613-2.625-17.73c-.018-.116-.114-.192-.211-.192s-1.929-.136-1.929-.136-1.275-1.274-1.439-1.411c-.045-.037-.075-.057-.121-.074l-.914 21.104h.023zM11.71 11.305s-.81-.424-1.774-.424c-1.447 0-1.504.906-1.504 1.141 0 1.232 3.24 1.715 3.24 4.629 0 2.295-1.44 3.76-3.406 3.76-2.354 0-3.54-1.465-3.54-1.465l.646-2.086s1.245 1.066 2.28 1.066c.675 0 .975-.545.975-.932 0-1.619-2.654-1.694-2.654-4.359-.034-2.237 1.571-4.416 4.827-4.416 1.257 0 1.875.361 1.875.361l-.945 2.715-.02.01zM11.17.83c.136 0 .271.038.405.135-.984.465-2.064 1.639-2.508 3.992-.656.213-1.293.405-1.889.578C7.697 3.75 8.951.84 11.17.84V.83zm1.235 2.949v.135c-.754.232-1.583.484-2.394.736.466-1.777 1.333-2.645 2.085-2.971.193.501.309 1.176.309 2.1zm.539-2.234c.694.074 1.141.867 1.429 1.755-.349.114-.735.231-1.158.366v-.252c0-.752-.096-1.371-.271-1.871v.002zm2.992 1.289c-.02 0-.06.021-.078.021s-.289.075-.714.21c-.423-1.233-1.176-2.37-2.508-2.37h-.115C12.135.209 11.669 0 11.265 0 8.159 0 6.675 3.877 6.21 5.846c-1.194.365-2.063.636-2.16.674-.675.213-.694.232-.772.87-.075.462-1.83 14.063-1.83 14.063L15.009 24l.927-21.166z"/></svg>');
}

.md-typeset .admonition.shopify,
.md-typeset details.shopify {
  border-color: rgb(106, 27, 154);
}

.md-typeset .shopify > .admonition-title,
.md-typeset .shopify > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .shopify > .admonition-title::before,
.md-typeset .shopify > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--shopify);
          mask-image: var(--md-admonition-icon--shopify);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* --------------------------------------------------------------------------
   6) OTTO MARKET – Simple Icons (CC0), viewBox 24
   -------------------------------------------------------------------------- */

:root {
  --md-admonition-icon--otto: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.893 7.95c-1.195 0-2.168.37-2.855 1.132.097-.265.149-.588.156-.968h-4.191c-.914 0-1.437.402-1.796 1.437l.185-1.437H8.157c-.775 0-1.307.37-1.5 1.096-.524-.84-1.457-1.26-2.636-1.26C1.779 7.95.32 9.246.059 12.01l-.033.35c-.228 2.47 1.067 3.69 3.08 3.69 2.243 0 3.702-1.307 3.963-4.072l.033-.348c.059-.634.015-1.185-.114-1.655h1.899l-.545 4.66c-.108.925.392 1.35 1.23 1.35.512 0 .686-.034.882-.066l.675-5.944h2.21l-.544 4.66c-.11.925.392 1.35 1.23 1.35.511 0 .685-.034.881-.066l.675-5.944h1.089c.376 0 .68-.087.915-.26-.342.604-.566 1.366-.654 2.296l-.032.348c-.229 2.471 1.066 3.69 3.08 3.69 2.243 0 3.701-1.306 3.962-4.07l.033-.349c.229-2.46-1.067-3.68-3.08-3.68zM4.86 11.477l-.022.262c-.152 1.872-.762 2.449-1.513 2.449-.675 0-1.153-.457-1.055-1.676l.021-.272c.153-1.862.762-2.45 1.513-2.45.664 0 1.154.468 1.056 1.687zm16.873 0-.022.262c-.153 1.872-.762 2.449-1.513 2.449-.675 0-1.154-.457-1.056-1.676l.022-.272c.152-1.862.762-2.45 1.513-2.45.664 0 1.154.468 1.056 1.687z"/></svg>');
}

.md-typeset .admonition.otto,
.md-typeset details.otto {
  border-color: rgb(106, 27, 154);
}

.md-typeset .otto > .admonition-title,
.md-typeset .otto > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .otto > .admonition-title::before,
.md-typeset .otto > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--otto);
          mask-image: var(--md-admonition-icon--otto);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* ==========================================================================
   FALLBACK: Alte Buchstaben-Icons (shopware-old, amazon-old, shopify-old)
   ========================================================================== */

:root {
  --md-admonition-icon--shopware-old: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 4C5.5 4 4 5.2 4 7.2c0 2.1 1.6 2.9 3.8 3.6 1.5.5 2.2.9 2.2 1.7 0 .9-.8 1.5-2 1.5-1.4 0-2.5-.7-3.2-1.5L3 14.5C4 15.6 5.6 16.5 8 16.5c2.5 0 4.2-1.4 4.2-3.5 0-2.2-1.7-3-3.9-3.7C6.8 8.8 6 8.4 6 7.5c0-.7.6-1.3 1.6-1.3 1.1 0 2 .5 2.7 1.2l1.5-1.8C10.8 4.5 9.3 4 7.5 4z"/></svg>');
  --md-admonition-icon--amazon-old: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.5 4L4 14.5h2.8l.8-2h5.8l.8 2H17L12.5 4h-4zm2 2.4L12.4 11H8.6l1.9-4.6z"/></svg>');
  --md-admonition-icon--shopify-old: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.2 4C7 4 5.5 5.3 5.5 7.2c0 1.9 1.4 2.8 3.4 3.5 1.3.4 1.9.8 1.9 1.5 0 .8-.7 1.3-1.8 1.3-1.2 0-2.2-.6-2.9-1.3L4.5 14c.9 1 2.5 1.8 4.5 1.8 2.6 0 4-1.5 4-3.4 0-2-1.5-2.8-3.5-3.5-1.3-.4-1.8-.8-1.8-1.4 0-.6.5-1.1 1.4-1.1 1 0 1.8.4 2.5 1l1.4-1.7C12.1 4.5 10.7 4 9.2 4zm5 .3l-1.5 11.4h2.5l.5-3.7h1.8c2.2 0 3.8-1.4 3.8-3.9S19.6 4.3 17.3 4.3h-3.1zm2.7 2h.6c1 0 1.6.6 1.6 1.8s-.7 1.9-1.7 1.9h-1l.5-3.7z"/></svg>');
}

.md-typeset .admonition.shopware-old,
.md-typeset details.shopware-old,
.md-typeset .admonition.amazon-old,
.md-typeset details.amazon-old,
.md-typeset .admonition.shopify-old,
.md-typeset details.shopify-old {
  border-color: rgb(106, 27, 154);
}

.md-typeset .shopware-old > .admonition-title,
.md-typeset .shopware-old > summary,
.md-typeset .amazon-old > .admonition-title,
.md-typeset .amazon-old > summary,
.md-typeset .shopify-old > .admonition-title,
.md-typeset .shopify-old > summary {
  background-color: rgba(106, 27, 154, 0.1);
}

.md-typeset .shopware-old > .admonition-title::before,
.md-typeset .shopware-old > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--shopware-old);
          mask-image: var(--md-admonition-icon--shopware-old);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.md-typeset .amazon-old > .admonition-title::before,
.md-typeset .amazon-old > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--amazon-old);
          mask-image: var(--md-admonition-icon--amazon-old);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.md-typeset .shopify-old > .admonition-title::before,
.md-typeset .shopify-old > summary::before {
  background-color: rgb(106, 27, 154);
  -webkit-mask-image: var(--md-admonition-icon--shopify-old);
          mask-image: var(--md-admonition-icon--shopify-old);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}


/* ==========================================================================
   PLATTFORM-BUTTONS mit SVG-Icon
   
   Nutzung in Markdown:
     <span class="plattform-button shopware">Shopware</span>
   ========================================================================== */

.plattform-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.7em 0.2em 0.45em;
  border-radius: 3px;
  background-color: rgb(106, 27, 154);
  color: white !important;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none !important;
}

.plattform-button::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  background-color: white;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.plattform-button.shopware::before {
  -webkit-mask-image: var(--md-admonition-icon--shopware);
          mask-image: var(--md-admonition-icon--shopware);
}

.plattform-button.ebay::before {
  -webkit-mask-image: var(--md-admonition-icon--ebay);
          mask-image: var(--md-admonition-icon--ebay);
}

.plattform-button.amazon::before {
  -webkit-mask-image: var(--md-admonition-icon--amazon);
          mask-image: var(--md-admonition-icon--amazon);
}

.plattform-button.kaufland::before {
  -webkit-mask-image: var(--md-admonition-icon--kaufland);
          mask-image: var(--md-admonition-icon--kaufland);
}

.plattform-button.shopify::before {
  -webkit-mask-image: var(--md-admonition-icon--shopify);
          mask-image: var(--md-admonition-icon--shopify);
}

.plattform-button.otto::before {
  -webkit-mask-image: var(--md-admonition-icon--otto);
          mask-image: var(--md-admonition-icon--otto);
}

/* Allgemeine Badges ohne Plattform-Icon */
.plattform-button.alle-plattformen::before,
.plattform-button.alle-generationen::before {
  display: none;
}

.plattform-button.alle-generationen {
  background-color: #0099aa;
}


/* ==========================================================================
   DOWNLOAD-BUTTONS (ohne Icon)
   Ergänzt für: Serviceportal-Ablösung / Download-Übersicht

   Nutzung in Markdown:
     <span class="download-button microtech">Download microtech</span>
     <span class="download-button buhl">Download buhl Unternehmer</span>
     <span class="download-button beta">Download Beta</span>
   ========================================================================== */

.download-button {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.5em 1.1em;
  border-radius: 4px;
  color: white !important;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  vertical-align: middle;
  text-decoration: none !important;
}

.download-button.microtech {
  background-color: #0099aa;
}

.download-button.buhl {
  background-color: #003C78;
}

.download-button.beta {
  background-color: #0099aa;
  border: 1px dashed rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   PLATTFORM-ICONS IN CONTENT TABS
   
   Die Icons werden vollständig über extra.js als Inline-Elemente
   eingefügt. Kein CSS nötig – das JS liest die --md-admonition-icon--*
   Variablen aus und baut <span>-Elemente mit mask-image direkt ein.
   
   Markdown bleibt unverändert:
     === "Shopware"
         Inhalt...
   ========================================================================== */