/* Gemeinsames Raster: Diese Datei wird auf jeder Seite zuletzt geladen. */
:root{--gutter:20px;--container:min(calc(100% - 2 * var(--gutter)),1100px)}
@media(min-width:768px){:root{--gutter:32px}}
@media(min-width:1024px){:root{--gutter:48px}}
*,*::before,*::after{box-sizing:border-box}
.ortsklar-home .wrap,.ortsklar-legal .wrap,.demo-blumen .wrap,.demo-blumen .notice-inner,.demo-coiffeur .section-wrap,.demo-coiffeur .hero-layout,.demo-coiffeur .header-inner,.demo-coiffeur .notice-inner{width:var(--container);max-width:none;margin-left:auto;margin-right:auto}
.ortsklar-legal .legal .wrap{max-width:780px}
.ortsklar-home .hero{padding-top:16px;overflow:visible}
.ortsklar-home .hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;position:relative;isolation:isolate;overflow:hidden;background:#f1f2ee;border-radius:6px 48px 6px 6px;padding:32px 20px 24px}
.ortsklar-home .hero .hero-copy{display:block;position:relative;min-width:0;margin:0;padding:0;background:none;border:0;border-radius:0;overflow:visible}
.ortsklar-home .hero .hero-copy:before,.ortsklar-home .hero .hero-art:before,.ortsklar-home .hero .hero-art:after,.ortsklar-home .hero .orbit{display:none!important;content:none}
.ortsklar-home .hero .hero-art{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-self:center;gap:12px;min-width:0;min-height:0;width:100%;max-width:none;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.ortsklar-home .hero .art-caption{width:100%;margin:0}.ortsklar-home .hero .search-demo{width:min(100%,330px);max-width:330px;margin-inline:auto}.ortsklar-home .hero h1{font-size:clamp(34px,9vw,58px);max-width:13ch}.ortsklar-home .hero-support{padding:0;margin-top:18px}.ortsklar-home .hero-actions{margin-top:18px}.ortsklar-home .hero-assurance{margin-top:16px}
.ortsklar-home .website-examples{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}.ortsklar-home .website-examples .website-example{display:block;min-width:0;margin:0;color:inherit;text-decoration:none}.ortsklar-home .website-example-stage{display:block}.ortsklar-home .website-example-card:focus-visible{outline:3px solid #a1261d;outline-offset:4px}.ortsklar-home .website-example-card:hover .website-example-screen{transform:translateY(-4px)}
.demo-coiffeur .hero-visual{min-width:0;margin-left:0}.demo-blumen .demo-hours table{width:100%;border-collapse:collapse}.demo-blumen .demo-hours caption{text-align:left;font-weight:700;margin-bottom:12px}.demo-blumen .demo-hours th,.demo-blumen .demo-hours td{padding:14px 0;border-bottom:1px solid #d7ddd4;text-align:left;vertical-align:top}.demo-blumen .demo-hours td{text-align:right}.demo-blumen .demo-reviews{background:#f0f3ed}
@media(min-width:768px){.ortsklar-home .hero .hero-grid{padding:40px 32px;border-radius:6px 64px 6px 6px}.ortsklar-home .website-examples{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.ortsklar-home .hero .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,60px);padding:clamp(36px,4vw,56px);align-items:center}.ortsklar-home .hero h1{font-size:clamp(42px,4.4vw,62px)}.ortsklar-home .hero .hero-copy{grid-column:1}.ortsklar-home .hero .hero-art{grid-column:2}}
@media(max-width:767px){.ortsklar-home .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}.ortsklar-home .hero .hero-grid{padding-top:24px}.ortsklar-home .hero h1{line-height:1.06}.ortsklar-home .hero-lead{font-size:16px;line-height:1.5}.demo-blumen .demo-hours th,.demo-blumen .demo-hours td{font-size:14px}.demo-coiffeur .mobile-actions{padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){.ortsklar-home .website-example-screen{transition:none}}
/* Desktop: kompakter Einstieg und bewusst wechselnde Ausrichtung. */
@media(min-width:900px){
 .ortsklar-home .hero .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,68px);padding:clamp(28px,3vw,40px);align-items:center}
 .ortsklar-home .hero h1{font-size:clamp(39px,3.6vw,50px);line-height:1.06;max-width:16ch}
 .ortsklar-home .hero-lead{font-size:17px;line-height:1.5;max-width:50ch}
 .ortsklar-home .hero .hero-art{gap:8px}
 .ortsklar-home .hero .art-caption{max-width:290px;font-size:14px}
 .ortsklar-home .hero .search-demo{width:min(100%,280px);padding:8px;border-radius:36px}
 .ortsklar-home .search-demo-screen{border-radius:28px;padding:12px 10px}
 .ortsklar-home .search-demo-notch{height:15px;width:70px;margin:-4px auto 8px}
 .ortsklar-home .search-demo-query{min-height:35px;padding:7px 10px}
 .ortsklar-home .search-demo-map{height:68px;margin-top:8px}
 .ortsklar-home .search-demo-results{height:219px;margin-top:8px}
 .ortsklar-home .search-demo-result{min-height:68px;grid-template-columns:46px minmax(0,1fr);gap:8px;padding:6px;transform:translateY(calc(var(--index) * 74px))}
 .ortsklar-home .search-demo-thumb{min-height:54px}
 .ortsklar-home .search-demo-note{max-width:33ch;font-size:14px;line-height:1.4}
 .ortsklar-home .check-grid,.ortsklar-home .process-grid,.ortsklar-home .faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:start}
 .ortsklar-home .check-grid>.report,.ortsklar-home .process-grid>.process-list,.ortsklar-home .faq-grid>.faq{grid-column:1;grid-row:1}
 .ortsklar-home .check-grid>.check-copy,.ortsklar-home .process-grid>div:first-child,.ortsklar-home .faq-grid>div:first-child{grid-column:2;grid-row:1}
 .ortsklar-home .check-grid>.report{justify-self:start}
 .ortsklar-home .security-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ortsklar-home .website-examples{grid-template-columns:minmax(0,1fr);max-width:760px}
}
/* Der graue Einstieg füllt auf schmalen Bildschirmen die Breite. */
@media(max-width:767px){
 .ortsklar-home .hero .hero-grid{width:100%;max-width:none;margin-inline:0;border-radius:0;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
.ortsklar-home .opening-inner h2 em{color:#b3261e;font-style:normal}
@media(min-width:900px){.ortsklar-home .search-demo-thumb img{height:54px}}

/* Bauauftrag 10.11.: einheitlicher Rhythmus und klare Abschnittshierarchie. */
.ortsklar-home main section[id]{scroll-margin-top:110px}
.ortsklar-home .section{padding-block:clamp(64px,7vw,96px)}
.ortsklar-home .problem,.ortsklar-home .opening-section,.ortsklar-home .example-section,.ortsklar-home .security,.ortsklar-home .faq-section,.ortsklar-home .contact{background:#fff}
.ortsklar-home .check-section,.ortsklar-home .pricing,.ortsklar-home .process,.ortsklar-home .promise-section{background:#f1f2ef}
.ortsklar-home h2 em{color:inherit;font-style:normal}
.ortsklar-home .hero-cta-note,.ortsklar-home .check-cta-note{font-size:14px;line-height:1.45;color:#565a60;max-width:46ch}
.ortsklar-home .hero-actions{gap:10px}
.ortsklar-home .report{transform:none;max-width:100%}
.ortsklar-home .pricing-head{align-items:start}
.ortsklar-home .price-card{background:#fff}
.ortsklar-home .price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ortsklar-home .pilot-box{margin-top:20px;padding:24px;border:1px solid #cfd1cc;border-radius:18px;background:#fff}
.ortsklar-home .pilot-box h3{font-size:20px}
.ortsklar-home .pilot-box p{margin-top:8px;max-width:70ch;color:#565a60}
.ortsklar-home .pilot-box .text-link{margin-top:8px;color:var(--ink)}
.ortsklar-home .example-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.ortsklar-home .example-copy>p:not(.micro){margin-top:24px;max-width:55ch;color:var(--muted)}
.ortsklar-home .example-copy>.text-link{margin-top:20px}
.ortsklar-home .website-examples{grid-template-columns:minmax(0,1fr);width:100%;max-width:600px;margin:0}
.ortsklar-home .website-example-screen{max-width:100%}
.ortsklar-home .opening-inner{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:24px}
.ortsklar-home .opening-copy p{max-width:65ch}
.ortsklar-home .opening-copy .text-link{margin-top:18px}
.ortsklar-home .promise-heading{text-align:center}
.ortsklar-home .promise-heading p:not(.micro){margin:18px auto 0;max-width:65ch;color:var(--muted)}
.ortsklar-home .promise-grid>div{background:#fff}
.ortsklar-home .security-point,.ortsklar-home .security-details{background:#f1f2ef}
.ortsklar-home .contact-panel{align-items:center}
.ortsklar-home .contact-side{align-self:center}
.ortsklar-home .contact-side p:first-child{margin-top:0}
.ortsklar-home .contact-side p{max-width:35ch;color:var(--muted)}
.ortsklar-home .section h2{overflow-wrap:break-word}

@media(max-width:899px){
 .ortsklar-home .editorial-grid,.ortsklar-home .check-grid,.ortsklar-home .process-grid,.ortsklar-home .security-grid,.ortsklar-home .faq-grid{grid-template-columns:minmax(0,1fr);align-items:start}
 .ortsklar-home .check-grid,.ortsklar-home .process-grid,.ortsklar-home .security-grid,.ortsklar-home .faq-grid,.ortsklar-home .editorial-grid{gap:36px}
 .ortsklar-home .price-grid{grid-template-columns:1fr}
 .ortsklar-home .pricing-head{display:block}
 .ortsklar-home .pricing-head>p{max-width:55ch;margin-top:18px}
 .ortsklar-home .contact-panel{grid-template-columns:minmax(0,1fr);gap:32px}
 .ortsklar-home .website-examples{max-width:none}
}
@media(min-width:900px){
 .ortsklar-home .editorial-grid,.ortsklar-home .opening-inner,.ortsklar-home .example-grid,.ortsklar-home .security-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:start}
 .ortsklar-home .check-grid,.ortsklar-home .process-grid,.ortsklar-home .faq-grid{align-items:start}
 .ortsklar-home .pricing-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:start}
 .ortsklar-home .pricing-head>div{grid-column:2;grid-row:1}
 .ortsklar-home .pricing-head>p{grid-column:1;grid-row:1;max-width:48ch}
 .ortsklar-home .website-examples{max-width:600px}
 .ortsklar-home .hero-intro{margin-bottom:18px}
 .ortsklar-home .hero-lead{margin-top:20px}
 .ortsklar-home .hero .hero-assurance{margin-top:12px}
}
@media(max-width:767px){
 .ortsklar-home .hero .hero-grid{width:100%;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
 .ortsklar-home .hero-cta-note{width:100%}
 .ortsklar-home .example-grid{gap:28px}
}
/* Die Hinweise stehen direkt bei den zugehörigen Aktionen. */
.ortsklar-home .hero .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.ortsklar-home .hero .hero-actions .hero-cta-note{grid-column:1}
.ortsklar-home .opening-inner h2 em{color:inherit}
.ortsklar-home .examples-links a,.ortsklar-home .website-example-kicker,.ortsklar-home .website-example-link,.ortsklar-home .problem-icon,.ortsklar-home .faq summary:after,.ortsklar-home .security-details summary:after,.ortsklar-home .promise-grid .no li:before,.ortsklar-home .promise-grid>div:last-child h3{color:var(--ink)}
.ortsklar-home .recommended{color:var(--ink);background:#e9ebe6}
.ortsklar-home .price-card.featured{box-shadow:0 0 0 2px #686c66,0 20px 40px -32px rgba(27,28,31,.3)}
.ortsklar-home .score,.ortsklar-home .status.missing{color:var(--ink);background:#f1f2ef}
@media(max-width:600px){.ortsklar-home .hero .hero-actions{justify-items:stretch}}

/* Finale Textfassung: Ausrichtung und Hinweise. */
@media (min-width:900px){
 .ortsklar-home .promise-heading .micro{width:fit-content;margin-inline:auto}
}
@media (max-width:899px){
 .ortsklar-home .promise-heading{text-align:left}
 .ortsklar-home .promise-heading .micro{margin-inline:0}
 .ortsklar-home .promise-heading p:not(.micro){margin-inline:0}
 .ortsklar-home .website-example-screen{width:100%}
}
.ortsklar-home .hero-followup-note,.ortsklar-home .contact-panel .contact-followup-note{font-family:var(--body);font-size:14px;font-weight:400;line-height:1.45;color:#565a60;max-width:46ch;margin-top:12px}

/* Runde 3: Nebenaktionen teilen sich dieselbe, gut erreichbare Gestaltung. */
.ortsklar-home a.arrow-link,
.ortsklar-home .pilot-box a.arrow-link,
.ortsklar-home .hero .hero-actions a.arrow-link{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:.45em;
  min-height:44px;max-width:100%;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--red-ink);box-shadow:none;
  font:700 16px/1.5 var(--body);text-decoration:none;text-underline-offset:4px;
}
.ortsklar-home a.arrow-link span{color:inherit;font-size:1em}
.ortsklar-home a.arrow-link:hover,
.ortsklar-home a.arrow-link:focus-visible{text-decoration:underline}

/* Der Pilot ist eine einzelne farbige Fläche innerhalb des Preisrasters. */
.ortsklar-home .pilot-box{background:#fbeeed;border-color:#f2c9c5;color:var(--ink)}
.ortsklar-home .pilot-box p{color:var(--ink)}
.ortsklar-home .decision-line,.ortsklar-home .video-line{display:flex;align-items:center;flex-wrap:wrap;column-gap:16px;margin-top:20px}
.ortsklar-home .terms-details{margin-top:18px}
.ortsklar-home .terms-details summary{min-height:44px;cursor:pointer;font-weight:700}
.ortsklar-home .terms-details p,.ortsklar-home .terms-details ul{max-width:70ch}
.ortsklar-home .problem-note{margin-top:18px;color:var(--muted);font-size:14px;line-height:1.5}

/* Zwei klare Punkte statt Karten; die Anleitung bleibt separat aufklappbar. */
.ortsklar-home .security-point{position:relative;padding:0 0 0 28px;background:transparent;border:0;border-radius:0}
.ortsklar-home .security-point::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-size:18px;font-weight:700}

/* Auf der dunklen Karte sind Text und Kontaktlink hell und kontrastreich. */
.ortsklar-home .contact-panel{background:var(--ink);border-color:var(--ink)}
.ortsklar-home .contact-panel h2,
.ortsklar-home .contact-panel>div>p:not(.micro),
.ortsklar-home .contact-panel .micro{color:#fff}
.ortsklar-home .contact-panel .contact-followup-note{color:#c9cbd0}
.ortsklar-home .contact-panel .contact-side{border:0;padding-top:0}
.ortsklar-home .contact-panel .contact-side p{color:#fff}
.ortsklar-home .contact-panel .contact-side a.arrow-link{color:#fff}
.ortsklar-home .contact-panel a.arrow-link:focus-visible{outline-color:#fff}

/* Desktop: gleich hohe Suchergebnisse mit ausreichendem Abstand. */
@media (min-width:1024px){
 .ortsklar-home .search-demo-results{height:304px}
 .ortsklar-home .search-demo-result{
  height:96px;min-height:96px;
  transform:translateY(calc(var(--index) * 104px));
  transition:border-color .6s ease,box-shadow .6s ease;
 }
 .ortsklar-home .search-demo-thumb{height:100%;min-height:0}
 .ortsklar-home .search-demo-thumb img{height:100%;object-fit:cover}
}

/* Gleiche Preisposition in den nebeneinanderstehenden Paketen. */
@media (min-width:900px){
 .ortsklar-home .price-card .price-top{display:grid;grid-template-rows:auto 34px auto 1fr;align-content:start}
 .ortsklar-home .price-top h3{grid-row:1}
 .ortsklar-home .price-top .price-subtitle{grid-row:2}
 .ortsklar-home .price-top > strong{grid-row:3}
 .ortsklar-home .price-top > p:not(.price-subtitle){grid-row:4}
}

/* Bedingungen erhalten dieselbe Aufklapp-Markierung wie die FAQ. */
.ortsklar-home .terms-details summary{
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 min-height:64px;padding:19px 0;list-style:none;cursor:pointer;
 font:600 18px/1.3 var(--display);
}
.ortsklar-home .terms-details summary::-webkit-details-marker{display:none}
.ortsklar-home .terms-details summary::after{content:'+';font:400 25px var(--body);color:var(--ink);flex:none}
.ortsklar-home .terms-details[open] summary::after{content:'−'}

/* Ortsklar: Beispiel-Karussell. Nur in layout.css anhängen, keine anderen Dateien ändern. */
.demo-carousel{--dc-card:clamp(188px,24vw,300px);position:relative;width:100%;margin-top:40px}
/* Ohne JavaScript: waagrechte Liste mit Einrasten */
.dc-frame{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;outline:none}
.dc-track{display:flex;gap:16px;margin:0;padding:8px 0 16px;list-style:none}
.dc-card{flex:0 0 var(--dc-card);scroll-snap-align:center}
.dc-card a{display:block;color:inherit;text-decoration:none}
.dc-card img{display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:top;border-radius:16px;background:#ececec;box-shadow:0 18px 40px rgba(20,20,20,.16)}
.dc-card .dc-card-caption{margin:12px 2px 0;font-size:15px;line-height:1.4}
.dc-card .dc-card-caption strong{display:block}
.dc-caption,.dc-dots,.dc-prev,.dc-next{display:none}
/* Mit JavaScript: Coverflow */
.demo-carousel.is-coverflow .dc-frame{overflow:hidden;padding:40px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);cursor:grab;touch-action:pan-y;perspective:calc(var(--dc-card) * 3)}
.demo-carousel.is-coverflow .dc-frame:active{cursor:grabbing}
.demo-carousel.is-coverflow .dc-frame:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:16px}
.demo-carousel.is-coverflow .dc-track{display:block;position:relative;height:calc(var(--dc-card) * 1.25);padding:0;transform-style:preserve-3d;user-select:none;-webkit-user-select:none}
.demo-carousel.is-coverflow .dc-card{position:absolute;top:0;left:50%;width:var(--dc-card);will-change:transform}
.demo-carousel.is-coverflow .dc-card img{pointer-events:none;-webkit-user-drag:none}
.demo-carousel.is-coverflow .dc-card-caption{display:none}
.demo-carousel.is-coverflow .dc-caption{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:96px;margin-top:4px}
.dc-title{margin:0;font-weight:700;font-size:17px;line-height:1.3}
.dc-sub{margin:4px 0 10px;font-size:15px;line-height:1.4;opacity:.72}
.demo-carousel.is-coverflow .dc-prev,.demo-carousel.is-coverflow .dc-next{display:grid;place-items:center;position:absolute;top:calc(40px + var(--dc-card) * .625);transform:translateY(-50%);z-index:200;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.86);color:#1b1c1f;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.demo-carousel.is-coverflow .dc-prev{left:4px}
.demo-carousel.is-coverflow .dc-next{right:4px}
.dc-prev:focus-visible,.dc-next:focus-visible,.dc-dot:focus-visible{outline:2px solid #1b1c1f;outline-offset:3px}
.demo-carousel.is-coverflow .dc-dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
.dc-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dc-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#1b1c1f;opacity:.25;transition:opacity .2s}
.dc-dot[aria-current="true"]::before{opacity:1}
@media (max-width:767px){.demo-carousel{--dc-card:min(62vw,260px)}.demo-carousel.is-coverflow .dc-prev,.demo-carousel.is-coverflow .dc-next{display:none}}
@media (prefers-reduced-motion:reduce){.dc-dot::before{transition:none}}