/* 172: editorial rhythm, a clearer process and readable expanded answers.
   First named layer deliberately wins over cumulative legacy !important rules.
   No hero, service-card, content, route or form behaviour changes. */
@layer sr-visual-polish-172 {
  /* Ratgeber: one lead story, then a quiet reading grid. */
  body#sr-design.sr-view-blog #main-content .blog-grid {
    gap:24px!important;
    align-items:stretch!important;
    scroll-margin-top:112px;
  }
  body#sr-design.sr-view-blog #main-content .blog-card {
    position:relative!important;
    background:#f4efe5!important;
    border:1px solid #d8cbb3!important;
    border-radius:8px!important;
    padding:30px!important;
    gap:22px 14px!important;
    box-shadow:none!important;
    translate:none!important;
    transition:border-color .2s ease,box-shadow .2s ease!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__icon {
    background:#ede6d8!important;
    border:0!important;
    border-radius:50%!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__icon svg {
    background:none!important;
    border:0!important;
    box-shadow:none!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__cat {
    font-size:10px!important;
    letter-spacing:.11em!important;
    color:#786220!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__title {
    font-size:26px!important;
    line-height:1.27!important;
    font-weight:500!important;
    letter-spacing:-.035em!important;
    text-wrap:pretty!important;
    hyphens:none!important;
    overflow-wrap:anywhere!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__excerpt {
    font-size:15px!important;
    line-height:1.8!important;
    color:#696357!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__footer {
    border-top:1px solid #d8cbb3!important;
    padding-top:16px!important;
    flex-wrap:wrap!important;
    gap:4px 12px!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__read {
    display:inline-flex!important;
    align-items:center!important;
    min-height:44px!important;
    font-size:13px!important;
    color:#171717!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card__date {
    font-size:10px!important;
    color:#696357!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child {
    background:#171717!important;
    border-color:#171717!important;
    padding:38px!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__icon {
    background:#f5c400!important;
    color:#171717!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child :is(.blog-card__cat,.blog-card__read) {
    color:#f5c400!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__title {
    color:#f4efe5!important;
    font-size:clamp(30px,2.8vw,40px)!important;
    max-width:23ch!important;
    line-height:1.15!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child :is(.blog-card__excerpt,.blog-card__date) {
    color:#d8d1c3!important;
  }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__excerpt { max-width:62ch!important; }
  body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__footer { border-color:#f4efe530!important; }
  body#sr-design.sr-view-blog #main-content .blog-card:focus-within {
    outline:2px solid #9c7900!important;
    outline-offset:4px!important;
  }
  /* Never override the existing topic filter's hidden state. */
  body#sr-design.sr-view-blog #main-content .blog-card[hidden],
  body#sr-design.sr-view-blog #main-content .blog-card[style*="display: none"] { display:none!important; }

  /* City process: heading and action at the left, four steps at the right. */
  body#sr-design #main-content .ec-process-panel {
    display:grid!important;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr)!important;
    gap:64px!important;
    align-items:start!important;
    padding:0!important;
  }
  body#sr-design #main-content .ec-process-head {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    text-align:left!important;
    gap:0!important;
  }
  body#sr-design #main-content .ec-process-head .ec-eyebrow {
    text-align:left!important;
    margin:0 0 22px!important;
    line-height:1.7!important;
  }
  body#sr-design #main-content .ec-process-head h2 {
    text-align:left!important;
    font-size:clamp(32px,3vw,42px)!important;
    line-height:1.16!important;
    letter-spacing:-.04em!important;
    margin:0!important;
    text-wrap:balance!important;
  }
  body#sr-design #main-content .ec-process-head .ec-button { margin:28px 0 0!important; }
  body#sr-design #main-content .ec-process-steps {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:34px!important;
    margin:0!important;
  }
  body#sr-design #main-content .ec-process-steps>li {
    display:block!important;
    padding:24px 0 0!important;
    margin:0!important;
    border:0!important;
    border-top:1px solid #f4efe530!important;
  }
  body#sr-design #main-content .ec-process-steps>li::before {
    width:28px!important;
    height:2px!important;
    top:-1px!important;
    left:0!important;
  }
  body#sr-design #main-content .ec-process-steps .ec-step-num {
    width:auto!important;
    height:auto!important;
    font-size:32px!important;
    margin:0 0 20px!important;
    line-height:1!important;
  }
  body#sr-design #main-content .ec-process-steps h3 {
    font-size:19px!important;
    margin:0 0 12px!important;
  }
  body#sr-design #main-content .ec-process-steps p {
    font-size:15px!important;
    line-height:1.75!important;
    margin:0!important;
  }

  /* The selected answer is a clear reading surface, not another dark block. */
  body#sr-design #main-content .ec-faq-item {
    border-radius:0!important;
    transition:background-color .18s ease!important;
  }
  body#sr-design #main-content .ec-faq-item[open] {
    background:#ede6d8!important;
    box-shadow:inset 3px 0 #f5c400!important;
  }
  body#sr-design #main-content .ec-faq-item summary {
    padding:24px 20px!important;
    line-height:1.55!important;
    gap:20px!important;
  }
  body#sr-design #main-content .ec-faq-item[open] summary { padding-bottom:14px!important; }
  body#sr-design #main-content .ec-faq-item[open] summary>span {
    background:#f5c400!important;
    border-color:#f5c400!important;
    color:#171717!important;
  }
  body#sr-design #main-content .ec-faq-answer { padding:0 20px 26px!important; }
  body#sr-design #main-content .ec-faq-answer p {
    font-size:15px!important;
    line-height:1.85!important;
    max-width:65ch;
  }
  body#sr-design #main-content .ec-faq-item summary:focus-visible {
    outline:2px solid #967400!important;
    outline-offset:-2px!important;
  }

  @media (hover:hover) {
    body#sr-design.sr-view-blog #main-content .blog-card:hover {
      border-color:#a38c54!important;
      box-shadow:0 10px 24px #17171708!important;
      transform:none!important;
      translate:none!important;
    }
    body#sr-design #main-content .ec-faq-item:not([open]):hover { background:#ede6d880!important; }
  }
  @media (min-width:1101px) {
    body#sr-design.sr-view-blog #main-content .blog-card:first-child { grid-column:span 2!important; }
  }
  @media (min-width:801px) and (max-width:1100px) {
    body#sr-design #main-content .ec-process-panel { grid-template-columns:minmax(0,1fr)!important;gap:38px!important; }
    body#sr-design #main-content .ec-process-head { max-width:620px!important; }
  }
  @media (max-width:800px) {
    body#sr-design.sr-view-blog #main-content .blog-grid { gap:16px!important;scroll-margin-top:90px; }
    body#sr-design.sr-view-blog #main-content .blog-card,
    body#sr-design.sr-view-blog #main-content .blog-card:first-child {
      padding:24px!important;
      gap:18px 12px!important;
      grid-column:auto!important;
    }
    body#sr-design.sr-view-blog #main-content .blog-card__title { font-size:24px!important; }
    body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__title { font-size:29px!important; }
    body#sr-design.sr-view-blog #main-content .blog-card__excerpt { line-height:1.75!important; }
    body#sr-design.sr-view-blog #main-content .topic-filter {
      display:grid!important;
      grid-template-columns:repeat(2,minmax(0,1fr))!important;
      gap:8px!important;
      width:100%!important;
      overflow:visible!important;
    }
    body#sr-design.sr-view-blog #main-content .topic-btn {
      width:100%!important;
      min-height:46px!important;
      padding:10px 8px!important;
      font-size:11px!important;
      line-height:1.4!important;
      white-space:normal!important;
    }
    body#sr-design #main-content .ec-process-panel {
      grid-template-columns:minmax(0,1fr)!important;
      gap:30px!important;
    }
    body#sr-design #main-content .ec-process-head .ec-eyebrow { margin-bottom:14px!important; }
    body#sr-design #main-content .ec-process-head h2 { font-size:30px!important;max-width:15ch!important; }
    body#sr-design #main-content .ec-process-steps { grid-template-columns:minmax(0,1fr)!important;gap:0!important; }
    body#sr-design #main-content .ec-process-steps>li {
      display:grid!important;
      grid-template-columns:40px minmax(0,1fr)!important;
      gap:8px 16px!important;
      border:0!important;
      padding:0 0 30px!important;
      margin:0!important;
    }
    body#sr-design #main-content .ec-process-steps>li:last-child { padding-bottom:0!important; }
    body#sr-design #main-content .ec-process-steps>li::before {
      width:1px!important;
      height:calc(100% - 48px)!important;
      top:44px!important;
      left:19px!important;
      background:#f4efe530!important;
    }
    body#sr-design #main-content .ec-process-steps>li:last-child::before { display:none!important; }
    body#sr-design #main-content .ec-process-steps .ec-step-num {
      display:grid!important;
      place-items:center!important;
      grid-column:1!important;
      grid-row:1/3!important;
      width:40px!important;
      height:40px!important;
      border:1px solid #f4efe540!important;
      border-radius:50%!important;
      font-size:15px!important;
      letter-spacing:0!important;
      margin:0!important;
    }
    body#sr-design #main-content .ec-process-steps h3 { grid-column:2!important;margin:7px 0 0!important;font-size:18px!important; }
    body#sr-design #main-content .ec-process-steps p { grid-column:2!important;margin:0!important;font-size:15px!important;line-height:1.75!important; }
    body#sr-design #main-content .ec-faq-item summary { padding:20px 12px!important;gap:14px!important; }
    body#sr-design #main-content .ec-faq-answer { padding:0 14px 22px!important; }
    body#sr-design #main-content .ec-faq-answer p { font-size:15px!important;line-height:1.8!important; }
  }
  @media (max-width:360px) {
    body#sr-design.sr-view-blog #main-content .blog-card,
    body#sr-design.sr-view-blog #main-content .blog-card:first-child { padding:20px!important; }
    body#sr-design.sr-view-blog #main-content .blog-card__title { font-size:23px!important; }
    body#sr-design.sr-view-blog #main-content .blog-card:first-child .blog-card__title { font-size:27px!important; }
    body#sr-design #main-content .ec-process-steps>li { column-gap:12px!important; }
  }
  @media (prefers-reduced-motion:reduce) {
    body#sr-design.sr-view-blog #main-content .blog-card,
    body#sr-design #main-content .ec-faq-item { transition:none!important; }
  }
}