:root{
      /* Deine Farben (Beispielwerte – ersetz sie gern durch deine exakten Hex-Codes) */
      --white: #ffffff;
      --blue-100: #e9f3ff;   /* sehr helles Blau für Flächen */
      --blue-300: #8fc3ff;   /* hellblau Akzent */
      --blue-600: #2b6cb0;   /* dunkleres Blau für Akzentlinien (optional) */

      --violet-100: #f3edff; /* sehr helles Violett für Flächen */
      --violet-400: #b6a2ff; /* hellviolett Akzent */
      --violet-600: #6b46c1; /* dunkleres Violett für Buttons */

      --text: #1f2937;       /* anthrazit */
      --muted: #6b7280;      /* grau */
      --border: rgba(31,41,55,0.12);
      --shadow: 0 10px 30px rgba(31,41,55,0.10);

      --radius: 18px;
      --maxw: 1120px;
    }

    *{ box-sizing: border-box; }
    body{
      font-family: 'Roboto Flex', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 400;
      line-height: 1.55;
      color: var(--text);
}

    a{ color: inherit; }
    .container{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 20px;
    }

    /* Header */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 0;
      gap: 14px;
    }
    .brand{
      display:flex;
      align-items:baseline;
      gap: 10px;
      text-decoration:none;
      font-weight: 700;
      letter-spacing: 0.2px;
    }
    .brand small{
      font-weight: 600;
      color: var(--muted);
    }
    .navlinks{
      display:flex;
      align-items:center;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .navlinks a{
      text-decoration:none;
      color: var(--muted);
      font-weight: 600;
      font-size: 14px;
      padding: 8px 10px;
      border-radius: 999px;
    }

    .navlinks a.btn-primary{
      color: var(--white);
      }

    .navlinks a.btn-primary :hover{
      color: var(--white);
      }

    .navlinks a:hover{
      background: rgba(143,195,255,0.18);
      color: var(--text);
    }

    /* Buttons */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      text-decoration:none;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 700;
      border: 1px solid transparent;
      transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
      cursor:pointer;
      user-select:none;
      white-space: nowrap;
    }
    .btn-primary{
      background: var(--violet-600);
      color: var(--white);
      box-shadow: 0 10px 20px rgba(107,70,193,0.22);
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(107,70,193,0.25);
    }
    .btn-outline{
      background: transparent;
      border-color: var(--border);
      color: var(--text);
    }
    .btn-outline:hover{ background: rgba(243,237,255,0.55); }

    .audio-btn{  display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      text-decoration:none;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 700;
      border: 1px solid transparent;
      transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
      cursor:pointer;
      user-select:none;
      white-space: nowrap;
    }
    .audio-btn{
      background: var(--violet-600);
      color: var(--white);
      box-shadow: 0 10px 20px rgba(107,70,193,0.22);
    }
   .audio-btn{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(107,70,193,0.25);
    }
    .audio-btn{
      background: transparent;
      border-color: var(--border);
      color: var(--text);
    }
    .audio-btn:hover{ background: rgba(243,237,255,0.55); 
    }

/* 📞 Telefon-Button */
   .contact-actions-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}

.contact-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
}

.contact-social{
  margin-top: 10px; /* enger an die Buttons */
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  text-align: center;
}



    /* Sections */
    section{
      padding: 70px 0;
    }
    .section-tight{ padding: 54px 0; }

    /* Hero */
    .hero{
      padding-top: 46px;
      background:
        radial-gradient(1200px 600px at 20% -10%, var(--blue-100), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, var(--violet-100), transparent 60%),
        linear-gradient(180deg, rgba(233,243,255,0.45), transparent 65%);
      border-bottom: 1px solid var(--border);
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 36px;
      align-items:center;
      padding: 24px 0 18px;
    }
    h1{
      font-size: clamp(30px, 3.4vw, 44px);
      line-height: 1.12;
      margin: 0 0 10px;
      letter-spacing: -0.4px;
    }
    .kicker{
      display:inline-flex;
      gap: 10px;
      align-items:center;
      color: var(--muted);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(143,195,255,0.20);
      border: 1px solid rgba(143,195,255,0.35);
      color: var(--text);
      font-weight: 800;
      font-size: 12px;
    }
    .claim{
      font-size: clamp(18px, 1.6vw, 22px);
      color: var(--blue-600);
      font-weight: 800;
      margin: 8px 0 14px;
    }
    .lead{
      font-size: 16px;
      color: var(--text);
      margin: 0 0 18px;
      max-width: 60ch;
    }
    .hero-actions{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items:center;
      margin-top: 16px;
    }
    .microcopy{
      font-size: 13px;
      color: var(--muted);
      margin-top: 10px;
    }
    .portrait{
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 8px);
      box-shadow: var(--shadow);
      overflow:hidden;
      aspect-ratio: 4/5;
      min-height: 340px;
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
    }
    .portrait img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }
    .portrait .placeholder{
      padding: 22px;
      text-align:center;
      color: var(--muted);
      font-weight: 700;
    }
    .portrait-badge{
      position:absolute;
      bottom: 14px;
      left: 14px;
      right: 14px;
      background: rgba(255,255,255,0.90);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 13px;
      color: var(--muted);
    }
    .portrait-badge b{ color: var(--text); }

    /* Headings */
    h2{
      font-size: clamp(22px, 2.2vw, 30px);
      letter-spacing: -0.2px;
      margin: 0 0 12px;
    }
    .sub{
      color: var(--muted);
      margin: 0 0 22px;
      max-width: 75ch;
    }

    /* Problem bullets */
 /* Problem-Card begrenzen (damit rechts nicht so viel Leerfläche ist) */
.problem-card{
  max-width: 900px;
  margin: 0 auto;
  padding: 32px
}

/* Überschrift + Subline nicht über die volle Breite ziehen */
.problem-card h2,
.problem-card .sub{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Slider/Wechsler */
.pp-card{
  margin-top: 18px auto 0;
  width: 100%;
  max-width: 720px;

  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;

  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.pp-slide{
  min-height: 56px;
}

.pp-count{
  font-size: 12px;
  opacity: .65;
  margin-bottom: 4px;
}

.pp-text{
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
}

.pp-nav{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
}

.pp-nav:disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* optional: disabled Pfeil nicht „grau“, sondern unsichtbar */
.pp-nav:disabled{
  visibility: hidden;
}



    /* Highlight section */
    .highlight{
      background: linear-gradient(180deg, var(--blue-100), var(--white));
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .highlight .quote{
      font-size: 18px;
      margin: 0;
      padding: 18px 18px;
      border-left: 6px solid rgba(182,162,255,0.8);
      background: rgba(243,237,255,0.55);
      border-radius: 14px;
    }

    /* Role section */
    .two-col{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
    }
    .list{
      margin: 14px 0 0;
      padding: 0;
      list-style:none;
      display:grid;
      gap: 10px;
    }
    .li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .icon{
      width: 22px;
      height: 22px;
      border-radius: 8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      margin-top: 2px;
      font-weight: 900;
      font-size: 14px;
      background: rgba(143,195,255,0.20);
      border: 1px solid rgba(143,195,255,0.35);
      color: var(--blue-600);
    }
    .icon.violet{
      background: rgba(182,162,255,0.22);
      border-color: rgba(182,162,255,0.40);
      color: var(--violet-600);
    }
    .role-note{
      margin-top: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px dashed rgba(31,41,55,0.25);
      color: var(--muted);
      font-size: 14px;
    }

    /* Pillars */
    .pillars{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
    .pillar{
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--white);
      box-shadow: 0 10px 24px rgba(31,41,55,0.06);
      padding: 20px;
      position: relative;
      overflow:hidden;
    }
    .pillar::before{
      content:"";
      position:absolute;
      inset: 0;
      pointer-events:none;
      opacity: 0.35;
    }
    .pillar.blue::before{
      background: radial-gradient(450px 250px at 20% 10%, rgba(143,195,255,0.35), transparent 70%);
    }
    .pillar.violet::before{
      background: radial-gradient(450px 250px at 20% 10%, rgba(182,162,255,0.35), transparent 70%);
    }
    .pillar h3{
      margin: 0 0 8px;
      font-size: 18px;
      letter-spacing: -0.2px;
    }
    .pillar p{
      margin: 0 0 12px;
      color: var(--muted);
    }

	 /* Praxisbeispiele – sauber gekapselt */
	.practice-card{
  	max-width: 900px;
 	 margin: 0 auto;
  	padding: 32px;
	}

	.practice-card h2,
	.practice-card .sub{
  	max-width: 720px;
  	margin-left: auto;
  	margin-right: auto;
	}

	.practice-grid{
  	margin-top: 24px;
  	display: grid;
  	gap: 20px;
	}

	/* Einzelnes Praxisbeispiel */
	.practice-item{
  	max-width: 720px;
  	margin: 0 auto;
  	padding: 20px 22px;

  	border: 1px solid rgba(0,0,0,0.12);
  	border-radius: 16px;
  	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  	background: #fff;
	}

	.practice-item h3{
  	font-size: 16px;
  	font-weight: 600;
  	margin-bottom: 6px;
	}

	.practice-item p{
  	font-size: 15px;
  	line-height: 1.5;
  	margin: 0;
	}

	/* Mobile etwas kompakter */
	@media (max-width: 640px){
  	.practice-card{
    padding: 24px;
  	}

  	.practice-item{
    padding: 18px;
  	}
	}
    /* Process steps */
    .steps{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 18px;
    }
    .step{
      padding: 18px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--white);
      box-shadow: 0 10px 24px rgba(31,41,55,0.06);
    }
    .num{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 900;
      background: rgba(143,195,255,0.22);
      border: 1px solid rgba(143,195,255,0.35);
      color: var(--blue-600);
      margin-bottom: 10px;
    }
    .step h4{ margin: 0 0 6px; font-size: 16px; }
    .step p{ margin: 0; color: var(--muted); font-size: 14px; }

    /* About teaser */
    .about{
      display:grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: 18px;
      align-items:center;
    }
    .aboutbox{
      background: linear-gradient(180deg, rgba(233,243,255,0.65), rgba(243,237,255,0.40));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
    }
    .aboutbox p{ margin: 0; color: var(--muted); }
    .link{
      display:inline-flex;
      margin-top: 10px;
      font-weight: 800;
      color: var(--violet-600);
      text-decoration: none;
    }
    .link:hover{ text-decoration: underline; }

    /* CTA footer */
    .cta{
      background: radial-gradient(1200px 600px at 20% 0%, rgba(182,162,255,0.28), transparent 55%),
                  radial-gradient(1000px 600px at 90% 20%, rgba(143,195,255,0.22), transparent 55%),
                  linear-gradient(180deg, var(--violet-100), var(--white));
      border-top: 1px solid var(--border);
    }
    .cta-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      flex-wrap: wrap;
      padding: 10px 0;
    }
    .cta-inner p{
      margin: 0;
      color: var(--muted);
      max-width: 70ch;
    }

    /* Footer */
    footer{
      padding: 34px 0;
      color: var(--muted);
      font-size: 14px;
      border-top: 1px solid var(--border);
    }
    .footergrid{
      display:flex;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    footer a{ color: var(--muted); text-decoration: none; }
    footer a:hover{ text-decoration: underline; }

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{ grid-template-columns: 1fr; }
      .portrait{ max-width: 420px; }
      .bullets{ grid-template-columns: 1fr; }
      .two-col{ grid-template-columns: 1fr; }
      .pillars{ grid-template-columns: 1fr; }
      .steps{ grid-template-columns: 1fr 1fr; }
      .about{ grid-template-columns: 1fr; }
    }
    @media (max-width: 560px){
      section{ padding: 56px 0; }
      .steps{ grid-template-columns: 1fr; }
      .navlinks{ display:none; } /* optional: simple mobile header */
    }

    .about-image{
  max-width: 320px;   /* ← DAS ist der Hauptregler */
  margin: 0 auto 24px; /* zentriert + Abstand nach unten */
}

.about-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px; /* optional – passt zu deinem Design */
}