/* Racoon Elementor – kleine Layout-Anpassungen.
   Das eigentliche Styling (Farben, Karten, Buttons, Fonts) liefert das Racoon-Theme. */

/* Hero-Innenabstand im Elementor zähmen (Elementor steuert Außenabstände selbst) */
.rac-hero.rac-hero--el { padding-top: clamp(40px, 8vw, 90px); padding-bottom: clamp(40px, 8vw, 80px); }

/* Racoon-Widgets dürfen die volle Breite nutzen */
.elementor-widget-racoon_hero,
.elementor-widget-racoon_cards,
.elementor-widget-racoon_branches,
.elementor-widget-racoon_steps,
.elementor-widget-racoon_usp,
.elementor-widget-racoon_cta,
.elementor-widget-racoon_faq,
.elementor-widget-racoon_contact { width: 100%; }

/* Im Editor sind alle Inhalte sofort sichtbar (kein Scroll-Reveal, kein Übergang) */
.elementor-editor-active [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Fallback, falls das Racoon-Theme nicht aktiv ist: dunkler Hintergrund,
   damit der helle Text auf den Widgets lesbar bleibt. */
body:not(.rac-theme) .elementor-widget-racoon_hero,
body:not(.rac-theme) .elementor-widget-racoon_cards,
body:not(.rac-theme) .elementor-widget-racoon_branches,
body:not(.rac-theme) .elementor-widget-racoon_steps,
body:not(.rac-theme) .elementor-widget-racoon_usp,
body:not(.rac-theme) .elementor-widget-racoon_cta,
body:not(.rac-theme) .elementor-widget-racoon_faq,
body:not(.rac-theme) .elementor-widget-racoon_contact,
body:not(.rac-theme) .elementor-widget-racoon_heading,
body:not(.rac-theme) .elementor-widget-racoon_label,
body:not(.rac-theme) .elementor-widget-racoon_form { background: #000; }

/* ---- Racoon Überschrift (frei platzierbar, zweifarbig) ---- */
.rac-xhead {
	font-family: var(--rac-font-head, "Sora", sans-serif);
	font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
	color: #fff; margin: 0 0 .3em;
}
.rac-xhead--hero { font-size: var(--fs-hero, clamp(2.6rem, 6.2vw, 5.2rem)); line-height: 1.04; }
.rac-xhead--h1   { font-size: var(--fs-h1, clamp(2.1rem, 4.6vw, 3.4rem)); }
.rac-xhead--h2   { font-size: var(--fs-h2, clamp(1.7rem, 3.2vw, 2.5rem)); }
.rac-xhead--h3   { font-size: var(--fs-h3, clamp(1.25rem, 2vw, 1.55rem)); }
.rac-xhead--h4   { font-size: 1.25rem; }
.rac-xhead--h5   { font-size: 1.05rem; }
.rac-xhead--h6   { font-size: .95rem; }

/* Zweifarbiges Wort – global (das Theme-.grad ist auf den Hero beschränkt) */
.rac-grad {
	background: linear-gradient(120deg, var(--rac-accent, #00644B), var(--rac-green-300, #0a8a66) 60%, var(--rac-accent-soft, #0a8a66));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Racoon Formular: Contact Form 7 im Racoon-Look ---- */
.rac-form--cf7 .wpcf7-form p { margin: 0 0 1.1rem; }
.rac-form--cf7 .wpcf7-form label { display: block; font-size: .85rem; color: var(--rac-text-muted, #a7b3af); margin-bottom: .2rem; font-weight: 500; }
.rac-form--cf7 .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),
.rac-form--cf7 .wpcf7-form textarea,
.rac-form--cf7 .wpcf7-form select {
	width: 100%; font: inherit; color: #fff; background: rgba(255,255,255,.04);
	border: 1px solid var(--rac-line-strong, rgba(0,100,75,.6)); border-radius: 12px;
	padding: .85rem 1rem; margin-top: .25rem; transition: border-color .25s, box-shadow .25s;
}
.rac-form--cf7 .wpcf7-form input:focus,
.rac-form--cf7 .wpcf7-form textarea:focus,
.rac-form--cf7 .wpcf7-form select:focus {
	outline: none; border-color: var(--rac-accent, #00644B); box-shadow: 0 0 0 3px rgba(0,100,75,.18);
}
.rac-form--cf7 .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.rac-form--cf7 .wpcf7-form .wpcf7-submit {
	font-family: var(--rac-font-head, "Sora", sans-serif); font-weight: 600; font-size: 1.05rem;
	color: #fff; cursor: pointer; width: 100%;
	background: linear-gradient(135deg, var(--rac-green-300, #0a8a66), var(--rac-green, #00644B));
	border: 0; border-radius: 999px; padding: 1.1rem 2.1rem; margin-top: .4rem;
	box-shadow: 0 14px 34px -14px rgba(0,100,75,.9); transition: filter .25s, transform .25s;
}
.rac-form--cf7 .wpcf7-form .wpcf7-submit:hover { filter: brightness(1.12); transform: translateY(-3px); }
.rac-form--cf7 .wpcf7-response-output { border-radius: 10px; border-color: var(--rac-line-strong, rgba(0,100,75,.6)); color: var(--rac-text-muted, #a7b3af); margin: 1rem 0 0; }
.rac-form--cf7 .wpcf7-not-valid-tip { color: #ff9b9b; font-size: .8rem; margin-top: .3rem; }
.rac-form--cf7 .wpcf7-spinner { margin: .6rem auto 0; display: block; }

/* ---- Bild & Text: Bild füllt den Rahmen ---- */
.rac-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Bild-Collage: verschachtelte Bilder ---- */
.rac-collage {
	position: relative; display: grid; gap: 0; width: 100%;
	aspect-ratio: 4 / 3.6;
}
.rac-collage::before {
	content: ""; position: absolute; inset: -6% -6% -6% -6%; z-index: 0;
	background: radial-gradient(circle at 72% 28%, rgba(0,100,75,.30), transparent 60%);
	filter: blur(34px); pointer-events: none;
}
.rac-collage__img {
	position: relative; overflow: hidden; border-radius: var(--rac-r-lg, 24px);
	border: 1px solid var(--rac-line-strong, rgba(0,100,75,.6));
	box-shadow: var(--rac-shadow, 0 18px 50px -20px rgba(0,0,0,.7));
	background: var(--rac-ink-800, #121313);
}
.rac-collage__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 2 Bilder: groß oben-links, kleiner überlappend unten-rechts */
.rac-collage--2 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.rac-collage--2 .rac-collage__img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.rac-collage--2 .rac-collage__img:nth-child(2) { grid-area: 3 / 3 / 7 / 7; z-index: 2; }

/* 3 Bilder: versetzt verschachtelt */
.rac-collage--3 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.rac-collage--3 .rac-collage__img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; z-index: 1; }
.rac-collage--3 .rac-collage__img:nth-child(2) { grid-area: 2 / 4 / 6 / 7; z-index: 3; }
.rac-collage--3 .rac-collage__img:nth-child(3) { grid-area: 4 / 2 / 7 / 5; z-index: 2; }

/* 1 Bild (Fallback) */
.rac-collage--1 { aspect-ratio: 4 / 3; }
.rac-collage--1 .rac-collage__img { grid-area: 1 / 1 / 2 / 2; }

/* Collage ohne Text: zentriert, begrenzte Breite */
.rac-collage-solo { max-width: 760px; margin-inline: auto; }

@media (max-width: 600px) {
	.rac-collage { aspect-ratio: 4 / 4; }
}