/* omerkaya.de · Schreibtisch-Szene (Startseite)
   Ruhige Fassung: zweigeteiltes Bild. Am Anfang der Zeile die Nacht des Unternehmers (eine warme Lampe,
   Blätter schief), am Ende der Tag der Kanzlei (Fensterlicht, exakte Stapel, klare Linien).
   Beide Hälften teilen sich eine Tischkante auf gleicher Höhe, so lesen sie sich als ein Tisch.
   Die 3D-Fassung (html.tisch-3d) setzt schreibtisch3d.js; dann ist die Bühne klebrig und die Worte
   liegen als Überlagerung über der Szene. */

.schreibtisch { position: relative; background: var(--schwarz); }
.tisch-buehne { position: relative; }

/* ------------------------------------------------------------ Ruhiges Bild */
.tisch-statisch {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(82vh, 820px); min-height: min(82svh, 820px);
}
.tisch-seite {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-start;
  padding: calc(clamp(32px, 6vw, 88px)) var(--rand) 0;
}
.tisch-worte {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 76px); line-height: 1; letter-spacing: .005em; max-width: 9.5em;
  overflow-wrap: break-word;
}

/* Nacht: fast schwarz, eine warme Lampe von oben, Lichtfleck auf dem Tisch, Blätter schief darin */
.tisch-seite--nacht { background: #070708; color: var(--knochen); }
.tisch-seite--nacht::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 9% at 62% 70.5%, rgba(255, 196, 120, .30), rgba(243, 167, 58, .10) 55%, rgba(243, 167, 58, 0) 100%),
    conic-gradient(from 186deg at 84% -6%, rgba(255, 190, 110, 0) 0deg, rgba(255, 190, 110, .13) 9deg, rgba(255, 190, 110, .2) 17deg, rgba(255, 190, 110, .07) 27deg, rgba(255, 190, 110, 0) 34deg),
    radial-gradient(ellipse 60% 50% at 66% 60%, rgba(243, 167, 58, .07), rgba(243, 167, 58, 0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 76%);
}
/* Die Tischplatte von leicht oben, darauf drei Blätter schief übereinander, vorne die feine Kante */
.tisch-seite--nacht::after {
  content: ''; position: absolute; inset-inline: 0; top: 66%; height: 16%; z-index: 1; pointer-events: none;
  background:
    linear-gradient(101deg, transparent 30%, rgba(240, 220, 190, .66) 30.4%, rgba(226, 200, 164, .52) 69.6%, transparent 70%) 52% 30% / 16% 46% no-repeat,
    linear-gradient(74deg, transparent 29%, rgba(240, 218, 186, .5) 29.5%, rgba(214, 186, 150, .4) 70.5%, transparent 71%) 64% 62% / 17% 42% no-repeat,
    linear-gradient(121deg, transparent 32%, rgba(226, 202, 170, .4) 32.5%, rgba(204, 176, 140, .3) 67.5%, transparent 68%) 76% 20% / 14% 42% no-repeat,
    linear-gradient(84deg, transparent 31%, rgba(214, 190, 158, .26) 31.5%, rgba(190, 164, 130, .2) 68.5%, transparent 69%) 40% 66% / 13% 38% no-repeat,
    radial-gradient(ellipse 36% 70% at 62% 50%, rgba(243, 167, 58, .26), rgba(243, 167, 58, 0) 100%),
    linear-gradient(to bottom, #15120f, #0d0b09);
  border-bottom: 1px solid rgba(243, 167, 58, .62);
  box-shadow: 0 1px 22px rgba(243, 167, 58, .14), 0 40px 60px -20px #000;
}

/* Tag: helles Knochenweiß, Fensterlicht in Feldern, drei exakte Stapel, klare Linien */
.tisch-seite--tag { background: linear-gradient(180deg, #ddd8ce 0%, #d4cfc4 66%, #c9c3b7 100%); color: #121214; }
.tisch-seite--tag::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset-inline-start: 8%; top: 14%; width: 64%; height: 62%;
  /* vier hohe Fensterfelder, dazwischen schmale Sprossen: das Tageslicht fällt in klaren Linien */
  background: repeating-linear-gradient(90deg, rgba(251, 249, 245, .8) 0 calc(25% - 6px), transparent calc(25% - 6px) 25%);
  transform: skewX(-24deg); transform-origin: top;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9) 0%, #000 50%, transparent 100%);
}
.tisch-seite--tag::after {
  content: ''; position: absolute; inset-inline: 0; top: 66%; height: 16%; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, #f3efe7 0 3px, #bdb6a9 3px 4px) 26% 44% / 13% 34% no-repeat,
    repeating-linear-gradient(to bottom, #f3efe7 0 3px, #bdb6a9 3px 4px) 50% 44% / 13% 34% no-repeat,
    repeating-linear-gradient(to bottom, #f3efe7 0 3px, #bdb6a9 3px 4px) 74% 44% / 13% 34% no-repeat,
    linear-gradient(to bottom, #1d1a16, #14120f);
  border-bottom: 1px solid #0a0a0b;
  box-shadow: 0 30px 50px -24px rgba(10, 10, 11, .45);
}
html[dir="rtl"] .tisch-seite::before, html[dir="rtl"] .tisch-seite::after { transform: scaleX(-1); }
html[dir="rtl"] .tisch-seite--tag::before { transform: scaleX(-1) skewX(-24deg); }

/* Satz und Knöpfe unter dem Bild */
.tisch-schluss { padding: clamp(48px, 9vh, 104px) var(--rand) clamp(64px, 11vh, 128px); max-width: var(--max); margin: 0 auto; }
.tisch-satz {
  margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 6.4vw, 104px); line-height: 1; max-width: 14em; overflow-wrap: break-word;
}
.tisch-schluss .knopfreihe { margin-top: clamp(22px, 3.4vh, 36px); }
.tisch-schluss .knopf { min-height: 48px; }
html[lang="ar"] .tisch-worte, html[lang="ar"] .tisch-satz { line-height: 1.35; }

@media (max-width: 699px) {
  .tisch-statisch { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tisch-seite { min-height: 50svh; min-height: 50vh; min-height: 50svh; padding-top: clamp(28px, 8vw, 48px); }
  .tisch-seite::after { top: 64%; height: 18%; }
  .tisch-worte { font-size: clamp(34px, 10.5vw, 52px); }
}

/* ------------------------------------------------------------ 3D-Fassung */
html.tisch-3d .tisch-spur { height: 380vh; height: 380svh; }
@media (max-aspect-ratio: 1/1) { html.tisch-3d .tisch-spur { height: 340vh; height: 340svh; } }
html.tisch-3d .tisch-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--schwarz);
}
.tisch-leinwand { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.tisch-schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tisch-schleier::before, .tisch-schleier::after { content: ''; position: absolute; pointer-events: none; }
.tisch-schleier::before {
  inset: 0; opacity: var(--tisch-vignette, 1);
  background: radial-gradient(ellipse 85% 75% at 50% 58%, rgba(10, 10, 11, 0) 52%, rgba(10, 10, 11, .72) 100%);
}
/* Am Ende läuft das helle Bild nach unten ins Schwarz des nächsten Abschnitts aus */
.tisch-schleier::after {
  inset: auto 0 0; height: 24%; opacity: var(--tisch-boden, 0);
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0), rgba(10, 10, 11, .55) 45%, var(--schwarz));
}

/* Die Worte liegen über der Szene, oben im freien Raum; der Tisch steht darunter */
html.tisch-3d .tisch-statisch { position: absolute; inset: 0; z-index: 2; display: block; min-height: 0; pointer-events: none; }
html.tisch-3d .tisch-seite {
  position: absolute; inset-inline: var(--rand); top: calc(var(--kopf) + clamp(14px, 4.5svh, 52px));
  display: block; min-height: 0; padding: 0; overflow: visible; background: none; isolation: auto;
}
html.tisch-3d .tisch-seite::before, html.tisch-3d .tisch-seite::after { content: none; }
html.tisch-3d .tisch-worte {
  font-size: clamp(34px, min(5.2vw + 14px, 8.4svh), 120px); line-height: .98; max-width: 11.5em;
}
html.tisch-3d .tisch-seite--nacht .tisch-worte { color: var(--knochen); text-shadow: 0 0 28px rgba(10, 10, 11, .55); }
html.tisch-3d .tisch-seite--tag { text-align: end; }
html.tisch-3d .tisch-seite--tag .tisch-worte { color: var(--schwarz); margin-inline-start: auto; }
.tisch-zeile { display: block; opacity: 0; will-change: transform, opacity; }

html.tisch-3d .tisch-schluss {
  position: absolute; z-index: 3; inset-inline: var(--rand); top: calc(var(--kopf) + clamp(14px, 4.5svh, 52px));
  margin: 0; padding: 0; max-width: none;
}
html.tisch-3d .tisch-satz {
  color: var(--schwarz); font-size: clamp(34px, min(5.6vw + 16px, 9svh), 104px); line-height: .98; max-width: 13em;
}
.tisch-wort { display: inline-block; opacity: 0; will-change: transform, opacity; }
html.tisch-3d .tisch-schluss .knopfreihe { opacity: 0; margin-top: clamp(18px, 3svh, 32px); }
html.tisch-3d .tisch-schluss:not(.tisch-schluss--da) .knopfreihe { pointer-events: none; }
/* Am Ende steht der Satz im hellen Tageslicht: dunkle Schrift, dunkler Rand, dunkler Fokusrahmen */
html.tisch-3d .tisch-schluss .knopf:not(.knopf--glut) { color: var(--schwarz); border-color: var(--schwarz); }
html.tisch-3d .tisch-schluss .knopf:not(.knopf--glut):hover { background: var(--schwarz); color: var(--knochen); }
html.tisch-3d .tisch-schluss .knopf--glut:hover { background: var(--schwarz); border-color: var(--schwarz); color: var(--knochen); }
html.tisch-3d .tisch-schluss :focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
html[lang="ar"].tisch-3d .tisch-worte, html[lang="ar"].tisch-3d .tisch-satz { line-height: 1.3; }