/* =====================================================================
   OBJEKTFINDER · Immobilienservice OWL
   Gemeinsame Gestaltung der Suchmaske für Startseite, Immobilienseite
   und die Seite „Objekt suchen".

   Zwei Größen:
     .ofinder            Standard (Immobilienseite, Objekt suchen)
     .ofinder.klein      gedrängt, für die Startseite
   ===================================================================== */

.ofinder{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 26px 22px;
  box-shadow:0 14px 40px rgba(20,15,5,.12);
}
[data-theme="dark"] .ofinder{background:#1b1813}

/* Kopfzeile mit Name des Werkzeugs */
.ofinder .of-kopf{display:flex;align-items:center;gap:13px;margin-bottom:18px;flex-wrap:wrap}
/* Sinnbild: Zauberstab mit Lupe. Drei Sterne funkeln – die Bewegung
   steckt in der SVG-Datei selbst, nicht hier. */
.ofinder .of-mark{flex:0 0 auto;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.ofinder .of-mark img{width:100%;height:100%;display:block}
.ofinder .of-name{font-family:'Cochin','Baskerville','Constantia','Palatino Linotype',Georgia,serif;
  font-size:1.32rem;line-height:1.1}
.ofinder .of-name em{font-style:italic;color:var(--gold-deep)}
[data-theme="dark"] .ofinder .of-name em{color:var(--gold-soft)}
.ofinder .of-sub{font-size:.82rem;color:var(--muted);margin-left:auto;text-align:right}
.ofinder.klein .of-kopf{margin-bottom:13px}
.ofinder.klein .of-name{font-size:1.08rem}
.ofinder.klein .of-mark{width:44px;height:44px}

/* Felder */
.ofinder .of-reihe{display:grid;gap:11px;margin-bottom:11px}
.ofinder .of-r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ofinder .of-r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ofinder .of-r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ofinder label{display:block;font-size:.7rem;letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.ofinder input,.ofinder select{
  width:100%;height:44px;padding:0 12px;font-family:inherit;font-size:.92rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s,box-shadow .2s}
[data-theme="dark"] .ofinder input,[data-theme="dark"] .ofinder select{background:#141210;color:var(--cream);border-color:#3a332a}
.ofinder input:focus,.ofinder select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(195,154,74,.22)}
.ofinder.klein input,.ofinder.klein select{height:40px;font-size:.88rem}

/* Schalter kaufen / mieten */
.ofinder .of-modus{display:inline-flex;border:1px solid var(--line);border-radius:30px;overflow:hidden;
  background:#fff;margin-bottom:14px}
[data-theme="dark"] .ofinder .of-modus{background:#141210;border-color:#3a332a}
.ofinder .of-modus button{border:none;background:transparent;font-family:inherit;font-size:.84rem;
  letter-spacing:.03em;color:var(--muted);padding:9px 20px;cursor:pointer;transition:.2s}
.ofinder .of-modus button.on{background:var(--gold);color:#fff}

/* Aktionszeile */
.ofinder .of-fuss{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.ofinder .of-los{height:46px;padding:0 30px;border:none;border-radius:10px;background:var(--gold);
  color:#fff;font-family:inherit;font-size:.88rem;font-weight:600;letter-spacing:.04em;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:.25s}
.ofinder .of-los:hover{background:var(--gold-deep)}
.ofinder .of-los svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.ofinder .of-reset{background:none;border:none;font-family:inherit;font-size:.8rem;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.ofinder .of-treffer{margin-left:auto;font-size:.84rem;color:var(--muted)}
.ofinder .of-treffer b{color:var(--gold-deep);font-size:1.02rem}
[data-theme="dark"] .ofinder .of-treffer b{color:var(--gold-soft)}

/* Verweis auf den Suchauftrag */
.ofinder .of-hinweis{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.83rem;color:var(--muted);line-height:1.55}
.ofinder .of-hinweis a{color:var(--gold-deep);font-weight:600}
[data-theme="dark"] .ofinder .of-hinweis a{color:var(--gold-soft)}

/* „Neu"-Kennzeichnung */
.neu-fahne{display:inline-block;background:var(--gold);color:#fff;font-size:.56rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:20px;
  vertical-align:2px;margin-left:6px;line-height:1.5}

@media(max-width:960px){
  .ofinder .of-r4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ofinder .of-r3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .ofinder{padding:20px 17px 18px;border-radius:13px}
  .ofinder .of-r4,.ofinder .of-r3,.ofinder .of-r2{grid-template-columns:1fr}
  .ofinder .of-sub{margin-left:0;text-align:left;width:100%}
  .ofinder .of-los{width:100%;justify-content:center}
  .ofinder .of-treffer{margin-left:0;width:100%}
}