/* Phone layout (handy.js). Everything is scoped to html.handy, so desktop and tablet stay untouched.
   Measures from the approved mockups: 7 columns, 3px gap, title and logo 20px instead of 28px, text 12px. */

html.handy, html.handy body { height: 100%; overflow: hidden; }
html.handy #page { display: none; }

.handy-seite {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-size: 14px; /* as #page on the desktop, the lifetime line is 0.85em of it */
}

/* Tile grid: fills everything above the image or text block. */
.handy-raster { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.handy-raster img, .handy-raster a { display: block; cursor: pointer; }
.handy-raster a img { width: 100%; height: 100%; }

/* Large image on the project page, swipeable. */
.handy-buehne {
  flex: none;
  align-self: center;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.handy-spur { display: flex; height: 100%; transition: transform 0.35s ease; }
.handy-spur.handy-zieht { transition: none; }
.handy-spur img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; }

/* Text block: the desktop .fxmenu moved below the image / grid. */
.handy-info { flex: none; padding: 10px 0 4px; }
/* html.handy prefix: style.css hides the block per page (.section-produkte div.fxmenu, .section-kontakt …). */
html.handy .handy-info div.fxmenu { display: block; position: static; width: auto; height: auto; }
.handy-info .fxtooltip { display: none; }
.handy-info div.view-id-textde, .handy-info div.view-id-texten { width: auto; margin-bottom: 10px; }
.handy-info .views-field-title h1 { margin: 0 0 2px; font-size: 20px; font-weight: normal; line-height: 1em; letter-spacing: -0.9px; }
.handy-info .views-field-field-text-de-value { font-size: 12px; line-height: 1.2em; }
.handy-info div.views-field-upload-fid { display: none; }

/* Logo with lifetime above it, mail and menu to its right (as on the desktop). */
.handy-info div.bottomdiv {
  position: static;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: end;
}
.handy-info div.logofx2 { position: static; display: flex; flex-direction: column-reverse; grid-row: 1 / span 2; }
.handy-info div.logofx2 h1 { margin: 0; font-size: 20px; letter-spacing: -1px; white-space: nowrap; }
.handy-info div.logofx2 span.lifetime { position: static; }
.handy-info div.bottomdiv a.mailto {
  position: static;
  grid-column: 2;
  width: auto;
  height: auto;
  float: none;
  font-size: 12px;
  line-height: 1.2em;
}
.handy-info div.bottomdiv ul.menu {
  position: static;
  grid-column: 2;
  display: flex;
  gap: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
}
.handy-info .menucontainer div.bottomdiv ul.menu li { float: none; margin: 0; }
.handy-info div.bottomdiv ul.menu a { float: none; display: inline; font-size: 12px; line-height: 1.2em; }

/* Below ~385px logo and mail no longer fit side by side: mail and menu move under the logo.
   Container query for the narrower text column in landscape, media query as fallback for older Safari. */
.handy-info { container-type: inline-size; }
@container (max-width: 384px) {
  .handy-info div.bottomdiv { grid-template-columns: 1fr; }
  .handy-info div.logofx2 { grid-row: auto; }
  .handy-info div.bottomdiv a.mailto, .handy-info div.bottomdiv ul.menu { grid-column: 1; }
}
@media (max-width: 384px) {
  .handy-info div.bottomdiv { grid-template-columns: 1fr; }
  .handy-info div.logofx2 { grid-row: auto; }
  .handy-info div.bottomdiv a.mailto, .handy-info div.bottomdiv ul.menu { grid-column: 1; }
}

/* Contact: press and imprint above the text block. */
.handy-info div.textcontainer { position: static; width: auto; }
.handy-info .textcontainer div.textblock { height: auto; margin-bottom: 10px; }

/* Letter tiles (contact, start page) reuse the desktop classes enter-K … with their image-set backgrounds. */
.handy-raster div.enterblock-container { cursor: default; transition: opacity 1s; }
.handy-raster div.enterblock-container.handy-einblenden { opacity: 0; }
.handy-start .handy-raster div.enterblock-container { cursor: pointer; transition: none; }

/* Project page in landscape: image left in full height, thumbs top right, text block bottom right. */
.handy-quer.handy-projekt {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 10px;
}
.handy-quer.handy-projekt .handy-buehne { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.handy-quer.handy-projekt .handy-raster { grid-column: 2; grid-row: 1; }
.handy-quer.handy-projekt .handy-info { grid-column: 2; grid-row: 2; }