/* Gemeinsame Darstellung für Startseite und sämtliche Unterseiten. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1524;
  --bg-soft: #142238;
  --panel: rgba(22,35,55,.95);
  --panel-solid: #162337;
  --text: #f1f5fc;
  --muted: #c2cee0;
  --line: #354861;
  --accent: #76b2ff;
  --accent-dark: #9cc8ff;
  --accent-soft: #233e60;
  --success-soft: #153c38;
  --shadow: 0 18px 55px rgba(0,0,0,.22);
}
.theme-bar { position: relative; z-index: 3; max-width: 1180px; margin: 16px auto 0; display: flex; justify-content: flex-end; }
.theme-switch { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-solid); box-shadow: var(--shadow); }
.theme-switch[hidden] { display: none; }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 18px; border: 0; border-radius: 999px; font: inherit; font-size: 18px; font-weight: 750; color: var(--muted); background: transparent; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: #205eb6; color: #fff; }
.theme-switch button:hover { box-shadow: inset 0 0 0 2px var(--accent-dark); }
.theme-switch button:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.theme-switch button span { font-size: 24px; line-height: 1; }
@keyframes logo-slow-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: no-preference) {
  .logo, .home .logo, .home .logo:hover { animation: logo-slow-pulse 6s ease-in-out infinite; transform-origin: center; }
}
[data-theme="dark"] body { background: radial-gradient(ellipse at 8% 0%, #182e4c 0, transparent 40%), linear-gradient(180deg, #101c2e, var(--bg) 45%, #101b2b); }
[data-theme="dark"] body::before { opacity: .10; }
[data-theme="dark"] .navlinks, [data-theme="dark"] .tag, [data-theme="dark"] .secondary, [data-theme="dark"] .steps > div, [data-theme="dark"] footer { background: var(--panel); border-color: var(--line); color: var(--text); }
[data-theme="dark"] .cards article, [data-theme="dark"] .price-grid > div, [data-theme="dark"] .contact-box, [data-theme="dark"] .legal-card { border-color: var(--line); }
[data-theme="dark"] .trust, [data-theme="dark"] .invitation-card { background: linear-gradient(135deg, #182e48, #163330); border-color: var(--line); }
[data-theme="dark"] .contact-item { background: linear-gradient(180deg, #1d3049, #18283e); border-color: var(--line); }
[data-theme="dark"] .contact-label { color: var(--text); }
[data-theme="dark"] .footer-links a { color: var(--muted); }
[data-theme="dark"] .primary, [data-theme="dark"] .steps span { background: linear-gradient(135deg, #76b2ff, #a8cfff); color: #0c203d; }
[data-theme="dark"] .primary:hover { background: #b8d8ff; }
.logo, .footer-logo, [data-theme="light"] .logo, [data-theme="light"] .footer-logo, [data-theme="dark"] .logo, [data-theme="dark"] .footer-logo { filter: none; -webkit-filter: none; }
[data-theme="dark"] .about-photo { border-color: var(--line); }
[data-theme="dark"] .theme-switch button[aria-pressed="true"] { background: #a8cfff; color: #0c203d; }
@media (max-width: 600px) { .theme-bar { justify-content: center; margin-top: 20px; } }
@media print { .theme-bar { display: none; } }

/* Deutliches Schaukeln, mit Platz um die Sprechwolke. */
.meet-cloud { transform-origin: 35% 65%; }
@keyframes meet-cloud-swing {
  0%, 100% { transform: translate(-5px, 1px) rotate(-9deg) scale(1); }
  50% { transform: translate(7px, -5px) rotate(10deg) scale(1.12); }
}
@media (prefers-reduced-motion: no-preference) {
  .meet-cloud { animation: meet-cloud-swing 5.6s ease-in-out infinite; }
}


/* Bei Tastaturfokus bleibt der Link erreichbar. */
.meet-cloud:focus-visible { animation-play-state: paused; }


/* In jeder Bildschirmgrösse 15 Prozent kleiner. */
.meet-cloud { width: 204px; height: 144.5px; }
@media (max-width: 600px) {
  .meet-cloud { width: 144.5px; height: 102.357px; }
}
@media (max-width: 360px) {
  .meet-cloud { width: 136px; height: 96.3305px; }
}

/* Ruhende Logos: jeweils 30 Prozent grösser als zuvor. */
.logo, .home .logo, .logo:hover, .home .logo:hover, .footer-logo {
  animation: none !important; transform: none !important;
}
.logo { width: 197.6px; height: 197.6px; }
.home .logo { width: 197.6px; height: 197.6px; }
.footer-logo { width: 106.6px; height: 106.6px; }
.logo-greeting { min-height: 206px; }
.meet-cloud { left: 178px; }
.subpage .portrait-crop { position: relative; overflow: hidden; width: 300px; height: auto; aspect-ratio: 1; }
.portrait-crop .portrait-image { position: absolute; width: 250%; max-width: none; height: auto; left: -70%; top: -18.333%; }
@media (max-width: 600px) {
  .logo { width: 145.6px; height: 145.6px; }
  .home .logo { width: 145.6px; height: 145.6px; }
  .logo-greeting { min-height: 157px; }
  .meet-cloud { left: 128.7px; }
}
@media (max-width: 360px) { .meet-cloud { left: 120px; } }

html[data-cloud-clicked="true"] .meet-cloud { display: none; }

/* Derselbe Platz für Logo und Einladung auf allen Seiten. */
@media (min-width: 601px) and (max-width: 1000px) {
  .subpage .navlinks { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .subpage .nav { gap: 12px; }
}
@media (max-width: 600px) {
  .subpage .nav { flex-wrap: wrap; }
  .subpage .navlinks { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-left: auto; }
}

/* Darstellungswahl direkt vor den Navigationslinks. */
.nav-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; min-width: 0; flex-wrap: wrap; }
.nav-controls .theme-switch { flex-shrink: 0; }
.nav-controls .navlinks { margin-left: 0; }
@media (max-width: 1000px) {
  .nav-controls { gap: 10px; }
}
@media (max-width: 600px) {
  .nav-controls { width: 100%; justify-content: flex-end; }
  .home .nav-controls .navlinks, .subpage .nav-controls .navlinks { margin-left: 0; }
}
@media print { .theme-switch { display: none; } }

/* Gleiche Hover-Rückmeldung wie bei der Darstellungswahl. */
.nav-controls .navlinks a:hover {
  box-shadow: inset 0 0 0 2px var(--accent-dark);
  background: transparent;
  color: inherit;
  transform: none;
}

/* Sofortige Rückmeldung, identisch zum Hell-/Dunkel-Schalter. */
.nav-controls .navlinks a { transition: none; }
/* Footer-Links dezent, aber eindeutig als Links erkennbar. */
.footer-links a, [data-theme="dark"] .footer-links a {
  color: var(--accent-dark);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--accent-dark);
}
.footer-links a:hover, [data-theme="dark"] .footer-links a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}