/*
Theme Name: PaRa Consulting – KontaTAX NEU
Theme URI: https://kontatax.de/
Author: PaRa Consulting
Description: Individuelles WordPress-Theme für PaRa Consulting / KontaTAX.
Version: 2.5.28
Text Domain: para-kontatax
*/

/* =========================================================
   1. GRUNDLAGEN
   ========================================================= */
:root{
  --bg:#F6EBF0;
  --lavender:#E6E6FA;
  --purple:#403152;
  --eyebrow:#7A278B;
  --blue:#366092;
  --lightblue:#558ED5;
  --consulting:#8B7B8B;
  --white:#FFFFFF;
  --max:1180px;

  /* ZENTRALE SCHRIFTGRÖSSEN */
  --font-body:14px;
  --font-small:13px;
  --font-footer:14px;
  --font-eyebrow:17px;
  --font-h1:clamp(26px,2.5vw,36px);
  --font-h2:clamp(22px,2.1vw,30px);
  --font-h3:clamp(20px,1.9vw,26px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--purple);
  font-family:Arial,Helvetica,sans-serif;
  font-size:var(--font-body);
  line-height:1.65;
}

a{color:inherit}
img{max-width:100%;height:auto}
p,li{font-size:var(--font-body);line-height:1.65}
.site-wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* =========================================================
   2. TYPOGRAFIE – JEDE EBENE NUR EINMAL DEFINIERT
   ========================================================= */
h1,h2,h3{
  margin-top:0;
  line-height:1.12;
  color:var(--purple);
}

h1{
  font-size:var(--font-h1);
  letter-spacing:-.025em;
  max-width:760px;
  margin-bottom:24px;
}

h2{
  font-size:var(--font-h2);
  margin-bottom:18px;
}

h3{
  font-size:var(--font-h3);
  margin-bottom:14px;
}

/* Alle violetten Kleinüberschriften sind absichtlich identisch. */
.eyebrow{
  margin:0 0 14px;
  color:var(--eyebrow);
  font-size:var(--font-eyebrow);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.13em;
  text-transform:uppercase;
}


/* =========================================================
   3. HEADER / NAVIGATION
   ========================================================= */
.site-header{
  background-color:var(--bg);
  background-image:url("assets/images/header-office-bg-v2513.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  border-bottom:1px solid rgba(64,49,82,.12);
}

.header-inner{
  min-height:210px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:14px;
  align-items:end;
}

.primary-nav{
  padding-bottom:35px;
  min-width:0;
}

.primary-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:nowrap;
}

.primary-nav li{margin:0;padding:0}

.primary-nav a{
  display:block;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.primary-nav a:hover{color:var(--blue)}

.brand-panel{
  width:100%;
  justify-self:end;
  align-self:center;
  padding:18px 0;
}

.brand-logo{
  display:block;
  width:100%;
  max-width:360px;
  margin-left:auto;
}

.brand-logo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* =========================================================
   4. STARTSEITE / HERO
   ========================================================= */
.hero{
  padding:78px 0 82px;
  background:var(--lavender);
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,760px) 1fr;
  gap:60px;
}


.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn,
button,
input[type="submit"]{
  font-size:var(--font-body);
}

.btn{
  display:inline-block;
  padding:13px 20px;
  border:2px solid var(--purple);
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
}

.btn.primary{
  background:var(--purple);
  color:var(--white);
}

.btn:hover{transform:translateY(-1px)}

/* =========================================================
   5. STARTSEITEN-ABSCHNITTE
   ========================================================= */
.section{padding:74px 0}

body.home main > .section:nth-of-type(2){background:var(--bg)}
body.home main > .section:nth-of-type(3){background:var(--lavender)}
body.home main > .section:nth-of-type(4){background:var(--bg)}
body.home main > .section:nth-of-type(5){background:var(--lavender)}
body.home main > .section:nth-of-type(6){background:var(--bg)}

.trust{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}

.trust span{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(64,49,82,.12);
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:34px;
}

.card{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(64,49,82,.12);
  border-radius:18px;
  padding:28px;
  min-height:250px;
}

.card p{margin-bottom:18px}

.more{
  font-weight:800;
  text-decoration:none;
  color:var(--blue);
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}

.highlight{
  border-left:5px solid var(--lightblue);
  padding-left:22px;
}

.contact-box{
  background:var(--purple);
  color:var(--white);
  border-radius:22px;
  padding:38px;
}

.contact-box h1,
.contact-box h2,
.contact-box h3{color:var(--white)}

.contact-box a{color:var(--white)}

.contact-list{
  list-style:none;
  padding:0;
  margin:22px 0 0;
}

.contact-list li{margin:8px 0}

.contact-address{
  display:block;
  margin-top:4px;
  line-height:1.65;
}

/* =========================================================
   6. UNTERSEITEN
   ========================================================= */
body:not(.home){background:var(--lavender)}
body:not(.home) .site-header{background-color:var(--bg)}
body:not(.home) .site-footer{background:var(--bg)}

.page-main{padding:70px 0 90px}
.page-main article{max-width:860px}

/* Keine Sondergrößen für page-main h1/h2:
   dieselben zentralen H1/H2/H3-Werte gelten überall. */
.page-main h1{margin-bottom:34px}
.page-main h2{margin-top:44px}

.service-detail{
  scroll-margin-top:30px;
  padding:34px 0;
  border-bottom:1px solid rgba(64,49,82,.15);
}

/* =========================================================
   7. KONTAKTFORMULAR – EINE EINZIGE REGELGRUPPE
   ========================================================= */
form.para-contact-form{
  display:block;
  width:100%;
  max-width:760px;
  margin-top:24px;
}

form.para-contact-form .form-row:not(.privacy-check){
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:18px;
  align-items:center;
  width:100%;
  margin:0 0 16px;
}

form.para-contact-form .form-row:not(.privacy-check) > label{
  display:block;
  margin:0;
  padding:0;
  font-weight:700;
  line-height:1.35;
}

form.para-contact-form input[type="text"],
form.para-contact-form input[type="email"],
form.para-contact-form textarea{
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  box-sizing:border-box;
  padding:11px 13px;
  border:1px solid rgba(64,49,82,.28);
  border-radius:6px;
  background:var(--white);
  color:var(--purple);
  font:inherit;
}

form.para-contact-form textarea{
  min-height:170px;
  resize:vertical;
}

form.para-contact-form .privacy-check{
  display:grid;
  grid-template-columns:190px 24px minmax(0,1fr);
  gap:0 8px;
  align-items:start;
  width:100%;
  margin:4px 0 16px;
}

form.para-contact-form .privacy-check > input[type="checkbox"]{
  grid-column:2;
  margin:4px 0 0;
}

form.para-contact-form .privacy-check > label{
  grid-column:3;
  display:block;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:400;
  line-height:1.45;
}

form.para-contact-form .form-note{
  margin-left:208px;
  font-size:13px;
  opacity:.82;
}

form.para-contact-form > button.btn{
  margin-left:208px;
}

form.para-contact-form .para-hp{
  position:fixed;
  left:-99999px;
  top:-99999px;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}

.para-form-message{
  display:block;
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid rgba(64,49,82,.25);
  border-radius:6px;
  background:var(--white);
}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid rgba(64,49,82,.14);
  padding:34px 0 42px;
  font-size:var(--font-footer);
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size:var(--font-footer);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{text-decoration:none}

.site-copyright{
  width:100%;
  text-align:center;
  padding:18px 20px 8px;
  font-size:var(--font-small);
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .header-inner{
    grid-template-columns:1fr;
    gap:0;
    align-items:center;
    padding:18px 0 22px;
  }

  .brand-panel{
    grid-row:1;
    padding:0 0 16px;
  }

  .brand-logo{
    max-width:400px;
    margin:0 auto;
  }

  .primary-nav{
    grid-row:2;
    padding:0;
  }

  .primary-nav ul{
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 20px;
  }

  .hero{padding:58px 0}
  .hero-grid,.split{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  form.para-contact-form .form-row:not(.privacy-check){
    grid-template-columns:1fr;
    gap:7px;
  }

  form.para-contact-form .privacy-check{
    grid-template-columns:24px minmax(0,1fr);
  }

  form.para-contact-form .privacy-check > input[type="checkbox"]{grid-column:1}
  form.para-contact-form .privacy-check > label{grid-column:2}

  form.para-contact-form .form-note,
  form.para-contact-form > button.btn{
    margin-left:0;
  }
}

@media (max-width:620px){
  .site-wrap{padding:0 18px}
  .brand-logo{max-width:100%}
  .primary-nav ul{gap:9px 14px}
  .primary-nav a{font-size:12px}
  .cards{grid-template-columns:1fr}
  .section{padding:54px 0}
}