* {margin: 0px; padding: 0px; }
#thegreatwrapper { position: absolute; width: 100%; height: 100%; top: 0; font-family: univers-next-pro, sans-serif; font-weight: 400; font-style: normal; }
#magenta { position: fixed; width: 100%; height: 100%; top: 0; background-color: var(--mmfdk-bg, #E83185); z-index: -1; }

#wrapper_content { padding: 1rem; padding-bottom: 4rem; font-size: 1.3rem; line-height: 1.85rem; }
#wrapper_content.inline { padding: 0; margin-top: 4rem; font-size: 1.3rem; line-height: 1.85rem; }
#content { z-index: 0; }

#logo { font-size: 4rem; line-height: 4rem; margin-top: 1rem; margin-left: -0.3rem; padding-bottom: 4rem; }
.logo_sub { font-size: 3.2rem; line-height: 4rem; padding-left: 0.2rem; }

a { cursor: pointer; }

#content a, .text a { display: inline; text-decoration: underline; color: black; text-align: left; padding: 0; margin: 0; }


#articles { position: relative; width: 100%; }
#articles_special { position: relative; width: 100%; text-shadow: 0 0 3px black, 0 0 5px black; color: var(--mmfdk-bg, #E83185); }
#articles #articles_inner { position: static; text-shadow: none; color:black; }
#articles_special #articles_inner { position: static; }

.text_oben { margin-bottom: 6rem; }
.text_unten { margin-top: -1rem; }

#articles_special #articles_inner a { display: inline; text-decoration: underline; color: var(--mmfdk-bg, #E83185); text-align: left; padding: 0; margin: 0; }

#articles #articles_inner .text, #articles_special #articles_inner .text { padding-bottom: 2rem; }

#articles p, #articles_special p { margin-bottom: 1rem; }


#schwarm { padding-top: 8rem; }

.beitrag { margin-bottom: 3rem; }
.info_top { margin-bottom: 1rem; }
.autor_in { display: inline-block; font-size: 1.8rem; line-height: 2rem; }
.datum { display: inline-block; }


.navi_ressourcen { display: flow-root; }
.navi_ressourcen a { float: left; }
.navi_ressourcen img { height: 240px; width: auto; margin-right: 10px; margin-bottom: 10px; }


img { height: 300px; width: auto; margin-right: 10px; margin-bottom: 10px; }
iframe { width: 533px; height: 315px; }

.bildbeitrag { height: 300px; width: auto; margin-top: 2rem; }
.bildbeitrag img { height: 100%; width: auto; }

.small { margin-top: 2rem; }
.medium { margin-top: 4rem; }
.large { margin-top: 6rem; }


b, strong { font-family: univers-next-pro, sans-serif; font-weight: 600; font-style: normal; }
i { font-family: univers-next-pro, sans-serif; font-weight: 400; font-style: italic; }

h1 { font-size: 2.8rem; line-height: 3.2rem; margin-bottom: 1rem; font-weight: normal; }
#content_slogan_start h1 { position: relative; margin-left: -0.8rem; padding-bottom: 1rem; font-size: 14rem; line-height: 16rem; color:#000000; }
#content_slogan h1 { position: fixed; margin-left: -0.8rem; font-size: 14rem; line-height: 16rem; color:#000000; }
#content_slogan h1 a { font-size: 14rem; line-height: 16rem; text-decoration: none; color: black; padding: 0; margin: 0; }
.logo_sub h1 { display: inline; font-size: 3.2rem; line-height: 4rem; }

h2 { font-size: 2.8rem; line-height: 3.2rem; margin-bottom: 1rem; font-weight: normal; }
h3 { font-size: 2rem; line-height: 2.2rem; margin-bottom: 1rem; font-weight: normal; }
h2.h2_wie_h3, .h2_wie_h3 h2 { font-size: 2rem; line-height: 2.2rem; margin-bottom: 1rem; font-weight: normal; }
.autor_in h2 { display: inline; }

.posted { font-size: 1rem; }
#expl { font-size: 1rem; line-height: normal; }
p#txpCommentInputForm { display: none; }


.hidden { display: none; }
.activator { cursor: pointer; color: black; text-decoration: underline; }
.activator:hover { cursor: pointer; text-decoration: underline; }
.activator h2::after { content: " >>"; }
.activator.activated h2::after { content: " << … / schließen"; }


input, textarea { border: 1px solid #ddd; border-radius: 6px; line-height: 1.7rem; }
.button { padding: 0 1rem; }

.Inputfield.absatz { margin-bottom: 4em; }

.FormBuilder.InputfieldForm .InputfieldStateRequired > .InputfieldHeader:first-child:after {
  color: black;
  content: "*"; }


#wrapper_footer { position: fixed; right: 10px; bottom: 10px; }

#footer { background-color: black; color: var(--mmfdk-bg, #E83185); }
#footer a { font-size: 1.2rem; line-height: 1.7rem; padding: 2px 5px 2px 5px; color: var(--mmfdk-bg, #E83185); }
#footer a:link { text-decoration:underline; background: black; }
#footer a:visited { text-decoration:underline; background: black; }
#footer a:hover { text-decoration:none; background: black; }
#footer a:active { text-decoration:none; background: black; cursor: default; }
#footer a.active { text-decoration:none; background: black; cursor: default; }
.tohide { font-size: 1.2rem; line-height: 1.7rem; background: black; padding: 2px 0; }
.hamburger { display: none; }




/* ==========================================================
   MMfdK. – Farbwechsler für Textpattern und ProcessWire
   ========================================================== */
#mmfdk-color-switcher {
	position: fixed;
	top: 10px;
	right: 12px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 3px;
	width: max-content;
}

#mmfdk-color-switcher .mmfdk-color-button {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 12px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

#mmfdk-color-switcher .mmfdk-color-button::before {
	content: "";
	display: block;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--mmfdk-swatch);
	border: 1px solid #111;
}

#mmfdk-color-switcher .mmfdk-color-button:focus-visible {
	outline: 2px solid #111;
	outline-offset: 1px;
}



/* ============================================================
   MMfdK. – Textpattern-Kommentarformular / Manifest
   Nur innerhalb .mmfdk-comment-form wirksam.
   Optisch an Mercato-Checkout angelehnt; keine Formularlogik.
   ============================================================ */
.mmfdk-comment-form {
    max-width: 100%;
}
.mmfdk-comment-form .mmfdk-comment-field {
    margin: 0 0 1rem;
}
.mmfdk-comment-form .mmfdk-comment-field label {
    display: inline-block;
    margin-bottom: .3rem;
    color: #111;
    font-family: univers-next-pro, sans-serif;
    font-size: 1rem;
    line-height: normal;
    font-weight: 600;
}
.mmfdk-comment-form .mmfdk-comment-field .required {
    font-weight: 600;
    color: #111;
}
.mmfdk-comment-form .mmfdk-comment-field input:not([type="checkbox"]):not([type="radio"]),
.mmfdk-comment-form .mmfdk-comment-field textarea {
    display: block;
    box-sizing: border-box;
    width: min(100%, 440px);
    max-width: 100%;
    min-height: 42px;
    margin: 0;
    padding: .45rem .7rem;
    background: #f8f8f8;
    color: #111;
    border: 1px solid rgba(0,0,0,.26);
    border-radius: 6px;
    font: 400 1rem/1.3 univers-next-pro, sans-serif;
}
.mmfdk-comment-form .mmfdk-comment-residence textarea {
    min-height: 85px;
    resize: vertical;
}
.mmfdk-comment-form .mmfdk-comment-remember {
    margin: .5rem 0 1.5rem;
    font-size: 1rem;
    line-height: normal;
}
.mmfdk-comment-form .mmfdk-comment-remember input[type="checkbox"] {
    width: auto;
    margin-right: .35rem;
    vertical-align: middle;
}
.mmfdk-comment-form .mmfdk-comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 1.2rem 0;
}
.mmfdk-comment-form .mmfdk-comment-actions input,
.mmfdk-comment-form .mmfdk-comment-actions button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 42px;
    padding: 0 14px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    border-radius: 6px;
    font: 600 1rem/1 univers-next-pro, sans-serif;
    cursor: pointer;
}
.mmfdk-comment-form .mmfdk-comment-actions input:disabled,
.mmfdk-comment-form .mmfdk-comment-actions button:disabled,
.mmfdk-comment-form .mmfdk-comment-actions .disabled {
    opacity: .6;
    cursor: not-allowed;
}



/* ==========================================================
   MMfdK. – Media-Breakpoints
   ========================================================== */
     
@media only screen and (max-width: 1200px) {
#wrapper_content { padding-bottom: 21rem; }
#footer { background: none; }
#footer a { display: block; text-align: right; padding: 0 5px 0 7px; margin-top: 8px; }
.tohide { display: none; }
}



@media only screen and (max-width: 1000px) {
.navi_ressourcen { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(100%, 170px), 1fr) ); gap: 10px; align-items: start; }
.navi_ressourcen a { float: left; }
.navi_ressourcen img { width: 100%; height: auto !important; object-fit: contain !important; margin-bottom: 0; }
}


@media only screen and (max-width: 760px) {
#content_slogan_start  h1 { font-size: 12rem; line-height: 14rem; color:#000000; }
#content_slogan  h1 { font-size: 12rem; line-height: 14rem; color:#000000; }
#content_slogan  h1 a { font-size: 12rem; line-height: 14rem; text-decoration: none; }
#wrapper_content { padding-bottom: 4rem; }
a { hyphens: auto; }
#navigation { display: none; }
.hamburger::before { content: "open "; }
.hamburger { display: block; text-decoration: underline; background: black; color: var(--mmfdk-bg, #E83185); text-align: right; padding: 0px 5px 0px 7px; margin-top: 5px; font-size: 1.2rem; line-height: 1.7rem; cursor: pointer; }
.hamburger_x::before { content: "close "; }
}


@media only screen and (max-width: 640px) {
#content_slogan_start  h1 { margin-top: 0rem; margin-left: -0.5rem; font-size: 10rem; line-height: 11.5rem; color:#000000; }
#content_slogan  h1 { margin-top: 0rem; margin-left: -0.5rem; font-size: 10rem; line-height: 11.5rem; color:#000000; }
#content_slogan  h1 a { font-size: 10rem; line-height: 11.5rem; }
#footer a { margin-top: 5px; }
}


@media only screen and (max-width: 540px) {
img { width: 100%; height: auto; margin-right: 0; margin-bottom: 10px; }
.bildbeitrag { width: 100%; height: auto; }
.bildbeitrag img { width: 100%; height: auto; } 
iframe { width: 100%; height: 230px; }
#content_slogan_start  h1 { font-size: 8rem; line-height: 9rem; color:#000000; }
#content_slogan  h1 { font-size: 8rem; line-height: 9rem; color:#000000; }
#content_slogan  h1 a { font-size: 8rem; line-height: 9rem; }
}


@media only screen and (max-width: 430px) {
#content_slogan_start  h1 { font-size: 7rem; line-height: 8rem; color:#000000; }
#content_slogan  h1 { font-size: 7rem; line-height: 8rem; color:#000000; }
#content_slogan  h1 a { font-size: 7rem; line-height: 8rem; }

#articles .text, #articles_special .text { font-size: 1.2rem; line-height: 1.7rem; }
h2.h2_wie_h3, .h2_wie_h3 h2 { font-size: 1.8rem; line-height: 2rem; }

#mmfdk-color-switcher { gap: 5px; }
}


@media only screen and (max-width: 410px) {
#footer a { font-size: 1.1rem; }
#articles a { display: inline; text-align: left; padding: 0; margin: 0; }
}


@media only screen and (max-width: 370px) {
#content_slogan_start  h1 { font-size: 6rem; line-height: 7rem; color:#000000; }
#content_slogan  h1 { font-size: 6rem; line-height: 7rem; color:#000000; }
#content_slogan  h1 a { font-size: 6rem; line-height: 7rem; }
}