html, body { height: 100%; margin: 0; }

    /* Hintergrund */
    body {
      background-image: url('../images/bg-main.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-color: #0e1114; /* Fallback */
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* Vollflächige Bühne */
    .hotspot-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* Basis für unsichtbare Hotspots */
    .hotspot, .overlay-link {
      position: absolute;
      background: transparent;
      border: none;
      color: transparent;
      cursor: pointer;
      outline: none;
      padding: 0;
    }

    /* Etwas Sichtbarkeit bei Hover/Fokus (nur als Hinweis) */
    .hotspot:hover, .hotspot:focus-visible,
    .overlay-link:hover, .overlay-link:focus-visible {
      outline: 2px dashed rgba(0,128,255,0.65);
      background: rgba(0,128,255,0.08);
      border-radius: 8px;
    }

    /* 🔵 Kreis-Hotspot: bleibt rund dank aspect-ratio */
    .hotspot.circle {
      /* Positionierung: Mittelpunkt bei 70%/25% der Bühne */
      left: 70%;
      top: 25%;
      transform: translate(-50%, -50%); /* positioniert relativ zum Mittelpunkt */

      /* Größe: relative Breite, Höhe folgt automatisch */
      width: 10%;            /* Prozent bezogen auf Breite der Bühne */
      aspect-ratio: 1 / 1;   /* Quadrat → garantiert rund mit border-radius */

      border-radius: 50%;    /* macht aus dem Quadrat einen Kreis */
    }

    /* Alternative Größenbasis (falls volle Viewport-Breite gewünscht):
       .hotspot.circle { width: 20vw; }  // behält Rundheit unabhängig von Bühnenverhältnis
    */

    /* Rechteck-Hotspot (bleibt als Referenz) */
    .hotspot.rect {
      left: 10%;
      top: 15%;
      width: 25%;
      height: 30%;
    }

    /* Link-Hotspot (rechteckig) */
    .overlay-link.link {
      left: 40%;
      top: 62%;
      width: 32%;
      height: 26%;
    }

    /* Optional: bessere Tastaturfokus-Sichtbarkeit */
    .hotspot:focus-visible, .overlay-link:focus-visible {
      outline: 2px solid #2b6cb0;
    }
	
	/* Tooltip: erscheint über dem Hotspot bei Hover/Fokus */
    .tooltip {
      position: absolute;
      left: 50%;
      top: -10px;                    /* über dem Hotspot */
      transform: translate(-50%, -100%);
      background: rgba(20, 20, 20, 0.92);
      color: #fff;
      font-size: 12px;
      line-height: 1.3;
      padding: 6px 8px;
      border-radius: 6px;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(0,0,0,0.25);
      opacity: 0;                    /* standardmäßig versteckt */
      pointer-events: none;
      transition: opacity .15s ease, transform .15s ease;
    }
    .tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(20, 20, 20, 0.92); /* kleiner Pfeil */
    }
    .hotspot:hover .tooltip,
    .hotspot:focus-visible .tooltip {
      opacity: 1;
      transform: translate(-50%, -110%);
    }

	.zentrum {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/*
		Button mit Uhr
	*/

    :root {
      --btn-bg: rgba(20, 20, 20, 0.75);
      --btn-text: #fff;
      --btn-border: rgba(255, 255, 255, 0.28);
      --btn-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }

    .container {
      padding: 24px;
      max-width: 900px;
      margin: 0 auto;
    }

    /* Uhr-Button rechts unten */
    .clock-btn {
      position: fixed;
      right: 16px;
      bottom: 16px;

      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 10px 14px;
      background: var(--btn-bg);
      color: var(--btn-text);
      border: 1px solid var(--btn-border);
      border-radius: 12px;
      box-shadow: var(--btn-shadow);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      font-size: 14px;
      line-height: 1.2;
      cursor: pointer;
      text-decoration: none;

      /* Für Touch-Ziele angenehme Größe */
      min-height: 40px;
    }

    .clock-btn:hover {
      background: rgba(20, 80, 20, 0.85);
    }

    .clock-icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      border: 2px solid #fff;
      border-radius: 50%;
      position: relative;
      opacity: 0.9;
    }
    .clock-icon::before, .clock-icon::after {
      content: "";
      position: absolute;
      background: #fff;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    /* Stundenzeiger */
    .clock-icon::before {
      top: 24%;
      width: 2px;
      height: 5px;
    }
    /* Minutenzeiger */
    .clock-icon::after {
      top: 12%;
      width: 2px;
      height: 7px;
      transform: translateX(-50%) rotate(20deg);
      transform-origin: 50% 100%;
    }

    .clock-time {
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.2px;
    }

    /* (optional) „kopiert“-Hinweis */
    .copied {
      position: fixed;
      right: 16px;
      bottom: 64px;
      background: rgba(0,0,0,0.75);
      color: #fff;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .copied.show {
      opacity: 1;
      transform: translateY(0);
    }
 	
	/* SSL certificate */
	.footer {
		position: fixed;      /* Fixiert an der Bildschirmposition */
		bottom: 15px;         /* Abstand vom unteren Rand */
		left: 15px;           /* Start am linken Rand */
		width: 100%;          /* Über gesamte Breite */
	/*	background-color: #333;
		color: white;
		text-align: left;
		padding: 10px 0;
		box-shadow: 0 -2px 5px rgba(0,0,0,0.3);		
	*/
	}
	
	.credits {
		position: fixed;       /* Keeps it in place even when scrolling */
		bottom: 15px;          /* Distance from the bottom */
		left: 40%;           /* Distance from the left */
		font-size: 14px;       /* Adjust text size */
		color: black;           /* Text color */
		font-family: Arial, sans-serif;
	}