:root{
  /* Palette */
  --sunrise: #FFCCBB;  /* warm highlight */
  --topaz:   #6EB5C0;  /* soft teal */
  --cerulean:#006C84;  /* primary */
  --icicle:  #E2E8E4;  /* background base */

  /* Base */
  --bg: #E2E8E4;
  --bg2: #f8fbf9;
  --card: rgba(255,255,255,.82);
  --card2: rgba(255,255,255,.70);
  --border: rgba(0,108,132,.16);

  --text: rgba(12, 36, 48, .94);
  --muted: rgba(12, 36, 48, .66);
  --muted2: rgba(12, 36, 48, .50);

  /* Brand */
  --accent:  #006C84; /* Cerulean */
  --accent2: #6EB5C0; /* Topaz */
  --accent3: #FFCCBB; /* Sunrise */

  /* Shadows */
  --shadow: 0 14px 44px rgba(0,108,132,.12);
  --shadowSm: 0 10px 26px rgba(0,108,132,.10);
  --shadowBtn: 0 12px 26px rgba(0,108,132,.18);
  --shadowBtnHover: 0 18px 42px rgba(0,108,132,.22);

  --radius: 18px;
  --radius2: 26px;

  --max: 1120px;
  --focus: 0 0 0 4px rgba(255,204,187,.40);

  --headerH: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(980px 520px at 14% -6%, rgba(255,204,187,.65), transparent 56%),
    radial-gradient(980px 520px at 92% 0%, rgba(110,181,192,.38), transparent 58%),
    radial-gradient(980px 520px at 72% 100%, rgba(0,108,132,.14), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height: 1.55;
}

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

a{
  color: var(--accent);
  text-decoration-color: rgba(0,108,132,.28);
  text-underline-offset: 3px;
}
a:hover{
  color: color-mix(in oklab, var(--accent) 82%, black);
  text-decoration-color: rgba(0,108,132,.45);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-color: transparent;
}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.skip-link{
  position:absolute; left:-999px; top:10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}
.skip-link:focus{ left: 14px; z-index: 9999; }

/* Header */
.header{
  position: sticky; top:0; z-index: 50;
  height: var(--headerH);
  display:flex;
  align-items:center;
  background: color-mix(in oklab, white 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.header.is-elevated{ border-bottom-color: var(--border); }

.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex; align-items:center; gap: 10px;
  text-decoration:none;
}
.brand__logo{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 6px;
  box-shadow: 0 10px 26px rgba(0,108,132,.10);
}
.brand__text strong{ display:block; font-size: 14px; letter-spacing: .2px; color: var(--text); }
.brand__text small{ display:block; font-size: 12px; color: var(--muted); }

/* Navigation (wärmer + edler) */
.nav{
  display:flex; align-items:center; gap: 10px;
}
.nav a{
  font-size: 15px;
  color: var(--muted);
  text-decoration:none;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .10s ease;
}
.nav a:hover{
  color: var(--text);
  background: color-mix(in oklab, var(--accent3) 40%, white);
  border-color: color-mix(in oklab, var(--accent3) 35%, var(--border));
}
.nav a.is-active{
  color: var(--text);
  background: linear-gradient(
  135deg,
  color-mix(in oklab, var(--accent3) 55%, white),
  color-mix(in oklab, var(--accent3) 30%, var(--accent2))
);
  border-color: color-mix(in oklab, var(--accent3) 40%, var(--border));
  box-shadow: 0 10px 24px rgba(255,204,187,.28);
}

.nav-toggle{
  display:none;
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,108,132,.10);
}
.nav-toggle__bar{
  display:block; width: 22px; height: 2px;
  background: var(--text);
  margin: 4px 0;
  border-radius: 99px;
}
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap;
}

@media (max-width: 920px){
  .nav-toggle{ display:block; }
  .nav{
    position: fixed;
    inset: var(--headerH) 16px auto 16px;
    display:none;
    flex-direction: column;
    padding: 12px;
    background: rgba(255,255,255,.90);
    border: 1px solid var(--border);
    border-radius: var(--radius2);
    box-shadow: var(--shadow);
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; border-radius: 14px; }
}

/* Hero */
.page-hero{ padding: 42px 0 18px; }
.hero{ padding: 42px 0 18px; }
.hero__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.hero__grid > *{ min-width: 0; }
@media (max-width: 920px){
  .hero__grid{ grid-template-columns: 1fr; }
}

.eyebrow{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  font-size: 12px;
  color: var(--muted);
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.74);
  border-radius: 999px;
}
.eyebrow .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent3), var(--accent2));
  box-shadow: 0 0 0 4px rgba(255,204,187,.28);
}

h1{
  margin: 14px 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.6px;
}
h2{
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.2px;
}
.lead{
  font-size: 16px;
  color: var(--muted);
  max-width: 62ch;
}

.hero__cta{ display:flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Buttons (edler) */
.btn{
  appearance:none;
  border: 1px solid color-mix(in oklab, var(--border) 80%, var(--accent3));
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 26px rgba(0,108,132,.10);
  transition: transform .10s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden;
}

/* subtle inner highlight */
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 140px at 20% 0%, rgba(255,204,187,.35), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.btn--small{ padding: 9px 12px; border-radius: 13px; }

.btn--primary{
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--accent3),
    color-mix(in oklab, var(--accent3) 70%, white)
  );
  color: rgba(12,36,48,.92);
  box-shadow: 0 14px 32px rgba(255,204,187,.45);
}
.btn--primary::before{
  background: radial-gradient(
    520px 140px at 20% 0%,
    rgba(255,255,255,.35),
    transparent 55%
  );
  opacity:.75;
}
.btn--primary:hover{
  filter: brightness(1.04) saturate(1.05);
  box-shadow: 0 20px 46px rgba(255,204,187,.55);
}


.btn--ghost{
  background: color-mix(in oklab, var(--accent3) 18%, white);
  border-color: color-mix(in oklab, var(--accent3) 30%, var(--border));
  color: var(--text);
}
.btn--ghost:hover{
  background: color-mix(in oklab, var(--accent3) 32%, white);
  box-shadow: 0 12px 28px rgba(255,204,187,.35);
}


.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadowBtnHover);
}
.btn--primary:hover{
  filter: saturate(1.05) contrast(1.02);
}

.btn:active{
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0,108,132,.16);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn:hover{ transform:none; }
}

/* Sections */
.section{ padding: 52px 0; }
.section--alt{
  background:
    linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent);
}
.section__header{ margin-bottom: 18px; }
.muted{ color: var(--muted); }
.small{ font-size: 12px; color: var(--muted2); }

.grid{ display:grid; gap: 14px; }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

/* Cards + Glass */
.card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,108,132,.14);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadowSm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow:hidden;
}
.card--soft{ background: rgba(255,255,255,.62); }

.card__title{ margin: 0 0 10px; font-size: 16px; }
.card__text{ margin: 0 0 10px; color: var(--muted); }
.card__text strong{ color: var(--text); }
.card__text:last-child{ margin-bottom:0; }

.list{ margin: 0; padding-left: 18px; color: var(--muted); }

/* Notice */
.notice{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--accent2) 30%, var(--border));
  background: color-mix(in oklab, var(--accent2) 16%, white);
  color: var(--muted);
  font-size: 13px;
}

.notice--important{
  border-color: rgba(160, 62, 35, .35);
  background: rgba(255, 204, 187, .42);
  color: var(--text);
}

.announcements{
  padding-top: 18px;
  padding-bottom: 18px;
}
.announcement{
  border-left: 5px solid var(--accent2);
}
.announcement--notice{
  border-left-color: var(--sunrise);
}
.announcement--important{
  border-left-color: #a03e23;
  background: color-mix(in oklab, var(--sunrise) 28%, white);
}

.course-exceptions{
  margin-top: 12px;
  color: var(--muted);
}
.course-exceptions summary{
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

/* Quote block */
.quote{
  margin: 18px 0 0;
  padding: 18px;
  border-radius: var(--radius2);
  border: 1px dashed rgba(0,108,132,.28);
  background: rgba(255,255,255,.72);
}
.quote p{ margin:0; font-size: 15px; color: var(--muted); }
.quote footer{ margin-top: 8px; color: var(--muted2); font-size: 12px; }

/* Media */
.media{
  border-radius: var(--radius2);
  overflow:hidden;
  border: 1px solid rgba(0,108,132,.14);
  background: white;
  box-shadow: var(--shadow);
}
.media img{ width:100%; height: 100%; object-fit: cover; }

/* Forms */
.form{ display:grid; gap: 10px; }
label{ display:grid; gap: 6px; font-size: 13px; color: var(--muted); }
input, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(0,108,132,.18);
  background: rgba(255,255,255,.86);
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  transition: box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}
input:focus, textarea:focus{
  border-color: transparent;
  box-shadow: var(--focus);
}
textarea{ resize: vertical; min-height: 110px; }
input:disabled, textarea:disabled, button:disabled{
  cursor: not-allowed;
  opacity: .62;
}
.check{ display:flex; gap: 10px; align-items:flex-start; }
.check input{ width: 18px; height: 18px; margin-top: 2px; }

.inquiry-form{ position: relative; }
.inquiry-context{ margin: 16px 0; padding: 12px 14px; display: grid; gap: 3px; border: 1px solid color-mix(in oklab, var(--accent2) 32%, var(--border)); border-radius: 14px; background: color-mix(in oklab, var(--icicle) 65%, white); }
.inquiry-context span{ color: var(--muted); font-size: 12px; font-weight: 700; }
.form-error-summary{ margin: 16px 0; padding: 16px 18px; border: 2px solid #9b321e; border-radius: 16px; background: rgba(255,204,187,.45); }
.form-error-summary h3{ margin: 0 0 8px; }
.form-error-summary ul{ margin: 0; padding-left: 20px; }
.field-error{ margin-top: -5px; color: #8a2a18; font-size: 12px; font-weight: 750; }
.inquiry-form [aria-invalid="true"]{ border-color: #9b321e; background: #fff5f1; }
.form-honeypot{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.contact-locations{ margin-top: 14px; }
.contact-locations summary{ color: var(--accent); cursor: pointer; font-weight: 800; }
.contact-locations .list{ margin-top: 12px; }
.inquiry-thanks{ max-width: 760px; margin: 0 auto; }

/* Accordion */
.accordion{ margin-top: 14px; }
.accordion__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,108,132,.18);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  font: inherit;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.accordion__btn:hover{
  background: color-mix(in oklab, var(--accent3) 22%, white);
  border-color: color-mix(in oklab, var(--accent3) 28%, rgba(0,108,132,.22));
  box-shadow: 0 10px 22px rgba(255,204,187,.18);
}
.accordion__panel{ padding: 12px 2px 0; }

/* Footer */
.footer{
  padding: 24px 0 40px;
  border-top: 1px solid rgba(0,108,132,.14);
  background: rgba(255,255,255,.58);
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; flex-wrap: wrap;
}
.footer__links{ display:flex; gap: 14px; align-items:center; }
.linklike{
  background:none; border:none; color: var(--muted);
  cursor:pointer; padding:0;
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover{ color: var(--text); }

.breadcrumbs{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.breadcrumbs a{ text-decoration: none; }

/* Glassmorphism */
.glass{
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,108,132,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow:hidden;
}

/* Warm glow edges */
.card::before, .glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(650px 240px at 20% 0%, rgba(255,204,187,.42), transparent 60%);
  opacity:.65;
}

/* Map blocks */
.map-card{
  padding: 0;
  overflow: hidden;
}

.map-card__top{
  padding: 18px;
  border-bottom: 1px solid rgba(0,108,132,.14);
}

.map-embed{
  width: 100%;
  height: 340px;
  border: 0;
  display:block;
}

.map-consent{
  padding: 18px;
  display:grid;
  gap: 10px;
  place-items: start;
}
.map-consent p{
  margin:0;
  color: var(--muted);
}

/* Big Map */
.mapbig{
  padding: 0;
  overflow: hidden;
}

.mapbig__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  border-bottom: 1px solid rgba(0,108,132,.14);
}

.mapbig__tabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.mapbig__consent{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mapbig__embed{
  width: 100%;
  height: 420px;
  border: 0;
  display:block;
}

.is-tab[aria-pressed="true"]{
  border-color: transparent;
  background: linear-gradient(
    135deg,
    var(--accent),
    color-mix(in oklab, var(--accent) 70%, var(--accent2))
  );
  color: white;
  box-shadow: 0 14px 34px rgba(0,108,132,.18);
}

/* Quote cards (für Yogi Bhajan Zitate) */
.quote-card{
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(0,108,132,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Geschützter Admin-/Authentifizierungsbereich (M3) */
.admin-body{
  min-height:100vh;
  background:
    radial-gradient(800px 460px at 10% 0%, rgba(255,204,187,.56), transparent 60%),
    linear-gradient(180deg, #e2e8e4, #f8fbf9);
}
.admin-header{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.86);
}
.admin-header__inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.admin-brand{font-weight:900;text-decoration:none;color:var(--text)}
.admin-brand span{display:block;font-size:12px;color:var(--muted);font-weight:700}
.admin-main{padding:44px 0 72px}
.admin-panel{
  width:min(560px, calc(100% - 40px));
  margin:0 auto;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.admin-panel--wide{width:min(920px, calc(100% - 40px))}
.admin-panel h1{font-size:clamp(30px, 4vw, 42px)}
.admin-form{margin-top:20px}
.admin-inline-form{margin-top:18px;display:flex;justify-content:center}
.admin-alert{
  margin:16px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,108,132,.28);
  background:rgba(110,181,192,.16);
}
.admin-alert--error{border-color:#a03e23;background:rgba(255,204,187,.5)}
.admin-alert--warning{border-color:#9a6a00;background:#fff3c9}
.admin-secondary-link{margin-top:18px;text-align:center}
.admin-setup-grid,.admin-security-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:22px 0;
}
.admin-qr{display:grid;place-items:center;background:#fff;border-radius:18px;padding:12px}
.admin-secret{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;letter-spacing:.08em}
.admin-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}
.admin-facts div{padding:14px;border:1px solid var(--border);border-radius:16px;background:#fff}
.admin-facts dt{font-size:12px;color:var(--muted)}
.admin-facts dd{margin:4px 0 0;font-weight:800}
.admin-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.admin-code-list{columns:2;gap:24px;padding-left:28px;margin:22px 0}
.admin-code-list li{break-inside:avoid;margin:0 0 10px}
.admin-code-list code{font-size:14px;font-weight:800}
@media (max-width:720px){
  .admin-header__inner{align-items:flex-start;padding-top:12px;padding-bottom:12px;flex-direction:column}
  .admin-setup-grid,.admin-security-grid,.admin-facts{grid-template-columns:1fr}
  .admin-code-list{columns:1}
}

.quote-card--alt{
  background: rgba(255,255,255,.72);
}

.quote-card__text{
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--text);
}

.quote-card__by{
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 800;
}

/* --- Nav: warmes, minimales Rosa-Glow --- */
.nav a{ position: relative; }
.nav a:hover{
  box-shadow: 0 10px 26px rgba(255,204,187,.30);
}
.nav a.is-active{
  box-shadow:
    0 10px 24px rgba(255,204,187,.30),
    0 1px 0 rgba(255,255,255,.65) inset;
}

/* --- Cards: sanftes "Aufatmen" --- */
.card{
  transition: transform .14s ease, box-shadow .20s ease, border-color .20s ease, background-color .20s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 46px rgba(0,108,132,.12),
    0 16px 38px rgba(255,204,187,.26);
  border-color: color-mix(in oklab, var(--accent3) 40%, rgba(0,108,132,.18));
}
@media (prefers-reduced-motion: reduce){
  .card:hover{ transform:none; }
}

/* --- Hero: Bild gleich hoch wie die Box daneben --- */
.hero__grid{ align-items: stretch; }
.hero__grid > .media{ height: 100%; }
.hero__grid > .media img{
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

/* Optional: Hero-Box bekommt gleiche Höhe ohne Inline-Style */
.hero-box{
  padding: 18px;
  border-radius: var(--radius2);
}

.legal-address{ margin: 0; color: var(--muted); font-style: normal; }
.legal-address strong{ color: var(--text); }
.legal-email{ overflow-wrap: anywhere; }

@media (max-width: 650px){
  .hero__grid > .media img{ min-height: 280px; }
}

/* --- Stack Layout: volle Breite, untereinander --- */
.stack{
  display: grid;
  gap: 14px;
}

/* --- Quote stärker hervorheben --- */
.quote-card--emph{
  background: linear-gradient(135deg, rgba(255,204,187,.48), rgba(255,255,255,.74));
  border-color: rgba(255,204,187,.70);
  box-shadow:
    0 18px 48px rgba(255,204,187,.36),
    0 12px 34px rgba(0,108,132,.08);
}
.quote-card--emph .quote-card__text{
  font-size: 22px;
  line-height: 1.2;
}
.quote-card--emph .quote-card__by{
  font-weight: 900;
}

.quote-card{
  display: grid;
  justify-items: center;
  text-align: center;
}
/* M6 protected draft preview */
.preview-banner {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px max(18px, calc((100% - 1120px) / 2));
  border-bottom: 2px solid #7a5700;
  background: #fff5cf;
  color: #4f3a00;
}

.preview-banner span { font-size: 14px; }

@media (max-width: 520px) {
  .preview-banner { justify-content: flex-start; }
}