:root{
  --stage:#12233c;
  --stage-glow:#1f3d63;
  --linen:#f8f5ee;
  --linen-alt:#efe6d9;
  --ribbon:#c31d33;
  --ribbon-dark:#8c0f22;
  --ink:#241b18;
  --ink-soft:#6b5a52;
  --brass:#b8923f;
  --rose:#f5e4e2;
  --blue:#2f5d8a;
  --blue-dark:#1e3f61;
  --blue-light:#dce8f3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:'Work Sans', sans-serif;
  color:var(--ink);
}

.hero{
  min-height:100vh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23ffffff' fill-opacity='0.09'%3E%3Crect x='18' y='10' width='14' height='14' rx='3' transform='rotate(45 25 17)'/%3E%3Crect x='63' y='55' width='14' height='14' rx='3' transform='rotate(45 70 62)'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Ccircle cx='25' cy='17' r='3'/%3E%3Ccircle cx='70' cy='62' r='3'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpolygon points='10,17 19,12 19,22'/%3E%3Cpolygon points='40,17 31,12 31,22'/%3E%3Cpolygon points='55,62 64,57 64,67'/%3E%3Cpolygon points='85,62 76,57 76,67'/%3E%3C/g%3E%3C/svg%3E") 0 0/90px 90px repeat,
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 34px),
    radial-gradient(ellipse at 50% -10%, var(--stage-glow), var(--stage) 65%);
  display:flex;
  justify-content:center;
  padding:56px 16px 72px;
}

.card{
  width:100%;
  max-width:440px;
  background:var(--linen);
  border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.04);
  overflow:hidden;
}

.trim{ display:block; width:100%; height:30px; }
.vine-stem{ stroke:var(--blue); stroke-width:2; }
.vine-flower{ fill:var(--blue); }
.vine-flower-alt{ fill:var(--blue-dark); }
.vine-dot{ fill:var(--brass); }
.vine-leaf{ fill:var(--ink); opacity:0.55; }
.trim.bottom{ transform:scaleY(-1); }

main{ position:relative; padding:40px 32px 36px; text-align:center; }
main::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid var(--brass);
  opacity:0.3;
  border-radius:3px;
  pointer-events:none;
}

.rosette{ width:104px; height:auto; margin:0 auto 20px; display:block; }
.rosette .petal-a{ fill:var(--ribbon); }
.rosette .petal-b{ fill:var(--ribbon-dark); }
.rosette .tail{ fill:var(--ribbon-dark); }
.rosette .knot-ring{ fill:none; stroke:var(--ribbon-dark); stroke-width:2; }
.rosette .knot-center{ fill:var(--brass); }

.eyebrow{
  margin:0 0 10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--brass);
}

h1{ margin:0 0 14px; }
.logo{
  display:block;
  width:320px;
  max-width:90%;
  height:auto;
  margin:0 auto;
  fill:var(--blue);
}

.instruments{
  font-family:'Bitter', serif;
  font-style:italic;
  font-weight:500;
  font-size:15.5px;
  color:var(--ink-soft);
  margin:0 0 30px;
}

.divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 30px;
}
.divider::before, .divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--brass);
  opacity:0.5;
}
.divider span{
  width:7px; height:7px;
  background:var(--blue);
  transform:rotate(45deg);
  flex-shrink:0;
}

.links{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:32px;
  text-align:left;
}

.link-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:var(--linen-alt);
  border-left:4px solid var(--blue);
  border-radius:2px 8px 8px 2px;
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  transition:background .15s ease, color .15s ease;
}
.link-btn:hover, .link-btn:focus-visible{
  background:var(--blue);
  color:var(--linen);
}
.link-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.link-btn svg{ flex-shrink:0; width:20px; height:20px; }
.link-btn .icon-fill{ fill:var(--blue); transition:fill .15s ease; }
.link-btn:hover .icon-fill, .link-btn:focus-visible .icon-fill{ fill:var(--linen); }

.contact{
  background:var(--blue-light);
  border-radius:8px;
  padding:22px 24px;
  text-align:center;
}
.contact h2{
  font-family:'Bitter', serif;
  font-weight:700;
  font-size:19px;
  margin:0 0 12px;
  color:var(--blue-dark);
  text-align:center;
}
.contact p{ margin:6px 0; font-size:15px; }
.contact a{ color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--brass); }
.contact a:hover{ color:var(--blue-dark); }
.contact .phone{ font-variant-numeric:tabular-nums; letter-spacing:0.5px; }

.section-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 24px;
}
.section-nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--blue-dark);
  text-decoration:none;
  background:var(--blue-light);
  border:1px solid rgba(47,93,138,0.25);
  border-radius:999px;
  padding:7px 14px;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.section-nav a::after{
  content:"\2192";
  font-size:12px;
  transition:transform .15s ease;
}
.section-nav a:hover, .section-nav a:focus-visible{
  background:var(--blue);
  color:var(--linen);
  border-color:var(--blue);
}
.section-nav a:hover::after, .section-nav a:focus-visible::after{ transform:translateX(2px); }
.section-nav a:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

footer{
  text-align:center;
  padding:20px 0 8px;
  font-size:12px;
  letter-spacing:0.5px;
  color:var(--ink-soft);
}

.content-section{ padding:72px 20px; }
.content-section .content-inner{
  max-width:640px;
  margin:0 auto;
  text-align:center;
}
.content-section h2{
  font-family:'Bitter', serif;
  font-weight:700;
  font-size:34px;
  margin:0 0 14px;
  color:var(--ink);
}
.content-section .divider{ max-width:200px; margin:0 auto 30px; }
.content-section p{
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  margin:0 0 16px;
}
.content-section p:last-child{ margin-bottom:0; }

.section-onas{ background:var(--linen); }
.section-kalendar{ background:var(--linen-alt); }

.events{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
}
.event{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--linen);
  border-left:4px solid var(--blue);
  border-radius:2px 8px 8px 2px;
  padding:14px 18px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.event-date{
  font-family:'Bitter', serif;
  font-weight:700;
  font-size:15px;
  color:var(--blue-dark);
  min-width:92px;
  flex-shrink:0;
}
.event-info{ display:flex; flex-direction:column; gap:2px; }
.event-name{ font-weight:600; font-size:15.5px; color:var(--ink); }
.event-place{ font-size:13.5px; color:var(--ink-soft); }

@media (max-width:480px){
  .event{ flex-direction:column; align-items:flex-start; gap:4px; }
}

@media (prefers-reduced-motion: reduce){
  .link-btn, .section-nav a, .section-nav a::after{ transition:none; }
}