/*
Theme Name: Fuchs IT
Theme URI: https://fuchs-it.com
Author: Fuchs IT · Simon Fuchs
Author URI: https://fuchs-it.com
Description: Modernes, responsives WordPress-Theme für Fuchs IT mit automatisch angelegten Leistungs- und SEO-Seiten, WhatsApp-Kontakt und optionalen Besucherbenachrichtigungen.
Version: 1.0.41
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: fuchs-it
*/

:root {
  --ink: #111517;
  --muted: #6d706f;
  --line: #deded9;
  --paper: #f7f6f2;
  --soft: #efeee9;
  --gray: #8a8a8a;
  --green: #4fd48a;
  --white: #fff;
  --radius: 26px;
  --content-pad: clamp(24px, 5.5vw, 76px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.admin-bar .site-header {
  top: 32px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(17, 21, 23, 0.28);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  transform: translateY(-150%);
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: 78px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 246, 242, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header-inner {
  width: 100%;
  height: 100%;
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
}

.site-branding,
.site-branding .custom-logo-link {
  display: flex;
  align-items: center;
}

.logo,
.custom-logo-link {
  display: block;
  width: 154px;
}

.logo img,
.custom-logo {
  display: block;
  width: 100%;
  height: auto;
}

.primary-navigation {
  margin-left: auto;
}

.primary-navigation ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}

.primary-navigation a {
  font-size: 13px;
  font-weight: 650;
  transition: color 0.2s ease;
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item > a {
  color: var(--gray);
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.menu-toggle .icon {
  width: 17px;
  height: 17px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-dark {
  background: var(--ink);
  color: #fff;
}

.button-light {
  margin-top: 25px;
  background: #f0efea;
  color: var(--ink);
}

.button-outline {
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

.header-cta {
  margin-left: 38px;
  padding-inline: 22px;
}

.site-main {
  min-height: 60vh;
}

.grid-bg {
  background-image:
    linear-gradient(rgba(20, 24, 25, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 24, 25, 0.052) 1px, transparent 1px);
  background-size: 48px 48px;
}

.eyebrow,
.kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #aaa;
  box-shadow: 0 0 0 5px rgba(138, 138, 138, 0.12);
}

.hero {
  position: relative;
  min-height: 774px;
  padding: 102px var(--content-pad) 90px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(50px, 7vw, 104px);
  align-items: center;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -280px;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(138, 138, 138, 0.25);
  border-radius: 50%;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero h1,
.sub-hero h1,
.legal-page h1,
.generic-page h1 {
  font-weight: 650;
  letter-spacing: -0.065em;
}

.hero h1 {
  margin: 34px 0 35px;
  font-size: clamp(58px, 5.9vw, 88px);
  line-height: 0.91;
}

h1 em,
h2 em {
  color: var(--gray);
  font-style: normal;
}

.lead {
  max-width: 620px;
  margin: 0;
  color: #626563;
  font-size: 19px;
  line-height: 1.7;
}

.hero-actions {
  margin-top: 37px;
  display: flex;
  align-items: center;
  gap: 27px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #c8c8c3;
  font-size: 13px;
  font-weight: 750;
}

.proof {
  margin-top: 39px;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  color: #555957;
  font-size: 12px;
}

.proof span,
.about-points span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.proof .icon {
  width: 14px;
  height: 14px;
}

.portrait-hero {
  position: relative;
  z-index: 1;
  min-height: 590px;
  border-radius: 38px;
  overflow: hidden;
  background: #d7d3d4;
  box-shadow: 0 28px 55px rgba(10, 15, 17, 0.14);
}

.portrait-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.portrait-hero::after {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(transparent, rgba(10, 14, 15, 0.84));
}

.portrait-label {
  position: absolute;
  z-index: 2;
  right: 30px;
  bottom: 27px;
  left: 30px;
  display: grid;
  gap: 5px;
  color: #fff;
}

.portrait-label > span {
  color: #b9bdbd;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.portrait-label strong {
  font-size: 23px;
}

.portrait-label small {
  color: #c1c5c5;
  font-size: 11px;
}

.portrait-status {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(16, 21, 23, 0.82);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.portrait-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(79, 212, 138, 0.1);
}

.experience {
  min-height: 92px;
  padding: 20px var(--content-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: #676a68;
  font-size: 13px;
}

.experience p {
  max-width: 660px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.experience strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.experience > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 9px;
}

.experience span {
  min-height: 36px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d3ce;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.section {
  padding: 120px var(--content-pad);
}

.section-head {
  margin-bottom: 58px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.section h2,
.business-focus h2,
.contact h2 {
  margin: 18px 0 0;
  font-size: clamp(43px, 5vw, 69px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.052em;
}

.section-head > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-card {
  min-height: 410px;
  padding: 31px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.service-card:hover {
  z-index: 1;
  transform: translateY(-3px);
  background: #fff;
  box-shadow: 0 18px 35px rgba(20, 23, 24, 0.06);
}

.service-card > .icon {
  width: 30px;
  height: 30px;
  margin: 12px 0 27px;
}

.service-card h3 {
  margin: 0 0 15px;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.service-card ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.service-card li {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.service-card li .icon {
  width: 14px;
  height: 14px;
}

.card-link {
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 750;
}

.business-focus {
  padding: 115px var(--content-pad);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
  background: #111617;
  color: #fff;
}

.kicker.light {
  color: #8b9292;
}

.business-focus > div:first-child > p:not(.kicker) {
  max-width: 540px;
  margin: 26px 0 0;
  color: #9ca2a2;
  line-height: 1.75;
}

.sector-list {
  display: grid;
  border-top: 1px solid #343a3b;
}

.sector-list article {
  padding: 29px 0;
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) 1fr;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid #343a3b;
}

.sector-list h3 {
  margin: 0;
  font-size: 21px;
}

.sector-list p {
  margin: 0;
  color: #9ba1a1;
  font-size: 13px;
  line-height: 1.55;
}

.about {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 10vw;
  align-items: center;
}

.about-mark {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d3ce;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #f2f1ec 68%);
  box-shadow: 0 25px 60px rgba(30, 30, 30, 0.06);
}

.about-mark > span {
  font-size: 90px;
  font-weight: 650;
  letter-spacing: -0.08em;
}

.about-mark small {
  color: var(--muted);
}

.about > div:last-child > p:not(.kicker) {
  max-width: 640px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}

.about-points {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
}

.about-points span {
  font-size: 12px;
  font-weight: 650;
}

.about-points .icon {
  width: 17px;
  height: 17px;
}

.about-link {
  margin-top: 22px;
}

.contact {
  margin: 0 clamp(16px, 3vw, 40px) 40px;
  padding: 85px clamp(25px, 5vw, 70px);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 34px;
}

.contact > div:first-child > p:not(.kicker) {
  max-width: 590px;
  margin: 30px 0 0;
  color: var(--muted);
  line-height: 1.75;
}

.private-note,
.private-contact-note {
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  opacity: 0.72;
}

.private-note {
  margin-top: 15px !important;
}

.private-contact-note {
  max-width: 720px;
  margin: -60px auto 90px;
  padding: 0 24px;
  text-align: center;
}

.contact-box {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(20, 22, 22, 0.06);
}

.contact-box > a:not(.button) {
  min-width: 0;
  padding: 18px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #e8e7e3;
}

.contact-box > a:not(.button) > .icon {
  width: 20px;
  height: 20px;
}

.contact-box span {
  display: grid;
}

.contact-box small,
.contact-details small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-box strong {
  margin-top: 3px;
  font-size: 14px;
}

.contact-box .button {
  margin-top: 20px;
  display: flex;
}

.sub-hero {
  min-height: 540px;
  padding: 80px var(--content-pad);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 8vw;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.sub-hero h1 {
  max-width: 1000px;
  margin: 28px 0 30px;
  font-size: clamp(52px, 6.4vw, 88px);
  line-height: 0.94;
}

.sub-lead {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.sub-index {
  min-height: 330px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 30px;
  background: #111617;
  color: #fff;
  box-shadow: 0 24px 50px rgba(10, 15, 17, 0.1);
}

.sub-index > .icon {
  width: 34px;
  height: 34px;
  color: #aeb3b3;
}

.sub-index > strong {
  font-size: clamp(30px, 3.7vw, 54px);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.05em;
}

.sub-index > small {
  color: #858c8d;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sub-index.service-index,
.sub-index.contact-index {
  min-height: 330px;
  border: 1px solid rgba(17, 21, 23, 0.11);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(17, 21, 23, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sub-index.service-index > .icon,
.sub-index.contact-index > .icon {
  width: 31px;
  height: 31px;
  color: var(--ink);
}

.sub-index.service-index > div,
.sub-index.contact-index > div {
  display: grid;
  gap: 7px;
}

.sub-index.service-index > div span,
.sub-index.contact-index > div span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.18em;
}

.sub-index.service-index > div strong,
.sub-index.contact-index > div strong {
  max-width: 290px;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 580;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.sub-index.service-index > small,
.sub-index.contact-index > small {
  color: var(--muted);
}

.portrait-page {
  position: relative;
  min-height: 0;
  aspect-ratio: 1536 / 1460;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: #d7d3d4;
}

.portrait-page img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}

.content-layout {
  padding: 105px var(--content-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 8vw;
  align-items: start;
}

.content-main {
  max-width: 900px;
}

.intro-text {
  margin: 0 0 25px;
  color: #5d6160;
  font-size: 19px;
  line-height: 1.85;
}

.content-main h2,
.legal-page h2 {
  margin: 65px 0 26px;
  font-size: 33px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.bullet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.bullet-grid > span {
  min-height: 66px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.bullet-grid .icon {
  width: 15px;
  height: 15px;
}

.text-section p {
  color: var(--muted);
  line-height: 1.8;
}

.side-contact {
  position: sticky;
  top: 110px;
  padding: 29px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(20, 22, 22, 0.06);
}

.side-contact > span {
  color: #8a8d8c;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.side-contact h3 {
  margin: 22px 0 13px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.side-contact > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.side-contact > a:not(.button) {
  min-width: 0;
  padding: 14px 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.side-contact > a:not(.button) .icon {
  width: 17px;
  height: 17px;
}

.side-contact .button {
  margin-top: 14px;
  display: flex;
}

.related {
  margin-top: 70px;
  padding-top: 35px;
  border-top: 1px solid var(--line);
}

.related > div {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.related a {
  padding: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

.related a:hover {
  border-color: #999;
}

.contact-details {
  padding: 100px var(--content-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.contact-details > a {
  min-width: 0;
  padding: 29px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.contact-details > a > .icon {
  width: 25px;
  height: 25px;
}

.contact-details span {
  min-width: 0;
  display: grid;
}

.contact-details strong {
  margin-top: 5px;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.reference-grid {
  padding: 95px var(--content-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.reference-grid article {
  min-height: 280px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.reference-grid h2 {
  margin: 0 0 16px;
  font-size: 24px;
}

.reference-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.center-cta {
  padding: 100px 24px;
  text-align: center;
}

.center-cta h2 {
  margin: 20px 0 34px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -0.045em;
}

.inline-cta {
  margin-top: 38px;
}

.legal-page,
.generic-page {
  width: 100%;
  max-width: 1050px;
  padding: 90px clamp(24px, 12vw, 180px) 120px;
}

.legal-page h1,
.generic-page h1 {
  margin: 45px 0 75px;
  font-size: clamp(55px, 7vw, 86px);
  line-height: 0.95;
}

.legal-page p,
.generic-page p {
  color: #5f6362;
  line-height: 1.85;
}

.legal-note {
  margin-top: 55px;
  padding: 20px 24px;
  border-left: 3px solid var(--gray);
  background: var(--soft);
}

.post-list article {
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.post-list h2 {
  margin: 0 0 12px;
}

.error-page .button {
  margin-top: 25px;
}

.site-footer {
  padding: 70px var(--content-pad) 36px;
  background: #111617;
  color: #aeb3b3;
  font-size: 12px;
}

.footer-brand {
  padding-bottom: 50px;
  display: grid;
  grid-template-columns: 160px minmax(240px, 520px);
  gap: 34px;
  align-items: center;
  border-bottom: 1px solid #303637;
}

.footer-logo {
  width: 158px;
  filter: invert(1) grayscale(1);
}

.footer-brand p {
  margin: 0;
  line-height: 1.7;
}

.footer-columns {
  padding: 50px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
}

.footer-columns > div {
  display: grid;
  gap: 12px;
}

.footer-columns strong {
  margin-bottom: 7px;
  color: #fff;
}

.footer-columns a:hover,
.footer-contact a:hover {
  color: #fff;
}

.footer-contact {
  padding-top: 27px;
  display: flex;
  align-items: center;
  gap: 26px;
  border-top: 1px solid #303637;
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact .icon {
  width: 15px;
  height: 15px;
}

.footer-contact .copyright {
  margin-left: auto;
}

.consent-reset {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}

.consent-reset:hover {
  color: #fff;
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  padding: 14px 19px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 38px rgba(12, 70, 34, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(12, 70, 34, 0.34);
}

.whatsapp-float .icon {
  width: 21px;
  height: 21px;
}

.cookie-consent {
  position: fixed;
  z-index: 110;
  right: 22px;
  bottom: 22px;
  left: 22px;
  max-width: 1060px;
  margin: auto;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(17, 22, 23, 0.98);
  color: #fff;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent strong {
  display: block;
  margin-bottom: 6px;
}

.cookie-consent p {
  max-width: 720px;
  margin: 0;
  color: #b9bdbd;
  font-size: 12px;
  line-height: 1.6;
}

.cookie-consent p a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-actions {
  display: flex;
  gap: 9px;
}

.cookie-consent .button-outline {
  border-color: #555d5f;
  color: #fff;
}

.cookie-consent .button-dark {
  background: #fff;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .primary-navigation {
    position: absolute;
    top: calc(100% + 10px);
    right: var(--content-pad);
    width: min(280px, calc(100vw - 32px));
    display: none;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 55px rgba(16, 21, 23, 0.16);
  }

  .primary-navigation.is-open {
    display: block;
  }

  .primary-navigation ul {
    display: grid;
    gap: 0;
  }

  .primary-navigation a {
    padding: 14px 15px;
    display: block;
    border-radius: 10px;
  }

  .primary-navigation a:hover {
    background: var(--soft);
  }

  .menu-toggle {
    margin-left: auto;
    display: flex;
  }

  .header-cta {
    margin-left: 14px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }

  .portrait-hero {
    width: 100%;
    max-width: 680px;
    min-height: 680px;
  }

  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-focus,
  .sub-hero,
  .content-layout {
    grid-template-columns: 1fr;
  }

  .about {
    grid-template-columns: 1fr 1.4fr;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  .sub-index,
  .sub-index.service-index,
  .sub-index.contact-index {
    min-height: 245px;
  }

  .portrait-page {
    width: 100%;
    max-width: 680px;
    min-height: 0;
  }

  .side-contact {
    position: static;
  }

  .reference-grid,
  .contact-details {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-columns {
    gap: 35px;
  }

  .footer-contact {
    flex-wrap: wrap;
  }

  .footer-contact .copyright {
    width: 100%;
    margin: 4px 0 0;
  }

  .cookie-consent {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 680px) {
  .site-header {
    height: 70px;
  }

  .site-header-inner {
    padding: 0 18px;
  }

  .logo,
  .custom-logo-link {
    width: 130px;
  }

  .header-cta {
    display: none;
  }

  .primary-navigation {
    right: 16px;
  }

  .hero {
    min-height: auto;
    padding: 62px 20px 75px;
    gap: 55px;
  }

  .hero h1 {
    margin-top: 28px;
    font-size: clamp(43px, 13vw, 54px);
    line-height: 0.95;
  }

  .lead {
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .proof {
    display: grid;
    gap: 12px;
  }

  .portrait-hero {
    min-height: 570px;
    border-radius: 27px;
  }

  .portrait-hero::after {
    inset: 62% 0 0;
  }

  .portrait-label {
    right: 22px;
    bottom: 22px;
    left: 22px;
  }

  .portrait-label strong {
    font-size: 20px;
  }

  .portrait-status {
    top: 16px;
    right: 16px;
  }

  .experience {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .experience > div {
    grid-template-columns: 1fr;
  }

  .experience span {
    justify-content: flex-start;
  }

  .section {
    padding-top: 85px;
    padding-bottom: 85px;
  }

  .section-head,
  .services,
  .about,
  .sector-list article,
  .bullet-grid,
  .reference-grid,
  .contact-details,
  .footer-brand,
  .footer-columns {
    grid-template-columns: 1fr;
  }

  .section-head {
    gap: 26px;
  }

  .business-focus {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .sector-list article {
    gap: 9px;
    padding: 24px 0;
  }

  .about-mark {
    max-width: 290px;
    margin: auto;
  }

  .about-mark > span {
    font-size: 68px;
  }

  .contact {
    margin: 0 10px 20px;
    padding: 62px 22px;
    gap: 45px;
  }

  .contact h2 {
    font-size: 46px;
  }

  .contact-box {
    padding: 14px;
  }

  .sub-hero {
    padding: 60px 20px 65px;
    gap: 40px;
  }

  .sub-hero h1 {
    font-size: clamp(43px, 12.5vw, 49px);
  }

  .sub-index,
  .sub-index.service-index,
  .sub-index.contact-index {
    min-height: 225px;
    padding: 25px;
  }

  .portrait-page {
    min-height: 0;
    border-radius: 24px;
  }

  .content-layout,
  .contact-details,
  .legal-page,
  .generic-page {
    padding-right: 20px;
    padding-left: 20px;
  }

  .content-layout {
    padding-top: 75px;
    padding-bottom: 80px;
  }

  .related > div {
    grid-template-columns: 1fr;
  }

  .contact-details {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .contact-details strong {
    font-size: 15px;
  }

  .private-contact-note {
    margin: -38px auto 70px;
  }

  .reference-grid {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .reference-grid article {
    min-height: 220px;
  }

  .legal-page,
  .generic-page {
    padding-top: 65px;
  }

  .legal-page h1,
  .generic-page h1 {
    margin-bottom: 55px;
    font-size: 50px;
  }

  .legal-page h2 {
    font-size: 28px;
  }

  .site-footer {
    padding-top: 60px;
  }

  .footer-brand {
    gap: 25px;
  }

  .footer-columns {
    gap: 38px;
  }

  .footer-contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-contact .copyright {
    width: auto;
  }

  .whatsapp-float {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }

  .whatsapp-float span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cookie-consent {
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 18px;
    gap: 18px;
    border-radius: 18px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cookie-actions .button {
    width: 100%;
  }
}

/* Layout safeguards for short headings and contact rows. */
.nowrap {
  white-space: nowrap;
}

.side-contact > a:not(.button) span,
.contact-box > a:not(.button) span,
.contact-details > a span {
  min-width: 0;
}

.side-contact > a:not(.button) strong,
.contact-box > a:not(.button) strong,
.contact-details > a strong {
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .section-head h2 .nowrap {
    font-size: clamp(27px, 8.4vw, 32px);
    letter-spacing: -0.045em;
  }

  .side-contact h3 {
    font-size: clamp(18px, 5.4vw, 21px);
  }

  .contact-box > a:not(.button),
  .contact-details > a {
    grid-template-columns: 24px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Privatkunden-Hinweis soll bewusst sichtbar und nicht wie ein Rechtshinweis wirken. */
.private-note-visible {
  margin-top: 18px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.6 !important;
  opacity: 1;
}

/* v1.0.3 targeted layout refinements */
.hero {
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portrait-hero {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.portrait-hero > img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.portrait-hero::after {
  inset: auto 0 0;
  height: 44%;
}

.experience {
  grid-template-columns: minmax(0, 1fr) auto;
}

.experience > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.experience span {
  flex: 0 0 auto;
}

.section-head {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  align-items: end;
}

.section-head > div {
  min-width: 0;
}

.section-intro {
  max-width: 460px;
  margin: 0;
  justify-self: end;
}

.portrait-page,
.reference-showcase {
  min-height: 420px;
}

.portrait-page img,
.reference-showcase img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.sub-hero-about .portrait-page {
  background: #ece9e6;
}

.inline-cta-group {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.side-contact h3 {
  max-width: 250px;
  white-space: normal;
  text-wrap: balance;
}

.side-contact > p {
  margin-bottom: 6px;
}

.contact-link {
  min-width: 0;
  width: 100%;
  padding: 14px 0;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.contact-box .contact-link {
  padding: 18px 10px;
  grid-template-columns: 22px minmax(0, 1fr);
  border-top: 0;
  border-bottom: 1px solid #e8e7e3;
}

.contact-details .contact-link {
  padding: 29px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.contact-link-icon,
.contact-link-icon .icon {
  width: 20px;
  height: 20px;
}

.contact-details .contact-link-icon,
.contact-details .contact-link-icon .icon {
  width: 25px;
  height: 25px;
}

.contact-text {
  min-width: 0;
  display: grid;
}

.contact-text strong {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.contact-details .contact-text strong {
  font-size: 17px;
}

.reference-grid {
  padding: 95px var(--content-pad);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  border: 0;
}

.reference-grid article {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(20, 22, 22, 0.05);
}

.reference-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.reference-card:hover .reference-more {
  color: var(--gray);
}

.reference-preview {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #efeee9;
  border-bottom: 1px solid var(--line);
}

.reference-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reference-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.reference-category {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reference-card-body h2 {
  margin: 0;
  font-size: 24px;
}

.reference-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.reference-more {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 1000px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .section-intro {
    justify-self: start;
    max-width: 700px;
  }

  .experience {
    grid-template-columns: 1fr;
  }

  .experience > div {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .hero {
    gap: 28px;
  }

  .hero-copy {
    order: 2;
  }

  .portrait-hero {
    order: 1;
    min-height: 420px;
  }

  .page-slug-ueber-mich .sub-hero > div:first-child {
    order: 2;
  }

  .page-slug-ueber-mich .portrait-page {
    order: 1;
    min-height: 360px;
    max-width: 420px;
    margin: 0 auto;
  }

  .experience > div {
    justify-content: flex-start;
  }

  .experience span {
    justify-content: center;
  }

  .contact-link {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .contact-text strong,
  .contact-details .contact-text strong {
    font-size: 15px;
  }

  .reference-grid {
    grid-template-columns: 1fr;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .menu-item-remote {
    display: none !important;
  }
}


/* v1.0.4: Querformat-Porträt auf der Startseite */
.portrait-hero {
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
}

.portrait-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 1000px) {
  .portrait-hero {
    width: 100%;
    max-width: 760px;
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .portrait-hero {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* v1.0.5 refinements */
@media (min-width: 681px) {
  .portrait-hero {
    min-height: 610px;
  }

  .portrait-hero > img {
    object-fit: cover !important;
    object-position: center 8% !important;
  }
}

.about-mark {
  position: relative;
  overflow: hidden;
}

.about-mark .count-up-value {
  display: inline-block;
  min-width: 1.6ch;
}

.side-contact .contact-link,
.contact-box .contact-link,
.contact-details .contact-link {
  width: 100%;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
}

.contact-link-icon {
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.contact-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}

.contact-text small,
.contact-text strong {
  display: block;
}

.contact-text strong {
  line-height: 1.4;
}

.side-contact .contact-link + .contact-link,
.contact-box .contact-link + .contact-link,
.contact-details .contact-link + .contact-link {
  margin-top: 0;
}

@media (max-width: 680px) {
  .side-contact .contact-link,
  .contact-box .contact-link,
  .contact-details .contact-link {
    gap: 10px;
  }

  .contact-link-icon {
    flex-basis: 22px;
  }
}

/* v1.0.6 corrections */
.portrait-hero {
  overflow: hidden;
}

.portrait-hero > img {
  object-position: center 4% !important;
}

.contact-box .contact-link,
.side-contact .contact-link,
.contact-details .contact-link {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 12px;
}

.contact-box .contact-link {
  padding: 16px 8px;
}

.contact-link-icon {
  flex: 0 0 22px;
  margin-top: 1px;
}

.contact-link-icon .icon {
  display: block;
}

.contact-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.contact-text small {
  display: block;
  line-height: 1.2;
}

.contact-text strong {
  display: block;
  margin-top: 0;
  line-height: 1.4;
}

.contact-box .button {
  margin-top: 10px;
}

/* v1.0.7 – undistorted portrait + stable contact rows */
.portrait-hero {
  overflow: hidden;
}

.portrait-hero > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.22);
  transform-origin: center 38%;
}

.side-contact {
  overflow: hidden;
}

.side-contact .contact-link,
.contact-box .contact-link,
.contact-details .contact-link {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.side-contact .contact-link {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.contact-link-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.contact-link-icon .icon {
  width: 19px !important;
  height: 19px !important;
  display: block;
}

.contact-text {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

.contact-text small,
.contact-text strong {
  width: 100%;
  display: block !important;
  margin: 0 !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reference-preview img,
.reference-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 680px) {
  .portrait-hero > img {
    transform: scale(1.08);
    transform-origin: center 42%;
  }
}

/* v1.0.7 final portrait geometry: preserve the source aspect ratio at all times. */
.portrait-hero {
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

.portrait-hero > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.18) !important;
  transform-origin: center center !important;
}

@media (max-width: 680px) {
  .portrait-hero > img {
    transform: scale(1.08) !important;
  }
}

/* v1.0.8 – mobile portrait, contact rows and clean hero background */
.hero::after {
  display: none !important;
  content: none !important;
}

/* Start page portrait: crop by zooming, never by stretching. */
.portrait-hero {
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
}

.portrait-hero > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  transform: scale(1.34) !important;
  transform-origin: center 45% !important;
}

/* About portrait: use the real image edge-to-edge, proportional and centered. */
.portrait-page-about {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  background: #d7d3d4 !important;
}

.portrait-page-about > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 46% !important;
  transform: scale(1.07) !important;
  transform-origin: center center !important;
}

/* Contact methods are structurally stacked, so icons and text can never merge into one line. */
.contact-methods {
  width: 100%;
  margin-top: 16px;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.contact-method {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  padding: 13px 0 !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.contact-method:first-child {
  border-top: 0;
}

.contact-method-icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.contact-method-icon .icon {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
}

.contact-method-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

.contact-method-copy small,
.contact-method-copy strong {
  min-width: 0;
  margin: 0 !important;
  display: block !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.contact-method-copy small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-method-copy strong {
  font-size: 14px;
  font-weight: 650;
}

.side-contact .contact-methods {
  margin-top: 8px;
}

.side-contact .button {
  margin-top: 16px !important;
}

.contact-box .contact-methods {
  margin-top: 0;
}

.contact-box .contact-method {
  padding: 15px 8px !important;
}

.contact-details {
  display: block !important;
}

.contact-details .contact-methods-large {
  max-width: 900px;
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.contact-details .contact-methods-large .contact-method {
  padding: 26px !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px;
  background: #fff;
}

.contact-details .contact-method-copy strong {
  font-size: 17px;
}

@media (max-width: 680px) {
  .portrait-hero > img {
    object-position: center 43% !important;
    transform: scale(1.36) !important;
    transform-origin: center 44% !important;
  }

  .page-slug-ueber-mich .portrait-page-about {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
  }

  .portrait-page-about > img {
    object-position: center 45% !important;
    transform: scale(1.09) !important;
  }

  .side-contact {
    padding: 28px 30px !important;
  }

  .side-contact h3 {
    max-width: 280px;
  }

  .contact-details .contact-methods-large {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .contact-details .contact-methods-large .contact-method {
    padding: 22px !important;
  }
}

/* Remove the remaining separator/decorative lines requested for the mobile layout. */
.site-header {
  border-bottom: 0 !important;
}

@media (max-width: 680px) {
  .portrait-page-about > img {
    transform: scale(1.06) !important;
  }
}


/* v1.0.9 – mobile hero sequence and final portrait treatment */
@media (max-width: 680px) {
  /* Put the complete headline/introduction first and the portrait directly
     below the introductory text, without duplicating content. */
  .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .hero-copy {
    display: contents !important;
  }

  .hero .eyebrow {
    order: 1;
  }

  .hero h1 {
    order: 2;
  }

  .hero .lead {
    order: 3;
    margin-bottom: 34px !important;
  }

  .hero .portrait-hero {
    order: 4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 34px !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }

  .hero .hero-actions {
    order: 5;
    margin-top: 0 !important;
  }

  .hero .proof {
    order: 6;
  }

  /* Crop proportionally; never stretch the source image. */
  .hero .portrait-hero > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 43% !important;
    transform: scale(1.18) !important;
    transform-origin: center 43% !important;
  }

  .hero .portrait-label small {
    font-size: 12px !important;
  }

  /* About portrait remains edge-to-edge and proportional on phones. */
  .page-slug-ueber-mich .portrait-page-about {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .page-slug-ueber-mich .portrait-page-about > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 43% !important;
    transform: scale(1.12) !important;
    transform-origin: center 43% !important;
  }
}

/* v1.0.10 – scrolling header, centered portrait, mobile count-up and footer order */
/* The header is part of the normal document flow and therefore disappears naturally while scrolling. */
.site-header,
body.admin-bar .site-header {
  position: relative !important;
  top: auto !important;
}

/* Keep Simon visually centered in the start-page portrait at every viewport size. */
.hero .portrait-hero > img {
  object-position: 50% 44% !important;
  transform-origin: 50% 44% !important;
}

.count-up-inline {
  display: inline-block;
  min-width: 1.35ch;
  font-variant-numeric: tabular-nums;
}

.footer-columns .footer-consent-reset {
  width: fit-content;
  justify-self: start;
  padding: 0;
  text-align: left;
  color: inherit;
  line-height: inherit;
}

.footer-columns .footer-consent-reset:hover,
.footer-columns .footer-consent-reset:focus-visible {
  color: #fff;
}

@media (max-width: 680px) {
  .hero .portrait-hero > img {
    object-position: 50% 43% !important;
    transform-origin: 50% 43% !important;
  }
}

/* v1.0.11 – direction-aware header + portrait framing */
.site-header,
body.admin-bar .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  will-change: transform;
}

body.admin-bar .site-header {
  top: 32px !important;
}

.site-header.is-header-hidden {
  transform: translateY(calc(-100% - 8px)) !important;
}

.site-header.is-header-visible {
  transform: translateY(0) !important;
}

/* Visually center the subject in the start-page image. The image remains proportional. */
.hero .portrait-hero > img {
  left: 50% !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 43% !important;
  transform: translateX(-51%) scale(1.34) !important;
  transform-origin: center center !important;
}

/* About portrait: slightly more breathing room without stretching the source. */
.page-slug-ueber-mich .portrait-page-about > img {
  object-fit: contain !important;
  object-position: center center !important;
  transform: scale(.98) !important;
  transform-origin: center center !important;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}

@media (max-width: 680px) {
  .hero .portrait-hero > img {
    left: 50% !important;
    object-position: 50% 43% !important;
    transform: translateX(-53%) scale(1.36) !important;
  }

  .page-slug-ueber-mich .portrait-page-about > img {
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(.94) !important;
  }
}

/* v1.0.12 – tighter mobile hero spacing and inline experience counter */
/* The animated number is nested inside .experience and must not inherit the pill styling
   that is intended only for VERLÄSSLICH / VERSTÄNDLICH / PERSÖNLICH. */
.experience strong .count-up-inline {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  white-space: normal !important;
  vertical-align: baseline !important;
}

@media (max-width: 680px) {
  /* Bring the first content block a little closer to the header and remove excess
     whitespace at the bottom of the hero without making the layout cramped. */
  .hero {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
  }

  .hero .lead {
    margin-bottom: 26px !important;
  }

  .hero .portrait-hero {
    margin-bottom: 28px !important;
  }

  .hero .proof {
    margin-top: 26px !important;
  }

  .experience {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .experience p {
    margin: 0 !important;
  }
}


/* v1.0.13 — tighter header spacing site-wide */
@media (min-width: 681px) {
  main.site-main,
  .site-main {
    padding-top: 0 !important;
  }

  .hero,
  .sub-hero,
  .page-hero,
  .service-hero,
  .reference-hero,
  .contact-hero,
  .legal-page,
  .content-page {
    margin-top: 0 !important;
  }
}

@media (max-width: 680px) {
  main.site-main,
  .site-main {
    padding-top: 0 !important;
  }

  .hero,
  .sub-hero,
  .page-hero,
  .service-hero,
  .reference-hero,
  .contact-hero,
  .legal-page,
  .content-page {
    margin-top: 0 !important;
  }

  /* Keep only a compact intentional breathing space below the header. */
  .hero,
  .sub-hero {
    padding-top: 42px !important;
  }

  .page-content > :first-child,
  .entry-content > :first-child {
    margin-top: 0 !important;
  }
}


/* v1.0.14 — compact mobile cards, fuller experience badge, contact icons, clean about portrait */
@media (max-width: 680px) {
  /* Generic large information tiles used across service/contact/reference pages:
     remove the oversized empty middle/lower areas. */
  .sub-index,
  .sub-index.service-index,
  .sub-index.contact-index {
    min-height: 0 !important;
    height: auto !important;
    padding: 28px 26px !important;
    gap: 18px !important;
    align-content: start !important;
  }

  .sub-index > div,
  .sub-index.service-index > div,
  .sub-index.contact-index > div {
    margin: 0 !important;
  }

  .sub-index strong,
  .sub-index.service-index strong,
  .sub-index.contact-index strong {
    display: block;
    margin: 8px 0 14px !important;
    line-height: 1.08 !important;
  }

  .sub-index small,
  .sub-index.service-index small,
  .sub-index.contact-index small {
    margin: 0 !important;
    padding-top: 4px !important;
  }

  /* Cards/list tiles: less dead space below their content. */
  .service-card,
  .service-grid article,
  .service-list article,
  .reference-card,
  .sector-list article,
  .contact-method,
  .contact-details .contact-methods-large .contact-method {
    min-height: 0 !important;
    height: auto !important;
  }

  .service-card,
  .service-grid article,
  .service-list article,
  .reference-card {
    padding-bottom: 24px !important;
  }

  .service-card > :last-child,
  .service-grid article > :last-child,
  .service-list article > :last-child,
  .reference-card > :last-child {
    margin-bottom: 0 !important;
  }

  /* Experience circle: use the space more intentionally. */
  .about-mark {
    width: min(78vw, 330px) !important;
    max-width: 330px !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    padding: 34px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .about-mark > span,
  .about-mark .count-up-value {
    font-size: clamp(78px, 22vw, 104px) !important;
    line-height: .88 !important;
    min-width: 0 !important;
  }

  .about-mark small {
    max-width: 190px;
    font-size: 16px !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  /* Contact options: icon + copy, consistently aligned. */
  .contact-details .contact-methods-large .contact-method {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 22px !important;
  }

  .contact-details .contact-method-icon {
    display: inline-flex !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    align-items: center;
    justify-content: center;
  }

  .contact-details .contact-method-icon .icon,
  .contact-details .contact-method-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .contact-details .contact-method-copy {
    min-width: 0;
  }

  /* About portrait: remove the visible lower/outer band by filling the frame,
     while keeping the source proportional. */
  .page-slug-ueber-mich .portrait-page-about {
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .page-slug-ueber-mich .portrait-page-about > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    transform: scale(1.02) !important;
    transform-origin: center center !important;
  }
}


/* v1.0.15 — general consent banner and original portrait source */
.cookie-consent-inner {
  max-width: 920px;
}
.cookie-consent h2 {
  margin: 8px 0 12px;
}
.cookie-category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}
.cookie-category-list > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cookie-category-list span,
.cookie-detail {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.cookie-detail a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Use the genuine source photo; no generated replacement and no bitmap resampling. */
.hero .portrait-hero > img,
.page-slug-ueber-mich .portrait-page-about > img {
  image-rendering: auto !important;
}

@media (max-width: 680px) {
  .cookie-category-list {
    grid-template-columns: 1fr;
  }
  .cookie-consent {
    max-height: min(88vh, 760px);
    overflow-y: auto;
  }

  .hero .portrait-hero > img {
    object-position: 50% 34% !important;
  }

  .page-slug-ueber-mich .portrait-page-about > img {
    object-position: 50% 30% !important;
    transform: none !important;
  }
}


/* v1.0.20 — about portrait cleanup */
.page-slug-ueber-mich .portrait-page-about {
  overflow: hidden !important;
}

.page-slug-ueber-mich .portrait-page-about > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 36% !important;
}

@media (max-width: 680px) {
  .page-slug-ueber-mich .portrait-page-about > img {
    object-position: 50% 34% !important;
    transform: scale(1.05) !important;
    transform-origin: center 38% !important;
  }
}


/* v1.0.21 — zoom the "Über mich" portrait further out */
.page-slug-ueber-mich .portrait-page-about {
  overflow: hidden !important;
  background: #d7d2d5 !important;
}

.page-slug-ueber-mich .portrait-page-about > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 58% !important;
  transform: scale(0.90) !important;
  transform-origin: center center !important;
  background: transparent !important;
}

@media (max-width: 680px) {
  .page-slug-ueber-mich .portrait-page-about > img {
    object-fit: contain !important;
    object-position: 50% 58% !important;
    transform: scale(0.88) !important;
    transform-origin: center center !important;
  }
}


/* v1.0.22 — final About portrait framing */
.page-slug-ueber-mich .portrait-page-about {
  overflow: hidden !important;
  padding: 0 !important;
  background: #d7d2d5 !important;
  aspect-ratio: 1 / 1 !important;
}

.page-slug-ueber-mich .portrait-page-about > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* v1.0.23 — domain-move fixes and requested UI refinements */

/* Services intro belongs with the heading on desktop. */
.section-head {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}
.section-head .section-intro {
  max-width: 720px !important;
  margin: 24px 0 0 !important;
  justify-self: start !important;
}

/* Homepage customer logos directly below the experience bar. */
.reference-clients {
  padding: 36px var(--content-pad) 42px;
  border-bottom: 1px solid var(--line);
  background: #f8f7f3;
}
.reference-clients > .kicker {
  margin: 0 0 22px;
}
.reference-client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.reference-client-logo {
  min-height: 104px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.reference-client-logo a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reference-client-logo img {
  display: block;
  max-width: 100%;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .84;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.reference-client-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-1px);
}

/* Stronger but still minimal double-ring effect around 14 years. */
.about-mark {
  border: 2px solid rgba(17, 22, 23, .27) !important;
  box-shadow:
    0 0 0 8px rgba(17, 22, 23, .035),
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 28px 65px rgba(20, 23, 24, .09) !important;
}

/* Compact cookie consent. */
.cookie-consent {
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  width: min(590px, calc(100% - 36px)) !important;
  max-width: 590px !important;
  padding: 0 !important;
  border-radius: 18px !important;
}
.cookie-consent-inner {
  max-width: none !important;
  padding: 14px 15px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}
.cookie-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}
.cookie-copy p {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.cookie-copy p a {
  white-space: nowrap;
}
.cookie-consent .cookie-actions {
  display: flex !important;
  gap: 7px !important;
  margin: 0 !important;
}
.cookie-consent .cookie-actions .button {
  min-height: 36px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  white-space: nowrap;
}

/* Contact-icon wrappers remain visible even on legacy pages. */
.contact-method-icon,
.contact-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
}
.contact-method-icon svg,
.contact-link-icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* Mobile service cards collapse by default. */
.service-card-toggle {
  display: none;
}

@media (max-width: 680px) {
  .reference-clients {
    padding: 28px var(--content-pad) 32px;
  }
  .reference-client-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .reference-client-logo {
    min-height: 82px;
    padding: 13px;
    border-radius: 14px;
  }
  .reference-client-logo img {
    max-height: 48px;
  }

  .services {
    display: grid !important;
    grid-template-columns: 1fr !important;
    border: 0 !important;
    gap: 10px !important;
  }
  .service-card.service-card-collapsible {
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
  }
  .service-card.service-card-collapsible > .icon,
  .service-card.service-card-collapsible > h3 {
    display: none !important;
  }
  .service-card-toggle {
    width: 100%;
    min-height: 68px;
    padding: 15px 17px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 22px;
    gap: 12px;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .service-card-toggle .icon {
    width: 24px;
    height: 24px;
  }
  .service-card-toggle span {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }
  .service-card-toggle b {
    font-size: 22px;
    font-weight: 400;
    text-align: center;
  }
  .service-card.service-card-collapsible > p,
  .service-card.service-card-collapsible > ul,
  .service-card.service-card-collapsible > .card-link {
    display: none !important;
  }
  .service-card.service-card-collapsible.is-open > p,
  .service-card.service-card-collapsible.is-open > ul,
  .service-card.service-card-collapsible.is-open > .card-link {
    display: flex !important;
    margin-left: 17px !important;
    margin-right: 17px !important;
  }
  .service-card.service-card-collapsible.is-open > p {
    display: block !important;
    margin-top: 0 !important;
  }
  .service-card.service-card-collapsible.is-open > ul {
    display: block !important;
    margin-top: 16px !important;
  }
  .service-card.service-card-collapsible.is-open > .card-link {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* The three About values become deliberate outlined elements. */
  .about-points {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }
  .about-points span {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    box-sizing: border-box;
  }

  .cookie-consent {
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100% - 20px) !important;
  }
  .cookie-consent-inner {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .cookie-consent .cookie-actions {
    width: 100%;
  }
  .cookie-consent .cookie-actions .button {
    flex: 1 1 0;
  }
}


/* v1.0.24 — refined references, services, contact icons and mobile About order */

/* Reference customers: one calm metallic/silver row. */
.reference-clients {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(235,236,236,.72)),
    #f1f1ef !important;
}
.reference-client-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 7px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.reference-client-logo {
  flex: 1 0 128px;
  min-width: 128px;
  min-height: 92px !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(115,120,123,.28) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(216,219,220,.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(90,96,99,.08),
    0 7px 18px rgba(25,28,30,.045) !important;
}
.reference-client-logo img,
.reference-client-logo:hover img {
  max-height: 54px !important;
  filter: grayscale(1) saturate(0) contrast(.92) brightness(.82) !important;
  opacity: .84 !important;
  transform: none !important;
}
.reference-client-logo:hover {
  background:
    linear-gradient(145deg, #fff, #d9dcdd) !important;
  border-color: rgba(92,98,101,.4) !important;
}

/* Desktop service cards: remove unnecessary empty space around/below "Mehr erfahren". */
@media (min-width: 681px) {
  .services {
    align-items: stretch;
  }
  .service-card {
    min-height: 340px !important;
    padding: 27px 29px 23px !important;
  }
  .service-card > .icon {
    margin-top: 7px !important;
    margin-bottom: 22px !important;
  }
  .service-card ul {
    margin-bottom: 0 !important;
  }
  .service-card .card-link {
    margin-top: 24px !important;
    padding-top: 13px !important;
  }
}

/* Contact icons: make injected and native icons visually consistent everywhere. */
.side-contact .contact-method-icon,
.side-contact .contact-link-icon,
.contact-box .contact-method-icon,
.contact-box .contact-link-icon,
.contact-details .contact-method-icon,
.contact-details .contact-link-icon,
.contact-methods .contact-method-icon,
.contact-methods .contact-link-icon {
  display: inline-flex !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #111617 !important;
}
.side-contact .contact-method-icon svg,
.side-contact .contact-link-icon svg,
.contact-box .contact-method-icon svg,
.contact-box .contact-link-icon svg,
.contact-details .contact-method-icon svg,
.contact-details .contact-link-icon svg,
.contact-methods .contact-method-icon svg,
.contact-methods .contact-link-icon svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile: polished service accordion, compact About badges and text-before-image order. */
@media (max-width: 680px) {
  .reference-clients {
    padding-top: 25px !important;
    padding-bottom: 27px !important;
  }
  .reference-client-grid {
    gap: 8px !important;
    margin-right: calc(-1 * var(--content-pad));
    padding-right: var(--content-pad);
  }
  .reference-client-logo {
    flex-basis: 118px;
    min-width: 118px;
    min-height: 76px !important;
    padding: 11px 13px !important;
    border-radius: 14px !important;
  }
  .reference-client-logo img,
  .reference-client-logo:hover img {
    max-height: 42px !important;
  }

  /* More deliberate accordion cards instead of plain boxed rows. */
  .services {
    gap: 12px !important;
  }
  .service-card.service-card-collapsible {
    border: 1px solid rgba(20,24,25,.13) !important;
    border-radius: 21px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,245,242,.98)) !important;
    box-shadow:
      0 12px 26px rgba(17,22,23,.055),
      inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  .service-card.service-card-collapsible.is-open {
    border-color: rgba(17,22,23,.24) !important;
    box-shadow:
      0 18px 38px rgba(17,22,23,.08),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  .service-card-toggle {
    min-height: 74px !important;
    padding: 13px 14px !important;
    grid-template-columns: 42px minmax(0, 1fr) 34px !important;
    gap: 12px !important;
  }
  .service-card-toggle > .icon {
    box-sizing: border-box;
    width: 42px !important;
    height: 42px !important;
    padding: 10px;
    border: 1px solid rgba(17,22,23,.12);
    border-radius: 13px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 5px 12px rgba(17,22,23,.04);
  }
  .service-card-toggle span {
    font-size: 16px !important;
    font-weight: 720 !important;
    letter-spacing: -.015em;
  }
  .service-card-toggle b {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17,22,23,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    font-size: 20px !important;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
  }
  .service-card.service-card-collapsible.is-open .service-card-toggle b {
    background: #111617;
    color: #fff;
    transform: rotate(180deg);
  }
  .service-card.service-card-collapsible.is-open > p {
    margin: 1px 14px 0 !important;
    padding: 14px 15px !important;
    border: 1px solid rgba(17,22,23,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.68);
    color: #666b69 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .service-card.service-card-collapsible.is-open > ul {
    margin: 11px 14px 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 0 !important;
    border: 1px solid rgba(17,22,23,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.64);
    overflow: hidden;
  }
  .service-card.service-card-collapsible.is-open > ul li {
    min-height: 43px;
    margin: 0 !important;
    padding: 10px 13px !important;
    display: flex !important;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(17,22,23,.075);
    font-size: 13px;
  }
  .service-card.service-card-collapsible.is-open > ul li:last-child {
    border-bottom: 0;
  }
  .service-card.service-card-collapsible.is-open > ul li .icon {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px;
  }
  .service-card.service-card-collapsible.is-open > .card-link {
    box-sizing: border-box;
    width: calc(100% - 28px);
    min-height: 44px;
    margin: 11px 14px 14px !important;
    padding: 11px 14px !important;
    align-items: center;
    border: 0 !important;
    border-radius: 13px;
    background: #111617;
    color: #fff;
    font-size: 12px !important;
    text-decoration: none;
  }

  /* Compact chips: border follows the words instead of filling the whole row. */
  .about-points {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .about-points span {
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 11px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.62) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .about-points .icon {
    width: 14px !important;
    height: 14px !important;
  }

  /* Über mich: headline/intro first, portrait immediately afterwards. */
  .page-slug-ueber-mich .sub-hero-about {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .page-slug-ueber-mich .sub-hero-about > div:first-child {
    order: 1 !important;
  }
  .page-slug-ueber-mich .sub-hero-about .portrait-page-about,
  .page-slug-ueber-mich .sub-hero-about .portrait-page {
    order: 2 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
  }
}


/* Legacy contact anchors repaired by JavaScript. */
.side-contact a.has-contact-icon,
.contact-box a.has-contact-icon,
.contact-details a.has-contact-icon,
.contact-methods a.has-contact-icon {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
}


/* v1.0.26 stable rollback + safe UI refinements */

/* Keep reference clients strictly on one row and hide any scrollbar. */
.reference-client-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: auto !important;
}
.reference-client-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.reference-client-logo {
  flex: 0 0 clamp(124px, 14vw, 180px) !important;
}

/* Contact icons must stay visible across every contact block. */
.contact-method-icon,
.contact-link-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.contact-method-icon svg,
.contact-link-icon svg,
.contact-method-icon .icon,
.contact-link-icon .icon {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  display: block !important;
  color: var(--ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.contact-methods a.has-contact-icon,
.contact-details a.has-contact-icon,
.contact-box a.has-contact-icon,
.side-contact a.has-contact-icon,
.contact-method {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
}

/* Compact sub cards like “IT mit Struktur.” and “Persönlich erreichbar.” */
.sub-index {
  min-height: 250px;
  justify-content: flex-start;
  gap: 22px;
}
.sub-index > small {
  margin-top: auto;
}

/* Stronger outer ring for the 14 years circle and a fuller look. */
.about-mark {
  position: relative;
  box-shadow: 0 0 0 1px rgba(17,22,23,.10) inset, 0 18px 45px rgba(17,22,23,.045);
}
.about-mark::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(17,22,23,.08);
  pointer-events: none;
}
.about-mark small {
  max-width: 210px;
}

/* About image uses the real file and fills the frame naturally without a visible lower band. */
.page-slug-ueber-mich .portrait-page-about {
  background: #d7d3d7 !important;
  overflow: hidden !important;
}
.page-slug-ueber-mich .portrait-page-about > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  max-width: none !important;
}

@media (max-width: 680px) {
  /* About page order on mobile: headline first, image second, owner text under image. */
  .page-slug-ueber-mich .sub-hero-about {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .page-slug-ueber-mich .sub-hero-about > div:first-child {
    display: contents !important;
  }
  .page-slug-ueber-mich .sub-hero-about .kicker {
    order: 1 !important;
  }
  .page-slug-ueber-mich .sub-hero-about h1 {
    order: 2 !important;
  }
  .page-slug-ueber-mich .sub-hero-about .portrait-page-about,
  .page-slug-ueber-mich .sub-hero-about .portrait-page {
    order: 3 !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    min-height: 360px !important;
    max-width: 100% !important;
  }
  .page-slug-ueber-mich .sub-hero-about .sub-lead {
    order: 4 !important;
    margin-top: 16px !important;
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Under ÜBER FUCHS IT: compact tags, wrap only if necessary. */
  .about-points {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }
  .about-points span {
    width: auto !important;
    min-height: 0 !important;
    padding: 8px 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.68) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Cleaner mobile accordion for Leistungen. */
  .service-card.service-card-collapsible {
    border-radius: 18px !important;
    border: 1px solid rgba(17,22,23,.10) !important;
    background: #fbfbf8 !important;
    box-shadow: 0 8px 20px rgba(17,22,23,.04) !important;
    overflow: hidden !important;
  }
  .service-card.service-card-collapsible.is-open {
    background: #fff !important;
    border-color: rgba(17,22,23,.18) !important;
    box-shadow: 0 12px 26px rgba(17,22,23,.06) !important;
  }
  .service-card-toggle {
    width: 100% !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) 30px !important;
    align-items: center !important;
    gap: 10px !important;
    position: static !important;
  }
  .service-card-toggle > .icon {
    width: 20px !important;
    height: 20px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(17,22,23,.10) !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .service-card-toggle span {
    min-width: 0 !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    letter-spacing: -.012em !important;
    overflow-wrap: anywhere !important;
  }
  .service-card-toggle b {
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    border: 1px solid rgba(17,22,23,.12) !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  .service-card.service-card-collapsible.is-open .service-card-toggle b {
    background: #111617 !important;
    color: #fff !important;
  }
  .service-card.service-card-collapsible.is-open > p {
    margin: 0 15px !important;
    padding: 14px 0 13px !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    color: #656a68 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .service-card.service-card-collapsible.is-open > ul {
    margin: 0 15px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    background: transparent !important;
  }
  .service-card.service-card-collapsible.is-open > ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(17,22,23,.06) !important;
    min-height: 0 !important;
  }
  .service-card.service-card-collapsible.is-open > ul li:last-child {
    border-bottom: 0 !important;
  }
  .service-card.service-card-collapsible.is-open > .card-link {
    width: auto !important;
    margin: 2px 15px 14px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    background: transparent !important;
  }

  /* Contact cards and other tile-like boxes: less empty lower space. */
  .sub-index {
    min-height: 190px !important;
    padding: 22px !important;
    gap: 16px !important;
  }
  .contact-details .contact-methods-large {
    gap: 12px !important;
  }
  .contact-details .contact-methods-large .contact-method {
    padding: 18px 20px !important;
  }
}


/* v1.0.27 — final fixes for contact icons, navigation and mobile service cards */

/* Contact symbols are drawn by CSS backgrounds, so WordPress cannot strip them from page content. */
.contact-method-icon,
.contact-link-icon {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  flex: 0 0 24px !important;
}
.contact-method-icon::before,
.contact-link-icon::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 1 !important;
}
a[href^="tel:"] > .contact-method-icon::before,
a[href^="tel:"] > .contact-link-icon::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIyIDE2LjkydjNhMiAyIDAgMCAxLTIuMTggMiAxOS43OSAxOS43OSAwIDAgMS04LjYzLTMuMDcgMTkuNSAxOS41IDAgMCAxLTYtNkExOS43OSAxOS43OSAwIDAgMSAyLjEyIDQuMTggMiAyIDAgMCAxIDQuMTEgMmgzYTIgMiAwIDAgMSAyIDEuNzJjLjEzLjk2LjM2IDEuOS42OSAyLjhhMiAyIDAgMCAxLS40NSAyLjExTDguMDkgOS45MWExNiAxNiAwIDAgMCA2IDZsMS4yNy0xLjI3YTIgMiAwIDAgMSAyLjExLS40NWMuOTEuMzMgMS44NS41NiAyLjgxLjY5QTIgMiAwIDAgMSAyMiAxNi45MnoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzExMTYxNyIgc3Ryb2tlLXdpZHRoPSIxLjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") !important; }
a[href^="mailto:"] > .contact-method-icon::before,
a[href^="mailto:"] > .contact-link-icon::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE0IiByeD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTExNjE3IiBzdHJva2Utd2lkdGg9IjEuOCIvPjxwYXRoIGQ9Im0zIDcgOSA2IDktNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTExNjE3IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; }
a[href*="wa.me"] > .contact-method-icon::before,
a[href*="wa.me"] > .contact-link-icon::before,
a[href*="whatsapp"] > .contact-method-icon::before,
a[href*="whatsapp"] > .contact-link-icon::before,
a[href*="fuchs_it_whatsapp_url"] > .contact-method-icon::before,
a[href*="fuchs_it_whatsapp_url"] > .contact-link-icon::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iIzExMTYxNyIgZD0iTTEzLjYwMSAyLjMyNkE3Ljg1NCA3Ljg1NCAwIDAgMCA3Ljk5NCAwQzMuNjI3IDAgLjA2OCAzLjU1OC4wNjQgNy45MjZjMCAxLjM5OS4zNjYgMi43NiAxLjA1NyAzLjk2NUwwIDE2bDQuMjA0LTEuMTAyYTcuOTMzIDcuOTMzIDAgMCAwIDMuNzkuOTY1aC4wMDRjNC4zNjggMCA3LjkyNi0zLjU1OCA3LjkzLTcuOTNhNy44OTggNy44OTggMCAwIDAtMi4zMjctNS42MDdtLTUuNjA3IDEyLjJhNi42IDYuNiAwIDAgMS0zLjM1Ni0uOTJsLS4yNC0uMTQ0LTIuNDk0LjY1NC42NjYtMi40MzMtLjE1Ni0uMjUxYTYuNTYgNi41NiAwIDAgMS0xLjAwNy0zLjUwNWMwLTMuNjM2IDIuOTU3LTYuNTkzIDYuNTkxLTYuNTkzYTYuNTYgNi41NiAwIDAgMSA0LjY2IDEuOTMxIDYuNTYgNi41NiAwIDAgMSAxLjkyOCA0LjY2Yy0uMDA0IDMuNjM5LTIuOTYxIDYuNi02LjU5MiA2LjYiLz48L3N2Zz4=") !important; }
/* Avoid double icons when an inline SVG survived WordPress. */
.contact-method-icon > svg,
.contact-link-icon > svg { opacity: 0 !important; position: absolute !important; pointer-events: none !important; }

/* Reference logos: much lighter and cleaner, while keeping the one-row slider. */
.reference-clients {
  background: #f8f7f3 !important;
}
.reference-client-grid {
  gap: 14px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.reference-client-grid::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.reference-client-logo {
  min-height: 84px !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(17,22,23,.10) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
}
.reference-client-logo img,
.reference-client-logo:hover img {
  filter: grayscale(1) contrast(.96) !important;
  opacity: .78 !important;
  transform: none !important;
}

@media (max-width: 680px) {
  /* Mobile Leistung cards: only title + plus in the header. No narrow icon column. */
  .services {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    border: 0 !important;
  }
  .services .service-card.service-card-collapsible {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 1px solid rgba(17,22,23,.12) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 7px 18px rgba(17,22,23,.035) !important;
    overflow: hidden !important;
  }
  .service-card.service-card-collapsible > .icon,
  .service-card.service-card-collapsible > h3 { display: none !important; }
  .service-card-toggle {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 66px !important;
    height: auto !important;
    padding: 15px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    gap: 12px !important;
    align-items: center !important;
    position: static !important;
    text-align: left !important;
  }
  .service-card-toggle > .icon { display: none !important; }
  .service-card-toggle > span {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 720 !important;
    line-height: 1.22 !important;
    letter-spacing: -.018em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: auto !important;
  }
  .service-card-toggle > b {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(17,22,23,.14) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111617 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: none !important;
  }
  .service-card.service-card-collapsible.is-open .service-card-toggle > b {
    background: #111617 !important;
    color: #fff !important;
  }
  .service-card.service-card-collapsible > p,
  .service-card.service-card-collapsible > ul,
  .service-card.service-card-collapsible > .card-link { display: none !important; }
  .service-card.service-card-collapsible.is-open > p {
    display: block !important;
    margin: 0 16px !important;
    padding: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .service-card.service-card-collapsible.is-open > ul {
    display: grid !important;
    margin: 0 16px !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    background: transparent !important;
  }
  .service-card.service-card-collapsible.is-open > ul li {
    min-height: 0 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(17,22,23,.06) !important;
    background: transparent !important;
    font-size: 13px !important;
  }
  .service-card.service-card-collapsible.is-open > .card-link {
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 16px 15px !important;
    padding: 12px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111617 !important;
    font-size: 12px !important;
  }

  .reference-client-logo {
    flex-basis: 118px !important;
    min-width: 118px !important;
    min-height: 70px !important;
  }
}


/* v1.0.28 — single contact icons, clean mobile service interiors, Google reviews */

/* Disable the v1.0.27 pseudo-icons. JavaScript now guarantees exactly one real SVG. */
.contact-method-icon::before,
.contact-link-icon::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}
.contact-method-icon > svg,
.contact-link-icon > svg,
.contact-method-icon .icon,
.contact-link-icon .icon {
  position: static !important;
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  color: #111617 !important;
}

/* Google review strip at the bottom of the homepage. */
.google-reviews-section {
  padding: 62px var(--content-pad) 68px;
  border-top: 1px solid var(--line);
  background: #f8f7f3;
}
.google-reviews-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.google-reviews-head h2 {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: .98;
  letter-spacing: -.045em;
}
.google-rating {
  min-width: 155px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
}
.google-rating strong {
  font-size: 28px;
  line-height: 1;
}
.google-stars,
.google-review-stars {
  letter-spacing: .08em;
  font-size: 13px;
}
.google-rating small {
  color: var(--muted);
  font-size: 10px;
}
.google-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.google-review-card {
  min-height: 170px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.google-review-card > p {
  margin: 16px 0 26px;
  color: #444947;
  font-size: 15px;
  line-height: 1.65;
}
.google-review-card footer {
  margin-top: auto;
  display: grid;
  gap: 3px;
}
.google-review-card footer strong {
  font-size: 12px;
}
.google-review-card footer span {
  color: var(--muted);
  font-size: 10px;
}
.google-review-link {
  margin-top: 12px;
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  background: #111617;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

/* Mobile services: full, intentional inner boxes and uncut separators. */
@media (max-width: 680px) {
  .service-card.service-card-collapsible.is-open > p {
    margin: 0 16px 14px !important;
    padding: 14px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(17,22,23,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666b69 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .service-card.service-card-collapsible.is-open > ul {
    box-sizing: border-box !important;
    width: auto !important;
    margin: 0 16px 12px !important;
    padding: 0 14px !important;
    display: block !important;
    border: 1px solid rgba(17,22,23,.09) !important;
    border-radius: 14px !important;
    background: #fafaf8 !important;
    overflow: hidden !important;
  }

  .service-card.service-card-collapsible.is-open > ul li {
    box-sizing: border-box !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17,22,23,.075) !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .service-card.service-card-collapsible.is-open > ul li:last-child {
    border-bottom: 0 !important;
  }

  .service-card.service-card-collapsible.is-open > ul li .icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px !important;
  }

  .service-card.service-card-collapsible.is-open > .card-link {
    box-sizing: border-box !important;
    width: calc(100% - 32px) !important;
    min-height: 44px !important;
    margin: 0 16px 16px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #111617 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
  }

  .google-reviews-section {
    padding: 42px var(--content-pad) 46px;
  }
  .google-reviews-head {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
  }
  .google-reviews-head h2 {
    font-size: clamp(34px, 10vw, 48px);
  }
  .google-rating {
    width: fit-content;
    min-width: 135px;
    padding: 13px 15px;
  }
  .google-review-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .google-review-card {
    min-height: 0;
    padding: 18px;
    border-radius: 16px;
  }
  .google-review-card > p {
    margin: 12px 0 18px;
    font-size: 14px;
  }
}


/* v1.0.29 — clean phone icon, local-reference presentation, single divider */
.contact-method-icon,
.contact-link-icon {
  overflow: visible !important;
  padding: 1px !important;
  box-sizing: content-box !important;
}
.contact-method-icon svg,
.contact-link-icon svg,
.contact-method-icon .icon,
.contact-link-icon .icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  overflow: visible !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Reference customer cards are neutral white/soft gray rather than metallic. */
.reference-client-logo {
  background: rgba(255,255,255,.9) !important;
  border-color: rgba(17,22,23,.11) !important;
  box-shadow: 0 5px 14px rgba(17,22,23,.035) !important;
}
.reference-client-logo img,
.reference-client-logo:hover img {
  filter: grayscale(1) saturate(0) contrast(.96) !important;
  opacity: .82 !important;
}
.reference-client-logo:hover {
  background: #fff !important;
  border-color: rgba(17,22,23,.18) !important;
}

@media (max-width: 680px) {
  /* Exactly one visual separation before the CTA: the list's lower edge. */
  .service-card.service-card-collapsible.is-open > .card-link {
    border-top: 0 !important;
    box-shadow: none !important;
  }
  .service-card.service-card-collapsible.is-open > ul {
    margin-bottom: 10px !important;
  }
}


/* v1.0.30 — safe phone icon and single separator before "Mehr erfahren" */
.contact-method-icon,
.contact-link-icon {
  overflow: visible !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.contact-method-icon .icon-phone,
.contact-link-icon .icon-phone {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin-left: 1px !important;
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;
}

@media (max-width: 680px) {
  /* The rounded list box itself is the only visual separation above the CTA. */
  .service-card.service-card-collapsible.is-open > .card-link,
  .service-card.service-card-collapsible.is-open > .card-link:before,
  .service-card.service-card-collapsible.is-open > .card-link:after {
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .service-card.service-card-collapsible.is-open > .card-link {
    margin-top: 0 !important;
    padding-top: 11px !important;
  }
}


/* v1.0.36 — privacy-consistent consent UI and social footer */
.footer-columns {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(30px, 5vw, 70px) !important;
}

.footer-social a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
}

.footer-social .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.cookie-consent .cookie-actions {
  align-items: stretch;
}

.cookie-consent .cookie-actions .consent-choice {
  min-width: 168px;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid #5b6264 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.cookie-consent .cookie-actions .consent-choice:hover,
.cookie-consent .cookie-actions .consent-choice:focus-visible {
  border-color: #fff !important;
  background: #fff !important;
  color: #111617 !important;
}

@media (max-width: 1000px) {
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .footer-columns {
    grid-template-columns: 1fr !important;
  }

  .cookie-consent .cookie-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .cookie-consent .cookie-actions .consent-choice {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* v1.0.37 — footer top alignment and compact desktop privacy banner */
@media (min-width: 1001px) {
  .footer-columns {
    align-items: start !important;
  }

  .footer-social {
    align-self: start !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
    gap: 10px !important;
  }

  .footer-social strong {
    margin-bottom: 7px !important;
  }

  .cookie-consent {
    width: min(520px, calc(100% - 36px)) !important;
    max-width: 520px !important;
    right: 18px !important;
    bottom: 18px !important;
    left: auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }

  .cookie-consent-inner {
    padding: 11px 12px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 11px !important;
  }

  .cookie-copy strong {
    margin-bottom: 3px !important;
    font-size: 13px !important;
  }

  .cookie-copy p {
    font-size: 10px !important;
    line-height: 1.38 !important;
  }

  .cookie-consent .cookie-actions {
    gap: 6px !important;
  }

  .cookie-consent .cookie-actions .consent-choice {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}


/* v1.0.39 — online status dot and rotating Google reviews */
.hero .eyebrow > span {
  transition: background-color .35s ease, box-shadow .35s ease;
}
.hero .eyebrow > span.is-online {
  background: #21b35b;
  box-shadow: 0 0 0 5px rgba(33, 179, 91, .14);
}
.google-review-card[hidden] { display: none !important; }
.google-review-card footer a {
  color: var(--muted);
  font-size: 10px;
  text-decoration: none;
}
.google-review-card footer a:hover { color: var(--ink); }