/* G Power – Online-Gesundheitscheck 2026 (Seite 3399, Formular 3397, js/gp-check.js, inc/gp-gesundheitscheck.php). Gestaltung wie die freigegebene Vorschau (Version 2). Farben und Radien aus den Tokens in style.css. Wiederverwendet: .subline.upper, .hl-l/.hl-m/.hl-xs, .button-liv.primary/.primary-2, .small.grey, .faq-minimal. Geladen nach style.css über gpower_zusatz_styles (inc/gp-design.php). */ #top #gp-check { --gc-gruen: #2E8B57; --gc-gelb: #E0A800; --gc-rot: #C8102E; --gc-gruen-hell: #E8F5EE; --gc-gelb-hell: #FFF6DB; --gc-rot-hell: #FDECEE; --gc-fokus: 0 0 0 3px #FFFFFF, 0 0 0 6px #0B0B0B; color: var(--black); } #top #gp-check *, #top #gp-check *::before, #top #gp-check *::after {box-sizing: border-box;} #top #gp-check p {margin: 0;} #top #gp-check :focus-visible {outline: none; box-shadow: var(--gc-fokus); border-radius: 12px;} #top #gp-check [tabindex="-1"]:focus, #top #gp-check [tabindex="-1"]:focus-visible {box-shadow: none; outline: none;} #top .gc-cf7[hidden] {display: none !important;} /* ---------- Ohne JavaScript: Hinweis statt Startknopf ---------- */ #top #gp-check:not(.gc-js) .gc-nurjs {display: none;} #top #gp-check.gc-js .gc-nojs {display: none;} /* ---------- Karte ---------- */ #top #gp-check .gc-karte-check {max-width: 780px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;} #top #gp-check .gc-karte-check--ergebnis {max-width: 980px; background: transparent; border: 0; box-shadow: none; overflow: visible; border-radius: 0;} #top #gp-check .gc-innen {padding: 40px 48px 44px; margin: 0;} #top #gp-check .gc-lead {margin-top: 12px; font-size: 20px; line-height: 1.55; font-weight: 300 !important; color: var(--grey);} #top #gp-check .gc-klein {font-size: 15px; line-height: 1.55; color: var(--grey);} #top #gp-check .gc-abstand {margin-top: 16px;} #top #gp-check .gc-titel {margin: 0; font-size: 44px; line-height: 1.08; letter-spacing: -0.035em !important;} #top #gp-check h2.hl-m, #top #gp-check h3.hl-m {margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -0.03em !important;} #top #gp-check h3.hl-xs {margin: 0; font-size: 22px; line-height: 1.3;} #top #gp-check .subline.upper {margin-bottom: 14px;} /* Knöpfe: .button-liv.primary aus style.css, hier nur Abstand und Pfeil */ #top #gp-check .button-liv {margin-top: 0;} #top #gp-check .button-liv button {border: 0; background: transparent; gap: 10px; font-family: 'Poppins', sans-serif;} #top #gp-check .button-liv button[disabled] {cursor: progress; opacity: .75;} #top #gp-check .button-liv svg {width: 20px; height: 20px; flex: none;} #top #gp-check .gc-zurueck {display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 0; padding: 0 6px; border: 0; background: transparent; color: var(--grey); font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; cursor: pointer;} #top #gp-check .gc-zurueck:hover {color: var(--black);} #top #gp-check .gc-zurueck svg {width: 20px; height: 20px;} #top #gp-check .gc-linkknopf {margin: 0; padding: 4px 0; border: 0; background: none; color: var(--black); font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--secondary); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer;} /* ---------- Intro ---------- */ #top #gp-check .gc-intro {display: grid; grid-template-columns: 1.2fr .8fr;} #top #gp-check .gc-intro__text {padding: 44px 48px;} #top #gp-check .gc-intro__bild {min-height: 100%; background-color: var(--default); background-size: cover; background-position: center;} #top #gp-check .gc-nutzen {display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none;} #top #gp-check .gc-nutzen li {display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 17px; line-height: 1.5;} #top #gp-check .gc-nutzen li::before {content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--secondary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") no-repeat center / 14px;} #top #gp-check .gc-fakten {display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 22px;} #top #gp-check .gc-fakten span {padding: 6px 14px; border-radius: 999px; background: var(--default); font-size: 15px; font-weight: 600;} #top #gp-check .gc-datenschutz-kurz {display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; font-size: 14px; line-height: 1.55; color: var(--grey);} #top #gp-check .gc-datenschutz-kurz svg {flex: none; width: 20px; height: 20px; margin-top: 1px;} /* ---------- Fortschritt ---------- */ #top #gp-check .gc-fortschritt {padding: 20px 48px 0;} #top #gp-check .gc-fortschritt__kopf {display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--grey);} #top #gp-check .gc-fortschritt__bereich {font-size: 13px; letter-spacing: .16em; text-transform: uppercase;} #top #gp-check .gc-balken {height: 6px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: var(--line);} #top #gp-check .gc-balken span {display: block; height: 100%; border-radius: 3px; background: var(--gradient); transition: width .35s ease;} /* ---------- Frage ---------- */ #top #gp-check .gc-frage__titel {margin: 0; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em;} #top #gp-check .gc-frage__hinweis {margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--grey);} #top #gp-check .gc-optionen {display: grid; gap: 12px; margin-top: 26px;} #top #gp-check .gc-option {display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; margin: 0; padding: 14px 20px; border: 1.5px solid var(--field); border-radius: 18px; background: var(--white); color: var(--black); font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;} #top #gp-check .gc-option:hover {border-color: var(--black); background: var(--default);} #top #gp-check .gc-option__punkt {flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--field); border-radius: 50%; background: var(--white);} #top #gp-check .gc-option[aria-checked="true"] {border-color: var(--black); background: var(--secondary-light); box-shadow: inset 0 0 0 1px var(--black);} #top #gp-check .gc-option[aria-checked="true"] .gc-option__punkt {border-color: var(--black); background: var(--black);} #top #gp-check .gc-option[aria-checked="true"] .gc-option__punkt::after {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary);} #top #gp-check .gc-sensibel {display: flex; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: var(--radius-small); background: var(--default); font-size: 14px; line-height: 1.5; color: var(--grey);} #top #gp-check .gc-sensibel svg {flex: none; width: 20px; height: 20px;} #top #gp-check .gc-leiste {display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; margin-top: 28px;} /* ---------- Teaser ---------- */ #top #gp-check .gc-teaser__liste {display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none;} #top #gp-check .gc-teaser__liste li {display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 20px; border-radius: var(--radius-small); background: var(--default); font-weight: 600;} #top #gp-check .gc-verdeckt {display: inline-flex; gap: 6px; filter: blur(3px);} #top #gp-check .gc-verdeckt i {display: block; width: 16px; height: 16px; border-radius: 50%;} #top #gp-check .gc-teaser__empf {margin-top: 14px; padding: 18px 20px; border: 1.5px dashed var(--field); border-radius: var(--radius-small);} #top #gp-check .gc-verdeckt-text {font-weight: 600; filter: blur(5px); user-select: none;} /* ---------- Kontakt ---------- */ #top #gp-check .gc-feld {margin-top: 22px;} #top #gp-check .gc-feld[hidden] {display: none;} #top #gp-check .gc-feld label, #top #gp-check .gc-label {display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--black);} #top #gp-check .gc-optional {font-weight: 400; color: var(--grey);} #top #gp-check .gc-feld input[type=text], #top #gp-check .gc-feld input[type=email], #top #gp-check .gc-feld input[type=tel] {width: 100%; min-height: 56px; margin: 0; padding: 0 18px; border: 1.5px solid var(--field); border-radius: 14px; background: var(--white); color: var(--black); font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 1.4; box-shadow: none;} #top #gp-check .gc-feld input:focus-visible {border-color: var(--black);} #top #gp-check .gc-feld input[aria-invalid="true"] {border-color: var(--gc-rot);} #top #gp-check .gc-hilfe {margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--grey);} #top #gp-check .gc-fehler {margin-top: 6px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--gc-rot);} #top #gp-check .gc-fehler[hidden] {display: none;} #top #gp-check .gc-chips {display: flex; flex-wrap: wrap; gap: 10px;} #top #gp-check .gc-chip {min-height: 48px; margin: 0; padding: 0 18px; border: 1.5px solid var(--field); border-radius: 999px; background: var(--white); color: var(--black); font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; cursor: pointer;} #top #gp-check .gc-chip[aria-checked="true"] {border-color: var(--black); background: var(--black); color: var(--white);} #top #gp-check .gc-einwilligung {display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-small); background: var(--white);} #top #gp-check .gc-einwilligung--pflicht {background: var(--default);} #top #gp-check .gc-einwilligung[aria-invalid="true"] {border-color: var(--gc-rot);} #top #gp-check .gc-einwilligung input[type=checkbox] {flex: none; width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--black); cursor: pointer;} #top #gp-check .gc-einwilligung label {margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 400; color: var(--black); cursor: pointer;} #top #gp-check .gc-einwilligung a {color: var(--black); text-decoration: underline; text-underline-offset: 3px;} #top #gp-check .gc-pf {font-weight: 600;} #top #gp-check .gc-meldung {margin-top: 20px; padding: 14px 18px; border-radius: var(--radius-small); background: var(--gc-rot-hell); color: #5E0715; font-size: 15.5px; line-height: 1.5;} #top #gp-check .gc-meldung[hidden] {display: none;} #top #gp-check .gc-meldung a {color: inherit;} /* ---------- Ergebnis ---------- */ #top #gp-check .gc-erg-kopf {padding: 8px 0 28px;} #top #gp-check .gc-ampeln {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;} #top #gp-check .gc-ampel {display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow-light);} #top #gp-check .gc-ampel__kopf {display: flex; align-items: center; gap: 12px;} #top #gp-check .gc-ampel__licht {flex: none; width: 18px; height: 18px; border-radius: 50%;} #top #gp-check .gc-ampel__stufe {display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;} #top #gp-check .st-gruen .gc-ampel__licht {background: var(--gc-gruen);} #top #gp-check .st-gruen .gc-ampel__stufe {background: var(--gc-gruen-hell); color: #1E5E3A;} #top #gp-check .st-gelb .gc-ampel__licht {background: var(--gc-gelb);} #top #gp-check .st-gelb .gc-ampel__stufe {background: var(--gc-gelb-hell); color: #6B4F00;} #top #gp-check .st-rot .gc-ampel__licht {background: var(--gc-rot);} #top #gp-check .st-rot .gc-ampel__stufe {background: var(--gc-rot-hell); color: #8E0B20;} #top #gp-check .gc-ampel p {font-size: 16px; line-height: 1.55;} #top #gp-check .gc-ampel .gc-zusatz {padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; color: var(--grey);} #top #gp-check .gc-empf {display: grid; grid-template-columns: 1.25fr .75fr; margin-top: 28px; overflow: hidden; border-radius: var(--radius); background: var(--black); color: var(--white);} #top #gp-check .gc-empf__text {padding: 40px 44px;} #top #gp-check .gc-empf .subline.upper {color: var(--light-grey);} #top #gp-check .gc-empf h3 {color: var(--white);} #top #gp-check .gc-empf p {margin-top: 14px; color: #E6E6EA;} #top #gp-check .gc-empf .gc-empf__darum {margin-top: 22px; font-weight: 600 !important; color: var(--white);} #top #gp-check .gc-empf__gruende {display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none;} #top #gp-check .gc-empf__gruende li {display: flex; gap: 12px; margin: 0; font-size: 17px; line-height: 1.5; color: var(--white);} #top #gp-check .gc-empf__gruende li::before {content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--secondary);} #top #gp-check .gc-empf__aktion {display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 40px 36px; background: var(--dark);} #top #gp-check .gc-empf__aktion .button-liv {width: 100%; margin: 0;} #top #gp-check .gc-empf__aktion .button-liv a {justify-content: center; width: 100%; padding: 12px 24px; text-align: center; white-space: normal;} #top #gp-check .gc-empf__aktion .button-liv.gc-hell {border-color: var(--white);} #top #gp-check .gc-empf__aktion .button-liv.gc-hell a {color: var(--white) !important;} #top #gp-check .gc-empf .gc-tel {margin: 0; font-size: 16px; line-height: 1.55; color: #E6E6EA;} #top #gp-check .gc-tel strong {display: block; font-size: 22px; letter-spacing: .01em;} #top #gp-check .gc-tel strong a {color: var(--white); font-weight: 600; text-decoration: none;} #top #gp-check .gc-bestaetigt {display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-small); background: var(--anthracite); color: var(--white); font-size: 15px; line-height: 1.5;} #top #gp-check .gc-bestaetigt svg {flex: none; width: 20px; height: 20px; margin-top: 2px;} #top #gp-check .gc-hinweis {margin-top: 20px; padding: 18px 22px; border-left: 4px solid var(--secondary); border-radius: var(--radius-small); background: var(--default); font-size: 16px; line-height: 1.55;} #top #gp-check .gc-intro .gc-hinweis {margin-top: 0;} #top #gp-check .gc-hinweis a {color: var(--black);} #top #gp-check .gc-zwei {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; align-items: start;} #top #gp-check .gc-zwei--eins {grid-template-columns: 1fr;} #top #gp-check .gc-karte {padding: 26px; border-radius: 22px; background: var(--default);} #top #gp-check .gc-karte .small {margin-top: 14px;} #top #gp-check .gc-schritte {display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: gcs;} #top #gp-check .gc-schritte li {display: flex; gap: 14px; margin: 0; font-size: 16px; line-height: 1.5; counter-increment: gcs;} #top #gp-check .gc-schritte li::before {content: counter(gcs); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--secondary); color: var(--black); font-size: 15px; font-weight: 600;} #top #gp-check .gc-fuss {margin-top: 28px; font-size: 14px; line-height: 1.6; color: var(--grey);} #top #gp-check .gc-quellen {margin-top: 16px; font-size: 14px; color: var(--grey);} #top #gp-check .gc-quellen summary {display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--black); cursor: pointer;} #top #gp-check .gc-quellen ol {margin: 6px 0 0; padding-left: 20px;} #top #gp-check .gc-quellen li {margin: 0 0 4px; font-size: 14px;} #top #gp-check .gc-neu {margin-top: 20px;} /* Kundenstimmen (Auswahl aus Google-Bewertungen, nur sichtbar, wenn in gp_gc_kundenstimmen() eingetragen) */ #top .gc-stimmen {display: grid; gap: 14px; margin-top: 14px;} #top .gc-stimme {margin: 0; padding: 18px; border-radius: 18px; background: var(--white);} #top .gc-stimme blockquote {margin: 0; padding: 0; border: 0;} #top .gc-stimme blockquote p {margin: 0; font-size: 16px; line-height: 1.55; font-style: italic; color: var(--black);} #top .gc-stimme figcaption {margin-top: 8px; font-size: 14px; color: var(--grey);} #top .gc-sterne {display: flex; gap: 2px; margin-bottom: 8px; color: var(--secondary);} #top .gc-sterne svg {display: block; width: 18px; height: 18px; fill: currentColor;} #top .gc-stimme {display: flex; flex-direction: column;} #top .gc-stimme figcaption {margin-top: auto; padding-top: 10px;} #top .gc-stimmen-fuss {margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--grey);} #top .gc-stimmen-fuss p {margin: 0 0 4px; font-size: 13px; line-height: 1.55; color: var(--grey);} #top .gc-stimmen-fuss a {color: var(--black); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;} #top .gc-stimmen-block {margin-top: 48px;} #top .gc-stimmen-block .gc-stimmen {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));} #top .gc-stimmen-block .gc-stimme {background: var(--white);} /* ---------- Seite 3399: Abschnitte unter dem Check ---------- */ #top .gc-seite-check {padding-top: 8px;} #top .flex_column.gc-text {float: none; width: 100%; max-width: 880px; margin-left: auto; margin-right: auto;} #top .gc-fusshinweis {margin-top: 40px;} #top .flex_column.gc-text h2.hl-m {margin: 40px 0 16px;} /* ---------- Mobil ---------- */ @media only screen and (max-width: 860px) { #top #gp-check .gc-intro {grid-template-columns: 1fr;} #top #gp-check .gc-intro__bild {order: -1; min-height: 180px;} #top #gp-check .gc-ampeln, #top #gp-check .gc-empf, #top #gp-check .gc-zwei {grid-template-columns: 1fr;} } @media only screen and (max-width: 600px) { #top #gp-check .gc-karte-check {border-radius: 22px;} #top #gp-check .gc-karte-check--ergebnis {border-radius: 0;} #top #gp-check .gc-innen, #top #gp-check .gc-intro__text {padding: 26px 20px 28px;} #top #gp-check .gc-fortschritt {padding: 18px 20px 0;} #top #gp-check .gc-titel {font-size: 32px;} #top #gp-check h2.hl-m, #top #gp-check h3.hl-m {font-size: 26px;} #top #gp-check .gc-lead {font-size: 18px;} #top #gp-check .gc-frage__titel {font-size: 23px;} #top #gp-check .gc-option {min-height: 60px; padding: 12px 16px; font-size: 17px;} #top #gp-check .gc-empf__text, #top #gp-check .gc-empf__aktion {padding: 28px 22px;} #top #gp-check .gc-leiste .button-liv {flex: 1 1 auto; width: auto;} #top #gp-check .gc-leiste .button-liv button {justify-content: center; width: 100%; padding: 0 20px;} } @media (prefers-reduced-motion: reduce) { #top #gp-check *, #top #gp-check *::before, #top #gp-check *::after {transition: none !important; animation: none !important; scroll-behavior: auto !important;} }