/* Fundus — die Sammlung von herriger & partner gmbh
   Eigenes Stylesheet. Farben und Schriften wie auf der Hauptsite,
   Layout bewusst offener und werkstattnaeher. */

:root{
  --ink:#1a1a1a;--paper:#f7f5f0;--warm:#ede9e1;--rule:#c8b89a;
  --accent:#2c4a2e;--light-accent:#e8efe3;--muted:#6b6153;--white:#ffffff;
  --serif:'Libre Baskerville',Georgia,serif;--sans:'Source Sans 3',system-ui,sans-serif;
  --accent-text:#2c4a2e;--rule-text:#c8b89a;--shade:rgba(44,74,46,0.12);
  color-scheme:light dark;
  --maxw:760px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.75;
     -webkit-font-smoothing:antialiased}

/* KOPFZEILE */
.top{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.top-in{max-width:var(--maxw);margin:0 auto;padding:0 1.6rem;height:58px;
        display:flex;align-items:center;gap:1.2rem}
.top a.home{font-family:var(--serif);font-size:0.9rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.top a.home span{color:var(--accent-text)}
.top .here{font-family:var(--serif);font-size:0.9rem;font-style:italic;color:var(--muted)}
.top .sep{color:var(--rule-text)}
.top .lang{margin-left:auto;display:flex;align-items:center;gap:0.4rem}
.lang button{background:none;border:1px solid transparent;font-family:var(--sans);font-size:0.72rem;
             letter-spacing:0.08em;color:var(--muted);cursor:pointer;padding:0.2rem 0.4rem}
.lang button.active{color:var(--accent-text);border-color:var(--rule)}
.lang .s{color:var(--rule-text);font-size:0.7rem}

/* RUMPF */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.6rem}
.intro{padding:4.5rem 0 3rem;border-bottom:1px solid var(--rule)}
.kicker{font-family:var(--serif);font-size:0.72rem;font-style:italic;color:var(--rule-text);
        letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.2rem}
h1{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.25;margin-bottom:1.2rem}
.lead{font-size:1rem;color:var(--muted);max-width:620px}

/* THEMENFELDER */
.field{padding:3rem 0 0.5rem}
.field + .field{border-top:1px solid var(--rule)}
.field-head{margin-bottom:1.8rem}
.field-name{font-family:var(--serif);font-size:1.15rem;font-weight:400;margin-bottom:0.5rem}
.field-desc{font-size:0.88rem;color:var(--muted);max-width:560px}

/* EINTRAEGE */
.entry{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--warm);
       padding:1.3rem 0;transition:padding-left 0.18s,background 0.18s}
.entry:first-of-type{border-top:1px solid var(--rule)}
a.entry:hover{background:var(--light-accent);padding-left:0.8rem}
.entry-title{font-family:var(--serif);font-size:1.02rem;line-height:1.35;margin-bottom:0.35rem}
a.entry:hover .entry-title{color:var(--accent-text)}
.entry-sub{font-size:0.86rem;color:var(--muted);line-height:1.6}
.entry-meta{font-family:var(--serif);font-size:0.72rem;font-style:italic;color:var(--muted);
            margin-top:0.5rem;letter-spacing:0.04em}
.entry.soon{opacity:0.62;cursor:default}
.entry.soon .entry-meta::after{content:' · in Arbeit'}

/* BEITRAGSSEITE */
.article{padding:4rem 0 2rem}
.breadcrumb{font-size:0.78rem;color:var(--muted);margin-bottom:2rem}
.breadcrumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.breadcrumb a:hover{color:var(--accent-text)}
.article h1{font-size:1.75rem;margin-bottom:0.8rem}
.article .sub{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--muted);
              margin-bottom:1.6rem;line-height:1.5}
.article .meta{font-family:var(--serif);font-size:0.78rem;font-style:italic;color:var(--fc,var(--muted));
               letter-spacing:0.04em;padding-bottom:1.6rem;margin-bottom:2.4rem;
               border-bottom:3px solid var(--fc,var(--rule))}
.body{font-size:1rem;line-height:1.85}
.body p{margin-bottom:1.3rem}
.body h2{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin:2.4rem 0 0.9rem}
.body h3{font-family:var(--serif);font-weight:400;font-size:1rem;margin:2.2rem 0 0.8rem}
.body ul,.body ol{margin:0 0 1.3rem 1.2rem}
.body li{margin-bottom:0.4rem}
.body blockquote{border-left:2px solid var(--rule);padding-left:1.2rem;margin:1.6rem 0;
                 font-family:var(--serif);font-style:italic;color:var(--muted)}
.body a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--rule)}

/* WEITER */
.next{margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--rule);
      display:flex;justify-content:space-between;gap:1.5rem;font-size:0.85rem;flex-wrap:wrap}
.next a{color:var(--muted);text-decoration:none;max-width:45%}
.next a:hover{color:var(--accent-text)}
.next .lbl{display:block;font-family:var(--serif);font-style:italic;font-size:0.72rem;
           color:var(--muted);margin-bottom:0.2rem}

/* FUSS */
footer{border-top:1px solid var(--rule);margin-top:4rem;padding:2rem 0 3rem;background:var(--warm)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:0 1.6rem;
         display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
         font-size:0.78rem;color:var(--muted)}
.foot-in a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-in a:hover{color:var(--accent-text)}

@media(max-width:700px){
  h1{font-size:1.6rem}
  .article h1{font-size:1.45rem}
  .intro{padding:3rem 0 2.2rem}
  .top .here{display:none}
  .next a{max-width:100%}
}

/* DUNKELMODUS — folgt der Systemeinstellung des Geraets */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e6e1d7;
    --paper:#16150f;
    --warm:#1e1c16;
    --rule:#4a4335;
    --rule-text:#a1906d;
    --accent:#20361f;
    --accent-text:#8fbb8e;
    --light-accent:#22301f;
    --muted:#a39882;
    --white:#f2efe8;
    --shade:rgba(143,187,142,0.22);
  }
  img{filter:brightness(0.92) contrast(0.96)}
}


/* ─────────────────────────────────────────────────────────
   EINSTIEGSSEITE
   Jedes Themenfeld hat eine eigene Farbe. Sie erscheint als
   Kante am Beitrag und als Punkt im Filter, traegt also eine
   Information und ist nicht blosse Zier.
   ───────────────────────────────────────────────────────── */

.f-industrielle-transformation{--fc:#2c4a2e}
.f-methode{--fc:#3c5866}
.f-ordnung{--fc:#7d4f38}
.f-mensch{--fc:#5a4a72}
.f-politik{--fc:#786428}
.f-none{--fc:var(--rule)}

/* Kopf */
.masthead{padding:5rem 0 0}
.masthead h1{font-size:clamp(2.6rem,11vw,4.4rem);line-height:0.98;letter-spacing:-0.015em;
             margin:0 0 2rem;max-width:11ch}
.mast-rule{display:flex;height:6px;width:13rem;margin-bottom:2rem}
.mast-rule span{flex:1}
.mast-lead{font-size:1.02rem;line-height:1.8;color:var(--muted);max-width:56ch;margin-bottom:0.9rem}
.mast-note{font-family:var(--serif);font-style:italic;font-size:0.92rem;color:var(--ink);
           max-width:52ch;margin-bottom:3rem}

/* Filter */
.legend{display:flex;flex-wrap:wrap;gap:0.5rem;padding-bottom:3rem;
        border-bottom:1px solid var(--rule)}
.chip{display:inline-flex;align-items:center;gap:0.5rem;background:none;cursor:pointer;
      font-family:var(--sans);font-size:0.83rem;color:var(--muted);
      border:1px solid var(--rule);padding:0.42rem 0.85rem;line-height:1.2}
.chip .dot{width:9px;height:9px;flex:0 0 9px;background:var(--fc,var(--rule))}
.chip .n{font-family:var(--serif);font-style:italic;font-size:0.76rem;color:var(--muted)}
.chip:hover{border-color:var(--fc,var(--ink));color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[aria-pressed="true"] .n{color:var(--paper);opacity:0.6}
.chip:focus-visible{outline:2px solid var(--fc,var(--ink));outline-offset:2px}

/* Raster */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-bottom:4rem}
.card[hidden],.empty[hidden]{display:none}
.card{display:block;text-decoration:none;color:inherit;background:var(--paper);
      padding:2rem 1.9rem 2.2rem;border-left:5px solid var(--fc);position:relative;
      box-shadow:0 0 0 1px var(--rule)}
a.card{transition:background 0.18s}
a.card:hover{background:var(--light-accent)}
a.card:focus-visible{outline:2px solid var(--fc);outline-offset:-2px}
.card-field{font-family:var(--serif);font-style:italic;font-size:0.76rem;color:var(--fc);
            margin-bottom:0.9rem}
.card-title{font-family:var(--serif);font-size:1.18rem;line-height:1.3;margin-bottom:0.6rem}
.card-sub{font-size:0.88rem;color:var(--muted);line-height:1.65}
.card-date{font-family:var(--serif);font-style:italic;font-size:0.74rem;color:var(--muted);
           margin-top:1.4rem}

/* Hervorgehobener Beitrag */
.card--feature{grid-column:1/-1;background:var(--fc);border-left-color:var(--fc);
               padding:3rem 2.2rem 3.2rem;color:var(--paper)}
a.card--feature:hover{background:var(--fc);filter:brightness(1.12)}
.card--feature .card-field{color:var(--paper);opacity:0.68}
.card--feature .card-title{font-size:clamp(1.5rem,5.5vw,2.1rem);line-height:1.2;max-width:18ch;color:var(--paper)}
.card--feature .card-sub{color:var(--paper);opacity:0.82;font-size:0.95rem;max-width:46ch}
.card--feature .card-date{color:var(--paper);opacity:0.5}
.card--feature .read{display:inline-block;margin-top:1.6rem;font-size:0.85rem;
                     color:var(--paper);border-bottom:1px solid currentColor;padding-bottom:2px}

/* Angekuendigt, noch ohne Text */
.card--soon{background:var(--warm);border-left-width:2px;cursor:default}
.card--soon .card-title,.card--soon .card-sub{opacity:0.72}
.card--soon .card-date{color:var(--fc);opacity:0.85}

.empty{grid-column:1/-1;background:var(--paper);padding:2.6rem 1.9rem;
       font-size:0.9rem;color:var(--muted);text-align:center}

@media(max-width:700px){
  .masthead{padding-top:3rem}
  .grid{grid-template-columns:1fr}
  .card{padding:1.7rem 1.4rem 1.9rem}
  .card--feature{padding:2.2rem 1.4rem 2.4rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

@media (prefers-color-scheme: dark){
  .f-industrielle-transformation{--fc:#8fbb8e}
  .f-methode{--fc:#8db3c4}
  .f-ordnung{--fc:#c9977a}
  .f-mensch{--fc:#ac9bc9}
  .f-politik{--fc:#c7ae6a}
  .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .card--feature{color:#12110c}
  .card--feature .card-field,.card--feature .card-title,
  .card--feature .card-sub,.card--feature .card-date,
  .card--feature .read{color:#12110c}

}