/* ==========================================================
   OSA · Profil (Magazin mit Tab-Block)
   Alle Klassen beginnen mit pf-, damit nichts mit index.css,
   postbit.css oder dem Rest kollidiert.
   Die Tabs laufen wie bisher rein per CSS (Radio-Buttons).
   ========================================================== */

.pf{
--pf-l1:#e1daf0;--pf-l2:#bfcce4;--pf-ink:#1b2a36;--pf-dk:#2d2a63;--pf-ac:#c8b5d3;--pf-navy:#1f3366;
--pf-muted:#5a6877;--pf-tit:#1f1d4f;
--pf-glass:rgba(255,255,255,.62);--pf-cell:rgba(255,255,255,.55);--pf-line:rgba(255,255,255,.8);
--pf-wrap:linear-gradient(180deg,#e8edf6,#dbe3f0);
--pf-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cpolyline points='110,215 160,150 205,178 250,100 292,132' fill='none' stroke='white' stroke-opacity='.45' stroke-width='1.4'/%3E%3Cg fill='white' fill-opacity='.5'%3E%3Ccircle cx='110' cy='215' r='2.6'/%3E%3Ccircle cx='160' cy='150' r='2.6'/%3E%3Ccircle cx='205' cy='178' r='2.6'/%3E%3Ccircle cx='250' cy='100' r='2.6'/%3E%3Ccircle cx='292' cy='132' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
--pf-stripes:repeating-linear-gradient(135deg,rgba(255,255,255,.38) 0 14px,rgba(255,255,255,.12) 14px 28px),linear-gradient(150deg,var(--pf-l1),var(--pf-l2));
--pf-starbg:var(--pf-stars) right bottom/cover no-repeat,linear-gradient(150deg,var(--pf-l1),var(--pf-l2));
--pf-disp:'Italiana','Times New Roman',serif;--pf-body:'Archivo',system-ui,sans-serif;
max-width:1100px;margin:0 auto;padding:14px;display:flex;flex-direction:column;gap:14px;
background:var(--pf-wrap);border:1px solid var(--pf-line);
color:var(--pf-ink);font:14px/1.6 var(--pf-body);box-sizing:border-box}
.pf *{box-sizing:border-box}
.pf img{max-width:100%;display:block}
.pf a{color:var(--pf-navy);text-decoration:none}
.pf a:hover{text-decoration:underline}

/* ---------------- Kopf ---------------- */
.pf-hero{background:var(--pf-glass);border:1px solid var(--pf-line);padding:14px;display:flex;flex-direction:column}
.pf-pinb{position:relative;height:300px;overflow:hidden;background:var(--pf-stripes);border:1px solid var(--pf-line)}
/* Board als Hintergrund (Loesung nach dem Pinterest-Tutorial: Widget-Elemente werden per Attribut-Selektor
   bereinigt, Footer-Button, Rahmen und Schatten entfallen). Kachelgroesse = data-pin-scale-width im Template,
   Breite = data-pin-board-width (darf breiter als der Kopf sein, wird dann automatisch auf die Containerbreite begrenzt). Die Kopfzeile des Widgets
   (ca. 78 px) wird per negativem top aus dem Bild geschoben, der Scrollbalken durch die Ueberbreite rechts. */
.pf-pinbg{position:absolute;left:0;top:-80px;width:calc(100% + 30px);height:480px;overflow:hidden!important;pointer-events:none;filter:saturate(.65);opacity:.9;box-shadow:none!important;border:none!important}
.pf-pinbg,.pf-pinbg *{box-sizing:content-box!important}
.pf-pinbg img{max-width:none!important}
.pf-pinbg [class$=_img]{display:block!important;box-shadow:none!important;border-radius:0!important;border:none!important}
.pf-pinbg [class$=_col]{padding:2px;margin-top:2px}
.pf-pinbg [class$=_button]{display:none!important}
.pf-pinbg [class$=_board]{box-shadow:none!important}
.pf-pinbg span span{overflow:hidden!important;border:none!important;box-shadow:none!important}
/* Schleier: tonfarbig oben, unten ausgeblendet in die Kartenfarbe, damit der Name lesbar bleibt */
.pf-pinb::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(225,218,240,.5) 0,rgba(200,181,211,.38) 45%,rgba(243,245,251,.88) 82%,#f3f5fb 100%)}
.pf-over{display:grid;grid-template-columns:240px minmax(0,1fr) auto;gap:20px;align-items:end;margin:-70px 20px 0;position:relative}
.pf-avatar{width:240px;height:200px;border:4px solid #e8edf6;background:var(--pf-starbg);box-shadow:0 6px 20px rgba(31,51,102,.2);overflow:hidden}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-nm{padding:14px 0 6px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pf-nmrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pf-mini{width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid var(--pf-line);flex:none;background:var(--pf-starbg)}
.pf-mini img{width:100%;height:100%;object-fit:cover}
.pf-name,.pf-name a{font:400 clamp(24px,2.8vw,36px)/1.05 var(--pf-disp);letter-spacing:.07em;text-transform:uppercase;color:var(--pf-tit);-webkit-text-stroke:.9px var(--pf-tit);paint-order:stroke fill}
.pf-name a:hover{text-decoration:none}
.pf-starlit{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--pf-dk)!important;border:1px solid var(--pf-line);background:var(--pf-glass);text-decoration:none!important}
.pf-title{font:800 11px var(--pf-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-dk)}
.pf-short{padding:12px 16px;background:var(--pf-glass);border:1px solid var(--pf-line);font-size:14px;text-align:justify;hyphens:none;max-width:70ch;max-height:140px;overflow:auto}
.pf-right{display:flex;flex-direction:column;gap:8px;align-items:stretch;padding-bottom:6px;width:240px}
.pf-gif{width:240px;height:100px;background:var(--pf-starbg);border:1px solid var(--pf-line);overflow:hidden}
.pf-gif img{width:100%;height:100%;object-fit:cover}
.pf-accounts{width:240px;max-width:100%;max-height:112px;overflow:auto;scrollbar-width:thin;font-size:12.5px;font-weight:600}
.pf-accounts .profil_accountswitcher_view{margin:0 0 6px;padding:0;background:none;font:800 10px var(--pf-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-dk);text-align:left}
.pf-accounts .profil_accountswitcher_view_account{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;justify-content:stretch;padding:0;margin:0;background:none;height:auto;overflow:visible}
.pf-accounts .profil_accountswitcher_view_account>*{margin:0!important;padding:0!important;min-width:0;width:auto!important}
.pf-accounts a{display:block}
.pf-accounts img{width:100%!important;height:auto!important;max-width:100%;display:block;margin:0!important}

/* ---------------- Nutzerdaten ---------------- */
.pf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}

/* ---------------- Bausteine ---------------- */
.pf-kv{display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--pf-cell);border:1px solid var(--pf-line);min-width:0}
.pf-k{display:flex;align-items:center;gap:6px;font:800 10px var(--pf-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-dk)}
.pf-k i{font-size:11px}
.pf-v{overflow-wrap:anywhere;font-weight:600}
.pf-sp .pf-k{color:var(--pf-navy)}
.pf-a1 .pf-grid>.pf-kv:last-child{grid-column:1/-1}
.pf-a1 .pf-grid{flex:none;gap:6px}
.pf-a1 .pf-kv{padding:6px 12px;gap:1px}
.pf-a1 .pf-k{font-size:9px}
.pf-a1 .pf-k i{font-size:10px}
.pf-a1 .pf-v{font-size:13px;line-height:1.35}
.pf-a1 .pf-quotes{flex:1;min-height:84px;overflow:auto;scrollbar-width:thin}
.pf-a1 .pf-quotes .inplayquotes_memberprofile{padding:12px 18px 12px 36px;min-height:100%;box-sizing:border-box}
.pf-a1 .pf-quotes .inplayquotes_memberprofile::before{font-size:44px;top:-4px}
.pf-a1 .pf-quotes .inplayquotes_memberprofile *{background:transparent!important}
.pf-a1 .pf-quotes .inplayquotes_memberprofile_bit_quote{font-size:14px;line-height:1.55}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}

.pf-blk{background:var(--pf-glass);border:1px solid var(--pf-line);padding:18px;display:flex;flex-direction:column;gap:12px}
.pf-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;min-height:54px;margin:-18px -18px 0;background:var(--pf-stripes)}
.pf-bar i{font-size:19px;color:var(--pf-dk)}
.pf-bar span{font:400 clamp(19px,2.2vw,24px)/1.1 var(--pf-disp);letter-spacing:.09em;text-transform:uppercase;color:var(--pf-tit);-webkit-text-stroke:.8px var(--pf-tit);paint-order:stroke fill}

/* Textkarten (Geschichte + Besonderheiten) */
.pf-tx{display:flex;flex-direction:column;gap:14px}
.pf-tc{padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-width:0;height:var(--pf-card-h,250px);background:var(--pf-glass);border:1px solid var(--pf-line)}
.pf-tc h4{margin:0;padding:0;background:none;border:0;text-align:left;font:800 11px var(--pf-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-dk);display:flex;align-items:center;gap:10px}
.pf-tc h4::after{content:"";flex:1;height:8px;background:var(--pf-stripes)}
.pf-text{flex:1;min-height:0;padding:10px;text-align:justify;hyphens:auto;word-break:break-word;white-space:pre-line;overflow:auto;font-size:13.5px;scrollbar-width:thin}

/* Zitate (Plugin Inplayzitate) */
.pf-quotes .inplayquotes_memberprofile{background:var(--pf-glass);border:1px solid var(--pf-line);padding:22px 26px;position:relative}
.pf-quotes .inplayquotes_memberprofile::before{content:"\201E";position:absolute;left:8px;top:-6px;font:400 64px var(--pf-disp);color:var(--pf-ac)}
.pf-quotes .inplayquotes_memberprofile-headline{font:800 10px var(--pf-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-muted);margin-bottom:8px}
.pf-quotes .inplayquotes_memberprofile_bit_quote{font:italic 400 16px/1.6 var(--pf-body);hyphens:none}
.pf-quotes .inplayquotes_memberprofile_bit_footer,.pf-quotes .inplayquotes_memberprofile-allquotes{margin-top:8px;font:800 10px var(--pf-body);letter-spacing:.12em;text-transform:uppercase;color:var(--pf-muted)}
.pf-quotes .smalltext{font-size:inherit}

/* Spotify */
.pf-spotify{padding:12px;background:var(--pf-glass);border:1px solid var(--pf-line);overflow:auto}
.pf-spotify iframe{width:100%!important;border:none!important;height:352px!important}

/* ---------------- Banner + Tab-Block ---------------- */
.pf-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:14px;align-items:start}
.pf-banner{width:260px;height:550px;flex:none;background:var(--pf-starbg);border:1px solid var(--pf-line);overflow:hidden}
.pf-banner img{width:100%;height:100%;object-fit:cover}

/* Tab-Bloecke (rein per CSS, Radio-Buttons): Block 1 mit Reitern rechts neben dem Banner und fester Hoehe,
   Block 2 ueber die volle Breite mit Reitern links. */
.pf-tb{display:flex;min-width:0;background:var(--pf-glass);border:1px solid var(--pf-line)}
.pf-tb>input{display:none}
.pf-tb-r{flex-direction:row-reverse;height:550px}
.pf-tb-l{flex-direction:row}
.pf-th{display:flex;flex-direction:column;width:68px;flex:none;background:var(--pf-stars) center bottom/cover no-repeat,linear-gradient(170deg,var(--pf-l1),var(--pf-l2))}
.pf-tb-r .pf-th{border-left:1px solid var(--pf-line)}
.pf-tb-l .pf-th{border-right:1px solid var(--pf-line)}
.pf-th label{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 0;cursor:pointer;color:var(--pf-dk);font:800 11px var(--pf-body)}
.pf-tb-r .pf-th label{border-right:4px solid transparent}
.pf-tb-l .pf-th label{border-left:4px solid transparent}
.pf-th label i{font-size:19px}
.pf-th label span{writing-mode:vertical-rl;letter-spacing:.2em;text-transform:uppercase}
.pf-tb-l .pf-th label span{transform:rotate(180deg)}
.pf-th label:hover{background:rgba(255,255,255,.35)}
#pf_a1:checked ~ .pf-th label[for="pf_a1"],
#pf_a2:checked ~ .pf-th label[for="pf_a2"],
#pf_a3:checked ~ .pf-th label[for="pf_a3"],
#pf_b1:checked ~ .pf-th label[for="pf_b1"],
#pf_b2:checked ~ .pf-th label[for="pf_b2"]{background:rgba(255,255,255,.55)}
#pf_a1:checked ~ .pf-th label[for="pf_a1"],
#pf_a2:checked ~ .pf-th label[for="pf_a2"],
#pf_a3:checked ~ .pf-th label[for="pf_a3"]{border-right-color:var(--pf-navy)}
#pf_b1:checked ~ .pf-th label[for="pf_b1"],
#pf_b2:checked ~ .pf-th label[for="pf_b2"]{border-left-color:var(--pf-navy)}

.pf-tp{display:none;flex:1;min-width:0;min-height:0;padding:18px;flex-direction:column;gap:12px;overflow:auto}
#pf_a1:checked ~ .pf-a1,
#pf_a2:checked ~ .pf-a2,
#pf_a3:checked ~ .pf-a3,
#pf_b1:checked ~ .pf-b1,
#pf_b2:checked ~ .pf-b2{display:flex}
.pf-tt{display:flex;align-items:center;gap:12px;font:400 clamp(19px,2.2vw,24px)/1.1 var(--pf-disp);letter-spacing:.09em;text-transform:uppercase;color:var(--pf-tit);-webkit-text-stroke:.8px var(--pf-tit)}
.pf-tt i{font-size:22px;color:var(--pf-dk);-webkit-text-stroke:0}
/* Block 2: Textkarten ueber die volle Breite in Spalten */
/* Kaestchen: alle gleich gross (--pf-card-h), Text scrollt darin. Zwei pro Reihe; ist die Zahl der Kaestchen
   ungerade, nimmt das letzte automatisch die ganze Breite ein (bei vier rutscht es wieder in die Zweierreihe). */
.pf-tb-l .pf-tx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-tb-l .pf-tx>.pf-tc:last-child:nth-child(odd){grid-column:1/-1}
.pf-tb-l .pf-tx-life{grid-template-columns:1fr}

/* Plugin-Ausgaben in den Tabs (Relations, Inplayscenes): bewusst allgemein gehalten */
.pf-tp table{width:100%;border-collapse:separate;border-spacing:0 6px}
.pf-tp td,.pf-tp th{padding:8px 12px;background:var(--pf-cell);border:1px solid var(--pf-line);font-weight:400}
.pf-tp .thead,.pf-tp thead td{font:800 10px var(--pf-body);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-dk);background:var(--pf-stripes)}
.pf-tp img{display:inline-block}
.pf-tp .button,.pf-tp input[type="submit"],.pf-tp button{font:800 11px var(--pf-body);letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;color:#fff;background:var(--pf-dk);border:0;cursor:pointer}


/* ---------------- Beziehungen (Plugin Beziehungssystem) ---------------- */
.pf-rel{display:flex;flex-direction:column;gap:18px}
.pf-rel-cat{display:flex;flex-direction:column;gap:10px}
.pf-rel-head{display:flex;align-items:center;gap:10px;font:800 11px var(--pf-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-dk)}
.pf-rel-head::after{content:"";flex:1;height:8px;background:var(--pf-stripes)}
.pf-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.pf-rel-card{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--pf-cell);border:1px solid var(--pf-line);min-width:0}
.pf-rel-top{display:flex;gap:14px;align-items:center;min-width:0}
.pf-rel-av{width:64px;height:64px;flex:none;border-radius:50%;overflow:hidden;border:2px solid var(--pf-line);background:var(--pf-starbg)}
.pf-rel-av img{width:100%!important;height:100%;object-fit:cover;display:block}
.pf-rel-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-rel-name{font:400 17px/1.2 var(--pf-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--pf-tit);-webkit-text-stroke:.5px var(--pf-tit);overflow-wrap:anywhere}
.pf-rel-name a{color:inherit}
.pf-rel-type{font:800 10px/1.4 var(--pf-body);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-navy)}
.pf-rel-facts{font-size:12px;color:var(--pf-muted)}
.pf-rel-desc{font-size:12.5px;text-align:justify;hyphens:auto;max-height:84px;overflow:auto}
.pf-rel-desc:empty{display:none}
.pf-rel-opt{display:flex;gap:8px;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--pf-line);font:600 11px var(--pf-body);letter-spacing:.08em;text-transform:uppercase}
.pf-rel-opt:empty{display:none}
.pf-rel-search{font-size:12px;-webkit-text-stroke:0}
.pf-rel-none{font-size:12.5px;color:var(--pf-muted);padding:4px 0}
/* Formulare zum Hinzufuegen: feste Pixelbreiten aus den Plugin-Templates ueberschreiben */
.pf-add{display:block;margin-top:14px}
.pf-add>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;box-sizing:border-box;padding:14px 18px;font:800 11px var(--pf-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-dk);background:var(--pf-stripes);border:1px solid var(--pf-line);cursor:pointer}
.pf-add>summary::-webkit-details-marker{display:none}
.pf-add>summary::before{content:"+";font:400 22px/1 var(--pf-disp);letter-spacing:0;transition:transform .2s}
.pf-add[open]>summary::before{transform:rotate(45deg)}
.pf-add>summary:hover{box-shadow:inset 0 -3px 0 var(--pf-navy)}
.pf-add-form{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--pf-cell);border:1px solid var(--pf-line);border-top:0}
.pf-add-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.pf-add-form input.textbox,.pf-add-form select,.pf-add-form textarea{font:13px var(--pf-body)!important;padding:9px 11px!important;width:100%!important;min-width:0!important;height:auto!important;margin:0!important;box-sizing:border-box;color:var(--pf-ink);background:rgba(255,255,255,.8);border:1px solid var(--pf-line)!important;border-radius:0}
.pf-add-form textarea{min-height:90px!important;resize:vertical}
.pf-add-form .button{align-self:flex-end;font:800 11px var(--pf-body);letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;color:#fff;background:var(--pf-dk);border:0;cursor:pointer}
.pf-conns table.tborder{width:100%}
.pf-conns input.textbox,.pf-conns textarea,.pf-conns select{width:100%!important;min-width:0!important;box-sizing:border-box;margin:0 0 6px!important;padding:8px 10px;font:13px var(--pf-body);background:rgba(255,255,255,.8);border:1px solid var(--pf-line)}


/* ---------------- Szenen (Plugin Inplayszenen-Manager) ---------------- */
.pf-sc{display:block}
.pf-sc-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-sc-side{display:flex;flex-direction:column;gap:12px}
.pf-sc-year{display:flex;flex-direction:column;gap:8px}
.pf-sc-yh{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--pf-stripes);font:400 22px/1 var(--pf-disp);letter-spacing:.1em;color:var(--pf-tit);-webkit-text-stroke:.8px var(--pf-tit)}
.pf-sc-month{display:flex;flex-direction:column;gap:6px}
.pf-sc-mh{font:800 10px var(--pf-body);letter-spacing:.18em;text-transform:uppercase;color:var(--pf-navy);padding:2px 4px;display:flex;align-items:center;gap:10px}
.pf-sc-mh::after{content:"";flex:1;height:1px;background:var(--pf-line)}
.pf-sc-list{display:flex;flex-direction:column;gap:6px}
.pf-sc-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px;background:var(--pf-cell);border:1px solid var(--pf-line)}
.pf-sc-date{font:400 22px/1 var(--pf-disp);color:var(--pf-dk);text-align:center;-webkit-text-stroke:.5px var(--pf-dk)}
.pf-sc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-sc-title,.pf-sc-title:hover{font:600 14px/1.3 var(--pf-body);letter-spacing:.06em;text-transform:uppercase;color:var(--pf-tit);text-decoration:none}
.pf-sc-partners{font-size:12px;color:var(--pf-muted);overflow-wrap:anywhere}
.pf-sc-partners a{color:inherit}
.pf-sc-status{font:800 10px var(--pf-body);letter-spacing:.14em;text-transform:uppercase;color:var(--pf-navy);padding:3px 9px;border:1px solid var(--pf-line);background:var(--pf-glass);white-space:nowrap}
.pf-sc-box{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--pf-glass);border:1px solid var(--pf-line)}
.pf-sc-head{font:800 11px var(--pf-body);letter-spacing:.16em;text-transform:uppercase;color:var(--pf-dk);display:flex;align-items:center;gap:10px}
.pf-sc-head::after{content:"";flex:1;height:8px;background:var(--pf-stripes)}
.pf-sc-none{font-size:12.5px;color:var(--pf-muted);padding:2px 0}

/* ---------------- Zwei Spalten ---------------- */
.pf-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.pf-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ---------------- Handy ---------------- */
@media (max-width:860px){
.pf-over{grid-template-columns:1fr;margin:-50px 12px 0}
.pf-right{width:240px}
.pf-accounts{text-align:left}
.pf-row,.pf-two{grid-template-columns:1fr}
.pf-banner{margin:0 auto;max-width:100%}
.pf-tb-r{height:520px}
.pf-tb-l .pf-tx{grid-template-columns:1fr}
.pf-th{width:52px}
.pf-pinb{height:200px}
}