:root {
  --banoo-orange: #c56a3a;
  --banoo-dark: #f2eee9;
  --banoo-light: #171310;

  --ss-bg: #0f0d0b;
  --ss-surface: #171310;
  --ss-surface-2: #1f1915;
  --ss-border: #26201b;
  --ss-text: #f2eee9;
  --ss-text-2: #c9c0b7;
  --ss-muted: #9a8f84;

  /* Affiliate image normalization */
  --af-img-bg: #ffffff;
  --af-img-radius: 10px;
}

.affiliate-box-inline {
    border: 1px solid var(--ss-border);
    border-radius: 7px;
    padding: 0.8rem 0.9rem;
    background: var(--ss-surface);
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    margin: 1.2rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow: hidden; /* clearfix */
  }

.affiliate-thumb {
    float: left;
    width: 105px;
    max-width: 33%;
    margin: 0 0.8rem 0.5rem 0;

    /* square, white, rounded */
    aspect-ratio: 1 / 1;
    background: var(--af-img-bg);
    border-radius: var(--af-img-radius);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
  }

.affiliate-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* no distortion */
  }

  .affiliate-label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--ss-surface-2);
    color: var(--ss-text);
    font-weight: 600;
    margin-bottom: 0.2rem;
  }

  .affiliate-headline {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ss-text);
    margin: 0.1rem 0 0.3rem;
  }

  .affiliate-text {
    margin: 0 0 0.5rem;
    color: var(--ss-text-2);
  }

  .affiliate-footer-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
  }

  .affiliate-hint-inline {
    font-size: 0.7rem;
    color: var(--ss-muted);
    flex: 1 1 auto;
    min-width: 140px;
  }

  .affiliate-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: var(--banoo-orange);
    color: #fff;
    box-shadow: 0 12px 28px rgba(197,106,58,.22);
    white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  }

  .affiliate-btn-inline:hover,
  .affiliate-btn-inline:focus-visible {
    background: #d97849;
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(197,106,58,.28);
  }

  .affiliate-btn-inline:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(252,133,80,0.35);
  }

  /* Auf ganz kleinen Screens Bild oben, Text darunter (besser lesbar) */
  @media (max-width: 480px) {
    .affiliate-thumb {
      float: none;
      width: 100%;
      max-width: 100%;
      margin: 0 0 0.6rem 0;
    }
  }


  .affiliate-teaser {
    display: block;
    width: 230px;
    max-width: 45%;
    font-size: 0.78rem;
    line-height: 1.4;
    background: var(--ss-surface);
    border-radius: 7px;
    border: 1px solid var(--ss-border);
    box-shadow: 0 12px 34px rgba(0,0,0,.40);
    padding: 0.45rem 0.55rem 0.5rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  .affiliate-teaser--right {
    float: right;
    margin: 0 0 0.6rem 0.8rem;
  }

  .affiliate-teaser--left {
    float: left;
    margin: 0 0.8rem 0.6rem 0;
  }

  /* Bild klein (ca. 2 cm) links, Text läuft außen und innen darum herum */
.affiliate-teaser-media {
    float: left;
    width: 72px;                 /* ~2 cm bei normaler DPI */
    max-width: 32%;
    margin: 0 0.45rem 0.25rem 0;

    /* square, white, rounded */
    aspect-ratio: 1 / 1;
    background: var(--af-img-bg);
    border-radius: var(--af-img-radius);
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
  }

.affiliate-teaser-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* no distortion */
  }

  .affiliate-teaser-label {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: var(--ss-surface-2);
    color: var(--ss-text);
    font-weight: 600;
    margin-bottom: 0.1rem;
  }

  .affiliate-teaser-title {
    margin: 0.1rem 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ss-text);
  }

  .affiliate-teaser-text {
    margin: 0 0 0.3rem;
    color: var(--ss-text-2);
  }

/*  .affiliate-teaser-footer {
    margin-top: 0.2rem;
    text-align: right;
  }*/

  .affiliate-teaser-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
  }

  .affiliate-teaser-hint-inline {
    font-size: 0.7rem;
    color: var(--ss-muted);
    flex: 1 1 auto;
    min-width: 140px;
  }

  .affiliate-teaser-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: var(--banoo-orange);
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(197,106,58,.22);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  }

  .affiliate-teaser-btn:hover,
  .affiliate-teaser-btn:focus-visible {
    background: #d97849;
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(252,133,80,0.55);
  }

  .affiliate-teaser-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(252,133,80,0.35);
  }

  /* clearfix, damit die Box um das float-Bild „herum“ läuft */
  .affiliate-teaser::after {
    content: "";
    display: block;
    clear: both;
  }

  /* Auf kleinen Screens: Box vollbreit unter dem Text, aber Bild weiter klein links mit Textumlauf */
@media (max-width: 600px) {
  .affiliate-teaser {
    float: none;
    max-width: 100%;
    width: 100%;
    margin: 0 0 0.9rem 0;
  }

  .affiliate-teaser--right,
  .affiliate-teaser--left {
    float: none;
  }
}

.affiliate-disclaimer {
  background: var(--ss-surface-2);
  border-left: 4px solid var(--banoo-orange);
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 1rem 0;
}



/* === StaticSky Affiliate Box (full width, 2/3 : 1/3, responsive) === */
.ss-affbox{
  position: relative;
  width: 100%;
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, var(--ss-surface) 0%, var(--ss-surface-2) 100%);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  margin: 1.3rem 0;
}

.ss-affbox__top{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: .5rem;
}

.ss-affbox__h2{
  margin: .15rem 0 .9rem;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ss-text);
}

.ss-affbox__grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  align-items: start;
}

.ss-affbox__left{
  color: var(--ss-text-2);
  font-size: .95rem;
  line-height: 1.55;
}

.ss-affbox__lead{
  margin: 0 0 .6rem;
}

.ss-affbox__bullets{
  margin: 0 0 .7rem 1.1rem;
  padding: 0;
  color: var(--ss-text-2);
}

.ss-affbox__bullets li{
  margin: .25rem 0;
}

.ss-affbox__hint{
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--ss-muted);
}

.ss-affbox__right{
  border-left: 1px solid rgba(255,255,255,.06);
  padding-left: 1rem;
}

.ss-affbox__media{
  border-radius: 10px;
  overflow: hidden;

  /* square, white, rounded */
  aspect-ratio: 1 / 1;
  background: var(--af-img-bg);

  border: 1px solid rgba(255,255,255,.06);

  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-affbox__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* no distortion */
}

.ss-affbox__actions{
  display: grid;
  gap: .45rem;
  margin-top: .65rem;
}

.ss-affbox__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
  background: var(--banoo-orange);
  color: #fff;
  box-shadow: 0 12px 28px rgba(197,106,58,.22);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}

.ss-affbox__btn:hover,
.ss-affbox__btn:focus-visible{
  background: #d97849;
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(197,106,58,.28);
}

.ss-affbox__btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(252,133,80,0.35);
}

.ss-affbox__link{
  display: inline-block;
  color: var(--ss-text);
  text-decoration: none;
  font-weight: 700;
  font-size: .85rem;
  padding: .15rem .1rem;
  opacity: .9;
}

.ss-affbox__link:hover,
.ss-affbox__link:focus-visible{
  text-decoration: underline;
  opacity: 1;
}


/* Autonomie-Klasse Badge (oben links) */
.ss-affbox__class{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ss-text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.ss-affbox__class-icon{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--ss-muted);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset;
}

/* Klassenfarben */
.ss-affbox__class--grundschutz .ss-affbox__class-icon{ background: #6b5f53; }
.ss-affbox__class--durchhalte .ss-affbox__class-icon{ background: #c56a3a; }
.ss-affbox__class--krisenfest .ss-affbox__class-icon{ background: #b08a3a; }
.ss-affbox__class--autark .ss-affbox__class-icon{ background: #5d8a6a; }

/* Mobile: Text oben, rechts (Bild/Links) unten */
@media (max-width: 720px){
  .ss-affbox__grid{
    grid-template-columns: 1fr;
  }
  .ss-affbox__right{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: .9rem;
    margin-top: .2rem;
  }
}





/* =========================================================
   Affiliate Box Layout (2/3 main + 1/3 side)
   ========================================================= */

.affiliate-box{
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2/3 + 1/3 */
  gap: 16px;

  padding: 16px;
  border-radius: 14px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

.affiliate-box__main{ min-width: 0; }
.affiliate-box__side{ min-width: 0; display:flex; flex-direction:column; gap:10px; }

/* Head (kicker + level) */
.affiliate-box__head{
  display:flex;
  align-items:left;
  /*justify-content: space-between;*/
  gap: 10px;
  margin-bottom: 10px;
}

.affiliate-box__kicker{
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.affiliate-box__title{
  margin: 0 0 8px 0;
  font: 800 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
}

.affiliate-box__text{
  margin: 0 0 12px 0;
  font: 500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.75);
}

.affiliate-box__facts{
  margin: 0 0 14px 0;
  padding-left: 18px;
  color: rgba(255,255,255,.72);
  font: 500 13px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.affiliate-box__facts strong{ color: rgba(255,255,255,.88); }

/* CTA */
.affiliate-box__cta{
  display:flex;
  align-items:center;
  gap: 12px;
}

.affiliate-box__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);

  font: 800 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.affiliate-box__button:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
}

.affiliate-box__hint{
  font: 400 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.45);
}

/* Image side */
.affiliate-box__imglink{
  display:block;

  /* square, white, rounded */
  aspect-ratio: 1 / 1;
  background: var(--af-img-bg);
  border-radius: 12px;
  overflow:hidden;

  border: 1px solid rgba(255,255,255,.10);

  display: flex;
  align-items: center;
  justify-content: center;
}

.affiliate-box__img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* no distortion */
  filter: saturate(.95) contrast(1.05);
}

.affiliate-box__meta{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.affiliate-box__brand{
  font: 700 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.70);
  margin-bottom: 4px;
}

.affiliate-box__model{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.55);
}

/* Orange CTA Button */
.affiliate-box__button{
  background: #ff7a1a;                 /* orange */
  border: 1px solid rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  box-shadow:
    0 10px 24px rgba(0,0,0,.45),
    0 0 18px rgba(255,122,26,.22);
  width: 100%;
}

.affiliate-box__button:hover{
  background: #ff8a34;                 /* slightly brighter on hover */
  box-shadow:
    0 12px 28px rgba(0,0,0,.50),
    0 0 22px rgba(255,122,26,.28);
}

.affiliate-box__button:active{
  transform: translateY(1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.45),
    0 0 14px rgba(255,122,26,.20);
}

/* Optional: focus ring (keyboard) */
.affiliate-box__button:focus-visible{
  outline: 2px solid rgba(255,122,26,.55);
  outline-offset: 2px;
}

/* =========================================================
   Preparedness LED (staticsky.world)
   Usage:
   <span class="af-prep" data-level="krisenfest">
     <span class="af-prep__dot"></span> Krisenfest
   </span>
   Levels: grundschutz | durchhaltefaehig | krisenfest | autark
   ========================================================= */

.af-prep{
  --af-led: #ff2b2b; /* default */
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  font: 700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  color: rgba(255,255,255,.82);
}

.af-prep__dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;

  background: radial-gradient(circle at 35% 35%,
    rgba(255,255,255,.85) 0 18%,
    color-mix(in srgb, var(--af-led) 88%, #000 12%) 19% 60%,
    color-mix(in srgb, var(--af-led) 55%, #000 45%) 61% 100%
  );

  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 4px rgba(0,0,0,.55),
    0 0 10px color-mix(in srgb, var(--af-led) 55%, transparent),
    0 0 22px color-mix(in srgb, var(--af-led) 28%, transparent);
}

.af-prep__dot::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  pointer-events: none;

  background: radial-gradient(circle,
    color-mix(in srgb, var(--af-led) 35%, transparent) 0 35%,
    transparent 70%
  );

  filter: blur(6px);
  opacity: .85;
}

/* Level -> color mapping (rot, orange, gelb, grün) */
.af-prep[data-level="grundschutz"]      { --af-led: #ff2b2b; }
.af-prep[data-level="durchhaltefaehig"] { --af-led: #ff7a1a; }
.af-prep[data-level="krisenfest"]       { --af-led: #ffcc2a; }
.af-prep[data-level="autark"]           { --af-led: #39ff7a; }

/* Optional: tint text slightly towards the LED color */
.af-prep--tinted{
  color: color-mix(in srgb, var(--af-led) 65%, rgba(255,255,255,.90));
}

/* Fallback for browsers without color-mix() */
@supports not (color-mix(in srgb, red 50%, transparent)){
  .af-prep__dot{
    background: radial-gradient(circle at 35% 35%,
      rgba(255,255,255,.85) 0 18%,
      var(--af-led) 19% 60%,
      rgba(0,0,0,.55) 61% 100%
    );
    box-shadow:
      inset 0 0 4px rgba(0,0,0,.55),
      0 0 12px rgba(255,255,255,.06);
  }
  .af-prep--tinted{ color: rgba(255,255,255,.85); }
}


/* Responsive: stack on small screens */
@media (max-width: 720px){
  .affiliate-box{ grid-template-columns: 1fr; }
  .affiliate-box__side{ order: -1; } /* image on top if you want */
}