/* Regionalnews.ch — Editorial redesign, November 2026 */
:root { --green:#008975; --green-dark:#00574f; --ink:#090c0b; --white:#fff; --paper:#f7f8f4; --line:#d9e0db; --muted:#495751; --accent:#a7ce32; --max:1170px; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:white; color:var(--ink); font-family:"Inter Display","Inter",Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
::selection { background:var(--accent); color:var(--ink); }
:focus-visible { outline:3px solid #b7de33; outline-offset:5px; }
.container { width:min(calc(100% - 68px),var(--max)); margin-inline:auto; }
.skip-link { position:absolute; z-index:101; top:-100px; left:20px; background:white; color:black; padding:12px 18px; }
.skip-link:focus { top:14px; }

/* Navigation is deliberately plain: wordmark + three links. */
.site-header { position:relative; z-index:30; background:var(--paper); }
.home .site-header { position:absolute; inset:0 0 auto; background:transparent; }
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.wordmark { display:inline-block; font-size:29px; font-weight:950; line-height:1; letter-spacing:-.074em; white-space:nowrap; text-transform:uppercase; }
.wordmark .dot { color:white; }
body:not(.home) .wordmark .dot { color:var(--green); }
.main-nav { display:flex; align-items:center; gap:31px; }
.main-nav a { font-size:15px; font-weight:600; line-height:1.4; padding:12px 0; }
.main-nav a:hover,.main-nav a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; }
.menu-toggle { display:none; padding:8px 0 8px 12px; margin-left:auto; border:0; background:transparent; cursor:pointer; width:40px; height:42px; }
.menu-toggle span { display:block; height:2px; width:27px; background:var(--ink); margin-block:6px; transition:transform .18s ease,opacity .18s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-8px) rotate(-45deg); }
.mobile-nav { display:none; }
.mobile-nav[hidden] { display:none!important; }

/* Full-screen, flat-colour hero based on the supplied layout reference. */
.hero { background:var(--green); min-height:100svh; display:flex; align-items:flex-start; }
.hero-inner { padding-top:clamp(158px,23.15vh,190px); padding-bottom:48px; }
.hero h1 { font-weight:950; font-size:clamp(68px,10.2vw,147px); line-height:.93; letter-spacing:-.053em; margin:0; }
.hero h1 .line { display:block; white-space:nowrap; }
.hero h1 .line-white { color:white; }
.hero h1 .line-black { color:var(--ink); }
.hero-copy { max-width:630px; margin:37px 0 0; color:var(--ink); font-size:clamp(17px,1.45vw,21px); font-weight:550; line-height:1.55; letter-spacing:-.02em; }

/* Sections are typographic, with no eyebrow labels or number badges. */
.section { padding:116px 0 120px; }
.section-title { font-size:clamp(46px,6.4vw,84px); font-weight:930; line-height:1.01; letter-spacing:-.075em; margin:0; }
.section-intro { display:flex; align-items:end; justify-content:space-between; gap:55px; margin-bottom:44px; }
.section-intro p { max-width:390px; margin:0 0 5px; font-size:17px; line-height:1.55; color:var(--muted); }
.media-section { background:var(--paper); }
.brand-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.brand-card { display:flex; flex-direction:column; min-width:0; border:1px solid #d6ded7; background:white; transition:transform .2s,box-shadow .2s,border-color .2s; }
.brand-card:hover { transform:translateY(-3px); border-color:#a1bbb0; box-shadow:0 10px 26px rgba(13,38,31,.055); }
.brand-image { display:flex; align-items:center; justify-content:center; min-height:240px; padding:44px 35px; background:#e8f0ea; border-bottom:1px solid #dae4dc; }
.brand-card.aarau .brand-image { background:#ecf2e8; }
.brand-card.olten .brand-image { background:#e9f2e9; }
.brand-card.koeniz .brand-image { background:#e8f1ef; }
.brand-card.wasseramt .brand-image { background:#e9f3f1; }
.brand-image img { width:100%; max-width:475px; max-height:142px; object-fit:contain; }
.brand-image .aarau-logo { width:min(72%,260px); max-height:170px; }
.brand-details { padding:29px 32px 31px; display:flex; flex-direction:column; flex:1; }
.brand-name { font-size:30px; line-height:1.08; letter-spacing:-.055em; font-weight:900; margin:0 0 12px; }
.brand-description { margin:0 0 29px; color:#52605a; font-size:16px; line-height:1.57; }
.brand-visit { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:17px; border-top:1px solid #e7ebe7; font-size:14px; font-weight:700; }
.brand-visit span { display:inline-block; font-size:23px; font-weight:400; line-height:1; transition:transform .2s; }
.brand-card:hover .brand-visit span { transform:translate(3px,-3px); }

.about-section { background:#fff; }
.about-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:95px; align-items:start; }
.about-grid .section-title { max-width:700px; }
.about-text { padding-top:12px; }
.about-text p { color:#23342d; margin:0 0 21px; font-size:19px; line-height:1.62; }
.about-text p+p { color:var(--muted); font-size:17px; }
.inline-link { display:inline-flex; gap:18px; padding:7px 0 9px; border-bottom:2px solid currentColor; margin-top:10px; font-weight:750; font-size:16px; }
.inline-link .arrow { font-size:19px; transition:transform .2s; }
.inline-link:hover .arrow { transform:translateX(4px); }

.statement { background:#082923; color:white; }
.statement .section-title { color:white; max-width:1010px; }
.principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:77px; border-top:1px solid rgba(255,255,255,.3); }
.principle { padding:34px 32px 0 0; }
.principle+.principle { border-left:1px solid rgba(255,255,255,.26); padding-left:35px; }
.principle h3 { font-size:27px; margin:0 0 15px; letter-spacing:-.055em; font-weight:850; }
.principle p { font-size:16px; line-height:1.6; margin:0; max-width:290px; color:#c6d8d1; }

.contact-strip { padding:96px 0 102px; background:var(--accent); }
.contact-grid { display:flex; justify-content:space-between; align-items:end; gap:34px; }
.contact-grid .section-title { max-width:710px; }
.contact-grid a { display:inline-flex; white-space:nowrap; align-items:center; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:9px; font-weight:750; font-size:18px; }

/* Simple, non-templated footer. */
.site-footer { padding:53px 0 22px; color:white; background:#061b18; }
.footer-main { display:flex; justify-content:space-between; gap:45px; padding-bottom:48px; }
.footer-wordmark { font-size:27px; letter-spacing:-.07em; line-height:1.2; font-weight:950; }
.footer-wordmark .dot { color:var(--accent); }
.footer-side { display:flex; gap:86px; }
.footer-links { display:flex; flex-direction:column; gap:13px; font-size:15px; }
.footer-links a:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-caption { font-size:13px; color:#c6d3cd; margin:14px 0 0; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-top:1px solid #2d4840; padding-top:21px; color:#b2c0b9; font-size:13px; }
.footer-bottom div { display:flex; flex-wrap:wrap; gap:25px; }
.footer-bottom a:hover { color:white; }

/* Subpages reuse the same font sizes and restraint. */
.page-hero { background:var(--green); color:white; padding:105px 0 103px; }
.page-hero h1 { margin:0; font-size:clamp(56px,9vw,124px); font-weight:940; letter-spacing:-.083em; line-height:.95; max-width:1030px; }
.page-hero h1 .contrast { color:var(--ink); }
.page-hero p { max-width:770px; margin:29px 0 0; color:var(--ink); font-size:21px; font-weight:550; line-height:1.62; }
.page-details { background:white; padding:92px 0 110px; }
.split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:110px; align-items:start; }
.split h2 { margin:0; font-weight:900; font-size:clamp(36px,4vw,56px); line-height:1.08; letter-spacing:-.065em; }
.split .article-text p { font-size:18px; line-height:1.75; color:#4b5a52; margin:0 0 22px; }
.detail-logo { padding:42px; margin-bottom:39px; background:#eef4ef; border:1px solid #e1e9e2; display:flex; align-items:center; justify-content:center; min-height:220px; }
.detail-logo img { max-width:550px; max-height:155px; width:100%; object-fit:contain; }
.detail-logo img.aarau-logo { max-width:245px; max-height:166px; }
.detail-actions { margin-top:35px; display:flex; flex-wrap:wrap; gap:26px; }
.detail-actions a { color:#064f46; font-weight:800; border-bottom:2px solid; padding-bottom:7px; }
.simple-row { border-top:1px solid var(--line); padding-top:24px; display:grid; grid-template-columns:260px 1fr; gap:26px; margin-top:70px; }
.simple-row h3 { font-size:19px; letter-spacing:-.035em; margin:0; }
.simple-row p { margin:0; color:#45564d; font-size:17px; line-height:1.65; }
.legal { max-width:880px; margin-inline:auto; padding:75px 0 110px; }
.legal h2 { margin:34px 0 13px; font-size:26px; letter-spacing:-.04em; }
.legal p,.legal li { font-size:17px; line-height:1.77; color:#4d5c54; }
.legal a { color:var(--green-dark); text-decoration:underline; }
.legal-notice { border-left:4px solid #008975; padding:19px 23px; background:#f1f5ef; }

@media (min-width:1600px) {
  .hero-inner { padding-top:clamp(180px,23vh,235px); }
}
@media (max-width:1000px) {
  .hero h1 { font-size:clamp(67px,9.8vw,125px); }
  .about-grid { gap:55px; }
  .brand-image { min-height:208px; }
  .section { padding-block:88px; }
  .footer-side { gap:44px; }
}
@media (max-width:720px) {
  .container { width:calc(100% - 42px); }
  .header-inner { min-height:66px; }
  .wordmark { font-size:24px; }
  .main-nav { display:none; }
  .menu-toggle { display:block; }
  .mobile-nav { position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; gap:0; background:#ecf6f0; color:var(--ink); padding:13px 21px 24px; box-shadow:0 18px 26px rgba(0,0,0,.13); }
  .mobile-nav a { padding:15px 5px; border-bottom:1px solid #c9d8cf; font-weight:650; }
  .hero { min-height:min(690px,100svh); }
  .hero-inner { padding-top:165px; padding-bottom:55px; }
  .hero h1 { font-size:clamp(43px,13.5vw,70px); line-height:.99; letter-spacing:-.045em; }
  .hero-copy { margin-top:34px; font-size:17px; max-width:490px; line-height:1.6; }
  .section { padding:79px 0 86px; }
  .section-title { font-size:clamp(43px,8.7vw,69px); }
  .section-intro { display:block; margin-bottom:30px; }
  .section-intro p { margin-top:18px; }
  .brand-grid,.about-grid,.split { grid-template-columns:1fr; }
  .brand-grid { gap:15px; }
  .brand-image { min-height:204px; padding:29px; }
  .brand-details { padding:25px; }
  .about-grid,.split { gap:26px; }
  .about-text { padding:0; }
  .principles { margin-top:48px; grid-template-columns:1fr; }
  .principle,.principle+.principle { padding:27px 0; border-left:none; border-bottom:1px solid rgba(255,255,255,.23); }
  .contact-grid { align-items:flex-start; flex-direction:column; }
  .contact-strip { padding:75px 0; }
  .footer-main { flex-direction:column; gap:32px; }
  .footer-side { flex-wrap:wrap; gap:38px 70px; }
  .page-hero { padding:95px 0 84px; }
  .page-hero h1 { font-size:clamp(51px,11.6vw,75px); }
  .page-hero h1.long-title { font-size:clamp(39px,10.2vw,60px); }
  .page-hero p { font-size:18px; }
  .page-details { padding-block:70px; }
  .simple-row { grid-template-columns:1fr; gap:11px; margin-top:48px; }
  .legal { padding:55px 0 75px; }
}
@media (max-width:420px) {
  .container { width:calc(100% - 36px); }
  .wordmark { font-size:22px; }
  .hero-inner { padding-top:151px; }
  .hero h1 { font-size:clamp(41px,13.5vw,56px); }
  .hero-copy { margin-top:29px; font-size:16px; }
  .brand-image { min-height:166px; padding:20px; }
  .brand-image .aarau-logo { width:190px; }
  .brand-image img { max-height:116px; }
  .footer-side { flex-direction:column; gap:27px; }
  .section-title { font-size:43px; }
  .contact-grid a { font-size:16px; white-space:normal; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
