/* GESTALTUNG: Grundlayout, Bildschirmgrößen, Beige-Variante und Leistungs-Kreis.
 * Farben sind in :root definiert. Spätere Abschnitte ergänzen die Grundregeln.
 * @media enthält die Anpassungen für kleinere Bildschirme.
 */
:root {
  --bg:#191919;
  --fg:#ededeb;
  --muted:#aaa;
  --line:#383838
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.75
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
a,button,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible,.hero:focus-visible {
  outline:2px solid #bcbcbc;
  outline-offset:6px
}
.skip {
  position:absolute;
  top:-100px;
  z-index:30;
  padding:10px;
  background:#eee;
  color:#111
}
.skip:focus {
  top:0
}
header {
  height:95px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 6%;
  background:#191919;
  position:sticky;
  top:0;
  z-index:10
}
.wordmark {
  font-size:30px;
  font-weight:600;
  letter-spacing:-1.5px;
  line-height:1
}
nav {
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:44px
}
nav a,.contact {
  font-size:14px;
  color:#c1c1c1;
  transition:color .2s
}
nav a:hover,.contact:hover {
  color:#fff
}
.contact {
  border-left:1px solid #4a4a4a;
  padding-left:32px
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:630px;
  height:calc(100svh - 125px);
  max-height:850px;
  margin:0 30px;
  overflow:hidden;
  background:#2a2a2a
}
.hero-image {
  position:absolute;
  inset:0;
  z-index:-3;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% center;
  filter:grayscale(1);
  opacity:.75
}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(12,12,12,.87),rgba(12,12,12,.62) 42%,rgba(12,12,12,.1));
}
.slides {
  height:100%;
  display:flex;
  align-items:center;
  padding:80px 8% 130px
}
.slide {
  width:100%;
  animation:appear .9s ease both
}
.slide[hidden] {
  display:none
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.eyebrow {
  font-size:12px;
  font-weight:400;
  letter-spacing:2.3px;
  line-height:1.6;
  margin:0 0 24px;
  color:#bdbdbd
}
.slide .eyebrow {
  color:#ddd;
  font-size:12px;
  letter-spacing:3px
}
.slide h1,.slide h2 {
  font-size:clamp(38px,4.5vw,69px);
  line-height:1.22;
  letter-spacing:-1.5px;
  font-weight:300;
  margin:0 0 26px;
  max-width:740px
}
.slide-copy {
  font-size:17px;
  color:#d2d2d2;
  line-height:1.8;
  margin:0 0 32px
}
.hero-link {
  display:inline-flex;
  align-items:center;
  gap:25px;
  border-bottom:1px solid #888;
  padding-bottom:8px;
  font-size:13px;
  letter-spacing:.3px
}
.hero-link:hover {
  border-color:#fff
}
.slider-bottom {
  position:absolute;
  bottom:28px;
  left:8%;
  right:8%;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.slider-nav {
  display:flex;
  gap:18px;
  align-items:center
}
.slider-nav button {
  background:none;
  border:0;
  color:#eee;
  padding:8px 5px;
  min-height:40px;
  min-width:35px
}
.slider-nav #playback {
  font-size:12px;
  color:#ddd;
  margin-left:10px;
  border-bottom:1px solid #888;
  line-height:1.3
}
.slide-count {
  font-size:12px;
  letter-spacing:2px;
  color:#ccc
}
.dots {
  display:flex;
  gap:6px
}
.dots button {
  border:0;
  background:transparent;
  padding:14px 5px;
  min-width:30px
}
.dots button::after {
  content:"";
  display:block;
  width:21px;
  height:2px;
  background:#999
}
.dots button[aria-current=true]::after {
  background:white
}
.scroll-link {
  font-size:12px;
  color:#ddd;
  letter-spacing:1px
}
.intro {
  text-align:center;
  max-width:760px;
  margin:auto;
  padding:115px 25px 95px
}
.intro h2 {
  font-size:34px;
  margin-bottom:25px;
  line-height:1.4
}
.intro>p:last-child {
  font-size:16px;
  color:var(--muted);
  max-width:610px;
  margin:0 auto;
  line-height:1.95
}
h2 {
  font-size:clamp(29px,3vw,42px);
  letter-spacing:-.8px;
  font-weight:300;
  line-height:1.35;
  margin:0
}
h3 {
  font-weight:400
}
.section {
  max-width:1320px;
  margin:auto;
  padding:85px 6%
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:45px
}
.section-heading .eyebrow {
  margin-bottom:14px
}
.section-heading>p {
  font-size:14px;
  color:var(--muted);
  margin:0 0 4px
}
.works {
  padding-top:35px;
  padding-bottom:90px
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.project-art {
  border:0;
  width:100%;
  aspect-ratio:1/1.1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:start;
  padding:24px;
  text-align:left;
  background:#252525;
  color:#bdbdbd;
  transition:background .4s
}
.art-three {
  background:#303030
}
.art-two {
  background:#232323
}
.project-art:hover {
  background:#383838
}
.placeholder {
  font-size:10px;
  letter-spacing:1.2px;
  line-height:1.5;
  color:#bcbcbc
}
.project-type {
  transition:transform .45s ease;
  font-size:38px;
  letter-spacing:-1px;
  font-weight:300;
  color:#e1e1e1
}
.art-footer {
  font-size:10px;
  letter-spacing:1.4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%
}
.art-footer i {
  font-style:normal;
  font-size:21px
}
.project-caption {
  margin-top:18px
}
.project-caption h3 {
  font-size:15px;
  margin:0 0 2px
}
.project-caption>span {
  font-size:12px;
  color:#a0a0a0
}
.draft-note {
  font-size:12px;
  color:#999;
  line-height:1.8;
  max-width:700px;
  margin:28px 0 0
}
.services {
  border-top:1px solid var(--line);
  padding-top:85px;
  padding-bottom:90px
}
.service-list {
  border-top:1px solid var(--line)
}
details {
  border-bottom:1px solid var(--line)
}
summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:28px;
  padding:25px 0;
  cursor:pointer
}
summary::-webkit-details-marker {
  display:none
}
.number {
  font-size:12px;
  color:#999
}
summary h3 {
  font-size:23px;
  font-weight:300;
  margin:0;
  letter-spacing:-.3px
}
.toggle {
  font-size:24px;
  color:#b0b0b0;
  margin-left:auto;
  font-weight:300;
  transition:transform .25s
}
details[open] .toggle {
  transform:rotate(45deg)
}
.service-body {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  padding:0 0 30px 43px
}
.service-body p {
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.85
}
.service-body ul {
  padding:0;
  margin:0;
  list-style:none;
  font-size:14px;
  color:#bdbdbd
}
.service-body li {
  padding:3px 0
}
.about {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  padding-top:90px;
  padding-bottom:100px
}
.about h2 {
  font-size:40px;
  line-height:1.4
}
.experience {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:45px
}
.experience strong {
  font-size:45px;
  font-weight:300;
  letter-spacing:-1.5px
}
.experience p {
  font-size:13px;
  line-height:1.8;
  color:#aaa
}
.about-copy {
  padding-top:36px
}
.about-copy p {
  font-size:16px;
  color:var(--muted);
  margin:0 0 22px
}
.about-copy .large {
  font-size:23px;
  color:#e4e4e4;
  line-height:1.5;
  font-weight:300;
  letter-spacing:-.3px;
  margin-bottom:26px
}
.text-link {
  display:inline-flex;
  gap:30px;
  border-bottom:1px solid #777;
  padding-bottom:6px;
  font-size:14px
}
.closing {
  max-width:none;
  text-align:center;
  background:#202020;
  padding:85px 6% 90px
}
.closing h2 {
  font-size:42px
}
.closing-bottom p {
  font-size:16px;
  color:#aaa;
  line-height:1.85;
  margin:25px 0
}
.mail {
  font-size:23px;
  font-weight:300;
  border-bottom:1px solid #777;
  padding-bottom:7px
}
footer {
  padding:45px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
footer .wordmark {
  font-size:25px
}
footer>span {
  font-size:12px;
  color:#999
}
footer div {
  display:flex;
  justify-content:end;
  gap:18px;
  flex-wrap:wrap;
  max-width:430px;
  font-size:12px;
  color:#999
}
dialog {
  background:#242424;
  color:var(--fg);
  border:1px solid #666;
  padding:45px;
  width:min(650px,90vw);
  max-height:85vh
}
dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(5px)
}
dialog h2 {
  font-size:30px
}
dialog p {
  color:#bbb
}
dialog .eyebrow {
  margin-top:12px
}
.close {
  position:absolute;
  right:18px;
  top:10px;
  background:none;
  border:0;
  color:white;
  font-size:30px
}
.case-structure {
  border-top:1px solid var(--line);
  margin-top:25px
}
.case-structure h3 {
  font-size:17px;
  margin:22px 0 5px
}
.case-structure p {
  font-size:15px;
  margin:0
}
::selection {
  background:#ddd;
  color:#111
}
@media(min-width:1700px) {
  .hero {
    margin-left:auto;
    margin-right:auto;
    width:calc(100% - 80px);
    max-width:1800px
  }
}
@media(max-width:900px) {
  header {
    height:80px;
    padding:0 5%
  }
  .hero {
    margin:0 18px;
    min-height:570px;
    height:calc(85svh - 80px)
  }
  nav {
    gap:22px;
    margin-right:25px
  }
  .contact {
    padding-left:25px
  }
  .slides {
    padding:75px 7% 115px
  }
  .slider-bottom {
    left:7%;
    right:7%
  }
  .hero-image {
    object-position:65% center
  }
  .hero-shade {
    background:linear-gradient(90deg,#111d,#1117)
  }
  .section-heading {
    display:block
  }
  .section-heading>p {
    margin-top:18px
  }
  .project-grid {
    gap:16px
  }
  .project-art {
    padding:18px
  }
  .project-type {
    font-size:31px
  }
  .art-footer {
    font-size:9px;
    letter-spacing:.7px
  }
  .about {
    gap:45px
  }
  .service-body {
    gap:35px
  }
  footer {
    flex-wrap:wrap
  }
  footer div {
    max-width:none;
    width:100%;
    justify-content:start
  }
  .intro {
    padding-top:80px;
    padding-bottom:70px
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:80px
  }
  header {
    height:75px
  }
  .wordmark {
    font-size:27px
  }
  nav {
    gap:16px;
    margin:0
  }
  nav a {
    font-size:12px
  }
  .contact {
    display:none
  }
  .hero {
    margin:0 12px;
    min-height:570px;
    max-height:760px;
    height:calc(90svh - 75px)
  }
  .hero-image {
    object-position:68% center
  }
  .hero-shade {
    background:#111a
  }
  .slides {
    padding:60px 8% 120px
  }
  .slide h1,.slide h2 {
    font-size:38px;
    line-height:1.28;
    letter-spacing:-1px
  }
  .slide-copy {
    font-size:16px
  }
  .slide .eyebrow {
    font-size:11px;
    letter-spacing:2px
  }
  .slider-bottom {
    left:8%;
    right:8%;
    bottom:24px
  }
  .slider-nav {
    gap:8px
  }
  .slider-nav #playback {
    margin-left:0
  }
  .dots {
    gap:0
  }
  .dots button {
    min-width:24px
  }
  .dots button::after {
    width:15px
  }
  .scroll-link {
    display:none
  }
  .section {
    padding:65px 7%
  }
  .works {
    padding-top:15px
  }
  .intro {
    padding:70px 7% 60px
  }
  .intro h2 {
    font-size:28px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .project-art {
    aspect-ratio:1.3;
    padding:25px
  }
  .project-type {
    font-size:39px
  }
  .placeholder,.art-footer {
    font-size:11px
  }
  .project-caption h3 {
    font-size:16px
  }
  .section-heading {
    margin-bottom:30px
  }
  summary {
    gap:18px;
    padding:22px 0
  }
  summary h3 {
    font-size:20px;
    line-height:1.5
  }
  .service-body {
    grid-template-columns:1fr;
    gap:20px;
    padding-left:32px
  }
  .about {
    display:block
  }
  .about h2 {
    font-size:34px
  }
  .experience {
    margin-top:25px
  }
  .about-copy {
    padding-top:35px
  }
  .closing h2 {
    font-size:34px
  }
  .mail {
    font-size:21px
  }
  footer {
    padding:35px 7%;
    gap:24px
  }
  footer div {
    gap:15px
  }
  dialog {
    padding:34px 24px
  }
  dialog h2 {
    font-size:27px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .project-art:hover .project-type {
    transform:translateX(7px)
  }
  .art-footer i {
    transition:transform .4s
  }
  .project-art:hover .art-footer i {
    transform:translate(3px,-3px)
  }
  nav a {
    position:relative
  }
  nav a::after {
    content:"";
    position:absolute;
    bottom:-7px;
    left:0;
    width:100%;
    height:1px;
    background:#ddd;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s
  }
  nav a:hover::after {
    transform:scaleX(1)
  }
}
/* Warm editorial direction */
:root {
  --bg:#1d1c1a;
  --fg:#eee9e1;
  --muted:#b0aaa1;
  --line:#413d37;
  --sand:#d8c9b5;
  --paper:#e9e2d7;
  --ink:#2a2824
}
body {
  background:var(--bg);
  color:var(--fg)
}
header {
  background:#1d1c1af5;
  border-bottom:1px solid #37332e
}
.wordmark {
  color:#e3d6c5
}
nav a,.contact {
  color:#d3ccc2
}
.contact {
  border-left-color:#5b5348
}
.eyebrow {
  color:#bcb0a0
}
em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.035em
}
.hero {
  margin-top:18px;
  border:1px solid #514a40
}
.hero-image {
  filter:grayscale(.75) sepia(.13);
  opacity:.72
}
.hero-shade {
  background:linear-gradient(90deg,rgba(23,21,18,.91),rgba(23,21,18,.72) 45%,rgba(23,21,18,.25))
}
.slide h1,.slide h2 {
  font-size:clamp(38px,4.5vw,69px);
  line-height:1.26
}
.slide em {
  color:#dfcdb5
}
.slide .eyebrow {
  color:#cbb99f
}
.hero-link {
  border-color:#a58f72
}
.hero-link span {
  color:#d8c2a3
}
.slide-copy {
  color:#d8d1c7
}
.slider-nav button,.slider-nav #playback {
  color:#e2d2bd
}
.dots button[aria-current=true]::after {
  background:#d8c2a3
}
.intro {
  max-width:1320px;
  padding:110px 6%;
  text-align:left;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  column-gap:9%;
  align-items:center
}
.intro .eyebrow {
  grid-column:1/-1;
  font-size:12px;
  margin-bottom:28px
}
.intro h2 {
  font-size:clamp(30px,3.1vw,44px);
  margin:0;
  line-height:1.36
}
.intro h2 em {
  color:#d3c0a7
}
.intro>p:last-child {
  font-size:16px;
  line-height:1.95;
  margin:0;
  max-width:490px;
  color:#b8afa3
}
.works {
  background:var(--paper);
  color:var(--ink);
  max-width:none;
  padding:90px max(6%,calc((100% - 1162px)/2)) 85px
}
.works .eyebrow {
  color:#756653
}
.works h2 {
  font-size:clamp(31px,3.3vw,46px)
}
.works .section-heading>p {
  color:#6f6458
}
.works .section-heading {
  margin-bottom:44px
}
.project-grid {
  grid-template-columns:1.18fr 1fr;
  gap:30px 35px;
  align-items:start
}
.project:first-child {
  grid-column:1;
  grid-row:1/3
}
.project.second,.project.third {
  grid-column:2
}
.project-art {
  position:relative;
  aspect-ratio:1.45;
  background:#c7b69e;
  color:#342f27;
  padding:28px;
  border:1px solid #b4a186;
  transition:background .45s,border-color .45s
}
.project:first-child .project-art {
  aspect-ratio:auto;
  min-height:650px;
  background:#d8cbb8;
  border-color:#c4b59e
}
.project-art .placeholder {
  font-size:11px;
  color:#645744;
  letter-spacing:1.5px
}
.project-type {
  font-size:clamp(28px,3vw,44px);
  line-height:1.2;
  color:#322b23;
  letter-spacing:-1px
}
.project:first-child .project-type {
  font-size:clamp(38px,4.3vw,64px);
  line-height:1.16
}
.project-type em {
  font-weight:400
}
.project:first-child .art-footer {
  border-top:1px solid #b7a78e;
  padding-top:20px
}
.art-footer {
  color:#625440;
  font-size:11px
}
.art-three {
  background:#ae9980;
  border-color:#a58e71
}
.art-three .project-type {
  color:#221f1a
}
.art-three .placeholder,.art-three .art-footer {
  color:#3d3429
}
.art-two {
  background:#35332f;
  border-color:#35332f
}
.art-two .project-type {
  color:#e2d4bf
}
.art-two .placeholder,.art-two .art-footer {
  color:#c6b8a3
}
.project-art:hover {
  background:#c3b098;
  border-color:#a38c6d
}
.project:first-child .project-art:hover {
  background:#d0bea5
}
.art-two:hover {
  background:#454038
}
.project-caption {
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:13px
}
.project-caption h3 {
  color:#352f26;
  font-size:15px
}
.project-caption>span {
  color:#746859;
  font-size:12px
}
.works .draft-note {
  color:#736656;
  margin-top:35px
}
.works :focus-visible {
  outline-color:#64533d
}
.services {
  padding-top:105px;
  padding-bottom:100px;
  border-top:0
}
.services .section-heading .eyebrow {
  color:#bda78b
}
.services h2 {
  color:#ebe3d7
}
.service-list,details {
  border-color:#494137
}
summary .number {
  color:#bc9f7b
}
summary h3 {
  color:#e4dacd
}
.toggle {
  color:#d1b48e
}
.service-body p {
  color:#bdb2a4
}
.service-body ul {
  color:#c7bcad
}
details[open] summary h3 {
  color:#dbc5a7
}
.about {
  border-top-color:#494137;
  gap:65px;
  padding-top:80px
}
.about-title {
  padding:36px;
  background:#2a2722;
  border:1px solid #4b4033;
  align-self:start
}
.about-title .eyebrow {
  color:#c5ac8c
}
.about h2 {
  font-size:clamp(32px,3.4vw,45px);
  color:#eadcc9
}
.experience {
  padding-top:22px;
  border-top:1px solid #524636
}
.experience strong {
  color:#d5bc9c;
  font-size:50px
}
.experience p {
  color:#c0b09a
}
.about-copy {
  padding-top:15px
}
.about-copy p {
  color:#b9afa1
}
.about-copy .large {
  color:#e8ddce
}
.text-link {
  color:#decbb2;
  border-color:#806c52
}
.closing {
  background:#d8c9b5;
  color:#2c2721;
  padding-top:85px;
  padding-bottom:85px;
  border-top:1px solid #bdaa8f
}
.closing .eyebrow {
  color:#6b5942
}
.closing h2 {
  font-size:clamp(37px,4.7vw,66px)
}
.closing-bottom p {
  color:#625442
}
.mail {
  color:#372d21;
  border-color:#8f7858
}
.closing :focus-visible {
  outline-color:#5b4933
}
footer {
  background:#1b1a18
}
footer>span,footer div {
  color:#b0a392
}
dialog {
  background:#29251f;
  border-color:#867155;
  color:#eee4d7
}
dialog p {
  color:#c5b9a8
}
dialog .eyebrow {
  color:#c9b08e
}
::selection {
  background:#d8c9b5;
  color:#26221c
}
@media(min-width:1700px) {
  .hero {
    margin-top:22px
  }
  .project:first-child .project-art {
    min-height:710px
  }
}
@media(max-width:900px) {
  .intro {
    gap:30px;
    padding-top:80px;
    padding-bottom:80px
  }
  .intro h2 {
    font-size:31px
  }
  .project-grid {
    gap:28px 24px
  }
  .project:first-child .project-art {
    min-height:580px
  }
  .project-art {
    aspect-ratio:auto;
    min-height:242px;
    padding:22px
  }
  .project:first-child .project-type {
    font-size:43px
  }
  .project-type {
    font-size:32px
  }
  .about {
    gap:30px
  }
  .about-title {
    padding:25px
  }
  .experience {
    gap:15px
  }
  .experience strong {
    font-size:43px
  }
}
@media(max-width:600px) {
  .hero {
    margin-top:8px
  }
  .hero-shade {
    background:rgba(27,24,20,.73)
  }
  .slide h1,.slide h2 {
    font-size:37px;
    line-height:1.3
  }
  .intro {
    display:block;
    padding:65px 7%
  }
  .intro .eyebrow {
    font-size:11px;
    margin-bottom:22px
  }
  .intro h2 {
    font-size:29px;
    margin-bottom:25px
  }
  .works {
    padding:60px 7%
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .project:first-child,.project.second,.project.third {
    grid-column:auto;
    grid-row:auto
  }
  .project:first-child .project-art {
    min-height:370px
  }
  .project-art {
    min-height:270px;
    padding:25px
  }
  .project:first-child .project-type {
    font-size:44px
  }
  .project-type {
    font-size:36px
  }
  .services {
    padding:65px 7%
  }
  .about {
    padding-top:50px
  }
  .about-title {
    padding:30px
  }
  .about-copy {
    padding-top:35px
  }
  .experience strong {
    font-size:48px
  }
  .closing {
    padding:65px 7%
  }
  .closing h2 {
    font-size:38px
  }
}
/* Interactive service orbit */
.orbit-section {
  max-width:none;
  padding:115px max(6%,calc((100% - 1162px)/2));
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:85px;
  background:radial-gradient(ellipse at 80% 50%,#302b24 0%,#201e1a 46%,#1b1a18 85%)
}
.services-copy h2 {
  font-size:clamp(35px,3.6vw,50px);
  line-height:1.3
}
.services-copy h2 em {
  color:#dcc6a9
}
.services-intro {
  color:#bfb3a3;
  margin:28px 0;
  font-size:16px;
  line-height:1.85;
  max-width:500px
}
.service-detail {
  border-top:1px solid #5d4d39;
  padding-top:24px;
  min-height:285px
}
.service-detail>p {
  color:#c6bbad;
  font-size:16px;
  line-height:1.85;
  margin:0 0 19px
}
.service-detail ul {
  list-style:none;
  padding:0;
  margin:0;
  color:#e0d2bf;
  font-size:14px;
  line-height:1.8
}
.service-detail li {
  padding:3px 0 3px 15px;
  position:relative
}
.service-detail li::before {
  content:'—';
  position:absolute;
  left:0;
  color:#a9906e;
  font-size:11px
}
.orbit {
  width:100%;
  aspect-ratio:1;
  position:relative;
  min-width:0
}
.orbit-track {
  position:absolute;
  inset:10%;
  border:1px solid #766149;
  border-radius:50%;
  opacity:.6
}
.service-center {
  position:absolute;
  inset:20%;
  background:#e4d7c4;
  color:#30271c;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  box-shadow:0 22px 75px #09070440
}
.center-number {
  font-size:12px;
  letter-spacing:2px;
  color:#786347;
  margin-bottom:17px
}
.service-center h3 {
  font-size:clamp(20px,2vw,28px);
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.4px;
  margin:0 0 13px
}
.service-center p {
  font-size:14px;
  line-height:1.7;
  margin:0;
  color:#6a5942
}
.center-caption {
  font-size:9px;
  letter-spacing:1.4px;
  margin-top:20px;
  color:#766248
}
.orbit-button {
  position:absolute;
  transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:50%;
  border:1px solid #ae9676;
  background:#efe6d8;
  color:#493b29;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  transition:background .3s,box-shadow .3s
}
.orbit-0 {
  top:10%;
  left:50%
}
.orbit-1 {
  top:50%;
  left:90%
}
.orbit-2 {
  top:90%;
  left:50%
}
.orbit-3 {
  top:50%;
  left:10%
}
.orbit-number {
  font-family:Georgia,serif;
  font-size:24px;
  line-height:1.2
}
.orbit-label {
  font-size:10px;
  line-height:1.3
}
.orbit-button[aria-pressed=true] {
  background:#b79a72;
  border-color:#ddc9ac;
  color:#20180d;
  box-shadow:0 0 0 7px #c3a47b18
}
.orbit-button:hover {
  background:#d1b996
}
.orbit-button:focus-visible {
  outline:2px solid #f0dfc6;
  outline-offset:7px
}
@media(min-width:1450px) {
  .orbit-section {
    gap:95px
  }
  .orbit {
    min-width:520px
  }
  .service-center {
    padding:32px
  }
}
@media(max-width:1100px) {
  .orbit-section {
    gap:35px;
    grid-template-columns:1fr 1fr
  }
  .orbit-button {
    width:77px;
    height:77px
  }
  .service-center {
    inset:18%;
    padding:20px
  }
  .service-center h3 {
    font-size:21px
  }
  .service-center p {
    font-size:13px;
    line-height:1.5
  }
  .center-caption {
    display:none
  }
  .center-number {
    margin-bottom:10px
  }
}
@media(max-width:850px) {
  .orbit-section {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:70px 7%;
    gap:35px
  }
  .services-copy {
    display:contents
  }
  .services-copy>.eyebrow {
    order:0;
    margin:0
  }
  .services-copy h2 {
    order:1;
    margin-top:-14px
  }
  .services-intro {
    order:2;
    margin:0;
    max-width:650px
  }
  .orbit {
    order:3;
    max-width:560px;
    align-self:center
  }
  .service-detail {
    order:4;
    min-height:0;
    padding-top:28px
  }
  .service-center {
    inset:20%;
    padding:26px
  }
  .service-center h3 {
    font-size:26px
  }
  .service-center p {
    font-size:15px
  }
  .orbit-button {
    width:90px;
    height:90px
  }
  .orbit-label {
    font-size:11px
  }
  .center-number {
    margin-bottom:16px
  }
}
@media(max-width:430px) {
  .orbit-section {
    padding-left:6%;
    padding-right:6%;
    gap:27px
  }
  .orbit {
    margin:12px 0
  }
  .orbit-button {
    width:67px;
    height:67px
  }
  .orbit-number {
    font-size:20px
  }
  .orbit-label {
    font-size:9px
  }
  .service-center {
    inset:19%;
    padding:20px
  }
  .service-center h3 {
    font-size:19px;
    line-height:1.22;
    margin-bottom:9px
  }
  .service-center p {
    font-size:12px;
    line-height:1.45
  }
  .center-number {
    font-size:10px;
    margin-bottom:9px
  }
  .services-copy h2 {
    font-size:34px
  }
}
@media(max-width:350px) {
  .service-center {
    inset:18%;
    padding:16px
  }
  .service-center h3 {
    font-size:17px
  }
  .service-center p {
    font-size:11px
  }
  .orbit-button {
    width:59px;
    height:59px
  }
  .orbit-label {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  .orbit-button {
    transition:none
  }
}
@media(max-width:430px) {
  .orbit-button {
    width:74px;
    height:74px
  }
  .orbit-label {
    font-size:11px;
    max-width:64px;
    line-height:1.2
  }
  .orbit-number {
    font-size:20px
  }
  .service-center {
    inset:23%;
    padding:16px
  }
  .service-center h3 {
    font-size:19px;
    line-height:1.25;
    margin:0
  }
  .service-center p {
    display:none
  }
  .center-number {
    font-size:12px;
    margin-bottom:12px
  }
}
@media(max-width:350px) {
  .orbit-button {
    width:66px;
    height:66px
  }
  .orbit-label {
    font-size:11px;
    max-width:61px
  }
  .service-center h3 {
    font-size:17px
  }
  .service-center {
    padding:10px
  }
  .center-number {
    font-size:11px
  }
}

/* STARTAUSSAGE: auf allen Bildschirmgrößen gut lesbar. */
.slide h1 {
  font-size: clamp(32px, 3.8vw, 55px);
  max-width: 850px;
  line-height: 1.3;
}
@media (max-width: 600px) {
  .slide h1 {
    font-size: 30px;
    letter-spacing: -0.7px;
  }
}

/* Abgestimmte Texte: Absätze und hervorgehobener Lehrauftrag. */
#service-description { white-space: pre-line; }
.teaching-highlight { border-left: 2px solid #b79a72; padding: 4px 0 2px 24px; margin: 30px 0; }
.teaching-highlight h3 { font-size: 25px; line-height: 1.4; color: #e0c9ab; margin: 0 0 18px; font-weight: 400; }
.teaching-highlight p { margin-bottom: 0; }
.closing-bottom p { max-width: 700px; margin-left: auto; margin-right: auto; }
.service-center p { line-height: 1.5; }
.center-caption { margin-top: 10px; }
@media (min-width: 851px) { .service-center { inset: 18%; padding: 24px; } .service-center h3 { font-size: clamp(19px, 1.8vw, 26px); } }

/* LEISTUNGEN: Studiofoto und sanft blinkende aktive Zahl.
 * Hintergrundbild hier austauschen: assets/studio-original.webp
 * Blinkgeschwindigkeit: 2.4s; aktive Auswahl wird über aria-pressed gesteuert.
 */
.orbit-section {
  position: relative;
  isolation: isolate;
  background: #1d1c1a;
}
.orbit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/studio-original.webp");
  background-size: cover;
  background-position: center 72%;
  filter: grayscale(.85);
  opacity: .48;
  pointer-events: none;
}
.orbit-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(24,22,19,.8), rgba(24,22,19,.58) 47%, rgba(24,22,19,.36));
  pointer-events: none;
}
.orbit-button[aria-pressed="true"] .orbit-number {
  animation: active-service-number 2.4s ease-in-out infinite;
}
@keyframes active-service-number {
  0%, 100% { opacity: 1; }
  50% { opacity: .32; }
}
@media (max-width: 850px) {
  .orbit-section::before { background-position: 60% center; }
  .orbit-section::after {
    background: linear-gradient(180deg, rgba(24,22,19,.8), rgba(24,22,19,.38) 52%, rgba(24,22,19,.88));
  }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-button[aria-pressed="true"] .orbit-number {
    animation: none;
    opacity: 1;
  }
}

/* Klarere Auswahl und dauerhaft sichtbare Angebote. */
.orbit-hint {
  position: absolute;
  bottom: -43px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #ead5b8;
  font-size: 14px;
  line-height: 1.6;
}
#service-detail-title {
  margin: 0 0 15px;
  color: #e1c7a4;
  font-size: 22px;
  line-height: 1.4;
}
.orbit-button[aria-pressed="true"] {
  background: #d8b587;
  color: #21190f;
  border: 2px solid #f5dfbd;
  animation: selected-service-ring 2s ease-in-out infinite;
}
.orbit-button[aria-pressed="true"] .orbit-number {
  font-weight: 700;
  animation: selected-service-number 2s ease-in-out infinite;
}
@keyframes selected-service-ring {
  0%, 100% { box-shadow: 0 0 0 4px rgba(220,183,130,.32), 0 0 18px rgba(220,183,130,.16); }
  50% { box-shadow: 0 0 0 13px rgba(220,183,130,.14), 0 0 34px rgba(220,183,130,.42); }
}
@keyframes selected-service-number {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.18); }
}
.services-overview {
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 48px;
  border-top: 1px solid #79664c;
}
.services-overview > .eyebrow { margin-bottom: 15px; }
.services-overview > h3 {
  font-size: 31px;
  font-weight: 300;
  line-height: 1.4;
  color: #ede0ce;
  margin: 0 0 36px;
}
.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 32px;
}
.overview-number { color: #c9aa82; font-size: 13px; letter-spacing: 2px; }
.service-overview-item h4 {
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  margin: 13px 0 18px;
  color: #f0e2cd;
}
.service-overview-item ul { margin: 0; padding: 0; list-style: none; }
.service-overview-item li {
  color: #d5c8b7;
  padding: 8px 0;
  border-top: 1px solid #79664c65;
  font-size: 14px;
  line-height: 1.65;
}
@media (max-width: 1000px) {
  .service-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }
}
@media (max-width: 850px) {
  .services-overview { order: 5; margin-top: 15px; padding-top: 35px; }
  .orbit { margin-bottom: 48px; }
  .service-detail { min-height: 0; }
}
@media (max-width: 540px) {
  .service-overview-grid { grid-template-columns: 1fr; gap: 30px; }
  .services-overview > h3 { font-size: 27px; }
  .orbit-hint { font-size: 14px; bottom: -50px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-button[aria-pressed="true"],
  .orbit-button[aria-pressed="true"] .orbit-number {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .orbit-button[aria-pressed="true"] { transform: translate(-50%,-50%); box-shadow: 0 0 0 6px #d8b58730; }
}

/* Alle Detailtexte im bestehenden Layout untereinander, ohne Kästchen. */
.service-detail { min-height: 0; }
.service-text { padding: 30px 0; border-top: 1px solid #76624870; scroll-margin-top: 120px; }
.service-text:first-child { padding-top: 0; border-top: 0; }
.service-text:last-child { padding-bottom: 0; }
.service-text h3 { margin: 0 0 18px; color: #e1c7a4; font-size: 22px; line-height: 1.4; font-weight: 400; }
.service-text-number { color: #ac9270; font-size: 13px; letter-spacing: 1px; margin-right: 9px; vertical-align: middle; }
.service-text.is-active h3 { color: #f2ddbd; }
.service-text.is-active .service-text-number { color: #efd0a1; }
.service-text-body p { color: #c6bbad; font-size: 16px; line-height: 1.85; margin: 0 0 20px; }
.service-text-body p:last-child { margin-bottom: 0; }
@media (min-width: 851px) { .orbit-section > .orbit { align-self: start; margin-top: 165px; } }

/* Neue Einleitung: zwei vollständige Absätze neben der Überschrift. */
.intro-copy p {
  font-size: 16px;
  line-height: 1.95;
  color: #b8afa3;
  margin: 0 0 22px;
}
.intro-copy p:last-child { margin-bottom: 0; }
.intro { align-items: start; }
@media (max-width: 600px) {
  .intro-copy { margin-top: 25px; }
}

/* Portfolio: Bildbeispiele ersetzen die typografischen Platzhalter. */
.project-art { overflow: hidden; isolation: isolate; padding: 22px; }
.portfolio-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .65s ease;
}
.project-art::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(transparent,rgba(20,17,13,.6));
}
.project-art .placeholder {
  display: inline-block;
  background: rgba(238,230,216,.95);
  color: #514431;
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: 1.3px;
}
.project-art .art-footer,
.project:first-child .project-art .art-footer {
  border: 0;
  padding-top: 0;
  color: #fff3de;
  font-size: 11px;
}
#dialog-image { width: 100%; max-height: 55vh; object-fit: contain; margin: 0 0 25px; background: #d8cbb8; }
#dialog-image[hidden] { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-art:hover .portfolio-image { transform: scale(1.035); }
}

/* Sechs Projekte im versetzten Masonry-Layout. */
.project-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 30px 35px; align-items: start; }
.project-grid > .project { grid-column: auto; grid-row: auto; min-width: 0; }
.project-grid .project .project-art { width: 100%; aspect-ratio: 1.45; min-height: 0; height: auto; }
.project-grid > .project:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.project-grid > .project:nth-child(2) { grid-column: 2; grid-row: 1; }
.project-grid > .project:nth-child(3) { grid-column: 2; grid-row: 2; }
.project-grid > .project:nth-child(4) { grid-column: 1; grid-row: 3; }
.project-grid > .project:nth-child(5) { grid-column: 2; grid-row: 3 / 5; }
.project-grid > .project:nth-child(6) { grid-column: 1; grid-row: 4; }
.project-grid > .project:nth-child(1),
.project-grid > .project:nth-child(5) { display: flex; flex-direction: column; align-self: stretch; }
.project-grid .project:nth-child(1) .project-art,
.project-grid .project:nth-child(5) .project-art { flex: 1; aspect-ratio: auto; }
.teaching-highlight .examiner-copy { margin-top: 22px; }
@media (max-width: 650px) {
  .project-grid { grid-template-columns: 1fr; gap: 30px; }
  .project-grid > .project:nth-child(n) { grid-column: auto; grid-row: auto; display: block; }
  .project-grid .project:nth-child(n) .project-art { aspect-ratio: 1.45; }
  .project-grid .project:first-child .project-art { aspect-ratio: 4 / 5; }
}

/* Expertise: native, auch ohne JavaScript aufklappbare Beschreibungen. */
.service-text summary { position: relative; display: block; list-style: none; padding-right: 42px; cursor: pointer; }
.service-text summary::-webkit-details-marker { display: none; }
.service-text summary h3 { margin-bottom: 10px; }
.service-preview { display: block; color: #c6bbad; font-size: 16px; line-height: 1.7; }
.service-toggle { position: absolute; top: 8px; right: 3px; width: 18px; height: 18px; }
.service-toggle::before,.service-toggle::after { content: ""; position: absolute; background: #e1c7a4; }
.service-toggle::before { top: 8px; left: 0; width: 18px; height: 1px; }
.service-toggle::after { top: 0; left: 8px; height: 18px; width: 1px; }
.service-text[open] .service-toggle::after { display: none; }
.service-text[open] .service-text-body { margin-top: 24px; }
.service-text summary:focus-visible { outline: 2px solid #e1c7a4; outline-offset: 7px; }
.service-text summary:hover h3 { color: #fff0d9; }

/* Der Kreis begleitet ausschließlich die aufklappbaren Leistungen. */
.orbit-section { display: block; }
.services-interactive { display: grid; grid-template-columns: 1fr 1.1fr; align-items: start; gap: 85px; }
.orbit-rail { align-self: stretch; min-width: 0; }
.orbit-rail > .orbit { position: sticky; top: 115px; margin: 165px auto 55px; width: min(100%, calc(100svh - 190px)); min-width: 0; }
.orbit-section > .services-overview { margin-top: 85px; }
.service-text summary { scroll-margin-top: 140px; }
@media (max-width: 1100px) {
  .services-interactive { grid-template-columns: 1fr 1fr; gap: 35px; }
}
@media (max-width: 850px) {
  .services-interactive { display: flex; flex-direction: column; gap: 35px; }
  .orbit-rail { display: contents; }
  .orbit-rail > .orbit { top: 90px; z-index: 5; width: 180px; min-width: 0; height: 180px; margin: 0 auto; aspect-ratio: 1; background: #211f1c; border-radius: 50%; box-shadow: 0 0 0 10px #211f1c; }
  .orbit-rail .orbit-button { width: 44px; height: 44px; }
  .orbit-rail .orbit-label,.orbit-rail .orbit-hint,.orbit-rail .service-center p,.orbit-rail .center-caption { display: none; }
  .orbit-rail .service-center { inset: 20%; padding: 10px; }
  .orbit-rail .service-center h3 { font-size: 15px; margin: 0; letter-spacing: 0; }
  .orbit-rail .center-number { font-size: 10px; margin-bottom: 5px; letter-spacing: 1px; }
  .orbit-rail .orbit-number { font-size: 20px; }
  .service-text summary { scroll-margin-top: 305px; }
  .orbit-section > .services-overview { margin-top: 50px; }
}

/* Ein einzelner Startbereich mit einmalig einfliegenden Buchstaben. */
.hero-single .slide { animation: none; }
.hero-single .hero-image { object-position: center center; }
.hero-bottom { justify-content: flex-end; }
.hero-word,.hero-character { display: inline-block; }
.hero-character { animation: hero-letter-in 1s cubic-bezier(.65,0,.35,1) var(--fly-delay,0ms) both; }
@keyframes hero-letter-in {
  from { opacity: 0; transform: translateY(var(--fly-y,40px)) scale(.9); filter: blur(30px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-character { animation: none; opacity: 1; transform: none; filter: none; }
}

.hero-accessible-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Ruhiges Startfoto ohne Zoom. */
.hero-single .hero-image {
  transform-origin: 70% 40%;
  animation: none;
  transform: none;
}
@keyframes hero-photo-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero-single .hero-image { animation: none; transform: none; opacity: .72; }
}

/* Startgestaltung nach Marias Schriftreferenz: schmaler Name, klare Versalien. */
@font-face {
  font-family: 'Oswald';
  src: url('assets/oswald-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.hero-single .hero-image { filter: saturate(1.12) brightness(1.08); opacity: 1; }
.hero-single .hero-shade { background: linear-gradient(90deg,rgba(16,20,22,.68),rgba(16,20,22,.38) 48%,rgba(16,20,22,.08)); }
.hero-single .slides { padding-left: 6%; padding-right: 6%; }
.hero-single .slide .hero-name {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: clamp(42px,6.2vw,100px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: .28em;
  color: #c7a67e;
  max-width: none;
  margin: 0 0 18px;
}
.hero-tagline { display: flex; align-items: baseline; gap: clamp(24px,4vw,72px); margin: 0 0 38px; }
.hero-tagline::before { content: ''; flex: 0 0 clamp(50px,7.3vw,120px); height: 2px; background: #eee; align-self: flex-start; margin-top: .7em; }
.hero-tagline,.hero-tagline-copy {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: clamp(14px,1.65vw,27px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .16em;
  line-height: 1.65;
  color: #f3f2f0;
}
.hero-tagline-copy { min-width: 0; }
@media (max-width: 600px) {
  .hero-single .slide .hero-name { font-size: clamp(28px,7vw,42px); letter-spacing: .18em; line-height: 1.35; margin-bottom: 20px; }
  .hero-tagline { gap: 16px; }
  .hero-tagline::before { flex-basis: 28px; }
  .hero-tagline,.hero-tagline-copy { font-size: 13px; letter-spacing: .12em; line-height: 1.85; }
  .hero-single .hero-shade { background: linear-gradient(90deg,rgba(16,20,22,.62),rgba(16,20,22,.25)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-single .hero-image { opacity: 1; }
}

/* Proportionen und Bildkontrast nach der vollständigen Startreferenz. */
.hero-single .hero-image { filter: saturate(.9) brightness(.72); }
.hero-single .hero-shade { background: linear-gradient(90deg,rgba(19,24,27,.86) 0%,rgba(19,24,27,.76) 15%,rgba(19,24,27,.55) 30%,rgba(19,24,27,.30) 43%,rgba(19,24,27,.10) 55%,rgba(19,24,27,.02) 65%,rgba(19,24,27,0) 76%); }
.hero-single .slides { padding-left: 14%; }
.hero-single .slide .hero-name { font-size: clamp(36px,3.25vw,66px); letter-spacing: .28em; margin-bottom: 10px; }
.hero-tagline { gap: clamp(24px,2.35vw,48px); }
.hero-tagline::before { flex-basis: clamp(40px,3.5vw,72px); }
.hero-tagline,.hero-tagline-copy { font-size: clamp(14px,1vw,20px); letter-spacing: .14em; }
@media (max-width: 850px) {
  .hero-single .slides { padding-left: 7%; padding-right: 7%; }
}
@media (max-width: 600px) {
  .hero-single .slide .hero-name { font-size: clamp(28px,7vw,36px); letter-spacing: .18em; margin-bottom: 18px; }
  .hero-tagline { gap: 16px; }
  .hero-tagline::before { flex-basis: 28px; }
  .hero-tagline,.hero-tagline-copy { font-size: 13px; letter-spacing: .12em; }
}

/* Ursprüngliche Slider-Typografie und Bildausschnitt. */
.hero-single .hero-image { object-position: center top; transform-origin: 70% 0%; }
.hero-single .slides { padding-left: 8%; padding-right: 8%; }

/* Bild am oberen Rand ausrichten. */
.hero-single .hero-image { object-position: center top; transform-origin: 50% 25%; }

/* Originalprojekte: ruhige zweispaltige Galerie und Projektansichten. */
.project-grid.real-projects { display:block;columns:2;column-gap:35px; }
.project-grid.real-projects > .project:nth-child(n) { display:block;break-inside:avoid;margin:0 0 38px; }
.project-grid.real-projects .project:nth-child(n) .project-art { display:block;aspect-ratio:3 / 2;width:100%;height:auto;min-height:0; }
.project-grid.real-projects .project:nth-child(1) .project-art { aspect-ratio:1 / 1; }
.project-grid.real-projects .project:nth-child(3) .project-art { aspect-ratio:5 / 4; }
.project-grid.real-projects .project:nth-child(5) .project-art { aspect-ratio:6 / 5; }
.project-grid.real-projects .project:nth-child(7) .project-art { aspect-ratio:5 / 4; }
.real-projects .project-art .art-footer { position:absolute;bottom:22px;left:22px;right:22px;display:flex;justify-content:space-between;font-size:14px; }
.project-open { overflow:hidden; }
#project-dialog { width:min(1050px,calc(100% - 32px));max-width:1050px;max-height:90svh;padding:44px;overflow-y:auto; }
#project-dialog .close { position:absolute;right:16px;top:12px; }
#dialog-copy { max-width:800px;line-height:1.65; }
#dialog-services { display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:22px 0;font-size:14px; }
#dialog-services li { border-bottom:1px solid #96897a;padding-bottom:6px; }
#dialog-website { display:inline-block;margin:0 0 28px;padding:10px 0;border-bottom:1px solid currentColor;font-size:16px; }
#dialog-website[hidden] { display:none; }
.project-gallery figure { margin:0; }
#project-dialog #dialog-image { display:block;width:100%;height:clamp(250px,57vh,650px);max-height:none;object-fit:contain;margin:0;background:#e9e6df; }
#gallery-caption { margin-top:12px;font-size:14px;line-height:1.5; }
.gallery-controls { display:flex;align-items:center;justify-content:center;gap:25px;margin:18px 0;font-size:14px; }
.gallery-controls button { width:44px;height:44px;border:1px solid currentColor;background:transparent;color:inherit;font-size:22px;cursor:pointer; }
#gallery-thumbs { display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px; }
#gallery-thumbs button { flex:0 0 92px;height:70px;border:2px solid transparent;padding:3px;background:transparent;cursor:pointer; }
#gallery-thumbs button[aria-current="true"] { border-color:currentColor; }
#gallery-thumbs img { width:100%;height:100%;object-fit:cover; }
#project-dialog button:focus-visible,.project-art:focus-visible { outline:2px solid currentColor;outline-offset:4px; }
@media(max-width:700px) {
 .project-grid.real-projects { columns:1; }
 #project-dialog { padding:48px 20px 24px; }
 #project-dialog h2 { font-size:30px; }
 #project-dialog #dialog-image { height:45vh; }
}

/* Dreispaltiges Masonry mit sichtbaren Medienpaketen. */
.project-grid.real-projects { columns:3;column-gap:28px; }
.project-grid.real-projects > .project:nth-child(n) { margin:0 0 32px; }
.project-grid.real-projects .project:nth-child(n) .project-art { aspect-ratio:3/2; }
.project-grid.real-projects .project:nth-child(3) .project-art { aspect-ratio:4/5; }
.project-grid.real-projects .project:nth-child(4) .project-art { aspect-ratio:1/1; }
.project-grid.real-projects .project:nth-child(7) .project-art { aspect-ratio:5/4; }
.project-grid.real-projects .project:nth-child(9) .project-art { aspect-ratio:1/1; }
.project-grid.real-projects .project.project-chatzis .project-art { aspect-ratio:auto;padding:0;background:#eee6d8; }
.project-grid.real-projects .project.project-chatzis .project-art::after { display:none; }
.real-projects .project-chatzis .project-art .art-footer { color:#312b23;bottom:18px; }
.project-grid.real-projects .project.project-mvz .project-art { aspect-ratio:1955/1248; }
.project-mvz .portfolio-image { object-fit:contain;background:#f7f8f2; }
.real-projects .project-caption h3 { font-size:clamp(19px,1.5vw,26px);line-height:1.3; }
.real-projects .project-caption>span { font-size:14px;line-height:1.5; }
.project-status { display:inline-block!important;width:max-content;padding:5px 9px;margin-bottom:9px;color:#eee8db!important;background:#404b2c;font-size:14px!important; }
@media(max-width:1050px) { .project-grid.real-projects { columns:2; } }
@media(max-width:650px) { .project-grid.real-projects { columns:1; } }

/* Gemeinsame Projekt-Mockups: Website und weitere Markenanwendungen. */
.project-grid.real-projects .project.project-chatzis .project-art { aspect-ratio:2/3;padding:0; }
.project-grid.real-projects .project.project-chatzis .portfolio-image { object-fit:cover; }
.project-grid.real-projects .project.project-chatzis .project-art::after { display:block; }
.real-projects .project-chatzis .project-art .art-footer { color:#fff3de; }
.project-grid.real-projects .project.project-mvz .project-art { aspect-ratio:3/2; }
.project-mvz .portfolio-image { object-fit:cover; }


/* Leistungsübersicht im hellen Portfolio-Bereich */
#arbeiten .services-overview {
  margin-top: 60px;
  border-top-color: #b5a58f;
}

#arbeiten .services-overview > h3,
#arbeiten .service-overview-item h4 {
  color: #282522;
}

#arbeiten .services-overview .eyebrow,
#arbeiten .services-overview .overview-number {
  color: #756047;
}

#arbeiten .service-overview-item li {
  color: #49433c;
  border-top-color: #cfc3b3;
}