:root{ --bg:#0b0d11; --card:#12151b; --muted:#7f8a99; --text:#e7e9ee; --accent:#6aa0ff; --ring:rgba(106,160,255,0.35); --border:#1c2230; } * { box-sizing:border-box } html,body { height:100% } body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #121825 0%, var(--bg) 60%) fixed, var(--bg); color: var(--text); font-family: sans-serif; } a { color:var(--accent); text-decoration:none } a:focus { outline:2px solid var(--ring); outline-offset:2px; border-radius:8px } header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(10px); background:linear-gradient(180deg, rgba(18,21,27,0.85), rgba(18,21,27,0.65)); border-bottom:1px solid var(--border); } header .container { display: flex; align-items: center; justify-content: space-between; } .lang-switcher { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; padding: 4px; display: flex; gap: 2px; cursor: pointer; transition: border-color .2s ease; } .lang-switcher:hover { border-color: #2a3750; } .lang-option { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 6px; transition: all .2s ease; } .lang-option.active { background: var(--accent); color: #fff; } h3 + ul { margin-top: 0; } .container { max-width:1100px; margin:0 auto; padding:24px } .title{font-size:clamp(22px, 3vw, 36px); font-weight:700; letter-spacing:0.3px} main{padding:24px} section{margin:24px 0} .accordion{ display:grid; gap:16px; } details{ background:linear-gradient(180deg, rgba(18,21,27,0.9), rgba(18,21,27,0.7)); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s ease; } details[open]{border-color:#243049} summary { list-style:none; cursor:pointer; padding:16px 20px; font-weight:600; display:flex; align-items:center; gap:10px; } summary::-webkit-details-marker { display:none } .badge { padding:2px 10px; font-size:12px; color:#cbd5e1; background:#0f1420; border:1px solid #1f2937; border-radius:999px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 14px; padding: 0 16px 16px; } .card { position:relative; max-width: 320px; margin: 0 auto; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover { transform:translateY(-2px); border-color:#2a3750; box-shadow:0 6px 24px rgba(0,0,0,0.35); } .thumb { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; background:#0d1117; } .thumb-small { width: 70px; height: auto; border-radius: 6px; margin-right: 10px; border: 1px solid var(--border); } .objekt-beschreibung { margin: 6px 0 14px 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .image-info-list { display: flex; flex-direction: column; gap: 10px; } .multi-entry { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .info-lines { flex: 1; } .meta { padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:#cbd5e1; border-top:1px solid var(--border); } .title-btn { -webkit-appearance: none; appearance: none; background: transparent; border: 1px solid transparent; color: var(--text); font: inherit; padding: 4px 10px; border-radius: 8px; line-height: 1.2; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .info { padding: 10px 14px; border-top: 1px dashed var(--border); font-size: 13px; color: #cbd5e1; overflow: hidden; max-height: 0; transition: max-height .2s ease; } .info-line { display: grid; grid-template-columns: 85px 1fr; gap: 6px; margin: 6px 0; font-size: 13px; line-height: 1.5; color: #cbd5e1; } .info-label { font-weight: 600; color: var(--accent); margin-right: 6px; } .title-btn:hover{ background: rgba(255,255,255,0.04); border-color: #273042; } .title-btn:active{ background: rgba(255,255,255,0.06); } .title-btn:focus{ outline: none; } .title-btn:focus-visible{ box-shadow: 0 0 0 2px var(--ring); border-color: #2a3750; } .title-btn::after{ content: "▾"; font-size: .9em; opacity: .85; transition: transform .2s ease; } .title-btn[aria-expanded="true"]::after{ transform: rotate(180deg); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } footer{border-top:1px solid var(--border); margin-top:36px} .foot{color:var(--muted); font-size:12px} @media (prefers-reduced-motion:no-preference){ .card{will-change:transform} }