/* Telefonbuch Hogenkamps – Front in Schwarz/Chrom, bedruckte Karten dahinter */

:root {
  --bg: #0a0a0b;
  --ink: #141416;
  --red: #d6322b;
  --paper: #fdfdfb;
  --rule: #1b1b1d;
  --soft: #e8e8e6;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --chrome: linear-gradient(135deg, #f7f7f7 0%, #b9b9b9 18%, #fdfdfd 34%, #8e8e8e 52%, #e9e9e9 70%, #a8a8a8 88%, #f3f3f3 100%);
  --chrome-flat: linear-gradient(180deg, #fbfbfb 0%, #c9c9cc 48%, #a9a9ad 52%, #e6e6e8 100%);
  --brushed:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, rgba(0, 0, 0, .045) 1px 2px),
    linear-gradient(180deg, #e9e9eb, #c4c4c8 60%, #d6d6d9);
  --leather-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0, #232326, var(--bg) 70%) no-repeat, var(--bg);
}
button, a { touch-action: manipulation; }

.view { position: absolute; inset: 0; }

/* ───────────── Front ───────────── */

.front {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 10px);
  perspective: 1600px;
  perspective-origin: 50% 0;
}
.front.is-open { pointer-events: none; }
.front.is-open .hint { opacity: 0; transition: opacity .2s linear; }

.device {
  --w: min(100vw - 32px, 440px);
  position: relative;
  width: var(--w);
  height: min(calc(100vh - 96px - var(--safe-t) - var(--safe-b)), calc(var(--w) * 2.2));
  height: min(calc(100dvh - 96px - var(--safe-t) - var(--safe-b)), calc(var(--w) * 2.2));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 18px;
  background: var(--chrome);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px #58585c,
    0 28px 60px rgba(0, 0, 0, .65),
    0 6px 12px rgba(0, 0, 0, .5);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.45, .05, .25, 1), opacity .2s linear .5s;
}
.front.is-open .device { transform: rotateX(115deg); opacity: 0; }

.plate {
  flex: 0 0 8.5%;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--brushed);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #7d7d80, 0 0 0 1px #6c6c70;
}
.plate span {
  font: 600 clamp(11px, 3.3vw, 14px) / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #4b4b50;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
  white-space: nowrap;
}

.body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.9fr) minmax(0, .8fr);
  gap: 8px;
}

.leather {
  border-radius: 4px;
  background-color: #0b0b0c;
  background-image:
    var(--leather-noise),
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 14%, transparent 86%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1px #2b2b2e, inset 0 0 16px #000, 0 0 0 1px #6c6c70;
}

.index {
  padding: 2.4% 0;
  border-radius: 3px;
  background: var(--brushed);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #8b8b90, 0 0 0 1px #6c6c70;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.rows {
  --rows: 18;
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  touch-action: none;
  cursor: pointer;
}

.col {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
}
.col li { display: flex; min-height: 0; }

.letter {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  font: 500 clamp(14px, 2.3vh, 20px) / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(14px, 2.3dvh, 20px);
  color: #2a2a2e;
  cursor: pointer;
}
.col-l .letter { justify-content: flex-end; }
.col-l .letter::after,
.col-r .letter::before {
  content: "";
  width: 10px;
  height: 1px;
  background: #5a5a5f;
}
.letter.on { font-weight: 800; color: #000; }
.letter:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 4px; }

.track {
  justify-self: center;
  width: 8px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #17171a, #4c4c50 50%, #17171a);
  box-shadow: inset 0 0 3px #000, 0 0 0 1px rgba(255, 255, 255, .5);
}

/* Der gläserne Schieber mit den roten Strichen */
.slider {
  position: absolute;
  left: -3px;
  right: -3px;
  top: 0;
  height: calc(100% / var(--rows));
  transform: translateY(calc(var(--i, 0) * 100%));
  transition: transform .17s cubic-bezier(.3, .7, .3, 1);
  pointer-events: none;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, .34));
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(255, 255, 255, .9),
    0 0 0 2px rgba(0, 0, 0, .2),
    0 4px 8px rgba(0, 0, 0, .4);
}
.slider.dragging { transition: none; }
.slider::before,
.slider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--red);
  transform: translateY(-50%);
}
.slider::before { right: calc(50% + 8px); }
.slider::after { left: calc(50% + 8px); }
.knob {
  position: absolute;
  left: 50%;
  top: -14%;
  width: 22px;
  height: 128%;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .6));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(0, 0, 0, .22), 0 3px 6px rgba(0, 0, 0, .35);
}

.lever {
  all: unset;
  box-sizing: border-box;
  flex: 0 0 7.2%;
  align-self: center;
  width: 36%;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--chrome-flat);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #5c5c60, 0 2px 4px rgba(0, 0, 0, .4);
  cursor: pointer;
}
.lever span {
  font: 700 clamp(11px, 3vw, 13px) / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #404045;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.lever:active { filter: brightness(.9); }
.lever:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.hint {
  margin: 0;
  font-size: 14px;
  color: #8d8d94;
  text-align: center;
}

/* ───────────── Karten ───────────── */

.cards {
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
}
/* Solange die Front zu ist, sind die Karten dahinter unsichtbar (erst nach dem Zuklappen) */
.cards[inert] { visibility: hidden; transition: visibility 0s linear .75s; }

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 8px;
}
.where {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #c9c9cf;
  font-size: 15px;
}
.where-group {
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--chrome-flat);
  color: #222;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .06em;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #5c5c60;
}

.chrome-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--chrome-flat);
  color: #222;
  font: 700 16px / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #5c5c60, 0 2px 5px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.chrome-btn:active { filter: brightness(.88); }
.chrome-btn:disabled { opacity: .35; cursor: default; }
.chrome-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chrome-btn.big { height: 54px; font-size: 18px; }

.deck {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 12px 14px;
  touch-action: pan-y;
}

.card {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.card-top {
  position: relative;
  height: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}
.card-top::before,
.card-top::after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 14px;
  background: #101011;
  border-radius: 0 0 4px 4px;
}
.card-top::before { left: 24%; }
.card-top::after { right: 24%; }
.card-nr { font-weight: 800; font-size: 17px; letter-spacing: .04em; }

.card-head,
.entry {
  display: grid;
  grid-template-columns: 24px minmax(0, .95fr) minmax(0, 1.4fr);
}
.card-head {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #333;
}
.card-head div { padding: 6px 8px; }
.card-head div:first-child { grid-column: 1 / 3; }
.card-head div + div { border-left: 1px solid var(--rule); }

.entries { margin: 0; padding: 0; list-style: none; }
.entry { border-bottom: 1px solid var(--rule); min-height: 66px; }
.entry.blank { min-height: 44px; }
.idx {
  padding: 8px 0 0 7px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}
.name {
  padding: 8px 6px 8px 4px;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.name strong { display: block; font-size: clamp(15px, 4.4vw, 18px); line-height: 1.2; }
.name span { display: block; margin-top: 2px; font-size: clamp(14px, 4vw, 16px); color: #333; }

.nums { display: flex; flex-direction: column; border-left: 1px solid var(--rule); min-width: 0; }
.num {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: stretch;
  flex: 1;
  min-height: 33px;
  color: #101012;
  text-decoration: none;
  border-top: 1px solid #cfcfcd;
}
.num:first-child { border-top: 0; }
.num:nth-child(even) { background: var(--soft); }
.num i {
  display: grid;
  place-items: center;
  font: 700 9px / 1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .05em;
  color: #555;
  border-right: 1px solid var(--rule);
}
.num b {
  display: flex;
  align-items: center;
  padding: 0 6px 0 8px;
  font-weight: 500;
  font-size: clamp(14px, 4.1vw, 17px);
  white-space: nowrap;
}
.num.blank i { color: #b4b4b2; }
.entry.blank .num { min-height: 22px; }
a.num { cursor: pointer; }
a.num:active { background: #cfe2ff; }
a.num:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.num.fax b { color: #4a4a4d; }

.card-foot { display: flex; justify-content: flex-end; padding: 8px 12px 10px; }
.card-grp { font-weight: 800; font-size: 17px; letter-spacing: .08em; }

.bottombar {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + var(--safe-b));
}
.progress { color: #b9b9c0; font-size: 14px; text-align: center; line-height: 1.3; }

.error { color: #fff; padding: 24px; font-size: 17px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .device, .slider { transition: none; }
}