@font-face { font-family: Manrope; src: url('./assets/manrope-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/manrope-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/manrope-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/manrope-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/manrope-extrabold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

/* DESIGNWERTE: Farben, Größen und Abstände der gesamten Variante. */
:root {
  --paper: #fbfdfa;
  --white: #fff;
  --ink: #3b2039;
  --plum: #3b2039;
  --plum-hover: #583452;
  --accent: #20b8ad;
  --accent-hover: #4bc9bd;
  --accent-text: #087d77;
  --mint: #e6f7f3;
  --mint-deep: #d6efea;
  --muted: #686570;
  --line: #d5e4df;
  --on-dark-muted: #d6cbd5;
  --error: #973b4b;
  --font: Manrope, Arial, sans-serif;
  --gutter: clamp(24px, 4.5vw, 80px);
  --content-width: 1392px;
  --button-height: 56px;
  --button-radius: 5px;
  --field-radius: 8px;
  --card-radius: 9px;
  --motion: 220ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; text-decoration: none; }
button, a, summary { transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion); }
button:active, .button:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 5px; }
.plan-section :focus-visible, .promise-strip :focus-visible, .radar-box :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
::selection { color: var(--white); background: var(--accent-text); }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(38px, 4.2vw, 64px); line-height: 1.09; font-weight: 500; letter-spacing: -.055em; }
p { text-wrap: pretty; }
.page-width { width: calc(100% - var(--gutter) * 2); max-width: var(--content-width); margin-inline: auto; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; transform: translateY(-180%); padding: 12px 20px; color: white; background: var(--plum); border-radius: 4px; }
.skip-link:focus { transform: translateY(0); }
.button { min-height: var(--button-height); padding: 14px 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: var(--button-radius); background: var(--plum); color: white; font-size: 14px; font-weight: 600; }
.button:hover { background: var(--plum-hover); }
.button .icon, .text-link .icon { width: 20px; height: 20px; transition: transform var(--motion); }
.button:hover .icon, .text-link:hover .icon { transform: translateX(4px); }
.button-accent { background: var(--accent); color: var(--plum); }
.button-accent:hover { background: var(--accent-hover); }
.text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 16px; background: transparent; padding: 5px 0; font-weight: 600; font-size: 14px; text-align: left; }

/* Navigation und Markenfamilie der ursprünglichen Seite. */
/* Kopfleiste so breit wie der Inhalt (wie .page-width): Logo bündig links, Menü und Knopf bündig rechts */
.site-header { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 30px; width: calc(100% - var(--gutter) * 2); max-width: var(--content-width); margin-inline: auto; position: relative; z-index: 20; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 27px; font-weight: 800; letter-spacing: -1.4px; line-height: 1; }
.brand-logo { display: block; width: 292px; height: auto; flex: 0 0 auto; }
.domain { color: var(--accent-text); }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 500; }
.desktop-nav > a { padding-block: 14px; position: relative; }
.desktop-nav > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; transition: transform var(--motion); }
.desktop-nav > a:hover::after { transform: scaleX(1); }
.header-cta { min-height: 46px; padding: 12px 19px; font-size: 12px; gap: 24px; }
.header-cta .icon { width: 18px; height: 18px; }
.menu-toggle, .mobile-nav { display: none; }

/* Hero: drei klare Zeilen, persönliches Anliegen als Hauptaktion. */
.hero { display: grid; grid-template-columns: 1.16fr .84fr; background: var(--mint); }
.hero-inner { width: 100%; min-width: 0; max-width: 975px; justify-self: end; padding: 62px var(--gutter) 42px; container-type: inline-size; }
.hero h1 { --hero-size: clamp(58px, 6.3vw, 100px); font-size: min(var(--hero-size), 100cqi / 7.3); font-weight: 600; line-height: 1.025; letter-spacing: -.062em; margin-bottom: 25px; }
.hero-line { display: block; white-space: nowrap; }
.hero-line-accent { color: var(--accent-text); }
.hero-description { max-width: 480px; font-size: 16px; line-height: 1.8; margin-bottom: 27px; }
.hero-description strong { font-weight: 600; }
.search-area { position: relative; z-index: 5; scroll-margin-top: 28px; }
.search-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.search-field { display: flex; align-items: center; gap: 14px; padding: 11px 11px 11px 19px; background: var(--white); border: 1px solid #c8e0d9; border-radius: var(--field-radius); box-shadow: 0 4px 22px #225d4e05; transition: box-shadow var(--motion); }
.search-field:focus-within { box-shadow: 0 0 0 3px #087d7740; border-color: var(--accent-text); }
.search-field > .icon { width: 23px; color: var(--accent-text); }
.search-field textarea { display: block; width: 100%; min-width: 0; height: 54px; resize: none; border: 0; padding: 3px 0; background: transparent; font-size: 14px; line-height: 24px; }
.search-field textarea:focus { outline: 0; }
.search-field textarea::placeholder { color: var(--muted); opacity: 1; }
.search-submit { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--button-radius); background: var(--plum); color: white; }
.search-submit:hover { background: var(--plum-hover); }
.search-submit .icon { transition: transform var(--motion); }
.search-submit:hover .icon { transform: translateX(3px); }
.search-meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 11px; }
.search-meta .icon { width: 13px; height: 13px; color: var(--accent-text); }
.form-error { font-size: 13px; margin-top: 9px; color: var(--error); }
.quick-links { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-top: 17px; }
.quick-label { font-size: 11px; color: var(--muted); }
.quick-links button { padding: 8px 0; min-height: 44px; min-width: 44px; background: none; font-size: 12px; font-weight: 600; border-bottom: 1px solid #89bdb3; }
.quick-links button:hover { color: var(--accent-text); border-color: var(--accent-text); }
.hero-photo { position: relative; min-width: 0; overflow: hidden; background: #b8ada0; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-photo::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, #2b29224d, transparent); }
.hero-photo .photo-placeholder { position: absolute; inset: 0; min-height: 0; border: 0; }
.hero-photo .photo-placeholder > div { margin-bottom: 70px; }
.hero-photo figcaption { position: absolute; z-index: 1; bottom: 33px; left: 34px; color: white; font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.5px; }
.search-response { position: relative; padding: 25px 22px 22px; margin-top: 15px; background: white; border: 1px solid var(--line); border-radius: var(--field-radius); }
.search-response h2 { font-size: 24px; letter-spacing: -.8px; padding-right: 25px; }
.search-response > p { font-size: 13px; color: var(--muted); margin-top: 10px; }
.response-close { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; background: none; width: 44px; height: 44px; }
.response-close .icon { width: 20px; transform: rotate(45deg); }
.response-list { list-style: none; padding: 0; margin: 16px 0 0; }
.response-list li + li { border-top: 1px solid var(--line); }
.response-list button { width: 100%; text-align: left; display: flex; align-items: center; gap: 18px; padding: 13px 0; background: none; }
.response-list button:hover { color: var(--accent-text); }
.response-list strong { display: block; font-size: 14px; font-weight: 600; }
.response-list small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.response-list .icon { margin-left: auto; width: 18px; }
/* Lila Balken über die volle Breite, die drei Aussagen stehen genau auf der Inhaltsbreite */
.promise-strip { display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 6vw, 90px); min-height: 112px; padding: 26px max(var(--gutter), calc((100% - var(--content-width)) / 2)); background: var(--plum); color: white; }
.promise-item { display: flex; align-items: center; gap: 19px; font-size: clamp(19px, 2vw, 29px); font-weight: 400; letter-spacing: -.9px; white-space: nowrap; }
.promise-item > .icon { width: 30px; height: 30px; color: var(--accent); }
.promise-divider { width: 1px; height: 32px; background: #ffffff32; }

/* Themen: das bewährte Akkordeon neben einem großen Alltagsfoto. */
.topics-section { padding-block: 105px 112px; }
.section-heading { display: flex; justify-content: space-between; gap: 36px; align-items: flex-end; margin-bottom: 47px; }
.section-heading > p { max-width: 345px; font-size: 15px; line-height: 1.85; color: var(--muted); margin-bottom: 4px; }
.topics-layout { display: grid; grid-template-columns: 1.14fr 1fr; gap: 7%; align-items: start; }
.topics-list { border-top: 1px solid var(--line); }
.topic { border-bottom: 1px solid var(--line); scroll-margin-top: 32px; }
.topic summary { display: flex; align-items: center; gap: 18px; min-height: 97px; list-style: none; cursor: pointer; font-size: 23px; font-weight: 500; letter-spacing: -.8px; }
summary::-webkit-details-marker { display: none; }
.topic-symbol { width: 27px; height: 27px; color: var(--accent-text); }
.topic-toggle { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; margin-left: auto; flex: 0 0 auto; display: grid; place-items: center; transition: background var(--motion); }
.topic-toggle .icon { width: 18px; height: 18px; transition: transform var(--motion); }
.topic[open] .topic-toggle, .topic summary:hover .topic-toggle { background: var(--accent); border-color: var(--accent); }
.topic[open] .topic-toggle .icon { transform: rotate(45deg); }
.topic-content { padding: 0 45px 27px; }
.topic-content > p { font-size: 15px; color: var(--muted); line-height: 1.85; max-width: 420px; margin-bottom: 13px; }
.topic-content .text-link { font-size: 13px; }
.topic-content .topic-more { margin-left: 26px; color: var(--accent-text); }
@media (max-width: 680px) { .topic-content .topic-more { margin-left: 0; display: flex; } }
.life-image { height: 560px; overflow: hidden; position: relative; border-radius: var(--button-radius); background: var(--plum); }
.life-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 700ms ease-out; }
.life-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #251d26eb, #251d2640 38%, transparent 70%); }
.life-image figcaption { position: absolute; bottom: 33px; left: 32px; right: 28px; z-index: 1; color: white; }
.life-image figcaption strong { display: block; font-size: clamp(29px, 2.7vw, 41px); line-height: 1.17; letter-spacing: -1.7px; font-weight: 500; }
.life-image figcaption p { font-size: 13px; max-width: 340px; color: #f0e9ed; margin-top: 16px; }
@media (hover: hover) { .life-image:hover img { transform: scale(1.035); } }

/* Beratungsplan: ersetzt die Jobs bzw. Rechner der Vorlagen. */
.plan-section { padding-block: 98px 106px; background: var(--plum); color: white; }
.plan-inner { display: grid; grid-template-columns: 1.14fr 1fr; gap: 7%; align-items: center; }
.section-kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.section-kicker::before { content: ''; width: 22px; height: 2px; background: var(--accent); }
.plan-copy h2 { font-size: clamp(38px, 3.9vw, 59px); }
.plan-copy > p { font-size: 15px; line-height: 1.85; color: var(--on-dark-muted); max-width: 440px; margin: 25px 0 30px; }
.plan-tabs { display: flex; flex-direction: column; gap: 4px; max-width: 455px; }
.plan-tab { width: 100%; min-height: 62px; text-align: left; display: flex; align-items: center; gap: 14px; padding: 15px 16px; color: var(--on-dark-muted); border-bottom: 1px solid #ffffff29; background: none; font-size: 15px; }
.plan-tab .icon { width: 19px; height: 19px; margin-left: auto; opacity: 0; transform: translateX(-5px); transition: opacity var(--motion), transform var(--motion); }
.plan-tab[aria-selected="true"] { background: var(--accent); color: var(--plum); border-color: transparent; border-radius: var(--button-radius); font-weight: 600; }
.plan-tab[aria-selected="true"] .icon { opacity: 1; transform: translateX(0); }
.plan-tab:hover:not([aria-selected="true"]) { color: white; background: #ffffff09; }
.plan-copy .plan-note { display: flex; align-items: center; gap: 9px; font-size: 12px; margin: 23px 0 0; }
.plan-note .icon { width: 16px; height: 16px; color: var(--accent); }
.plan-card { padding: 32px; width: 100%; max-width: 535px; justify-self: end; background: var(--white); color: var(--ink); border-radius: var(--card-radius); }
.plan-card:focus-visible { outline-color: var(--accent); }
.plan-card-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.plan-card-top > .icon { width: 32px; height: 32px; color: var(--accent-text); }
.plan-card h3 { font-size: 26px; letter-spacing: -1px; line-height: 1.25; font-weight: 500; }
.plan-card-top p { font-size: 12px; color: var(--muted); margin-top: 7px; }
.plan-step-list { list-style: none; padding: 0; margin: 27px 0 23px; }
.plan-step-list li { display: flex; gap: 16px; position: relative; padding: 0 0 23px; }
.plan-step-list li:last-child { padding-bottom: 0; }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); color: var(--accent-text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.plan-step-list li:not(:last-child)::after { content: ''; position: absolute; width: 1px; background: var(--line); top: 34px; bottom: 2px; left: 16px; }
.plan-step-list strong { display: block; margin: 2px 0 6px; font-size: 15px; font-weight: 600; }
.plan-step-list p { font-size: 13px; line-height: 1.75; color: var(--muted); }
.plan-takeaway { padding: 17px 19px; background: var(--mint); border-radius: 4px; margin-bottom: 19px; }
.plan-takeaway span { display: block; color: var(--accent-text); font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.plan-takeaway p { font-size: 14px; font-weight: 500; line-height: 1.6; }
.plan-card .button { width: 100%; font-size: 13px; }

/* Beratungsansatz und abschließende Einladung. */
.approach-section { padding-block: 108px 113px; }
.approach-intro { max-width: 990px; margin: 0 auto 57px; text-align: center; }
.approach-intro h2 { font-size: clamp(37px, 4vw, 61px); }
.approach-intro p { font-size: 15px; color: var(--muted); max-width: 610px; margin: 24px auto 0; line-height: 1.85; }
.approach-details { max-width: 980px; margin: auto; }
.approach-row { display: grid; grid-template-columns: 50px 1fr 1.24fr; gap: 27px; align-items: start; padding: 27px 0 29px; border-top: 1px solid var(--line); }
.approach-row > .icon { width: 30px; height: 30px; color: var(--accent-text); margin-top: 4px; }
.approach-row h3 { font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -.8px; }
.approach-row p { font-size: 14px; line-height: 1.85; color: var(--muted); }
.approach-row:last-child { border-bottom: 1px solid var(--line); }
.approach-footnote { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 28px; }
.approach-footnote .icon { color: var(--accent-text); width: 16px; height: 16px; }
.start-section { background: var(--mint-deep); }
.start-inner { display: grid; grid-template-columns: 1.14fr 1fr; gap: 7%; align-items: center; padding-block: 64px 70px; }
.start-inner h2 { font-size: clamp(35px, 3.6vw, 55px); }
.start-right { max-width: 430px; justify-self: end; width: 100%; }
.start-right > p { font-size: 15px; line-height: 1.85; margin-bottom: 23px; }
.start-right .button { width: 100%; }
.start-right > span { display: block; font-size: 11px; color: var(--muted); margin-top: 12px; }
.site-footer { padding-block: 42px 24px; }
.footer-top { display: flex; gap: 30px; align-items: center; padding-bottom: 29px; border-bottom: 1px solid var(--line); }
.footer-top .wordmark { font-size: 25px; }
.footer-top > p { margin-left: auto; color: var(--muted); font-size: 12px; }
.back-top { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.back-top .icon { transform: rotate(-90deg); width: 18px; }
.back-top:hover { background: var(--mint); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 14px; color: var(--muted); font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { display: flex; align-items: center; min-height: 44px; }
.footer-links a:hover { color: var(--accent-text); }
.legal-panel { border-top: 1px solid var(--line); margin-top: 12px; padding-block: 15px; max-width: 800px; }
.legal-panel summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 600; }
.legal-panel p { font-size: 13px; line-height: 1.85; color: var(--muted); }
.noscript-note { padding: 20px var(--gutter); background: var(--mint); font-size: 14px; }
/* UNTERSEITEN: Bausteine für Themen-, Beratungs-, Werkzeug- und Rechtsseiten. */
.desktop-nav > a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-nav > a[aria-current="page"] { color: var(--accent-text); }
.page-hero { background: var(--mint); }
.page-hero-inner { display: grid; grid-template-columns: 1.16fr .84fr; gap: 6%; align-items: center; padding-block: 58px 64px; }
.page-hero-inner.page-hero-single { grid-template-columns: 1fr; max-width: 900px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .icon { width: 14px; height: 14px; }
.breadcrumb button { min-height: 0; padding: 0; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer; }
.breadcrumb button:hover { color: var(--accent-text); }
.breadcrumb a, .breadcrumb button { padding-block: 12px; margin-block: -12px; }
.page-hero h1 { font-size: clamp(42px, 4.9vw, 78px); font-weight: 600; line-height: 1.04; letter-spacing: -.055em; margin-bottom: 22px; }
.page-hero h1 em { font-style: normal; color: var(--accent-text); }
.page-hero-lead { max-width: 560px; font-size: 17px; line-height: 1.8; }
.page-hero-lead strong { font-weight: 600; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 28px; }
.page-hero-actions .text-link { color: var(--accent-text); }
/* Berufe-Finder im Kopfbereich der Themenseiten (inc/finder.php): kompakte dunkle Karte wie die früheren Checks */
.finder { position: relative; padding: 24px 24px 22px; background: var(--plum); color: var(--white); border-radius: var(--card-radius); box-shadow: 0 22px 60px #3b20394d; scroll-margin-top: 96px; }
.finder-titel { font-size: 22px; font-weight: 600; letter-spacing: -.6px; line-height: 1.2; }
.finder-unter { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--on-dark-muted); }
.finder-fortschritt { display: grid; gap: 7px; margin: 16px 0 0; }
.finder-rest { font-size: 12px; font-weight: 600; color: var(--on-dark-muted); }
.finder-balken { display: block; height: 5px; border-radius: 99px; background: #ffffff26; overflow: hidden; }
.finder-balken > span { display: block; width: 6%; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--motion); }
.finder-schritt { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.finder-schritt legend { padding: 0; margin-bottom: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; }
.finder-schritt legend:focus { outline: none; }
.finder-hinweis { margin: -4px 0 10px; font-size: 12.5px; color: var(--on-dark-muted); }
.finder-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.finder-kachel { position: relative; display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 10px 13px; border: 1px solid #ffffff2e; border-radius: var(--field-radius); font-size: 13.5px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background var(--motion), border-color var(--motion); }
.finder-kachel input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.finder-kachel .icon { width: 22px; height: 22px; stroke-width: 1.75; color: var(--accent); }
.finder-kachel:hover { background: #ffffff0d; border-color: #ffffff59; }
.finder-kachel:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--plum); }
.finder-kachel:has(input:checked) .icon { color: var(--plum); }
.finder-kachel:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.finder-kacheln-text .finder-kachel { min-height: 48px; }
.finder-fehler { margin-top: 10px; font-size: 13px; color: #ffd3da; }
.finder-aktionen { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.finder-zurueck { color: var(--on-dark-muted); font-size: 14px; }
.finder-zurueck .icon { transform: rotate(180deg); }
.finder-weiter { margin-left: auto; }
@media (max-width: 680px) {
  .finder { padding: 20px 16px 18px; }
  .finder-titel { font-size: 20px; }
  .finder-kachel { min-height: 52px; padding: 9px 11px; font-size: 13px; gap: 9px; }
}
/* Kopfbereich der Themenseiten: Foto des Themas über die ganze Fläche, darüber Helltürkis mit 90 % Deckkraft,
   damit sich die vier Seiten unterscheiden und Text und Karte ruhig lesbar bleiben. Fotos: Pexels 819635, 3811832,
   19895774, 4474019 */
.page-hero-bild { position: relative; isolation: isolate; background: var(--mint) var(--hero-bild) var(--hero-pos, center) / cover no-repeat; }
.page-hero-bild::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--mint) 90%, transparent); }
.hero-orientierung { --hero-bild: url("/assets/hero-orientierung.jpg"); }
.hero-berufsfelder { --hero-bild: url("/assets/hero-berufsfelder.jpg"); }
.hero-qualifizierung { --hero-bild: url("/assets/hero-qualifizierung.jpg"); }
.hero-wiedereinstieg { --hero-bild: url("/assets/hero-wiedereinstieg.jpg"); }
/* Ergebnisseite /passende-berufe */
.finder-ergebnis-kopf .chip-list { margin-bottom: 14px; }
.chip-static, .chip-static:hover { cursor: default; border-color: var(--line); color: var(--ink); }
.match-wert { margin-bottom: 6px; font-size: 13px; color: var(--accent-text); }
.match-wert strong { font-size: 16px; }
.match-auch, .match-hinweis { margin-top: 6px; font-size: 13px; color: var(--muted); }
.match-hinweis { font-weight: 600; }
.finder-mehr { margin-top: 24px; }
.finder-weg { margin-top: 36px; }
.finder-quellen { margin-top: 28px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.finder-quellen summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.finder-quellen p, .finder-quellen ul { margin-top: 10px; }
.finder-quellen ul { display: grid; gap: 6px; padding-left: 18px; }
.finder-quellen a { color: var(--accent-text); text-decoration: underline; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; font-size: 13px; color: var(--muted); }
.hero-facts span { display: flex; align-items: center; gap: 8px; }
.hero-facts .icon { width: 16px; height: 16px; color: var(--accent-text); }

/* Fotoplatzhalter: Motivbeschreibung sichtbar, bis das echte Bild vorliegt. */
.photo { position: relative; overflow: hidden; border-radius: var(--button-radius); background: var(--mint-deep); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder { display: grid; place-items: center; text-align: center; min-height: 320px; padding: 32px; color: var(--accent-text); border: 1.5px dashed #89bdb3; background: repeating-linear-gradient(-45deg, var(--mint) 0 18px, var(--mint-deep) 18px 36px); }
.photo-placeholder > div { max-width: 320px; display: grid; gap: 10px; justify-items: center; }
.photo-placeholder .icon { width: 34px; height: 34px; }
.photo-placeholder strong { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.photo-placeholder p { font-size: 13px; line-height: 1.6; color: var(--ink); }
.photo-placeholder small { font-size: 11px; color: var(--muted); }
.photo-tall { min-height: 520px; }
.photo-wide { min-height: 380px; }
.photo-square { aspect-ratio: 1; min-height: 0; }

/* Inhaltsraster: Textspalte und begleitende Seitenleiste. */
.content-section { padding-block: 84px 92px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 8%; align-items: start; }
.content-aside { position: sticky; top: 28px; display: grid; gap: 22px; }
.aside-box { padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.aside-box h2, .aside-box h3 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 14px; }
.aside-box ol, .aside-box ul { list-style: none; padding: 0; margin: 0; }
.aside-box li + li { border-top: 1px solid var(--line); }
.aside-box li a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; font-weight: 500; }
.aside-box li a:hover { color: var(--accent-text); }
.aside-box li a .icon { width: 14px; height: 14px; color: var(--accent-text); }
.aside-box p { font-size: 13px; line-height: 1.75; color: var(--muted); }
.aside-box .button { width: 100%; margin-top: 16px; font-size: 13px; }
.aside-box-mint { background: var(--mint); border-color: transparent; }
.prose { max-width: 720px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; margin-top: 64px; scroll-margin-top: 32px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 22px; line-height: 1.35; letter-spacing: -.6px; font-weight: 600; margin-top: 38px; }
.prose p { font-size: 16px; line-height: 1.8; }
.prose p.lead { font-size: 18px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 22px; font-size: 16px; line-height: 1.8; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent-text); font-weight: 700; }
.prose a:not(.button):not(.text-link) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose figure { margin-top: 32px; }
.prose .text-link { color: var(--accent-text); }
/* „Gut zu wissen“: gleicher Stil wie der Kasten „Was ist dir wichtig?“ über den Berufsvorschlägen */
.info-box { padding: 20px 22px; background: var(--accent-text); color: var(--white); border-radius: var(--card-radius); }
.info-box strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 8px; }
.info-box p { font-size: 15px; line-height: 1.75; }
.info-box a:not(.button):not(.text-link), .prose .info-box a:not(.button):not(.text-link) { color: var(--white); text-decoration: underline; text-decoration-color: #ffffffa6; text-underline-offset: 3px; }
.info-box-plum { background: var(--plum); color: white; border-color: var(--accent); }
.info-box-plum strong { color: var(--accent); }
.info-box-plum p { color: var(--on-dark-muted); }

/* Situationen: Zeilen mit Symbol, Überschrift und Text. */
.situation-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.situation-list li { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.situation-list .icon { width: 28px; height: 28px; color: var(--accent-text); margin-top: 3px; }
.situation-list strong { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.5px; line-height: 1.35; margin-bottom: 8px; }
.situation-list p { font-size: 15px; line-height: 1.8; color: var(--muted); }
.situation-list .text-link { margin-top: 8px; font-size: 13px; color: var(--accent-text); }

/* Mini-Check: kurze Selbsteinschätzung mit lokal berechneter Empfehlung. */

/* Kartenraster: Themenübersicht, verwandte Themen, Werkzeuge. */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 32px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); transition: border-color var(--motion), transform var(--motion); }
.card:hover { border-color: #89bdb3; }
.card > .icon { width: 30px; height: 30px; color: var(--accent-text); }
.card h2, .card h3 { font-size: 23px; font-weight: 500; letter-spacing: -.7px; line-height: 1.3; margin: 0; }
.card p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.card .text-link { margin-top: auto; padding-top: 8px; color: var(--accent-text); font-size: 13px; }
.card-mint { background: var(--mint); border-color: transparent; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.card-wide .card-body { display: flex; flex-direction: column; gap: 14px; }
.section-mint { background: var(--mint); }
.section-plum { background: var(--plum); color: white; }
.section-plum h2 { color: white; }
.section-plum .section-heading > p { color: var(--on-dark-muted); }
.section-plum .card { background: #ffffff0f; border-color: #ffffff29; color: white; }
.section-plum .card p { color: var(--on-dark-muted); }
.section-plum .card > .icon, .section-plum .card .text-link { color: var(--accent); }

/* Schrittleiste für Beratungsablauf und Werkzeuge. */
.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps-row article { padding: 30px 26px 32px 0; }
.steps-row article + article { border-left: 1px solid var(--line); padding-left: 26px; }
.steps-row .step-number { margin-bottom: 18px; }
.steps-row h3 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; margin-bottom: 10px; line-height: 1.3; }
.steps-row p { font-size: 14px; line-height: 1.8; color: var(--muted); }

/* Formular: Anfrage zur Beratung. */
.form-panel { padding: 34px; background: var(--white); border: 1px solid var(--line); border-radius: var(--card-radius); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-grid .form-field-full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.form-field label small { font-weight: 400; color: var(--muted); }
.form-field input, .form-field textarea, .form-field select { display: block; width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid #c8e0d9; border-radius: var(--field-radius); background: var(--white); font-size: 15px; line-height: 1.5; transition: box-shadow var(--motion), border-color var(--motion); }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 0; border-color: var(--accent-text); box-shadow: 0 0 0 3px #087d7740; }
.form-field [aria-invalid="true"] { border-color: var(--error); }
.form-field .form-error { margin-top: 6px; }
.form-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.form-consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent-text); flex: 0 0 auto; }
.form-consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }
.form-actions .search-meta { margin: 0; }
.form-success { padding: 26px; background: var(--mint); border-radius: var(--card-radius); }
.form-success h3 { font-size: 22px; font-weight: 500; letter-spacing: -.6px; margin-bottom: 10px; }
.form-success p { font-size: 14px; line-height: 1.75; color: var(--muted); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Werkzeug: Erfahrungs-Übersetzer. */
.tool-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; align-items: start; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13px; font-weight: 500; }
.chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.chip[aria-pressed="true"] { background: var(--plum); color: white; border-color: var(--plum); }
.skill-list { list-style: none; padding: 0; margin: 0; }
.skill-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.skill-list .icon { width: 20px; height: 20px; color: var(--accent-text); margin-top: 3px; }
.skill-list strong { font-weight: 600; }
.skill-list small { display: block; font-size: 13px; color: var(--muted); }
.empty-state { padding: 26px; border: 1.5px dashed var(--line); border-radius: var(--card-radius); font-size: 14px; color: var(--muted); }

/* Rechtsseiten und Fehlerseite. */
.legal-prose { max-width: 760px; }
.legal-prose h2 { font-size: 24px; margin-top: 44px; }
.legal-prose p, .legal-prose li { font-size: 15px; }
.placeholder-mark { display: inline-block; padding: 2px 8px; border-radius: 4px; background: #fff3c4; color: #6d4c00; font-size: 12px; font-weight: 600; }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 90px; }
.error-page h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 600; letter-spacing: -.055em; line-height: 1.04; margin-bottom: 20px; }
.error-page p { max-width: 460px; margin: 0 auto 28px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.error-page .page-hero-actions { justify-content: center; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; gap: 16px; min-height: 72px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; letter-spacing: -.4px; }
.faq summary .topic-toggle { margin-left: auto; }
.faq details[open] .topic-toggle { background: var(--accent); border-color: var(--accent); }
.faq details[open] .topic-toggle .icon { transform: rotate(45deg); }
.faq .faq-body { padding: 0 0 24px; max-width: 640px; }
.faq .faq-body p { font-size: 15px; line-height: 1.8; color: var(--muted); }
.faq .faq-body p + p { margin-top: 10px; }

@media (max-width: 1100px) {
  .content-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 5%; }
  .page-hero h1 { font-size: clamp(40px, 5vw, 60px); }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-row article { padding: 26px 22px 28px 0; }
  .steps-row article:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .steps-row article:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 44px 48px; }
  .page-hero-lead { font-size: 15px; }
  .photo-tall { min-height: 360px; }
  .content-section { padding-block: 66px 72px; }
  .content-layout { grid-template-columns: 1fr; gap: 40px; }
  .content-aside { position: static; }
  .card-wide { grid-template-columns: 1fr; gap: 24px; }
  .tool-panel { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .page-hero h1 { font-size: clamp(38px, 9.5vw, 52px); }
  .page-hero-actions { gap: 12px 18px; }
  .page-hero-actions .button { width: 100%; }
  .photo-placeholder { min-height: 260px; padding: 24px; }
  .photo-tall { min-height: 300px; }
  .prose h2 { font-size: 30px; margin-top: 48px; }
  .prose h3 { font-size: 20px; }
  .prose p, .prose ul, .prose ol { font-size: 15px; }
  .situation-list li { grid-template-columns: 32px 1fr; gap: 14px; padding: 22px 0; }
  .situation-list .icon { width: 24px; height: 24px; }
  .situation-list strong { font-size: 18px; }
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px 22px 26px; }
  .card h2, .card h3 { font-size: 21px; }
  .steps-row { grid-template-columns: 1fr; }
  .steps-row article, .steps-row article + article { border-left: 0; padding: 24px 0; }
  .form-panel { padding: 24px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .aside-box { padding: 20px; }
  .faq summary { font-size: 17px; min-height: 64px; }
}
@media (min-width: 1680px) { .hero-inner { padding-left: 80px; } }
@media (max-width: 1100px) {
  .wordmark { font-size: 23px; gap: 8px; }
  .brand-logo { width: 255px; }
  .desktop-nav { gap: 21px; font-size: 12px; }
  .site-header { gap: 20px; }
  .hero-inner { padding-top: 48px; padding-bottom: 34px; }
  .hero h1 { --hero-size: 6.4vw; }
  .hero-description { font-size: 14px; }
  .search-field { gap: 10px; padding-left: 14px; }
  .search-field textarea { font-size: 13px; }
  .search-field > .icon { width: 19px; }
  .search-submit { width: 48px; height: 52px; }
  .quick-links { gap: 5px 15px; }
  .topic summary { font-size: 21px; }
  .topic-content { padding-left: 0; padding-right: 20px; }
  .plan-card { padding: 26px; }
  .plan-card h3 { font-size: 23px; }
  .plan-tab { font-size: 13px; padding-inline: 13px; }
}
@media (max-width: 900px) {
  .site-header { height: 82px; }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; width: 44px; height: 44px; padding: 8px; background: none; }
  .menu-toggle span { width: 23px; height: 1.5px; background: var(--plum); transition: transform var(--motion); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .mobile-nav { position: absolute; display: flex; flex-direction: column; top: 100%; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); background: var(--paper); padding: 12px var(--gutter) 22px; border-bottom: 1px solid var(--line); box-shadow: 0 18px 28px #3b203915; }
  .mobile-nav > a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
  .mobile-nav > a:last-child { border-bottom: 0; }
  .hero { grid-template-columns: 1.2fr .8fr; }
  .hero-inner { padding: 40px 28px 31px; }
  .hero h1 { --hero-size: clamp(48px, 6.4vw, 58px); }
  .hero-description { font-size: 13px; }
  .search-field > .icon { display: none; }
  .search-field textarea { font-size: 16px; height: 72px; }
  .search-field textarea::placeholder { font-size: 13px; }
  .search-meta { font-size: 12px; align-items: flex-start; }
  .search-meta .icon { margin-top: 2px; }
  .quick-label { width: 100%; }
  .hero-photo img { object-position: 56% 40%; }
  .hero-photo figcaption { left: 22px; font-size: 17px; }
  .promise-strip { min-height: 96px; gap: 26px; }
  .promise-item { font-size: 19px; gap: 12px; }
  .promise-item > .icon { width: 25px; height: 25px; }
  .topics-section { padding-block: 78px 82px; }
  .section-heading { gap: 30px; }
  .section-heading > p { max-width: 260px; font-size: 13px; }
  .topics-layout, .plan-inner { gap: 5%; }
  .topic summary { font-size: 18px; min-height: 87px; gap: 12px; }
  .topic-symbol { width: 23px; }
  .topic-toggle { width: 29px; height: 29px; }
  .topic-content > p { font-size: 13px; }
  .life-image { height: 525px; }
  .life-image figcaption { left: 23px; right: 20px; bottom: 26px; }
  .life-image figcaption strong { font-size: 29px; }
  .life-image figcaption p { font-size: 12px; }
  .plan-section { padding-block: 78px 83px; }
  .plan-copy h2 { font-size: 36px; }
  .plan-copy > p { font-size: 13px; }
  .plan-copy .plan-note { font-size: 12px; align-items: flex-start; }
  .plan-card { padding: 23px; }
  .plan-card h3 { font-size: 22px; }
  .plan-card-top > .icon { width: 25px; height: 25px; }
  .plan-step-list li { gap: 11px; }
  .plan-step-list strong { font-size: 14px; }
  .plan-step-list p { font-size: 12px; }
  .plan-card .button { padding-inline: 15px; gap: 12px; font-size: 12px; }
  .approach-section { padding-block: 79px 86px; }
  .approach-row { grid-template-columns: 35px 1fr 1.2fr; gap: 20px; }
  .approach-row h3 { font-size: 21px; }
  .approach-row p { font-size: 13px; }
  .start-inner { padding-block: 52px 58px; }
  .start-right > p { font-size: 13px; }
}
@media (max-width: 680px) {
  :root { --gutter: 24px; }
  .site-header { height: 76px; gap: 12px; }
  .wordmark { font-size: 22px; letter-spacing: -1.2px; }
  .brand-logo { width: min(235px, calc(100vw - 112px)); }
  .header-cta { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-inner { padding: 43px var(--gutter) 32px; max-width: none; }
  .hero h1 { --hero-size: clamp(52px, 10.8vw, 72px); margin-bottom: 22px; letter-spacing: -.06em; }
  .hero-description { font-size: 15px; line-height: 1.8; max-width: 460px; margin-bottom: 23px; }
  .search-label { font-size: 12px; }
  .search-field { padding: 11px 10px 11px 15px; gap: 12px; }
  .search-field textarea { height: 72px; }
  .search-field textarea::placeholder { font-size: 14px; }
  .search-submit { width: 48px; height: 54px; }
  .search-meta { font-size: 12px; }
  .quick-links { gap: 4px 19px; margin-top: 14px; }
  .quick-label { width: auto; }
  .quick-links button { font-size: 13px; }
  .hero-photo { height: 350px; }
  .hero-photo img { object-position: 50% 20%; }
  .hero-photo figcaption { bottom: 25px; left: 24px; font-size: 19px; }
  .promise-strip { gap: 15px; padding: 24px 18px; min-height: 99px; }
  .promise-item { flex: 1; justify-content: center; flex-direction: column; font-size: 13px; gap: 10px; letter-spacing: -.3px; }
  .promise-item > .icon { width: 24px; height: 24px; }
  .promise-divider { height: 39px; }
  .topics-section { padding-block: 64px 69px; }
  h2 { font-size: clamp(36px, 7.7vw, 48px); }
  .section-heading { display: block; margin-bottom: 29px; }
  .section-heading > p { font-size: 14px; max-width: 420px; margin-top: 20px; }
  .topics-layout, .plan-inner { grid-template-columns: 1fr; gap: 33px; }
  .topic summary { min-height: 83px; font-size: 19px; gap: 13px; }
  .topic-content { padding: 0 8px 21px; }
  .topic-content > p { font-size: 14px; }
  .topic-content .text-link { font-size: 13px; }
.topic-content .topic-more { margin-left: 26px; color: var(--accent-text); }
@media (max-width: 680px) { .topic-content .topic-more { margin-left: 0; display: flex; } }
  .life-image { height: 420px; }
  .life-image img { object-position: 50% 40%; }
  .life-image figcaption strong { font-size: 35px; }
  .life-image figcaption p { font-size: 13px; }
  .plan-section { padding-block: 62px 66px; }
  .section-kicker { margin-bottom: 20px; }
  .plan-copy h2 { font-size: 39px; }
  .plan-copy > p { font-size: 14px; margin: 22px 0 26px; }
  .plan-tabs { max-width: none; }
  .plan-tab { min-height: 59px; font-size: 13px; padding-inline: 15px; }
  .plan-card { max-width: none; padding: 25px 23px; }
  .plan-card h3 { font-size: 25px; }
  .plan-step-list strong { font-size: 15px; }
  .plan-step-list p { font-size: 13px; }
  .plan-step-list li { gap: 14px; padding-bottom: 22px; }
  .plan-card .button { font-size: 13px; }
  .approach-section { padding-block: 66px 69px; }
  .approach-intro { text-align: left; margin-bottom: 33px; }
  .approach-intro h2 { font-size: 36px; }
  .approach-intro h2 br { display: none; }
  .approach-intro p { font-size: 14px; margin-top: 21px; }
  .approach-row { grid-template-columns: 31px 1fr; gap: 11px 18px; padding: 24px 0; }
  .approach-row > .icon { width: 27px; height: 27px; }
  .approach-row h3 { font-size: 23px; padding-top: 1px; }
  .approach-row p { grid-column: 2; font-size: 14px; }
  .approach-footnote { align-items: flex-start; justify-content: flex-start; font-size: 12px; }
  .approach-footnote .icon { margin-top: 2px; }
  .start-inner { grid-template-columns: 1fr; gap: 24px; padding-block: 48px 50px; }
  .start-inner h2 { font-size: 38px; }
  .start-right { max-width: none; }
  .start-right > p { font-size: 14px; margin-bottom: 21px; }
  .site-footer { padding-top: 32px; }
  .footer-top { flex-wrap: wrap; gap: 17px; padding-bottom: 24px; }
  .footer-top .wordmark { font-size: 22px; }
  .footer-top > p { width: 100%; order: 3; margin-left: 0; font-size: 12px; }
  .back-top { margin-left: auto; }
  .footer-bottom { display: block; font-size: 12px; padding-top: 22px; }
  .footer-links { gap: 10px 19px; margin-top: 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* FUNNEL: Berufswechsel in vier Schritten, Ergebnis und Detail. */
.funnel-progress { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 26px; }
.funnel-progress ol { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.funnel-progress li { width: 34px; height: 4px; border-radius: 2px; background: var(--line); }
.funnel-progress li.done { background: var(--accent); }
.funnel-progress li.current { background: var(--accent-text); }
.funnel-step { max-width: 760px; }
.funnel-step h1 { font-size: clamp(36px, 4.4vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: -.05em; margin-bottom: 16px; }
.funnel-step h1 em { font-style: normal; color: var(--accent-text); }
.funnel-step > p.lead { font-size: 16px; line-height: 1.75; max-width: 560px; margin-bottom: 26px; }
.funnel-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.funnel-nav .text-link { color: var(--accent-text); }
.recognized { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.recognized strong { display: block; font-size: 18px; letter-spacing: -.4px; margin-bottom: 6px; }
.recognized p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.recognized .chip-list { margin-top: 12px; }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.skill-grid label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); font-size: 14px; cursor: pointer; transition: border-color var(--motion), background var(--motion); }
.skill-grid label:hover { border-color: #89bdb3; }
.skill-grid label:has(input:checked) { background: var(--mint); border-color: var(--accent-text); font-weight: 600; }
.skill-grid label:has(input:focus-visible) { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.skill-grid input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-text); flex: 0 0 auto; }
.skill-grid small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.skill-more { margin-top: 14px; }
.skill-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-text); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.skill-more .skill-grid { margin-top: 10px; }
.skill-more summary .icon { width: 18px; height: 18px; }
.result-note { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.fussnote { margin-top: 10px; font-size: 12px; color: var(--muted); }
.entry-market { background: var(--white); border: 1px solid var(--line); color: var(--accent-text); }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.option-grid label { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); font-size: 14px; cursor: pointer; transition: border-color var(--motion), background var(--motion); }
.option-grid label:hover { border-color: #89bdb3; }
.option-grid label:has(input:checked) { background: var(--plum); color: white; border-color: var(--plum); font-weight: 600; }
.option-grid label:has(input:focus-visible) { outline: 3px solid var(--accent-text); outline-offset: 3px; }
.option-grid input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.option-grid.single { grid-template-columns: 1fr; max-width: 560px; }
.results-head { margin-bottom: 30px; }
.results-head h1 { font-size: clamp(36px, 4.4vw, 62px); font-weight: 600; line-height: 1.06; letter-spacing: -.05em; margin-bottom: 12px; }
.results-head p { font-size: 16px; color: var(--muted); max-width: 620px; line-height: 1.75; }
.result-list { display: grid; gap: 18px; }
.result-card { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; padding: 28px 30px 26px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.result-card .result-title { font-size: 26px; font-weight: 500; letter-spacing: -.8px; line-height: 1.25; margin-bottom: 4px; }
.result-card .result-field { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.entry { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-bottom: 14px; }
/* Einstiegsart ohne Ampelfarben: Grün, Gelb und Rot lasen sich als gut und schlecht */
.entry-none, .entry-short, .entry-long { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.result-why { font-size: 14px; line-height: 1.75; }
.result-why li { margin-top: 4px; }
ul.result-why { padding-left: 18px; margin: 6px 0 0; }
.result-side :is(h3, h4) { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 8px; }
.result-side :is(h3, h4) + .chip-list { margin-bottom: 16px; }
.result-side .chip { min-height: 32px; padding: 5px 11px; font-size: 12px; cursor: default; }
.result-side .chip.missing { border-style: dashed; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; grid-column: 1 / -1; }
.result-actions .button { font-size: 13px; }
.result-actions .text-link { color: var(--accent-text); font-size: 13px; }
.results-more { margin-top: 44px; }
.results-more h2 { font-size: 26px; margin-bottom: 8px; }
.results-more > p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.results-empty { padding: 30px; border: 1.5px dashed var(--line); border-radius: var(--card-radius); font-size: 15px; line-height: 1.75; }
.detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin-bottom: 8px; }
.detail-head h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -.05em; }
.region-select { font: inherit; font-size: 16px; padding: 6px 10px; border: 1px solid #6c9189; border-radius: 8px; background: #fff; color: var(--ink); max-width: 100%; }
.result-salary { margin: 2px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
/* Variante 06: viele lange Berufsnamen; in Funnel-Überschriften immer trennen statt überlaufen */
.detail-head h1, .result-card h2, .result-card h3, .recognized strong, #recognized strong { hyphens: auto; overflow-wrap: anywhere; }
.detail-meta { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.detail-meta a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.fact-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fact-table th, .fact-table td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fact-table th { width: 44%; font-weight: 600; padding-right: 16px; }
.fact-table td.unknown { color: var(--muted); font-style: italic; }
.ampel { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.ampel li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); font-size: 14px; line-height: 1.65; }
.ampel li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--line); }
.ampel li.wahrscheinlich::before { background: #2fb37a; }
.ampel li.moeglich::before { background: #e0b100; }
.ampel li.eher-nicht::before { background: #c9505f; }
.ampel strong { display: block; }
.ampel small { color: var(--muted); }
.radar-box { padding: 28px 30px; background: var(--plum); color: white; border-radius: var(--card-radius); margin-top: 44px; }
.radar-box h2 { font-size: 26px; font-weight: 500; letter-spacing: -.8px; margin-bottom: 8px; }
.radar-box > p { font-size: 14px; color: var(--on-dark-muted); max-width: 560px; line-height: 1.75; margin-bottom: 18px; }
.radar-box .form-field label { color: white; }
.radar-box .form-consent { color: var(--on-dark-muted); }
.radar-box .form-consent a { color: var(--accent); }
.radar-box .form-grid { grid-template-columns: 1fr 1fr; align-items: end; }
.radar-box .button-accent { width: 100%; }
.radar-box .form-success { background: #ffffff14; color: white; }
.radar-box .form-success h3 { color: white; }
.radar-box .form-success p { color: var(--on-dark-muted); }
.partner-slot { margin-top: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.partner-slot .partner-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.partner-slot .ad-label { display: inline-block; margin-right: 8px; padding: 1px 7px; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.partner-slot .partner-note { margin-top: 12px; font-size: 12px; }
.entry .icon { width: 14px; height: 14px; }
.partner-slot strong { display: block; font-size: 17px; letter-spacing: -.3px; margin-bottom: 6px; }
.partner-slot p { font-size: 14px; color: var(--muted); line-height: 1.7; }
@media (max-width: 900px) {
  .result-card { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .radar-box .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .skill-grid, .option-grid { grid-template-columns: 1fr; }
  .funnel-step h1, .results-head h1 { font-size: 34px; }
  .result-card .result-title { font-size: 22px; }
  .funnel-nav .button { width: 100%; }
  .radar-box { padding: 22px 18px; }
}

/* Sehr schmale Handys (bis 420 px): lange deutsche Wörter in Überschriften trennen statt überlaufen,
   Spalten dürfen schmaler als ihr längstes Wort werden, Versprechensleiste kompakter. */
.content-layout > *, .hero > * { min-width: 0; }
@media (max-width: 420px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
  .promise-strip { gap: 8px; padding-inline: 12px; }
  .promise-item { min-width: 0; font-size: 12px; text-align: center; letter-spacing: -.2px; }
  .promise-divider { flex: none; }
  .card { min-width: 0; padding: 24px 20px 26px; }
  .photo-placeholder { padding: 18px; }
}

/* Lesbarkeit am Handy (Design-Prüfung A9): keine Texte unter 12 px, Eingabefelder mit 16 px (kein iOS-Zoom), sichtbare Feldränder */
.search-field textarea, .form-field input, .form-field textarea, .form-field select { font-size: 16px; }
.search-field textarea::placeholder { font-size: 13px; }
.search-field, .form-field input, .form-field textarea, .form-field select { border-color: #6c9189; }
.search-meta, .quick-label, .plan-copy .plan-note, .plan-takeaway span, .start-right > span, .approach-footnote, .skill-grid small, .form-field label small, .footer-top > p, .footer-bottom { font-size: 12px; }
.quick-links button, .footer-links { font-size: 13px; }
@media (max-height: 640px) { .content-aside { position: static; } }

/* Kontrast auf dunklen Flächen und auf Platzhaltern (Design-Prüfung A16) */
.radar-box .form-error { color: #ffd3da; }
.radar-box .form-field label small { color: var(--on-dark-muted); }
.hero-photo:has(.photo-placeholder) figcaption { color: var(--ink); }
.hero-photo:has(.photo-placeholder)::after { display: none; }
/* Einheitliche Bausteine (A20) */
.form-field label.form-consent { display: flex; font-weight: 400; margin-bottom: 0; }
span.chip:hover { border-color: var(--line); color: inherit; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.photo > img.pos-top { object-position: 50% 12%; }
@media (max-width: 680px) { .legal-prose h2 { font-size: 22px; margin-top: 36px; } }
.life-image .photo-placeholder { position: absolute; inset: 0; min-height: 0; border: 0; align-items: start; }
@media (max-width: 680px) { .life-image .photo-placeholder small { display: none; } }
/* Tippflächen (A22) */
.quick-links button { position: relative; }
.quick-links button::after { content: ''; position: absolute; inset: 0 -9px; }
.wordmark { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a { min-width: 44px; }
.footer-links a[aria-current="page"] { color: var(--accent-text); }

/* Variante 07: Anfrageformular direkt in der Ergebniskarte */
.interest-box { grid-column: 1 / -1; padding: 24px 26px; background: var(--mint); border-radius: var(--card-radius); }
.interest-form h3 { font-size: 22px; font-weight: 500; letter-spacing: -.6px; margin-bottom: 8px; }
.interest-form > p { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 640px; margin-bottom: 20px; }
.interest-box .form-success { padding: 0; background: none; }
.result-card .entry { margin-right: 4px; }
@media (max-width: 680px) {
  .interest-box { padding: 20px 16px; }
  .result-actions .button { width: 100%; }
}
/* Variante 07: Ergebnis sofort nach der Eingabe, Filter darüber, Erklärung zum Aufklappen */
#results { margin-top: 36px; }
.results-head h1 { font-size: clamp(30px, 3.4vw, 46px); }
.results-alt { font-size: 14px; margin-top: 6px; }
.results-alt .text-link { display: inline; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.results-filter { margin-bottom: 22px; }
#results-title:focus { outline: none; }
/* Ergebniskarte: links Beruf und warum, rechts "So kommst du hin" */
@media (min-width: 901px) { .result-card { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } .result-card .result-side { border-left: 1px solid var(--line); padding-left: 28px; } }
@media (max-width: 900px) { .result-card { grid-template-columns: 1fr; } .result-card .result-side { border-top: 1px solid var(--line); padding-top: 16px; } }
/* "Und von dort?": weiterklicken vom Zielberuf aus, Route oben über dem Ergebnis */
.route-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px; padding: 0 16px; border: 1px solid var(--accent-text); border-radius: 999px; background: var(--white); color: var(--accent-text); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--motion), color var(--motion); }
.route-next:hover { background: var(--accent-text); color: white; }
.route-next .icon { width: 16px; height: 16px; transition: transform var(--motion); }
.route-next:hover .icon { transform: translateX(3px); }
.route-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 22px; padding: 14px 18px; background: var(--mint); border-radius: var(--card-radius); }
.route-bar .icon { width: 16px; height: 16px; color: var(--accent-text); }
.route-label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.route-step { min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 500; cursor: pointer; }
.route-step:hover { border-color: var(--accent-text); color: var(--accent-text); }
.route-current { background: var(--plum); color: white; border-color: var(--plum); cursor: default; }

/* Muster Übersicht: drei Spalten mit Kacheln, Details als Seitenfenster */
.lanes { display: grid; grid-template-columns: repeat(var(--lanes, 3), minmax(0, 1fr)); gap: 20px; align-items: start; }
.lane { background: var(--white); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 20px; }
.lane-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.lane-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; }
.lane-icon .icon { width: 20px; height: 20px; }
.lane-direkt .lane-icon { background: var(--mint); color: var(--accent-text); }
.lane-einarbeitung .lane-icon { background: #fff3c4; color: #6d4c00; }
.lane-qualifikation .lane-icon { background: #f6e3e7; color: var(--plum); }
.lane-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; line-height: 1.25; }
.lane-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--plum); color: white; font-size: 13px; vertical-align: 2px; }
.lane-head p { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 4px; }
.lane-empty { font-size: 13px; color: var(--muted); }
.tile-list { display: grid; gap: 10px; }
.tile { position: relative; display: grid; gap: 6px; width: 100%; padding: 16px 16px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); cursor: pointer; transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion); }
.tile:hover { border-color: var(--accent-text); box-shadow: 0 6px 18px #3b20391a; transform: translateY(-1px); }
.tile:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.tile-title { font-size: 17px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; color: var(--ink); padding-right: 40px; }
.tile-flag { justify-self: start; padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.tile-text { font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.tile-more .icon { width: 16px; height: 16px; transition: transform var(--motion); }
.tile:hover .tile-more .icon { transform: translateX(3px); }
.detail-panel { width: min(600px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--white); color: var(--ink); box-shadow: -12px 0 40px #3b203926; }
.detail-panel::backdrop { background: #3b203966; }
.detail-panel[open] { animation: detail-in .22s ease-out; }
@keyframes detail-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-inner { position: relative; padding: 28px 32px 40px; }
.detail-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.detail-close .icon { width: 20px; height: 20px; transform: rotate(45deg); }
.detail-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-right: 56px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.detail-trail button { padding: 4px 0; background: none; border: 0; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; }
.detail-trail [aria-current] { font-weight: 600; color: var(--ink); }
.detail-trail .icon { width: 14px; height: 14px; color: var(--muted); }
.detail-panel h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.05em; line-height: 1.12; margin: 4px 0 6px; }
.detail-panel h2:focus { outline: none; }
.detail-also { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.detail-block { margin-top: 22px; }
.detail-block h3, .detail-next h3 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.detail-block p { font-size: 15px; line-height: 1.75; }
.detail-way { padding: 18px 20px; background: var(--mint); border-radius: var(--card-radius); }
.detail-panel .result-note { margin: 10px 0 0; }
.detail-next { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.detail-next > p { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.next-list { display: grid; gap: 8px; }
.next-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; width: 100%; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; }
.next-item:hover { border-color: var(--accent-text); }
.next-item .entry { margin: 0; }
@media (max-width: 1100px) { .lanes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .lane { padding: 16px; }
  .detail-panel { width: 100vw; }
  .detail-inner { padding: 22px 18px 36px; }
}

/* Merkliste mit Lesezeichen */
.tile-wrap { position: relative; }
.heart { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color var(--motion), background var(--motion), transform var(--motion); }
.heart:hover { background: var(--mint); color: var(--accent-text); }
.heart .icon { width: 20px; height: 20px; }
.heart[aria-pressed="true"] { color: var(--accent-text); }
.heart[aria-pressed="true"] .icon { fill: currentColor; }
.heart:active { transform: scale(.9); }
.heart-pill { position: static; display: inline-flex; gap: 8px; width: auto; height: 38px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 600; color: var(--ink); }
.heart-pill[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); }
.detail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.detail-row .entry { margin: 0; }
.saved-box { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.saved-box h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 12px; }
.saved-box h2 .icon { width: 18px; height: 18px; color: var(--accent-text); fill: currentColor; }
.saved-list { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-item { display: grid; gap: 1px; padding: 8px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; }
.saved-item:hover { border-color: var(--accent-text); }
.saved-item span { font-size: 14px; font-weight: 600; }
.saved-item small { font-size: 12px; color: var(--muted); }

/* Wunsch-Knöpfe und Merkmale */
.wishes { margin: 0 0 22px; padding: 18px 20px; background: var(--accent-text); color: var(--white); border-radius: var(--card-radius); }
.wishes h2 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 12px; }
.wishes .chip { min-height: 40px; color: var(--ink); border-color: transparent; }
.wishes .chip:hover { border-color: var(--plum); color: var(--plum); }
.wishes .chip[aria-pressed="true"] { color: var(--white); border-color: var(--plum); }
.wish-note { margin-top: 10px; font-size: 12px; color: var(--mint); }
.marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mark .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.mark-good { background: var(--mint); color: var(--accent-text); }
.mark-bad { background: #f6e3e7; color: #8a2b3b; }
.tile-weak .tile { opacity: .55; }
.tile-weak .tile:hover { opacity: 1; }
.detail-block .marks { margin-bottom: 4px; }

/* Daumen, Teilen, Bewertungen anderer Besucher, Rückfrage nach einer Woche */
.detail-vote { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--card-radius); }
.detail-vote h3 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 10px; }
.vote-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vote { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color var(--motion), background var(--motion); }
.vote .icon { width: 20px; height: 20px; }
.vote-down .icon { transform: rotate(180deg); }
.vote:hover { border-color: var(--accent-text); }
.vote[aria-pressed="true"] { background: var(--accent-text); border-color: var(--accent-text); color: white; }
.vote-down[aria-pressed="true"] { background: var(--plum); border-color: var(--plum); }
.vote-note { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.detail-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.detail-share .button { min-height: 48px; }
.detail-share .text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.detail-share .text-link .icon { width: 16px; height: 16px; }
.tile-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-text); }
.tile-rating .icon { width: 14px; height: 14px; }
/* Gehalt aus der Destatis-Statistik: auf der Kachel, in den Details und als Quellenzeile unter den Spalten */
.tile-pay { font-size: 13px; color: var(--ink); }
.tile-pay strong { font-weight: 700; }
.detail-pay .pay-big { font-size: 15px; margin-bottom: 4px; }
.detail-pay .pay-big strong { font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: var(--accent-text); margin-right: 4px; }
.pay-source { margin-top: 18px; line-height: 1.6; }
.pay-source a, .detail-pay .result-note a, .cmp-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ask-box { margin-bottom: 16px; padding: 14px 16px; background: var(--mint); border-radius: var(--card-radius); }
.ask-box p { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
.ask-box p:last-child { margin-bottom: 0; }

/* Berufsseiten für Suchmaschinen (site/beruf/): ausführliche Kacheln, Fragen, Berufe A bis Z */
.tile-static { cursor: default; gap: 8px; }
.tile-static:hover { transform: none; box-shadow: none; border-color: var(--line); }
.tile-static .tile-title { padding-right: 0; font-size: 18px; }
.tile-static .tile-text { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 14px; line-height: 1.7; color: var(--ink); }
.tile-static .tile-text strong { font-weight: 600; }
.tile-also { font-size: 12px; color: var(--muted); }
.tile-static .marks .entry { margin: 0; }
.tile-way summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-text); min-height: 36px; display: flex; align-items: center; }
.tile-way p { font-size: 14px; line-height: 1.7; margin-top: 4px; }
.tile-static .tile-more { margin-top: 2px; }
.seo-faq h2, .seo-related h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -.04em; margin-bottom: 18px; }
.seo-faq { padding-top: 0; }
.faq-item { border-top: 1px solid var(--line); padding: 14px 0; max-width: 900px; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.faq-item p { margin-top: 10px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.seo-related { padding-top: 0; }
.az-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.az-letters a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-weight: 600; }
.az-letters a:hover { border-color: var(--accent-text); color: var(--accent-text); }
.az-group { margin-bottom: 26px; scroll-margin-top: 20px; }
.az-group h2 { font-size: 24px; font-weight: 600; color: var(--accent-text); margin-bottom: 8px; }
.az-group ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 24px; }
.az-group li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.az-group li a { font-weight: 600; }
.az-group li a:hover { color: var(--accent-text); }
.az-group li span { font-size: 12px; color: var(--muted); }

/* Vergleich aus der Merkliste */
.saved-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.saved-head h2 { margin-bottom: 0; }
.saved-compare { min-height: 40px; padding: 8px 16px; font-size: 13px; gap: 12px; }
.compare-panel { width: min(1100px, 100vw); margin: auto; height: auto; max-height: 92dvh; border-radius: var(--card-radius); }
.compare-panel h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 6px; }
.cmp-note { font-size: 13px; color: var(--muted); margin-bottom: 16px; padding-right: 56px; }
.cmp-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cmp thead th { vertical-align: bottom; background: var(--mint); }
.cmp thead strong { display: block; font-size: 15px; }
.cmp thead small { font-size: 12px; color: var(--muted); font-weight: 400; }
.cmp tbody th { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.cmp .entry, .cmp .mark { margin: 0; }
.cmp-unk { font-size: 12px; color: var(--muted); }
.cmp-way { font-size: 13px; line-height: 1.6; }
.cmp .text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent-text); font-weight: 600; cursor: pointer; }
@media (max-width: 680px) { .compare-panel { max-height: 100dvh; height: 100dvh; border-radius: 0; } }
.cmp tbody th, .cmp thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
.cmp thead th:first-child { background: var(--mint); }
.cmp td, .cmp thead th { min-width: 170px; }
@media (max-width: 680px) {
  .cmp { min-width: 0; }
  .cmp tbody th { white-space: normal; width: 96px; min-width: 96px; font-size: 10.5px; padding: 10px 8px; box-shadow: 1px 0 0 var(--line); }
  .cmp td, .cmp thead th { min-width: 150px; }
  .cmp thead th:first-child { min-width: 96px; }
}

.detail-foerder p strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ink); }

/* Startseite: Der Text oben beginnt genau an der linken Kante von Kopfleiste und Inhalt (wie .page-width),
   das Foto bleibt randlos rechts. 100cqw ist die Breite der .hero ohne Scrollleiste. */
.hero { container-type: inline-size; }
.hero-inner { justify-self: stretch; max-width: none; padding-left: max(var(--gutter), calc((100cqw - var(--content-width)) / 2)); }

/* Erfahrungs-Übersetzer: fertiger Satz je Stärke zum Kopieren */
.skill-sentence { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: start; margin-top: 10px; padding: 12px 14px; background: var(--mint); border-radius: 8px; }
.skill-sentence p { font-size: 14px; line-height: 1.6; color: var(--ink); }
.skill-copy { min-height: 36px; padding: 6px 12px; border: 1px solid var(--accent-text); border-radius: 6px; background: var(--white); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.skill-copy:hover, .skill-copy.is-done { background: var(--accent-text); color: var(--white); }
.translator-actions { margin-top: 18px; }
.translator-actions > p { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; }
.translator-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.translator-buttons .button { min-height: 48px; }
.translator-buttons .button.is-done { background: var(--accent-text); color: var(--white); }
@media (max-width: 520px) { .skill-sentence { grid-template-columns: 1fr; } .skill-copy { justify-self: start; } }

/* Handy: lange Berufsnamen ("Einzelhandelskaufmann/-frau") dürfen umbrechen statt die Spalte zu verbreitern;
   auf den Berufsseiten ist "In der Berufssuche öffnen" groß genug zum Tippen */
.tile-title, .tile-text, .lane-head h2, .detail-panel h2, .next-item span { overflow-wrap: anywhere; hyphens: auto; }
.tile-static .tile-more { min-height: 44px; }
/* Fragen auf den Berufsseiten: größere Tippfläche, Pfeil bleibt erhalten */
.faq-item summary { padding-block: 8px; }
.form-consent a { display: inline-block; padding-block: 6px; }

/* ===== Berufe: Suche, Details, Berufe A bis Z und Berufsseiten (Design Oktober 2026) ===== */
/* Kopf: Titel links, Suche rechts, auf Mint */
.job-hero { background: var(--mint); }
.job-hero-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px 7%; align-items: center; padding-block: 46px 56px; }
.job-hero .breadcrumb { margin-bottom: 20px; }
.job-hero h1 { font-size: clamp(40px, 4.6vw, 70px); font-weight: 600; line-height: 1.04; letter-spacing: -.055em; overflow-wrap: anywhere; hyphens: auto; }
.job-hero h1:focus { outline: none; }
#results-title { font-size: clamp(32px, 3.7vw, 56px); }
.job-hero .search-field textarea { padding-top: 15px; }
.job-hero h1 em { font-style: normal; color: var(--accent-text); }
.job-hero h1 .h1-line { display: block; color: var(--accent-text); }
.job-hero-page h1 em { display: block; }
.job-facts dd .result-note { display: block; margin: 6px 0 0; }
.job-hero-lead { max-width: 620px; margin-top: 18px; font-size: 18px; line-height: 1.6; }
.job-hero-lead strong { font-weight: 600; }
.job-hero .results-alt { margin-top: 12px; font-size: 15px; }
.job-hero-side { min-width: 0; }
.job-hero-side > p { max-width: 460px; margin-bottom: 14px; font-size: 16px; line-height: 1.6; }
.job-hero-side .quick-links { margin-top: 12px; }
.job-hero-side .text-link { color: var(--accent-text); margin-top: 6px; }
.job-hero-side .recognized { margin-top: 16px; }
.search-field input { display: block; width: 100%; min-width: 0; height: 54px; border: 0; padding: 3px 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.search-field input:focus { outline: 0; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }

/* Reiterband in Aubergine */
.lane-tabs { background: var(--plum); }
.lane-tabs[hidden] { display: none; }
.lane-tabs-inner { display: flex; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.lane-tabs-inner::-webkit-scrollbar { display: none; }
.lane-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 72px; padding: 0 clamp(18px, 3vw, 48px); background: none; border: 0; color: #fff; font: inherit; font-size: 18px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.lane-tab + .lane-tab::before { content: ''; position: absolute; left: 0; top: 50%; height: 26px; margin-top: -13px; border-left: 1px solid #ffffff5c; }
.lane-tab::after { content: ''; position: absolute; left: clamp(12px, 2.2vw, 34px); right: clamp(12px, 2.2vw, 34px); bottom: 14px; height: 3px; border-radius: 2px; background: transparent; transition: background var(--motion); }
.lane-tab[aria-pressed="true"]::after { background: var(--accent); }
.lane-tab:hover::after { background: #20b8ad8c; }
.lane-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -8px; }
.lane-tab-count { font-size: 14px; font-weight: 500; color: var(--on-dark-muted); }

/* Berufe als Zeilen */
.job-section { padding-block: 40px 76px; }
.job-section > h2 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; margin-bottom: 6px; }
.job-section .wishes { margin-bottom: 8px; }
.job-section .saved-box { margin: 0 0 28px; }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 320px); gap: 0 clamp(32px, 5vw, 72px); padding-block: 34px; border-bottom: 1px solid var(--plum); }
.job-row[hidden] { display: none; }
.job-weak { opacity: .55; transition: opacity var(--motion); }
.job-weak:hover, .job-weak:focus-within { opacity: 1; }
.job-main { min-width: 0; }
.job-title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; overflow-wrap: anywhere; hyphens: auto; }
.job-title button { padding: 0; background: none; border: 0; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; }
.job-title button:hover { color: var(--accent-text); }
.job-title button:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.job-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; font-size: 15px; }
.job-also { margin-top: 6px; font-size: 14px; color: var(--muted); }
.job-desc { max-width: 780px; margin-top: 12px; font-size: 18px; line-height: 1.55; }
.job-facts { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 8px 24px; max-width: 840px; margin-top: 18px; font-size: 15px; line-height: 1.6; }
.job-facts dt { font-weight: 500; }
.job-facts dd { margin: 0; color: var(--muted); }
.job-row .marks { margin-top: 14px; }
.job-row .tile-rating { margin-top: 12px; }
.job-row .result-note { margin: 8px 0 0; }
.job-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-left: clamp(28px, 4.5vw, 72px); border-left: 1px solid #3b203940; }
.job-pay { font-size: 16px; }
.job-pay strong { display: block; margin-bottom: 6px; font-size: clamp(40px, 4vw, 58px); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--accent-text); }
.job-pay small { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.job-actions { display: flex; align-items: center; gap: 10px; }
.job-actions .button { flex: 1 1 auto; min-width: 0; min-height: 52px; gap: 16px; padding-inline: 20px; font-size: 16px; white-space: nowrap; }
.job-actions .heart { position: static; flex: 0 0 auto; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: var(--button-radius); background: var(--white); }
.job-actions .heart:hover { border-color: var(--accent-text); }

/* Details als Seitenfenster */
#detail.detail-panel { width: min(820px, 100vw); background: var(--paper); }
#detail .detail-inner { padding: 0; }
.sheet-bar { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px clamp(20px, 4vw, 48px); background: var(--paper); border-bottom: 1px solid var(--line); }
.sheet-bar button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
.sheet-bar button:hover { color: var(--accent-text); }
.sheet-bar .icon { width: 20px; height: 20px; }
.sheet-back .icon { transform: scaleX(-1); }
.sheet-close .icon { width: 24px; height: 24px; transform: rotate(45deg); }
.sheet-head { padding: 32px clamp(20px, 4vw, 48px) 30px; background: var(--mint); }
.sheet-head .detail-trail { padding-right: 0; margin-bottom: 16px; }
.sheet-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.sheet-kind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 16px; font-weight: 600; color: var(--accent-text); }
.sheet-kind .icon { width: 16px; height: 16px; }
#detail .sheet-head h2 { margin: 12px 0 0; font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -.05em; line-height: 1.05; }
#detail .sheet-head .detail-also { margin: 12px 0 0; font-size: 17px; color: var(--ink); }
.sheet-pay { padding: 22px clamp(20px, 4vw, 48px); background: var(--plum); color: #fff; }
.sheet-pay p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: clamp(18px, 2vw, 24px); }
.sheet-pay strong { font-size: clamp(38px, 4.4vw, 54px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.sheet-pay small { display: block; margin-top: 8px; font-size: 14px; color: var(--on-dark-muted); }
.sheet-body { padding: 0 clamp(20px, 4vw, 48px) 48px; }
#detail .sheet-body .detail-block { margin: 0; padding: 26px 0; border-bottom: 1px solid var(--plum); }
#detail .sheet-body .detail-block h3 { margin-bottom: 10px; font-size: 15px; letter-spacing: .05em; }
#detail .sheet-body .detail-block p { font-size: 17px; line-height: 1.65; }
#detail .sheet-body .detail-way { background: none; border-radius: 0; }
#detail .sheet-body .sheet-paynote p { font-size: 15px; line-height: 1.65; }
.detail-block p.fussnote, #detail .sheet-body .detail-block p.fussnote { font-size: 12px; line-height: 1.6; }
#detail .sheet-body .result-note { font-size: 13px; line-height: 1.6; }
.sheet-cta { display: flex; width: 100%; min-height: 68px; margin-top: 30px; padding: 18px 28px; font-size: 20px; }
.sheet-cta .icon { width: 24px; height: 24px; }
#detail .detail-share { margin-top: 18px; }
#detail .detail-vote { margin-top: 28px; }
#detail .detail-next { margin-top: 32px; }
.compare-panel .detail-inner { padding: 28px 32px 40px; }

/* Berufe von A bis Z */
.az { padding-top: 40px; }
.az-letters { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: nowrap; gap: 0; margin: 0 0 40px; overflow-x: auto; scrollbar-width: none; background: var(--plum); border-radius: 4px; }
.az-letters::-webkit-scrollbar { display: none; }
.az-letters a { flex: 1 0 auto; display: grid; place-items: center; min-width: 46px; width: auto; height: 58px; border: 0; border-radius: 0; background: none; color: #fff; font-size: 18px; font-weight: 500; }
.az-letters a:hover { background: var(--plum-hover); color: #fff; border-color: transparent; }
.az-letters a[aria-current="true"] { background: var(--accent-text); }
.az-group { display: grid; grid-template-columns: clamp(64px, 9vw, 128px) minmax(0, 1fr); gap: 0 24px; margin: 0; padding-block: 34px; border-top: 2px solid var(--plum); scroll-margin-top: 76px; }
.az-group:first-of-type { padding-top: 0; border-top: 0; }
.az-group h2 { margin: 0; font-size: clamp(48px, 5vw, 76px); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--accent-text); }
.az-group ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.az-group li { padding: 0; font-size: inherit; border-bottom: 1px solid var(--line); }
.az-group li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-weight: 500; }
.az-group li a:hover { color: var(--accent-text); }
.az-group li a > span { font-size: inherit; color: inherit; }
.az-group li .az-name { display: block; font-size: 18px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }
.az-group li a:hover .az-name { color: var(--accent-text); }
.az-group li a small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--muted); }
.az-group li a .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent-text); transition: transform var(--motion); }
.az-group li a:hover .icon { transform: translateX(3px); }

@media (max-width: 1000px) {
  .az-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .job-hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: 34px 40px; }
  .job-hero-lead { font-size: 16px; }
  .job-row { grid-template-columns: minmax(0, 1fr); padding-block: 26px; }
  .job-side { margin-top: 18px; padding-left: 0; border-left: 0; }
  .job-desc { font-size: 16px; }
  .job-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .job-facts dd { margin-bottom: 8px; }
  .lane-tabs-inner { justify-content: flex-start; width: 100%; padding-inline: 8px; }
  .lane-tab { min-height: 58px; font-size: 16px; padding-inline: 18px; }
  .lane-tab::after { bottom: 10px; left: 12px; right: 12px; }
}
@media (max-width: 640px) {
  .az-group { grid-template-columns: minmax(0, 1fr); padding-block: 26px; }
  .az-group h2 { margin-bottom: 6px; font-size: 44px; }
  .az-group ul { grid-template-columns: minmax(0, 1fr); }
  .sheet-cta { min-height: 60px; font-size: 18px; }
}

/* Schrittanzeige: Beruf eingeben, Wege ansehen, Fahrplan mitnehmen (Startseite, Berufssuche) */
.steps-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.steps-path li { display: inline-flex; align-items: center; gap: 8px; }
.steps-path li + li::before { content: ''; display: block; width: 20px; height: 1.5px; margin-right: 4px; background: currentColor; opacity: .45; }
.steps-path span { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 13px; }
.steps-path [aria-current="step"] { color: var(--ink); }
.steps-path [aria-current="step"] span { background: var(--plum); border-color: var(--plum); color: #fff; }
.job-hero-copy .steps-path { margin: 0 0 22px; }
.hero-inner .steps-path { margin: -6px 0 26px; }
.sheet-step { margin-top: 30px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.sheet-step + .sheet-cta { margin-top: 10px; }

/* Startseite: Themen als Zeilen, die direkt zur Themenseite führen */
.topic-link { display: flex; align-items: center; gap: 18px; min-height: 97px; padding-block: 18px; }
.topic-link-text { display: grid; gap: 4px; min-width: 0; }
.topic-link-text > span { font-size: 23px; font-weight: 500; letter-spacing: -.8px; transition: color var(--motion); }
.topic-link-text small { max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.topic-link .topic-toggle .icon { transition: transform var(--motion); }
.topic-link:hover .topic-toggle, .topic-link:focus-visible .topic-toggle { background: var(--accent); border-color: var(--accent); }
.topic-link:hover .topic-link-text > span { color: var(--accent-text); }
.topic-link:hover .topic-toggle .icon { transform: translateX(2px); }
@media (max-width: 640px) {
  .topic-link-text > span { font-size: 19px; }
}
@media (max-width: 560px) {
  .steps-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; font-size: 13px; line-height: 1.3; text-align: center; }
  .steps-path li { position: relative; display: flex; flex-direction: column; gap: 6px; }
  .steps-path li + li::before { position: absolute; top: 13px; right: calc(50% + 19px); width: calc(100% - 38px); margin: 0; }
}

/* Hinweis "Angaben ohne Gewähr" unter Abschnitten mit Gesetzes-, Förder- oder Zeitangaben */
.prose p.prose-note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* Anzeigen von Partnern (anzeigen.js): Stellen und Kurse neben dem passenden Weg, als Anzeige gekennzeichnet */
.ad-slot[hidden], .ad-page[hidden] { display: none; }
#detail .sheet-body .ad-slot { padding: 26px 0; border-bottom: 1px solid var(--plum); scroll-margin-top: 76px; }
.ad-page { padding-top: 8px; padding-bottom: 40px; }
.ad-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.ad-head h3 { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.ad-page .ad-head h3 { font-size: 22px; font-weight: 500; letter-spacing: -.6px; text-transform: none; color: var(--ink); }
.ad-plz { font-size: 13px; color: var(--muted); }
.ad-change { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ad-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ad-page .ad-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ad-link { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color var(--motion); }
.ad-link:hover, .ad-link:focus-visible { border-color: var(--accent-text); }
.ad-top { display: flex; gap: 8px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ad-label { padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; }
.ad-title { font-size: 17px; font-weight: 600; line-height: 1.35; }
.ad-firm { font-size: 14px; color: var(--muted); }
.ad-text { font-size: 14px; line-height: 1.6; }
.ad-for { font-size: 13px; color: var(--muted); }
.ad-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.ad-go .icon { width: 16px; height: 16px; }
.ad-plz-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-width: 420px; margin-bottom: 14px; }
.ad-plz-form label { font-size: 14px; font-weight: 600; }
.ad-plz-row { display: flex; gap: 8px; }
.ad-plz-row input { flex: 1 1 0; width: 0; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #6c9189; border-radius: 8px; font: inherit; font-size: 16px; letter-spacing: .08em; }
.ad-plz-row .button { flex: 0 0 auto; min-height: 48px; padding: 0 20px; gap: 0; justify-content: center; }
.ad-plz-hint { font-size: 12px; color: var(--muted); }
.ad-plz-error { font-size: 13px; color: #973b4b; }
#detail .sheet-body .ad-note, .ad-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Anzeigen sichtbar machen: Hinweis oben im Detailfenster und freiwillige PLZ über der Ergebnisliste */
.ad-hint-row[hidden], .ad-plz-bar[hidden] { display: none; }
.ad-hint-row { margin-top: 14px; }
.ad-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-text); cursor: pointer; text-align: left; }
.ad-hint .ad-label, .ad-bar-set .ad-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ad-hint-text { display: inline-flex; align-items: center; gap: 6px; }
.ad-hint .icon { width: 16px; height: 16px; flex: 0 0 auto; transform: rotate(90deg); }
.ad-hint:hover .ad-hint-text, .ad-hint:focus-visible .ad-hint-text { text-decoration: underline; text-underline-offset: 2px; }
.ad-plz-bar { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); }
.ad-bar-form { max-width: 520px; margin: 0; }
.ad-bar-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.ad-plz-bar.is-set { padding: 0; border: 0; background: none; margin: -6px 0 18px; }
/* PLZ-Feld oben im Kopf der Berufssuche, direkt unter „Dein heutiger Beruf“ */
.job-hero-side .ad-plz-bar { margin: 18px 0 0; padding: 0; border: 0; background: none; }
.job-hero-side .ad-plz-bar.is-set { margin: 14px 0 0; }
.job-hero-side .ad-bar-form label { font-size: 13px; font-weight: 600; }
.job-hero-side .ad-plz-row input { background: var(--white); }
/* Anzeigen auf den Themenseiten: die Textgestaltung des Artikels (Listen, unterstrichene Links, große Absätze) nicht übernehmen */
.prose .ad-slot { margin-top: 36px; }
.prose .ad-head h3 { margin: 0; font-size: 15px; line-height: 1.4; letter-spacing: .05em; font-weight: 700; }
.prose ul.ad-list { padding-left: 0; font-size: inherit; line-height: inherit; }
.prose .ad-list li + li { margin-top: 0; }
.prose a.ad-link:not(.button):not(.text-link) { color: var(--ink); text-decoration: none; }
.prose .ad-link:hover .ad-title { text-decoration: underline; text-underline-offset: 3px; }
.prose p.ad-plz, .prose p.ad-plz-hint { font-size: 13px; line-height: 1.5; }
.prose p.ad-note { font-size: 12px; line-height: 1.5; }
.prose p.ad-plz-error { font-size: 13px; line-height: 1.5; }
.prose .ad-plz-form label { font-size: 14px; }
/* Anzeigen-Karte: Logo oder Anfangsbuchstaben, Merkmale als Kästchen */
.ad-headrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.ad-headtext { display: grid; gap: 3px; min-width: 0; }
.ad-logo { display: grid; place-items: center; min-width: 56px; max-width: 120px; height: 56px; padding: 6px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.ad-logo img { display: block; max-width: 106px; max-height: 42px; object-fit: contain; }
.ad-logo-text { width: 56px; padding: 0; border-color: transparent; background: var(--mint); color: var(--accent-text); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.ad-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ad-fact { padding: 4px 10px; border-radius: 999px; background: var(--mint); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.ad-link .ad-text { margin-top: 4px; }
.ad-go { justify-self: start; }
@media (max-width: 420px) { .ad-headrow { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ad-logo { justify-self: start; min-width: 46px; max-width: 120px; height: 46px; padding: 5px; } .ad-logo img { max-width: 108px; max-height: 34px; } .ad-logo-text { width: 46px; font-size: 15px; } }
.ad-title, .ad-firm { overflow-wrap: anywhere; }
/* Markierung in der Berufsliste: dieser Beruf hat eine passende Anzeige */
.ad-mark-slot[hidden] { display: none; }
.ad-mark-slot { margin: 8px 0 2px; }
.ad-mark { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 6px; border: 1px solid var(--accent); border-radius: 999px; background: var(--mint); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ad-mark .ad-label { padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--white); }
.ad-mark .icon { width: 15px; height: 15px; }
.ad-mark:hover, .ad-mark:focus-visible { background: var(--white); }
/* Knopf „Meinen Standort verwenden“ unter dem PLZ-Feld */
.ad-geo { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 40px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ad-geo:disabled { opacity: .6; cursor: progress; }
.ad-geo-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* Einwilligungshinweis für Google Analytics (inc/einwilligung.php, einwilligung.js): schmale Leiste am unteren Rand,
   die Seite bleibt bedienbar. Farben wie auf hausbewertung.de (Vorlage cookie-einwilligung) in festen px; nur die
   Schrift kommt von der Seite. „Nur notwendige Cookies“ nie kleiner oder blasser machen als die anderen Knöpfe. */
.ew-leiste { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; justify-content: center; pointer-events: none; }
.ew-karte { position: relative; width: 100%; max-width: 1120px; max-height: min(70vh, 560px); overflow-y: auto; padding: 16px 52px 16px 20px; border-radius: 14px; background: #fff; color: #0f1233; font-size: 16px; line-height: normal; text-align: left; box-shadow: 0 1px 3px rgba(5, 8, 40, .06), 0 14px 40px rgba(5, 8, 40, .22); pointer-events: auto; transition: opacity .22s cubic-bezier(.2, .8, .3, 1), translate .22s cubic-bezier(.2, .8, .3, 1); }
@starting-style { .ew-karte { opacity: 0; translate: 0 14px; } }
.ew-frage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; }
.ew-karte .ew-titel { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: normal; color: #0f1233; }
.ew-karte .ew-titel:focus { outline: none; }
.ew-karte .ew-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: #5a6084; }
.ew-karte .ew-link { color: #0f1233; text-decoration: underline; text-underline-offset: 2px; }
.ew-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ew-frage .ew-knoepfe { flex-direction: column; flex-wrap: nowrap; width: 220px; }
.ew-karte button { font: inherit; transition: background-color .15s ease, transform .15s ease; }
.ew-karte button:active { transform: translateY(1px); }
.ew-karte .ew-knopf { min-height: 42px; padding: 10px 16px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; cursor: pointer; }
.ew-karte .ew-knopf-voll { background: #0f1233; color: #fff; }
.ew-karte .ew-knopf-voll:hover { background: #242a63; }
.ew-karte .ew-knopf-rand { background: #fff; color: #0f1233; box-shadow: inset 0 0 0 1.5px #0f1233; }
.ew-karte .ew-knopf-rand:hover { background: #eef0f8; }
.ew-karte .ew-zu { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #5a6084; cursor: pointer; }
.ew-karte .ew-zu:hover { background: #eef0f8; color: #0f1233; }
.ew-karte .ew-zu .icon { width: 20px; height: 20px; transform: rotate(45deg); }
.ew-karte .ew-abbrechen { padding: 6px 8px; border: 0; background: transparent; color: #5a6084; font-size: 14px; line-height: normal; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ew-karte .ew-abbrechen:hover { color: #0f1233; }
.ew-auswahl .ew-text { margin-bottom: 12px; }
.ew-zwecke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.ew-zweck { padding: 12px 14px; border: 1px solid #e6e8f3; border-radius: 10px; }
.ew-zweck-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ew-zweck-name { font-size: 15px; font-weight: 600; color: #0f1233; }
label.ew-zweck-name { cursor: pointer; }
.ew-karte .ew-zweck-text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #5a6084; }
.ew-zweck-text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #0f1233; }
.ew-schalter { position: relative; flex-shrink: 0; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: #c9cddf; -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .15s ease; }
.ew-schalter:checked { background: #3b5bfd; }
.ew-schalter:disabled { cursor: default; opacity: .55; }
.ew-schalter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(5, 8, 40, .3); transition: transform .15s ease; }
.ew-schalter:checked::after { transform: translateX(18px); }
.ew-karte :focus-visible { outline: 2px solid #3b5bfd; outline-offset: 3px; }
.ew-karte .ew-link:focus-visible { border-radius: 6px; }
@media (max-width: 760px) {
  .ew-leiste { left: 8px; right: 8px; bottom: 8px; }
  .ew-karte { padding: 14px 14px 14px; }
  .ew-karte .ew-titel { padding-right: 36px; }
  .ew-frage { grid-template-columns: minmax(0, 1fr); }
  .ew-knoepfe, .ew-frage .ew-knoepfe { flex-direction: row; flex-wrap: wrap; width: auto; justify-content: stretch; }
  .ew-knoepfe .ew-knopf { flex: 1 1 auto; }
  .ew-zwecke { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ew-karte, .ew-karte button, .ew-schalter, .ew-schalter::after { transition: none; } }
/* Knopf „Einwilligung widerrufen“ im Abschnitt Cookies der Datenschutzerklärung */
.einwilligung-widerruf { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Startseite: Kopfbereich nach dem Entwurf vom 13.10.2026. Foto rechts in einer großen Rundung mit hellem Saum,
   zweizeilige Überschrift, breites Suchfeld, das ins Foto hineinragt, darunter die drei Schritte.
   Unter 1100 px steht das Foto unter dem Suchfeld und ist oben gerundet. */
.hero { position: relative; display: block; overflow: hidden; min-height: clamp(560px, 44vw, 780px); background: var(--mint); isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(48%, 880px); background: #f3fcf9; clip-path: ellipse(83% 77% at 84% 42%); }
.hero-photo { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: min(48%, 880px); margin: 0; clip-path: ellipse(78% 72% at 84% 42%); }
.hero-photo::after { content: none; }
.hero-photo img { object-position: 64% 30%; }
.hero-inner { position: relative; z-index: 2; max-width: none; justify-self: auto; container-type: normal; padding: clamp(72px, 7.5vw, 132px) var(--gutter) clamp(56px, 5.5vw, 96px); padding-left: max(var(--gutter), calc((100% - var(--content-width)) / 2)); }
.hero h1 { font-size: clamp(44px, 4.6vw, 70px); line-height: 1.04; letter-spacing: -.045em; margin-bottom: 24px; }
.hero-line { white-space: nowrap; }
.hero-description { max-width: 30em; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.6; margin-bottom: 0; }
.hero .search-area { width: min(1160px, 82vw); margin-top: clamp(30px, 3vw, 48px); }
.hero .search-field { gap: 18px; min-height: 80px; padding: 10px 10px 10px 26px; border: 0; border-radius: 18px; box-shadow: 0 26px 60px -24px rgba(28, 52, 48, .32), 0 2px 8px rgba(28, 52, 48, .06); }
.hero .search-field > .icon { display: block; width: 28px; height: 28px; flex: 0 0 auto; }
.hero .search-field textarea { height: 40px; padding: 6px 0; overflow: hidden; font-size: 18px; line-height: 28px; }
.hero .search-field textarea::placeholder { font-size: inherit; }
.hero .search-submit { width: 62px; height: 62px; border-radius: 12px; }
.hero .search-submit .icon { width: 26px; height: 26px; }
.hero .search-response { width: 100%; }
.hero .steps-path { margin-top: clamp(26px, 2.6vw, 40px); font-size: 15px; }
@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero::before { content: none; }
  .hero-inner { padding: 48px var(--gutter) 36px; }
  .hero h1 { font-size: clamp(36px, 7.4vw, 72px); }
  .hero .search-area { width: 100%; }
  .hero-photo { position: relative; width: 100%; height: clamp(300px, 54vw, 480px); clip-path: ellipse(120% 100% at 50% 100%); }
  .hero-photo img { object-position: 60% 28%; }
}
@media (max-width: 680px) {
  .hero-inner { padding: 40px var(--gutter) 30px; }
  .hero h1 { font-size: clamp(34px, 9vw, 52px); margin-bottom: 18px; }
  .hero-line { white-space: normal; }
  .hero-description { font-size: 16px; }
  .hero .search-field { min-height: 64px; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 14px; }
  .hero .search-field > .icon { display: none; }
  .hero .search-field textarea { font-size: 16px; }
  .hero .search-submit { width: 50px; height: 50px; border-radius: 10px; }
  .hero .steps-path { font-size: 13px; }
  .hero-photo { height: 320px; clip-path: ellipse(150% 100% at 50% 100%); }
}

/* Themen-Menü wie auf arbeitnehmer.de: am Desktop ein großes Feld mit allen Themen, im mobilen Menü aufklappbar. Markup in inc/kopf.php. */
.mega-toggle { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 14px 0; background: none; }
.mega-toggle::after { content: ''; position: absolute; left: 0; right: 21px; bottom: 8px; height: 1px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; transition: transform var(--motion); }
.mega-toggle:hover::after, .mega-toggle.is-current::after, .mega-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.mega-toggle .icon { width: 14px; height: 14px; transition: transform var(--motion); }
.mega-toggle[aria-expanded="true"] .icon { transform: rotate(45deg); }
/* Schatten plus leichte Abdunklung der Seite; clip-path schneidet oberhalb ab, die Kopfzeile bleibt hell. */
.mega-menu { position: absolute; top: calc(100% - 10px); left: 0; right: 0; max-height: calc(100vh - 110px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 30px 60px -30px #3b203966, 0 0 0 100vmax #3b20392e; clip-path: inset(0 -100vmax -100vmax); font-size: 14px; font-weight: 400; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
.mega-menu.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 28px; }
.mega-area { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 22px 18px; background: var(--white); border: 1px solid var(--ink); border-radius: var(--card-radius); }
.mega-title { margin-bottom: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.mega-area ul, .mobile-area ul { list-style: none; margin: 0; padding: 0; }
.mega-area li a { display: inline-block; padding: 4px 0; }
.mega-title:hover, .mega-area li a:hover { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mega-more, .mega-foot a { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.mega-more { margin-top: auto; padding-top: 12px; }
.mega-more .icon, .mega-foot .icon { width: 16px; height: 16px; transition: transform var(--motion); }
.mega-more:hover .icon, .mega-foot a:hover .icon { transform: translateX(4px); }
.mega-foot { display: flex; align-items: center; gap: 36px; padding: 16px 28px 17px; background: var(--mint); border-top: 1px solid var(--line); }
@media (max-width: 1100px) {
  .mega-grid { gap: 10px; padding: 20px; }
  .mega-area { padding: 18px 16px 16px; }
  .mega-foot { padding-inline: 20px; }
}
@media (max-width: 900px) {
  .mobile-nav { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-label { margin: 4px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
  .mobile-area { border-bottom: 1px solid var(--line); }
  .mobile-area summary { display: flex; align-items: center; gap: 16px; min-height: 58px; list-style: none; cursor: pointer; font-size: 19px; letter-spacing: -.6px; }
  .mobile-area summary::-webkit-details-marker { display: none; }
  .mobile-area .topic-toggle { width: 30px; height: 30px; }
  .mobile-area[open] .topic-toggle, .mobile-area summary:hover .topic-toggle { background: var(--accent); border-color: var(--accent); }
  .mobile-area[open] .topic-toggle .icon { transform: rotate(45deg); }
  .mobile-area li a { display: block; padding: 9px 0; font-size: 15px; }
  .mobile-area .mega-more { margin: 6px 0 20px; }
}
.finder-hinweis-oben, .match-trenner { margin: 0 0 18px; padding: 16px 18px; border-radius: var(--card-radius); background: var(--mint); font-size: 15px; line-height: 1.6; }
.match-trenner { list-style: none; margin-top: 18px; }

/* Newsletter in der Fußzeile (inc/fuss.php): Feld und Knopf in einer Zeile, darunter der Hinweis zur Einwilligung. */
.footer-newsletter { padding-block: 28px 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.newsletter-title { display: block; margin-bottom: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.4px; }
.newsletter-row { display: flex; gap: 8px; max-width: 560px; }
.newsletter-row input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid #c8e0d9; border-radius: var(--field-radius); background: var(--white); font-size: 15px; transition: box-shadow var(--motion), border-color var(--motion); }
.newsletter-row input:focus { outline: 0; border-color: var(--accent-text); box-shadow: 0 0 0 3px #087d7740; }
.newsletter-row .button { min-height: 52px; }
.newsletter-note { max-width: 560px; margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.newsletter-note a { text-decoration: underline; text-underline-offset: 3px; }
.newsletter-status { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.newsletter-status:empty { display: none; }
.newsletter-status.is-error { color: var(--error); }
@media (max-width: 680px) {
  .footer-newsletter { padding-block: 24px 26px; }
  .newsletter-row { flex-direction: column; }
  .newsletter-row .button { width: 100%; }
}