/* d-oop-beziehungen.css — Ergänzung zu kapitel/oop.css (Informatik LK, Kapitel 4.3 ff.)
   Angelegt 2026-09-26. Nach oop.css einbinden. Farben nur über var(--fach-*).
   - gerichtete Assoziation:   <div class="uml-assoc gerichtet"><span>kennt</span><span class="k1">1</span><span class="k2">*</span></div>
   - Vererbung (Baum):         <div class="uml-tree"><div class="uml-tree-in"><div class="uml">…Oberklasse…</div>
                                 <div class="uml-erbt" aria-hidden="true"></div>
                                 <div class="uml-kinder"><div class="uml-kind"><div class="uml">…</div></div> … </div></div></div>
   - Bewertungseinheiten:       <span class="be">4 BE</span> in .teilaufgaben-Einträgen, <p class="be-summe">… </p> */

/* gerichtete Assoziation: offene Pfeilspitze am Ende der Linie */
.uml-assoc.gerichtet::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;border-top:2px solid var(--fach-ink);border-right:2px solid var(--fach-ink);transform:translate(-1px,-50%) rotate(45deg);box-sizing:border-box}
.uml-assoc.links::after{right:auto;left:0;transform:translate(1px,-50%) rotate(-135deg)}

/* lange Beziehungszeilen (3+ Klassen): nicht umbrechen, sondern waagerecht scrollen */
.uml-row.lang{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;max-width:100%}
.uml-row.lang>.uml{flex:0 0 auto;min-width:0;font-size:12.5px}
.uml-row.lang .uml li{padding-right:2px}
.uml-row.lang>.uml-assoc{flex:1 0 74px;min-width:74px}

/* senkrecht gestapelt: Klasse – Linie – Klasse untereinander (.uml-row.stapel immer, sonst mobil) */
.uml-row.stapel{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
.uml-row.stapel .uml-assoc{flex:0 0 auto;width:100%;min-width:0;max-width:none;height:62px;background:none;margin:0}
.uml-row.stapel .uml-assoc::before{content:"";position:absolute;left:48px;top:0;bottom:0;width:2px;background:var(--fach-ink)}
.uml-row.stapel .uml-assoc>span{left:62px;bottom:auto;top:50%;transform:translateY(-50%)}
.uml-row.stapel .uml-assoc>.k1{top:3px;left:62px;transform:none}
.uml-row.stapel .uml-assoc>.k2{top:auto;bottom:3px;left:62px;right:auto;transform:none}
.uml-row.stapel .uml-assoc.gerichtet::after{right:auto;top:auto;left:43px;bottom:1px;transform:rotate(135deg)}
.uml-row.stapel .uml-assoc.gerichtet.links::after{top:1px;bottom:auto;transform:rotate(-45deg)}
@media(max-width:560px){
  .uml-row.lang{flex-wrap:wrap;overflow:visible}
  .uml-row.lang>.uml{flex:0 1 auto}
  .uml-row .uml-assoc{flex:0 0 100%;max-width:none;height:62px;background:none;margin:0}
  .uml-row .uml-assoc::before{content:"";position:absolute;left:48px;top:0;bottom:0;width:2px;background:var(--fach-ink)}
  .uml-row .uml-assoc>span{left:62px;bottom:auto;top:50%;transform:translateY(-50%)}
  .uml-row .uml-assoc>.k1{top:3px;left:62px;transform:none}
  .uml-row .uml-assoc>.k2{top:auto;bottom:3px;left:62px;right:auto;transform:none}
  .uml-row .uml-assoc.gerichtet::after{right:auto;top:auto;left:43px;bottom:1px;transform:rotate(135deg)}
  .uml-row .uml-assoc.gerichtet.links::after{top:1px;bottom:auto;transform:rotate(-45deg)}
}

/* Vererbung: Oberklasse oben, hohles Dreieck, Unterklassen darunter */
.uml-tree{overflow-x:auto;margin:14px 0;padding-bottom:4px;max-width:100%}
.uml-tree-in{display:inline-flex;flex-direction:column;align-items:center;min-width:max-content}
.uml-erbt{position:relative;width:24px;height:34px}
.uml-erbt::before{content:"";position:absolute;left:0;top:0;width:24px;height:17px;background:var(--fach-ink);clip-path:polygon(50% 0,100% 100%,0 100%)}
.uml-erbt::after{content:"";position:absolute;left:5px;top:5px;width:14px;height:9.5px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%)}
.uml-erbt>i{position:absolute;left:11px;top:17px;width:2px;height:17px;background:var(--fach-ink)}
.uml-kinder{display:flex;justify-content:center;align-items:flex-start}
.uml-kind{position:relative;padding:20px 12px 0;display:flex;justify-content:center}
.uml-kind::before{content:"";position:absolute;top:0;left:0;right:0;border-top:2px solid var(--fach-ink)}
.uml-kind:first-child::before{left:50%}
.uml-kind:last-child::before{right:50%}
.uml-kind:only-child::before{display:none}
.uml-kind::after{content:"";position:absolute;top:0;left:50%;height:20px;border-left:2px solid var(--fach-ink);margin-left:-1px}
.uml-tree .uml{min-width:190px}
.uml .kursiv{font-style:italic}
.uml li.neu{background:#fdf0c2;border-radius:3px}
@media(max-width:560px){
  /* mobil: Unterklassen untereinander an einer senkrechten Sammellinie */
  .uml-tree-in{display:flex;align-items:flex-start;min-width:0}
  .uml-erbt{margin-left:13px}
  .uml-kinder{flex-direction:column;align-items:stretch;margin-left:24px;border-left:2px solid var(--fach-ink)}
  .uml-kind{padding:12px 0 0 18px;justify-content:flex-start}
  .uml-kind::before,.uml-kind:first-child::before,.uml-kind:last-child::before{display:block;left:0;right:auto;top:30px;width:18px}
  .uml-kind::after{display:none}
  .uml-tree .uml{min-width:0;max-width:100%;font-size:12.5px}
  .uml-tree .uml li{white-space:normal;overflow-wrap:anywhere}
}
@media print{.uml-tree{overflow:visible}.uml-erbt::after{background:#fff}}

/* Bewertungseinheiten auf Abituraufgaben-Seiten */
.teilaufgaben .be{float:right;margin:2px 0 0 12px;padding:0 9px;border-radius:999px;background:#f4ede0;color:#2f2f2f;font:600 12.5px/1.8 Inter,sans-serif;white-space:nowrap}
.be-summe{margin:6px 0 0;text-align:right;font:600 13px/1.5 Inter,sans-serif;color:var(--ink-soft,#6b5f53)}
@media(max-width:560px){.teilaufgaben .be{float:none;display:inline-block;margin:4px 0 0}}
@media print{.teilaufgaben .be{border:1px solid #999;background:none}}

/* Klassendiagramme in Übersichtskarten (Zusammenfassung, Lernkarten): kompakter, linksbündig */
.formeln .uml-tree .uml,.formeln .uml-row .uml,.card-answer .uml{min-width:0;font-size:12px}
.formeln .uml ul,.card-answer .uml ul{text-align:left}
.formeln .uml-kind{padding-left:6px;padding-right:6px}

/* lange Quelltextzeilen in Aufgaben scrollen im Kasten statt die Seite zu verbreitern */
.aufgabe-body>.aufgabe-text,.aufgabe-text{min-width:0}
.aufgabe-text pre.java,.answer pre.java{max-width:100%}
/* Probe-Klausur: Tabellen mobil nicht breiter als die Seite */
.notentab .tab-wrap{overflow-x:auto;max-width:100%}
@media(max-width:560px){.notentab{padding:16px 12px}.notentab th,.notentab td{padding:8px 7px}.notentab .pkt-cell{width:auto}}