/* ==========================================================================
   Hey Rasterei — Portfolio-Case (portfolio/modimi-co.html)
   Lädt nach home.css + leistung.css + pages.css. Die Projektbilder stehen im Mittelpunkt;
   Raster, Farbflächen und Mikrointeraktionen bleiben die Rahmung.
   ========================================================================== */

/* Bild-Rahmen: Zeiger-Parallaxe, sanfter Zoom beim Hover */
.shot { margin: 0; overflow: hidden; background: var(--cream); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); z-index: 2; translate: calc(var(--nx, 0) * var(--d, 1) * 6px) calc(var(--ny, 0) * var(--d, 1) * 6px); }
.shot img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.shot:hover img { transform: scale(1.04); }
.cap { width: auto !important; z-index: 4; padding: 7px 12px; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--cream); white-space: nowrap; transform: rotate(-3deg); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.cap:hover { transform: rotate(2deg) scale(1.05); }
.cap-o { background: var(--orange); color: var(--ink); }
.cap-b { background: var(--blue); color: var(--cream); }
.cap-c { background: var(--cream); color: var(--ink); }

/* Hero */
.f-ch { --rows: 7.6; z-index: 6; --gl: rgba(223, 116, 62, .36); }
.f-ch .g { --mask: radial-gradient(ellipse 45% 55% at 20% 40%, #000 0, transparent 100%), radial-gradient(ellipse 40% 60% at 88% 60%, #000 0, transparent 100%); }
.ch-tag { --x: 1; --y: 2.1; transform: rotate(-1.5deg); }
.ch-h { --x: 1; --y: 2.85; width: auto !important; font-size: calc(var(--cell) * 2.2); line-height: .95; white-space: nowrap; z-index: 1; }
.ch-h b { color: var(--orange-l); font-weight: inherit; }
.ch-h a { text-decoration: none; }
.ch-lede { --x: 1; --y: 5.35; --w: 7; font-size: 18px; line-height: 1.5; z-index: 1; }
.ckv { --x: 9.4; --y: 5.35; --w: 5.6; z-index: 1; margin: 0; display: grid; grid-template-columns: 7em 1fr; border-top: 2px solid var(--ink); }
.ckv dt, .ckv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(28, 26, 23, .3); font-size: 14px; line-height: 1.4; }
.ckv dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--blue); padding-top: 13px; }

/* Key Visual */
.f-shot { --rows: 11.4; z-index: 5; }
.f-shot .plane { --x: 2; --y: 1; --w: 13.4; --h: 10; z-index: 0; background: var(--blue); }
.f-shot .plane .g { --gl: rgba(246, 241, 230, .2); --gl-hi: rgba(246, 241, 230, .85); --mask: radial-gradient(ellipse 50% 60% at 80% 60%, #000 0, transparent 100%); }
.f-shot .plane .g::before, .f-shot .plane .g::after { background-position: calc(var(--cell) * -2) calc(var(--cell) * -1); }
.sh-key { --x: 1; --y: .2; --w: 14; }
.f-shot .cap { --x: 1.6; --y: 9.9; }

/* Idee / Aufgabe */
.f-idea { --rows: 6.4; z-index: 4; }
.f-idea .g { --mask: radial-gradient(ellipse 35% 50% at 12% 60%, #000 0, transparent 100%), radial-gradient(ellipse 35% 45% at 90% 40%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.id-a, .id-b { z-index: 1; }
.id-a { --x: 1; --y: 1.6; --w: 6.2; }
.id-b { --x: 8.4; --y: 1.6; --w: 6.6; }
.id-a .tag, .id-b .tag { display: inline-block; transform: rotate(-1.5deg); }
.id-a h2, .id-b h2 { font-size: calc(var(--cell) * .85); line-height: .95; margin: 16px 0 14px; }
.id-a p:not(.tag), .id-b p:not(.tag) { font-size: 17px; line-height: 1.55; }

/* Identität: Banner */
.f-ident { --rows: 10.9; z-index: 4; }
.f-ident .g { --mask: radial-gradient(ellipse 40% 40% at 88% 20%, #000 0, transparent 100%), radial-gradient(ellipse 35% 40% at 10% 90%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.f-ident .tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.f-ident .h2 { --x: 1; --y: 2.1; }
.sh-ban { --x: 1; --y: 3.4; --w: 14; }
.f-ident .cap { --x: 11.3; --y: 3; }

/* Styleboard: ruhige Fläche, volles Breitformat — Bild ist EIN Asset, Section-Höhe folgt dem Bild statt einer festen Zeilenzahl */
.f-board { z-index: 4; }
.f-board .g { --mask: radial-gradient(ellipse 40% 45% at 90% 25%, #000 0, transparent 100%), radial-gradient(ellipse 35% 40% at 8% 85%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.f-board .tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.f-board .h2 { --x: 1; --y: 2.1; }
.f-board .cap { --x: 11; --y: 3; }
@media (min-width: 901px) {
  .f-board { height: auto; padding: calc(var(--cell) * 3.4) calc(var(--cell) * 1) calc(var(--cell) * .9); }
  .sh-board { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: calc(var(--cell) * 14); }
}

/* Farbwelt: ink-Fläche, Foto gekippt */
.f-color { --rows: 8; z-index: 4; }
.f-color .plane { --x: 1; --y: .5; --w: 14; --h: 7; z-index: 0; background: var(--ink); }
.f-color .plane .g { --gl: rgba(246, 241, 230, .13); --gl-hi: rgba(223, 116, 62, .95); --mask: radial-gradient(ellipse 60% 80% at 20% 50%, #000 0, transparent 100%), radial-gradient(ellipse 30% 55% at 92% 25%, rgba(0, 0, 0, .6) 0, transparent 100%); }
.f-color .plane .g::before, .f-color .plane .g::after { background-position: calc(var(--cell) * -1) calc(var(--cell) * -.5); }
.sh-sq { --x: 2; --y: 1.2; --w: 6.4; transform: rotate(-2deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 8px 8px 0 var(--orange); border-color: var(--cream); }
.sh-sq:hover { transform: rotate(0); }
.cl-txt { --x: 9.4; --y: 1.6; --w: 5.2; z-index: 1; color: var(--cream); }
.cl-txt .lbl { color: var(--orange); }
.cl-txt p { font-size: 17px; line-height: 1.55; }
.swatches { --x: 9.4; --y: 5.6; --w: 5.2; z-index: 1; display: flex; gap: 20px; color: var(--cream); }
.swatches li { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.swatches li:hover { transform: translateY(-4px) rotate(-3deg); }
.swatches i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cream); }
.sw-violet i { background: #4A1098; } .sw-orange i { background: #DF6800; } .sw-kraft i { background: #B58F62; }

/* Packaging: großes Bild */
.f-pack { --rows: 13.4; z-index: 4; }
.f-pack .g { --mask: radial-gradient(ellipse 40% 30% at 12% 30%, #000 0, transparent 100%), radial-gradient(ellipse 40% 30% at 92% 85%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.f-pack .tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.f-pack .h2 { --x: 1; --y: 2.1; }
.pk-txt { --x: 1; --y: 3.3; --w: 9.6; z-index: 1; font-size: 17px; line-height: 1.55; }
.sh-wide { --x: 1; --y: 5; --w: 14; }
.f-pack .cap { --x: 1.6; --y: 12.2; }

/* Anwendungen: orange Fläche */
.f-apps { --rows: 8; z-index: 4; }
.f-apps .plane { --x: 1; --y: .5; --w: 14; --h: 7; z-index: 0; background: var(--orange); }
.f-apps .plane .g { --gl: rgba(246, 241, 230, .3); --gl-hi: rgba(246, 241, 230, .9); --mask: radial-gradient(ellipse 50% 70% at 25% 60%, #000 0, transparent 100%); }
.f-apps .plane .g::before, .f-apps .plane .g::after { background-position: calc(var(--cell) * -1) calc(var(--cell) * -.5); }
.ap-tag { --x: 2; --y: 1.4; transform: rotate(-1.5deg); background: var(--ink); color: var(--cream); }
.ap-h { --x: 2; --y: 2.1; font-size: calc(var(--cell) * .85); color: var(--cream); }
.ap-txt { --x: 2; --y: 4.3; --w: 5.9; z-index: 1; font-size: 17px; line-height: 1.55; color: var(--ink); }
.sh-app { --x: 8.7; --y: 1.3; --w: 5.6; transform: rotate(2deg); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.sh-app:hover { transform: rotate(0); }

/* Zusammenspiel: ruhige Fläche, Collage aller Medien */
.f-together { --rows: 13.5; z-index: 4; }
.f-together .g { --mask: radial-gradient(ellipse 40% 45% at 10% 20%, #000 0, transparent 100%), radial-gradient(ellipse 35% 45% at 92% 85%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.f-together .tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.f-together .h2 { --x: 1; --y: 2.1; }
.sh-together { --x: 1; --y: 4.3; --w: 14; }
.tg-txt { --x: 1; --y: 12.2; --w: 9; z-index: 1; font-size: 15px; line-height: 1.55; color: var(--ink); opacity: .8; }

/* Abschluss */
.f-end { --rows: 4.3; z-index: 4; }
.f-end .g { --mask: radial-gradient(ellipse 40% 55% at 15% 60%, #000 0, transparent 100%); }
.f-end .tag { --x: 1; --y: 1.4; transform: rotate(-1.5deg); }
.f-end .h2 { --x: 1; --y: 2.1; }
.en-txt { --x: 7; --y: 1.6; --w: 7.6; z-index: 1; font-size: 19px; line-height: 1.5; }

@media (max-width: 900px) {
  .ch-h { font-size: 15vw; }
  .ch-lede, .ckv { width: 100% !important; }
  .ckv { grid-template-columns: 6.5em 1fr; }
  .f-shot .plane { top: calc(var(--cell) * 1); left: calc(var(--cell) * .6); width: calc(100% - var(--cell) * .6); height: calc(100% - var(--cell) * 1.6); }
  .shot { width: 100% !important; translate: none; box-shadow: 5px 5px 0 var(--ink); }
  .sh-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sh-board img { width: auto; min-width: 780px; max-width: none; }
  .f-shot { padding-left: calc(var(--cell) * .5); padding-right: calc(var(--cell) * .6); }
  .cap { position: relative !important; align-self: flex-start; white-space: normal; }
  .id-a, .id-b { width: 100% !important; }
  .f-ident .h2, .f-pack .h2, .ap-h { font-size: 11vw; white-space: normal; }
  .f-color .plane, .f-apps .plane { top: calc(var(--cell) * .4); left: 0; width: 100%; height: calc(100% - var(--cell) * .8); }
  .f-color, .f-apps { padding-left: calc(var(--cell) * 1); padding-right: calc(var(--cell) * 1); padding-top: calc(var(--cell) * 1.4); padding-bottom: calc(var(--cell) * 1.4); }
  .sh-sq, .sh-app { transform: none; }
  .cl-txt, .swatches, .pk-txt, .ap-txt, .en-txt, .tg-txt { width: 100% !important; }
  .swatches { flex-wrap: wrap; }
  .f-board .h2 { font-size: 11vw; white-space: normal; }
  .f-together .h2 { font-size: 11vw; white-space: normal; }
  .f-end .h2 { font-size: 12vw; white-space: normal; }
}

/* „Was davon passt zu dir?“ — zweizeilige Überschrift braucht etwas mehr Luft vor dem Einleitungstext */
.pg-case .rel-h { --y: 1.6; }
.pg-case .rel-sub { --y: 3.55; --w: 5; }

/* Projekt-Navigation — vorheriges/nächstes Case */
.f-pnav { --rows: 7.2; z-index: 4; }
.f-pnav .g { --mask: radial-gradient(ellipse 38% 55% at 15% 55%, #000 0, transparent 100%), radial-gradient(ellipse 34% 50% at 88% 45%, rgba(0, 0, 0, .7) 0, transparent 100%); }
.pnav-card { --y: 1.7; --w: 6.6; z-index: 1; display: flex; align-items: center; gap: calc(var(--cell) * .55); text-decoration: none; color: inherit; }
.pnav-prev { --x: 1; }
.pnav-next { --x: 8.4; flex-direction: row-reverse; text-align: right; }
.pnav-shot { flex: 0 0 auto; display: block; overflow: hidden; width: calc(var(--cell) * 3.1); aspect-ratio: 4 / 3; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--cream); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pnav-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.pnav-card:hover .pnav-shot { transform: translate(-2px, -4px); }
.pnav-next:hover .pnav-shot { transform: translate(2px, -4px); }
.pnav-card:hover .pnav-shot img { transform: scale(1.05); }
.pnav-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pnav-dir { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.pnav-next .pnav-dir { justify-content: flex-end; }
.pnav-dir i { font-style: normal; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.pnav-card:hover .pnav-dir i { transform: translateX(-4px); }
.pnav-next:hover .pnav-dir i { transform: translateX(4px); }
.pnav-name { font-family: var(--font-thunder); font-weight: 700; font-variation-settings: "CNTR" 0, "ital" 0; font-size: calc(var(--cell) * .68); line-height: 1; }
.pnav-name b { color: var(--orange-l); font-weight: inherit; }

@media (max-width: 900px) {
  .pnav-next { flex-direction: row; text-align: left; }
  .pnav-next .pnav-dir { justify-content: flex-start; }
  .pnav-card { width: 100% !important; }
  .f-pnav { gap: 22px; }
}


/* ==========================================================================
   Responsive-QA
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1240px) {
  .cl-txt p { font-size: 15px; }
}
@media (max-width: 900px) {
  .f-ch { padding-top: calc(var(--hdr) + var(--cell) * .9); padding-bottom: calc(var(--cell) * 1); }
  .f-idea { gap: calc(var(--cell) * .9); }
}