/* Keep the hero and About background as one continuous dark surface. The
   one-pixel overlap prevents a fractional-pixel seam at non-integer zoom. */
.hero,
.about-shell {
  background-color: var(--ink);
}

/* Morph replaces the former Foodwise placeholder. Every application remains
   an individual source asset; the desktop arrangement mirrors the supplied
   style-tile composition while preserving the established left copy column. */
.brand-panel-morph {
  position: relative;
  margin-top: 0;
  overflow: hidden;
  border-radius: 0 0 clamp(30px, 5vw, 72px) clamp(30px, 5vw, 72px);
}

.brand-case-morph {
  z-index: 2;
  position: relative;
  padding-top: 0;
}

.morph-orb-left {
  top: 8%;
}

.morph-orb-right {
  bottom: 4%;
}

.brand-showcase-morph {
  aspect-ratio: 2.2 / 1;
}

.morph-copy {
  color: rgba(28, 43, 53, 0.82);
}

.morph-copy .eyebrow {
  color: var(--blue);
}

.morph-copy > p:last-child {
  margin: 0;
}

.brand-showcase-morph .morph-letterhead img,
.brand-showcase-morph .morph-card-back img,
.brand-showcase-morph .morph-card-front img {
  box-shadow:
    clamp(6px, 0.55vw, 11px)
    clamp(8px, 0.7vw, 14px)
    clamp(6px, 0.6vw, 12px)
    rgba(28, 43, 53, 0.38);
  filter: none;
}

@media (min-width: 1024px) {
  .brand-showcase-morph {
    min-height: 0;
    margin-bottom: 0;
    transform: none;
  }

  .brand-showcase-morph .morph-composition {
    position: absolute;
    top: 50%;
    right: 0;
    width: 69%;
    aspect-ratio: 770 / 490;
    transform: translateY(-50%);
    display: block;
  }

  .brand-showcase-morph > .morph-copy {
    position: absolute;
    top: 7%;
    left: 0;
    width: 25.5%;
    max-width: none;
  }

  .brand-showcase-morph .morph-copy .eyebrow {
    margin-bottom: 11px;
    font-size: clamp(11px, 0.82vw, 16px);
  }

  .brand-showcase-morph .morph-copy > p:last-child {
    font-size: clamp(13px, 1vw, 20px);
    line-height: 1.52;
  }

  .brand-showcase-morph .morph-asset {
    position: absolute;
    margin: 0;
  }

  .brand-showcase-morph .morph-asset img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .brand-showcase-morph .morph-poster {
    z-index: 2;
    top: 0;
    left: 0;
    width: 36.36%;
    height: 35.1%;
    overflow: hidden;
  }

  .brand-showcase-morph .morph-poster img {
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .brand-showcase-morph .morph-letterhead {
    z-index: 2;
    top: auto;
    bottom: 0;
    left: 0;
    width: 27.4%;
  }

  .brand-showcase-morph .morph-card-back {
    z-index: 3;
    top: 0;
    left: 38.57%;
    width: 17.92%;
  }

  /* Desktop keeps the two original card elements directly on the composition
     grid. Their shared carousel version is used only below 1024px. */
  .brand-showcase-morph .morph-card-mobile {
    display: none;
  }

  .brand-showcase-morph .morph-card-front {
    z-index: 4;
    top: 14.69%;
    left: 48.44%;
    width: 18.96%;
  }

  .brand-showcase-morph .morph-tshirt {
    z-index: 3;
    top: calc(43.2% - 1cm);
    left: 29.35%;
    width: 19.09%;
    height: 35.9%;
    display: grid;
    place-items: center;
  }

  .brand-showcase-morph .morph-tshirt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .brand-showcase-morph .morph-beanie {
    z-index: 3;
    top: 36.15%;
    left: 51.36%;
    width: 13%;
  }

  .brand-showcase-morph .morph-label {
    z-index: 4;
    top: auto;
    bottom: 0;
    left: 29.61%;
    width: 17.53%;
  }

  .brand-showcase-morph .morph-hoodie {
    z-index: 3;
    top: auto;
    bottom: 0;
    left: 49.09%;
    width: 18.31%;
  }

  .brand-showcase-morph .morph-style-tile {
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30.91%;
  }

  .brand-showcase-morph .morph-style-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    translate: 0 1.4%;
  }

}

@media (max-width: 1023px) {
  .brand-showcase-morph {
    aspect-ratio: auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: visible;
    transform: none;
  }

  .brand-showcase-morph > .morph-copy {
    position: relative;
    inset: auto;
    width: 80%;
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
  }

  .brand-showcase-morph .morph-copy p {
    text-align: left;
  }

  .brand-showcase-morph .brand-asset-track {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(340px, 53vw, 540px);
    aspect-ratio: auto;
    transform: none;
  }

  .brand-showcase-morph .brand-asset-track > .morph-style-tile {
    padding: 1px;
  }

  .brand-showcase-morph .morph-card-desktop {
    display: none !important;
  }

  /* Keep the two sides of the business card together on one slide. Their
     slight overlap mirrors the desktop composition and the ReLeaf carousel. */
  .brand-showcase-morph .brand-asset-track > .morph-card-pair {
    display: block;
    position: relative !important;
    padding: 0;
  }

  .brand-showcase-morph .morph-card-pair > .morph-card-side {
    position: absolute;
    top: 50%;
    width: min(58%, 380px);
    margin: 0;
  }

  .brand-showcase-morph .morph-card-pair > .morph-card-back {
    z-index: 1;
    left: 29%;
    transform: translate(-50%, -58%);
  }

  .brand-showcase-morph .morph-card-pair > .morph-card-front {
    z-index: 2;
    left: 65%;
    transform: translate(-50%, -42%);
  }

  .brand-showcase-morph .brand-asset-track > .morph-card-pair .morph-card-side img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  .brand-showcase-morph .morph-beanie img {
    width: 112% !important;
    height: 112% !important;
    max-width: none !important;
    max-height: none !important;
  }

  .brand-showcase-morph .morph-tshirt img {
    translate: 0 -1cm;
  }

  /* A tight drop shadow follows the applications themselves; it no longer
     creates the oversized rectangle visible around the small-format slides. */
  .brand-showcase-morph .morph-letterhead img,
  .brand-showcase-morph .morph-card-pair img {
    box-shadow: none;
    filter: drop-shadow(2px 3px 2px rgba(28, 43, 53, 0.34));
  }
}

@media (min-width: 621px) and (max-width: 1023px) {
  #brand-design .brand-showcase-morph {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    column-gap: clamp(10px, 2vw, 18px);
    align-items: center;
  }

  #brand-design .brand-showcase-morph > .morph-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
  }

  #brand-design .brand-showcase-morph .brand-asset-track {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 620px) {
  #brand-design .brand-showcase-morph {
    display: block;
  }

  #brand-design .brand-showcase-morph > .morph-copy {
    width: 100%;
  }

  #brand-design .brand-showcase-morph .brand-asset-track {
    height: clamp(300px, 94vw, 420px);
  }
}

@media (max-width: 768px) {
  .brand-showcase-morph .morph-copy > p:last-child {
    font-size: 13px;
    line-height: 1.5;
  }
}

.about-shell {
  margin-top: -1px;
}

/* Blend the soft shadow below the About panel into the Web Design surface
   instead of ending it on a hard horizontal edge. */
#web-design.web-project {
  background-color: var(--ink);
  background-image: linear-gradient(
    to bottom,
    rgb(26, 41, 51) 0,
    var(--ink) clamp(72px, 8vw, 120px)
  );
}

/* Screen Design: restore comfortable space below the composition and keep
   its left background orb fully inside the section vertically. */
@media (min-width: 769px) {
  .process-screen {
    isolation: isolate;
  }

  .process-screen::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: calc(50% - 50vw);
    width: clamp(250px, 27vw, 420px);
    aspect-ratio: 1;
    background: url("../assets/web/process/blue-circle-left.svg") center / contain
      no-repeat;
    opacity: 0.78;
    transform: translate(-10%, -50%);
    pointer-events: none;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  .process-heading-screen {
    margin-top: 0;
  }

  /* Use the same centred composition axis as on phones and tablets. The
     three artworks now share one horizontal centre line while retaining the
     complete, uncropped device assets. */
  .process-screen .screen-showcase {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1120 / 550;
    position: relative;
  }

  .process-screen .screen-page-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36%;
    max-width: none;
    transform: translate(-50%, -50%);
  }

  /* Show the complete device assets at laptop widths, matching the uncropped
     impression of the tablet composition instead of enlarging their contents. */
  .process-screen .screen-device {
    top: 50%;
    height: 51%;
    overflow: visible;
    transform: translateY(-50%);
  }

  .process-screen .screen-laptop {
    left: calc(13% + 0.6cm);
    width: 32%;
    aspect-ratio: auto;
    overflow: hidden;
  }

  .process-screen .screen-phone {
    right: 19%;
    width: 20%;
    aspect-ratio: auto;
  }

  .process-screen .screen-device img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }

  /* The source image contains a generous empty area on its left. Moving the
     image inside its frame trims only part of that space and reveals more of
     the actual laptop beside the central screendesign. */
  .process-screen .screen-laptop img {
    transform: translateX(-12%);
  }

  /* The laptop version keeps Screen Design deliberately free of decorative
     circles; the surrounding Web Design rhythm remains unchanged. */
  .process-screen::before {
    content: none;
    display: none;
  }
}

@media (min-width: 1600px) {
  .process-screen::before {
    width: 470px;
  }
}

/* Ultra-wide desktop: keep both device mockups fully visible. Their former
   fixed-height wrappers cropped the artwork as the percentage widths grew. */
@media (min-width: 2000px) {
  .process-screen::before {
    content: none;
    display: none;
  }

  .process-screen .screen-device {
    height: auto;
  }

  .process-screen .screen-laptop {
    aspect-ratio: 690 / 620;
  }

  .process-screen .screen-phone {
    aspect-ratio: 698 / 898;
  }

  .process-screen .screen-device img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }
}

/* Beyond the largest authored PC canvas, preserve the complete 2560px design
   and scale it as one unit instead of letting individual fluid rules drift. */
@media (min-width: 2561px) {
  :root {
    --wide-shell-gutter: 149.333px;
    --wide-inner-gutter: 106.667px;
  }

  /* At 4K only the image inside the laptop frame moves; the frame itself
     remains on the established Screen Design grid. */
  .process-screen .screen-laptop img {
    transform: translateX(calc(6% - 0.2cm));
  }

  .process-screen .process-heading-screen {
    transform: translateY(0.3cm);
  }

  html {
    scroll-padding-top: var(--ultrawide-scroll-padding, 92px);
  }

  main {
    width: 2560px;
    max-width: none;
    zoom: var(--ultrawide-pc-scale, 1);
  }

  .site-header {
    left: 1280px;
    width: 2261.334px;
    max-width: none;
  }

  .hero {
    min-height: var(--ultrawide-pc-height, 100svh);
  }

  .web-style-title,
  .web-styleguide {
    width: 2048px;
  }

  .brand-case-dark .uniform-blue-orb-layer {
    width: 2560px;
  }

  .section-orb-left,
  .process-circle-left,
  .web-process::before {
    left: calc(50% - 1280px);
  }

  .section-orb-right,
  .process-circle-right,
  .web-styleguide > .web-style-circle {
    right: calc(50% - 1280px);
  }
}

/* Brand cases: the artwork stage belongs below its heading. A former negative
   lift pulled the copy into the large project name on desktop and laptop. */
@media (min-width: 769px) {
  .brand-showcase-virtual,
  .brand-showcase-releaf {
    margin-bottom: 0;
    transform: none;
  }

  .brand-case-dark .uniform-blue-orb-layer {
    overflow: visible;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  /* The Brand chapter is scaled as a 1440px desktop canvas on laptops. Undo
     that scale for this viewport-wide ornament layer so its 10% crops are
     measured against the real browser edge, not the inner chapter edge. */
  .brand-case-dark .uniform-blue-orb-layer {
    width: calc(100vw / var(--laptop-pc-scale, 1));
  }
}

/* Place both brand ideas directly beneath their project headings and keep
   their common left edge aligned with those headings. */
@media (min-width: 769px) {
  /* Align the complete Style Tile copy with the chapter guide line instead
     of allowing inherited centering to shift its visual starting edge. */
  .web-style-title,
  .web-style-title .web-style-kicker,
  .web-style-title .web-style-name,
  .web-styleguide > .web-concept,
  .web-styleguide > .web-concept h3,
  .web-styleguide > .web-concept p {
    text-align: left;
  }

  /* Match the divider after Brand Design to the standard 1120px chapter
     rule without narrowing the project content beneath it. */
  #brand-design .brand-projects {
    border-top: 0;
  }

  #brand-design .brand-projects::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 1120px);
    height: 1px;
    background: rgba(28, 44, 56, 0.4);
    transform: translateX(-50%);
    pointer-events: none;
  }

  #brand-design .brand-case-header {
    margin-bottom: 16px;
    text-align: left;
  }

  #brand-design .virtual-copy,
  #brand-design .releaf-copy {
    top: 0;
    left: 0;
    text-align: left;
  }

  #brand-design .virtual-copy {
    width: 26%;
    max-width: none;
  }

  #brand-design .virtual-copy p,
  #brand-design .releaf-copy p {
    text-align: left;
  }
}

@media (min-width: 1600px) {
  #brand-design .brand-projects::before {
    width: 100%;
  }
}

/* Compact Technical Skills into two columns of three on phones. */
@media (max-width: 768px) {
  /* Let the grey chapter surfaces run edge to edge on phones. Removing only
     the outer dark-blue gutter gives their content more usable width. */
  .about-shell,
  #brand-design,
  #fotografie {
    padding-inline: 0;
  }

  .about-details > .about-card {
    text-align: center;
  }

  .about-details > .about-card > .about-card-icon,
  .technical-card .technical-heading > .about-card-icon {
    margin-right: auto;
    margin-left: auto;
    object-position: center;
  }

  .contact-card a {
    width: max-content;
    margin-inline: auto;
  }

  .language-card dl {
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }

  .soft-skills-card ul,
  .interests-list {
    justify-content: center;
    text-align: center;
  }

  .education-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
  }

  .education-card > .about-card-icon {
    margin: 0 auto 10px;
  }

  .education-card > h3 {
    margin: 0 0 18px;
  }

  .education-card .education-entry {
    width: 100%;
    margin: 0;
  }

  .education-card .education-entry + .education-entry {
    margin-top: 28px;
  }

  .education-card .education-copy {
    margin-top: 4px !important;
  }

  .technical-card .technical-heading {
    margin-bottom: 20px;
    text-align: center;
  }

  .technical-card .software-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 12px 16px;
    width: 100%;
    justify-items: center;
  }

  .technical-card .software-skill {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .technical-card .software-icon {
    flex: 0 0 clamp(32px, 9.5vw, 40px);
    width: clamp(32px, 9.5vw, 40px);
    height: clamp(32px, 9.5vw, 40px);
    max-width: none;
  }

  .technical-card .software-stars {
    flex: 0 1 clamp(48px, 15vw, 64px);
    width: clamp(48px, 15vw, 64px);
    max-width: 64px;
    height: auto;
    margin-top: 0;
  }

  .web-earth {
    top: calc(-82px + 2cm);
  }

  .brand-showcase-virtual,
  .brand-showcase-releaf {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    overflow: visible;
  }

  .brand-showcase-virtual > .virtual-copy,
  .brand-showcase-releaf > .releaf-copy {
    margin-bottom: 24px;
  }

  .brand-asset-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    height: clamp(300px, 88vw, 380px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  /* Give the two letterheads enough vertical room for the requested larger
     mobile presentation without changing the size of the business cards. */
  .brand-showcase-virtual .brand-asset-track {
    height: clamp(312px, 91.2vw, 375px);
  }

  /* ReLeaf also needs a little more horizontal room for the three-piece
     application mockup. The extended track still stays inside the panel. */
  .brand-showcase-releaf .brand-asset-track {
    height: clamp(326px, calc(41vw + 195px), 450px);
  }

  .brand-asset-track::-webkit-scrollbar {
    display: none;
  }

  .brand-asset-track > .brand-asset {
    position: relative !important;
    inset: auto !important;
    display: grid;
    place-items: center;
    flex: 0 0 100%;
    width: 100% !important;
    height: 100%;
    aspect-ratio: auto !important;
    margin: 0;
    padding: clamp(20px, 6vw, 34px);
    overflow: hidden;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .brand-asset-track > .brand-asset img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
  }

  /* Use the complete available slide for both Style Tiles while retaining a
     one-pixel safety edge, so neither composition can be clipped. */
  .brand-asset-track > .brand-asset-style {
    padding: 0;
  }

  .brand-asset-track > .brand-asset-style img {
    width: calc(100% - 2px) !important;
    height: calc(100% - 2px) !important;
  }

  /* Keep the Virtual Wildlife letterhead large, centered and fully inside its slide. */
  .brand-showcase-virtual .brand-asset-letterhead {
    padding: 0;
  }

  .brand-showcase-virtual .brand-asset-letterhead img {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
  }

  /* The ReLeaf source has a large transparent area on its left side. Offset
     that empty canvas so the visible letterhead itself sits in the center;
     the complete artwork remains inside the slide. */
  .brand-showcase-releaf .brand-asset-letterhead {
    display: grid;
    place-items: center;
    padding: 4px;
  }

  .brand-showcase-releaf .brand-asset-letterhead img {
    width: clamp(203px, calc(92.5vw - 93px), 469px) !important;
    height: clamp(292px, calc(88vw - 8px), 372px) !important;
    min-width: 0;
    min-height: 0;
    margin: auto;
    object-fit: contain;
    object-position: 50% 50%;
    transform: scale(1.44) translateX(-24%) !important;
    transform-origin: 50% 50%;
  }

  /* Preserve the already approved business-card and envelope sizes while
     the ReLeaf carousel becomes taller for the enlarged letterhead. */
  .brand-showcase-releaf .brand-asset-card img,
  .brand-showcase-releaf .brand-asset-envelope img {
    width: clamp(173px, calc(82.5vw - 91px), 410px) !important;
    height: clamp(260px, 76vw, 312px) !important;
  }

  .brand-showcase-releaf > .brand-asset-envelope-copy {
    display: none !important;
  }

  .brand-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
  }

  .brand-case-dark .brand-carousel-status {
    color: var(--white);
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .brand-asset-track {
    scroll-behavior: auto;
  }
}

/* Compact, stacked chapter introductions for phones. The desktop composition
   remains untouched; only the oversized numbered cards are flattened here. */
@media (max-width: 768px) {
  .web-intro-layout,
  .brand-intro-layout,
  .editorial-intro-layout,
  .photo-intro-layout {
    width: 100%;
    min-height: 0;
    padding-right: 0;
  }

  .web-title-block,
  .brand-title-block,
  .editorial-title-block,
  .photo-title-block {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
      "chapter-number chapter-kicker"
      "chapter-title chapter-title"
      "chapter-rule chapter-rule"
      "chapter-copy chapter-copy";
    align-items: baseline;
    column-gap: 9px;
    row-gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .web-title-block::before,
  .brand-title-block::before {
    grid-area: chapter-kicker;
    display: block;
    margin: 0;
    color: var(--blue-light);
    font-family: var(--font-body);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  #web-design .web-title-block::before {
    content: "Web Projekt";
  }

  #brand-design .brand-title-block::before {
    content: "Brand Projekt";
  }

  #editorial-design .editorial-title-block::before {
    content: "Magazin Design";
  }

  #fotografie .photo-title-block::before {
    content: "Fotografie Projekt";
  }

  .web-number-card,
  .brand-number-card,
  .editorial-number-card {
    display: contents;
  }

  .web-number,
  .brand-number,
  .editorial-number {
    grid-area: chapter-number;
    display: flex;
    align-items: baseline;
    min-width: 0;
    color: var(--blue-light);
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1;
  }

  .web-number::after,
  .brand-number::after,
  .editorial-number::after {
    content: "\00b7";
    margin-left: 8px;
    color: currentColor;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
  }

  .web-title-block h2,
  .brand-title-block h2,
  .editorial-title-block h2,
  .photo-title-block h2 {
    grid-area: chapter-title;
    width: 100%;
    margin: 13px 0 18px;
    font-size: clamp(54px, 16.5vw, 78px);
    line-height: 0.82;
    transform: none;
  }

  .web-title-block h2 span + span,
  .brand-title-block h2 span + span {
    margin-top: 0.08em;
  }

  .web-title-divider,
  .brand-title-divider,
  .editorial-title-divider {
    grid-area: chapter-rule;
    width: 100%;
    height: 1px;
    margin: 0 0 17px;
    background: rgba(239, 242, 241, 0.62);
  }

  .web-description-block,
  .brand-description-block,
  .editorial-description-block {
    grid-area: chapter-copy;
    width: min(100%, 46ch);
    margin: 0;
  }

  .web-description-block > .eyebrow,
  .brand-description-block > .eyebrow,
  .editorial-description-block > .eyebrow {
    display: none;
  }

  .web-intro-description p,
  .brand-description-block > p:not(.eyebrow) {
    margin-bottom: 7px;
    font-size: clamp(12.5px, 3.5vw, 14px);
    line-height: 1.48;
  }

  #brand-design .brand-number,
  #brand-design .brand-title-block::before,
  #fotografie .brand-number,
  #fotografie .photo-title-block::before {
    color: var(--blue);
  }

  #brand-design .brand-title-divider,
  #fotografie .brand-title-divider {
    background: rgba(28, 43, 53, 0.42);
  }

  #brand-design .brand-description-block > p:not(.eyebrow),
  #fotografie .brand-description-block > p:not(.eyebrow) {
    color: rgba(28, 43, 53, 0.88) !important;
  }

  #brand-design .brand-description-block > .status-note,
  #fotografie .brand-description-block > .status-note {
    color: rgba(28, 43, 53, 0.66) !important;
  }

  #web-design .web-title-block h2,
  #editorial-design .editorial-title-block h2 {
    color: var(--white);
  }

  #brand-design .brand-title-block h2,
  #fotografie .photo-title-block h2 {
    color: var(--ink);
  }
}

/* JavaScript only groups the two sketches. On larger screens the wrapper is
   layout-neutral, so the established desktop arrangement stays unchanged. */
.sketch-carousel-track {
  display: contents;
}

.sketch-composition {
  display: contents;
}

.sketch-composition > img {
  display: block;
  width: auto;
  min-width: 0;
  object-fit: contain;
  object-position: center;
}

.sketch-carousel-controls {
  display: none;
}

@media (max-width: 768px) {
  /* Reduce the complete Style Tile, including its separately positioned
     welfare logo, by roughly a factor of 1.4 and keep both layers centered. */
  .web-styleguide::after,
  .web-styleguide > .web-components {
    width: 71.5%;
    justify-self: center;
    transform: none;
  }

  /* Keep the following process divider proportionally close to the newly
     reduced tile without letting it overlap the visible artwork. */
  .web-process {
    margin-top: -1.4cm;
  }

  .sketch-layout {
    display: block;
    min-height: 0;
    padding-inline: 0;
  }

  .sketch-carousel-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin-bottom: -0.4cm;
    padding-bottom: 0.4cm;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .sketch-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .sketch-carousel-track > .sketch-pair {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none;
  }

  /* Treat the large desktop view and the overlapping phone view as one
     centered composition on every carousel slide. */
  .sketch-carousel-track .sketch-composition {
    display: block;
    position: relative;
    width: min(92%, 340px);
    height: 100%;
    margin-inline: auto;
  }

  .sketch-carousel-track .sketch-desktop {
    position: absolute;
    top: 0;
    right: 2%;
    height: 100%;
    max-width: 78%;
    margin: 0;
  }

  .sketch-carousel-track .sketch-mobile {
    bottom: 0;
    left: 6%;
    height: 68%;
  }

  .sketch-carousel-track .sketch-pair-scribble .sketch-mobile {
    transform: translateY(0.4cm);
  }

  .sketch-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 18px 0 32px;
  }

  .sketch-carousel-status {
    display: none;
  }

  .sketch-layout > .responsive-note {
    width: min(100%, 46ch);
    margin: 0;
  }

  .process-pen-divider {
    transform: translateY(1cm);
  }

  .process-heading-left h3 {
    transform: translateY(calc(-19px + 1cm));
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sketch-carousel-track {
    scroll-behavior: auto;
  }
}

/* Keep the sketch comparison focused on one composition at a time through
   compact laptop widths. The explanatory copy remains directly underneath. */
@media (min-width: 769px) and (max-width: 980px) {
  .sketch-layout {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    column-gap: clamp(12px, 2vw, 20px);
    row-gap: 26px;
    align-items: center;
    min-height: 0;
    padding-inline: 0;
    transform: none;
  }

  .sketch-carousel-track {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin: 0;
    padding: 8px 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .sketch-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .sketch-carousel-track > .sketch-pair {
    --sketch-height: clamp(370px, 57vw, 490px);
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: none;
  }

  .sketch-carousel-track .sketch-composition {
    display: block;
    position: relative;
    width: min(90%, 490px);
    height: 100%;
    margin-inline: auto;
  }

  .sketch-carousel-track .sketch-desktop {
    position: absolute;
    top: 0;
    right: 2%;
    height: 100%;
    max-width: 78%;
    margin: 0;
  }

  .sketch-carousel-track .sketch-mobile {
    bottom: 0;
    left: 6%;
    height: 68%;
  }

  .sketch-carousel-track .sketch-pair-scribble .sketch-mobile {
    transform: translateY(0.4cm);
  }

  .sketch-carousel-controls {
    display: contents;
  }

  .sketch-carousel-controls > .sketch-carousel-button {
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }

  .sketch-carousel-controls > .sketch-carousel-button:first-of-type {
    grid-column: 1;
  }

  .sketch-carousel-controls > .sketch-carousel-button:last-of-type {
    grid-column: 3;
  }

  .sketch-carousel-status {
    display: none;
  }

  .sketch-layout > .responsive-note {
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(100%, 52ch);
    margin: 0;
  }
}

@media (min-width: 769px) and (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .sketch-carousel-track {
    scroll-behavior: auto;
  }
}

/* From tablet width onward, carousel arrows consistently flank their visual
   content. Phones retain the more compact controls below the slides. */
@media (min-width: 621px) and (max-width: 768px) {
  .brand-showcase-virtual,
  .brand-showcase-releaf {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    column-gap: clamp(10px, 2vw, 18px);
    align-items: center;
  }

  .brand-showcase-virtual > .virtual-copy,
  .brand-showcase-releaf > .releaf-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    width: 80%;
    max-width: none;
    margin-right: auto;
    margin-left: 0;
    text-align: left;
  }

  .brand-showcase-virtual > .virtual-copy p,
  .brand-showcase-releaf > .releaf-copy p {
    text-align: left;
  }

  .brand-asset-track {
    grid-column: 2;
    grid-row: 2;
  }

  .brand-carousel-controls,
  .sketch-carousel-controls {
    display: contents;
  }

  .brand-carousel-controls > .brand-carousel-button,
  .sketch-carousel-controls > .sketch-carousel-button {
    align-self: center;
    justify-self: center;
  }

  .brand-carousel-controls > .brand-carousel-button {
    grid-row: 2;
  }

  .brand-carousel-controls > .brand-carousel-button:first-of-type,
  .sketch-carousel-controls > .sketch-carousel-button:first-of-type {
    grid-column: 1;
  }

  .brand-carousel-controls > .brand-carousel-button:last-of-type,
  .sketch-carousel-controls > .sketch-carousel-button:last-of-type {
    grid-column: 3;
  }

  .brand-carousel-status {
    display: none;
  }

  .sketch-layout {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    column-gap: clamp(10px, 2vw, 18px);
    align-items: center;
  }

  .sketch-carousel-track {
    grid-column: 2;
    grid-row: 1;
  }

  .sketch-carousel-controls > .sketch-carousel-button {
    grid-row: 1;
  }

  .sketch-layout > .responsive-note {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 768px) {
  #fotografie .photo-divider {
    display: none;
  }

  #editorial-design .editorial-title-block h2,
  #fotografie .photo-title-block h2 {
    display: grid;
    grid-template-columns: max-content auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(8px, 2.5vw, 14px);
    width: max-content;
    max-width: 100%;
  }

  #editorial-design .editorial-title-block h2 > span,
  #fotografie .photo-title-block h2 > span {
    grid-column: 1;
  }

  .photo-one-line {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    position: static;
    width: clamp(54px, 15vw, 72px);
    margin: 0;
    transform: none;
  }

  #fotografie .photo-title-block h2 {
    padding-right: 0;
  }

  .editorial-note {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    position: static;
    width: clamp(148px, 40.3vw, 224px);
    margin: 0;
    transform: translateX(2cm);
  }

  #editorial-design .editorial-title-block {
    column-gap: 4px;
  }

  #editorial-design .editorial-number::after {
    margin-left: 6px;
  }

  #editorial-design .editorial-title-block::before {
    align-self: center;
    white-space: nowrap;
  }
}

/* Mobile safe-area pass: content and decorative artwork must remain fully
   visible at every phone width. Intentional edge crops are desktop-only. */
@media (max-width: 768px) {
  :root {
    --mobile-safe-edge: 12px;
    --mobile-note-shift: clamp(12px, 12vw, 2cm);
  }

  #editorial-design .editorial-title-block h2,
  #fotografie .photo-title-block h2 {
    grid-template-columns: max-content minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .hero-orb {
    width: min(92vw, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .hero::before,
  .hero::after {
    width: min(42vw, 170px);
    max-width: calc(100vw - 24px);
  }

  .hero::before {
    right: var(--mobile-safe-edge);
  }

  .hero::after {
    bottom: var(--mobile-safe-edge);
    left: var(--mobile-safe-edge);
  }

  .glow-left,
  .glow-right {
    width: min(52vw, 180px);
    height: min(52vw, 180px);
  }

  .glow-left {
    left: var(--mobile-safe-edge);
  }

  .glow-right {
    right: var(--mobile-safe-edge);
  }

  .editorial-note {
    width: clamp(148px, 40.3vw, 224px);
    max-width: calc(100% - var(--mobile-note-shift));
    margin-left: var(--mobile-note-shift);
    transform: none;
  }

  .photo-one-line {
    max-width: 100%;
    justify-self: start;
  }

  .web-earth {
    right: var(--mobile-safe-edge);
    max-width: calc(100% - 24px);
  }

  .about-bird {
    top: calc(-2px + 0.5cm);
    right: calc(var(--mobile-safe-edge) - 1.5cm);
    width: min(45.8vw, 157px);
    max-width: calc(100% - 24px);
    transform: none;
  }

  .interests-cloud {
    right: auto;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .brand-rocket {
    width: min(48vw, 180px);
    max-width: calc(100% - 24px);
    margin: -30px 0 0 auto;
  }

  .photo-category,
  .photo-category-offset {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    border-radius: 24px;
  }

  .process-heading-left {
    max-width: 100%;
    padding-right: var(--mobile-safe-edge);
    padding-left: clamp(36px, 12vw, 64px);
  }

  .process-heading-left h3 {
    max-width: 100%;
    font-size: clamp(32px, 10vw, 48px);
    white-space: nowrap;
  }

  .light-orb,
  .section-orb,
  .process-circle,
  .uniform-blue-orb {
    width: min(180px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .light-orb-left,
  .section-orb-left,
  .process-circle-left {
    right: auto;
    left: var(--mobile-safe-edge);
    translate: 0 0;
  }

  .light-orb-right,
  .section-orb-right,
  .process-circle-right {
    right: var(--mobile-safe-edge);
    left: auto;
    translate: 0 0;
  }

  .process-circle-right {
    transform: scaleX(-1);
  }

  .uniform-blue-orb.is-left {
    right: auto;
    left: var(--mobile-safe-edge);
    transform: translateY(-50%);
  }

  .uniform-blue-orb.is-right {
    right: var(--mobile-safe-edge);
    left: auto;
    transform: translateY(-50%) scaleX(-1);
  }

  .web-project::before {
    left: var(--mobile-safe-edge);
    width: min(180px, calc(100vw - 24px));
    translate: 0 -3cm;
  }

  .web-styleguide > .web-style-circle {
    right: var(--mobile-safe-edge);
    width: min(180px, calc(100vw - 24px));
    translate: 0 0;
  }

  .web-process::before {
    left: var(--mobile-safe-edge);
    width: min(180px, calc(100vw - 24px));
    translate: 0 0;
  }

  .brand-asset img,
  .sketch-composition img,
  .screen-showcase img,
  .editorial-stage img {
    max-width: 100%;
  }
}

.wireframe-hotspot-layer,
.wireframe-hotspot-info {
  display: none;
}

@media (max-width: 768px) {
  .process-wireframe .process-heading-centered,
  .process-wireframe .process-heading-centered h3 {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .wireframe-page {
    position: relative;
    overflow: visible;
  }

  .wireframe-hotspot-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    pointer-events: none;
  }

  .wireframe-hotspot {
    position: absolute;
    top: var(--wireframe-hotspot-y);
    left: calc(var(--wireframe-hotspot-x) - 4px);
    width: clamp(52px, 16vw, 62px);
    min-width: 0;
    min-height: 28px;
    padding: 6px 9px 5px;
    border: 1px solid rgba(247, 246, 242, 0.9);
    border-radius: 999px;
    background: rgba(77, 120, 146, 0.94);
    box-shadow: 0 5px 16px rgba(7, 16, 23, 0.28);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translate(-100%, -50%);
    pointer-events: auto;
    cursor: pointer;
  }

  .wireframe-hotspot.is-active {
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 0 0 3px rgba(124, 160, 180, 0.42),
      0 6px 18px rgba(7, 16, 23, 0.34);
  }

  .wireframe-hotspot:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
  }

  .wireframe-hotspot-info {
    display: block;
    position: relative;
    z-index: 6;
    width: min(100%, 360px);
    min-height: 104px;
    margin: -32px auto 0;
    padding: 16px 18px;
    border: 1px solid rgba(247, 246, 242, 0.2);
    border-radius: 14px;
    background: rgba(77, 120, 146, 0.24);
    color: var(--white);
  }

  .wireframe-hotspot-info[hidden] {
    display: none;
  }

  .wireframe-hotspot-info h4 {
    margin: 0 0 8px;
    color: var(--blue-light);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .wireframe-hotspot-info p {
    margin: 0;
    color: rgba(247, 246, 242, 0.86);
    font-family: var(--font-body);
    font-size: clamp(12.5px, 3.5vw, 14px);
    font-weight: 300;
    line-height: 1.48;
  }

  .wireframe-notes {
    display: none;
  }

  /* Keep the desktop screendesign composition intact on phones and scale the
     complete arrangement instead of resizing its three parts independently. */
  .process-screen .screen-showcase {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 1120 / 550;
    margin-inline: auto;
    transform: scale(1.2);
    transform-origin: center;
  }

  .process-screen .screen-glow {
    width: 72%;
    height: 46%;
    top: 21%;
  }

  .process-screen .screen-page-frame {
    flex: 0 0 36%;
    width: 36%;
    max-width: none;
  }

  .process-screen .screen-device {
    height: 51%;
    border-radius: clamp(8px, 2.1vw, 14px);
  }

  .process-screen .screen-device img {
    max-width: none;
  }

  .process-screen .screen-laptop {
    width: 32%;
    left: 15.5%;
  }

  .process-screen .screen-phone {
    width: 20%;
    right: 19%;
  }

  .process-screen .process-heading-screen {
    transform: translateY(1.5cm);
  }

  #brand-design .brand-title-block h2 {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(8px, 2.5vw, 14px);
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    position: relative;
    overflow: visible;
  }

  #brand-design .brand-title-block h2 > span {
    grid-column: 1;
  }

  #brand-design .brand-title-block h2 > .brand-rocket {
    z-index: 5;
    position: absolute;
    top: 50%;
    left: var(--brand-rocket-center, 65%);
    width: min(40vw, 160px);
    max-width: 100%;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  #brand-design .brand-projects {
    border-top: 0;
  }

  #brand-design .brand-projects > .brand-case:first-child {
    padding-top: 14px;
  }

  #brand-design .brand-title-block {
    grid-template-areas:
      "chapter-number chapter-kicker"
      "chapter-title chapter-title"
      "chapter-copy chapter-copy"
      "chapter-rule chapter-rule";
  }

  #brand-design .brand-title-block h2 {
    margin-bottom: 8px;
  }

  #brand-design .brand-title-divider {
    margin: 10px 0 0;
  }

  #editorial-design .editorial-title-block h2 {
    --editorial-note-center: 70%;
    --editorial-note-max-width: 42%;
    position: relative;
    overflow: visible;
  }

  #editorial-design .editorial-title-block h2 > .editorial-note {
    display: none !important;
  }

  #editorial-design .editorial-title-block h2::after {
    content: "";
    z-index: 6;
    display: block;
    position: absolute;
    top: 50%;
    left: 40%;
    width: min(46vw, 200px);
    max-width: calc(60% - 12px);
    aspect-ratio: 536.9 / 243.87;
    background: url("../assets/editorial/note.svg") center / contain no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .web-style-title .web-style-name {
    font-size: clamp(44px, 13vw, 66px);
  }

  .web-earth {
    top: calc(-82px + 4cm);
    width: min(39.8vw, 160px);
  }

  .about-shell {
    padding-bottom: 12px;
  }

  #web-design.web-project {
    padding-top: 64px;
  }

  /* Mobile About intro: portrait and the two-line title share one row. */
  .about-panel {
    --about-panel-gutter: 16px;
    padding-right: var(--about-panel-gutter);
    padding-left: var(--about-panel-gutter);
  }

  .about-intro {
    background: transparent;
    color: var(--ink);
    grid-template-columns: 92px minmax(104px, 1fr);
    align-items: center;
    gap: 6px;
    padding: 18px 16px;
  }

  .about-intro::before {
    content: "";
    z-index: 0;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    margin: -8px;
    background: var(--blue);
    border-radius: 22px;
  }

  .about-intro-copy {
    display: contents;
  }

  .about-portrait {
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: 92px !important;
    height: auto !important;
    aspect-ratio: 0.82;
    background: #d2d2d2;
    border: 1px solid var(--ink);
    border-radius: 22px;
  }

  .about-intro h2 {
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: min-content;
    margin: 0;
    font-size: clamp(38px, 11.5vw, 54px);
    line-height: 0.84;
    overflow-wrap: normal;
    word-break: normal;
    color: var(--white);
    position: relative;
  }

  .about-intro p {
    color: var(--ink);
  }

  .about-intro p {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }

  .about-intro h2 + p {
    margin-top: 6px;
  }

  .about-intro p + p {
    margin-top: 5px;
  }
}

/* Compact navigation trigger. The dropdown remains available through the
   narrowest laptop widths so the full chapter navigation never feels cramped. */
.site-menu-toggle {
  display: none;
}

@media (max-width: 900px) {
  .site-header {
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 24px);
    overflow: visible;
  }

  .site-header .brand-lockup {
    flex: 1 1 auto;
    gap: 9px;
  }

  .site-header .brand-name {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .site-menu-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    cursor: pointer;
  }

  .site-menu-toggle-bar {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
    transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
  }

  .site-menu-toggle-bar:nth-child(1) {
    top: 14px;
  }

  .site-menu-toggle-bar:nth-child(2) {
    top: 20px;
  }

  .site-menu-toggle-bar:nth-child(3) {
    top: 26px;
  }

  .site-header.is-menu-open .site-menu-toggle-bar:nth-child(1) {
    top: 20px;
    transform: translateX(-50%) rotate(45deg);
  }

  .site-header.is-menu-open .site-menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .site-menu-toggle-bar:nth-child(3) {
    top: 20px;
    transform: translateX(-50%) rotate(-45deg);
  }

  .site-header nav {
    position: absolute;
    z-index: 1;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    width: auto;
    max-height: 0;
    padding: 0 10px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 22px;
    background: rgba(22, 38, 49, 0.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: max-height 220ms ease, padding 220ms ease, opacity 160ms ease,
      transform 220ms ease, visibility 0s linear 220ms, border-color 160ms ease;
    box-shadow: 0 18px 42px rgba(2, 10, 15, 0.32);
  }

  .site-header.is-menu-open nav {
    max-height: 430px;
    padding: 10px;
    border-color: rgba(255, 255, 255, 0.16);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .site-header nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 12px;
    text-align: center;
    touch-action: manipulation;
  }

  .site-header nav a::after {
    right: 14px;
    bottom: 7px;
    left: 14px;
  }

  .site-header nav a.is-active,
  .site-header nav a[aria-current="location"] {
    background: rgba(124, 160, 180, 0.18);
  }

}

@media (max-width: 768px) {

  .about-portrait {
    width: 84px !important;
  }

  .about-shell {
    padding-bottom: 6px;
  }

  #web-design.web-project {
    padding-top: 48px;
  }

  .hero {
    min-height: 88svh;
  }

  .hero::after {
    display: none;
  }

  .hero-orb {
    width: clamp(330px, 58vw, 760px);
    max-width: calc(100vw - 24px);
  }

  #web-design .web-title-divider {
    display: none;
  }

  #web-design .web-title-block h2 {
    margin-bottom: 10px;
  }
}

/* Keep the compact Editorial intro inside very narrow phone viewports. */
@media (max-width: 550px) {
  #editorial-design .editorial-title-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "chapter-number chapter-kicker"
      "chapter-title chapter-title"
      "chapter-rule chapter-rule"
      "chapter-copy chapter-copy";
  }

  #editorial-design .editorial-title-block,
  #editorial-design .editorial-title-block h2,
  #editorial-design .editorial-number,
  #editorial-design .editorial-title-divider,
  #editorial-design .editorial-description-block {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #editorial-design .editorial-title-block h2::after {
    top: 62%;
    right: clamp(-9px, -1.5vw, -5px);
    left: auto;
    width: clamp(86px, 36vw, 175px);
    max-width: 38%;
  }

  #editorial-design .editorial-title-block h2 {
    font-size: clamp(50px, 15.5vw, 78px);
  }

  #editorial-design .editorial-title-block::before {
    grid-area: chapter-kicker;
    display: block;
    align-self: center;
    justify-self: end;
    margin: 0;
    color: var(--blue-light);
    font-family: var(--font-body);
    font-size: clamp(9px, 2.5vw, 10px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* Keep the About copy proportional to its own panel instead of relying on
   fixed viewport-independent edge spacing. */
.about-intro {
  container-name: about-intro;
  container-type: inline-size;
}

@media (min-width: 769px) {
  .about-intro {
    gap: 1cm;
  }

  .about-intro-copy {
    max-width: min(78cqw, 1020px);
    padding-right: min(22cqw, 260px);
    transform: none;
  }

  .about-intro p {
    font-size: clamp(12px, 1.2cqw, 16px);
  }
}

@media (max-width: 768px) {
  .about-panel {
    --about-panel-gutter: clamp(10px, 2.4vw, 16px);
  }

  .about-intro {
    gap: clamp(5px, 1.8vw, 12px);
    padding: clamp(12px, 3.5vw, 22px) clamp(10px, 3vw, 20px);
  }

  .about-intro::before {
    margin: calc(-1 * clamp(5px, 1.3vw, 10px));
  }

  .about-intro p {
    font-size: clamp(12.5px, calc(9.5px + 1cqw), 15px);
    line-height: 1.5;
  }

  .about-intro h2 + p {
    margin-top: clamp(4px, 1cqw, 8px);
  }

  .about-intro p + p {
    margin-top: clamp(4px, 0.8cqw, 7px);
  }
}

/* Keep the full portrait, copy and bird composition on tablets. The compact
   stacked About intro starts only at phone widths (620px and below). */
@media (min-width: 621px) and (max-width: 768px) {
  .about-panel {
    --about-panel-gutter: clamp(30px, 5vw, 45px);
    padding-top: var(--about-panel-gutter);
    padding-right: var(--about-panel-gutter);
    padding-left: var(--about-panel-gutter);
  }

  .about-intro {
    min-height: 250px;
    grid-template-columns: clamp(120px, 18vw, 155px) minmax(0, 1fr);
    align-items: center;
    gap: 1cm;
    padding: clamp(22px, 3.2vw, 32px);
    background: var(--blue);
    color: var(--white);
    border-radius: clamp(28px, 3.6vw, 40px);
    overflow: hidden;
  }

  .about-intro::before {
    content: none;
    display: none;
  }

  .about-intro-copy {
    display: block;
    max-width: none;
    padding-right: clamp(90px, 17vw, 150px);
    transform: none;
    position: relative;
  }

  .about-portrait {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 0.82;
    background: #d2d2d2;
    border: 0;
    border-radius: 34px;
  }

  .about-intro h2 {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    margin: 0 0 14px;
    color: var(--white);
    font-size: 48px;
    line-height: 0.9;
  }

  .about-intro p {
    grid-column: auto;
    width: auto;
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
  }

  .about-intro h2 + p {
    margin-top: 0;
  }

  .about-bird {
    top: 20px;
    right: calc(-135px - 1cm);
    width: 370px;
    max-width: none;
    transform: none;
  }
}

/* One continuous dark-blue canvas across the complete portfolio. The light
   content panels remain cards on top of this shared background. */
body,
main,
.hero,
.about-shell,
#web-design.web-project,
#brand-design,
#brand-design > .brand-case-dark,
#editorial-design,
#fotografie,
#kontakt {
  background-color: var(--ink);
  background-image: none;
}

/* Keep the transition into Web Design perfectly flat. */
.about-panel,
.brand-panel,
.brand-panel-morph,
.photo-panel {
  box-shadow: none;
}

/* Center the education timeline arrow in the gap between both stations. */
@media (max-width: 768px) {
  .education-card .education-entry:first-of-type::after {
    top: calc(100% + 12px);
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  .education-card .education-entry:first-of-type::after {
    top: calc(100% + 10px);
    transform: translate(-50%, -50%);
  }
}

/* Whenever the one-line pen is visible, place the sketch heading completely
   to its right. The phone layout keeps its pen-free heading position. */
@media (min-width: 621px) and (max-width: 768px) {
  .process-heading-left {
    padding-left: calc(23px + 4px + 104px + 4px + clamp(12px, 2vw, 18px));
  }
}

@media (min-width: 769px) and (max-width: 1599px) {
  .process-heading-left {
    padding-left: calc(
      clamp(38px, 4.9vw, 64px) +
      clamp(4px, 0.45vw, 6px) +
      clamp(168px, 18vw, 224px) +
      clamp(4px, 0.45vw, 6px) +
      clamp(14px, 1.4vw, 22px)
    );
  }
}

@media (min-width: 1600px) {
  .process-heading-left {
    padding-left: 418px;
  }
}

/* Below the 540px reference viewport, keep the Portfolio wordmark and its
   sphere at exactly the same proportions and edge distance as at 540px. */
@media (max-width: 540px) {
  .hero-orb {
    width: 61.111111vw;
    max-width: 61.111111vw;
  }

  .hero h1 {
    font-size: 21.851852vw;
  }
}

/* From the 540px reference upward, the Portfolio sphere and wordmark share
   matching width-, height- and maximum-size stops. Neither can outgrow the
   other, and the former tablet/laptop/desktop breakpoint jumps disappear. */
@media (min-width: 541px) {
  .hero-orb {
    width: clamp(330px, min(58vw, 70svh), 760px);
  }

  .hero h1 {
    font-size: clamp(118px, min(20.714286vw, 25svh), 271.428571px);
  }
}

/* Small-phone review range: restore the lower Portfolio outline that the
   broader compact layout hides, and keep the long kicker comfortably on one
   line without changing larger phone or tablet typography. */
@media (min-width: 320px) and (max-width: 425px) {
  .hero::before,
  .hero::after {
    width: clamp(210px, 62vw, 264px);
    max-width: none;
  }

  .hero::before {
    right: 0;
    transform: translateX(50%);
  }

  .hero::after {
    display: block;
    left: 0;
    transform: translateX(-50%);
  }

  .hero-kicker {
    font-size: clamp(9px, 2.5vw, 10.5px);
  }
}

/* Bridge the former empty tablet range between the approved phone circles and
   the existing laptop circles. Both outlines stay present, remain half-cropped
   at the side edges and grow continuously into the 1024px layout. */
@media (min-width: 426px) and (max-width: 768px) {
  .hero::before,
  .hero::after {
    width: calc(174.4px + 20.97vw);
    max-width: none;
  }

  .hero::before {
    right: 0;
    transform: translateX(50%);
  }

  .hero::after {
    display: block;
    left: 0;
    transform: translateX(-50%);
  }
}

/* On phones, center the sketch heading in the complete visual gap between
   the uninterrupted divider and the first sketch composition. */
@media (min-width: 320px) and (max-width: 620px) {
  .process-heading-left {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-top: 32px;
  }

  .process-heading-left h3 {
    transform: none;
  }
}

/* Technical hardening: accessible navigation, readable metadata and predictable focus. */
:where(a, button, input, label):focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 4px;
}

.web-type-card strong,
.web-type-card span,
.palette-item strong,
.palette-item span,
.component-states > div,
.brand-description-block .status-note {
  font-size: max(12px, 0.72vw) !important;
}

.wireframe-hotspot,
.editorial-magazine-hint {
  font-size: 12px !important;
}

@media (max-width: 900px) {
  body.mobile-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .site-header {
    z-index: 100;
  }

  .site-menu-toggle {
    z-index: 3;
  }

  .site-header nav {
    z-index: 2;
    max-height: 0;
  }

  .site-header.is-menu-open nav {
    max-height: min(430px, calc(100svh - 92px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header .brand-name {
    font-size: clamp(12px, 3.4vw, 14px);
  }

  .site-header nav a {
    font-size: 13px;
  }

}

@media (max-width: 768px) {

  .web-description-block .eyebrow,
  .brand-description-block .eyebrow,
  .editorial-description-block .eyebrow {
    font-size: 12px;
  }

  .web-intro-description p,
  .brand-description-block > p:not(.eyebrow),
  .editorial-intro-description p {
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.48;
  }
}

@media (max-width: 360px) {
  .site-header {
    width: calc(100% - 16px);
    padding-left: 8px;
  }

  .site-header .brand-lockup {
    gap: 7px;
  }

  .site-header .brand-name {
    font-size: 12px;
  }
}

/* Phone navigation: from the narrowest supported viewport through 620px,
   every carousel places its arrows below the related cards or images. */
@media (min-width: 320px) and (max-width: 620px) {
  .about-carousel-shell {
    display: flex;
    flex-direction: column;
  }

  .about-carousel-controls {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 0;
    pointer-events: auto;
  }

  .about-carousel-controls .about-carousel-button {
    position: static;
    inset: auto;
    transform: none;
  }

  .about-carousel-controls .about-carousel-button:not(:disabled):hover {
    transform: scale(1.06);
  }

  .brand-carousel-controls,
  .sketch-carousel-controls {
    justify-content: center;
    margin-right: 0;
    margin-left: 0;
  }

  .photo-album-carousel {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
  }

  .photo-album-carousel .photo-subcategory-grid {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .photo-album-carousel .photo-album-scroll-button {
    grid-row: 2;
  }

  .photo-album-carousel > .photo-album-scroll-button:first-child {
    grid-column: 1;
    justify-self: end;
  }

  .photo-album-carousel > .photo-album-scroll-button:last-child {
    grid-column: 2;
    justify-self: start;
  }

  .photo-lightbox-dialog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
  }

  .photo-lightbox-stage {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .photo-lightbox-image {
    max-height: calc(100vh - 190px);
  }

  .photo-lightbox-nav {
    position: static;
    inset: auto;
    grid-row: 2;
    transform: none;
  }

  .photo-lightbox-nav:hover {
    transform: scale(1.06);
  }

  .photo-lightbox-prev {
    grid-column: 1;
    justify-self: end;
  }

  .photo-lightbox-next {
    grid-column: 2;
    justify-self: start;
  }
}

/* Supported phone range: scale the complete wireframe composition from the
   320px baseline through the largest phone layout without changing its
   internal proportions. Hotspot labels remain fully contained in their pills. */
@media (min-width: 320px) and (max-width: 620px) {
  .wireframe-layout {
    gap: 0;
  }

  .wireframe-page {
    width: min(70.833333%, 255px);
    margin-bottom: 0;
  }

  .wireframe-hotspot {
    width: clamp(46px, 14vw, 56px);
    min-height: clamp(24px, 7vw, 28px);
    padding: 5px clamp(4px, 1.3vw, 7px) 4px;
    font-size: clamp(7px, 2.35vw, 9px) !important;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
  }

  .wireframe-hotspot-info {
    width: min(calc(100% - 32px), 280px);
    min-height: 0;
    margin: calc(2px + 0.2cm) auto 0;
    padding: 12px 14px;
    scroll-margin-bottom: 12px;
  }

  .wireframe-hotspot-info h4 {
    margin-bottom: 6px;
  }

  .wireframe-hotspot-info p {
    font-size: clamp(12px, 3.2vw, 13.5px);
    line-height: 1.42;
  }
}

/* Give the phone portrait a little more breathing room inside the blue
   About Me surface and keep the title and bird in proportion with it. */
@media (min-width: 320px) and (max-width: 620px) {
  .about-panel {
    --about-panel-gutter: clamp(38px, 6.5vw, 44px);
    padding-top: var(--about-panel-gutter);
    padding-right: var(--about-panel-gutter);
    padding-left: var(--about-panel-gutter);
  }

  .about-intro {
    --about-mobile-blue-space: clamp(12px, 2.5vw, 16px);
    grid-template-columns: clamp(78px, calc(6vw + 58.8px), 96px) minmax(84px, 1fr);
    column-gap: clamp(9px, 2.4vw, 14px);
    padding-top: var(--about-mobile-blue-space);
    padding-right: var(--about-mobile-blue-space);
    padding-left: var(--about-mobile-blue-space);
    overflow: visible;
  }

  .about-intro::before {
    margin: calc(-1 * var(--about-mobile-blue-space));
    border-radius: clamp(14px, 2.8vw, 18px);
  }

  .about-portrait {
    align-self: center;
    justify-self: start;
    justify-content: center;
    align-items: flex-end;
    width: clamp(78px, calc(6vw + 58.8px), 96px) !important;
    padding: clamp(3px, 0.9vw, 6px) clamp(3px, 1vw, 6px) 0;
    border-radius: clamp(14px, 2.8vw, 18px);
  }

  .about-portrait img {
    width: 100%;
    height: 100%;
    object-position: center bottom;
  }

  .about-intro h2 {
    align-self: center;
    justify-self: start;
    width: 5ch;
    max-width: 5ch;
    font-size: clamp(36px, calc(4.67vw + 21.1px), 50px);
    line-height: 0.86;
    white-space: normal;
  }

  .about-intro h2 + p {
    margin-top: clamp(25px, 5vw, 32px);
  }

  .about-bird {
    right: calc(var(--mobile-safe-edge) - 2.1cm);
    width: min(50.4vw, 173px);
  }

  .about-details {
    top: -0.2cm;
  }

  .about-details > .education-card {
    position: relative;
    top: -0.1cm;
  }
}

/* Tablets need a taller grey About Me surface because the two-column cards
   give the complete degree title less horizontal room than laptops do. */
@media (min-width: 621px) and (max-width: 768px) {
  .about-details {
    height: clamp(326px, 38vw, 350px);
  }

  .education-card .education-entry:nth-of-type(2) .education-copy span {
    font-size: var(--body-copy-size);
    line-height: var(--body-copy-leading);
    letter-spacing: normal;
    white-space: normal;
  }

  .education-card .education-entry:nth-of-type(2) .education-copy span br {
    display: initial;
  }

  .education-card .education-entry:nth-of-type(2) .education-copy span::after {
    content: none;
  }
}

/* From wider phones onward the bird grows continuously into the available
   negative space instead of remaining capped at the narrow-phone size. */
@media (min-width: 370px) and (max-width: 620px) {
  .about-bird {
    width: clamp(173px, calc(34.8vw + 44.2px), 260px);
  }

  .web-earth {
    width: clamp(147px, calc(33.2vw + 24.2px), 230px);
  }
}

@media (min-width: 320px) and (max-width: 620px) {
  .web-earth {
    top: calc(-82px + 3.5cm);
  }
}

/* Continue the phone-scale growth of the Web Design globe through every
   larger layout while preserving each breakpoint's established position. */
@media (min-width: 621px) and (max-width: 768px) {
  .web-earth {
    width: clamp(230px, calc(12.44vw + 152.8px), 280px);
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  .web-earth {
    width: clamp(280px, calc(12.02vw + 156.9px), 330px);
  }
}

@media (min-width: 1441px) and (max-width: 2559px) {
  .web-earth {
    width: clamp(330px, calc(13.39vw + 137.1px), 480px);
  }
}

@media (min-width: 2560px) {
  .web-earth {
    width: clamp(480px, 18.75vw, 720px);
  }
}

/* Once the Web Design globe reaches its intended desktop size, keep its
   visible diameter constant. On ultrawide screens the inverse value also
   neutralises the page-wide PC zoom for this single illustration. */
@media (min-width: 1960px) {
  #web-design .web-earth {
    width: 400px;
  }
}

@media (min-width: 2561px) {
  #web-design .web-earth {
    width: calc(400px * var(--ultrawide-pc-inverse-scale, 1));
  }
}

/* Keep the responsive globe sizing, but raise the whole element by another
   half centimetre consistently across phone, tablet, laptop and desktop. */
.web-earth {
  margin-top: -0.5cm;
}

#brand-design .brand-description-block > .status-note {
  color: var(--white) !important;
}

/* Keep the Brand Design divider centred between the chapter introduction and
   the Virtual Wildlife heading throughout the tablet range. */
@media (min-width: 621px) and (max-width: 768px) {
  #brand-design .brand-projects {
    margin-top: calc(clamp(36px, 5vw, 66px) + 0.6cm);
  }

  #brand-design .brand-projects > .brand-case:first-child {
    padding-top: calc(clamp(36px, 5vw, 66px) + 0.6cm);
  }
}

/* On phones the visible chapter rule belongs to the compact Brand Design
   heading. Give it the same expanded clearance above and below. */
@media (min-width: 320px) and (max-width: 620px) {
  #brand-design .brand-title-block h2 > .brand-rocket {
    top: calc(50% - clamp(0px, calc(16.36vw - 65.45px), 36px));
    width: clamp(128px, 40vw, 248px);
  }

  #brand-design .brand-title-divider {
    margin: 0.8cm 0 0;
  }

  #brand-design .brand-projects > .brand-case:first-child {
    padding-top: 0.8cm;
  }
}

@media (min-width: 621px) and (max-width: 768px) {
  #brand-design .brand-title-block h2 > .brand-rocket {
    top: calc(50% - 36px);
    width: 248px;
  }
}

/* Shared text rails: free-standing, left-aligned copy follows the dominant
   content edge in every viewport. Card-centred and deliberately right-aligned
   labels retain their own local alignment. */
:is(
  .about-intro-copy,
  .web-description-block,
  .web-style-title,
  .web-styleguide > .web-concept,
  #brand-design .brand-case-header,
  #brand-design .virtual-copy,
  #brand-design .releaf-copy,
  .editorial-description-block,
  .editorial-concept,
  .photo-folders-heading,
  .photo-detail-header > div,
  .photo-gallery-heading
) {
  text-align: left;
}

:is(
  .about-intro-copy,
  .web-description-block,
  .web-styleguide > .web-concept,
  #brand-design .brand-case-header,
  #brand-design .virtual-copy,
  #brand-design .releaf-copy,
  .editorial-description-block,
  .editorial-concept,
  .photo-folders-heading,
  .photo-detail-header > div,
  .photo-gallery-heading
) > :is(h2, h3, h4, p) {
  margin-inline-start: 0;
  padding-inline-start: 0;
  text-indent: 0;
}

/* Laptop text rail: the project area is authored on a fixed 1440px canvas and
   scaled as one unit. Keep the Web Design title/concept rail on that same
   144px content edge instead of recalculating it from the smaller viewport. */
@media (min-width: 769px) and (max-width: 1440px) {
  #brand-design > .brand-panel:not(.brand-panel-morph),
  #fotografie > .photo-panel {
    padding-top: 72px;
    padding-right: 72px;
    padding-left: 72px;
  }

  /* Treat the Virtual Wildlife letterhead and business cards as one visual
     pair. The counter-scaling gap remains nearly constant while the laptop
     composition grows from its 1024px to its 1440px reference size. */
  #brand-design .brand-showcase-virtual {
    --vw-letterhead-left: 31%;
    --vw-letterhead-width: 17.55%;
    --vw-asset-pair-gap: calc(43.3125px - 1.7578vw);
  }

  #brand-design .brand-showcase-virtual .brand-asset-letterhead {
    left: var(--vw-letterhead-left);
    width: var(--vw-letterhead-width);
  }

  #brand-design .brand-showcase-virtual .brand-asset-card {
    left: calc(
      var(--vw-letterhead-left) +
      var(--vw-letterhead-width) +
      var(--vw-asset-pair-gap)
    );
  }

  #brand-design .brand-intro-layout,
  #fotografie .photo-intro-layout {
    align-items: flex-start;
  }

  #brand-design > .brand-panel:not(.brand-panel-morph) .brand-title-block,
  #fotografie > .photo-panel .photo-title-block {
    transform: none;
  }

  .web-style-title,
  .web-styleguide {
    left: 50%;
    width: 1152px;
    max-width: none;
    transform: translateX(-50%);
  }

  :is(
    .web-style-title,
    .web-styleguide > .web-concept,
    #brand-design .brand-case-header,
    #brand-design .virtual-copy,
    #brand-design .releaf-copy,
    .editorial-concept,
    .photo-folders-heading,
    .photo-detail-header > div,
    .photo-gallery-heading
  ) {
    text-align: left;
  }

  .process-wireframe .wireframe-layout {
    width: 1120px;
    max-width: none;
    grid-template-columns:
      minmax(210px, 0.82fr)
      minmax(340px, 1.35fr)
      minmax(210px, 0.82fr);
    gap: 65px;
    margin-top: 64px;
  }

  .wireframe-notes-left .wireframe-arrow {
    top: 32%;
    right: -108px;
    width: 98px;
  }

  .wireframe-notes-right .wireframe-arrow {
    top: 28%;
    left: -102px;
    width: 92px;
  }

  .wireframe-notes-left .wireframe-arrow {
    translate: 0 0;
  }

  .wireframe-notes-left .wireframe-note:last-child .wireframe-arrow {
    translate: 0 -0.2cm;
  }

  .wireframe-notes-right .wireframe-arrow {
    translate: 0 0.5cm;
  }
}

/* Grey chapter surfaces: from PC width onward, the blue introduction card
   uses the exact same inset above as it does at the sides. */
@media (min-width: 1441px) and (max-width: 1600px) {
  #brand-design > .brand-panel:not(.brand-panel-morph),
  #fotografie > .photo-panel {
    padding-top: clamp(28px, 5vw, 76px);
  }

  #brand-design .brand-intro-layout,
  #fotografie .photo-intro-layout {
    align-items: flex-start;
  }

  #brand-design > .brand-panel:not(.brand-panel-morph) .brand-title-block,
  #fotografie > .photo-panel .photo-title-block {
    transform: none;
  }
}

@media (min-width: 1600px) {
  #brand-design > .brand-panel:not(.brand-panel-morph),
  #fotografie > .photo-panel {
    padding-top: calc(var(--wide-inner-gutter) + clamp(48px, 3.5vw, 70px));
  }

  #brand-design .brand-intro-layout,
  #fotografie .photo-intro-layout {
    align-items: flex-start;
  }

  #brand-design > .brand-panel:not(.brand-panel-morph) .brand-title-block,
  #fotografie > .photo-panel .photo-title-block {
    transform: none;
  }
}

/* Laptop and PC chapter rules sit exactly halfway between the compositions
   they separate. Decorative rules inside cards and the pen illustration are
   intentionally excluded. */
@media (min-width: 769px) {
  #web-design > .web-divider:not(.process-divider) {
    margin-top: clamp(31px, 3.9vw, 52px);
    margin-bottom: clamp(31px, 3.9vw, 52px);
  }

  #editorial-design > .editorial-divider {
    margin-top: clamp(44px, 5.75vw, 79px);
    margin-bottom: clamp(44px, 5.75vw, 79px);
  }

  #brand-design .brand-projects {
    margin-top: calc(clamp(18px, 2.5vw, 33px) + 0.6cm);
  }

  #brand-design .brand-projects::before {
    top: 0;
  }

  #brand-design .brand-projects > .brand-case:first-child {
    padding-top: calc(clamp(18px, 2.5vw, 33px) + 0.6cm);
  }

  #fotografie .photo-divider {
    margin: 1cm auto;
  }

  #fotografie .photo-divider + #photography-browser-root .photo-folders-overview {
    margin-top: 0;
  }

  #web-design .process-divider {
    margin-top: clamp(50px, 6vw, 80px);
    margin-bottom: 0;
  }

  #web-design .process-wireframe {
    padding-top: clamp(50px, 6vw, 80px);
  }
}

/* About Me detail cards use the same readable body-copy size as the rest of
   the portfolio. Dates are content here, not reduced metadata. */
.about-card p,
.about-card a,
.about-card dt,
.about-card dd,
.about-card li,
.education-entry > p:first-child {
  font-size: var(--body-copy-size) !important;
  line-height: var(--body-copy-leading);
}

/* Give the tablet Screen Design composition roughly half a centimetre more
   breathing room on the left while keeping its established right edge. */
@media (min-width: 621px) and (max-width: 768px) {
  .process-screen .screen-showcase {
    width: calc(100% - 0.5cm);
    margin-right: 0;
    margin-left: 0.5cm;
  }
}

/* Laptop copy is visually 14px from 1201px upward. Project chapters are scaled
   as complete 1440px compositions, so script.js supplies the inverse value
   that preserves the intended visible size after the chapter zoom. */
@media (min-width: 769px) and (max-width: 1440px) {
  :root {
    --body-copy-size: 14px;
  }

  .about-intro p,
  .about-card p,
  .about-card a,
  .about-card dt,
  .about-card dd,
  .about-card li,
  .education-entry > p:first-child {
    font-size: 14px !important;
  }

  #web-design .web-intro-description > p:not(.status-note),
  #web-design .web-styleguide > .web-concept p,
  #web-design .responsive-note p,
  #web-design .wireframe-note p,
  #brand-design .brand-description-block > p:not(.eyebrow):not(.status-note),
  #brand-design .virtual-copy > p:last-child,
  #brand-design .releaf-copy > p:last-child,
  #brand-design .morph-copy > p:last-child,
  #editorial-design .editorial-intro-description > p:not(.status-note),
  #editorial-design .editorial-concept p,
  #fotografie .brand-description-block > p:not(.eyebrow):not(.status-note) {
    font-size: var(--laptop-visible-body-size, 19.688px) !important;
  }
}

/* On compact laptops, reduce regular reading and information copy by one
   typographic step without changing the established composition scale. */
@media (min-width: 769px) and (max-width: 1200px) {
  :root {
    --body-copy-size: 13px;
  }

  .about-intro p,
  .about-card p,
  .about-card a,
  .about-card dt,
  .about-card dd,
  .about-card li,
  .education-entry > p:first-child {
    font-size: 13px !important;
  }
}

/* On the narrowest laptops the inverse type scaling needs more line length.
   Widen only the Virtual Wildlife copy there and reduce the three neighbouring
   assets proportionally; larger laptop and desktop compositions stay intact. */
@media (min-width: 769px) and (max-width: 1120px) {
  #brand-design .virtual-copy {
    width: 32%;
  }

  #brand-design .brand-showcase-virtual {
    --vw-letterhead-left: 33%;
    --vw-letterhead-width: 19%;
  }

  #brand-design .brand-showcase-virtual .brand-asset-letterhead {
    left: var(--vw-letterhead-left);
    width: var(--vw-letterhead-width);
  }

  #brand-design .brand-showcase-virtual .brand-asset-card {
    left: calc(
      var(--vw-letterhead-left) +
      var(--vw-letterhead-width) +
      var(--vw-asset-pair-gap)
    );
    width: 23%;
  }

  #brand-design .brand-showcase-virtual .brand-asset-style {
    width: 22%;
  }
}

/* Continue the approved 1440px Virtual Wildlife pairing into desktop widths.
   This removes the breakpoint jump and keeps the gap proportional to the
   shared showcase instead of reverting both assets to unrelated anchors. */
@media (min-width: 1441px) {
  #brand-design .brand-showcase-virtual {
    --vw-letterhead-left: 31%;
    --vw-letterhead-width: 17.55%;
    --vw-asset-pair-gap: 1.25%;
  }

  #brand-design .brand-showcase-virtual .brand-asset-letterhead {
    left: var(--vw-letterhead-left);
    width: var(--vw-letterhead-width);
  }

  #brand-design .brand-showcase-virtual .brand-asset-card {
    left: calc(
      var(--vw-letterhead-left) +
      var(--vw-letterhead-width) +
      var(--vw-asset-pair-gap)
    );
  }
}

/* ReLeaf's letterhead SVG intentionally includes a large transparent area on
   its left. Align the visible page—not that invisible canvas—with the lower
   letter asset. Keep both brand descriptions on the same text measure. */
@media (min-width: 1024px) {
  #brand-design .brand-showcase-releaf .brand-asset-letterhead {
    transform: translateX(15.6%);
  }
}

/* Counter the rightward drift of the visible ReLeaf page on wide screens.
   The correction grows continuously from 0 at 1600px to 2.9 centimetres at
   2560px and then remains capped, so no breakpoint jump occurs. */
@media (min-width: 1600px) {
  #brand-design .brand-showcase-releaf .brand-asset-letterhead {
    --releaf-letterhead-left-correction: clamp(
      0px,
      calc(11.41732vw - 182.6772px),
      109.6063px
    );
    transform: translateX(
      calc(15.6% - var(--releaf-letterhead-left-correction))
    );
  }
}

@media (min-width: 769px) and (max-width: 1120px) {
  #brand-design .releaf-copy {
    width: 32%;
  }
}

@media (min-width: 1121px) {
  #brand-design .releaf-copy {
    width: 26%;
  }
}

/* From the PC breakpoint onward, raise regular reading copy by one
   typographic step. The size continues to grow gently with the viewport and
   hands over to the dedicated 2560px setting below. */
@media (min-width: 1441px) and (max-width: 2399px) {
  :root {
    --body-copy-size: clamp(16px, calc(1vw + 1px), 18px);
  }

  .about-intro p,
  .about-card p,
  .about-card a,
  .about-card dt,
  .about-card dd,
  .about-card li,
  .web-intro-description p,
  .web-styleguide > .web-concept p,
  .responsive-note p,
  .wireframe-note p,
  .brand-description-block > p:not(.eyebrow):not(.status-note),
  .virtual-copy > p:last-child,
  .releaf-copy > p:last-child,
  .morph-copy > p:last-child,
  .editorial-intro-description p,
  .editorial-concept p {
    font-size: var(--body-copy-size) !important;
  }
}

/* 2560px PC canvas: keep supporting copy comfortably readable on large,
   high-resolution displays. Display headlines retain their established scale;
   only navigation, body copy, labels and compact metadata are enlarged. */
@media (min-width: 2400px) {
  :root {
    --body-copy-size: 20px;
    --meta-copy-size: 16px;
  }

  .site-header .brand-name {
    font-size: 15px;
  }

  .site-header nav a {
    font-size: 18px;
  }

  .hero-kicker {
    font-size: 15px;
  }

  .scroll-hint {
    font-size: 14px;
  }

  .web-description-block .eyebrow,
  .brand-description-block .eyebrow,
  .editorial-description-block .eyebrow,
  .brand-case-header .eyebrow,
  .photo-folders-heading .eyebrow,
  .photo-detail-header .eyebrow,
  .photo-gallery-heading .eyebrow {
    font-size: 15px;
  }

  .web-intro-description p,
  .brand-description-block > p:not(.eyebrow):not(.status-note),
  .editorial-intro-description p {
    font-size: 20px;
    line-height: 1.48;
  }

  .web-number-card,
  .brand-number-card,
  .editorial-number-card {
    min-height: 324px;
  }

  .web-title-divider,
  .brand-title-divider,
  .editorial-title-divider {
    height: 264px;
  }

  .virtual-copy > p:last-child,
  .releaf-copy > p:last-child,
  .morph-copy > p:last-child,
  .editorial-concept p,
  .responsive-note p {
    font-size: 20px;
  }

  .web-style-title .web-style-kicker,
  .web-styleguide > .web-concept h3,
  .responsive-note h4,
  .wireframe-note h4,
  .editorial-concept h3,
  .virtual-copy .eyebrow,
  .releaf-copy .eyebrow,
  .morph-copy .eyebrow {
    font-size: 16px;
  }

  .wireframe-note p {
    font-size: 20px;
  }

  .status-note,
  .brand-description-block .status-note {
    font-size: 18px !important;
  }

  .wireframe-hotspot,
  .editorial-magazine-hint {
    font-size: 15px !important;
  }

  .photo-back-button {
    font-size: 15px;
  }

  .photo-subcategory-label small,
  .photo-gallery-heading > span,
  .photo-lightbox-caption {
    font-size: 14px;
  }

  .footer-bottom {
    font-size: 15px;
  }
}

/* 769-1023px uses the scaled laptop composition, with four deliberate
   exceptions requested for this narrow bridge between tablet and laptop. */
@media (min-width: 769px) and (max-width: 1023px) {
  /* Keep the complete Hope4Paws Style Tile safely above the sketches rule.
     Its background and the overlaid welfare mark move as one composition. */
  .web-styleguide::after,
  .web-styleguide > .web-components {
    position: relative;
    top: -1.5cm;
    align-self: start;
    justify-self: start;
    width: 594.25px;
    min-width: 594.25px;
    max-width: 594.25px;
  }

  /* Lock the wireframe, annotations and arrows to the approved laptop grid.
     The parent chapter scale now resizes the whole unit together. */
  .process-wireframe .wireframe-layout {
    width: 1120px;
    max-width: none;
    grid-template-columns:
      minmax(210px, 0.82fr)
      minmax(340px, 1.35fr)
      minmax(210px, 0.82fr);
    gap: 65px;
    margin-top: 64px;
    transform: scale(0.88);
    transform-origin: top center;
  }

  .wireframe-notes-left .wireframe-arrow {
    top: 46px !important;
    right: -108px;
    width: 98px;
    translate: 0 -0.3cm;
  }

  .wireframe-notes-left .wireframe-note:last-child .wireframe-arrow {
    translate: 0 -0.5cm;
  }

  .wireframe-notes-right .wireframe-arrow {
    top: 40px !important;
    left: -102px;
    width: 92px;
    translate: 0 0.5cm;
  }

  .wireframe-notes-right .wireframe-note:last-child {
    top: 65%;
    right: 0;
    bottom: auto;
  }

  /* Brand applications remain a real horizontal carousel in this range,
     without switching the surrounding chapter back to the tablet layout. */
  #brand-design .brand-showcase-virtual,
  #brand-design .brand-showcase-releaf {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    column-gap: 18px;
    align-items: center;
    aspect-ratio: auto;
    min-height: 0;
    margin-bottom: 0;
    overflow: visible;
    transform: none;
  }

  #brand-design .brand-showcase-virtual > .virtual-copy,
  #brand-design .brand-showcase-releaf > .releaf-copy {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    position: relative;
    inset: auto;
    width: 80%;
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
  }

  #brand-design .brand-asset-track {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    height: clamp(520px, 52vw, 540px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  #brand-design .brand-showcase-releaf .brand-asset-track {
    height: clamp(540px, 55vw, 580px);
  }

  #brand-design .brand-asset-track::-webkit-scrollbar {
    display: none;
  }

  #brand-design .brand-asset-track > .brand-asset {
    position: relative !important;
    inset: auto !important;
    display: grid;
    place-items: center;
    flex: 0 0 100%;
    width: 100% !important;
    height: 100%;
    aspect-ratio: auto !important;
    margin: 0;
    padding: 28px;
    overflow: hidden;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #brand-design .brand-asset-track > .brand-asset img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none !important;
  }

  #brand-design .brand-asset-track > .brand-asset-style,
  #brand-design .brand-showcase-virtual .brand-asset-letterhead {
    padding: 0;
  }

  #brand-design .brand-asset-track > .brand-asset-style img {
    width: calc(100% - 2px) !important;
    height: calc(100% - 2px) !important;
  }

  #brand-design .brand-showcase-releaf .brand-asset-letterhead {
    display: grid;
    place-items: center;
    padding: 4px;
  }

  #brand-design .brand-showcase-releaf .brand-asset-letterhead img {
    width: 469px !important;
    height: 372px !important;
    margin: auto;
    object-fit: contain;
    object-position: 50% 50%;
    transform: scale(1.44) translateX(-24%) !important;
    transform-origin: 50% 50%;
  }

  #brand-design .brand-showcase-releaf .brand-asset-card img,
  #brand-design .brand-showcase-releaf .brand-asset-envelope img {
    width: 410px !important;
    height: 312px !important;
  }

  #brand-design .brand-showcase-releaf > .brand-asset-envelope-copy {
    display: none !important;
  }

  #brand-design .brand-carousel-controls {
    display: contents;
  }

  #brand-design .brand-carousel-controls > .brand-carousel-button {
    grid-row: 2;
    align-self: center;
    justify-self: center;
    margin-top: 0;
  }

  #brand-design .brand-carousel-controls > .brand-carousel-button:first-of-type {
    grid-column: 1;
  }

  #brand-design .brand-carousel-controls > .brand-carousel-button:last-of-type {
    grid-column: 3;
  }

  #brand-design .brand-carousel-status {
    display: none;
  }
}

/* Carry the approved tablet About Me composition through the narrow-laptop
   bridge. Its surface and portrait grow continuously; type and bird retain
   the tablet proportions that were already approved. */
@media (min-width: 769px) and (max-width: 979px) {
  .about-panel {
    --about-panel-gutter: clamp(38px, 5vw, 52px);
    padding-top: var(--about-panel-gutter);
    padding-right: var(--about-panel-gutter);
    padding-left: var(--about-panel-gutter);
  }

  .about-intro {
    min-height: clamp(250px, 32.2vw, 330px);
    grid-template-columns:
      clamp(138px, calc(12.6vw + 41px), 170px)
      minmax(0, 1fr);
    align-items: center;
    gap: 1cm;
    padding: clamp(25px, 3.2vw, 33px);
    background: var(--blue);
    color: var(--white);
    border-radius: clamp(28px, 3.6vw, 38px);
    overflow: hidden;
  }

  .about-intro::before {
    content: none;
    display: none;
  }

  .about-intro-copy {
    display: block;
    position: relative;
    max-width: none;
    padding-right: clamp(131px, 17vw, 174px);
    transform: none;
  }

  .about-portrait {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 0.82;
    background: #d2d2d2;
    border: 0;
    border-radius: clamp(34px, 3.9vw, 40px);
  }

  .about-intro h2 {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    margin: 0 0 14px;
    color: var(--white);
    font-size: 48px;
    line-height: 0.9;
  }

  .about-intro p {
    grid-column: auto;
    width: auto;
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px !important;
  }

  .about-intro h2 + p {
    margin-top: 0;
  }

  .about-bird {
    top: 20px;
    right: calc(-135px - 1cm);
    width: 370px;
    max-width: none;
    transform: none;
  }
}

/* About Me keeps two cards per page through 845px. The three-card laptop
   page starts only at 846px, while retaining the established laptop order. */
@media (min-width: 769px) and (max-width: 845px) {
  .about-details {
    --about-narrow-laptop-card-gap: 6px;
    gap: var(--about-narrow-laptop-card-gap);
  }

  .about-details > .about-card {
    flex: 0 0 calc((100% - var(--about-narrow-laptop-card-gap)) / 2);
    width: calc((100% - var(--about-narrow-laptop-card-gap)) / 2);
    min-width: 0;
  }

  .about-details > .contact-card,
  .about-details > .language-card,
  .about-details > .technical-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .about-details > .education-card,
  .about-details > .interests-card,
  .about-details > .soft-skills-card {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

@media (min-width: 769px) and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #brand-design .brand-asset-track {
    scroll-behavior: auto;
  }
}

/* Deep Tune keeps its explanation below the magazine through 865px. From
   866px upward the established laptop/desktop side-by-side layout resumes. */
@media (min-width: 769px) and (max-width: 865px) {
  #editorial-design .editorial-cover-composition {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1160px);
  }

  #editorial-design .editorial-concept {
    grid-column: 1 / -1;
    justify-self: start;
    width: 80%;
    max-width: none;
    margin: 22px 0 0;
    text-align: left;
  }

  #editorial-design .editorial-concept > :is(h3, p) {
    text-align: left;
  }
}

/* One continuous Style Tile scale: each wider viewport receives a larger
   tile, while the 1440px and 2560px canvas zooms continue that same curve. */
@media (max-width: 768px) {
  .web-styleguide::after,
  .web-styleguide > .web-components {
    width: clamp(180px, calc(30.6vw + 82px), 317px);
    min-width: 0;
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  .web-styleguide {
    grid-template-columns: minmax(240px, 280px) 594.25px;
  }

  .web-styleguide::after,
  .web-styleguide > .web-components {
    width: 594.25px;
    min-width: 594.25px;
    max-width: 594.25px;
  }
}

@media (min-width: 1441px) and (max-width: 2559px) {
  .web-styleguide {
    --web-style-tile-size: clamp(
      594.25px,
      calc(14.82vw + 380.7px),
      760px
    );
    grid-template-columns: minmax(280px, 320px) var(--web-style-tile-size);
  }

  .web-styleguide::after,
  .web-styleguide > .web-components {
    width: var(--web-style-tile-size);
    min-width: var(--web-style-tile-size);
    max-width: var(--web-style-tile-size);
  }
}

@media (min-width: 2560px) {
  .web-styleguide {
    grid-template-columns: minmax(280px, 320px) 760px;
  }

  .web-styleguide::after,
  .web-styleguide > .web-components {
    width: 760px;
    min-width: 760px;
    max-width: 760px;
  }
}

/* The Editorial note and Photography portrait now follow the same continuous
   growth principle as the other one-line chapter illustrations. */
@media (max-width: 768px) {
  #fotografie .photo-one-line {
    width: clamp(60px, calc(14.51vw + 13.6px), 125px);
  }

  #editorial-design .editorial-note,
  #editorial-design .editorial-title-block h2::after {
    width: clamp(160px, calc(33.48vw + 52.9px), 310px);
  }

  #editorial-design .editorial-title-block h2::after {
    max-width: calc(60% - 12px);
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  #fotografie .photo-one-line {
    width: 234px;
    max-width: none;
  }

  #editorial-design .editorial-note {
    width: 580.5px;
    max-width: none;
  }
}

@media (min-width: 1441px) and (max-width: 2559px) {
  #fotografie .photo-one-line {
    width: clamp(234px, calc(7.692vw + 123.2px), 320px);
    max-width: none;
  }

  #editorial-design .editorial-note {
    width: clamp(580.5px, calc(16.07vw + 349px), 760px);
    max-width: none;
  }
}

@media (min-width: 2560px) {
  #fotografie .photo-one-line {
    width: 320px;
    max-width: none;
  }

  #editorial-design .editorial-note {
    width: 760px;
    max-width: none;
  }
}

/* Photography keeps its title as one compact two-line word. The hyphen and
   lowercase continuation are visual title styling, while the existing text
   remains a clean "Fotografie" heading for assistive technology. */
#fotografie .photo-title-block h2 > span:first-of-type::after {
  content: "-";
}

#fotografie .photo-title-block h2 > span:nth-of-type(2) {
  text-transform: lowercase;
}

#fotografie .photo-title-block h2 > span + span {
  margin-top: -0.02em;
}

/* On phones and tablets the portrait is moved into the heading by JavaScript.
   Taking it out of the grid flow prevents its tall aspect ratio from opening
   a large gap between "Foto-" and "grafie". The heading still reserves the
   portrait's full height, so neither the text nor artwork overlaps the next
   chapter row. */
@media (max-width: 768px) {
  #fotografie .photo-title-block h2 {
    --photo-art-width: clamp(60px, calc(14.51vw + 13.6px), 125px);
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: clamp(107px, calc(25.72vw + 24.1px), 222px);
    padding-right: calc(var(--photo-art-width) + clamp(8px, 2.5vw, 14px));
  }

  #fotografie .photo-title-block h2 > .photo-one-line {
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--photo-art-width);
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* From laptop size onward, title and portrait share one real grid row. This
   keeps their vertical centers aligned and lets the portrait's own height
   expand the row naturally instead of positioning it below the heading. */
@media (min-width: 769px) {
  #fotografie .photo-intro-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(32px, 4vw, 64px);
    min-height: 390px;
  }

  #fotografie .photo-title-block {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  #fotografie .photo-one-line {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    height: auto;
    margin: 0;
    transform: none;
  }
}

/* Responsive UX refinements: readable Wireframe controls, a calmer narrow
   laptop handoff and navigation landings that match the fixed header. */
body {
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  left: 0;
  height: var(--fixed-header-top-gap, 18px);
  background: var(--ink);
  pointer-events: none;
}

@media (min-width: 320px) and (max-width: 620px) {
  .wireframe-hotspot {
    width: clamp(52px, 15vw, 64px);
    min-height: clamp(34px, 8.5vw, 40px);
    padding: 7px clamp(6px, 1.7vw, 9px) 6px;
    overflow: visible;
    font-size: clamp(9px, 2.5vw, 10px) !important;
    letter-spacing: 0.035em;
    touch-action: manipulation;
  }

  /* Preserve a minimum 44px touch area without making the visible pills
     dominate the small Wireframe illustration. */
  .wireframe-hotspot::before {
    content: "";
    position: absolute;
    inset: -5px -4px;
    border-radius: inherit;
  }

  .wireframe-hotspot:first-child {
    --wireframe-hotspot-y: 7%;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  /* The chapter still uses the approved laptop composition, but the copy
     receives enough line length to avoid a tall, narrow text column. The
     authored width eases back into the established 1024px composition so
     there is no visible jump at the end of the bridge. */
  #web-design .web-title-block {
    --narrow-web-card-width: clamp(507px, calc(1164px - 64.2vw), 670px);
    grid-template-columns: var(--narrow-web-card-width) minmax(190px, 210px);
    gap: 34px;
    width: calc(var(--narrow-web-card-width) + 244px);
  }

  #web-design .web-number-card {
    grid-template-columns: 105px 1px minmax(0, 1fr);
    gap: 24px;
  }
}

:where(#start, #ueber-mich, #web-design, #brand-design, #editorial-design, #fotografie, #kontakt) {
  scroll-margin-top: 0;
}

@media (max-width: 768px) {
  body::before {
    height: 10px;
  }

  html {
    scroll-padding-top: 62px;
  }
}

@media (min-width: 769px) and (max-width: 2560px) {
  html {
    scroll-padding-top: 76px;
  }
}

/* Final responsive artwork alignment. The laptop canvas is zoomed from a
   1440px reference, so the inverse-scaled variable keeps the requested
   downward planet offset visually close to one centimetre at every width. */
@media (min-width: 769px) and (max-width: 1440px) {
  #web-design .web-earth {
    translate: 0 var(--laptop-visible-centimeter, 37.795px);
  }
}

/* On mobile, the note stays completely to the right of both title lines.
   JavaScript derives the real word edge after the font has loaded, which
   also covers the narrow 320px layout without guessing at text width. */
@media (max-width: 768px) {
  #editorial-design .editorial-title-block h2::after {
    right: auto;
    left: var(--editorial-note-safe-left, 40%);
    width: var(--editorial-note-safe-width, min(46vw, 200px));
    max-width: none;
  }
}

/* On wider layouts the note keeps its established right edge and is reduced
   only when its box would reach the word "Design". */
@media (min-width: 769px) {
  #editorial-design .editorial-note {
    max-width: var(--editorial-note-safe-width, none);
  }

  /* The portrait no longer defines an oversized grid row. It is anchored to
     the bottom of the blue title card, so it can extend upward but never
     below that card. */
  #fotografie .photo-intro-layout {
    display: block;
    min-height: 0;
  }

  #fotografie .photo-one-line {
    position: absolute;
    right: 0;
    bottom: 0;
    align-self: auto;
    justify-self: auto;
    height: auto;
    margin: 0;
    transform: none;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  #fotografie .photo-one-line {
    width: 170px;
  }
}

@media (min-width: 1441px) and (max-width: 1600px) {
  #fotografie .photo-one-line {
    width: 160px;
  }
}

@media (min-width: 1600px) and (max-width: 2559px) {
  #fotografie .photo-one-line {
    width: clamp(180px, calc(6.25vw + 80px), 240px);
  }
}

@media (min-width: 2560px) {
  #fotografie .photo-one-line {
    width: 240px;
  }
}

/* The second editorial project uses the same magazine component. A stable
   gap keeps the two independent covers clearly separated at every size. */
.editorial-cover-composition + .editorial-cover-composition {
  margin-top: clamp(72px, 9vw, 150px);
}

/* Echo deliberately stays flat against the dark editorial background. */
.editorial-cover-composition-echo .magazine-page,
.editorial-cover-composition-echo .magazine-turning-page,
.editorial-cover-composition-echo .magazine-face,
.editorial-cover-composition-echo .magazine-book {
  box-shadow: none !important;
}

/* Bridge the former hard jump between the 1440px laptop canvas and the wide
   PC chapter introductions. Every part of the four title compositions now
   grows continuously into the established 1960px desktop proportions. */
@media (min-width: 1441px) and (max-width: 1959px) {
  .web-title-block,
  .brand-title-block {
    --chapter-title-width: clamp(
      790px,
      calc(71.1538vw - 234.615px),
      1160px
    );
    --chapter-card-width: clamp(
      430px,
      calc(69.4231vw - 569.692px),
      791px
    );
    --chapter-title-gap: clamp(36px, calc(1.9231vw + 8.308px), 46px);
    grid-template-columns: var(--chapter-card-width) minmax(0, 1fr);
    gap: var(--chapter-title-gap);
    width: var(--chapter-title-width);
    max-width: 100%;
  }

  .editorial-title-block {
    --chapter-title-width: clamp(
      1040px,
      calc(23.0769vw + 707.692px),
      1160px
    );
    --chapter-card-width: clamp(
      486px,
      calc(58.6538vw - 358.615px),
      791px
    );
  }

  .photo-title-block {
    --chapter-title-width: clamp(
      880px,
      calc(53.8462vw + 104.615px),
      1160px
    );
  }

  .web-number-card,
  .brand-number-card {
    grid-template-columns:
      clamp(108px, calc(7.1154vw + 5.538px), 145px)
      1px
      minmax(0, 1fr);
    gap: 24px;
    padding-block: 30px;
    padding-inline: clamp(36px, calc(0.3846vw + 30.462px), 38px);
  }

  .web-number-card {
    min-height: clamp(222px, calc(8.0769vw + 105.692px), 264px);
  }

  .brand-number-card {
    min-height: clamp(198px, calc(7.3077vw + 92.769px), 236px);
  }

  .editorial-number-card {
    min-height: clamp(222px, calc(2.6923vw + 183.231px), 236px);
  }

  .web-number,
  .brand-number,
  .editorial-number {
    font-size: clamp(106px, calc(3.8462vw + 50.615px), 126px);
  }

  .web-title-block h2,
  .brand-title-block h2 {
    font-size: clamp(98px, calc(6.0308vw + 11.157px), 129.36px);
  }

  .editorial-title-block h2 {
    font-size: clamp(92px, calc(7.1846vw - 11.458px), 129.36px);
  }

  .web-title-divider {
    height: clamp(180px, calc(6.1538vw + 91.385px), 212px);
  }

  .brand-title-divider {
    height: clamp(158px, calc(5.7692vw + 74.923px), 188px);
  }

  .editorial-title-divider {
    height: clamp(180px, calc(1.5385vw + 157.846px), 188px);
  }
}