:root{
 --bg: #f4f7fb;
 --card: #ffffff;
 --text: #1f2937;
 --muted: #4b5563;
 --line: #ccfbf1;
 --accent: #2dd4bf;
 --accent-soft: #ccfbf1;


body{
  margin:0;
  font-family:Arial,sans-serif;
  background:
   repeating-linear-gradient(
    0deg,
    rgba(45,212,191,0.07) 0px,
    rgba(45,212,191,0.07) 1px,
    transparent 1px,
    transparent 32px
),
    linear-gradient(to bottom, #1f2937, #0f172a);
    color:#111827; 
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.3),transparent 40%);
  pointer-events:none;
}

 .cv{
  max-width:850px;
  margin:40px auto;
  padding:40px 48px 60px;
  border-radius:20px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  position:relative;
  z-index:2;
  padding-bottom:110px;
}

 .cv-header{
  display:grid;
  grid-template-columns:1 fr auto;
  gap:40px;
  border-bottom:2px solid var(--accent-soft);
   box-shadow:0 -6px 12px -6px
   rgba(56,189,248,0.35);
  padding-bottom:20px;
  margin-bottom:30px;
  align-items:start;
}

 .header-left h1{
  margin:0;
  font-size:32px;
  color:#0f172a;
}
 
 .title{
  margin-top:8px;
  color:var(--accent);
  font-weight:600;
  letter-spacing:0.2px;
}

 .header-right{
  text-align:right;
  font-size:14px;
  background:#f8fbff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  justify-self:end;
}

 .header-right p{
  margin:4px;
}

 .cv-section{
  margin-bottom:28px;
  margin-top:40px;
}

 .cv-section h2{
  font-size:20px;
  margin-bottom:18px;
  color#111827;
  padding-left:12px;
  border-left:4px solid var(--accent)
}

 .cv-section p{
  margin:0;
  line-height:1.6;
  color:#374151;
}

 .cv-item{
  display:flex;
  gap:20px;
  padding:14px 0;
  border-bottom:1px solid #f0f2f5;
}

 .cv-item:last-child{
  border-bottom:none;
}

 .cv-date{
  min-width:150px;
  font-weight:700;
  color:var(--accent);
  font-size:14px;
}

 .cv-date.highlight{
  color:var(--accent);
  font-weight:600;
}

 .cv-content{
  font-size:14px;
  color:#1f2937;
}
 .cv-content strong{
  font-size:15px;
}

 .cv-item:hover{
  background:#f9fafb;
}

 .skills{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
 
 .skill-box{
  border:1px solid rgba(255,255,255,0.75);
  border-radius:16px;
  padding:16px 18px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:14px;
  line-height:1.6;
  transition:0.2s;
  height:100%;
  box-shadow:0 6px 18px rgba(0,0,0,0.08),
   0 0 0 1px rgba(255,255,2550.15) inset;
  box-sizing:border-box;
  
}

  .skill-box:hover{
   background:rgba(45,212,191,0.18);
   border-color:rgba(45,212,191,0.35);
   
}

  .skill-box strong{
   display:block;
   margin-bottom:0px;
   color:#0f172a;
}

  .skill-box.full{
   grid-column:1 / -1;
   width:100%;
   max-width:500px;
   justify-self:center;
   text-align:center;
   margin-top:-8px;
}

 .cv-footer{
  margin-top:40px;
  text-align:right;
  font-size:14px;
  color:#374151;
 }

 .cv-career{
  margin-top:80px;
  border-top:1px solid var(--line);
  padding-top:20px;
}

 .page-break{
  display:none;
}
.btn{
  text-decoration:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  background:#73cfc7;
  color:white;
  transition:0.2s;
}
.btn:hover{
  background:#5fb8b1;
}
.btn.secondary{
  background:#e8f5f4;
  color:#3e7f7a;
}
.btn.secondary:hover{
  background:#d6eeec;
}

@media print {
.cv-skills-section h2{
 padding-top:30px;
}
.page-break{
 display:block;
 page-break-before:always;
 break-before:page;
}
 
.cv-career{
  padding-top:30px;
  }
.cv-career h2{
  margin-bottom:20px;
}
body{
 margin:0;
 font-family:Arial, sans-serif;
 background:#ffffff;
 color:var(--text);
}
.cv{
 box-shadow:none;
 margin:0;
 max-width:100%;
 border-radius:0;
 background:#ffffff;
 backdrop-filter:none;
}
.cv-section{
 break-inside:avoid;
 page-break-inside:avoid;
}
.cv-item{
 break-inside:avoid;
 page-break-inside:avoid;
}
.skill-box{
 break-inside:avoid;
 page-breake-inside:avoid;
 background:#ffffff;
 backdrop-filter:none;
 border:1px solid #dbe3ee;
}
h2, h3{
 break-after:avoid;
 page-break-after:avoid;
 }
}


.anschreiben-section{
  margin-top:20px;
  padding-top:20px;
  border-top:2px solid var(--accent-soft);
  box-shadow:0 -6px 12px -6px
   rgba(56,189,248,0.35);
}
.anschreiben-section::before{
  content:"";
  position:absolute;
  top:-6px;
  left:0;
  width:4px;
  height:28px;
  background:var(--accent-soft);
  border-radius:2px;
  display:none;
}
.title{
  margin-top:6px;
  color:var(--accent);
  font-weight:600;
}
.cv{
  position:relative;
  padding-top:30px;
}
.cv::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background_linear-gradient(90deg var(--accent)#38bdf8);
  border-top-left-radius:20px;
  border-top-right:radius:20px;
}
 .cv-header{
  display:grid;
  grid-template-columns:1 fr auto;
  gap:40px;
  border-bottom:2px solid var(--accent-soft);
  box-shadow:0 6px 12px -10px
   rgba(56,189,248,0.35);
  padding-bottom:16px;
  margin-bottom:28px;
  align-items:start;
}
.header-left h1{
  margin:0;
  font-size:32px;
  color:#0f172a;
}
.header-right{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 14px;
  width:max-content;
  font-size:13px;
  line-height:1.4;
  margin:2px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  justify-self:end;
}
.header-right strong{
  color:#6b7280;
  font-weight:600;
}
.anschreiben-title{
  font-size:20px;
  font-weight:600;
  color:#0f172a;
  margin-bottom:20px;
  padding-left:14px;
  position:relative;
}
.anschreiben-title::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:4px;
  height:24px;
  border-radius:2px;
  background:var(--accent);
  top:50%;
  transform:translateY(-58%);
}
.anschreiben-title::after{
  content:"";
  display:block;
  width:60px;
  height:2px;
  background:#38bdf8;
  margin-top:6px;
  display:none;
}
.anschreiben-body{
  margin-top:28px;
  font-size:15px;
  color:#1f2937;
  line-height:1.8;
  position:relative;
  min-height:500px;
  max-width:680px;
  margin-left:0;
}
.anschreiben-body p{
 margin:0 0 16px;
}
.anschreiben-body p:last-child{
 margin-bottom:0;
}
.contact-box{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 14px;
  width:max-content;
  font-size:13px;
  line-height:1.4;
  margin:2px 0;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  justify-self:end;
}
.contact-box p{
  margin:2px 0;
}
.cv-footer{
  margin-top:40px;
  text-align:right;
  font-size:14px;
  color:#374151;
  width:100%;
}
.anschreiben-signature{
  margin-top:30px;
}
.actions {
  margin-top:30px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn{
  text-decoration:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:600;
  background:#73cfc7;
  color:white;
  transition:0.2s;
}
.btn:hover{
  background:#5fb8b1;
}
.btn.secondary{
  background:#e8f5f4;
  color:#3e7f7a;
}
.btn.secondary:hover{
  background:#d6eeec;
}


@media print{
 @page{
  size:A4;
  margin:20mm;
}
.actions{
 display:none;
}
 body{
 background:white;
 zoom:0.9;
}
.page-content{
 box-shadow:none;
 background:white;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.anschreiben-body{
 background:#ffffff;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 border:1px solid #dbe3ee;
 box-shadow:none
 margin-top:10px;
 font-size:14px;
 line-height:1.6;
}
h1{
 font-size:22px;
}
h2{
font-size:18px;
}
.cv-header{
 margin-bottom:15px;
 padding-bottom:10px;
}
.cv-footer{
 margin-top:20px;
 }
}

@media(max-width:768px){
   
 .cv{
  margin:16px;
  padding:24px 18px 28px;
  border-radius:14px;
}
 .cv-header{
  display:flex;
  flex-direction:column;
  gap:18px;
}
 .header-left h1{
  font-size:24px;
}
 .title{
  font-size:15px;
}
 .contact-box{
  width:100%;
  text-align:left;
  justify-self:unset;
  font-size:13px;
  max-width:100%;
  box-sizing:border-box;
  display:block;
}
 .anschreiben-section{
  margin-top:24px;
  padding-top:18px;
}
 .anschreiben-title,cv-section h2{
  font-size:18px;
}
 .anschreiben-body{
  max-width:100%;
  margin-left:0;
  font.size:14px;
  line-height:1.6;
}
 .cv-footer{
  text-align:left;
  margin-top:24px;
}
 .actions{
  flex-direction:column;
  gap:10px;
}
 .btn{
  width:100%;
  text-align:center;
}
 .cv-item{
  flex-direction:column;
  gap:6px;
}
 .cv-date{
  min-width:unset;
  font-size:13px;
}
 .cv-content{
  width:100%;
}
 .skills{
  display:grid;
  grid-template-columns:1fr;
  gap:18;
  align-items:stretch;
} 
 .skill-box{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
  min-height:140px;
}
 .skill-box.full{
  max-width:100%;
 }
}