/* Ausgelagert aus template-parts/blocks/bereiche.php – Reihenfolge der Blöcke wie in der Vorlage. */
.bs-wrap{max-width:1280px;margin:0 auto;padding-left:40px;padding-right:40px;}
.bs-kopf{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:40px;}
.bs-kopf__t{font-size:52px;font-weight:600;letter-spacing:-.025em;line-height:1.03;max-width:820px;text-wrap:balance;}
.bs-kopf__l{max-width:660px;font-size:17px;line-height:1.65;color:var(--muted);}
@media (max-width:760px){ .bs-wrap{padding-left:20px;padding-right:20px;} .bs-kopf__t{font-size:34px;} }
/* ---------- Umschalter ---------- */
.pa-seg{padding-top:72px;}
.pa-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;border-radius:22px;background:var(--paper);border:1px solid rgba(13,13,13,.06);}
.pa-tab{appearance:none;border:0;background:none;display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:16px;text-align:left;cursor:pointer;font:inherit;color:var(--muted);transition:background-color .22s var(--se-ease),box-shadow .22s var(--se-ease),color .22s var(--se-ease);}
.pa-tab__ic{width:42px;height:42px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(18,69,171,.08);color:var(--accent);transition:background-color .22s var(--se-ease),color .22s var(--se-ease);}
.pa-tab__l{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.pa-tab__s{display:block;margin-top:2px;font-size:13px;}
.pa-tab[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px rgba(13,13,13,.05),0 10px 24px -14px rgba(9,32,84,.35);}
.pa-tab[aria-selected="true"] .pa-tab__ic{background:var(--se-blue);color:#fff;}
.pa-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (hover:hover){ .pa-tab:not([aria-selected="true"]):hover{background:rgba(255,255,255,.6);} }

/* ---------- Bereich ---------- */
.pa-panel{margin-top:28px;display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:stretch;}
.pa-panel[hidden]{display:none;}
.pa-panel:not([hidden]){animation:pa-in .45s var(--se-ease) both;}
@keyframes pa-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.pa-panel__media{position:relative;min-height:600px;border-radius:var(--se-radius-lg);overflow:hidden;background:var(--se-blue);}
.pa-panel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pa-panel__media::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(9,32,84,.55));pointer-events:none;}
.pa-panel__chip{position:absolute;left:20px;bottom:20px;z-index:1;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 40px);padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px;font-weight:600;}
.pa-panel__chip::before{content:"";width:7px;height:7px;flex:none;border-radius:999px;background:var(--se-sun);}

.pa-panel__body{display:flex;flex-direction:column;padding:10px 0;}
.pa-panel__fuer{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.pa-panel__t{margin-top:12px;font-size:38px;font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance;}
.pa-panel__lead{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:56ch;}

.pa-facts{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(13,13,13,.09);border-bottom:1px solid rgba(13,13,13,.09);}
.pa-fact{padding:18px 16px 18px 0;}
.pa-fact + .pa-fact{padding-left:18px;border-left:1px solid rgba(13,13,13,.09);}
.pa-fact b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pa-fact span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted);}

.pa-loes__h{margin-top:30px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
/* Handschriftlicher Hinweis mit gezeichnetem Pfeil, der auf den ersten
   Button zeigt. Zeichnet sich bei jedem Reiterwechsel neu (die Animation
   startet, sobald das Panel aus display:none kommt). */
.pa-loes__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;}
.pa-hint{position:relative;z-index:2;display:flex;align-items:flex-start;gap:2px;margin:0 80px -50px 0;color:var(--accent);pointer-events:none;}
/* Bogen etwas laenger nach unten, damit die Spitze knapp ueber dem Button endet. */
.pa-hint__t{font-family:"Caveat","Bradley Hand","Segoe Print","Chalkboard SE","Comic Sans MS",cursive;font-size:24px;font-weight:600;line-height:1;transform:rotate(-5deg) translateY(-4px);white-space:nowrap;}
.pa-hint__pfeil{flex:none;overflow:visible;}
.pa-hint__bogen,.pa-hint__spitze{stroke-dasharray:100;stroke-dashoffset:0;}
.pa-panel:not([hidden]) .pa-hint__t{animation:pa-hint-t .45s var(--se-ease) .25s both;}
.pa-panel:not([hidden]) .pa-hint__bogen{animation:pa-zeichnen .7s cubic-bezier(.6,.05,.3,1) .5s both;}
.pa-panel:not([hidden]) .pa-hint__spitze{animation:pa-zeichnen .28s ease-out 1.15s both;}
.pa-panel:not([hidden]) .pa-hint__pfeil{animation:pa-stupsen 1.8s ease-in-out 1.6s infinite;}
@keyframes pa-zeichnen{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes pa-hint-t{from{opacity:0;transform:rotate(-5deg) translateY(4px);}to{opacity:1;transform:rotate(-5deg) translateY(-4px);}}
@keyframes pa-stupsen{0%,100%{transform:translate(0,0);}50%{transform:translate(2px,3px);}}
@media (max-width:760px){ .pa-hint{display:none;} }
@media (prefers-reduced-motion:reduce){
	.pa-panel:not([hidden]) .pa-hint__t,.pa-panel:not([hidden]) .pa-hint__bogen,.pa-panel:not([hidden]) .pa-hint__spitze,.pa-panel:not([hidden]) .pa-hint__pfeil{animation:none;}
}

/* Die Wege zu den Unterseiten sind DER Klick dieses Bausteins — deshalb
   eigenständige Karten mit sichtbarem Button statt dezenter Listenzeilen. */
.pa-loes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.pa-row{display:flex;align-items:center;gap:16px;padding:16px 16px 16px 16px;border-radius:18px;background:#fff;border:1.5px solid rgba(18,69,171,.16);box-shadow:0 1px 2px rgba(13,13,13,.04),0 8px 22px -18px rgba(9,32,84,.45);color:inherit;text-decoration:none;transition:border-color .2s var(--se-ease),box-shadow .2s var(--se-ease),transform .2s var(--se-ease);}
.pa-row__ic{width:46px;height:46px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--se-accent-pale);color:var(--accent);}
.pa-row__txt{flex:1;min-width:0;}
.pa-row__t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--ink);}
.pa-row__badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--se-sun);color:var(--ink);}
.pa-row__d{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted);}
.pa-row__go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 16px;border-radius:999px;background:var(--se-blue);color:#fff;font-size:14px;font-weight:700;transition:background-color .2s var(--se-ease);}
.pa-row__go svg{transition:transform .25s var(--se-ease);}
.pa-row:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.pa-row:active{transform:scale(.99);}
@media (hover:hover){
	.pa-row:hover{border-color:var(--accent);box-shadow:0 1px 2px rgba(13,13,13,.04),0 14px 30px -18px rgba(9,32,84,.55);transform:translateY(-1px);}
	.pa-row:hover .pa-row__go{background:var(--se-blue-hover);}
	.pa-row:hover .pa-row__go svg{transform:translateX(3px);}
}

@media (max-width:1100px){
	.pa-panel{grid-template-columns:1fr;gap:28px;}
	.pa-panel__media{min-height:360px;}
	.pa-tab__s{display:none;}
}
/* Handy: Erst der Klick, dann die Details.
   Vorher standen Bild, Text und drei Kennzahlen VOR den Buttons — gut zwei
   Bildschirmlängen Scrollen bis zur eigentlichen Entscheidung. Und die
   Reiter waren eine Wischleiste, in der „Landwirtschaft" und „Mieterstrom"
   abgeschnitten waren: Wer nicht wischt, sieht sie gar nicht. */
@media (max-width:760px){
	.pa-tabs{grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:18px;}
	.pa-tab{padding:9px 10px;gap:9px;min-width:0;}
	.pa-tab__ic{width:32px;height:32px;border-radius:9px;}
	.pa-tab__l{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

	/* Panel als eine Spalte; der Textblock löst sich auf, damit seine Teile
	   einzeln umsortiert werden können. */
	.pa-panel{display:flex;flex-direction:column;gap:0;margin-top:18px;}
	.pa-panel__body{display:contents;}
	.pa-panel__media{order:0;min-height:0;aspect-ratio:16/8;border-radius:20px;margin-bottom:18px;}
	.pa-panel__chip{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:7px 11px;font-size:12px;}
	.pa-panel__fuer{order:1;}
	.pa-panel__t{order:2;font-size:26px;margin-top:8px;}
	.pa-loes__kopf{order:3;}
	.pa-loes__h{margin-top:18px;}
	.pa-loes{order:4;}
	.pa-panel__lead{order:5;margin-top:22px;font-size:15.5px;}
	.pa-facts{order:6;margin-top:18px;}
	.pa-facts{grid-template-columns:1fr;}
	.pa-fact,.pa-fact + .pa-fact{padding:14px 0;border-left:0;display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
	.pa-fact + .pa-fact{border-top:1px solid rgba(13,13,13,.07);}
	.pa-fact span{margin-top:0;text-align:right;}
	.pa-row{padding:14px;gap:12px;}
	.pa-row__go{padding:10px;}
	.pa-row__go-t{display:none;}
}
@media (prefers-reduced-motion:reduce){
	.pa-panel:not([hidden]){animation:none;}
	.pa-tab,.pa-row,.pa-row__go,.pa-row__go svg{transition:none;}
}

/* Hervorgehobene Lösung („Meistgefragt"): blauer Verlauf, gelber Button
   (Feedback 15.10.2026). */
.pa-row.is-top{background:var(--se-blue);border-color:transparent;box-shadow:0 18px 36px -20px rgba(9,32,84,.6);}
.pa-row.is-top .pa-row__t{color:#fff;}
.pa-row.is-top .pa-row__d{color:rgba(255,255,255,.8);}
.pa-row.is-top .pa-row__ic{background:rgba(255,255,255,.14);color:var(--se-sun);}
.pa-row.is-top .pa-row__go{background:var(--se-sun);color:var(--ink);}
@media (hover:hover){
	.pa-row.is-top:hover{border-color:transparent;box-shadow:0 22px 40px -18px rgba(9,32,84,.7);}
	.pa-row.is-top:hover .pa-row__go{background:#FFC72C;}
}

/* Handgezeichneter Pfeil endet auf der blauen Karte – deshalb gelb (Feedback 15.10.2026). */
.pa-hint__pfeil{color:var(--se-sun);filter:drop-shadow(0 1px 1px rgba(13,13,13,.18));}