/* ===================================================================
   OKIDOKI-SERVICE — Stylesheet
   Design: Ink/Ochre — technical precision meets craft.
   Signature motif: crop marks (registration marks) framing key panels,
   nodding to Printmedien while reading as precise/technical.
   =================================================================== */

:root{
  --ink:        #1B2A3D;
  --ink-soft:   #2E4157;
  --paper:      #F6F4EE;
  --paper-alt:  #EDE9DF;
  --graphite:   #4B5563;
  --accent:     #B8790A;
  --accent-soft:#E4B166;
  --line:       #D9D3C4;
  --white:      #FFFFFF;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--graphite);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent-soft); outline-offset:2px;
}
h1,h2,h3{
  font-family:var(--font-body);
  color:var(--ink);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.03em;
  line-height:1.15;
  margin:0 0 .6em;
  overflow-wrap:break-word;
  hyphens:auto;
}
h1{ font-size:clamp(1.9rem,4.5vw,3rem); }
h2{ font-size:clamp(1.3rem,3vw,1.9rem); }
h3{ font-size:1.05rem; letter-spacing:.06em; }
p{ margin:0 0 1em; }
.container{ max-width:var(--max); margin:0 auto; padding:0 1.25rem; }
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.5rem;
}

/* ---------- Header ---------- */
.site-header{
  background:var(--ink); color:var(--white);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; gap:1rem; flex-wrap:wrap;
}
.wordmark{
  color:var(--white); font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; font-size:1.05rem;
}
.wordmark span{ color:var(--accent-soft); }
.wordmark:hover{ text-decoration:none; }
.main-nav ul{
  list-style:none; display:flex; gap:1.5rem; margin:0; padding:.6rem 0;
  flex-wrap:wrap;
}
.main-nav a{
  color:var(--white); font-size:.85rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}
.main-nav a:hover{ color:var(--accent-soft); text-decoration:none; }
.main-nav a[aria-current="page"]{ color:var(--accent-soft); }

/* ---------- Crop-mark signature ---------- */
.crop{ position:relative; }
.crop::before,.crop::after{ content:""; position:absolute; width:18px; height:18px; pointer-events:none; }
.crop::before{ top:-9px; left:-9px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.crop::after{ bottom:-9px; right:-9px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
.crop-full::before,.crop-full::after{ content:""; position:absolute; width:18px; height:18px; pointer-events:none; }
.crop-full{ position:relative; }
.crop-full > .crop-tl,.crop-full > .crop-tr,.crop-full > .crop-bl,.crop-full > .crop-br{
  position:absolute; width:16px; height:16px; z-index:2;
}
.crop-full > .crop-tl{ top:10px; left:10px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.crop-full > .crop-tr{ top:10px; right:10px; border-top:2px solid var(--accent); border-right:2px solid var(--accent); }
.crop-full > .crop-bl{ bottom:10px; left:10px; border-bottom:2px solid var(--accent); border-left:2px solid var(--accent); }
.crop-full > .crop-br{ bottom:10px; right:10px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink-soft) 100%);
  color:var(--white); padding:4.5rem 0 4rem;
}
.hero-inner{ max-width:700px; margin:1.5rem 0 0; padding:2rem 1.75rem; }
.hero h1{ color:var(--white); }
.hero p.lead{ font-size:1.1rem; color:#D9DEE6; max-width:46ch; }
.hero .rule{ width:64px; height:3px; background:var(--accent); margin:1.25rem 0; }

.page-hero{
  background:var(--ink); color:var(--white); padding:3rem 0 2.5rem;
}
.page-hero .container > div{ max-width:640px; margin:1rem 1.75rem; padding:1.5rem 1.75rem; }
.page-hero h1{ color:var(--white); margin-bottom:.4rem; }
.page-hero .lead{ color:#D9DEE6; }

/* ---------- Service plates ---------- */
.plates{
  display:grid; gap:2rem; margin:2.5rem 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.plate{
  background:var(--white); border:1px solid var(--line);
  padding:2rem 1.75rem 1.75rem; margin:10px;
}
.plate h3{ color:var(--ink); }
.plate .num{
  display:block; font-size:.75rem; color:var(--accent);
  font-weight:700; letter-spacing:.1em; margin-bottom:.6rem;
}
.plate a.more{ font-weight:700; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; }
.plate-logo{ width:170px; max-width:60%; height:auto; margin:0 auto 1.1rem; display:block; }

/* Logo-Schild im dunklen Hero-Bereich der Unterseiten */
.hero-logo-box{
  background:var(--white); display:inline-block;
  padding:.85rem 1.1rem; margin-bottom:1.4rem;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.hero-logo-box img{ display:block; width:230px; max-width:60vw; height:auto; }

/* ---------- Sections ---------- */
section{ padding:3rem 0; }
.section-alt{ background:var(--paper-alt); }
.section-tight{ padding:2rem 0; }

ul.check{ list-style:none; padding:0; margin:1rem 0; }
ul.check li{ padding-left:1.6rem; position:relative; margin-bottom:.6rem; }
ul.check li::before{
  content:"—"; position:absolute; left:0; color:var(--accent); font-weight:700;
}

.trust-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.75rem 0; text-align:center; color:var(--ink); font-weight:600;
}

.cta-box{
  background:var(--ink); color:var(--white); padding:2.5rem 1.75rem;
  text-align:center; margin-top:2.5rem;
}
.cta-box h2{ color:var(--white); }
.btn{
  display:inline-block; background:var(--accent); color:var(--white);
  padding:.85rem 1.75rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:.85rem; border:none; cursor:pointer;
}
.btn:hover{ background:var(--accent-soft); text-decoration:none; color:var(--ink); }

/* ---------- Contact form ---------- */
.form-grid{ display:grid; gap:1.25rem; max-width:640px; }
.form-row{ display:flex; flex-direction:column; gap:.4rem; }
label{ font-weight:700; font-size:.85rem; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; }
input[type=text],input[type=email],input[type=tel],select,textarea{
  font:inherit; padding:.7rem .8rem; border:1px solid var(--line);
  background:var(--white); color:var(--graphite);
}
textarea{ resize:vertical; min-height:140px; }
.consent{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.consent label{ text-transform:none; font-weight:400; font-size:.9rem; letter-spacing:normal; }
.consent input{ margin-top:.3rem; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.form-note{ font-size:.85rem; color:var(--graphite); margin-top:1rem; }
.alert{ padding:1rem 1.25rem; margin-bottom:1.5rem; border-left:4px solid var(--accent); background:var(--paper-alt); }
.alert.error{ border-color:#B3261E; }

/* ---------- Contact info block ---------- */
.contact-info{ display:grid; gap:1.5rem; margin-bottom:2.5rem; }
.contact-info dt{ font-weight:700; color:var(--ink); text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; }
.contact-info dd{ margin:.2rem 0 1rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#C9CFD8; padding:2.5rem 0 1.5rem; margin-top:3rem; }
.footer-grid{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.site-footer h3{ color:var(--white); font-size:.85rem; }
.site-footer a{ color:#C9CFD8; }
.site-footer a:hover{ color:var(--accent-soft); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.25rem;
  font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}

/* ---------- Legal pages ---------- */
.legal h2{ margin-top:2rem; }
.legal address{ font-style:normal; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }

@media (max-width:640px){
  .main-nav ul{ gap:1rem; }
  .hero{ padding:3rem 0; }
  .footer-bottom{ flex-direction:column; }

  /* Logo-Schild im dunklen Hero-Bereich der Unterseiten: auf schmalen
     Bildschirmen mittig statt linksbündig, damit es nicht "verrutscht" wirkt. */
  .hero-logo-box{
    display:table;
    margin-left:auto;
    margin-right:auto;
  }
}