html {
	font-feature-settings: normal;
	font-variation-settings: normal;
}

body {
	background-color: #eee;
	max-width: 1920px;

	font-family: 'DM Sans';
	--screen-margin: 3.5rem;
	--body-content-max: 60rem;

	--footer-bgc: 200 15% 20%;
	--footer-col: 45 30% 98%;

	--color-blue: hsl(214, 90%, 32%);
	--color-white: hsl(0, 0%, 100%);
	--color-gray-800: hsl(220, 15%, 18%);
	--color-text-primary: var(--color-gray-800);
	--color-bg-primary: var(--color-white);
	--font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
	--font-size-base: 1rem;
	--font-weight-medium: 500;
	--line-height-normal: 1.5;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-6: 1.5rem;
	--radius-lg: 0.75rem;
	--transition-base: 250ms ease;
}
@media screen and (max-width: 50rem) {
	body {
		--screen-margin: 1rem;
	}
}


:root {
  /* Primary Colors - Blue Palette */
  --color-blue: hsl(214, 90%, 32%);          /* #083099 base */
  --color-blue-dark: hsl(214, 90%, 22%);
  --color-blue-light: hsl(214, 70%, 50%);
  --color-blue-lighter: hsl(214, 60%, 92%);
  --color-blue-pale: hsl(214, 40%, 96%);

  /* Warm Cream Palette */
  --color-cream: hsl(35, 50%, 96%);
  --color-cream-dark: hsl(35, 40%, 90%);
  --color-cream-darker: hsl(35, 30%, 85%);

  /* Terracotta Accent */
  --color-terracotta: hsl(18, 55%, 54%);
  --color-terracotta-dark: hsl(18, 55%, 44%);
  --color-terracotta-light: hsl(18, 55%, 70%);

  /* Neutral Colors */
  --color-white: hsl(0, 0%, 100%);
  --color-gray-50: hsl(220, 20%, 98%);
  --color-gray-100: hsl(220, 15%, 95%);
  --color-gray-200: hsl(220, 12%, 88%);
  --color-gray-300: hsl(220, 10%, 75%);
  --color-gray-400: hsl(220, 8%, 55%);
  --color-gray-500: hsl(220, 8%, 45%);
  --color-gray-600: hsl(220, 10%, 35%);
  --color-gray-700: hsl(220, 12%, 25%);
  --color-gray-800: hsl(220, 15%, 18%);
  --color-gray-900: hsl(220, 20%, 10%);

  /* Semantic Colors */
  --color-text-primary: var(--color-gray-800);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-cream);
  --color-bg-tertiary: var(--color-blue-pale);

  /* Typography */
  --font-family-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 hsla(220, 20%, 10%, 0.05);
  --shadow-md: 0 4px 6px -1px hsla(220, 20%, 10%, 0.08),
               0 2px 4px -2px hsla(220, 20%, 10%, 0.05);
  --shadow-lg: 0 10px 15px -3px hsla(220, 20%, 10%, 0.08),
               0 4px 6px -4px hsla(220, 20%, 10%, 0.05);
  --shadow-xl: 0 20px 25px -5px hsla(220, 20%, 10%, 0.1),
               0 8px 10px -6px hsla(220, 20%, 10%, 0.05);
  --shadow-soft: 0 4px 20px hsla(214, 90%, 32%, 0.1);
  --shadow-card: 0 2px 8px hsla(220, 20%, 10%, 0.06),
                 0 8px 24px hsla(220, 20%, 10%, 0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* Container */
  --container-max: 1200px;
  --container-padding: var(--space-6);
}

body > h1 {
	position: absolute;
}
body.pagets__index > main {
	margin-block-start: -6rem;
	padding: 0;
}
@media screen and (max-width: 40rem) {
	body.pagets__index > main {
		margin-block-start: 0;
	}
}



#logo {
	display: flex;
	align-items: center;
}

#logo > a {
	margin: 0;
	top: 0;
	left: 5rem;
	background: transparent url(../img/praxis-fuer-physiotherapie-robert-matuscheski-bad-homburg-logo.svg) center center / 100% auto no-repeat;
	width: 8rem;
	height: 6rem;
	translate: 0;
}
@media screen and (max-width: 90rem) {
	#logo {
		width: 8rem;
		height: 6rem;
	}
}
@media screen and (max-width: 78rem) {
	#logo > a {
		left: 2rem;
	}
}
@media screen and (max-width: 50rem) {
	#logo > a {
		left: 1rem;
	}
}


#header {
	border-bottom: 1px solid hsl( var(--footer-bgc) / .1);
}

#header .header {
	grid-template-columns: 16rem 1fr;
}

#nav {
	padding: 2rem;
	height: 2rem;
	padding: 2rem 3rem;
}

#nav .primary {
	width: unset;
	translate: -2rem 0;
}

#nav ul {
	border-radius: 0 .75rem .75rem .75rem;
}

menu a {
	font-size: 1.1rem;
	padding: .25rem .125rem;
}

menu.dd li > [aria-haspopup="true"] {
	padding-right: 1.25rem;
}
menu.dd li > [aria-haspopup="true"] + button {
	top: .6rem;
	right: .125rem;
}

menu .dropdown {
	min-width: 25rem;
	top: 2.125rem;
}
menu .dropdown a {
	padding: .5rem 1.5rem;
}

.special a {
	padding: .5rem 2rem;
	background-color: #08329B;
	color: #fff;
	border-radius: .75rem;
	border: 2px solid #08329B;
	translate: 0 calc( -.25rem - 2px );
	transition: background-color,color .1s ease-in-out;

	&:hover {
		color: #08329B;
	}
}

#mainMenuOpen {
	top: 1rem;
	font-size: 3rem;
}

@media screen and (max-width: 40rem) {
	#nav menu.dd {
		width: 100%;
		padding-block-start: 6rem;
		translate: 0;
	}
	#nav menu li {
		margin: 0 1.5rem;
	}
	menu.dd li > [aria-haspopup="true"] + button {
		top: .125rem;
		right: 0;
	}
	#nav ul {
		margin: 0 -1.5rem;
	}
	menu .dropdown a {
		padding: .5rem;
	}
	.special a {
		text-align: center;
	}
}



#footer {
	font-size: inherit;
	text-shadow: unset;
	background-color: #2B363B;
	color: hsl(var(--footer-col) / .7);
}

#footer .center {
	grid-column: screen;
	width: 100%;
	margin: 0 auto;
	padding: 0 .5rem;
}
/* footer menus */

#footer .menus {
	padding: 2rem var(--screen-margin);
	font-size: 1rem;
}

#footer .menus .center {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#footer .menus .center > :nth-child(1){
	text-align: left;
	display: flex;
	align-items: center;
}
#footer .menus .center > :nth-child(2){
	text-align: center;
}
#footer .menus .center > :nth-child(3){
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#footer a {
	text-decoration: none;
	color: inherit;
}

#footer .infos img {
	max-width: 12rem;
}

#footer .menus,
#footer .menus h3 {
	font-size: inherit;
}

#footer .bottom {
	font-size: inherit;
	background-color: inherit;
	color: inherit;
	margin: 1rem var(--screen-margin);
	border-top: 1px solid hsl( var(--footer-col) / .1);
	padding: 2rem 0 1rem;
}

/* footer bottom */

#footer .bottom {
	position: relative;
	/*top: 2.5rem;*/
}
#footer .bottom a {
	text-decoration: none;
	color: inherit;
}
#footer .bottom a:hover {
	color: #fff;
}

#footer .bottom .center {
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-areas:
		"copy social legal";
}

#footer .legal {
	grid-area: legal;
	justify-self: end;
}
#footer .social {
	grid-area: social;
}
#footer .copy {
	grid-area: copy;
}

@media screen and (max-width: 70rem) {
	#footer .bottom {
		padding: 1.5rem 1rem;
		font-size: .95rem;
		font-weight: 500;
	}
	#footer .bottom .center {
		grid-template-columns: 1fr;
		grid-template-areas:
			"legal"
			"social"
			"copy";
	}
	#footer .legal,
	#footer .copy {
		justify-self: center;
		text-align: center;
	}
	#footer .copy {
		margin-top: 1rem;
	}
	#footer .social {
		margin-block: 2rem;
	}
	#footer .bottom {
		font-size: 1rem;
		color: var(--color-text-invert);
	}
}

@media screen and (max-width: 50rem) {
	#footer .menus {
		padding: 2rem 0;
	}
	#footer .menus .center {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	#footer .menus .center  > :nth-child(1),
	#footer .menus .center  > :nth-child(2),
	#footer .menus .center  > :nth-child(3) {
		justify-content: center;
	}
	#footer .bottom {
		margin: 1rem 2rem;
	}
}


#footer .bottom ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
}
#footer .bottom li {
	margin: 0;
}
#footer .bottom li a {
	display: inline-block;
	transition: color .1s ease-in-out;
}


.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-family-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	border-radius: var(--radius-lg);
	transition: all var(--transition-base);
	cursor: pointer;
	border: 2px solid transparent;
	text-decoration: none;
}

.btn.primary {
  background-color: var(--color-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-md), 0 4px 12px hsla(214, 90%, 32%, 0.25);
}

.btn.secondary {
  background-color: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}

.rm-hero {
	background: linear-gradient(135deg, hsl(223 60% 95%) 0%, hsl(210 60% 97%) 50%, hsl(38 70% 97%) 100%);
}

.rm-hero .txt {
	margin-block: max(1rem, 2vw);
	margin-inline: max(1rem, 4vw) 0;
	padding: max(1rem, 4vw);
	justify-items: left;
}
.rm-hero .img {
	margin-block: max(2rem, 6vw);
	margin-inline: 0 max(2rem, 12vw);
}
.rm-hero img {
	border-radius: 2rem;
}

.rm-hero h2 {
	margin-block-end: 1rem;
}

.rm-hero p + p {
	margin-block-start: 1rem;
}

.rm-hero a + a {
	margin: 1rem .5rem;
}
@media screen and (max-width: 40rem) {
	.rm-hero .img {
		margin-block: max(2rem, 6vw);
		margin-inline: max(2rem, 12vw);
	}
	.rm-hero .txt {
		margin-inline: max(1rem, 4vw);
		justify-items: center;
		text-align: center;
	}
}




.height-full {
	height: auto;
	min-height: 100vh;
}

body > aside {
	background-color: var(--color-terracotta-light);
	color: #fff;
	font-weight: 600;
	font-size: var(--font-size-xl);
}