/* ---------- tokens ---------- */
  :root{
    --paper:        #eef0f2;
    --panel:        #ffffff;
    --ink:          #12161d;
    --ink-soft:     #4a5262;
    --line:         #d7dbe1;
    --line-strong:  #b7bec8;
    --navy:         #1d2a4d;
    --navy-700:     #141d38;
    --navy-tint:    #e4e8f1;
    --red:        #c1352b;
    --red-ink:    #8f261c;
    --red-tint:   #f7ddd9;
    --chrome:     #9aa4b0;
    --shadow: 0 1px 0 rgba(18,22,29,0.04), 0 8px 24px -12px rgba(18,22,29,0.18);

    --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
    --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:        #12151b;
      --panel:        #1a1f28;
      --ink:          #edeff2;
      --ink-soft:     #aab0bc;
      --line:         #2a3040;
      --line-strong:  #3a4254;
      --navy:         #33477c;
      --navy-700:     #232f52;
      --navy-tint:    #202a42;
      --red:        #e2685a;
      --red-ink:    #f4c2ba;
      --red-tint:   #3a211d;
      --chrome:     #8891a0;
      --shadow: 0 1px 0 rgba(0,0,0,0.3), 0 10px 30px -14px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:        #12151b;
    --panel:        #1a1f28;
    --ink:          #edeff2;
    --ink-soft:     #aab0bc;
    --line:         #2a3040;
    --line-strong:  #3a4254;
    --navy:         #33477c;
    --navy-700:     #232f52;
    --navy-tint:    #202a42;
    --red:        #e2685a;
    --red-ink:    #f4c2ba;
    --red-tint:   #3a211d;
    --chrome:     #8891a0;
    --shadow: 0 1px 0 rgba(0,0,0,0.3), 0 10px 30px -14px rgba(0,0,0,0.6);
  }

  *{ box-sizing: border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  img,svg{ display:block; max-width:100%; }
  a{ color: inherit; }
  .wrap{
    width:100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
  }

  h1,h2,h3{
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
    margin: 0;
    color: var(--ink);
  }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before{
    content:"";
    width: 22px; height: 2px;
    background: var(--red);
    display:inline-block;
  }

  .btn{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 3px;
    padding: 13px 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn:active{ transform: translateY(0); }
  .btn-primary{
    background: var(--red);
    color: #fff;
  }
  .btn-primary:hover{ background: var(--navy); color: #fff; }
  .btn-ghost{
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
  }
  .btn-ghost:hover{ border-color: var(--ink); }
  .btn-ghost svg{ stroke: currentColor; }
  .btn-primary svg{ stroke: currentColor; }

  /* ---------- header ---------- */
  header{
    position: sticky; top:0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .header-row{
    display:flex; align-items:center; justify-content: space-between;
    padding: 14px 0;
    gap: 16px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    text-decoration:none;
  }
  .brand-logo{ height:48px; width:auto; flex:none; border-radius:6px; }
  .header-actions{ display:flex; align-items:center; gap:10px; }
  .header-phone{
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration:none;
    display:none;
    align-items:center;
    gap:8px;
  }
  @media (min-width: 640px){ .header-phone{ display:inline-flex; } }
  .header-nav{
    display:none;
    align-items:center; gap: 26px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .header-nav a{ text-decoration:none; color: var(--ink-soft); }
  .header-nav a:hover{ color: var(--ink); }
  @media (min-width: 860px){ .header-nav{ display:inline-flex; } }

  /* ---------- hero ---------- */
  .hero{
    position: relative;
    overflow: hidden;
    min-height: 640px;
    display:flex;
    align-items:center;
    padding: 72px 0 72px;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:0;
    background-image: var(--hero-photo, none);
    background-size: cover;
    background-position: 60% 28%;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(115deg, rgba(10,13,18,0.94) 0%, rgba(10,13,18,0.82) 26%, rgba(10,13,18,0.4) 52%, rgba(10,13,18,0.08) 76%),
      linear-gradient(0deg, rgba(10,13,18,0.55) 0%, rgba(10,13,18,0) 40%);
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns: 1fr;
  }
  .hero-content{ max-width: 620px; }
  .hero .eyebrow{ color: var(--red); }
  .hero .eyebrow::before{ background: var(--red); }
  .hero h1{
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 0.98;
    margin-top: 14px;
    color: #fff;
  }
  .hero h1 em{
    font-style: normal;
    color: var(--red);
  }
  .hero p.lede{
    margin-top: 20px;
    max-width: 46ch;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.82);
  }
  .hero-actions{
    margin-top: 30px;
    display:flex; flex-wrap:wrap; gap: 12px;
  }
  .hero .btn-ghost{ color:#fff; border-color: rgba(255,255,255,0.45); }
  .hero .btn-ghost:hover{ border-color:#fff; }
  .hero-tags{
    margin-top: 34px;
    display:flex; flex-wrap:wrap; gap: 10px 22px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.03em;
  }
  .hero-tags span{ display:inline-flex; align-items:center; gap:7px; }
  .hero-tags svg{ width:14px; height:14px; stroke: var(--red); flex:none; }

  /* ---------- facts strip ---------- */
  .facts{
    background: var(--navy);
    color: #eef1fa;
  }
  .facts .wrap{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 24px;
  }
  @media (min-width: 760px){
    .facts .wrap{ grid-template-columns: repeat(3, 1fr); }
  }
  .fact{
    display:flex; align-items:center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    letter-spacing: 0.03em;
  }
  .fact svg{ width:18px; height:18px; stroke:#c7d1ee; flex:none; }
  .fact b{ font-weight:600; color:#fff; }

  /* ---------- services ---------- */
  .section{ padding: 76px 0; }
  .section-head{ max-width: 62ch; margin-bottom: 40px; }
  .section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top:10px; }
  .section-head p{ margin-top: 14px; color: var(--ink-soft); font-size: 1.02rem; }

  .services-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  @media (min-width: 640px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 980px){ .services-grid{ grid-template-columns: repeat(3, 1fr); } }

  .svc-card{
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: 24px;
    display:flex; flex-direction:column; justify-content:flex-end; gap: 14px;
    min-height: 232px;
    box-shadow: var(--shadow);
    isolation: isolate;
  }
  .svc-card-bg{
    position:absolute; inset:0; z-index:0;
    background-image: var(--card-photo, none);
    background-size: cover;
    background-position: center;
    background-color: var(--navy-700);
  }
  .svc-watermark{
    position:absolute; z-index:0; right:-22px; bottom:-22px;
    width:190px; height:190px; opacity:0.14; pointer-events:none;
  }
  .svc-watermark svg{ width:100%; height:100%; stroke:#fff; fill:none; }
  .svc-card-overlay{
    position:absolute; inset:0; z-index:1;
    background: linear-gradient(195deg, rgba(18,22,29,0.28) 0%, rgba(18,22,29,0.55) 45%, rgba(15,19,25,0.92) 100%);
  }
  .svc-top{ position:relative; z-index:2; display:flex; align-items:flex-start; gap: 12px; }
  .svc-icon{
    width: 54px; height:54px;
    display:flex; align-items:center; justify-content:center;
    background: var(--navy);
    border: 3px solid var(--chrome);
    border-radius: 50%;
    box-shadow: var(--shadow);
    flex:none;
  }
  .svc-icon svg{ width:26px; height:26px; stroke: #fff; }
  .svc-body{ position:relative; z-index:2; }
  .svc-card h3{
    font-family: var(--font-body);
    text-transform:none;
    font-weight:600;
    font-size: 1.12rem;
    letter-spacing: 0;
    color: #fff;
  }
  .svc-card p{ margin:6px 0 0; color: rgba(255,255,255,0.82); font-size: 0.92rem; }

  /* ---------- process ---------- */
  .process{ background: var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .process-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  @media (min-width: 800px){ .process-grid{ grid-template-columns: repeat(3, 1fr); } }
  .step{
    padding: 34px 30px;
    border-top: 1px solid var(--line);
    position: relative;
  }
  @media (min-width: 800px){
    .step{ border-top:none; border-left: 1px solid var(--line); padding: 8px 34px; }
    .step:first-child{ border-left:none; padding-left:0; }
  }
  .step-num{
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--red-ink);
    letter-spacing: 0.08em;
  }
  .step h3{
    font-family: var(--font-body);
    text-transform:none; font-weight:600; letter-spacing:0;
    font-size: 1.15rem;
    margin-top: 10px;
  }
  .step p{ margin: 10px 0 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 32ch; }

  /* ---------- contact ---------- */
  .contact{ background: var(--navy); color: #eef1fa; }
  .contact .section-head p{ color: #c7d1ee; }
  .contact .eyebrow{ color: var(--red); }
  .contact .eyebrow::before{ background: var(--red); }
  .contact-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 860px){ .contact-grid{ grid-template-columns: 1.1fr 0.9fr; gap: 48px; } }

  .contact-list{ display:flex; flex-direction:column; gap: 22px; }
  .contact-item{ display:flex; gap: 14px; align-items:flex-start; }
  .contact-item svg{ width:20px; height:20px; stroke:#c7d1ee; flex:none; margin-top:3px; }
  .contact-item .label{
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: #97a4d6;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .contact-item a, .contact-item span.val{
    font-size: 1.08rem;
    text-decoration:none;
    color: #fff;
    font-weight: 500;
  }
  .contact-item a:hover{ color: var(--red); }
  .contact-actions{ margin-top: 8px; display:flex; flex-wrap:wrap; gap: 12px; }
  .contact-actions .btn-ghost{ border-color: rgba(255,255,255,0.35); color:#fff; }
  .contact-side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:32px; height:100%; }
  .contact-logo{ width:100%; max-width:340px; height:auto; opacity:0.97; }
  .contact-actions .btn-ghost:hover{ border-color:#fff; }

  .card-note{
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    padding: 26px;
  }
  .card-note .eyebrow{ margin-bottom: 12px; }
  .card-note p{ color:#c7d1ee; font-size: 0.96rem; margin: 0 0 8px; }
  .card-note p:last-child{ margin-bottom:0; }

  /* ---------- footer ---------- */
  footer{ background: var(--paper); }
  .footer-row{
    padding: 26px 0;
    display:flex; flex-wrap:wrap; gap: 12px 24px;
    align-items:center; justify-content:space-between;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
  .footer-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); }
  .footer-logo{ height:28px; width:auto; border-radius:4px; flex:none; }


/* ================================================================
   Ergänzungen für WordPress (Original-Design unverändert erweitert)
   ================================================================ */

/* Sprunglink */
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{
  left:16px; top:16px; z-index:999; background: var(--red); color:#fff;
  padding:10px 16px; border-radius:3px; text-decoration:none;
}
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* Kopfzeile: Marke, mobiles Menü */
.brand-name{
  font-family: var(--font-display);
  font-weight:700; text-transform:uppercase; font-size:1.5rem;
  letter-spacing:0.02em; text-decoration:none; color: var(--ink);
}
.brand-name em{ font-style:normal; color: var(--red); }
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0;
  background: transparent; color: var(--ink);
  border:1.5px solid var(--line-strong); border-radius:3px; cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; stroke: currentColor; }
@media (min-width: 860px){ .nav-toggle{ display:none; } }

.mobile-nav{
  display:none; border-top:1px solid var(--line);
  padding: 6px 0 16px;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:0; }
.mobile-nav li + li{ border-top:1px solid var(--line); }
.mobile-nav a{
  display:block; padding:13px 0; text-decoration:none; color: var(--ink);
  font-family: var(--font-mono); font-size:0.85rem;
  letter-spacing:0.06em; text-transform:uppercase;
}
@media (min-width: 860px){ .mobile-nav{ display:none !important; } }

/* Menü aus WordPress im Kopfbereich */
.header-nav ul{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }

/* Kontaktformular im Kontaktbereich */
.contact-form{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  padding: 26px;
  width: 100%;
}
.contact-form h3{
  font-family: var(--font-body); text-transform:none; font-weight:600;
  font-size:1.15rem; letter-spacing:0; color:#fff; margin-bottom:16px;
}
.contact-form label{ display:block; font-size:0.85rem; color:#c7d1ee; margin-bottom:5px; }
.contact-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.contact-form textarea,
.contact-form select{
  width:100%; font: inherit; font-size:0.98rem; color:#fff;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:3px; padding:11px 13px;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{ color: rgba(255,255,255,0.55); }
.contact-form p{ margin:0 0 14px; }
.contact-form input[type=submit],
.contact-form button[type=submit]{
  font-family: var(--font-body); font-weight:600; font-size:0.95rem;
  background: var(--red); color:#fff; border:0; border-radius:3px;
  padding:13px 22px; cursor:pointer;
}
.contact-form input[type=submit]:hover,
.contact-form button[type=submit]:hover{ background: var(--navy-700); }
.contact-side .contact-form{ align-self: stretch; }

/* Innenseiten (Impressum, Datenschutz, Beiträge) */
.page-wrap{ padding: 64px 0 76px; }
.page-head{ margin-bottom: 28px; }
.page-head h1{ font-size: clamp(2rem, 4vw, 3rem); margin-top:10px; }
.prose{ max-width: 72ch; color: var(--ink); font-size:1.02rem; }
.prose h2,.prose h3{ margin: 1.7em 0 .5em; }
.prose h2{ font-size:1.7rem; }
.prose h3{ font-size:1.3rem; font-family: var(--font-body); text-transform:none; }
.prose p{ margin: 0 0 1em; }
.prose a{ color: var(--red-ink); }
.prose ul,.prose ol{ padding-left: 22px; }
.prose img{ border-radius:6px; margin:1.3em 0; }
.prose blockquote{
  margin:1.4em 0; padding:2px 0 2px 18px;
  border-left:3px solid var(--red); color: var(--ink-soft);
}
.prose table{ width:100%; border-collapse:collapse; }
.prose th,.prose td{ border:1px solid var(--line); padding:9px 12px; text-align:left; }
.post-entry{ padding: 28px 0; border-bottom:1px solid var(--line); }
.post-entry h2{ font-size:1.5rem; }
.post-meta{
  font-family: var(--font-mono); font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--ink-soft); margin-bottom:6px;
}
.pagination{ margin-top:34px; font-family: var(--font-mono); font-size:0.85rem; }
.pagination .page-numbers{
  display:inline-block; padding:8px 13px; margin-right:8px;
  border:1px solid var(--line); border-radius:3px; text-decoration:none;
}
.pagination .current{ background: var(--navy); border-color: var(--navy); color:#fff; }

/* WordPress-Standardklassen */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ margin-left:auto; margin-right:auto; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
}
.wp-caption-text{ font-size:0.85rem; color: var(--ink-soft); }

/* Admin-Leiste */
.admin-bar header{ top:32px; }
@media screen and (max-width:782px){ .admin-bar header{ top:46px; } }

/* Telefonnummer im Infoband ohne Unterstrich */
.fact a{ text-decoration:none; color:inherit; }
.fact a:hover{ color:#fff; }

/* Auf kleinen Bildschirmen etwas mehr Abdunklung im Hero – bessere Lesbarkeit */
@media (max-width: 700px){
  .hero-overlay{
    background: linear-gradient(180deg, rgba(10,13,18,0.88) 0%, rgba(10,13,18,0.74) 55%, rgba(10,13,18,0.92) 100%);
  }
}