/* CLAUDE: assets/css/base.css – Reset, CSS-Variablen, Basis-Styles */
/* CLAUDE: Erste CSS-Datei (geladen vor allen anderen) */
/* CLAUDE: Enthält: Reset, Design-Tokens, Hilfsklassen */
/* CLAUDE: Max. 200 Zeilen */

/* ========== CSS-VARIABLEN (Design-Tokens) ========== */

/* CLAUDE: :root – globale CSS-Variablen für gesamte Site */
/* CLAUDE: Synchronisiert mit theme.json – Farbpalette für Denkmalschutz-Immobilien */
:root {
	/* CLAUDE: === HAUPTFARBEN (Grundflächen & Typografie) === */

	/* CLAUDE: Marble White – Seitenhintergrund, große Flächen */
	/* CLAUDE: Basis für alle Content-Bereiche, warmes Off-White */
	--color-marble-white: #F6F4EF;

	/* CLAUDE: Dark Umber – Fließtext, Headlines, starke Icons */
	/* CLAUDE: Kontrast zu Marble White: 12.47:1 (AAA) */
	--color-dark-umber: #3B2A1A;

	/* CLAUDE: Chestnut – Zwischenüberschriften, Meta/Untertitel, Linien */
	/* CLAUDE: Kontrast zu Marble White: 6.68:1 (AA/AAA) */
	--color-chestnut: #7C4A21;

	/* CLAUDE: === AKZENT & INTERAKTION === */

	/* CLAUDE: Heritage Gold – Akzente, Cards-Rahmen, Hover, Badge */
	/* CLAUDE: Dark Umber Text auf Button Heritage Gold: 5.29:1 (AA) */
	--color-heritage-gold: #C19A6B;

	/* CLAUDE: Burgundy – Links, aktiver Zustand, wichtige Marker */
	/* CLAUDE: Kontrast zu Marble White: 7.79:1 (AA/AAA) */
	/* CLAUDE: Weiß auf Burgundy: 8.57:1 (AAA) */
	--color-burgundy: #8F2330;

	/* CLAUDE: === STRUKTURFARBEN === */

	/* CLAUDE: Porous Stone – 1px-Border, Tabellenlinien, Input-Rahmen */
	--color-porous-stone: #DCD7CE;

	/* CLAUDE: Weiß – für Cards auf Marble White, Overlays */
	--color-white: #FFFFFF;

	/* CLAUDE: === STATUSFARBEN (zurückhaltend) === */

	/* CLAUDE: Success – Erfolg-Meldungen */
	--color-success: #2E7D32;
	--color-success-light: #E9F4EA;  /* CLAUDE: sehr heller Tint */

	/* CLAUDE: Warning – Warnungen */
	--color-warning: #8C6E00;
	--color-warning-light: #FFF7DF;  /* CLAUDE: sehr heller Tint */

	/* CLAUDE: Error – Fehler-Meldungen */
	--color-error: #B00020;
	--color-error-light: #FDEBEC;    /* CLAUDE: sehr heller Tint */

	/* CLAUDE: === BACKWARD-COMPATIBILITY ALIASE === */
	/* CLAUDE: Alte Variablen-Namen – können später entfernt werden */
	--ds-primary: var(--color-dark-umber);
	--ds-secondary: var(--color-chestnut);
	--ds-accent: var(--color-heritage-gold);
	--ds-bg: var(--color-marble-white);
	--ds-text: var(--color-dark-umber);
	--color-umber: var(--color-dark-umber);      /* Legacy */
	--color-brown: var(--color-chestnut);        /* Legacy */
	--color-gold: var(--color-heritage-gold);    /* Legacy */
	--color-marble: var(--color-marble-white);   /* Legacy */

	/* CLAUDE: Spacing-Scale (fluid mit clamp) */
	--spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);    /* CLAUDE: 4-8px */
	--spacing-sm: clamp(0.5rem, 1vw, 1rem);         /* CLAUDE: 8-16px */
	--spacing-md: clamp(1rem, 2vw, 1.5rem);         /* CLAUDE: 16-24px */
	--spacing-lg: clamp(1.5rem, 3vw, 2rem);         /* CLAUDE: 24-32px */
	--spacing-xl: clamp(2rem, 4vw, 3rem);           /* CLAUDE: 32-48px */
	--spacing-2xl: clamp(3rem, 6vw, 4rem);          /* CLAUDE: 48-64px */
	--spacing-3xl: clamp(4rem, 8vw, 6rem);          /* CLAUDE: 64-96px */

	/* CLAUDE: Content-Widths (entsprechen theme.json) */
	--content-width: 800px;      /* CLAUDE: Standard-Content-Breite */
	--wide-width: 1440px;        /* CLAUDE: Breite/Volle-Breite */

	/* CLAUDE: Transitions (für Hover-Effekte, Menüs, etc.) */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* CLAUDE: Border-Radius (für Buttons, Cards, etc.) */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* CLAUDE: Shadows (für Cards, Modals, etc.) */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ========== RESET / NORMALIZE ========== */

/* CLAUDE: Box-Sizing auf alle Elemente anwenden (inkl. Padding/Border in Width) */
html {
	box-sizing: border-box;
}

/* CLAUDE: Inherit box-sizing für alle Pseudo-Elemente */
*, *:before, *:after {
	box-sizing: inherit;
}

/* CLAUDE: Body-Defaults (Schrift, Farbe, Hintergrund) */
body {
	margin: 0;                                  /* CLAUDE: Browser-Default-Margin entfernen */
	padding: 0;
	color: var(--color-dark-umber);             /* CLAUDE: Text-Farbe: Dark Umber */
	background: var(--color-marble-white);      /* CLAUDE: Hintergrund: Marble White */
	font-family: 'Libre Baskerville', Georgia, serif; /* CLAUDE: Libre Baskerville als Standard-Schrift mit Serif-Fallback */
	line-height: 1.6;                           /* CLAUDE: Erhöhte Lesbarkeit */
	-webkit-font-smoothing: antialiased;        /* CLAUDE: Schrift-Glättung (macOS/iOS) */
	-moz-osx-font-smoothing: grayscale;
}

/* CLAUDE: Headings-Reset (Margin entfernen, Schriftgröße erben) */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;                           /* CLAUDE: Semi-Bold für Überschriften */
	line-height: 1.2;                           /* CLAUDE: Engerer Zeilenabstand für Headings */
	
}

/* CLAUDE: Paragraph-Reset (Margin-Bottom entfernen) */
p {
	margin: 0 0 1em;
}

/* CLAUDE: List-Reset (Margin/Padding entfernen) */
ul, ol {
	margin: 0;
	padding: 0;
}

/* CLAUDE: Link-Defaults (Burgundy für bessere Sichtbarkeit) */
/* CLAUDE: Kontrast 7.79:1 (AAA) – optimale Zugänglichkeit */
a {
	color: var(--color-burgundy);               /* CLAUDE: Link-Farbe: Burgundy */
	text-decoration: underline;                 /* CLAUDE: Unterstrichen (Accessibility) */
	transition: color var(--transition-fast);   /* CLAUDE: Smooth Color-Transition bei Hover */
}

/* CLAUDE: Link-Hover (Heritage Gold) */
a:hover {
	color: var(--color-heritage-gold);          /* CLAUDE: Hover-Farbe: Heritage Gold */
}

/* CLAUDE: Image-Defaults (Responsive, kein Overflow) */
img {
	max-width: 100%;                            /* CLAUDE: Nie breiter als Container */
	height: auto;                               /* CLAUDE: Proportional skalieren */
	display: block;                             /* CLAUDE: Kein Inline-Spacing */
}

/* CLAUDE: Button-Reset (Browser-Defaults entfernen) */
button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

/* ========== HILFSKLASSEN ========== */

/* CLAUDE: Screen-Reader-Only (Accessibility) */
/* CLAUDE: Versteckt Text visuell, aber für Screen-Reader sichtbar */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* CLAUDE: Text-Alignment-Helfer */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* CLAUDE: Display-Helfer */
.hidden { display: none !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }

/* CLAUDE: Entry-Title – Seiten-Titel VERSTECKT auf allen Seiten (außer Ratgeber) */
/* CLAUDE: Ändern: display: block für Anzeige auf allen Seiten */
/* CLAUDE: Ratgeber-Seite überschreibt dies in page-ratgeber.php mit eigenem Styling */
.entry-title {
	text-align: left;
	margin: 1.25rem 0 1.25rem;
	display: none !important;
  }

  /* === Farb-Variablen (aus deiner Palette) ========================== */
:root{
	/* Grundfarben */
	--color-marble-white: #F6F4EF;   /* Hintergrund/Flächen */
	--color-dark-umber:   #3B2A1A;   /* Text/Headlines */
	--color-chestnut:     #7C4A21;   /* Akzent/Primär */
	--color-heritage-gold:#C19A6B;   /* Sekundär/Highlight */
  
	/* Abgeleitete Stati */
	--brand-primary:            var(--color-chestnut);
	--brand-primary-text:       #ffffff;
	--brand-primary-hover:      color-mix(in srgb, var(--brand-primary) 88%, #000);
	--brand-primary-active:     color-mix(in srgb, var(--brand-primary) 76%, #000);
  
	--brand-accent:             var(--color-heritage-gold);
	--brand-accent-text:        var(--color-dark-umber); /* Kontrast geprüft */
	--brand-accent-hover:       color-mix(in srgb, var(--brand-accent) 88%, #000);
	--brand-accent-active:      color-mix(in srgb, var(--brand-accent) 76%, #000);
  
	--btn-radius: 12px;
	--btn-shadow: 0 2px 8px rgba(0,0,0,.12);
	--btn-shadow-hover: 0 4px 14px rgba(0,0,0,.16);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 28%, #fff);
  }
  
  /* === Basis-Buttons ================================================= */
  .button,
  .wp-element-button,
  .wp-block-button__link {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.5rem;
	padding:.75rem 1.15rem;
	border-radius:var(--btn-radius);
	border:0;
	line-height:1;
	font-weight:600;
	text-decoration:none;
	cursor:pointer;
	transition:background .2s ease, box-shadow .2s ease, transform .05s ease, color .2s ease, border-color .2s ease;
	box-shadow:var(--btn-shadow);
	background:var(--color-marble-white);
	color:var(--color-dark-umber);
  }
  
  /* === Primär (Chestnut) ============================================ */
  .button-primary,
  .button--primary,
  .wp-element-button.is-style-primary,
  .wp-block-button__link:not(.is-style-outline) {
	background:var(--brand-primary);
	color:var(--brand-primary-text);
  }
  .button-primary:hover,
  .button--primary:hover,
  .wp-block-button__link:not(.is-style-outline):hover,
  .wp-element-button.is-style-primary:hover {
	background:var(--brand-primary-hover);
	box-shadow:var(--btn-shadow-hover);
  }
  .button-primary:active,
  .button--primary:active,
  .wp-block-button__link:not(.is-style-outline):active {
	background:var(--brand-primary-active);
	transform:translateY(1px);
  }
  
  /* Fokus sichtbar & zugänglich */
  .button:focus,
  .wp-element-button:focus,
  .wp-block-button__link:focus {
	outline:none;
	box-shadow:var(--btn-shadow), var(--focus-ring);
  }
  
  /* Disabled-Zustand */
  .button[disabled],
  .wp-element-button[disabled],
  .wp-block-button__link[aria-disabled="true"]{
	opacity:.55;
	cursor:not-allowed;
	box-shadow:none;
  }
  
  /* === Sekundär / Akzent-Füllung (Heritage Gold) ==================== */
  /* optionaler Modifier: .button--accent */
  .button--accent {
	background:var(--brand-accent);
	color:var(--brand-accent-text);
  }
  .button--accent:hover { background:var(--brand-accent-hover); box-shadow:var(--btn-shadow-hover); }
  .button--accent:active { background:var(--brand-accent-active); transform:translateY(1px); }
  
  /* === Outline-Variante auf Heritage Gold =========================== */
  /* nutzbar als .button--outline oder Gutenberg "is-style-outline" */
  .button--outline,
  .wp-block-button__link.is-style-outline {
	background:transparent;
	color:var(--brand-accent-text);
	border:2px solid var(--brand-accent);
	box-shadow:none;
  }
  .button--outline:hover,
  .wp-block-button__link.is-style-outline:hover {
	background:color-mix(in srgb, var(--brand-accent) 18%, #fff);
	color:var(--brand-accent-text);
	border-color:var(--brand-accent-hover);
  }
  
  /* === Platzierung in CTA-Bereichen (zentriert) ===================== */
  .faq-section__cta,
  .wp-block-buttons { text-align:center; }
  .faq-section__cta .button,
  .wp-block-buttons .wp-element-button { margin:.25rem .35rem; }