/* Hoffjann Architekten – site styles (replaces Materialize 0.97, bxSlider, cookieconsent) */

@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-display: swap;
  src: url("../font/roboto/Roboto-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-display: swap;
  src: url("../font/roboto/Roboto-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-weight: 700;
  font-display: swap;
  src: url("../font/roboto/Roboto-Bold.woff2") format("woff2");
}

:root {
  --orange: #ec6607;      /* brand: logo, dots, rules */
  --orange-text: #c45200; /* orange for text and on-white UI, 4.6:1 */
  --text: #212121;
  --muted: #6b6b6b;       /* 5.3:1 on white */
  --rule: #aaa;
  --gap: 1.5rem;
  --fade: 2s;
  /* frame of every image slider (desktop / phones) */
  --slider-ratio: 2 / 1;
  --slider-ratio-small: 4 / 3;
}

/* Base */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(0, 0, 0, .87);
  background: #fff;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--muted);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--orange-text);
}

h1, h2, h3, h4 {
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1rem;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 1rem;
  hyphens: auto;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0 0 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard focus and skip link */

:focus-visible {
  outline: 2px solid var(--orange-text);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 30;
  padding: .5rem 1rem;
  background: var(--text);
  color: #fff;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  color: #fff;
}
main:focus {
  outline: none;
}

/* Page frame */

.page {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 601px) { .page { width: 85%; } }
@media (min-width: 993px) { .page { width: 70%; } }

/* Header / navigation */

.site-header {
  /* the wordmark's baseline sits at 65.9% of the logo image height (rows 7–108 of 164) */
  --logo-h: 2.5rem;
  --logo-baseline: calc(var(--logo-h) * .341);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 32px 0 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--rule);
}

.site-nav ul {
  display: flex;
  gap: 1.75rem;
}
.site-nav a {
  display: block;
  /* line-height 1: Roboto's baseline sits .16em above the box bottom */
  padding: .5rem 0 calc(var(--logo-baseline) - .16em);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
}
.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--orange-text);
}

.logo {
  display: block;
  margin-left: auto;
}
.logo img {
  height: var(--logo-h);
  width: auto;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 0 -6px -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 600px) {
  .site-header {
    --logo-h: 1.9rem;
    margin-top: 20px;
    padding-bottom: 12px;
  }
}

/* Mobile drawer */

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: min(300px, 85vw);
  padding: 1rem 0;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .25);
  transform: translateX(-105%);
  transition: transform .25s ease;
}
.drawer a {
  display: block;
  padding: .9rem 1.5rem;
  font-size: 1.05rem;
  color: #444;
  cursor: pointer;
}
.drawer a[aria-current] {
  color: var(--orange-text);
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-open .drawer { transform: none; }
.nav-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

@media (max-width: 992px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Layout grid */

.layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-bottom: 20px;
}
.layout > * {
  grid-column: span 12;
  min-width: 0;
}
@media (min-width: 601px) {
  .m-6 { grid-column: span 6; }
  .m-9 { grid-column: span 9; }
  .m-3 { grid-column: span 3; }
}
@media (min-width: 993px) {
  .l-4 { grid-column: span 4; }
  .l-8 { grid-column: span 8; }
  .l-9 { grid-column: span 9; }
  .l-3 { grid-column: span 3; }
}
.only-large { display: none; }
@media (min-width: 993px) { .only-large { display: block; } }

.text {
  color: var(--text);
}
.text a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: .2em;
}
.text a:hover {
  color: var(--orange-text);
}
.text--muted,
.text--muted a {
  color: var(--muted);
}

/* Slider – one component for every page */

.slider {
  margin-bottom: 20px;
}
.slider:focus-visible {
  outline-offset: 4px;
}
.slides {
  position: relative;
  aspect-ratio: var(--slider-ratio);
  overflow: hidden;
}
@media (max-width: 600px) {
  .slides { aspect-ratio: var(--slider-ratio-small); }
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.slide.is-active {
  opacity: 1;
}
.slide picture,
.slide img {
  width: 100%;
  height: 100%;
}
.slide img {
  object-fit: cover;
}
.slide.is-contain img {
  object-fit: contain;
}
.slide figcaption {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 70%;
  padding: .35rem .75rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .85rem;
}

/* Overlay controls: dark translucent backing keeps them readable on any photo */
.slider-nav,
.slider-pause,
.slider-dot {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

/* arrows: full-height hit areas on the image edges */
.slider-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(56px, 12%, 120px);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.slider-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: .75rem;
}
.slider-next {
  right: 0;
  justify-content: flex-end;
  padding-right: .75rem;
}
.slider-nav span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  transition: background .15s ease, transform .15s ease;
}
.slider-nav svg {
  width: 28px;
  height: 28px;
}
.slider:hover .slider-nav,
.slider:focus-within .slider-nav {
  opacity: 1;
}
.slider-nav:hover span,
.slider-nav:focus-visible span {
  background: rgba(0, 0, 0, .8);
  transform: scale(1.08);
}
@media (hover: none) {
  /* touch screens: arrows always visible, a bit smaller */
  .slider-nav { opacity: 1; width: 52px; padding-inline: .35rem; }
  .slider-nav span { width: 36px; height: 36px; }
}

/* dots or "3 / 20" counter: bottom centre, inside the image */
.slider-bar {
  position: absolute;
  left: 50%;
  bottom: .75rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0 .4rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
}
.slider-dots {
  display: flex;
}
.slider-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.slider-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: transform .15s ease, background .15s ease;
}
.slider-dot:hover::before {
  background: rgba(255, 255, 255, .85);
}
.slider-dot[aria-current]::before {
  background: #fff;
  transform: scale(1.35);
}
.slider-count {
  padding: .3rem .5rem;
  color: #fff;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

/* pause / play: bottom right, inside the image */
.slider-pause {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
}
.slider-pause:hover,
.slider-pause:focus-visible {
  background: rgba(0, 0, 0, .8);
}
.slider-pause svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0s; }
  .drawer, .drawer-backdrop { transition: none; }
}

/* Contact map */

.map {
  position: relative;
  aspect-ratio: 1;
}
.map iframe,
.map button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
}
.map button strong {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--orange-text);
}

/* Footer */

.site-footer {
  margin-top: 20px;
  padding: 10px 0 2rem;
  border-top: 2px solid var(--rule);
  font-size: .875rem;
  color: var(--text);
}
.site-footer a {
  color: var(--text);
}
.site-footer a:hover {
  color: var(--orange-text);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-footer li + li::before {
  content: "|";
  padding: 0 .35em;
}
@media (max-width: 600px) {
  .site-footer ul {
    display: block;
  }
  .site-footer li {
    padding: 2px 0;
  }
  .site-footer li + li::before {
    content: none;
  }
  .site-footer a {
    text-decoration: underline;
  }
}

/* Project facts */

.facts {
  margin: 1.5rem 0 1rem;
}
@media (min-width: 993px) {
  aside > .facts {
    margin-top: 0;
    padding-left: var(--gap);
    border-left: 1px solid #ddd;
  }
}
.facts div + div {
  margin-top: .35rem;
}
.facts dt {
  font-weight: 700;
}
.facts dd {
  margin: 0;
}

/* News (homepage "Aktuell" box, uses the timeline) */

.news .timeline {
  margin-top: 0;
}
.news .timeline li {
  display: block;
  padding-bottom: .6rem;
}
/* newest news item is on top */
.news .timeline li:last-child::before {
  border-color: var(--rule);
  background: #fff;
}
.news .timeline li:first-child::before {
  border-color: var(--orange);
  background: var(--orange);
}
.news .timeline time {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.news .timeline a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: .2em;
}
.news .timeline a:hover {
  color: var(--orange-text);
}
.news-archive {
  margin-top: .75rem;
}
.news-archive > summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: .75rem;
}
.news-archive > summary:hover {
  color: var(--orange-text);
}

figcaption {
  margin-top: .4rem;
  font-size: .9em;
  color: var(--muted);
}

/* Project overview */

/* Projekte: quiet text tabs – areas (Alle · Architektur · Landschaftsarchitektur), below them the categories */
.filters {
  margin: 0 0 1.75rem;
}
.segmented {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #e2e2e2;
}
.segmented--sub {
  gap: 1.25rem;
  margin-top: .35rem;
  font-size: .9rem;
}
.segmented::-webkit-scrollbar {
  display: none;
}
.segmented a {
  display: block;
  padding: .35rem 0 .6rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  white-space: nowrap;
}
.segmented a:hover {
  color: var(--orange-text);
}
.segmented a[aria-current] {
  border-bottom-color: var(--orange-text);
  color: var(--text);
}

#projektliste {
  scroll-margin-top: 1rem;
}
#projektliste[aria-busy] .cards {
  opacity: .5;
  transition: opacity .15s ease;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem var(--gap);
  margin-bottom: 2rem;
}
.card a {
  position: relative;
  display: block;
  color: var(--text);
}
.card img,
.card-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eee;
  transition: opacity .2s ease;
}
.card a:hover img {
  opacity: .85;
}
.card-title {
  display: block;
  margin-top: .6rem;
  line-height: 1.35;
}
.card a:hover .card-title {
  color: var(--orange-text);
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
}

picture {
  display: block;
}

/* single-column text: keep lines at a readable length */
.layout > .text:only-child {
  max-width: 46rem;
}

/* Büro */

.glance {
  padding: 1.25rem 1.5rem 1.5rem;
  background: #f5f5f5;
  border-top: 3px solid var(--orange);
}
@media (min-width: 993px) {
  .glance {
    position: sticky;
    top: 1.5rem;
  }
}
.glance h2,
.partners > h2,
.team > h2,
.band h2 {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 1rem;
}
.glance dl {
  margin: 0 0 1.25rem;
}
.glance div + div {
  margin-top: .75rem;
}
.glance dt {
  font-size: .85rem;
  color: var(--muted);
}
.glance dd {
  margin: 0;
  color: var(--text);
}
.button {
  display: inline-block;
  padding: .55rem 1.1rem;
  background: var(--orange-text);
  color: #fff;
}
.button:hover,
.button:focus-visible {
  background: var(--text);
  color: #fff;
}

.partners,
.team,
.band {
  margin: 2.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid #ddd;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem var(--gap);
}
.partner h3 {
  margin: 0 0 .25rem;
  font-size: 1.3rem;
}
.partner p {
  margin: 0 0 .25rem;
  text-align: left;
}
.partner-role {
  color: var(--muted);
}
.timeline {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #e2e2e2;
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: .75rem;
  padding: .3rem 0 .3rem 1.1rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: .8rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rule);
}
.timeline li:last-child::before {
  border-color: var(--orange);
  background: var(--orange);
}
.timeline-years {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem var(--gap);
}
.member {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1rem 1.1rem;
  background: #f5f5f5;
}
.member strong {
  font-weight: 500;
  color: var(--text);
}
.member span {
  color: var(--muted);
}
.member a {
  margin-top: .35rem;
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.former {
  margin-top: 1.5rem;
}
.former summary {
  cursor: pointer;
  color: var(--muted);
}
.former summary:hover {
  color: var(--orange-text);
}
.former ul {
  margin-top: .75rem;
  columns: 16rem;
  column-gap: var(--gap);
  color: var(--muted);
}
.former li {
  padding: .15rem 0;
  break-inside: avoid;
}

/* Section bands (home, contact) */

.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.band-head h2 {
  margin: 0;
}

/* Kontakt */

.contact-card {
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.contact-card strong {
  font-weight: 500;
}
.contact-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.5rem;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
}
.contact-details div {
  display: contents;
}
.contact-details dt {
  color: var(--muted);
}
.contact-details dd {
  margin: 0;
  color: var(--text);
}
.contact-details a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: .2em;
}
.contact-details a:hover {
  color: var(--orange-text);
}
.map-links {
  margin-top: .5rem;
  color: var(--muted);
}

/* Home: project mosaic – one large tile, four small ones, all 4:3 */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: 2rem;
}
.mosaic a {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
  color: #fff;
}
.mosaic a:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.mosaic picture,
.mosaic img {
  width: 100%;
  height: 100%;
}
.mosaic img {
  object-fit: cover;
  transition: transform .4s ease;
}
.mosaic-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem .75rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  font-size: .9rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity .2s ease;
}
.mosaic a:first-child .mosaic-title {
  font-size: 1.05rem;
}
.mosaic a:hover img,
.mosaic a:focus-visible img {
  transform: scale(1.03);
}
.mosaic a:hover .mosaic-title,
.mosaic a:focus-visible .mosaic-title {
  opacity: 1;
}
@media (hover: none) {
  /* touch screens can't hover: always show the titles */
  .mosaic-title { opacity: 1; }
}
.mosaic-title {
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* small tiles are ~170px wide: smaller type, at most three lines */
  .mosaic a:not(:first-child) .mosaic-title {
    padding: 1.5rem .5rem .4rem;
    font-size: .75rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic img { transition: none; }
}

/* place of a project: under the heading, and as a second line in mosaic tiles */
.project-place {
  margin: -.6rem 0 1.25rem;
  color: var(--muted);
  font-size: 1.05rem;
}
.mosaic-title small {
  display: block;
  font-size: .85em;
  opacity: .85;
}

/* Wettbewerbe: result list */
.list-title {
  margin: 1rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.competition-list {
  width: 100%;
  margin: 1rem 0 2rem;
  border-collapse: collapse;
}
.competition-list th,
.competition-list td {
  padding: .7rem .75rem .7rem 0;
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.competition-list thead th {
  padding-top: 0;
  color: var(--muted);
  font-size: .85rem;
  border-bottom-color: #ccc;
}
.competition-list tbody th {
  color: var(--text);
}
.competition-list tbody th a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-underline-offset: .2em;
}
.competition-list tbody th a:hover {
  color: var(--orange-text);
}
.competition-list small {
  display: block;
  color: var(--muted);
  font-size: .85rem;
}
.competition-list td {
  color: var(--muted);
  white-space: nowrap;
}
.competition-list .is-awarded td:last-child {
  color: var(--orange-text);
  font-weight: 500;
}
@media (max-width: 600px) {
  /* stack: name on top, place and result underneath */
  .competition-list thead { display: none; }
  .competition-list tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: .6rem; padding: .6rem 0; border-bottom: 1px solid #e2e2e2; }
  .competition-list th, .competition-list td { padding: 0; border: 0; }
  .competition-list tbody th { grid-column: 1 / -1; grid-row: 1; margin-bottom: .2rem; }
  .competition-year:empty { display: none; }
}