/* fd-bau: universal-inhalt v1 */
/* Universal-Clip Inhaltsseite /fd/artstone/leiste: Stil */
.ema1{--soft:#f7f2ea;--line:#e9e3d8;--ink:#2a2722;--muted:#7a7367;--acc:#a96544;
 --accd:#87502f;--paper:#fffdf9;
 font-family:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.6;font-size:17px;
 max-width:1300px;margin:0 auto;padding:2.2rem 1rem 2.4rem;box-sizing:border-box;
 border-top:1px solid var(--line);-webkit-font-smoothing:antialiased}
.ema1 *{box-sizing:border-box}
.ema1 a{color:inherit;text-decoration:none}
.ema1 h2,.ema1 h3{font-family:"Noto Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:900;letter-spacing:-.035em;margin:0;
 text-transform:none;color:var(--ink)}
.ema1 h2{font-size:clamp(1.2rem,2.1vw,1.55rem);line-height:1.12}
.ema1 h3{font-size:1.04rem;letter-spacing:-.03em;line-height:1.2}
.ema1 .kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1rem;margin:0 0 1.2rem}
.ema1 .sub{margin:0;color:var(--muted);font-size:.88rem}
.ema1 .pf{width:1em;height:1em;flex:0 0 auto}
.ema1 .rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.ema1 .rev.da{opacity:1;transform:none}
.ema1 a:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:14px}
@media (prefers-reduced-motion:reduce){
 .ema1 .rev{opacity:1;transform:none;transition:none}
}
.ema1 .reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.5vw,1.2rem);
 margin:0;padding:0;list-style:none}
.ema1 .karte{display:flex;flex-direction:column;height:100%;background:var(--paper);
 border:1px solid var(--line);border-radius:14px;overflow:hidden;
 transition:border-color .25s,transform .25s,box-shadow .25s}
.ema1 .karte:hover{border-color:var(--acc);transform:translateY(-3px);
 box-shadow:0 18px 30px -24px rgba(42,39,34,.55)}
.ema1 .bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
 background:var(--soft)}
/* Zwei Aufnahmen derselben Serie in zwei Farben liegen uebereinander und blenden
   ineinander - dieselbe Technik wie die Bildbuehne der Artikelseiten:
   1,4 s Ueberblendung, 5 s Standzeit, je Karte zeitversetzt. */
.ema1 .dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s ease}
.ema1 .dia.an{opacity:1}
.ema1 .bild img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .5s ease}
.ema1 .karte:hover .bild img{transform:scale(1.04)}
/* Der Punktanzeiger sagt, dass es zwei Bilder gibt. Er erscheint erst, wenn das
   Skript den Wechsel wirklich uebernommen hat. */
.ema1 .punkte{position:absolute;right:.5rem;bottom:.45rem;display:none;gap:.3rem;
 padding:4px 6px;border-radius:999px;background:rgba(42,39,34,.34)}
.ema1[data-wechsel=an] .punkte{display:flex}
.ema1 .punkte i{width:6px;height:6px;border-radius:50%;background:rgba(255,253,249,.45);
 transition:background .5s ease}
.ema1 .karte[data-lage="0"] .punkte i:first-child,
.ema1 .karte[data-lage="1"] .punkte i:last-child{background:#fffdf9}
.ema1 .txt{padding:.8rem .9rem .9rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.ema1 h3{display:flex;align-items:center;gap:.5em}
.ema1 h3 i{width:.6em;height:.6em;border-radius:50%;background:var(--tint);flex:0 0 auto}
.ema1 .satz{display:block;margin:0;font-size:.88rem;color:var(--muted)}
.ema1 .meta{display:block;margin:.2rem 0 0;font-size:.78rem;color:var(--muted)}
.ema1 .mehr{margin-top:auto;padding-top:.5rem;display:inline-flex;align-items:center;
 gap:.4em;font-size:.82rem;font-weight:600;color:var(--accd)}
.ema1 .mehr .pf{transition:transform .25s}
.ema1 .karte:hover .mehr .pf{transform:translateX(3px)}
@media (max-width:900px){
 .ema1 .reihe{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
 .ema1{padding:1.7rem .9rem 1.9rem;font-size:16px}
 .ema1 .txt{padding:.7rem .75rem .8rem}
 .ema1 h3{font-size:.98rem}
 .ema1 .satz{font-size:.82rem}
 .ema1 .meta,.ema1 .mehr{font-size:.74rem}
 .ema1 .punkte{right:.4rem;bottom:.4rem}
}
@media (prefers-reduced-motion:reduce){
 .ema1 .dia{transition:none}
}