/* ==========================================================================
   Runnie – das Maskottchen (seit 2.35.0, inc/runnie.php)
   Wird nur geladen, wo Runnie steht. Farben ausschließlich aus den
   Variablen in style.css, keine Farbe im Markup.

   Feste Regel aus dem Runnie-Skill: Runnie steht auf Weiß – weißer Rahmen,
   2 px schwarze Kontur, Radius 16 px, gelber Bodenstreifen (7 % Höhe).
   Die Figur ist schwarz-weiß und braucht diesen Kontrast auf Gelb, Schwarz
   und Rot. Seitenverhältnis der Figur 1230 : 2060.
   ========================================================================== */

/* --- Rahmen ------------------------------------------------------------ */
.rn-rahmen,
.rn-figur,
.rn-lotse__knopf{
  position:relative;display:block;flex:none;overflow:hidden;
  background:var(--white);border:2px solid var(--asphalt);border-radius:16px;
}
.rn-rahmen::after,
.rn-figur::after,
.rn-lotse__knopf::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:7%;
  background:var(--signal);border-top:2px solid var(--asphalt);
}
.rn-rahmen img{
  position:relative;z-index:1;display:block;width:100%;height:100%;
  object-fit:contain;padding:6% 6% 9%;
}
.rn-rahmen{aspect-ratio:1;}

/* --- Sprechblase ------------------------------------------------------- */
.rn-blase{
  position:relative;background:var(--white);color:var(--asphalt);
  border:2px solid var(--asphalt);border-radius:16px;
  padding:.9rem 1.05rem .85rem;max-width:22rem;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
/* Zipfel nach links, zur Figur hin */
.rn-blase::before{
  content:"";position:absolute;left:-11px;top:1.4rem;width:18px;height:18px;
  background:var(--white);border-left:2px solid var(--asphalt);border-bottom:2px solid var(--asphalt);
  transform:rotate(45deg);
}
/* Doppelte Klasse plus Element: schlägt „.finale p“ (weiße Schrift auf Rot),
   sonst stünde im roten Abschluss weißer Text in der weißen Blase. */
.rn-blase p.rn-blase__k,
.rn-blase p.rn-blase__t{margin:0;}
.rn-blase p.rn-blase__k{
  color:var(--asphalt);font-weight:900;font-size:1.15rem;line-height:1.15;letter-spacing:-.01em;
}
.rn-blase p.rn-blase__k{margin-bottom:.3rem;}
.rn-blase p.rn-blase__t{font-size:.95rem;line-height:1.45;color:#2a2a2a;max-width:none;}
.rn-blase__knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}

.rn-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font:inherit;font-weight:800;font-size:.85rem;line-height:1.2;
  color:var(--asphalt);background:var(--white);
  border:2px solid var(--asphalt);border-radius:10px;padding:.45rem .75rem;
  text-decoration:none;cursor:pointer;
}
.rn-mini:hover{background:var(--signal);}
.rn-mini--gelb{background:var(--signal);}
.rn-mini--gelb:hover{background:var(--white);}
.rn-mini:focus-visible,.rn-figur:focus-visible,.rn-lotse__knopf:focus-visible,.rn-lotse__zu:focus-visible{
  outline:3px solid var(--signal);outline-offset:3px;
}

/* --- R1 Hero ----------------------------------------------------------- */
/* Das Raster ist der Bezugsrahmen: Ein absolut gesetztes Kind mit
   grid-area bekommt den Bereich „shot“ als Rahmen – Runnie sitzt so
   immer auf der linken unteren Ecke des Fotos, egal wie hoch es ist. */
.hero__grid--runnie{position:relative;}
.hero__runnie{
  grid-area:shot;position:absolute;z-index:3;
  left:-3.25rem;bottom:1.25rem;
  display:flex;align-items:flex-end;gap:.85rem;
  max-width:calc(100% + 3.25rem);pointer-events:none;
}
.hero__runnie > *{pointer-events:auto;}
.rn-figur{
  width:clamp(150px,13vw,200px);aspect-ratio:1230/2060;padding:0;cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,.55);
}
.rn-figur svg{position:relative;z-index:1;display:block;width:100%;height:100%;}
.rn-blase--hero{margin-bottom:3.5rem;max-width:17.5rem;}
.rn-blase--hero::before{top:auto;bottom:1.6rem;}

@media (max-width:1180px){
  .hero__runnie{left:-1.5rem;}
}
@media (max-width:900px){
  /* Handy und Tablet: eigene Zeile unter dem Foto, leicht hineingeschoben. */
  .hero__grid--runnie{grid-template-areas:"shot" "runnie" "text" "card";}
  .hero__runnie{
    grid-area:runnie;position:relative;left:auto;bottom:auto;
    margin-top:-4.5rem;padding-left:.6rem;max-width:none;
  }
  .rn-figur{width:118px;}
  .rn-blase--hero{flex:1;margin-bottom:1.5rem;max-width:none;}
}
@media (max-width:420px){
  .rn-figur{width:100px;}
  .rn-blase p.rn-blase__k{font-size:1.02rem;}
  .rn-blase p.rn-blase__t{font-size:.9rem;}
}

/* --- R2 / R4 Bänder ---------------------------------------------------- */
.band--runnie .band__in{justify-content:flex-start;padding-block:1rem;}
.band--runnie .band__go{margin-left:auto;}
.rn-rahmen--band{width:clamp(84px,9vw,112px);}
@media (max-width:600px){
  .band--runnie .band__in{flex-wrap:nowrap;align-items:flex-start;}
  .band--runnie .band__txt{flex:1;}
  .band--runnie .band__go{display:none;}
  .rn-rahmen--band{width:78px;}
}

/* --- R3 / R5 / R6 Zeile aus Zeichnung und Sprechblase ------------------- */
.rn-zeile{
  display:flex;align-items:center;gap:1.1rem;
  margin:clamp(1.25rem,3vw,2rem) 0 clamp(1.5rem,3vw,2.25rem);
}
.rn-rahmen--zeile{width:clamp(130px,15vw,200px);}
.rn-zeile .rn-blase{flex:0 1 24rem;}
/* Auf hellem Grund braucht die weiße Blase keinen Schatten, nur die Kontur. */
.seg--paper .rn-blase{box-shadow:none;}
@media (max-width:560px){
  .rn-zeile{gap:.85rem;align-items:flex-end;}
  .rn-rahmen--zeile{width:112px;}
  .rn-zeile .rn-blase{flex:1;}
}

/* --- R7 Abschluss ------------------------------------------------------ */
.finale__in--runnie{justify-content:flex-start;column-gap:clamp(1.75rem,4vw,3.5rem);}
.finale__in--runnie > div:last-child{margin-left:auto;}
.finale__runnie{display:flex;flex-direction:column;align-items:center;}
.rn-rahmen--finale{width:clamp(150px,15vw,210px);}
.rn-blase--unten{margin-bottom:.9rem;max-width:15rem;}
.rn-blase--unten::before{left:50%;top:auto;bottom:-11px;margin-left:-9px;transform:rotate(-45deg);}
@media (max-width:760px){
  .finale__in--runnie > div:last-child{margin-left:0;}
  .finale__runnie{flex-direction:row-reverse;align-items:flex-end;justify-content:flex-end;gap:.85rem;width:100%;}
  .rn-rahmen--finale{width:120px;}
  .rn-blase--unten{flex:1;margin-bottom:1.6rem;max-width:none;}
  .rn-blase--unten::before{left:-11px;bottom:1.4rem;margin-left:0;transform:rotate(45deg);}
}

/* --- R8 Lotse unten links ---------------------------------------------- */
/* Links (seit 2.35.1): Rechts unten sitzt der Chat-Bot, der Lotse lag
   darunter. Das Bewertungs-Popup, das früher links saß, ist dafür raus.
   Figur links außen, Blase rechts daneben. */
.rn-lotse{
  position:fixed;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:59;
  display:flex;flex-direction:row-reverse;align-items:flex-end;gap:.6rem;
}
.rn-lotse__knopf{width:66px;aspect-ratio:1230/2060;padding:0;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.45);}
.rn-lotse__knopf img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;padding:5% 6% 9%;}
.rn-blase--lotse{width:min(17rem,calc(100vw - 7rem));margin-bottom:2rem;}
.rn-blase--lotse::before{top:auto;bottom:1.4rem;}
.rn-blase--lotse[hidden]{display:none;}
.rn-lotse__zu{
  position:absolute;top:.3rem;right:.4rem;border:0;background:none;cursor:pointer;
  font-size:1.35rem;line-height:1;color:var(--concrete);padding:.25rem .45rem;
}
.rn-lotse__zu:hover{color:var(--asphalt);}
.rn-lotse__wege{display:grid;gap:.4rem;margin-top:.7rem;}
.rn-lotse__wege .rn-mini{justify-content:flex-start;}
@media (max-width:560px){
  .rn-lotse{left:.65rem;bottom:calc(.65rem + env(safe-area-inset-bottom,0px));}
  .rn-lotse__knopf{width:50px;}
  .rn-blase--lotse{margin-bottom:1rem;width:min(17rem,calc(100vw - 9.5rem));} /* lässt rechts Platz für den Chat-Bot */
}
/* Auf dem Handy wartet der Lotse, bis der Kopf durchgescrollt ist (runnie.js). */
.rn-lotse{transition:opacity .3s ease,transform .3s ease;}
.rn-lotse--wartet{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;}
@media (prefers-reduced-motion:reduce){.rn-lotse{transition:none;}}
@media (prefers-reduced-motion:no-preference){
  .rn-lotse__knopf{animation:rn-hallo .9s ease-out 1.5s 2;}
}
@keyframes rn-hallo{30%{transform:translateY(-7px);}60%{transform:translateY(0);}}

@media print{.rn-lotse,.hero__runnie{display:none;}}