::selection { background:var(--marker); color:#000; } 
*       	{ box-sizing:border-box; margin:0; padding:0; }
img     	{ border:none; height:auto; max-width:100%; }
h1,h2,h3 	{ margin-bottom: 0.5em; }
p		 	{ margin-bottom: 1.5em; }
.cnt 		{ text-align:center; }
.beta, i 	{ background:var(--beta); font-style:inherit; } 
:root 		{
			-webkit-text-size-adjust: 100%; /* Apple rotation bug */
			font-size: 62.5%; /* 1.6rem = 16px */
			scroll-behavior: smooth; 
			/* #000 - #fff ohne Variable */
			--bg:#f0f0f0;
            --txt:#333;
			--nav: #ccc;
			--link: #000;
			--link-hover: #000;
			--blau-hell: #DEEBF7;
			--blau: #81B6E6;
			--btn-hover: #10385C;
			--marker:#FFF6C3;
			--beta:pink;
  			}  

/* font für Slogan 'So macht das Sinn'
@font-face {
	font-display: swap; 
	font-family: 'Caveat Brush';
	font-style: normal;
	font-weight: 400;
	src: url('caveat-brush-v12-latin-regular.woff2') format('woff2'); 
} */
			  
a {
	color: var(--link);
	transition: 0.3s ease;
	text-decoration: none;
	}
a:hover {
	color: var(--link-hover);
	text-decoration-line: underline;
	text-decoration-color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;}
.skip {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip:focus {
	position: static;
	width: auto;
	height: auto;
}			
:focus-visible  {
	outline: 3px solid var(--blau);
	outline-offset: 2px;
	background-color: var(--blau-hell);
	color: #000
	}
body {
	background: var(--bg);
	font-family: system-ui, -apple-system, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
	line-height: 1.5;
	font-size: 1.8rem;
	font-weight: 400;
	color: var(--txt);
	}	
.box_L { width: 90%; max-width: 1200px; height:auto; margin:0 auto; position:relative; }
.box_M { width: 90%; max-width:  900px; height:auto; margin:0 auto; position:relative; }
.box_S { width: 90%; max-width:  600px; height:auto; margin:0 auto; position:relative; }

.grid2 {
    display: grid;
	grid-template-columns: 1fr 1fr; 
    gap: 35px;
	}
.grid3 {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr; 
    gap: 25px;
	}
.grid4 {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 20px;	
	}
.grid-options {
	display: grid; 
	grid-template-columns: 1fr 4fr; 
	grid-template-rows: 100px; 
	row-gap: 10px; 
	column-gap: 15px;
	gap: 10px 15px;
	padding-top: 20px;
	background-color: #aaa;
	}
/* Inhalte zentrieren: jedes Element braucht diese Klasse */
.grid-item { 
	display: grid; /* flex */
	align-items: center;
	justify-items: center; /* justify-content: center */
  } 

header {
	background-color: #fff;
	padding: 50px 0 70px 0;
}
header .grid2 { column-gap: 100px; } /* machting: #hero */
.logo {
	width: 300px;
	height: auto;
}
nav {
	width: 100%;
	height: auto;
	position: relative;
	}
nav ul {
	list-style-type: none;
	/* text-transform: uppercase; */
	letter-spacing: 1px;
	margin-left: -20px;
	}
nav ul a {
	display: block; 
	padding: 7px 0 7px 20px;
	color: var(--nav);
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: 500;
	}
nav a:hover {
	color: var(--txt);
	background-image: url('../img/pfeil.svg');
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	text-decoration: none;
	}
#startseite li.start a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}
#studienberatung li.beratung a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}
#ueber li.ueber a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}	
#kundenfeedback li.feedback a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}	
#warum li.warum a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}			
#kontakt li.kontakt a { 
	color: var(--txt); 
	background-image: url('../img/pfeil.svg'); 
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	}





#hero { 
	column-gap: 100px;  /* machting: heading */
	/* align-items: center;  */
	padding-bottom: 80px;
}
#hero img { margin-top: -50px; }
.cover {
	background-color: aliceblue;
	background-image: url('../img/cover.jpg'); 
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	height: 700px;
	text-align: center;
}

#leistungen { margin-bottom: 80px; }
.cover_textbox .cover {
	background-image: url('../img/cat.jpg'); 
	}	
.textbox {
	margin-top: -50px;
	background: #fff;
	padding: 40px 40px 80px 40px;
	}
.blauer_punkt {
	/* list-style-type: '→ '; */
	padding-left: 20px;
	margin-bottom: 30px;
	}
.blauer_punkt li::marker {
	color: var(--blau);
}


#bewertung {
	margin: 100px 0;
}
#bewertung .grid2 {
	padding: 20px 30px;
	background-color: #fff;
	align-items: center;
	column-gap: 50px;
}
#bewertung h2 {
	font-size: 3rem;
	margin-bottom: 0;
}

#feedback {
	padding: 100px 0;
	background-image: url('../img/zitat.svg'); 
	background-position: 90% -3%;
	background-size: 300px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: #fff;
}
#feedback .grid2 {
	column-gap: 5vw; 
	margin: 50px auto; 
	}
.zitat_txt { font-style: italic; }
card {
	background-color: var(--bg);
	padding: 30px;
	outline: 2px solid var(--bg);
	outline-offset: 8px;
	}
.inhalt {
	padding: 100px 0;
	background-color: #fff;
}
.preise {
	width: 100%;
	margin-bottom: 30px;
	border-collapse: collapse;
}
.preise td {
	border-bottom: 1px solid #999;
	padding: 7px 0;
}
.preise td:last-child {
	text-align: right;
	white-space: nowrap;
}
.preise tr:last-child td {
	border-bottom: none;
}



h1 { 
	font-size: 4rem;
	line-height: 1.3;
	padding-top: 70px;
	}
h2 {
	font-size: 3rem;
	line-height: 1.2;
	}
h3 {
	font-size: 2.2rem;
	}
.btn, .btn_form {
	padding: 15px 30px;
	margin-top: 30px;
	border: none;
	background: var(--blau);
	color: #000;
	font-weight: 600;
	font-size: 1.8rem;
	display: inline-block;
	transition: all 0.5s ease;
	text-decoration: none;
	}
.btn::after {
	content: ' »';
	margin-left:0px;
	visibility: hidden;
	transition: all 0.5s ease;
	color: rgba(255,255,255,0)
	}
.btn:hover, .btn_form:hover {
	background: var(--btn-hover);
	color: #fff;
	text-decoration: none;
	}	
.btn:hover::after { 
	content: ' »';
	margin-left:20px;
	visibility: visible;
	color: rgba(255,255,255,1)
	}

.sub {
	font-style: italic;
	font-size: 1.6rem;
}

footer {
	background-color: var(--blau);
	/* padding-top: 8vw; */
	padding-top: clamp(2rem, 4rem + 2vw, 9rem);
}
.logo-sw {
	width: 300px;
	height: auto;
	margin-bottom: 4vw;
}
.fusszeile {
	background-color: #00000066;
	color: #ffffffaa;
	font-size: 1.6rem;
	padding: 10px 0;
}
footer ul {
	list-style-type: none;
}
footer a {
	color: var(--txt);
	text-decoration: none;
	display: block;
}
footer nav a { 
	padding: 5px 0 5px 20px;
	color: var(--txt);
	text-transform: none;
}
footer nav a:hover {
	color: #fff;
	background-image: url('../img/pfeil.svg');
	background-position: left center;
	background-size: 12px 12px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	text-decoration: none;
}

.head_S 	{ font-size: 2rem }  
.head_M 	{ font-size: 3rem }  
.head_L 	{ font-size: 5rem }  
.spacer_S 	{ height: 50px; }
.spacer_M 	{ height: 100px; }
.spacer_L 	{ height: 150px; }
.mtop_S		{ margin-top: 50px; }
.mtop_M		{ margin-top: 100px; }
.mtop_L		{ margin-top: 150px; }
.mbot_S		{ margin-bottom: 50px; }
.mbot_M		{ margin-bottom: 100px; }
.mbot_L		{ margin-bottom: 150px; }


input[type=password],
input[type=email],
input[type=tel], 
input[type=text],
input[type=number],
textarea {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 15px;
	font-size: 1.6rem;
	margin: 3px 0 20px 0;
	}
input:focus::placeholder { color: var(--hellgrau) }



/* ------------------------- Anker mit JS einblenden */
#top {
	position: fixed;
	bottom: 40px;
	right: 5%;
	z-index: 98;
	display: none;  /* einblenden per JS */
    background: none;
    width: 60px;
    height: auto;
    padding: 15px;
    font-size: 4rem;
    text-decoration: none;
    /* transform: rotate(270deg); */
    color: var(--text);
	}	
#top:hover {
	color: var(--link);
}


	
/* --- RESPONSIVE ------------------------------------- */
@media screen and (min-width: 1800px) {
.cover { height: 900px; }

}
@media screen and (max-width: 800px) {
	h1 { font-size: 3.8rem; padding-top: 30px; }
	h2 { font-size: 3rem }
	.grid2, .grid3, .grid4 { grid-template-columns: 1fr; }

header { padding: 20px 0 30px 0; }
#hero { padding-bottom: 60px; }
#hero img { margin-top: 0px; }
nav ul { margin-left: 0px; }	
header .grid2 { row-gap: 0px; } /* navi höher ans Logo */
.textbox {
	margin-top: -30px;
	padding: 20px 10px;
	}
.cover { height: 400px; }


} /*  800  */