/* ============================================================
   global.css — Reset, Base Styles, Typography, Layout Utilities
   Martin Gerber Entrümpelung & Service
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  /* Offset for fixed top-bar */
  padding-top: calc(var(--top-bar-height) + var(--header-height));
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent); }

ul, ol { list-style: none; }

button {
  font-family: var(--font-primary);
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem); /* spec: 1.8rem mobile, 2.5rem desktop */
  font-weight: var(--font-weight-semibold);
}

h2 {
  font-size: var(--font-size-h2); /* spec: exactly 2rem */
  font-weight: var(--font-weight-semibold);
}

h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }

p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
}

p + p { margin-top: var(--space-4); }

strong { font-weight: var(--font-weight-semibold); }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- Grid Helpers ---- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* ---- Spacing Utilities ---- */
.padding-y-sm  { padding-block: var(--space-8); }
.padding-y-md  { padding-block: var(--space-12); }
.padding-y-lg  { padding-block: var(--space-16); }
.padding-y-xl  { padding-block: var(--space-24); }

/* ---- Background Utilities ---- */
.bg-white    { background-color: var(--color-bg-alt); }
.bg-light    { background-color: var(--color-bg); }
.bg-muted    { background-color: var(--color-bg-muted); }
.bg-primary  { background-color: var(--color-primary); color: var(--color-white); }
.bg-dark     { background-color: var(--color-bg-dark); color: var(--color-white); }

/* ---- Text Utilities ---- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-white   { color: var(--color-white); }
.text-small   { font-size: var(--font-size-sm); }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  border: none;
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-outline--white {
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn-outline--white:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up.visible { opacity: 1; }

/* Scroll-triggered fade (JS adds .visible class) */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Section Headings ---- */
.section-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-title {
  margin-bottom: var(--space-4);
}

.section-intro {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: var(--line-height-relaxed);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-4) 0;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { color: var(--color-border-dark); }
.breadcrumb .current { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ---- Divider ---- */
.divider {
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  margin: var(--space-4) auto;
}

.divider--left { margin-left: 0; }

/* ---- Responsive Breakpoints ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .padding-y-lg { padding-block: var(--space-10); }
  .padding-y-xl { padding-block: var(--space-16); }
}

/* ---- SEO Footer Block (Otto-Style) ---- */
/* Dark text on light bg always — per spec */
.seo-block {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.seo-block h2,
.seo-block h3,
.seo-block p,
.seo-block a {
  color: var(--color-text);
}

.seo-block a {
  color: var(--color-primary);
  text-decoration: underline;
}

.seo-block a:hover { color: var(--color-accent); }

.seo-block__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.seo-block__section { margin-bottom: var(--space-6); }
.seo-block__section h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.seo-block__section p { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }

@media (max-width: 768px) {
  .seo-block__grid { grid-template-columns: 1fr; }
}