:root {
      --bg-top: #f2ede5;  /* helleres Papier */
      --bg-bot: #e5dfcf;  /* Logo-Hintergrundton */
    }

    html, body { height: 100%; }
    body {
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e5dfcf;
      font-family: Georgia, serif;
    }

    .logo-container {
      position: relative;
      display: inline-block;
      outline: none;            /* für :focus-within */
    }

    .logo-container img {
      max-width: min(80vw, 900px);
      height: auto;
      display: block;           /* entfernt Baseline-Lücke */
      cursor: help;             /* signalisiert Tooltip */
    }

    /* Tooltip */
    .tooltip {
      position: absolute;
      bottom: 110%;             /* oberhalb des Logos */
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
      max-width: clamp(220px, 30vw, 420px);
      padding: 10px 12px;
      background: #333;
      color: #fff;
      text-align: center;
      border-radius: 8px;
      line-height: 1.35;
      font-size: 14px;
      box-shadow: 0 6px 20px rgba(0,0,0,.15);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
      z-index: 10;              /* über dem Bild */
      pointer-events: none;     /* verhindert Flackern */
    }

    .tooltip::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #333;
    }

    /* Anzeigen per Hover oder Tastaturfokus */
    .logo-container:hover .tooltip,
    .logo-container:focus-within .tooltip {
      opacity: 1;
      visibility: visible;
    }
	
/****** Footer *******/
footer {
  position: fixed;
  bottom: 10px;
  right: 10px;
  font-size: 14px;
}

.impressum-link {
  color: #333;
  text-decoration: none;
}

.impressum-link:hover {
  text-decoration: underline;
}
	
/**** Content ****/
/****** Impressum-Content *******/
.content {
  max-width: 800px;
  background: var(--bg-top);
  padding: 2em 3em;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  color: #333;
  line-height: 1.6;
}

.content h1 {
  font-size: 1.8em;
  margin-top: 0;
}

.content h2 {
  margin-top: 1.4em;
  font-size: 1.2em;
}

/* Logo-Ästhetik für Typo */
.logo-font {
  font-family: "Cinzel", Georgia, serif; /* ersetzt die Logoschriftart stilistisch passend */
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Startkarte zentrieren wie das frühere Bild */
.brand-card {
  max-width: min(900px, 86vw);
  margin: clamp(2rem, 8vh, 6rem) auto;
  text-align: center;
  padding-block: clamp(2.5rem, 8vh, 5rem);
}

/* Headline im Logo-Stil */
.brand-title {
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #111;
}

/* Unterzeilen */
.brand-subtitle {
  margin: 0.25rem 0 0;
  font-family: Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: 0.02em;
  color: #222;
}

.brand-subsubtitle {
  margin: 0.25rem 0 0;
  font-family: Georgia, serif;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #333;
  opacity: 0.9;
}


/* Gerahmte Fläche à la Logo */
.salon-frame {
  position: relative;
  background: var(--bg-top);
  padding: clamp(2rem, 6vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  border: 8px solid #111;                         /* äußerer Rahmen */
  box-shadow: inset 0 0 0 6px #111;               /* innerer Rahmen */
  border-radius: 6px;
}

/* kleine Eck-Quadrate unten links/rechts, wie im Logo */
.salon-frame::before,
.salon-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 6px solid #111;
  bottom: 16px;
  background: transparent;
}
.salon-frame::before { left: 16px; }
.salon-frame::after  { right: 16px; }

/* Datums-Typografie */
.date-text {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 6vw, 4.2rem);
  line-height: 1.1;
  color: #111;
}

.page-container {
  max-width: 900px;
  margin: 4rem auto;
  padding: 2rem;
  background: var(--bg-top, #f2ede5);
  border: 2px solid #333;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-family: Georgia, serif;
}

.headline {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.rules-box ol {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.6;
}

.rules-box li {
  margin-bottom: 1rem;
}

.footer-link {
  margin-top: 2rem;
  text-align: center;
}

.footer-link a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.footer-link a:hover {
  text-decoration: underline;
}