.SMWScontainer {
    margin: 0.5rem auto 3rem auto;
    padding: 0 0.1rem;
  }

  .master-card {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    border-radius: 12px;
    overflow: hidden;
  }

a {
  color: #6b4226;
}
hr {
  border: 2px dashed brown;
}
.master-card-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background-color: #d2691e;
color: #6b4226;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
font-family: 'Georgia', serif;
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: bold;
padding: 0.5rem 1rem;
text-align: center; /* für Fallback, falls Flex wirkt */
}

/* linkes und rechtes Bild klein halten und nicht das Layout sprengen */
.master-card-header > img {
width: 100px;
height: 100px;
object-fit: contain;
flex: 0 0 auto;
}

/* mittlerer Bereich als flex-Container für Titel + Buttons */
.master-card-header .header-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
flex: 1 1 auto; /* nimmt verbleibenden Platz ein */
min-width: 0; /* wichtig damit Text bei schmalen Bildschirmen umbrechen kann */
}

/* Link-Styling im Header */
.master-card-header a {
color: inherit;
text-decoration: none;
background: transparent;
}

/* Button als sekundäres Element */

.master-card-header .btn {
display: inline-block;
margin-top: 0.25rem;
padding: 0.25rem 0.6rem;
font-size: 0.5em;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.15);
background: rgba(255,255,255,0.08);
color: white;
}

.subheader {
  //font-size: 0.9rem;
}

/* Responsive Anpassung: bei sehr schmalen Bildschirmen Icons ausblenden oder kleiner machen */
@media (max-width: 420px) {
.master-card-header > img { width: 36px; height: 36px; }
.master-card-header .btn { font-size: 0.75em; padding: 0.2rem 0.5rem; }
}

  .master-card-body {
    background-color: #fffaf0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 0.5rem;
    width: 100%;
  }


  .entry {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .entry span {
    overflow-wrap: anywhere;
  }
  .code {
    background-color: #d2691e;
    color: #fff;
    padding: 0.35rem 0.15rem;
    border-radius: 0.35rem;
    font-weight: bold;
    flex-shrink: 0;
    min-width: 35px;
    text-align: center;
    font-size: clamp(0.3rem, 2.5vw, 1.1rem);
  }

  .destille {
    flex: 1;
    overflow-wrap: break-word;
    font-size: clamp(0.2rem, 3vw, 1.25rem);
    line-height: 1.3;
  }

  .btn2 {
    display: inline-block;
    background-color: #d2691e;
    color: white;
    padding: 0.5rem 0.25rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s;
  }
  .btn:hover {
    background-color: #a0522d;
  }
  /* 1 Young & Spritely (light pink) */
  .flavor-1 { background-color: #FFE4EC; color: #222; }
  /* 2 Sweet, Fruity & Mellow (rosé) */
  .flavor-2 { background-color: #ff99cc; color: #222; }
  /* 3 Spicy & Sweet (magenta / purpur) */
  .flavor-3 { background-color: #ffe699; color: #222; }
  /* 4 Spicy & Dry (warm sand / creme) */
  .flavor-4 { background-color: #f4b084; color: #222; }
  /* 5 Deep, Rich & Dried Fruits (golden brown / toffee) */
  .flavor-5 { background-color: #bc7000; color: #fff; }
  /* 6 Old & Dignified (Bordeauxrot / tief dunkelrot) */
  .flavor-6 { background-color: #A0002D; color: #fff; }
  /* 7 Light & Delicate (helles Himmelblau) */
  .flavor-7 { background-color: #E0F7FA; color: #222; }
  /* 8 Juicy, Oak & Vanilla (Vanille-Holzton) */
  .flavor-8 { background-color: #5DADEC; color: #222; }
  /* 9 Oily & Coastal (tiefes Marineblau) */
  .flavor-9 { background-color: #00334E; color: #fff; }
  /* 10 Lightly Peated (frisches Mint-Grün) */
  .flavor-10 { background-color: #D0F0C0; color: #222; }
  /* 11 Peated (waldgrün) */
  .flavor-11 { background-color: #2E5630; color: #fff; }
  /* 12 Heavily Peated (tiefes Waldgrün / Moorgrün) */
  .flavor-12 { background-color: #0E3B2D; color: #fff; }

  .flavour12 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 250px));
    gap: 0.75rem;
  }

  .flavour12 .card12 {
    max-width: 250px;
    width: 100%;
    padding:10px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

  .flavor-1neu { background-color: #80bd4d; color: #fff; }
  .flavor-2neu { background-color: #f5a02b; color: #fff; }
  .flavor-3neu { background-color: #d41115; color: #fff; }
  .flavor-4neu { background-color: #ee7e8c; color: #fff; }
  .flavor-5neu { background-color: #007739; color: #fff; }
  .flavor-6neu { background-color: #006695; color: #fff; }
  .flavor-7neu { background-color: #ed6811; color: #fff; }
  .flavor-8neu { background-color: #8b2078; color: #fff; }

  .entry .flavor-content {
    //display: flex;
    //flex-direction: column;   /* title über desc */
    gap: 0.18rem;
    min-width: 0;             /* wichtig für korrektes Shrinking in flex-Grid */
    max-width:250px;
    //align-self: stretch;
  }
  /* Optik */
  .flavor-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.12;
    text-align: center;
    margin: 10px auto;
  }
  /* Beschreibung kleiner und dezenter (erbt Textfarbe von .flavor-N) */
  .flavor-desc {
    font-size: 0.75rem;
    opacity: 0.92;
    margin: 0;
    color: inherit;           /* wichtig: verwendet bereits gesetzte Farbe (weiß/dunkel) */
  }

      .container8{
        max-width:1200px;
        margin:0 auto;
      }


      /* --- GRID BASE --- */
      .grid8{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:14px;
        margin-top:18px;
      }

      .card8{
        padding:14px;
        border-radius:6px;
        color:#fff;
        min-height:240px;
        box-shadow:0 2px 6px rgba(0,0,0,0.08);
      }

      ul{
        margin:0;
        padding:0;
        list-style:none;
        columns:2;
        column-gap:5px;
      }

      li{
        margin:4px 0;
        font-size:14px;
      }

      /* --- FARBTHEMEN --- */
      .smoky{background:#84c57b}
      .toasted{background:#f7a23a}
      .dried{background:#d73b3b}
      .fragrant{background:#f28fa0}
      .bold{background:#1f7a3b}
      .coastal{background:#0b6b86}
      .sweet{background:#f2932b}
      .ripe{background:#7d2d72}


          /* Tablet: 2 Spalten */
          @media (max-width: 900px) {
            .grid8{
              grid-template-columns:repeat(2,1fr);
            }
            ul{
              columns:1;
            }
          }

          /* Smartphone: 1 Spalte */
          @media (max-width: 600px) {
            .grid8{
              grid-template-columns:1fr;
            }
          }
          /* Responsive Anpassung: bei sehr schmalen Bildschirmen Icons ausblenden oder kleiner machen */
          @media (max-width: 420px) {
          .master-card-header > img { width: 36px; height: 36px; }
          .master-card-header .btn { font-size: 0.75em; padding: 0.2rem 0.5rem; }
          }