/* =====================================================================
   Personaleingang – die kleine Holztür oben rechts.

   In jeder Kneipe führt dieselbe Tür zu den Toiletten und zum
   Personalbereich. Deshalb die zwei winzigen Schilder: wer sie kennt,
   weiß, wo es zum Dienstplan geht.

   Eigene Datei, damit ein neuer Export aus Claude Design sie nicht
   überschreibt. Eingebunden wird sie über zwei Zeilen in index.html,
   siehe design/README-export.md.
   ===================================================================== */

.td-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* --- die Türöffnung -------------------------------------------------
   Der Knopf selbst ist der Rahmen: ein dunkler Durchgang, aus dem warmes
   Licht fällt. Darauf liegt das Türblatt und deckt ihn zu. Ohne diesen
   Rahmen fehlte der Bezugspunkt – eine Tür, die sich dreht, sah dann
   aus, als würde sie zufallen statt aufgehen.
   ------------------------------------------------------------------- */
.td-door {
  --td-holz-1: #5a3a21;
  --td-holz-2: #3d2614;
  --td-holz-3: #6b4527;
  --td-messing: #d9a441;

  position: relative;
  width: 34px;
  height: 52px;
  padding: 0;
  border: 1px solid #2a1a0e;
  border-radius: 7px 7px 2px 2px;
  /* Der Durchgang: dunkel unten, warmes Licht von hinten oben. */
  background:
    radial-gradient(120% 70% at 78% 22%,
      rgba(246, 160, 107, .55), rgba(160, 92, 40, .18) 45%, transparent 70%),
    linear-gradient(#1a1109, #0c0805);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
  cursor: pointer;
  /* Damit das gedrehte Türblatt Tiefe bekommt statt platt zu kippen. */
  perspective: 320px;
  overflow: hidden;
}

/* --- das Türblatt ---------------------------------------------------- */
.td-blatt {
  position: absolute;
  inset: 0;
  border-radius: 6px 6px 1px 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, .16) 0 1px,
      rgba(255, 255, 255, .03) 1px 3px,
      rgba(0, 0, 0, 0) 3px 9px),
    linear-gradient(160deg, var(--td-holz-3), var(--td-holz-1) 55%, var(--td-holz-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -6px 10px rgba(0, 0, 0, .35);
  /* Die Angeln sitzen links. Zu ist 0 Grad – das Blatt deckt den
     Durchgang vollständig. */
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform .34s cubic-bezier(.22, .8, .3, 1);
  backface-visibility: hidden;
}

/* die eingelassene Kassette */
.td-blatt::before {
  content: "";
  position: absolute;
  inset: 5px 7px 12px 5px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* Türknauf aus Messing, gegenüber den Angeln */
.td-blatt::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffdf9a, var(--td-messing) 60%, #8a6415);
  box-shadow: 0 0 3px rgba(217, 164, 65, .7);
}

/* Maus drauf: die Tür geht auf und gibt den Durchgang frei. */
.td-wrap:hover .td-blatt,
.td-door:focus-visible .td-blatt {
  transform: rotateY(-58deg);
}

/* Offene Klappe: die Tür bleibt weiter auf. */
.td-door[aria-expanded="true"] .td-blatt {
  transform: rotateY(-74deg);
}

/* Ein Schimmer auf dem Rahmen, solange die Tür offensteht. */
.td-wrap:hover .td-door,
.td-door[aria-expanded="true"] {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .8),
    0 0 12px -2px rgba(246, 160, 107, .5);
}

/* --- die zwei Schilder --------------------------------------------- */
.td-schilder {
  position: absolute;
  top: 9px;
  left: 0;
  right: 4px;
  display: flex;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.td-schild {
  width: 11px;
  height: 13px;
  border-radius: 1.5px;
  background: linear-gradient(#efe2cd, #cdbb9e);
  border: .5px solid rgba(0, 0, 0, .45);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-schild svg {
  width: 7px;
  height: 9px;
  display: block;
  fill: #2a1a0e;
}

/* --- die Klappe hinter der Tür -------------------------------------- */
.td-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: min(268px, calc(100vw - 32px));
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(246, 160, 107, .22);
  background: #1b130c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  color: #e8d8c4;
  display: none;
}

.td-panel[data-offen] {
  display: block;
  animation: td-auf .22s ease-out;
}

@keyframes td-auf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.td-titel {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-accent-300);
  margin: 0 0 2px;
}

.td-unter {
  font-size: 12px;
  line-height: 1.45;
  color: #a2907a;
  margin: 0 0 var(--space-3);
}

.td-knopf {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  margin-bottom: 7px;
  border: 1px solid rgba(246, 160, 107, .28);
  border-radius: 999px;
  background: transparent;
  color: #e8d8c4;
  font-family: var(--font-body);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.td-knopf:hover {
  background: rgba(246, 160, 107, .10);
  border-color: rgba(246, 160, 107, .5);
  color: #f6e6d2;
}

.td-knopf--haupt {
  background: var(--color-accent-500);
  border-color: transparent;
  color: #1a1206;
  font-family: var(--font-heading);
}

.td-knopf--haupt:hover {
  background: var(--color-accent-400);
  color: #1a1206;
}

/* Noch nicht im Store: sichtbar, aber ehrlich abgeschaltet. */
.td-knopf--bald {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

.td-knopf svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}

.td-bald {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a2907a;
}

@media (max-width: 640px) {
  .td-door { width: 28px; height: 43px; }
  .td-blatt { border-radius: 5px 5px 1px 1px; }
  .td-schilder { top: 7px; }
  .td-schild { width: 9px; height: 11px; }
  .td-schild svg { width: 6px; height: 7.5px; }

  /* Bricht die Leiste um, landet die Tür sonst ganz links in der neuen
     Zeile. Auf dem Desktop wäre dasselbe `auto` schädlich: es teilt den
     freien Raum mit dem Logo und reißt eine Lücke neben dem
     Instagram-Knopf auf. Deshalb nur hier. */
  .td-wrap { margin-left: auto; }

  /* Und die Klappe hängt nicht mehr an der Tür, sondern am Fenster:
     eine Leiste unter der Navigation. So ist sie sichtbar, egal wo die
     Tür nach dem Umbruch gelandet ist. */
  .td-panel {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    width: auto;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-blatt,
  .td-panel[data-offen] { transition: none; animation: none; }
  /* Auf/zu bleibt erkennbar, nur ohne Schwung. */
}