/* =============================================
       FONTS
    ============================================= */


@font-face {
  font-family: "IBM Plex Sans Bold";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Medium";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Regular";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
    
    
    /* =============================================
       DESIGN TOKENS
    ============================================= */
    :root{
      --container: 1600px;          /* max Breite */
      --cols: 14;                   /* 14-Spalten Grid */
      --gutter: 0px;               /* horizontaler Abstand */
      --step: 40px;                 /* vertikales Raster */

      --c-white:#fff; --c-black:#000;
      --c-line-b20: rgba(0,0,0,.2); /* 20% schwarz */
      --c-line-b50: rgba(0,0,0,.5); /* 50% schwarz */
      --violet:#310942;             /* CTA-Farbe */
      --check:#009600;              /* Häkchen */

      /* Pricing Spalten-Hintergründe */
      /*--col1:#fff;     /* Spalte 1 */
      /*--col2:#f7f7f7;  /* Spalte 2 */
      /*--col3:#f0f0f0;  /* Spalte 3 */
      /*--col4:#e8e8e8;  /* Spalte 4 */
      /*--col5:#e0e0e0;  /* Spalte 5 */
      --col1:#fff;     /* Spalte 1 */
      --col2:#fff;  /* Spalte 2 */
      --col3:#f7f7f7;  /* Spalte 3 */
      --col4:#f0f0f0;  /* Spalte 4 */
      --col5:#e8e8e8;  /* Spalte 5 */
      --col6:#d9d9d9;  /* Spalte 5 */
    }
  
    /* =============================================
       BASE
    ============================================= */
    *,*::before,*::after{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{ margin:0; background:#fff; color:#000; font-family:'IBM Plex Sans Regular',sans-serif; line-height:1.55; }
    img{ max-width:340%; height:auto; display:block; }
    a{ color:inherit; text-decoration:none; }
    /*.wrap{ width:min(var(--container),92vw); margin:0 auto; }*/
    .grid{ display:grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gutter); }
    .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
    h2 {
      font-family:'IBM Plex Sans Medium';
      font-size: 40px;
      font-weight: 400;
      margin-bottom: 40px;
    }
    h3 {
      font-family:'IBM Plex Sans Medium';
      font-size: 18px;
      font-weight: 400;
    }
    h4 {
      font-family:'IBM Plex Sans Bold';
      line-height: 18px;
      font-size: 18px;
      font-weight: 400;
      /*margin:8px;
      padding:0;*/
    }
    .h2head {font-size: 20px !important; line-height: 27px !important;margin-top: 0px; padding-top: 0px;} 
    p {
      font-family:'IBM Plex Sans Regular';
      font-size: 18px;
      font-weight: 200;
      line-height: 26px;
      margin:0;
      padding:0;
    }
    ul, li {
      display: grid;
    }
    a, a:link, a:visited, a:active { color: rgba(0,0,0,.9)}
    sup {
      font-size: 9px;
      vertical-align:auto;
    }
    .underline {text-decoration: underline;}
    .topnav ul {min-width: 160px;}
    @media (max-width: 1024px){
      .topnav p {font-size: 28px !important;line-height: 36px !important; margin-top:18px !important;}
      .topnav ul {width:160px !important;}    
    }
    @media (max-width: 420px){
      .topnav p {font-size: 16px !important;line-height: 20px !important; margin-top:16px !important;}
      .topnav ul {min-width: 150px !important;width:150px !important;}
    }

    /* =============================================
       HERO + HEADER (Header liegt auf dem Bild)
    ============================================= */

    .hero{ grid-column:1 / -1; position:relative; }
    .hero-media{ grid-column:1 / 15; }
    .hero-media .bg{ width:100%; height:auto; object-fit:cover; object-position:50% 50%; display:block; }

    .hero-header{ position:absolute; top:20px; left:0; right:0; z-index:10;}
    .hero-header .header-inner{ grid-column:2 / 14; height:100px; display:grid; grid-template-columns: repeat(14, 1fr); align-items:stretch; padding:0 0 20px 0; position:relative; color:#fff; }
    .hero-header .header-inner::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(255,255,255,.5); }

    .headline { grid-column:2 / 10; color: rgba(255,255,255,.9); position: absolute; top: 65%; }

    /* Spalten: Logo 2–3, Tagline 7–10, Topnav 12–13 */
    .brand { grid-column:1 / 5; }
    .brand img{ height:70px;margin-top: 6px;}
    .tagline{ grid-column:7 / 12; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:100%; text-align:left;}
    .topnav{ grid-column:13 / 15;display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; height:100%;text-align: right;}
    .topnav a:link, .topnav a, .topnav a:visited {color: white; text-decoration: underline;display: block;}
    .cta-header { position:absolute; right: 0%; top:25%;width:35%;max-width: 548px;}
    
    @media (max-width: 1024px){
      .hero-header .header-inner{ grid-column:2 / 14; grid-template-columns:1fr auto; padding:0; height:70px;}
      .tagline{ display:none; }
      .brand{ grid-column:1 / 3; }
      .brand img{ height:24px; }
    }

    @media (max-width: 500px){
      .hero-header .header-inner{ grid-column:2 / 14; grid-template-columns:1fr auto; padding:0; height:7 0px;}
      .tagline{ display:none; }
      .brand{ grid-column:1 / 3; }
      .brand img{ height:24px; }
      .cta-header { position:absolute; right: 0%; top:25%;display: none;}
    }
    /* =============================================
       SEKTION Termine (2-Spalten, Raster 40px)
    ============================================= */
    /*.termine{ margin-top: var(--step); }*/
    .termine-wrap{ grid-column:1 / 15; margin-top:80px;}
    .termine-item{ display:grid; grid-template-columns: repeat(14, 1fr); gap: var(--gutter); align-items:start; padding:0; margin:0; }
    /* Fragen links 2–6 mit 20% Linie; Antworten rechts 7–13 mit schwarzer Linie */


    /* Tablet Hochformat: untereinander, Antwort +40px, Linie der Frage wird schwarz (Design-Spez) */
    @media (max-width: 1024px){
      .h2termine {font-size: 28px;line-height: 36px;}
 
    }
   @media (max-width: 320px){
      .h2termine {font-size: 16px;line-height: 22px;}
 
    }

/* =============================================
   SEKTION – TERMINE (neu)
============================================= */
/* =============================================
   SEKTION – TERMINE (neu, pixel-sicher)
============================================= */
.termine { margin-top: var(--step); }
.termine-wrap { grid-column: 2 / 14; }

/* Kopf: Headline nur bis Spalte 5 unterstrichen, Sub rechts 6–15 */
.termine-head {
  grid-column: 2 / 14;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  align-items: end; /* Baseline-Alignment */
  gap: var(--gutter);
}
.termine-title {
  grid-column: 1 / 6; /* 1–5 */
  margin: 0;
  padding: 10px 0 12px;
  font-family: 'IBM Plex Sans Medium';
  font-size: 24px;
  line-height: 1.2;
}
.termine-sub {
  grid-column: 6 / 15; /* 6–14 */
  margin: 0;
  padding-bottom: 12px;  /* gleiche Unterkante wie Headline */
  text-align: right;
  font-size: 18px;
  line-height: 1.4;
}

/* Raster der Karten */
.termine-grid {
  grid-column: 1 / 15;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.termin-left { grid-column: 1 / 6; } /* 1–5 */
.termin-right-group {
  grid-column: 6 / 15;               /* 6–14 */
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 2 x 50% */
  gap: 20px;
}

/* Karten-Basis */
.termin {
  color: #fff;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  min-height: 100%; /* für identische Höhen */
  box-sizing: border-box;
}
.termin * { color: inherit; }

.termin-h3 {
  margin: 0;
  padding: 12px 0;
  border-bottom:  1px solid rgba(255,255,255,0.3); /* Linie unter Titel */
  font-family: 'IBM Plex Sans Medium';
  font-size: 18px;
  line-height: 1.25;
}
.termin-desc {
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.45;
}
.termin-meta {
  list-style: none;
  padding: 0;
  margin: 0;
 
}
.termin-meta li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom:  1px solid rgba(255,255,255,0.3);
  font-size: 16px;
  line-height: 40px;
}
.termin-meta ul {
  /*display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
  font-size: 16px;*/
  line-height: 40px;
  height: 120px !important;
  vertical-align: bottom !important;
}
.termin-meta li:last-child { border-bottom: 1px solid rgba(255,255,255,0.3) } /* auch letzte Zeile mit Linie (wie Vorgabe) */
.termin-info {
  position:relative;
  bottom: 0px !important;
  vertical-align:0%;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.3) !important;
}
.termin-cta {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  /*background-color: rgba(49,9,66,.50) !important;*/
}
.termin-cta .btn.outline {
  min-width: 160px;
}

/* Farben je Karte (laut Vorgabe) */
.termin-left  { background-color: #310942; }
.termin-mid   { background-color: #472255; }
.termin-right { background-color: #472256; }
/* CTA-Buttons mit 4px Radius */
.t-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:4px; font-weight:600; transition:.2s all; cursor:pointer; }
.t-btn.solid{ background:var(--violet); color:#fff; border:1px solid var(--violet); }
.t-btn.solid:hover{ filter:brightness(.9); }
.t-btn.outline{ background:#fff; color:var(--violet); border:1px solid var(--violet); }
.t-btn.outline:hover{ background-color:#eae6eb; color:#fff; }

/* Responsiv */
@media (max-width: 1024px){
  .termine-title { grid-column: 2 / 14; }
  .termine-sub   { grid-column: 2 / 14; text-align: left; }
  .termin-left   { grid-column: 2 / 14; }
  .termin-right-group { grid-column: 2 / 14; grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .termin-h3 { font-size: 16px; }
  .termin-desc { font-size: 14px; }
  .termin-meta li { grid-template-columns: 1fr; gap: 4px; }
  .termin-cta .btn.outline { width: 100%; max-width: 220px; }
}


    /* =============================================
       SEKTION 2 – KEYFACTS (2-Spalten, Raster 40px)
    ============================================= */
    .info{ margin-top: var(--step); }
    .info-wrap{ grid-column:1 / 15; margin-top:80px;}
    .info-item{ display:grid; grid-template-columns: repeat(14, 1fr); gap: var(--gutter); align-items:start; padding:0; margin:0; }
    /* Fragen links 2–6 mit 20% Linie; Antworten rechts 7–13 mit schwarzer Linie */
    .q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8, .q9, .q10, .q11, .q12 { grid-column:2 / 7; padding:20px 0; border-top:1px solid var(--c-line-b20); font-weight:500; margin:0px;}
    .info-a{ grid-column:7 / 14; padding:20px 0; border-top:1px solid #000; color: rgba(0,0,0,.9); margin:0px;}
    .info-item + .info-item{ margin-top:0; }

    /* Tablet Hochformat: untereinander, Antwort +40px, Linie der Frage wird schwarz (Design-Spez) */
    @media (max-width: 1024px){
      .q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8, .q9, .q10, .q11, .q12{ grid-column:2 / 14; border-top:1px solid #000; }
      .info-a{ grid-column:2 / 14; margin-top:0px;margin-bottom: 20px; border-top: none; }
    }

    /* =============================================
       SEKTION 3 – PRICING (5 Spalten, responsive)
    ============================================= */
    .pricing{ margin-top: var(--step);  margin-top:80px; }
    .pricing-wrap{ grid-column:2 / 14; }
    .table-scroller{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .pricing table{ width:100%; border-collapse:collapse; min-width:1024px; font-weight:400; font-family:'IBM Plex Sans', sans-serif; }
    .pricing td, .pricing th { padding:14px 0px; border-top:1px solid var(--c-line-b20); }
   /*thead th {border-top: none; }
    */
    /* Schwarze Divider-Linie direkt unter den Spaltentiteln über alle 5 Spalten */
    .pricing thead tr.divider th{ border-top:1px solid #000; }

    /* Sektionstitel-Zeilen (Medium) */
    .pricing tbody tr.section{ font-weight:500; }
    .pricing tbody tr.section th, .pricing tbody tr.section td{ border-top:1px solid var(--c-line-b20); }
    .pricing tbody tr.section-primary th, .pricing tbody tr.section-primary td{ border-top:1px solid #000; }

    .pricing tfoot th, .pricing tfoot td{ border-top:1px solid var(--c-line-b20); }

    /* Spalten-Hintergründe genau wie festgelegt */
    .pricing th:nth-child(1), .pricing td:nth-child(1){ background:var(--col1); text-align:left;min-width: 180px; }
    .pricing th:nth-child(2), .pricing td:nth-child(2){ background:var(--col2); text-align:center;min-width: 180px; }
    .pricing th:nth-child(3), .pricing td:nth-child(3){ background:var(--col3); text-align:center;min-width: 180px; }
    .pricing th:nth-child(4), .pricing td:nth-child(4){ background:var(--col4); text-align:center;min-width: 180px; }
    .pricing th:nth-child(5), .pricing td:nth-child(5){ background:var(--col5); text-align:center;min-width: 180px; }
    .pricing th:nth-child(6), .pricing td:nth-child(6){ background:var(--col6); text-align:center;min-width: 180px; }

    /* Zeilen-Hover über die ganze Zeile (inkl. Spalte 1) */
    .pricing tbody tr:hover td, .pricing tbody tr:hover th{ background: rgba(49,9,66,.10); }

    /* CTA-Buttons mit 4px Radius */
    .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:4px; font-weight:600; transition:.2s all; cursor:pointer; }
    .btn.solid{ background:var(--violet); color:#fff; border:1px solid var(--violet); }
    .btn.solid:hover{ filter:brightness(.9); }
    .btn.outline{ background:#fff; color:var(--violet); border:1px solid var(--violet); }
    .btn.outline:hover{ background:var(--violet); color:#fff; }

    .check{ color:var(--check); font-weight:600; }

    .dash{ color:#000; opacity:.5;}
    .dash2{ color:#000;}
    .dash3{ color:#000;}
    .dash4{ color:#000;}
    .dash5{ color:#000;}
    .dash6{ color:#000;}

    /* Responsives Verhalten */
    @media (max-width:1024px){
      .pricing table{ min-width:860px; }
      .pricing th:first-child, .pricing td:first-child{ position:sticky; left:0; z-index:2; background: var(--col1); }
    }
    @media (max-width:767px){
      .pricing table{ min-width:900px; }
      .pricing th:first-child, .pricing td:first-child{ position:static; }
    }

    /* =============================================
       SEKTION 4 – FAQ (Akkordeon, wie Sektion 2)
    ============================================= */
    .faq{ margin-top: 80px; }
    .faq-wrap{ grid-column:1 / 15; }

    /* Grid-Struktur: identisch zu Sektion 2 */
    .faq-item{ display:grid; grid-template-columns: repeat(14, 1fr); gap: var(--gutter); align-items:start; padding:0; margin:0; }
    .faq-toggle{ display: contents; cursor: pointer; }

    /* Frage links 2–6 mit 20%-Linie */
    .faq-q{ grid-column:2 / 7; padding:20px 0; border-top:1px solid var(--c-line-b20); font-weight:500; font-size:1.2rem; margin-top:0;text-align: left; }
    .faq-q a, .faq-q a:link, .faq-q a:visited {color: black !important;}
    h3.a, h3.a:link, h3.a:visited {color: black !important;}
    /* Pfeil rechts; 3× so groß, bleibt auf Position */
    .faq-arrow{ grid-column:13 / 14; align-self:center; justify-self:end; transition: transform .24s ease; font-size:2rem; line-height:1; color: black !important; }
    .faq-toggle[aria-expanded="true"] .faq-arrow{ transform: rotate(180deg); }

    /* Antwort rechts 7–13, schwarze Linie bleibt sichtbar; Inhalt klappt ein/aus */
    .faq-a{ grid-column:7 / 14; border-top:1px solid #000; max-height:0; overflow:hidden; transition: max-height .25s ease, padding .2s ease; padding:0px; margin-top:-86px;}
    .faq-toggle[aria-expanded="true"] + .faq-a{ max-height:1200px; padding:20px 0; }
    .faq-a p {padding-right: 40px;}
    @media (max-width: 1024px){
      .faq-q{ grid-column:2 / 14; border-top:1px solid #000; z-index:999;color: black !important;padding-right: 40px;}
      .faq-a{ grid-column:2 / 14; border-top: none;margin-top:0px;}
      .faq-toggle[aria-expanded="true"] + .faq-a{ margin-top:40px;}
      .faq-arrow{margin-top:-110px;}
      #fa1, #fa2, #fa3, #fa4, #fa5, #fa6 {margin-top: -50px !important; z-index:9;}
    }

    /* =============================================
       FOOTER
    ============================================= */
    footer{ margin-top: var(--step); background:#0b0c10; color:#fff; }
    .footer-inner{ padding: var(--step) 0; }
    .footer-grid{ grid-column:2 / 13; display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
    .f-col{ grid-column: span 4; }
    .f-col h4{ margin:0 0 8px 0; font-weight:600; }
    .f-small{ opacity:.85; }
    .f-col a:link, .f-col a, .f-col a:visited {color: white; text-decoration: underline;}
    @media (max-width: 768px){ .f-col{ grid-column:1 / -1; padding: 20px 0; } }