/**
 * Sticky Kontaktbereich – CSS
 * Fixierte Kontakt-Buttons (Telefon & E-Mail) unten rechts
 *
 * @package Denkmalschutz
 */

/* ========================================
   CLAUDE: CSS Custom Properties (Variablen)
   CLAUDE: Ändern: Werte anpassen für andere Standard-Styles
   ======================================== */

/* CLAUDE: Container-Root – Custom Properties werden via Inline-Styles überschrieben */
/* CLAUDE: Fallback-Werte hier definieren, falls Customizer-Werte fehlen */
.sc-container {
	/* CLAUDE: Button-Größe (Desktop) – wird via Customizer überschrieben */
	--sc-btn-size: 56px;

	/* CLAUDE: Button-Größe (Mobile) – automatisch kleiner */
	--sc-btn-size-mobile: 48px;

	/* CLAUDE: Abstand zwischen Buttons – je nach Layout */
	--sc-gap: 12px;
}

/* ========================================
   CLAUDE: Base Container Styles
   CLAUDE: Fixierte Position unten links
   ======================================== */

/* CLAUDE: Container – Position fixed unten rechts */
/* CLAUDE: Ändern: position oder default-Positionen anpassen */
.sc-container {
	/* CLAUDE: Fixed Positioning – bleibt beim Scrollen sichtbar */
	position: fixed;

	/* CLAUDE: Position unten rechts – via Inline-Styles überschrieben */
	/* CLAUDE: bottom berücksichtigt Safe-Area-Insets (iOS-Safari) */
	bottom: 16px;
	right: 16px;

	/* CLAUDE: Z-Index – über Content, unter Cookie-Banner */
	/* CLAUDE: Ändern: z-index anpassen für andere Layering-Logik */
	z-index: 9999;

	/* CLAUDE: Flexbox-Layout – für vertikale/horizontale Anordnung */
	display: flex;

	/* CLAUDE: Pointer-Events – nur Buttons sind klickbar, Container nicht */
	pointer-events: none;
}

/* CLAUDE: Buttons – Pointer-Events wieder aktivieren */
.sc-container .sc-button {
	pointer-events: auto;
}

/* ========================================
   CLAUDE: Layout-Modi
   CLAUDE: Vertikal (übereinander) oder Horizontal (nebeneinander)
   ======================================== */

/* CLAUDE: Layout: Vertikal (Default) – Buttons übereinander */
/* CLAUDE: Ändern: gap für anderen Abstand zwischen Buttons anpassen */
.sc-container--vertical {
	flex-direction: column;
	gap: var(--sc-gap);
}

/* CLAUDE: Layout: Horizontal – Buttons nebeneinander */
/* CLAUDE: Ändern: gap für anderen Abstand zwischen Buttons anpassen */
.sc-container--horizontal {
	flex-direction: row;
	gap: var(--sc-gap);
}

/* ========================================
   CLAUDE: Button Styles
   CLAUDE: Rund, Hintergrundfarbe, Icon-Zentrierung
   ======================================== */

/* CLAUDE: Button – Basis-Styles */
/* CLAUDE: Ändern: border-radius für andere Form anpassen (z.B. 8px für abgerundetes Rechteck) */
.sc-button {
	/* CLAUDE: Display & Größe – via Custom Property */
	display: flex;
	width: var(--sc-btn-size);
	height: var(--sc-btn-size);

	/* CLAUDE: Zentrierung – Icon horizontal & vertikal zentriert */
	align-items: center;
	justify-content: center;

	/* CLAUDE: Runde Form – border-radius 50% */
	border-radius: 50%;

	/* CLAUDE: Hintergrundfarbe – via Inline-Styles überschrieben */
	background-color: var(--sc-phone-bg-color, #B89A5A);

	/* CLAUDE: Icon-Farbe – via CSS Custom Property gesteuert */
	color: var(--sc-phone-icon-color, #FFFFFF);

	/* CLAUDE: Border entfernen – kein Rahmen */
	border: none;

	/* CLAUDE: Text-Decoration entfernen – keine Unterstreichung */
	text-decoration: none;

	/* CLAUDE: Cursor – Pointer bei Hover */
	cursor: pointer;

	/* CLAUDE: Transition – sanfte Übergänge für Transform & Box-Shadow */
	/* CLAUDE: Ändern: transition-duration für schnellere/langsamere Animation anpassen */
	transition: transform 0.2s ease, box-shadow 0.2s ease;

	/* CLAUDE: Flex-Shrink deaktivieren – Button-Größe bleibt konstant */
	flex-shrink: 0;
}

/* CLAUDE: E-Mail-Button – individuelle Farben via Custom Properties */
.sc-button--email {
	background-color: var(--sc-email-bg-color, #B89A5A);
	color: var(--sc-email-icon-color, #FFFFFF);
}

/* CLAUDE: Button-Icon-Wrapper – für bessere Icon-Steuerung */
/* CLAUDE: Ändern: display für andere Icon-Logik anpassen */
.sc-button__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

/* CLAUDE: SVG-Icons – currentColor übernehmen */
/* CLAUDE: Ändern: width/height für größere/kleinere Icons anpassen */
.sc-button__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
}

/* ========================================
   CLAUDE: Schatten (optional via Customizer)
   CLAUDE: Box-Shadow für bessere Sichtbarkeit
   ======================================== */

/* CLAUDE: Schatten-Modifier – wird via Template-Klasse aktiviert */
/* CLAUDE: Ändern: box-shadow-Werte für intensiveren/subtileren Schatten anpassen */
.sc-container--shadow .sc-button {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* CLAUDE: Schatten bei Hover/Focus – verstärkt */
/* CLAUDE: Ändern: box-shadow-Werte für intensiveren/subtileren Hover-Schatten anpassen */
.sc-container--shadow .sc-button:hover,
.sc-container--shadow .sc-button:focus {
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

/* ========================================
   CLAUDE: Hover & Focus States
   CLAUDE: Skalierung & Schatten-Verstärkung
   ======================================== */

/* CLAUDE: Hover-Animation-Modifier – wird via Template-Klasse aktiviert */
/* CLAUDE: Ändern: transform scale() für stärkere/schwächere Vergrößerung anpassen */
.sc-container--hover-anim .sc-button:hover,
.sc-container--hover-anim .sc-button:focus {
	transform: scale(1.05);
}

/* CLAUDE: Focus-Outline – Accessibility für Keyboard-Navigation */
/* CLAUDE: Ändern: outline-Farbe für andere Markenfarbe anpassen */
.sc-button:focus {
	outline: 2px solid #B89A5A;
	outline-offset: 2px;
}

/* CLAUDE: Focus-Visible (nur bei Tastatur-Navigation) – moderne Browser */
/* CLAUDE: Ändern: outline-Farbe für andere Markenfarbe anpassen */
.sc-button:focus-visible {
	outline: 2px solid #B89A5A;
	outline-offset: 2px;
}

/* CLAUDE: Focus ohne Visible (Maus-Klick) – Outline entfernen */
.sc-button:focus:not(:focus-visible) {
	outline: none;
}

/* ========================================
   CLAUDE: Responsive Breakpoints
   CLAUDE: Mobile < 768px – kleinere Buttons
   ======================================== */

/* CLAUDE: Mobile – kleinere Button-Größe */
/* CLAUDE: Ändern: Breakpoint (max-width) für andere Definition von Mobile anpassen */
@media (max-width: 767px) {
	.sc-container {
		/* CLAUDE: Kleinere Button-Größe auf Mobile */
		--sc-btn-size: var(--sc-btn-size-mobile);

		/* CLAUDE: Kleinerer Abstand zwischen Buttons auf Mobile */
		--sc-gap: 8px;
	}
}

/* ========================================
   CLAUDE: Safe-Area-Insets (iOS Safari)
   CLAUDE: Unterstützung für Notch & Home-Indicator
   ======================================== */

/* CLAUDE: Safe-Area-Insets – bereits in Inline-Styles via Template berücksichtigt */
/* CLAUDE: calc(var(--offset-bottom) + env(safe-area-inset-bottom, 0px)) */
/* CLAUDE: Keine weiteren Anpassungen nötig */

/* ========================================
   CLAUDE: Reduced Motion (Accessibility)
   CLAUDE: Keine Animationen bei prefers-reduced-motion
   ======================================== */

/* CLAUDE: Reduced Motion – deaktiviert Transitions & Transforms */
/* CLAUDE: Ändern: Weitere Animationen deaktivieren, falls gewünscht */
@media (prefers-reduced-motion: reduce) {
	.sc-button {
		/* CLAUDE: Keine Transition – sofortige Zustandsänderungen */
		transition: none;
	}

	/* CLAUDE: Keine Hover-Animation – scale() deaktiviert */
	.sc-container--hover-anim .sc-button:hover,
	.sc-container--hover-anim .sc-button:focus {
		transform: none;
	}
}

/* ========================================
   CLAUDE: High Contrast Mode (Windows)
   CLAUDE: Bessere Sichtbarkeit in High-Contrast-Modi
   ======================================== */

/* CLAUDE: High Contrast – Border für bessere Sichtbarkeit */
/* CLAUDE: Ändern: border-Farbe für andere High-Contrast-Logik anpassen */
@media (prefers-contrast: high) {
	.sc-button {
		/* CLAUDE: Border für bessere Abgrenzung */
		border: 2px solid currentColor;
	}
}

/* ========================================
   CLAUDE: Print Styles
   CLAUDE: Buttons im Druck verstecken
   ======================================== */

/* CLAUDE: Print – Sticky-Kontakt nicht drucken */
@media print {
	.sc-container {
		display: none;
	}
}