/*
Theme Name:     Hello Elementor Child
Description:    Ein Child Theme für Hello Elementor
Author:         Vincent Ulmer
Template:       hello-elementor
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    hello-elementor-child
*/

/* =========================================================
   BASE / DEFAULTS
   ========================================================= */

.rd_verticalText {
  writing-mode: sideways-lr;
  /* text-orientation: upright; */ /* optional: falls gewünscht */



	
}



.rd-refs__list {
	display: flex;
	gap: 32px;
}
/* =========================================================
   GRID
   ========================================================= */

.e-con-inner:not(.e-con-inner .e-con-inner) {
    padding-left: 32px !important;
	padding-right: 32px !important;
	
	@media screen and (max-width: 768px) {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

}



/* =========================================================
   TYPOGRAPHY
   ========================================================= */

@media (min-width: 768px) {
  .rd_br--mobile {
    display: none;
  }
}

@media (min-width: 992px) {
  .rd_br--tabletMobile {
    display: none;
  }
}

/* =========================================================
   HELPERS / UTILITIES
   ========================================================= */

/*.rd_section {
  padding: 0 16px;
}

@media (min-width: 769px) {
  .rd_section {
    padding: 0;
  }
}
*/
.rd_p--noMarginBottom p {
  margin-bottom: 0;
}

.rd_hyphens--auto {
  hyphens: auto;
}

.rd_aspectRation--1-1 img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}


/* Hintergrundfarben bei Bild */
.rd_img__bg--white img {
	background: white;
}


.rd_img__bg--beige img {
	background-color: var( --e-global-color-c8f781c );
}

.rd_img__bg--beige-dark img {
	background-color: var( --e-global-color-c43ae40 );
}
/* END Hintergrundfarben bei Bild */

/* =========================================================
   AREAS
   ========================================================= */

/* ---------- HEADER ---------- */

/* Header immer kompakt (88 px, Wert im Elementor-Template „Header“).
   Eingeloggt sitzt der feste Header unter der Admin-Leiste statt dahinter –
   sonst wirkt er vor dem Scrollen größer als danach. */
@media (min-width: 783px) {
  body.admin-bar .rd_header { top: 32px !important; }
}
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .rd_header { top: 46px !important; }
}

/* Navigation: active state indicator */
.elementor-29 .elementskit-navbar-nav > li.current-menu-item:after {
  content: "";
  text-align: center;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 100%;
  display: block;
  background-color: var(--e-global-color-accent);
  position: relative;
  top: -4px;
}

/* ---------- FOOTER ---------- */

.fluent_form_3 textarea.ff-el-form-control {
  border-radius: 0;
}

.fluent_form_3 input.ff-el-form-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px dotted #fff;
  border-radius: 0;
  padding: 8px 0;
  color: #000;
}

.fluent_form_3 input.ff-el-form-control::placeholder {
  color: var(--e-global-color-text);
}

.fluent_form_3 button {
  background-color: var(--e-global-color-accent) !important;
}

/* =========================================================
   WIDGETS
   ========================================================= */

/* ---------- CTA to Footer ---------- */

.rd_ctaToFooter {
  display: flex;
  flex-direction: row;
  gap: 32px;
  vertical-align: bottom;
  justify-content: center;
}

.rd_ctaToFooter_contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.rd_ctaToFooter_contact img {
  border-radius: 100%;
}

.rd_ctaToFooter_contact p {
  margin-top: 16px;
}

.rd_ctaToFooter svg {
  width: 200px;
}

/* =========================================================
   SITES
   ========================================================= */

/* ---------- Seite: Wir ---------- */
/* Mitglieder Kreis */

.rd_member {
  text-align: center;
}

.rd_member__image {
  margin-bottom: 8px;
}

.rd_member__image img {
  background: white;
  border-radius: 100%;
  width: 150px;
}

.rd_member__name {
  color: var(--e-global-color-accent);
  font-weight: 700;
  margin-bottom: 4px;
}



/* =========================================================
   ELEMENTOR WIDGETS
   ========================================================= */

/*AKKORDEN*/

/* Container: zwei Spalten */
.e-n-accordion {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  border: none;
  padding: 0.25rem 0;
	
	@media screen and (max-width: 768px) {
  grid-template-columns: 1fr;


	}
}

/* Items */
.e-n-accordion-item {
  display: grid !important;
  grid-template-rows: 1fr;
  column-gap: 2rem;
  border: none;
  padding: 0.5rem 0;
  border-bottom: 1.5px dotted var(--e-global-color-primary) !important;
}

/* Titel / Summary */
.e-n-accordion-item-title {
  font-weight: 600;
  font-size: 1rem;
  text-transform: lowercase;
  color: var(--e-global-color-accent) !important;
  cursor: default;
  border: none !important;
  background: none !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hover & Chevron */
.e-n-accordion-item-title:hover {
  color: var(--e-global-color-3b5cfab) !important;
}

.e-n-accordion-item-title::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 32px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%237b0030' stroke-width='3' stroke-linecap='butt' stroke-linejoin='miter'><line x1='4' y1='16' x2='24' y2='16'/><polyline points='16 8 24 16 16 24'/></svg>");
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* Akkordeon-Icons ausblenden */
.e-n-accordion-item-title-icon {
  display: none !important;
}

/* Content */
.e-con {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  border: none;
  padding: 0;
}

/* Geöffnet: Chevron dreht sich */
.e-n-accordion-item[open] .e-n-accordion-item-title::after {
  transform: rotate(90deg);
}

/*END AKKORDEN*/


/* =========================================================
   REFERENZEN / PROJEKTE (rd_kacheln, Projektseiten)
   Layout nach Kerstins Projekt-PDFs (Basis 1920: Icons 222,
   Spalten 540 / 657, Schrift 100 / 33 / 22)
   ========================================================= */

/* ---------- Seite Projekte + Startseite: Spalten um das Kachel-Widget ---------- */
.rd-kacheln-spalte {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 0;
}
.rd-kacheln-pfeilspalte {
	flex: 0 0 30% !important;
	width: 30% !important;
	align-items: flex-end;
}
.rd-pfeil-gross {
	display: block;
	width: clamp(70px, 11vw, 150px);
	height: auto;
	margin-left: auto;
	color: #000;
}
@media (max-width: 767px) {
	.rd-kacheln-pfeilspalte { display: none !important; }
}

/* ---------- Projektseite ---------- */
.rd-projekt .rd-projekt__icons {
	flex: 0 0 14.7% !important;
	width: 14.7% !important;
	gap: 20px !important;
	position: sticky;
	top: 40px;
	align-self: flex-start;
}
.rd-projekt .rd-projekt__icon img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.rd-projekt .rd-projekt__main {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
	max-width: 1240px;
}
.rd-projekt .rd-projekt__row {
	column-gap: 3.5% !important;
	align-items: flex-start;
}
.rd-projekt .rd-projekt__col {
	min-width: 0;
	align-items: flex-start;
}
.rd-projekt .rd-projekt__col--l { flex: 540 1 0 !important; width: auto !important; }
.rd-projekt .rd-projekt__col--r { flex: 657 1 0 !important; width: auto !important; }
.rd-projekt .rd-projekt__col--full { flex: 1 1 100% !important; width: 100% !important; }
.rd-projekt .rd-projekt__inline { flex-wrap: nowrap; align-items: flex-start; width: 100% !important; }
.rd-projekt .rd-projekt__col > .elementor-widget { max-width: 100%; }
.rd-projekt .rd-projekt__img img { display: block; height: auto; max-width: 100%; }

/* Typografie */
.rd-projekt .rd-projekt__title .elementor-heading-title {
	font-size: clamp(40px, 5.2vw, 100px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--e-global-color-primary);
}
.rd-projekt .rd-projekt__title strong { font-weight: 800; }
.rd-projekt .rd-projekt__kicker {
	font-size: clamp(15px, 1.72vw, 33px);
	font-weight: 300;
	letter-spacing: 0;
	margin-right: 0.8em;
}
.rd-projekt .rd-projekt__intro,
.rd-projekt .rd-projekt__intro p {
	font-size: clamp(19px, 1.72vw, 33px);
	line-height: 1.12;
	font-weight: 300;
	color: var(--e-global-color-text);
}
.rd-projekt .rd-projekt__text,
.rd-projekt .rd-projekt__text p,
.rd-projekt .rd-projekt__list,
.rd-projekt .rd-projekt__list p,
.rd-projekt .rd-projekt__list li {
	font-size: clamp(15.5px, 1.15vw, 22px);
	line-height: 1.63;
	font-weight: 300;
	color: var(--e-global-color-text);
}
.rd-projekt .rd-projekt__intro p:last-child,
.rd-projekt .rd-projekt__text p:last-child { margin-bottom: 0; }
.rd-projekt .rd-projekt__list p { margin: 0 0 0.2em; }
.rd-projekt .rd-projekt__list ul { list-style: none; margin: 0; padding: 0; }
.rd-projekt .rd-projekt__list li { position: relative; padding-left: 1em; }
.rd-projekt .rd-projekt__list li::before { content: "•"; position: absolute; left: 0; }
.rd-projekt .rd-projekt__h { width: 100%; }
.rd-projekt .rd-projekt__h .elementor-heading-title {
	font-size: clamp(20px, 1.72vw, 33px);
	font-weight: 300;
	line-height: 1.2;
	padding-bottom: 8px;
	border-bottom: 1.5px solid #000;
	color: var(--e-global-color-text);
}
.rd-projekt .rd-projekt__nav { width: 100%; }

/* Tablet / Mobil: einspaltig */
@media (max-width: 1024px) {
	.rd-projekt .rd-projekt__icons { flex-basis: 12% !important; width: 12% !important; }
}
@media (max-width: 767px) {
	.rd-projekt .rd-projekt__icons {
		position: static;
		flex-direction: row !important;
		width: auto !important;
		flex-basis: auto !important;
		gap: 12px !important;
	}
	.rd-projekt .rd-projekt__icon { width: 72px !important; }
	.rd-projekt .rd-projekt__main { width: 100% !important; }
	.rd-projekt .rd-projekt__row { flex-direction: column !important; row-gap: 16px !important; }
	.rd-projekt .rd-projekt__col--l,
	.rd-projekt .rd-projekt__col--r,
	.rd-projekt .rd-projekt__col--full { flex: 1 1 auto !important; width: 100% !important; gap: 14px !important; }
	.rd-projekt .rd-projekt__inline { flex-wrap: wrap; gap: 14px !important; }
	.rd-projekt .rd-projekt__img img { width: 100% !important; }
}
/* END REFERENZEN / PROJEKTE */