/*
This file contains all styles that should be common to the front-end and backend (i.e. the TinyMCE editor).
This includes typography and styles for all elements that can be edited in TinyMCE (such as galleries).
*/

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {

/* Layout */
	--content-width-narrow: 900px;
	--content-width-wide: 1200px;
	--header-height: 260px;	

/* Typography */	
	--font-family-base: 'Montserrat', sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
		
	--font-size-h1: var(--font-size-headings);
	--font-size-h2: calc(var(--font-size-headings) * 0.714);
	--font-size-h3: calc(var(--font-size-base) * 1.6);
	--font-size-h4: calc(var(--font-size-base) * 1.2);
		
/* Spacing */
	--spacing-small: 0.3rem;			/* Between small elements such as buttons in a row */
	--spacing-paragraph: 1rem;				/* Vertically between paragraphs and other block elements, horizontally in the navigation bar */
	--spacing-grid: 1.5rem;				/* Between larger items displayed in a grid, such as post previews */
	--spacing-content: 2rem;			/* Around and between main content (articles, sidebar) */

/* Borders */
	--color-border: #888888;
	--color-border-bright: #AAAAAA;
	--image-border-radius: 4px;
	--widget-border-radius: 10px;
	--content-border-radius: 15px;
	--modal-border-radius: 4px;

/* Dimensions */	
	--sidebar-width: 360px; 
	--widget-width: calc( var(--sidebar-width) - 2 * var(--spacing-content) );
}

@media (max-width: 400px) {

	:root {
		--font-size-base: 15px;
	}

}

/* Body */

body {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

/* Typography */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.75em;
	margin-bottom: 0.5em;
	word-break: break-word;
}

/* Specifications for h1 and h2 are in css/customizer.css */

h3 {
	font-family: var(--font-family-base);
	font-size: calc(var(--font-size-base) * 1.2);
	line-height: var(--line-height-base);
}

h4, h5, h6 { 
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	font-weight: bold;
	line-height: var(--line-height-base);
}

p {
	margin: 0 0 var(--spacing-paragraph) 0;
}

/* Links */
a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Append an arrow icon to external links, with the following exceptions:
	* The link is inside a .button element
	* The link contains other elements
 */
.entry-content a.external:not(:has(img, div, p))::after {
	content: "\f504";
	font-family: dashicons;
	display: inline-block;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	color: gray;
	padding-left: 0.1em;
}

.entry-content a.pdf:not(:has(img, div, p))::before {
	content: "\f190";
	font-family: dashicons;
	display: inline-block;
	line-height: 0;
	font-size: 180%;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	color: inherit;
	position: relative;
	top: 0.34em;
}

/* Lists */
ul, ol {
    margin: 0 0 1.4em 0;
    padding: 0 0 0 2em;
}

li {
    margin: 0 0 0.5em 0;
}

li ul, li ol {
	margin-bottom: 0;
}

/* Blockquote */
blockquote {
    border-left: 4px solid #1a1a1a;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    font-style: italic;
    background: #f5f5f5;
}

blockquote cite {
    display: block;
    margin-top: 1em;
    font-style: normal;
    font-weight: 600;
}

blockquote p {
	margin-bottom: 0;
}

/* Code */
code {
    background: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
}

pre {
    background: #f5f5f5;
    padding: 1em;
    border-radius: 3px;
    overflow-x: auto;
    margin-bottom: 1.5em;
}

pre code {
    background: none;
    padding: 0;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

th, td {
    padding: 0.5em;
    border: 1px solid var(--color-border);
    text-align: left;
}

th {
    background: #f5f5f5;
    font-weight: 600;
}

/* Boxes */
div.alnus-box {
	background-color: #F5FFB7;
	padding: 0.5em;
	border: 1px solid black;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--image-border-radius);
}

textarea, input:is([type='text'], [type='email'], [type='url'], [type='search'], [type='number'], [type='submit']) {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	padding: 0.5em 0.7em 0.4em 0.8em;
	border-radius: var(--widget-border-radius);
	border: 1px solid var(--color-border);
	background: white;
}

input[type=submit] {
	user-select: none;
	cursor: pointer;
}

textarea {
}

button {
	padding-block: unset;
	padding-inline: unset;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	padding: 0.5em 0.7em 0.4em 0.8em;
	border-radius: 1.5em;
	border: 1px solid var(--color-border);
}

select {
	appearance: base-select;
	padding-block: unset;
	padding-inline: unset;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	padding: 0.5em 0.7em 0.4em 0.8em;
	background-color: var(--color-base-background);
	border-radius: 1.5em;
	border: 1px solid var(--color-border);
	min-width: 20em;
}

select::picker-icon {
	appearance: menulist-button;
	margin-right: 0.3em;
}

option {
	padding: 0.5em 0.7em 0.4em 0.8em;
}

/* ==========================================================================
   WORDPRESS REQUIRED CLASSES
   ========================================================================== */

.wp-caption {
    max-width: 100%;
    margin: 0 0 1em 0;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
    border-radius: var(--image-border-radius);
}

.wp-caption-text, .wp-caption-dd {
    font-size: 90%;
    margin-top: 0.5em;
    word-break: auto-phrase;
    hyphens: auto;
}

.alignleft {
	float: left;
	margin-top: 0;
	margin-left: 0;
	margin-right: 1.4em;
	margin-bottom: var(--spacing-paragraph);
}

.alignright {
	float: right;
	margin-top: 0;
	margin-right: 0;
	margin-left: 1.4em;
	margin-bottom: var(--spacing-paragraph);
}

.aligncenter {
	display: block;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-paragraph);
	text-align: center;
}

.alignnone {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.6em;
}

/* Class to straighten out rtl text in encoded email addresses */
.text-rev {
	direction: rtl;
	unicode-bidi: isolate-override;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* ==========================================================================
   BILDERGALERIEN [gallery]
   ========================================================================== */

.gallery {
	all: unset;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--spacing-small);
	padding-bottom: 0.1em;
	margin: var(--spacing-grid) auto;
}

.gallery .gallery-item {
	position: relative;
	width: 200px !important;
	height: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gallery .gallery-icon {
	width: 100%;
	height: 100%; 
}

.gallery .gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
   border-radius: var(--image-border-radius);
}

.gallery .gallery-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: var(--spacing-paragraph);
   border-radius: var(--image-border-radius);
	text-align: left;
	overflow: hidden;
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	color: white;
	opacity: 0;
	backdrop-filter: none;
	transition: all var(--animation-time) linear;
	pointer-events: none;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
	backdrop-filter: brightness(0.5) blur(3px);
	transition: all var(--animation-time) linear;
}

iframe {
    border-radius: var(--image-border-radius);
}