/*
Theme Name: Philip Hilgendorf New
Theme URI: https://philip-hilgendorf.com
Description: Custom WordPress theme for Philip Hilgendorf with Dark/Light Mode
Author: Philip Hilgendorf
Author URI: https://philip-hilgendorf.com
Version: 1.0
*/

/* ===========================
   Local Fonts
   =========================== */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ===========================
   CSS Variables - Light Theme
   =========================== */
:root {
  --background: 0 0% 93.3%;
  --foreground: 240 10% 3.9%;

  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  --primary: 262 52% 47%;
  --primary-foreground: 0 0% 98%;

  --secondary: 0 0% 96.1%;
  --secondary-foreground: 240 5.9% 10%;

  --muted: 0 0% 90%;
  --muted-foreground: 240 3.8% 46.1%;

  --accent: 174 100% 29.2%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 89.8%;
  --input: 0 0% 98%;
  --ring: 262 52% 47%;

  --radius: 0.5rem;

  --chart-1: 262 52% 47%;
  --chart-2: 174 100% 29.2%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ===========================
   CSS Variables - Dark Theme
   =========================== */
.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;

  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;

  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;

  --primary: 262 52% 47%;
  --primary-foreground: 0 0% 98%;

  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;

  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;

  --accent: 174 100% 29.2%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 262 52% 47%;

  --chart-1: 262 52% 47%;
  --chart-2: 174 100% 29.2%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ===========================
   Base Styles
   =========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

html, body {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: hsl(var(--accent));
}

/* ===========================
   Layout Components
   =========================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-primary:hover {
background-color: hsl(var(--primary) / .9);
  opacity: 0.9;
  color: hsl(var(--primary-foreground));
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

/* ===========================
   Header Styles
   =========================== */
.site-header {
  background-color: hsl(var(--background) / .6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
  height: 56px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

body {
  padding-top: 56px;
}

.site-header .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  max-width: 1536px;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

.site-branding {
  flex-shrink: 0;
}

.site-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.site-title a {
  color: hsl(var(--foreground));
}

.site-title a:hover {
  color: hsl(var(--primary));
}

.main-navigation {
  display: flex;
  align-items: center;
  gap: 20px;
}

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


.main-navigation ul a[aria-current="page"] {
    color: hsl(var(--foreground));
    font-weight: 500;
}

.main-navigation a {
  color: hsl(var(--foreground) / .6);
  font-size: 14px;
}

.main-navigation a:hover {
    color: hsl(var(--foreground));
}

/* Sub-Menu / Dropdown */
.main-navigation ul li {
  position: relative;
}

.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translateX(-50%);
  min-width: 200px;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px hsl(var(--foreground) / .08);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}

.main-navigation li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.main-navigation .sub-menu li {
  position: relative;
  width: 100%;
}

.main-navigation .sub-menu a {
  display: block;
  padding: 8px 16px;
  white-space: nowrap;
  color: hsl(var(--foreground) / .7);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-navigation .sub-menu a:hover {
  background-color: hsl(var(--foreground) / .05);
  color: hsl(var(--foreground));
}

/* Nested sub-menu (level 3+) */
.main-navigation .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  transform: translateX(0) translateY(8px);
}

.main-navigation .sub-menu li:hover > .sub-menu {
  transform: translateX(0) translateY(0);
}

/* Arrow indicator for parent items */
.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: all 0.3s;
}

.menu-item-has-children:hover > a::after {
  transform: rotate(225deg);
  top:2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: hsl(var(--foreground));
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.btn-accent {
  background-color: transparent;
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--accent));
  border-radius: calc(var(--radius) - 2px);
  padding: .5rem 1rem;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.btn-accent:hover {
  background-color: hsl(var(--accent));
  color: #ffffff;
}

/* ===========================
   Dark Mode Toggle Button
   =========================== */
.theme-toggle {
  color: hsl(var(--secondary-foreground));
  border: 1px solid hsl(var(--secondary));
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  background-color: transparent;
}

.theme-toggle:hover {
    color: hsl(var(--secondary));
    background-color: hsl(var(--accent));
    border-color: hsl(var(--accent));
}

.theme-toggle-icon {
    width: 20px;
    height: 20px;    
    font-size: 1.1rem;
    line-height: 1.25rem !important;
}

/* ===========================
   Main Content
   =========================== */
.site-content {
  padding: 40px 0;
  min-height: calc(100vh - 200px);
}

.post {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 30px;
}

.post-title {
  font-size: 32px;
  margin-bottom: 10px;
  color: hsl(var(--foreground));
}

.post-meta {
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  margin-bottom: 20px;
}

/* ===========================
   Sidebar
   =========================== */
.sidebar {
  background-color: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
  border: 1px solid hsl(var(--sidebar-border));
  border-radius: var(--radius);
  padding: 20px;
}

.sidebar-widget {
  margin-bottom: 30px;
}

.sidebar-widget h3 {
  color: hsl(var(--sidebar-primary));
  margin-bottom: 15px;
}

/* ===========================
   Footer
   =========================== */
.site-footer {
  background-color: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  padding: 30px 0;
  color: hsl(var(--muted-foreground));
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-content p {
  margin: 0;
  font-size: 14px;
}

.footer-navigation {
  display: flex;
}

.footer-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;
}

.footer-menu li {
  margin: 0;
}

.footer-menu a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-menu a:hover {
  color: hsl(var(--primary));
}

/* ===========================
   Form Elements
   =========================== */
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 10px;
  width: 100%;
  transition: border-color 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

/* ===========================
   Home Hero Section
   =========================== */
.home-hero-section {
  padding: 80px 0;
  min-height: calc(90vh - 56px);
  display: flex;
  align-items: center;
}

.hero-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.hero-text-content {
  max-width: 600px;
}

.hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  color: hsl(var(--foreground));
  margin-bottom: 24px;
}

.hero-description {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero-description p {
  margin-bottom: 16px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.avatar-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 50%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border: 4px solid hsl(var(--card));
}

/* ===========================
   Four Boxes Section
   =========================== */
.four-boxes-section {
  padding: 80px 0;
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.section-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.section-subline {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
}

.section-subline p {
  margin: 0;
}

.boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.box-item {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.box-item:hover {
  border-color: hsl(var(--primary));
  box-shadow: 0 4px 12px hsla(var(--primary), 0.1);
  transform: translateY(-4px);
}

.box-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-icon svg {
  font-size: 32px;
  height: 30px;
  width: 30px;
  color: hsl(var(--primary));
}

.box-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 12px;
  line-height: 1.3;
}

.box-content {
  color: hsl(var(--muted-foreground));
  
  line-height: 1.6;
}

.box-content p {
  margin: 0;
}

/* ===========================
   CTA Card Section
   =========================== */
.cta-card-section {
  padding: 80px 0;
}

.cta-card {
  background-color: hsl(var(--primary));
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 400px;
}

.cta-card-content {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-card-image {
  position: relative;
  overflow: hidden;
}

.cta-card-image-top-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(to right, hsl(var(--primary)) 0,   transparent 100%);
}

.cta-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cta-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--primary-foreground));
  margin-bottom: 16px;
}

.cta-text {
  color: hsl(var(--primary-foreground) / 0.85);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.cta-text p {
  margin: 0;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background-color: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-cta:hover {
  background-color: hsl(var(--primary-foreground) / 0.9);
  color: hsl(var(--primary));
}

.btn-cta i {
  transition: transform 0.2s ease;
}

.btn-cta:hover i {
  transform: translateX(4px);
}

/* ===========================
   Three Boxes with Image Section
   =========================== */
.three-boxes-image-section {
  padding: 80px 0;
}

.three-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.three-box-item {
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

.three-box-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.three-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.three-box-item:hover .three-box-image img {
  transform: scale(1.05);
}

.three-box-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.three-box-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 12px;
  line-height: 1.3;
}

.three-box-text {
  color: hsl(var(--foreground) / 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.three-box-text p {
  margin: 0;
}

.three-box-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--primary));
  
  font-weight: 500;
  transition: gap 0.2s ease;
}

.three-box-link:hover {
  gap: 10px;
  color: hsl(var(--primary));
}

.three-box-link i {
  font-size: 14px;
}

.three-boxes-footer {
  text-align: center;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: hsl(var(--foreground));
  padding: 12px 24px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

.btn-outline i {
  transition: transform 0.2s ease;
}

.btn-outline:hover i {
  transform: translateX(4px);
}


/* ===========================
   Project Boxes Section
   =========================== */
.project-boxes-section {
  padding: 80px 0;
}

.project-boxes-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}

.filter-tag {
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-tag:hover {
  background-color: hsl(var(--secondary));
}

.filter-tag.active {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
}

.project-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.project-box-item {
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

.project-box-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.project-box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-box-item:hover .project-box-image img {
  transform: scale(1.05);
}

.project-box-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.project-box-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 12px;
  line-height: 1.3;
}

.project-box-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.project-box-tag {
  background-color: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.project-box-text {
  color: hsl(var(--foreground) / 0.7);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
  flex-grow: 1;
}

.project-box-text p {
  margin: 0;
}

.project-box-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--primary));
  font-weight: 500;
  transition: gap 0.2s ease;
}

.project-box-link:hover {
  gap: 10px;
  color: hsl(var(--primary));
}

.project-box-link i {
  font-size: 14px;
}

.project-boxes-footer {
  text-align: center;
}

.show-more-btn {
  cursor: pointer;
}

.show-more-btn i {
  transition: transform 0.2s ease;
}


/* ===========================
   Image and Text Section
   =========================== */
.image-text-section {
  padding: 80px 0;
}

.image-text-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.image-text-image {
  border-radius: var(--radius);
  overflow: hidden;
}

.image-text-image img {
  width: 100%;
  height: auto;
  display: block;
}

.image-text-subline {
  display: inline-block;
  color: hsl(var(--foreground));
  font-size: .75rem;
  line-height: 1;
  font-weight: 600;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  padding-top: .125rem;
  padding-bottom: .125rem;
  padding-left: .625rem;
  padding-right: .625rem;
}

.image-text-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin: 20px 0;
}

.image-text-description {
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.image-text-description p {
  margin: 0 0 16px;
}

.image-text-description p:last-child {
  margin-bottom: 0;
}

.image-text-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.image-text-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: hsl(var(--muted-foreground));
  font-size: 16px;
}

.image-text-list li i {
  color: hsl(var(--primary));
  font-size: 18px;
}

/* ===========================
   Headline and Text Section
   =========================== */
.headline-text-section {
  padding: 80px 0;
}

.headline-text-section .headline-text-content {
  margin-bottom: 30px;
}

.headline-text-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 24px;
  line-height: 1.2;
}

.headline-text-section h1.headline-text-headline {
  font-size: 48px;
}

.headline-text-section h2.headline-text-headline {
  font-size: 40px;
}

.headline-text-section h3.headline-text-headline {
  font-size: 32px;
}

.headline-text-section h4.headline-text-headline {
  font-size: 24px;
}

.headline-text-content {
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1.7;
}

.headline-text-content p {
  margin-bottom: 16px;
}

.headline-text-content p:last-child {
  margin-bottom: 0;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1024px) {
    .hero-headline {
        font-size: 3rem;
    }

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

    .section-headline {
        font-size: 36px;
    }

    .cta-headline {
        font-size: 30px;
    }

    .three-boxes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .three-box-image {
      aspect-ratio: 16 / 9;
    }

    .image-text-wrapper {
        gap: 40px;
    }

    .image-text-headline {
        font-size: 30px;
    }

    /* Reviews tablet */
    .review-card {
        width: calc((100% - 24px) / 2);
    }
}

/* ===========================
   Reviews Section
   =========================== */
.reviews-section {
  padding: 80px 0;
  background-color: hsl(var(--muted));
}

.reviews-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.reviews-nav {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.reviews-nav:hover {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.reviews-nav i {
  font-size: 20px;
}

.reviews-slider {
  flex-grow: 1;
}

.reviews-track {
  display: flex;
  gap: 24px;
  transition: transform 0.3s ease;
}

.review-card {
  box-shadow:  0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.review-card:hover {
  box-shadow: 0 4px 20px hsla(var(--foreground), 0.08);
}

.review-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid hsl(var(--background));
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 4px;
}

.review-position {
  color: hsl(var(--primary));
  font-size: 14px;
  margin-bottom: 20px;
}

.review-content {
  color: hsl(var(--muted-foreground));
  
  line-height: 1.7;
  font-style: italic;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.review-content p {
  margin: 0;
  display: inline;
}

.review-quote-icon {
  color: hsl(var(--muted-foreground) / 0.5);
  font-size: 18px;
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1024px) {
  .project-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .project-boxes-grid {
    grid-template-columns: 1fr;
  }

  .project-boxes-filter {
    gap: 8px;
  }

  .filter-tag {
    padding: 6px 14px;
    font-size: 13px;
  }

  .project-box-headline {
    font-size: 18px;
  }

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

  .section-headline {
    font-size: 32px;
  }

  .section-subline {
    font-size: 16px;
  }

  .cta-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cta-card-content {
    padding: 40px 30px;
    order: 1;
  }

  .cta-card-image {
    order: 2;
    height: 250px;
    display: none;
  }

  .cta-headline {
    font-size: 26px;
  }

  .cta-text {
    font-size: 15px;
  }

  .three-boxes-grid {
    grid-template-columns: 1fr;
  }

  .three-box-headline {
    font-size: 20px;
  }

  .image-text-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .image-text-headline {
    font-size: 26px;
  }

  .image-text-description {
    font-size: 15px;
  }

  /* Mobile Header */
  .site-header .container {
    flex-wrap: wrap;
    position: relative;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
    border-bottom: 1px solid hsl(var(--border));
    padding: 20px;
    display: none;
    z-index: 100;
  }

  .main-navigation.active {
    display: block;
    margin-top: 5px;
    padding: 0;
  }

  .main-navigation ul {
    flex-direction: column;
    gap: 0;
  }

  .main-navigation ul li {
    border-bottom: 1px solid hsl(var(--border));
    width: 100%;
  }

  .main-navigation ul li:last-child {
    border-bottom: none;
  }

  .main-navigation ul a {
    text-align: left;
    display: block;
    padding: 12px 30px;
    font-size: 16px;
  }

  .main-navigation li:hover > .sub-menu {
    transform: none!important;
  }

  /* Mobile sub-menu */
  .main-navigation .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: none;
    transition: none;
  }


  .main-navigation .sub-menu li {
    padding: 0 40px;
  }

  .main-navigation .sub-menu.active {
    display: flex;
  }

  .main-navigation .sub-menu a {
    padding: 10px 0;
    font-size: 15px;
    white-space: normal;
  }

  .main-navigation .sub-menu a:hover {
    background-color: transparent;
  }

  .main-navigation .sub-menu li {
    border-bottom: 1px solid hsl(var(--border) / .5);
  }

  .main-navigation .sub-menu li:last-child {
    border-bottom: none;
  }

  /* Mobile sub-menu toggle arrow */
  .menu-item-has-children > a::after {
    transition: transform 0.2s ease;
  }

  .menu-item-has-children.sub-menu-open > a::after {
    transform: rotate(-135deg);
    top: 2px;
  }

  /* Nested sub-menu mobile */
  .main-navigation .sub-menu .sub-menu {
    top: auto;
    left: auto;
    transform: none;
  }

  .header-actions .btn-accent {
    display: none;
  }

  .hero-content-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-headline {
    font-size: 36px;
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-accent {
    justify-content: center;
  }

  .avatar-image {
    max-width: 300px;
  }

  /* Headline Text responsive */
  .headline-text-section h1.headline-text-headline {
    font-size: 36px;
  }

  .headline-text-section h2.headline-text-headline {
    font-size: 30px;
  }

  .headline-text-section h3.headline-text-headline {
    font-size: 26px;
  }

  /* Reviews responsive */
  .reviews-slider-wrapper {
    flex-direction: column;
    gap: 24px;
  }

  .reviews-nav {
    display: none;
  }

  .reviews-track {
    flex-direction: column;
  }

  .review-card {
    width: 100%;
  }

  /* Footer responsive */
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
}

/* ===========================
   Ideen Generator Section
   =========================== */
.ideen-generator-section {
  padding: 80px 0;
  min-height: calc(80vh - 56px);
  display: flex;
  align-items: center;
}

.ideen-generator-wrapper {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.ideen-generator-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 32px;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideen-generator-icon svg {
  font-size: 32px;
  height: 30px;
  width: 30px;
  color: hsl(var(--primary));
}

.ideen-generator-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.ideen-generator-headline .text-primary {
  color: hsl(var(--primary));
}

.ideen-generator-description {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.ideen-generator-description p {
  margin: 0;
}

.ideen-generator-form {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
}

.ideen-generator-input-wrapper {
  margin-bottom: 16px;
}

.ideen-generator-textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.ideen-generator-textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.ideen-generator-textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

.ideen-generator-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.ideen-generator-button i {
  font-size: 20px;
}

.ideen-generator-results {
  margin-top: 32px;
  text-align: left;
}

.ideen-generator-results:empty {
  display: none;
}

/* Ideen Generator Responsive */
@media (max-width: 768px) {
  .ideen-generator-section {
    padding: 60px 0;
  }

  .ideen-generator-headline {
    font-size: 32px;
  }

  .ideen-generator-description {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .ideen-generator-form {
    padding: 12px;
  }

  .ideen-generator-textarea {
    min-height: 100px;
    padding: 12px;
    
  }

  .ideen-generator-button {
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* ===========================
   Hero Section
   =========================== */
.hero-section {
  padding: 80px 0;
  display: flex;
  align-items: center;
}

.hero-section-wrapper {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.hero-section-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 32px;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section-icon svg {
  font-size: 32px;
  height: 30px;
  width: 30px;
  color: hsl(var(--primary));
}

.hero-section-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.hero-section-headline .text-primary {
  color: hsl(var(--primary));
}

.hero-section-description {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
}

.hero-section-description p {
  margin: 0;
}

/* Hero Section Responsive */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0;
  }

  .hero-section-headline {
    font-size: 32px;
  }

  .hero-section-description {
    font-size: 16px;
  }
}

/* ===========================
   Portfolio Hero Section
   =========================== */
.portfolio-hero-section {
  padding: 60px 0 40px;
  background-color: hsl(var(--muted) / .4);
}

.portfolio-hero-wrapper {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.portfolio-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}

.portfolio-hero-back:hover {
  color: hsl(var(--primary));
}

.portfolio-hero-back svg {
  width: 16px;
  height: 16px;
}

.portfolio-hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.portfolio-hero-description {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
}

.portfolio-hero-description p {
  margin: 0;
}

/* Portfolio Hero Section Responsive */
@media (max-width: 768px) {
  .portfolio-hero-section {
    padding: 40px 0 24px;
  }

  .portfolio-hero-headline {
    font-size: 32px;
  }

  .portfolio-hero-description {
    font-size: 16px;
  }
}

/* ===========================
   Portfolio Content Grid
   =========================== */
.portfolio-content-grid {
  padding: 40px 0;
}

.portfolio-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

.portfolio-main-content {
  min-width: 0;
}

.portfolio-main-content .portfolio-main-image {
  margin-bottom: 40px;    
  border-radius: var(--radius);
    overflow: hidden; 
    --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.portfolio-main-content .portfolio-main-image img {
  margin-bottom: -10px;
  width: 100%;
  object-fit: cover;
  height: auto;
}

/* Portfolio Content Grid Responsive */
@media (max-width: 1024px) {
  .portfolio-content-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .portfolio-sidebar {
    position: relative!important;
    top: 0!important;
    order: -1;
  }
}

/* ===========================
   Portfolio Sidebar
   =========================== */
.portfolio-sidebar {
  position: sticky;
  top: 100px;
}

.portfolio-sidebar-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
}

.portfolio-sidebar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 24px;
}

.portfolio-sidebar-item {
  margin-bottom: 20px;
}

.portfolio-sidebar-item:last-of-type {
  margin-bottom: 0;
}

.portfolio-sidebar-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.portfolio-sidebar-item-header svg {
  width: 16px;
  height: 16px;
  color: hsl(var(--muted-foreground));
}

.portfolio-sidebar-label {
  font-size: .875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.portfolio-sidebar-value {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  padding-left: 24px;
}

.portfolio-sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 24px;
  margin-top: 8px;
}

.portfolio-sidebar-tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.portfolio-sidebar-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
}

.portfolio-sidebar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.portfolio-sidebar-button:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.portfolio-sidebar-button svg {
  width: 16px;
  height: 16px;
}

/* ===========================
   Portfolio List
   =========================== */
.portfolio-list-section {
  margin-bottom: 32px;
}

.portfolio-list-section:last-child {
  margin-bottom: 0;
}

.portfolio-list-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 24px;
}

.portfolio-list-headline .portfolio-list-headline-text {
    font-weight: 700;
    font-size: 1.875rem;
}

.portfolio-list-headline svg {
    width: 2rem;
    height: 2rem;
  color: hsl(var(--primary));
}

.portfolio-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portfolio-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.portfolio-list-item span {
    font-size: 1.125rem;
  }

.portfolio-list-item svg {
    width: 1.5rem;
    height: 1.5rem;
  color: hsl(var(--accent));
  flex-shrink: 0;
  margin-top: 2px;
}

/* Portfolio List Responsive */
@media (max-width: 768px) {
  .portfolio-list-headline {
    font-size: 20px;
  }

  .portfolio-list-headline svg {
    width: 24px;
    height: 24px;
  }
}

/* ===========================
   Portfolio Headline Text
   =========================== */
.portfolio-headline-text {
  margin-bottom: 32px;
}

.portfolio-headline-text:last-child {
  margin-bottom: 0;
}

.portfolio-headline-text-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 16px;
}

.portfolio-headline-text-content {
  font-size: 1.125rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

/* Portfolio Headline Text Responsive */
@media (max-width: 768px) {
  .portfolio-headline-text-title {
    font-size: 20px;
  }

  .portfolio-headline-text-content {
    font-size: 15px;
  }
}

/* ===========================
   Portfolio Boxes
   =========================== */
.portfolio-boxes-section {
  margin-bottom: 32px;
}

.portfolio-boxes-section:last-child {
  margin-bottom: 0;
}

.portfolio-boxes-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 24px;
}

.portfolio-boxes-headline svg {
  width: 2rem;
  height: 2rem;
  color: hsl(var(--primary));
}

.portfolio-boxes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.portfolio-box {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px;
}

.portfolio-box-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
}

.portfolio-box-content {
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.portfolio-box-content p {
  margin: 0;
}

/* Portfolio Boxes Responsive */
@media (max-width: 768px) {
  .portfolio-boxes-headline {
    font-size: 20px;
  }

  .portfolio-boxes-headline svg {
    width: 24px;
    height: 24px;
  }

  .portfolio-boxes-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Page Reviews
   =========================== */
.page-reviews-section {
  padding: 80px 0;
}

.page-reviews-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}

.page-reviews-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 16px;
}

.page-reviews-subline {
  font-size: 18px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.page-reviews-subline p {
  margin: 0;
}

.page-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.page-review-card {
  background-color: hsl(var(--card));
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid hsl(var(--border));
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.page-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.page-review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.page-review-info {
  flex: 1;
}

.page-review-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));    
  letter-spacing: -.025em;
  line-height: 1;
}

.page-review-position {
  font-size: .875rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.page-review-content {
  font-style: italic;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.page-review-content p {
  margin: 0;
}

/* Page Reviews Responsive */
@media (max-width: 1024px) {
  .page-reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-reviews-section {
    padding: 60px 0;
  }

  .page-reviews-headline {
    font-size: 28px;
  }

  .page-reviews-subline {
    font-size: 16px;
  }

  .page-reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   CTA without Image
   =========================== */
.cta-without-image-section {
  padding: 60px 0;
}

.cta-without-image-card {
  background-color: hsl(var(--primary) / .05);
  border-radius: var(--radius);
  padding: 30px 40px;
  text-align: center;
  margin: 0 auto;
}

.cta-without-image-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0 0 16px;
}

.cta-without-image-content {
  font-size: 18px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  max-width: 700px;
  margin: 0 auto 32px;
}

.cta-without-image-content p {
  margin: 0;
}

.cta-without-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transition: opacity 0.2s ease;
}

.cta-without-image-button:hover {
  opacity: 0.9;
}

/* CTA without Image Responsive */
@media (max-width: 768px) {
  .cta-without-image-section {
    padding: 40px 0;
  }

  .cta-without-image-card {
    padding: 40px 24px;
  }

  .cta-without-image-headline {
    font-size: 28px;
  }

  .cta-without-image-content {
    font-size: 16px;
  }

  .cta-without-image-button {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* ===========================
   Ideen Generator Captcha
   =========================== */
.ideen-generator-captcha {
  margin-bottom: 16px;
}

.ideen-generator-captcha .f12-captcha.template-1 {
  border: 1px solid hsl(var(--border));
  background-color: transparent;
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

body.dark .ideen-generator-captcha .f12-captcha .captcha-image img {
  filter: invert(1);
}

.f12-captcha.template-1 .c-header {
  border: none;
  background-color: hsl(var(--input));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.f12-captcha.template-1 .c-header .c-input {
  display: flex;
}


.f12-captcha.template-1 .c-hint {
  display: none;
}

.f12-captcha.template-1 input.f12c[data-method="image"] {
    background-color: hsl(var(--input));
    border-color: transparent;
    margin-left: 10px;
    height: 38px;
    border-radius: 0;
}

.ideen-generator-captcha .f12-captcha.template-1:focus-within {
  border-color: hsl(var(--ring));
}

.f12-captcha.template-1 .c-data {
  padding-left: 5px;
  background-color: white;
}

.f12-captcha.template-1 .c-reload {
  margin-right: 5px;
}

.f12-captcha.template-1 .c-reload a {
  border-radius: var(--radius);
  padding: 6px 7px;
}

.f12-captcha.template-1 .c-reload a img {
  margin: 0;
}

body.dark .f12-captcha.template-1 .c-data {
  background-color: black;
}

.ideen-generator-captcha-wrapper {
  display: flex;
  align-items: center;
  margin-left: 10px;
  flex-wrap: wrap;
}

.ideen-generator-captcha-wrapper img {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

.f12-captcha.template-1 .c-reload a {
  background-color: hsl(var(--accent))!important;
}

.ideen-generator-captcha-input {
  flex: 1;
  min-width: 150px;
}

.ideen-generator-error {
  background-color: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
}

/* ===========================
   Ideen Generator Results
   =========================== */
.ideen-result {
  max-width: 900px;
  margin: 0 auto;
}

.ideen-result-header {
  text-align: center;
  margin-bottom: 48px;
}

.ideen-result-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 12px;
}

.ideen-result-subtitle {
  color: hsl(var(--muted-foreground));
        font-size: 1.25rem;
}

.ideen-result-cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

button.ideen-result-share-btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}

.ideen-result-share-btn svg {
  transition: none !important;
}

.ideen-result-share-btn:hover svg {
  transform: none !important;
}

.ideen-result-share-btn--success {
  background-color: hsl(142 76% 36%) !important;
  color: white !important;
}

/* Ist/Soll Grid */
.ideen-result-zustand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.ideen-result-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
}

.ideen-result-card .ideen-result-card-header h3{
    font-size: 1.5rem;
    font-weight: 600;
}

.ideen-result-card .ideen-result-card-intro {
    font-weight: 600;
}
.ideen-result-card--ist {
}

.ideen-result-card--soll {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / .05);
}

.ideen-result-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ideen-result-card-header h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0;
}

.ideen-result-card-icon {
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}

.ideen-result-card-icon svg {
  color: hsl(var(--primary));
}

.ideen-result-card-icon--ist {
  background-color: hsl(var(--destructive) / .1);
  color: hsl(var(--destructive));
}

.ideen-result-card-icon--ist svg {
  color: hsl(var(--destructive));
}

.ideen-result-card-icon--soll {
  background-color: hsl(var(--primary) / .1);
  color: hsl(var(--primary));
}

.ideen-result-card-icon--empfehlung {
  background-color: hsl(var(--accent) / 0.15);
  color: hsl(var(--accent-foreground));
}

.ideen-result-card-icon--empfehlung svg {
  color: hsl(var(--accent-foreground));
}

.ideen-result-card-intro {
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.ideen-result-card-desc {
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Sections */
.ideen-result-section {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  font-size: 1rem;
}

.ideen-result-section h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.ideen-result-section-intro {
  color: hsl(var(--muted-foreground));
  margin-bottom: 20px;
}

/* Empfehlungen */
.ideen-result-empfehlungen {
  border-color: hsl(var(--accent));
  
  background-color: hsl(var(--accent) / .1);
}

.ideen-result-empfehlungen .ideen-result-card-header {
  margin-bottom: 12px;
}

.ideen-result-hinweis {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}

/* Checklist */
.ideen-result-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ideen-result-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  color: hsl(var(--foreground));
}

.ideen-result-checklist li:last-child {
  border-bottom: none;
}

.ideen-result-check {
  flex-shrink: 0;
  color: hsl(var(--primary));
}

.ideen-result-check svg {
  width: 20px;
  height: 20px;
}

/* Zeitrahmen Stats */
.ideen-result-zeitrahmen h3 {
  font-size: 1.5rem;
  margin-bottom: 24px;
}

.ideen-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.ideen-result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ideen-result-stat-icon {
  color: hsl(var(--primary));
}

.ideen-result-stat-icon svg {
  width: 2rem;
  height: 2rem;
}

.ideen-result-stat-label {
  color: hsl(var(--muted-foreground));
  font-size: .875rem;
}

.ideen-result-stat-value {
  color: hsl(var(--foreground));
  font-size: 1.25rem;
  font-weight: 600;
}

.ideen-result-stat-value.last-value {
  font-size: 1rem;
}

/* CTA Section */
.ideen-result-cta {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  text-align: center;
}

.ideen-result-cta h3 {
  color: hsl(var(--primary-foreground));
}

.ideen-result-cta p {
  color: hsl(var(--primary-foreground) / 0.85);
  font-size: 1rem;
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ideen-result-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.ideen-result-button:hover {
  background-color: hsl(var(--primary-foreground) / 0.9);
  color: hsl(var(--primary));
}

.ideen-result-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.ideen-result-button:hover svg {
  transform: translateX(4px);
}

/* Results Responsive */
@media (max-width: 768px) {
  .ideen-result-title {
    font-size: 28px;
  }

  .ideen-result-zustand-grid {
    grid-template-columns: 1fr;
  }

  .ideen-result-stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ideen-result-stat {
    padding: 16px;
    background-color: hsl(var(--muted) / 0.5);
    border-radius: var(--radius);
  }
}

/* ===========================
   Ideen Generator Loading Screen
   =========================== */
.ideen-loading {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 20px;
}

.ideen-loading-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideen-loading-icon svg {
  width: 40px;
  height: 40px;
  color: hsl(var(--primary));
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ideen-loading-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.ideen-loading-desc {
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.ideen-loading-hint {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 16px 24px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  margin-bottom: 40px;
}

.ideen-loading-hint strong {
  color: hsl(var(--foreground));
}

/* E-Mail Section */
.ideen-loading-email-section {
  border-top: 1px solid hsl(var(--border));
  padding-top: 32px;
}

.ideen-loading-email-text {
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  margin-bottom: 16px;
}

.ideen-loading-email-form {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}

.ideen-loading-email-input {
  flex: 1;
  padding: 12px 16px;
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

.ideen-loading-email-input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsla(var(--ring), 0.2);
}

.ideen-loading-email-input::placeholder {
  color: hsl(var(--muted-foreground));
}

.ideen-loading-email-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ideen-loading-email-btn:hover:not(:disabled) {
  background-color: hsl(var(--primary) / 0.9);
}

.ideen-loading-email-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.ideen-loading-email-btn svg {
  width: 20px;
  height: 20px;
}

.ideen-loading-email-btn .spin {
  animation: spin 1s linear infinite;
}

.ideen-loading-email-status {
  margin-top: 12px;
  font-size: 13px;
}

.ideen-loading-email-status--success {
  color: hsl(var(--accent));
}

.ideen-loading-email-status--error {
  color: hsl(var(--destructive));
}

/* Loading Responsive */
@media (max-width: 768px) {
  .ideen-loading {
    padding: 40px 16px;
  }

  .ideen-loading-title {
    font-size: 26px;
  }

  .ideen-loading-desc {
    font-size: 15px;
  }

  .ideen-loading-email-form {
    flex-direction: column;
  }

  .ideen-loading-email-btn {
    width: 100%;
    height: 48px;
  }
}

/* ===========================
   Ideen Generator Result Page
   =========================== */
.ideen-result-page {
  padding: 80px 0;
  min-height: calc(100vh - 200px);
}

.ideen-result-back-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}

.ideen-result-back-link:hover {
  color: hsl(var(--primary));
}

.ideen-result-back-link svg {
  width: 18px;
  height: 18px;
}

.ideen-result-container {
  max-width: 900px;
  margin: 0 auto;
}

/* Error State */
.ideen-result-error {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 20px;
}

.ideen-error-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 32px;
  background-color: hsl(var(--destructive) / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ideen-error-icon svg {
  width: 40px;
  height: 40px;
  color: hsl(var(--destructive));
}

.ideen-error-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.ideen-error-desc {
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.ideen-result-error .ideen-result-button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.ideen-result-error .ideen-result-button:hover {
  background-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}

.ideen-result-error .ideen-result-button svg {
  transform: none;
}

.ideen-result-error .ideen-result-button:hover svg {
  transform: translateX(-4px);
}

/* Result Page Responsive */
@media (max-width: 768px) {
  .ideen-result-page {
    padding: 40px 0;
  }

  .ideen-error-title {
    font-size: 24px;
  }
}

/* ===========================
   Four Boxes Two Rows Section
   =========================== */
.four-boxes-two-rows-section {
  padding: 80px 0;
}

.four-boxes-two-rows-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.four-boxes-two-rows-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.3s ease;
}

.four-boxes-two-rows-item:hover {
  border-color: hsl(var(--primary));
  box-shadow: 0 4px 12px hsla(var(--primary), 0.1);
}

.four-boxes-two-rows-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.four-boxes-two-rows-icon svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--primary));
}

.four-boxes-two-rows-content {
  flex: 1;
}

.four-boxes-two-rows-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
  line-height: 1.3;
}

.four-boxes-two-rows-text {
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
}

.four-boxes-two-rows-text p {
  margin: 0;
}

/* Four Boxes Two Rows Responsive */
@media (max-width: 992px) {
  .four-boxes-two-rows-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .four-boxes-two-rows-section {
    padding: 60px 0;
  }

  .four-boxes-two-rows-headline {
    font-size: 18px;
  }
}

/* ===========================
   Full Width Section
   =========================== */
.full-width-section {
  padding: 80px 0;
  background-color: hsl(var(--input));
}

.full-width-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.full-width-item {
  flex: 1;
  text-align: center;
  padding: 0 40px;
  border-right: 1px solid hsl(var(--muted-foreground) / 0.3);
}

.full-width-item:last-child {
  border-right: none;
}

.full-width-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
  line-height: 1.2;
}

.full-width-content {
  color: hsl(var(--foreground));
  
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

.full-width-content p {
  margin: 0;
}

/* Full Width Section Responsive */
@media (max-width: 992px) {
  .full-width-grid {
    flex-direction: column;
    gap: 40px;
  }

  .full-width-item {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid hsl(var(--muted-foreground) / 0.3);
    padding-bottom: 40px;
  }

  .full-width-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

@media (max-width: 768px) {
  .full-width-section {
    padding: 60px 0;
  }

  .full-width-headline {
    font-size: 36px;
  }
}



/* ===========================
  Horizontal Line Section
   =========================== */

.horizontal-line {
  border-top: 1px solid hsl(var(--border));
  margin: 40px 0;
}

/* ===========================
   Portfolio CTA Section
   =========================== */
.portfolio-cta-section {
  margin-bottom: 32px;
}

.portfolio-cta-section:last-child {
  margin-bottom: 0;
}

.portfolio-cta-card {
  background-color: hsl(var(--primary));
  border-radius: var(--radius);
  padding: 32px 40px;
  text-align: center;
}

.portfolio-cta-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: hsl(var(--primary-foreground));
  margin: 0 0 16px;
}

.portfolio-cta-content {
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--primary-foreground) / 0.85);
  max-width: 600px;
  margin: 0 auto 24px;
}

.portfolio-cta-content p {
  margin: 0;
}

.portfolio-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.portfolio-cta-button:hover {
  background-color: hsl(var(--primary-foreground) / 0.9);
  color: hsl(var(--primary));
}

.portfolio-cta-button svg {
  transition: transform 0.2s ease;
}

.portfolio-cta-button:hover svg {
  transform: translateX(4px);
}

/* Portfolio CTA Responsive */
@media (max-width: 768px) {
  .portfolio-cta-card {
    padding: 24px 20px;
  }

  .portfolio-cta-headline {
    font-size: 1.5rem;
  }

  .portfolio-cta-content {
    font-size: 0.9375rem;
  }

  .portfolio-cta-button {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* ===========================
   Text Icon and Image Section
   =========================== */
.text-icon-image-section {
  padding: 80px 0;
}

.text-icon-image-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.text-icon-image-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-icon-image-icon svg {
  width: 24px;
  height: 24px;
  color: hsl(var(--primary));
}

.text-icon-image-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin: 0;
}

.text-icon-image-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.text-icon-image-grid.text-icon-image-grid--image-left {
  grid-template-columns: 0.8fr 1.2fr;
}

.text-icon-image-grid--image-left .text-icon-image-text {
  order: 2;
}

.text-icon-image-grid--image-left .text-icon-image-image {
  order: 1;
}

.text-icon-image-content {
  color: hsl(var(--muted-foreground));
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.text-icon-image-content p {
  margin: 0 0 16px;
}

.text-icon-image-content p:last-child {
  margin-bottom: 0;
}

.text-icon-image-image {
  border-radius: var(--radius);
  overflow: hidden;
}

.dark .text-icon-image-image img {
  filter: invert(0.1);
}

.text-icon-image-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text Icon and Image Responsive */
@media (max-width: 1024px) {
  .text-icon-image-grid {
    gap: 40px;
  }

  .text-icon-image-headline {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .text-icon-image-section {
    padding: 60px 0;
  }

  .text-icon-image-grid {
    grid-template-columns: 1fr!important;
    gap: 30px;
  }

  .text-icon-image-grid--image-left .text-icon-image-text {
    order: 0;
  }

  .text-icon-image-grid--image-left .text-icon-image-image {
    order: 0;
  }

  .text-icon-image-headline {
    font-size: 26px;
  }

  .text-icon-image-text {
    font-size: 15px;
  }

  .text-icon-image-image {
    order: -1 !important;
  }

}

/* ===========================
   Dienstleistung Hero Section
   =========================== */
.dienstleistung-hero-section {
  padding: 60px 0 40px;
  background-color: hsl(var(--muted) / .4);
}

.dienstleistung-hero-wrapper {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

.dienstleistung-hero-content {
  min-width: 0;
  height: 100%;
  position: relative;
}

.dienstleistung-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s ease;
}

.dienstleistung-hero-back:hover {
  color: hsl(var(--primary));
}

.dienstleistung-hero-back svg {
  width: 16px;
  height: 16px;
}

.dienstleistung-hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.dienstleistung-hero-description {
  color: hsl(var(--muted-foreground));
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 112px;
}

.dienstleistung-hero-description p {
  margin: 0;
}

.dienstleistung-hero-greview-container {
  justify-content: space-between;
  display: flex;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px 18px;
  bottom: 0;
  position: absolute;
  width: 100%;
  align-items: center;
}

.dienstleistung-hero-greview-image {
  display: flex;
  align-items: center;
}

.dienstleistung-hero-greview-image img {
  margin-right: 15px;
  height: 50px;
}

.dienstleistung-hero-greview-stars svg{
  color: #fdd663;
  fill: #fdd663;
}

.dienstleistung-hero-greview-stars {
  align-items: center;
  display: flex;
}


.dienstleistung-hero-greview-stars p {
  margin-right: 15px;
}



@media (max-width: 480px) {
  .dienstleistung-hero-greview-container {
    display: block;
  }

  .dienstleistung-hero-greview-stars {
    margin-top: 10px;
  }

  .dienstleistung-hero-description {
    margin-bottom: 152px;
  }
}

/* ===========================
   Dienstleistung TOC
   =========================== */
.dienstleistung-toc {
  position: sticky;
  top: 100px;
}

.dienstleistung-toc-card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 20px 18px;
}

.dienstleistung-toc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 4px;
  color: hsl(var(--muted-foreground));
  margin: 0 0 12px;
}

.dienstleistung-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dienstleistung-toc-item {
  line-height: 1.4;
}

.dienstleistung-toc-h3 {
  padding-left: 12px;
}

.dienstleistung-toc-h4 {
  padding-left: 24px;
}

.dienstleistung-toc-link {
  display: block;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1.4;
}

.dienstleistung-toc-link:hover {
  color: hsl(var(--foreground));
}

/* Dienstleistung Hero Responsive */
@media (max-width: 1024px) {
  .dienstleistung-hero-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .dienstleistung-toc {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .dienstleistung-hero-section {
    padding: 40px 0 24px;
  }

  .dienstleistung-hero-headline {
    font-size: 32px;
  }

  .dienstleistung-hero-description {
    font-size: 16px;
  }
}

/* ===========================
   WPForms – Theme Integration
   =========================== */

/* Reset WPForms default styles */
#main.site-main .wpforms-container *,
#main.site-main .wpforms-container *::before,
#main.site-main .wpforms-container *::after {
  box-sizing: border-box;
}

#main.site-main .wpforms-container {
  margin: 0;
}

#main.site-main .wpforms-form {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: hsl(var(--foreground));
}

/* --- Field wrapper --- */
#main.site-main .wpforms-field {
  margin-bottom: 20px !important;
  padding: 0 !important;
}

/* --- Labels --- */
#main.site-main .wpforms-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 6px !important;
  display: block;
}

#main.site-main .wpforms-field-label .wpforms-required-label {
  color: hsl(var(--destructive));
  margin-left: 2px;
}

#main.site-main .wpforms-field-sublabel {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-top: 4px;
}

#main.site-main .wpforms-field-description {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
  margin-top: 5px;
  line-height: 1.5;
}

/* --- Text inputs, Email, URL, Number, Phone, Password, Date --- */
#main.site-main .wpforms-field input[type="text"],
#main.site-main .wpforms-field input[type="email"],
#main.site-main .wpforms-field input[type="url"],
#main.site-main .wpforms-field input[type="tel"],
#main.site-main .wpforms-field input[type="number"],
#main.site-main .wpforms-field input[type="password"],
#main.site-main .wpforms-field input[type="date"],
#main.site-main .wpforms-field input[type="time"],
#main.site-main .wpforms-field input[type="search"],
#main.site-main .wpforms-field textarea,
#main.site-main .wpforms-field select {
  width: 100% !important;
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#main.site-main .wpforms-field input[type="text"]:focus,
#main.site-main .wpforms-field input[type="email"]:focus,
#main.site-main .wpforms-field input[type="url"]:focus,
#main.site-main .wpforms-field input[type="tel"]:focus,
#main.site-main .wpforms-field input[type="number"]:focus,
#main.site-main .wpforms-field input[type="password"]:focus,
#main.site-main .wpforms-field input[type="date"]:focus,
#main.site-main .wpforms-field input[type="time"]:focus,
#main.site-main .wpforms-field input[type="search"]:focus,
#main.site-main .wpforms-field textarea:focus,
#main.site-main .wpforms-field select:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 3px hsl(var(--ring) / .15) !important;
}

#main.site-main .wpforms-field input::placeholder,
#main.site-main .wpforms-field textarea::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 1;
}

/* --- Textarea --- */
#main.site-main .wpforms-field textarea {
  resize: vertical;
  min-height: 120px;
}

/* --- Select --- */
#main.site-main .wpforms-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
  cursor: pointer;
}

/* --- Checkbox & Radio --- */
#main.site-main .wpforms-field-checkbox ul,
#main.site-main .wpforms-field-radio ul,
#main.site-main .wpforms-field-payment-checkbox ul,
#main.site-main .wpforms-field-payment-multiple ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#main.site-main .wpforms-field-checkbox li,
#main.site-main .wpforms-field-radio li,
#main.site-main .wpforms-field-payment-checkbox li,
#main.site-main .wpforms-field-payment-multiple li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  margin: 0 !important;
}

#main.site-main .wpforms-field-checkbox input[type="checkbox"],
#main.site-main .wpforms-field-payment-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  border: 2px solid hsl(var(--border)) !important;
  border-radius: 4px !important;
  background-color: hsl(var(--input)) !important;
  cursor: pointer;
  padding: 0 !important;
  accent-color: hsl(var(--primary));
  transition: border-color 0.2s ease;
}

#main.site-main .wpforms-field-radio input[type="radio"],
#main.site-main .wpforms-field-payment-multiple input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  border: 2px solid hsl(var(--border)) !important;
  background-color: hsl(var(--input)) !important;
  cursor: pointer;
  padding: 0 !important;
  accent-color: hsl(var(--primary));
}

#main.site-main .wpforms-field-checkbox label,
#main.site-main .wpforms-field-radio label,
#main.site-main .wpforms-field-payment-checkbox label,
#main.site-main .wpforms-field-payment-multiple label {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: hsl(var(--foreground)) !important;
  cursor: pointer;
  margin: 0 !important;
  line-height: 1.4;
}

/* --- File Upload --- */
#main.site-main .wpforms-field-file-upload input[type="file"] {
  width: 100% !important;
  background-color: hsl(var(--input)) !important;
  border: 1px dashed hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: hsl(var(--muted-foreground)) !important;
  cursor: pointer;
}

/* --- Name field (multi-column) --- */
#main.site-main .wpforms-field-name .wpforms-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  #main.site-main .wpforms-field-name .wpforms-field-row {
    grid-template-columns: 1fr;
  }
}

/* --- Address field --- */
.site-main  .wpforms-field-address .wpforms-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 480px) {
  #main.site-main .wpforms-field-address .wpforms-field-row {
    grid-template-columns: 1fr;
  }
}

/* --- Validation errors --- */
#main.site-main .wpforms-error-container,
#main.site-main .wpforms-error-container-anchor {
  background-color: hsl(var(--destructive) / .08) !important;
  border: 1px solid hsl(var(--destructive) / .3) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
  color: hsl(var(--destructive)) !important;
  font-size: 14px !important;
}

.site-main label.wpforms-error {
  display: block !important;
  margin-top: 5px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: hsl(var(--destructive)) !important;
}

#main.site-main .wpforms-field input.wpforms-error,
#main.site-main .wpforms-field textarea.wpforms-error,
#main.site-main .wpforms-field select.wpforms-error {
  border-color: hsl(var(--destructive)) !important;
  box-shadow: 0 0 0 3px hsl(var(--destructive) / .12) !important;
}

/* --- GDPR / Consent checkbox --- */
#main.site-main .wpforms-field-gdpr-checkbox ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#main.site-main .wpforms-field-gdpr-checkbox li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#main.site-main .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  accent-color: hsl(var(--primary));
}

/* --- Submit button --- */
#main.site-main .wpforms-submit-container {
  margin-top: 8px !important;
  padding: 0 !important;
}

#main.site-main .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 11px 28px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#main.site-main .wpforms-submit:hover {
  background-color: hsl(var(--primary) / .88) !important;
  color: hsl(var(--primary-foreground)) !important;
}

#main.site-main .wpforms-submit:disabled,
#main.site-main .wpforms-submit.wpforms-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* --- Confirmation / Success message --- */
#main.site-main .wpforms-confirmation-container-full,
#main.site-main .wpforms-confirmation-scroll {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  color: hsl(var(--foreground)) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* --- CAPTCHA / hCaptcha / reCAPTCHA wrapper --- */
#main.site-main .wpforms-field-captcha,
#main.site-main .wpforms-recaptcha-container {
  margin-top: 4px;
}

/* --- Progress bar (multi-page forms) --- */
#main.site-main .wpforms-page-indicator {
  margin-bottom: 28px;
}

#main.site-main .wpforms-page-indicator-page-title {
  font-size: 13px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 8px;
}

#main.site-main .wpforms-page-indicator-steps {
  display: flex;
  gap: 4px;
}

#main.site-main .wpforms-page-indicator-page {
  height: 4px;
  flex: 1;
  background-color: hsl(var(--muted));
  border-radius: 99px;
}

#main.site-main .wpforms-page-indicator-page.active,
#main.site-main .wpforms-page-indicator-page.completed {
  background-color: hsl(var(--primary));
}

/* Multi-page prev/next buttons */
#main.site-main .wpforms-page-next,
#main.site-main .wpforms-page-prev {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
  border: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#main.site-main .wpforms-page-next {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

#main.site-main .wpforms-page-next:hover {
  background-color: hsl(var(--primary) / .88) !important;
}

#main.site-main .wpforms-page-prev {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

#main.site-main .wpforms-page-prev:hover {
  background-color: hsl(var(--secondary) / .8) !important;
}

/* WPForms Responsive */
@media (max-width: 768px) {
  #main.site-main .wpforms-submit {
    width: 100% !important;
  }

  #main.site-main .wpforms-page-next,
  #main.site-main .wpforms-page-prev {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===========================
   FAQ Section (Dienstleistung)
   =========================== */
.faq-section {
  padding: 80px 0;
}

.faq-header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.faq-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 16px;
}

.faq-intro {
  color: hsl(var(--muted-foreground));
  font-size: 17px;
  line-height: 1.65;
}

.faq-intro p {
  margin: 0;
}

/* List */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Item */
.faq-item {
  border-bottom: 1px solid hsl(var(--border));
}

.faq-item:first-child {
  border-top: 1px solid hsl(var(--border));
}

/* Question button */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--foreground));
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: hsl(var(--primary));
}

.faq-question:hover .faq-icon {
  color: hsl(var(--primary));
}

/* Icon */
.faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: hsl(var(--muted-foreground));
  transition: transform 0.3s ease, color 0.2s ease;
}

.faq-icon svg {
  width: 20px;
  height: 20px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
  color: hsl(var(--primary));
}

.faq-item.is-open .faq-question {
  color: hsl(var(--primary));
}

/* Answer panel */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 0 20px;
  color: hsl(var(--muted-foreground));
  font-size: 15px;
  line-height: 1.7;
}

.faq-answer-inner p {
  margin: 0 0 12px;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.faq-answer-inner ul,
.faq-answer-inner ol {
  padding-left: 20px;
  margin: 0 0 12px;
}

.faq-answer-inner li {
  margin-bottom: 4px;
}

.faq-answer-inner a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* FAQ Responsive */
@media (max-width: 768px) {
  .faq-section {
    padding: 60px 0;
  }

  .faq-headline {
    font-size: 28px;
  }

  .faq-question {
    font-size: 15px;
    padding: 16px 0;
  }
}

/* ===========================
   Kontakt Section
   =========================== */
.kontakt-section {
  padding: 80px 0;
}

.kontakt-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
  align-items: center;
}

.kontakt-wrapper--has-image {
  grid-template-columns: 420px 1fr;
}

/* Left column */
.kontakt-form-col {
  min-width: 0;
}

.kontakt-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin-bottom: 24px;
}

.kontakt-description {
  color: hsl(var(--muted-foreground));
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 36px;
}

.kontakt-description p {
  margin: 0 0 12px;
}

.kontakt-description p:last-child {
  margin-bottom: 0;
}

.kontakt-form {
  margin-top: 8px;
}

/* Right column – image */
.kontakt-image-col {
  order: -1;
}

.kontakt-greview-container {
  margin: 20px 0;
  border-radius: var(--radius);
  padding: 20px 18px;
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kontakt-hero-greview-image {
  display: flex;
  align-items: center;
}

.kontakt-hero-greview-image img {
  height: 50px;
}

.kontakt-hero-greview-image p {
  margin-left: 10px;
}

.kontakt-hero-greview-stars {
  display: flex;
  align-items: center;
}


.kontakt-hero-greview-stars p {
  margin-right: 10px;
}

.kontakt-hero-greview-stars svg {
  color: #fdd663;
  fill: #fdd663;
}

.kontakt-image-wrapper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 40px -12px hsl(var(--foreground) / .15);
}

.kontakt-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Links */
.kontakt-links {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: center;
}

.kontakt-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--foreground));
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kontakt-link:hover {
  color: hsl(var(--primary));
}

.kontakt-link:hover .kontakt-link-icon {
  background-color: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
}

.kontakt-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.kontakt-link-icon svg {
  width: 18px;
  height: 18px;
}

/* Kontakt Section Responsive */
@media (max-width: 1024px) {
  .kontakt-wrapper--has-image {
    grid-template-columns: 1fr;
  }

  .kontakt-image-col {
    position: relative;
    top: 0; 
    justify-content: space-around;
    display: flex;
    order: 1;
    align-items: center;
  }

  .kontakt-greview-container {
    display: block;
  }

  .kontakt-hero-greview-image {
    padding-bottom: 10px;
  }

  .kontakt-hero-greview-image img {
    height: 25px;
  }

  .kontakt-hero-greview-stars {
    border-top: 1px solid hsl(var(--border));
    padding-top: 10px;
    align-items: flex-start;
    flex-direction: row-reverse;
  }

  .kontakt-hero-greview-stars p {
    order: 1;
  }

  .kontakt-image-wrapper {
    max-height: 320px;
    overflow: hidden;
  }

  .kontakt-image {
    height: 320px;
    object-fit: cover;
  }
}

@media (max-width: 768px) {

  .kontakt-image-col{
    display: block;
  }

  .kontakt-image-wrapper {
    margin: auto;
    max-width: 320px;
  }

  .kontakt-section {
    padding: 60px 0;
  }

  .kontakt-headline {
    font-size: 30px;
  }

  .kontakt-description {
    font-size: 16px;
    margin-bottom: 28px;
  }
}