body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Self-hosted (no Google Fonts request — DSGVO) */
@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/files/fonts/pt-serif-400.woff2") format("woff2");
}

@font-face {
  font-family: "PT Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/files/fonts/pt-serif-700.woff2") format("woff2");
}

:root {
  --ink: #1c1416;
  --oxblood: #680a0e;
  --oxblood-deep: #3a1113;
  --rose: #8f6f70;
  --muted: #5d5d5d;
  --rule: #ddd8d6;
  --field: #fbfaf9;
  --error: #b3261e;
  --measure: 60rem;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Verdana, sans-serif;
  color-scheme: light;
}

html {
  scrollbar-gutter: stable;
}

body {
  font: 1rem/1.6 var(--sans);
  color: var(--ink);
}

img,
video {
  max-width: 100%;
  height: auto;
}

ul,
ol,
dl {
  margin: 0 0 1rem 1rem;
}

p {
  margin-bottom: 1rem;
}

li {
  margin-left: .8rem;
}

#main .inside {
  margin: 1rem;
}

#footer .inside {
  margin-top: 1rem;
  padding: 1rem 0 1rem 1rem;
  text-align: right;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
}

#footer ul li {
  list-style-type: none;
  display: inline-block;
  margin: 0;
}

#footer ul li + li::before {
  content: " | ";
}

#wrapper {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem 3rem;
}

a {
  font-weight: normal;
  text-decoration: underline;
  color: var(--ink);
}

a:hover {
  color: var(--oxblood);
}

a:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

.center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--oxblood-deep);
}

h1 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
  letter-spacing: -.01em;
}

h2 {
  margin-bottom: 1rem;
  font-size: 1.3125rem;
}

.code {
  margin: 1rem;
  padding: 1rem;
  overflow-x: auto;
  background-color: #f9f9f9;
  border: 1px dashed #2f6fab;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

p.back {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: right;
  border-bottom: 1px solid var(--rule);
}

/* ---------------------------------------------------------------
   Forms (contact form, comments)
   Markup: .ce_form > h1 + form > .formbody > .widget.widget-*
   --------------------------------------------------------------- */

.ce_form,
.ce_comments {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: 1rem;
}

.ce_form h1 {
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule);
}

.ce_form .formbody,
.ce_comments .formbody {
  width: 100%;
  margin-top: 1.75rem;
}

/* Field row — the left rail lights up while the field is active */
.ce_form .formbody .widget,
.ce_comments .formbody .widget {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid transparent;
  transition: border-color .18s ease;
}

.ce_form .formbody .widget:focus-within,
.ce_comments .formbody .widget:focus-within {
  border-left-color: var(--oxblood);
}

.ce_form .formbody label,
.ce_comments .formbody label {
  display: block;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .18s ease;
}

.ce_form .formbody .widget:focus-within label,
.ce_comments .formbody .widget:focus-within label {
  color: var(--oxblood);
}

/* Required marker: the span inside the label, not the .mandatory rows */
.ce_form .formbody label .mandatory,
.ce_comments .formbody label .mandatory {
  margin-left: .15em;
  color: var(--oxblood);
}

.ce_form .formbody input,
.ce_form .formbody textarea,
.ce_comments .formbody input,
.ce_comments .formbody textarea {
  width: 100%;
  padding: .625rem .75rem;
  background-color: var(--field);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: 1rem/1.5 var(--sans);
  color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ce_form .formbody textarea,
.ce_comments .formbody textarea {
  height: 11rem;
  min-height: 6rem;
  resize: vertical;
}

.ce_form .formbody input:hover,
.ce_form .formbody textarea:hover,
.ce_comments .formbody input:hover,
.ce_comments .formbody textarea:hover {
  border-color: var(--rose);
  background-color: #fff;
}

.ce_form .formbody input:focus,
.ce_form .formbody textarea:focus,
.ce_comments .formbody input:focus,
.ce_comments .formbody textarea:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--oxblood);
  box-shadow: 0 0 0 3px rgba(104, 10, 14, .18);
}

.ce_form .formbody input::placeholder,
.ce_form .formbody textarea::placeholder {
  color: #9a9490;
}

/* Captcha: a 2-character answer, so the box stays small and the
   question sits beside it instead of under a full-width field */
.ce_form .formbody .widget-captcha {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0 .75rem;
}

.ce_form .formbody .widget-captcha label {
  grid-column: 1 / -1;
}

.ce_form .formbody .widget-captcha input.captcha {
  width: 4.5rem;
  text-align: center;
}

.ce_form .formbody .captcha_text {
  font-size: .9375rem;
  color: var(--muted);
}

/* Submit — Contao 5 emits .widget-submit > button.submit */
.ce_form .formbody .widget-submit,
.ce_comments .formbody .widget-submit {
  margin-top: 2rem;
  margin-bottom: 0;
  padding-left: 0;
  border-left-color: transparent;
  text-align: right;
}

.ce_form .formbody button.submit,
.ce_form .formbody input.submit,
.ce_comments .formbody button.submit,
.ce_comments .formbody input.submit {
  width: auto;
  min-width: 11rem;
  padding: .8125rem 2rem;
  background-color: var(--oxblood);
  border: 1px solid var(--oxblood);
  border-radius: 3px;
  font: 600 .9375rem/1 var(--sans);
  letter-spacing: .03em;
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .08s ease;
}

.ce_form .formbody button.submit:hover,
.ce_form .formbody input.submit:hover,
.ce_comments .formbody button.submit:hover,
.ce_comments .formbody input.submit:hover {
  background-color: var(--oxblood-deep);
  border-color: var(--oxblood-deep);
}

.ce_form .formbody button.submit:active,
.ce_form .formbody input.submit:active {
  transform: translateY(1px);
}

.ce_form .formbody button.submit:focus-visible,
.ce_form .formbody input.submit:focus-visible {
  outline: 2px solid var(--oxblood-deep);
  outline-offset: 3px;
}

.ce_form .formbody button.submit[disabled],
.ce_form .formbody input.submit[disabled] {
  opacity: .55;
  cursor: default;
}

/* Validation */
.ce_form .formbody .widget p.error,
.ce_comments .formbody .widget p.error {
  margin: .375rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--error);
}

.ce_form .formbody input.error,
.ce_form .formbody textarea.error,
.ce_comments .formbody input.error,
.ce_comments .formbody textarea.error {
  border-color: var(--error);
  background-color: #fffafa;
}

.ce_form .formbody input.error:focus,
.ce_form .formbody textarea.error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .18);
}

.ce_form .formbody .widget.error,
.ce_form .formbody .widget:has(.error) {
  border-left-color: var(--error);
}

.ce_form .formbody .explanation {
  margin-top: .375rem;
  font-size: .875rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .ce_form .formbody .widget,
  .ce_comments .formbody .widget {
    padding-left: .75rem;
  }

  .ce_form .formbody .widget-submit,
  .ce_comments .formbody .widget-submit {
    padding-left: 0;
  }

  .ce_form .formbody button.submit,
  .ce_form .formbody input.submit,
  .ce_comments .formbody button.submit,
  .ce_comments .formbody input.submit {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce_form .formbody *,
  .ce_comments .formbody * {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #startseite {
    animation: fadein 4s;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}