/* Footer without the former centered font credit. */
.footer-bottom {
  grid-template-columns: 1fr auto;
}

/* Keep the lower Editorial circle fully inside the section boundary. */
.editorial-orb-right {
  top: auto;
  bottom: clamp(24px, 4vw, 64px);
}

.editorial-orb-left {
  top: calc(31% - 7cm);
}

/* Tighten the transition from Brand Design into Editorial Design. */
#brand-design {
  padding-bottom: clamp(20px, 3vw, 44px);
}

#editorial-design {
  padding-top: calc(clamp(24px, 3vw, 44px) + 0.5cm);
}

/* Use one opaque dark surface across the Brand-to-Editorial transition. */
#brand-design,
#brand-design > .brand-case-dark,
#editorial-design {
  background-color: var(--ink);
}

/* Shared blue-orb rhythm: two alternating ornaments per viewport height. */
.blue-orb-rhythm-enabled .web-project::before,
.blue-orb-rhythm-enabled .web-styleguide > .web-style-circle,
.blue-orb-rhythm-enabled .web-process::before,
.blue-orb-rhythm-enabled .web-project .process-circle,
.blue-orb-rhythm-enabled .brand-case-dark > .section-orb {
  display: none !important;
}

.uniform-blue-orb-layer {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.brand-case-dark .uniform-blue-orb-layer {
  right: auto;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.uniform-blue-orb {
  position: absolute;
  width: clamp(250px, 27vw, 420px);
  aspect-ratio: 1;
  opacity: 0.78;
  background: url("../assets/web/process/blue-circle-left.svg") center / contain no-repeat;
}

.uniform-blue-orb.is-left {
  left: 0;
  transform: translate(-10%, -50%);
}

.uniform-blue-orb.is-right {
  right: 0;
  transform: translate(10%, -50%) scaleX(-1);
}

@media (min-width: 1600px) {
  .uniform-blue-orb {
    width: 470px;
  }
}

@media (max-width: 700px) {
  .uniform-blue-orb {
    opacity: 0.68;
  }
}

/* Keep the hidden native control at the magazine's center so browser focus
   never targets the top edge of the composition. */
.editorial-magazine-toggle {
  top: 50%;
  left: 50%;
}

/* Tighten the transition from the magazine into the Photography panel. */
#editorial-design {
  padding-bottom: 0.5cm;
}

#fotografie {
  padding-top: 0.5cm;
}

/* Pull the divider below the Photography introduction upward by 2 cm. */
.photo-divider {
  margin-top: -1cm;
}

/* Reduce the transition from Photography into Contact by about 3 cm. */
#fotografie {
  padding-bottom: max(12px, calc(clamp(50px, 9vw, 130px) - 1.5cm));
}

#kontakt {
  padding-top: max(12px, calc(clamp(50px, 9vw, 130px) - 1.5cm));
}

/* Give the contact headline a little more breathing room. */
#kontakt h2 {
  letter-spacing: -0.035em;
}

/* About Me navigation becomes a horizontal card carousel on phones, tablets
   and common laptop widths. */
.about-carousel-controls {
  display: none;
}

.about-carousel-shell {
  display: contents;
}

/* The wrapper has no desktop box, so the established brand compositions stay intact. */
.brand-asset-track {
  display: contents;
}

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

@media (max-width: 1440px) {
  .about-panel {
    padding-bottom: clamp(38px, 3vw, 48px);
  }

  .about-carousel-shell {
    position: relative;
    display: block;
    min-width: 0;
  }

  .about-details {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    height: clamp(320px, 80vw, 330px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding-bottom: 0;
  }

  .about-details::-webkit-scrollbar {
    display: none;
  }

  .about-details > .about-card {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    align-self: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .about-details > .contact-card {
    order: 1;
  }

  .about-details > .language-card {
    order: 2;
  }

  .about-details > .education-card {
    order: 3;
  }

  .about-details > .interests-card {
    order: 4;
  }

  .about-details > .soft-skills-card {
    order: 5;
  }

  .about-details > .technical-card {
    order: 6;
  }

  .about-carousel-controls {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  .about-carousel-button {
    appearance: none;
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border: 1px solid rgba(28, 43, 53, 0.16);
    border-radius: 50%;
    background: rgba(247, 246, 242, 0.84);
    color: var(--ink);
    cursor: pointer;
    font-size: 21px;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease, opacity 180ms ease,
      transform 180ms ease;
  }

  .about-carousel-controls .about-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
  }

  .about-carousel-previous {
    left: calc(-1 * var(--about-panel-gutter) + 26px);
  }

  .about-carousel-next {
    right: calc(-1 * var(--about-panel-gutter) + 26px);
  }

  .about-carousel-button > span {
    display: grid;
    place-items: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    transform: translateY(-0.1em);
  }

  .about-carousel-button:disabled {
    opacity: 0.34;
    cursor: default;
  }

  .about-carousel-button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
  }

  .about-carousel-status {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    min-width: 128px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-align: center;
    transform: translateX(-50%);
  }

  .about-carousel-controls .about-carousel-status {
    display: none;
  }
}

@media (max-width: 1440px) and (hover: hover) {
  .about-carousel-button:not(:disabled):hover {
    background: var(--ink);
    color: var(--white);
    transform: scale(1.06);
  }

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

@media (max-width: 1440px) and (prefers-reduced-motion: reduce) {
  .about-details {
    scroll-behavior: auto;
  }
}

/* The compact education label saves a full text line on tablets and laptops,
   allowing the complete grey About Me panel to become shorter. */
@media (min-width: 621px) and (max-width: 1440px) {
  .about-panel {
    padding-bottom: clamp(30px, 2.4vw, 38px);
  }

  .about-details {
    height: 292px;
  }

  .education-card .education-entry:nth-of-type(2) .education-copy span {
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
  }

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

  .education-card .education-entry:nth-of-type(2) .education-copy span::after {
    content: "Angewandte Wirtschafts- & Medienpsychologie";
    font-size: var(--body-copy-size);
    line-height: 1.38;
    letter-spacing: -0.03em;
  }
}

/* Tablets show two About Me topics per page. Phones keep one topic, while
   the established laptop layout below continues to show three. */
@media (min-width: 621px) and (max-width: 768px) {
  .about-details {
    --about-tablet-card-gap: clamp(2px, 0.5vw, 4px);
    gap: var(--about-tablet-card-gap);
  }

  .about-details > .about-card {
    flex: 0 0 calc((100% - var(--about-tablet-card-gap)) / 2);
    align-self: flex-start;
    width: calc((100% - var(--about-tablet-card-gap)) / 2);
    min-width: 0;
    text-align: center;
  }

  .about-details > .contact-card,
  .about-details > .education-card,
  .about-details > .soft-skills-card {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .about-details > .language-card,
  .about-details > .interests-card,
  .about-details > .technical-card {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }
}

/* Keep the approved compact About cards on laptops while leaving the intro
   above the divider in its desktop composition. */
@media (min-width: 769px) and (max-width: 1440px) {
  .about-details {
    --about-laptop-card-gap: clamp(6px, 0.8vw, 10px);
    gap: var(--about-laptop-card-gap);
  }

  /* Laptop pages: Kontakt / Bildung / Technical Skills, followed by
     Sprachen / Interessen / Soft Skills. Other breakpoints retain their
     established order. */
  .about-details > .contact-card {
    order: 1;
  }

  .about-details > .education-card {
    order: 2;
  }

  .about-details > .language-card {
    order: 3;
  }

  .about-details > .interests-card {
    order: 4;
  }

  .about-details > .technical-card {
    order: 5;
  }

  .about-details > .soft-skills-card {
    order: 6;
  }

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

  .about-details > .about-card {
    flex: 0 0 calc((100% - (2 * var(--about-laptop-card-gap))) / 3);
    align-self: flex-start;
    position: static;
    left: auto;
    width: calc((100% - (2 * var(--about-laptop-card-gap))) / 3);
    min-width: 0;
    text-align: center;
  }

  .technical-card {
    width: 100%;
  }

  .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;
  }

  .interests-cloud {
    width: min(100%, 770px);
    max-width: 100%;
    margin-inline: auto;
    transform: none;
  }

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

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

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

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

  .education-card .education-entry p,
  .education-card .education-entry strong,
  .education-card .education-entry span {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

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

  .education-card .education-entry:first-of-type::after {
    content: "\2193";
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
  }

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

  .education-card > .about-card-icon,
  .education-card > h3,
  .education-card .education-entry,
  .education-card .education-entry p,
  .education-card .education-entry strong,
  .education-card .education-entry span {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .education-card .education-entry:first-of-type::after {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .education-card .education-entry:nth-of-type(2) {
    left: 0;
  }

  .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: min(100%, 320px);
    margin-inline: auto;
    justify-items: center;
  }

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

  .technical-card .software-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    max-width: none;
  }

  .technical-card .software-stars {
    flex: 0 1 64px;
    width: 64px;
    max-width: 64px;
    height: auto;
    margin-top: 0;
  }
}

/* On phones, simplify the transition into the sketches: the desktop pen
   disappears and its two line fragments become one uninterrupted rule. */
@media (max-width: 620px) {
  .process-pen-divider {
    display: block;
    position: relative;
    min-height: 134px;
  }

  .process-pen-divider > * {
    display: none;
  }

  .process-pen-divider::before {
    content: "";
    position: absolute;
    top: 40px;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(239, 242, 241, 0.72);
  }
}

/* From Hope4Paws onward, laptops use one fixed PC canvas. Scaling that canvas
   as a whole preserves the desktop arrangement instead of rearranging its
   individual text and image elements. */
@media (min-width: 769px) and (max-width: 1440px) {
  #web-design .web-title-block,
  #brand-design .brand-title-block,
  #fotografie .photo-title-block {
    grid-template-columns: 516px minmax(170px, 210px);
    gap: 36px;
    width: min(100%, 950px);
  }

  #editorial-design .editorial-title-block {
    grid-template-columns: 528px minmax(230px, 280px);
    gap: 36px;
    width: min(100%, 1000px);
  }

  #web-design .web-number-card {
    grid-template-columns: 116px 1px minmax(0, 1fr);
    gap: 24px;
    min-height: 264px;
    padding: 30px 38px;
  }

  #brand-design .brand-number-card,
  #editorial-design .editorial-number-card,
  #fotografie .brand-number-card {
    grid-template-columns: 145px 1px minmax(0, 1fr);
    gap: 24px;
    min-height: 236px;
    padding: 28px 38px;
  }

  #web-design .web-number,
  #brand-design .brand-number,
  #editorial-design .editorial-number,
  #fotografie .brand-number {
    font-size: 126px;
  }

  #web-design .web-description-block .eyebrow,
  #brand-design .brand-description-block .eyebrow,
  #editorial-design .editorial-description-block .eyebrow,
  #fotografie .brand-description-block .eyebrow {
    font-size: 13px;
  }

  #web-design .web-intro-description p,
  #brand-design .brand-description-block > p:not(.eyebrow),
  #editorial-design .editorial-intro-description p,
  #fotografie .brand-description-block > p:not(.eyebrow) {
    font-size: 15px;
  }

  #brand-design .brand-description-block .status-note,
  #editorial-design .editorial-description-block .status-note,
  #fotografie .brand-description-block .status-note {
    font-size: 11px !important;
  }

  #web-design,
  #brand-design,
  #editorial-design,
  #fotografie,
  #kontakt {
    width: 1440px;
    max-width: none;
    zoom: var(--laptop-pc-scale, 0.8);
  }
}

/* Preserve the desktop breathing room around the Portfolio sphere on laptops.
   Its height now follows the viewport as well as its width, so short laptop
   screens can never crop the artwork. */
@media (min-width: 769px) and (max-width: 1440px) {
  .hero-orb {
    width: min(58vw, 70svh, 760px);
    max-width: calc(100vw - 48px);
  }

  #brand-design .brand-title-block h2,
  #brand-design .brand-description-block,
  #brand-design .brand-description-block p,
  #brand-design .brand-case-header,
  #brand-design .brand-case-header p,
  #brand-design .brand-case-header h3,
  #brand-design .virtual-copy,
  #brand-design .virtual-copy p,
  #brand-design .releaf-copy,
  #brand-design .releaf-copy p {
    text-align: left;
  }
}

/* On tablets, keep the Portfolio wordmark at the same visual ratio to the
   sphere that is already established at the phone breakpoint. */
@media (min-width: 621px) and (max-width: 768px) {
  .hero h1 {
    font-size: clamp(118px, 19vw, 171px);
  }
}

/* Four-part footer navigation: identity, two future legal pages, and the
   existing back-to-top action. */
.footer-bottom {
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 72px);
}

.footer-bottom p {
  justify-self: start;
  margin: 0;
}

.footer-legal-link,
.footer-back-link {
  position: relative;
  width: max-content;
  padding: 5px 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-legal-link {
  border: 0;
  background: transparent;
}

.footer-back-link {
  justify-self: end;
}

.footer-legal-link::after,
.footer-back-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible,
.footer-back-link:hover,
.footer-back-link:focus-visible {
  color: var(--white);
  transform: translateY(-2px);
}

.footer-legal-link:hover::after,
.footer-legal-link:focus-visible::after,
.footer-back-link:hover::after,
.footer-back-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer-legal-link:focus-visible,
.footer-back-link:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 5px;
}

@media (max-width: 620px) {
  .footer-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }

  .footer-bottom p,
  .footer-legal-link,
  .footer-back-link {
    justify-self: start;
  }

  .footer-legal-link:nth-of-type(2),
  .footer-back-link {
    justify-self: end;
  }
}