/* Startseite */

.held { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 24px 0 56px; }
.held-sub { font-size: 1.12rem; max-width: 34em; margin: 18px 0 28px; }
.adresse {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 440px; padding: 14px 14px 14px 18px; margin-bottom: 16px;
  background: var(--flaeche); border: 1px solid var(--linie-hell); border-radius: 14px; box-shadow: var(--schatten);
}
.adresse-titel { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); font-weight: 650; }
.adresse-wert { font-size: 1.15rem; font-weight: 600; margin-top: 2px; }

.held-bild { position: relative; justify-self: center; width: min(360px, 80vw); aspect-ratio: 1; }
.platte.gross { width: 100%; --farbe: var(--pink); }
.platte.gross { background:
    radial-gradient(circle at 50% 50%, var(--bg) 0 3.2%, transparent 3.6%),
    radial-gradient(circle at 50% 50%, transparent 0 29%, rgba(0,0,0,.18) 29.5% 30%, transparent 30.5%),
    conic-gradient(from 0deg, #ffb347, #ff8a6b, #ff5e9c, #ff8a6b, #ffb347) center / 60% 60% no-repeat,
    repeating-radial-gradient(circle at 50% 50%, #151110 0 .9%, #221c18 1% 1.7%),
    #151110;
  border-radius: 50%;
}
.dreht-langsam { animation: dreh 9s linear infinite; }
.arm {
  position: absolute; right: -4%; top: 2%; width: 46%; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, #8d8178, #d8cfc6); transform-origin: 100% 50%; transform: rotate(-38deg);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.6);
}
.arm::before { content: ""; position: absolute; right: -10px; top: -9px; width: 26px; height: 26px; border-radius: 50%; background: #b7ada4; box-shadow: inset 0 0 0 5px #8d8178; }
.arm::after { content: ""; position: absolute; left: -6px; top: -5px; width: 22px; height: 18px; border-radius: 4px; background: #2a2420; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.kachel { text-decoration: none; overflow: hidden; transition: transform .2s ease, border-color .2s; display: flex; flex-direction: column; }
.kachel:hover { transform: translateY(-3px); border-color: var(--linie-hell); }
.kachel p { margin: 8px 0 16px; }
.kachel-bild { height: 170px; position: relative; overflow: hidden; border-bottom: 1px solid var(--linie); }
.karte-bild svg { width: 100%; height: 100%; display: block; }
.discs-bild { background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, var(--flaeche-2)), color-mix(in srgb, var(--pink) 22%, var(--flaeche-2))); }
.discs-bild .platte { position: absolute; width: 120px; top: 25px; }
.discs-bild .p1 { left: 12%; --farbe: #ffb347; }
.discs-bild .p2 { left: 36%; --farbe: #ff5e9c; top: 18px; width: 134px; z-index: 1; }
.discs-bild .p3 { left: 62%; --farbe: #8ab4ff; }
.kachel:hover .discs-bild .p2 { animation: dreh 2.2s linear infinite; }
.mehr { font-weight: 650; color: var(--amber); }

.anleitung h2 { margin-bottom: 14px; }
.schritte { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; color: var(--text-2); }
.schritte b { color: var(--text); }

@media (max-width: 820px) {
  .held { grid-template-columns: 1fr; padding-top: 4px; gap: 28px; }
  .held-bild { width: min(260px, 70vw); order: -1; }
  .kacheln { grid-template-columns: 1fr; }
}