/* =====================================================================
   UEBER MICH — "Fuer wen meine Arbeit geeignet ist"
   ---------------------------------------------------------------------
   Drei gleich grosse Karten (373x475px) nebeneinander, jede mit
   Symbol, Titel und Absatz im selben Aufbau. Der Blick hatte keinen
   Einstieg, und der Block las sich als Reihe statt als Uebersicht.

   Jetzt eine breite Leitkachel ueber beide Spalten, darunter das Paar.
   Die breite Kachel nutzt ihre Breite zweispaltig - Symbol und Titel
   links, Text rechts; ein Absatz ueber 1150px waere sonst gezogen.

   Dazu je Kachel ein grosses ruhiges Hintergrundsymbol, eine Ziffer
   ohne fuehrende Null und eine umlaufende Goldkante. Die Karten hatten
   bisher nur einen 2px-Goldstrich oben, der sich beim Ueberfahren
   verstaerkte - auf Touchgeraeten passierte also nichts.

   Zur Spezifitaet: die Kartenstile stehen im <style>-Block im Body,
   also NACH dieser Datei. Wo hier !important steht, ist es deshalb
   noetig.
   ===================================================================== */

@property --zg-edge {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

html body .zg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px !important;
}
html body .zg-tile { min-width: 0; position: relative; isolation: isolate; overflow: hidden; }
html body .zg-tile--1 { grid-column: 1 / -1; }

/* Die breite Leitkachel zweispaltig fuellen */
html body .zg-tile--1 {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto;
    column-gap: 40px;
    align-items: center;
}
html body .zg-tile--1 > .zg-icon  { grid-column: 1; grid-row: 1; margin-bottom: 22px !important; }
html body .zg-tile--1 > .zg-title { grid-column: 1; grid-row: 2; margin-bottom: 0 !important; }
html body .zg-tile--1 > .zg-text  { grid-column: 2; grid-row: 1 / -1; }

/* Umlaufende Goldkante. Ohne @property waere --zg-edge nicht
   interpolierbar und die Kante staende still. */
html body .zg-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: .45;
    background: conic-gradient(from var(--zg-edge),
        transparent 0 62%, rgba(229, 184, 59, .8) 78%, rgba(202, 138, 4, .22) 89%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: zgEdgeOrbit 14s linear infinite;
    transition: opacity .4s ease;
}
html body .zg-tile--2::after { animation-duration: 17s; }
html body .zg-tile--3::after { animation-duration: 20s; }
@keyframes zgEdgeOrbit { to { --zg-edge: 360deg; } }
html body .zg-tile:hover::after { opacity: .9; }

/* Grosses ruhiges Hintergrundsymbol */
html body .zg-ghost {
    position: absolute;
    right: -18px; bottom: -22px;
    width: 132px; height: 132px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
html body .zg-ghost svg {
    width: 100%; height: 100%;
    fill: none;
    stroke: #E5B83B;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .zg-tile:hover .zg-ghost { transform: scale(1.14) rotate(-7deg); opacity: .13; }
html body .zg-tile--1 .zg-ghost { width: 184px; height: 184px; }

/* Ziffer ohne fuehrende Null */
html body .zg-no {
    position: absolute;
    top: 30px; right: 34px;
    z-index: 3;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(229, 184, 59, .28);
    transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
html body .zg-tile:hover .zg-no { color: rgba(229, 184, 59, .6); transform: translateY(-2px); }

/* Inhalt bleibt ueber dem Hintergrundsymbol */
html body .zg-tile > .zg-icon,
html body .zg-tile > .zg-title,
html body .zg-tile > .zg-text { position: relative; z-index: 2; }

/* Ruhiges Dauerleuchten der Symbolkachel, versetzt - der Block lebt
   auch ohne Maus. */
/* Die Seite blendet ueber .zg-animate auf #zg-trigger ein, nicht ueber
   eine zg-show-Klasse - der Puls haengt sich an denselben Schalter. */
html body .zg-animate .zg-tile .zg-icon { animation: zgIcoPulse 7s ease-in-out infinite; }
html body .zg-animate .zg-tile--2 .zg-icon { animation-delay: 1.1s; }
html body .zg-animate .zg-tile--3 .zg-icon { animation-delay: 2.2s; }
@keyframes zgIcoPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); }
    45%      { box-shadow: 0 0 26px rgba(202, 138, 4, .32); }
}

@media (max-width: 900px) {
    html body .zg-grid { grid-template-columns: minmax(0, 1fr); }
    html body .zg-tile--1 { display: block; }
    html body .zg-tile--1 > .zg-title { margin-bottom: 20px !important; }
}
@media (max-width: 768px) {
    html body .zg-ghost,
    html body .zg-tile--1 .zg-ghost { width: 104px; height: 104px; right: -14px; bottom: -16px; }
    html body .zg-no { top: 20px; right: 22px; font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    html body .zg-tile::after { animation: none !important; opacity: .35; }
    html body .zg-animate .zg-tile .zg-icon { animation: none !important; }
}