@charset "utf-8";

/* ==========================================================================
   Milla Zahnfee — Impressum und Datenschutzerklärung

   Diese beiden Seiten folgen bewusst NICHT dem Rosé-Entwurf der Startseite,
   sondern dem Design der bisherigen Seite millazahnfee.de: Georgia auf hellem
   Verlauf, weisse Karte, Goldakzente. Werte 1:1 von dort übernommen.
   Ergänzt ist nur die Navigation unter dem Sternteiler und die Fusszeile,
   damit die Seiten Teil der Site sind und nicht mehr allein stehen.

   Die Startseite und die Fehlerseite nutzen `stil.css`.
   ========================================================================== */

:root {
  --pink: #e8a8c2;
  --pink-dunkel: #bd6f94;
  --rose: #f8e7ee;
  --creme: #fffaf7;
  --gold: #c9a45c;
  --text: #443943;
  --gedaempft: #776d75;
  --titel: #6e4258;
  --schatten: 0 20px 60px rgba(105, 67, 86, 0.12);
  --radius: 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(232, 168, 194, 0.20), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(201, 164, 92, 0.10), transparent 25%),
    linear-gradient(135deg, #fffaf7 0%, #fff4f8 48%, #fffaf7 100%);
  min-height: 100vh;
  line-height: 1.8;
}

a {
  color: var(--pink-dunkel);
  text-decoration: none;
  transition: color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--gold);
}

a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

img {
  max-width: 100%;
  display: block;
}

/* --- Schwebende Sternchen -------------------------------------------------- */

.sparkle {
  position: fixed;
  color: rgba(201, 164, 92, 0.45);
  font-size: 20px;
  pointer-events: none;
  z-index: 0;
  animation: schweben 6s ease-in-out infinite;
}

.sparkle.one   { top: 14%;    left: 8%; }
.sparkle.two   { top: 30%;    right: 8%;  animation-delay: 1.5s; }
.sparkle.three { bottom: 18%; left: 10%;  animation-delay: 3s; }
.sparkle.four  { bottom: 10%; right: 12%; animation-delay: 4s; }

@keyframes schweben {
  0%, 100% { transform: translateY(0) rotate(0deg);      opacity: 0.4; }
  50%      { transform: translateY(-12px) rotate(12deg); opacity: 0.8; }
}

/* --- Kopf ------------------------------------------------------------------ */

header {
  position: relative;
  z-index: 2;
  padding: 70px 20px 45px;
  text-align: center;
}

.logo-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff, var(--rose));
  border: 1px solid rgba(201, 164, 92, 0.45);
  box-shadow: 0 12px 35px rgba(105, 67, 86, 0.12);
  font-size: 34px;
  line-height: 1;
  text-decoration: none;
}

a.logo-mark:hover,
a.logo-mark:focus-visible {
  border-color: var(--gold);
}

.eyebrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 12px;
}

.eyebrow a {
  color: inherit;
}

h1 {
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--titel);
  margin-bottom: 16px;
}

.subtitle {
  font-size: 18px;
  color: var(--gedaempft);
  max-width: 650px;
  margin: auto;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 30px auto 0;
  color: var(--gold);
}

.ornament::before,
.ornament::after {
  content: "";
  width: 70px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

.ornament::after {
  background: linear-gradient(to left, transparent, var(--gold));
}

/* --- Navigation, unter dem Sternteiler ------------------------------------- */

.navi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px 40px;
  margin-top: 26px;
  font-size: 17px;
}

.navi a[aria-current="page"] {
  color: var(--gold);
}

/* --- Karte ----------------------------------------------------------------- */

main {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto 70px;
}

.card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 168, 194, 0.28);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: clamp(28px, 6vw, 65px);
  overflow: hidden;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--gold), var(--pink), transparent);
}

section {
  padding: 0 0 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid rgba(119, 109, 117, 0.14);
}

section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink-dunkel);
  font-weight: 700;
  margin-bottom: 5px;
}

h2 {
  font-size: 26px;
  font-weight: 400;
  color: var(--titel);
  margin-bottom: 18px;
}

p {
  margin-bottom: 14px;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: #5b3c4c;
}

.contact-box {
  background: linear-gradient(135deg, #fff7fa, #fffdfb);
  border: 1px solid rgba(232, 168, 194, 0.35);
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: 20px;
}

.contact-row {
  display: flex;
  gap: 12px;
  margin-bottom: 7px;
}

.contact-row:last-child {
  margin-bottom: 0;
}

.icon {
  width: 24px;
  flex-shrink: 0;
  color: var(--gold);
}

.isbn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 30px;
  background: var(--rose);
  color: #765064;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.rights {
  background: #fffaf2;
  border-left: 3px solid var(--gold);
  border-radius: 0 15px 15px 0;
  padding: 20px 22px;
  margin-top: 20px;
}

.authority {
  background: linear-gradient(135deg, #fff7fa, #fff);
  border-radius: 18px;
  padding: 22px;
}

.stand {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: var(--gedaempft);
}

/* --- Fusszeile ------------------------------------------------------------- */

footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px 45px;
  color: var(--gedaempft);
  font-size: 13px;
}

.footer-star {
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 12px;
}

.footer-brand {
  color: var(--titel);
  font-size: 17px;
  margin-bottom: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  margin-top: 14px;
}

.footer-links a[aria-current="page"] {
  color: var(--gold);
}

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 640px) {
  header      { padding-top: 45px; }
  h1          { font-size: 42px; }
  .subtitle   { font-size: 16px; }
  .navi       { gap: 8px 24px; font-size: 16px; }
  .card       { padding: 30px 22px; border-radius: 20px; }
  h2          { font-size: 23px; }
  .contact-row { align-items: flex-start; }
  .sparkle    { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
  *        { transition: none !important; }
}