/* Der Button richtet sich in Höhe/Breite am Inhalt (Text) aus */
.button, .button-transparent, .button-rund, .button-schwarz, .button-orange {
    position: relative;
    display: inline-flex;         /* passt sich dem Inhalt an */
    align-items: center;          /* vertikal zentrieren */
    justify-content: center;      /* horizontal zentrieren */
    /*line-height: 1.2;   */
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
  }
  
  /* Text über dem Hintergrund */
  .button p, .button-transparent p, .button-rund p, .button-schwarz p, .button-orange p{
   
    position: relative;
    z-index: 2;
    margin: 0;
    margin-top: -10px;

    white-space: normal;   /* bricht automatisch */
  word-wrap: break-word; /* lange Wörter umbrechen */
  text-align: center;    /* hübsch mittig */
  line-height: 1.2;      /* kompakter für zwei Zeilen */
  }
  
  /* Hintergrund liegt darunter und füllt die gesamte Buttonfläche */
  .hintergrund {
    position: absolute;
    inset: 0;                     /* top/right/bottom/left: 0 */
    display: flex;
    align-items: stretch;         /* Höhe wie Buttonhöhe */
    z-index: 1;
    pointer-events: none;         /* Klicks gehen an den Button/Text */
  }
  
  /* linke/rechte Kappe behalten ihre natürliche Breite, volle Höhe */
  .hintergrund img.left,
  .hintergrund img.right {
    display: block;
    height: 100%;
    flex: 0 0 auto;
  }
  
  .hintergrund img.right {margin-left:-1px; margin-right:-1px;}
  .hintergrund img.left {margin-right:-1px; margin-left:-1px;}

  /* mittlerer Streifen füllt den Rest */
  .hintergrund .mid {
    flex: 1 1 auto;
    background-image: url("/media/buttons/button_orange-mid.svg");
    background-repeat: no-repeat;    /* kein Kacheln */
    background-position: center;
    background-size: 100% 100%;      /* STRETCH (Breite + Höhe) */
    /* Tipp: Wenn die Mitte nur horizontal skalieren soll:
       background-size: 100% auto;  (behält Seitenverhältnis, kann oben/unten “schneiden”) */
  }
  
  /* ---------------------------------------- */

  .button-transparent .hintergrund .mid{
    background-image: url("/media/button-transparent-mid.png");
  }

  .button-rund .hintergrund .mid{
    background-image: url("/media/buttons/button_rund_orange-mid.png");
  }

  .button-schwarz .hintergrund .mid{
    background-image: url("/media/button-schwarz-mid.png");
  }

  .button-schwarz .hintergrund{
    opacity: 0.3;
  }

  .button-orange .hintergrund .mid{
    background-image: url("/media/button-orange-mid.png");
  }

    /* ---------------------------------------- */

    .button-addon{
      width: fit-content;
      padding: 10px 40px;
      margin-top: -40px;
      margin-bottom: 10px;
  }