/* HinterWelt Modern Design System */
/* Color Scheme: Teal primary, Gold accents, Professional but approachable */
/* Typography: Google Fonts - Inter (body), Poppins (headings) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  --primary-teal: #0891B2;
  --primary-teal-dark: #0E7490;
  --accent-gold: #F59E0B;
  --accent-gold-light: #FCD34D;
  --text-dark: #1E293B;
  --text-light: #64748B;
  --bg-light: #F8FAFC;
  --bg-lighter: #F1F5F9;
  --border: #E2E8F0;
  --white: #FFFFFF;
}

BODY {
  COLOR: var(--text-dark);
  BACKGROUND-COLOR: var(--bg-light);
  FONT-FAMILY: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  FONT-SIZE: 16px;
  LINE-HEIGHT: 1.6;
  MARGIN: 0;
  PADDING: 0 20px;
  TEXT-ALIGN: left;
}

/* Responsive horizontal margins - industry standard spacing */
@media (min-width: 768px) {
  BODY {
    PADDING: 0 50px;
  }
}

@media (min-width: 1200px) {
  BODY {
    PADDING: 0 120px;
  }
}

/* Remove old scrollbar styling - modern browsers handle this better */
BODY {
  SCROLLBAR-FACE-COLOR: var(--border);
  SCROLLBAR-HIGHLIGHT-COLOR: var(--primary-teal);
  SCROLLBAR-SHADOW-COLOR: var(--text-dark);
  SCROLLBAR-3DLIGHT-COLOR: var(--text-dark);
  SCROLLBAR-ARROW-COLOR: var(--primary-teal);
  SCROLLBAR-TRACK-COLOR: var(--bg-lighter);
  SCROLLBAR-DARKSHADOW-COLOR: var(--border);
}

/* Center tag - force content to be properly constrained */
CENTER {
  DISPLAY: flex;
  FLEX-DIRECTION: column;
  MARGIN: 0 auto;
  MAX-WIDTH: 1360px;
  WIDTH: 100%;
  BOX-SIZING: border-box;
  ALIGN-ITEMS: center;
}

/* Move header image to bottom and hide bar */
CENTER > TABLE {
  ORDER: 2;
  DISPLAY: contents;
}

/* Header row - move to bottom, hide bar */
CENTER > TABLE > TBODY > TR:nth-child(1),
CENTER > TABLE > TBODY > TR:nth-child(2) {
  ORDER: 10;
  WIDTH: 100% !important;
}

/* Hide the bar (2nd row with gray bar image) */
CENTER > TABLE > TBODY > TR:nth-child(2) {
  DISPLAY: none;
}

/* Content rows - display normally at top */
CENTER > TABLE > TBODY > TR:nth-child(3) {
  ORDER: 1;
  WIDTH: 100% !important;
}

TABLE {
  BORDER-RIGHT: 0pt;
  PADDING-RIGHT: 0px;
  BORDER-TOP: 0pt;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  BORDER-LEFT: 0pt;
  COLOR: var(--text-dark);
  PADDING-TOP: 0px;
  BORDER-BOTTOM: 0pt;
  FONT-FAMILY: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  BACKGROUND-COLOR: transparent;
  MARGIN: 0 auto;
  WIDTH: 100%;
  BOX-SIZING: border-box;
}

/* Headings - Use Poppins for distinctive, modern feel */
H1, H2, H3, H4, H5, H6 {
  FONT-FAMILY: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  FONT-WEIGHT: 700;
  COLOR: var(--text-dark);
  MARGIN: 1.5rem 0 1rem 0;
  LINE-HEIGHT: 1.3;
}

H1 {
  FONT-SIZE: 2.5rem;
  COLOR: var(--primary-teal);
}

H2 {
  FONT-SIZE: 2rem;
  COLOR: var(--primary-teal-dark);
}

H3 {
  FONT-SIZE: 1.5rem;
  BORDER-BOTTOM: 2px solid var(--accent-gold);
  PADDING-BOTTOM: 0.5rem;
  COLOR: var(--text-dark);
  BORDER-LEFT: none;
  PADDING-LEFT: 0;
}

H4 {
  FONT-SIZE: 1.125rem;
  FONT-WEIGHT: 600;
  COLOR: var(--text-dark);
}

H5 {
  FONT-SIZE: 1rem;
  FONT-WEIGHT: 600;
  COLOR: var(--text-light);
}

H6 {
  FONT-SIZE: 0.875rem;
  FONT-WEIGHT: 600;
  COLOR: var(--text-light);
  TEXT-TRANSFORM: uppercase;
  LETTER-SPACING: 0.05em;
}

/* Links - Teal primary, warm gold hover */
A:link {
  COLOR: var(--primary-teal);
  TEXT-DECORATION: none;
  BORDER-BOTTOM: 1px solid transparent;
  TRANSITION: all 0.2s ease;
}

A:visited {
  COLOR: var(--primary-teal-dark);
}

A:hover {
  COLOR: var(--accent-gold);
  BORDER-BOTTOM: 2px solid var(--accent-gold);
}

A:active {
  COLOR: var(--primary-teal);
}

/* Button styling */
.Button {
  COLOR: var(--white);
  FONT-FAMILY: 'Poppins', sans-serif;
  FONT-WEIGHT: 600;
  BACKGROUND-COLOR: var(--primary-teal);
  PADDING: 0.75rem 1.5rem;
  BORDER: none;
  BORDER-RADIUS: 0.375rem;
  CURSOR: pointer;
  TRANSITION: all 0.2s ease;
}

.Button:hover {
  BACKGROUND-COLOR: var(--primary-teal-dark);
  BOX-SHADOW: 0 4px 6px rgba(8, 145, 178, 0.2);
}

/* Table body and rows */
TBODY {
  BORDER: none;
  PADDING: 0;
  COLOR: var(--text-dark);
  FONT-FAMILY: 'Inter', sans-serif;
  BACKGROUND-COLOR: transparent;
  TEXT-ALIGN: left;
}

TR {
  BORDER: none;
  PADDING: 0;
}

TD {
  BORDER-RIGHT: none;
  BORDER-TOP: none;
  BORDER-LEFT: none;
  BORDER-BOTTOM: none;
  PADDING-RIGHT: 0.5rem;
  PADDING-LEFT: 0.5rem;
  PADDING-BOTTOM: 0.5rem;
  PADDING-TOP: 0.5rem;
}

/* Header row - Subtle styling */
.HeaderRow {
  FONT-WEIGHT: 700;
  FONT-SIZE: 1.125rem;
  COLOR: var(--primary-teal);
  FONT-FAMILY: 'Poppins', sans-serif;
  BACKGROUND-COLOR: var(--bg-lighter);
  PADDING: 0.75rem;
  BORDER-BOTTOM: 2px solid var(--accent-gold);
}

/* News table styling */
.NewsTable {
  BORDER: 1px solid var(--border);
  BACKGROUND-COLOR: var(--white);
  BORDER-RADIUS: 0.5rem;
  BOX-SHADOW: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Menu styling */
.MenuBack {
  BACKGROUND-COLOR: var(--bg-lighter);
  BORDER-RIGHT: 1px solid var(--border);
}

.menu {
  BORDER: none;
  PADDING: 0;
  TEXT-ALIGN: left;
}

/* Horizontal rules - Subtle dividers */
HR {
  BORDER: none;
  BORDER-TOP: 2px solid var(--accent-gold);
  BACKGROUND: transparent;
  MARGIN: 2rem 0;
}

/* Frameset */
FRAMESET {
  FRAMEBORDER: 0;
  BORDER: 0;
}

/* Utility classes */
.section-header {
  BORDER-BOTTOM: 3px solid var(--accent-gold);
  PADDING-BOTTOM: 0.5rem;
  MARGIN-BOTTOM: 1.5rem;
  COLOR: var(--primary-teal);
}

.accent-text {
  COLOR: var(--accent-gold);
  FONT-WEIGHT: 600;
}

.muted-text {
  COLOR: var(--text-light);
}

/* Product/content cards */
.product-card {
  BACKGROUND-COLOR: var(--white);
  BORDER: 1px solid var(--border);
  BORDER-RADIUS: 0.5rem;
  PADDING: 1.5rem;
  TRANSITION: all 0.3s ease;
  BOX-SHADOW: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  BORDER-COLOR: var(--primary-teal);
  BOX-SHADOW: 0 10px 25px rgba(8, 145, 178, 0.1);
  TRANSFORM: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  H1 { FONT-SIZE: 2rem; }
  H2 { FONT-SIZE: 1.5rem; }
  H3 { FONT-SIZE: 1.25rem; }
  BODY { FONT-SIZE: 15px; }
}