/*
Theme Name: Astra Child - IT4Revolution
Theme URI: https://it-4revolution.de
Description: Child Theme für IT-4Revolution e.K. auf Basis von Astra
Author: IT-4Revolution
Template: astra
Version: 1.0
*/

/* Custom Styles */
/* Default-Seiten-Titel verbergen */
/*
header.entry-header.ast-no-thumbnail .entry-title {
  display: none !important;
}
*/

:root {
    /* Breite des Inhalts-Wrappers */
    --max-content-width: 1200px;
  
    /* Innenabstand oberhalb/unterhalb und lateral */
    --content-padding: 0 20px; /* war: 0em 0em */
  
    /* Design-Variablen */
    --accent: #ff7f50;
    --accent-hover: #e46b3a;
    --text: #0f1f2d;
    --border: #e2e8f0;
    --bg-soft: #f9fafb;
  }
  
  
  @media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
      margin-top: 0px; /*60px;*/
      margin-bottom: 60px;
    }
  }
  
  /* Alle Seiten mit default-Template: Content-Wrapper zentrieren */
  .page-template-default 
    .site-content > .ast-container,
  .page-template-default 
    .entry-content.clear {
      max-width: var(--max-content-width);
      margin: 0 auto;
      padding: var(--content-padding);
      box-sizing: border-box;
  }
  
  /* Hero läuft auf default-Pages automatisch Full-Width */
  /*
  .page-template-default .hero {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: 50vw;
    overflow: hidden; *//* schneidet überstehende Bilder sauber ab */
  /*}*/
  
  /* Innerhalb des Heroes: Content-Wrapper wieder auf Max-Width zentrieren */
  /*
  .page-template-default .hero > .ast-container,
  .page-template-default .hero .entry-content.clear{
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: var(--content-padding);
  }
  */
  
  .section--spacing-large {
    padding: 40px 20px;
    margin: 0 auto;
  }
  
  
  /* 3. Ausnahme: keine Full-Width auf den ausgeschlossenen Seiten */
  .no-fullwidth-hero .hero {
    position: static;
    width: auto;
    margin: 0 auto;
  }
  
  
  .entry-title{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  
  body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #ffffff;
    color: #0f1f2d;
    margin: 0;
    padding: 0;
  }
  
  /* Entfernt zentriertes Logo oben */
  .site-logo {
    display: none;
  }
  
  /* Logo im Standard-Header-Bereich (links oder ersetzt Seitentitel) */
  .site-header .ast-site-identity img {
    max-height: 60px;
    height: auto;
    width: auto;
    /*filter: brightness(0) invert(1); *//* Weißes Logo */
  }
  
  
  /* Versteckt .site-title für Besucher, behält es im DOM für Suchmaschinen */
  .site-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  
  
  /* Füge das in eure zentrale CSS-Datei ein */
.sla-box {
    border: 1px solid rgba(255, 127, 80, 0.35);
    background: #fff7f3;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
  }
  .sla-box h3 {
    margin-top: 0;
    color: var(--text);
    font-size: 1.15rem;
  }
  .sla-box ul {
    list-style: none;
    padding-left: 0;
    margin: 0.75rem 0 0;
  }
  .sla-box li {
    margin: 0.6rem 0;
    line-height: 1.5;
  }
  .sla-box li strong {
    color: var(--text);
  }
  
  /* */
  
  
  /* FAQ-Fragen: schwarze Schrift, kein Hintergrund */
  .faq-question {
    color: #0f1f2d !important;          /* Text in eurem dunklen Standardton */
    background-color: transparent !important;
    border: none !important;
  }
  
  /* Optional: auch beim Hover keine Hinterlegung */
  .faq-question:hover {
    background-color: transparent !important;
  }
  
  
  
  /*  */
  
  
  /* Global Button Style */
  .button,
  .btn,
  .hosting-button,
  .booking-form button,
  .contact button,
  .hero .btn,
  .hero a.btn,
  .booking-form a.button,
  .contact a.button,
  .hosting-card a.button {
    /*background-color: #ff7f50;*/
    background-color: var(--accent);
    color: white !important;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none !important;
    cursor: pointer;
    /*display: inline-block;*/
    display: inline-flex;               /* <— Ändere von inline-block zu inline-flex */
      justify-content: center;           /* horizontal zentrieren */
      align-items: center;               /* vertikal zentrieren */
    font-size: 1rem;
    transition: background-color 0.3s ease;
    text-align: center;                /* für mehrzeiligen Text */
  }
  .button:hover,
  .btn:hover,
  .hosting-button:hover,
  .booking-form button:hover,
  .contact button:hover,
  .hero .btn:hover,
  .hero a.btn:hover,
  .booking-form a.button:hover,
  .contact a.button:hover,
  .hosting-card a.button:hover {
    /*background-color: #e46b3a;*/
    background-color: var(--accent-hover);
    text-decoration: none !important;
  }
  
  /* Headings */
  h1{
    color: #0f1f2d;
    margin: 0 auto 1.5rem;
    max-width: 1200px;
    padding: 0 20px;
    text-align: left;
  }
  h2,
  h3 {
      position: relative; /* Elternposition für das ::after */
      display: inline-block; /* Damit sich ::after am Text ausrichten kann */
      text-align: center; /* oder left */
    /*
    color: #0f1f2d;
    margin: 0 auto 1.5rem;
    max-width: 1200px;
    /*padding: 0 20px;
    text-align: left;*/
  }
  
  /* Ausnahme-Klasse für block-level H3 (z. B. bei Templates) */
  h2.no-inline {
    text-align: center;
    color: #0f1f2d;
    font-size: 2rem;
    margin-bottom: 40px;
  }
  
  h2.no-inline .h2-text {
    display: inline-block;
    position: relative;
  }
  
  
  
  /* H2 & H3 mit Trenner */
  h2::after,
  h3::after {
    content: "";
    position: absolute;
    left: 0; /* direkt unter dem linken Rand = erster Buchstabe */
    bottom: -10px; /* Abstand zur Schrift anpassen */
    width: 60px;
    height: 3px;
    background: #ff7f50;
    border-radius: 2px;
    /*content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #ff7f50;
    margin: 10px 0 20px 20px;
    border-radius: 2px;*/
  }
  
  /* Spezielle mittige Headings behalten zentrierte Darstellung */
  .hero h1,
  /*.booking-form h1,*/
  .contact:not([style*="background:#ffffff"]) h1,
  .template-section h1 {
    color: white;
    text-align: center;
  }
  .hero h2,
  /*.booking-form h2,*/
  .contact:not([style*="background:#ffffff"]) h2,
  .template-section h2 {
    color: white;
    text-align: center;
  }
  .hero h3,
  /*booking-form h3,*/
  .contact:not([style*="background:#ffffff"]) h3,
  .template-section h3 {
    color: white;
    text-align: center;
  }
  
  /* Speziell: Kontaktbereich auf weißem Hintergrund mittig ausrichten */
  .contact[style*="background:#ffffff"] h1,
  .contact[style*="background:#ffffff"] h2,
  .contact[style*="background:#ffffff"] h3 {
    color: #0f1f2d;
    text-align: center;
  }
  
  /* Listen linksbündig und mit einheitlichem Abstand */
  ul, ol {
    padding-left: 40px;
    text-align: left;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
  }
  ul li, ol li {
    margin-bottom: 0.75rem;
  }
  
  /* Hero Section */
  .hero {
    background-color: #0f1f2d;
    color: white;
    padding: 100px 20px 40px 20px;
    text-align: center;
  }
  .hero.has-img {
    padding: 20px 20px 40px 20px;
  }
  
  .hero.has-img img{
    height:150px;
    margin-bottom:20px;
  }
  
  
  .hero h1 {
    font-size: 48px;
  }
  .hero p {
    font-size: 20px;
    max-width: 600px;
    margin: 20px auto;
  }
  
  /* Hosting Grid */
  .hosting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem;
    background: #f9fafb;
  }
  /* Für größere Bildschirme ab 768px (Tablet/PC) */
  @media (min-width: 768px) {
    .hosting-grid {
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
  }
  
  /* Webhosting-spezifisches Grid */
  .webhosting-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
  
  
  .hosting-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hosting-card:hover {
    transform: translateY(-5px);
  }
  .hosting-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0f1f2d;
    margin-bottom: 0.5rem;
    text-align: left;
  }
  /*
  h3.hosting-title::after {
    background-color: unset;
  }*/
  
  .hosting-card p {
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  .hosting-price {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text); /* war: #007acc */
    margin: 1.25rem 0 1rem;
    line-height: 1.2;
  }
  .hosting-price small {
    font-size: 0.95rem;
    color: #64748b;
  }
  
  /* Hosting Addons Table */
  .hosting-addons table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    font-size: 1rem;
    background: #fff;
    border: 1px solid #ddd;
  }
  .hosting-addons th,
  .hosting-addons td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
  }
  .hosting-addons thead tr {
    background: #f0f0f0;
    font-weight: bold;
  }
  .hosting-addons p {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
  }
  
  /* Template Gallery */
  .template-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem;
    background: #f0f4f8;
  }
  .template-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
  }
  .template-item:hover {
    transform: scale(1.03);
  }
  .template-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  .template-item .caption {
    padding: 1rem;
    font-weight: bold;
    text-align: center;
    color: #0f1f2d;
  }
  
  
  /* Onepager Features */
  .features-grid {
    padding: 80px 20px;
    background: #f9fafb;
  }
  
  .features-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
  }
  
  /* Ab 768px breitere Spalten */
  @media (min-width: 768px) {
    .features-inner {
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
  }
  
  
  
  /* Booking Section */
  .booking-form {
    background: #0f1f2d;
    color: white;
    padding: 100px 20px;
    text-align: center;
    display: block;
    width: 100%;
  }
  .booking-form h2 {
    font-size: 32px;
    margin-bottom: 30px;
  }
  .booking-form form {
    max-width: 600px;
    margin: 0 auto;
    display: block;
    width: 100%;
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #0f1f2d;
  }
  .booking-form input[type="text"],
  .booking-form input[type="email"],
  .booking-form select {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    display: block;
  }
  .booking-form label {
    text-align: left;
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #0f1f2d;
  }
  
  /* Projektstart als eigene Zeile */
  .projektstart-section {
    width: 100%;
    background: #0f1f2d;
    padding: 80px 20px;
    margin-top: 60px;
    text-align: center;
    color: white;
  }
  
  /* Contact Section */
  .contact {
    background: #0f1f2d;
    color: white;
    padding: 60px 20px 80px;
    text-align: center;
  }
  .contact form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #0f1f2d;
  }
  .contact input,
  .contact textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
  }
  .contact label,
  .contact p,
  .contact span,
  .contact .contact-info {
    color: #0f1f2d;
  }
  .contact .checkbox-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    color: #0f1f2d;
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .contact .checkbox-group input[type="checkbox"] {
    margin-top: 4px;
    margin-right: 10px;
    transform: scale(1.1);
  }
  .contact .checkbox-group label {
    margin: 0;
    line-height: 1.4;
  }
  .contact .checkbox-group a {
    color: #0f1f2d;
    text-decoration: underline;
  }
  
  /* Footer */
  footer {
    background: #08121e;
    color: white;
    padding: 40px 20px;
    text-align: center;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer-menu .footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .footer-menu .footer-nav li {
    display: inline-block;
    margin: 0 10px;
  }
  .footer-menu .footer-nav a {
    color: #bbb;
    text-decoration: none;
  }
  .footer-menu .footer-nav a:hover {
    color: #fff;
  }
  .footer-socials {
    margin: 20px 0;
  }
  .footer-socials a {
    color: #bbb;
    margin: 0 10px;
    font-size: 1.2rem;
    display: inline-block;
    transition: color 0.3s ease;
  }
  .footer-socials a:hover {
    color: #ff7f50;
  }
  .footer-copy {
    font-size: 0.9rem;
    margin-top: 10px;
  }
  footer a {
    color: #bbb;
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }
  
  /* Onepager-Galerie: alle Karten in einem Flex-Container bündeln */
  .template-gallery .template-item {
    display: flex !important;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform .3s ease;
  }
  
  .template-gallery .template-item:hover {
    transform: scale(1.03);
  }
  
  /* Bild oben, Seite zieht Flex-Layout automatisch durch */
  .template-gallery .template-item img {
    width: 100%;
    height: auto;
    display: block;
    flex-shrink: 0;
  }
  
  /* Beschriftung und Textabsatz im selben Kasten */
  .template-gallery .template-item .caption,
  .template-gallery .template-item p {
    padding: 1rem;
    flex-grow: 1;
    color: #0f1f2d;
  }
  
  .template-gallery .template-item .caption {
    font-weight: bold;
    text-align: center;
    padding-bottom: 0;
  }
  
  .template-gallery .template-item p {
    color: #555;
    line-height: 1.4;
    margin-top: 0.5rem;
  }
  
  
  .recaptcha-wrapper {
    display: flex;
    justify-content: center;      /* horizontal zentrieren */
    align-items: center;          /* vertikal zentrieren */
    /*min-height: 300px;*/            /* oder so hoch wie der Container mindestens sein soll */
    /*margin-top: 20px;*/             /* optionaler Abstand oben */
  }
  
  
  
  /* START klaro Cookie Consens Banner */
  /* Klaro Haupt-Container */
  .cm {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #fff !important;
  }
  
  /* Klaro Body-Inhalte lesbar machen */
  .cm-body {
    background-color: #222 !important;  /* Dunkler Hintergrund */
    color: #fff !important;             /* Heller Text */
  }
  
  /* Buttons visuell optimieren */
  /*  
  .cm-btn,
  .cm-btn:visited {
    background-color: #007cba !important;  // WordPress-typisches Blau 
    color: #fff !important;
    border: none;
    padding: 10px 16px;
    font-weight: bold;
    border-radius: 4px;
   
  } */
  
  .cm-btn:hover {
    background-color: #005b8c !important;
  }
  
  /* Links im Klaro-Dialog */
  .cm-link,
  .cm-link:visited {
    color: #4eaaff !important;
    text-decoration: underline;
  }
  
  .cm-link:hover {
    color: #a2d2ff !important;
  }
  
  /* Checkboxen & Label */
  .cm-toggle,
  .cm-label {
    color: #fff !important;
  }
  
  /* Title/Überschrift */
  .cm-title {
    color: #fff !important;
    font-size: 20px;
    font-weight: bold;
  }
  
  .cm-list-title {
    color: #fff !important;          /* Weißer Text für dunkle Hintergründe */
    font-size: 16px !important;      /* Gut lesbare Schriftgröße */
    font-weight: 600 !important;     /* Halb-fett für bessere Sichtbarkeit */
    line-height: 1.4 !important;     /* Angenehmer Zeilenabstand */
  }
  
  
  /* Footer ausblenden, falls gewünscht */
  /*.cm-powered-by {
    display: none !important;
  }*/
  /* ENDE klaro Cookie Consens Banner */



  /* 1) Navigation: Active-State klarer */
/* ==============================
   Hauptmenü: Abstände + Active-Line
   ============================== */

/* Basis-Abstände der Menülinks (sauber, nicht gequetscht) */
.main-header-menu > .menu-item > a{
    position: relative;
    display: inline-block;
    padding: 14px 16px;         /* vertikal/horizontal */
    line-height: 1.2;           /* verhindert „zu viel Luft“ im Text */
  }
  
  /* Aktiver Menüpunkt: Farbe + Gewicht */
  .main-header-menu > .menu-item.current-menu-item > a,
  .main-header-menu > .menu-item.current_page_item > a{
    color: var(--accent) !important;
    font-weight: 700;
  }
  
  /* Orange Unterstreichung (höher gesetzt, näher am Text) */
  .main-header-menu > .menu-item.current-menu-item > a::after,
  .main-header-menu > .menu-item.current_page_item > a::after{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;               /* <-- hier sitzt die Linie: höher als vorher */
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
  }
  
  /* Optional: Hover-Farbe (passt zum aktiven Zustand) */
  .main-header-menu > .menu-item > a:hover{
    color: var(--accent);
  }
  

/*.main-header-menu > .menu-item > a {
    padding: 0.8rem 1rem;
  }
  .main-header-menu > .menu-item.current-menu-item > a,
  .main-header-menu > .menu-item.current_page_item > a {
    color: var(--accent) !important;
    position: relative;
    font-weight: 700;
  }
  .main-header-menu > .menu-item.current-menu-item > a::after,
  .main-header-menu > .menu-item.current_page_item > a::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
  }*/
  
  /* 2) Pricing: „Empfohlen“ (2. Karte) hervorheben */
  /*.hosting-grid .hosting-card:nth-child(2),
  .webhosting-grid .hosting-card:nth-child(2) {
    position: relative;
    border: 2px solid var(--accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
  }
  .hosting-grid .hosting-card:nth-child(2)::before,
  .webhosting-grid .hosting-card:nth-child(2)::before {
    content: "Empfohlen";
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 999px;
  }
  .hosting-grid .hosting-card:nth-child(2):hover,
  .webhosting-grid .hosting-card:nth-child(2):hover {
    transform: translateY(-6px);
  }*/
  /* ==============================
   Empfohlen-Badge (saubere Lösung)
   -> Nur wenn die Karte die Klasse .is-recommended hat
   ============================== */

.hosting-card.is-recommended {
    position: relative;
    border: 2px solid var(--accent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
  }
  
  .hosting-card.is-recommended::before {
    content: "Empfohlen";
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    border-radius: 999px;
  }
  
  .hosting-card.is-recommended:hover {
    transform: translateY(-6px);
  }
  
  
  /* 3) Cards: Listen in Paketen kompakter + besser scanbar */
  .hosting-card ul {
    padding-left: 1.1rem; /* überschreibt globales 40px */
    margin: 1rem 0 0.75rem;
  }
  .hosting-card li {
    margin-bottom: 0.55rem;
    line-height: 1.55;
  }
  .hosting-card p {
    color: #334155;
  }
  
  /* 4) Buttons in Cards: volle Breite für saubere Optik */
  .hosting-card a.button,
  .hosting-card a.btn {
    width: 100%;
  }
  
  /* 5) Tabellen: moderner + Preise rechts */
  .hosting-addons table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .hosting-addons thead tr {
    background: #f3f4f6;
  }
  .hosting-addons tbody tr:nth-child(even) {
    background: #fafafa;
  }
  .hosting-addons th:last-child,
  .hosting-addons td:last-child {
    text-align: right;
    white-space: nowrap;
  }
  
  /* 6) Tabellen mobil: horizontal scroll statt „kaputt umbrechen“ */
  @media (max-width: 768px) {
    .hosting-addons {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .hosting-addons table {
      min-width: 520px;
    }
  }
  
  /* 7) Hero mobil: bessere Typo + weniger „zu groß“ */
  @media (max-width: 768px) {
    .hero {
      padding: 72px 20px 36px 20px;
    }
    .hero h1 {
      font-size: 34px;
      line-height: 1.15;
    }
    .hero p {
      font-size: 18px;
      line-height: 1.6;
    }
  }
  
  /* 8) Formulare: breiter, hochwertiger, Fokus-Style */
  .booking-form form,
  .contact form {
    max-width: 720px;
    border-radius: 14px;
    padding: 36px;
  }
  .booking-form input[type="text"],
  .booking-form input[type="email"],
  .booking-form select,
  .contact input,
  .contact textarea {
    border: 1px solid #cbd5e1;
  }
  .booking-form input[type="text"]:focus,
  .booking-form input[type="email"]:focus,
  .booking-form select:focus,
  .contact input:focus,
  .contact textarea:focus {
    outline: none;
    border-color: rgba(255, 127, 80, 0.9);
    box-shadow: 0 0 0 3px rgba(255, 127, 80, 0.18);
  }
  
  /* 9) Optional: weniger „blauer Mix“ bei Cards */
  .hosting-card {
    border-color: var(--border);
  }



  /* Section-Layout (statt Inline-Styles) */
.hosting-addons{
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  /* Wrapper für sauberes Mobile-Scrolling */
  .it4-table-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 2rem 0;
  }
  
  /* Moderne Tabelle */
  .it4-table{
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  }
  
  /* Kopfzeile */
  .it4-table thead th{
    background: #f3f4f6;
    color: #334155;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  
  /* Zellen */
  .it4-table tbody td{
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    color: var(--text);
    vertical-align: top;
  }
  
  /* Letzte Zeile ohne Border */
  .it4-table tbody tr:last-child td{
    border-bottom: 0;
  }
  
  /* Zebra + Hover */
  .it4-table tbody tr:nth-child(even){
    background: #fafafa;
  }
  .it4-table tbody tr:hover{
    background: #fff7f3;
  }
  
  /* Erste Spalte „wertiger“ */
  .it4-table tbody td:first-child{
    font-weight: 650;
  }
  
  /* Preis-Spalte rechts */
  .it4-table thead th:last-child,
  .it4-table tbody td:last-child{
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
  }
  
  /* Mobile: etwas kleinere Zellen */
  @media (max-width: 480px){
    .it4-table thead th,
    .it4-table tbody td{
      padding: 12px 14px;
    }
  }

  /* Vertikale Trennlinie in der Tabelle entfernen/abschwächen */
.it4-table th,
.it4-table td{
  border-right: 0 !important;
}

/* =========================================
   KONTAKTSEITE (Seite ID 22) – clean & professionell
   ========================================= */

/* ---------- HERO ---------- */
body.page-id-22 .hero{
    padding: 72px 20px 44px;
  }
  
  body.page-id-22 .hero p{
    max-width: 760px;
    margin: 10px auto 0;
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.92;
  }
  
  /* ---------- KONTAKT-BEREICH (dunkel + weicher Übergang) ---------- */
  /* Wichtig: kein fixer %-Gradient (der wirkt je nach Höhe „kaputt“),
     stattdessen dunkler Hintergrund + weicher Fade in Weiß am unteren Rand. */

body.page-id-22 .contact{
    position: relative;
    padding: 80px 20px 60px;
    background: #fafafa; /* #0f1f2d;*/
    overflow: hidden;
  }
  
  /* weicher Übergang in Weiß unten */
  body.page-id-22 .contact::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 160px;
    background: linear-gradient(180deg, rgba(15,31,45,0) 0%, #ffffff 70%, #ffffff 100%);
    pointer-events: none;
    z-index: 0;
  }
  
  /* Inhalt über dem Fade halten */
  body.page-id-22 .contact > *{
    position: relative;
    z-index: 1;
  }
  
  /* Falls Gutenberg/Theme-Wrapper „Boxen“ färben: neutralisieren */
  body.page-id-22 .contact .wp-block-group,
  body.page-id-22 .contact .wp-block-columns,
  body.page-id-22 .contact .wp-block-column,
  body.page-id-22 .contact .container{
    background: transparent !important;
  }
  
  /* ---------- FORMULAR (Card) ---------- */
  body.page-id-22 .contact form{
    max-width: 920px;
    margin: 0 auto;
    padding: 28px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.16);
    overflow: hidden;
  }
  
  /* Inputs/Select/Textarea modern & konsistent */
  body.page-id-22 .contact input[type="text"],
  body.page-id-22 .contact input[type="email"],
  body.page-id-22 .contact input[type="tel"],
  body.page-id-22 .contact input[type="url"],
  body.page-id-22 .contact select,
  body.page-id-22 .contact textarea{
    width: 100%;
    background: #fbfdff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px;
    font-size: 16px;
  }
  
  body.page-id-22 .contact textarea{
    min-height: 150px;
    resize: vertical;
  }
  
  /* Fokus: hochwertig */
  body.page-id-22 .contact input:focus,
  body.page-id-22 .contact select:focus,
  body.page-id-22 .contact textarea:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  }
  
  /* ---------- CHECKBOX / DSGVO (Desktop + Mobile sauber) ---------- */
  /* unterstützt sowohl Ihre .checkbox-group als auch typische CF7 Acceptance */
  body.page-id-22 .contact .checkbox-group,
  body.page-id-22 .contact .wpcf7-acceptance{
    width: 100%;
    margin: 14px 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  
  /* Label + Checkbox in einer Linie */
  body.page-id-22 .contact .checkbox-group label,
  body.page-id-22 .contact .wpcf7-acceptance label{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    width: 100%;
  }
  
  /* Checkbox stabil (nicht riesig skalieren) */
  body.page-id-22 .contact .checkbox-group input[type="checkbox"],
  body.page-id-22 .contact .wpcf7-acceptance input[type="checkbox"]{
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    flex: 0 0 18px;
    transform: none;
    accent-color: var(--accent);
  }
  
  /* Links im Checkbox-Text */
  body.page-id-22 .contact .checkbox-group a,
  body.page-id-22 .contact .wpcf7-acceptance a{
    color: var(--accent);
    text-decoration: underline;
  }
  
  /* ---------- SUBMIT BUTTON ---------- */
  body.page-id-22 .contact button,
  body.page-id-22 .contact input[type="submit"],
  body.page-id-22 .contact .wpcf7-submit{
    min-width: 260px;
    margin: 14px auto 0;
    display: block;
    padding: 12px 18px;
    border-radius: 10px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
  }
  
  /* ---------- KONTAKT-INFOS ALS CARDS ---------- */
  body.page-id-22 .it4-contact-info{
    max-width: 1000px;
    margin: 10px auto 80px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  
  body.page-id-22 .it4-contact-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
    text-align: left;
  }
  
  body.page-id-22 .it4-contact-card h3{
    margin: 0 0 12px;
  }
  
  body.page-id-22 .it4-contact-list{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  body.page-id-22 .it4-contact-list li{
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
  }
  
  body.page-id-22 .it4-contact-list li:last-child{
    border-bottom: 0;
  }
  
  /* Links in den Kontakt-Cards */
  body.page-id-22 .it4-contact-card a{
    color: var(--accent) !important;
    text-decoration: underline;
  }
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    body.page-id-22 .it4-contact-info{
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 768px){
    body.page-id-22 .contact{
      padding: 56px 16px 40px;
    }
  
    body.page-id-22 .contact form{
      max-width: 100%;
      padding: 18px;
      border-radius: 16px;
    }
  
    body.page-id-22 .contact input[type="text"],
    body.page-id-22 .contact input[type="email"],
    body.page-id-22 .contact input[type="tel"],
    body.page-id-22 .contact input[type="url"],
    body.page-id-22 .contact select,
    body.page-id-22 .contact textarea{
      padding: 14px;
      font-size: 16px; /* verhindert iOS Zoom */
      border-radius: 12px;
    }
  
    body.page-id-22 .contact button,
    body.page-id-22 .contact input[type="submit"],
    body.page-id-22 .contact .wpcf7-submit{
      width: 100%;
      min-width: 0;
      padding: 16px 18px;
      border-radius: 12px;
    }
  }
  
/* ==============================
   Kontakt (Mobile): Checkbox + Text sauber
   ============================== */
   @media (max-width: 768px){

    body.page-id-22 .contact .checkbox-group{
      display: grid !important;
      grid-template-columns: 22px 1fr !important;
      column-gap: 12px !important;
      align-items: start !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-top: 14px !important;
    }
  
    body.page-id-22 .contact .checkbox-group input[type="checkbox"]{
      width: 18px !important;
      height: 18px !important;
      margin: 2px 0 0 0 !important;
      justify-self: start !important;
    }
  
    body.page-id-22 .contact .checkbox-group label{
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      line-height: 1.45 !important;
      text-align: left !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word !important;
    }
  
    /* Link darf umbrechen, aber nicht „komisch“ */
    body.page-id-22 .contact .checkbox-group label a{
      display: inline !important;
      white-space: normal !important;
    }
  }
  
  



/* === Starte dein Projekt auf Landingpage === */
/* =========================================
   Projektstart (CTA-Formular) 
   ========================================= */

   .projektstart{
    padding: 72px 20px 64px;
    background: #fff;
  }

  .projektstart{
    text-align: center;
  }
  
  .projektstart .container{
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .projektstart h2{
    text-align: center;
    margin: 0 0 10px;
  }
  
  .projektstart h2{
    position: relative;
    display: inline-block;
  }
  
  .projektstart h2::after{
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 10px auto 0;
    background: var(--accent);
    border-radius: 999px;
  }

  .projektstart-subline{
    text-align: center;
    margin: 0 0 24px;
    opacity: 0.85;
  }
  
  .booking-form{
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    padding: 28px;
  }
  
  .form-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
  
  .form-full{
    grid-column: 1 / -1;
  }
  
  .booking-form label{
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 6px;
  }
  
  .booking-form input,
  .booking-form select{
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
  }

.booking-form input:focus,
.booking-form select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(233, 133, 78, 0.25);
}

  
  .form-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }
  
  .booking-form button{
    padding: 12px 18px;
    border-radius: 10px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    min-width: 260px;
  }
  
  .form-note{
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
    text-align: center;
  }
  
 /*@media (max-width: 820px){
    .form-grid{
      grid-template-columns: 1fr;
    }
  }*/
  
  /* ==============================
   Kontakt (Mobile): Checkbox + Text sauber
   ============================== */
@media (max-width: 768px){

    body.page-id-22 .contact .checkbox-group{
      display: grid !important;
      grid-template-columns: 22px 1fr !important;
      column-gap: 12px !important;
      align-items: start !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-top: 14px !important;
    }
  
    body.page-id-22 .contact .checkbox-group input[type="checkbox"]{
      width: 18px !important;
      height: 18px !important;
      margin: 2px 0 0 0 !important;
      justify-self: start !important;
    }
  
    body.page-id-22 .contact .checkbox-group label{
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      line-height: 1.45 !important;
      text-align: left !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: break-word !important;
    }
  
    /* Link darf umbrechen, aber nicht „komisch“ */
    body.page-id-22 .contact .checkbox-group label a{
      display: inline !important;
      white-space: normal !important;
    }
  }

  /* =========================================
   Projektstart-Formular: Mobile auf 1 Spalte erzwingen
   ========================================= */
@media (max-width: 768px){

    .projektstart .form-grid{
      grid-template-columns: 1fr !important;
    }
  
    /* etwas kompakter, wirkt sauberer */
    .projektstart .booking-form{
      padding: 18px !important;
    }
  
    /* volle Breite, keine abgeschnittenen Placeholder */
    .projektstart .booking-form input,
    .projektstart .booking-form select,
    .projektstart .booking-form textarea{
      width: 100% !important;
      max-width: 100% !important;
    }
  
    /* Labels sollen normal umbrechen (nicht „zerhackt“) */
    .projektstart .booking-form label{
      word-break: normal;
      overflow-wrap: normal;
    }
  }
  
  @media (max-width: 768px){
    .projektstart .booking-form{
      padding: 16px !important;
    }
  
    /* verhindert, dass 100% + Border/Shadow optisch übersteht */
    .projektstart .booking-form input,
    .projektstart .booking-form select,
    .projektstart .booking-form textarea{
      box-sizing: border-box !important;
      display: block;
    }
  }
  @media (max-width: 768px){
    /* inneren Kasten optisch leichter machen */
    .projektstart .booking-form form{
      box-shadow: none !important;
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }
  }

  

  /* =========================================
   Mobile Menü (Astra Off-Canvas) – clean & professionell
   ========================================= */

/* 1) Desktop "Active-Line" im Off-Canvas deaktivieren */
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current-menu-item > a::after,
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current_page_item > a::after,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > a::after{
  content: none !important;
}

/* 2) Links im Off-Canvas sauber und einheitlich */
.ast-mobile-popup-drawer .main-header-menu > .menu-item > a{
  padding: 12px 16px !important;
  border: 0 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

/* 3) Aktiver Menüpunkt: dezente Markierung statt Linie */
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current-menu-item > a,
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current_page_item > a{
  color: var(--accent) !important;
  font-weight: 700 !important;
  background: rgba(255,127,80,0.10) !important;
  border-left: 3px solid var(--accent) !important;
}

/* 4) Hover/Focus (für bessere UX) */
.ast-mobile-popup-drawer .main-header-menu > .menu-item > a:hover,
.ast-mobile-popup-drawer .main-header-menu > .menu-item > a:focus{
  background: rgba(0,0,0,0.04) !important;
}

/* 5) Optional: Menü-Punkte etwas mehr Abstand */
.ast-mobile-popup-drawer .main-header-menu{
  padding: 6px 0 !important;
}


/* =========================================
   ASTRA MENÜ: Desktop Unterstrich / Mobile Off-Canvas clean
   ========================================= */

/* ---------- DESKTOP (Underline aktiv) ---------- */
@media (min-width: 921px){

    .main-header-menu > .menu-item > a{
      padding: 0.8rem 1rem;
    }
  
    .main-header-menu > .menu-item.current-menu-item > a,
    .main-header-menu > .menu-item.current_page_item > a{
      color: var(--accent) !important;
      position: relative;
      font-weight: 700;
      text-decoration: none !important;
    }
  
    .main-header-menu > .menu-item.current-menu-item > a::after,
    .main-header-menu > .menu-item.current_page_item > a::after{
      content: "";
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: 0.35rem;
      height: 2px;
      background: var(--accent);
      border-radius: 2px;
    }
  }
  
  /* ---------- MOBILE / OFF-CANVAS (Underline AUS, sauberer Active-State) ---------- */
  @media (max-width: 920px){
  
    /* 1) Deinen Desktop-Underline im Mobile überall killen (wichtig!) */
    body.ast-header-break-point .main-header-menu > .menu-item > a::after,
    body.ast-header-break-point .main-header-menu > .menu-item.current-menu-item > a::after,
    body.ast-header-break-point .main-header-menu > .menu-item.current_page_item > a::after{
      content: none !important;
      display: none !important;
    }
  
    /* 2) Keine "Linien" durch Borders/Decoration */
    body.ast-header-break-point .main-header-menu > .menu-item > a{
      border: 0 !important;
      text-decoration: none !important;
      box-shadow: none !important;
      padding: 12px 16px !important;
      line-height: 1.25 !important;
    }
  
    /* 3) Active State professionell (links Akzent + dezenter Hintergrund) */
    body.ast-header-break-point .main-header-menu > .menu-item.current-menu-item > a,
    body.ast-header-break-point .main-header-menu > .menu-item.current_page_item > a{
      color: var(--accent) !important;
      font-weight: 700 !important;
      background: rgba(255,127,80,0.10) !important;
      border-left: 3px solid var(--accent) !important;
    }
  
    /* 4) Optional: Hover/Focus für Touch-Geräte ruhig halten */
    body.ast-header-break-point .main-header-menu > .menu-item > a:active,
    body.ast-header-break-point .main-header-menu > .menu-item > a:focus{
      background: rgba(0,0,0,0.04) !important;
    }
  }

  @media (max-width: 920px){
    /* etwas mehr Luft zwischen den Menüpunkten */
    body.ast-header-break-point .main-header-menu > .menu-item{
      margin: 2px 0;
    }
  
    /* Links wirken hochwertiger (leichter abgerundet) */
    body.ast-header-break-point .main-header-menu > .menu-item > a{
      border-radius: 5px;
    }
  }



  /* =========================================================
   CF7 Projektstart (Landingpage)
   - 2 Spalten: Name + E-Mail
   - Formular mittig
   - saubere Abstände
   - Button in Accent-Farbe
   - Conditional Fields (sonstiges) bleibt korrekt hide/show
   ========================================================= */

/* ===== Feintuning-Variablen (nur für diese Sektion) ===== */
body.page-id-8 .projektstart,
body.page-id-6 .projektstart{
  --it4-accent: var(--accent, #ff7f50);
  --it4-accent-hover: var(--accent-hover, #e46b3a);
  --it4-text: var(--text, #0f1f2d);

  --it4-row-gap: 12px;   /* vertikaler Abstand zwischen den Feldern */
  --it4-col-gap: 18px;   /* Abstand zwischen Name / E-Mail Spalten */
  --it4-label-to-input: 6px;

  --it4-input-padding-y: 12px;
  --it4-input-padding-x: 14px;

  --it4-card-radius: 18px;
  --it4-input-radius: 10px;
}

/* ===== Abstand zwischen Subline und Formular ===== */
body.page-id-8 .projektstart .projektstart-subline,
body.page-id-6 .projektstart .projektstart-subline{
  margin: 0 0 26px 0;
}

/* ===== Mehr Abstand zwischen Subline und Formular ===== */
body.page-id-8 .projektstart #projektstart,
body.page-id-6 .projektstart #projektstart{
  margin-top: 22px;
}

/* ===== Formular-Wrapper mittig setzen ===== */
body.page-id-8 .projektstart .wpcf7,
body.page-id-6 .projektstart .wpcf7{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* CF7 Form: keine Theme-Margins, keine unerwünschten p-Abstände */
body.page-id-8 .projektstart .wpcf7 form.wpcf7-form,
body.page-id-6 .projektstart .wpcf7 form.wpcf7-form{
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

body.page-id-8 .projektstart .wpcf7 form.wpcf7-form p,
body.page-id-6 .projektstart .wpcf7 form.wpcf7-form p{
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Formular-"Card" ===== */
body.page-id-8 .projektstart #projektstart.booking-form,
body.page-id-6 .projektstart #projektstart.booking-form{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--it4-card-radius);
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
  padding: 28px;
}

/* ===== Grid Layout ===== */
body.page-id-8 .projektstart #projektstart .form-grid,
body.page-id-6 .projektstart #projektstart .form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--it4-row-gap) var(--it4-col-gap);
}

@media (min-width: 820px){
  body.page-id-8 .projektstart #projektstart .form-grid,
  body.page-id-6 .projektstart #projektstart .form-grid{
    grid-template-columns: 1fr 1fr;
  }
}

body.page-id-8 .projektstart #projektstart .form-half,
body.page-id-6 .projektstart #projektstart .form-half{
  grid-column: span 1;
}

body.page-id-8 .projektstart #projektstart .form-full,
body.page-id-6 .projektstart #projektstart .form-full{
  grid-column: 1 / -1;
}

/* ===== Labels + Inputs ===== */
body.page-id-8 .projektstart #projektstart label,
body.page-id-6 .projektstart #projektstart label{
  display: block;
  margin: 0;
  font-weight: 600;
  color: var(--it4-text);
  font-size: 0.95rem;
}

body.page-id-8 .projektstart #projektstart .wpcf7-form-control-wrap,
body.page-id-6 .projektstart #projektstart .wpcf7-form-control-wrap{
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-8 .projektstart #projektstart .form-input,
body.page-id-6 .projektstart #projektstart .form-input{
  width: 100%;
  box-sizing: border-box;

  margin-top: var(--it4-label-to-input);

  background: #ffffff;
  color: #334155;

  border: 1px solid #cbd5e1;
  border-radius: var(--it4-input-radius);

  padding: var(--it4-input-padding-y) var(--it4-input-padding-x);
  font-size: 1rem;
  line-height: 1.25;

  transition: border-color .25s ease, box-shadow .25s ease;
}

body.page-id-8 .projektstart #projektstart .form-input:focus,
body.page-id-6 .projektstart #projektstart .form-input:focus{
  outline: none;
  border-color: var(--it4-accent);
  box-shadow: 0 0 0 3px rgba(255,127,80,0.18);
}

/* Textarea */
body.page-id-8 .projektstart #projektstart textarea.form-input,
body.page-id-6 .projektstart #projektstart textarea.form-input{
  min-height: 140px;
  resize: vertical;
}

/* ===== Checkbox/Acceptance ===== */
body.page-id-8 .projektstart #projektstart .checkbox-group,
body.page-id-6 .projektstart #projektstart .checkbox-group{
  grid-column: 1 / -1;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.5;
}

body.page-id-8 .projektstart #projektstart .checkbox-group input[type="checkbox"],
body.page-id-6 .projektstart #projektstart .checkbox-group input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 8px;
}

/* ===== Button + Note ===== */
body.page-id-8 .projektstart #projektstart .form-actions,
body.page-id-6 .projektstart #projektstart .form-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  text-align: center;
}

body.page-id-8 .projektstart #projektstart .btn,
body.page-id-8 .projektstart #projektstart input.wpcf7-submit,
body.page-id-6 .projektstart #projektstart .btn,
body.page-id-6 .projektstart #projektstart input.wpcf7-submit{
  display: block;
  width: 100%;
  max-width: 420px;

  padding: 14px 22px;
  border: 0;
  border-radius: 12px;

  background: var(--it4-accent);
  color: #ffffff !important;
  font-weight: 700;

  cursor: pointer;
  transition: background-color .25s ease, transform .08s ease;
}

body.page-id-8 .projektstart #projektstart .btn:hover,
body.page-id-8 .projektstart #projektstart input.wpcf7-submit:hover,
body.page-id-6 .projektstart #projektstart .btn:hover,
body.page-id-6 .projektstart #projektstart input.wpcf7-submit:hover{
  background: var(--it4-accent-hover);
}

body.page-id-8 .projektstart #projektstart .btn:active,
body.page-id-8 .projektstart #projektstart input.wpcf7-submit:active,
body.page-id-6 .projektstart #projektstart .btn:active,
body.page-id-6 .projektstart #projektstart input.wpcf7-submit:active{
  transform: translateY(1px);
}

body.page-id-8 .projektstart #projektstart .form-note,
body.page-id-6 .projektstart #projektstart .form-note{
  margin: 0;
  color: #64748b;
  font-size: 0.9rem;
}

/* Mobile */
@media (max-width: 480px){
  body.page-id-8 .projektstart #projektstart.booking-form,
  body.page-id-6 .projektstart #projektstart.booking-form{
    padding: 18px;
  }

  body.page-id-8 .projektstart #projektstart .btn,
  body.page-id-8 .projektstart #projektstart input.wpcf7-submit,
  body.page-id-6 .projektstart #projektstart .btn,
  body.page-id-6 .projektstart #projektstart input.wpcf7-submit{
    max-width: none;
    padding: 16px 18px;
  }
}

/* ===== Validierung (CF7) ===== */
body.page-id-8 .projektstart #projektstart .wpcf7-not-valid-tip,
body.page-id-6 .projektstart #projektstart .wpcf7-not-valid-tip{
  margin-top: 6px;
  font-size: .85rem;
  color: #d93025;
}

body.page-id-8 .projektstart #projektstart .wpcf7-not-valid,
body.page-id-6 .projektstart #projektstart .wpcf7-not-valid{
  border-color: #d93025 !important;
  box-shadow: 0 0 0 3px rgba(217,48,37,0.12);
}

/* ===== Conditional Fields Gruppe: volle Breite, hide/show behalten ===== */
body.page-id-8 .projektstart #projektstart .wpcf7cf-group,
body.page-id-8 .projektstart #projektstart .wpcf7cf_group,
body.page-id-8 .projektstart #projektstart [data-class="wpcf7cf_group"],
body.page-id-6 .projektstart #projektstart .wpcf7cf-group,
body.page-id-6 .projektstart #projektstart .wpcf7cf_group,
body.page-id-6 .projektstart #projektstart [data-class="wpcf7cf_group"]{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

body.page-id-8 .projektstart #projektstart .wpcf7cf-hidden,
body.page-id-6 .projektstart #projektstart .wpcf7cf-hidden{
  display: none !important;
}