/* ==========================================================================
   Blockchäfer — Design System (dark theme)
   Rebuilt from the original Wix site as a plain static HTML/CSS site.
   Edit the design tokens below to tweak colours, fonts and spacing globally.
   ========================================================================== */

:root {
  /* Brand colours — dark theme (white text on dark grey, like the original) */
  --bg:        #2a2f35; /* page background (dark grey) */
  --bg-alt:    #23272c; /* alternating sections */
  --surface:   #333a42; /* cards, inputs, table */
  --charcoal:  #1c2024; /* header / footer / darkest */
  --ink:       #eceef0; /* body text */
  --heading:   #ffffff; /* headings */
  --muted:     #a6acb3; /* secondary text */
  --accent:    #d84ba6; /* magenta — buttons, links, highlights */
  --accent-2:  #b45ad4; /* purple — button borders, accents */
  --line:      rgba(255,255,255,.12);

  /* Typography — a single sans-serif family for body text and headings */
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1120px;
  --gap: 24px;
  --radius: 0px;
  --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--sans); color: var(--heading); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .6em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
strong { color: #fff; }

/* ------- Layout helpers ------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding: clamp(40px, 7vw, 84px) 0; }
.section--alt { background: var(--bg-alt); }
.narrow { max-width: 760px; }
.center { text-align: center; }
.lead { font-size: 1.15rem; color: var(--muted); }

/* Google Maps embed (Halle page) */
.map-embed { position: relative; aspect-ratio: 16 / 10; margin: 22px 0 10px; border: 1px solid var(--line); background: var(--surface); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) { .map-embed { aspect-ratio: 4 / 3; } }

/* ------- Buttons -------
   Zurückhaltend: heller Text auf dunklem Grund, Akzentfarbe nur als Rahmen.
   Die Fläche färbt sich erst beim Darüberfahren. Damit bleibt die Farbe die
   gleiche wie überall auf der Seite, sie drängt sich aber nicht auf. */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: 13px 30px; background: transparent; color: #fff;
  border: 2px solid var(--accent); border-radius: var(--radius);
  cursor: pointer; text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* Zweite Stufe: noch leiser, der Rahmen nimmt erst beim Darüberfahren Farbe an. */
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: #fff; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(28,32,36,.94);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.nav__logo img { height: 34px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav__menu a { color: #e7e9eb; font-size: .95rem; letter-spacing: .01em; padding: 6px 0; position: relative; }
.nav__menu a:hover { color: var(--accent); text-decoration: none; }
.nav__menu a[aria-current="page"] { color: var(--accent); }
.nav__menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; padding: 8px; }
.nav__toggle span { display: block; height: 2px; background: #fff; margin: 5px 0; transition: .25s; }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--charcoal); border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px; max-height: calc(100vh - var(--header-h));
    overflow-y: auto; transform: translateY(-120%); transition: transform .28s ease;
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__menu li { width: 100%; }
  .nav__menu a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; }
.hero__img { width: 100%; max-height: 560px; object-fit: cover; }
.hero__banner { background: var(--charcoal); color: #fff; text-align: center; padding: 40px 20px; border-bottom: 3px solid var(--accent); }
.hero__banner h1, .hero__banner h2 { color: #fff; margin-bottom: .3em; }
.hero__banner p { color: rgba(255,255,255,.82); margin: 0 auto; max-width: 720px; }

/* ==========================================================================
   Content blocks
   ========================================================================== */
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.6em; color: var(--accent); }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose img { margin: 1.5em 0; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Cards grid */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); transition: transform .12s ease, border-color .12s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.card__body { padding: 16px; }
.card__body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card__role { color: var(--muted); font-size: .9rem; }

/* Team members — compact photos */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.member { text-align: center; }
.member img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 2px solid var(--line); }
.member h3 { margin: 0 0 2px; font-size: 1.02rem; }
.member p { color: var(--muted); font-size: .88rem; margin: 0; }

/* Feature row (image + text) */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature--reverse .feature__media { order: 2; }
@media (max-width: 800px){ .feature { grid-template-columns: 1fr; gap: 24px; } .feature--reverse .feature__media { order: 0; } }

/* ==========================================================================
   Pricing table
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.price-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--surface); font-size: .96rem; }
.price-table th, .price-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.price-table thead th { background: var(--charcoal); color: #fff; font-family: var(--sans); font-weight: 700; font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; }
.price-table tbody th { text-align: left; color: #fff; font-family: var(--sans); font-weight: 600; }
.price-table tbody th span { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.price-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.price-table tbody tr:hover { background: rgba(216,75,166,.10); }
.price-table td { color: var(--ink); }
.price-legend { color: var(--muted); font-size: .85rem; margin-top: 12px; }

/* Document links with PDF icon */
.doc-list { list-style: none; padding: 0; }
.doc-list li { margin: .5em 0; }
.doc-link { display: inline-flex; align-items: center; gap: 9px; }
.doc-link svg { flex: none; width: 20px; height: 20px; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px){ .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery a { display: block; overflow: hidden; background: var(--surface); }
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .4s ease; }
.gallery a:hover img { transform: scale(1.06); }

/* ==========================================================================
   Blog
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px){ .posts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .posts { grid-template-columns: 1fr; } }
.post-card { border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; color: var(--ink); transition: transform .12s ease, border-color .12s ease; }
.post-card:hover { transform: translateY(-3px); border-color: var(--accent); text-decoration: none; }
.post-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.post-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__date { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.post-card h3 { font-size: 1.15rem; margin: 0; }
.post-card__more { margin-top: auto; color: var(--accent); font-weight: 600; font-size: .9rem; }

/* ==========================================================================
   News — short notices on the home page (built from src/news/*.md)
   ========================================================================== */
.news-list { display: grid; gap: 24px; margin-bottom: 44px; }
.news { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.news--media { display: grid; grid-template-columns: 340px 1fr; }
.news__media img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; display: block; }
.news__body { padding: 24px 28px; }
.news__body > :first-child { margin-top: 0; }
.news__body > :last-child { margin-bottom: 0; }
.news__date { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.news__body h3 { margin: 6px 0 12px; font-size: 1.25rem; }
@media (max-width: 700px){
  .news--media { grid-template-columns: 1fr; }
  .news__media img { min-height: 0; aspect-ratio: 3/2; }
}

.article { max-width: 760px; margin-inline: auto; }
.article__date { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.article__hero { width: 100%; max-height: 460px; object-fit: cover; margin: 22px 0; }
.article__gallery { margin: 24px 0; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { display: grid; gap: 18px; max-width: 640px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
/* Zusatzfelder, die nur zu einem Betreff gehören. [hidden] muss display:flex
   überstimmen, sonst bliebe das Feld trotzdem sichtbar. */
.field[hidden] { display: none; }
.field label { font-size: .9rem; font-weight: 600; color: #fff; }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.2); background: var(--surface); color: var(--ink); border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #7f868d; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Eigener Pfeil, damit das Auswahlfeld in allen Browsern gleich aussieht. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.field select option { background: var(--surface); color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.form__status { font-size: .95rem; padding: 12px 14px; display: none; }
.form__status.is-error { display: block; background: rgba(216,75,166,.12); color: #f2a9d3; border: 1px solid rgba(216,75,166,.4); }
.form__status.is-success { display: block; background: rgba(52,190,110,.12); color: #86e2a6; border: 1px solid rgba(52,190,110,.4); }
.form__note { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,.72); padding: 48px 0 28px; margin-top: 40px; border-top: 1px solid var(--line); }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.footer__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.footer__col h4 { color: #fff; font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.footer__col p, .footer__col a { font-size: .95rem; line-height: 1.9; }
.footer__social { display: flex; gap: 14px; margin-top: 6px; }
.footer__social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.footer__social a:hover { background: var(--accent); border-color: var(--accent); }
.footer__social svg { width: 18px; height: 18px; fill: currentColor; }
.footer__bottom { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(255,255,255,.5); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ==========================================================================
   Webshop CTA band (home)
   ========================================================================== */
.cta-band { background: linear-gradient(100deg, var(--accent), var(--accent-2)); color: #fff; padding: 38px 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 4px; }
.cta-band p { color: rgba(255,255,255,.92); margin: 0; }
.btn--onaccent { background: #fff; color: var(--accent); border-color: #fff; }
.btn--onaccent:hover { background: #f3e7f0; color: var(--accent); border-color: #f3e7f0; }

/* ==========================================================================
   Mobile price accordion (shown instead of the table on small screens)
   ========================================================================== */
.price-accordion { display: none; border: 1px solid var(--line); }
.price-accordion details { border-bottom: 1px solid var(--line); background: var(--surface); }
.price-accordion details:last-child { border-bottom: 0; }
.price-accordion summary { padding: 15px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.price-accordion summary::-webkit-details-marker { display: none; }
.price-accordion summary .cat { color: #fff; font-weight: 600; }
.price-accordion summary .cat small { display: block; color: var(--muted); font-weight: 400; font-size: .8rem; }
.price-accordion summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; line-height: 1; flex: none; }
.price-accordion details[open] summary::after { content: "\2013"; }
.price-accordion ul { list-style: none; margin: 0; padding: 0 16px 12px; }
.price-accordion li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.price-accordion li .sub { color: var(--muted); }
.price-accordion li .val { color: #fff; white-space: nowrap; }
@media (max-width: 640px) {
  .table-wrap { display: none; }
  .price-accordion { display: block; }
}

/* ==========================================================================
   Lightbox gallery
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(10,12,14,.93); padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox__stage { margin: 0; display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; }
.lightbox__img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 12px 48px rgba(0,0,0,.55); }
.lightbox__close { position: absolute; top: 14px; right: 20px; font-size: 2.4rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.lightbox__close:hover { color: var(--accent); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.4rem; background: rgba(0,0,0,.35); border: 0; color: #fff; cursor: pointer; width: 54px; height: 74px; display: flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { background: var(--accent); }
.lightbox__prev { left: 10px; } .lightbox__next { right: 10px; }
.lightbox__counter { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: .9rem; }
.lightbox[data-single="1"] .lightbox__nav, .lightbox[data-single="1"] .lightbox__counter { display: none; }
@media (max-width: 560px) { .lightbox__nav { width: 42px; height: 60px; font-size: 1.9rem; } }

/* Honeypot field of the contact form. People never see it, bots fill it in. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Utilities */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.visually-hidden { position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }