/*
Theme Name: BungartenArchitekten
Theme URI: 
Author: Felix Reither
Author URI: 
Description: Für Bungarten Architekten in Grafschaft wurde ein speziell angefertigtes WordPress Gutenberg-Theme entwickelt, das die Einzigartigkeit und Professionalität des Architekturbüros digital zum Ausdruck bringt. Das Design des Themes ist klar, modern und fokussiert darauf, die architektonischen Projekte und Leistungen von Bungarten Architekten optimal zu präsentieren. Features des Themes: Responsive Design: Passt sich nahtlos an alle Geräte an, von Desktops bis zu Smartphones, um eine optimale Benutzererfahrung zu gewährleisten. Portfolio-Funktion: Eine maßgeschneiderte Portfolio-Funktion, die es ermöglicht, Projekte ansprechend mit Bildern, Beschreibungen und weiterführenden Informationen darzustellen. Leichte Bedienbarkeit: Durch die Nutzung des Gutenberg-Editors können Inhalte einfach und intuitiv verwaltet und aktualisiert werden, was die Pflege der Website vereinfacht. Kundenspezifische Blöcke: Individuell entwickelte Blöcke für spezifische Inhalte wie Teamvorstellungen, Dienstleistungen und Kundenrezensionen. SEO-Optimierung: Das Theme ist für Suchmaschinen optimiert, um eine bessere Sichtbarkeit und Auffindbarkeit im Internet zu gewährleisten. Schnellladende Seiten: Optimiert für schnelle Ladezeiten, um die Benutzerbindung zu verbessern und positive SEO-Effekte zu erzielen. Dieses WordPress Gutenberg-Theme bietet Bungarten Architekten eine robuste und flexible Plattform, um ihr Unternehmen online zu präsentieren und mit Kunden sowie Interessenten in Kontakt zu treten.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bungartenarchitekten
Tags: 
*/

html,
body {
  height: 100%;
  background-color: #f6f6f6 !important;
}

@media (min-width: 851px) {
  body {
    padding-top: 130px;
  }
}

/* WordPress: Blockabstände resetten */

:where(.wp-site-blocks) > *,
:root :where(.is-layout-flow) > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ============================= */
/* === TYPOGRAFIE-VARIABLEN ==== */
/* ============================= */

:root {
  /* Mobile Defaults */
  --picodea-h1-font-size: 36px;
  --picodea-h1-font-weight: 1000;
  --picodea-h2-font-size: 30px;
  --picodea-h2-font-weight: 700;
  --picodea-h3-font-size: 20px;
  --picodea-h3-font-weight: 700;
  --picodea-h4-font-size: 16px;
  --picodea-h4-font-weight: 500;
  --picodea-p-font-size: 16px;
  --picodea-p-font-weight: 500;
}

@media (min-width: 768px) {
  :root {
    --picodea-h1-font-size: 100px;
    --picodea-h1-font-weight: 1000;
    --picodea-h2-font-size: 68px;
    --picodea-h2-font-weight: 700;
    --picodea-h3-font-size: 32px;
    --picodea-h3-font-weight: 700;
    --picodea-h4-font-size: 24px;
    --picodea-h4-font-weight: 500;
    --picodea-p-font-size: 21px;
    --picodea-p-font-weight: 500;
  }
}

/* ============================= */
/* ======= TYPOGRAFIE ========== */
/* ============================= */

h1 {
  font-size: var(--picodea-h1-font-size);
  font-weight: var(--picodea-h1-font-weight);
  margin: 0;
}
h2 {
  font-size: var(--picodea-h2-font-size);
  font-weight: var(--picodea-h2-font-weight);
  margin: 0;
}
h3 {
  font-size: var(--picodea-h3-font-size);
  font-weight: var(--picodea-h3-font-weight);
  margin: 0;
}
h4 {
  font-size: var(--picodea-h4-font-size);
  font-weight: var(--picodea-h4-font-weight);
  margin: 0;
}
p {
  font-size: var(--picodea-p-font-size);
  font-weight: var(--picodea-p-font-weight);
  margin: 0;
}

/* ============================= */
/* ======= PADDING-HILFEN ====== */
/* ============================= */

.picodea-padding-x {
  padding-left: 30px;
  padding-right: 30px;
}
@media (min-width: 768px) {
  .picodea-padding-x {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.picodea-padding-y {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media (min-width: 768px) {
  .picodea-padding-y {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Alternative Schreibweise falls "block" verwendet wird */
.picodea-padding-block-y {
  padding-block: 60px;
}
@media (min-width: 768px) {
  .picodea-padding-block-y {
    padding-block: 120px;
  }
}

/* ============================= */
/* ========= LINK-STIL ========= */
/* ============================= */

.picodea-link {
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  /* color: white; */
}
.picodea-link .picodea-orange-slashes {
  color: #e85f30;
  margin-right: 8px;
}

/* ============================= */
/* === WP Kontaktformular 7 ==== */
/* ============================= */

.wp-block-contact-form-7-contact-form-selector {
  display: flex;
  flex: 1;
}
.wpcf7 {
  width: 100%;
  display: flex;
}
.wpcf7-form {
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 30px;
  width: 100%;
  gap: 15px;
  display: flex;
  flex-direction: column;
}
.wpcf7 label {
  font-size: 18px;
  font-weight: 500;
  padding-bottom: 15px;
  width: 100%;
}
.wpcf7-form-control-wrap {
  display: inline-flex;
  margin-top: 5px;
  width: 100%;
}
.wpcf7 input,
.wpcf7 textarea {
  padding: 12px 16px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.wpcf7-submit,
input.wpcf7-submit {
  background-color: #000;
  color: #f6f6f6;
  margin-top: 20px;
  border: 1px solid #000;
}

/* ============================= */
/* ========== HELPER =========== */
/* ============================= */

@media (max-width: 768px) {
  .height-auto-mobile {
    height: auto;
  }
}

.picodea-gap {
  gap: 60px;
}
@media (min-width: 768px) {
  .picodea-gap {
    gap: 120px;
  }
}

.pswp__button--arrow--prev,
.pswp__button--arrow--next {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 100000 !important;
}

.pswp__icn {
  fill: #000; /* oder #fff je nach Hintergrund */
  stroke: none;
}