* {
  box-sizing: border-box;
}

html, body {
    height: 100%;
}

.body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    min-height: 100%; /* instead of 100vh */
	display: flex;
    flex-direction: column;      /* stack main + footer vertically */
    background-color: #000000;
	align-items: center;
}

/* ---------------- FLOAT BUTTPN ---------------- */

.float-btn-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
}

/* Button container */
.float-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 48px;              /* initial circle */
    height: 48px;
    border-radius: 50%;
    overflow: visible;
    text-decoration: none;
}

/* Cog icon fixed size */
.float-btn .cog {
    flex: none;                   /* prevent SVG from shrinking */
    width: 34px;
    height: 34px;
    z-index: 2;
    transition: transform 0.3s ease;
	color: #333;
}

/* Cog on the left */
.float-btn .cog {
    position: relative;
    z-index: 2;               /* above background */
    margin-left: 7px;
    transition: transform 0.3s ease;
	color: #333;
}

/* Expanding background behind cog and text */
.float-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;              /* start same as button */
    height: 48px;
    background: #fff;
    border-radius: 24px;
    transition: width 0.3s ease;
    z-index: 0;               /* behind cog and text */
}

/* On hover, expand background to fit text */
.float-btn:hover::before {
    width: calc(35px + 8px + 0.9rem*10); /* initial 48px + margin + approx text width */
    /* For dynamic width: you can also use width:auto with JS or CSS flex (see note below) */
}

.float-btn:hover .cog {
    animation: spin 2s linear infinite;
}

/* Text slides out from behind cog */
.btn-text {
    position: relative;
    z-index: 1;
    margin-left: 8px;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

/* On hover: slide text fully into place */
.float-btn:hover .btn-text {
    opacity: 1;
    transform: translateX(0);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------------- HEADER ---------------- */

.header-buffer {
    height: 10rem;
    width: 100%;
}

/* ---------------- MAIN ---------------- */

.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;                     /* grows to push footer to bottom */
	max-width: 600px;
}

/* ---------------- LOGO/MID ---------------- */

.logo {
	max-width: 100%;
}

.logo img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* ---------------- SOCIAL/CONTACT ---------------- */

.social {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 1vh;
}

.social img {
	text-align: center;
	height: 3rem;
	margin-top: 20px;
}

/* ---------------- MAIL FORM ---------------- */

/* Overlay */
.overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* Popup */
.popup {
    background: #ffffff;
    padding: 25px;
	width: 90%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    animation: fadeIn 0.25s ease-out;
    box-shadow: 0px 10px 40px rgba(0,0,0,0.4);
}

/* Close button */
.popup .close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* Inputs */
.input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 14px;
}

.input-wrapper input,
.input-wrapper textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/* Clear button */
.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #999;
  cursor: pointer;
  display: none;
}

.input-wrapper input:not([readonly]):not([disabled]),
.input-wrapper textarea:not([readonly]):not([disabled]) {
  padding-right: 30px; /* space for clear button */
}

/* Send button */
/* Normal button style */
.send-btn {
    width: 100%;
	margin-top: 12px;
	padding: 12px;
    background: #0078F2;
    border: none;
    color: white;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Pulse background color */
@keyframes colorPulse {
    0%   { background-color: #0078F2; }
    50%  { background-color: #005FCC; } /* slightly darker blue */
    100% { background-color: #0078F2; }
}

.send-btn.pulsing {
    animation: colorPulse 1s infinite;
}

.send-btn:hover {
    background: #005FCC;
}

/* Response box */
.response-box {
    display: none;
    background: #f0f0f0;
    padding: 12px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 13px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    white-space: pre-wrap;
    color: #333; /* optional: match text color */
}

.visible {
    display: block;
	margin-top: 0px;
	margin-bottom: 0px;
	white-space: pre-wrap;
	margin-left: 1px;
	font-size: 0.8em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    color: #333; /* optional: match text color */
}

.large-textarea {
    width: 100%;
    height: 200px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: 14px;                 /* Match your site font size */
    padding: 8px;                     /* Optional padding */
	width: 100%;
	height: 200px;
	resize: vertical; /* allow user to resize vertically */
}

.notice {
    font-size: 0.8em;
    color: #555;
	margin-left: 1px;
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------------- FOOTER ---------------- */

.footer {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    background: transparent;
}


/* ---------------- SYSLOGOS ---------------- */

.sys-svg {
    display: block;
    fill: #fff;

    width: 100%;     /* scale automatically */
    height: auto;    /* keep aspect ratio */
    max-width: 120px; /* optional: control maximum size */
}

/* Default colors */
#bosch-logo-text {
    fill: #ffffff;
    transition: fill 0.3s ease; /* smooth animation */
}

#bosch-logo-anker {
    fill: #ffffff;
}

/* Hover effect on the figure */
.syslogos figure:hover #bosch-logo-text {
    fill: #ff3348; /* brighter red on hover (change as needed) */
}

.syslogos-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
}

.syslogos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(8px, 2vw, 15px); /* dynamic size */
    max-width: 1000px;
    width: 100%;
}

/* Each logo figure */
.syslogos figure {
    margin: 0;
    padding: 0;
}

/* Logo images */
.syslogos figure img {
    height: clamp(6px, 2vw, 32px); /* dynamic size */
    width: auto;
    filter: grayscale(100%);
    transition: 0.25s ease-in-out;
}

/* Hover effect */
.syslogos figure:hover img {
    filter: grayscale(0%);
}


/* Responsive layout */
#logo {
	display:block;
	gap:0.5rem;
	}
	
	
:root {
    --vh: 100%;
}

@media screen and (max-width: 900px) {
	
	.body {
    min-height: calc(var(--vh, 1vh) * 100);
    }

	.main {
		margin: auto;
		padding: 10px;
		float: left;
		width: 100%;
	}

	.logo {
		text-align: center;
		max-width: 100%;
	}

	.logo img {
		text-align: center;
		max-width: 80%;
	}

	.social img {
		height: 3rem;
	}

	.syslogos {
	width: 90%;
	}
    
	.syslogos figure img {
		height: 1rem;
	}
    .sys-svg {
        max-width: 70px;
    }
}