*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --dark:    #1a1a1a;
      --accent:   #3a7a4a;
      --link:    #2a5fa0;
      --text:    #333;
      --light-bg: #f0f0ee;
      --border:   #ccc;
      --white:    #fff;
    }

    body {
      overflow-y: scroll;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 15px;
      background: var(--light-bg);
      color: var(--text);
    }

    #wrapper {
      max-width: 900px;
      margin: 0 auto;
      background: var(--white);
      box-shadow: 0 0 12px rgba(0,0,0,.15);
    }

    #header { display: none; }

    #hero {
      width: 100vw;
      height: min(454px, 40vh);
      max-height: 40vh;
      overflow: hidden;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
      position: relative;
    }
    #hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 60%;
      display: block;
    }

    nav {
      background: #2b2b2b;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
      margin-right: calc(-50vw + 50%);
    }
    nav ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 0 16px;
    }
    nav ul li { display: flex; align-items: center; }
    nav ul li + li::before { content: "/"; color: #666; padding: 0 4px; font-size: 0.85rem; }
    nav ul li a {
      display: block;
      padding: 14px 12px;
      color: #bbb;
      text-decoration: none;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      transition: color .15s;
    }
    nav ul li a:hover { color: #fff; }
    nav ul li a.active { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

    #content-area {
      display: flex;
      padding: 24px;
      align-items: flex-start;
    }
    #main {
      flex: 1;
      padding-right: 28px;
    }
    .page-title {
      font-family: 'Merriweather', serif;
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 14px;
      color: var(--dark);
      padding-bottom: 8px;
      border-bottom: 2px solid var(--accent);
      display: inline-block;
    }
    #main h3 {
      font-family: 'Merriweather', serif;
      font-size: 1rem;
      font-weight: 700;
      margin: 24px 0 10px;
      color: var(--dark);
      border-left: 4px solid var(--accent);
      padding-left: 10px;
    }
    #main p {
      line-height: 1.7;
      color: #444;
      margin-bottom: 8px;
    }

    .price-table {
      width: 100%;
      border-collapse: collapse;
      margin: 12px 0 20px;
      font-size: 0.92rem;
    }
    .price-table thead tr { background: var(--dark); color: var(--white); }
    .price-table thead th {
      padding: 9px 12px;
      text-align: left;
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .price-table tbody tr { border-bottom: 1px solid #e8e8e8; }
    .price-table tbody tr:nth-child(even) { background: #f8f8f6; }
    .price-table tbody td { padding: 9px 12px; color: #333; vertical-align: top; }
    .price-table tbody td:nth-child(2) { font-weight: 700; white-space: nowrap; color: var(--dark); }
    .price-table .note { font-size: 0.82rem; color: #666; display: block; margin-top: 2px; }
    .badge-put-take {
      display: inline-block;
      background: #1a4a8a;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 5px;
    }
    .badge-cr {
      display: inline-block;
      background: #3a7a4a;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 20px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      vertical-align: middle;
      margin-left: 5px;
    }

    /* Swish-container och komponenter */
    .swish-container {
      border: 1px solid #73b239;
      border-radius: 16px;
      background: #f8ffee;
      padding: 20px 22px;
      margin: 16px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .swish-select {
      padding: 10px 12px;
      font-size: 0.95rem;
      border: 1px solid #a3d971;
      border-radius: 8px;
      background: #fff;
      color: #333;
      font-family: inherit;
      outline: none;
      width: 100%;
      max-width: 320px;
    }
    .swish-select:focus {
      border-color: #73b239;
      box-shadow: 0 0 0 3px rgba(115, 178, 57, 0.2);
    }

    .swish-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 24px;
      background: #73b239;
      color: #fff;
      text-decoration: none;
      border-radius: 999px;
      font-weight: 700;
      font-size: 1rem;
      width: 100%;
      max-width: 320px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: background 0.15s, opacity 0.15s;
    }
    .swish-btn:hover {
      background-color: #639c30;
    }

    .swish-info-text {
      font-size: 0.88rem;
      color: #555;
      line-height: 1.5;
    }
    .swish-info-text strong {
      color: #1a6217;
    }

    .rules-box {
      background: #fff8f0;
      border-left: 4px solid #c87a2a;
      padding: 12px 16px;
      margin: 10px 0 18px;
      font-size: 0.9rem;
      line-height: 1.7;
      color: #444;
    }
    .swish-rules {
      background: #f8ffee;
      border-left-color: #73b239;
      margin-bottom: 12px;
    }
    .swish-rules ul li::before {
      content: "✓ ";
      color: #1a6217;
      font-weight: 700;
    }
    .rules-box ul { list-style: none; padding: 0; }
    .rules-box ul li { padding: 3px 0; }
    .rules-box ul li::before { content: "• "; color: #c87a2a; font-weight: 700; }

    /* Styrning för mobil vs dator (PC) */
    .mobile-only { display: flex; flex-direction: column; gap: 14px; }
    .desktop-only { display: none; flex-direction: column; gap: 14px; }

    @media (pointer: fine) and (min-width: 769px) {
      .mobile-only { display: none !important; }
      .desktop-only { display: flex !important; }
    }

    /* Styrning för instruktionstext via Alternativ 2 */
    .mobile-instruction { display: block; }
    .desktop-instruction { display: none; }

    @media (pointer: fine) and (min-width: 769px) {
      .mobile-instruction { display: none !important; }
      .desktop-instruction { display: block !important; }
    }

    /* Tooltip / kontaktkort */
    .th-tooltip {
      position: relative;
      cursor: default;
      border-bottom: 1px dotted #555;
    }
    .th-tooltip::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      right: 0;
      height: 8px;
      background: transparent;
    }
    .th-tooltip-box {
      display: none;
      position: absolute;
      bottom: 100%;
      right: 0;
      background: #2b2b2b;
      color: #ddd;
      padding: 12px 16px;
      border-radius: 6px;
      white-space: nowrap;
      font-size: 0.82rem;
      margin-bottom: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      pointer-events: auto;
    }
    .th-card-name {
      font-weight: 700;
      font-size: 0.95rem;
      color: #fff;
    }
    .th-card-title {
      font-size: 0.78rem;
      color: #aaa;
      margin-top: 2px;
    }
    .th-card-divider {
      border: none;
      border-top: 1px solid #444;
      margin: 8px 0;
    }
    .th-tooltip-box a {
      color: #aad4ff;
      text-decoration: none;
      display: block;
      margin-top: 4px;
    }
    .th-tooltip-box a:hover { text-decoration: underline; }
    .th-tooltip:hover .th-tooltip-box,
    .th-tooltip-box:hover,
    .th-tooltip.active .th-tooltip-box { display: block; }

    .footer-mobile { display: none; }

    #footer {
      border-top: 2px solid var(--dark);
      padding: 14px 24px;
      display: flex;
      justify-content: space-between;
      font-size: 0.82rem;
      color: #555;
    }

    @media (max-width: 600px) {
      #content-area { flex-direction: column; padding: 16px; }
      #main { padding-right: 0; margin-bottom: 20px; }
      .swish-select, .swish-btn { max-width: 100%; }
      .footer-desktop { display: none; }
      .footer-mobile { display: inline; }
    }

    /* ==================== INDEX.HTML STYLES ==================== */
    /* SIDEBAR */
    #sidebar {
      width: 200px;
      flex-shrink: 0;
      font-size: 0.88rem;
    }

    .sidebar-section { margin-bottom: 20px; }
    .sidebar-section h3 {
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #555;
      margin-bottom: 8px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }

    /* Snabblänkar */
    .sidebar-section a.quick-link {
      display: block;
      color: var(--link);
      text-decoration: none;
      padding: 2px 0;
    }
    .sidebar-section a.quick-link:hover { text-decoration: underline; }
    .sidebar-section a.quick-link::before { content: "• "; color: var(--accent); }

    /* Nyheter i sidebar */
    .sidebar-news-item {
      display: block;
      text-decoration: none;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      color: inherit;
    }
    .sidebar-news-item:last-child { border-bottom: none; }
    .sidebar-news-item:hover .sidebar-news-title { color: var(--accent); }

    .sidebar-news-date {
      font-size: 0.75rem;
      color: #999;
      margin-bottom: 2px;
    }

    .sidebar-news-title {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--dark);
      line-height: 1.35;
      transition: color 0.15s;
    }

    .sidebar-all-link {
      display: inline-block;
      margin-top: 8px;
      font-size: 0.78rem;
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
    }
    .sidebar-all-link:hover { text-decoration: underline; }

    .sidebar-news-loading {
      font-size: 0.82rem;
      color: #aaa;
      font-style: italic;
    }

    /* ==================== INLAGG.HTML STYLES ==================== */
    /* ACCORDION */
    .year-group {
      margin-bottom: 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
    }

    .year-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: var(--dark);
      color: #fff;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }
    .year-header:hover { background: #2e2e2e; }
    .year-header.open { background: var(--accent); }

    .year-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .year-label {
      font-family: 'Merriweather', serif;
      font-size: 1rem;
      font-weight: 700;
    }

    .year-count {
      font-size: 0.78rem;
      background: rgba(255,255,255,0.2);
      padding: 2px 8px;
      border-radius: 20px;
    }

    .year-arrow {
      font-size: 0.8rem;
      transition: transform 0.2s;
    }
    .year-header.open .year-arrow {
      transform: rotate(180deg);
    }

    .year-posts {
      display: none;
      background: var(--white);
    }
    .year-posts.open {
      display: block;
    }

    /* POSTS */
    .post {
      padding: 18px 20px;
      border-bottom: 1px solid #f0f0f0;
    }
    .post:last-child { border-bottom: none; }

    .post time {
      display: block;
      font-size: 0.82rem;
      color: #888;
      margin-bottom: 5px;
    }
    .post h3 {
      font-family: 'Merriweather', serif;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--dark);
    }
    .post-preview { line-height: 1.7; color: #555; font-size: 0.92rem; margin-bottom: 8px; }
    .post-full { display: none; line-height: 1.7; color: #444; font-size: 0.92rem; }
    .post-full p { margin-bottom: 8px; }

    .read-more-btn {
      background: none;
      border: none;
      color: var(--accent);
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .read-more-btn:hover { color: #2a5a35; }

    .loading { color: #777; font-style: italic; padding: 20px 0; }
    .error { color: #a00; font-size: 0.9rem; }

    /* ==================== KARTA.HTML STYLES ==================== */
    /* PAGE CONTENT */
    #page-content { padding: 24px; }
    
    #page-content p { color: #555; font-size: 0.9rem; margin-bottom: 16px; line-height: 1.6; }

    /* MAP */
    #map {
      width: 100%;
      height: 500px;
      border: 1px solid var(--border);
      border-radius: 4px;
    }

    /* LEGEND */
    #legend {
      display: flex;
      gap: 20px;
      margin-top: 10px;
      font-size: 0.82rem;
      color: #555;
      flex-wrap: wrap;
    }
    .legend-item { display: flex; align-items: center; gap: 6px; }
    .legend-dot {
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(0,0,0,0.3);
    }
    .dot-blue   { background: #1a6ea8; }
    .dot-orange { background: #c87a2a; }
    .dot-red    { background: #d63030; }

    /* WATER LIST */
    #water-list {
      margin-top: 24px;
      border-top: 1px solid var(--border);
      padding-top: 16px;
    }
    #water-list h3 {
      font-size: 0.9rem; font-weight: 700; margin-bottom: 12px;
      text-transform: uppercase; letter-spacing: 0.5px; color: #444;
    }
    .water-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px;
    }
    .water-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: background .15s;
    }
    .water-item:hover { background: #f5f5f3; }
    .water-num {
      width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; font-weight: 700; color: white;
      flex-shrink: 0;
    }
    .num-blue   { background: #1a6ea8; }
    .num-orange { background: #c87a2a; }
    .num-red    { background: #d63030; }

    /* COPYRIGHT */
    .map-credit {
      font-size: 0.75rem; color: #888; margin-top: 6px; text-align: right;
    }
    .map-credit a { color: #888; }

    /* ==================== ADMIN.HTML STYLES ==================== */
    .news-form {
      margin-bottom: 28px;
      padding: 18px;
      background: #f8f8f6;
      border: 1px solid #e0e0dc;
      border-radius: 6px;
    }
    .news-form h3 {
      font-family: 'Merriweather', serif;
      font-size: 1.05rem;
      margin-bottom: 14px;
      color: var(--dark);
    }
    .news-form .form-row {
      margin-bottom: 12px;
    }
    .news-form label {
      display: block;
      margin-bottom: 6px;
      font-size: 0.88rem;
      color: #555;
    }
    .news-form input,
    .news-form textarea {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px 12px;
      font-size: 0.95rem;
      font-family: inherit;
      color: #333;
      background: #fff;
    }
    .news-form textarea {
      resize: vertical;
    }
    .news-form button {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 11px 18px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background .15s ease;
    }
    .news-form button:hover {
      background: #2f6c45;
    }
    .news-message {
      margin-top: 10px;
      color: #336633;
      font-size: 0.9rem;
    }
    .news-form img.preview {
      display: none;
      max-width: 100%;
      margin-top: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .post-card {
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 18px;
      background: #fff;
    }
    .post-card h3 {
      margin-bottom: 8px;
      color: var(--dark);
    }
    .post-card time {
      display: block;
      margin-bottom: 12px;
      color: #777;
    }
    .post-card p {
      line-height: 1.7;
      color: #444;
    }
    .post-card img {
      max-width: 100%;
      display: block;
      margin: 14px 0;
      border-radius: 6px;
    }
    .post-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .post-actions button {
      border: none;
      border-radius: 4px;
      padding: 10px 14px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .post-actions button.edit {
      background: #2b75a9;
      color: #fff;
    }
    .post-actions button.delete {
      background: #c34a36;
      color: #fff;
    }