/* Recordo Sicherheit (Security) page
   Hero with shield illustration, 4 pillars, security grid, 3-step flow,
   roles table, FAQ, CTA banner. */

.recordo-security { position: relative; }

/* ---------- Hero ---------- */
.recordo-sec-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 3.5rem;
	align-items: center;
	padding: 4rem 0 3rem;
}
.recordo-sec-hero h1 {
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #0A0A0A;
	margin: 0 0 1rem 0;
}
.recordo-sec-hero .lead {
	color: #253B83;
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	letter-spacing: -0.005em;
}
.recordo-sec-hero p {
	color: #4E4E4E;
	font-size: 1rem;
	line-height: 1.6;
	max-width: 520px;
	margin: 0 0 1.75rem 0;
}
.recordo-sec-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.recordo-sec-cta a {
	display: inline-block;
	padding: 0.9rem 1.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: 0.6rem;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.recordo-sec-cta a.filled { background: #253B83; color: #FFFFFF; border: 1.5px solid #253B83; }
.recordo-sec-cta a.filled:hover { background: #1B2C66; border-color: #1B2C66; }
.recordo-sec-cta a.outline { background: transparent; color: #253B83; border: 1.5px solid #C8CDDF; }
.recordo-sec-cta a.outline:hover { border-color: #253B83; background: #F1F3F9; }

/* Hero right: shield + globe + floating cards */
.recordo-shield-stage {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recordo-shield-globe {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 340px; height: 340px;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(241, 243, 249, 0.7) 0%, rgba(241, 243, 249, 0) 75%),
		radial-gradient(circle at center, transparent 95%, rgba(37, 59, 131, 0.18) 96%);
	z-index: 0;
}
.recordo-shield-globe::before {
	content: "";
	position: absolute;
	inset: 18%;
	border: 1.5px dashed rgba(37, 59, 131, 0.18);
	border-radius: 50%;
}
.recordo-shield-globe::after {
	content: "";
	position: absolute;
	inset: 35%;
	border: 1.5px dashed rgba(37, 59, 131, 0.15);
	border-radius: 50%;
}
.recordo-shield-dots {
	position: absolute;
	top: 4%; right: 6%;
	width: 110px; height: 110px;
	background-image: radial-gradient(rgba(37, 59, 131, 0.30) 1.4px, transparent 1.4px);
	background-size: 14px 14px;
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}
.recordo-shield-clouds {
	position: absolute;
	top: 18%; left: 6%;
	z-index: 0;
	opacity: 0.85;
}

.recordo-shield-main {
	position: relative;
	z-index: 2;
	width: 130px; height: 150px;
	background: linear-gradient(180deg, #2E4AA0 0%, #253B83 100%);
	border-radius: 16% 16% 50% 50% / 10% 10% 18% 18%;
	clip-path: path("M 65 0 L 130 18 L 130 80 Q 130 130 65 150 Q 0 130 0 80 L 0 18 Z");
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 30px 80px rgba(37, 59, 131, 0.32);
	animation: recordo-shield-float 6s ease-in-out infinite;
}
.recordo-shield-main svg { width: 56px; height: 56px; color: #FFFFFF; }

@keyframes recordo-shield-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

/* Floating cards in hero right */
.recordo-shield-card {
	position: absolute;
	background: #FFFFFF;
	border-radius: 0.7rem;
	box-shadow: 0 18px 42px rgba(37, 59, 131, 0.14);
	padding: 0.85rem 1rem;
	z-index: 3;
	font-size: 0.85rem;
	color: #0A0A0A;
}
.recordo-shield-card--doc {
	bottom: 4%; left: -2%;
	width: 250px;
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.recordo-shield-card--doc .doc-ico {
	width: 32px; height: 32px;
	border-radius: 0.4rem;
	background: #FAE7E0;
	color: #C44A2C;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.recordo-shield-card--doc .doc-body { flex-grow: 1; min-width: 0; }
.recordo-shield-card--doc .doc-name { font-weight: 600; font-size: 0.875rem; }
.recordo-shield-card--doc .doc-line {
	height: 5px;
	background: #EBEDF3;
	border-radius: 3px;
	margin-top: 0.4rem;
	width: 80%;
}
.recordo-shield-card--doc .doc-action {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: #253B83;
	color: #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}

.recordo-shield-card--transmit {
	bottom: 12%; right: 22%;
	padding: 0.7rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.78rem;
	color: #4E4E4E;
	min-width: 180px;
}
.recordo-shield-card--transmit .lock-ico {
	width: 28px; height: 28px;
	border-radius: 0.4rem;
	background: #E3E7F3;
	color: #253B83;
	display: flex; align-items: center; justify-content: center;
}
.recordo-shield-card--transmit .label { font-weight: 600; color: #0A0A0A; font-size: 0.825rem; }
.recordo-shield-card--transmit .specs { font-size: 0.7rem; color: #7D7D7D; margin-top: 0.15rem; }

.recordo-shield-card--cockpit {
	top: 6%; right: 0;
	width: 230px;
	padding: 1rem 1.1rem;
}
.recordo-shield-card--cockpit h5 {
	margin: 0 0 0.65rem 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #0A0A0A;
}
.recordo-shield-card--cockpit ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.recordo-shield-card--cockpit li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8rem;
	color: #2C2C2C;
}
.recordo-shield-card--cockpit li > span:first-child {
	display: flex; align-items: center; gap: 0.45rem;
}
.recordo-shield-card--cockpit .dot {
	width: 16px; height: 16px;
	border-radius: 0.3rem;
	flex-shrink: 0;
}
.recordo-shield-card--cockpit .dot--blue   { background: #E3E7F3; }
.recordo-shield-card--cockpit .dot--green  { background: #DCF0E3; }
.recordo-shield-card--cockpit .dot--purple { background: #ECE5F8; }
.recordo-shield-card--cockpit .dot--orange { background: #FCEAD8; }
.recordo-shield-card--cockpit .check {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #253B83;
	color: #FFFFFF;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	font-size: 9px;
}

@media (prefers-reduced-motion: reduce) {
	.recordo-shield-main { animation: none !important; }
}

/* ---------- Pillars strip ---------- */
.recordo-pillars {
	margin-top: 1.5rem;
	background: #FFFFFF;
	border: 1px solid #EBEBEB;
	border-radius: 1rem;
	padding: 1.75rem 2rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
}
.recordo-pillar { display: flex; align-items: flex-start; gap: 0.85rem; }
.recordo-pillar-icon {
	flex: 0 0 42px;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: #E3E7F3;
	color: #253B83;
	display: flex; align-items: center; justify-content: center;
}
.recordo-pillar h4 { margin: 0 0 0.25rem 0; font-size: 0.95rem; font-weight: 600; color: #0A0A0A; }
.recordo-pillar p { margin: 0; font-size: 0.85rem; color: #7D7D7D; line-height: 1.5; }

/* ---------- Grundlagen 2x2 grid ---------- */
.recordo-foundations { margin-top: 5rem; }
.recordo-foundations-head {
	text-align: center;
	margin-bottom: 2rem;
}
.recordo-foundations-head h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem 0;
}
.recordo-foundations-head p {
	font-size: 0.95rem;
	color: #7D7D7D;
	margin: 0;
}
.recordo-foundations-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
}
.recordo-foundation-card {
	background: #FFFFFF;
	border: 1px solid #EBEBEB;
	border-radius: 1rem;
	padding: 1.5rem 1.75rem;
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.recordo-foundation-card:hover {
	border-color: #C8CDDF;
	box-shadow: 0 8px 24px rgba(37, 59, 131, 0.07);
}
.recordo-foundation-icon {
	flex: 0 0 56px;
	width: 56px; height: 56px;
	border-radius: 0.85rem;
	display: flex; align-items: center; justify-content: center;
}
.recordo-foundation-icon--blue   { background: #E3E7F3; color: #253B83; }
.recordo-foundation-icon--green  { background: #DCF0E3; color: #1F7A38; }
.recordo-foundation-icon--purple { background: #ECE5F8; color: #5C3FB5; }
.recordo-foundation-icon--teal   { background: #D7EFEC; color: #167B72; }

.recordo-foundation-body { flex-grow: 1; min-width: 0; }
.recordo-foundation-body h3 {
	margin: 0 0 0.75rem 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.015em;
}
.recordo-foundation-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.9rem;
	color: #2C2C2C;
}
.recordo-foundation-body li { display: flex; align-items: center; gap: 0.6rem; }
.recordo-foundation-body li::before {
	content: "";
	width: 18px; height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: #E3E7F3 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23253B83' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/12px no-repeat;
}

/* ---------- 3-step flow ---------- */
.recordo-flow { margin-top: 5rem; }
.recordo-flow-head { text-align: center; margin-bottom: 2.5rem; }
.recordo-flow-head h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	margin: 0 0 0.35rem 0;
}
.recordo-flow-head p { font-size: 0.95rem; color: #7D7D7D; margin: 0; }

.recordo-flow-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 1.5rem;
	align-items: flex-start;
}
.recordo-flow-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.recordo-flow-icon-wrap {
	position: relative;
	flex-shrink: 0;
}
.recordo-flow-icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #F1F3F9;
	color: #253B83;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recordo-flow-num {
	position: absolute;
	top: -6px; right: -6px;
	width: 24px; height: 24px;
	border-radius: 50%;
	background: #253B83;
	color: #FFFFFF;
	font-size: 0.75rem;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	border: 2px solid #FFFFFF;
}
.recordo-flow-text { flex-grow: 1; min-width: 0; padding-top: 0.4rem; }
.recordo-flow-text h4 {
	margin: 0 0 0.3rem 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.01em;
}
.recordo-flow-text p {
	margin: 0;
	font-size: 0.875rem;
	color: #7D7D7D;
	line-height: 1.55;
}
.recordo-flow-arrow {
	color: #C8CDDF;
	align-self: center;
	padding-top: 0.5rem;
}

/* ---------- Roles section ---------- */
.recordo-roles-section {
	margin-top: 5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 3rem;
	align-items: center;
}
.recordo-roles-text h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	margin: 0 0 1rem 0;
}
.recordo-roles-text p {
	font-size: 0.95rem;
	color: #7D7D7D;
	margin: 0 0 1.5rem 0;
	max-width: 420px;
	line-height: 1.6;
}
.recordo-roles-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 0.9375rem;
	color: #2C2C2C;
}
.recordo-roles-list li { display: flex; align-items: center; gap: 0.6rem; }
.recordo-roles-list li::before {
	content: "";
	width: 20px; height: 20px;
	flex: 0 0 20px;
	border-radius: 50%;
	background: #253B83 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>") center/11px no-repeat;
}

/* Roles UI mockup */
.recordo-roles-ui {
	background: #FFFFFF;
	border: 1px solid #EBEBEB;
	border-radius: 0.9rem;
	overflow: hidden;
	display: grid;
	grid-template-columns: 160px 1fr;
	box-shadow: 0 10px 30px rgba(37, 59, 131, 0.06);
}
.recordo-roles-ui-side {
	background: #FAFBFD;
	border-right: 1px solid #EBEBEB;
	padding: 1.1rem 1rem;
}
.recordo-roles-ui-side h6 {
	font-size: 0.78rem;
	color: #7D7D7D;
	text-transform: none;
	font-weight: 600;
	margin: 0 0 0.7rem 0;
}
.recordo-roles-ui-side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.recordo-roles-ui-side li {
	font-size: 0.85rem;
	padding: 0.45rem 0.6rem;
	border-radius: 0.4rem;
	color: #4E4E4E;
	cursor: default;
}
.recordo-roles-ui-side li.is-active { background: #E3E7F3; color: #253B83; font-weight: 600; }

.recordo-roles-ui-main { padding: 1.1rem 1.25rem; }
.recordo-roles-ui-main h5 { margin: 0 0 0.85rem 0; font-size: 0.95rem; font-weight: 600; color: #0A0A0A; }
.recordo-roles-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.recordo-roles-table th {
	text-align: left;
	font-weight: 500;
	font-size: 0.75rem;
	color: #7D7D7D;
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid #EBEBEB;
}
.recordo-roles-table th:last-child { text-align: right; }
.recordo-roles-table td {
	padding: 0.6rem 0.5rem;
	border-bottom: 1px solid #F2F3F7;
	color: #2C2C2C;
}
.recordo-roles-table tr:last-child td { border-bottom: 0; }
.recordo-roles-table td:last-child { text-align: right; }
.recordo-role-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
}
.recordo-role-badge--vollzugriff   { background: #E3F6E8; color: #1F7A38; }
.recordo-role-badge--teilweise     { background: #E3E7F3; color: #253B83; }
.recordo-role-badge--standard      { background: #F1F1F1; color: #4E4E4E; }
.recordo-role-badge--eingeschraenkt{ background: #FCEAD8; color: #C7660E; }

/* ---------- FAQ ---------- */
.recordo-sec-faq { margin-top: 5rem; }
.recordo-sec-faq-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0A0A0A;
	letter-spacing: -0.02em;
	margin: 0 0 1.5rem 0;
}
.recordo-sec-faq-list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.recordo-sec-faq-list details {
	border: 1px solid #EBEBEB;
	border-radius: 0.6rem;
	background: #FFFFFF;
}
.recordo-sec-faq-list details[open] { border-color: #C8CDDF; box-shadow: 0 6px 16px rgba(37, 59, 131, 0.05); }
.recordo-sec-faq-list summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
	font-size: 0.95rem;
	color: #0A0A0A;
}
.recordo-sec-faq-list summary::-webkit-details-marker { display: none; }
.recordo-sec-faq-list summary::after {
	content: "";
	width: 10px; height: 10px;
	border-right: 2px solid #7D7D7D;
	border-bottom: 2px solid #7D7D7D;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.recordo-sec-faq-list details[open] summary::after { transform: rotate(-135deg); border-color: #253B83; }
.recordo-sec-faq-list details > div {
	padding: 0 1.25rem 1rem;
	color: #4E4E4E;
	font-size: 0.9rem;
	line-height: 1.6;
}

/* ---------- CTA banner ---------- */
.recordo-sec-cta-banner {
	margin-top: 4rem;
	background: #253B83;
	border-radius: 1rem;
	padding: 1.75rem 2.25rem;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.recordo-sec-cta-icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.recordo-sec-cta-text { flex-grow: 1; min-width: 280px; }
.recordo-sec-cta-text h3 {
	margin: 0 0 0.25rem 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: -0.015em;
}
.recordo-sec-cta-text p { margin: 0; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.recordo-sec-cta-actions { display: flex; gap: 0.6rem; }
.recordo-sec-cta-actions a {
	display: inline-block;
	padding: 0.75rem 1.3rem;
	font-weight: 600;
	font-size: 0.9rem;
	border-radius: 0.55rem;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}
.recordo-sec-cta-actions .filled { background: #FFFFFF; color: #253B83; border: 1.5px solid #FFFFFF; }
.recordo-sec-cta-actions .filled:hover { background: #F1F3F9; }
.recordo-sec-cta-actions .outline { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.55); }
.recordo-sec-cta-actions .outline:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.08); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.recordo-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.recordo-sec-hero { grid-template-columns: 1fr; padding-top: 2rem; }
	.recordo-foundations-grid { grid-template-columns: 1fr; }
	.recordo-flow-grid { grid-template-columns: 1fr; }
	.recordo-flow-arrow { display: none; }
	.recordo-roles-section { grid-template-columns: 1fr; }
	.recordo-roles-ui { grid-template-columns: 110px 1fr; }
	.recordo-sec-cta-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
	.recordo-pillars { grid-template-columns: 1fr; }
}