/* ==========================================================================
   F.R. GRANARIA — Schräge Kacheln (Markenerscheinung, aus index.php extrahiert)
   Zusätzlich zu template/style.css einbinden (via $extraHead):
   <link rel="stylesheet" href="<?=$root?>template/diagonal.css">

   Bausteine:
   .diag-band / .diag-header / .diag-claim — grauer Markenband-Rahmen
   .diag-tile — große Dreieckskachel, Themes: .diag-ink (dunkel/gold, wie
     Academy), .diag-paper (Papier/Tinte, blau, wie Kartenbrett),
     .diag-paper.diag-gold (Experten), .diag-light (hell, wie Resa)
   .diag-mosaic — Raster aus 5 Zellen (.rn-d1–.rn-d5), jede Zelle ein
     .rn-diag-Paar aus zwei dreieckig beschnittenen Karten (.rn-card)
   ========================================================================== */

/* === Markenband === */
.diag-band{padding:0;width:100%;background:#d5d5d5}
.diag-header{padding:2.5rem 2rem 1.5rem}
.diag-header h2{font-family:var(--fd);font-size:1.6rem;font-weight:700;color:var(--t1);margin-bottom:.6rem;letter-spacing:.01em}
.diag-header p{font-size:.9rem;color:var(--t1);max-width:560px}
.diag-claim{display:inline-block;background:#fff;padding:.6rem 1.4rem;font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--ink);letter-spacing:.03em;box-shadow:0 2px 8px rgba(0,0,0,.08);margin-top:.2rem}
.diag-sep{border:none;border-top:1px solid #d0d0d0;margin:0}

/* === Große Dreieckskachel (Basis = Academy-Bau, Farben via Variablen) === */
.diag-tile{position:relative;display:block;min-height:280px;margin:0 5px 5px;overflow:hidden;isolation:isolate;
  --dt-bg1:#1A1A2E;--dt-bg2:#C9A84C;--dt-fg:#FAF8F5;--dt-muted:rgba(250,248,245,.78);
  --dt-acc:#C9A84C;--dt-acc-fg:#1A1A2E;--dt-open:#C9A84C;
  --dt-brand:#1A1A2E;--dt-brand-sub:rgba(26,26,46,.7);
  background:var(--dt-bg2);color:var(--dt-fg)}
.dt-tri{position:absolute;inset:0;transition:clip-path .3s ease,background .3s ease}
.dt-primary{z-index:2;background:var(--dt-bg1);clip-path:polygon(0 0,100% 0,0 100%)}
.dt-secondary{z-index:1;background:var(--dt-bg2);clip-path:polygon(100% 0,100% 100%,0 100%)}
.dt-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:52%;padding:1.4rem 1.5rem}
.dt-tag{display:inline-block;margin-bottom:.65rem;padding:.2rem .55rem;background:var(--dt-acc);color:var(--dt-acc-fg);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dt-copy h3{font-family:var(--fd);font-size:1.25rem;font-weight:700;line-height:1.25;color:var(--dt-fg);margin:0 0 .4rem}
.dt-copy p{font-size:.8rem;line-height:1.5;color:var(--dt-muted);margin:0;max-width:440px}
.dt-open{font-size:.8rem;font-weight:600;color:var(--dt-open);margin-top:.75rem}
.dt-brand{position:absolute;right:1.5rem;bottom:1.2rem;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.dt-brand strong{font-family:var(--fd);font-size:2.6rem;font-weight:700;line-height:.9;letter-spacing:.06em;color:var(--dt-brand)}
.dt-brand span{margin-top:.5rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dt-brand-sub)}
.dt-line{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--dt-line,var(--dt-acc)) calc(50% - 1px),var(--dt-line,var(--dt-acc)) calc(50% + 1px),transparent calc(50% + 1px))}
.diag-tile:hover .dt-primary{clip-path:polygon(0 0,100% 0,100% 10%,0 100%)}
.diag-tile:focus-visible{outline:3px solid var(--dt-line,var(--dt-acc));outline-offset:-3px}

/* Theme: Papier oben, Tinte unten, blauer Akzent (Kartenbrett/Buch) */
.diag-paper{--dt-bg1:#FAF8F5;--dt-bg2:#1A1A2E;--dt-fg:#1A1A2E;--dt-muted:rgba(26,26,46,.72);
  --dt-acc:#1A73E8;--dt-acc-fg:#fff;--dt-open:#1967d2;
  --dt-brand:#FAF8F5;--dt-brand-sub:rgba(250,248,245,.72)}
/* Theme-Zusatz: Gold statt Blau (Experten/Zertifizierung) */
.diag-paper.diag-gold{--dt-acc:#C9A84C;--dt-acc-fg:#1A1A2E;--dt-open:#8f7527;--dt-brand:#C9A84C}
/* Theme: hell (Künstler-/Partnerkachel wie Resa) */
.diag-light{min-height:230px;--dt-bg1:#fff;--dt-bg2:#f5f5f5;--dt-fg:#1A1A2E;--dt-muted:var(--t2);
  --dt-acc:#fce8e6;--dt-acc-fg:#c5221f;--dt-open:var(--acc2);--dt-line:#d5d5d5;
  --dt-brand:#1A1A2E;--dt-brand-sub:var(--t3)}
.diag-light .dt-copy{max-width:48%;padding:1.2rem 1.35rem}
.diag-light .dt-copy h3{font-size:1.1rem}
.diag-light .dt-copy p{font-size:.78rem;max-width:420px}
.diag-light .dt-tag{letter-spacing:.08em;font-size:.58rem;padding:.18rem .5rem}
.diag-light .dt-brand{right:1.4rem;bottom:1.15rem}
.diag-light .dt-brand strong{font-size:2.35rem;letter-spacing:.1em}
.diag-light .dt-brand span{margin-top:.45rem;font-size:.58rem}

/* === Diagonal-Mosaik: 3 Spalten, 5 Zellen, alle diagonal geteilt === */
.diag-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 5px 5px}
.rn-card{background:#fff;border-radius:0;overflow:hidden;transition:all .3s;text-decoration:none;color:inherit;display:flex;flex-direction:column;position:relative}
.rn-card:hover{z-index:5}
.rn-card .rn-body{padding:1.1rem 1.2rem;flex:1;display:flex;flex-direction:column}
.rn-card .rn-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.rn-card .rn-tag{font-family:var(--fb);font-size:.75rem;font-weight:600;padding:.18rem .5rem;border-radius:0;text-transform:uppercase;letter-spacing:.06em}
.rn-card .rn-date{font-size:.75rem;color:var(--t2)}
.rn-card h3{font-family:var(--fd);font-size:.75rem;font-weight:600;line-height:1.25;color:var(--t1);margin-bottom:.15rem}
.rn-card .rn-excerpt{font-size:.75rem;color:var(--t2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:0}
.rn-d1 h3{font-size:.88rem}
.rn-d1 .rn-excerpt{-webkit-line-clamp:3}
.rn-card .rn-read{font-size:.75rem;color:var(--acc2);margin-top:.4rem;font-weight:500}
.rn-card:hover .rn-read{color:var(--acc2)}
.rn-card:focus-visible{outline:3px solid var(--acc);outline-offset:-3px;z-index:6}

/* Diagonales Kartenpaar */
.rn-diag{position:relative;overflow:hidden}
.rn-diag .rn-card{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:none;transition:all .3s}
.rn-diag .rn-card.rn-tri-tl{clip-path:polygon(0 0,100% 0,0 100%);z-index:2;background:#fff}
.rn-diag .rn-card.rn-tri-br{clip-path:polygon(100% 0,100% 100%,0 100%);z-index:1;background:#f5f5f5}
.rn-diag .rn-card.rn-tri-tl .rn-body{justify-content:flex-start;align-items:flex-start;align-self:flex-start;padding:.7rem .9rem;margin:0 auto 0 0;max-width:55%;max-height:55%;text-align:left}
.rn-diag .rn-card.rn-tri-br .rn-body{justify-content:flex-end;align-items:flex-end;align-self:flex-end;padding:.7rem .9rem;margin:auto 0 0 auto;max-width:55%;max-height:55%;text-align:right}
.rn-diag .rn-card.rn-tri-tl .rn-meta{justify-content:flex-start}
.rn-diag .rn-card.rn-tri-br .rn-meta{justify-content:flex-end}
.rn-diag .rn-card.rn-tri-tl:hover{clip-path:polygon(0 0,100% 0,100% 12%,0 100%);background:#fff;box-shadow:2px 2px 12px rgba(0,0,0,.1)}
.rn-diag .rn-card.rn-tri-br:hover{clip-path:polygon(100% 0,100% 100%,0 100%,0 88%);background:#fff;box-shadow:-2px -2px 12px rgba(0,0,0,.1)}
.rn-diag::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - 1px),#d5d5d5 calc(50% - 1px),#d5d5d5 calc(50% + 1px),transparent calc(50% + 1px))}

/* Alternative Teilungsrichtung (↗ statt ↘) */
.rn-diag.rn-diag-alt .rn-card.rn-tri-tl{clip-path:polygon(0 0,100% 0,100% 100%)}
.rn-diag.rn-diag-alt .rn-card.rn-tri-br{clip-path:polygon(0 0,100% 100%,0 100%)}
.rn-diag.rn-diag-alt .rn-card.rn-tri-tl .rn-body{justify-content:flex-start;align-items:flex-end;align-self:flex-end;padding:.7rem .9rem;margin:0 0 0 auto;max-width:55%;max-height:55%;text-align:right}
.rn-diag.rn-diag-alt .rn-card.rn-tri-tl .rn-meta{justify-content:flex-end}
.rn-diag.rn-diag-alt .rn-card.rn-tri-br .rn-body{justify-content:flex-end;align-items:flex-start;align-self:flex-start;padding:.7rem .9rem;margin:auto auto 0 0;max-width:55%;max-height:55%;text-align:left}
.rn-diag.rn-diag-alt .rn-card.rn-tri-br .rn-meta{justify-content:flex-start}
.rn-diag.rn-diag-alt .rn-card.rn-tri-tl:hover{clip-path:polygon(0 0,100% 0,100% 100%,0 12%)}
.rn-diag.rn-diag-alt .rn-card.rn-tri-br:hover{clip-path:polygon(0 0,100% 100%,0 100%,0 12%)}
.rn-diag.rn-diag-alt::after{background:linear-gradient(to bottom left,transparent calc(50% - 1px),#d5d5d5 calc(50% - 1px),#d5d5d5 calc(50% + 1px),transparent calc(50% + 1px))}

/* Zellenplatzierung: 3×3 mit hoher und breiten Zellen */
.rn-d1{grid-column:1/2;grid-row:1/3;min-height:400px}
.rn-d2{grid-column:2/3;grid-row:1/2;min-height:260px}
.rn-d3{grid-column:3/4;grid-row:1/2;min-height:260px}
.rn-d4{grid-column:2/4;grid-row:2/3;min-height:260px}
.rn-d5{grid-column:1/3;grid-row:3/4;min-height:240px}
/* Textzonen je Seitenverhältnis */
.rn-d1 .rn-body{max-width:75%!important;max-height:48%!important}
.rn-d2 .rn-body,.rn-d3 .rn-body{max-width:52%!important;max-height:52%!important}
.rn-d4 .rn-body,.rn-d5 .rn-body{max-width:42%!important;max-height:70%!important}
.rn-d4 h3,.rn-d5 h3{font-size:.8rem}

/* Video-Tag (Ergänzung zu den .tag-*-Farben aus style.css) */
.tag-video{background:var(--ink);color:var(--gold)}

/* Bewegungsreduktion */
@media(prefers-reduced-motion:reduce){
  .rn-card,.rn-diag .rn-card,.dt-tri{transition:none}
}

/* === Responsive === */
@media(max-width:900px){
  .diag-mosaic{grid-template-columns:1fr 1fr;gap:4px}
  .rn-d1,.rn-d4,.rn-d5{grid-column:1/3;grid-row:auto;min-height:280px}
  .rn-d2,.rn-d3{grid-column:auto;grid-row:auto;min-height:240px}
}
@media(max-width:540px){
  .diag-mosaic{grid-template-columns:1fr;gap:4px;padding:0 4px 4px}
  .rn-d1,.rn-d2,.rn-d3,.rn-d4,.rn-d5{grid-column:auto;grid-row:auto;min-height:220px}
  .rn-diag{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .rn-diag::after{display:none}
  .rn-diag .rn-card.rn-tri-tl,.rn-diag .rn-card.rn-tri-br{clip-path:none!important;position:relative;height:auto}
  .rn-diag .rn-card .rn-body{padding:1rem;justify-content:flex-end;align-items:flex-start;align-self:stretch;margin:0;max-width:none!important;max-height:none!important;text-align:left}
  .rn-diag .rn-card .rn-meta{justify-content:flex-start!important}
  .diag-header{padding:1.5rem 1rem 1rem}
  /* Flach-Fallback wie im Mosaik: Copy voll, Sekundärdreieck wird Markenstreifen */
  .diag-tile{min-height:0;margin:0 4px 4px;display:flex;flex-direction:column}
  .dt-tri{position:static;clip-path:none!important}
  .dt-primary{order:1}
  .dt-secondary{order:2;display:flex;justify-content:flex-end;padding:.75rem 1rem .85rem}
  .dt-copy{max-width:none;padding:1.1rem 1rem 1.15rem}
  .dt-copy h3{font-size:1rem}
  .dt-copy p{font-size:.72rem;max-width:none}
  .dt-brand{position:static;flex-direction:row;align-items:baseline;gap:.6rem}
  .dt-brand strong{font-size:1.35rem}
  .dt-brand span{margin-top:0;font-size:.5rem}
  .dt-line{display:none}
}