/* ==============================================================
   bogen.css  ·  Besitzer: P0 Fundament  ·  K02 Bogen (Bindungs-Textur)
   Markup kommt NUR aus kh_bogen() / kh_bogen_feld() (includes/bogen.php):
     <figure class="bogen bogen--flach|gedreht|browser|sucher|karte" [data-dreh="-2"]>
       <div class="bogen-bild">[.bogen-leiste] <picture> [.bogen-sucher]</div>
       [<figcaption class="bogen-rand"> .ki-hinweis  .bogen-notiz </figcaption>]
     </figure>

   Material (Plan 4): weisser Rand, dahinter die Cyan-Platte um --versatz
   nach rechts unten verrutscht, die Magenta-Haarlinie um 8 px nach links
   oben - beide HINTER dem Blatt, sichtbar nur, wo sie herausstehen.
   - Platte = harter box-shadow (liegt automatisch hinter dem Blatt).
   - Haarlinie = zwei Pseudo-Kaesten NUR mit Rahmen, die komplett
     AUSSERHALB des Blatts liegen (::before oben, ::after links). Sie
     ueberdecken nie Bild oder Text und tragen keinen Hintergrund.
   - Platten tauschen je Buehne die Farbe (--platte/--haar, tokens.css).
   - Bewegung ueber translate/rotate, nie transform (Plan 9.1).
   ============================================================== */
.bogen{
  --rand: clamp(8px, .6vw, 10px);
  --platte-v: var(--versatz);
  position:relative;
  /* Platz fuer Haarlinie (8 px links/oben) und Platte (rechts/unten),
     damit ein Bogen nie ueber seinen Behaelter hinaus ragt. */
  margin:8px var(--versatz) var(--versatz) 8px;
  padding:var(--rand);
  background:var(--flaeche-licht);color:var(--text);
  border-radius:var(--r-bogen);
  box-shadow:var(--platte-v) var(--platte-v) 0 var(--platte), var(--sh-2);
  transition:translate var(--t-mittel) var(--ease),rotate var(--t-mittel) var(--ease),box-shadow var(--t-mittel) var(--ease);
}
.bogen::before,.bogen::after{
  content:"";position:absolute;left:-8px;top:-8px;pointer-events:none;
  border:0 solid var(--haar);
}
/* oben: Linie ueber die ganze Breite + 8-px-Stummel rechts */
.bogen::before{width:100%;height:8px;border-top-width:1px;border-right-width:1px}
/* links: Linie ueber die ganze Hoehe + 8-px-Stummel unten */
.bogen::after{width:8px;height:100%;border-left-width:1px;border-bottom-width:1px}

.bogen-bild{position:relative;overflow:hidden;border-radius:calc(var(--r-bogen) - 3px)}
.bogen-bild picture{display:block}
.bogen-bild img{width:100%;height:auto;display:block}

/* Angabe auf dem Rand - nie ueber dem Bild (Plan 12.1) */
.bogen-rand{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.2rem .9rem;padding:.55rem .15rem .1rem;margin:0;
}
.bogen-rand .ki-hinweis{font-family:var(--schrift-mono);font-size:.875rem;line-height:1.35;color:var(--text)}
.bogen-notiz{font-family:var(--schrift-lauf);font-size:.875rem;line-height:1.4;color:var(--muted)}

/* ---- Drehung (nur Hero-Stapel und Stimmen), Stufen aus kh_bogen() ---- */
.bogen[data-dreh="-3"]{rotate:-3deg}
.bogen[data-dreh="-2.5"]{rotate:-2.5deg}
.bogen[data-dreh="-2"]{rotate:-2deg}
.bogen[data-dreh="-1.5"]{rotate:-1.5deg}
.bogen[data-dreh="1.5"]{rotate:1.5deg}
.bogen[data-dreh="2"]{rotate:2deg}
.bogen[data-dreh="2.5"]{rotate:2.5deg}
.bogen[data-dreh="3"]{rotate:3deg}

/* ---- Variante Browser: Fensterleiste ueber dem Bildschirmfoto ------ */
.bogen-leiste{
  display:flex;align-items:center;gap:.35rem;min-height:2rem;padding:.35rem .6rem;
  background:var(--schild);color:var(--flaeche-licht);
  font-family:var(--schrift-mono);font-size:.875rem;line-height:1.2;
}
.bogen-leiste i{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:var(--muted)}
.bogen-leiste i:first-child{background:var(--magenta)}
.bogen-url{margin-left:.45rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* fix2 (QA): In schmalen Boegen (768 px, /referenzen mobil) wurde die Adresse
   abgeschnitten - genau der Beleg „echte, laufende Seite“. Jetzt enger gesetzt
   und notfalls zweizeilig (Umbruch an beliebiger Stelle), 14 px bleiben. */
.bogen-leiste{gap:.25rem}
.bogen-leiste i{width:.45rem;height:.45rem}
.bogen-url{
  margin-left:.3rem;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
}

/* ---- Variante Sucher: Kamerasucher-Ecken ueber dem Standbild -------- */
.bogen-sucher{
  position:absolute;inset:clamp(10px,5%,20px);pointer-events:none;
  --l: clamp(14px, 12%, 28px);
  background:
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) left  top    / var(--l) 2px no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) left  top    / 2px var(--l) no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) right top    / var(--l) 2px no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) right top    / 2px var(--l) no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) left  bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) left  bottom / 2px var(--l) no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) right bottom / var(--l) 2px no-repeat,
    linear-gradient(var(--flaeche-licht),var(--flaeche-licht)) right bottom / 2px var(--l) no-repeat;
}

/* ---- Variante Karte: Bogen als Karte (Referenzen, Bento) ----------- */
.bogen--karte{container-type:inline-size}
.bogen--karte .bogen-rand{padding:.7rem .3rem .25rem}

/* ---- Zeigen (nur Maus): richtet sich gerade, hebt sich 4 px,
        Platte +2 px. Touch und reduzierte Bewegung: nichts. ---------- */
@media (hover:hover) and (pointer:fine){
  .bogen:hover{
    rotate:0deg;translate:0 -4px;
    --platte-v: calc(var(--versatz) + 2px);
  }
}

/* ---- Zweiter axe-Lauf ohne Deko (Plan 15) --------------------------- */
.ohne-deko .bogen::before,.ohne-deko .bogen::after,.ohne-deko .bogen-sucher{display:none}