/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 21 2026 | 13:36:54 */
/* ── UTILITY ── */
.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 48px
}

@media(max-width:768px) {
	.container {
		padding: 0 20px
	}
}

.label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--nv-primary-accent);
	margin-bottom: 14px
}

.label::before {
	content: '';
	display: block;
	width: 20px;
	height: 2px;
	background: var(--nv-primary-accent)
}

h1,
h2,
h3 {
	font-family: 'DM Serif Display', serif;
	line-height: 1.1;
	letter-spacing: -.02em
}

h1 {
	font-size: clamp(30px, 5vw, 52px)
}

h2 {
	font-size: clamp(22px, 3.5vw, 38px)
}

h3 {
	font-size: clamp(17px, 2.2vw, 22px)
}

em {
	font-style: italic;
	color: var(--nv-primary-accent);
	-webkit-text-fill-color: var(--nv-primary-accent)
}

.lead {
	font-size: 17px;
	color: var(--muted);
	line-height: 1.75
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 24px;
	border: none;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .15s, color .15s;
	white-space: nowrap
}

.btn-primary {
	background: var(--nv-primary-accent);
	color: var(--navy);
	box-shadow: 0 4px 18px rgba(0, 217, 176, .25)
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0, 217, 176, .4)
}

.btn-outline {
	background: transparent;
	color: var(--navy);
	border: 2px solid var(--navy)
}

.btn-outline:hover {
	background: var(--navy);
	color: #fff
}

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease
}

.reveal.visible {
	opacity: 1;
	transform: none
}



/* ── HERO ── */
.hero {
	background: #fff;
	padding: 72px 0 80px;
	position: relative;
	overflow: hidden
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 55% 70% at 95% 40%, #DFF7F2 0%, transparent 55%), radial-gradient(ellipse 30% 40% at 0% 90%, #EEF0FA 0%, transparent 50%);
	pointer-events: none;
	z-index: 0
}

.hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 64px;
	align-items: center
}

.hero h1 {
	margin-bottom: 20px
}

.hero .lead {
	margin-bottom: 36px;
	max-width: 460px
}

/* Contact method cards in hero */
.contact-methods {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.cm-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--border);
	background: #fff;
	text-decoration: none;
	transition: border-color .2s, transform .15s, box-shadow .15s;
	position: relative;
}

.cm-card:hover {
	border-color: var(--nv-primary-accent);
	transform: translateX(4px);
	box-shadow: 0 4px 20px rgba(0, 217, 176, .12)
}

.cm-card.primary {
	border-color: var(--nv-primary-accent);
	background: var(--teal-soft)
}

.cm-card.primary::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--nv-primary-accent)
}

.cm-icon {
	width: 44px;
	height: 44px;
	border-radius: 2px;
	background: var(--teal-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cm-card.primary .cm-icon {
	background: rgba(0, 217, 176, .2)
}

.cm-icon svg {
	stroke: var(--nv-primary-accent);
	width: 20px;
	height: 20px;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round
}

.cm-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nv-primary-accent);
	margin-bottom: 3px
}

.cm-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 2px
}

.cm-sub {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4
}

.cm-arrow {
	margin-left: auto;
	color: var(--border);
	font-size: 18px;
	transition: color .2s;
	flex-shrink: 0
}

.cm-card:hover .cm-arrow {
	color: var(--nv-primary-accent)
}

/* Hero right – Johannes card */
.johannes-card {
	background: var(--navy);
	padding: 32px;
	position: relative;
	overflow: hidden
}

.johannes-card::before {
	content: '';
	position: absolute;
	right: -40px;
	top: -40px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 1px solid rgba(0, 217, 176, .18)
}

.jc-top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	position: relative;
	z-index: 2
}

.jc-photo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--nv-primary-accent);
	flex-shrink: 0
}

.jc-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top
}

.jc-name {
	font-family: 'DM Serif Display', serif;
	font-size: 17px;
	color: #fff;
	margin-bottom: 3px
}

.jc-cred {
	font-size: 11px;
	color: rgba(255, 255, 255, .5);
	line-height: 1.4
}

.jc-body {
	position: relative;
	z-index: 2
}

.jc-quote {
	font-family: 'DM Serif Display', serif;
	font-style: italic;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.55;
	margin-bottom: 16px
}

.jc-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.jc-stat {
	background: rgba(255, 255, 255, .06);
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .08)
}

.jc-stat-val {
	font-family: 'DM Serif Display', serif;
	font-size: 20px;
	color: var(--nv-primary-accent);
	-webkit-text-fill-color: var(--nv-primary-accent);
	line-height: 1
}

.jc-stat-label {
	font-size: 10px;
	color: rgba(255, 255, 255, .45);
	margin-top: 3px;
	line-height: 1.3
}

@media(max-width:900px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 36px
	}

	.hero {
		padding: 48px 0 60px
	}
}

/* ── CONTACT FORM SECTION ── */
.form-section {
	padding: 80px 0;
	background: var(--offwhite)
}

.form-inner {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 56px;
	align-items: start
}

/* Form */
.contact-form {
	background: #fff;
	border: 1px solid var(--border);
	padding: 40px
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px
}

.form-group:last-of-type {
	margin-bottom: 0
}

.form-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
	letter-spacing: .02em
}

.form-label .req {
	color: var(--nv-primary-accent)
}

.form-input {
	border: 1px solid var(--border);
	padding: 12px 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: var(--navy);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	background: #fff;
	width: 100%
}

.form-input:focus {
	border-color: var(--nv-primary-accent);
	box-shadow: 0 0 0 3px rgba(0, 217, 176, .1)
}

.form-input::placeholder {
	color: var(--muted);
	opacity: .6
}

textarea.form-input {
	resize: vertical;
	min-height: 120px
}

select.form-input {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 36px
}

.form-consent {
	background: var(--offwhite);
	border: 1px solid var(--border);
	padding: 14px 16px;
	margin: 20px 0;
	display: flex;
	gap: 10px;
	align-items: flex-start
}

.form-consent input[type=checkbox] {
	margin-top: 2px;
	accent-color: var(--nv-primary-accent);
	width: 15px;
	height: 15px;
	flex-shrink: 0
}

.form-consent span {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.55
}

.form-consent a {
	color: var(--nv-primary-accent);
	text-decoration: none
}

.form-submit {
	width: 100%;
	justify-content: center;
	padding: 16px;
	font-size: 13px
}

.form-footnote {
	font-size: 11px;
	color: var(--muted);
	text-align: center;
	margin-top: 10px
}

/* Sidebar info */
.contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.cs-block {
	background: #fff;
	border: 1px solid var(--border);
	padding: 24px
}

.cs-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nv-primary-accent);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 6px
}

.cs-label::before {
	content: '';
	display: block;
	width: 12px;
	height: 2px;
	background: var(--nv-primary-accent)
}

.contact-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
	transition: color .15s
}

.contact-link:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.contact-link:hover .cl-text {
	color: var(--nv-primary-accent)
}

.cl-icon {
	width: 34px;
	height: 34px;
	background: var(--teal-soft);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0
}

.cl-icon svg {
	stroke: var(--nv-primary-accent);
	width: 15px;
	height: 15px;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round
}

.cl-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted)
}

.cl-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--navy);
	transition: color .15s
}

.response-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--muted);
	padding: 12px 14px;
	background: var(--teal-soft);
	border: 1px solid rgba(0, 217, 176, .2)
}

.rb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nv-primary-accent);
	flex-shrink: 0;
	animation: pulse 2s ease-in-out infinite
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

/* Purpose guide */
.purpose-list {
	display: flex;
	flex-direction: column;
	gap: 0
}

.purpose-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px
}

.purpose-item:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.pi-tag {
	flex-shrink: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 7px;
	white-space: nowrap;
	margin-top: 1px
}

.pi-tag.termin {
	background: var(--nv-primary-accent);
	color: var(--navy)
}

.pi-tag.mail {
	background: var(--offwhite);
	border: 1px solid var(--border);
	color: var(--muted)
}

.pi-tag.form {
	background: var(--navy);
	color: #fff
}

.pi-text {
	color: var(--muted);
	line-height: 1.5
}

.pi-text strong {
	color: var(--navy);
	font-weight: 600;
	display: block;
	margin-bottom: 2px
}

@media(max-width:900px) {
	.form-section {
		padding: 56px 0
	}

	.form-inner {
		grid-template-columns: 1fr;
		gap: 28px
	}

	.contact-sidebar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px
	}
}

@media(max-width:580px) {
	.form-row {
		grid-template-columns: 1fr
	}

	.contact-form {
		padding: 24px 20px
	}

	.contact-sidebar {
		grid-template-columns: 1fr
	}
}

/* ── LOCATION / AVAILABILITY ── */
.avail-section {
	padding: 64px 0
}

.avail-inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px
}

.avail-card {
	background: #fff;
	border: 1px solid var(--border);
	padding: 28px;
	position: relative;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s
}

.avail-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(26, 30, 90, .08)
}

.avail-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--nv-primary-accent)
}

.avail-icon {
	width: 44px;
	height: 44px;
	background: var(--teal-soft);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px
}

.avail-icon svg {
	stroke: var(--nv-primary-accent);
	width: 20px;
	height: 20px;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round
}

.avail-card h3 {
	font-size: 17px;
	margin-bottom: 8px
}

.avail-card p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65
}

.avail-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--nv-primary-accent);
	color: var(--navy);
	padding: 3px 9px;
	margin-top: 12px
}

@media(max-width:768px) {
	.avail-inner {
		grid-template-columns: 1fr 1fr
	}
}

@media(max-width:480px) {
	.avail-inner {
		grid-template-columns: 1fr
	}
}

/* ── CTA DARK ── */
.cta-dark {
	background: var(--navy);
	padding: 72px 0;
	position: relative;
	overflow: hidden
}

.cta-dark::before {
	content: '';
	position: absolute;
	right: -80px;
	top: -80px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	border: 1px solid rgba(0, 217, 176, .12)
}

.cta-inner {
	position: relative;
	z-index: 2;
	text-align: center
}

.cta-dark h2 {
	color: #fff;
	margin-bottom: 10px
}

.cta-dark h2 em {
	color: var(--nv-primary-accent);
	-webkit-text-fill-color: var(--nv-primary-accent)
}

.cta-dark p {
	font-size: 15px;
	color: rgba(255, 255, 255, .5);
	margin-bottom: 28px
}

.cta-btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center
}

@media(max-width:500px) {
	.cta-btns {
		flex-direction: column;
		align-items: center
	}

	.cta-btns .btn {
		width: 100%;
		justify-content: center
	}
}


/* ════════════════════════════════════════════
   KONTAKTFORMULAR – Otter Forms Pro
   Potentialberatung Wirgler e.U. · 2026
════════════════════════════════════════════ */

/* ── Wrapper: contact-form Group Block ────── */
.contact-form {
  background:    #ffffff;
  border:        1px solid #E0E3EF;
  padding:       40px;
}
@media (max-width: 600px) {
  .contact-form { padding: 24px 20px; }
}

/* ── Form Container ───────────────────────── */
.contact-form .otter-form,
.contact-form .wp-block-themeisle-blocks-form {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0;
  margin:     0;
}

/* ── Field wrapper (each row) ─────────────── */
.contact-form .otter-form-field,
.contact-form .wp-block-themeisle-blocks-form-input,
.contact-form .wp-block-themeisle-blocks-form-textarea,
.contact-form .wp-block-themeisle-blocks-form-multiple-choice {
  margin-bottom: 14px;
  min-width:     0;
  box-sizing:    border-box;
}

/* ── Half-width fields (side by side) ─────── */
.contact-form .otter-form-field[data-width="50"],
.contact-form .wp-block-themeisle-blocks-form-input.has-width-50 {
  width:           calc(50% - 8px);
  display:         inline-block;
  vertical-align:  top;
}
.contact-form .otter-form-field[data-width="50"]:nth-child(odd),
.contact-form .wp-block-themeisle-blocks-form-input.has-width-50:nth-child(odd) {
  margin-right: 16px;
}
@media (max-width: 580px) {
  .contact-form .otter-form-field[data-width="50"],
  .contact-form .wp-block-themeisle-blocks-form-input.has-width-50 {
    width:        100%;
    display:      block;
    margin-right: 0;
  }
}

/* ── Labels ───────────────────────────────── */
.contact-form label,
.contact-form .otter-form-field label,
.contact-form .wp-block-themeisle-blocks-form-input label {
  font-family:    'DM Sans', sans-serif;
  font-size:      12px;
  font-weight:    600;
  color:          #1A1E5A;
  letter-spacing: .02em;
  display:        block;
  margin-bottom:  5px;
}

/* Required asterisk ─────────────────────── */
.contact-form .otter-form-field label .required,
.contact-form label .is-required,
.contact-form label abbr[title] {
  color:           #00D9B0;
  text-decoration: none;
  margin-left:     2px;
}

/* ── Inputs, Textarea, Select ─────────────── */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form select {
  font-family:   'DM Sans', sans-serif;
  font-size:     14px;
  color:         #1A1E5A;
  background:    #ffffff;
  border:        1px solid #E0E3EF;
  border-radius: 0;
  padding:       12px 14px;
  width:         100%;
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
  box-shadow:    none;
  appearance:    none;
  -webkit-appearance: none;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #00D9B0;
  box-shadow:   0 0 0 3px rgba(0,217,176,.1);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:   #5A6080;
  opacity: .55;
}

/* Textarea min-height ────────────────────── */
.contact-form textarea {
  min-height: 120px;
  resize:     vertical;
}

/* Select arrow ───────────────────────────── */
.contact-form select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6080' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  background-size:     16px;
  padding-right:       36px;
  cursor:              pointer;
}

/* ── Checkbox (DSGVO) ─────────────────────── */
.contact-form input[type="checkbox"] {
  accent-color: #00D9B0;
  width:        15px;
  height:       15px;
  margin-top:   2px;
  flex-shrink:  0;
  cursor:       pointer;
}
.contact-form .otter-form-field.is-checkbox label,
.contact-form .o-form-multiple-choice-field label {
  font-size:   11px !important;
  font-weight: 400 !important;
  color:       #5A6080 !important;
  line-height: 1.55 !important;
  margin:      0 !important;
  cursor:      pointer !important;
}

.contact-form .o-form-multiple-choice-field label a {
  color:           #00D9B0;
  text-decoration: none;
}*/

/* ── Submit Button ────────────────────────── */
.contact-form .otter-form-submit,
.contact-form button[type="submit"],
.contact-form .wp-block-themeisle-blocks-form__submit button,
.contact-form input[type="submit"] {
  background:     #00D9B0 !important;
  color:          #1A1E5A !important;
  border:         none !important;
  border-radius:  0 !important;
  font-family:    'DM Sans', sans-serif !important;
  font-size:      12px !important;
  font-weight:    700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding:        15px 28px !important;
  width:          100% !important;
  display:        block !important;
  cursor:         pointer !important;
  margin-top:     6px !important;
  box-shadow:     0 4px 18px rgba(0,217,176,.25) !important;
  transition:     transform .15s, box-shadow .15s, background .15s !important;
}
.contact-form .otter-form-submit:hover,
.contact-form button[type="submit"]:hover,
.contact-form input[type="submit"]:hover {
  background:  #00B896 !important;
  transform:   translateY(-1px) !important;
  box-shadow:  0 8px 28px rgba(0,217,176,.35) !important;
}

/* ── Success State ────────────────────────── */
.contact-form .otter-form__success,
.contact-form .wp-block-themeisle-blocks-form__success {
  text-align:  center;
  padding:     32px 20px;
}
.form-success-msg {
  text-align: center;
}
.fsm-icon {
  width:        60px;
  height:       60px;
  background:   #E6FAF6;
  border-radius:50%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  margin:       0 auto 16px;
}
.form-success-msg h4 {
  font-family:  'DM Serif Display', serif;
  font-size:    22px;
  color:        #1A1E5A;
  margin-bottom:8px;
}
.form-success-msg p {
  font-size:  14px;
  color:      #5A6080;
  line-height:1.65;
}

/* ── Error State ──────────────────────────── */
.contact-form .otter-form-field.has-error input,
.contact-form .otter-form-field.has-error textarea,
.contact-form .otter-form-field.has-error select {
  border-color: #ef4444;
  box-shadow:   0 0 0 3px rgba(239,68,68,.08);
}
.contact-form .otter-form-field .field-error,
.contact-form .otter-form__error {
  font-size:  11px;
  color:      #ef4444;
  margin-top: 4px;
  font-weight:500;
}

/* ── Footnote below button ────────────────── */
.contact-form .otter-form-footer-note,
.contact-form .form-footnote {
  font-size:  11px;
  color:      #5A6080;
  text-align: center;
  margin-top: 10px;
}

/* ── Remove Otter default margin/padding ─────
   that might conflict with brand spacing ───── */
.contact-form .otter-form .otter-form-field > div,
.contact-form .wp-block-themeisle-blocks-form > div {
  margin:  0;
  padding: 0;
}
.contact-form .otter-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}