/* صفحهٔ اصلی: تمام استایل‌های اختصاصی هیرو و چهار کارت خدمات.
   ------------------------------------------------------------------
   Zuvor ein Inline-<style>-Block in templates/home.html (rund 22 KB). Als
   eigene Datei wird derselbe Inhalt von Whitenoise mit Hash im Dateinamen
   und "Cache-Control: immutable" ausgeliefert - der Browser holt ihn genau
   EINMAL statt bei jedem Aufruf der Startseite erneut im HTML mitgeschickt
   zu bekommen. Gleiches Muster wie hz-services.css / hz-waiting.css /
   hz-payment.css.
   Wird ausschliesslich von templates/home.html eingebunden (Block
   "extra_head"), damit die anderen Seiten diese Regeln nicht laden. */

  :root {
    --hz-ink: #0b1f2e;
    --hz-ink-soft: #143047;
    --hz-cyan: #1ab8e8;
    --hz-cyan-deep: #0e8fbd;
    --hz-amber: #f5a623;
    --hz-amber-deep: #e08a00;
    --hz-mint: #e8f7fb;
    --hz-sand: #fff8eb;
    --hz-paper: #f7fbff;
  }

  .hz-home {
    overflow-x: clip;
    background:
      linear-gradient(180deg, #eef6fb 0%, #f7fbff 28%, #ffffff 70%, #ffffff 100%);
    padding: 1rem 1rem 0;
  }

  /* ── Hero-Leiste: mittelgroß mit animiertem Logo ── */
  .hz-hero {
    position: relative;
    width: min(1400px, 100%);
    margin: 0 auto 1.5rem;
    min-height: 0;
    display: grid;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 55% at 12% 20%, rgba(26, 184, 232, 0.26), transparent 55%),
      radial-gradient(ellipse 55% 45% at 88% 78%, rgba(245, 166, 35, 0.2), transparent 50%),
      linear-gradient(155deg, var(--hz-ink) 0%, #0f2a3d 48%, var(--hz-ink-soft) 100%);
    color: #fff;
    isolation: isolate;
    box-shadow: 0 12px 28px rgba(11, 31, 46, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hz-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
  }

  .hz-hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  }
  .hz-hero__orb--cyan {
    width: min(24vw, 180px);
    height: min(24vw, 180px);
    top: -30%;
    left: -3%;
    background: radial-gradient(circle, rgba(26, 184, 232, 0.38), transparent 68%);
  }
  .hz-hero__orb--amber {
    width: min(20vw, 150px);
    height: min(20vw, 150px);
    bottom: -35%;
    right: -2%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.32), transparent 68%);
  }

  .hz-hero__body {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .hz-hero__inner {
    display: flex;
    /* RTL: row würde das Bild rechts setzen — row-reverse: Bild links, Text rechts */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: clamp(0.55rem, 1.4vw, 0.9rem);
    width: min(1100px, calc(100% - 2rem));
    margin-inline: auto;
    /* Kompaktere Höhe; Inhalt vertikal mittig im Fenster */
    padding-block: clamp(0.55rem, 1.2vw, 0.85rem);
  }

  .hz-hero__copy {
    /* Kein flex:1 — Bild und Text bleiben als Gruppe in der Mitte */
    flex: 0 1 auto;
    text-align: right;
    min-width: 0;
  }

  .hz-hero__title {
    margin: 0;
    font-size: clamp(0.95rem, 1.7vw, 1.2rem);
    font-weight: 700;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.96);
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------
     Groessenverhaeltnisse der Hero-Grafik (Roboter) - massgeblich fuer das
     <picture>/srcset/sizes-Markup in templates/home.html. Diese Notiz steht
     bewusst HIER und nicht im Template: Django-Kommentare "{#...#}" duerfen
     nicht ueber mehrere Zeilen gehen (der Lexer arbeitet ohne DOTALL) und
     wuerden sonst als sichtbarer Rohtext auf der Seite landen. CSS-Dateien
     werden nie als Template gerendert, hier kann das nicht passieren.

     Reale Darstellungsgroesse = .hz-hero__visual x .hz-hero__mascot (68%):
       >1040px    : 104px x 0.68 = 71 CSS-Pixel
       961-1040px : 10vw  x 0.68 = 65-71 CSS-Pixel
       768-960px  :  84px x 0.68 = 57 CSS-Pixel
       <=767px    : display:none (siehe Mobile-Block weiter unten)

     Daraus folgen die drei Entscheidungen im Template:
     1. "sizes" nennt 65px statt der realen 71px. Bei 71px und
        Geraete-Pixelverhaeltnis 2 fordert der Browser 142px an - 6px mehr,
        als 25-sm.webp (136x136, 7 KB) hat. Er wuerde deshalb auf 25.webp
        (512x512, 112 KB) springen, ausgerechnet auf den verbreiteten
        hochaufloesenden Displays. Mit 65px bleibt der Bedarf bei 130px und
        damit bei 7 KB. Geliefert wird dann 1,91-fache statt 2,0-facher
        Pixeldichte - auf einer 71 Pixel grossen, rein dekorativen Grafik
        (alt="") nicht wahrnehmbar. "sizes" ist laut Spezifikation
        ausdruecklich ein Hinweis, kein exaktes Mass.
     2. Die <source media="(max-width: 767px)"> weist Mobilgeraeten fest die
        kleine Datei zu. Browser laden ein <img> auch dann herunter, wenn es
        per display:none unsichtbar ist - ohne diese Zeile wuerden
        Mobilnutzer 112 KB fuer eine Grafik laden, die sie nie sehen.
     3. Der Preload traegt media="(min-width: 768px)" aus demselben Grund -
        sonst wuerde er genau dieses unsichtbare Bild auch noch mit hoher
        Prioritaet anfordern.
     ------------------------------------------------------------------ */
  .hz-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: clamp(72px, 10vw, 104px);
    aspect-ratio: 1;
    /* Isoliert die Orbit-Layer vom Rest der Seite */
    contain: layout style;
    /* Roboter etwas nach links */
    transform: translateX(-0.65rem);
  }

  /* Leichte Orbit-Ringe: nur transform (Compositor), kein Filter/Blur */
  .hz-hero__ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 184, 232, 0.32);
    box-sizing: border-box;
    pointer-events: none;
    animation: hz-orbit 36s linear infinite;
  }
  .hz-hero__ring::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--hz-amber);
  }
  .hz-hero__ring--inner {
    width: 72%;
    height: 72%;
    border-color: rgba(245, 166, 35, 0.26);
    animation-duration: 26s;
    animation-direction: reverse;
  }
  .hz-hero__ring--inner::before {
    background: var(--hz-cyan);
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    top: -2px;
  }

  @keyframes hz-orbit {
    to { transform: rotate(360deg); }
  }

  /* Pause, wenn Hero außer Sicht / Tab verborgen (JS setzt Klasse) */
  .hz-hero.is-paused .hz-hero__ring {
    animation-play-state: paused;
  }

  .hz-hero__mascot {
    position: relative;
    z-index: 1;
    width: 68%;
    aspect-ratio: 1;
  }
  .hz-hero__mascot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ── Vier Optionen (erweitert — Hauptfokus der Startseite) ── */
  .hz-services {
    width: min(1400px, calc(100% - 0.25rem));
    margin: 0 auto;
    padding: 0.15rem 0 1.75rem;
  }

  .hz-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }

  .hz-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none !important;
    border-radius: 28px;
    overflow: hidden;
    min-height: 620px;
    isolation: isolate;
    border: 1px solid transparent;
    contain: layout paint style;
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  /* Von rechts (RTL): Grün / Rot / Blau / Gelb — Desktop + Tablet */
  /* 01 خلاصه — Grün */
  .hz-tile--summarize {
    background:
      radial-gradient(ellipse 75% 50% at 82% 100%, rgba(5, 150, 105, 0.28), transparent 60%),
      radial-gradient(ellipse 80% 55% at 20% 0%, rgba(52, 211, 153, 0.5), transparent 55%),
      linear-gradient(165deg, #ecfdf5 0%, #bbf7d0 45%, #6ee7b7 100%);
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.12);
  }
  /* 02 ترجمه — Rot */
  .hz-tile--translate {
    background:
      radial-gradient(ellipse 75% 50% at 82% 100%, rgba(225, 29, 72, 0.24), transparent 60%),
      radial-gradient(ellipse 80% 55% at 20% 0%, rgba(251, 113, 133, 0.48), transparent 55%),
      linear-gradient(165deg, #fff1f2 0%, #fecdd3 45%, #fda4af 100%);
    border-color: rgba(244, 63, 94, 0.25);
    box-shadow: 0 10px 28px rgba(244, 63, 94, 0.12);
  }
  /* 03 PDF — Blau */
  .hz-tile--pdf {
    background:
      radial-gradient(ellipse 75% 50% at 82% 100%, rgba(37, 99, 235, 0.28), transparent 60%),
      radial-gradient(ellipse 80% 55% at 20% 0%, rgba(96, 165, 250, 0.52), transparent 55%),
      linear-gradient(165deg, #eff6ff 0%, #bfdbfe 45%, #60a5fa 100%);
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.14);
  }
  /* 04 صوت — Gelb */
  .hz-tile--audio {
    background:
      radial-gradient(ellipse 75% 50% at 82% 100%, rgba(217, 119, 6, 0.26), transparent 60%),
      radial-gradient(ellipse 80% 55% at 20% 0%, rgba(251, 191, 36, 0.55), transparent 55%),
      linear-gradient(165deg, #fffbeb 0%, #fde68a 45%, #fbbf24 100%);
    border-color: rgba(245, 166, 35, 0.35);
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.14);
  }
  .hz-tile:hover {
    transform: translateY(-6px);
  }
  .hz-tile--summarize:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 18px 36px rgba(16, 185, 129, 0.22);
  }
  .hz-tile--translate:hover {
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 18px 36px rgba(244, 63, 94, 0.22);
  }
  .hz-tile--pdf:hover {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
  }
  .hz-tile--audio:hover {
    border-color: rgba(245, 166, 35, 0.55);
    box-shadow: 0 18px 36px rgba(245, 166, 35, 0.24);
  }

  .hz-tile__media {
    position: relative;
    height: 400px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .hz-tile__media::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .hz-tile__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    pointer-events: none;
    z-index: 1;
  }
  .hz-tile--summarize .hz-tile__media::before {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 34%),
      radial-gradient(circle at 50% 42%, rgba(16, 185, 129, 0.3) 0%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(110, 231, 183, 0.8) 0%, transparent 66%);
  }
  .hz-tile--translate .hz-tile__media::before {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 34%),
      radial-gradient(circle at 50% 42%, rgba(225, 29, 72, 0.26) 0%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(253, 164, 175, 0.78) 0%, transparent 66%);
  }
  .hz-tile--pdf .hz-tile__media::before {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 34%),
      radial-gradient(circle at 50% 42%, rgba(37, 99, 235, 0.3) 0%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(147, 197, 253, 0.8) 0%, transparent 66%);
  }
  .hz-tile--audio .hz-tile__media::before {
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.55) 0%, transparent 34%),
      radial-gradient(circle at 50% 42%, rgba(217, 119, 6, 0.28) 0%, transparent 48%),
      radial-gradient(circle at 50% 42%, rgba(253, 224, 71, 0.75) 0%, transparent 66%);
  }
  .hz-tile--summarize .hz-tile__media::after {
    background: linear-gradient(180deg, transparent 0%, #a7f3d0 100%);
  }
  .hz-tile--translate .hz-tile__media::after {
    background: linear-gradient(180deg, transparent 0%, #fecdd3 100%);
  }
  .hz-tile--pdf .hz-tile__media::after {
    background: linear-gradient(180deg, transparent 0%, #bfdbfe 100%);
  }
  .hz-tile--audio .hz-tile__media::after {
    background: linear-gradient(180deg, transparent 0%, #fde68a 100%);
  }

  .hz-tile__media img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    padding: 0.1rem 0.2rem 0;
    transform: scale(1.3);
    transform-origin: center;
    transition: transform 0.2s ease;
  }
  .hz-tile:hover .hz-tile__media img {
    transform: scale(1.36);
  }

  .hz-tile__num {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 2.15rem;
    height: 2.15rem;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 12px rgba(11, 31, 46, 0.15);
  }
  .hz-tile--summarize .hz-tile__num {
    background: linear-gradient(145deg, #34d399, #059669);
  }
  .hz-tile--translate .hz-tile__num {
    background: linear-gradient(145deg, #fb7185, #e11d48);
  }
  .hz-tile--pdf .hz-tile__num {
    background: linear-gradient(145deg, #60a5fa, #2563eb);
  }
  .hz-tile--audio .hz-tile__num {
    background: linear-gradient(145deg, #fbbf24, #d97706);
  }

  .hz-tile__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.35rem 1.4rem 1.55rem;
    flex: 1;
    background: rgba(255, 255, 255, 0.82);
  }
  .hz-tile--summarize .hz-tile__body {
    box-shadow: inset 0 3px 0 #10b981;
  }
  .hz-tile--translate .hz-tile__body {
    box-shadow: inset 0 3px 0 #f43f5e;
  }
  .hz-tile--pdf .hz-tile__body {
    box-shadow: inset 0 3px 0 #2563eb;
  }
  .hz-tile--audio .hz-tile__body {
    box-shadow: inset 0 3px 0 #f5a623;
  }

  .hz-tile__body h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--hz-ink);
  }
  .hz-tile__body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.85;
    color: #4a6578;
    flex: 1;
  }

  .hz-tile__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(11, 31, 46, 0.12);
  }
  .hz-tile--summarize .hz-tile__go { background: linear-gradient(135deg, #34d399, #059669); }
  .hz-tile--translate .hz-tile__go { background: linear-gradient(135deg, #fb7185, #e11d48); }
  .hz-tile--pdf .hz-tile__go { background: linear-gradient(135deg, #60a5fa, #2563eb); }
  .hz-tile--audio .hz-tile__go { background: linear-gradient(135deg, #fbbf24, #d97706); }
  .hz-tile__go svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  /* ── Intro-Überschrift oberhalb der Werkzeug-Beschreibungen ── */
  .hz-guide-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2rem;
  }
  .hz-guide-intro h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: var(--hz-ink);
  }
  .hz-guide-intro p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.9;
    color: #4a6578;
  }

  /* ── Beschreibungs-Boxen: rein zum Lesen, bewusst KEINE Hover-Animation
     (kein transform/transition/box-shadow-Wechsel bei :hover), da hier nichts
     anklickbar ist und Bewegungseffekte beim Überfahren mit der Maus nur
     unnötige Render-/Compositing-Arbeit verursachen würden. ── */
  .hz-guide-card {
    background: #fff;
  }

  /* ── Features ── */
  .hz-features {
    width: min(1400px, calc(100% - 0.25rem));
    margin: 0 auto 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 16px 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  }
  .hz-feature {
    flex: 1 1 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .hz-feature .icon-wrap {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hz-feature .icon-wrap svg { width: 14px; height: 14px; }
  .hz-feature .icon-purple { background: #ede9fe; color: #7c3aed; }
  .hz-feature .icon-blue { background: #dbeafe; color: #2563eb; }
  .hz-feature .icon-teal { background: #ccfbf1; color: #0d9488; }
  .hz-feature strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #0f172a;
  }
  .hz-feature span span {
    display: block;
    font-size: 9.5px;
    color: #64748b;
  }

  @media (max-width: 1100px) {
    .hz-grid { gap: 1.2rem; }
    .hz-tile { min-height: 580px; }
    .hz-tile__media { height: 360px; }
  }

  @media (max-width: 960px) {
    .hz-hero__inner {
      width: min(1100px, calc(100% - 1.5rem));
      padding-block: 0.65rem;
      gap: 0.55rem;
    }
    .hz-hero__title { font-size: clamp(0.9rem, 3vw, 1.1rem); }
    .hz-hero__visual { width: 84px; }
    .hz-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .hz-tile { min-height: 560px; }
    .hz-tile__media { height: 340px; }
    .hz-tile__body h3 { font-size: 1.25rem; }
  }

  /* ══════════════ Mobile-Redesign (native-app-artig): unter 768px, exakt die
     Schwelle, ab der auch die Bottom-Nav in base.html erscheint (Tailwind
     "md"). Ersetzt die alte, sehr hohe Bild-Karten-Ansicht komplett durch
     kompakte Listenzeilen — deutlich weniger Scroll, deutlich schneller zu
     rendern (kleinere Paint-Flächen, keine hohen content-visibility-Blöcke). ══ */
  @media (max-width: 767px) {
    /* Seite: leichter Marken-Verlauf (1 Layer, kein Blur/Filter) */
    .hz-home {
      padding: 0 0.75rem 0.5rem;
      background: linear-gradient(180deg, #e6f4fb 0%, #f4fafd 42%, #fff9f0 100%);
    }

    /* ── Hero: kompakte Karte — klarere Cyan/Amber-Akzente ── */
    .hz-hero {
      border-radius: 18px;
      margin: 0.75rem 0 1rem;
      background:
        linear-gradient(145deg, #0a2436 0%, #123a52 52%, #1a4558 100%);
      border-color: rgba(26, 184, 232, 0.22);
      box-shadow: 0 8px 20px rgba(11, 31, 46, 0.18);
    }
    /* Mesh/Orbs auf Mobile weglassen → weniger Overpaint */
    .hz-hero__mesh,
    .hz-hero__orb { display: none; }
    .hz-hero__inner {
      flex-direction: column;
      text-align: center;
      padding-block: 0.65rem;
      width: min(100%, calc(100% - 1.25rem));
    }
    .hz-hero__copy { text-align: center; width: 100%; }
    /* Roboter + rotierende Ringe entfallen auf Mobile komplett (kein Leerraum) */
    .hz-hero__visual { display: none; }
    .hz-hero__title {
      font-size: 0.9rem;
      line-height: 1.7;
      white-space: normal;
      color: #f0f9fc;
    }

    /* ── Dienste: kompakte Listenzeilen (Symbol + Titel + Pfeil) statt
       hoher Bildkarten — fühlt sich wie eine native App-Liste an. ── */
    .hz-services { padding: 0; }
    .hz-grid { display: flex; flex-direction: column; gap: 0.65rem; }

    .hz-tile {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      min-height: 0;
      border-radius: 18px;
      padding: 0.8rem 0.95rem;
      background: #fff;
      border: 1px solid #eef2f7;
      box-shadow: 0 2px 8px rgba(11, 31, 46, 0.06);
    }
    .hz-tile:hover { transform: none; }
    .hz-tile:active { transform: scale(0.98); }

    /* Kachel-Fenster von rechts: Grün / Rot / Blau / Gelb */
    .hz-tile--summarize {
      background: linear-gradient(105deg, #d1fae5 0%, #6ee7b7 55%, #34d399 100%);
      border-color: rgba(5, 150, 105, 0.4);
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22);
    }
    .hz-tile--translate {
      background: linear-gradient(105deg, #fecdd3 0%, #fda4af 55%, #fb7185 100%);
      border-color: rgba(225, 29, 72, 0.38);
      box-shadow: 0 4px 14px rgba(244, 63, 94, 0.22);
    }
    .hz-tile--pdf {
      background: linear-gradient(105deg, #dbeafe 0%, #93c5fd 55%, #60a5fa 100%);
      border-color: rgba(37, 99, 235, 0.4);
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
    }
    .hz-tile--audio {
      background: linear-gradient(105deg, #fef3c7 0%, #fcd34d 55%, #fbbf24 100%);
      border-color: rgba(217, 119, 6, 0.42);
      box-shadow: 0 4px 14px rgba(245, 166, 35, 0.24);
    }
    .hz-tile--summarize:hover { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.22); }
    .hz-tile--translate:hover { box-shadow: 0 4px 14px rgba(244, 63, 94, 0.22); }
    .hz-tile--pdf:hover { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22); }
    .hz-tile--audio:hover { box-shadow: 0 4px 14px rgba(245, 166, 35, 0.24); }

    .hz-tile__media {
      width: 6.75rem;
      height: 6.75rem;
      flex-shrink: 0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(11, 31, 46, 0.1);
    }
    /* Bildhintergrund: deutlich dunkler/kontrastreicher als das Fenster */
    .hz-tile--summarize .hz-tile__media::before {
      background: linear-gradient(145deg, #059669 0%, #047857 55%, #065f46 100%);
    }
    .hz-tile--translate .hz-tile__media::before {
      background: linear-gradient(145deg, #e11d48 0%, #be123c 55%, #9f1239 100%);
    }
    .hz-tile--pdf .hz-tile__media::before {
      background: linear-gradient(145deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
    }
    .hz-tile--audio .hz-tile__media::before {
      background: linear-gradient(145deg, #d97706 0%, #b45309 55%, #92400e 100%);
    }
    .hz-tile__media::after { content: none; }
    .hz-tile__num { display: none; }
    .hz-tile__media img {
      padding: 0.15rem;
      transform: none;
    }
    .hz-tile:hover .hz-tile__media img { transform: none; }

    .hz-tile__body {
      flex: 1;
      min-width: 0;
      gap: 0.1rem;
      padding: 0;
      background: transparent;
      box-shadow: none !important; /* überstimmt die farbigen Kategorie-Akzente (höhere Spezifität) */
    }
    .hz-tile__body h3 { font-size: 0.94rem; color: #0b1f2e; }
    .hz-tile__body p {
      font-size: 0.78rem;
      line-height: 1.5;
      color: #4d667a;
    }

    /* Farbiger „Los“-Button — etwas kräftigere Schatten in Kategorie-Farbe */
    .hz-tile__go {
      flex-shrink: 0;
      margin-top: 0;
      padding: 0;
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 999px;
    }
    .hz-tile--summarize .hz-tile__go { box-shadow: 0 3px 8px rgba(5, 150, 105, 0.35); }
    .hz-tile--translate .hz-tile__go { box-shadow: 0 3px 8px rgba(225, 29, 72, 0.32); }
    .hz-tile--pdf .hz-tile__go { box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35); }
    .hz-tile--audio .hz-tile__go { box-shadow: 0 3px 8px rgba(217, 119, 6, 0.35); }
    .hz-tile__go-label { display: none; }
    .hz-tile__go svg { width: 0.9rem; height: 0.9rem; }

    /* ── Intro-Überschrift: kompakter auf Mobile ── */
    .hz-guide-intro { margin: 0 auto 1.25rem; padding: 0 0.25rem; }
    .hz-guide-intro h2 { font-size: 1.1rem; }
    .hz-guide-intro p { font-size: 0.85rem; line-height: 1.75; }

    /* ── Features: Markenfarben statt generischem Lila/Blau ── */
    .hz-features {
      padding: 10px 8px;
      border-radius: 12px;
      gap: 8px;
      margin-bottom: 1rem;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border-color: #e2eef5;
      box-shadow: 0 4px 14px rgba(11, 31, 46, 0.05);
    }
    .hz-feature { flex: 1 1 45%; justify-content: flex-start; gap: 6px; }
    .hz-feature .icon-wrap { width: 26px; height: 26px; }
    .hz-feature .icon-wrap svg { width: 12px; height: 12px; }
    .hz-feature .icon-purple { background: #e0f7fa; color: #0e8fbd; }
    .hz-feature .icon-blue { background: #fff3e0; color: #e08a00; }
    .hz-feature .icon-teal { background: #e8f7fb; color: #1ab8e8; }
    .hz-feature strong { font-size: 10px; color: #0b1f2e; }
    .hz-feature span span { font-size: 8.5px; color: #5a7388; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hz-hero__ring { animation: none; }
    .hz-tile,
    .hz-tile__media img { transition: none; }
    .hz-tile:hover { transform: none; }
    .hz-tile:hover .hz-tile__media img { transform: scale(1.3); }
  }

  .hz-intro-box {
    background:
      radial-gradient(ellipse 70% 55% at 12% 20%, rgba(26, 184, 232, 0.26), transparent 55%),
      radial-gradient(ellipse 55% 45% at 88% 78%, rgba(245, 166, 35, 0.2), transparent 50%),
      linear-gradient(155deg, var(--hz-ink) 0%, #0f2a3d 48%, var(--hz-ink-soft) 100%);
    box-shadow: 0 12px 28px rgba(11, 31, 46, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  @media (max-width: 767px) {
    .hz-intro-box {
      background: linear-gradient(145deg, #0a2436 0%, #123a52 52%, #1a4558 100%);
      border-color: rgba(26, 184, 232, 0.22);
      box-shadow: 0 8px 20px rgba(11, 31, 46, 0.18);
    }
  }