html { scroll-behavior: smooth; scroll-padding-top: calc(var(--spa) / 2); }
body { min-width: 375px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; min-height: 100.0dvh;
font-size: clamp(18px, 1.000vw, 22px); color: var(--txt); line-height: 1.25; }
:root { --spa: min(5.00vw, 5.00rem);
--cta: rgba(224 138 051 / 1.00); /* #E08A33 */
--sofa: rgba(016 134 140 / 1.00); /* #10868C */
--txt: rgba(090 090 090 / 1.00); /* #5A5A5A */
--white: rgba(255 255 255 / 1.00);
--black: rgba(020 020 020 / 1.00); }
*, *::before, *::after
{ box-sizing: border-box; margin: 0; padding: 0; border-width: 0; border-style: solid; border-color: rgb(from var(--txt) r g b / 25.00%); }
img { display: block; width: 100%; height: auto; }
* { accent-color: var(--sofa); caret-color: var(--cta); }
::marker { color: var(--cta); }
::-moz-selection { background-color: var(--sofa); color: white; }
::selection { background-color: var(--sofa); color: white; }
/* =================================
Layout
================================= */
header, main, footer { position: relative; width: min(96.00%, 72.00em); margin: 0 auto; }
header { height: 2.50em; display: grid; place-content: center; color: white; }
main { border-radius: var(--spa) var(--spa) calc(var(--spa) / 2) calc(var(--spa) / 2); background-color: var(--white);
section { padding: var(--spa); display: flex; gap: var(--spa); flex-flow: row wrap; justify-content: space-between;
> * { flex: 1 1 12.50em; overflow: hidden;
+ * { flex: 1 1 25.00em; }}}
> .intro { height: clamp(32.00em, calc(100.0dvh - 2.50em), 45.00em); padding: calc(var(--spa) / 2);
> div { position: relative; height: 100.0%; padding-top: calc(var(--spa) * 2); display: grid; gap: 1.00em; place-content: space-between start; border-radius: calc(var(--spa) / 2) calc(var(--spa) / 2) 2.00em 0; overflow: hidden;
background: url('img/LernRaum_Hero.webp') no-repeat center; background-size: cover;
> .txt { width: max(17.50em, 50.00%); margin: 0 var(--spa);
> img { width: max(15.00em, 62.00%); margin-bottom: 2.00em; }}
> .sub { position: relative; width: min(100.0%, 38.00em); padding: 1.50em 1.50em 0 calc(var(--spa) / 2); border-radius: 0 2.00em 0 0; background-color: var(--white);
&::before, &::after
{ content: ''; position: absolute; width: 2.00em; aspect-ratio: 1; background-color: var(--white);
clip-path: polygon(0% 0%, 0.0152% 1.7452%, 0.0609% 3.4899%, 0.137% 5.2336%, 0.2436% 6.9756%, 0.3805% 8.7156%, 0.5478% 10.4528%, 0.7454% 12.1869%, 0.9732% 13.9173%, 1.2312% 15.6434%, 1.5192% 17.3648%, 1.8373% 19.0809%, 2.1852% 20.7912%, 2.563% 22.4951%, 2.9704% 24.1922%, 3.4074% 25.8819%, 3.8738% 27.5637%, 4.3695% 29.2372%, 4.8943% 30.9017%, 5.4481% 32.5568%, 6.0307% 34.202%, 6.642% 35.8368%, 7.2816% 37.4607%, 7.9495% 39.0731%, 8.6455% 40.6737%, 9.3692% 42.2618%, 10.1206% 43.8371%, 10.8993% 45.399%, 11.7052% 46.9472%, 12.538% 48.481%, 13.3975% 50%, 14.2833% 51.5038%, 15.1952% 52.9919%, 16.1329% 54.4639%, 17.0962% 55.9193%, 18.0848% 57.3576%, 19.0983% 58.7785%, 20.1364% 60.1815%, 21.1989% 61.5661%, 22.2854% 62.932%, 23.3956% 64.2788%, 24.529% 65.6059%, 25.6855% 66.9131%, 26.8646% 68.1998%, 28.066% 69.4658%, 29.2893% 70.7107%, 30.5342% 71.934%, 31.8002% 73.1354%, 33.0869% 74.3145%, 34.3941% 75.471%, 35.7212% 76.6044%, 37.068% 77.7146%, 38.4339% 78.8011%, 39.8185% 79.8636%, 41.2215% 80.9017%, 42.6424% 81.9152%, 44.0807% 82.9038%, 45.5361% 83.8671%, 47.0081% 84.8048%, 48.4962% 85.7167%, 50% 86.6025%, 51.519% 87.462%, 53.0528% 88.2948%, 54.601% 89.1007%, 56.1629% 89.8794%, 57.7382% 90.6308%, 59.3263% 91.3545%, 60.9269% 92.0505%, 62.5393% 92.7184%, 64.1632% 93.358%, 65.798% 93.9693%, 67.4432% 94.5519%, 69.0983% 95.1057%, 70.7628% 95.6305%, 72.4363% 96.1262%, 74.1181% 96.5926%, 75.8078% 97.0296%, 77.5049% 97.437%, 79.2088% 97.8148%, 80.9191% 98.1627%, 82.6352% 98.4808%, 84.3566% 98.7688%, 86.0827% 99.0268%, 87.8131% 99.2546%, 89.5472% 99.4522%, 91.2844% 99.6195%, 93.0244% 99.7564%, 94.7664% 99.863%, 96.5101% 99.9391%, 98.2548% 99.9848%, 100% 100%, 0% 100%); }
&::before { bottom: 100.0%; left: 0; }
&::after { bottom: 0; left: 100.0%; }}}}
#start { background-color: rgb(from var(--cta) r g b / 20.00%);
> div { display: grid; place-content: center; }}
#ansatz { > * { flex: 1 1 20.00em; + * { flex: 1 1 20.00em; }}}
#ansatz + *,
#ansatz + * + * { padding-top: 0;> * { flex: 1 1 20.00em; + * { flex: 1 1 20.00em; }}}
#about { background-color: rgb(from var(--sofa) r g b / 10.00%);
> figure img { mask-image: linear-gradient(white 50.00%, transparent 95.00%); }
> div { display: grid; place-content: center; }}
blockquote { padding: var(--spa); display: grid; place-content: center;
> img { width: max(12.50em, 38.00%); margin: 0 auto var(--spa); }
> p { text-align: center; color: var(--sofa); }}
}
footer { margin: var(--spa) auto; padding: var(--spa); display: flex; gap: 2.00em; flex-flow: row wrap; justify-content: space-between; border-radius: calc(var(--spa) / 2); background-color: var(--sofa);
> div { font-size: 0.85em; flex: 1 1 auto; display: flex; gap: 1.00em; flex-flow: column wrap; justify-content: space-between;
* { color: white; }
p > span { font-size: 1.25em; letter-spacing: 0.03125em; }}}
/* --- HH + Navi + Top --- */
.hh { position: fixed; z-index: 4; top: calc(100.0dvh - 5.50em); right: 1.00em; width: 4.50em; aspect-ratio: 1; display: none; place-content: center; border-radius: 100.0%; background-color: var(--sofa);
&::before { content: 'menu_open'; color: white; scale: 3.0; }}
nav { position: absolute; top: calc(var(--spa) / 4); right: calc(var(--spa) / 4); font-size: 0.90em; transition: scale 240ms ease-in-out; transform-origin: 100.0% 100.0%;
> div { padding: 0.50em; display: flex; place-items: center; border-radius: 5.00em; background-color: rgb(from var(--white) r g b / 60.00%);
> a { height: 2.00em; margin: 0; padding: 0 0.75em; display: grid; place-content: center; border-radius: 2.50em;
&[href^="#kontakt"] { margin-left: 0.375em; padding: 0 1.00em; background-color: var(--cta); color: white; }
&:not([href^="#kontakt"]):hover { background-color: rgb(from var(--white) r g b / 90.00%); }}}}
nav.is-open { scale: 1; z-index: 3; }
body:has(nav.is-open) { position: fixed; }
body:has(nav.is-open) .hh::before { content: 'close'; }
/* --- Legal --- */
.legal { p { font-size: 0.90em; line-height: 1.25; max-width: none;
& > span { display: inline-block; width: 4.00em; }
&.sec { font-size: 1.05em; color: var(--black); }
&.ein { margin-left: 1.00em; text-indent: -1.00em; }}}
/* --- Deko --- */
body { position: relative; background-color: var(--sofa); background-image: linear-gradient(0deg, rgb(from var(--white) r g b / 80.00%), transparent); }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100.0vw; min-height: 100.0dvh; background-image: url(img/BG-Symbols.svg); background-size: 20.00vmin; opacity: 0.25; }
body > * { z-index: 2; }
/* =================================
Elements
================================= */
figure { position: relative; border-radius: 0.50em; overflow: hidden;
> div { width: 100.0%; height: 100.0%;
> img { width: 100.0%; height: 100.0%; object-position: 50.00% 50.00%; object-fit: cover; }}
> figcaption { position: absolute; z-index: 2; bottom: 0; left: 0; display: grid; place-content: end start; }}
details { border-top-width: 1px; background-color: var(--white);
summary { position: relative; padding: 1.50em 0 1.50em 2.50em; list-style: none; cursor: pointer; color: var(--black); text-wrap: balance;
&:focus { outline: none; }
&::before { position: absolute; top: 0.95em; left: 0; width: 1.00em; height: 1.00em; font-size: 1.50em; display: inline-grid; place-content: center; rotate: 0; transition: rotate 0.3s ease;
border-radius: 100.00%; background-color: var(--cta); color: white; content: 'add'; }}
> div { max-height: 0; padding-bottom: 1.50em; padding-left: 2.50em; transition: ease-in-out 300ms; }
&[open] { summary { outline: none;
&::before { rotate: -45deg; }}
> div { max-height: 80.00em; }}}
.btn { height: 3.00em; width: 100.0%; max-width: 15.00em; padding: 0 2.00em 0 1.50em; display: grid; grid-template-columns: 2.00em 1fr; place-items: center start; border-radius: 4.00em; background-color: var(--sofa); color: white; white-space: nowrap;
&.cta { background-color: var(--cta); }
& + a { margin-top: 1.00em; }
&::before { scale: 2; color: white; }
&[href^="tel"]::before { content: 'phone'; }
&[href^="mailto"]::before { content: 'mail'; }
&[href^="https://wa.me/"] { padding-left: 3.50em; background: url("img/sm/Logo_WhatsApp.svg") no-repeat center left 1.00em #25d366; background-size: auto 62.00%; color: white; }
}
button.btn { min-width: unset; margin-top: 2.00em; font-size: 1.125em;
&::before { content: 'send'; }}
a.sm { height: 2.50em; aspect-ratio: 1; display: inline-grid; margin: 0 0.50em 0 0; background-size: cover;
&[href^="https://facebook.com"] { background-image: url(../resources/img/sm/Logo_Facebook.svg); }
&[href^="https://instagram.com"] { background-image: url(../resources/img/sm/Logo_Instagram.svg); }}
.toplink,
.skiplink { z-index: 2; bottom: 2.00em; right: 2.00em;
&::before { width: 2.00em; aspect-ratio: 1; scale: 1.5; display: grid; place-content: center; border-radius: 100.0%; background-color: var(--sofa); color: white; }
&.toplink { position: fixed; display: none; &::before { content: 'north'; }}
&.skiplink { position: absolute; &::before { content: 'south'; }}}
/* =================================
Form
================================= */
input:not([type="checkbox"]),
textarea { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
::placeholder { opacity: 0; }
button { background-color: transparent; }
input:is(:hover) { border: 0; outline: 0; }
.hidden-field { display: none; visibility: hidden; }
label:has([type=checkbox])
{ padding-top: 0.50em; display: inline-grid; grid-template-columns: 3.00em 1fr; place-items: start;
> input[type=checkbox] { display: block; width: 2.00em; height: 2.00em; }}
#kontakt { gap: calc(var(--spa) * 2) var(--spa); background-color: rgb(from var(--sofa) r g b / 7.50%);
> form { padding: 1.00em 1.00em 2.50em; border-radius: 1.00em; background-color: rgb(from var(--sofa) r g b / 12.50%);
> div + div { margin-top: 1.00em; }}}
input, textarea { width: 100.0%; font-size: 1.00em; background-color: transparent; }
textarea { resize: vertical; }
/* --- Form-Label-Group --- */
.flg { --flg: 3.50em; position: relative; overflow: hidden;
& + .flg { margin-top: 0.50em; }
> input { height: var(--flg); }
> textarea { height: calc((var(--flg) * 2.5)); padding-top: 1.00em;}
> :is(input, textarea) { padding-left: var(--flg); border-radius: 0.25em; background-color: var(--white); box-shadow: inset 0 0 0 1px var(--sofa); }
&::before { position: absolute; top: 0; left: 0; height: calc(var(--flg) / 2); aspect-ratio: 1; display: grid; place-content: center; font-size: 2.00em; color: var(--sofa); opacity: 0.25; }
&:has([type="text"])::before { content: 'person'; }
&:has([type="email"])::before { content: 'mail'; }
&:has([type="tel"])::before { content: 'phone'; }
&:has(textarea)::before { content: 'edit'; }
> label { position: absolute; z-index: 2; top: 0; right: 0; width: 100.0%; height: var(--flg); padding: 0 1.00em 0 var(--flg); display: grid; place-content: center start; opacity: 0.50; transition: all ease-in-out 200ms; }
}
.flg:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown))
{ box-shadow: inset 0 0 0 2px var(--sofa);
&::before { opacity: 0.50; }
> label { width: auto; height: 2.00em; scale: 0.85; transform-origin: 100.0% 0; place-content: center end; opacity: 1.00; color: var(--sofa); }
}
:is(input, textarea, button):is(:focus, :focus-visible, :-moz-focusring) {
box-shadow: inset 0 0 0 3px var(--sofa);
outline: none;
}
/* =================================
Typo
================================= */
a, button, label, input[type=checkbox] { text-decoration: none; cursor: pointer; }
a, button, strong { color: inherit; }
h1, h2 { text-wrap: balance; }
h1 { font-size: 2.00em; color: var(--sofa); line-height: 1.15; }
h2 { font-size: 1.75em; color: var(--black); }
p { line-height: 1.5; max-width: 72ch;
> strong { color: var(--black); }
> a:not(.btn) { color: var(--sofa); }}
ul { padding: 0; list-style: none; margin: 0; color: var(--black);
> li { position: relative; padding-left: 1.50em; text-wrap: balance;
&::before { content: 'circle'; position: absolute; top: 0.03125em; left: 0; margin-right: 0.50em; color: var(--cta) }
+ li { margin-top: 0.50em; }}}
.txt span { line-height: 1.15; color: var(--white); font-size: clamp(2.00em, 4.000vw, 3.50em); }
.sub span { line-height: 1.25; color: var(--black); font-size: 1.175em; text-wrap: balance; display: block; }
p.big { line-height: 1.25; color: var(--sofa); font-size: 1.175em; text-wrap: balance; }
blockquote > p { line-height: inherit; font-size: clamp(1.50em, 5.000vw, 2.50em);
> cite { display: block; font-size: 0.50em; margin-top: 1.00em; }}
/* --- Spacing --- */
:is(h1, h2, p, ul) + * { margin-top: 1.00em; }
/* --- Fonts --- */
body, *
{ font-family: 'sofo-400', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: normal; font-style: normal; }
h1, strong, input, textarea, .btn, p.big
{ font-family: 'sofo-600', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: normal; font-style: normal; }
::before
{ font-family: 'icongo'; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
@font-face { font-family: 'sofo-400'; src: url('fonts/calibri.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'sofo-600'; src: url('fonts/calibrib.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'icongo'; src: url('fonts/icongo/material-symbols-sharp.woff2') format('woff2'); font-display: swap; }
/* =================================
Mobile
================================= */
@media only screen and (max-width : 600px)
{
:root { --spa: min(7.50vw, 2.50rem); }
body::before { display: none; }
summary, p, li { webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
blockquote > p { webkit-hyphens: none; hyphens: none; }
nav { position: fixed; z-index: 3; top: auto; bottom: 0; right: 0; scale: 0; width: 100.0%; height: 100.0%; font-size: 1.125em;
> div { position: fixed; bottom: 0; right: 0; scale: 1; width: 100.0%; height: 100.0%; padding: 20.00% 2.50em; display: grid; gap: 2.00em; place-content: end center; border-radius: 0; /**/ background-color: var(--sofa);
&:before { content: ''; width: 7.50em; aspect-ratio: 1; margin-bottom: 1.00em; background: url("img/logos/Logo-LernRaum-block-inv.svg") no-repeat center; background-size: cover; }
> a { height: auto; color: white;
&[href^="#kontakt"] { height: 3.00em; margin-top: 1.00em; padding: 0 2.00em; }}}}
.hh { display: grid; }
.skiplink, .toplink { visibility: collapse; }
}
/* =================================
End
================================= */
.comment { color: fuchsia !important; }
/* { box-shadow: inset 0 0 0 1px fuchsia; }