/* cnc-multitool – Text-/Rechtsseiten-Layout (eigenständig, volle Breite)
   Farben, H1/H2/H3 identisch zu den Produktseiten (products.css) */
.ds-page{
  --orange:#ec9345;
  --ink:#1f2933;
  --muted:#68737d;
  --line:#e6e9ec;
  --soft:#f5f6f7;
  color:var(--ink);
}
.ds-page *{ box-sizing:border-box; }

.ds-section{ padding:48px 0; }
.ds-section--alt{ background:var(--soft); }
.ds-wrap{ width:100%; padding:0 clamp(20px,4vw,60px); }

/* Kicker = .section-title .subtitle */
.ds-kicker{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--orange);
  text-align:center;
}

/* Überschriften */
.ds-page h1,.ds-page h2,.ds-page h3{
  margin:0;
  color:var(--ink);
  overflow-wrap:break-word;
  hyphens:auto;
}
/* H1 = .page-hero-text h1 */
.ds-page h1{
  font-size:38px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.8px;
  text-align:center;
}
/* H2 = .section-title h2 */
.ds-page h2{
  font-size:30px;
  line-height:1.2;
  font-weight:600;
  text-align:center;
}
/* H3 = .product-feature-text h3 */
.ds-page h3{
  margin:1.6em 0 .5em;
  font-size:20px;
  line-height:1.2;
  font-weight:600;
}

/* Orange Trennlinie (wie Divider der Produktseiten) */
.ds-divider{ border:0; height:3px; width:72px; background:var(--orange); margin:14px auto 26px; }

/* Fließtext = .product-feature-text p */
.ds-page p{ font-size:17px; line-height:1.55; color:var(--muted); margin:0 0 14px; }
.ds-page strong{ font-weight:700; color:var(--ink); }
.ds-page a{ color:var(--orange); }

/* Listen = .marked-list li */
.ds-list{ margin:0 0 14px; padding-left:1.25em; }
.ds-list li{ font-size:15px; line-height:1.5; color:var(--muted); margin:.25em 0; }

/* Bilder */
.ds-img{ display:block; margin:26px auto 0; max-width:600px; width:100%; height:auto; }
.ds-img-full{ display:block; width:100%; height:auto; margin:0; }

.ds-meta{ color:var(--muted); font-size:14px; margin-top:22px; }

/* Responsive H1 (wie Produktseiten) */
@media (max-width:991px){ .ds-page h1{ font-size:28px; } }
@media (max-width:767px){ .ds-page h1{ font-size:24px; letter-spacing:-.3px; } }
@media (max-width:600px){ .ds-section{ padding:30px 0; } }

/* =========================================================
   Komponenten für Support-/Infoseiten (ds-card, ds-table, ds-btn)
   ========================================================= */
.ds-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin:6px 0 0; }
.ds-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px 24px; text-align:center; }
.ds-card .ds-ico{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:rgba(236,147,69,.12); color:var(--orange); }
.ds-card .ds-ico svg{ width:30px; height:30px; }
.ds-card h3{ margin:0 0 10px; font-size:19px; line-height:1.2; font-weight:600; color:var(--ink); }
.ds-card p{ font-size:16px; line-height:1.6; color:var(--muted); margin:0 0 14px; }
.ds-card .ds-contact{ font-size:16px; font-weight:700; color:var(--ink); }
.ds-card .ds-contact a{ color:var(--orange); text-decoration:none; }
.ds-card .ds-hours{ display:block; margin-top:6px; font-size:14px; font-weight:400; color:var(--muted); }

.ds-page a.ds-btn{ display:inline-block; margin-top:10px; padding:14px 28px; background:var(--orange); color:#fff; font-size:15px; font-weight:700; text-decoration:none; border-radius:6px; }
.ds-page a.ds-btn:hover{ filter:brightness(.96); color:#fff; }

.ds-table{ width:100%; border-collapse:collapse; margin:6px 0 0; }
.ds-table th{ text-align:left; background:var(--ink); color:#fff; font-size:15px; font-weight:700; padding:12px 16px; }
.ds-table td{ border-bottom:1px solid var(--line); padding:12px 16px; font-size:16px; color:var(--muted); }
.ds-table td a{ color:var(--orange); text-decoration:none; }

@media (max-width:860px){ .ds-cards{ grid-template-columns:1fr; } }

/* =========================================================
   Kontaktseite (zweispaltig: Formular links, Infos rechts)
   Formular nutzt die bestehenden rd-mailform-Klassen
   ========================================================= */
.ds-contact-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start; margin-top:4px; }
.ds-contact-form h3,.ds-contact-info h3{ text-align:left; margin:0 0 18px; font-size:20px; font-weight:600; color:var(--ink); }
.ds-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:16px; }

.ds-page .form-group{ margin:0 0 16px; }
.ds-form-grid .form-group{ margin:0; }
.ds-page .form-label-outside{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--ink); }
.ds-page .form-input,
.ds-page .form-group select{ width:100%; padding:11px 14px; font-family:inherit; font-size:15px; line-height:1.4; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:6px; box-sizing:border-box; }
.ds-page textarea.form-input{ min-height:150px; resize:vertical; }
.ds-page .form-input:focus,
.ds-page .form-group select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(236,147,69,.15); }
.ds-page select.form-input,
.ds-page .form-group select{ appearance:none; -webkit-appearance:none; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2368737d' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
/* Spam-Schutz: versteckte Felder (name="content"/"email") auf 1px/unsichtbar */
.ds-page .form-input-impressed2{ position:absolute; left:-9999px; width:1px; height:1px; padding:0; margin:0; border:0; overflow:hidden; }
/* Senden-Button */
.ds-page .rd-mailform .button,
.ds-page .rd-mailform button[type="submit"]{ display:inline-block; margin-top:6px; padding:13px 30px; background:var(--orange); color:#fff; font-size:15px; font-weight:700; border:0; border-radius:6px; cursor:pointer; }
.ds-page .rd-mailform .button:hover{ filter:brightness(.96); }

/* Kontakt-Infos (terms-list rechts) */
.ds-contact-info .terms-list{ list-style:none; margin:0; padding:0; }
.ds-contact-info .terms-list>li{ padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--line); }
.ds-contact-info .terms-list>li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.ds-contact-info dl{ margin:0; }
.ds-contact-info dt{ margin:0 0 3px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.ds-contact-info dd{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); }

@media (max-width:860px){
  .ds-contact-grid{ grid-template-columns:1fr; gap:36px; }
  .ds-form-grid{ grid-template-columns:1fr; }
}

/* Variante B: Kontakt-Infos als dezente Karte */
.ds-contact-info{ background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:26px; }

/* Formular-Validierung (Pflichtfelder) */
.ds-page .form-validation{ display:block; margin-top:5px; font-size:13px; color:#d64545; }
.ds-page .form-input[aria-invalid="true"],
.ds-page .has-error .form-input,
.ds-page .form-input:user-invalid{ border-color:#d64545; }