/* =====================================================================
   weichenwerk.app – POSITIONEN DER BÜCHER, BLÄTTER UND FARBVERLÄUFE
   =====================================================================

   Hier steht für jedes Bild genau eine Regel (Computer) und darunter
   die Abweichung fürs Handy. Sonst nichts – du kannst alles gefahrlos ändern.

   SO FUNKTIONIERT ES
   - left / right   Abstand vom linken bzw. rechten Rand des Abschnitts.
                    Negative Werte schieben das Bild über den Rand hinaus.
   - top / bottom   Abstand von oben bzw. unten. Prozent = Anteil der Abschnittshöhe.
   - width          Größe des Bildes (die Höhe passt sich automatisch an).
   - rotate(…)      Drehung: positiv = im Uhrzeigersinn, negativ = dagegen.
   - opacity        Deckkraft von 0 (unsichtbar) bis 1 (voll).
   - filter: blur() Unschärfe für Tiefe, z. B. blur(1.5px). Nur bei Blättern verwenden.
   - display: none  Bild ausblenden.

   Pro Regel immer nur EINE Seite angeben (left ODER right, top ODER bottom).
   Wenn du von left auf right wechselst, setze left auf auto (oder lösch die Zeile).

   VORNE ODER HINTEN
   - Blätter und offene Bücher liegen immer HINTER Fenstern und Text.
   - Freigestellte Bücher (BGB, StPO) können mit der Klasse „vorne“ VOR das
     Chatfenster bzw. das Tablet gelegt werden. Das steht in index.html,
     z. B. {{frei:buch-bgb-gross:h-bgb-oben vorne}}.

   BILD TAUSCHEN, HINZUFÜGEN, ENTFERNEN (in quelle/index.html, danach neu bauen)
   - Blatt/Buch mit weißem Grund:  {{foto:NAME:KLASSE}}
   - freigestelltes Buch:          {{frei:NAME:KLASSE}}
   Verfügbare Bilder (Ordner quelle/bilder/):
     foto: buch-bgb, buch-stpo, buch-stpo-blau, buch-bgb-gross, buch-bgb-notiz, buch-offen,
           klausur, klausur-stift, gutachten, norm-stgb, fall3, blaetter, stift, marker
     frei: buch-bgb, buch-stpo, buch-bgb-gross

   SCHNELL AUF DEM SERVER ÄNDERN
   Diese Datei liegt auch unter /var/www/html/assets/bilder-positionen.css.
   Dort kannst du direkt Werte ändern und im Browser neu laden (ohne neu zu bauen).
   Übertrage die Änderung danach in quelle/bilder-positionen.css, sonst ist sie
   beim nächsten Bauen wieder weg.
   ===================================================================== */


/* =====================================================================
   1. HERO (ganz oben, rund um das ChatGPT-Fenster)
   ===================================================================== */

/* BGB groß, oben rechts, VOR dem Chatfenster */
.h-bgb-oben        { right: -8px; top: -54px; width: 350px; transform: rotate(-1deg); }

/* StPO, links am Rand über dem Gutachten-Blatt */
.h-stpo-links      { left: -64px;  top: 61%;  width: 178px; transform: rotate(-17deg); }

/* Gutachten-Blatt, links hinter der StPO */
.h-gutachten       { left: -76px;  top: 43%;  width: 300px; transform: rotate(-12deg); }

/* § 323 StGB, klein und unscharf oben in der Mitte */
.h-norm-oben       { left: 40%;    top: 26px; width: 104px; transform: rotate(16deg); opacity: .6; filter: blur(1.4px); }

/* Klausurblatt, rechts am Rand hinter dem Fenster */
.h-klausur-rechts  { right: -80px; top: 40%;  width: 200px; transform: rotate(-9deg); }

/* Offenes Buch, unten rechts */
.h-buch-offen      { right: 2%;    bottom: -56px; width: 420px; transform: rotate(-4deg); opacity: .95; }

/* Klausur mit Stift, unten rechts neben dem offenen Buch */
.h-klausur-stift   { right: 25%;   bottom: -70px; width: 170px; transform: rotate(10deg); opacity: .9; filter: blur(.6px); }

/* „Fall 3“-Notizen, unten zwischen Text und Fenster */
.h-fall3           { left: 38%;    bottom: 22px; width: 178px; transform: rotate(-11deg); }

@media (max-width: 1080px) {   /* Tablet: Fenster unter dem Text */
  .h-fall3, .h-norm-oben, .h-stpo-links, .h-gutachten { display: none; }
  .h-bgb-oben      { right: -40px; top: auto; bottom: 47%; width: 190px; transform: rotate(9deg); }
  .h-buch-offen    { width: 300px; }
}
@media (max-width: 760px) {    /* Handy: wenige Bilder, nichts über dem Text */
  /* Großes BGB auf dem Handy ausgeblendet, damit es das ChatGPT-Beispiel nicht verdeckt */
  .h-bgb-oben      { display: none; }
  .h-klausur-rechts{ display: none; }
  .h-buch-offen    { right: -36px; bottom: -36px; width: 180px; }
  .h-klausur-stift { right: auto; left: -34px; bottom: -44px; width: 120px; }
}


/* =====================================================================
   2. INTEGRATION („Einmal verbinden. Überall nutzen.“)
   ===================================================================== */

/* BGB, rechts oben, liegt über dem Klausurblatt */
.i-bgb             { right: -38px; top: 4%;   width: 205px; transform: rotate(-9deg); }

/* Klausurblatt, rechts unter dem BGB */
.i-klausur         { right: 100px; top: 30%;  width: 200px; transform: rotate(40deg); }

/* § 323 StGB, links unten, unscharf */
.i-norm            { left: -44px;  bottom: 4%; width: 170px; transform: rotate(-12deg); opacity: .55; filter: blur(1.6px); }

@media (max-width: 1080px) {   /* Tablet */
  .i-klausur       { right: -40px; top: 6%; width: 150px; transform: rotate(14deg); }
}
@media (max-width: 760px) {    /* Handy */
  .i-bgb           { right: -24px; top: 6px; width: 100px; }
  .i-klausur, .i-norm { display: none; }
}


/* =====================================================================
   3. FÜR STUDIERENDE (rund um das Tablet mit der Live-Vorschau)
   Bezugspunkt ist das Tablet: negative Werte ragen über dessen Rand hinaus.
   ===================================================================== */

/* StPO, oben rechts VOR der Tablet-Ecke (nur leicht überlappend) */
.s-stpo            { right: -56px; top: -84px; width: 164px; transform: rotate(-5deg); }

/* Gutachten-Blatt, oben links hinter dem Tablet */
.s-gutachten       { left: -192px;  top: -166px; width: 480px; transform: rotate(-13deg); }

/* „Fall 3“-Notizen, unten links hinter dem Tablet */
.s-fall3           { left: -366px;  bottom: -34px; width: 250px; transform: rotate(-24deg); }

@media (max-width: 1080px) {   /* Tablet: Tablet steht unter dem Text */
  .s-stpo          { right: -58px; top: -86px; width: 128px; }
  .s-gutachten     { left: -50px;  top: -60px; width: 220px; }
  .s-fall3         { display: none; }
}
@media (max-width: 760px) {    /* Handy */
  .s-stpo          { right: -16px; top: -46px; width: 90px; }
  .s-gutachten     { left: -28px;  top: -38px; width: 108px; }
}


/* =====================================================================
   4. ABSCHLUSS („Mach sichtbar, wie die KI deinen Fall löst.“)
   ===================================================================== */

/* BGB, unten rechts */
.e-bgb             { right: 12%;   bottom: -90px; width: 300px; transform: rotate(-10deg); }

/* Klausur mit Stift, oben rechts */
.e-klausur         { right: 3%;    top: 8%;   width: 210px; transform: rotate(8deg); opacity: .95; }

/* Lose Blätter, unten links, unscharf */
.e-blaetter        { left: -40px;  bottom: -40px; width: 300px; opacity: .7; filter: blur(1.6px); }

/* § 323 StGB, klein oben links, unscharf */
.e-norm            { left: 13%;    top: 12%;  width: 110px; transform: rotate(-14deg); opacity: .45; filter: blur(2px); }

@media (max-width: 1080px) {   /* Tablet */
  .e-bgb           { right: 2%;    bottom: -60px; width: 190px; }
  .e-klausur       { width: 170px; }
}
@media (max-width: 760px) {    /* Handy: Bilder nur an den Rändern, Knopf und Logo bleiben frei */
  .e-bgb           { right: -26px; bottom: -48px; width: 96px; }
  .e-klausur       { right: -42px; top: -34px; width: 104px; opacity: .75; }
  .e-blaetter      { left: -60px;  bottom: -40px; width: 170px; }
  .e-norm          { display: none; }
}


/* =====================================================================
   5. FARBVERLÄUFE (weiche Leuchtflächen hinter den Bildern)
   Farbe ändern: die rgba-Werte (Rot, Grün, Blau, Deckkraft).
   Violett = 139, 92, 246   Blau = 58, 85, 245   Pink = 236, 72, 153
   ===================================================================== */

.glow-hero-1 { right: 2%;  top: 4%;     width: 640px; height: 520px; background: radial-gradient(closest-side, rgba(139, 92, 246, .26), rgba(139, 92, 246, 0)); }
.glow-hero-2 { left: -6%;  top: 46%;    width: 460px; height: 420px; background: radial-gradient(closest-side, rgba(58, 85, 245, .18), rgba(58, 85, 245, 0)); }
.glow-hero-3 { right: 22%; bottom: -18%; width: 560px; height: 320px; background: radial-gradient(closest-side, rgba(236, 72, 153, .12), rgba(236, 72, 153, 0)); }
.glow-int    { right: 4%;  top: 6%;     width: 560px; height: 520px; background: radial-gradient(closest-side, rgba(139, 92, 246, .18), rgba(139, 92, 246, 0)); }
.glow-studi  { left: 4%;   top: 10%;    width: 640px; height: 560px; background: radial-gradient(closest-side, rgba(58, 85, 245, .2), rgba(139, 92, 246, .08) 60%, rgba(139, 92, 246, 0)); }
.glow-ende   { left: 50%;  top: 10%;    width: 760px; height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(139, 92, 246, .18), rgba(58, 85, 245, .08) 60%, rgba(58, 85, 245, 0)); }

@media (max-width: 760px) {
  .glow-hero-1 { right: -20%; width: 360px; height: 360px; }
}