/* Kompass Glass: separate Gestaltungsebene, ohne externe Abhängigkeiten. */
:root {
  --glass-surface: rgba(255, 255, 255, .68);
  --glass-edge: rgba(255, 255, 255, .9);
  --glass-shadow: 0 18px 48px rgba(24, 66, 68, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
}
body {
  background:
    radial-gradient(ellipse at 92% 7%, rgba(111, 186, 177, .30), transparent 34%),
    radial-gradient(ellipse at 5% 24%, rgba(176, 200, 137, .33), transparent 33%),
    radial-gradient(ellipse at 86% 64%, rgba(146, 196, 188, .27), transparent 31%),
    #f3f7f2;
}
.site-header {
  background: rgba(247, 251, 246, .76);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 8px 30px rgba(21, 62, 69, .055), inset 0 1px 0 #ffffffb3;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
.service-card, .contact-card, .partners-section, .photo-note,
.family-points article, .approach-list details {
  background: linear-gradient(135deg, rgba(255,255,255,.83), rgba(255,255,255,.51));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
.service-card, .contact-card, .partners-section { border-radius: 25px; }
.services-grid {
  background: radial-gradient(ellipse at 58% 46%, #91bebd57, transparent 65%),
    radial-gradient(ellipse at 96% 92%, #bdce9170, transparent 48%);
  border-radius: 28px;
}
.featured {
  background: linear-gradient(145deg, rgba(38,87,91,.94), rgba(16,54,61,.92));
  border-color: rgba(233,255,251,.38);
  box-shadow: 0 22px 50px #153e4524, inset 0 1px 0 #ffffff59;
}
.featured > p { color: #e0eae5; }
.transition-card { background: linear-gradient(120deg, #ffffffb8, #e6efdc9c); }
.service-symbol, .note-icon, .round-link {
  background: linear-gradient(135deg, #ffffffc9, #d6e7d78c);
  border: 1px solid #ffffffc4;
  box-shadow: inset 0 1px 1px #fff, 0 5px 14px #254d4210;
}
.featured .service-symbol {
  background: linear-gradient(135deg, #ffffff29, #ffffff0d);
  border-color: #ffffff47;
  box-shadow: inset 0 1px 0 #ffffff3b;
}
.hero-visual figure {
  padding: 9px;
  background: linear-gradient(135deg, #ffffffb8, #ffffff47);
  border: 1px solid #ffffffe6;
  box-shadow: 0 25px 60px #153e451c, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hero-photo { border-radius: 110px 17px 17px 17px; }
.photo-note {
  background: linear-gradient(120deg, rgba(255,255,255,.83), rgba(244,251,242,.65));
  border-radius: 19px;
  box-shadow: 0 15px 38px #10323926, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.button {
  background: linear-gradient(135deg, #396b6d, #153e45);
  border-color: #ffffff52;
  box-shadow: inset 0 1px 0 #ffffff47, 0 7px 18px #153e4521;
}
.button:hover { background: linear-gradient(135deg, #427977, #205259); }
.principle-strip {
  background: #ffffff66;
  border-color: #ffffffcf;
  box-shadow: inset 0 1px 0 #ffffffcc;
}
.school-section {
  background: linear-gradient(115deg, #e2eedb9c, #dceee969);
  border-block: 1px solid #ffffffa8;
}
.family-points article { padding: 25px; border-radius: 22px; margin-bottom: 17px; }
.about-section {
  background: radial-gradient(ellipse at 93% 8%, #628b7466, transparent 60%),
    radial-gradient(ellipse at 8% 100%, #5c9da345, transparent 55%), #103239;
}
.brand-panel {
  padding: 12px;
  background: #ffffff29;
  border: 1px solid #ffffff66;
  box-shadow: 0 22px 45px #061e2a38, inset 0 1px 0 #ffffff70;
}
.brand-panel img { border-radius: 12px; mix-blend-mode: normal; }
.team-note {
  background: linear-gradient(135deg, #ffffff18, #ffffff09);
  border: 1px solid #ffffff38;
  border-radius: 20px;
  padding: 25px;
  box-shadow: inset 0 1px 0 #ffffff21;
}
.approach-list { border-top: 0; }
.approach-list details { border-radius: 18px; margin-bottom: 13px; padding-inline: 23px; }
.approach-list details[open] { background: linear-gradient(135deg, #ffffffe8, #ffffffa8); }
.contact-section {
  background: radial-gradient(ellipse at 78% 40%, #a5cdbca6, transparent 57%),
    linear-gradient(120deg, #dde9c9, #dfede7);
}
.contact-card { background: linear-gradient(135deg, #ffffffc7, #ffffff7d); }
@media (hover: hover) {
  .service-card { transition: box-shadow .2s ease, border-color .2s ease; }
  .service-card:hover { box-shadow: 0 24px 52px #153e451f, inset 0 1px 0 #fff; border-color: #fff; }
}
@media (max-width: 900px) {
  .js .site-header nav {
    background: rgba(243, 249, 241, .97);
    border: 1px solid #ffffffdc;
    box-shadow: 0 18px 30px #153e451c;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
  .js .menu-toggle { background: #ffffff80; border-color: #ffffffed; box-shadow: inset 0 1px 0 #fff; }
  .hero-photo { border-radius: 80px 17px 17px 17px; }
}
@media (max-width: 640px) {
  .hero-visual figure { padding: 6px; }
  .hero-photo { border-radius: 59px 13px 13px 13px; }
  .family-points article { padding: 22px 19px; gap: 14px; }
  .approach-list details { padding-inline: 19px; }
  .team-note { padding: 22px; }
}
/* Deckendere Flächen als Fallback: Lesbarkeit auch ohne Unschärfe. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .photo-note { background: #f7faf3; }
  .service-card:not(.featured), .contact-card, .partners-section,
  .family-points article, .approach-list details { background: #f9fcf6; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .photo-note, .service-card:not(.featured), .contact-card,
  .partners-section, .family-points article, .approach-list details { background: #f9fcf6; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  body, .school-section, .contact-section { background: white; }
  .site-header, .service-card, .contact-card, .partners-section, .photo-note,
  .family-points article, .approach-list details { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}