/* ============================================================
   Pflegefibel – Frontend-Styles
   Alles unter .pflegefibel-app gescoped, damit es das Theme nicht stört.
   ============================================================ */
:root{
	--pf-ink:#2b3a44;
	--pf-ink-soft:#5b6b75;
	--pf-paper:#ffffff;
	--pf-paper-2:#f4f7f9;
	--pf-paper-3:#eaf1f5;
	--pf-line:#dde6ec;
	--pf-brand:#0a3d62;
	--pf-brand-deep:#072c47;

	--pf-ric:#19a7d6;
	--pf-ric-bg:#e7f6fc;
	--pf-hdo:#e6007e;
	--pf-hdo-bg:#fde6f2;
	--pf-ido:#f5b400;
	--pf-ido-bg:#fdf3d6;
	--pf-fit:#5bb85b;
	--pf-fit-bg:#e7f5e7;
	--pf-filter:#64748b;
	--pf-filter-bg:#eef1f5;

	--pf-radius:18px;
	--pf-radius-sm:12px;
	--pf-shadow:0 6px 24px rgba(31,88,112,.10);
	--pf-shadow-sm:0 2px 10px rgba(31,88,112,.08);
	--pf-maxw:680px;
}

/* Aktive Bauform setzt Akzent */
.pflegefibel-app [data-form="ric"]{--pf-accent:var(--pf-ric);--pf-accent-bg:var(--pf-ric-bg);}
.pflegefibel-app [data-form="hdo"]{--pf-accent:var(--pf-hdo);--pf-accent-bg:var(--pf-hdo-bg);}
.pflegefibel-app [data-form="ido"]{--pf-accent:var(--pf-ido);--pf-accent-bg:var(--pf-ido-bg);}
.pflegefibel-app [data-form="fit"]{--pf-accent:var(--pf-fit);--pf-accent-bg:var(--pf-fit-bg);}
.pflegefibel-app [data-form="filter"]{--pf-accent:var(--pf-filter);--pf-accent-bg:var(--pf-filter-bg);}

.pflegefibel-app *{box-sizing:border-box;}
.pflegefibel-app{
	font-family:Calibri,'Segoe UI',Candara,'Trebuchet MS',Arial,sans-serif;
	color:var(--pf-ink);
	background:var(--pf-paper);
	line-height:1.6;
	font-size:18px;
	-webkit-text-size-adjust:100%;
}
.pflegefibel-app h1,
.pflegefibel-app h2,
.pflegefibel-app h3{
	font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
	font-weight:600;line-height:1.15;color:var(--pf-brand);margin:0;
}
.pflegefibel-app h1{font-size:clamp(30px,8vw,44px);letter-spacing:-.01em;}
.pflegefibel-app p{margin:0;}
.pflegefibel-app a{color:inherit;}
.pflegefibel-app img{max-width:100%;display:block;}
.pflegefibel-app button{font-family:inherit;}

.pflegefibel-app .wrap{max-width:var(--pf-maxw);margin:0 auto;padding:0 20px;}

/* ===== Header ===== */
.pflegefibel-app .site-header{
	position:sticky;top:0;z-index:60;
	background:rgba(255,255,255,.92);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--pf-line);
}
.pflegefibel-app .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;}
.pflegefibel-app .brand{display:flex;align-items:center;gap:10px;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight:700;font-size:22px;color:var(--pf-brand);text-decoration:none;}
.pflegefibel-app .brand .mark{
	width:36px;height:36px;flex:none;border-radius:9px;background:var(--pf-brand);
	display:grid;place-items:center;color:#fff;font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.02em;
}
.pflegefibel-app .brand small{display:block;font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.06em;color:var(--pf-ink-soft);text-transform:uppercase;margin-top:-2px;}
.pflegefibel-app .header-cta{
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:15px;
	background:var(--pf-brand);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none;
	white-space:nowrap;transition:background .2s;
}
.pflegefibel-app .header-cta:hover{background:var(--pf-brand-deep);}

/* ===== Hero ===== */
.pflegefibel-app .hero{
	position:relative;padding:46px 0 38px;
	background:
		radial-gradient(120% 90% at 100% 0%, var(--pf-ric-bg) 0%, transparent 55%),
		radial-gradient(120% 90% at 0% 100%, var(--pf-paper-2) 0%, transparent 60%),
		var(--pf-paper);
	overflow:hidden;
}
.pflegefibel-app .hero .eyebrow{
	font-family:Arial,Helvetica,sans-serif;font-style:italic;font-weight:400;
	color:var(--pf-ink-soft);font-size:20px;margin-bottom:6px;
}
.pflegefibel-app .hero h1{margin-bottom:14px;}
.pflegefibel-app .hero p{font-size:19px;color:var(--pf-ink-soft);max-width:32ch;}
.pflegefibel-app .hero .scroll-hint{
	display:inline-flex;align-items:center;gap:8px;margin-top:24px;
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:16px;color:var(--pf-brand);text-decoration:none;
}
.pflegefibel-app .hero .scroll-hint span.dot{
	width:34px;height:34px;border-radius:50%;background:var(--pf-brand);color:#fff;
	display:grid;place-items:center;font-size:16px;animation:pf-bob 1.8s ease-in-out infinite;
}
@keyframes pf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.pflegefibel-app .hero-dots{display:flex;gap:10px;margin-top:28px;}
.pflegefibel-app .hero-dots i{width:13px;height:13px;border-radius:50%;display:block;}
.pflegefibel-app .hero-dots i:nth-child(1){background:var(--pf-ric);}
.pflegefibel-app .hero-dots i:nth-child(2){background:var(--pf-hdo);}
.pflegefibel-app .hero-dots i:nth-child(3){background:var(--pf-ido);}
.pflegefibel-app .hero-dots i:nth-child(4){background:var(--pf-fit);}
.pflegefibel-app .hero-dots i:nth-child(5){background:var(--pf-filter);}

/* ===== Schnell-Regeln ===== */
.pflegefibel-app .rules{padding:34px 0;background:var(--pf-paper-2);border-block:1px solid var(--pf-line);}
.pflegefibel-app .rules h2{font-size:27px;margin-bottom:4px;}
.pflegefibel-app .rules .sub{color:var(--pf-ink-soft);font-size:17px;margin-bottom:20px;}
.pflegefibel-app .rule-grid{display:grid;gap:12px;}
.pflegefibel-app .rule{
	display:flex;gap:14px;align-items:flex-start;
	background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-radius-sm);
	padding:16px 18px;box-shadow:var(--pf-shadow-sm);
}
.pflegefibel-app .rule .num{
	flex:none;width:34px;height:34px;border-radius:50%;
	background:var(--pf-brand);color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:600;
	display:grid;place-items:center;font-size:17px;
}
.pflegefibel-app .rule b{display:block;font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:17px;color:var(--pf-ink);margin-bottom:2px;}
.pflegefibel-app .rule small{color:var(--pf-ink-soft);font-size:15.5px;line-height:1.5;}

/* ===== Bauform-Auswahl + Tabs ===== */
.pflegefibel-app .devices{padding:38px 0 10px;scroll-margin-top:90px;}
.pflegefibel-app [id]{scroll-margin-top:80px;}
.pflegefibel-app .devices h2{font-size:28px;margin-bottom:6px;}
.pflegefibel-app .devices .sub{color:var(--pf-ink-soft);font-size:17px;margin-bottom:22px;}

.pflegefibel-app .tabs{
	display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;margin:0 -20px;padding-inline:20px;
}
.pflegefibel-app .tabs::-webkit-scrollbar{display:none;}
.pflegefibel-app .tab{
	scroll-snap-align:start;flex:none;
	display:flex;flex-direction:column;align-items:center;gap:7px;
	min-width:96px;padding:14px 14px;border:2px solid var(--pf-line);
	background:#fff;border-radius:var(--pf-radius-sm);cursor:pointer;
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:15px;color:var(--pf-ink-soft);
	transition:all .22s ease;position:relative;
}
.pflegefibel-app .tab .swatch{width:20px;height:20px;border-radius:50%;transition:transform .22s;}
.pflegefibel-app .tab[data-tab="ric"] .swatch{background:var(--pf-ric);}
.pflegefibel-app .tab[data-tab="hdo"] .swatch{background:var(--pf-hdo);}
.pflegefibel-app .tab[data-tab="ido"] .swatch{background:var(--pf-ido);}
.pflegefibel-app .tab[data-tab="fit"] .swatch{background:var(--pf-fit);}
.pflegefibel-app .tab[data-tab="filter"] .swatch{background:var(--pf-filter);}
.pflegefibel-app .tab small{font-weight:600;font-size:12px;opacity:.8;}
.pflegefibel-app .tab.active{color:var(--pf-ink);box-shadow:var(--pf-shadow-sm);}
.pflegefibel-app .tab[data-tab="ric"].active{border-color:var(--pf-ric);background:var(--pf-ric-bg);}
.pflegefibel-app .tab[data-tab="hdo"].active{border-color:var(--pf-hdo);background:var(--pf-hdo-bg);}
.pflegefibel-app .tab[data-tab="ido"].active{border-color:var(--pf-ido);background:var(--pf-ido-bg);}
.pflegefibel-app .tab[data-tab="fit"].active{border-color:var(--pf-fit);background:var(--pf-fit-bg);}
.pflegefibel-app .tab[data-tab="filter"].active{border-color:var(--pf-filter);background:var(--pf-filter-bg);}
.pflegefibel-app .tab.active .swatch{transform:scale(1.15);}

.pflegefibel-app .panel{display:none;animation:pf-fade .35s ease;}
.pflegefibel-app .panel.active{display:block;}
@keyframes pf-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.pflegefibel-app .panel-head{
	display:flex;align-items:center;gap:14px;
	background:var(--pf-accent-bg);border-radius:var(--pf-radius);
	padding:20px 20px;margin:6px 0 22px;border:1px solid color-mix(in srgb,var(--pf-accent) 25%,transparent);
}
.pflegefibel-app .panel-head .badge{
	flex:none;width:52px;height:52px;border-radius:13px;background:var(--pf-accent);
	display:grid;place-items:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:14px;
	box-shadow:0 4px 12px color-mix(in srgb,var(--pf-accent) 40%,transparent);text-align:center;line-height:1;
}
.pflegefibel-app .panel-head h3{color:var(--pf-ink);font-size:22px;margin-bottom:4px;}
.pflegefibel-app .panel-head p{font-size:15.5px;color:var(--pf-ink-soft);line-height:1.5;}

/* Video-Block */
.pflegefibel-app .video-block{margin-bottom:26px;}
.pflegefibel-app .video-block > .v-label{
	display:flex;align-items:center;gap:9px;font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;
	font-size:18px;color:var(--pf-ink);margin-bottom:12px;
}
.pflegefibel-app .video-block > .v-label .pin{
	width:28px;height:28px;border-radius:8px;background:var(--pf-accent);color:#fff;
	display:grid;place-items:center;font-size:14px;flex:none;
}
.pflegefibel-app .video{
	position:relative;border-radius:var(--pf-radius);overflow:hidden;
	background:#0b1418;aspect-ratio:16/9;box-shadow:var(--pf-shadow);cursor:pointer;
	border:1px solid var(--pf-line);
}
.pflegefibel-app .video img{width:100%;height:100%;object-fit:cover;opacity:.9;}
.pflegefibel-app .video .play{position:absolute;inset:0;display:grid;place-items:center;}
.pflegefibel-app .video .play button{
	width:66px;height:66px;border:none;border-radius:50%;cursor:pointer;
	background:rgba(255,255,255,.94);box-shadow:0 6px 20px rgba(0,0,0,.3);
	display:grid;place-items:center;transition:transform .2s;
}
.pflegefibel-app .video .play button:hover{transform:scale(1.08);}
.pflegefibel-app .video .play button::after{
	content:"";display:block;width:0;height:0;margin-left:5px;
	border-left:20px solid var(--pf-accent);border-top:13px solid transparent;border-bottom:13px solid transparent;
}
.pflegefibel-app .video .placeholder{
	position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:14px;background:linear-gradient(135deg,#15323f,#0b1418);color:#cfe3ec;text-align:center;padding:20px;
}
.pflegefibel-app .video .placeholder .ph-tag{
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	color:#fff;background:var(--pf-accent,var(--pf-brand));padding:5px 11px;border-radius:999px;
}
.pflegefibel-app .video .placeholder small{font-size:12px;opacity:.8;max-width:32ch;}
.pflegefibel-app .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Schritt-für-Schritt Liste */
.pflegefibel-app .steps{
	background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-radius);
	padding:6px 4px;box-shadow:var(--pf-shadow-sm);
}
.pflegefibel-app .steps .steps-title{
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
	color:var(--pf-accent);padding:16px 20px 10px;
}
.pflegefibel-app .steps ol{list-style:none;counter-reset:pf-s;margin:0;padding:0;}
.pflegefibel-app .steps li{
	counter-increment:pf-s;display:flex;gap:14px;padding:14px 20px;
	border-top:1px solid var(--pf-paper-3);font-size:17px;line-height:1.55;
}
.pflegefibel-app .steps li:first-of-type{border-top:none;}
.pflegefibel-app .steps li::before{
	content:counter(pf-s);flex:none;width:30px;height:30px;border-radius:50%;
	background:var(--pf-accent-bg);color:var(--pf-accent);font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:15px;
	display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--pf-accent) 35%,transparent);
}
.pflegefibel-app .steps li b{color:var(--pf-ink);}

.pflegefibel-app .note{
	display:flex;gap:12px;align-items:flex-start;
	margin-top:18px;padding:15px 17px;border-radius:var(--pf-radius-sm);
	background:var(--pf-accent-bg);font-size:16px;color:var(--pf-ink);line-height:1.5;
	border-left:4px solid var(--pf-accent);
}
.pflegefibel-app .note .ic{flex:none;font-size:20px;line-height:1.3;}

.pflegefibel-app .variant-toggle{display:flex;gap:8px;margin:4px 0 18px;flex-wrap:wrap;}
.pflegefibel-app .variant-toggle button{
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px;cursor:pointer;
	border:1.5px solid var(--pf-line);background:#fff;color:var(--pf-ink-soft);transition:all .2s;
}
.pflegefibel-app .variant-toggle button.on{background:var(--pf-accent);border-color:var(--pf-accent);color:#fff;}
.pflegefibel-app .variant{display:none;}
.pflegefibel-app .variant.on{display:block;animation:pf-fade .3s ease;}

/* ===== Allgemeine Pflege ===== */
.pflegefibel-app .general{padding:40px 0;background:var(--pf-paper-2);border-top:1px solid var(--pf-line);margin-top:30px;}
.pflegefibel-app .general h2{font-size:28px;margin-bottom:18px;text-align:center;}
.pflegefibel-app .acc{display:grid;gap:12px;}
.pflegefibel-app details.card{
	background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-radius);
	box-shadow:var(--pf-shadow-sm);overflow:hidden;
}
.pflegefibel-app details.card summary{
	list-style:none;cursor:pointer;padding:18px 20px;
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:18px;color:var(--pf-ink);
	display:flex;align-items:center;gap:12px;
}
.pflegefibel-app details.card summary::-webkit-details-marker{display:none;}
.pflegefibel-app details.card summary .chev{margin-left:auto;transition:transform .25s;color:var(--pf-brand);font-size:20px;}
.pflegefibel-app details.card[open] summary .chev{transform:rotate(180deg);}
.pflegefibel-app details.card .body{padding:0 20px 20px;font-size:16.5px;color:var(--pf-ink-soft);line-height:1.55;}
.pflegefibel-app details.card .body ul{margin:6px 0 0 2px;padding-left:20px;}
.pflegefibel-app details.card .body li{margin:6px 0;}
.pflegefibel-app .summary-ic{width:34px;height:34px;border-radius:9px;background:var(--pf-paper-3);display:grid;place-items:center;font-size:18px;flex:none;}

.pflegefibel-app .danger-row{display:grid;gap:10px;margin-top:6px;}
.pflegefibel-app .danger{display:flex;align-items:center;gap:12px;background:#fff5f5;border:1px solid #f4c9c9;border-radius:var(--pf-radius-sm);padding:13px 16px;font-size:16px;color:#9a3a3a;line-height:1.5;}
.pflegefibel-app .danger .x{flex:none;width:28px;height:28px;border-radius:50%;background:#e05858;color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;}

/* ===== Partner ===== */
.pflegefibel-app .partners{padding:42px 0;}
.pflegefibel-app .partners h2{font-size:24px;text-align:center;margin-bottom:6px;}
.pflegefibel-app .partners .sub{text-align:center;color:var(--pf-ink-soft);font-size:16px;margin-bottom:24px;line-height:1.5;}
.pflegefibel-app .logo-grid{
	display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:34px;
}
.pflegefibel-app .logo{
	display:grid;place-items:center;height:90px;background:#fff;border:1px solid var(--pf-line);
	border-radius:var(--pf-radius-sm);box-shadow:var(--pf-shadow-sm);transition:transform .2s,box-shadow .2s;
	text-decoration:none;color:var(--pf-ink-soft);
	font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:16px;text-align:center;padding:10px;
}
.pflegefibel-app .logo:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow);}
.pflegefibel-app .logo small{display:block;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-top:3px;}
.pflegefibel-app .partners .divider{display:flex;align-items:center;gap:14px;color:var(--pf-ink-soft);font-family:Calibri,'Segoe UI',Arial,sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px;}
.pflegefibel-app .partners .divider::before,
.pflegefibel-app .partners .divider::after{content:"";height:1px;background:var(--pf-line);flex:1;}

/* ===== Footer ===== */
.pflegefibel-app .pflegefibel-footer{background:var(--pf-ink);color:#c2d0d8;padding:36px 0 32px;font-size:16px;line-height:1.55;}
.pflegefibel-app .pflegefibel-footer .wrap{display:grid;gap:18px;}
.pflegefibel-app .pflegefibel-footer .f-brand{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:22px;color:#fff;}
.pflegefibel-app .pflegefibel-footer a{color:#dbe7ec;text-decoration:none;}
.pflegefibel-app .pflegefibel-footer a:hover{text-decoration:underline;}
.pflegefibel-app .pflegefibel-footer .f-contact div{margin:3px 0;}
.pflegefibel-app .pflegefibel-footer .f-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;font-size:14px;color:#92a3ac;display:flex;gap:16px;flex-wrap:wrap;}

/* ===== Desktop-Anpassung ===== */
@media(min-width:720px){
	:root{--pf-maxw:900px;}
	.pflegefibel-app{font-size:19px;}
	.pflegefibel-app .hero{padding:70px 0 56px;}
	.pflegefibel-app .hero h1{font-size:clamp(40px,5vw,56px);}
	.pflegefibel-app .hero p{font-size:21px;}
	.pflegefibel-app .steps li{font-size:18px;}
	.pflegefibel-app details.card summary{font-size:19px;}
	.pflegefibel-app details.card .body{font-size:17.5px;}
	.pflegefibel-app .rule-grid{grid-template-columns:1fr 1fr;}
	.pflegefibel-app .rule-grid .rule:first-child{grid-column:1/-1;}
	.pflegefibel-app .logo-grid{grid-template-columns:repeat(4,1fr);}
	.pflegefibel-app .tab{min-width:140px;font-size:16px;}
	.pflegefibel-app .tab small{font-size:12.5px;}
	.pflegefibel-app .pflegefibel-footer .wrap{grid-template-columns:1fr 1fr;align-items:start;}
}