/*
 * Raumkapsel theme for Automad.
 * Part 1 (chrome) is the Silex site CSS, unchanged. Part 2 maps Automad's block
 * markup onto the Silex box model (measured: block → block 30px, row → next 60px,
 * paragraphs inside a group 6px, legal-text prose rhythm 6px / 20px).
 */

/* Karla 400 only (exactly what Google Fonts served to the Silex site) — bold/italic are synthesized like there. */
@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/karla-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Karla';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/karla-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Part 1: chrome (Silex) ---------- */

* { box-sizing: border-box; }
body { margin: 0; }
.site{--c-bg:#ffffff;--c-heading:#303030;--c-link:#36f;--c-link-hover:#1a47d6;--c-nav:#090909;--c-note:#f5f5f5;--c-text:#6d6d6d;--c-white:#fff;--container:1100px;--f-body:Karla, sans-serif;--gutter:30px;--header-h:170px;--space-l:60px;--space-m:30px;-webkit-font-smoothing:antialiased;background-color:var(--c-bg);color:var(--c-text);display:flex;flex-direction:column;font-family:var(--f-body);font-size:15px;line-height:23px;min-height:100vh;}
.topbar{position:relative;}
.site-header{background-color:var(--c-white);left:0;position:fixed;right:0;top:0;z-index:100;}
.site-header__inner{align-items:center;display:flex;height:var(--header-h);margin:0 auto;max-width:calc(var(--container) + 30px);padding:0 15px;}
.site-header__logo{align-items:center;display:flex;}
.site-header__logo-img{display:block;height:25px;width:auto;}
.site-header__nav{align-items:center;display:flex;margin-left:auto;}
.site-header__link{color:var(--c-nav);font-size:14px;font-weight:500;letter-spacing:normal;line-height:var(--header-h);padding:0 0 0 34px;text-decoration:none;}
.site-header__social{align-items:center;display:flex;gap:14px;margin-left:34px;}
.site-header__icon{display:block;}
.site-header__icon-img{display:block;height:16px;width:16px;}
.page{margin-top:var(--header-h);padding-bottom:var(--space-l);}
.container{margin:0 auto;max-width:calc(var(--container) + 30px);padding:0 15px;}
.lang-switch{align-items:center;color:var(--c-nav);display:flex;font-size:12px;font-weight:700;height:var(--header-h);letter-spacing:2px;position:fixed;right:calc(max(15px, 50vw - 550px) + 64px);text-decoration:none;text-transform:uppercase;top:0;z-index:101;}
.site-footer{margin-top:auto;padding:30px 0;}
.site-footer__inner{align-items:baseline;display:flex;flex-wrap:wrap;gap:20px;}
.site-footer__nav{display:flex;gap:20px;}
.site-footer__link{color:var(--c-nav);font-size:14px;font-weight:500;text-decoration:none;}
.site-footer__copy{color:var(--c-text);font-size:14px;margin-left:auto;}
.post-nav{display:flex;justify-content:space-between;margin-top:var(--space-l);}
.post-nav__link{color:var(--c-heading);font-size:24px;line-height:1;padding:8px;text-decoration:none;}
.tiles{display:flex;flex-wrap:wrap;gap:8px;}
.tile{aspect-ratio:16 / 9;display:block;overflow:hidden;position:relative;width:calc(33.3333% - 5.34px);}
.tile__img{display:block;height:100%;object-fit:cover;width:100%;}
.tile__title{align-items:center;background-color:rgba(255,255,255,.5);display:flex;inset:0;justify-content:center;opacity:0;padding:10px;position:absolute;text-align:center;transition:opacity .3s ease-in-out;}
.tile__title-text{color:var(--c-heading);display:none;font-size:13px;font-weight:700;}

.site-header__link:hover{color:var(--c-link)}
.post-nav__link:hover{color:var(--c-link)}
.tile__title:hover{opacity:1}

.totop{position:fixed;right:25px;bottom:65px;z-index:10000;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:0;background:#090909;color:#fff;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,background-color .3s ease-in-out}
.totop.on{opacity:1;visibility:visible}
.totop:hover{background:#e2e2e2}
.totop svg{width:15px;height:15px;display:block;fill:currentColor}

@media (min-width: 769px){
	.site-header__nav{margin-right:45px;}
}
@media (max-width: 992px){
	.tile{width:calc(50% - 4px);}
}
@media (max-width: 768px){
	.site-header{display:contents;}
	.site-header__inner{display:contents;}
	.site-header__nav{flex:0 0 auto;flex-wrap:wrap;justify-content:center;margin-left:auto;}
	.site-header__link{line-height:30px;padding:0 8px;}
	.site-header__social{gap:16px;margin:0 auto 0 16px;order:1;}
	.page{margin-top:0;}
	.lang-switch{height:auto;line-height:16px;margin:0 0 0 16px;position:static;}
	.topbar{background-color:var(--c-white);display:flex;flex-wrap:wrap;padding:15px;row-gap:10px;}
	.site-header__logo{flex:0 0 100%;justify-content:center;}
	.site-footer__inner{align-items:center;flex-direction:column;row-gap:10px;}
	.site-footer__copy{margin:5px auto 0;}
	.site-footer__nav{justify-content:center;}
	.tile{width:100%;}
}

/* ---------- Part 2: Automad blocks → Silex modules ---------- */

:root {
	--am-block-margin-top: 0px;
	--am-block-max-width: none;
	--am-container-padding: 0px;
	--am-caption-space: 6px;
}

/* Every content block: 30px below (Silex .media / .post-title / .text / .section-2col). */
.page .am-block { margin: 0 0 var(--space-m); max-width: none; }
.page p.am-block { overflow-wrap: anywhere; }
.page .am-block a:not([class]) { color: var(--c-link); }
.page .am-block a:not([class]):hover { color: var(--c-link-hover); }

/* Rows: consecutive Layout Sections with a width form one flex row (Silex .section-2col). */
.page am-flex { display: flex; flex-wrap: wrap; gap: var(--gutter); height: auto; margin: 0 0 var(--space-m); }
.page :not(am-flex) + am-flex { margin-top: 0; }
.page am-flex > * { flex-grow: 0; min-width: 0; padding: 0; }
.page am-flex > am-1-1 { flex-basis: 100%; }
.page am-flex > am-1-2 { flex-basis: calc(50% - 15px); }
.page am-flex > am-1-3 { flex-basis: calc(33.3333% - 20px); }
.page am-flex > am-2-3 { flex-basis: calc(66.6667% - 10px); }
.page am-flex > am-1-4 { flex-basis: calc(25% - 22.5px); }
.page am-flex > am-3-4 { flex-basis: calc(75% - 7.5px); }
.page am-flex > * > .am-block { margin: 0; }
.page am-layout-section { height: auto; }

/* A Layout Section with an explicit gap groups its blocks (Silex .text with several paragraphs: 6px). */
.page am-layout-section[style*="--am-flex-gap"] > .am-block { margin-bottom: var(--am-flex-gap); }
.page am-layout-section[style*="--am-flex-gap"] > .am-block:last-child { margin-bottom: 0; }

/* About: Silex .text--cols (CSS column flow). */
.page section.am-block.text--cols > am-layout-section { display: block; column-count: 2; column-gap: var(--gutter); }
.page section.am-block.text--cols > am-layout-section > .am-block:nth-child(n) { margin: 0 0 6px; }

/* Media: always full container width; video 16:9. */
.page figure.am-block { display: block; }
.page figure.am-block am-img-loader { display: block; }
.page figure.am-block img { display: block; height: auto; width: 100%; }
.page am-embed figure { display: block; }
.page am-embed iframe { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; width: 100%; }

/* Headings (Silex .text__h2/h3/h4). */
.page h2.am-block { color: #393939; font-size: 40px; font-weight: 800; letter-spacing: 2px; line-height: 1.2em; margin: 0 0 20px; text-transform: uppercase; }
.page h3.am-block { color: #5d5d5d; font-size: 28px; font-weight: 400; line-height: 1.29em; margin: 0 0 20px; }
.page h4.am-block { color: #8b8b8b; font-size: 13px; line-height: 1.54em; margin: 0 0 20px; }

/* Lists (Silex: browser default ul inside .text). */
.page am-list.am-block { margin: 15px 0; }
.page am-list ul, .page am-list ol { margin: 0; padding: 0 0 0 40px; }

/* Template "text": one continuous prose block like Silex .text — paragraphs 6px, last block 30px. */
.tpl-text .page .container > p.am-block { margin: 0 0 6px; }
.tpl-text .page .container > .am-block:last-child { margin-bottom: var(--space-m); }

/* Contact form (native mail block) styled like the Silex form. */
.page am-mail.am-block { display: block; margin: 30px 0 45px; max-width: 600px; }
.page am-mail textarea.am-input { height: 108px; }
.page am-mail .am-field { display: block; }
.page am-mail .am-label { color: inherit; display: block; font-size: 13px; line-height: 23px; margin: 18px 0 6px; }
.page am-mail .am-input { background-color: #ffffff; border: 1px solid #d1d1d1; border-radius: 0; color: var(--c-heading); display: inline-block; font-family: inherit; font-size: 13px; line-height: normal; padding: 8px 10px; width: 100%; }
.page am-mail .am-input:focus { border-color: #090909; outline: none; }
.page am-mail .am-error { color: #c0392b; font-size: 13px; }
.page am-mail .am-button { background-color: #090909; border: 0; border-radius: 0; color: #ffffff; cursor: pointer; display: inline-block; font-family: inherit; font-size: 13px; line-height: normal; margin-top: 20px; padding: 10px 25px; }
.page am-mail .am-button:hover { background-color: #090909; border: 0; color: #ffffff; }
.page am-mail + p.am-block { color: var(--c-text); font-size: 11px; max-width: 600px; }

@media (max-width: 768px){
	.page am-flex { flex-direction: column; }
	.page am-flex > * { flex-basis: auto; width: 100%; }
	.page section.am-block.text--cols > am-layout-section { column-count: 1; }
}

/* Mail-Block: Statusmeldung (Erfolg/Fehler) — neutral wie Silex-Text. */
.page am-mail p.am-message { color: var(--c-heading); display: block; font-size: 13px; line-height: 23px; margin: 0 0 18px; max-width: 600px; }