/* IINA.ch – statisches Design nach Craft-Vorlage */
:root{
  --bgtop:#2A5DF6; --bgbot:#eef1f7; --card:#ffffff; --text:#1c1c1e; --muted:#6b6b70;
  --link:#2456d6; --line:#00000022; --cardlink:#357cb2; --gradA:#28bcbe; --gradB:#3935dd;
}
@media (prefers-color-scheme: dark){
  :root{ --bgbot:#101114; --card:#222222; --text:#f2f2f2; --muted:#9a9aa0;
         --link:#8ab4ff; --line:#ffffff2b; --gradA:#9ff6d1; --gradB:#72bdf5; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text); min-height:100vh; line-height:1.55; font-size:16px;
  background:linear-gradient(180deg,var(--bgtop) 0,var(--bgtop) 240px,var(--bgbot) 1300px) no-repeat var(--bgbot)}
.herologo{display:block; width:100%; max-width:640px; background:#fff; border-radius:14px;
  padding:20px 26px; margin:6px 0 18px}
/* Sticky-Topbar mit Breadcrumb */
.bar{position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:12px;
  padding:8px 14px; background:rgba(16,24,58,.92)}
.bar .brand img{height:34px; width:auto; border-radius:7px; background:#fff; padding:3px 6px; display:block}
.bar .crumbs{margin:0; font-size:.88em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .crumbs a{color:#fff; opacity:.8}
.bar .crumbs a.here{opacity:1; font-weight:600}
.bar .crumbs span{color:#ffffff99; margin:0 2px}
/* Mobile-Menue (Details-Dropdown) */
.menu{position:relative}
.menu summary{list-style:none; cursor:pointer; color:#fff; font-size:1.2em; padding:2px 9px; border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:rgba(255,255,255,.18)}
.mnav{position:absolute; left:0; top:130%; width:min(86vw,340px); max-height:72vh; overflow:auto;
  background:var(--card); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.45); padding:12px 14px}
/* Spaltenansicht wie Craft: Ahnenkette parallel scrollbar, aktuelle Spalte rechts angepinnt.
   row-reverse + umgekehrte DOM-Reihenfolge = Start-Scrollposition rechts, ohne JavaScript. */
.cols{display:flex; flex-direction:row-reverse; gap:0; overflow-x:auto;
  height:calc(100dvh - 50px); scrollbar-width:thin;
  /* aktuelle Spalte beim Laden mittig verankern (row-reverse: Start = rechts);
     Masse aus dem Craft-Original gemessen: Spalten je 840px, buendig */
  padding-right:max(8px, calc((100vw - min(840px, 97vw)) / 2))}
.cols.single{flex-direction:row; justify-content:center; padding-right:8px}
.col{flex:0 0 min(840px,97vw); min-width:0; overflow-y:auto; padding:0 42px 26px; scrollbar-width:thin}
.cols.single .col{flex:0 1 840px}
.parentcol{opacity:.94}
.backlink{display:inline-block; margin:8px 4px 16px; color:var(--muted); font-size:.92em}
.backlink:hover{color:var(--link); text-decoration:none}
.pagecard.active,.profilecard.active{outline:2px solid #4a86ff; outline-offset:1px}
@media (max-width:900px){
  .cols{display:block; height:auto; overflow:visible; padding:0 14px}
  .parentcol{display:none}
  .col{height:auto; overflow:visible}
}
.tree, .tree ul{list-style:none; margin:0; padding-left:14px; font-size:.9em; line-height:1.45}
.tree{padding-left:0}
.tree li{margin:1px 0}
.tree details{border:none; padding:0; margin:0; background:none}
.tree a{display:block; padding:4px 8px; border-radius:7px; color:var(--text); opacity:.92}
.tree a:hover{background:rgba(127,127,127,.16); text-decoration:none; opacity:1}
.tree a.cur{color:var(--link); font-weight:700; opacity:1; background:rgba(127,160,255,.12)}
.tree details>summary{list-style:none; position:relative; font-weight:400; cursor:default; padding:0}
.tree details>summary::-webkit-details-marker{display:none}
.tree details>summary::marker{content:""}
.tree details>summary::before{content:"›"; position:absolute; left:-11px; top:4px;
  color:var(--muted); cursor:pointer; transition:transform .15s; font-size:1.05em; line-height:1}
.tree details[open]>summary::before{transform:rotate(90deg)}
/* Referenten-Profilkarten */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; margin:14px 0}
.profilecard{display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:16px;
  border-radius:14px; background:rgba(127,127,127,.10); border:1px solid var(--line)}
.profilecard:hover{text-decoration:none; border-color:var(--link)}
.avatar{width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:center 22%}
.avatar-ph{width:58px; height:58px; border-radius:50%; display:inline-block;
  background:linear-gradient(135deg,var(--gradA),var(--gradB))}
.pname{font-weight:700; color:var(--text)}
.pline{font-size:.82em; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.card{background:var(--card); border-radius:16px; padding:36px 56px; margin:18px 0;
  box-shadow:0 0 0 1px rgba(249,249,249,.03), 0 8px 20px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08)}
.covercard{border-radius:8px; overflow:hidden; margin:18px 0;
  box-shadow:0 8px 20px rgba(0,0,0,.12)}
.covercard img{display:block; width:100%; height:auto; border-radius:0}
.pagecard,.profilecard,.filecard,.linkcard{transition:transform .2s cubic-bezier(.4,0,.2,1),
  box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s, filter .2s}
.pagecard:hover,.profilecard:hover{transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
h1{font-size:1.7em; line-height:1.25; margin:.2em 0 .6em}
h1.home{font-size:1.9em}
h2{font-size:1.35em; margin:1em 0 .4em}
h3{font-size:1.12em; margin:1em 0 .3em}
p{margin:.55em 0}
p.strong{font-weight:600}
p.caption{color:var(--muted); font-size:.88em}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.hl{color:var(--cl,inherit)}
.grad{--g1:var(--g1l,var(--gradA)); --g2:var(--g2l,var(--gradB));
  background:linear-gradient(90deg,var(--g1),var(--g2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
@media (prefers-color-scheme: dark){
  .hl{color:var(--cd,inherit)}
  .grad{--g1:var(--g1d,var(--gradA)); --g2:var(--g2d,var(--gradB))}
}
/* Seitenspezifisches Hintergrundbild (aus Craft pageStyleData, vererbt):
   fixierte Ebene, Inhalt "schwebt" darueber — wie im Craft-Original */
.backdrop{position:fixed; inset:0; z-index:-1; background-size:cover;
  background-position:center; background-repeat:no-repeat}
.backdrop::after{content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(248,250,255,.18),rgba(238,241,247,.40))}
@media (prefers-color-scheme: dark){
  .backdrop::after{background:linear-gradient(rgba(8,10,20,.32),rgba(8,10,20,.55))}
}
/* Sanfte Seitenuebergaenge im Craft-Stil (moderne Browser, sonst wirkungslos):
   Inhalt gleitet herein, Hintergrund-Artwork und Topbar bleiben stehen */
@view-transition{navigation:auto}
.backdrop{view-transition-name:backdrop}
.bar{view-transition-name:topbar}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vt-out .20s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .26s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-old(backdrop), ::view-transition-new(backdrop),
  ::view-transition-old(topbar), ::view-transition-new(topbar){animation:none; mix-blend-mode:normal}
}
@keyframes vt-out{to{opacity:0; transform:translateX(-18px)}}
@keyframes vt-in{from{opacity:0; transform:translateX(30px)}}
hr.light{border:none; border-top:1px solid var(--line); margin:14px 0}
ul{margin:.4em 0; padding-left:1.4em}
li{margin:.3em 0}
figure{margin:1em 0}
img{max-width:100%; height:auto; border-radius:10px}
nav.crumbs{margin:14px 4px 0; font-size:.9em}
nav.crumbs span{color:var(--muted); margin:0 2px}
/* Karten fuer Unterseiten (mit Text-Vorschau wie im Original) */
.pagecard{display:block; position:relative; margin:14px 0; padding:22px; border-radius:14px;
  background:var(--cardlink); color:#fff; overflow:hidden;
  background-size:cover; background-position:center}
.pagecard:hover{filter:brightness(1.07); text-decoration:none}
.pagecard span{position:relative; z-index:1; display:block; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pagecard .ptitle{font-weight:700; font-size:1.15em}
.pagecard .psub{font-weight:600; font-size:.86em; margin-top:4px; opacity:.96}
.pagecard .psnip{font-weight:400; font-size:.76em; margin-top:3px; opacity:.85; max-width:70ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pagecard.hasbg::before{content:""; position:absolute; inset:0; background:rgba(18,26,52,.44)}
/* Datei- & Link-Karten */
.filecard,.linkcard{display:flex; flex-direction:column; gap:2px; margin:10px 0; padding:14px 16px;
  border:1px solid var(--line); border-radius:12px; background:rgba(127,127,127,.06)}
.filecard{flex-direction:row; align-items:center; gap:14px}
.filecard:hover,.linkcard:hover{text-decoration:none; border-color:var(--link)}
.ficon{background:#c0392b; color:#fff; font-size:.72em; font-weight:700; padding:6px 8px; border-radius:8px}
.fname{color:var(--text); font-weight:600; display:block}
.fmeta{color:var(--muted); font-size:.85em; display:block}
.fdom{color:var(--link); font-size:.8em; margin-top:2px}
/* Toggles (nur Inhalts-Toggles in Karten, nicht die Navigation) */
.card details{border:1px solid var(--line); border-radius:12px; margin:10px 0; padding:10px 16px}
.card details summary{cursor:pointer; font-weight:600}
.card details .dbody{padding:8px 2px 2px}
/* Tabellen */
.twrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; margin:1em 0}
td{border:1px solid var(--line); padding:8px 12px; vertical-align:top}
footer{padding:6px 4px 30px; color:var(--muted); font-size:.85em}
footer a{color:var(--muted); text-decoration:underline}
@media (max-width:600px){ .card{padding:20px 18px} h1{font-size:1.4em} }