/* ==========================================================================
   Nez Rouge Solothurn/Oberaargau — Design System
   ========================================================================== */
:root{
  --midnight:#122036;
  --midnight-2:#1a2c48;
  --snow:#F8F5EF;
  --paper:#EFEAE0;
  --ink:#1a2130;
  --rot:#C43A2F;
  --rot-deep:#9E2C22;
  --ice:#AFC4D6;
  --ice-dim:#7d94a9;
  --line: rgba(255,255,255,0.12);
  --line-dark: rgba(18,32,54,0.12);
  --radius: 18px;
  --maxw: 30rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--snow);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
table{border-collapse:collapse; width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;}
@media(min-width:640px){:root{--maxw:38rem}}
@media(min-width:1000px){:root{--maxw:56rem}}

/* ---------- header / nav ---------- */
header{
  position:sticky; top:0; z-index:80;
  background:rgba(18,32,54,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.headrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.75rem 1.25rem; gap:0.75rem;
  max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:0.55rem; color:var(--snow); text-decoration:none; flex:none;}
.nose{
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff6c56, var(--rot) 60%, var(--rot-deep));
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.06);
  flex:none;
}
.brand strong{font-family:'Fraunces',serif; font-size:0.98rem; line-height:1.05; display:block; font-weight:600;}
.brand span{display:block; font-size:0.68rem; color:var(--ice-dim); letter-spacing:0.02em;}

.nav-desktop{display:none; gap:1.5rem; list-style:none; margin:0; padding:0; flex:1; justify-content:center;}
.nav-desktop a{
  text-decoration:none; color:var(--ice); font-size:0.9rem; font-weight:500;
  padding:0.3rem 0; border-bottom:2px solid transparent;
}
.nav-desktop a.active, .nav-desktop a:hover{color:#fff; border-bottom-color:var(--rot);}

.call-chip{
  display:flex; align-items:center; gap:0.4rem;
  background:var(--rot); color:#fff; text-decoration:none;
  padding:0.5rem 0.85rem; border-radius:999px;
  font-weight:700; font-size:0.85rem; white-space:nowrap; flex:none;
}
.call-chip svg{width:15px;height:15px;flex:none}
.call-chip.text-only{display:none}

.menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:#fff; flex:none; cursor:pointer;
}
.menu-btn svg{width:18px;height:18px}

.mobile-drawer{
  position:fixed; inset:0; z-index:90;
  background:var(--midnight);
  transform:translateX(100%);
  transition:transform 0.28s ease;
  display:flex; flex-direction:column;
  padding:1.1rem 1.25rem 2rem;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-top{display:flex; align-items:center; justify-content:space-between;}
.drawer-nav{list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-direction:column;}
.drawer-nav a{
  display:block; text-decoration:none; color:var(--snow);
  font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500;
  padding:0.65rem 0; border-bottom:1px solid var(--line);
}
.drawer-nav a.active{color:var(--rot)}
.drawer-foot{margin-top:auto; padding-top:1.5rem;}

@media(min-width:860px){
  .nav-desktop{display:flex}
  .menu-btn{display:none}
  .call-chip.text-only{display:flex}
}

/* ---------- hero (index only) ---------- */
.hero{
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
  color:var(--snow); padding:2.4rem 0 3rem; position:relative; overflow:hidden;
}
.stars{position:absolute; inset:0; opacity:0.5; pointer-events:none;}
.status-pill{
  display:inline-flex; align-items:center; gap:0.45rem;
  background:rgba(255,255,255,0.08); border:1px solid var(--line); color:var(--ice);
  padding:0.35rem 0.75rem; border-radius:999px; font-size:0.78rem; font-weight:600; margin-bottom:1.3rem;
}
.status-dot{width:7px;height:7px;border-radius:50%; background:#63d68a; flex:none; box-shadow:0 0 0 3px rgba(99,214,138,0.2);}
.hero h1{font-size:2.3rem; line-height:1.08; color:#fff; max-width:11ch;}
.hero h1 em{font-style:normal; color:var(--rot);}
.hero .lede{margin-top:0.9rem; font-size:1.02rem; line-height:1.5; color:var(--ice); max-width:32ch;}
.call-big{
  margin-top:1.6rem; display:flex; align-items:center; gap:0.9rem;
  background:var(--rot); color:#fff; text-decoration:none;
  padding:1rem 1.2rem; border-radius:var(--radius);
  box-shadow:0 12px 24px -10px rgba(196,58,47,0.55);
}
.call-big .ico{width:44px;height:44px;border-radius:50%; background:rgba(255,255,255,0.18); display:flex;align-items:center;justify-content:center; flex:none;}
.call-big .ico svg{width:20px;height:20px}
.call-big .num{font-size:1.28rem; font-weight:800; letter-spacing:0.01em; line-height:1.15}
.call-big .sub{font-size:0.78rem; color:rgba(255,255,255,0.85); font-weight:500}
.hero-note{margin-top:0.7rem; font-size:0.78rem; color:var(--ice-dim);}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; margin-top:2rem;}
.stat-chip{background:rgba(255,255,255,0.06); border:1px solid var(--line); border-radius:14px; padding:0.75rem 0.6rem; text-align:center;}
.stat-chip .n{font-family:'Fraunces',serif; font-size:1.3rem; color:#fff; font-weight:600}
.stat-chip .l{font-size:0.68rem; color:var(--ice-dim); margin-top:0.15rem; line-height:1.25}
@media(min-width:760px){.hero h1{font-size:3.1rem; max-width:14ch}}

/* ---------- page header (subpages) ---------- */
.pagehead{
  background:linear-gradient(180deg, var(--midnight) 0%, var(--midnight-2) 100%);
  color:var(--snow); padding:2.4rem 0 2.6rem; position:relative; overflow:hidden;
}
.pagehead .eyebrow{color:#ff8f7f}
.pagehead h1{font-size:2rem; color:#fff; max-width:16ch; line-height:1.12;}
.pagehead p{margin-top:0.7rem; color:var(--ice); font-size:1rem; max-width:34ch; line-height:1.5;}
@media(min-width:760px){.pagehead h1{font-size:2.6rem}}

/* ---------- sections generic ---------- */
section{padding:3rem 0}
.eyebrow{font-size:0.8rem; color:var(--rot); font-weight:700; margin-bottom:0.5rem;}
.section-head h2{font-size:1.65rem; line-height:1.15; max-width:20ch}
.section-head p{margin-top:0.6rem; color:#4b5566; font-size:0.98rem; max-width:36ch; line-height:1.5}
.band-dark{background:var(--midnight); color:var(--snow)}
.band-dark .section-head p{color:var(--ice)}
.band-dark .eyebrow{color:#ff8f7f}
.band-paper{background:var(--paper)}

/* steps */
.steps{margin-top:2rem; display:flex; flex-direction:column; gap:0}
.step{display:flex; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--line-dark);}
.step:last-child{border-bottom:1px solid var(--line-dark)}
.step .num{font-family:'Fraunces',serif; font-size:1rem; font-weight:600; color:var(--rot); width:1.8rem; flex:none; padding-top:0.1rem;}
.step h3{font-size:1.05rem; font-weight:700; font-family:'Inter',sans-serif}
.step p{margin-top:0.3rem; font-size:0.92rem; color:#4b5566; line-height:1.5}
.band-dark .step{border-color:var(--line)}
.band-dark .step p{color:var(--ice)}

/* area */
.area-card{margin-top:1.75rem; background:var(--paper); border-radius:var(--radius); padding:1.5rem 1.25rem;}
.area-card svg{width:100%; height:auto}
.area-list{margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.5rem;}
.area-list span{font-size:0.82rem; background:#fff; border:1px solid var(--line-dark); padding:0.35rem 0.7rem; border-radius:999px; color:#334;}
.area-foot{margin-top:1rem; font-size:0.88rem; color:#4b5566; line-height:1.5}

/* numbers grid */
.numbers{margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-radius:var(--radius); overflow:hidden;}
.numbers .cell{background:var(--midnight); padding:1.25rem 1.1rem; display:flex; align-items:baseline; gap:0.8rem}
.numbers .big{font-family:'Fraunces',serif; font-size:2.1rem; color:var(--rot); font-weight:600; line-height:1}
.numbers .txt{font-size:0.86rem; color:var(--ice); line-height:1.35}
@media(min-width:760px){.numbers{grid-template-columns:1fr 1fr}}

/* roles */
.roles{margin-top:1.75rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem}
.role-card{background:#fff; border:1px solid var(--line-dark); border-radius:14px; padding:1rem 0.9rem;}
.role-card .ico{width:34px;height:34px;border-radius:9px; background:#f3e6dd; display:flex; align-items:center; justify-content:center; margin-bottom:0.6rem;}
.role-card .ico svg{width:17px;height:17px; color:var(--rot)}
.role-card h3{font-size:0.94rem; font-family:'Inter',sans-serif; font-weight:700}
.role-card p{font-size:0.8rem; color:#5a6274; margin-top:0.25rem; line-height:1.4}
.join-btn{margin-top:1.5rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; background:var(--ink); color:#fff; text-decoration:none; padding:0.95rem; border-radius:var(--radius); font-weight:700; font-size:0.95rem;}
@media(min-width:760px){.roles{grid-template-columns:repeat(4,1fr)}}

/* sponsors */
.sponsor-group{margin-top:2rem}
.sponsor-group h3{font-size:0.82rem; text-transform:none; color:#5a6274; font-weight:700; margin-bottom:0.8rem; font-family:'Inter',sans-serif;}
.sponsor-row{display:flex; flex-wrap:wrap; gap:0.9rem; align-items:stretch;}
.sponsor-row a{flex:1 1 28%; background:#fff; border:1px solid var(--line-dark); border-radius:14px; padding:0.9rem; display:flex; align-items:center; justify-content:center; min-height:64px;}
.sponsor-row img{max-height:34px; width:auto; filter:grayscale(0.15)}
.sponsor-card{flex:1 1 100%; background:#fff; border:1px solid var(--line-dark); border-radius:14px; padding:1rem; display:flex; flex-direction:column; gap:0.5rem;}
.sponsor-card img{max-height:36px; width:auto; align-self:flex-start;}
.sponsor-card .meta{font-size:0.8rem; color:#5a6274; line-height:1.5}
@media(min-width:640px){.sponsor-card{flex:1 1 45%}}

/* cards general */
.card-grid{margin-top:1.75rem; display:grid; grid-template-columns:1fr; gap:0.9rem;}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.card-grid.people{grid-template-columns:repeat(3,1fr)}}

.person-card{background:#fff; border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.1rem; display:flex; gap:0.9rem; align-items:center;}
.person-card img{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; background:var(--paper);}
.person-card h3{font-size:0.98rem; font-family:'Inter',sans-serif; font-weight:700}
.person-card .role{font-size:0.82rem; color:var(--rot); font-weight:600; margin-top:0.1rem;}
.person-card a{font-size:0.78rem; color:#5a6274; margin-top:0.35rem; display:inline-block; text-decoration:underline; text-decoration-color:var(--line-dark);}

/* timeline */
.timeline{margin-top:1.75rem; display:flex; flex-direction:column; gap:0;}
.tl-item{position:relative; padding:0 0 1.6rem 1.6rem; border-left:2px solid var(--line-dark);}
.tl-item:last-child{border-color:transparent; padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-6.5px; top:0.15rem; width:11px; height:11px; border-radius:50%; background:var(--rot); border:2px solid var(--snow);}
.tl-item .yr{font-family:'Fraunces',serif; font-weight:600; color:var(--rot); font-size:0.95rem;}
.tl-item h3{font-size:1rem; margin-top:0.2rem; font-family:'Inter',sans-serif; font-weight:700}
.tl-item p{margin-top:0.35rem; font-size:0.9rem; color:#4b5566; line-height:1.55}
.band-dark .tl-item{border-color:var(--line)}
.band-dark .tl-item::before{border-color:var(--midnight)}
.band-dark .tl-item p{color:var(--ice)}

/* stat table + bars */
.season-select{display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.4rem; margin-top:1.6rem; scrollbar-width:none;}
.season-select::-webkit-scrollbar{display:none}
.season-select button{
  flex:none; border:1px solid var(--line-dark); background:#fff; color:#334;
  padding:0.45rem 0.9rem; border-radius:999px; font-size:0.84rem; font-weight:600; cursor:pointer;
}
.season-select button.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.stat-summary{margin-top:1.4rem; display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem;}
.stat-summary .cell{background:var(--paper); border-radius:14px; padding:0.9rem; text-align:center;}
.stat-summary .n{font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; color:var(--ink);}
.stat-summary .l{font-size:0.72rem; color:#5a6274; margin-top:0.15rem;}
.bar-chart{margin-top:1.4rem; display:flex; align-items:flex-end; gap:5px; height:120px; padding:0 0.2rem;}
.bar-chart .bar{flex:1; background:var(--rot); border-radius:5px 5px 0 0; opacity:0.85; min-height:3px; position:relative;}
.bar-chart .bar.peak{opacity:1}
.stat-table-wrap{margin-top:1.4rem; overflow-x:auto; border:1px solid var(--line-dark); border-radius:14px;}
table.stat-table{font-size:0.82rem; min-width:480px;}
table.stat-table th, table.stat-table td{padding:0.6rem 0.7rem; text-align:left; border-bottom:1px solid var(--line-dark); white-space:nowrap;}
table.stat-table th{background:var(--paper); font-weight:700; font-size:0.72rem; color:#4b5566;}
table.stat-table tr:last-child td{font-weight:700; border-bottom:none; background:#fbf9f5;}
.history-note{margin-top:1.2rem; font-size:0.85rem; color:#5a6274; line-height:1.6}

/* info list (bitte beachten, etc.) */
.info-list{margin-top:1.75rem; display:flex; flex-direction:column; gap:0.9rem;}
.info-item{background:#fff; border:1px solid var(--line-dark); border-radius:14px; padding:1rem 1.1rem;}
.info-item h3{font-size:0.95rem; font-family:'Inter',sans-serif; font-weight:700}
.info-item p{margin-top:0.3rem; font-size:0.88rem; color:#4b5566; line-height:1.55}
.band-dark .info-item{background:rgba(255,255,255,0.06); border-color:var(--line);}
.band-dark .info-item p{color:var(--ice)}

/* contact page */
.contact-grid{margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem;}
.contact-card{background:#fff; border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.2rem;}
.contact-card h3{font-size:0.95rem; font-family:'Inter',sans-serif; font-weight:700; margin-bottom:0.6rem;}
.contact-card a, .contact-card p{display:block; font-size:0.92rem; color:#334; line-height:1.7; text-decoration:none;}
.contact-card a.big{font-size:1.15rem; font-weight:700; color:var(--rot);}
.map-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-dark);}
.map-card svg{width:100%; display:block}

/* buttons generic */
.btn-primary{
  display:inline-flex; align-items:center; gap:0.5rem; background:var(--rot); color:#fff; text-decoration:none;
  padding:0.85rem 1.3rem; border-radius:999px; font-weight:700; font-size:0.92rem;
}
.btn-secondary{
  display:inline-flex; align-items:center; gap:0.5rem; background:transparent; color:var(--ink);
  border:1.5px solid var(--line-dark); text-decoration:none; padding:0.8rem 1.25rem; border-radius:999px; font-weight:700; font-size:0.92rem;
}
.band-dark .btn-secondary{color:#fff; border-color:var(--line)}
.btn-row{margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:0.7rem;}

/* prose */
.prose{margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem;}
.prose p{font-size:0.95rem; line-height:1.65; color:#333c4a;}
.band-dark .prose p{color:var(--ice)}

/* footer */
footer{background:var(--midnight); color:var(--ice); padding:2.5rem 0 6.5rem;}
.foot-grid{display:flex; flex-direction:column; gap:1.6rem}
footer h4{color:#fff; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:700; margin-bottom:0.6rem; letter-spacing:0.01em}
footer p, footer a{font-size:0.88rem; line-height:1.7; color:var(--ice); text-decoration:none}
.foot-phone{color:#fff; font-weight:700; font-size:1rem}
.foot-social{display:flex; gap:0.7rem; margin-top:0.7rem}
.foot-social a{width:36px;height:36px;border-radius:50%; background:rgba(255,255,255,0.08); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.foot-social svg{width:16px;height:16px}
.foot-links p{margin-bottom:0.15rem}
.foot-bottom{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:0.9rem; font-size:0.78rem; color:var(--ice-dim);}
@media(min-width:760px){
  .foot-grid{flex-direction:row; justify-content:space-between; flex-wrap:wrap;}
  .foot-grid > div{flex:1 1 220px;}
}

/* sticky mobile call bar */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(18,32,54,0.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
}
.stickybar .txt{color:var(--ice); font-size:0.76rem; line-height:1.3}
.stickybar .txt strong{display:block; color:#fff; font-size:0.92rem}
.stickybar .btn{
  background:var(--rot); color:#fff; text-decoration:none; font-weight:700; font-size:0.9rem;
  padding:0.7rem 1.1rem; border-radius:999px; display:flex; align-items:center; gap:0.4rem; white-space:nowrap; flex:none;
}
.stickybar .btn svg{width:15px;height:15px}
@media(min-width:860px){.stickybar{display:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mobile-drawer{transition:none}
}