/* Downloads: Kacheln, Schloss, Ablauf. Nutzt die Variablen von style.css und
   seiten.css (.gs). Bewegung nur mit transform und opacity, aus bei
   "Bewegung reduzieren". */

.dl-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.dl-filter button{font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;padding:10px 18px;min-height:44px;cursor:pointer;
  background:transparent;color:var(--text-2);border:1px solid var(--text-2);transition:background .2s,color .2s}
.dl-filter button:hover{background:var(--flaeche)}
.dl-filter button[aria-pressed="true"]{background:var(--text-2);color:#fff}

.dl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px;margin:0;padding:0;list-style:none}
.dl-raster > li[hidden]{display:none}
.dl-karte{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:26px 26px 24px;
  background:#fff;border:1px solid var(--gs-linie,var(--linie));color:inherit;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.dl-karte:hover,.dl-karte:focus-visible{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px -18px rgba(var(--schatten-rgb),.35)}
.dl-karte:focus-visible{outline:3px solid var(--text-2);outline-offset:3px}
.dl-hinweis{margin-top:14px;padding:12px 14px;border-left:3px solid var(--gold);background:rgba(0,0,0,.03)}
.dl-mit-bild{padding-top:0}
.dl-bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#faf6ee}
.dl-mit-bild .dl-bild{margin:0 -26px 6px;width:calc(100% + 52px);max-width:none}
.dl-bild-detail{margin:0 0 22px;border:1px solid var(--gs-linie,var(--linie))}
.dl-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dl-rubrik{font-size:var(--etikett-groesse);font-weight:700;letter-spacing:var(--etikett-sperrung);text-transform:uppercase;color:var(--text-2)}
.dl-karte h2,.dl-karte h3{margin:0;font-size:21px;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.dl-karte p{margin:0;font-size:15px;line-height:1.65;color:var(--grau)}
.dl-fuss{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:700;color:var(--text-2)}
.dl-fuss span:last-child{letter-spacing:.04em}
.dl-beispiel{display:inline-block;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#5a4a00;background:rgba(var(--gold-rgb),.35)}

/* Schloss: der Bügel schwingt auf, wenn die Datei freigeschaltet wird */
.dl-schloss{width:30px;height:30px;flex:none;color:var(--text-2);overflow:visible}
.dl-schloss .buegel{transform-box:fill-box;transform-origin:100% 100%;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.dl-karte:hover .dl-schloss .buegel,.dl-karte:focus-visible .dl-schloss .buegel,
.dl-schloss.offen .buegel{transform:translateY(-3px) rotate(-28deg)}
.dl-schloss.offen{color:var(--zu-gut)}
.dl-gross{width:56px;height:56px}

/* Detailseite */
.dl-detail{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.dl-detail{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px}}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 22px;padding:0;list-style:none;font-size:14px;color:var(--grau)}
.dl-meta b{color:var(--text-2)}
.dl-kasten{padding:30px;background:#fff;border:1px solid var(--gs-linie,var(--linie));box-shadow:0 20px 40px -28px rgba(var(--schatten-rgb),.4)}
.dl-kasten .dl-gross{margin-bottom:14px}
.dl-kasten h2{margin:0 0 6px;font-size:22px}
.dl-kasten .formular{margin-top:16px}
.dl-haken{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--grau)}
.dl-haken input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:#111}
.dl-danke{display:grid;gap:10px}
.dl-danke strong{font-size:20px}
.dl-danke p{margin:0;color:var(--grau);line-height:1.7}
.dl-danke .dl-schloss{margin-bottom:4px}
.dl-danke{animation:dl-ein .45s ease both}
@keyframes dl-ein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ablauf in drei Schritten */
.dl-schritte{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin:0;padding:0;list-style:none;counter-reset:s}
.dl-schritte li{position:relative;padding-top:46px;font-size:15px;line-height:1.7;color:var(--grau);counter-increment:s}
.dl-schritte li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;display:grid;place-items:center;
  font-weight:700;background:var(--gold);color:#111;border-radius:50%}
.dl-schritte b{display:block;font-size:17px;color:var(--text)}

.dl-leer{padding:30px 0;color:var(--grau)}
/* style.css gibt .formular display:grid; das ueberstimmt das hidden-Attribut, hier wieder herstellen */
.formular[hidden],#ohne-schluessel[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .dl-karte,.dl-schloss .buegel{transition:none}
  .dl-karte:hover,.dl-karte:focus-visible{transform:none}
  .dl-danke{animation:none}
}