html { -webkit-text-size-adjust: 100%; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
[hidden] { display: none !important; }

/* aliastom creative design studio. Gemeinsame Styles aller Seiten.
   Layout: wie das Original. Weisse Seite, Slider oben, dunkler Menübalken (klebt beim Scrollen), Helvetica, mauve Überschriften, dunkler Footer. */
:root {
  --bg: #ffffff;
  --fg: #222222;
  --head: #b3a0a3;
  --dark: #383334;
  --darker: #2d2a2b;
  --nav: #bdb8b9;
  --tan: #f1c795;
  --line: #b9b9b9;
  --chev: #cfcfcb;
  --ph: #ececea;
  --muted-foot: #8a8586;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", serif;
  --maxw: 1160px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 1rem; line-height: 1.4;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: 0;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--dark); }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
.wrap { max-width: var(--maxw); margin-inline: auto; }
.band { margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter-l) var(--gutter-r); }
.sec-h { font-family: var(--sans); font-weight: 300; font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.2; text-transform: uppercase; color: var(--head); margin: 0 0 1.5rem; text-wrap: balance; }

/* Slider */
.slider { position: relative; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: clamp(2.5rem, 7vw, 6rem); }
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 5vw, 4rem); align-items: start; min-height: 16rem; }
.slide .shot { display: flex; justify-content: center; }
.slide .shot img { width: 100%; max-height: 26rem; object-fit: contain; }
.slide .logo { display: flex; justify-content: center; padding-top: clamp(0rem, 2vw, 1.5rem); }
.slide .logo img { max-height: 11rem; width: auto; max-width: 100%; object-fit: contain; }
.slide figcaption { grid-column: 1 / -1; text-align: center; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #9a9a9a; }
.arrow { position: absolute; top: 40%; transform: translateY(-50%); width: 3rem; height: 5rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.arrow svg { width: 2.2rem; height: 4rem; stroke: var(--chev); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.arrow:hover svg { stroke: var(--head); }
#prev { left: 0; } #next { right: 0; }

/* Menübalken */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--dark); color: var(--nav); }
.site-header .wrap { display: flex; align-items: center; gap: 1.75rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: #fff; }
.brand img { height: 3rem; width: auto; max-width: 14rem; }
.brand .wm { font-family: var(--serif); font-style: italic; font-size: 1.9rem; letter-spacing: -.01em; line-height: 1; }
.brand .wm small { display: block; font-family: var(--sans); font-size: .72rem; color: var(--tan); text-align: right; letter-spacing: .02em; }
.brand img:not([hidden]) + .wm { display: none; }
.nav { display: flex; gap: 1.5rem; }
.nav a { text-decoration: none; color: var(--nav); font-size: 1.2rem; padding: .4rem 0; }
.nav a:hover { color: #fff; }
.lang { display: flex; gap: .1rem; margin-left: auto; }
.lang button { font: inherit; font-size: .8125rem; letter-spacing: .08em; background: none; color: #9d9798; border: 1px solid transparent; padding: .3rem .5rem; cursor: pointer; }
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { color: #fff; border-color: #6a6465; }
.nav-toggle { display: none; margin-left: .25rem; background: none; border: 0; color: var(--nav); padding: .5rem; line-height: 0; cursor: pointer; }
.nav-toggle:hover { color: #fff; }
.nav-toggle svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }

/* Intro */
.intro { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.intro p { margin: 0; }
.intro .wrap > div { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; }

/* Leistungen */
.services { padding-block: clamp(2rem, 5vw, 3.5rem); }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.service { min-width: 0; max-width: 22rem; }
.service h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.75rem); text-transform: uppercase; color: var(--dark); margin: 0 0 1.25rem; }
.service p { margin: 0 0 1rem; }
.tags { list-style: none; margin: 0; padding: 0; color: #555; font-size: .9375rem; }
.tags li { display: inline; }
.tags li::after { content: ", "; }
.tags li:last-child::after { content: ", \2026"; }

/* Arbeiten */
.works { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.grid.masonry { display: flex; }
.masonry .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(1rem, 2.4vw, 2rem); }
.tile { display: block; min-width: 0; }
.thumb { position: relative; min-height: 8rem; background: var(--ph); overflow: hidden; }
.thumb .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; color: #8d8d8d; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.thumb img.main { position: relative; width: 100%; height: auto; }
.thumb img.alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.tile:hover .thumb img.alt, .tile:focus-visible .thumb img.alt { opacity: 1; }

/* Footer */
.foot { background: var(--dark); padding-block: clamp(2.5rem, 6vw, 4.5rem) 1.75rem; }
.say { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.2rem); letter-spacing: .02em; text-transform: uppercase; color: #777; margin: 0; word-spacing: .3em; }
.say a { text-decoration: none; }
.say a:hover { color: #aaa; }
.foot .lead { color: var(--tan); font-size: .9375rem; margin: .1rem 0 1.25rem; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.mail { color: #fff; font-size: 1.15rem; overflow-wrap: anywhere; text-decoration-color: var(--tan); text-underline-offset: .2em; }
.copy { font: inherit; font-size: .875rem; background: none; color: var(--tan); border: 1px solid var(--tan); padding: .4rem .9rem; cursor: pointer; }
.copy:hover { background: var(--tan); color: var(--dark); }
.foot-logo { display: flex; justify-content: flex-end; margin-block: 1rem 2rem; }
.foot-logo img { height: 4.5rem; width: auto; max-width: 14rem; }
.foot-logo .wm { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: #fff; }
.foot-logo img:not([hidden]) + .wm { display: none; }
.partners { list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid #5a5455; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.partners a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #cfc9ca; font-size: .875rem; min-height: 3rem; }
.partners img { height: 3rem; width: auto; max-width: 11rem; object-fit: contain; }
.partners img:not([hidden]) + .fb { display: none; }
.legalbar { background: var(--darker); padding-block: 1.5rem 2.5rem; text-align: center; font-family: var(--serif); font-size: .875rem; letter-spacing: .18em; color: var(--tan); }
.legalbar p { margin: 0; max-width: 70rem; margin-inline: auto; line-height: 1.7; }
.legalbar .links { margin-bottom: .25rem; }
.legalbar a { color: var(--muted-foot); text-decoration: none; margin-inline: .35em; }
.legalbar a:hover { color: #fff; }

/* Responsive */
@media (max-width: 899px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-header .wrap { position: relative; gap: 1rem; }
  .nav { display: none; position: absolute; left: calc(-1 * var(--gutter-l)); right: calc(-1 * var(--gutter-r)); top: 100%; flex-direction: column; gap: 0; background: var(--dark); border-top: 1px solid #4a4445; padding: .5rem var(--gutter-r) 1rem var(--gutter-l); }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid #4a4445; }
  .brand img { height: 2.5rem; }
  .service-grid { grid-template-columns: 1fr; }
  .service { max-width: none; }
  .slide { grid-template-columns: 1fr; gap: 1rem; }
  .slide .logo img { max-height: 7rem; }
  .track { margin-inline: 2.25rem; }
  .arrow { width: 2.25rem; }
  .arrow svg { width: 1.5rem; height: 3rem; }
  .foot-logo { justify-content: flex-start; }
  .legalbar { letter-spacing: .08em; }
}
@media (max-width: 559px) { .grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Projektseite */
.project { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); }
.crumb { margin: 0 0 .5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--head); }
.crumb a { text-decoration: none; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.pager a { color: #777; text-decoration: none; }
.pager a:hover { color: var(--dark); }
.project .block { margin: 0 0 clamp(2rem, 5vw, 3.5rem); }
.cap { margin-bottom: 1rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #8d8d8d; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
@media (max-width: 559px) { .gallery { grid-template-columns: 1fr; } }

/* Kontaktseite */
.cpage { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.cap { margin: 0 0 1rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #8d8d8d; }
.places { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--line); }
.cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 2.5rem; }
.cities li { font-weight: 300; font-size: clamp(2rem, 7vw, 4.25rem); line-height: 1.1; text-transform: uppercase; color: var(--dark); }
.touch .sec-h a { text-decoration: none; }
.touch .sec-h a:hover { color: var(--dark); }
.cpage .mail { color: var(--dark); font-size: clamp(1.25rem, 4vw, 1.75rem); text-decoration-color: var(--head); }
.cpage .copy { color: var(--dark); border-color: var(--dark); }
.cpage .copy:hover { background: var(--dark); color: #fff; }

/* Rechtsseite */
.imprint { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.imprint .lg { max-width: 46rem; }
.imprint .sec-h { margin-top: 3rem; }
.imprint .lg > .sec-h:first-child { margin-top: 0; }
.imprint .meta { color: #777; font-size: .9375rem; margin: -.5rem 0 1.25rem; }
.imprint h3 { font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dark); margin: 2rem 0 .5rem; }
.imprint p { margin: 0 0 1rem; }
.imprint ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.imprint li { margin-bottom: .75rem; }
.imprint a { color: var(--dark); text-decoration-color: var(--head); text-underline-offset: .15em; }
.imprint dl { display: grid; grid-template-columns: minmax(7rem, 14rem) minmax(0, 1fr); gap: .5rem 1.5rem; margin: 0 0 1rem; }
.imprint dt { color: #777; }
.imprint dd { margin: 0; overflow-wrap: anywhere; }
.imprint mark.todo { background: #fff1b8; color: #222; padding: 0 .25em; }
@media (max-width: 559px) { .imprint dl { grid-template-columns: 1fr; gap: 0; } .imprint dd { margin-bottom: .75rem; } }

/* AGB-Seite */
.legal { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); max-width: 50rem; }
.legal .meta { color: #777; font-size: .9375rem; margin: -.5rem 0 1.25rem; }
.legal .meta:empty { display: none; }
.legal .sub { font-weight: 400; font-size: 1.15rem; color: var(--dark); margin: 0 0 1rem; }
.legal .intro-t { margin: 0 0 .5rem; }
.legal h3 { font-weight: 400; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dark); margin: 2.25rem 0 .75rem; }
.legal .clause { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 .5rem; margin-bottom: .85rem; }
.legal .clause p { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.legal .num { color: var(--head); font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .legal .clause { grid-template-columns: 2.5rem minmax(0, 1fr); } }

/* Projektseiten */
.project .sub { margin: -.75rem 0 .75rem; font-size: 1.15rem; color: var(--dark); }
.project .desc { margin: 0 0 1.5rem; }
.project .note { margin: 0 0 1rem; }
.project .credit { margin: 1rem 0 0; font-size: .875rem; color: #777; }
.project a { color: var(--dark); text-decoration-color: var(--head); text-underline-offset: .15em; }
.project .sec-h a { color: inherit; text-decoration: none; }
.gallery.one { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.shot { margin: 0; min-width: 0; }
.shot > a { display: block; text-decoration: none; }
.shot figcaption { margin-top: .4rem; font-size: .875rem; color: #777; }
.client-ph { display: inline-block; padding: .5rem 1rem; background: #fff1b8; color: #222; font-size: .875rem; }

/* Cookie-Hinweis */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--darker); color: #fff; border-top: 1px solid #5a5455; padding-block: 1rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.cookie-bar .in { max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.cookie-bar p { margin: 0; flex: 1 1 28rem; min-width: 0; font-size: .9375rem; line-height: 1.5; }
.cookie-bar p a { color: var(--tan); text-underline-offset: .15em; }
.cookie-bar .btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.cookie-bar button { font: inherit; font-size: .9375rem; padding: .55rem 1.1rem; cursor: pointer; border: 1px solid var(--tan); background: none; color: var(--tan); }
.cookie-bar button:hover { background: var(--tan); color: var(--dark); }
.tablewrap { overflow-x: auto; margin: 0 0 1rem; }
.ctable { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: .9375rem; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
.ctable th { font-weight: 400; color: #777; }
.ctable code { font-size: .875rem; background: #f1f1ef; padding: 0 .25em; }
.linklike { font: inherit; letter-spacing: inherit; color: var(--muted-foot); background: none; border: 0; padding: 0; margin-inline: .35em; cursor: pointer; text-decoration: none; }
.linklike:hover { color: #fff; }