/* ============================================================
   hashID Journal. Baut auf site.css auf (Farben, Kopf, Fuss).
   Hier nur Artikel, Listen, Autor und Admin.
   ============================================================ */

.label a{color:inherit;text-decoration:none}
.label a:hover{color:var(--text)}

/* Artikel */
.j-article h1{font-size:clamp(34px,4.6vw,52px);line-height:1.1;letter-spacing:-1px}
.j-meta{margin:20px 0 0;font-size:15px;color:var(--mute)}
.page .j-meta{font-size:15px;color:var(--mute)}
.j-meta a{color:var(--dim);text-decoration:none}
.j-meta a:hover{color:var(--text)}
.j-body{margin-top:32px}
.page .j-body p{margin:0 0 18px;font-size:19px;line-height:1.65;color:var(--text)}
.j-body a{color:var(--dim);word-break:break-word}
.j-draft{display:inline-block;margin:12px 0 0;padding:6px 12px;border-radius:999px;
         border:1px solid var(--amber);color:var(--amber);font-size:14px;font-weight:700}
.page .j-draft{font-size:14px;color:var(--amber)}

/* Bilder: klein, ganz (nicht beschnitten), Klick -> Overlay */
.j-gallery{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0}
.j-shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface);
        cursor:zoom-in;transition:border-color .15s}
.j-shot:hover,.j-shot:focus-visible{border-color:var(--accent)}
.j-shot img{display:block;height:160px;width:auto;max-width:100%;object-fit:cover}

.j-lb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
      background:rgba(9,8,20,.92);padding:16px}
.j-lb[hidden]{display:none}
.j-lb-img{height:80vh;height:80dvh;width:auto;max-width:100%;object-fit:contain;border-radius:8px;display:block}
.j-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
          border-radius:50%;border:1px solid var(--line2);background:rgba(15,14,28,.8);color:var(--text);
          font:inherit;font-size:30px;line-height:1;cursor:pointer}
.j-lb-btn:hover,.j-lb-btn:focus-visible{border-color:var(--accent)}
.j-lb-close{top:16px;right:16px}
.j-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.j-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.j-lb-count{position:absolute;bottom:16px;left:0;right:0;margin:0;text-align:center;font-size:14px;color:var(--dim)}
html.j-lb-open{overflow:hidden}

.j-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.j-tags a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;
          border:1px solid var(--line2);font-size:14px;font-weight:700;color:var(--dim);text-decoration:none}
.j-tags a:hover{border-color:var(--accent);color:var(--text)}
.page .j-orig{margin-top:24px;font-size:16px}
.j-orig a{color:var(--amber);font-weight:700;text-decoration:none}
.j-orig a:hover{text-decoration:underline}

/* Blaettern: aelter links, neuer rechts */
.j-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.j-pn a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);
        text-decoration:none;color:var(--text);transition:border-color .15s}
.j-pn a:hover,.j-pn a:focus-visible{border-color:var(--accent)}
.j-pn .j-next{grid-column:2;text-align:right}
.j-pn-label{font-size:14px;font-weight:700;color:var(--amber)}
.j-pn-title{font-size:17px;font-weight:700;line-height:1.35}

/* Autor */
.author-box{display:flex;gap:20px;align-items:flex-start;margin-top:48px;padding:24px;border-radius:20px;
            background:var(--surface);border:1px solid var(--line)}
.author-box img{width:96px;height:96px;flex:0 0 96px;border-radius:50%;object-fit:cover;display:block}
.author-box div{min-width:0}
.page .author-box p{margin:0 0 8px;font-size:16px}
.page .author-box .author-name{font-size:18px;font-weight:700;color:var(--text)}
.author-name a{color:var(--text);text-decoration:none}
.author-links a{color:var(--dim)}
.author-head{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:20px}
.author-head img{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block}
.author-head h1{margin:0}
.page .author-head .lead{margin-top:8px}

.page .j-back{margin-top:40px;font-size:16px}
.j-back a{color:var(--dim);text-decoration:none}
.j-back a:hover{color:var(--text)}

/* Listen (Uebersicht, Thema, Autor) */
.j-list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.j-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.j-list time{display:block;font-size:14px;color:var(--mute)}
.j-list a{display:inline;font-size:22px;font-weight:700;line-height:1.3;color:var(--text);text-decoration:none}
.j-list a:hover{color:var(--dim)}
.page .j-list p{margin:8px 0 0;font-size:16px}
/* Liste mit Bild: Bild links, so hoch wie der Text daneben */
.j-list li.j-has-img{display:flex;gap:20px;align-items:stretch}
.j-list a.j-thumb{position:relative;display:block;flex:0 0 150px;min-height:120px;border-radius:12px;overflow:hidden;
                  border:1px solid var(--line);background:var(--surface)}
.j-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.j-li-text{flex:1;min-width:0}

/* Uebersicht: 1 gross, dann 2 x 2 halb, dann kompakt zu dritt */
.j-list-big li.j-has-img{gap:28px}
.j-list-big a{font-size:28px;line-height:1.25}
.j-list-big a.j-thumb{flex-basis:220px;min-height:180px}
.page .j-list-big p{font-size:17px}
.j-list-half{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin-top:0;border-top:0}
.j-list-half a{font-size:19px}
.j-list-half a.j-thumb{flex-basis:120px;min-height:110px}
.page .j-list-half p{font-size:15px}
.page .j-list-head{margin:48px 0 0;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--mute)}
.j-list-small{display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;margin-top:16px}
.j-list-small li{padding:16px 0}
.j-list-small li.j-has-img{gap:14px;align-items:flex-start}
.j-list-small time{font-size:13px}
.j-list-small a{font-size:16px;line-height:1.35}
.j-list-small a.j-thumb{flex:0 0 64px;height:64px;min-height:0;border-radius:10px}
.j-badge{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:6px;border:1px solid var(--line2);
         font-size:12px;font-weight:700;color:var(--mute);vertical-align:middle}

/* Admin */
.adm{padding:40px 0 96px}
.adm h1{font-size:32px;letter-spacing:-.5px;margin:0}
.adm-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:24px}
.adm-head h1{margin-right:auto}
.adm-inline{display:inline;margin:0}
.adm-btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:10px;
         border:1px solid var(--line2);background:transparent;color:var(--dim);font:inherit;font-size:15px;
         font-weight:700;text-decoration:none;cursor:pointer}
.adm-btn:hover{border-color:var(--accent);color:var(--text)}
.adm-btn.danger{border-color:var(--amber);color:var(--amber)}
.adm-msg{margin:0 0 20px;padding:12px 16px;border-radius:12px;font-size:15px}
.adm-msg.ok{background:var(--surface);border:1px solid var(--line2);color:var(--text)}
.adm-msg.err{border:1px solid var(--amber);color:var(--amber)}
.adm-scroll{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:15px}
.adm-table th{text-align:left;font-size:13px;color:var(--mute);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line2)}
.adm-table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--dim)}
.adm-actions{white-space:nowrap}
.adm-actions .adm-btn{margin:0 6px 6px 0}
.adm-status{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700}
.adm-status.live{background:var(--accent);color:#FFFFFF}
.adm-status.planned{border:1px solid var(--amber);color:var(--amber)}
.adm-slug{font-size:13px;color:var(--mute);font-family:ui-monospace,Menlo,monospace}
.adm-form{max-width:860px;display:flex;flex-direction:column;gap:18px}
.adm-login{max-width:420px}
.adm-row{display:flex;flex-wrap:wrap;gap:18px}
.adm-row .adm-field{flex:1 1 200px}
.adm-field{display:flex;flex-direction:column;gap:6px}
.adm-field label,.adm-login label{font-size:14px;font-weight:700;color:var(--dim)}
.adm input[type=text],.adm input[type=url],.adm input[type=date],.adm input[type=time],.adm input[type=password],.adm textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ground);
  color:var(--text);font:inherit;font-size:16px;color-scheme:dark}
.adm textarea{min-height:260px;line-height:1.5;resize:vertical}
.adm-hint{margin:0;font-size:13px;color:var(--mute)}
.adm-lang{margin:0;padding:20px;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:14px}
.adm-lang legend{padding:0 8px;font-weight:700;color:var(--amber);letter-spacing:1px}
.adm-delete{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;align-items:center}
.adm-check{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--dim)}
.adm input[type=number]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ground);
  color:var(--text);font:inherit;font-size:16px;color-scheme:dark}
.adm input[type=file]{font:inherit;font-size:15px;color:var(--dim)}
.adm-img{display:flex;gap:16px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.adm-img img{display:block;width:120px;height:120px;object-fit:contain;border-radius:10px;
  border:1px solid var(--line);background:var(--ground)}
.adm-img-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.adm-img-fields .adm-row .adm-field:first-child{flex:0 0 110px}
.adm-img-fields .adm-row .adm-field:last-child{flex:1 1 240px}

@media (max-width:900px){
  .j-list-small{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .author-box{flex-direction:column}
  .page .j-body p{font-size:18px}
  .j-shot img{height:120px}
  .j-list li.j-has-img{gap:14px}
  .j-pn{grid-template-columns:1fr}
  .j-pn .j-next{grid-column:1}
  .j-list a.j-thumb{flex:0 0 88px;height:88px;min-height:0;align-self:flex-start;margin-top:4px}
  .j-list-half,.j-list-small{grid-template-columns:1fr}
  .j-list-big a{font-size:22px}
  .j-list-big li.j-has-img{gap:14px}
  .j-list-small a.j-thumb{flex-basis:64px;height:64px;margin-top:0}
  .j-lb{padding:8px}
  .j-lb-img{height:auto;max-height:80vh;max-height:80dvh}
  .j-lb-prev,.j-lb-next{top:auto;bottom:12px;transform:none}
  .j-lb-count{bottom:26px}
  .adm-img{flex-direction:column}
}