:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #faf9f6; color: #252825; line-height: 1.65; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .65rem; padding: .9rem 1rem max(.9rem, env(safe-area-inset-bottom)); font-size: .85rem; }
footer a { display: inline-block; padding: .25rem 0; }
.bildseite { height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; background: #151817; color: #f3f3ef; }
.motiv { position: relative; min-height: 0; width: 100%; height: 100%; }
.bildrahmen { position: relative; width: 100%; height: 100%; }
.motiv picture { position: relative; display: block; width: 100%; height: 100%; }
.ki-hinweis { position: absolute; left: max(.85rem, env(safe-area-inset-left)); bottom: .75rem; color: #fff; font-size: .8rem; line-height: 1.25; text-shadow: 0 1px 3px #000, 0 0 6px rgb(0 0 0 / 65%); pointer-events: none; }
.motiv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.bildseite footer { position: relative; z-index: 1; gap: .5rem; padding: .18rem .65rem calc(.18rem + env(safe-area-inset-bottom)); background: #111; font-size: .8rem; line-height: 1.25; }
.bildseite footer a { padding: .2rem 0; }
.bildseite footer a:hover { color: #fff; text-decoration-thickness: 2px; }
.rechtstext { max-width: 48rem; margin: auto; padding: 2rem 1.25rem; overflow-wrap: anywhere; }
.rechtstext h1 { margin: 1.5rem 0 .8rem; font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.2; }
.rechtstext h2 { font-size: 1.2rem; line-height: 1.35; margin-top: 1.8rem; }
.rechtstext address { font-style: normal; }
.entwurf { border-left: 3px solid #b58124; padding: .8rem 1rem; background: #fff3d8; font-size: .9rem; }
.offen { font-weight: 600; color: #805b18; }
.stand { font-size: .85rem; color: #545b55; }
@media (max-width: 420px) { footer { gap: .4rem; font-size: .78rem; } }
@media (max-width: 767px), (orientation: portrait) {
  .motiv { display: grid; place-items: center; }
  .bildrahmen { width: 100%; height: auto; aspect-ratio: 1672 / 941; }
  .motiv picture { height: auto; }
  .motiv img { width: 100%; height: auto; object-fit: contain; }
  .ki-hinweis { left: .6rem; bottom: .45rem; font-size: .7rem; }
}

/* Separate phone portrait view; approved wider layouts retain their rules. */
@media (max-width: 767px) and (orientation: portrait) {
  .motiv { display: block; }
  .bildrahmen { width: 100%; height: 100%; aspect-ratio: auto; }
  .motiv picture { height: 100%; }
  .motiv img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
}

@media (max-width: 767px) and (orientation: portrait) {
  .ki-hinweis { top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); bottom: auto; }
}