/* P-07 Case-Study (Entwurf). Ergänzt die bestehenden Hey-Rasterei-Styles (home, leistung, pages, case, afterglow, wedding). */
.pg-p07 .f-auto { padding-top: 0; padding-bottom: 0; }
.pg-p07 .lh-back { display: block; margin: 0 0 18px; }
.pg-p07 .p7-hero { padding-top: calc(var(--cell) * 1.5); padding-bottom: calc(var(--cell) * .4); }
.p7-hero-in { padding: 0 calc(var(--cell) * 1); }
.p7-tag { display: inline-block; transform: rotate(-1.5deg); margin: 6px 0 0; }
.p7-h { width: auto !important; font-size: calc(var(--cell) * 1.6); line-height: .94; margin: 22px 0 30px; max-width: 100%; }
.p7-h b { color: var(--orange-l); font-weight: inherit; }
.p7-hero-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--cell) * 1.4); align-items: start; }
.p7-lede { font-size: 18px; line-height: 1.55; max-width: 34em; }
.p7-ckv { margin: 0; display: grid; grid-template-columns: 7em 1fr; border-top: 2px solid var(--ink); }
.p7-ckv dt, .p7-ckv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid rgba(28,26,23,.3); font-size: 14px; line-height: 1.4; }
.p7-ckv dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--blue); padding-top: 13px; }
.pg-p07 .p7-kv { padding-top: calc(var(--cell) * .6); padding-bottom: calc(var(--cell) * 2.2); }
.p7-kv .plane { left: calc(var(--cell) * 2); top: calc(var(--cell) * 1.4); width: calc(100% - var(--cell) * 3); height: calc(100% - var(--cell) * 1.4); background: var(--blue); }
.p7-kv-in { padding: 0 calc(var(--cell) * 1); position: relative; }
.p7-kvcap { position: absolute; left: calc(var(--cell) * 1.6); bottom: calc(var(--cell) * -.5); }
.pg-p07 .p7-note-sec { padding-top: calc(var(--cell) * .4); padding-bottom: calc(var(--cell) * 1); }
.p7-note { margin: 0 calc(var(--cell) * 1); padding: 18px 22px; border: 2px solid var(--ink); background: var(--cream); box-shadow: 6px 6px 0 var(--ink); font-size: 16px; line-height: 1.5; max-width: 60em; }
.p7-note b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-t, #B04A17); margin-bottom: 6px; }
.p7-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.p7-list li { padding: 15px 0 15px 34px; border-bottom: 1px solid rgba(28,26,23,.3); font-size: 17px; line-height: 1.45; position: relative; }
.p7-list li::before { content: "*"; position: absolute; left: 4px; top: 12px; color: var(--orange); font-size: 24px; line-height: 1; font-weight: 700; }
.p7-pr { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.p7-pr li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.4; }
.p7-pr b { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 13px; }
.p7-pr strong { display: block; font-size: 17px; }
.p7-mmwrap { margin: 0; position: relative; background: var(--cream); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 34px 18px 14px; }
.p7-mmwrap .cap { position: absolute; left: 14px; top: -14px; }
.p7-mm { display: block; width: 100%; height: auto; }
.p7-mmwrap figcaption { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.p7-probes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.p7-probes .shot:first-child { grid-column: 1 / -1; }
.p7-2shots { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cell) * .6); align-items: start; margin-top: calc(var(--cell) * .7); }
.p7-nav-main { margin: calc(var(--cell) * .7) 0 calc(var(--cell) * .9); }
.p7-tl { display: inline-block; transform: rotate(-1.5deg); background: var(--ink); color: var(--cream); margin-bottom: 18px; }
.p7-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--cell) * .5); }
.p7-3 .ag-browser { box-shadow: 5px 5px 0 var(--ink); }
.p7-res-l li { font-size: 17px; }
.p7-phases { list-style: none; margin: calc(var(--cell) * .6) 0 calc(var(--cell) * .6); padding: 0; display: grid; grid-template-columns: 1.6fr 1fr .8fr; gap: calc(var(--cell) * .5); align-items: stretch; }
.p7-phases li { padding: 22px 24px 26px; border: 2px solid var(--cream); color: var(--cream); display: flex; flex-direction: column; gap: 10px; }
.p7-phases li span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.p7-phases h3 { font-size: calc(var(--cell) * .72); line-height: .95; margin: 4px 0 4px; }
.p7-phases p { font-size: 15.5px; line-height: 1.5; margin: 0; }
.p7-phases .ph-mine { background: var(--orange); color: var(--ink); border-color: var(--ink); box-shadow: 8px 8px 0 var(--cream); }
.p7-phases .ph-mine h3 { color: var(--cream); }
.p7-phases .ph-other, .p7-phases .ph-none { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(246,241,230,.07) 8px 9px); }
.p7-phases .ph-other span, .p7-phases .ph-none span { color: var(--orange-b, #F6AA70); }
.p7-fine { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .8; margin: 0; }
@media (max-width: 900px) {
  .p7-hero-in, .p7-kv-in { padding-left: calc(var(--cell) * .5); padding-right: calc(var(--cell) * .5); }
  .p7-h { font-size: 13vw; white-space: normal; }
  .p7-hero-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .p7-kv .plane { left: 0; width: 100%; }
  .p7-kvcap { position: relative; left: auto; bottom: auto; display: inline-block; margin: 18px 0 0 4px; font-size: 11px; }
  .pg-p07 .f-auto { padding-top: calc(var(--cell) * 1.2); padding-bottom: calc(var(--cell) * 1.2); }
  .pg-p07 .p7-hero { padding-top: calc(var(--cell) * 2.4); padding-bottom: calc(var(--cell) * .4); }
  .pg-p07 .p7-kv { padding-bottom: calc(var(--cell) * 1.4); }
  .pg-p07 .p7-note-sec { padding-top: calc(var(--cell) * .4); padding-bottom: calc(var(--cell) * 1); }
  .p7-note { margin-left: calc(var(--cell) * .5); margin-right: calc(var(--cell) * .5); }
  .p7-probes, .p7-2shots, .p7-3 { grid-template-columns: minmax(0, 1fr); }
  .p7-phases { grid-template-columns: minmax(0, 1fr); }
  .p7-3 .ag-browser { box-shadow: 4px 4px 0 var(--ink); }
}