/*
 * Feinschliff - Ergaenzungen zum Durable-Stylesheet von Studio76Tattoos.
 * Farben der Seite: Dunkelgrau #414141, Gold #c89256, Creme #fcf1e8, Sand #ffe7b4.
 *
 * Teil 1: Verhalten in Sonderfaellen (Tastatur, reduzierte Bewegung, Druck, Karte)
 * Teil 2: behutsame Modernisierung (Hover-Effekte, Video-Kacheln, Lightbox,
 *         Anfahrt-Schaltflaeche, WhatsApp-Knopf) - Aufbau und Farben bleiben.
 */

/* ===== Teil 1 ========================================================== */

/* --- Tastaturbedienung: sichtbarer Fokusrahmen in Gold ------------------ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
video:focus-visible {
  outline: 2px solid #c89256;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Reduzierte Bewegung -------------------------------------------------
   Frueher stand hier ein pauschales Abschalten aller Uebergaenge bei
   "prefers-reduced-motion". Das schaltete auch Durables sanftes Einblenden
   der Sektionen ab - auf Windows-Rechnern mit deaktivierten Animationen
   wirkte die Seite dadurch "tot". Das Einblenden ist dezent und bleibt;
   nur das sanfte Scrollen wird zurueckgenommen. Bewusst NICHT .opacity-0
   pauschal sichtbar setzen (versteckt "Jetzt geoeffnet"). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* --- Kartensektion: Zoom-Knoepfe und Ziehen ueberall bedienbar -----------
   Die Container-Ebene mit der Adress-Infokarte liegt mit z-10 ueber der
   gesamten Karte und faengt alle Zeigereingaben ab. Die Ebene wird
   durchlaessig, nur die Infokarte selbst faengt weiter Taps.
   Attribut-Selektor, weil die Block-Kennung mit einer Ziffer beginnt. */
[id="662f91d356fafb995349a271"] > .container {
  pointer-events: none;
}

[id="662f91d356fafb995349a271"] > .container .flex.flex-row > div {
  pointer-events: auto;
}

/* Leaflet-Hinweis dezent auf dunkler Karte */
.leaflet-container .leaflet-control-attribution {
  background: rgba(30, 30, 30, 0.75);
  color: #bbb;
  font-size: 10px;
}

.leaflet-container .leaflet-control-attribution a {
  color: #d9b27c;
}

.leaflet-bar a {
  background: #2a2a2a;
  color: #fcf1e8;
  border-bottom-color: #444;
}

.leaflet-bar a:hover {
  background: #3a3a3a;
  color: #fff;
}

/* ===== Teil 2 ========================================================== */

/* --- Sanftes Scrollen bei Sprungmarken ------------------------------------ */
html {
  scroll-behavior: smooth;
}

/* --- Banner: Schrift vor dem Foto besser lesbar --------------------------- */
[id="662f91b856fafb995349a269"] h1,
[id="662f91b856fafb995349a269"] .heading-large {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* --- Leistungen: Bild beim Ueberfahren leicht heranzoomen ----------------- */
[id="662f91bd56fafb995349a26b"] .grid > * {
  transition: transform 0.35s ease;
}

[id="662f91bd56fafb995349a26b"] .grid > *:hover {
  transform: translateY(-4px);
}

[id="662f91bd56fafb995349a26b"] .grid img {
  transition: transform 0.7s ease;
}

[id="662f91bd56fafb995349a26b"] .grid > *:hover img {
  transform: scale(1.04);
}

/* --- Instagram-Kacheln ----------------------------------------------------
   .s76-tile wird per patch.py auf jede Kachel gesetzt (Chunk 9078 + HTML),
   data-title / data-artist kommen aus der Bildunterschrift (feinschliff.py,
   zur Laufzeit auch s76-galerie.js). Videos liegen lokal als MP4, laufen im
   Sichtfeld stumm an; ein Klick oeffnet die Lightbox.

   Anordnung: ab 768 px ein Bento-Raster (5 Spalten x 3 Zeilen, der neueste
   Beitrag gross hochkant, der zweite hoch, der Rest quadratisch); darunter
   ein Reel-Strip zum Wischen (Scroll-Snap, Hochkant 9:16). Der Instagram-Block
   selbst bleibt unveraendert - nur die Anordnung seiner 9 Kacheln. */
.s76-tile {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #2b2b2b;
  cursor: pointer;
  border-radius: 14px;
}

/* Verlauf + Titel/Kuenstler-Badge am unteren Rand */
.s76-tile::before {
  content: attr(data-title);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: #fcf1e8;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.s76-tile[data-artist]:not([data-artist=""])::before {
  content: attr(data-title) "  ·  " attr(data-artist);
}

.s76-tile[data-title=""]::before {
  content: attr(data-artist);
}

.s76-tile:hover::before,
.s76-tile:focus-visible::before,
.s76-tile.s76-playing::before,
.s76-tile.s76-gross::before {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) {
  [id="662f935556fafb995349a272"] .grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    aspect-ratio: 5 / 3;
    gap: 14px;
  }

  [id="662f935556fafb995349a272"] .grid > .s76-tile {
    aspect-ratio: auto;
    min-height: 0;
  }

  /* neuester Beitrag: 2 Spalten x 3 Zeilen (hochkant) */
  [id="662f935556fafb995349a272"] .grid > .s76-tile:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3;
  }

  /* zweiter Beitrag: 1 Spalte x 2 Zeilen (hochkant) */
  [id="662f935556fafb995349a272"] .grid > .s76-tile:nth-child(2) {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .s76-tile.s76-gross::before {
    font-size: 17px;
    padding: 70px 20px 18px;
  }
}

@media (max-width: 767px) {
  /* Reel-Strip: Hochkant-Karten, seitlich wischbar, jede rastet mittig ein */
  [id="662f935556fafb995349a272"] .grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px 12px;
    margin: 0 -20px;
    scroll-padding: 0 20px;
  }

  [id="662f935556fafb995349a272"] .grid::-webkit-scrollbar {
    display: none;
  }

  [id="662f935556fafb995349a272"] .grid > .s76-tile {
    flex: 0 0 72vw;
    max-width: 340px;
    aspect-ratio: 9 / 16;
    scroll-snap-align: center;
    border-radius: 18px;
  }

  [id="662f935556fafb995349a272"] .grid > .s76-tile::before {
    opacity: 1;
    transform: none;
  }
}

.s76-tile.hover\:opacity-70:hover {
  opacity: 1;
}

.s76-tile img,
.s76-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.35s ease;
}

.s76-tile:hover img,
.s76-tile:hover video {
  transform: scale(1.05);
}

/* Abspiel-Symbol auf Video-Kacheln, verschwindet waehrend der Vorschau */
.s76-video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M8 5v14l11-7z'/></svg>") center / 30px no-repeat;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.s76-video.s76-playing::after {
  opacity: 0;
  transform: scale(0.8);
}

@media (max-width: 767px) {
  .s76-video::after {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background-size: 22px;
  }
}

/* --- Lightbox ------------------------------------------------------------- */
/* Geschlossen ist die Lightbox display:none - nicht nur unsichtbar. Eine
   bildschirmfuellende, fest positionierte Ebene (erst recht mit
   backdrop-filter) wird sonst weiter bei jedem Bild mitgerechnet, auch bei
   opacity:0; zusammen mit laufenden Videos fror das ganze Seiten ein.
   Deshalb auch kein backdrop-filter mehr, sondern ein dichter Hintergrund. */
.s76-lb {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 10, 0.95);
  opacity: 0;
  transition: opacity 0.25s ease;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #fcf1e8;
}

.s76-lb.s76-lb-sichtbar {
  display: flex;
}

.s76-lb.s76-lb-offen {
  opacity: 1;
}

.s76-lb-inhalt {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(92vw, 560px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.s76-lb-medium {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s76-lb-medium img,
.s76-lb-medium video {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.s76-lb-text {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.s76-lb-text p {
  margin: 0;
  max-height: 4.5em;
  overflow: hidden;
  opacity: 0.85;
  white-space: pre-line;
}

.s76-lb-text a {
  flex: none;
  color: #d9b27c;
  text-decoration: none;
  border: 1px solid #c89256;
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.s76-lb-text a:hover {
  background: #c89256;
  color: #1f1f1f;
}

.s76-lb button {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 46px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.s76-lb button:hover {
  background: rgba(255, 255, 255, 0.28);
}

.s76-lb-zu {
  top: 18px !important;
  right: 18px;
  margin-top: 0 !important;
  font-size: 22px !important;
}

.s76-lb-vor {
  right: -62px;
}

.s76-lb-zurueck {
  left: -62px;
}

@media (max-width: 760px) {
  .s76-lb-vor {
    right: 4px;
    top: auto;
    bottom: 70px;
  }

  .s76-lb-zurueck {
    left: 4px;
    top: auto;
    bottom: 70px;
  }

  .s76-lb-text {
    flex-direction: column;
  }
}

body.s76-lb-aktiv {
  overflow: hidden;
}

/* --- Anfahrt: Schaltflaeche in der Standort-Karte ------------------------- */
.s76-route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 20px;
  border: 1.5px solid #c89256;
  border-radius: 999px;
  color: #fcf1e8 !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.s76-route::before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23c89256' d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>") center / contain no-repeat;
}

.s76-route:hover {
  background: #c89256;
  color: #1f1f1f !important;
  transform: translateY(-1px);
}

/* --- WhatsApp-Knopf (ersetzt das Common-Ninja-Widget) --------------------- */
.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wa-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ===== Stufe 1 (23.08.2026): Umgestaltung ohne Farbwechsel ================= */

/* --- Goldene Akzentlinie unter Sektionsueberschriften --------------------- */
section h2.heading-large::after,
.s76-ablauf h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: #c89256;
}

/* --- Kopfzeile: bleibt oben, wird beim Scrollen kompakt ------------------
   header.sticky kommt aus den Seitendaten; Logo 200 px -> 56 px, dunkler
   Hintergrund erst nach dem Scrollen (ueber dem Banner bleibt sie durchsichtig). */
#website-header {
  position: sticky;
  top: 0;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Die eigenen Rich-Text-Bloecke (Ablauf, Kontakt) nutzen die volle Containerbreite */
[id="68a8d1a2f0c4b1e3d5a7c911"] .rich-text-block,
[id="68a8d1a2f0c4b1e3d5a7c912"] .rich-text-block {
  max-width: none;
}

/* Fusszeile: Kontaktzeilen nicht mitten im Telefon umbrechen */
#website-footer .s76-nowrap {
  white-space: nowrap;
}

#website-header img {
  transition: height 0.35s ease;
}

body.s76-scrolled #website-header {
  background-color: rgba(48, 48, 48, 0.96) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

body.s76-scrolled #website-header img.hidden.lg\:block {
  height: 56px !important;
}

body.s76-scrolled #website-header > div {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Schaltflaechen (Banner, Ablauf, Kontakt) ----------------------------- */
.s76-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid #c89256;
  color: #fcf1e8 !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.s76-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.s76-btn-wa {
  background: #25d366;
  border-color: #25d366;
  color: #0f2a16 !important;
}

.s76-btn-wa::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%230f2a16' d='M16 3C9.4 3 4 8.3 4 14.9c0 2.6.8 5 2.3 7L4 29l7.3-2.3c1.9 1 4 1.6 6.2 1.6h.5c6.6 0 12-5.3 12-11.9S22.6 3 16 3zm0 21.8c-2 0-3.9-.5-5.6-1.5l-.4-.2-4.1 1.3 1.3-4-.3-.4c-1.2-1.8-1.9-3.9-1.9-6.1 0-5.5 4.5-9.9 10-9.9s10 4.4 10 9.9-4.5 9.9-10 9.9zm5.5-7.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.6c.2-.2.2-.3.3-.5.1-.2 0-.4 0-.6-.1-.2-.7-1.7-1-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.2-.6-.4z'/></svg>") center / contain no-repeat;
}

.s76-btn-wa:hover {
  background: #2ee07a;
}

.s76-btn-ghost:hover {
  background: rgba(200, 146, 86, 0.15);
}

/* Banner-Schaltflaechen (nativ): erste als WhatsApp-gruen, zweite als Umriss */
[id="662f91b856fafb995349a269"] a[href^="https://wa.me"] {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #0f2a16 !important;
}

[id="662f91b856fafb995349a269"] a[href^="https://wa.me"]:hover {
  background: #2ee07a !important;
}

/* --- Terminvergabe (Inhalt aus dem Instagram-Highlight des Studios) --------- */
.s76-termin h2 {
  margin: 0 0 28px;
}

.s76-termin .s76-intro {
  max-width: 46rem;
  margin: -8px 0 32px;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.88;
}

.s76-termin-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
}

.s76-termin h3 {
  font-family: "Noto Serif Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 16px;
}

.s76-termin ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s76-termin li {
  position: relative;
  padding: 0 0 12px 30px;
  line-height: 1.55;
}

.s76-termin li b {
  font-weight: 700;
}

.s76-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #c89256;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23c89256' stroke-width='2' d='M3.5 8.5l3 3 6-6'/></svg>") center / 11px no-repeat;
}

.s76-punkte li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c89256;
}

.s76-termin .s76-hinweis {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 3px solid #c89256;
  background: rgba(200, 146, 86, 0.08);
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
}

.s76-termin a {
  color: #d9b27c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.s76-termin a:hover {
  color: #fcf1e8;
}

@media (max-width: 767px) {
  .s76-termin-spalten {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Ablauf-Sektion: Abstand wie die Nachbarn */
[id="68a8d1a2f0c4b1e3d5a7c911"] > .container {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* --- Ausdruck ------------------------------------------------------------- */
@media print {
  .leaflet-container,
  .leaflet-control-container,
  .wa-fab,
  .s76-lb,
  #website-header ul,
  video {
    display: none !important;
  }

  body,
  section {
    background: #ffffff !important;
    color: #000000 !important;
  }

  section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }
}