/* ============================================================
   smartez – Website-Beispiele (Hero-Only)
   Eigene Markenwelt je Branche + Chatbot-Widget.
   Selbst gehostete Schriften, kein externes Nachladen (DSGVO).
   ============================================================ */

/* ---- Raster: Beispielseite (projects.html) ---- */
.sz-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

/* ---- Raster: Startseiten-Teaser (index.html), 3 Karten ---- */
.sz-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.sz-teaser-more {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
}

.sz-teaser-more a {
  color: var(--white, #fff);
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  padding: .78rem 1.5rem;
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.sz-teaser-more a:hover {
  border-color: #ffffff70;
  background: #ffffff0d;
  transform: translateY(-1px);
}

/* ============================================================
   Hero-Karte – Basis
   ============================================================ */
.sz-hero {
  --sz-radius: .8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--sz-radius);
  overflow: hidden;
  background: #0b0d0e;
  border: 1px solid #ffffff1f;
  box-shadow: 0 1.6rem 3.4rem #00000047;
  text-decoration: none;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

a.sz-hero { color: inherit; }

.sz-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 2.2rem 4.6rem #00000063;
  border-color: color-mix(in srgb, var(--sz-accent) 55%, #ffffff 0%);
}

/* ---- Browser-Leiste ---- */
.sz-hero__chrome {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .8rem;
  background: var(--sz-chrome-bg, #111416);
  border-bottom: 1px solid var(--sz-chrome-line, #ffffff14);
}

.sz-hero__chrome i {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--sz-dot, #ffffff33);
  flex: none;
}

.sz-hero__chrome b {
  margin-left: .5rem;
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  color: var(--sz-chrome-fg, #ffffff8c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Bühne (der eigentliche Hero) ---- */
.sz-hero__stage {
  position: relative;
  flex: 1;
  min-height: 19.5rem;
  padding: 1.5rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--sz-bg, linear-gradient(150deg, #101414, #060707));
  color: var(--sz-fg, #fff);
  text-transform: none; /* geerbtes Uppercase der Theme-Regeln neutralisieren */
}

/* dekorative Textur/Lichtquelle je Marke */
.sz-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sz-glow, radial-gradient(circle at 80% 14%, color-mix(in srgb, var(--sz-accent) 26%, transparent), transparent 60%));
  pointer-events: none;
  z-index: 0;
}

.sz-hero__stage > * { position: relative; z-index: 1; }

.sz-hero__eyebrow {
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--sz-eyebrow-spacing, .12em);
  color: var(--sz-eyebrow, var(--sz-accent));
  margin-bottom: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.sz-hero__eyebrow::before {
  content: "";
  width: .95rem;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.sz-hero__title {
  margin: 0 0 .7rem;
  max-width: 15ch;
  font-family: var(--sz-title-font, 'Neutral Sans'), Arial, sans-serif;
  font-weight: var(--sz-title-weight, 900);
  font-style: var(--sz-title-style, normal);
  font-size: var(--sz-title-size, clamp(1.7rem, 3vw, 2.35rem));
  line-height: var(--sz-title-lh, 1);
  letter-spacing: var(--sz-title-spacing, -0.01em);
  color: var(--sz-fg, #fff);
}

.sz-hero__sub {
  margin: 0 0 1.1rem;
  max-width: 22ch;
  text-transform: none; /* globale p-Uppercase-Regel des Themes aufheben */
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sz-sub, color-mix(in srgb, var(--sz-fg) 72%, transparent));
}

.sz-hero__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .68rem 1.05rem;
  border-radius: var(--sz-cta-radius, 999px);
  background: var(--sz-cta-bg, var(--sz-accent));
  color: var(--sz-cta-fg, #07110f);
  border: var(--sz-cta-border, 0 solid transparent);
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}

.sz-hero__cta::after { content: "→"; font-weight: 700; }

/* ============================================================
   Chatbot-Widget
   ============================================================ */
.sz-bot {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.sz-bot__bubble {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--sz-bot-bg, var(--sz-accent));
  color: var(--sz-bot-fg, #0b0d0e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  border: 0;
  cursor: pointer;
  position: relative;
  box-shadow: 0 .5rem 1.3rem #00000059;
}

.sz-bot__bubble::after {
  content: "";
  position: absolute;
  right: .12rem;
  top: .12rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid var(--sz-bot-ring, #0b0d0e);
}

/* Teaser-Sprechblase (Standard sichtbar, sitzt über dem Symbol) */
.sz-bot__teaser {
  max-width: 9.5rem;
  padding: .5rem .68rem;
  background: #ffffff;
  color: #1c1c1c;
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  border-radius: .8rem .8rem .2rem .8rem;
  box-shadow: 0 .4rem 1.1rem #0000004d;
  transition: opacity .3s ease, transform .3s ease;
}

/* Aufgeklappter Mini-Chat (Standard versteckt) */
.sz-bot__chat {
  order: -1;
  position: absolute;
  right: 0;
  bottom: 3.4rem;
  width: 12.5rem;
  border-radius: .7rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 .8rem 2rem #00000063;
  opacity: 0;
  transform: translateY(.5rem) scale(.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.sz-bot__chat-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .65rem;
  background: var(--sz-bot-bg, var(--sz-accent));
  color: var(--sz-bot-fg, #0b0d0e);
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .66rem;
  font-weight: 900;
}

.sz-bot__chat-head::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}

.sz-bot__chat-body {
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: #f4f4f2;
}

.sz-bot__msg {
  max-width: 85%;
  padding: .42rem .6rem;
  font-family: 'Neutral Sans', Arial, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: .7rem;
}

.sz-bot__msg.is-in {
  align-self: flex-start;
  background: #e6e6e3;
  color: #2a2a2a;
  border-bottom-left-radius: .2rem;
}

.sz-bot__msg.is-out {
  align-self: flex-end;
  background: var(--sz-bot-bg, var(--sz-accent));
  color: var(--sz-bot-fg, #0b0d0e);
  border-bottom-right-radius: .2rem;
}

/* Hover / Fokus: Teaser aus, Chat auf */
.sz-hero:hover .sz-bot__teaser,
.sz-hero:focus-within .sz-bot__teaser {
  opacity: 0;
  transform: translateY(.4rem);
  pointer-events: none;
}

.sz-hero:hover .sz-bot__chat,
.sz-hero:focus-within .sz-bot__chat {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ============================================================
   Einblend-Animation beim Laden (gestaffelt)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .sz-hero__eyebrow,
  .sz-hero__title,
  .sz-hero__sub,
  .sz-hero__cta,
  .sz-bot {
    animation: sz-rise .7s cubic-bezier(.2, .7, .2, 1) both;
  }
  .sz-hero__eyebrow { animation-delay: .05s; }
  .sz-hero__title   { animation-delay: .14s; }
  .sz-hero__sub     { animation-delay: .23s; }
  .sz-hero__cta     { animation-delay: .32s; }
  .sz-bot           { animation-delay: .5s; }
}

@keyframes sz-rise {
  from { opacity: 0; transform: translateY(.9rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Marken-Welten
   ============================================================ */

/* 1 · Malerbetrieb – Farbwerk Schulte, Köln (warmes Papier + Terracotta) */
.sz-hero--maler {
  --sz-accent: #c0490f;
  --sz-bg: linear-gradient(to top right, rgba(247,242,232,.92) 0%, rgba(247,242,232,.58) 45%, rgba(247,242,232,.14) 100%), url(../images/hero-maler.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 82% 12%, #c0490f24, transparent 55%);
  --sz-fg: #20180f;
  --sz-eyebrow: #b5430d;
  --sz-sub: #4a3c2c;
  --sz-title-weight: 900;
  --sz-title-size: clamp(1.85rem, 3vw, 2.5rem);
  --sz-cta-fg: #fff;
  --sz-cta-radius: .35rem;
  --sz-chrome-bg: #e9dfcd;
  --sz-chrome-fg: #8a7b60;
  --sz-chrome-line: #00000014;
  --sz-dot: #c3b494;
  --sz-bot-bg: #20180f;
  --sz-bot-fg: #f7f2e8;
  --sz-bot-ring: #ece1cf;
}

/* 2 · Autoaufbereitung – Glanzwerk Detailing, Stuttgart (Anthrazit + Champagner-Gold) */
.sz-hero--auto {
  --sz-accent: #d9b67a;
  --sz-bg: linear-gradient(to top right, rgba(12,14,17,.94) 0%, rgba(12,14,17,.66) 42%, rgba(12,14,17,.30) 78%, rgba(12,14,17,.12) 100%), url(../images/hero-auto.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 82% 10%, #d9b67a1f, transparent 55%);
  --sz-fg: #f4f6f8;
  --sz-eyebrow: #d9b67a;
  --sz-eyebrow-spacing: .2em;
  --sz-sub: #b9c1cb;
  --sz-title-weight: 700;
  --sz-title-spacing: -0.02em;
  --sz-cta-fg: #1a1206;
  --sz-chrome-bg: #14171b;
  --sz-chrome-fg: #9aa2ac;
  --sz-bot-fg: #1a1206;
  --sz-bot-ring: #12141a;
}

/* 3 · Restaurant – Luma Bistro & Bar, Hamburg (dunkel-warm, Serif, Gold) */
.sz-hero--restaurant {
  --sz-accent: #e7c48a;
  --sz-bg: linear-gradient(to top right, rgba(19,12,6,.94) 0%, rgba(19,12,6,.66) 42%, rgba(19,12,6,.30) 78%, rgba(19,12,6,.12) 100%), url(../images/hero-restaurant.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 78% 12%, #e7c48a1f, transparent 58%);
  --sz-fg: #fbf3e6;
  --sz-eyebrow: #e7c48a;
  --sz-eyebrow-spacing: .32em;
  --sz-sub: #cbb495;
  --sz-title-font: 'Sunday Masthead';
  --sz-title-weight: 400;
  --sz-title-size: clamp(2rem, 3.4vw, 2.9rem);
  --sz-title-lh: .96;
  --sz-title-spacing: 0;
  --sz-cta-bg: transparent;
  --sz-cta-fg: #e7c48a;
  --sz-cta-border: 1px solid #e7c48a;
  --sz-chrome-bg: #1c130b;
  --sz-chrome-fg: #b89b73;
  --sz-dot: #5a4630;
  --sz-bot-fg: #2a1c08;
  --sz-bot-ring: #130c06;
}

/* 4 · Fitnessstudio – Kraftwerk Studio, Leipzig (dunkel, Elektro-Cyan, laut) */
.sz-hero--fitness {
  --sz-accent: #34d2ff;
  --sz-bg: linear-gradient(to top right, rgba(5,7,10,.95) 0%, rgba(5,7,10,.70) 42%, rgba(5,7,10,.32) 78%, rgba(5,7,10,.12) 100%), url(../images/hero-fitness.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 16% 0%, #34d2ff24, transparent 52%);
  --sz-fg: #eefaff;
  --sz-eyebrow: #34d2ff;
  --sz-eyebrow-spacing: .18em;
  --sz-sub: #9fb6c6;
  --sz-title-weight: 900;
  --sz-title-size: clamp(1.95rem, 3.3vw, 2.7rem);
  --sz-title-spacing: -0.03em;
  --sz-cta-fg: #04121a;
  --sz-chrome-bg: #0a1220;
  --sz-chrome-fg: #7f96a8;
  --sz-bot-fg: #04121a;
  --sz-bot-ring: #05070a;
}
/* Kräftige Handwerks-/Service-Marken: Headline in Versalien.
   Restaurant & Friseur bleiben (über .sz-hero__stage) in gemischter Serif-Schreibweise. */
.sz-hero--maler .sz-hero__title,
.sz-hero--auto .sz-hero__title,
.sz-hero--fitness .sz-hero__title,
.sz-hero--dach .sz-hero__title { text-transform: uppercase; }

/* 5 · Dachdecker – Höhenwerk Bedachungen, Dortmund (Schiefer-Blau, Ziegel-Orange) */
.sz-hero--dach {
  --sz-accent: #ff7a33;
  --sz-bg: linear-gradient(to top right, rgba(13,20,29,.95) 0%, rgba(13,20,29,.72) 45%, rgba(13,20,29,.34) 80%, rgba(13,20,29,.12) 100%), url(../images/hero-dachdecker.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 80% 12%, #ff7a331f, transparent 55%);
  --sz-fg: #eef2f6;
  --sz-eyebrow: #ff8a4a;
  --sz-sub: #a7b4c1;
  --sz-title-weight: 900;
  --sz-title-size: clamp(1.9rem, 3.1vw, 2.55rem);
  --sz-cta-fg: #1a0d04;
  --sz-cta-radius: .35rem;
  --sz-chrome-bg: #16202b;
  --sz-chrome-fg: #90a0af;
  --sz-bot-fg: #1a0d04;
  --sz-bot-ring: #0d141d;
}

/* 6 · Friseur – Studio Nordlicht, München (hell/editorial, Rosé, dunkler Button) */
.sz-hero--friseur {
  --sz-accent: #b06a72;
  --sz-bg: linear-gradient(to top right, rgba(250,247,245,.90) 0%, rgba(250,247,245,.50) 45%, rgba(250,247,245,.10) 100%), url(../images/hero-friseur.webp) center/cover no-repeat;
  --sz-glow: radial-gradient(circle at 80% 14%, #b06a721f, transparent 55%);
  --sz-fg: #241a1c;
  --sz-eyebrow: #a85f68;
  --sz-eyebrow-spacing: .26em;
  --sz-sub: #6a5658;
  --sz-title-font: 'Sunday Masthead';
  --sz-title-weight: 400;
  --sz-title-size: clamp(1.9rem, 3.1vw, 2.6rem);
  --sz-title-lh: 1;
  --sz-title-spacing: .015em;
  --sz-cta-bg: #1c1416;
  --sz-cta-fg: #faf7f5;
  --sz-cta-radius: 999px;
  --sz-chrome-bg: #efe4e2;
  --sz-chrome-fg: #977f82;
  --sz-chrome-line: #00000012;
  --sz-dot: #cbb3b5;
  --sz-bot-bg: #1c1416;
  --sz-bot-fg: #faf7f5;
  --sz-bot-ring: #efe4e2;
}

/* ============================================================
   Kompakt-Variante für den Startseiten-Teaser
   ============================================================ */
.sz-hero--compact .sz-hero__stage { min-height: 13.5rem; padding: 1.15rem 3.6rem 1.15rem 1.1rem; }
.sz-hero--compact .sz-hero__title { font-size: clamp(1.35rem, 2vw, 1.7rem); max-width: 13ch; }
.sz-hero--compact .sz-hero__sub { display: none; }
.sz-hero--compact .sz-hero__cta { padding: .55rem .85rem; font-size: .68rem; }
.sz-hero--compact .sz-bot__bubble { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
/* Kompakt-Karten (Startseite) sind zu klein für die Teaser-Sprechblase –
   nur das Chat-Symbol zeigen; der rechte Bühnen-Innenabstand (oben) hält den
   Text vom Symbol fern, sodass nichts die Überschrift überdeckt. */
.sz-hero--compact .sz-bot__teaser { display: none; }
/* CTA darf auf schmalen Kompakt-Karten umbrechen, statt unter das Symbol zu laufen */
.sz-hero--compact .sz-hero__cta { white-space: normal; }

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 991px) {
  .sz-teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Beispielseite ab Tablet einspaltig: breite Karten → Teaser & Text kollidieren nicht */
  .sz-example-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  .sz-example-grid { grid-template-columns: 1fr; }
  .sz-teaser-grid { grid-template-columns: 1fr; }
  .sz-hero__stage { min-height: 17rem; }
  /* Auf schmalen Handy-Karten ist die Teaser-Sprechblase zu breit und würde die
     Unterzeile überdecken → nur das Chat-Symbol zeigen. Antippen öffnet den Chat
     via :focus-within (siehe oben). */
  .sz-bot__teaser { display: none; }
}

/* ============================================================
   Leistungen-Parallax (Startseite)
   Scroll-gekoppelter Versatz der 4 Leistungs-Kacheln – gleicher
   Effekt wie "So arbeiten wir" auf about.html. Bewegung setzt
   js/smartez-services-parallax.js per translateY (±25%).
   ============================================================ */
.smartez-services-benefit { will-change: transform; }
/* Vertikaler Puffer, damit die um bis zu ±25% verschobenen Kacheln
   nicht über den Rahmen der Vorschau-Box hinausragen. */
.smartez-services-benefit-grid {
  padding-top: 3rem;
  padding-bottom: 3rem;
}