/* Ergänzungen vom 04.10.2026. Eigene Datei, damit styles.css und drop.css (von ChatGPT umgestaltet) unberührt bleiben.
   1. Rabatt-Hinweis im Drop  2. Social Media unten in der Galerie  3. Animation beim Wechsel hell/dunkel */

/* ---------- 1. Rabatt im Drop: Zahl und Hinweis kommen aus dem Dashboard (0 % = versteckt) ---------- */
.drop-rabatt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 clamp(18px, 2.4vw, 28px); padding: 8px 12px 8px 8px; border: 1px solid currentColor; color: var(--paper); font: 10px/1.35 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.drop-rabatt b { display: inline-block; padding: 6px 9px 5px; color: var(--black); background: var(--paper); font: 900 13px/1 var(--mono); letter-spacing: .08em; transform: rotate(-2.5deg); }
.drop-section.is-armed .drop-rabatt { opacity: 0; }
.drop-section.is-entering .drop-rabatt { animation: extras-stempel .55s 1.15s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes extras-stempel { 0% { opacity: 0; transform: scale(1.6) rotate(-6deg); } 60% { opacity: 1; transform: scale(.96) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.drop-ticket-rabatt { margin: 0 0 16px; color: var(--flyer-ink, #151514); font: 11px/1.6 var(--mono); }
.drop-ticket-rabatt b { padding: 3px 6px 2px; color: var(--flyer, #f2f1ec); background: var(--flyer-ink, #151514); letter-spacing: .06em; }

/* ---------- 2. Social Media: dezente Archivtextur hinter Text und Handy ---------- */
.social-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  gap: clamp(30px, 7vw, 110px);
  align-items: center;
  margin-top: clamp(26px, 4vw, 56px);
  padding: clamp(28px, 4.5vw, 54px) clamp(18px, 3vw, 40px);
  border: 1px solid var(--line);
  background-color: #080909;
  background-image: url("assets/social-archive-graphite.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.social-copy .eyebrow { margin-bottom: 20px; }
.social-title { margin: 0; color: var(--paper); font: 900 clamp(46px, 6.2vw, 96px)/.86 var(--display); letter-spacing: -.07em; }
.social-title span { display: inline-block; margin-top: .06em; font: 400 1em/1 "Rubik Wet Paint", Impact, var(--display); letter-spacing: -.02em; transform: rotate(-2deg); }
.social-note { max-width: 380px; margin: 22px 0 26px; color: var(--muted); font: 11px/1.8 var(--mono); }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); color: var(--paper); font: 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: color .2s, background-color .2s, border-color .2s, transform .25s var(--ease); }
.social-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-link .social-dot { fill: currentColor; stroke: none; }
.social-handle { color: var(--muted); font-weight: 700; transition: color .2s; }
.social-link[href]:hover { border-color: var(--paper); color: var(--black); background: var(--paper); transform: translateY(-2px); }
.social-link[href]:hover .social-handle { color: var(--black); }
.social-link:not([href]) { cursor: default; }

/* Das Handy bleibt in beiden Modi ein dunkles Ding, wie der Fernseher. */
.social-phone { position: relative; justify-self: center; width: min(100%, 290px); aspect-ratio: 9 / 18.4; padding: 9px; border-radius: 40px; background: linear-gradient(150deg, #2c2d2e, #0d0d0e 55%, #1b1c1d); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 4px #050505, 0 30px 60px rgba(0,0,0,.5); transform: rotate(3deg); transition: transform .6s var(--ease); }
.social-phone::before { position: absolute; z-index: 2; top: 18px; left: 50%; width: 30%; height: 20px; border-radius: 12px; background: #000; content: ""; transform: translateX(-50%); }
.social-strip:hover .social-phone { transform: rotate(0) translateY(-6px); }
.social-screen { display: flex; height: 100%; flex-direction: column; overflow: hidden; padding: 50px 10px 10px; border-radius: 32px; color: #f2f1ec; background: #0b0b0b; }
.social-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.social-profile img { width: 42px; height: 42px; flex: 0 0 42px; padding: 7px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; object-fit: contain; background: #151515; }
.social-profile span { display: grid; min-width: 0; gap: 4px; }
.social-profile b { overflow: hidden; font: 700 11px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.social-profile small { color: #8f8f8b; font: 7px/1 var(--mono); letter-spacing: .1em; }
.social-profile i { margin-left: auto; padding: 6px 10px; border-radius: 6px; color: #0b0b0b; background: #f2f1ec; font: 700 9px/1 var(--sans); font-style: normal; }
.social-grid { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 3px; min-height: 0; }
.social-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .5s var(--ease), filter .5s; }
.social-grid .orbit-photo-mono { filter: grayscale(1) contrast(1.05); }
.social-strip:hover .social-grid img:nth-child(odd) { transform: scale(1.04); }

@media (max-width: 860px) {
  .social-strip { grid-template-columns: minmax(0, 1fr); }
  .social-phone { width: min(78%, 270px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-phone, .social-grid img, .social-link { transition: none; }
  .social-strip:hover .social-phone { transform: rotate(3deg); }
  .social-strip:hover .social-grid img:nth-child(odd) { transform: none; }
}

/* ---------- 3. Wechsel hell/dunkel: der neue Modus wächst als Kreis vom Knopf aus (store.js startThemeToggle) ---------- */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-toggle.is-switching .theme-icon { animation: extras-sonne .82s cubic-bezier(.65,0,.25,1); }
@keyframes extras-sonne { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(200deg) scale(.5); } 100% { transform: rotate(360deg) scale(1); } }
.theme-toggle.is-switching::after { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; content: ""; pointer-events: none; animation: extras-ring .82s ease-out forwards; }
@keyframes extras-ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(3); } }

/* ---------- 4. Sprachwechsel DE/EN: Lamellen wie ein Rolltor (store.js setzt .is-lang-switch an html) ---------- */
@property --lamelle { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
:root.is-lang-switch::view-transition-old(root) { z-index: 2; -webkit-mask: linear-gradient(#000 var(--lamelle), transparent var(--lamelle)) 0 0 / 100% 34px; mask: linear-gradient(#000 var(--lamelle), transparent var(--lamelle)) 0 0 / 100% 34px; animation: sprache-lamellen .72s cubic-bezier(.7,0,.25,1) both; }
:root.is-lang-switch::view-transition-new(root) { z-index: 1; animation: sprache-rein .72s cubic-bezier(.2,.8,.25,1) both; }
@keyframes sprache-lamellen { from { --lamelle: 100%; } to { --lamelle: 0%; } }
@keyframes sprache-rein { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Die gewählte Flagge dreht sich einmal um. */
:root.is-lang-switch .language-choice.is-active > span { display: inline-block; animation: sprache-flagge .72s cubic-bezier(.6,0,.25,1); }
@keyframes sprache-flagge { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(1.35); } 100% { transform: rotateY(360deg) scale(1); } }

/* ---------- 5. Galerie: Glanz beim Ankommen (06.10.2026). store.js (startPhotoOrbit) legt einmal in jede sichtbare Karte
   ein .orbit-glint mit einem Lichtstreifen und schiebt alle Streifen gemeinsam von links nach rechts: ein Licht über alle Fotos.
   Weicher Schein mit schmaler, heller Mitte, schräg wie Licht auf einer Messerklinge. Lage und Bewegung setzt store.js. ---------- */
.orbit-glint { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.orbit-glint i { position: absolute; top: 50%; left: 50%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.025) 22%, rgba(255,255,255,.08) 38%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.42) 49.4%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.42) 50.6%, rgba(255,255,255,.16) 54%, rgba(255,255,255,.08) 62%, rgba(255,255,255,.025) 78%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .orbit-glint { display: none; } }

/* ---------- 6. Fußzeile: seit 06.10.2026 (Umbau mit Support-Knopf) komplett in fusszeile.css. ---------- */

/* ---------- 7. Schrift-Auftritt „type“ (07.10.2026, Michas „beim Hinschreiben sind Striche dazwischen“): jeder Buchstabe hatte einen
   eigenen Block-Cursor (styles.css, 22 ms je Zeichen). Zwischen zwei Bildern waren oft zwei davon sichtbar, einer davon mitten
   zwischen den Buchstaben. Jetzt erscheinen die Buchstaben ohne Zwischen-Cursor, nur hinter dem letzten blinkt er am Ende.
   Gleiches für „typewriter“ (85 ms, dünner Strich). ---------- */
.is-writing[data-write="type"] w-c:not(.is-last)::after,
.is-writing[data-write="typewriter"] w-c:not(.is-last)::after { content: none; }
/* „wipe“ (Unsere Qualität): Der Farbbalken wächst von links und läuft nach rechts ab. Kurz vor null war er ein 1-px-Strich,
   der am Zeilenende stehen blieb. Gleiche Bewegung, nur an beiden Enden kurz ein- und ausgeblendet. */
.is-writing[data-write="wipe"] w-l::after { animation-name: write-wipe-sauber; }
@keyframes write-wipe-sauber {
  0% { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
  20% { opacity: 1; }
  46% { transform: scaleX(1); transform-origin: 0 50%; }
  54% { transform: scaleX(1); transform-origin: 100% 50%; }
  64% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- 8. Galerie: Titel unter dem Kartenrad (19.10.2026, Michas „bei der Galerie hinschreiben: Leute, die 27 ARCHIVE
   tragen“). Steht mittig in der Zeile unter den Karten, wo vorher das interne Wort „Orbit“ stand; heller und etwas größer
   als die übrigen Angaben dort. ---------- */
/* Runde 2 (Michas „soll noch mehr herausstechen“): Überschriftenschrift der Seite statt der kleinen Schreibmaschinenschrift,
   deutlich größer, mit weichem Schatten gegen die Fotos dahinter. */
.orbit-hud .orbit-hud-titel { color: var(--paper); font: 800 clamp(16px, 1.55vw, 23px)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
:root[data-theme="light"] .orbit-hud .orbit-hud-titel { text-shadow: 0 2px 14px rgba(255, 255, 255, .7); }
@media (max-width: 680px) {
  .orbit-hud .orbit-hud-titel { font-size: 15px; letter-spacing: 0; }
  .orbit-hud > :last-child { display: none; }
}