/**
 * mod_gadowatch — Uhr Gadebusch & Gadoro
 * Gesamtansicht (.gadowatch--full) und Kompakt-Plakette (.gadowatch--compact).
 * Alles unter .gadowatch gescopet, damit Template-Styles nicht hineinwirken.
 */

/* ---------- Basis & Paletten ---------- */

.gadowatch,
.gadowatch *,
.gadowatch *::before,
.gadowatch *::after { box-sizing: border-box; }

.gadowatch {
  --gw-serif: "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif;
  --gw-ink: #33261e;
  --gw-ink-soft: #6d5647;
  --gw-rose: #a4714f;
  --gw-rose-soft: #c39b7e;
  --gw-hairline: rgba(164, 113, 79, 0.35);
  --gw-hairline-faint: rgba(164, 113, 79, 0.2);
  --gw-cream: #f0e3da;
  font-family: var(--gw-serif);
  color: var(--gw-ink);
}

.gadowatch--gadoro {
  --gw-ink: #2c2922;
  --gw-ink-soft: #6e6552;
  --gw-rose: #9a7b26;
  --gw-rose-soft: #bfa254;
  --gw-hairline: rgba(154, 123, 38, 0.35);
  --gw-hairline-faint: rgba(154, 123, 38, 0.2);
  --gw-cream: #f2eee3;
}

.gadowatch p { margin: 0; padding: 0; }
.gadowatch img { border: 0; }

/* ---------- Uhr-Ebenen (Vollansicht & Kompakt identisch) ----------
   Bezugsraum ist das 2048×2048-Uhrenfoto; alle Zeiger in % davon. */

.gw-dial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.gw-moon-disc {
  position: absolute;
  left: 43.9062%;
  top: 47.1143%;
  width: 12.168%;
  height: auto;
  max-width: none;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.gw-hand {
  position: absolute;
  height: auto;
  max-width: none;
  will-change: transform;
  pointer-events: none;
}

.gw-hand--hour {
  left: 48.119%;
  top: 29.6193%;
  width: 3.7592%;
  transform-origin: 49.3878% 78.6325%;
  filter: drop-shadow(0 0.35cqw 0.45cqw rgba(70, 35, 20, 0.32));
}

.gw-hand--minute {
  left: 48.2609%;
  top: 23.4089%;
  width: 3.4523%;
  transform-origin: 49.6667% 83.9778%;
  filter: drop-shadow(0 0.5cqw 0.55cqw rgba(70, 35, 20, 0.28));
}

.gw-hand--second {
  left: 48.7902%;
  top: 22.9566%;
  width: 2.4047%;
  transform-origin: 49.2958% 77.5601%;
  filter: drop-shadow(0 0.75cqw 0.65cqw rgba(70, 35, 20, 0.24));
}

.gw-hand--date {
  left: 49.1194%;
  top: 46.2881%;
  width: 1.7276%;
  transform-origin: 49.359% 88.2006%;
  filter: drop-shadow(0 0.2cqw 0.3cqw rgba(70, 35, 20, 0.35));
}

/* ============================================================
   Gesamtansicht
   ============================================================ */

.gadowatch--full { container: gadowatch / inline-size; }

.gw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
  align-items: center;
  align-content: center;
  gap: clamp(0.5rem, 3cqw, 3.5rem);
  width: 100%;
}

.gw-watch-col {
  display: flex;
  justify-content: center;
}

.gw-watch {
  position: relative;
  width: min(100%, 88vmin);
  aspect-ratio: 1;
  container-type: inline-size;
  user-select: none;
}

/* Weicher Bodenschatten unter der Uhr (Foto endet bei ~96,7 % Höhe) */
.gw-watch::before {
  content: "";
  position: absolute;
  left: 27%;
  right: 27%;
  bottom: 0.6%;
  height: 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side,
    rgba(72, 42, 28, 0.30),
    rgba(72, 42, 28, 0.12) 55%,
    transparent 78%);
  filter: blur(0.5cqw);
}

/* ---------- Infotafel ---------- */

.gw-panel {
  text-align: center;
  padding: 1rem clamp(0.5rem, 2cqw, 1.5rem) 1.5rem;
}

.gw-digital {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: clamp(2.6rem, 5.2cqw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--gw-ink);
}

.gw-dt-hm {
  display: inline-block;
  min-width: 5ch;
  text-align: right;
}

.gw-dt-s {
  display: inline-block;
  min-width: 2.6ch;
  text-align: left;
  font-size: 0.42em;
  color: var(--gw-rose);
  letter-spacing: 0.06em;
  padding-left: 0.55em;
}

.gw-dateline {
  margin-top: 0.5em;
  font-size: clamp(0.95rem, 1.6cqw, 1.15rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--gw-ink-soft);
}

.gw-facts {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.4rem, 3cqw, 2.8rem);
  margin-top: clamp(1.4rem, 3.5cqh, 2.4rem);
}

.gw-fact { min-width: 130px; }

.gw-fact + .gw-fact {
  border-left: 1px solid var(--gw-hairline-faint);
  padding-left: clamp(1.4rem, 3cqw, 2.8rem);
}

.gw-fact-label {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gw-rose);
}

.gw-medallion {
  width: clamp(74px, 8.5cqw, 92px);
  height: clamp(74px, 8.5cqw, 92px);
  margin: 0.9rem auto 0.8rem;
  border-radius: 50%;
}

.gw-medallion--week {
  border: 1px solid var(--gw-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.9rem, 3.4cqw, 2.5rem);
  line-height: 1;
  color: var(--gw-ink);
  background: radial-gradient(circle at 38% 30%, #fff 0%, var(--gw-cream) 100%);
  box-shadow: inset 0 1px 4px rgba(70, 35, 20, 0.12);
}

.gw-medallion--moon {
  box-shadow:
    inset 0 0 0 1px var(--gw-hairline),
    inset 0 2px 8px rgba(4, 28, 64, 0.5);
  overflow: hidden;
}

.gw-medallion--moon svg { display: block; }

.gw-fact-detail {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gw-ink-soft);
}

.gw-moon-illum {
  font-size: 0.72rem;
  color: var(--gw-rose-soft);
  letter-spacing: 0.08em;
}

.gw-sun-row {
  display: flex;
  justify-content: center;
  gap: clamp(1.6rem, 3.5cqw, 3.2rem);
  margin-top: clamp(1.3rem, 3cqh, 2rem);
  padding-top: clamp(1.1rem, 2.5cqh, 1.6rem);
  border-top: 1px solid var(--gw-hairline-faint);
  width: fit-content;
  margin-inline: auto;
}

.gw-sun-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.gw-sun-ico {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--gw-rose-soft);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.gw-sun-label {
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gw-rose);
}

.gw-sun-time {
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--gw-ink);
  margin-top: 0.15em;
}

.gw-sync-line {
  margin-top: clamp(1.1rem, 2.5cqh, 1.7rem);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gw-rose-soft);
}

.gw-sync-line.gw-is-synced { color: var(--gw-ink-soft); }

/* Schmale Modulpositionen/Spalten: einspaltig */
@container gadowatch (max-width: 900px) {
  .gw-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .gw-watch { width: min(100%, 92vmin, 560px); margin-inline: auto; }

  .gw-panel { padding-top: 0; }
}

/* ============================================================
   Kompakt-Plakette · 150 × 70 px
   ============================================================ */

.gadowatch--compact {
  display: inline-flex;
  align-items: stretch;
  width: 150px;
  height: 70px;
  background: #fff;
  border: 1px solid var(--gw-hairline);
  line-height: normal;
  text-decoration: none;
  user-select: none;
  overflow: hidden;
  vertical-align: middle;
}

a.gadowatch--compact { transition: border-color 0.25s ease; }

a.gadowatch--compact:hover,
a.gadowatch--compact:focus-visible {
  border-color: var(--gw-rose);
  text-decoration: none;
}

.gwc-dial {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  flex: none;
  overflow: hidden;
}

/* Uhrenfoto so skaliert und verschoben, dass das Zifferblatt die
   68px-Zelle füllt. Zifferblattmitte im Foto: x 49,976 % / y 43,735 % */
.gwc-watch {
  --gwc-w: 160px;
  position: absolute;
  display: block;
  width: var(--gwc-w);
  height: var(--gwc-w);
  left: calc(34px - var(--gwc-w) * 0.49976);
  top:  calc(34px - var(--gwc-w) * 0.43735);
  container-type: inline-size;
}

.gwc-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--gw-hairline-faint);
  padding: 0 4px;
  min-width: 0;
}

.gwc-over {
  font-size: 6px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gw-rose);
  white-space: nowrap;
}

.gwc-name {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.2;
  color: var(--gw-ink);
  margin-top: 3px;
  white-space: nowrap;
}

.gwc-rule {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 46px;
  margin-top: 5px;
  color: var(--gw-rose-soft);
}

.gwc-rule span {
  flex: 1;
  height: 1px;
  background: var(--gw-hairline-faint);
}

.gwc-rule i {
  font-style: normal;
  font-size: 5px;
  line-height: 1;
  transform: translateY(-0.5px);
}