/* =========================
   PAGES.CSS
   - Blog/article, services/about/contact, contact form, toast
   - Font sizes in rem, layout/spacing mostly in px
   ========================= */

/* =========================
   BLOG / ARTICLE
   ========================= */
.blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 6px 0 18px;
}

.blog-count{
  color: rgba(246,247,251,.62);
  font-size: 0.875rem; /* 14px */
}

.post-excerpt{
  color: rgba(246,247,251,.62);
  font-size: 0.875rem; /* 14px */
  line-height: 1.7;
  margin: 10px 0 0;
}

.article-shell{max-width: 780px;}
.article-head{padding-bottom: 24px;}
.article-title{margin-top: 8px;}

.article-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(246,247,251,.62);
  font-size: 0.875rem; /* 14px */
  margin-top: 10px;
}
.article-meta .dot{opacity:.6;}

.article-lead{margin-top: 14px;}

.article-body{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
}
.article-body h2{margin-top: 30px;}
.article-body h3{margin-top: 22px;}

.article-body a{
  color: rgba(255,255,255,.92);
  position: relative;
  padding-bottom: 1px;
}
.article-body a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1px;width:100%;
  background: rgba(255,255,255,.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.article-body a:hover::after{transform:scaleX(1)}

.article-body blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 2px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  color: rgba(246,247,251,.72);
}

.article-body code{
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
}
.article-body pre{
  background: rgba(255,255,255,.06);
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  overflow:auto;
}

.back-link{color: rgba(246,247,251,.62);}
.back-link:hover{color: rgba(246,247,251,.92);}

.soft-divider-block{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.article-foot-inner{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
}
.article-foot-title{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}
.article-foot-text{
  color: rgba(246,247,251,.68);
  line-height: 1.8;
}
.article-link{color: rgba(255,255,255,.92);}

/* =========================
   PAGES: services/about/contact
   ========================= */
.page-hero{padding: 54px 0 22px;}
.page-hero .kicker{margin-bottom:10px;}
.page-hero .lead{max-width: 70ch;}

.grid-2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:start;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card2);
  border:1px solid var(--line2);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadowSoft);
}

.card h3{
  margin: 0 0 10px;
  font-size: 1.25rem; /* 20px */
}

.mini{
  color: rgba(246,247,251,.62);
  font-size: 0.875rem; /* 14px */
  line-height: 1.7;
}

.features{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 18px;
}

.feature{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--shadowSoft);
}
.feature-title{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}
.feature-text{
  color: rgba(246,247,251,.68);
  line-height: 1.8;
  font-size: 0.875rem; /* 14px */
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(246,247,251,.72);
  font-size: 0.875rem; /* 14px */
}

/* Contact cards */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.contact-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.contact-item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--shadowSoft);
}
.contact-item .label{
  color: rgba(246,247,251,.62);
  font-size: 0.8125rem; /* 13px */
  margin-bottom: 8px;
}
.contact-item .value{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  line-height: 1.6;
}
.contact-item a{
  color: rgba(255,255,255,.92);
  position: relative;
  padding-bottom: 1px;
}
.contact-item a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;height:1px;width:100%;
  background: rgba(255,255,255,.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.contact-item a:hover::after{transform: scaleX(1)}

.notice{
  margin-top: 14px;
  color: rgba(246,247,251,.62);
  font-size: 0.8125rem; /* 13px */
  line-height: 1.8;
}

/* =========================
   CONTACT FORM (UI-only)
   ========================= */
.form-card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  padding: 18px;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.form-field.full{grid-column: 1 / -1;}

.form-label{
  font-size: 0.8125rem; /* 13px */
  color: rgba(246,247,251,.62);
}

.form-input, .form-textarea{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 0.875rem; /* 14px */
  outline: none;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.form-input:focus, .form-textarea:focus{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.form-textarea{
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-hint{
  color: rgba(246,247,251,.62);
  font-size: 0.75rem; /* 12px */
  line-height: 1.6;
  margin-top: 8px;
}

.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* Copy toast */
.copy-toast{
  display:inline-block;
  margin-left:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  opacity:0;
  transform: translateY(2px);
  transition: opacity .2s ease, transform .2s ease;
}
.copy-toast.show{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE (Pages)
   ========================= */
@media(max-width:900px){
  .grid-2{grid-template-columns: 1fr}
  .features{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .form-grid{grid-template-columns: 1fr}
}

/* =========================
   LEGAL PAGES (Impressum, Datenschutz, Offenlegung, AGB, Cookie)
   ========================= */
.legal-wrap{
  max-width: 860px;
}

.legal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card2);
  border: 1px solid var(--line2);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadowSoft);
}

.legal-card h2{
  margin-top: 22px;
}

.legal-card p,
.legal-card li{
  color: var(--muted);
  line-height: 1.9;
  font-size: 1rem; /* 16px */
}

.legal-card a{
  color: rgba(255,255,255,.92);
  position: relative;
  padding-bottom: 1px;
}
.legal-card a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1px;width:100%;
  background: rgba(255,255,255,.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.legal-card a:hover::after{transform:scaleX(1)}

.legal-kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.legal-item{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: 16px;
}
.legal-item .label{
  color: rgba(246,247,251,.62);
  font-size: 0.8125rem; /* 13px */
  margin-bottom: 8px;
}
.legal-item .value{
  color: rgba(255,255,255,.92);
  font-weight: 800;
  line-height: 1.6;
}

@media(max-width:900px){
  .legal-kv{grid-template-columns:1fr;}
}