@font-face {
  font-family: "Handwriteing Faden";
  src: url("fonts/HandwriteingFaden-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Schreibschrift Faden";
  src: url("fonts/SchreibschriftFaden-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #dddbd6;
  color: #d9231a;
  font-family: "Handwriteing Faden", cursive;
  font-size: 1.1rem;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid #1f1fd6; outline-offset: 3px; }

/* ---------- Header ---------- */
/* Logo und Burger bleiben beim Scrollen auf jeder Seite oben fixiert */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 26px;
  pointer-events: none;   /* leere Fläche dazwischen blockiert keine Klicks */
}
.site-header > * { pointer-events: auto; }

.logo {
  display: block;
  width: 35px;
  height: 35px;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);   /* federnd wie der Burger */
}
.logo img { width: 100%; height: 100%; }
.logo:hover,
.logo:focus-visible { transform: scale(1.2); }
.logo:active { transform: scale(1.08); }
/* Startseite: Logo bleibt ruhig */
.page-home .logo:hover,
.page-home .logo:focus-visible,
.page-home .logo:active { transform: none; }

.burger {
  display: grid;
  gap: 5px;
  width: 32px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);   /* federnd wie die Menüpunkte */
}
.burger:hover,
.burger:focus-visible { transform: scale(1.2); }
.burger:active { transform: scale(1.08); }
.burger span { display: block; height: 1.5px; background: #d9231a; }

/* Header auf grossen Bildschirmen (Entwurf 1920 px): Logo 50 px, Rand 60 px */
@media (min-width: 1200px) {
  .site-header { padding: 37px 60px; }
  .logo { width: 50px; height: 50px; }
  .burger { width: 50px; gap: 13px; padding: 7px 0; }
  .burger span { height: 2px; }
}

/* ---------- Hero ---------- */
/* Hero im Format 1920 x 1080 (Entwurf): so gross wie möglich, ohne höher als
   der Bildschirm zu werden – "Work" erscheint erst beim Scrollen */
.hero-screen {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-bottom: 64px;
}
.hero {
  position: relative;
  container-type: inline-size;
  width: min(100%, 100vh * 1920 / 1080);
  width: min(100%, 100svh * 1920 / 1080);
  margin: 0 auto;
  aspect-ratio: 1920 / 1080;
  overflow-x: clip; /* transparenter Bildrand ragt rechts über den Rand */
}

.hero-img {
  position: absolute;
  height: auto;
  max-width: none;
}
/* FADEN 1050 x 629 px bei x 66 / y 433 */
.faden  { left: 3.44%; top: 40.1%; width: 54.7%; z-index: 2; }
/* animiertes PNG (2000×2000, viel transparenter Rand), 1061 px breit bei x 817 / y 21
   – klickt nicht über "More about me" */
.leonie { left: 42.5%; top: 1.95%; width: 55.3%; z-index: 3; pointer-events: none; }

/* Text bei x 322 / y 230, um -6° gedreht – endet vor Leonies erhobenem Fuss */
.hero-text {
  position: absolute;
  top: 21.3%;
  left: 16.8%;
  z-index: 1;
  margin: 0;
  white-space: nowrap;
  font-size: max(0.8rem, 1.35cqw);
  line-height: 1.3;
  transform: rotate(-6deg);
  transform-origin: left top;
}

.hero-hi { font-size: 1.35em; }

/* "More about me" bei x 1216 / y 270 – über Leonies Rock */
.more-link {
  position: absolute;
  top: 25%;
  left: 63.3%;
  z-index: 4;
  font-size: max(0.7rem, 1.5cqw);
  line-height: 1.1;
  text-transform: uppercase;
  padding-bottom: 6px;
  min-width: 8cqw;
  border-bottom: 2px solid #d9231a;   /* gleich dick wie die Pfeile bei Work */
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);   /* federnd wie Logo und Burger */
}
.more-link:hover,
.more-link:focus-visible { transform: scale(1.12); }
.more-link:active { transform: scale(1.05); }
.more-link::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: -7px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #d9231a;
  border-right: 2px solid #d9231a;
  transform: rotate(45deg);
}

/* ---------- Headings ---------- */
h2 {
  margin: 0 0 56px;
  text-align: center;
  font-family: "Handwriteing Faden", cursive;
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 7rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Work ---------- */
.work { padding: 0 24px 96px; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
  max-width: 992px;
  margin: 0 auto;
}

.card { display: block; }

.thumb {
  aspect-ratio: 472 / 600;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .thumb img { transform: scale(1.04); }

.card-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-top: 11px;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
}
.card-label.right { justify-content: flex-end; align-items: center; }

/* Pfeil aus CSS */
.arrow {
  position: relative;
  flex: none;
  width: 54px;
  height: 19px;
  margin-top: 2px;
  transition: transform 0.25s ease;
}
.arrow::before {
  content: "";
  position: absolute;
  left: 0; right: 2px; top: 50%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 10px; height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
a:hover .arrow { transform: translateX(6px); }

/* ---------- Skills ---------- */
.skills { padding: 0 24px 96px; }

.skill {
  display: block;
  max-width: 1536px;
  margin: 0 auto 48px;
}
.skill img {
  width: 100%;
  aspect-ratio: 1536 / 800;
  min-height: 192px;
  object-fit: cover;
  background: #bdb8b0;
}

/* ---------- About Me ---------- */
.about-top {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1920 / 1044;
  /* grau 0–304px, rot 304–1044px */
  background: linear-gradient(to bottom, #dddbd6 0 29.12%, #ff4d52 29.12% 100%);
}

/* Foto (freigestellt, 1305 px breit), bei x 433 / y 289 – Schriftzug liegt darüber */
.about-photo {
  position: absolute;
  left: 22.53%;
  top: 27.65%;
  width: 67.97%;
  height: auto;
}

/* Text links in der roten Fläche, bei x 207 / y 616, um -9° gedreht */
.about-text {
  position: absolute;
  left: 10.78%;
  top: 59%;
  z-index: 3;
  margin: 0;
  color: #fff;
  font-size: 1.46cqw;      /* 28 px bei 1920 px Breite */
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: rotate(-9deg);
  transform-origin: left top;
}
.about-hi {
  font-size: 1.4em;
  letter-spacing: 0.04em;
}

/* Schriftzug: AboutME 1209 x 324 px, bei x 338 / y 166 */
.about-title {
  position: absolute;
  left: 17.6%;
  top: -25.37%;
  z-index: 2;
  width: 62.97%;
  margin: 0;
}
.about-title img { width: 125%; height: auto; max-width: none; }

/* gedrehte Stacks am Rand erzeugen keinen seitlichen Scrollbalken */
.page-about main { overflow-x: clip; }

/* grauer Abschluss: 122 px hoch */
.about-end {
  width: 100%;
  aspect-ratio: 1920 / 122;
}

/* Photostacks: Bereich 1920 x 2074 px (Entwurf), Foto unten 992 px hoch */
.about-stacks {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1920 / 2074;
}

.stacks-photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 47.8%;
  object-fit: cover;
  object-position: center 70%;
}

/* Lage jedes Stacks: Mitte (x / y), Breite, Drehung */
.stack-zfa   { --x: 34.9%; --y: 11%;   --w: 24.3%; --r: 15.5deg; }
.stack-job   { --x: 76.1%; --y: 14.4%; --w: 24.2%; --r: 14.5deg; }
.stack-hobby { --x: 18.8%; --y: 32.5%; --w: 24%;   --r: -16.5deg; }
.stack-me    { --x: 51.1%; --y: 36.7%; --w: 29.3%; --r: -9deg; }
.stack-bm    { --x: 82.1%; --y: 43.8%; --w: 21.7%; --r: 15deg; }
.stack-ort   { --x: 41.7%; --y: 62.5%; --w: 24.2%; --r: -17deg; }

.stack {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--r));
  transition: left 0.6s cubic-bezier(0.7, 0, 0.3, 1), top 0.6s cubic-bezier(0.7, 0, 0.3, 1),
              width 0.6s cubic-bezier(0.7, 0, 0.3, 1), transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.stack:hover { transform: translate(-50%, -50%) rotate(var(--r)) scale(1.04); }

/* angewählt: liegt gerade in der Mitte des Bildschirms (--cx / --cy setzt about.js) */
.stack.is-active,
.stack.is-active:hover {
  z-index: 20;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: min(44vw, 85vh);
  transform: translate(-50%, -50%) rotate(0deg);
  cursor: zoom-out;
}

.stack-layer,
.stack-photos {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
/* farbige Platzhalter, solange ein Stack noch keine Fotos hat */
.stack-layer { opacity: 0.75; }
.stack-layer-violet { background: #8b8bea; transform: translate(3%, -2%) rotate(5deg); }
.stack-layer-yellow { background: #f4fbb0; transform: translate(-2%, 3%) rotate(-6deg); }
.stack.is-active .stack-layer-violet { transform: translate(5%, -4%) rotate(8deg); }
.stack.is-active .stack-layer-yellow { transform: translate(-4%, 5%) rotate(-9deg); }

.stack-photos {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ebc8aa;
  box-shadow: 0 0 0 0.4cqw rgba(232, 160, 190, 0.6);
}
.stack.has-photos .stack-layer,
.stack.has-photos .stack-label { display: none; }
/* cqw/cqh ab hier = Breite/Höhe des Stacks */
.stack.has-photos .stack-photos { container-type: size; overflow: visible; background: none; box-shadow: none; }

/* Fotos liegen in ihrem eigenen Format übereinander, das erste zuoberst */
.stack-photos > img,
.stack-photos > video,
.stack-photos > .stack-pic,
.stack-photos > .stack-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  box-shadow: 0 0.6cqw 2.6cqw rgba(0, 0, 0, 0.25);
  filter: grayscale(1);
  transition: filter 0.4s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.stack-photos > :nth-child(2)    { z-index: 3; }
.stack-photos > :nth-child(3)    { z-index: 2; --tilt: 5deg; }
.stack-photos > :nth-child(n+4)  { z-index: 1; --tilt: -6deg; }
/* schwarz-weiss, beim Hovern und angewählt farbig */
.stack:hover .stack-photos > *,
.stack.is-active .stack-photos > * { filter: none; }
/* oberstes Foto fliegt beim Durchklicken weg */
.stack-photos > .is-leaving {
  z-index: 4;
  transition: transform 0.35s ease-in, opacity 0.35s ease-in;
  transform: translate(-50%, -50%) translate(60%, -20%) rotate(12deg);
  opacity: 0;
}
.stack.is-active.has-photos { cursor: pointer; }

/* Foto mit Text: Rahmen und Text klappen erst in der Mitte auf */
.stack-photos > .stack-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: none;
  background: transparent;
  box-shadow: none;
  transition: filter 0.4s ease, opacity 0.6s ease, background 0.5s ease, box-shadow 0.5s ease,
              transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.stack-card img {
  display: block;
  width: auto;
  height: auto;   /* sonst gilt height aus dem HTML und Querformate werden verzerrt */
  max-width: 100%;
  max-height: 100cqh;
  margin: 0 auto;
  box-shadow: 0 0.6cqw 2.6cqw rgba(0, 0, 0, 0.25);
}
.stack.is-active .stack-photos > .stack-card { background: #f4f4f4; box-shadow: 0 0.6cqw 2.6cqw rgba(0, 0, 0, 0.25); }
.stack.is-active .stack-card img { box-shadow: none; }
.stack-card-text {
  max-height: 0;
  padding: 0 0.4em;
  overflow: hidden;
  opacity: 0;
  color: #d9231a;
  font-size: 4.2cqw;
  line-height: 1.2;
  text-align: left;
  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.4s ease;
}
.stack-card-center .stack-card-text { text-align: center; }
/* Hochformat 3:4: Rahmen so breit wie das Foto */
.stack-photos > .stack-card-portrait { width: 75cqh; }
.stack.is-active .stack-card-text { max-height: 3em; padding: 0.3em 0.4em; opacity: 1; }
.stack.is-active .stack-card-text:last-child { padding-bottom: 0.9em; }

/* Foto mit kleiner Notiz: weisser Streifen unten links, erscheint erst in der Mitte */
.stack-pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100cqw;
  max-height: 100cqh;
}
.stack-note {
  position: absolute;
  left: 12%;
  bottom: 9%;
  /* möglichst eine Zeile, darf wie ein Kleber über den Bildrand ragen; lange Notizen brechen um */
  width: max-content;
  max-width: 70cqw;
  padding: 0.15em 0.5em 0.1em;
  background: rgba(255, 255, 255, 0.88);
  color: #d9231a;
  font-size: 3.4cqw;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: left;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}
.stack.is-active .stack-note { opacity: 1; transform: none; }

.stack-label {
  color: #1a1a1a;
  font-size: 1.6cqw;
}

/* ---------- Work-Seite ---------- */
/* Entwurf 1920 px: Schriftzug ~815 px breit, Raster 2 x 475 px mit 283 px Abstand */
.work-top {
  padding: clamp(96px, 10vw, 200px) 24px clamp(64px, 8.3vw, 160px);
  text-align: center;
}

.work-title {
  width: min(42.5vw, 815px);
  min-width: 260px;
  margin: 0 auto;
}
.work-title img { width: 100%; height: auto; }

/* Intro wie die Texte auf Skills und den Projektseiten: ~580 px breit, linksbündig */
.work-intro {
  max-width: 20em;
  margin: clamp(24px, 5.7vw, 110px) auto 0;
  font-size: clamp(1rem, 1.5vw, 1.8rem);
  line-height: 1.4;
  text-align: left;
}

.work-page { padding-bottom: clamp(96px, 10vw, 200px); }
.work-page .work-grid {
  max-width: 1234px;
  gap: clamp(40px, 5vw, 96px) clamp(48px, 14.7vw, 283px);
}
/* Projektnamen gross: auf der Work-Seite und im Work- und Skills-Bereich der Startseite */
.work .card-label,
.skills .card-label { font-size: clamp(1.15rem, 2vw, 2.4rem); }
.work .arrow,
.skills .arrow { width: clamp(54px, 4.6vw, 90px); }

/* ---------- Skills-Seite ---------- */
/* Entwurf 1920 x 7500 px: Inhalt 1536 px breit, Schriftzug ~970 px, Fliesstext 26 px,
   Zeilenabstand 40 px. vw-Werte = px im Entwurf / 19.2 */
.skills-page {
  max-width: 1584px;
  margin: 0 auto;
  padding: 0 24px clamp(96px, 11vw, 210px);
}

.skills-top { padding-top: clamp(96px, 8.3vw, 160px); }

.skills-title {
  width: min(50vw, 970px);
  min-width: 260px;
  margin: 0 auto;
}
.skills-title img { width: 100%; height: auto; }

/* Texte wie auf den Projektseiten: Handschrift, 29 px bei 1920 px Breite */
.skills-intro,
.skills-text {
  font-size: clamp(1rem, 1.5vw, 1.8rem);
  line-height: 1.4;
}
/* Intro: ~640 px breit, mittig, bei y 639 */
.skills-intro {
  max-width: 22em;
  margin: clamp(24px, 2.3vw, 45px) auto clamp(48px, 7.2vw, 139px);
}
.skills-intro p { margin: 0; }
/* Untertitel wie auf den Projektseiten: 27 px, zentriert */
.skills-intro .skills-sub {
  margin-bottom: 1.8em;
  font-size: 0.93em;
  text-align: center;
}

.skills-wide {
  width: 100%;
  height: auto;   /* sonst gilt height aus dem HTML und das Seitenverhältnis wird ignoriert */
  aspect-ratio: 1536 / 800;
  object-fit: cover;
  background: #bdb8b0;
}
.skills-hero { aspect-ratio: 1536 / 750; }
.skills-small { width: 72%; aspect-ratio: 1108 / 780; }

.skills-block { padding-top: clamp(64px, 6.5vw, 125px); }
.skills-analog { padding-top: clamp(96px, 25.2vw, 484px); }
.skills-block h2 { margin-bottom: clamp(32px, 2.55vw, 49px); }
.skills-analog h2 { margin-bottom: clamp(32px, 4.3vw, 82px); }

/* Bild 777 px, Abstand 58 px, Text 701 px – bei Analog gespiegelt */
.skills-row {
  display: grid;
  grid-template-columns: minmax(0, 777fr) minmax(0, 701fr);
  gap: clamp(24px, 3vw, 58px);
  margin-bottom: clamp(40px, 3.3vw, 64px);
}
.skills-analog .skills-row {
  grid-template-columns: minmax(0, 701fr) minmax(0, 777fr);
  margin-bottom: clamp(48px, 12.8vw, 245px);
}

.skills-square {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: #bdb8b0;
}

.skills-text p { margin: 0; }

/* Notizzettel mit Klebeband (Grafik) */
.skills-note {
  width: 92%;
  max-width: 645px;
  height: auto;   /* sonst bleibt die Höhe aus dem HTML stehen und der Zettel wird verzogen */
  margin-top: clamp(32px, 6.5vw, 126px);
}

.skills-analog .skills-wide + .skills-wide { margin-top: clamp(40px, 4.4vw, 85px); }

/* Skills: unter 700 px Bild und Text untereinander */
@media (max-width: 700px) {
  .skills-row { grid-template-columns: 1fr; }
  .skills-analog { padding-top: 96px; }
  .skills-analog .skills-row { grid-template-columns: 1fr; }
  .skills-analog .skills-text { order: 2; }
  .skills-note { width: 80%; max-width: 320px; margin: 32px auto 0; }
  .skills-small { width: 100%; }
  .skills-square { aspect-ratio: 4 / 3; }
  .skills-block h2 { font-size: clamp(3rem, 15vw, 4rem); }
}

/* ---------- Menü-Seite ---------- */
/* Entwurf 1920 x 1080: Wörter ~100 px hoch, Zeilenabstand ~142 px */
.menu-nav {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px 16px 48px;
}
.menu-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.menu-nav a {
  display: inline-block;
  font-size: clamp(2.6rem, min(7.3vw, 12vh), 8.75rem);
  line-height: 1.02;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);   /* leicht federnd */
}
.menu-nav a:hover,
.menu-nav a:focus-visible { transform: scale(1.12); }
.menu-nav a:active { transform: scale(1.05); }

/* Menü als Overlay: fällt von oben herunter (menu.js) */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  background: #dddbd6;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s 0.7s;
}
.menu-overlay.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s;
}
body.menu-open { overflow: hidden; }

/* ---------- Contact-Seite ---------- */
/* Entwurf 1920 x 1200: gelbe Fläche x 343–1144, Schriftzug 1788 px breit */
.contact-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(40px, 5.2vw, 100px);
  background: #ff4d52;
  color: #f5f5f5;
}

.contact-visual {
  position: absolute;
  top: 0; bottom: 0;
  left: 17.86%;
  width: 41.72%;
}
/* freigestelltes Bild, unten bündig – oben wird höchstens Leerraum abgeschnitten */
.contact-visual img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
}
/* Schmale/hohe Bildschirme (Handy, Tablet): Bild nicht seitlich beschneiden,
   sondern ganz zeigen – gleiche Position wie Desktop: links bei 17.86 %, unten bündig */
@media (max-aspect-ratio: 157 / 100) {
  .contact-visual { right: 0; width: auto; display: flex; align-items: flex-end; }
  .contact-visual img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
}

.contact-title {
  position: relative;
  margin: 0 0 clamp(32px, 4.4vw, 85px);
  font-weight: 400;
}
.contact-title svg { display: block; width: 100%; height: auto; overflow: visible; }
.contact-title text {
  fill: currentColor;
  font-family: "Handwriteing Faden", cursive;
  font-size: 281px;           /* Grossbuchstaben 210 px hoch */
}

.contact-info {
  position: relative;
  align-self: flex-end;
  margin-right: 4.8%;
}

.contact-icons {
  display: flex;
  gap: clamp(12px, 1.05vw, 20px);
  margin: 0 0 clamp(10px, 1vw, 20px);
  padding: 0;
  list-style: none;
}
.contact-icons a { display: block; }
.contact-icons svg {
  display: block;
  width: clamp(32px, 2.3vw, 44px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-mail { font-size: clamp(1.25rem, 1.8vw, 2.2rem); }
.contact-icons a:hover,
.contact-mail:hover { color: #d9231a; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* Handy: gleiche Anordnung wie Desktop – Text links oben über FADEN, "More about me"
     rechts daneben über Leonie –, nur höher, damit der Text Platz hat */
  .hero-screen { min-height: 0; margin-bottom: 32px; }
  .hero { width: 100%; aspect-ratio: 390 / 440; }
  .faden  { top: 59%; }
  .leonie { top: 29%; }
  .hero-text { top: 17%; left: 12%; width: 52%; font-size: clamp(0.7rem, 3.1cqw, 1.1rem); white-space: normal; }
  /* Desktop-Zeilenumbrüche weglassen, sonst stehen einzelne Wörter allein */
  .hero-text br { display: none; }
  .hero-hi { display: block; margin-bottom: 0.2em; }
  .more-link { top: 35%; left: 55%; font-size: clamp(0.7rem, 3.1cqw, 1.1rem); }
  .work-grid,
  .work-page .work-grid { gap: 32px 20px; }
  /* Startseite: Projekte untereinander statt zu zweit */
  .page-home .work-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .card-label { gap: 8px; }
  .card-label,
  .work .card-label,
  .skills .card-label { font-size: 1rem; }
  .arrow,
  .work .arrow,
  .skills .arrow { width: 32px; }

  /* Contact: Anordnung wie Desktop (Foto unten bündig), Icons und Mail mit leichtem Schatten lesbar auf dem Foto */
  .contact-info { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35)); }

}

/* About Me: unter 900 px untereinander statt proportional */
@media (max-width: 900px) {
  .about-top {
    aspect-ratio: auto;
    padding: 88px 16px 48px;
    /* grau bis ins obere Drittel des Schriftzugs, danach rot (wie Desktop) */
    background: linear-gradient(to bottom, #dddbd6 0 calc(88px + 0.11 * (100vw - 32px)), #ff4d52 calc(88px + 0.11 * (100vw - 32px)) 100%);
  }
  .about-title { position: relative; left: auto; top: auto; width: 100%; }
  /* PNG hat viel transparenten Rand: so zuschneiden, dass der Schriftzug genau die Breite füllt */
  .about-title img { width: 118%; margin: -33% 0 -14% -5.8%; }
  .about-photo { position: relative; left: auto; top: auto; width: 100%; margin-top: -2%; }
  .about-text {
    position: relative; left: auto; top: auto;
    margin-top: 8px;
    font-size: clamp(0.95rem, 4.1vw, 1.3rem);
    letter-spacing: 0.04em;
    white-space: normal;
    transform: rotate(-4deg);
  }
  /* Zeilenumbrüche vom Desktop weglassen, Text fliesst selbst */
  .about-text br { display: none; }
  .about-hi { display: block; margin-bottom: 0.3em; }

  /* Stacks: zwei Spalten im Zickzack, grösser zum Antippen, Foto darunter */
  .about-stacks { aspect-ratio: 390 / 860; }
  .stacks-photo { height: 30%; object-position: center 40%; }
  .stack-zfa   { --x: 30%; --y: 9%;  --w: 47%; }
  .stack-job   { --x: 70%; --y: 20%; --w: 47%; }
  .stack-hobby { --x: 30%; --y: 31%; --w: 47%; }
  .stack-me    { --x: 70%; --y: 42%; --w: 47%; }
  .stack-bm    { --x: 30%; --y: 53%; --w: 47%; }
  .stack-ort   { --x: 70%; --y: 64%; --w: 47%; }
  .stack-label { font-size: 3.4cqw; }

  /* angewählt: Hochformat-Rahmen, damit auch Hochformat-Fotos gross erscheinen */
  .stack.is-active,
  .stack.is-active:hover { width: min(92vw, 62vh); aspect-ratio: 3 / 4; }
  .stack-card-text { font-size: 5.4cqw; }
  .stack-note { font-size: 4.4cqw; }
  .about-end { aspect-ratio: auto; height: 32px; }
}

/* ---------- Philosophie ---------- */
/* Entwurf 1920 x 4900 px. Alle Masse in cqw = px im Entwurf / 19.2 */
.philo {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 4900;
}

.philo-title,
.philo-intro,
.sense > * {
  position: absolute;
  margin: 0;
}
.philo-title img,
.sense-img { width: 100%; height: auto; }

.philo-intro,
.sense-text {
  font-size: max(0.7rem, 1.6cqw);   /* 31 px bei 1920 px */
  line-height: 1.3;
}
.sense-title {
  font-size: 4.8cqw;                 /* 92 px */
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.sense-box { background: #ff4f58; }

/* Titel: 1435 px breit, bei x 260 / y 175 – Einleitung: x 650 / y 605 */
.philo-title { left: 13.54cqw; top: 9.11cqw; width: 74.74cqw; }
.philo-intro { left: 33.85cqw; top: 31.5cqw; width: 38.5cqw; }

/* Fühlen: Foto 1496 x 615 px bei x 212 / y 942, Text ragt rechts heraus */
.sense-fuehlen .sense-img  { left: 11.04cqw; top: 49.06cqw; width: 77.92cqw; }
.sense-fuehlen .sense-text { left: 76.15cqw; top: 66.1cqw; width: 18.5cqw; }

/* Schmecken: Foto 488 px bei x 140 / y 1610 */
.sense-schmecken .sense-img  { left: 7.29cqw; top: 83.85cqw; width: 25.42cqw; }
.sense-schmecken .sense-text { left: 33.85cqw; top: 96.6cqw; width: 18.75cqw; }

.sense-fuehlen .sense-text,
.sense-schmecken .sense-text {
  color: #561c1b;
  font-size: max(0.65rem, 1.4cqw);   /* 27 px */
  line-height: 1.4;
}

/* Sehen: rosa Kasten 1496 x 700 px bei x 212 / y 2355 */
.sense-sehen .sense-box  { left: 11.04cqw; top: 122.66cqw; width: 77.92cqw; height: 36.46cqw; }
.sense-sehen .sense-img  { left: 49.48cqw; top: 122.66cqw; width: 39.48cqw; }
.sense-sehen .sense-text { left: 19.06cqw; top: 142.9cqw; width: 31.25cqw; color: #fff; }

/* Hören: heller Kasten 586 x 1000 px bei x 232 / y 3167, Text ragt rechts heraus */
.sense-hoeren .sense-box   { left: 12.08cqw; top: 164.95cqw; width: 30.52cqw; height: 52.08cqw; background: #f0f0f0; }
.sense-hoeren .sense-title { left: 32.29cqw; top: 168.3cqw; }
.sense-hoeren .sense-text  { left: 19.06cqw; top: 173.2cqw; width: 31.25cqw; }
.sense-hoeren .sense-img   { left: 12.08cqw; top: 185.21cqw; width: 30.52cqw; }

/* Riechen: rosa Kasten 1496 x 455 px bei x 212 / y 4264, Foto ragt oben heraus */
.sense-riechen .sense-box   { left: 11.04cqw; top: 222.08cqw; width: 77.92cqw; height: 23.7cqw; }
.sense-riechen .sense-title { left: 19.06cqw; top: 225.1cqw; color: #fff; }
.sense-riechen .sense-text  { left: 19.06cqw; top: 230.6cqw; width: 29.17cqw; color: #fff; }
.sense-riechen .sense-img   { left: 63.85cqw; top: 196.35cqw; width: 24.17cqw; }

/* Philosophie: unter 900 px untereinander statt proportional */
@media (max-width: 900px) {
  .philo {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 96px 16px 64px;
  }
  .philo .philo-title, .philo .philo-intro, .philo .sense > * { position: static; width: auto; }
  .philo-intro, .sense-text,
  .sense-fuehlen .sense-text,
  .sense-schmecken .sense-text { font-size: 1.1rem; }
  .sense-title { font-size: 2.6rem; }

  .sense {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .philo .sense .sense-box { position: absolute; inset: 0; width: auto; height: auto; z-index: -1; }
  .sense-sehen, .sense-hoeren { padding: 24px 24px 0; }
  .sense-schmecken .sense-img { width: 55%; }
  .sense-sehen .sense-img { order: 2; width: 75%; align-self: flex-end; }
  .sense-hoeren .sense-img { width: calc(100% + 48px); margin: 0 -24px; }

  /* Foto oben heraus: rosa beginnt bei 52 % der Bildhöhe (= 0.5855 x Inhaltsbreite) */
  .sense-riechen { padding: 0 24px 32px; }
  .sense-riechen .sense-img { order: -1; width: 55%; align-self: flex-end; }
  .philo .sense-riechen .sense-box { top: calc(0.5855 * (100vw - 80px)); }
}

/* ---------- Projektseiten (Vorlage, z. B. vena-nova.html, le-petit-bateau.html) ---------- */
/* Entwurf 1920 px: 4 Spalten 435 | 283 | 283 | 435 px mit 20 px Spalten- und 76 px Zeilenabstand.
   Kacheln: .tile = 1 Spalte, .tile-half = 2 Spalten (halbe Breite), .tile-wide = 3 Spalten.
   Masse in cqw = px im Entwurf / 19.2 */
.project {
  container-type: inline-size;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 5.7cqw 0 11cqw;
}

/* Projektname bleibt beim Scrollen oben hängen, Bilder laufen darunter durch */
.project-title {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0;
  padding: 1.5cqw 0 0.7cqw;
  background: #dddbd6;
  font-size: 5.2cqw;               /* 100 px */
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.project-grid {
  display: grid;
  grid-template-columns: 22.66cqw 14.74cqw 14.74cqw 22.66cqw;
  gap: 3.96cqw 1.04cqw;
  justify-content: center;
}

.tile {
  margin: 0;
  aspect-ratio: 435 / 615;
  overflow: hidden;
  background: #fff;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-half    { grid-column: span 2; aspect-ratio: 738 / 615; }
.tile-wide    { grid-column: span 3; aspect-ratio: 1041 / 615; }
.tile-end     { grid-column: 4; }
.tile-contain img { object-fit: contain; }
.tile-pad     { padding: 2.2cqw; }
.tile-plain   { background: none; }   /* freigestellte Zeichnung direkt auf Grau */

/* Text in der mittleren Spalte: Fliesstext oben, Jahr/Kategorie unten */
.project-text {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  justify-content: space-between;
  padding: 6.4cqw 0 0 0.9cqw;
}
/* mit Untertitel: Untertitel ganz oben, zentriert über dem Text */
.project-text-sub { padding-top: 0.4cqw; }
.project-text p {
  margin: 0;
  font-size: max(0.7rem, 1.5cqw);  /* 29 px */
  line-height: 1.4;
}
.project-text .project-sub {
  margin-bottom: 2.6cqw;
  font-size: max(0.65rem, 1.4cqw);  /* 27 px */
  text-align: center;
}

.project-meta {
  display: flex;
  gap: 2cqw;
  margin: 0;
  font-size: max(0.7rem, 1.4cqw);  /* 27 px */
  line-height: 1.3;
}
.project-meta div:first-child { display: flex; justify-content: space-between; width: 14cqw; }
.project-meta dt { font-weight: 700; }
.project-meta dd { margin: 0; }

/* Zurück-Link "All Works" unten links in der Zeile, wächst beim Hovern */
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 3cqw;
  align-self: end;
  justify-self: start;
  grid-column: 1 / span 2;
  font-size: max(1rem, 2.2cqw);    /* 42 px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);   /* federnd wie Logo und Burger */
}
.project-back:hover,
.project-back:focus-visible { transform: scale(1.12); }
.project-back:active { transform: scale(1.05); }
.project-back .arrow,
.project-back:hover .arrow { width: 4.9cqw; transform: scaleX(-1); }   /* Pfeil nach links */

/* Variante: rechte Spalte, Text zuerst, Pfeil nach rechts */
.project-back-right { grid-column: 4; justify-self: end; transform-origin: right center; }
.project-back-right .arrow,
.project-back-right:hover .arrow { transform: none; }

/* Variante: nur erste Spalte, daneben eine breite Kachel (sd-infostand.html) */
.project-back-narrow { grid-column: 1; }

/* Projektseiten: unter 900 px eine Spalte */
@media (max-width: 900px) {
  .project { padding: 84px 16px 64px; }
  /* links und rechts Platz für Logo und Burger, die über dem Titel liegen */
  .project-title { padding: 14px 56px 10px; margin: 0 -16px 12px; font-size: clamp(1.6rem, 7.5vw, 2.6rem); }
  .project-grid { grid-template-columns: 1fr; gap: 24px; }
  .tile-half, .tile-wide, .tile-end, .project-text { grid-column: auto; }
  .tile-plain { aspect-ratio: auto; }
  .tile-pad { padding: 16px; }
  .project-text, .project-text-sub { padding: 8px 0 16px; gap: 32px; }
  .project-text .project-sub { margin-bottom: 16px; font-size: 1rem; }
  .project-text p { font-size: 1.1rem; }
  .project-meta { font-size: 1rem; gap: 24px; }
  .project-meta div:first-child { width: auto; gap: 16px; }
  .project-back { grid-column: auto; margin-top: 24px; gap: 20px; font-size: 1.4rem; }
  .project-back .arrow, .project-back:hover .arrow { width: 54px; }
  .project-back-right { grid-column: auto; }
  .project-back { order: 99; }   /* "All Works" immer ganz am Schluss */
}

/* ---------- Seitenwechsel mit Wisch-Animation (menu.js) ---------- */
/* left = Seite wird nach links gezogen ("All Works"), right = nach rechts (Projekt-Karten) */
.slide-out-left, .slide-out-right,
.slide-in-left, .slide-in-right { overflow-x: clip; }

.slide-out-left main,  .slide-out-left .site-header,
.slide-out-right main, .slide-out-right .site-header {
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.3, 1);
}
.slide-out-left main,  .slide-out-left .site-header  { transform: translateX(-100vw); }
.slide-out-right main, .slide-out-right .site-header { transform: translateX(100vw); }

.slide-in-left main,  .slide-in-left .site-header  { animation: slide-from-right 0.45s cubic-bezier(0.7, 0, 0.3, 1) both; }
.slide-in-right main, .slide-in-right .site-header { animation: slide-from-left 0.45s cubic-bezier(0.7, 0, 0.3, 1) both; }
@keyframes slide-from-right { from { transform: translateX(100vw); }  to { transform: none; } }
@keyframes slide-from-left  { from { transform: translateX(-100vw); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}