/* Minimal CSS nur für Impressum & Datenschutz – leichtgewichtig und unabhängig von Squarespace */

:root {
  --bg-anth: #1f1f1f; /* wie ueber-mich */
  --text-light: #cfcfcf; /* Fließtext hellgrau */
  --head-white: #ffffff; /* Überschriften weiß */
  /*--maxw: 900px;*/
  --link: #cfcfcf; /* Links wie Fließtext, heben sich über Unterstreichung ab */
}

html, body { margin: 0; padding: 0; background: var(--bg-anth); color: var(--text-light); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: 1.5; }

/* Sichtbarkeit, falls Squarespace-Klassen/JS fehlen */
html, body, #navigator, #container, #container-content, .layout, .row, .block, .block-content, .html-content {
  opacity: 1 !important; visibility: visible !important;
}
/* Bilder/Lazyload neutralisieren */
.spin{display:none !important}
img.loading,[data-loader],img[data-loader]{opacity:1 !important;visibility:visible !important}
img[data-load], img[data-loader], img[data-src], img[data-image] { opacity: 1 !important; visibility: visible !important; filter: none !important; }
figure .thumb-image img,
.block-image img,
.image-block img,
.gallery .image-wrapper img,
.gallery img,
.gallery img{ display:block; width:100% !important; height:auto !important; object-position:50% 50% !important; }
#container-content{padding-left:0 !important;padding-right:0 !important}
/* Formulare */
.form-wrapper .field-list .field {
  position: relative;
  margin: 0 0 24px;
  width: 100%;
}
textarea { height: 100px;width: 100%; }
.form-wrapper .react-form-contents {
  grid-area: form;
}
fieldset { border: none; padding: 0; margin: 0; flex-direction: row; column-gap: 10px;display: flex;}
input {  box-sizing: border-box;
  color: #000;
  background-color: #fafafa;
  border: 1px solid #a9a9a9;
  width: 100%;
  height: auto;
  padding: 10px;
  position: relative;}
.caption-text { font-size: 12px; }

/* Kopfbereich */
#topBar { position: sticky; top: 0; background: #fff; z-index: 10; border-bottom: 1px solid #eee; }
.siteTitle { padding: 12px 16px; }
#logo { height: 49px; width: auto; display: block; margin-right: 35px; }

/* Navigation */
.main-nav { padding: 4px 16px 12px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.main-nav a { color: var(--text-light); text-decoration: none; font-weight: 600; }
.main-nav   ul  li.active-link  a { color:#9ac92d;border-color:#9ac92d; }
.main-nav a:hover { color:#9ac92d;border-color:#9ac92d;  }

/* Header-Layout Desktop: Navigation links, Logo rechts (nicht zentriert) */
@media (min-width: 721px) {
  #topBar { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: nowrap; }
  .main-nav { order: 1; margin-left: 35px; }
  .siteTitle { order: 2; margin-left: auto; padding: 12px 16px; text-align: right; }
  #logo { margin-right: 35px; }
  #mobileNav { display: none; }
}

/* Mobile Navigation (CSS-only Toggle) */
#mobile-navigation { position: relative; }
#mobile-navigation .nav-toggle { position: absolute; left: -9999px; }
#mobile-navigation ul { display: none; list-style: none; margin: 0; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.15); background: var(--bg-anth); }
#mobile-navigation ul li { margin: 6px 0; }
#mobile-navigation ul a { color: var(--text-light); text-decoration: none; font-weight: 600; display: block; padding: 8px 0; }
#mobile-navigation ul a:hover { text-decoration: underline; }
#mobile-navigation-label { display: none; cursor: pointer; padding: 8px 16px; }
#mobile-navigation-label .hamburger { display: inline-flex; align-items: center; justify-content: center; }
#mobile-navigation-label .hamburger-box { width: 22px; height: 16px; position: relative; display: inline-block; }
#mobile-navigation-label .hamburger-inner,
#mobile-navigation-label .hamburger-inner::before,
#mobile-navigation-label .hamburger-inner::after { content: ""; display: block; width: 22px; height: 2px; background: var(--text-light); position: absolute; left: 0; transition: transform .2s ease, opacity .2s ease; }
#mobile-navigation-label .hamburger-inner { top: 7px; }
#mobile-navigation-label .hamburger-inner::before { top: -6px; }
#mobile-navigation-label .hamburger-inner::after { top: 6px; }
#mobile-nav-toggle:checked ~ #mobile-navigation-label .hamburger-inner { transform: rotate(45deg); }
#mobile-nav-toggle:checked ~ #mobile-navigation-label .hamburger-inner::before { transform: rotate(90deg); top: 0; }
#mobile-nav-toggle:checked ~ #mobile-navigation-label .hamburger-inner::after { opacity: 0; }
#mobile-nav-toggle:checked ~ ul { display: block; }

@media (max-width: 720px) {
  /* Desktop-Navigation ausblenden, Hamburger zeigen */
  .main-nav { display: none; }
  #mobile-navigation-label { display: block; margin: 0 auto; }
  .main-nav ul { gap: 12px; font-size: 15px; }
  #mobile-navigation { text-align: center; }
  #mobile-navigation ul { font-size: 15px; text-align: center; }
  #mobile-navigation ul a { display: inline-block; }
  /* Logo in der Mitte */
  .siteTitle { width: 100%; text-align: center; padding: 12px 0; }
  #logo { margin-right: 0; margin: 0 auto; }
}

/* Grid-Layout für Startseite (3-Spalten) */
#grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; height: auto !important; margin: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; }
#grid .item { position: relative !important; width: 100% !important; margin: 0 !important; aspect-ratio: 3 / 2; overflow: hidden; background-color: #000; }
#grid .item img { width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important; }
#grid .item .wrapper { position: absolute !important; inset: 0; background-color: rgba(0,0,0,.6); opacity: 0; transition: opacity .3s ease; display:flex !important; align-items:center; justify-content:center; }
#grid .item .wrapper .title { color: #fff; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
#grid .item:hover .wrapper { opacity: 1; }
.grid2 {display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important;}

@media (max-width: 900px){ #grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px){ #grid { grid-template-columns: 1fr !important; } }

/* Seiteninhalt */
#container { padding: 0px; }
#container-content { max-width: var(--maxw); margin: 0px auto; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 22px; line-height: 1.3; margin: 28px 0 8px; }
p { margin: 10px 0; }
a { color: var(--link); text-decoration: underline; }
h1, h2, h3 { color: var(--head-white); }
p, li { color: var(--text-light); }
.row {width: 900px; padding: 20px;margin: 0 auto;}

/* Footer weiß halten */
#bottomBar { background:#fff; border-top: 1px solid #eee; margin-top:0
px; }
#bottomBar .html-content { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px; text-align: center; font-size: 14px; color: #444; }
#bottomBar a { color: inherit; text-decoration: none; }
#bottomBar a:hover { color:#9ac92d;border-color:#9ac92d;  }

/* Bilder neutralisieren (es gibt hier keine, aber falls doch) */
img { max-width: 100%; height: auto; }